@charset "utf-8";

/********************** GRID  ****************************/
.grid4{ position:fixed; left:0; bottom:0; width:100%; height:100vh; z-index:-1; }
.grid4 div{height:100vh; border-right:1px solid #333; position:absolute;}
.grid4 .grida{ left:25%; bottom:0;}
.grid4 .gridb{ left:50%; top:0;}
.grid4 .gridc{ left:75%; bottom:0;}

.grid3{ position:fixed; left:0; top:0; width:100%;  height:100vh;z-index:1; }
.grid3 div{height:100vh; border-right:1px solid #666; position:absolute; top: 0; transition: 1s; left: 33.33%;}
.grid3 .gridb{ left: 66.66%; bottom: 0; top: auto;}

.grid4.top_grid div{ border-color: #999;}

@media only screen and (max-width: 769px){
    .grid4 .grida{ left:5%; bottom:0;}
    .grid4 .gridc{ left:95%; bottom:0;}
	
.grid4.top_grid div{ border-color: #666;}
	
	.grid3 div{ left: 5%;}
	.grid3 .gridb{ left:95%;}
}

/********************** TOP loading animation ****************************/

.intro_loader{ overflow:hidden; height:100vh;}
.loader_bg{ background-color:#000; width:100%; height:100vh; position:absolute; top:0; z-index: 1000;}
.loader{background-image:url("../images/logo.svg");background-repeat : no-repeat; background-size:min(300px, 50%); background-position : 50% 50%; z-index:9999; position:absolute; top:0; left:0; width: 100%; height: 100vh; }

.tanime{ position:relative; overflow:hidden; opacity:0; display: block;}

#bg_fixed {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100lvh;
}
#bg_fixed video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.2; z-index: -1;
}

@media only screen and (max-width: 769px){
	#bg_fixed video { opacity: 0.15;}	
}

/*
#bg_fixed:before{ content: ""; display: block; position: fixed; width: 100%; height: 100vh; top: 0; left: 0; background-image: url("../images/main_bg_dot.webp");}
*/


.intro01 .grid4 div{  border-right: 3vw solid #333; opacity:0;  height:0;}



@keyframes imageAnimation {
    0% {opacity: 0;animation-timing-function: ease-in;}
    15% {opacity: 1;/*animation-timing-function: ease-out;*/}
    25% {opacity: 1;}
    37% {opacity: 0;transform: scale(1.2);}
    100% { opacity: 0 }
}

@media screen and (max-width: 769px) {
	/* .loader{ background-size: 25%;} */
}

/********************** top *******************************/
.top{  width:100%; height:100vh; position:relative; z-index:10;}
.top .block{text-align:center; width:25%;  height:100vh;}
.top img{ width:100%;}

/****** TOP LEFT ******/
.top .block.left{width:50%; height: auto; padding: 1%;}
.top .block.left figure{width:100%; margin:0 auto; position:relative;}
.top .block.left figure img{ width:100%; height: auto;transition:0.3s;}
.top .block.left .top_catch{ position: absolute; top: 47vh; left: 12%; transform: translate(0,-50%); width: 82%; }

/****** TOP CENTER ******/
.top .top_logo{ position:fixed; top:calc(50vh - 2.5vw);; left:62.5%;  width:25%; line-height:1; transition:1.5s; z-index:10;transform: translate(-50%,-50%);}
.top .top_logo h1{width:75%; margin:0 auto; line-height: 0;}
.top .top_logo p{ font-size:max(11px,0.7vw); margin:0; line-height: 1.7em;}


/****** TOP BOTTOM LEFT ******/
.top_schedule{  position:fixed!important; bottom:5.5vh; right:0; width:50%; z-index:5; transition: 0.3s; }
.top_schedule .schedule_block{background-color:rgb(255, 255, 255);padding:2vh 2.5vw ; text-align:left; color:#fff; opacity: 1; transition: 0.3s;}

.top_schedule .schedule_wrap{ display: flex; grid-gap: 1.5vw; }
/* .top_schedule .schedule_wrap:after{ display: block; content: ""; border-right:2px solid #000; height: 100%;position: absolute;transform: skewX(-45deg);right: 32.33%;z-index: -1;top: 0; } */

.top_schedule.active .schedule_block{ transform: translate(0,-100%)}


/****** TOP BANNER ******/
.top_bnr{ position: fixed; z-index: 1000; right: 0; bottom: 5.5vh; width: 33.33%; padding: 0 3% 0.75vh;}
.top_bnr li{}
.top_bnr li a{ display: block; border: 1px solid #fff; color: #fff; padding: 2vh 0;}

.top_bnr_visual{width: 50%;padding: 1% 1% 1% 0; 
    .top_bnr_btn{display: block; background: #ffffff; padding: 2em; position: relative;
        span{color: #000;font-size: clamp(16px, 2vw, 20px);font-weight: 800;letter-spacing: 1px;}
        &::after{content: "";position: absolute;top: calc(50% - 3px);right: 4%;width: 4px;height: 4px;border: 1px solid;border-color: transparent #000 #000 transparent;transform: rotate(-45deg);}
		&:hover{ cursor: pointer;}
}
@media screen and (max-width: 769px){width: 90%; margin: 0 auto 6vw; padding: unset;}
}


/****** TOP SCROLL AREA ******/
.top_scroll_wrap{ padding: 5vw 0 0; position:relative;  z-index:10;}

.top_scroll{ position:relative;  width:75%; text-align:left; background-color:rgba(7,19,36,0.9); min-height:100vh; z-index:10;}
.top_scroll:before{content:""; display:block; background-image: url("../images/line_logo.svg"); width: 100%; height: 6vw; background-repeat: no-repeat; background-size: contain; background-position: left ; transform: translate(0,-25%); opacity: 0.5; }
.top_scroll:after{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image:url("../images/bg_wire.webp"); background-size: 50%; opacity: 0.3; background-attachment: fixed; }

.top_scroll .top_wrap{ padding: 3vw 0; width: 80%; max-width: 900px; margin: 0 auto;}
.top_scroll .video_block{ width: 100%; margin: 0 auto 5vw; position: relative; padding-top: 56.25%; /* 16:9 */}
.top_scroll .video_block iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.top_scroll .scroll_block{ width:100%; position:relative; z-index:1; margin-bottom:8vw; }
.top_scroll .scroll_block h2{ font-family:var(--sitefont); font-size:5vw; line-height:1em;  color: var(--sitekey); margin-bottom: 2vw;}

.top_scroll .news_area {  }
.top_scroll .news_area a{ display:block;color:#fff;}
.top_scroll .news_area dl{ margin-bottom:2.5vw;}
.top_scroll .news_area dt{  position:relative;  font-size:18px; line-height:1.4em; margin-bottom:4px; }
.top_scroll .news_area dt span{ display:block; letter-spacing:0.02em; line-height:1em; font-size:2vw;font-family:var(--sitefont); margin-bottom: 0.2em; }
.top_scroll .news_area dt span:after{padding-top:1vw; width:5%; margin-bottom:0.5vw;}
.top_scroll .news_area dd{ }
.top_scroll .news_area .news_more{ border:1px solid var(--sitekey); text-align:center; padding: 0.9vw 0 0.3vw 0; color:var(--sitekey); letter-spacing:0.05em;  font-family:var(--sitefont);
font-weight: 500; font-size: 18px} 
.top_scroll .twt_area{ max-width: 700px; margin: 0 auto;}

.top_date{ }
.top_date li{ margin-bottom: 3vw; line-height: 0;}

/* top_staff */
.top_staff{padding: 4vw 0 6vw; }
.top_staff ul{margin-bottom:2vw;display: flex;justify-content: center;}
.top_staff ul:last-of-type{margin: 0;}
.top_staff li{ font-size: min(2vw, 30px); line-height: 1.5em; text-align: center; padding: 0 2em; }
.top_staff li .tag{background-color: #fff;color: #000;font-size: 0.6em;line-height: 1.3em;padding: 0em 0.4em;display: inline-block; margin-bottom: .75em;}
.top_staff li .small{font-size: 0.7em;}

.top_cast{ padding: 2vw 0; text-align: center; font-size: min(2vw, 22px);line-height: 1.5em; font-weight: 600;}
.top_cast ul{ margin-bottom: 2em;}
.top_cast li{ margin-bottom: 0.5em;}
.top_cast .part{ font-size: 0.7em;}

.top_cast .sub_cast_wrap{ margin-bottom: 2em;
    .sub_cast_tit{font-size: 0.64em;}
    .sub_cast_name{font-size: min(1.6vw, 18px);line-height: 1.9em;margin-bottom: 2em;
    &:last-of-type{margin-bottom: 0;}}

}

@media only screen and (max-width: 769px){
    .top{ overflow:inherit; height:inherit;}
    .top .top_logo,
    .top .block.left,
    .top_news,
    .top_foot{ position:relative; transform:none; float:none; top:0; left:0; width:100%; z-index:10;}    

	.top_foot{ width: 90%; margin: 0 auto;}

    .top_foot{ position:relative; transform:none; float:none; top:0; left:0; width:100%; z-index:10;}    

	.top_foot{ width: 90%; margin: 0 auto;}
	
    .top .block{ height:auto;}
    .top .block.left{ height:auto; line-height:0; width: 90%; margin: 0 auto; padding: 60px 0 0;}
    .top .block.left figure{ width:100%; top:0; height: auto;}
    .top .block.left figure img{ max-height: inherit; width:100%;  top:0;left:0; opacity:1; height:auto; transform:none; position:inherit;}
    .top .block.left .top_catch{ position: inherit; top: 0; left: 0; width: 100%; transform: none; margin: 0;}
    
    .top_bnr{ position: inherit; bottom: 0; width: 90%; margin: 0 auto 50px; z-index: 5; padding: 0;}
    .top_bnr li a{ padding: 4% 0; font-size: 14px; line-height: 1.5em;}

    .top .top_logo{ width: 90%; margin:-5vw auto 6vw; padding:0; }
    .top .top_logo h1{ margin-bottom:15px;}
    .top .top_logo .top_logo_wrap{ position: inherit; width:100%;  top:0;transform: none; z-index:1;}
    .top .top_logo p{ font-size:3vw; line-height:1.7em;}

    .top_schedule{ display: none;position:inherit!important; width:100%; bottom:0; padding:8vw 5%; margin-bottom: 12vw; right: 0;}
	.top_schedule.active{ right: 0; }	
	.top_schedule .schedule_wrap{ display: inherit;}
    .top_schedule .schedule_wrap .date{ padding: 0 5%;}
    .top_schedule .schedule_wrap .area{ font-size: 3.5vw; width: 5em;}
    .top_schedule .schedule_wrap:after{ right: 15%;}
	
	.top_schedule .schedule_wrap li{ margin-bottom: 3vw;}	
	.top_schedule .schedule_wrap li:last-child{ margin-bottom: 0;}
	
	.top_date{ width: 94%; margin: 0 auto;}
	.top_date li{ margin-bottom: 1em;}
	
	.top_staff{ padding: 10vw 0;}
	.top_staff ul{ margin-bottom: 1em;}
	.top_staff li{ font-size: 16px;padding: 0 1em;}
	
	.top_cast{ font-size: 16px; padding: 10vw 0;}
	.top_cast ul{ margin-bottom: 1em;}
	.top_cast li{ margin-bottom: 0;}

    .top_cast .sub_cast_wrap{margin-bottom: 1em;}
    .top_cast .sub_cast_wrap .sub_cast_name{font-size: 15px;margin-bottom: 1em;
    &:last-of-type{margin-bottom: 0;}}

    .top_scroll{ position: inherit; top:0; width:100%;  background: none; min-height: inherit; margin:0 auto;}
    .top_scroll:after{ display:none;}
    .top_scroll:before{ display: none;}
    .top_scroll .top_wrap:after{ height: 2vw;}

    .top_scroll .scroll_block{ width:90%; float:none; position: inherit;  margin:0 auto 15vw; min-height:inherit; }
    .top_scroll .scroll_block h2{font-size:14vw; margin-bottom: 30px; }
    
    .top_scroll .top_wrap{ width: 100%; padding: 0;}

    .top_scroll .news_area { padding:0; margin-top:-5vw;}
    .top_scroll .news_area dl{ margin-bottom: 25px;}
    .top_scroll .news_area dt{ font-size:16px; line-height:1.6em; margin-bottom:15px; }
    .top_scroll .news_area dt span{ line-height:1em; font-size:24px;}
    .top_scroll .news_area dt span:after{padding-top:5px; width:5%; margin-bottom:5px;}
    .top_scroll .twt_area{ padding:0; margin-top:-5vw;}
    .top_scroll .twt_area iframe{height: 80vw!important;}

	.top_scroll .video_block{ margin-bottom: 15vw;}

    .scroll_line{ overflow:hidden; width:1px; height:60px; display:block; position:absolute; z-index:20; bottom:0; left:50%; }
    .scroll_line span{  display:block; background:#fff; position:absolute; bottom:0;left:0; height:60px; width:1px;transition: all 400ms ease 0s;-webkit-transition: all 400ms ease 0s;
	-webkit-animation: scrollarrow 2s infinite;
	animation: scrollarrow 2s infinite;
}
@-webkit-keyframes scrollarrow {
	0% {-webkit-transform: translate(0, -60px);}
	100% {-webkit-transform: translate(0, 60px);}
}
@keyframes scrollarrow {
	0% {transform: translate(0, -60px);}
	100% {transform: translate(0, 60px);}
	
}
}

/********************** in *******************************/

/****** COMMON ******/

.in_main{ width:75%; padding-top:15vw; min-height: 100vh;}
.in_tit{ font-family:var(--sitefont); font-size:18vw; opacity:0.2; letter-spacing:0; margin-right:0;line-height:0.8em; text-align:right; position:fixed; right:0; top:0; transition:2s; width:100%; color: var(--sitekey);}
.in_tit.tit_s{ }

.in_wrap{ width:88%; max-width:1100px; margin:0 auto; position:relative;}

#pagination{position: relative; overflow: hidden; margin-bottom:2vw; display:table; margin:0 auto;}
#pagination a{ color:#fff;}
#pagination .page-numbers{ border: 1px solid #666; margin-right: 8px; text-decoration: none; height:40px; line-height: 40px; font-size: 14px; width:40px; float:left; padding: 0 8px !important; display:table-cell !important; text-align:center;}
#pagination .page-numbers.current{color: #000; background:rgba(255,255,255,0.8); border:none;}
#pagination .page-numbers.dots{ padding:0 12px !important;}
#pagination .next.page-numbers,#pagination .prev.page-numbers{ width:75px;}

/* in anime*/
.in_anime{transition:1.5s;  position:relative; top:0; z-index:5;}
.in_anime.in_slide{ top:10vw; opacity:0;}
.in_tit.tit_anime{right:10vw; opacity:0;}
.in_head_anime{ top:-5vw; opacity:0;}

.grid4 div{transition:1s;}
.in_intro .grid4 div{  border-right: 3vw solid #333; opacity:0;  height:0;}

/* ie EDGE hack */
_:-ms-lang(x), .in_anime{transition:all 2s; }
_:-ms-lang(x), .in_anime.in_slide{ top:0; opacity:0;}
_:-ms-lang(x), .in_tit{ transition:all 2s;}
_:-ms-lang(x), .in_tit.tit_anime{right:0; opacity:0.4; }

.in_foot{ width: 75%; position: relative;}
.in_foot.under{padding: 2.5vw 0 5vw 0; text-align: center; font-size: 14px; border-top: 1px solid #333;}

/*
.in_foot:after{content:""; display:block; background-image: url("../images/line_pink.png"); width: 33.33%; height: 2vw; background-repeat: no-repeat; background-size: cover; background-position: right; position: absolute; left: 0; bottom: 0; transform: rotateX(180deg);}
*/

.stit{ font-family:var(--sitefont); font-size:60px; line-height:1em; margin-bottom:1em; color:var(--sitekey); letter-spacing: 0.1em;}

@media only screen and (max-width: 769px){
    .in_main{ float:none; width:100%; margin:0 auto;  margin-top:calc(40px + 6.5vw); position:relative; padding-bottom:0; min-height:calc(100vh - 6.5vw - 150px);}
    .in_tit{ font-size:23vw; margin-right:0; line-height:0.85em; }
    .in_tit.tit_s{}
	
    .in_foot{ position:relative; width:100%; margin:0 auto; }
    .in_foot .foot_r small{ font-size:10px; line-height:1.7em;}
    .in_wrap{ width:90%;}
    .in_foot:after{ height: 4vw; width: 50%; background-position: right; transform: rotate(180deg); left: auto; right: 0;}
    
    .stit{ margin-bottom: 15px; letter-spacing: 0; text-align: center; font-size: 50px;}
}



/********************** NEWS *******************************/
.news{ margin-bottom: 10vw;}
.news article{ text-align:left; padding:0; margin-bottom: 2%; }
.news article a{ padding: 3% 5%; display: block;border: 1px solid #666;color: #fff; position: relative; backdrop-filter: blur(7px); background-color: #00000000;}
.news article a.disactive{pointer-events: none;}
.news article a:before{content: ""; display: block; background-color: #fff; position: absolute; width: 0%; height: 100%; top: 0; left: 0;transition: 0.3s; z-index: -1;}
.news article a:hover{ color: #112c51;}
.news article a:hover:before{ width: 100%;}

.news article .newstit{  font-size:1.2em; line-height:1.5em; font-weight: 500; }
.news article .news_date{  margin-right:0; font-family:var(--sitefont); display:block; font-size:20px; letter-spacing: 0.1em; line-height: 1.5em;}

.news img{ max-width:100%;}
.news iframe{ width:100%;}

.news.single_news{
    .single_tit_box{position: relative;display: block;padding-bottom: calc(clamp(17px, 2vw, 24px) * 0.8);margin-bottom: 2em;border-bottom: 4px double #fff;
    .single_newstit{display: block;width: 100%;font-size: clamp(19px, 2vw, 24px);line-height: 1.4em;font-weight: bold;}
    .single_news_date{ font-size: clamp(12px, 2vw, 14px); line-height: 1.4em; font-weight: bold; margin-bottom: 0.7em; letter-spacing: 0.1em;display: block;}
    }
    .news_content{padding: 3%;backdrop-filter: blur(7px);background-color: #00000000;
        h3{padding: .2em .7em; display: inline-block; border: 1px solid #666; font-weight: bold; margin-bottom: .5em;font-size: clamp(16px, 1.6vw, 20px);line-height: 1.5em;}
        h4{ font-weight: bold; margin-bottom: .5em; position: relative; padding-left: 1em;line-height: 1.5em;font-size: clamp(16px, 1.4vw, 18px);
        &::before{content:'';left: 0; top: 50%; transform: translateY(-45%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; position: absolute;}}
    }
    a{padding:0; border: unset; color: #c00; text-decoration: underline; display: inline-block;background-color: unset; backdrop-filter:unset;
    &::before{display: none;}
&:hover{color: #fff;}}
}

@media only screen and (max-width: 769px){
    .news article{  padding-right:0; margin-bottom:10px;}
    .news article h3{ font-weight:bold; font-size:1.2em; line-height:1.5em; margin-bottom:2vw;}
    .news article .newstit{ font-size: 16px;}
        .news_content{padding: 5%;
       }
}

/********************** INTRODUCTION *******************************/
.intro{ margin-bottom: 100px; line-height: 2.5em; font-size: 18px;}
.intro .stit img{ width: 100%;}
.story{ line-height: 2.5em; margin-bottom: 200px;font-size: 18px;}
.story p{ margin-bottom: 3em;}
.intro p span { margin-bottom: 3em; font-size: 1.3em; font-weight: 600;}
.intro_label{ display: inline-block; background: #fff; color: #000; font-weight: bold; padding: 0.2em 0.5em; letter-spacing: 0.05em; font-size: 28px; line-height: 1.5em;}


@media only screen and (max-width: 769px){
    .intro{ text-align: left; margin-bottom: 60px; line-height: 2em;font-size: 16px;}
	.intro_label{ display: block; width: 13em; margin: 0 auto 1em; text-align: center; padding: 0.15em 0 ; font-size: 18px;}
    .story{ text-align: left; margin-bottom: 60px; line-height: 2em;font-size: 16px;}
    .aboutstory h3{ font-size:8vw;}
    .about_bg:after{ height:100vh; width:100%; position:fixed; top:0; left:0;  opacity:0.15; }
}


/********************** CAST *******************************/


/* cast */
.cast{margin-bottom: 15vw;}
.cast .cast_wrap{width: 94%;
    margin: 0 auto;}
.cast .cast_wrap ul{display: flex;justify-content: center;flex-wrap: wrap; gap:3%;}
.cast .cast_wrap li{width: 31.33%;margin: 0 0 10%;}
.cast .cast_wrap li figure{line-height: 0;margin-bottom: 3%;}
.cast .cast_wrap li figure img{width: 100%;}
.cast .cast_wrap li .name{margin: 0;font-size: min(1.5em,1.7vw);letter-spacing: 0.2em;line-height: 1.4em;}
.cast .cast_wrap li .name .act_name{display: inline-block;background-color: #fff;color: #000;margin-bottom: 0.5em;letter-spacing: 0;font-size: 0.7em;font-weight: bold;line-height: 1.5em;padding: 0 0.6em;}
.cast .cast_wrap li.dummy figure{ background: #666;}
.cast .cast_wrap li.dummy figure img{ opacity: 0;}


.cast .cast_wrap .txt_list{max-width: 800px;margin: 0 auto 80px;font-size: min(1.2em,1.6vw);line-height: 1.8em;
.sub_cast_name{display: inline-block;background-color: #fff;color: #000;margin-bottom: 0.5em;letter-spacing: 0;font-size: 0.7em;font-weight: bold;line-height: 1.5em;padding: 0 0.6em;}
}

/* staff */
.staff{ margin-bottom: 15vw;}
.staff ul{margin-bottom: 60px;}
.staff li{font-size: min(1.3em,1.7vw);line-height: 1.5em;margin-bottom: 1em;}
.staff li .tag{color: #BABABA;display: block;font-size: 0.65em;line-height: 1.5em;}
.staff li .small{font-size: 0.7em;}
.staff li img{ max-width: 200px; width: 48%; margin: 1%;}

@media only screen and (max-width: 768px){
	.cast{ width: 90%; margin: 0 auto 30vw;}
	
	.cast .cast_wrap li{width: 70%;margin: 0 0 15%;}
	.cast .cast_wrap li figure{margin-bottom: 12px;}
	.cast .cast_wrap li .name{font-size: 4.2vw;}

	.cast .cast_wrap .txt_list{max-width: 80vw;margin: 0 auto 40px;font-size: 3.8vw;}

	.staff { width: 90%; margin: 0 auto 100px;}
	.staff ul{margin-bottom: 40px;}
	.staff li{font-size: 4.2vw;}
	.staff li .tag{ font-size: 0.8em;}
}


/********************** SCHEDULE *******************************/
.schedule{ width: 100%; margin: 0 0 8vw;}
.schedule.slast{margin-bottom: 10vw;}

.schedule_lead{ text-align:left; display:table; width:100%; margin-bottom:1.5vw;}
.schedule_lead .area{ border:1px solid #999;  display:table-cell; vertical-align:middle; text-align:center;  font-size:26px; line-height:1em; width:5.8em;font-family:var(--sitefont); letter-spacing:0.05em;color:var(--sitekey); background: #00000073;}
.schedule_lead .venue_info{ display:table-cell; vertical-align:middle; padding:20px 0 20px 3%; }

.schedule_lead .date{ font-size:30px; line-height:1.5em;font-family:var(--sitefont); letter-spacing:0.05em; }
.schedule_lead .date strong{ font-size:2em; font-weight:inherit;}
.schedule_lead p{ margin:0;}
.schedule_lead .venue{ font-size:24px; line-height:1.5em; font-weight:bold;margin-bottom:15px; }
.schedule_lead .address{ float:left; padding-top:0.1em;}
.schedule_lead .address a { text-decoration: underline; }
.schedule_lead .map{ color:#fff; padding:0.3em 1em 0.1em; font-size:18px; line-height:1em; margin-left:1em; transition:0.3s; font-family:var(--sitefont); font-weight:500; border:1px solid #fff; vertical-align: middle;}
.schedule_lead .map:hover{ background-color:#ddd; color: #000;}


.schedule .notes{ text-align: left;}

.schedule_table { margin-bottom:15px; position:relative; width: 100%;}

.calendar01{ width:100%; margin: 0 auto; font-size:18px; line-height:1em; table-layout:fixed; border-collapse:collapse;font-family:var(--sitefont); }
.calendar01 th	{text-align: center; border: 1px solid #666; color:#000; padding:10px 0 5px; background-color:rgba(255,255,255,0.95); font-size: 26px; line-height: 1em;}
.calendar01 th.wd{ width:20%; }
.calendar01 th.blue{ background-color:rgba(14, 79, 124, 0.8); color: #fff; }
.calendar01 th.red{ background-color:rgba(138, 26, 30, 0.8); color: #fff; }
.calendar01 th span{ font-size: 0.6em; display: block; line-height: 1.2em;}
.calendar01 td{
      text-align: center;
    vertical-align: middle;
    border: 1px solid #666;
    font-size: 14px;
    background-color: rgba(0, 0, 0, 0.8);
	padding: 1em 0 0.8em;
}





.calendar01 td .star { 
  font-size: 1.5em;}

.calendar01 th,
.calendar01 td.time,
.sp_head .time,
.sp_row .date {
  font-family: var(--sitefont);
}

.calendar01 td.time{ background-color:rgba(255,255,255,0.95); color:#000; font-size: 25px; }
.calendar01 td.wht{ background-color: #fff; color: #000;}
.calendar01 td.blk{ background-color: #000;}
.calendar01 td.wht:hover{ background-color: var(--sitekey); color: #fff;}
.calendar01 td.blk:hover{ background-color: var(--sitekey); color: #fff;}
.calendar01.pc_only{ display:table; margin-bottom: 6px;}
.calendar01 td.off{ background:none; }
.calendar01 th.month{font-size: 20px; font-weight: bold;}
.calendar01 th.month span { font-size: 1.5em;}
.calendar01 td.vertical { text-align: center; vertical-align: middle; padding: 0; background: rgba(0,0,0,0.8); color: #fff; border-top: none; position: relative;}
.calendar01 td.vertical span { position: absolute; top: 50%; left: 50%; transform: translate(-63%, -50%); writing-mode: vertical-rl; text-orientation: upright; font-size: 14px; letter-spacing: 0.2em; line-height: 1.4;}
.schedule_sp { display: none !important;}
.no-pc{ display: none !important;}


.calendar01 td .calhover{ transition: 0.3s;  position: absolute;left: 50%; z-index: 5; background-color: var(--sitekey); padding: 15%; font-size: 14px; line-height: 1.5em; width: 6em; transform: translate(-50%, 0);top: 100%;  opacity: 0; pointer-events: none; color: #fff;}
.calendar01 td:hover .calhover{ top: calc(100% + 10px); opacity: 1;}
.calendar01 td .calhover:before{ display: block; content: ""; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid var(--sitekey); position: absolute; top: 0; left: 50%; transform: translate(-50%,-100%);}
.calendar01 td:hover >  .calhover{ display: block;}

.sche_etc{ text-align: left;}
.sche_etc .notes{ margin-bottom: 2em;}
.sche_etc .sche_about{ border: 4px solid #666; padding:3% 5%;}
.sche_etc .sche_casts{ margin-bottom: 20px;}
.sche_etc .sche_casts dl{ display: flex; margin-bottom: 10px; align-items: center;}
.sche_etc .sche_casts dt{  width: 14em; text-align: center; margin-right: 1.5em; padding: 0.5em 0; font-size: 14px; line-height: 1.7em;}
.sche_etc .sche_casts .wht dt{background-color: #fff; color: #000; border: 1px solid #fff;}
.sche_etc .sche_casts .blk dt{background-color: #000; border: 1px solid #fff;}


@media only screen and (max-width: 769px){
    .no-pc{ display: block !important;}
    .calendar01 {display: none !important; font-size: 14px;}
	.schedule{ margin-bottom:50px;}
	.schedule.slast{margin-bottom: 100px;}

	
    .schedule_lead{ text-align:left; display:inherit; width:100%; margin-bottom:0;}
    .schedule_lead .area{  display: inline-block; text-align:center; font-weight:bold; font-size:18px; line-height:1em; padding:0.4em 1em 0.4em; width:auto;}
    .schedule_lead .venue_info{ display:inherit; padding:16px 0 15px ;}
    .schedule_lead .venue_info:after{clear:both;display:block;height:0;line-height:0;visibility:hidden;font-size:0.1em;content:".";}

    .schedule_lead .date{ font-size:22px; line-height:1.5em; margin-bottom:0px; }
    .schedule_lead .date strong{ font-size:2em;}
    .schedule_lead p{ margin:0;}
    .schedule_lead .venue{ display:flex; font-size:24px; padding-top:0; margin-bottom:5px; align-items: center; justify-content: space-between;}
    .schedule_lead .address{  padding-top:0; font-size:13px; line-height:1.5em; width:100%;}
    .schedule_lead .map{ float:right;  margin-left:0; width:24%; text-align:center;}
    
    .sche_etc .notes{  font-size: 12px; line-height: 1.5em;}

    .schedule_table{ margin-bottom:10px;}
    .calendar01 th.wd{ width:2.5em; }
    .calendar01 th{padding:8px 0; font-size: 24px; background-color: rgba(30,30,30,0.9); border: 1px solid #fff;}
    .calendar01 td{ padding:5px 0; background-color: rgba(0, 0, 0, 0.8); }
    
    .calendar01 td.time{ font-size: 20px; line-height: 1em; background-color: rgba(0,0,0,0.8)}
    .calendar01.sp_only{ display:table; }
	
	.calendar01 td.wht:hover{ background-color: #fff; color: #000;}
	.calendar01 td.blk:hover{ background-color: #000; color: #fff;}
	.calendar01 td:hover .calhover{top: 100%; opacity: 0;}
	.calendar01 td.active .calhover{ top: calc(100% + 10px); opacity: 1;}
	.calendar01 td.wht.active{background-color: var(--sitekey); color: #fff;}
	.calendar01 td.blk.active{ background-color: var(--sitekey); color: #fff;}
    .calendar01 td.vertical span { font-size: 20px; }
    .schedule_sp { display: block !important; color: #fff; border-bottom: none; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; margin-bottom: 8px;}
    
	.sp_head, .sp_row { display: grid; grid-template-columns: 20% repeat(4, 1fr);}
    .sp_row { border-bottom: 1px solid #666;}
	.sp_head { background: rgba(50,50,50,0.8);
    border-bottom: 1px solid #666;}
    .sp_head div { padding: 10px 0; text-align: center; }
	.sp_row div { border-left: 1px solid #666;  display: flex; align-items: center; justify-content: center;  background: rgba(0, 0, 0, 0.8); }
	.sp_head div, .sp_row div { min-width: 0;}
	.date {text-align: left;}
	.sp_row .date { border-left: none; background: rgba(50,50,50,0.8); padding:0.25em 0; font-size: 24px; display: block; text-align: center;}
	.sp_row .date span { display: block; font-size: 0.6em; line-height: 1em;}   
	.sp_head .date { font-size: 30px; } 
	.sp_head .time { padding: 0.5em 0; font-size: 22px; line-height: 1em; border-left: 1px solid #666;}  

	.sp_row .date.blue { background: rgba(14, 79, 124, 0.8);  }
	.sp_row .date.red { background: rgba(138, 26, 30, 0.8); }
	.sp_row div:not(.date) { padding: 0; ont-size: 14px;}
	.calendar01 td .star { font-size: 1.6em;}
	.sp_row.off .off_label { background: rgba(0,0,0,0.8); border: none; border-radius: 0; margin: 0; border-left: 1px solid #666; letter-spacing: 0.2em; }
	.off_label { grid-column: 2 / 6; border: 1px solid #000; border-radius: 999px;} 
	.sche_etc .sche_casts{ border-bottom: 1px solid #666;} 
	.sche_etc .sche_casts dl{ display: inherit; margin-bottom: 20px;} 
	.sche_etc .sche_casts dt{ width: 100%; margin-bottom: 10px; line-height: 1em;} .sche_etc .sche_casts dd{ width: 100%;} 
	.sche_etc .sche_about{ padding: 5%; font-size: 14px; line-height: 1.7em;} }

#tickets{ margin-bottom:150px;}

#tickets .txt_a{color: #c00; text-decoration: underline;}
#tickets .stit{  margin: 0 auto 20px;}
#tickets p.cs{ font-size:24px;}

#tickets .price{ width:100%; margin:0 auto 90px; display: flex; border-top: 1px solid #ccc;  border-bottom: 1px solid #ccc; align-items: center;}

#tickets .price .price_l{ width: 45%; font-weight: bold; font-size: 22px;}
#tickets .price .price_l span{ font-weight: inherit; font-size: 0.7em;}

#tickets .price .price_r{ width: 55%;}

#tickets dl{ display:flex; width:100%;  text-align:left; border-bottom: 1px solid #666; padding: 2em 0; align-items: center;}
#tickets dl:last-of-type{ border-bottom: none;}
#tickets dt{ width:40%; padding-left: 0px;font-size:24px; line-height:1em;}
#tickets dt span{ font-size:0.6em;}
#tickets dd{  width:60%;font-size:16px; line-height:1em; text-align:right;}
#tickets dd span{ font-size:36px; font-family:var(--sitefont);line-height: 1.1em;}
#tickets .notice{ text-align:left; padding-top:1em;}


/* contents_box */
#tickets .contents_box{text-align: left;margin-bottom: 0px;}
#tickets .contents_box .tit{border-left: 0.2em solid #fff;font-size: 1.5em;line-height: 2em;padding-left: 1em;margin-bottom: 1em; font-weight: bold;}
#tickets .lead{ text-align: left; margin-bottom: 2em;font-size: clamp(15px, 1.5vw, 16px);}
#tickets .contents_box .strong{font-size: 1.6em;}
#tickets .contents_box .content_block{ padding-bottom: 1em; border-bottom: 1px solid #666; margin-bottom: 2em;}
#tickets .contents_box .content_block h5{font-size: 1.1em; border: 1px solid #BABABA; padding:.2em .5em;margin-bottom: .5em; display: inline-block;}
#tickets .contents_box .content_block:last-of-type{ border-bottom: none; padding-bottom: 0; margin-bottom: 0;}
#tickets .contents_box .contents{background-color: #fff;color: #000;padding: 30px 30px;margin-bottom: 30px;border-radius: 6px;}
#tickets .contents_box .contents:last-of-type{margin-bottom: 0;}
#tickets .contents_box .contents .in_contents{border: 1px solid #000;padding: 20px 20px 10px;margin-bottom: 20px;}
#tickets .contents_box .contents .stit{font-size: 1.2em;font-weight: bold;line-height: 1.6em;margin-bottom: 0.5em; color: #9c1824; letter-spacing: normal;margin-top: .3em;}
#tickets .contents_box .contents .stit.wht{ color: #fff;}
#tickets .contents_box .contents .stit.wht.anchor{margin-top: -10vh; padding-top: 10vh;}
#tickets .contents_box .contents .sstit{ font-size: 1.1em;font-weight: bold;line-height: 1.5em;}
#tickets .contents_box .contents .date{}
#tickets .contents_box .contents .tk_btn{display: block;text-align: center; background-color: rgb(156 24 36); color: #fff;position: relative;padding: 1em 4.5em 0.8em 2em;font-size: 1.2em;margin-bottom: 1em; border-radius: 100px; transition: 0.3s;}
#tickets .contents_box .contents .tk_btn span{font-size: 0.7em;padding-left: 0.4em;}
#tickets .contents_box .contents .tk_btn:hover{ opacity: 0.9;}
#tickets .contents_box .contents .txt_list{list-style: disc;padding-left: 24px;margin-bottom: 1em;}
#tickets .contents_box .contents .txt_list.kome{list-style:"※";padding-left: 15px;margin-bottom: 1em;}
#tickets .contents_box .contents .txt_list li{margin-bottom: 0.2em; line-height: 1.7em;}

#tickets .contents_box .contents.border{background-color: #0000008f;color: #fff; border: 1px solid;}
#tickets .contents_box .contents.border .txt_a{color: #fff; text-decoration: underline;}



.contents_box_outer{background-color: rgba(0, 0, 0, 0.3); padding: 5%; margin-bottom: 80px; border: 1px solid;}

/* 発売期間終了 */
#tickets .contents_box .contents.end{background-color: #00000099; color: #676767; border: 1px solid #666;}
#tickets .contents_box .contents.end .in_contents{border: 1px solid #595959;}
#tickets .contents_box .contents.end .tk_btn{background-color: #474747;color: #676767;pointer-events: none;}
#tickets .contents_box .contents.end .arrow:before, 
#tickets .contents_box .contents.end .arrow:after{display: none;}


.hoshi_dummy{ background-color: #666; width: 100%; padding:7vw 0; }

@media only screen and (max-width: 768px) { 
    #tickets{ margin-bottom:30px;}
    #tickets .stit{ margin-bottom: 0;}

    #tickets .price{ width:100%; margin:0 auto 60px; display: block;}
	#tickets .price .price_l{ width: 100%; padding-bottom: 10px;}
	#tickets .price .price_l span{ display: block;}
	#tickets .price .price_r{ width: 100%; border-top: 1px solid #ccc;}
	
    #tickets dl{   padding: 16px 3% 12px;}
    #tickets dt{ width:30%; margin-bottom:3px; padding-left: 0; font-size:18px; line-height:1.5em; font-weight: 600;}
    #tickets dd{ width:70%; padding-left:5%; font-size:12px;line-height:1.5em; }
    #tickets dd span{ font-size:30px;}
    
    #tickets .price .cast_tokuten{ font-size: 14px; line-height: 1.5em;}

    #tickets .notice{ font-size:14px; line-height:1.5em;}

	#tickets .price{padding: 10px 0 0px;margin-bottom: 40px;}
	#tickets .price p:first-of-type{font-size: 1em;}

	#tickets .contents_box{margin-bottom: 40px;}
	#tickets .contents_box .tit{font-size: 1.2em;line-height: 1.5em;}
	#tickets .contents_box .strong{font-size: 1.2em;}
	#tickets .contents_box .contents{padding: 5%;margin-bottom: 14px; font-size: 14px; line-height: 1.5em;}
	#tickets .contents_box .contents .stit{font-size: 1.2em; text-align: left; line-height: 1.5em;}
	#tickets .contents_box .contents .tk_btn{padding: 1em 0;font-size: 16px; line-height: 1.2em;}
	#tickets .contents_box .contents .txt_list{padding-left: 20px}
    #tickets .contents_box .contents .tk_btn span{font-size: 0.7em; padding-left: 0em !important; display: block; line-height: 1.7em;}

	.contents_box_outer{margin-bottom: 40px;}
}

/********************** GUIDE *******************************/
.guide{ text-align: left;}
.guide .stit{ font-size: 24px; line-height: 1.7em; font-weight: bold; text-align: center;}

.guide .block{ margin-bottom: 70px;}
.guide .block.first{ border-bottom: 1px solid #ccc; padding-bottom: 40px; margin-bottom: 40px;}

.guide .sstit{ font-size: 24px; line-height: 1.5em; border-left: 5px solid var(--sitekey); padding: 0.25em 0 0.25em 1em; margin-bottom: 1em;}

.guide ul{ list-style: disc; padding-left: 2em;}
.guide li{ margin-bottom:0.5em;}

@media only screen and (max-width: 768px) { 
    .guide{ font-size:14px; line-height: 1.7em;}
    .guide .stit{ font-size: 18px;}
    .guide .sstit{ font-size: 18px; border-left: 2px solid var(--sitekey); }
}

/********************** COMING SOON *******************************/
.comingsoon{ width:100%; text-align:center;  position: absolute; top:32vh; transform: translate3d(0,-50%,0);}
.comingsoon h3{ font-size:3vw; color:#fff; font-family:var(--sitefont); letter-spacing:0.01em;  line-height: 1em;}

@media only screen and (max-width: 768px) { 
.comingsoon h3{ font-size:8vw;}
}


/*colorbox*/
.pop_block{   padding: 50px; text-align:left; line-height:1.7em;}
.pop_block .tit{ font-size: 26px; line-height: 1.5em; color: var(--sitekey); margin-bottom: 1em;}
.pop_block .txt_box{ margin-bottom:80px;}
.pop_block .txt_box:last-of-type{ margin-bottom:0;}
.pop_block img{ max-width:100%;}
.pop_block .txt_box .txts{ font-size: 0.7em;}

.prof_pop{ display:block; border:1px solid #333; color:var(--sitekey); font-size:16px; line-height:1em; padding:0.5em 0 0.3em; max-width:240px; margin:0.5em auto 0; transition: 0.3s; font-family: var(--sitefont); letter-spacing: 0.1em;}
.prof_pop:hover{ opacity: 0.7;}

@media only screen and (max-width: 769px){
    .pop_block{ padding: 20px 12px;}
    .pop_block .tit{ font-size: 20px; margin-bottom:0.5em;}
    .pop_block .txt_box{ margin-bottom: 28px;}
    
    .prof_pop{ margin-top: 0.3em;}
    #cast .staff_block .cast_block{ margin-bottom: 0.5em;}
    #cast .staff_block{ margin-bottom: 3em;}
}



#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:#360824;}
#colorbox{outline:none;}
/* Edge */ _:-ms-lang(x)::backdrop, #colorbox{ transition:0.1s;}

   /* #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: rgba(0,0,0,0.9);}
        #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: 769px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}


#anoter_visual{
.image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
    list-style: none;
    padding: 0;
    @media screen and (max-width: 768px){
         grid-template-columns: repeat(2, 1fr); 
    }
}

.visual_img_frame {
    width: 100%;
    aspect-ratio: 1 / 1; /* 正方形キープ */
    backdrop-filter: blur(7px);
    background-color: #00000000;
    overflow: hidden;
}

.visual_img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.visual_img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* トリミングしない */
}

/* モーダルの中の画像は、正方形の制約を受けないようにする */
.cmn_modal_layer .modal_inner img.img_mono_modal_content {
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 80vh !important; 
    object-fit: contain !important; 
    aspect-ratio: auto !important; 
    display: block;
    margin: 0 auto;
    pointer-events: none;
}

}

/* モーダルが開いている時のヘッダー制御 */
body.modal-is-open header {
    z-index: 1 !important;
}
body.modal-is-open .js-modal-open {
    pointer-events: none !important;
    cursor: default;
}

@media screen and (max-width: 768px) {
    #anoter_visual{
    /* 閉じるボタンを画面下部に移動 */
    .cmn_modal_layer .modal_close_btn {
        top: auto !important;
        bottom: 50px !important; 
        right: 50% !important; 
        transform: translateX(50%); 
        
        width: 50px !important;
        height: 50px !important;
    }

    .cmn_modal_layer .modal_inner {
        top: 45% !important; 
    }
    }
}