@charset "utf-8";

/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	color: #fff;
	font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	height: 100%; 
	background-color: #101b46;
}
body:before{ content: ""; display: block; background-image: url("../images/bg_02.webp"); background-size: cover; background-position: center; width: 100%; height: 100dvh; position: fixed; left: 0; top: 0; z-index: -1; opacity: 0.33}

a {color: #c00;text-decoration: none; outline:none;}
a:hover {color: #e00;text-decoration:none;}
a:hover img{opacity:0.8;filter: alpha(opacity=80);}

.pc_only{ display:block;}
.sp_only{ display:none;}


@media only screen and (max-width: 639px){
	.pc_only{ display:none;}
	.sp_only{ display:block;}
}


/* =fade
------------------------------------------------------------------------------------------*/
#js_fade2 {position:fixed; top:0; left:0; width:100%; height:100%;background-color:#fff;background-image:url( ../images/puff.svg ); background-repeat:no-repeat; background-size:60px; background-position:50% 50%; z-index:100;}


/* =teaser
------------------------------------------------------------------------------------------*/
.teaser{ width:94%; margin:0 auto; position:relative;}
.teaser img{ width:100%; }

.teaser h1{ width:53%; margin:0 auto; padding:4vw 0 0; line-height: 0; }
.teaser .date{ width:53%; margin:0 auto; line-height: 0; padding: 3vw 0;}
.lead_txt{width:53%;margin:0 auto 10vw; line-height: 0;}

.comingsoon{ font-size: 6vw;font-family:'Oswald'; padding: 12vw 0 15vw; line-height: 1em; }


.sns{ margin-bottom: 8vw}
.sns h2{ font-family:'Oswald'; font-weight:bold; font-size:1.5vw; line-height:1em; margin-bottom:1vw;}
.sns h2:after{content:"."; font-size:0; line-height:0; border-bottom:2px solid #fff; display:block; width:20px; padding-top:20px; margin:0 auto;}
.sns ul{ display:flex; margin:0 auto; justify-content: center; gap:20px}
.sns li{  width:70px;}
.sns li img{ width:100%;}


.foot_logo{ width: 50%; margin: 0 auto 1vw; max-width: 300px;}
.foot_logo img{ width: 100%;}
.shusai{}
.copyright{}
small{ padding:3vw 0 6vw 0; display:block; font-family:'Oswald'; font-weight:bold;}

.sp_video{ width:94%; margin:0 auto 3vw;}

.movie_wrap{ width:90%; max-width: 900px;  margin: 0 auto 10vw; }

.youtube{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}

@media only screen and (max-width: 639px){
	.teaser{ width: 90%;  }

	.teaser h1{ width:100%; padding: 20vw 0 0;  }
	.teaser .date{ width:100%; padding: 7vw 0; margin: 0;}
	.lead_txt{  width: 100%;  margin: 0 0 15vw;}
	
	.comingsoon{ font-size: 14vw; padding: 15vw 0 20vw; }

	.sns{ margin-bottom: 20vw;}
	.sns h2{  font-size:18px; line-height:1em; margin-bottom:3vw;}
	.sns h2:after{ padding-top:20px; width: 20px;}
	.sns li{  width:60px;}

	.foot_logo{  }
	
	small{ padding: 15vw 0;}
	
	.movie_wrap{  margin: 0 auto 20vw; }
}


/* =ABOUT */
#about{
	    --light_blue: #3399cc;
	
}
.about_wrapper{margin: 0 auto 5vw; background-color: rgba(255,255,255,0.07); }

.section_wrap{ width: 100%; max-width: 1000px;  margin: 0 auto; padding: 5%;text-align: left;}
.h_outer { text-align: center; /* margin-bottom: 80px; */}
.sec_h { position: relative; padding-bottom: 1em; display: inline-block; font-size: min(3vw, 30px); line-height: 1.4em; font-weight: bold; font-family: var(--font_en);}
.sec_h .text { position: relative; z-index: 2;}
.sec_h:before { position: absolute; content: attr(data-heading); top: 8px; left: 8px; -webkit-text-stroke: 1px var(--ac_color); z-index: 0; -webkit-text-fill-color: transparent; font-weight: normal;}
.sec_h:after { position: absolute; content: attr(data-heading_jp); color: var(--key_color); font-size: 14px; left: 50%; transform: translateX(-50%); bottom: 0;}


.con_inner {}
.about_wrap{}
.about_wrap dl{ display: flex; justify-content: space-between; width: 100%; border-bottom: 1px solid var(--light_blue); padding: 1.5em 0; font-size: 20px; font-weight: 500;}
.about_wrap dl:last-of-type{ border-bottom: none;}

.about_wrap dt{ width: 10em; font-size: 16px; color: var(--light_blue); font-weight: bold;}
.about_wrap dd{ width: calc(100% - 10em);}
.about_wrap dd .txts{ font-size: 18px; line-height: 1.7em;}
.about_wrap dd .min{ font-size: 14px; line-height: 1.4em;}
.about_wrap dd .subtxt{ font-size: 16px; line-height: 1.7em; margin: 1em 0 0;}

@media screen and (max-width: 768px) {
	.sec_h { font-size:18px;}
	.about_wrapper{ margin-bottom: 15vw;}
	.about_wrap dl{ display: inherit;padding: 1em 0; font-size: 16px; }
	.about_wrap dl:first-of-type{ padding-top: 0;}
	.about_wrap dt{ width: 100%; font-size: 15px; margin-bottom: 0.5em; }
	.about_wrap dd{ width: 100%;}
	.about_wrap dd .txts{ font-size: 16px; line-height: 1.7em; display: block;}
	.about_wrap dd .subtxt{ font-size: 13px; line-height: 1.7em; margin: 1em 0 0;}	
	.about_wrap  iframe{ height: 50vw;}	
	
	.section_wrap{ width: 100%;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
/*
.page_top{text-align: right;margin: 0;  width:80px;  text-align:center;position:fixed; right:30px; bottom:40px;  z-index:10}
.page_top a{background-color:#040424; display:block;border-radius: 50%;height:80px; width:80px; line-height:80px; color:#fff; font-family:'Montserrat'; font-size:12px;}
.page_top a:hover{background-color:#1b3e71; text-decoration:none;}


@media only screen and (max-width: 639px){
.page_top{ display:none;}
}
*/

/* =見出し
------------------------------------------------------------------------------------------*/
h1{margin:0;}
h2{margin:0;}
h3{margin:0;}
h4{margin:0;}
h5{margin:0;}

/* =clearfix
------------------------------------------------------------------------------------------*/
.clearfix:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}


/* font
------------------------------------------------------ */

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000;}
        #cboxLoadingGraphic{background:url(../images/loading_b.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}