@charset "utf-8";

/* アニメーション */
.loader_bg{ background-color:#000; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 10000;}
.loader{background-image:url(../images/logo/main_logo.svg);background-repeat : no-repeat; background-size:16%; background-position : 50% 46%; z-index:10001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:1; 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:40%;}
}

/******* btn arrow *******/
.arrow{ position:relative;}
.arrow::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 6px; height: 6px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg); transition: 0.3s;}
.arrow.red::after{ border-color: transparent var(--keyc) var(--keyc) transparent;}

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





/******* 404 *******/
#error_404{ padding: 10vw 0;}
#error_404 .container_s{width:100%; max-width: 600px; margin: 0 auto; }
#error_404 .stit{ text-align: center; font-size: 30px;}

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



/********************** top *******************************/
main{ padding-top: 60px;}
main img{ width:100%;}

#top main{ padding-top: 0;}

.container{ max-width:1400px; width:90%; margin:0 auto;}

.stit{color:#fff;font-family:var(--font1);font-size: 80px;font-weight: 100;line-height: 1.1em;position: relative;margin-bottom: 40px;text-align: left;padding: 0.45em 0 0;position: relative;}
.stit span{font-size: 1.3em;}
.stit:after{position: absolute;content: "";background-image: url(../images/parts/parts_h2.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(460px,60vw);height: min(40px,5vw);z-index: -1;bottom: max(-16px,-2vw);left: 0;}

/******* mainimg *******/
.top{margin-bottom: 0;position: relative;line-height: 0;aspect-ratio: 16 / 7.5;z-index: 1;}
.top .catch{position: absolute;width: 6.1vw;top: 6.5vw;left: 9vw; /*filter: drop-shadow(0px 0px 7px #171717);*/}
.top .main_img{position: absolute;top: 0;left: 0;width: 100%;z-index: -1;pointer-events: none; -webkit-touch-callout: none;}

.top .logo{position: absolute;width: 29vw;top: 7vw;right: 6vw;margin: 0; /*filter: drop-shadow(0px 0px 7px #171717);*/}
.top .logo h1{ margin-bottom: 3vw;}


@media only screen and (max-width: 768px){
	.top{aspect-ratio: initial;height: 118vw;}
	.top .main_tit{ width: 70vw; top: 8vw; left: 50%; transform: translateX(-50%);}
	.top .main_img{top: -20vw;}
	.top .logo{left: 50%; transform:translateX(-50%); top:110vw; width: 80vw;}
	.top .logo h1{     width: 70%;margin: 0 auto 6.5vw; }
	.top .catch{top: 18vw; width: 14vw;left: 6vw;}
	.top .date{width: 100%;}
}


/******* CAST *******/
.top_cast{width: 100%;margin: -6vw auto 2vw;padding: 17vw 0 15vw;font-size:max(22px, 2vw);line-height:2.2em;background-image: url(../images/bg/cast_bg_pc.webp);background-position: center bottom;background-repeat: no-repeat;background-size: cover;position: relative; font-weight: 500;}

.top_cast p{ margin-bottom:0;
img{max-width: 800px;margin-bottom: 2em;width: 60%;}}
.top_cast .qdown{ font-size: 0.8em;}
.top_cast span{ font-size: 0.8em;}

.top_cast .l_comic{position: absolute;width: min(280px, 20vw);top: 14vw;left: 2%;}
.top_cast .r_comic{position: absolute;width: min(350px, 22vw);top: 14vw;right: 0;}

@media only screen and (max-width: 768px){
    .top_cast{margin: 0 auto 8vw;padding: 85vw 0 20vw; letter-spacing: 0;font-size: 5vw;background-image: url(../images/bg/cast_bg_sp.webp); line-height: 2em;}
	.top_cast p{ margin-bottom:0;
		img{width: 90%;margin-bottom: 1em;}}

	.top_cast .l_comic{width: 18vw;top: 19vw;left: 6px;}
	.top_cast .r_comic{width: 26vw;top: initial;bottom:0;}
}

.top_movie{ margin-bottom: 5vw;}
.youtube{overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0px; width: 100%;}
.youtube iframe { position: absolute; top: 0; left: 0; height: 100%; width: 100%;}

.twt_area iframe{ height:350px!important; }

@media only screen and (max-width: 768px){
    .top_movie{ margin-bottom: 10vw;}
	.twt_area iframe{ height:250px!important; width:94vw !important;}
}


/* GUIDE BTN */
.guide_btn{ background-color: #900; color: #fff; font-weight: bold; font-size: 26px; line-height: 1.5em; display: block; padding: 26px 0;}
.guide_btn.black{background:none;border: 1px solid #e60012;color: #e60012;}
.guide_btn:hover{ opacity: 0.8; transition: 0.2s ease;}

@media only screen and (max-width: 768px){
	.guide_btn{ font-size: 4vw; line-height: 1.4em; padding: 14px 0;}
}

.news_area{width: 100%;position: relative;}
.news_area ul{border-top: 1px solid #ffffff30;margin-bottom: 20px;}
.news_area li{margin-bottom: 0;border-bottom: 1px solid #ffffff30;}
.news_area li a{display:block;transition:0.2s;padding: 1.5em 1em;
&.disactive{pointer-events: none;}}
.news_area li a:hover{background-color: rgba(255,255,255,0.04);transition:0.2s;}
.news_area li p{color:#fff;font-size: 16px;font-weight: bold;line-height: 1.4em;margin: 0;display: flex;gap: 0 40px;}
.news_area li p span{display: inline-block;text-align: left;font-size: 16px;font-weight: 400;margin-bottom: 2px;color: #fff;}

#top_news{margin-top: 0;margin-bottom: 5vw;text-align:left;position:relative;z-index: 80;}
#top .container{/*display: flex;justify-content: space-between;*/max-width: 1300px;}
#top_news .news_area li p{flex-direction: column;gap: 6px 0;}
#top_news .news_area li p span{color: #fff;}

#in_news .container{ max-width: 1200px;}
#in_news .news_area{ width: 100%; text-align: left;}
#in_news .news_area li{border-bottom: 1px solid #ffffff30;}
#in_news .news_area li a{padding:1.5em 1.5em;}
#in_news .news_area li p{ font-size: 16px; line-height: 1.5em;}
#in_news .news_area li p span{font-size: 16px;margin-bottom: 4px;}

#in_news .single{/* padding-top: calc(70px + 3vw); */}

.twt_area{width: 46%;}
.twt_block{ background-color: rgba(0,0,0,0.6);}

.news_more{display: block;padding: 9px 3%;color: #fff;margin: 0 auto;font-size: 16px;font-weight: 400;transition: all 0.2s;position:relative;font-family: var(--font1);border: 1px solid #fff;text-align: center;width: min(400px,100%);}
.news_more:after{ right: 4%;}

.news_more:hover{opacity: 0.7; transition:0.3s;}

.top_tickets_head{ margin: 0 auto 5vw;}

.top_tickets_head nav { width:100%;}
.top_tickets_head nav ul{display: flex;flex-wrap: wrap;gap: 0 1%;}
.top_tickets_head nav ul li {width: 32.66%;text-align: center;margin-bottom: 0;}
.top_tickets_head nav ul li a{color: #fff; background-color: var(--keyc); display: block;padding: 20px 0;font-size: 20px;font-weight: 400;line-height: 1.5em; font-weight:bold;}
.top_tickets_head nav ul li.nav-on a{color: #000;background-color: #e60012;}
.top_tickets_head nav ul li a:hover{ opacity:0.8;}

@media only screen and (max-width: 768px){
	.news_area{}
	.news_area li a{ padding: 1em 0;}
	.news_area li p{}
	
	.news_more{width: 90%;margin: 0 auto;padding: 10px 0;font-size: 16px;}

	#top_news{display:inherit;margin-top:0;margin-bottom: 12vw;}
	#top_news .container{ display: block;}
	#top_news .stit{margin-bottom: 20px; font-size:30px;}
	#top_news .news_area:after{ display:none;}

	#in_news{/* margin-bottom: 60px; */}
	#in_news .news_area{ margin-bottom: 0;}
	#in_news .news_area li a{ padding: 12px 0;}
	#in_news .news_area li p{/* font-size: 16px; */}
	#in_news .news_area li p span{margin-bottom: 0;}
    
    #in_news .single{    padding-top:30px;}
    
	.twt_area{ width: 100%;}
	.top_tickets_head{ margin:0 auto 50px;}
	.top_tickets_head .stit{ margin-bottom:20px;font-size:30px;}
	.top_tickets_head .stit:after{ width:80%;}
	.top_tickets_head nav ul{gap: 8px 0;}
	.top_tickets_head nav ul li{ width: 100%;}
	
	.top_tickets_head nav ul li a{ font-size: 18px;}
}




/* 下層タイトル */
.in_tit{width: 100%;position: relative;padding: 6vw 0;}
.in_tit .tit{color: #fff;font-family: var(--font2);font-size: 90px;font-weight: 100;line-height: 1em;display: inline-block;position: relative;padding-top: 0em;letter-spacing: -0.06em;}
.in_tit .tit span{font-size: 1.3em;}
.in_tit .tit.no_space{letter-spacing: 0;}
/* .in_tit .tit:after{position: absolute;content: "";background-image: url(../images/parts/parts_h2.svg);background-position: center;background-repeat: no-repeat;background-size: contain;width: min(460px,60vw);height: min(40px,5vw);z-index: -1;bottom: max(-16px,-2vw);left: 0;} */


.in_tit .tit img{ max-height: 100px; width: 100%;}

@media only screen and (max-width: 768px){
	.in_tit{ padding: 10vw 0;}
	.in_tit .tit{font-size: 8vw;white-space: nowrap;}
	.in_tit .tit span{}
	.in_tit .tit img{ height: 50px !important; width: auto;}
	.in_tit .tit:after{}
}


/* Coming soon */
.cs{ color: #000; padding: 300px 0; margin: 0;}

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

/* SINGLE PARTS */
.single{text-align:left;overflow:hidden;position:relative;opacity:1;padding: 2vw 0 ;}
.single .tit{text-align: left;font-size: 20px;font-weight: bold;line-height: 1.4em;margin-bottom: 6px;opacity:1;}

.single .date{font-size: 15px;font-weight: bold;letter-spacing: 0.04em;line-height: 1.5em;margin-bottom: 30px;padding-bottom: 14px;border-bottom: 1px solid #aaa;color: #aaa;}
.single .date span{ display: inline-block; font-size: 10px; line-height: 1em; vertical-align: middle; padding: 3px 10px; margin-right: 4px; position: relative; top: -2px;}
.single .date span:first-child{ margin-left: 8px; margin-right: 0px;}
.single .date span.new{ background-color:#709ac1; color:#fff;}
.single .date span.tag{ background-color:#000; color:#fff;}
.single .date span.postpone{ background-color:#fff; color:#000; border:1px solid #000;}
.single .date span.cancell{ background-color:#000; color:#fff;}
.single .date span.tag a{ color:#fff;}
.single .date span.tag a:hover{ color: #7d7d7d;}

.single .txt_box{padding-bottom: 30px;word-break: break-all;}
.single .txt_box p{ font-size: 16px; line-height: 1.7em; margin-bottom: 1.5em;}
.single .txt_box .catch{ font-size: 18px; font-weight: bold; line-height: 1.5em; margin-bottom: 30px;}
.single .txt_box a{ color:#ff5d00; text-decoration:underline; display: inline-block; margin-bottom:12px;}
.single .txt_box img{ max-width:100%; width:auto; height:auto; display: block; margin-bottom:24px;}

.single .txt_box h1,
.single .txt_box h2,
.single .txt_box h3,
.single .txt_box h4,
.single .txt_box h5{ font-weight: bold; line-height: 1.4em; margin-bottom: 12px; letter-spacing: 0;}
.single .txt_box h1{ font-size: 26px;}
.single .txt_box h2{     font-size: 20px;border-left: 3px solid #ff5d00;padding: 0.5em 0 0.5em 1em;margin: 2em 0 1em;}
.single .txt_box h3{ font-size: 22px;}
.single .txt_box h4{ font-size: 20px;}
.single .txt_box h5{ font-size: 18px;}
.single .txt_box ol,
.single .txt_box ul{ margin-bottom: 2em;}
.single .txt_box ol{ list-style-type: decimal; padding-left: 1.5em;}
.single .txt_box li{ padding-left:0.5em; margin-bottom: 1em;}

.single .txt_box blockquote{ border:1px solid #999; padding: 3%; margin-bottom: 2em;}
.single .txt_box blockquote p:last-of-type{ margin-bottom: 0;}

.single .txt_box hr{ margin: 3em 0; height: 1px; background-color: #ccc; border: none;}

.single_bottom{ width: 100%; text-align: center; position: relative;}
.single_bottom .prev-link,
.single_bottom .next-link{ font-size: 20px; position: absolute; top: 50%; left: 50%;}
.single_bottom .prev-link:after,
.single_bottom .next-link:after{ content:""; position: absolute; background-size: 10px; background-repeat: no-repeat; width: 10px; height:14px; top: 5px; transition: 0.2s ease;}
.single_bottom .prev-link{ transform: translate(-150px,-50%);}
.single_bottom .next-link{ transform: translate(100px,-50%);}
.single_bottom .prev-link:after{ background-image: url("../images/a_prev.png"); left: -20px;}
.single_bottom .next-link:after{ background-image: url("../images/a_next.png"); right: -16px;}
.single_bottom .prev-link:hover:after{ left: -24px; transition: 0.2s ease;}
.single_bottom .next-link:hover:after{ right: -20px; transition: 0.2s ease;}

.single_table{ width: 100%; border-collapse: collapse; background-color: rgba(0, 0, 0, 0.25); margin-bottom: 2em;}
.single_table td{ padding: 1.5%;}

@media only screen and (max-width: 768px){
	.single{padding: 0 0 8px;}
	.single .tit{font-size: 18px;margin-bottom: 4px;}
	.single .date{margin-bottom: 18px;padding-bottom: 10px;font-size: 12px;}
	.single .txt_box{ padding-bottom: 12px;}
	.single .txt_box p{font-size: 16px;line-height: 1.7em;}
	.single .txt_box .catch{ font-size: 16px; line-height: 1.5em;}
	.single .txt_box a{ font-size: 16px;}

	.single .txt_box h1{ font-size: 20px;}
	.single .txt_box h2{ font-size: 18px;}
	.single .txt_box h3{ font-size: 18px;}
	.single .txt_box h4{ font-size: 18px;}
	.single .txt_box h5{ font-size: 16px;}

	.single .txt_box hr{ margin: 2em 0;}

	.single_bottom{margin-top: 0;}
	.single_bottom .prev-link,
	.single_bottom .next-link{ font-size: 14px;}
	.single_bottom .prev-link{ transform: translate(-120px,-50%);}
	.single_bottom .next-link{ transform: translate(80px,-50%);}
	.single_bottom .prev-link:after, 
	.single_bottom .next-link:after{ background-size: 8px; width: 8px; height: 12px;}
	
	.single_table{ font-size: 14px; line-height: 1.7em; }
	.single_table td{padding: 10px;}
}


.paging{ text-align: right;}
.pagination {clear: both;padding: 20px 0;position: relative;font-size: 14px;line-height: 14px;text-align: center;display: inline-block;}
.pagination-box {display: inline-block;}
.pagination span, .pagination a {display: block;float: left;margin: 2px 2px 2px 0;padding: 10px 15px 10px 15px;text-decoration: none;width: auto;color: var(--keyc); /* 文字色 */background: var(--keyc2) /* 背景色 */}
.pagination a:hover{color: var(--keyc2); /* マウスホバー時の文字色 */background:var(--keyc) /* マウスホバー時の背景色 */}
.pagination .current{padding: 10px 15px 10px 15px;color: var(--keyc2);background: var(--keyc);}

@media only screen and (max-width: 413px) {
	.pagination {font-size: 12px;line-height: 12px;}
	.pagination span, .pagination a {padding: 8px 10px 8px 10px;}
	.pagination .current{padding: 8px 10px 8px 10px;}
}


/********************** Introduction *******************************/



/********************** CAST&STAFF *******************************/

#cast{}
#cast .in_tit{ border: none;}
#cast .container{ max-width:1600px; width: 90%;}
#cast .cast_wrap{margin: 50px 0 120px; font-weight: 600;}
#cast .cast_wrap .tit{margin: 0 auto 40px;/* color: var(--keyc); */font-family: var(--font2);font-size: 40px;line-height: 1.5em;font-weight: １００;}
#cast .cast_wrap .cstit{ margin-bottom: 15px;font-weight: 600;}	

#cast .cast_wrap dl{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 0em;}
#cast .cast_wrap dl.first{ margin-bottom: 4em;}
#cast .cast_wrap dt{width: 49%;font-size: 14px;line-height: 1.4em;text-align: right;margin-bottom: 0.5em; color: #ccc;}
#cast .cast_wrap dd{width: 49%;text-align: left;font-size: 16px;line-height: 1.5em;margin-bottom: 0.5em;}
#cast .cast_wrap dd span{ font-size: 0.7em;}

#cast .cast_wrap dl.two{ align-items: baseline; }
#cast .cast_wrap .other{ margin-top: 60px; line-height: 1.8em;}

#cast .cast_wrap .cast_list{ font-size: 22px; line-height: 2.5em;}

#cast .cast_wrap p{ margin-bottom:0.5em;}
#cast .cast_wrap p.first{ font-size: 1.5em; line-height:2.5em; margin-bottom:0;}
#cast .cast_wrap p.txts{ font-size:0.8em; line-height:2.5em;}


#cast .cast_list ul{ margin-bottom: 70px; display: flex; width: 100%; justify-content: center; flex-wrap: wrap;}
#cast .cast_list li{ width: 20%; padding: 0 1%; text-align: center; }
#cast .cast_list li figure{ line-height: 0; width: 100%; height: auto; margin-bottom: 15px;}
#cast .cast_list li figure img{ width: 100%; }
#cast .cast_list li .castname{ line-height:2em; font-size: 20px; font-weight: bold;}
#cast .cast_list li .castname span{ font-size: 0.7em;}
#cast .cast_list li .roll{ line-height:1.4em;  font-size: 14px; margin: 0; color: #ccc;}
#cast .cast_list li a{ color: #fff;}

#cast .cast_list ul.list01{ margin-bottom: 100px;}
#cast .cast_list ul.list01 li{width: 32%;padding: 0;
img{pointer-events: none;-webkit-touch-callout: none;}}
#cast .cast_list ul.list01 li .castname{font-size: 26px;}
#cast .cast_list ul.list01 li .roll{ font-size: 18px; height: auto; }

#cast .cast_list ul.list02 li{ width: 25%; margin-bottom: 2%;}

#cast .cast_list li .prof_btn{ font-size: 12px; line-height: 1.5em; font-weight: bold; border: 1px solid #666; padding: 6px 2px; position: relative; max-width: 400px; margin: 2em auto 0;}
#cast .cast_list li .prof_btn:after{ border: 1px solid; border-color: transparent #fff #fff transparent; content: ""; position: absolute; top: calc(50% - 4px); right: 1em; width: 5px; height: 5px; transform: rotate(-45deg);}

#cast .cast_list .ensemble{ width: 100%; max-width: 1100px; margin: 0 auto; padding-bottom: 10px;}
#cast .cast_list .ens1{ font-size: 18px; line-height: 1.7em; margin-bottom: 70px;}
#cast .cast_list .ens1 ul{ display: inherit; margin-bottom: 0;}
#cast .cast_list .ens1 li{ display: inline-block; width: auto;}
#cast .cast_list .ens2{ font-size: 14px; line-height: 2em;}
#cast .cast_list .ens2 ul{ display: inherit;}
#cast .cast_list .ens2 li{ display: inline-block; width: auto;}

#cast .cast_wrap .dance {margin-bottom: 60px; font-size: 16px;}
#cast .cast_wrap .dance .castname{ margin-bottom:15px;font-size: 16px;}
#cast .cast_wrap .dance ul.list02 li{ width: 20%;}

#cast .other_cast{ margin-bottom: 80px; font-size: 16px;}	

#cast .staff_block dl{ margin-bottom: 1.5em;word-break:auto-phrase;}

.cast_name_txt{font-size: 18px; line-height: 2em; margin-bottom: 6em !important;}


@media only screen and (max-width: 768px){
	#cast .cast_wrap{ margin-bottom: 60px; margin-top: 0;}
	#cast .cast_wrap .tit{ margin: 0 auto 30px; font-size: 26px;}
	#cast .cast_wrap dl{}
	#cast .cast_wrap dl.first{ margin-bottom: 2em;}
	#cast .cast_wrap dt{width: 100%;font-size: 12px;margin-bottom: 0.2em; text-align: center;}
	#cast .cast_wrap dd{width: 100%;font-size: 15px;line-height: 1.5em;margin-bottom: 0.75em; text-align: center;}
	#cast .cast_wrap.cast_block dt{width: 40%; margin-bottom: 2vw; text-align: right; padding-right: .6em;}
	#cast .cast_wrap.cast_block dd{width: 60%; text-align: left; font-size: 14px;}

    #cast .cast_wrap .cast_list .swing{ font-size: 12px; line-height: 1.7em; margin-bottom: 50px;}

	#cast .cast_wrap .other{ font-size:3.3vw; margin-top: 30px;}

	#cast .cast_wrap .cast_list{ font-size: 16px; line-height: 2em;}
	#cast .cast_wrap .cast_list p.ensemble{font-size: 16px;}

	#cast .cast_list ul{flex-wrap: wrap; margin-bottom: 40px;}
	#cast .cast_list li{ width:50%; margin-bottom: 20px}
	#cast .cast_list li .castname{ font-size: 18px; line-height: 1.5em;}
	#cast .cast_list li .roll{ font-size: 3vw;}
    #cast .cast_list ul.list01{ margin-bottom: 50px;}
	#cast .cast_list ul.list01 li{width: 100%;}
	#cast .cast_list ul.list02 li{ width: 60%; margin-bottom: 20px;}
	#cast .cast_list ul.list01 li .castname{ font-size: 20px;margin: .8em 0 .2em;}
	#cast .cast_list ul.list01 li .roll{ font-size: 15px;}
	
	#cast .cast_list li .prof_btn{ font-size:12px; padding: 4px 2px;}
	#cast .cast_list li .prof_btn:after{ width:3px; height:3px; top: calc(50% - 3px);}
	#cast .cast_wrap.staff_block p{ font-size:15px;}
	
	#cast .cast_list .ens1{ font-size: 14px; margin-bottom: 0px; padding: 30px 0;}
	#cast .cast_list .ens1 li{ margin-bottom: 0.3em;}
	#cast .cast_list .ens2{ font-size: 12px; line-height: 1.7em; }
	#cast .cast_list .ens2 li{ margin-bottom: 0.3em;}
    
	#cast .cast_wrap .dance ul.list02 li{ width: 33.33%;}
	#cast .cast_wrap .dance .castname{ font-size: 14px;}

	.cast_name_txt{font-size: 15px !important;}
}


/********************** INTRODUCTION *******************************/
.intro_wrap{  line-height: 2em; font-size: 18px; padding: 0 0;}
.intro_wrap .intstit{ text-align: center; line-height: 1.3em; font-size:5vw; margin-bottom: 1em;}

.int_block{margin-bottom: 0;}
.int_block.intro_lead_text{text-align: left;}
.int_block.intro_lead_text p{ margin-bottom: 2em; line-height: 2em;
&.strong{font-weight: 500; font-size: clamp(18px, 2vw, 20px);}}

.intro_wrap .container{ text-align: left; max-width: 1200px;}
.intro_wrap .intsstit{ line-height: 2em; font-size: 30px; font-weight: bold; margin-bottom: 1em; text-align: center;}


@media only screen and (max-width: 768px){
	.int_block.intro_lead_text{text-align: left;}
    .intro_wrap{  line-height: 1.7em; font-size: 16px; padding: 10px 0;}
    .intro_wrap .intstit{  font-size:9vw; margin-bottom: 1em;}
    .intro_wrap .intsstit{ line-height: 1.7em; font-size: 18px;  margin-bottom: 1.5em; text-align: left;}
    
}

/********************** STORY *******************************/
/*#story:before{ content: ""; display: block; position: fixed; z-index: -1; width: 100%; height: 100vh; background-image: url("../images/about_bg.jpg"); background-size: cover; background-position: center;}*/


#story .container{ max-width: 1000px;}
.story_wrap{ text-align: left; line-height: 2.5em; font-size: 19px; margin-bottom: 5em;}
.story_wrap p { margin-bottom: 3em;}

@media only screen and (max-width: 768px){
    .story_wrap{ line-height: 1.7em; font-size: 16px;}
    .story_wrap p { margin-bottom: 1em;}
}

/********************** MESSAGE *******************************/

.message_block{ text-align: left; line-height: 2em; font-size: 18px; margin-bottom: 2em; border: 2px solid #aaa; padding: 5%; background-color: rgba(0,0,0,0.5); }
.message_block h2{ text-align: center; font-size: 30px; line-height: 1.7em; margin-bottom: 1em; font-weight: 800;}

@media only screen and (max-width: 768px){
    .message_block{  line-height: 1.7em; font-size: 16px; margin-bottom: 1em;}
    .message_block h2{ font-size: 20px;}
    
}

/********************** MOVIE *******************************/
#movie{ margin-bottom: 5vw;}
#movie .container{ max-width: 1400px;}
#movie .movie_list{ display: flex; justify-content:space-between; flex-wrap: wrap; width: 100%; max-width: 1400px; margin: 0 auto; text-align: left;}
#movie .movie_list li{width: 32.33%;margin-bottom: 30px;}
#movie .movie_list li div{position: relative;height: 0px;padding-bottom: 56.25%;margin-bottom: 12px;}
#movie .movie_list li iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
#movie .movie_list li .name{ color: #fff; font-size: 16px; font-weight: bold; line-height: 1.5em;}

@media only screen and (max-width: 768px){
    #movie{ margin-bottom: 60px;}
    #movie .movie_list{ width: 94%; margin: 0 auto 40px;}
    #movie .movie_list li{ width: 100%; margin-bottom: 12px;}
    #movie .movie_list li .name{ font-size: 14px;}
}


/********************** SCHEDULE *******************************/
/******* about *******/
.bgw{/*background-color: rgba(229,198,167,0.8); transform: skewY(0deg); */position: relative; }
.bgw .container{ padding:0 0 2vw; }

#tickets .contents_box{margin-bottom: 120px;}

#tickets .tickets_head{ margin-bottom: 20px;}
#tickets .tickets_head nav { width:100%;}
#tickets .tickets_head nav ul{display: flex;justify-content: center;gap: 0 1%;}
#tickets .tickets_head nav ul li {width: 32%;}
#tickets .tickets_head nav ul li a{color: var(--keyc2);border: 1px solid #fff;display: block;padding: 20px 0;font-size: 20px;font-weight: 400;line-height: 1.5em;font-weight:bold;}
#tickets .tickets_head nav ul li.nav-on a{color: var(--keyc2);background-color: var(--keyc); border-color: var(--keyc);}
#tickets .tickets_head nav ul li a:hover{ opacity:0.8;}

.replace a{     display: block;background-color: rgba(0,0,0,0.5);border: 1px solid var(--keyc);padding: 1em 0;color: #f84078;font-weight: bold;font-size: 18px;line-height: 1em;margin-bottom: 1em; max-width:600px; margin: 0 auto 5vw;}

/******* tickets *******/
#tickets .notes{font-size: 14px;line-height: 1.7em;text-align: left;margin: 0;/* padding: 1.5em 0 0; */}

#tickets .sub_tit{ text-align: left; margin-bottom: 12px;}
#tickets .sub_tit span{ border: 1px solid; display: inline-block; font-size: 18px; font-weight: bold; line-height: 1.5em; padding: 4px 30px;}
#tickets .tickets_day{margin-bottom: 20px;line-height:2em;font-size: min(2vw,30px);}
#tickets .tickets_day span{font-size: 1.8em;display: inline-block;}
#tickets .tickets_day span.small{ font-size: 0.8em;}
#tickets .tickets_day img{ width:100%;}
#tickets .tickets_day a{display: inline-block;background-color: #fff;/* color: #032958; */font-weight: bold;line-height: 1em;padding: 0.5em 1.5em;font-size: 14px;position: relative;top: -3px;}


.scheblock{ padding: 4% 0; margin-bottom: 20px; color: #fff;}
.scheblock h2{ margin: 0 auto; line-height: 3em;}

.scheblock .venue{ display: flex; justify-content: center;align-items: center; margin: -1em 0 0.75em;}
.scheblock .venue p{ margin: 0 1em 0 0;}
.scheblock .venue a{ display: block; background-color: #fff; color:var(--keyc); font-weight: bold; line-height: 1em; padding: 0.5em 1.5em; font-size: 14px;}

.map_modal a{ display: block; background-color: rgba(0,0,0,0.5); border: 1px solid var(--keyc); padding: 1em 0; color: #f84078; font-weight: bold; font-size: 18px; line-height: 1em; margin-bottom: 1em;}

@media only screen and (max-width: 768px){
	.bgw .container{/* padding: 0 0 40px; */}
	#tickets .tickets_head{ margin-bottom: 35px;}
    #tickets .tickets_head nav ul li a{padding: 14px 0;font-size: 16px;}
    #tickets .tickets_day span{}
    #tickets .tickets_day span.venue{ font-size: 1.3em;}
    .scheblock{ padding: 0; background: none!important;}
    .scheblock h2{ margin-bottom: 10px; line-height: 2em;}
    .scheblock .venue{ margin: 0;}
    .scheblock .venue a{  padding: 0.5em 1em; }
	
	#tickets .tickets_day{ font-size: 18px; line-height: 2.4em;}
}

/***** table *****/
.demo01{width:100%;font-size:18px;line-height:1em;overflow: hidden;border-radius: 1px;border-spacing: 0;border-collapse: collapse; margin-bottom: 30px; table-layout: fixed;}
.demo01.pc_only{ display: inline-table;}
.demo01 th{font-size: 15px;font-weight: bold; line-height: 1.5em; background-color: rgba(0,0,0,0.3); vertical-align: middle; padding: 1em 0; text-align: center;  border-color: #aaa;}
.demo01 td{text-align: center;padding: 1em 0;font-size: 13px;font-weight: bold;line-height:1.5em;border-color: #bbb;background-color: rgba(0,0,0,0.1); vertical-align: middle;}
.demo01 .sat{ background-color:rgba(0,73,100,0.5);}
.demo01 .sun{ background-color:rgba(130,0,0,0.5);}
.demo01 th.month{ font-size: 24px; width: 10%; padding: 0;}
.demo01 th.date{width: 1.8%;border-left-width: 0;}
.demo01 td.time{  background-color:rgba(0,0,0,0.3);font-size: 16px;}
.demo01 td.off{ background-color: rgba(30,30,30,0.2);}

@media only screen and (max-width: 768px){
    .demo01{ margin-bottom: 10px;}
    .demo01.pc_only{ display: none;}
	.demo01.sp_only{ display: inline-table!important;}
	.demo01{ margin-bottom: 20px;}
	.demo01 th{border-right: 1px solid #ccc; padding: 5px 0; font-size: 15px; line-height: 1.5em;}
	.demo01 td{border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-top-width: 1px;border-bottom-width: 0;padding: 8px 0;font-size: 13px;}
	.demo01 th.month{ font-size: 20px; width: 30%; line-height: 1.5em;}
    
}
/***** 主催 *****/
.flex_box_shusai{display: flex; gap:5%; align-items: flex-start;}
.flex_box_shusai .left {width: 80%;	text-align: left;font-size: 14px;}
.flex_box_shusai .right {width: 15%;}
.flex_box_shusai .right img {width: auto;object-fit: contain; max-height: 90px;}


/***** price *****/
#tickets .price{margin: 40px auto 50px;}
#tickets .price .price_list{ display: table; width: 100%; margin-bottom:1em;background-color: rgba(0,0,0,0.3); }
#tickets .price .price_list:first-of-type{ border-top: 1px solid #999;}
#tickets .price .price_list .price_l{ display: table-cell; vertical-align: middle;  border-bottom: 1px solid #999; text-align: center; font-size: 24px; line-height: 1.5em; width: 47%;}
#tickets .price .price_list .price_l h2{ font-weight: bold;}
#tickets .price .price_list .price_l span{ font-size: 0.7em;}
#tickets .price .price_list .price_r{ display: table-cell;}

#tickets .price .block{width: 100%;display: flex;align-items: center;padding: 25px 3% 25px;border-bottom: 1px solid #999;font-weight: bold; flex-wrap: wrap;}
#tickets .price .block .left{ width: 40%; font-size: 24px; line-height: 1.5em; text-align: left;}
#tickets .price .block .left span{ font-size: 0.6em;}
#tickets .price .block .right{width: 60%;text-align: right;font-size: 26px;line-height: 1.5em;}
#tickets .price .block .right span{ font-size: 0.6em; line-height: 1.5em; }

#tickets .price .block .note{ text-align: left; line-height: 1.5em; padding-top: 0.25em; font-size: 14px;}

#tickets .price .block.sold { color: #aaa;}
#tickets .price .block.sold .left:before{ content: "完売"; display: block; float: left;    background-color: #900; font-size: 0.7em; line-height: 1em; padding:0.5em 0.5em 0.4em; margin-right: 0.5em; color: #fff;}

.ticket_link{ background-color: var(--keyc); text-align: center; color: #000; padding: 3% 5%; margin-bottom: 40px; font-size: 28px; line-height: 1.5em; font-weight: bold;}
.ticket_link .linkname{ margin-bottom: 0.7em;}
.ticket_link .btn{ background-color: #000; color: #fff; padding: 1.2em 0; font-size: 24px; letter-spacing: 0; font-family: var(--font2);}

.ticket_link.cs{ background-color: rgba(0,0,0,0.5); border: 1px solid #ccc; color: #fff; font-size: 20px;}

#tickets .t_buy{padding: 30px 20px;border: 1px solid #ccc;}

#tickets .t_buy.add{padding: 40px;border: 1px solid #ccc;text-align: left;}
#tickets .t_buy.add .stit{background-color: var(--keyc);font-size: 24px;font-weight: bold;text-align: center;line-height: 1.5em;padding: 0.3em;}
#tickets .t_buy.add .stit:after{display: none;}
#tickets .t_buy.add .strong{font-size: 1.2em;line-height: 2em;}
#tickets .t_buy.add p{margin-bottom: 1.5em;}
#tickets .t_buy.add a{font-weight: bold;text-decoration: underline;}

#tickets .playguide{margin-bottom:30px; word-break: break-all;background-color: rgba(0,0,0,0.5);}
#tickets .playguide .stit{ color: var(--keyc2); font-weight: bold; font-size: 24px; margin-bottom: 1em; line-height: 1.7em; text-align: center; background-color: var(--keyc); padding: 10px;}
#tickets .playguide .stit:after{  display: none;}
#tickets .playguide .sstit{ font-weight: bold; }
#tickets .playguide .sstit span{ display: block; line-height: 1.7em; font-size: 0.8em;}
#tickets .playguide .sstit{ font-size:20px; font-weight:bold; line-height:1.5em; margin-bottom:0.5em; text-align: center;  background-color: #600; color: #fff; padding: 0.5em 0;}
#tickets .playguide .playg_box{ margin-bottom: 30px;}
#tickets .playguide .playg_box:last-of-type{ margin-bottom: 0;}
#tickets .playguide dl{ display: flex; flex-wrap: wrap; width: 100%;margin-bottom:10px;font-weight:bold;}
#tickets .playguide dt{background-color: #373737;width: 30%;display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
#tickets .playguide dd{background-color: #fff; color: #000; padding:20px 30px;text-align:left; width: 70%;margin-bottom: 4px;}
#tickets .playguide dl.end dt{ background-color: #333; color: #aaa;}
#tickets .playguide dl.end dd{ background-color: #444; color: #aaa;}

#tickets .student{ margin-bottom: 2em;}
#tickets .student a{ display: block;background-color: #fff; padding: 1em 0; font-weight: bold;}

.anchor-clear::before {content: "";display: block;height: 130px; margin-top: -130px;  visibility: hidden;}

@media only screen and (max-width: 768px){
    #tickets .container{ width: 92%;}
    
    #tickets .price{ margin: 30px auto;}
    #tickets .price .price_list{ display: inherit; margin-bottom: 15px;}
    #tickets .price .price_list .price_l{display: inherit; width: 100%; font-size: 20px; padding: 0.5em 0;}
    #tickets .price .price_list .price_l span{ display: block; line-height: 1.5em;}
    #tickets .price .price_list .price_r{display: inherit;} 
    #tickets .price .price_list .price_r .note{ text-align: left; font-size: 12px; line-height: 1.5em;}
    #tickets .price .block{ padding: 20px 3%;}
    #tickets .price .block .left{ font-size: 20px; width: 20%;}
    #tickets .price .block .right{ font-size: 20px; width: 80%;}
	
	#tickets .t_buy{ padding: 10px;}
    
	#tickets .t_buy.add{padding: 20px 10px;text-align: left;}
	#tickets .t_buy.add .stit{text-align: left;font-size: 1.2em;margin-bottom: 1.2em;}
	#tickets .t_buy.add .strong{font-size: 1.1em;}

	#tickets .playguide .stit{ font-size: 19px; margin:0.2em 0 0.5em 0;}
	#tickets .playguide .sstit{ font-size: 16px;}
	#tickets .playguide dl{ display: inherit; width: 100%;margin-bottom:10px;font-weight:bold;}
	#tickets .playguide dt{width: 100%; display: inherit; padding: 10px; margin-bottom: 0;}
	#tickets .playguide dd{width: 100%; padding:10px; margin-bottom: 10px;}
	
	.ticket_link{ font-size: 20px; margin-bottom: 20px;    padding: 5%;}
    .ticket_link .btn{ font-size: 16px;}
    .ticket_link.cs{ font-size: 16px;}

	.anchor-clear::before {content: "";display: block;height: 80px; margin-top: -80px;  visibility: hidden;}
}

/********************** creator *******************************/
#creator figure {margin: 0 auto; width: fit-content;}
#creator figure img{max-width:500px;}

/********************** special *******************************/
#special .head_tit{display: block; margin: 0 0 1em; font-size: 30px; line-height: 1.5em; font-weight: bold;}
#special .head_tit span.sem_small{font-size: 23px; font-weight: bold;margin: 0 3px;}
#special .head_tit span.small{font-size: 23px; font-weight: normal;}
#special figure {margin: 0 auto; width: fit-content;}
#special figure img{max-width:800px;}
#special .btn{margin: 1em auto; max-width: 800px;}
#special .btn a{color: #fff; display: block; color: var(--keyc2); background-color: var(--keyc); border-color: var(--keyc);}
#special p{max-width: 800px; display: block; margin: 0 auto;}
#special .stit2{font-size: 25px;}

@media only screen and (max-width: 768px){
#special .head_tit{font-size: 23px; line-height: 1.5em;}
#special .head_tit span.sem_small{font-size: 17px;}
#special .head_tit span.small{font-size: 17px; line-height: 1.2em;}
#special .stit2{ font-size: 17px; margin-bottom: 0.5em;}
}

/********************** Music *******************************/
#music .stit2{ text-align: center; font-size: 30px; line-height: 1.7em; margin-bottom: 1em; font-weight: 800;}
#music .center{text-align: center;}
#music ul.music_list{ margin-bottom: 3em;}
#music ul.music_list li{ margin-bottom: 0.5em;}

@media only screen and (max-width: 768px){
	#music .stit2{font-size: 20px;}
}

/********************** GOODS *******************************/
#goods{ margin-bottom: 140px; max-width: 1000px; margin: 0 auto 140px;}
#goods .in_tit{ border: none;}

#goods .container_guide{padding:5% 5% 3%; border: 1px solid #ccc;  text-align: left;margin: 3em 0 0;}
#goods .container_guide .guide_block{margin: 0 0 2em;}
#goods .container_guide .guide_block:first-child{margin-top: 0.5em;}
#goods .container_guide .guide_block h2{border-left: 3px solid #6493ce;padding-left: 1em;color: #6493ce;margin-bottom: 0.5em;font-weight: bold; font-size: 1.2em;}
#goods .container_guide .guide_block strong{color: #6493ce;}

@media only screen and (max-width: 768px){
#goods{ margin-bottom: 60px;}
}


/********************** GUIDE *******************************/
#guide{ margin-bottom: 140px;}
#guide .in_tit{ border: none;}
#guide .container_guide{padding: 5%; border: 1px solid #ccc;  text-align: left;}
#guide .container_guide .guide_block{margin: 0 0 2em;}
#guide .container_guide .guide_block:first-child{margin-top: 0.5em;}
#guide .container_guide .guide_block h2{border-left: 3px solid #6493ce;padding-left: 1em;color: #6493ce;margin-bottom: 0.5em;font-weight: bold; font-size: 1.1em;}

#guide .guide_head nav ul{ display: flex; justify-content: space-between;margin-bottom: 2em;}
#guide .guide_head nav ul li {width: 49.5%;}
#guide .guide_head nav ul li a{color: var(--keyc2);border: 1px solid #666;display: block;padding: 20px 0;font-size: 20px;font-weight: 400;line-height: 1.5em; font-weight:bold;}
#guide .guide_head nav ul li.nav-on a{color: var(--keyc2);background-color: var(--keyc); border-color: var(--keyc);}
#guide .guide_head nav ul li a:hover{ opacity:0.8;}

@media only screen and (max-width: 768px){
#guide{ margin-bottom: 60px;}
	
	.guide_head nav ul li a{padding: 14px 0;font-size: 16px;}
}


/********************** COVID GUIDE *******************************/
#covid_guide .tit{ font-size: 30px; line-height: 1.5em; font-weight: bold;}

@media only screen and (max-width: 768px){
    #covid_guide .tit{ font-size: 18px; }
}

/******* modal *******/
.modal_box{ text-align: left; padding: 5%; color:#000;
.single_table{background-color: #fff;}}
.modal_box img{ max-width: 100%;}
.modal_box .block{margin-bottom: 50px;}
.modal_box h2{ font-size: 24px; line-height: 1.5em; font-weight: bold; margin-bottom: 1em; border-bottom: 1px solid var(--keyc); padding-bottom: 1em; text-align: center;}
.modal_box .strong{ font-weight: bold; font-size: 1.5em; line-height: 1.7em;}
.modal_box h3{font-size:clamp(16px, 1.7vw, 20px);line-height: 1.4em; border-left: 5px solid var(--keyc); padding: 0.25em 0 0.25em .5em; margin: 1.5em 0 1em; font-weight: bold;}
.modal_box ol{ list-style-type: decimal; padding-left: 1.5em;}
.modal_box ol li{ padding-left:0.5em; margin-bottom: 1em;}


@media only screen and (max-width: 768px){
    .modal_box h2{ font-size: 20px; padding-bottom: 0.5em;}
    .modal_box .strong{ font-size: 20px;}
}

/* =PRINT
------------------------------------------------------------------------------------------*/
@media print{
	.top_l{ display: none;}
	.top_r{  position: inherit; height: auto; max-height: inherit; top: 0; width: 100%; padding-top: 10vw;}
	.top_r h1{ margin: 0 auto 2vw;}
	.frame{display: none;}
	header{ display: none;}
	#cast .cast_list li figure img{ display: none;}
	.movie{display: none;}
    .single .txt_box img{ display: none;}
    .anime{ opacity: 1;}
}

/* =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:rgba(0,0,0,0.9);}
#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:#fff; position:relative; z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#fff;}
        #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;}
}

ruby[data-ruby] rt {
	display: none;
  }
   
  ruby[data-ruby] {
	position: relative;
	display: inline-block;
  }
   
  ruby[data-ruby]::after {
	content: attr(data-ruby);
	position: absolute;
	transform: translate(-50%, -2em);
	display: block;
	left: 50%;
	top: 0;
	white-space: nowrap;
	font-size: 44%;
	letter-spacing: 0;
  }