@charset "utf-8";
/*---------- 共通 ---------*/
.flex{display: flex;}
.flex_left{flex-direction: row-reverse;}
.flex_left{flex-direction: row-reverse;}
body{background: #000000;min-width: 1200px; }
body.stop{overflow-y: hidden; overflow-x: scroll;}
.read{font-family: neue-haas-grotesk-display, sans-serif; font-weight: 600; font-style: normal;}
.mont{font-family: montserrat, sans-serif; font-weight: 600; font-style: normal;}
video::-webkit-media-controls {	display: none !important;}
video::-webkit-media-controls-start-playback-button {display: none !important;}
video {	pointer-events: none;}


a.read{display: block; width: 163px; height: 42px; line-height: 150%;font-family: 'Noto-Sans-JP-Medium'; font-weight: 500; position: relative; color: #fff; padding: 9px 0 0; font-size: 16px;letter-spacing: -0.03em;}
a.read span{ display: block; position: absolute; top: 41%; transform: translateY(-50%); height: 9px; width: 50px; right: 15px; border-bottom: 1px solid #fff;}
a.read span:after{content: ""; display: block; width: 20px ;height: 1px; border-bottom: 1px solid #fff; position: absolute; right: -2px; transform: rotateZ(30deg); top:3px;}
a.read:before{content: ""; display: block; width: 42px ;height: 42px; border: 1px solid #fff; border-radius: 1000px; position: absolute; right: 0px;top: 0%;}

.link_btn_box{width: 1100px; margin: 0 auto;justify-content: center;}
.link_btn_box a.link_btn{width: 351px; height: auto; line-height: 175%; text-align: center; letter-spacing: 0.04em; border: 1px solid #fff; color: #fff; padding: 20px 0 21px; letter-spacing: 0.04em;transition: 0.5s;}
.link_btn_box a.link_btn.thumb-hover{transition: 0.5s;border: 1px solid #fff; color: #000; background: #fff;}
.link_btn_box a.link_btn:not(:first-child){margin: 0 0 0 24px;}


#splash {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center;}
#splash img{width: 138px; height: auto; margin: 0 auto; display: block;}
#splash .flex{padding: 34px 0 0; align-items: center; justify-content: center;flex-direction: row;}
#splash .flex .energy{font-size: 12px; color: #fff;}
#splash .flex .energy_bar{background: #fff; border-radius: 100px; width: 157px; height: 5px; margin: 0 20px;}
#splash .flex .energy_bar span {background: linear-gradient(to right ,#E5D67D ,#A77B41); border-radius: 100px; width: 0; height: 5px; display: block;}
@keyframes fadeinout {
    0%, 100% { opacity: 0;}
    50% { opacity: 1;}
}
/* ------------------------------------------------------------ #fv.lower_layer ------------------------------------------------------------ */
#fv.lower_layer{ padding: 246px 0 243px; position: relative; overflow: hidden;}
#fv.lower_layer .video_box{position:absolute; top: 0px; width: 100%; height: auto; padding: 600px 0 0;}
#fv.lower_layer .video_box video{width: 100%; height: auto; object-fit: cover; position: absolute; bottom: 0px; }
#fv.lower_layer .top-box{position: relative;z-index: 10;}
#fv.lower_layer h2{ text-align: center; font-size: 16px; line-height: 150%; color: #fff;font-family: 'Noto-Sans-JP-Medium'; position: relative;z-index: 10;}
#fv.lower_layer h2 span{font-size: 71px; line-height: 123%;}

video {pointer-events: none; }
video::-webkit-media-controls {display: none !important;}
/* ------------------------------------------------------------ header ------------------------------------------------------------ */
header{min-width: 1200px; padding: 10px 31px; position: fixed; z-index: 5000; width: 100%; transition: 0.5s;animation-timing-function: ease-in-out;  animation-duration:0.6s;}
header.change-color{background:  #000; transition: 0.5s;animation-timing-function: ease-in-out;  animation-duration:0.6s;}
header .flex{ align-items: center; justify-content: space-between; }
header .hdr_flex{position: relative;z-index: 120;}
header .hdr_flex.active_2 h1{display: none;}
header .hamburger_btn{width: 60px; height: 60px; position: relative;margin: 0 0px 0 auto;}
header .hamburger_btn span{display: block; width: 100%; border-bottom: 1px solid #fff; position: absolute; transform: translateX(-50%); left: 50%; transition: 0.5s;}
header .hamburger_btn span:first-child{top: 23px;}
header .hamburger_btn span:last-child{bottom: 23px;}

header .hamburger_btn.active span:first-child{top: 50%;transform: translate(-50% ,-50%) rotateZ(-30deg); transition: 0.5s;}
header .hamburger_btn.active span:last-child{bottom: auto; top: 50%; transform: translate(-50% ,-50%) rotateZ(30deg); transition: 0.5s;}

header .hamburger_menu_box{width: 100%; height: 100vh; position: absolute; top: 0px; left: 0px; z-index: 100; background: #000; display: none;}
header .hamburger_menu_box .flex{display: flex;}
header .hamburger_menu_box .flex .video_box{width: calc(100% - 505px); height: 100vh;}
header .hamburger_menu_box .flex .video_box video{width: 100%; height: 100%; object-fit: cover;}
header .hamburger_menu_box .flex .menu_box{padding: 46px 41px 94px 60px; height: 100vh; width: 600px;overflow-y: scroll; }
header .hamburger_menu_box .flex .menu_box .logo{display: block; width: 138px; height: auto; margin: 0 auto;}
header .hamburger_menu_box .flex .menu_box ul{padding: 60px 0 0;}
header .hamburger_menu_box .flex .menu_box ul li:not(:last-child){margin: 0 0 20px;}
header .hamburger_menu_box .flex .menu_box ul li a{color: #fff; line-height: 160%; font-size: 14px;}
header .hamburger_menu_box .flex .menu_box ul li a span{font-size: 36px; line-height: 160%;}

/* ------------------------------------------------------------ #cta ------------------------------------------------------------ */
#cta{background: url(../images/common/contact_bg_1.jpg) no-repeat center center; background-size: cover; padding: 74px 0 94px;}
#cta .flex{align-items: center; justify-content: space-between; }
#cta .tt_box{padding: 0;}
#cta .tt_box h3 .mont{font-size: 58px;}
#cta .tt_box p{font-size: 24px; line-height: 146%;font-family: 'Noto-Sans-JP-Medium'; padding: 16px 0 0;}
#cta .cta_link a{background: #fff; border-radius: 1000px; color: #000; line-height: 140%; width: 337px; font-family: 'Noto-Sans-JP-Medium'; font-size: 20px; text-align: center; padding: 23px 0 23px; position:relative;}
#cta .cta_link a:before{content: ""; width: 16px; height: 16px; top: 50%; transform: translateY(-50%) rotateZ(-45deg); position: absolute; border-bottom: 1px solid #000; border-right: 1px solid #000; right: 25px;}
#cta .cta_link a.web{ padding: 23px 0 23px 30px; margin: 0 22px 0 0 ;}
#cta .cta_link a.web:after{content: ""; display: block; width: 38px; height: 27px; background: url(../images/common/web_icn.png) no-repeat center center; background-size: 100%; top: 50%; transform: translateY(-50%); position: absolute; left: 40px;;}
#cta .cta_link a.line:after{content: ""; display: block; width: 46px; height: 46px; background: url(../images/common/line_icn.png) no-repeat center center; background-size: 100%; top: 50%; transform: translateY(-50%); position: absolute; left: 34px;}


/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
footer{background: #000; padding: 100px 50px 53px 60px;}
footer .footer_top .footer_flex{display: flex; justify-content: space-between; max-width: 590px; width: 46%;}
footer .footer_top h3{width: 196px;}
footer .footer_top h3 a{display: block;}
footer .footer_top .sns_icn .sns_box{padding: 65px 0 0;width: auto; height: auto; display: block; margin: 0 0 0 auto;}
footer .footer_top .footer_box{max-width: 662px; width: 50%;}
footer .footer_top ul{width: 300px; height: auto; display: flex;justify-content: space-between;padding: 10px 0 0; margin: 0 0 0 auto;}
footer .footer_top ul ol li:not(:last-child){padding: 0 0 16px;}
footer .footer_top ul ol li a{color: #fff; display: block; height: auto;font-family: 'Noto-Sans-JP-Medium';  line-height: 160%; font-size: 16px; letter-spacing: 0.05em;}
footer .footer_top .text_box{width: 562px; height: auto; margin: 0 0 0 auto;}
footer .footer_top .text_box p.mont{letter-spacing: 0.05em; font-size: 41px; line-height: 122%;font-family: montserrat, sans-serif; font-weight: 600; font-style: normal; }
footer .footer_top .text_box p.tt{font-family: 'Noto-Sans-JP-Medium'; font-size: 16px; position: relative; text-align: right; width: 100%; margin: 10px 0 0;}
footer .footer_top .text_box p.tt:before{content: ""; display: block; height: 1px; width: 371px; position: absolute; top: 50%; transform: translateY(-50%); left: 0px; border-bottom: 1px solid #fff;}
footer .footer_bottom{padding: 115px 0 0;}
footer .footer_bottom ul{}
footer .footer_bottom ul li:not(:last-child){margin: 0 24px 0 0;}
footer .footer_bottom ul li a{font-family: 'Noto-Sans-JP-Medium'; font-size: 12px; color: #fff;}
footer .footer_bottom p.mini{margin: 0 0 0 auto;font-family: 'Noto-Sans-JP-Medium'; font-size: 12px; color: #fff;}

/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 768px) {
	/*---------- 共通 ---------*/
	.flex{ flex-direction: column;}
	body{min-width: auto; }
	img{width: 100%; height: auto;}
	
	a.read{width: 135px; height: 28px; padding: 4px 0 0; font-size: 14px;}
	a.read span{ top: 41%; height: 9px; width: 33px; right: 12px; }
	a.read span:after{ width: 13px; right: -2px; top: 5px;}
	a.read:before{width: 28px ;height: 28px; }
	
	.link_btn_box{width: auto; margin: 0 auto;justify-content: center;}
	.link_btn_box a.link_btn{width: 224px; padding: 15px 0; margin: 0 auto;}
	.link_btn_box a.link_btn:not(:first-child){margin: 10px auto 0;}
	
	/* ------------------------------------------------------------ #fv.lower_layer ------------------------------------------------------------ */
	#fv.lower_layer{ padding: 76px 0 42px;}
	#fv.lower_layer .video_box{padding: 186px 0 0;}
	#fv.lower_layer h2{ font-size: 16px;}
	#fv.lower_layer h2 span{font-size:36px;}
	
	/* ------------------------------------------------------------ header ------------------------------------------------------------ */
	header{min-width: auto; padding: 10px 15px; }
	header .flex{flex-direction: row}
	header .flex h1{width: 95px; height: auto;}
	header .hamburger_btn{width: 31px; height: 31px; }
	header .hamburger_btn span:first-child{top: 20px;}
	header .hamburger_btn span:last-child{bottom: 20px;}
	
	header .hamburger_btn.active span:first-child{top: 50%;transform: translate(-50% ,-50%) rotateZ(-30deg); transition: 0.5s;}
	header .hamburger_btn.active span:last-child{bottom: auto; top: 50%; transform: translate(-50% ,-50%) rotateZ(30deg); transition: 0.5s;}
	
	header .hamburger_menu_box{width: 100%; height: 100vh; position: absolute; top: 0px; left: 0px; z-index: 100; background: #000; display: none;}
	header .hamburger_menu_box .flex{display: flex;}
	header .hamburger_menu_box .flex .video_box{display: none;}
	header .hamburger_menu_box .flex .video_box video{width: 100%; height: 100%; object-fit: cover;}
	
	header .hamburger_menu_box .flex .menu_box{padding: 23px 30px 47px; height: 100vh; width: 100%; }
	header .hamburger_menu_box .flex .menu_box .logo{display: block; width: 105px; height: auto; margin: 0 auto 0 0;}
	header .hamburger_menu_box .flex .menu_box ul{padding: 60px 0 0;}
	header .hamburger_menu_box .flex .menu_box ul li:not(:last-child){margin: 0 0 20px;}
	header .hamburger_menu_box .flex .menu_box ul li a{font-size: 11px;}
	header .hamburger_menu_box .flex .menu_box ul li a span{font-size: 20px; }
	
	/* ------------------------------------------------------------ #cta ------------------------------------------------------------ */
	#cta{background: url(../images/common/contact_bg_1_sp.jpg) no-repeat center top 60px; background-size: 100%; padding: 40px 0 29px;}
	#cta .flex{ width: 100%;}
	#cta .tt_box{width: 100%;}
	#cta .tt_box h3{text-align: left;}
	#cta .tt_box h3 .mont{font-size: 35px; text-align: left;padding: 0 0 5px;}
	#cta .tt_box p{font-size: 18px; padding: 16px 0 0;}
	#cta .cta_link{padding: 29px 0 0;}
	#cta .cta_link a{ width: 252px; font-size: 15px; margin: 0 auto; padding: 18px 0 17px; }
	#cta .cta_link a:before{ width: 10px; height: 10px; right: 16px;}
	#cta .cta_link a.web{ padding:18px 0 17px 20px; margin: 0 0 16px;}
	#cta .cta_link a.web:after{width: 28px; height: 20px; left: 30px;;}
	#cta .cta_link a.line:after{width: 34px; height:34px; left: 20px;}
	
	
	/* ------------------------------------------------------------ footer ------------------------------------------------------------ */
	footer{padding: 50px 0 6px ;}
	footer .footer_top .footer_flex{display: block; width: 100%;}
	footer .footer_top{width: 90%; margin: 0 auto;}
	footer .footer_top h3{min-width: auto; width: 165px;}
	footer .footer_top .sns_icn .sns_box{padding: 30px 0 0;}
	footer .footer_top .sns_icn .sns_box li{width: 25px; height: auto;}
	footer .footer_top ul li.list1{padding: 0 47px 0 0;}
	footer .footer_top ul{width: 100%; padding: 41px 0 0;margin: 0; max-width: 500px; height: auto;justify-content: start; }
	footer .footer_top ul ol li{width: 100%;}
	footer .footer_top ul ol li:not(:last-child){padding: 0 0 16px;}
	footer .footer_top ul ol li a{font-size: 16px; }
	footer .footer_top .text_box{width: 100%; height: auto; margin: 25px 0 0 auto;}
	footer .footer_top .text_box p.mont{font-size: 27px; }
	footer .footer_top .text_box p.tt{font-size: 11px; margin: 10px 0 0; width: 240px;}
	footer .footer_top .text_box p.tt:before{width: 120px;}
	footer .footer_bottom{padding: 25px 0 0;width: 100%; margin: 0 auto;}
	footer .footer_bottom ul{ width: 200px; margin: 9 auto; display: flex ; flex-wrap: wrap; margin: 0 auto; flex-direction: row; justify-content: center; }
	footer .footer_bottom ul li:not(:last-child){margin: 0 0;}
	footer .footer_bottom ul li a{font-size: 11px; display: inline-block;}
	footer .footer_bottom ul li:first-child{margin: 0 23px 0 0 ;}
	footer .footer_bottom ul li:last-child{margin: 6px 0 0 ;}

	footer .footer_bottom p.mini{margin:40px 0 0;font-size: 11px; text-align: center;}
}