@charset "UTF-8";
/* CSS Document */




/* canvas */
canvas {
	width: 100%;
	position: fixed;
	top: 50%;
	left: 0;
	transform: translateY(-50%) translateX(0);
	-webkit-transform: translateY(-50%) translateX(0);
	z-index: -1;
}



	
	
/* fv
--------------------- */
#fv {
	width: 100%;
	height: 100vh;
}
#fv .inner_max {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;
}
	#fv .text {
		width: 100%;
		position: relative;
		text-align: center;
	}
		#fv .text h1 {
			font-size: 7.0rem;
			line-height: 1.4em;
			letter-spacing: 0;
			margin-bottom: 5px;
		}
			#fv .text h1 img {
				max-width: 1034px;
				width: 100%;
			}

		#fv .text p {
			font-size: 3.0rem;
			font-weight: 700;
			line-height: 1;
			letter-spacing: 0.12em;
		}
			#fv .text p img {
				max-width: 730px;
				width: 80%;
			}


	#fv .scroll {
		width: 28px;
		position: absolute;
		bottom: 20px;
		left: 50%;
		margin-left: -14px;
	}


	#fv .smoothTextTrigger{
		transition: 1.2s ease-in-out;
	}

	
	
/* message
--------------------- */
#message {
	width: 100%;
	margin-top: 100px;
	padding: 180px 0 300px 0;
	background: url("../img/bg.png") repeat-x 0 0;
	animation-duration: 200s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-name: slide_img;
	position: relative;
}
#message:before {
	content: "";
	width: 1px;
	height: 100px;
	background: #ddd;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -0.5px;
}
@keyframes slide_img {
	100% {
		background-position: -10000px 0;
	}
}
	#message h2 {
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1.8em;
		text-align: center;
		margin-bottom: 20px;
	}



	
	
/* h2_tit
--------------------- */
.h2_tit {
	font-size: 8.0rem;
	letter-spacing: 0.06em;
	line-height: 1;
	margin-bottom: 40px;
}



	
	
/* works
--------------------- */
#works {
	width: 100%;
	padding: 470px 0 400px 0;
	position: relative;
}
#works:before {
	content: "";
	width: 1px;
	height: 100px;
	background: #ddd;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -0.5px;
}
	#works .pht01 {
		width: 520px;
		position: absolute;
		top: -410px;
		left: 0px;
	}
		#works .pht01 a:hover{
			opacity: 0.7;
		}
		#works .pht01 img {
			box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 40px -7px;
		}

	#works .pht02 {
		width: 400px;
		position: absolute;
		top: -250px;
		right: 120px;
	}
		#works .pht02 a:hover{
			opacity: 0.7;
		}
		#works .pht02 img {
			box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 40px -7px;
		}


	#works .text {
		width: -webkit-calc(100% - 430px);
		width: calc(100% - 430px);
		padding-bottom: 140px;
	}
		#works .text .txt {
			margin-bottom: 15px;
		}


	#works .swiper-container {
		padding: 0 100px;
		position: relative;
	}
		#works .swiper-slide {
			overflow: hidden;
			transition: .7s;
			box-shadow: rgba(0, 0, 0, 0.1) 0px 30px 40px -7px;
		}
			#works .swiper-slide a:hover {
				opacity: 0.7;
			}
			#works .swiper-slide img {
				width: 100%;
			}
			#works .swiper-slide-active {
				opacity: 1;
				z-index: 1;
				transform: scale(1.5);
			}

		#works .swiper-pagination {
			bottom: -110px;
		}
			#works .swiper-pagination-bullet {
				background: #fff;
				border: solid 1px #000;
				opacity: 1.0;
			}
			#works .swiper-pagination-bullet.swiper-pagination-bullet-active {
				background: #000;
			}



	
	
/* business
--------------------- */
#business {
	width: 100%;
	padding: 200px 0 300px 0;
	position: relative;
}
#business:before {
	content: "";
	width: 1px;
	height: 100px;
	background: #ddd;
	position: absolute;
	bottom: 0;
	left: 50%;
	margin-left: -0.5px;
}
	#business .text {
		width: -webkit-calc(100% - 430px);
		width: calc(100% - 430px);
	}
		#business .text .txt {
			margin-bottom: 15px;
		}



	
	
/* recruit
--------------------- */
#recruit {
	width: 100%;
	padding: 200px 0 300px 0;
	position: relative;
}
	#recruit .text {
		width: -webkit-calc(100% - 430px);
		width: calc(100% - 430px);
	}
		#recruit .text .txt {
			margin-bottom: 15px;
		}





/* 1400px */
@media screen and (max-width: 1400px) {



	
	
/* fv
--------------------- */
#fv .text h1 {
	font-size: 6.0rem;
}

#fv .text p {
	font-size: 2.6rem;
}



	
	
/* works
--------------------- */
#works {
	padding: 470px 0 380px 0;
}
	#works .pht01 {
		width: 450px;
		left: 5%;
	}
	#works .pht02 {
		width: 350px;
		right: 10%;
	}
	
	
	#works .swiper-container {
		padding: 0 0;
		position: relative;
	}
		#works .swiper-pagination {
			bottom: -90px;
		}







}












/* 1024px */
@media screen and (max-width: 1024px) {



	
	
/* fv
--------------------- */
#fv .text h1 {
	font-size: 4.6rem;
}

#fv .text p {
	font-size: 2.0rem;
}



	
	
/* message
--------------------- */
#message {
	margin-top: 100px;
	padding: 130px 0 200px 0;
}
	#message h2 {
		font-size: 2.0rem;
		margin-bottom: 20px;
	}



	
	
/* h2_tit
--------------------- */
.h2_tit {
	font-size: 6.0rem;
	margin-bottom: 30px;
}



	
	
/* works
--------------------- */
#works {
	padding: 150px 0 170px 0;
}
#works .inner {
	display: block;
}
	#works .pht01 {
		width: 380px;
		top: -280px;
		left: 0;
	}
	#works .pht02 {
		width: 280px;
		top: -140px;
		right: 0;
	}


	#works .text {
		width: 100%;
		padding-bottom: 0;
	}
		#works .text .txt {
			margin-bottom: 15px;
		}


	#works .swiper-container {
		padding: 100px 100px 140px 100px;
		overflow: hidden;
	}
		#works .swiper-pagination {
			bottom: 40px;
		}



	
	
/* business
--------------------- */
#business {
	padding: 100px 0 200px 0;
}
#business .inner {
	display: block;
}
	#business .text {
		width: 100%;
	}



	
	
/* recruit
--------------------- */
#recruit {
	padding: 100px 0 150px 0;
}
#recruit .inner {
	display: block;
}
	#recruit .text {
		width: 100%;
	}





}

	







/* max 767px */
@media screen and (max-width: 767px) {



	
	
/* fv
--------------------- */
#fv .inner_max  {
	height: 90vh;
}
	#fv .text h1 {
		font-size: 2.8rem;
		line-height: 1.2em;
		text-align: left;
		margin-bottom: 15px;
	}

	#fv .text p {
		font-size: 1.4rem;
		text-align: left;
	}
		#fv .text p img {
			width: 100%;
		}



	
	
/* message
--------------------- */
#message {
	margin-top: 100px;
	padding-top: 80px;
	background: url("../img/bg.png") repeat-x 0 0 / 2000px;
}
	#message h2 {
		font-size: 2.0rem;
		text-align: left;
	}
	
	#message .en_txt {
		text-align: left;
	}



	
	
/* works
--------------------- */
#works  {
	padding-top: 100px;
}
#works .inner {
	padding-bottom: 60px;
}
#works .pick {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	margin-bottom: 10px;
}
	#works .pht01 {
		width: 55%;
		position: static;
	}
	#works .pht02 {
		width: 40%;
		position: static;
		margin-top: 20%;
	}
	
#works .text {
	padding-bottom: 0;
}
	
#works .swiper-container {
	padding: 0 5% 100px 5%;
}
	#works .swiper-slide-active {
		transform: scale(1);
	}
	
	#works .swiper-pagination {
		bottom: 40px;
	}







}