@charset "utf-8";

/*----------------------------- common ---*/
.box { position: relative;}
.box .half { width: 50%;}
.box .half.right { margin-left: auto;}
.box .half .h3_property { margin-bottom: 48px; line-height: 1.5;}
.box .half .h3_property .big { bottom: 63px; font-size: 120px; line-height: 1;}
.box .half .h3_property .small { line-height: 1; }
.box .half p { font-size: 18px; font-family: 'Noto-Sans-JP-DemiLight'; line-height: 220%; margin-bottom: 80px;}

.partition { max-width: 1600px; margin: 0 auto;}

/*----------------------------- fv ---*/

.bg_fv { background: url(../images/index/bg_fv.jpg) no-repeat center top / 100%; overflow-x: hidden;}

#fv { padding: 171px 0 340px; overflow-x: hidden;}
#fv .fv_wrap { position: relative; max-width: 1600px; margin: 0 auto;}
#fv h2 { position: absolute; padding-top: 46px; z-index: 2;}
#fv .movie { text-align: right; padding-left: 200px;}
#fv .movie video { width: 100%; box-shadow: 9.642px 11.491px 40px 0px rgba(28, 53, 92, 0.4); filter: drop-shadow(0px 0px #000);}
#fv .scroll { position: absolute; left: 20px; top: 558px; height: 230px; font-size: 15px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-family: "goldenbook", serif; font-weight: 400; font-style: normal; color: #111a41;}
#fv .scroll:after { content: ''; display: inline-block; width: 1px; height: 100px; background: #000; margin-top: 20px;}


/*----------------------------- about ---*/

#about { position: relative; padding-bottom: 251px;}
#about .bg { background: url(../images/index/bg_about.jpg) no-repeat left top / 87.5%; padding-bottom: 150px;}
#about .half { margin-bottom: 150px;}
#about .box .flexitem { position: absolute; bottom: 0; right: calc( 50% + 98px );}
#about .writing { -ms-writing-mode: tb-rl; writing-mode: vertical-rl;}
#about .vr { display: flex; justify-content: left; align-items: flex-start; flex-flow: row-reverse; font-size: 20px; letter-spacing: 0.7em; color: #0f122d; font-family: 'Noto-Sans-JP-Medium'; margin-left: 130px;}
#about .vr span { position: relative; -ms-writing-mode: tb-rl; line-height: 300%; writing-mode: vertical-rl; padding-top: 5px;}
#about .vr span:nth-of-type(1) { border-right: 1px solid #111a41;}
#about .vr span:nth-of-type(2) { border-right: 1px solid #111a41; }
#about .vr span:nth-of-type(3) { border-right: 1px solid #111a41; border-left: 1px solid #111a41;}

#about .item { position: absolute; left: calc( 50% + 15px ); top: -330px;}



/*----------------------------- evidence ---*/

#evidence { background: url(../images/index/bg_evidence.png) no-repeat left bottom / cover; overflow-x: hidden;}
#evidence .box { padding: 294px 0 150px;}
#evidence .box .half h3 .big { font-size: 103px; bottom: 143px;}
#evidence .box .half h3 .small { margin-bottom: 32px;}
#evidence .box .flexitem { position: absolute; top: 130px; left: calc( 50% + 98px ); box-shadow: 6.428px 7.66px 40px 0px rgba(28, 53, 92, 0.2);}
#evidence .box .btn { background: #1c355c;}




/*----------------------------- media ---*/

#media { padding: 223px 0 0;}
#media .box { margin-bottom: 40px;}
#media .box .half h3 { font-size: 45px; margin-bottom: 0;}
#media .box .half h3 .small { font-size: 40px;}
#media .media_wrapper { padding-left: max( 50% - 550px , 50px);}
#media .media_slide { padding-bottom: 140px;}
#media .media_slide .slick-slide { width: 304px; margin-left: 72px;}
#media .media_slide .slick-slide a { display: block; width: 100%;}
#media .media_slide .slick-slide a figure { position: relative; margin-bottom: 20px;}
#media .media_slide .slick-slide a figure figcaption { position: absolute; top: 0; right: -27px; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; color: #898989; font-family: "din-2014", sans-serif; font-weight: 400; font-style: normal; height: 100%;}
#media .media_slide .slick-slide a figure figcaption:before { content: ''; display: inline-block; width: 1px; height: 50px; margin-bottom: 11px; background: #898989;}
#media .media_slide .slick-slide a .cat { width: 150px; font-size: 15px; color: #00a785; padding: 4px 0; border: 1px solid #00a785; border-radius: 20px; text-align: center; margin-bottom: 15px;}
#media .media_slide .slick-slide a h4 { font-size: 22px; margin-bottom: 10px; line-height: 145%;}
#media .media_slide .slick-slide a .detail { line-height: 175%;}

#media .media_slide .slide-arrow { position: absolute; top: -110px;}
#media .media_slide .prev-arrow { right: calc(50% - 410px);}
#media .media_slide .next-arrow { right: calc(50% - 490px);}
#media .max_inner { text-align: right;}



/*----------------------------- research ---*/

#research { background: url(../images/index/bg_research.png) no-repeat left bottom / cover; overflow-x: hidden;}
#research .partition { text-align: right;}

#research .box { padding: 290px 0 200px;}
#research .box .half h3 .big { font-size: 100px; bottom: 83px;}
#research .box .half h3 .small { margin-bottom: 32px;}
#research .box .flexitem { position: absolute; top: 133px; right: calc( 50% + 98px ); box-shadow: 6.428px 7.66px 40px 0px rgba(28, 53, 92, 0.2);}
#research .box .btn { background: #1c355c;}



/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
/*---------------- common ----------------*/
	.box { position: relative;}
	.box .half { width: 100%;}
	.box .half.right { margin-left: 0;}
	.box .half .h3_property { font-size: 24px; margin-bottom: 20px;}
	.box .half .h3_property span { }
	.box .half .h3_property .big { bottom: 47px; font-size: 60px;}
	.box .half .h3_property .small { font-size: 16px; margin-bottom: 22px;}
	.box .half p { font-size: 12px; line-height: 220%; margin-bottom: 50px;}
	.box .half .btn { width: 80%; padding: 18px 0; font-size: 15px; margin: 0 auto;}
	.box .half .btn:after { width: 30px;}
	
	.partition { width: 90%; padding-bottom: 150px; margin: 0;}

	
	/*----------------------------- fv ---*/
	
	.bg_fv { background: url(../images/index/bg_fv.jpg) no-repeat center top / 100%; overflow: hidden;}
	
	#fv { padding: 70px 0 120px;}
	#fv .fv_wrap { position: relative;}
	#fv h2 { width: 340px; padding-top: 5px;}
	#fv .movie { text-align: right; padding-left: 50px;}
	#fv .movie video { width: 100%;}
	#fv .scroll { left: 3%; top: 70px; height: 115px; font-size: 10px;}
	#fv .scroll:after { height: 30px; margin-top: 10px;}
	
	/*----------------------------- about ---*/
	
	#about { padding-bottom: 25vw;}
	#about .bg { background: url(../images/index/bg_about.jpg) no-repeat left top / 87.5%; padding-bottom: 50px;}
	#about .half { margin-bottom: 50px;}
	#about .box .flexitem { position: static; margin-bottom: 30px;}
	#about .vr { font-size: 17px; margin: 0; line-height: 300%;}
	#about .vr span { position: relative;}
	
	#about .item { display: block; width: 70%; left: auto; right: 0; top: -100px;}
	
	/*----------------------------- evidence ---*/
	
	#evidence { background: url(../images/index/bg_evidence.png) no-repeat left bottom / cover;}
	#evidence .partition { background: url(../images/index/about_03.jpg) no-repeat center bottom / auto 100%;}
	#evidence .box { padding: 150px 0 75px;}
	#evidence .box .half h3 .big { font-size: 54px; bottom: 88px;}
	#evidence .box .half h3 .small { margin-bottom: 22px;}
	#evidence .box .half p { margin-bottom: 40px;}
	#evidence .box .flexitem { position: static; margin-bottom: 60px;}
	
	/*----------------------------- media ---*/
	
	#media { padding: 120px 0 0;}
	#media .box { margin-bottom: 20px;}
	#media .box .half h3 { font-size: 24px;}
	#media .box .half h3 .big { font-size: 54px;}
	#media .box .half h3 .small { font-size: 20px;}
	#media .media_wrapper { padding-left: 5%;}
	#media .media_slide { padding-bottom: 60px;}
	#media .media_slide .slick-slide { width: 280px; margin-left: 50px;}
	#media .media_slide .slick-slide a { }
	#media .media_slide .slick-slide a figure { margin-bottom: 15px;}
	#media .media_slide .slick-slide a figure figcaption { top: 0; right: -20px; font-size: 14px;}
	#media .media_slide .slick-slide a figure figcaption:before { width: 1px; height: 40px; margin-bottom: 11px;}
	#media .media_slide .slick-slide a .cat { width: 120px; font-size: 13px; padding: 4px 0; margin-bottom: 15px;}
	#media .media_slide .slick-slide a h4 { font-size: 18px; margin-bottom: 10px; line-height: 145%;}
	#media .media_slide .slick-slide a .detail { font-size: 12px; line-height: 175%;}
	
	#media .media_slide .slide-arrow { position: absolute; top: -70px; width: 45px;}
	#media .media_slide .prev-arrow { right: calc(50% - 100px);}
	#media .media_slide .next-arrow { right: calc(50% - 155px);}
	#media .max_inner { text-align: right;}
	
	/*----------------------------- research ---*/
	
	#research { background: url(../images/index/bg_research.png) no-repeat left bottom / cover;}
	#research .max_inner { text-align: right;}
	#research .partition { margin-left: auto; background: url(../images/index/media_01.jpg) no-repeat center bottom / auto 100%;}
	#research .box { padding: 150px 0 60px;}
	#research .box .half h3 .big { font-size: 52px; bottom: 53px;}
	#research .box .half h3 .small { margin-bottom: 22px;}
	#research .box .half p { margin-bottom: 40px;}
	#research .box .flexitem { position: static; margin-bottom: 60px;}
	
	
}