@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: contents.css
 * Summary:   ページ・コンテンツごとの固有スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *     =2    works
 *     =3    about
 *     =4    contact
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * home
 * ========================================
 */

#home {
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}


	/* [ heroIndex ]
	------------------------------ */
	.heroIndex.js-sliderIndex .image:not(:first-child) {
		display: none;
	}
	.heroIndex.js-sliderIndex.slick-initialized .image {
		display: block;
	}
	
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			.heroIndex {
				margin-bottom: 100px;
			}
			
			.heroIndex .image {
				position: relative;
				/* padding-top: 120%; */
				padding-top: 450px;
			}
			.heroIndex .image img {
				display: block;
				position: absolute;
				top: 0;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				width: auto;
				max-width: none;
				max-width: initial;
				height: 100%;
			}
		}
	
		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			.heroIndex {
				margin-bottom: 200px;
			}
		}
		
		
	/*
	 * News Feed
	 * ----------------------------------
	 */


/** =2
 * ========================================
 * works
 * ========================================
 */
#works {}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
		#works.graphic #main {
			padding-top: 15px;
		}
	}

	/* -- >>> styles for medium & wide layout ----- */
	@media screen and (min-width: 768px) {
		#works.graphic #main {
			padding-top: 30px;
		}
	}

	/*
	 * articleWorks
	 * ----------------------------------
	 */
	.articleWorks {}
	
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
		}
	
		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
		}
	
		/* [ sectionWorks ]
		------------------------------ */
		.sectionWorks {}
		.sectionWorks .itemText .title {
			letter-spacing: .2em;
			line-height: 1.65;
		}
		
			/* -- >>> styles for narrow layout ----- */
			@media screen and (max-width: 767px) {
				.sectionWorks + .sectionWorks {
					margin-top: 90px;
				}
				
				.sectionWorks .itemMovie,
				.sectionWorks .itemImage {
					margin-bottom: 20px;
				}
				
				.sectionWorks .itemImage.column2 .image {
					max-width: 225px;
					margin-right: auto;
					margin-left: auto;
				}
				.sectionWorks .itemImage.column2 .image + .image {
					margin-top: 5px;
				}
				
				.sectionWorks .itemText {
					margin-right: 5%;
					margin-left: 5%;
				}
				.sectionWorks .itemText .title {
					margin-bottom: 1.0em;
					font-size: 1.5rem;
				}
			}
		
			/* -- >>> styles for medium & wide layout ----- */
			@media screen and (min-width: 768px) {
				.sectionWorks + .sectionWorks {
					margin-top: 135px;
				}
				
				.sectionWorks .itemMovie,
				.sectionWorks .itemImage {
					margin-bottom: 40px;
				}
				
				.sectionWorks .itemImage.column2 .image {
					float: left;
					width: 49.76%;
					width: -webkit-calc( 1045/2100 * 100% );
					width: calc( 1045/2100 * 100% );
					margin-left: .48%;
					margin-left: -webkit-calc( 10/2100 * 100% );
					margin-left: calc( 10/2100 * 100% );
				}
				.sectionWorks .itemImage.column2 .image:nth-child(2n+1) {
					margin-left: 0;
				}
				
				.sectionWorks .itemText .title {
					float: left;
					width: 40%;
					width: -webkit-calc( 850/2100 * 100% );
					width: calc( 850/2100 * 100% );
					font-size: 17px;
					font-size: 1.7rem;
				}
				.sectionWorks .itemText .paragraph {
					float: right;
					/* width: 57%;
					width: -webkit-calc( 1200/2100 * 100% );
					width: calc( 1200/2100 * 100% ); */
					width: 260px;
				}
			}
			/* -- >>> styles for medium layout ----- */
			@media screen and (min-width: 768px) and (max-width: 1199px) {
				.sectionWorks .itemText {
					margin-right: 40px;
					margin-left: 40px;
				}
			}

/** =3
 * ========================================
 * about
 * ========================================
 */
#about {}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}

	/*
	 * articleAbout
	 * ----------------------------------
	 */
	.articleAbout {}
	.articleAboutTitle {
		margin-bottom: 40px;
	}
	
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			.articleAbout {
				margin-right: 5%;
				margin-left: 5%;
				/* padding-top: 50px; */
				padding-top: 30px;
			}
			.articleAboutTitle {
				font-size: 1.5rem;
			}
		}
	
		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			.articleAbout {
				max-width: 610px;
				margin-right: auto;
				margin-left: auto;
				/* padding-top: 120px;
				padding-top: 14vh; */
				padding-top: 100px;
			}
			.articleAboutTitle {
				font-size: 17px;
				font-size: 1.7rem;
			}
			.articleAboutContent {
				-webkit-transform: translateX(2.75em);
				transform: translateX(2.75em);
			}
		}
	

/** =3
 * ========================================
 * contact
 * ========================================
 */
#contact {}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 767px) {
	}

	/* -- >>> styles for medium layout ----- */
	@media screen and (min-width: 768px) and (max-width: 1199px) {
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 1200px) {
	}

	/*
	 * articleContact
	 * ----------------------------------
	 */
	.articleContact {}
	.articleContactTitle {
		margin-bottom: 40px;
	}
	
	.articleContact .textMail {
		margin-bottom: 40px;
	}
	
		/* -- >>> styles for narrow layout ----- */
		@media screen and (max-width: 767px) {
			.articleContact {
				margin-right: 5%;
				margin-left: 5%;
				/* padding-top: 50px; */
				padding-top: 30px;
			}
			.articleContactTitle {
				font-size: 1.5rem;
			}
		}
	
		/* -- >>> styles for medium & wide layout ----- */
		@media screen and (min-width: 768px) {
			.articleContact {
				max-width: 610px;
				margin-right: auto;
				margin-left: auto;
				/* padding-top: 120px;
				padding-top: 14vh; */
				padding-top: 100px;
			}
			.articleContactTitle {
				font-size: 17px;
				font-size: 1.7rem;
			}
		}