@charset "utf-8";/* -------（リセットCSS）-----------------------------------------------*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{margin:0;padding:0;}
fieldset,img{border:0;height: auto;width: auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;margin: 0;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav{display: block;}
figure{ line-height:0;}
*{ box-sizing: border-box;}


/* =custom style
------------------------------------------------------------------------------------------*/
:root{
	--keyc:#0ea0ff;
	--keya1:#2bb7ca;
	--keya2:#ffd400;
	--font1:YakuHanJP, "Montserrat", "Noto Sans JP", "Noto Sans", "メイリオ", "Meiryo", "MS PGothic", sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body{overflow-x: hidden;text-align: center;
  font-family: YakuHanJP, "Noto Sans JP", "Noto Sans", "メイリオ", "Meiryo", "MS PGothic", sans-serif;
	font-weight: 400;font-size: 16px;line-height: 1.7em;background-color: #fff;color: #474747;}

body:before{ content: "";display: block;position: fixed;height: 100vh;width: 100%;background-image: url("../images/bg.webp");background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -2;top: 0;left: 0; opacity: 0.15;}

/* body:after{ content: ""; display: block; position: fixed;height: 100vh;width: 100%;background-image: url("../images/bg_txt.webp"); background-repeat: no-repeat; background-size: 100%; top: 0; left: 0; z-index: -1; } */

/*
body:after{ content: "";display: block;position: fixed;height:50vh;width: 100%;background-image: url("../images/bg_txt.svg");background-repeat: no-repeat;background-position: bottom;background-size: 100%;z-index: -1;bottom: -0.5vw;right: 0; opacity: 0.05;} 
*/
html {overflow-y:scroll;height:100%;}

a {color: var(--keyc2);text-decoration:none;outline:none;transition: 0.1s;}
a:hover{opacity: 0.8;}

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

#container{ position:relative;}

@media only screen and (max-width: 768px){
    body{font-feature-settings : "palt";}
    body:before{ }
    
    .pc_only{ display:none;}
    .sp_only{ display:block !important;}
}

.fix_front { position: fixed; width: 100%; height: 100dvh; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 20;}

.frame {
   --frame_s: 1vw;
   --frame_lh: 50vh;
   --frame_lw: 50vw;
}

.frame {position: absolute;width: 100%;height: 100%;top: 50%;left: 50%;transform: translate(-50%, -50%);pointer-events: none; }
.frame:after{position:absolute; content:""; width:100%; height:100%; top:0; left:0; border:var(--frame_s) solid var(--keya1); z-index:-1; box-sizing:border-box;}

.frame span {position: absolute;display: block;width: 100%;height: 100%;}

.frame span:before {position:absolute; content:""; width:var(--frame_s); height: var(--frame_lh);}

.frame span:after { position:absolute; content:""; width:var(--frame_lw); height: var(--frame_s);}

.frame span:nth-of-type(1){
  &:before{top:0; left:0;border-left: var(--frame_s) solid var(--keya2);}
  &::after{top: 0;right: 0;border-top: var(--frame_s) solid var(--keya2);}
}
.frame span:nth-of-type(2) {
  &:before{bottom: 0; right: 0;border-right: var(--frame_s) solid var(--keya2);}
  &::after{bottom: 0; left: 0;border-bottom: var(--frame_s) solid var(--keya2);}
}

@media screen and (max-width: 768px) {
		
	.frame {  --frame_s: 3vw;}
	.frame span:nth-of-type(1){
    &:before{}
    &::after{display: block;}
   }
	
}

/* =header
-----------------------------------------------------------------------------------------*/
header{text-align:left;position:fixed;z-index:99;top:0;width:100%;display: flex;align-items: center;justify-content: flex-end;}

.headlogo{ position: absolute;left: 3%;top: 0px;width: 8%;z-index: 10; transition: 1s; opacity: 0;}
.headlogo img{ width: 100%;}
.headlogo.is-scrolled{ opacity: 1; top: 2vw;}

.in .headlogo{ opacity: 1;top: 20px;}

.toggle_nav,.nav,.global,.nav li,.nav li a{ height: 100%;}
.global{ width: 100%;margin-right:1.5vw;display: flex;}

.nav li a{ line-height:1em;font-size:14px;text-align:center;padding:25px 1em ;position:relative;text-decoration: none;color: #fff;display: flex;align-items: center;}

.nav li.sns a{ padding: 12px 1em 0;}
.nav li.sns a img{ width: 35px;}

.nav li a:hover,
.nav li a.active{ color:#fff;}
.nav li a.disactive {color: #999;}
.nav_trigger{display: none;}

@media only screen and (max-width: 768px){
	header {padding: 0;}
	header .headlogo{width: 15%;left: 5%;top: 0;}	
	header .headlogo img{}
	.headlogo.is-scrolled{  top: 5vw;}
    
	.global{width:100%;position:fixed;z-index:10;top:0;left:0;overflow-y: hidden;padding-top:0;height:0;background-color:rgba(0,0,0,0.9);box-sizing: border-box;display: inherit;-webkit-transition: 1s ease;-moz-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;transition:0.5s ease;}
	.global li{width: 100%;display:inherit;}
	.nav-active .global{ height:100vh;padding-top:47px;}
	.nav li.sp_top{ display: inherit;}

	.toggle_nav{ height: auto;-webkit-transition: 0.2s ease;-moz-transition: 0.2s ease;-o-transition: 0.2s ease;-ms-transition: 0.2s ease;transition: 0.2s ease;}
	.nav{ margin-bottom:0;width:100%;height:inherit;}
	.nav li{ padding-right: 0;height: auto;}
	.nav li a:hover,nav li a.at{  border-bottom: none;}
	.nav li a{ width:100%;max-width:inherit;text-align:center;padding: 1em 7%;height: auto;}
    .nav li.sns a{ padding: 1em 7%;}
    .nav li.sns a img{ width: 30px;}
	.nav li a:hover,
	.nav li a.active{ color:#000;background-color:rgba(255,255,255,0.7);}

	/* Default navigation icon */
	.nav_trigger{display: block;position: fixed;width: 30px;height: 25px;right:3vw;top: 7px;z-index: 200;}
	.nav-active .nav_trigger{opacity: 0.7;}
	.nav_icon{display: inline-block;position: relative;width: 30px;height: 2px;background-color:var(--keyc);-webkit-transition-property: background-color, -webkit-transform;transition-property: background-color, -webkit-transform;transition-property: background-color, transform;transition-property: background-color, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	.nav_icon:before,
	.nav_icon:after{content: '';display: block;width: 30px;height: 2px;position: absolute;background:var(--keyc);-webkit-transition-property: margin, -webkit-transform;transition-property: margin, -webkit-transform;transition-property: margin, transform;transition-property: margin, transform, -webkit-transform;-webkit-transition-duration: 300ms;transition-duration: 300ms;}
	.nav_icon:before{margin-top: -9px;}
	.nav_icon:after{margin-top: 9px;}
	.nav-active .nav_icon{background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before{margin-top: 0;-webkit-transform: rotate(45deg);transform: rotate(45deg);background:#fff;}
	.nav-active .nav_icon:after{margin-top: 0;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);background:#fff;}

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding: 4vw 0 6vw;
	.foot_link{ width:90%; max-width: 500px; margin: 0 auto;
		a{ display: block; border:2px solid var(--keyc); color:var(--keyc); font-weight: bold; padding: 1em 0; border-radius: 100vw;}
	}
	small{ font-size: 14px;line-height: 1.5em;display: block; margin-top: 5em;}
}
#top_sns { margin-bottom: 5vw;
	  .stit{ font-size: 3vw}
    .top_sns_list { display: flex; gap: 10%; justify-content: center; width: min(240px, 59vw); margin: 0 auto;
      img { width: 100%; }
    }
}


@media only screen and (max-width: 768px){
    footer{ padding: 50px 5% ;
		.foot_link{ 
			a{ line-height: 1.5em; font-size: 3.3vw;}
		}
		small{ font-size: 11px;line-height: 1.5em;width: 100%; margin-top: 4em; }
	}
	
	#top_sns { margin-bottom: 5vw;
		.stit{ font-size: 26px;}
	}
}


/********************** ローダー *******************************/
/* アニメーション */
.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}
.loader{background-image:url(../images/logo.webp);background-repeat : no-repeat; background-size:15%; background-position : 50% 46%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:0; animation: anime_loader 1s; animation-fill-mode:both;}

.intro_loader .top_tit{  -ms-filter: blur(40px); filter: blur(40px);}
body.intro_loader:before{ transform: scale(1.5)}

@keyframes anime_loader {
    0%  { opacity:0;}
    100%  { opacity:1;}
}
.intro_on .loader{ animation:none; animation-fill-mode: inherit;}
.intro_on .top_tit{  -ms-filter: blur(0); filter: blur(0);}
body.intro_on:before{ transform: scale(1)}

/* 00 */

@media only screen and (max-width: 768px){
    .loader{ background-size:35%;}
}
/******* youtube *******/
.youtube{position:relative;width:100%;margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}



/* =共通
------------------------------------------------------------------------------------------*/
main{ width: 100%;text-align: left;} 
main img{ max-width: 100%;}

.container{ width:88%;max-width: 1200px;margin: 0 auto;}
.bg_filter{ background-color: rgba(0,0,0,0.5); padding: 5vw 0 0;}

@media only screen and (max-width: 768px){
	.bg_filter{  padding: 50px 0 0;}
}

/******* ボタン *******/
.btn{ display: block;color:#fff;line-height: 1em;font-size: 16px;position: relative;text-align: center;padding: 1.25em 0;text-decoration: none;border: 1px solid #999;}
.btn::after{content: "";position: absolute;top: calc(50% - 3px);right: 6%;width: 4px;height: 4px;border: 1px solid;border-color: transparent #fff #fff transparent;transform: rotate(-45deg);}


@media only screen and (max-width: 768px){
    .btn{ padding: 1.2em 0;font-size: 16px;}
}

/******* 見出し *******/
.tit{color: #e85799;line-height: 1em;font-size: 9vw;margin-bottom: 0.25em;}
.stit{ font-size: 4vw;line-height: 1.7em;;margin-bottom: 1em;text-align: center;color: var(--keyc);font-weight: 400; font-family: var(--font1); font-weight: bold;}

@media only screen and (max-width: 768px){
    .tit{ text-align: center;}
    .stit{ font-size: 36px;line-height: 1.5em; margin-bottom: 0.5em;}
}


/* = page contents
------------------------------------------------------------------------------------------*/

/******* mainimg *******/
.top{ margin:1vw auto 5vw; position: relative;  line-height: 0;width:calc(100% - 2vw);}
.top img{ width: 100%; }
.top p{ margin: 0;}

.top_tit{ width: 100%; transition: 2s;}
.top_tit .tit{ width: 50%; margin: 0 auto ; text-align: center; padding: 10vw 0 5vw; }

.top_tit .kv{ margin-bottom: 10vw; }

.catch{ margin-bottom: 20vw;}
.catch .catch1{ width: 90%; margin: 0 auto 5vw;}
.catch .catch2{ width: 50%; margin: 0 auto;}

@media only screen and (max-width: 768px){
    .top{  display: flex; align-items: center;margin-bottom: 0px;position: inherit; overflow: inherit; min-height:100vh; width: 100%; margin-top: 3vw;}

	.top_tit {width: 100%; margin: 0 auto 30vw;}	
    .top_tit .tit{ width: 100%;  padding: 0; margin-bottom: 5vw;}
	.top_tit .kv{ width: 90%; margin: 0 auto 10vw;}
	.catch{ margin-bottom: 0; width: 70%; margin: 0 auto;}	
	.catch .catch1{ width: 100%; margin: 0 auto 5vw;}
	.catch .catch2{ width: 100%; margin: 0 auto;}

	
	.top_catch{ height: auto; max-height: inherit; width: 9%; top: 20px;}
	.top_catch img{ height: auto; width: 100%;}
}


/******* cast *******/
.cast{position: relative;z-index: 1;text-align: center;margin-bottom: 25vw;}
.cast .container{ font-weight: bold;line-height: 2em;max-width: 1400px;}
.cast .cast_wrap{ margin-bottom: 9vw;}

.cast_block{ margin-bottom: 8vw;}
.cast_block .roll{margin-bottom: 0em; line-height: 0; width: 50%; margin: 0 auto 4vw;}
.cast_block .name{ font-size: 2vw; line-height: 2.2em;margin-bottom: 0;}
.cast_block .name span{ font-size: 0.6em; display: block; line-height: 1em; color: var(--keya1); margin-top: 1em;}

.cast_ul{ display: flex; grid-gap: 3%; justify-content: center;flex-wrap: wrap;font-size: 20px;line-height: 1.5em;margin-bottom:15vw;}
.cast_ul figure{ line-height: 0;margin-bottom: 10px;}
.cast_ul img{ width: 100%;}
.cast_ul li{ width: 22.75%;font-size:20px;line-height: 1.5em;}
.cast_ul li span{ font-size: 0.7em;display: block; line-height: 1.5em;}


.cast_block.crazyb .name span { color: var(--keya2);}

.staff_credit{ font-size: 2vw; margin-bottom: 15vw;line-height: 1.5em;}
.staff_credit span{ font-size: 0.8em; display: block;line-height: 1.5em;}

.comingsoon{ width: 90%; margin: 0 auto 15vw;}

@media only screen and (max-width: 768px){
	.staff_credit{ font-size: 16px; line-height: 1.7em; margin-bottom: 30vw;}
	.cast{ margin-bottom: 30vw;}
	.cast_block { margin-bottom: 15vw;}	
	.cast_block .roll{ width: 70%; margin-bottom: 10vw;}
	.cast_block .name{ font-size: 5vw; }	
		
	.cast_ul {}	
    .cast_ul li{ width: 48.5%;margin-bottom: 6%; font-size: 16px;}
	
	.comingsoon{ width: 80%; margin-bottom: 20vw;}
}



/* =colorbox
------------------------------------------------------------------------------------------*/
#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:var(--keyc2);}
#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-color: var(--keyc2);*/ position:relative;z-index:10000;}
        #cboxLoadingGraphic{ /*background:url(../images/loading.gif) no-repeat center center;*/}
        #cboxLoadingOverlay{/*background:var(--keyc2);*/}
        #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;}
}


/************* ANIMATIONS ***************/

.anime{ position:relative;opacity:0;}
@keyframes imageAnimation{0%{opacity: 0;animation-timing-function: ease-in;}
  10%{opacity: 1;animation-timing-function: ease-out;}
  25%{opacity: 1;}
  37%{opacity: 0;}
  100%{opacity: 0;}
}

/* SLIDE BOX ANIMATION */
@keyframes play{from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut{from {transform: translateX(0);}  
  to {transform: translateX(101%);}
}

.play.blkin{animation-name: play;animation-duration: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);position: relative;}
.play.blkin:before{animation-name: maskOut;animation-duration: .4s;animation-delay: .4s;animation-fill-mode: forwards;animation-timing-function: cubic-bezier(.8,0,.5,1);content: '';position: absolute;top: 0;left: 0;z-index: 1000;width: 100%;height: 100%;background: #333;}

.play.fade_up {animation-fill-mode:both;animation-duration:1.5s;animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp{0%{opacity: 0;-webkit-transform: translateY(100px);} 
    100%{opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes fadeInUp{0%{opacity: 0;-webkit-transform: translateY(100px);-ms-transform: translateY(100px);transform: translateY(100px);}
 100%{opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}

.play.fade_in{animation-fill-mode:both;animation-duration:3s;animation-name: fadeIn;visibility: visible !important;}
@-webkit-keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}
@keyframes fadeIn{0%{opacity: 0;}
 100%{opacity: 1;}
}