section, section *{ box-sizing:border-box; }
*{ box-sizing:border-box; }
.main_sc{
	width: 100%;
	position: relative;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.mc-con{
	width: 100%;
	padding: 0 100px;
	position: relative;
	z-index: 3;
}

/* scmain */
#scmain{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
	background-color: #282828;
}
.main-logo{
	display: flex;
	width: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 88;
	transition: .5s ease-in-out;
}
.main-logo img{
	width: 100%;
}
.main-logo.scr{
	opacity: 0;
}
.right{
	position: absolute;
	width: 100vw;
	height: 100vh;
	right: -5vw;
	top: 0;
	opacity: 1.0;
	transition: .7s;
}
.right::after{
	content: "";
	width: 105vw;
	height: 105vh;
	position: absolute;
	right: 0;
	top: 0;
	background-color: #222020;
	opacity: 0.2;
	transition: .7s;
	z-index: 3;
}
.right-slide{
	width: 100%;
	overflow: hidden;
}
.leftcover{
	width: calc(72vw - 2px);
	height: 105vh;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 1;
	transition: .7s;
	overflow: hidden;
}
.left{
	width: 72vw;
	height: 105vh;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 1;
	transition: .7s;
	mask-repeat: no-repeat;
	mask-image: url(../img/leftcover.png);
	mask-size: 100% 100%;
	mask-position: center;
	z-index: 3;
}
.left::after{
	content: "";
	width: 105vw;
	height: 105vh;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #222020;
	opacity: 0.2;
	transition: .7s;
	z-index: 3;
}
.left-slide{
	width: 100%;
	overflow: hidden;
}
.scmain-img{
	position: relative;
	overflow: hidden;
	height: 105vh;
	margin: 0 auto;
}
.scmain-img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: .8s;
	margin: 0 auto;
	animation: zoom 20s ease-in-out infinite;
}
@keyframes zoom{
	50%{
		transform: scale(1.1);
	}
}

.leftwrap{
	position: absolute;
	width: 50vw;
	height: 100vh;
	top: 0;
	left: 0;
	z-index: 4;
}
.rightwrap{
	position: absolute;
	width: 50vw;
	height: 100vh;
	top: 0;
	right: 0;
	z-index: 4;
}

.left.on{
	transform: scale(1.03);
}
.right.on{
	transform: scale(1.03);
}
.left.on::after{
	opacity: 0;
}
.right.on::after{
	opacity: 0;
}
.left.off::after{
	opacity: 0.7;
}
.right.off::after{
	opacity: 0.7;
}

/*sc01*/
#sc01{ background-color:#333; height: 100vh; position: relative; overflow: hidden;}
#sc01::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}

.main-wrap{width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 99; color: #f5f5f7; text-align: center;}

.main-caption > h2{font-size: 50px; font-weight: 800; line-height: 1.2; margin-bottom: 1rem;}
.main-caption > h5{font-size: 14px; font-weight: 400; position: relative; padding-bottom: 30px; margin-bottom: 60px; position: relative;}
.main-caption > p{font-size: 14px; font-weight: 400; line-height: 1.6;}
.main-caption > h5::after{
	content: "";
	width: 1px;
	height: 30px;
	background-color: #fff;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
}

.sc01Sli{ position:relative; z-index:1; background-color:#333; overflow:hidden; }
.sc01_bg{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_mbg{ display:none; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-color:#333; background-position:center; background-size:cover; background-repeat:no-repeat; }
.sc01_fr{ position:relative; z-index:1; min-height:max(600px,36.4583333vw); padding:150px 70px; display:flex; align-items:center; /*background-color:rgba(0,0,0,.35);*/ }

.sc01_txt{ max-width:1400px; width:100%; margin:0 auto; }
.sc01_txt > h2{ font-size:50px; font-weight:700; line-height:1.2em; margin-bottom:30px; }
.sc01_txt > hr{ display:block; width:100px; height:3px; margin:0 0 30px; border:none; }
.sc01_txt > p{ font-size:18px; font-weight:300; line-height:1.5em; }
.sc01_txt > a{ display:inline-block; margin:40px 0 0; padding:13px 40px; border-radius:100px; font-size:18px; font-weight:300; line-height:1em; text-align:center; transition:0.4s all; }

.sc01_nav{ position:absolute; z-index:60; top:50%; width:30px; height:80px; margin:-40px 0 0; cursor:pointer; }
.sc01_nav.swiper-button-disabled{ opacity:0.3; }
.sc01_nav#sc01pr{ left:20px; }
.sc01_nav#sc01pr:before{ content:''; position:absolute; z-index:1; top:0; left:0; width:4px; height:40px; transform:skew(-33deg); transform-origin:left bottom; }
.sc01_nav#sc01pr:after{ content:''; position:absolute; z-index:1; bottom:0; left:0; width:4px; height:40px; transform:skew(33deg); transform-origin:left top; }
.sc01_nav#sc01nx{ right:20px; }
.sc01_nav#sc01nx:before{ content:''; position:absolute; z-index:1; top:0; right:0; width:4px; height:40px; transform:skew(33deg); transform-origin:right bottom; }
.sc01_nav#sc01nx:after{ content:''; position:absolute; z-index:1; bottom:0; right:0; width:4px; height:40px; transform:skew(-33deg); transform-origin:right top; }

.sc01_btn{ display:flex; align-items:center; position:absolute; z-index:60; bottom:30px; left:50%; width:auto; transform:translate(-50%, 0); }
#sc01pg{ margin-right:10px; }
#sc01pg > .swiper-pagination-bullet{ opacity:1; width:12px; height:12px; border-radius:100px; margin:0 3px; transition:0.5s all; }
#sc01pg > .swiper-pagination-bullet-active{ width:40px; }
.sc01_ap{ cursor:pointer; border-radius:100%; font-size:20px; }
.sc01_ap .la-play{ display:none; }
.sc01_ap .la-pause{ display:block; }
.sc01_ap.paused .la-play{ display:block; }
.sc01_ap.paused .la-pause{ display:none; }

.sc01mw{ position:relative; z-index:1; overflow:hidden; background-color:#333; width: 100%; height: 100%;}
.sc01mw > .sc01_bdo{ position:absolute; z-index:1; top:50%; left:50%; min-width:100%; height:155%; transform:translate(-50%,-50%); }

.vimeo_player_wrapper{opacity: 1 !important;}

/* sc02 */
.sc02-sect{
	width: 100%;
	padding: 100px 0;
	background-color: #292929;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}
.sc02-sect::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}
.sc02-tp{
	width: 100%;
	display: flex;
	align-items: flex-end;
}
.sc02-tp-lt{
	width: 54%;
}
.sc02-tp-tit{
	width: 100%;
	color: #f5f5f7;
	margin-bottom: 40px;
}
.sc02-tp-tit > h3{
	font-size: 50px;
	font-weight: 800;
	margin-bottom: 20px;
}
.sc02-tp-tit > p{
	font-size: 14px;
	font-weight: 300;
	line-height: 1.8;
}
.sc02-tp-caption{
	width: 100%;
	display: flex;
	align-items: center;
}
.sc02-tp-caption .sc02-tp-img{
	display: flex;
	width: 60%;
}
.sc02-tp-img{
	display: flex;
}
.sc02-tp-img img{
	width: 100%;
	display: block;
	transition: .3s;
}
.sc02-tp-img:hover img{
	border-radius: 30px;
}
.sc02-tp-caption > p{
	color: #f5f5f7;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
	padding-left: 50px;
}
.sc02-tp-rt{
	width: 44%;
}

.sc02-ct{
	width: 100%;
	padding: 100px 0;
	background-color: #292929;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	position: relative;
}
.sc02-ct::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}
.sc02_pw{ display:flex; }
.sc02_pt.lf, .sc02_pt.rt{ flex:1 auto; }
.sc02_pt.lf{ transform:translate(0, -180px); }
.sc02_pt.rt{ padding-top:17vw; transform:translate(0, 180px); }
.sc02_pt.ct{ display:flex; }
.sc02_pi{ width:100%; padding-top:clamp(500px ,100% ,1000px ); background-color:#1f1f1f; background-position:center; background-size:cover; background-repeat:no-repeat; position: relative; transition: .3s;}
.sc02_pi:hover{
	border-radius: 30px;
}
.sc02_tt{ width:100%; padding:30px; font-size:50px; font-weight:800; text-align:center; writing-mode:tb-rl; color: #f5f5f7;}
.sc02-caption{
	width: 100%;
	padding: 25px;
	color: #f5f5f7;
	position: absolute;
	left: 0;
	bottom: 0;
}
.sc02-caption > h5{
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 5px;
}
.sc02-caption > p{
	font-size: 14px;
	font-weight: 300;
}

.sc02-wrap{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.sc02-box.box2{
	width: calc((100% - 30px) / 2);
}
.sc02-box.box32{
	width: 48%;
}
.sc02-box.box31{
	width: calc(26% - 30px);
}
.sc02-img{
	width: 100%;
	display: flex;
	transition: .3s;
	overflow: hidden;
}
.sc02-img img{
	width: 100%;
}
.sc02-box:hover .sc02-img{
	border-radius: 30px;
}

@media(max-width:991px){
	.sc02_pt.lf{ transform:translate(0, -100px); }
	.sc02_pt.rt{ transform:translate(0, 100px); }
	.sc02_tt{ padding:20px; font-size:40px; }
}
@media(max-width:800px){
	.sc02_pw{ flex-flow:row wrap; }
	.sc02_pt{ width:100%; }
	.sc02_pt.lf{ transform:translate(-200px, 0); }
	.sc02_pt.rt{ padding-top:0; transform:translate(200px, 0); }
	.sc02_pi{ padding-top:clamp(400px ,91.6380298% ,1000px ); }
	.sc02_tt{ writing-mode:unset; padding:20px 0; }
}

/* sc03 */
#sc03{
	padding: 100px 0;
	background-color: #292929;
}
#sc03::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}
.sc03-slide{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.sc03-img{
	display: flex;
	width: 100%;
	border-radius: 30px;
	overflow: hidden;
}
.sc03-img img{
	width: 100%;
}
.sc03-caption{
	width: 100%;
	padding: 0 15px;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	color: #f5f5f7;
	z-index: 3;
}
.sc03-caption > h2{font-size: 50px; font-weight: 800; line-height: 1.2; margin-bottom: 1rem;}
.sc03-caption > h5{font-size: 14px; font-weight: 400; position: relative; padding-bottom: 30px; margin-bottom: 60px; position: relative;}
.sc03-caption > p{font-size: 14px; font-weight: 400; line-height: 1.6;}
.sc03-caption > h5::after{
	content: "";
	width: 1px;
	height: 30px;
	background-color: #fff;
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
}

/* sc04 */
#sc04{
	padding: 100px 0;
	background-color: #292929;
	overflow: unset !important;
}
#sc04::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}
.sc04-wrap{
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.sc04-tit{
	width: 45%;
	position: relative;
}
.sc04-caption{
	position: sticky;
	top: 150px;
	color: #f5f5f7;
}
.sc04-caption > h3{
	font-size: 50px;
	font-weight: 800;
	margin-bottom: 20px;
}
.sc04-caption > p{
	font-size: 14px;
	font-weight: 300;
	line-height: 1.6;
}
.sc04-cont{
	width: 54%;
}
.sc04-box{
	width: 100%;
	margin-bottom: 50px;
}
.sc04-box:last-child{
	margin-bottom: 0;
}
.sc04-img{
	width: 100%;
	display: flex;
	overflow: hidden;
	transition: .3s;
}
.sc04-img img{
	width: 100%;
}
.sc04-img:hover{
	border-radius: 30px;
}

/* sc05 */
#sc05{
	padding: 100px 0;
	background-color: #292929;
}
#sc05::after{
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2;
}
.sc05-con{
	padding-left: 100px;
	width: 100%;
	position: relative;
	z-index: 3;
}
.sc05-slide{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.sc05Swiper{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.sc05-img{
	width: 100%;
	display: flex;
	position: relative;
	overflow: hidden;
	transition: .3s;
}
.sc05-img img{
	width: 100%;
}
.sc05-img:hover{
	border-radius: 30px;
}
.sc05-caption{
	width: 100%;
	padding: 25px;
	color: #f5f5f7;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
}
.sc05-caption > h5{
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 5px;
}
.sc05-caption > p{
	font-size: 14px;
	font-weight: 300;
}

/* sc06 */
#scad{ position:relative; z-index:1; }
.scad_iw{ height:100vh; width:100%; position:absolute; top:0; left:0; z-index:1; }
.scad_iw.fix{ position:fixed; top:0; left:0; }
.scad_iw.fix.arrived{ position:absolute; top:unset; bottom:0; }
.scad_ib{ max-width:1500px; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.scad_ip{ display:flex; flex-flow:row wrap; }
.scad_ip:not(:last-child){ margin-bottom:10px; }
.scad_ip > .scad_img{ background-color:#1f1f1f; border-radius:10px; overflow:hidden; }
.scad_ip > .scad_img.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.scad_ip > .scad_img:not(:last-child){ margin-right:10px; }
.scad_img > div{ background-position:center; background-size:cover; background-repeat:no-repeat; }
.scad_img.img01{ width:32.66666666666667%; margin:0 0 0 auto; }
.scad_img.img01 > div{ padding-top:40.81632653061224%; }
.scad_img.img02{ width:calc(23% - 10px); align-self:flex-end; }
.scad_img.img02 > div{ padding-top:110.4477611940299%; }
.scad_img.img03{ width:calc(23% - 10px); align-self:flex-start; }
.scad_img.img03 > div{ padding-top:110.4477611940299%; }
.scad_img.img04{ width:32.66666666666667%; margin:0 0 0 0; }
.scad_img.img04 > div{ padding-top:40.81632653061224%; }
.scad_img.img05{ width:54%; }
.scad_img.img05 > div{ padding-top:55.55555555555556%; }

.scad_img.ct{ height:100%; position:absolute; top:0; left:50%; transform:translate(-50%, 0); display:flex; align-items:center; }
.scad_img.ct > div{ position:relative; z-index:1; overflow:hidden; width:100%; border-radius:10px; background-color:#111; }
.scad_img.ct > div > div{ position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background-position:center; background-size:cover; background-repeat:no-repeat; background-attachment:fixed; }

.scad_low{ min-height:100vh; position:relative; z-index:10; display:flex; align-items:flex-end; box-sizing:content-box; padding:0 40px; }
.scad_txt{ max-width:1500px; width:100%; margin:0 auto; padding:0 0  120px; word-break:keep-all; }
.scad_txt > h2{ width:100%; font-size:50px; font-weight:800; color:#f5f5f7; line-height:1.1em; margin:0 0 4vh auto; text-align:left; }
.scad_txt > p{ max-width:50%; width:100%; font-size:14px; font-weight:300; color:#f5f5f7; line-height:1.6; word-break: keep-all;}
/*.scad_txt > p > span{ background-color:#111; }*/

@media (max-width: 1699px){
	.scad_low{ padding:0 15px; }
}
@media(max-width:850px){
	.scad_ib{ max-width:700px; width:95%; }
	/*.scad_img.img05{ width:100%; }
	.scad_ip > .scad_img:not(:last-child){ margin-right:0; margin-bottom:10px; }*/
	.scad_img.img01{ width:45%; }
	.scad_img.img01 > div{ padding-top:50%; }
	.scad_img.img02 > div{ padding-top:135%; }
	.scad_img.img03 > div{ padding-top:135%; }
	.scad_img.img04{ width:45%; }
	.scad_img.img04 > div{ padding-top:50%; }
	.scad_img.img05 > div{ padding-top:125%; }

	.scad_txt{ padding:0 0 60px; }
	.scad_txt > h2{ font-size:45px; margin:0 0 10vh; }
}
@media(max-width:600px){
	.scad_txt > h2{ font-size:30px; margin:0 0 4vh;}
	.scad_txt > p{ font-size:14px; line-height: 1.4; max-width: 85%;}
}



/* mediaquery */

@media(min-width:1200px){
	.ms-img{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}
	.ms-img-m{display: none;}

	.sc03-mo{display: none;}
}

@media(max-width:1199px){
	.sc01_fr{ padding:150px 15px; }
	.sc01_nav{ display:none; }

	.main-logo{
		max-width: 70px;
	}
	header.scr .lg > a > img{
		opacity: 0;
	}

	.mc-con{padding: 0 15px;}
	.sc-con{padding: 0 15px;}
	.sc04-caption{padding: 0 15px; bottom: 2rem;}

	.ms-img{display: none;}
	.ms-img-m{display: block; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover;}

	.main-wrap{bottom: 6rem; justify-content: center; text-align: center; padding: 0 15px;}

	.main-caption{padding: 0 15px;}
	.main-caption > h2{font-size: 35px; margin-bottom: 10px;}
	.main-caption > h2 > span{font-size: 29px;}
	.main-caption > h3{font-size: 15px; margin-bottom: 1rem;}
	.main-caption > h5{font-size: 12px;}

	
	.slider{height: 250px;}
	.slider-img{flex: 1 1 auto;}

	.sc02-sect{
		padding: 70px 0;
	}
	.sc02-tp{
		flex-direction: column;
		align-items: flex-start;
	}
	.sc02-tp-lt{
		width: 100%;
		margin-bottom: 1.5rem;
	}
	.sc02-tp-rt{
		width: 100%;
	}
	.sc02-tp-tit > h3{
		font-size: 33px;
		margin-bottom: 1rem;
	}
	.sc02-tp-tit > p{
		line-height: 1.6;
		font-size: 13px;
	}
	.sc02-tp-tit{
		margin-bottom: 20px;
	}
	.sc02-tp-caption{
		flex-direction: column;
		align-items: flex-end;
	}
	.sc02-tp-caption .sc02-tp-img{
		width: 100%;
	}
	.sc02-tp-caption > p{
		font-size: 13px;
		padding-left: 0;
		padding-top: 1rem;
		line-height: 1.4;
		text-align: right;
	}

	.sc02-ct{
		padding: 70px 0;
	}
	.sc02-wrap{
		gap: 1rem;
	}
	.sc02-box.box31, .sc02-box.box32, .sc02-box.box2{
		width: 100%;
	}

	#sc03{
		padding: 70px 0;
	}
	.sc03-caption{
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0);
		padding: 0;
		margin-bottom: 30px;
	}
	.sc03-caption > h2{
		font-size: 35px;
		margin-bottom: 10px;
	}
	.sc03-img{
		border-radius: 16px;
	}

	#sc04{
		padding: 70px 0;
	}
	.sc04-wrap{
		flex-direction: column;
	}
	.sc04-tit{
		width: 100%;
	}
	.sc04-cont{
		width: 100%;
	}
	.sc04-caption > h3{
		font-size: 33px;
		margin-bottom: 1rem;
	}
	.sc04-caption{
		padding: 0;
		margin-bottom: 1.5rem;
	}
	.sc04-caption > p{
		font-size: 13px;
		line-height: 1.4;
	}
	.sc04-box{
		margin-bottom: 1rem;
	}

	#sc05{
		padding: 70px 0;
	}
	.sc05-con{
		padding-left: 30px;
	}
	.sc05-caption > h5{
		font-size: 18px;
	}
	.sc05-caption > p{
		font-size: 12px;
	}
}

/* animation */

.ani.up{
	transform: translateY(100px);
	opacity: 0;
	transition: 1.2s;
}
.ani.up.delay{
	transition: 1.2s opacity 0.2s, 1.2s transform 0.2s;
}
.ani.up.delay2{
	transition: 1.2s opacity 0.5s, 1.2s transform 0.5s;
}
.ani.up.delay3{
	transition: 1.2s opacity 0.8s, 1.2s transform 0.8s;
}
.ani.up.act{
	transform: translateY(0);
	opacity: 1;
}
.ani.left{
	transform: translateX(100px);
	opacity: 0;
	transition: 1s;
}
.ani.left.act{
	transform: translateX(0);
	opacity: 1;
}
.ani.right{
	transform: translateX(-100px);
	opacity: 0;
	transition: 1s;
}
.ani.right.act{
	transform: translateX(0);
	opacity: 1;
}

.ani.blur{
	transition-duration: 1.4s; transition-property: opacity, filter, -webkit-filter, border-radius, color; transition-timing-function: cubic-bezier(.165,.84,.44,1); will-change: auto; opacity: 0; filter: blur(1rem) brightness(1.3);
}
.ani.blur.act{
	filter: blur(0) brightness(1); opacity: 1;
}