@charset "utf-8";
/*---------- 共通 ---------*/
h3{font-family: 'Noto-Sans-JP-Medium'; font-size: 16px; line-height: 150%;}
h3 span{font-size: 73px; line-height: 118%; display: inline-block; padding: 0 20px 0 0; letter-spacing: 0.05em;}
h4{font-size: 18px; line-height: 150%;}
h4 span{font-size: 69px; line-height: 103%; display: inline-block; padding: 0 0 12px;}
.tt_box{padding: 40px 0 0;}
.tt_box p{line-height: 206%;}
.tt_box p:not(:first-child){padding: 30px 0 0;}
.white_box{background: #fff;}
.white_box h3,
.white_box h3 span,
.white_box h4,
.white_box p{color: #000;}
.white_box .link_btn_box a.link_btn{border: 1px solid #000; color: #000; transition: 0.5s;}
.white_box .link_btn_box a.link_btn.thumb-hover{border: 1px solid #000; color: #fff; background: #000;transition: 0.5s;}
main{position: relative;}
main .video_box{position:absolute; top: 0px; width: 100%; height: 100%; overflow: hidden;; }
main .video_box video{width: 100%; height: auto; object-fit: cover;position:absolute; top: 0px; min-width: 1600px; left: 50%; transform: translateX(-50%);}
main .top-box{position: relative;z-index: 10;}
/* ------------------------------------------------------------ #fv ------------------------------------------------------------ */
#fv {padding: 138px 0 201px; position: relative;}
#fv h2{position: relative; width: 1100px; height: 694px; margin: 0 auto; }
#fv h2 span.logo{position: absolute; overflow: hidden;display: block;}
#fv h2 .logo_1{top: 0px; left: 0px;}
#fv h2 .logo_2{top: 0px; left: 141px;}
#fv h2 .logo_3{ top: 0px; right: 199px;}
#fv h2 .logo_4{ top: 139px; right: 206px;}
#fv h2 .logo_5{ bottom: 94px; right: 203px;}
#fv h2 .logo_6{ bottom: 97px; left: 138px; }
#fv h2 .logo_7{ bottom: 171px; right: 212px;}
#fv h2 .logo_8{ bottom: 235px; left: 136px;}
#fv h2 .logo_9{ bottom: 0px; right: 0px; ;}
#fv h2 .logo_10{ top: 0px; right: 0px;}

#fv h2 .logo_1 span{display: block; opacity: 0;}
#fv h2 .logo_2 picture{display: block; opacity: 0;}
#fv h2 .logo_3 picture{display: block; opacity: 0;}
#fv h2 .logo_4 span{display: block; opacity: 0;}
#fv h2 .logo_5 span{display: block; opacity: 0;}
#fv h2 .logo_6 span{display: block; opacity: 0;}
#fv h2 .logo_7 picture{display: block; opacity: 0;}
#fv h2 .logo_8 picture{display: block; opacity: 0;}
#fv h2 .logo_9 span{display: block;opacity: 0;}
#fv h2 .logo_10 span{display: block; opacity: 0;}

#fv h2 .logo_1.active span{animation: logo_1 0.6s ease-in-out forwards; animation-delay: 0.2s;}
#fv h2 .logo_2.active picture{animation: logo_2 0.6s ease-in-out forwards; animation-delay: 0.3s;}
#fv h2 .logo_3.active picture{animation: logo_3 0.6s ease-in-out forwards; animation-delay: 0.4s;}
#fv h2 .logo_4.active span{animation: logo_4 0.6s ease-in-out forwards; animation-delay: 0.5s;}
#fv h2 .logo_5.active span{animation: logo_5 0.6s ease-in-out forwards; animation-delay: 0.6s;}
#fv h2 .logo_6.active span{animation: logo_6 0.6s ease-in-out forwards; animation-delay: 0.7s;}
#fv h2 .logo_7.active picture{animation: logo_7 0.6s ease-in-out forwards; animation-delay: 0.8s;}
#fv h2 .logo_8.active picture{animation: logo_8 0.6s ease-in-out forwards; animation-delay: 0.9s;}
#fv h2 .logo_9.active span{animation: logo_9 0.6s ease-in-out forwards; animation-delay: 1.0s;}
#fv h2 .logo_10.active span{animation: logo_10 0.6s ease-in-out forwards; animation-delay: 1.1s;}


#fv .mini{writing-mode: vertical-rl; position: absolute; right: 34px; top: 70%; transform: translateY(-50%) rotateZ(-180deg); font-size: 12px;}
#fv .scroll{color: #fff; font-size: 12px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0px; height: 134px;}
#fv .scroll span{width: 1px; height: 109px; display: block; border-right: 1px solid #fff; position: absolute; bottom: 0px; transform: translateX(-50%); left: 50%;}


/* ------------------------------------------------------------ #business ------------------------------------------------------------ */
.business_venture{position: relative;}
.business_venture:before{display: block; content: ""; height: 1974px; position: absolute; left: 0px; top: 14.5%; width: calc(100% - 390px); background: #171819;}
#business{padding: 33px 0 0;position: relative;}
#business .business_inner{ width: 1200px; padding: 0 50px; margin:0 auto;}
#business .purchase{overflow: hidden; margin: 0 auto; padding: 115px 0 0; position: relative; z-index: 1px;}
#business .purchase .box{position: relative; }
#business .purchase .box .text_box{position: relative; z-index: 1; padding: 24px 0 55px; width: 610px}
#business .purchase .box .text_box .tt_box{width: 396px;}
#business .purchase .box .img{position: absolute; right: -210px;}
#business .purchase .box a.read{margin: 32px 0 0;}

#business .link_list{padding: 114px 0 0 ; position: relative;z-index: 1;}
#business .link_list .box{width: 387px; height: auto;}
#business .link_list .box:not(:last-child){margin: 0 20px 0 0;}
#business .link_list .box .text_box{padding: 20px 0 0; height: 277px; position: relative;}
#business .link_list .box .text_box a{position: absolute; bottom: 0px;}
#business .link_list .box .text_box h4 span{font-size: 40px; line-height: 110%;}


/* ------------------------------------------------------------ #venture ------------------------------------------------------------ */
#venture .venture_box{background: url(../images/top/venture_capital_bg_1.jpg) no-repeat left center; background-size: 911px; margin: 141px 0 0;position: relative;z-index: 1;padding: 50px 0 0;}
#venture .venture_box .box{width: 396px; height: auto; margin: 0 0 0 auto;}
#venture .venture_box .box a{margin: 40px 0 0 auto;}

#venture .link_btn_box{padding: 77px 0 0;}

/* ------------------------------------------------------------ #about ------------------------------------------------------------ */
#about{padding: 179px 0 0; overflow: hidden;}
#about .text_box h3{font-size: 22px;}
#about .text_box h3 span{padding: 0 0 10px; line-height: 100%;}
#about .about_inner{width: 1200px; padding: 0 50px; margin:0 auto;}
#about .box{position: relative;}
#about .box .text_box{width: 521px; height: auto; position: relative; z-index: 1;}
#about .box .img{position: absolute; top: 0px; right: -179px; width: calc(100% - 400px);}
#about .box .link{padding: 80px 0 64px;}
#about .box .link .btn{font-size: 18px; position: relative; display: block; padding: 12px 21px 17px; color: #fff; transition: 0.5s;background: #000; }
#about .box .link .btn.thumb-hover{transition: 0.5s; background: #fff;color: #000; }
#about .box .link .btn span{font-size: 38px; display: inline-block; margin: 0 14px 0 0; transition: 0.5s;}
#about .box .link .btn.thumb-hover span{color: #000; transition: 0.5s;}
#about .box .link .btn:before{ content: ""; display: block; background: url(../images/top/icn_1.svg) no-repeat center center; background-size: 50px; height: 9px; width: 50px; position: absolute; top: 50%; transform: translateY(-50%); right: 24px; transition: 0.5s;}
#about .box .link .btn.thumb-hover:before{ opacity: 1;transition: 0.5s;}


#about .box .link .btn:last-child{margin: 10px 0 0;}

/* ------------------------------------------------------------ #reason ------------------------------------------------------------ */
#reason{padding: 194px 0 132px;}
#reason h3{font-size: 22px;}
#reason p.tt_title{font-size: 32px; padding: 50px 0 0; line-height: 144%;font-family: 'Noto-Sans-JP-Medium';}
#reason .promise{padding: 61px 0 0;}
#reason .promise .box{background: #151515; padding: 23px 26px; width: 390px; height: 477px;}
#reason .promise .box:not(:last-child){margin: 0 15px 0 0;}
#reason .promise .box h4{text-align: center; font-size: 21px; line-height: 143%; padding: 16px 0 ;font-family: 'Noto-Sans-JP-Medium';}
#reason .promise .box h4.space_1{padding: 29px 0 ;}
#reason .promise .box p{line-height: 188%;}
#reason .link_btn_box{padding: 60px 0 0;}

/* ------------------------------------------------------------ .line_box ------------------------------------------------------------ */
.line_box{background: #151515; padding: 75px 0 95px;}
.line_box a{display: block;}
.line_box a:last-child{margin: 0 0 0 38px}


/* ------------------------------------------------------------ #voice ------------------------------------------------------------ */
#voice{padding: 131px 0 0; position: relative;}
#voice h3{position: relative; z-index: 1;font-size: 22px;}
#voice:before{display: block; content: ""; height: 720px; position: absolute; left: 0px; top: 171px; width: calc(100% - 390px); background: #f5f5f5; min-width: 1200px;}
#voice .list{position: relative; z-index: 1;padding: 63px 0 0; }
#voice .list .box{width: 100%; height: auto; background: #fff;}
#voice .list .box:not(:last-child){margin: 0 0 30px;}
#voice .list .box .text_box{height: auto; padding: 25px 22px;}
#voice .list .box .text_box h4{font-size:16px; line-height: 146%;font-family: 'Noto-Sans-JP-Medium'; color: #909090; border-bottom: 1px solid #909090; padding: 0 0 10px;}
#voice .list .box .text_box h4 span{color: #000;font-size: 22px; line-height: 146%;font-family: 'Noto-Sans-JP-Medium'; padding: 0 0 5px;}
#voice .list .box .text_box p{font-size: 14px; line-height: 215%; padding: 5px 0 0;}
#voice .link_btn_box{padding: 158px 0 0;position: relative; z-index: 1;}

/* ------------------------------------------------------------ #news ------------------------------------------------------------ */
#news{padding: 79px 0 0;position: relative; z-index: 1;}
#news .flex .box{width: 337px; margin: 0 91px 0 0;}
#news .flex .box h3{font-size: 22px;}
#news .flex .box p{font-size: 14px; line-height: 215%; padding: 38px 0 0 ;}
#news .flex .news_list ul{padding: 44px 0 0;}
#news .flex .news_list ul li p{color: #B9B9B9; font-size: 13px; line-height: 150%; display: block;font-family: 'Noto-Sans-JP-Medium'; padding: 21px 0 26px;border-bottom: 1px solid #E8E8E8;}
#news .flex .news_list ul li:first-child{border-top: 1px solid #E8E8E8;}
#news .flex .news_list ul li p span{font-family: 'Noto-Sans-JP-Medium'; line-height: 145%; font-size: 18px; color: #000; display: inline-block; padding: 0 0 10px; }


/* ------------------------------------------------------------ #column ------------------------------------------------------------ */
#column{padding: 116px 0 180px;}
#column .column_box{background: url(../images/top/column_bg_1.jpg) no-repeat center center; background-size: cover; padding: 61px 64px 75px 74px;}
#column .column_box .box{width: 100%; height: auto; position: relative;}
#column .column_box .box h3{color: #fff;font-size: 18px; padding: 30px 0 0;}
#column .column_box .box h3 span{color: #fff; display: inline-block; 0 0 5px; letter-spacing: 0.13em;}
#column .column_box .box p{color: #fff; font-size: 14px; line-height: 215%; padding: 25px 0 0;width: 46%;}
#column .column_box .box a{margin: 17px 0 0;}
#column .column_box .img{ position: absolute; top: 50%; right: 0px; width: 50%; height: auto; transform: translateY(-50%);}
#column .column_box .img img{width: 100%; height: auto;}


/* ----------------------------- mobile ------------------------------- */
@media only screen and (max-width: 768px) {
	
	/*---------- 共通 ---------*/
	h3{ font-size: 16px;text-align: center;}
	h3 span{font-size: 35px; padding: 0 0 0; }
	h4{font-size: 16px; }
	h4 span{font-size: 26px; padding: 0 0 6px;line-height: 108%;}
	.tt_box{padding: 20px 0 0;}
	
	.tt_box p { line-height: 200%; letter-spacing: 0.04em;}
	.tt_box p:not(:first-child){padding: 20px 0 0;}
	main{position: relative;}
	main .video_box{position:absolute; top: 0px; width: 100%; height: auto; padding: 85% 0 84%;}
	
	main .video_box video{bottom: 0px;top: auto;}
	main .top-box{position: relative;z-index: 10;}
	/* ------------------------------------------------------------ #fv ------------------------------------------------------------ */
	#fv {padding: 113px 0 105px; }
	#fv h2{width: 100%; height: auto;  padding: 70% 0;}
	#fv h2 .logo_1{ top: auto; left: 0px; bottom: 1.6%;}
	#fv h2 .logo_2{ top: 35%; left: 41%; width: 27.5%;}
	#fv h2 .logo_3{ top: 0px; right: auto; width: 73%; left: 2%;}
	#fv h2 .logo_4{ top: 14%; left: 11.25%; right: auto; width: 26.5%;}
	#fv h2 .logo_5{ bottom: 31.5%; right: 3%; left: auto; width: 23.4%;}
	#fv h2 .logo_6{ top: 0px; left: auto; right: 3.3%; width: 19.4%;}
	#fv h2 .logo_7{ bottom: auto; left: 41%; width: 28%; height: auto; top: 13%; }
	#fv h2 .logo_8{ opacity: 0;}
	#fv h2 .logo_9{ bottom: auto; left: 2%; right: auto; width: 6.69%; top: 12.5%;}
	#fv h2 .logo_10{ top: auto; right: auto; left: 12.7%; width: 84.5%; bottom: 13%;}
	
	#fv .mini{ right: 3%; top: 36%;}
	#fv .scroll{font-size: 11px; height: 75px;}
	#fv .scroll span{width: 1px; height: 60px; }
	
	
	/* ------------------------------------------------------------ #business ------------------------------------------------------------ */
	.business_venture{position: relative;}
	.business_venture:before{ display: none;}
	#business{padding: 33px 0 0;position: relative;}
	#business .business_inner h3{font-size: 12px;}
	#business .business_inner{ width: 100%; padding: 0 0; }
	#business .purchase{padding: 45px 0 0; }
	#business .purchase .box{position: relative; background: url(../images/top/business_bg_1_sp.jpg) no-repeat center top; background-size: 100%;}
	#business .purchase .box .text_box{ padding: 35% 0 0; width: 90%; margin: 0 auto;}
	#business .purchase .box .text_box .tt_box{width: 100%;}
	#business .purchase .box .img{ position: absolute; right: auto;}
	#business .purchase .box a.read{margin: 18px 0 0 auto;}
	
	#business .link_list{padding: 65px 0 0 ; position: relative;z-index: 1;}
	#business .link_list .box{width: 100%; height: auto; display: flex; flex-direction: row-reverse; align-items: center;}
	#business .link_list .box:nth-child(2n){flex-direction: row;}
	#business .link_list .box picture{width: 50%; height: auto;}
	#business .link_list .box:not(:last-child){margin: 0 0 30px;}
	#business .link_list .box .text_box{padding: 0px 0 0; height: auto; position: relative;width: 45%;}
	#business .link_list .box:nth-child(2n) .text_box{padding: 0px 0 0 15px; }
	#business .link_list .box .text_box a{position: relative; bottom: auto; margin: 20px 0 0;}
	#business .link_list .box:nth-child(2n) .text_box a{ margin: 20px 0 0 auto;}
	#business .link_list .box .text_box h4 span{font-size: 21px; line-height: 129%;}
	
	
	/* ------------------------------------------------------------ #venture ------------------------------------------------------------ */
	#venture{background: none; }
	#venture .venture_2{background: url(../images/top/venture_capital_bg_1_sp.jpg) no-repeat center top; background-size: 100%;}
	#venture .venture_box{background: none; margin: 85px 0 0;padding: 46% 0 0;}
	#venture .venture_box .box{width: 100%; height: auto; margin: 0 0 0 auto;}
	#venture .venture_box .box a{margin: 40px 0 0 auto;}
	
	#venture .link_btn_box{padding: 45px 0 0;}
	
	/* ------------------------------------------------------------ #about ------------------------------------------------------------ */
	#about{padding: 70px 0 0; }
	#about .text_box h3{font-size: 16px;}
	#about .text_box h3 span{padding: 0 0 3px}
	#about .about_inner{width: 100%; padding: 0px; }
	#about .box{position: relative; }
	#about .box .text_box{width: 100%; height: auto;}
	#about .box .img{position: relative; top: auto; width: 100%; right: auto; padding: 25px 0 0;}
	#about .box .tt_box {padding: 20px 0 0;margin: 0 auto; width: 90%;}
	#about .box .link{padding: 30px 0 0;margin: 0 auto; width: 90%;}
	#about .box .link .btn{font-size: 11px; padding: 9px 21px 11px; color: #000; background: #fff; text-align: center; width: 90%; margin: 0 auto;}
	#about .box .link .btn span{font-size: 20px; margin: 0 5px 0 0; color: #000; }
	#about .box .link .btn:before{ display: none;  }
	
	
	#about .box .link .btn:last-child{margin: 10px auto 0;}
	
	/* ------------------------------------------------------------ #reason ------------------------------------------------------------ */
	#reason{padding: 72px 0 0px;}
	#reason h3{font-size: 16px;}
	#reason p.tt_title{font-size: 20px; padding: 24px 0 0;line-height: 140%;}
	#reason .promise{padding: 24px 0 0;}
	#reason .promise .box{padding: 29px 23px; width: 100%; height: auto;}
	#reason .promise .box:not(:last-child){margin: 0 0 20px;}
	#reason .promise .box h4{font-size: 16px; padding: 16px 0 ;}
	#reason .promise .box h4.space_1{padding: 10px 0;}
	#reason .link_btn_box{padding: 30px 0 0;}
	
	/* ------------------------------------------------------------ .line_box ------------------------------------------------------------ */
	.line_box{background: none; padding: 50px 0 60px;}
	.line_box a{display: block; width: 80%; margin: 0 auto;}
	.line_box a:last-child{margin: 20px auto 0}
	
	
	/* ------------------------------------------------------------ #voice ------------------------------------------------------------ */
	#voice{padding: 41px 0 0; }
	#voice h3{font-size: 12px; text-align: left;}
	#voice:before{height: 85%; top: 63px; width: 70%; min-width: auto;}
	#voice .list{position: relative; z-index: 1;padding: 25px 0 0; }
	#voice .list .box{width: 100%;}
	#voice .list .box:not(:last-child){margin: 0 0 15px;}
	#voice .list .box .text_box{height: auto; padding: 20px;}
	#voice .list .box .text_box h4{font-size: 13px; padding: 0 0 10px;}
	
	#voice .list .box .text_box h4 span{font-size: 18px; padding: 0 0 5px;}
	#voice .list .box .text_box p{font-size: 14px; line-height: 200%; padding: 6px 0 0;}
	#voice .link_btn_box{padding: 90px 0 0;}
	
	/* ------------------------------------------------------------ #news ------------------------------------------------------------ */
	#news{padding: 60px 0 0;}
	#news .flex .box{width: 100%; margin: 0 0 0;}
	#news .flex .box h3{font-size: 12px;text-align: left;}
	#news .flex .box p{ font-size: 14px; padding: 25px 0 0; letter-spacing: 0.04em;line-height: 200%;}
	#news .flex .news_list a.img_link{display: block; margin: 25px 0 0;}
	#news .flex .news_list ul{padding: 29px 0 0;}
	#news .flex .news_list ul li p{font-size: 13px; padding: 20px 0;}
	#news .flex .news_list ul li p span{font-size: 14px; padding: 0 0 5px; letter-spacing: 0.04em;line-height: 200%;}
	
	
	/* ------------------------------------------------------------ #column ------------------------------------------------------------ */
	#column{padding: 70px 0 60px;}
	#column .column_box{background: url(../images/top/column_bg_1.jpg) no-repeat center center; background-size: cover; padding: 15px 35px 20px 35px;}
	#column .column_box .box{width: 100%; height: auto;}
	#column .column_box .box h3{font-size: 18px; padding: 0;}
	#column .column_box .box p{font-size: 14px; line-height: 200%; padding: 25px 0 0; width: auto;}
	#column .column_box .box a{margin: 17px 0 0 auto;}
	#column .column_box .img{ position: relative;top: auto; right: auto; padding: 20px 0 0;width: 100%; height: auto; transform: none;}
}