@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:#ff718f;
  --keyc2:#c93464;;
  --font0:YakuHanJP, 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
  --font1:"M PLUS Rounded 1c", sans-serif;
  --font2:"Jost", "M PLUS Rounded 1c",sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
	font-family: YakuHanJP, 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-weight: 500;
	font-size: 16px;
	line-height: 1.7em;
	background-color: #fff;
	color: #000;
}
body:before{ content: ""; display: block; position: fixed; height: 100vh; width: 100%; 
	background-image: url("../images/bg.webp"); 
    background-repeat: no-repeat; 
	background-position: center; 
	background-size: cover; 
	z-index: -2; top: 0; left: 0; opacity: 0.1;}
/* body:after{ content: ""; display: block; position: fixed; height:200vw; width: 100%; 
	background-image: url("../images/main_dna.png"); 
    background-repeat: no-repeat; 
	background-position: right top; 
	background-size: 50%; 
	z-index: -1; top: 0; right: 0;} */


html {overflow-y:scroll; height:100%;}

a {color: var(--keyc);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{ background-image: url("../images/bg_sp.webp")}
    
    .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: 2px solid var(--keyc); width:calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px;}
#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; font-family: var(--font2);}

.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:16px;  text-align:center; padding:32px 0.75em ; position:relative; text-decoration: none; color: var(--keyc); display: flex; align-items: center; font-weight: 600;}

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

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


@media only screen and (max-width: 768px){
	header {padding: 0;}
	header .headlogo { width: 18%; margin: 20px 0 0 24px;}	
	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(201,52,100,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; color: #fff;}
    .nav li.sns a{ padding: 1em 7%;}
    .nav li.sns a img{ width: 30px;}
	.nav li a:hover,
	.nav li a.active{ color:var(--keyc2); background-color:rgba(255,255,255,0.7);}

	/* Default navigation icon */
	.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:4vw; 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 4vw;}
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: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.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;}
}


/********************** ローダー *******************************/
.intro_loader{ overflow:hidden; height:100vh;}
.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000; }
.loader { -webkit-perspective: 500px;perspective: 500px;z-index:10000; position: fixed;width: 100%; height: 100vh;}
.loader img{ top:50%; left:50%; position: fixed; opacity:1; animation: anime_loader 2s infinite;animation-fill-mode: both; width:120px; margin-left:-60px; margin-top:-60px;}
.intro_on .loader{ animation:none; animation-fill-mode: inherit;}

@keyframes anime_loader {
  0% { -webkit-transform: rotateY(0) ;}
  100% { -webkit-transform: rotateY(360deg) ;}
}

@media only screen and (max-width: 768px){
	.loader img{ width:90px; margin-left:-45px; margin-top:-45px;}
	.loader_bg{ background-size: 5%;}
}

/******* 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: 90%; max-width: 1100px; margin: 0 auto;}


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

}

/******* ボタン *******/
.btn{ display: block; background-color: var(--keyc_l); color:var(--keyc2); 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: 50px; line-height: 1.7em; ; margin-bottom: 1em; text-align: center; color: var(--keyc); font-weight: bold; font-family: var(--font2);}

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


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

/******* mainimg *******/

.top{ position: relative; margin: 0 auto 6vw; padding: 0; width: 100%;}
.top img{ width: 100%;}

.top .mainimg{ display: flex; justify-content: space-between; width: 94%; margin: 0 auto;}
.top .mainimg figure{ width:45%;}
.top .mainimg .main_r{ width: 50%; height: 100vh; max-height: 58vw;  position: relative; }

.top .top_tit {  width: 100%; transition: 2s; position: absolute; width: 90%; top: 50%; left: 50%; transform: translate(-50%, -50%);}

.top .top_tit h1{ margin-bottom: 2.5vw;}
.top .top_tit p{margin: 0;}

@media only screen and (max-width: 768px){
	.top{ margin-bottom: 15vw;}
	.top .mainimg{ display: inherit; width: 100%; margin: 0 auto;}
	.top .mainimg figure{ width:100%; margin-bottom: 3vw;}
	.top .mainimg .main_r{ width: 100%; height: auto; max-height: inherit;  }
	
	.top .top_tit{ position: inherit; transform: none; left: 0; top: 0; margin: 0 auto; }
}

/******* news *******/
.top_link{ display: flex; margin-bottom: 10vw; }
.top_link .news{ width: 46%; margin-right: 8%;  padding-bottom: 70px; text-align: left; position: relative;}
.top_link .news ul{ margin-bottom: 30px;}
.top_link .news li{ position: relative; margin-bottom: 0; transition:0.2s;}
.top_link .news li a{ padding: 12px 0; display: block; color: #fff;}
.top_link .news li a p {margin-bottom: 0; font-size: 18px;}
.top_link .news li a p span {color: var(--keyc);margin-left: 0.7em; font-size: 0.8em;}
.top_link .news li a p.news_date { position: relative; transform: translateX(60px);margin-bottom: 0.2em;  color: var(--link_color); width: 12em;}
.top_link .news li a p.news_date::before {position: absolute;display: block;content: "";background-color: var(--keyc);height: 1px;width: 45px; top: 50%; left: -60px;}
.top_link .news .news_more {position: absolute;bottom: 0; width: 100%; padding: 20px;  border: 1px solid var(--keyc); text-align: center; color:var(--keyc); letter-spacing: 0.1em;transition:0.2s; }
.top_link .news .news_more:hover{ opacity:0.8; }
.top_link .twittr{ width: 46%;}

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

.top_link .news li{}

@media only screen and (max-width: 768px){
	.top_link{ display: inherit; margin-top: 0; margin-bottom: 70px; }
	.top_link .news{ width: 100%; padding: 0; margin: 0 0 50px;}
	.top_link .news ul{ margin-bottom: 10px;}
	.top_link .news li a {padding: 12px 0 ;}
	.top_link .news li a p { font-size: 16px;}
	.top_link .news .news_more{ padding: 18px; position: inherit; display: block;}
	
.top_link .twittr{ width: 100%; padding-left: 0;}
}

/******* about *******/
.about{ text-align: center; margin-bottom: 5vw;}
.about .stit{ width: 94%; margin: 0 auto 3vw;}
.about .container{ font-weight: bold; line-height: 2.5em; font-size: 18px;}
.about .container p{ margin-bottom: 2em;}

@media only screen and (max-width: 768px){
    .bgw .container{ }
    .about .stit{ width: 92%; margin: 0 auto 30px; font-size: 18px;}
    .about{ text-align: left; margin-bottom: 30px;}    
    .about .container{  line-height: 2em; font-size: 16px;}
}

/******* story *******/
.story{ text-align: center; margin-bottom: 10vw; background-color: rgba(233,201,105,0.7); color: var(--keyc2); padding: 5vw 0 5vw; }
.story .stit{ width: 94%; font-size: 20px; margin: 0 auto 1em; color: var(--keyc2);}
.story .container{ font-weight: bold; line-height: 2em; font-size: 18px;}
.story .container p{ margin-bottom: 2em;}
.story .container p:last-of-type{ margin-bottom: 0;}

@media only screen and (max-width: 768px){
	.story{ padding: 40px 0 40px; margin-bottom: 50px;}
	.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: 10vw;}
.cast .container{ font-weight: bold; line-height: 2em; font-size: 16px; max-width: 1400px;}
.cast .cast_wrap{ margin-bottom: 8em; width: 90%; margin: 0 auto;}
.cast .cblock{ font-size: 20px; line-height: 2em;}
.cast .cblock.pin{ margin-bottom: 0.5em;}
.cast .yel{ color: var(--keyc);}
.cast .role{ font-size: 18px;}
.cast p{ margin-bottom: 1.5em;}

.cast_block{ display: flex; justify-content: center;  flex-wrap: wrap; font-size: 20px; line-height: 1.5em;  margin: 0 auto 2.5em;}
.cast_block figure{ line-height: 0; margin-bottom: 10px;}
.cast_block img{ width: 100%; }
.cast_block.four li{ width: 23.8%; margin-right: 1.6%;}
.cast_block.four li:last-child{ margin-right: 0;}
.cast_block.five li{ width: 19.2%; margin-right: 1%;}
.cast_block.five li:last-child{ margin-right: 0;}

.cast_block span{ display: block; font-size: 0.8em; color: var(--keyc);}

.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: 50px;}
    .cast_block{ margin-bottom: 1em; }
    .cast_block.four{ padding: 0;}
    .cast_block.four li{ width: 49%; margin-right: 2%;; margin-bottom: 6%;}
    .cast_block.four li:nth-child(2n){margin-right: 0;}
    .cast_block.five li{ width: 45%; margin-right: 2%;; margin-bottom: 6%;}
    .cast_block.five li:nth-child(2n){margin-right: 0;}
	
	.cast .cblock{ font-size: 18px;}
	.cast_note{margin-top: 0em; font-size: 0.8em;}
}

/*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(255,113,143,0.8); padding: 60px 0; color: #fff;}
#tickets .stit{ color: #fff;}
#tickets .notes{ font-size: 14px; line-height: 1.7em; font-weight:400; font-family: var(--font0);}

.scheblock{  margin-bottom: 20px; color: #fff; font-family: var(--font1); font-weight: 600;}

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


@media only screen and (max-width: 768px){
	#tickets{ padding: 40px 0;}
	
    .scheblock h2{ margin-bottom: 10px;}
	
	.scheblock .date{ font-size: 34px;}
	.scheblock .venue{font-size: 24px; line-height: 1.5em;}
	.scheblock .address{ font-size: 14px; line-height: 1.5em; display: block;}
}


/***** 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(255,255,255,0.2); vertical-align: middle; padding: 0.5em 0; text-align: center; border-color: #fff; color: #fff;}

.demo01 td{text-align: center;padding: 0.5em 0;font-weight: bold;line-height:1.5em;border-color: #eee;background-color: rgba(0,0,0,0.2); vertical-align: middle;}

.demo01 .sat{ background-color:rgba(11,250,250,0.4);}
.demo01 .sun{ background-color:rgba(250,60,108,0.3);}
.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);font-size: 16px;}
.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 #ccc; padding: 5px 0; font-size: 14px; line-height: 1.3em; width: 20%;}
	.demo01 td{border-left: 1px solid #ccc;border-right: 1px solid #ccc;border-top-width: 1px;border-bottom-width: 0;padding: 16px 0;font-size: 14px; line-height: 1.3em; width: 13.33%;}
	.demo01 th.month{ font-size: 20px; width: 30%; line-height: 1.5em;}
	.demo01 .txts{ font-size: 13px; display: block;}
    
}

/***** price *****/
#tickets .price{margin: 60px auto 10vw;}
#tickets .price .price_list{ display: table; width: 100%; margin-bottom: 30px; }
#tickets .price .price_list:first-of-type{ border-top: 1px solid #eee;}
#tickets .price .price_list .price_l{ display: table-cell; vertical-align: middle;  border-bottom: 1px solid #eee; text-align: center; font-size: 24px; line-height: 1.5em; width: 42%; }
#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: 30px 0;border-bottom: 1px solid #eee;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 .areamap{ width: 100%; background: rgba(255, 255, 255, 0.7);text-align: center;}
#tickets .areamap img{max-width: 600px; width: 100%;}

.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: 600; display: flex; justify-content: space-between; align-items: center;}

.ticket_link .ticket_l{ text-align: left;  line-height: 1.7em;}
.ticket_link .ticket_l strong{ font-size: 24px; line-height: 1.7em; display: block; color: var(--keyc); }
.ticket_link .ticket_r{ width:33%; max-width: 400px;background-color: var(--keyc); }
.ticket_link .ticket_r a{ display: block;text-align: center; padding: 1.5em 0; text-decoration: none; background-color: var(--keyc2); 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(--keyc_l); color: var(--keyc2); text-decoration: none; border-radius: 20vw; padding: 1em 0; }


.ticket_list{ margin-bottom: 10vw;}

@media only screen and (max-width: 768px){
    #tickets .price{ margin: 30px auto 50px;}
    #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_r{display: inherit;}    
    #tickets .price .block{ padding: 20px 0;}
    #tickets .price .block .left{ font-size: 18px;}
    #tickets .price .block .right{ font-size: 18px;}
	
	#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_list .stit{ font-size: 22px;}
	.ticket_link{ font-size: 16px; margin-bottom: 20px; padding: 15px; display: inherit;}
	.ticket_link .ticket_l{ }
	.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;}
}


/***** goods *****/
#goods{padding: 60px 0; text-align: center; background-color:rgba(233,201,105,0.7);color: var(--keyc2);}
#goods .stit{ color: var(--keyc2);}
#goods .sstit{ font-size: 24px; line-height: 1.7em; font-weight: bold;}
#goods .goods_notes{ max-width: 700px; margin: 0 auto;}

@media only screen and (max-width: 768px){
    #goods{ padding: 30px 0;}
}

/***** 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_box{ text-align: left; padding: 5%; color:#330000 }
.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;}
.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;}





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