@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:#ccc;
	--keyc2:#cc9900;
	--font1:"Roboto", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body{overflow-x: hidden;text-align: center;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 400;font-size: 16px;line-height: 1.7em;background-color: #000;color: #fff;}

body:before{ content: "";display: block;position: fixed;height: 100vh;width: 100%;background-image: url("../images/bg1.webp");background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -2;top: 0;left: 0; opacity: 0.3;}
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;}
}


#over_frame{position: fixed;z-index: 9996;pointer-events: none;width: 100%;height: 100svh;}
#over_frame .border{position: absolute;border: 1px solid var(--keyc);width: 98%;height: 98%;left: 1%;top: 1%;}
#over_frame .corner {position: absolute;width: 100%;height: 100svh;}
#over_frame .corner span{position: absolute;display: block;background-image: url("../images/bg_corner.png");width: 150px;height: 150px;background-size: contain;background-repeat: no-repeat;left: 0;top: 0;}
#over_frame .corner span:nth-of-type(3){ left: auto;right: 0;top: auto;bottom: 0;transform: rotate(180deg);}
#over_frame .corner span:nth-of-type(2){background-image: url("../images/bg_corner2.png");top: auto;bottom: 0;transform: rotate(180deg);}


@media only screen and (max-width: 768px){
	#over_frame .border{width: 98%;height: 99%;left: 1%;top: 0.5%;}
	#over_frame .corner span{ width: 20%;height: 20%;}
}

/* =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: 2%;top: 15px;width: 10%;z-index: 10;}

.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: 25%;left: 5%;top: 19px;}	
	header .headlogo img{max-width: 100%;max-height: 100%;}
    
	.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;}
footer .foot_staff{ font-size: 14px;font-weight: bold;line-height: 2em;margin-bottom: 30px;}
footer .foot_bnr{ display: flex;justify-content: center;margin-bottom: 30px;}
footer .foot_bnr li{ width: 30px;}
footer .foot_bnr img{ width:100%;}

footer small{ font-size: 14px;line-height: 1.5em;}

@media only screen and (max-width: 768px){
    footer{ padding: 40px 5% ;}
    footer .foot_staff{  margin-bottom: 20px;font-size: 12px;}
    footer .foot_bnr{ margin-bottom: 20px;}    
	footer small{ font-size: 11px;line-height: 1.5em;width: 94%;margin: 0 auto;display: block; padding: 1em 0;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;text-align:center;position:fixed;right:3vw;bottom:2vw;z-index:10;transition: 0.3s;}
.page_top a{background-color:#e85799;border-radius: 50%;height:12vw;width:12vw;line-height:1.3em;color:#fff;font-size:1.2vw;text-decoration: none;display: flex;align-items: center;justify-content: center;font-weight: bold;filter: drop-shadow(0px 0px 0.4vw rgba(0,0,0,0.4));border: 0.4vw solid #fff;}
.page_top a:hover{text-decoration:none;opacity: 1;transform: scale(1.1);}
.page_top.off{bottom: -16vw;}


@media only screen and (max-width: 768px){
	.page_top a{height:22vw;width:22vw;line-height:1.3em;font-size:2.7vw;}
	.page_top.off{bottom: -24vw;}
}


/********************** ローダー *******************************/
/* アニメーション */
.loader_bg{ background-color:#000; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}
.loader{background-image:url(../images/logo.svg);background-repeat : no-repeat; background-size:16%; background-position : 50% 46%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:.scheblock0; 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%;}
}
/******* 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: 1100px;margin: 0 auto;}


@media only screen and (max-width: 768px){

}

/******* ボタン *******/
.btn{ display: block;background-color: var(--keyc2);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);}

@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;}

@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-bottom:5vw; position: relative; display: flex; line-height: 0;  }
.top p{ margin: 0;}
.top_l{ width: 45%; position: relative;}
.top_l .photo img{ }

.top_r{ width: 55%; line-height: 0; position: relative; height: 100vh; max-height: 58vw;}
.top_r .top_tit{ width: 100%; transition: 2s;position: absolute; width: 100%; top: 50%; transform: translate(0,-50%);}
.top_r .top_tit .subtit{ text-align: center; line-height: 1.5em; font-size: 0.9vw}
.top_r .tit{ width:70%; margin: 0 auto 2vw; padding-top:5vw;}
.top_r .date{ width:65%; margin: 0 auto;}
.top_r img{ width: 100%;}


@media only screen and (max-width: 768px){
    .top{  display: inherit; margin-bottom: 80px;position: inherit; overflow: inherit; height:auto;}
    .top_l{ width: 100%;}
    .top_l .photo{ position: inherit; transform: none;}
    .top_r .top_tit .add{ width: 90%; margin: 4em auto 2em;}
	.top_r .top_tit .add .btn{font-size: 16px; }
    .top_r{ width: 100%; position: inherit; margin:0; display: inherit; height: auto; max-height: inherit; position: relative; z-index: 20; margin-top: 5vw;}
	
    .top_r .top_tit{position: inherit; transform: none;}
	.top_r .top_tit .subtit	{ font-size: 3vw;}
	
    .top_r .tit{ width: 80%; margin: 0 auto 10vw; padding-top:7vw;}
    .top_r .date{ width: 90%;}
}


/******* news *******/
.top_link{ display: flex;}
.news{ width: 100%;text-align: left;margin-bottom: 10vw;}
.news ul{ margin-bottom: 30px;}
.news li{ position: relative;margin-bottom: 0;transition:0.2s; border-bottom: 1px solid #333;font-size: 18px; line-height: 1.5em;}
.news li a{ padding: 1.5em 0;display: flex;color: #fff;}
.news li a p {margin-bottom: 0;}
.news li a p.news_date{color: var(--keyc); width: 7em;}
.news li a p.txt{ width: calc(100% - 7em);}

.news .news_more { display: block;width: 100%;padding: 20px;border: 1px solid var(--keyc);text-align: center;color:var(--keyc);letter-spacing: 0.1em;transition:0.2s;}
.news .news_more:hover{ opacity:0.8;}

.news li:hover{ opacity: 0.8;transition:0.2s;}

.news li{}

@media only screen and (max-width: 768px){
	.top_link{ display: inherit;margin-top: 0;margin-bottom: 70px;}
	.news{ width: 100%;padding: 0;margin: 0 0 100px;}
	.news ul{ margin-bottom: 10px;}
	.news li{ font-size: 16px; line-height: 1.5em;}
	
	.news li a {padding: 1em 0; display: inherit;}
	.news li a p.news_date{width: 100%;}
	.news li a p.txt{ width: 100%;}
	
	.news .news_more{ padding: 18px;position: inherit;display: block;}
	
}

/******* about *******/
.about{ text-align: center;margin-bottom: 10vw; background-color: rgba(255,153,0,0.1); padding: 7vw 0; line-height: 2.5em;font-size: 16px;}
.about .stit{ width: 94%;margin: 0 auto 3vw;}
.about .lead{font-weight: bold; font-size: 1.4em;}

.about .container p{ margin-bottom: 2em;}

@media only screen and (max-width: 768px){
    .bgw .container{ }
    .about{ text-align: left;margin-bottom: 60px; padding: 50px 0; font-size: 15px;}
	.about .lead{ font-size: 1.1em; text-align: center; padding-top:1em;}
    .about .container{  line-height: 2em;font-size: 16px;}
}

/******* story *******/
.story{ text-align: center;margin-bottom: 10vw;padding: 15vw 0;font-size: 1.5vw;line-height: 2em;}
.story .stit{  margin: 0 auto 1em;font-size: 1.5vw;}
.story p{ margin-bottom: 2em;}
.story p:last-of-type{ margin-bottom: 0;}

@media only screen and (max-width: 768px){
	.story{ padding: 60px 0;font-size: 16px;line-height: 2em;width: 90%;margin: 0 auto 100px;text-align: center;}
	.story .stit{ margin-bottom: 10px;}
	.story .container{ font-size: 15px;text-align: left;}
}
/******* story *******/

/******* cast *******/
.cast{position: relative;z-index: 1;text-align: center;margin-bottom: 15vw;}
.cast .container{ font-weight: bold;line-height: 2em;font-size: 16px;max-width: 1400px;}
.cast .cast_wrap{ margin-bottom: 9vw;}
.cast .cblock{ font-size: 18px;line-height: 2.5em;}
.cast .cblock.pin{ margin-bottom: 0.5em;}
.cast .yel{ color: var(--keyc);font-size: 0.8em;}
.cast .role{ font-size: 18px;}
.cast p{ margin-bottom: 1.5em;}

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

.cast_comment{ border: 5px solid #666;padding: 3% 5%;width: 100%;max-width: 1100px;margin: 0 auto;}
.cast_comment h3{ font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
.cast_comment .txt{ text-align: left;}

.cast_note{margin-top: 3em;font-size: 0.8em;}

@media only screen and (max-width: 768px){ß
    .cast{ margin-bottom: 50px;}
	.cast .container{ font-size: 14px;}
	.cast .cast_wrap{margin-bottom: 8em;}
    .cast_block{ margin-bottom: 2em;}
    .cast_block li{ width: 48.5%;margin-bottom: 6%; font-size: 16px;}
	.cast .cblock{ font-size: 15px; line-height: 2em;}
	.cast_note{margin-top: 0em;font-size: 0.8em;}
	.cast .staff_row{ display: block;line-height: 1.7em;font-size: 0.9em;}
	.cast_comment{ padding: 5%;}
}

/*colorbox*/
.pop_block{   padding: 50px;text-align:left;line-height:1.7em;}
.pop_block .tit{ font-size: 26px;line-height: 1.5em;color: var(--keyc);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 var(--keyc);color:var(--keyc);font-size:14px;line-height:1em;padding:0.7em 0;margin:1em auto 0;transition: 0.3s;text-decoration: none;}
.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;}
}

/******* tickets *******/
#tickets{background-color: rgba(0,0,0,0.50); padding: 5vw 0;}
#tickets .notes{ font-size: 14px;line-height: 1.7em;text-align: right;}

.scheblock{  margin-bottom: 20px;color: #fff;}

.scheblock h2{ width: 100%;max-width: 650px;margin: 0 auto 45px;}

.scheblock .date{ font-size: 80px;text-align: center;line-height: 1.2em;margin: 0;}
.scheblock .venue{ font-size: 35px;text-align: center;line-height: 1.2em;margin: 0 0 1.2em;}
.scheblock  span{ font-size: 0.5em;}
.scheblock .venue .maplink{ font-size: 0.5em; border: 1px solid var(--keyc2);padding: 0.25em 1em;
    margin-left: 1em;}

@media only screen and (max-width: 768px){
    .scheblock h2{ margin-bottom: 10px;}
	
	.scheblock .date{ font-size: 36px;}
	.scheblock .venue{font-size: 18px;line-height: 1.7em;}
	.scheblock .address{ font-size: 16px;}
}


/***** 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-weight: bold;line-height: 1.5em;background-color: rgba(0,0,0,0.5);vertical-align: middle;padding: 1em 0;text-align: center;border-color: #555;}
.demo01 td{text-align: center;padding: 0.75em 0;font-weight: bold;line-height:1.5em;border-color: #555;background-color: rgba(0,0,0,0.2);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: 20%;}
.demo01 th.date{width: 1.8%;border-left-width: 0;}
.demo01 td.time{  background-color:rgba(0,0,0,0.3);}
.demo01 td.off{ background-color: rgba(30,30,30,0.2);}

.demo01 .txts{ font-size: 0.7em;}

@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 #555;padding: 5px 0;font-size: 16px;line-height: 1.5em;width: 18%;}
	.demo01 td{border-left: 1px solid #555;border-right: 1px solid #555;border-top-width: 1px;border-bottom-width: 0;padding: 16px 0;font-size: 16px;line-height: 1.3em;}
	.demo01 th.month{ font-size: 20px;width: 28%;line-height: 1.5em;}
	.demo01 .txts{ font-size: 13px;}
    
}

/***** price *****/

#tickets .note{ font-weight: 400;font-size: 14px;line-height: 1.7em;}

#tickets .price{margin: 60px auto 5vw;}

#tickets .price .price_block{ display: flex; justify-content: space-between;}

#tickets .price .price_list{ display: table;width:70%;margin-bottom: 40px;}
#tickets .price .price_list:first-of-type{ border-top: 1px solid #666;}
#tickets .price .price_list .price_l{ display: table-cell;vertical-align: middle;border-bottom: 1px solid #666;text-align: center;font-size: 20px;line-height: 1.5em;width: 50%;color: var(--keyc);}
#tickets .price .price_list .price_l h2{ font-weight: bold;}
#tickets .price .price_list .price_l span{ display: block;font-size: 0.7em;line-height: 1.5em;}
#tickets .price .price_list .price_r{ display: table-cell;}

#tickets .price .block{width: 100%;display: flex;align-items: center;padding: 20px 0;border-bottom: 1px solid #666;font-weight: bold;}
#tickets .price .block .left{ width: 60%;font-size: 24px;line-height: 1.5em;text-align: left;}
#tickets .price .block .left span{ font-size: 0.8em;}
#tickets .price .block .right{width: 40%;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 .areamap{ width: 24%;}

.ticket_link{ background-color: #fff;text-align: center;color: #000;padding: 3% 5%;margin-bottom: 40px;font-size: 20px;line-height: 1.5em;font-weight: bold;display: flex;justify-content: space-between;align-items: center;}

.ticket_link .ticket_l{ width:65%;text-align: left;line-height: 1.7em;}
.ticket_link .ticket_l strong{ font-size: 24px;line-height: 1.7em;display: block;color: var(--keyc2);}
.ticket_link .ticket_l span{ font-size: 12px; display: block; line-height: 1.6em; padding-top: 0.5em;} 
.ticket_link .ticket_r{ width:30%;max-width: 400px;background-color: var(--keyc2);}
.ticket_link .ticket_r a{ display: block;text-align: center;padding: 1.5em 0;text-decoration: none;color:#fff;font-size: 18px;font-weight: bold;display: block;}

.ticket_link.cs{ background-color: transparent;border: 1px solid #ccc;color: #ccc;font-size: 20px;}
.ticket_link.cs .ticket_l{color: #666;}
.ticket_link.cs .ticket_l strong{ color: #666;}
.ticket_link.cs a{ background-color: #ccc;color: #999;}
.ticket_link.cs a{pointer-events: none;}

.ticket_link.end{ filter: grayscale(1) brightness(0.5);pointer-events: none;}

#tickets .t_buy{padding: 30px 20px;border: 1px solid #600;}
#tickets .playguide{margin-bottom:30px;word-break: break-all;}
#tickets .playguide .stit{ color: #600;font-weight: bold;font-size: 24px;margin-bottom: 1em;}
#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: #fff;width: 30%;display: flex;align-items: center;justify-content: center;margin-bottom: 4px;}
#tickets .playguide dd{background-color: rgba(255,255,255,0.5);padding:20px 30px;text-align:left;width: 70%;margin-bottom: 4px;}

.guide_btn{ display: block;text-align: center;margin: 3em auto;width: 100%;max-width: 400px;background-color:var(--keyc2);color: #fff;text-decoration: none;border-radius: 20vw;padding: 1em 0;}

.ticket_list{ margin-bottom: 10vw;padding: 60px 0 0;}

.ticket_note{font-size:14px;line-height: 1.6em;}

#tickets ul li.goods_block{margin: 20px 0 60px;background: #666;}
#tickets ul li.goods_block .flex_box{display: flex;gap: 5%;padding: 3%;}
#tickets ul li.goods_block .flex_box .left{width: 45%;}
#tickets ul li.goods_block .flex_box .left img{max-width: 500px;width: 100%;}
#tickets ul li.goods_block .flex_box .right{width: 50%;text-align: right;}
#tickets ul li.goods_block .right p{font-size: 16px;}
#tickets ul li.goods_block .right p:last-child{margin-bottom:0;}
#tickets ul li.goods_block .right .head_3{text-align: left;border-bottom: 1px solid #666;padding-bottom: 4px;display: block;font-size:20px;line-height: 1.7em;margin-bottom: 1em;}

@media only screen and (max-width: 768px){
	#tickets ul li.goods_block .flex_box {flex-direction: column;}
	#tickets ul li.goods_block .flex_box .left{width: 100%;}
	#tickets ul li.goods_block .flex_box .left img{max-width: 768px;width: 100%;}
	#tickets ul li.goods_block .flex_box .right{width: 100%;margin: 1em 0 0;}
	#tickets ul li.goods_block .right .head_3{ font-size: 18px;line-height: 1.7em;}
	#tickets ul li.goods_block p{ font-size: 14px;line-height: 1.6em;}
	
	
	.ticket_list{ margin-bottom: 60px;padding: 0;}
}

@media only screen and (max-width: 768px){
    #tickets .price{ margin: 30px auto 50px;}
	
	#tickets .price .price_block{ display: inherit;}
	
    #tickets .price .price_list{ display: inherit;margin-bottom: 15px; width: 100%;}
    #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: inline-block;}
    #tickets .price .price_list .price_r{display: inherit;}    
    #tickets .price .block{ padding: 10px 0;}
    #tickets .price .block .left{ font-size: 18px;}
    #tickets .price .block .right{ font-size: 20px;}
	
	#tickets .t_buy{ padding: 10px;}
	#tickets .playguide .stit{ font-size: 19px;margin:0.2em 0 0.5em 0;}
	#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: 16px;margin-bottom: 20px;padding: 15px;display: inherit;}
	.ticket_link .ticket_l{width:100%;}
	.ticket_link .ticket_l strong{ font-size: 18px;}
	.ticket_link .ticket_r{ width: 100%;max-width: initial;}
	.ticket_link .ticket_r a{ padding: 1em 0;margin-top: 15px;}
    
    .ticket_link.end{ font-size: 16px;}
    
    .iwaigi{ padding: 5%;}
    .iwaigi h2{ text-align: left;}
	
	#tickets .price .areamap{ width: 65%; margin: 0 auto 1em;}
}



/***** notice *****/
#notice{padding: 60px 0;}
#notice ul{list-style: disc;padding-left: 1.5em;}
#notice li{ margin-bottom: 1em;}

/***** FAQ *****/
#faq dl{ display: flex;flex-wrap: wrap;margin-bottom: 1em;}
#faq dt{ width: 2em;}
#faq dd{ width: calc(100% - 2em);}


/******* twitter *******/
.twt_area{ width: 100%;max-width: 600px;margin: 8vw auto 0;}

@media only screen and (max-width: 768px){
	.twt_area iframe{ height: 320px!important;}	
}


/* NEWS */

#news_in{ padding: 10vw 0;}

#news_in .news_area dl{ background-color: rgba(13,14,19,0.5);margin-bottom: 3vw;padding: 5%;}
#news_in .news_area dt{ border-bottom: 1px solid var(--keyc);color: var(--keyc);font-weight: bold;font-size: 24px;line-height: 1.5em;margin-bottom: 1em;padding-bottom: 0.7em;}

#news_in .news_area img{ max-width: 100%;}

@media only screen and (max-width: 768px){
	#news_in .news_area{ margin-bottom:25px;}
	#news_in .news_area dl{}
	#news_in .news_area dt{ padding-left:0;font-size:16px;line-height:1.3em;margin-bottom:5px;}
	#news_in .news_area dt span{  width:6.4em;letter-spacing:0.02em;position:relative;left:0;top:0;font-size:16px;margin-bottom:8px;}
}



/******* modal *******/
.modal_link{ display: block;margin: 0 auto;background-color: var(--keyc2);color: #fff;padding: 2%;text-align: center;margin-bottom: 2em;font-size: clamp(16px, 1.7vw, 20px);}
.modal_box{ text-align: left;padding: 5%;color: #fff;background-color: #000000b3;}
.modal_box img{ max-width: 100%;}
.modal_box .block{margin-bottom: 50px;}
.modal_box h2{ font-size: clamp(17px, 1.7vw, 24px);line-height: 1.5em;font-weight: bold;margin-bottom: 1em;border-bottom: 1px solid var(--keyc);padding: 3%;}
.modal_box h3{ font-size: 18px;border-left: 2px solid var(--keyc);padding: 0.25em 0 0.25em 1em;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;}

/*----------------------------------------
	modal
------------------------------------------*/
.cmn_modal_layer{--modal_btn_size: clamp(50px , 5vw , 70px);position: fixed;top: 0px;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: var(--z_modal);opacity: 0;visibility: hidden;pointer-events: none;}
.cmn_modal_layer .modal_bg{position: fixed;top: 0px;left: 0;right: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.6);opacity: 0;transition: 0.6s;}
.cmn_modal_layer .modal_inner{position: absolute;width: auto;height: auto;top: 50%;left: 50%;transform: translateX(-50%) translateY(calc(-50% + 12px));text-align: left;opacity: 0;transition-property: opacity, transform;transition-duration: 0.45s;transition-timing-function: ease, cubic-bezier(.25,.8,.25,1);transition-delay: .12s, .12s;}
.cmn_modal_layer .modal_inner img{width: auto;height: auto;max-width: min(1400px, 94vw);max-height: 75vh;cursor: initial;}
.cmn_modal_layer .modal_inner img.img_mono_modal_content{width: auto !important;height: auto !important;cursor: initial !important;}
.cmn_modal_layer .modal_inner .modal_youtube_video_box{width: min(1200px, 94vw);padding-top: min(90vh, 56.25%);}
.cmn_modal_layer .modal_inner .modal_youtube_video_box iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.cmn_modal_layer .modal_inner .modal_youtube_video_box img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: contain;object-fit: contain;}
.cmn_modal_layer .modal_inner .modal_textbox{width: min(1000px, 94vw);height: 75vh;background-color: var(--c_white_l);color: var(--c_black_d);padding: clamp(12px, 4vw, 50px);text-align: left;overflow: hidden;font-size: clamp(13px, 2vw, 16px);}
.cmn_modal_layer .modal_inner .modal_textbox.scrollable{overflow-x: hidden;overflow-y: scroll;overscroll-behavior: contain;}
.cmn_modal_layer .modal_close_btn{position: absolute;top: 4px;right: 4px;width: var(--modal_btn_size);height: var(--modal_btn_size);background: no-repeat center url("../images/btn_close_02.svg");background-size: contain;cursor: pointer;}
.cmn_modal_layer.visible{opacity: 1;visibility: visible;pointer-events: auto;}
.cmn_modal_layer.visible .modal_bg{opacity: 1;}
.cmn_modal_layer.visible .modal_inner{opacity: 1;transform: translateX(-50%) translateY(-50%);} 

.cmn_slide_modal_layer .modal_inner.slide_modal_content_box .slide_modal_content{position: absolute;width: auto;height: auto;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);opacity: 0;visibility: hidden;transition: 0.2s;pointer-events: none;}
.cmn_slide_modal_layer .modal_inner.slide_modal_content_box .slide_modal_content.slide_visible{opacity: 1;visibility: visible;pointer-events: initial;}
.cmn_slide_modal_layer .modal_prev_btn, .cmn_slide_modal_layer .modal_next_btn{position: absolute;top: 50%;transform: translateY(-50%);height: min(270px, 25vh);width: min(80px, 10vw);background-color: var(--c_black);cursor: pointer;transition: 0.2s;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.cmn_slide_modal_layer .modal_prev_btn::before, .cmn_slide_modal_layer .modal_next_btn::before{position: absolute;display: block;content: "";top: 50%;left: 50%;transform: translate(-50%, -50%);width: 40%;height: 100%;background: no-repeat center url(../images/template_parts/icon_arrow_slidemodal_02.svg);background-size: contain;}
.cmn_slide_modal_layer .modal_prev_btn.disactive, .cmn_slide_modal_layer .modal_next_btn.disactive{opacity: 0.2;pointer-events: none;}
.cmn_slide_modal_layer .modal_prev_btn:focus, .cmn_slide_modal_layer .modal_next_btn:focus{outline: none;}
.cmn_slide_modal_layer .modal_prev_btn{left: 0;border-top-right-radius: 10px;border-bottom-right-radius: 10px;}
.cmn_slide_modal_layer .modal_prev_btn::before{transform: translate(-50%, -50%) scale(-1, 1);}
.cmn_slide_modal_layer .modal_prev_btn:hover{transform: translateY(-50%) translateX(-4px);}
.cmn_slide_modal_layer .modal_next_btn{right: 0;border-top-left-radius: 10px;border-bottom-left-radius: 10px;}
.cmn_slide_modal_layer .modal_next_btn:hover{transform: translateY(-50%) translateX(4px);}

@media only screen and (max-width: 835px){.slide_modal .modal_prev_btn, .slide_modal .modal_next_btn{width: 12%;height: 20vh;background-size: 30% auto;}
  .slide_modal .modal_prev_btn{left: 0;}
  .slide_modal .modal_next_btn{right: 0;}
}
.cmn_img_mono_modal_trigger{cursor: pointer;}

/* in ticket modal
-------------------------------*/
.ticket_modal{font-weight: 700;}
.ticket_modal .modal_inner{max-height: 88svh;width: 92%;max-width: 1000px;overflow-y: scroll;}
.ticket_modal .cmn_write_box{background: #fff;padding: 50px 40px;border: 1px solid #707070;color: #000;font-size: clamp(15px, 1.7vw, 16px);line-height: 1.8em;}
.ticket_modal .cmn_write_box .main_tit{text-align: center;font-weight: bold;margin-bottom: 1em;font-size: clamp(18px, 2vw, 28px);line-height: 1.3em;border-bottom: 1px solid #000;padding-bottom: 0.5em;}

@media only screen and (max-width: 835px){.ticket_modal .cmn_write_box{padding: 20px 14px;}
}

/* =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(--keyc);}
#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;}
}


.goods_notice{ display: block;text-align: center;margin-bottom: 6vw;background-color: #c00;padding: 1em 0;text-decoration: none;color: #fff;font-size: 20px;line-height: 1.5em;margin-top: -4vw;}


@media screen and (max-width: 768px){.goods_notice{ 
    margin-bottom: 60px;font-size: 18px;margin-top: -4vw;}
}

/************* 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;}
}

/*-- notes box --*/
.notes_box{position: relative;display: block;width: min(1100px, 100%);height: auto;margin: 0 auto 2em;text-align: left;line-height: 1.6em;}
  .notes_box.simple{border: none;border-top: 1px solid #946f00;border-bottom: 1px solid #946f00;padding: calc(var(--main_distance) / 4) 0.5em;background-color: transparent;}
  .notes_box.margin_bottom{margin-bottom: calc(var(--main_distance) / 2.5);}
  .notes_box p{margin-bottom: 0.6em;}
  .notes_box ul{margin-bottom: 0.6em;}
  .notes_box .title{position: relative;display: block;font-size: 1.3em;font-weight: bold;margin-bottom: 0.7em;margin-top: 1.5em;line-height: 1.4em;padding-left: 0.7em;border-left: 3px solid #946f00;}
  .notes_box .title:first-of-type{margin-top: 0;}
  
  @media only screen and (max-width: 835px){.notes_box{padding: calc(var(--main_distance) / 3) calc(var(--main_distance) / 3);}
  }
  /*-- notes box --*/
  /*-- list style --*/
  ul.list_asterisk li, ul.list_circle li, ul.list_kome li{position: relative;display: block;margin-bottom: 0.5em;padding-left: 1.2em;}
  ul.list_asterisk li:last-of-type, ul.list_circle li:last-of-type, ul.list_kome li:last-of-type{margin-bottom: 0;}
  ul.list_asterisk li{padding-left: 0.8em;font-size: 0.9em;line-height: 1.4em;}
  ul.list_asterisk li::before{position: absolute;display: block;content: "";content: "*";top: 0;left: 0;width: 1em;height: 1em;transform: translateY(0em);color: #946f00;}
  ul.list_kome li{padding-left: 1.2em;font-size: 0.9em;line-height: 1.4em;}
  ul.list_kome li::before{position: absolute;display: block;content: "";content: "※";top: 0;left: 0;width: 1em;height: 1em;transform: translateY(0em);color: #172333;}
  ul.list_circle li::before{position: absolute;display: block;content: "";top: 0;left: 0;width: 1em;height: 1em;transform: translateY(0.3em) scale(0.4);background-color: #946f00;border-radius: 9999px;}
  
  /*-- list style --*/


  /******* guide *******/
  #guide{margin-bottom: 15vw;}
  #guide{background-color: rgba(0, 0, 0, 0.50);}
  #guide ul li.block:not(:last-of-type){margin-bottom: 3em;}
  #guide ul li.block p:last-child{margin-bottom:0;}
  #guide ul li.block .head_3{padding-bottom: 4px;border-bottom: 1px solid #666;display: block;font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
  
  @media only screen and (max-width: 768px){
    #guide{margin-bottom: 90px;}
    #guide ul li.block .head_3{ font-size: 18px;line-height: 1.7em;}
    #guide ul li.block p{ font-size: 14px;line-height: 1.6em;}
}
  /***** goods *****/
  #goods{margin-bottom: 15vw;}
#goods{background-color: rgba(0, 0, 0, 0.50);}
#goods ul li.block{}
#goods ul li.block.special{background:#666;}
#goods ul li.block.special .flex_box{padding: 3%;}
#goods ul li.block .flex_box{display: flex;gap: 5%;}
#goods ul li.block .flex_box .left{width: 45%;}
#goods ul li.block .flex_box .left img{max-width: 500px;width: 100%;}
#goods ul li.block:not(:last-of-type){margin-bottom: 3em;}
#goods ul li.block .flex_box .right{width: 50%;text-align: right;}
#goods ul li.block .right p:last-child{margin-bottom:0;}
#goods ul li.block .right .head_3{text-align: left;border-bottom: 1px solid #666;padding-bottom: 4px;display: block;font-size:1.3em;line-height: 1.7em;margin-bottom: 1em;}
#goods ul li.block .right .head_3 span{font-size: 0.7em;color: var(--keyc2);font-weight: 800;}

@media only screen and (max-width: 768px){
  #goods{margin-bottom: 90px;}
    #goods ul li.block .flex_box {flex-direction: column;}
    #goods ul li.block .flex_box .left{width: 100%;}
    #goods ul li.block .flex_box .left img{max-width: 768px;width: 100%;}
    #goods ul li.block .flex_box .right{width: 100%;margin: 1em 0 0;}
    #goods ul li.block .right .head_3{ font-size: 18px;line-height: 1.7em;}
    #goods ul li.block p{ font-size: 14px;line-height: 1.6em;}
}

  /******* streaming *******/
  #streaming{margin-bottom: 15vw;}
  #streaming{background-color: rgba(0, 0, 0, 0.50);}
  #streaming .block{border: 1px solid #666;padding:3%;}
  #streaming .block p:last-child{margin-bottom:0;}
  #streaming .block .head_3{padding-bottom: 4px;border-bottom: 1px solid #666;display: block;font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
  #streaming .block dl{ margin-bottom: 1em;}
  #streaming .block dl:last-child{margin-bottom:0;}
  #streaming .block dl dt.head_4{padding: 4px 8px;border: 1px solid #666;display: inline-block;font-size: 1em;line-height: 1.4em;margin-bottom: 0.5em;}
  
  @media only screen and (max-width: 768px){
    #streaming{margin-bottom: 90px;}
    #streaming.block .head_3{ font-size: 18px;line-height: 1.7em;}
    #streaming.block dl dd{ font-size: 14px;line-height: 1.6em;}
    #streaming .block{ padding:5%;}
}


  /******* streaming *******/
  #blu-ray{margin-bottom: 15vw;}
  #blu-ray{background-color: rgba(0, 0, 0, 0.50);}
  #blu-ray .block{border: 1px solid #666;padding:3%;}
  #blu-ray .block p:last-child{margin-bottom:0;}
  #blu-ray .block .head_3{padding-bottom: 4px;border-bottom: 1px solid #666;display: block;font-size: 1.3em;line-height: 1.7em;margin-bottom: 1em;}
  #blu-ray .block dl{ margin-bottom: 1em;}
  #blu-ray .block dl:last-child{margin-bottom:0;}
  #blu-ray .block dl dt.head_4{padding: 4px 8px;border: 1px solid #666;display: inline-block;font-size: 1em;line-height: 1.4em;margin-bottom: 0.5em;}
  
  @media only screen and (max-width: 768px){
    #blu-ray{margin-bottom: 90px;}
    #blu-ray.block .head_3{ font-size: 18px;line-height: 1.7em;}
    #blu-ray.block dl dd{ font-size: 14px;line-height: 1.6em;}
    #blu-ray .block{ padding:5%;}
}