@charset "UTF-8";

#mv{
}
	.mvImg {
	    width: 100vw;
	    height: calc(100vh - 180px);
	    overflow: hidden;
	    position: relative;
	}
		.mvSlide,
		.mvSlide li{
			position: relative;
			z-index: 0;
			width: 100%;
			height: 100%;
		}
		.mvImg .bx-wrapper,
		.mvImg .bx-viewport{
			height: 100%;
		}
		.mvSlide1{ background: url(../../img/home/pc/img_mv1.png) no-repeat center/cover; }
		.mvSlide2{ background: url(../../img/home/pc/img_mv2.png) no-repeat center/cover; }
		.mvSlide3{ background: url(../../img/home/pc/img_mv3.png) no-repeat center/cover; }
		.mvSlide4{ background: url(../../img/home/pc/img_mv4.png) no-repeat center/cover; }

		/*.mvImg video {
		    position: absolute;
		    z-index: -1;
		}
		@media (aspect-ratio: 17/9), (min-aspect-ratio: 17/9) {
			.mvImg video {
				width: 100%;
				height: auto;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
			}
		}
		@media (max-aspect-ratio: 17/9) {
			.mvImg video {
				width: auto;
				height: 125%;
				left: 50%;
				transform: translateX(-50%);
			}
		}*/

  		.mvImg h2{
			position: absolute;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(23,18,15,.4);
		}
			.mvImg h2 img{
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				transform: translateY(-50%);
				margin: auto;
				width: 87.5%;
				max-width: 660px;
			}

		.mvImg .scroll{
			position: absolute;
			z-index: 1;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 62px;
		}
			.mvImg .scroll img{
				display: block;
			}
			.mvImg .scroll .border{
				width: 1px;
				height: 60px;
				margin: 15px auto 0;
				overflow: hidden;
				position: relative;
			}
				.mvImg .scroll .border:before{
					content: "";
					position: absolute;
					top: -100%;
					left: 0;
					width: 100%;
					height: 100%;
					background: rgba(255,255,255,.5);
					animation: mvScroll 2s infinite;
				}
				@keyframes mvScroll{
					0%{ top: -100%; }
					100%{ top: 100%; }
				}
@media screen and (max-width: 768px){
	#mv{
		overflow: hidden;
	}
	.mvSlide,
	.mvSlide li,
	.mvImg .bx-wrapper,
	.mvImg .bx-viewport{
		height: 100vh;
	}
	.mvSlide1{ background: url(../../img/home/sp/img_mv1.png) no-repeat center/cover; }
	.mvSlide2{ background: url(../../img/home/sp/img_mv2.png) no-repeat center/cover; }
	.mvSlide3{ background: url(../../img/home/sp/img_mv3.png) no-repeat center/cover; }
	.mvSlide4{ background: url(../../img/home/sp/img_mv4.png) no-repeat center/cover; }
}
				


#catch{
	background: #231815;
	padding-top: 90px;
	padding-bottom: 110px;
}
	#catch h3{
		color: #d3d1d0;
		font-size: 40px;
		font-weight: 300;
		line-height: 2;
		position: relative;
	}
	#catch h3:before{
		content: "";
		position: absolute;
		bottom: -40px;
		left: 0;
		right: 0;
		margin: auto;
		width: 20px;
		height: 20px;
		background: url(../../img/common/pc/icon_4sq.png) no-repeat center/contain;
	}
		#catch h3 span{
			display: block;
			font-size: 26px;
			font-weight: normal;
			letter-spacing: .05em;
		}
	#catch .secTxt{
		color: #bdbab9;
		margin-top: 65px;
	}
	#catch h4{
		color: #d3d1d0;
		font-size: 30px;
		font-weight: 300;
		line-height: 1.73;
		padding-top: 45px;
		margin-top: 55px;
		position: relative;
	}
	#catch h4:before{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 120px;
		height: 1px;
		background: #d2c47e;
	}
	#catch h4 + .secTxt {
	    margin-top: 20px;
	}
@media screen and (max-width: 768px){
	#catch{
		padding-top: 50px;
		padding-bottom: 60px;
	}
	#catch h3{
		font-size: 25px;
	}
	#catch h3 span{
		font-size: 18px;
	}
	#catch h4{
		font-size: 20px;
		padding-top: 30px;
		margin-top: 35px;
	}
}



#secrecy{
	background-image: url(../../img/home/pc/bg_secrecy.jpg);
}
	#secrecy .secTtl span{
		width: 134px;
		margin: 7px auto 0;
	}



#prac{
	padding-top: 130px;
	padding-bottom: 70px;
}
	#prac .secTtl span{
		width: 110px;
		margin: 7px auto 0;
	}
	.pracList{
		margin-top: 80px;
	}
		.pracList > li{
			width: 46.363636%;
			margin-bottom: 80px;
			text-align: left;
		}
			.pracList .photo{
				width: 43.1372549%;
			}
			.pracList .txt{
				width: 49.0196078%;
			}
				.pracList h4{
					color: #231815;
					font-size: 24px;
					letter-spacing: 0;
					line-height: 1;
					box-sizing: border-box;
					padding-left: 30px;
					margin-top: -3px;
					position: relative;
				}
				.pracList h4:before{
					content: "";
					position: absolute;
					left: 0;
					top: 3px;
					width: 20px;
					height: 20px;
					background: url(../../img/common/pc/icon_4sq.png) no-repeat center/contain;
				}
				.pracList p{
					font-size: 16px;
					letter-spacing: 0;
					line-height: 2;
					margin-top: 14px;
				}
				.pracList .btn{
					height: 50px;
					font-size: 18px;
					padding: 14px 10px;
					margin-top: 18px;
				}
@media screen and (max-width: 1024px){
	#prac{
		padding-top: 70px;
		padding-bottom: 40px;
	}
	#prac .pc{
		display: none !important;
	}
	#prac .sp-bl{
		display: block;
	}
	#prac .inner{
		max-width: 560px;
	}
	.pracList{
		margin-top: 50px;
	}
	.pracList > li{
		width: 100%;
		margin-bottom: 50px;
	}
	.pracList .txt{
		width: 100%;
	}
	.pracList h4{
		font-size: 20px;
		margin-top: 0;
		margin-bottom: 15px;
		padding-left: 25px;
	}
	.pracList h4:before{
		top: 2px;
		width: 17px;
		height: 17px;
	}
	.pracList p{
		font-size: 14px;
	}
	.pracList .btn{
		height: 55px;
		font-size: 16px;
		padding: 19px 10px;
		width: 260px;
	}
}



#spr{
	background-image: url(../../img/home/pc/bg_spr.jpg);
}
	#spr .secTtl span{
		width: 54px;
		margin: 7px auto 0;
	}



#soju{
	padding-top: 130px;
	padding-bottom: 150px;
}
	#soju .secTtl span{
		width: 126px;
		margin: 7px auto 0;
	}
	.sojuList{
		margin-top: 80px;
	}
		.sojuList > li{
			width: 28.545454%;
			align-self: stretch;
			flex-direction: column;
		}
			.sojuList a{
				width: 100%;
			}
			.sojuList p{
				font-size: 16px;
				letter-spacing: .05em;
				line-height: 2;
				text-align: left;
				margin-top: 22px;
				margin-bottom: 25px;
			}
			.sojuList .btn{
				margin-top: auto;
				margin-bottom: 0;
			}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
	.sojuList > li{
		align-self: flex-start;
		flex-direction: row;
	}
}
@media screen and (max-width: 1024px){
	#soju{
		padding-top: 70px;
		padding-bottom: 70px;
	}
	#soju .inner{
		max-width: 560px;
	}
	.sojuList{
		margin-top: 40px;
	}
	.sojuList > li{
		width: 100%;
	}
	.sojuList > li + li{
		margin-top: 60px;
	}
	.sojuList p{
		font-size: 14px;
		margin-top: 14px;
		margin-bottom: 16px;
	}
	.sojuList .btn{
		width: 260px;
	}
}



/* 共通 */
.sqBox{
	height: 780px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
.sqBox:before{
	content: "";
	background: rgba(255,255,255,.8);
	width: 707px;
	height: 707px;
	transform: rotate(45deg);
	transform-origin: center;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
	.sqBox > div{
		position: relative;
		z-index: 2;
		justify-content: center;
		align-content: center;
		height: 100%;
	}
		.sqBox .secTtl{
			width: 100%;
		}
		.sqBox .secTxt{
			width: 100%;
			margin-top: 40px;
		}
		.sqBox .btn{
			width: 300px;
			margin-top: 38px;
		}
@media screen and (max-width: 768px){
	.sqBox{
		height: auto;
		padding-top: 80px;
		padding-bottom: 90px;
	}
	.sqBox:before{
		width: 110%;
		height: 0;
		padding-top: 110%;
		left: -5%;
	}
	.sqBox .secTxt{
		margin-top: 25px;
	}
	.sqBox .btn{
		width: 260px;
		margin-top: 25px;
	}
}



/* animation */
.mvImg h2 img.fadeIn{
	animation-delay: .5s;
	animation-duration: 1s;
}
.sqBox > div.fadeIn{
	animation-delay: .5s;
	animation-duration: 1s;
}
.pracList > li:nth-child(2).fadeIn{
	animation-delay: .3s;
}
.pracList > li:nth-child(3).fadeIn{
	animation-delay: .6s;
}
.pracList > li:nth-child(4).fadeIn{
	animation-delay: .9s;
}
.sojuList > li:nth-child(2).fadeIn{
	animation-delay: .3s;
}
.sojuList > li:nth-child(3).fadeIn{
	animation-delay: .6s;
}
@media screen and (max-width: 768px){
	#prac .secTtl,
	#soju .secTtl{
		visibility: visible !important;
		opacity: 1 !important;
		animation: none !important;
	}
}