@charset "UTF-8";
@import "reset5.css";
@import "animate.css";
@import url('https://use.typekit.net/vqm6lmy.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

body { color:#fff; line-height:1; background-color: #d72e88; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden; font-family: neue-haas-grotesk-display, "Noto Sans JP","Helvetica Neue", Helvetica, Arial, sans-serif; font-size:16px; line-height: 1; font-weight: 500; -webkit-font-smoothing: antialiased; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; vertical-align: bottom }
/* !font-size 12px default setting */
p, a, th, td { font-size: 16px; font-family: neue-haas-grotesk-display, "Noto Sans JP","Helvetica Neue", Helvetica, Arial, sans-serif; }
p, th, td { line-height: 2em; }
h2,h3,h4,h4,h5 { line-height: 1.5em; font-style: normal; color: #fff; font-weight: 800; font-family: neue-haas-grotesk-display, "Noto Sans JP","Helvetica Neue", Helvetica, "Arial Black", Arial, sans-serif; }

iframe { overflow: hidden }
video { vertical-align: bottom; }

/* !clearfix */
.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right !important; }
.txtL { text-align: left !important; }
.txtC { text-align: center !important; }

span.lt { position: relative }
span.lt .line { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #fff }

/* !Links */
a { font-weight: 500 }
a:link { color: #fff; text-decoration: none; }
a:visited { color: #fff; text-decoration: none }
a:hover { color: #d72e88; text-decoration: none; }
a:hover span.bdr { border-bottom: solid 4px #d72e88 }
a:active { color: #fa7053; text-decoration: none }
a.nb:link { border-bottom: none }

html { margin: 0; padding: 0 }
body { margin: 0; padding: 0 }

.noScroll {
  position: fixed !important;
  overflow-y: scroll;
}

#loader { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; z-index: 1001 }
.loader svg {
	fill: none;
	stroke: #e64219 ;
	stroke-width: 10;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

#wrapper { position: relative; z-index: 10; }

#header { position: fixed; left: 0; top: 0; width: 100%; height: 72px; text-align: left; background: #191816; z-index: 1000 }
#header .corp-logo { margin: 18px 0 0 40px }
#header #gnav { position: absolute; right: 20px; top: 0 }
#header #gnav li { display: inline-block; font-size: 18px; line-height: 1em }
#header #gnav li a { display: block; padding: 25px; font-weight: 700 }

#main { margin-top: 72px; }
#main img { opacity: 0 }

.sec { position: relative; padding: 8vw; top: 4vw; opacity: 0;  }
.sec .sec-inner { max-width: 1080px; margin: 0 auto }
.sec h2.tit-en { font-size: 50px; line-height: 1em; letter-spacing: 0.08em; font-weight: 800; text-align: center; margin-bottom: 1em; opacity: 0; }
.sec p { text-align: left }

#intro { padding: 2vw }
#intro .sec-inner { max-width: inherit; padding: 8vw; background: #e84bb0; border-radius: 32px }
#intro h2 { text-align: center; font-size: 36px; font-weight: 900; margin-bottom: 0.5em }
#intro p { text-align: center; font-size: 18px; font-weight: 500 }

#news { padding: 4vw 8vw; border-top: solid 40px #272727; color: #191816 }
#news h2 { text-align: center; font-size: 28px; color: #ee5f3e; font-weight: 900; margin-bottom: 1em }
#news p { display: block; font-size: 18px; padding: 1em; border-top: dotted 1px #676767; text-align: center }

#show-info { padding: 80px 40px }
#show-info .sec-inner { max-width: 1280px; margin: 0 auto; }
#show-info h3 { font-size: 32px; margin-bottom: 0.5em }
#show-info h3:not(.loc) { font-weight: 600 }
.show-box { position: relative; background: #191816; padding: 40px 40px 40px 300px; margin-top: 20px; border-radius: 24px }
.show-box:first-child { margin-top: 0 }
#show-info .show-box h3.loc, #show-info-en .show-box h3.loc { position: absolute; left: 40px; top: 40px; font-size: 40px; font-weight: 700; line-height: 1em; letter-spacing: 0.08em; color: #d72e88 }
.show-box p { font-size: 18px; }
.show-box p.cap { font-size: 14px; }
.show-box p.mt { margin-top: 0.5em }
.show-box p.show-date { font-size: 30px; line-height: 1.5em; font-weight: 800 }
.show-box p.show-date a, .show-box p.seat-price a { padding: 0 1em; margin-left: 1em; line-height: 32px; display: inline-block; border-radius: 0.5em; background: rgba(255,255,255,0.2) }
.show-box p.show-date a span, .show-box p.seat-price a span { font-size: 16px; font-weight: 600; line-height: 32px }
.show-box p.show-date a:hover, .show-box p.seat-price a:hover { background: rgba(255,255,255,1) }
.show-box p.open-time { font-size: 30px; line-height: 1.5em; font-weight: 600; margin: 0.25em 0 }
.show-box p.seat-price { font-size: 20px; line-height: 1.5em; font-weight: 600; margin: 0 0 1em }
.soldout { color: #676767 }
.soldout::after { content: " THANKS,SOLD OUT!"; color: crimson; font-weight: 800 }

.btn { line-height: 1em; margin-top: 0.5em }
.btn a { width: 240px; display: block; font-size: 20px; font-weight: 800; padding: 0.66em 0; line-height: 1em; background: rgba(255,255,255,0.75); color: #191816; border-radius: 1.33em; transition: all 0.2s }
.btn a:hover { background: rgba(255,255,255,1); transform: scale(1.02); color: #d72e88; box-shadow: 2px 2px 0 #000 }
.btn a.so { opacity: 0.25 }
.btn p { font-weight: bold; font-size: 20px !important; color: #191816 }

#show-date { background: url(../img/bg01.png);  }
#show-date .cont { text-align: left }

#ticket { background: #e84bb0 }
.tkt-box { position: relative; padding: 30px; margin-top: 10px; background: #3a3a3a; text-align: left; border-radius: 5px }
.tkt-box.close { opacity: 0.4 }
.tkt-box h3 { font-size: 32px; }
.tkt-box h3 span { font-size: 16px }
.tkt-box p { margin-top: 1px }
.tkt-box p.period { font-size: 18px; }
.tkt-box .btns { position: absolute; right: 30px; bottom: 20px; text-align: center }
.tables { margin-top: 1em; border-bottom: dotted 1px #676767 }
.tables .tbl { float: left; width: 50%; padding: 1em 0; border-top: dotted 1px #676767 }
.tables .tbl:last-child { width: 100% }
.tables .tbl h4 { display: inline-block; width: 4em; padding: 0 1em; vertical-align: top; line-height: 2em }
.tables .tbl p { display: inline-block; }
.tables .tbl p.blk { width: calc(33.33% - 1px); text-align: center; border-right: solid 1px #676767; font-size: 0 }
.tables .tbl p.blk a { display: block; line-height: 4em; font-size: 18px }
.noted { margin-top: 2em; color: #191816 }
.noted h3 { text-align: left; color: #191816 }


#profile { padding: 8vw 0; background: #3a3a3a }
#profile .bio { position: relative; text-align: left }
#profile .bio .ph { float: left; width: calc(50% + 20px) }
#profile .bio .cont { float: left; width: calc(50% - 60px - 8vw); margin-left: 40px }
#profile .bio .cont h3 { font-size: 28px; margin-bottom: 16px }
#profile .bio .cont h3 span { font-size: 18px }
#profile .bio .cont .link { font-weight: bold !important; margin-top: 10px; font-size: 20px }

#music { background: #000; }
#music ul { margin: 0 -20px }
#music ul li { float: left; width: 50% }
#music ul li .embed { padding: 20px }

#english { padding: 2vw; border-top: solid 60px #3a3a3a;  }
#english .sec-inner { max-width: inherit; padding: 8vw; background: #e84bb0; border-radius: 32px }
#english h3 { text-align: center; font-size: 42px; font-weight: 900; margin-bottom: 0.5em }
#english p { text-align: center; font-size: 18px; font-weight: 500 }
#show-info-en {  }
#show-info-en .sec-inner { max-width: 1280px; margin: 0 auto; }
#show-info-en h3 { font-size: 32px; }
#show-info-en h3:not(.loc) { font-size: 32px; font-weight: 600 }
#show-info-en .sec-inner:last-child { max-width: 1080px; margin: 80px auto 0 }
#ticket-en .tkt-box p { margin-top: 1em }

#footer { background: #171717; padding: 40px 0 80px; }
#footer p { margin-bottom: 12px; font-size: 14px }
#footer p.copyright { position: absolute; left: 10%; bottom: 40px; width: 80%; z-index: 10; color: #fff; font-size: 14px }

span.rd { color: #E30307; }
span.og { color: #fa7053; }
.sp-none { display: block !important }
.pc-none { display: none !important }

#mov-layer { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.8); z-index: 1002  }
#mov-layer .mov { position: absolute; left: 50%; top: 50%; width: 960px; margin: -270px 0 0 -480px }


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

	body { font-size: 14px; letter-spacing: 0.08em;  }
	p, th, td, a { font-size: 13px; line-height: 1.8em; letter-spacing: 0.04em; }
	h2,h3,h4,h4,h5 { line-height: 1.5em; }
	
	#wrapper { min-width: inherit }
	
	#header { position: fixed; left: 0; top: 0; width: 100%; height: 50px; text-align: left; background: #000; z-index: 1000 }
	#header .corp-logo { margin: 12px 0 0 30px }
	#header .corp-logo img { width: 80px }
	#header #gnav { position: absolute; right: inherit; left: 100%; top: 0; width: 50% }
	#header #gnav li { display: inline-block; width: 100% }
	#header #gnav li a { display: block; padding: 25px 30px; font-size: 16px; font-weight: 800 }
    #header #gnav li a:link, #header #gnav li a:visited { color: #191816 }
	#sp_menu { position: absolute; right: 0; top: 0; width: 50px; height: 50px; z-index: 10000; cursor: pointer; display: block }
	#sp_menu span.ln1 { position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -25%; width: 50%; height: 1px; background: #fff }
	#sp_menu span.ln2 { position: absolute; left: 50%; top: 50%; margin: 5px 0 0 -25%; width: 50%; height: 1px; background: #fff }
	
	#main { margin-top: 50px }
	
	.sec { position: relative; padding: 40px 15px; top: 40px; opacity: 0;  }
	.sec .sec-inner { max-width: inherit; margin: 0 auto }
	.sec h2.tit-en { font-size: 28px; margin-bottom: 20px; opacity: 0; }
	
  #intro { padding: 15px }
  #intro .sec-inner { max-width: inherit; padding: 40px 15px; border-radius: 24px }
  #intro h2 { text-align: left; font-size: 22px; }
	#intro p { text-align: left; font-size: 15px }
    #intro p br { display: none }

    #news { padding: 40px 15px; border-top: solid 20px #272727; }
    #news h2 { text-align: center; font-size: 20px; color: #ee5f3e; font-weight: 900; margin-bottom: 0.66em }
    #news p { font-size: 16px; padding: 0.66em 0.5em; text-align: left }
	
	#show-info { padding: 40px 15px; }
	#show-info .sec-inner { max-width: inherit; margin: 0 auto; }
    #show-info h3 { font-size: 18px; }
	.show-box { position: relative; padding: 20px; margin-top: 10px; border-radius: 16px }
	#show-info .show-box h3.loc, #show-info-en .show-box h3.loc { position: relative; left: inherit; top:  inherit; font-size: 32px; line-height: 1em; text-align: left; margin-bottom: 0.5em }
	.show-box p { font-size: 14px; }
	.show-box p.cap { font-size: 12px; }
	.show-box p.show-date { font-size: 20px; line-height: 1.5em; font-weight: 600 }
	.show-box p.show-date a, .show-box p.seat-price a { padding: 0 0.5em; margin-left: 1em; line-height: 20px; display: inline-block; border: solid 1px #e0d089; border-radius: 0.5em }
	.show-box p.show-date a span, .show-box p.seat-price a span { font-size: 12px; font-weight: 600; line-height: 20px }
	.show-box p.open-time { font-size: 20px; line-height: 1.5em; font-weight: 500 }
    .show-box p.seat-price { font-size: 16px; }
	
	.btn { margin: 1em 0 0 }
    .btn a { width: 50%; font-size: 18px; }
    #show-info .btn a { width: 60%; margin: 0 20%; }
	
	.tkt-box { position: relative; padding: 20px; margin-top: 10px; text-align: left }
	.tkt-box h3 { font-size: 20px }
	.tkt-box h3 span { font-size: 12px }
	.tkt-box p { margin-top: 1px }
	.tkt-box p.period { font-size: 16px; }
	.tkt-box .btns { position: relative; right: inherit; bottom: inherit; text-align: center }
    .tkt-box .btns .btn { width: 48%; display: inline-block }
	.tkt-box .btns .btn a { width: 100%; display: inline-block }
	.tables { margin-top: 1em; border-bottom: solid 1px #bdbab3 }
	.tables .tbl { float: left; width: 100%; padding: 1em 0; border-top: solid 1px #bdbab3 }
	.tables .tbl:last-child { width: 100% }
	.tables .tbl h4 { display: inline-block; width: 4em; padding: 0; vertical-align: top; line-height: 2em }
	.tables .tbl p { display: inline-block; margin-right: 1em }
    .tables .tbl p.blk { width: calc(50% - 1px); text-align: center; border-right: solid 1px #676767; border-bottom: solid 1px #676767; font-size: 0 }
    .tables .tbl p.blk:last-child { border-bottom: none }
    .tables .tbl p.blk a { display: block; line-height: 3em; font-size: 14px }
	.noted { margin-top: 2em }
	.noted h3 { text-align: left }
	
    #profile { padding: 40px 0 }
	#profile .bio .ph { float: none; width: 100%; margin-bottom: 20px }
	#profile .bio .cont { float: none; width: auto; padding: 0 30px; margin-left: 0 }
	#profile .bio .cont h3 { font-size: 20px; line-height: 1.25em; margin-bottom: 10px }
    #profile .bio .cont h3 span { display: block; font-size: 14px }
	#profile .bio .cont .link { margin-top: 6px; font-size: 16px }
	
	#music ul { margin: 0 }
	#music ul li { float: none; width: 100%; margin-bottom: 20px }
	#music ul li .embed { width: 100%; padding: 0 }
	
  #english { padding: 15px; border-top: solid 30px #000 }
  #english .sec-inner { max-width: inherit; padding: 40px 15px; border-radius: 24px }
    #english h3 { text-align: left; font-size: 22px; }
	#english p { text-align: left; font-size: 15px; }
    #show-info-en { padding: 40px 15px; }
    #show-info-en .sec-inner { max-width: inherit; margin: 0 auto; }
    #show-info-en .sec-inner:last-child { max-width: inherit; margin: 40px auto 0 }
    #show-info-en .sec-inner:last-child .tkt-box { background: #000 }
    #show-info-en h3 { font-size: 18px; }
  #show-info-en h3:not(.loc) { font-size: 20px; font-weight: 600 }
	
	#footer { background: #272727; padding: 30px 0; margin: 15px 0 0 }
	#footer p { margin-bottom: 12px; font-size: 12px }
	#footer p img { width: 90%; height: auto }
	#footer p.copyright { position: absolute; left: 5%; bottom: 20px; width: 90%; z-index: 10; margin-bottom: 0; color: #fff; font-size: 12px }

	.br:before {
		content: "" ;
		white-space: pre ;
	}

	.sp-none { display: none !important }
	.pc-none { display: block !important }
    
    #mov-layer .mov { position: absolute; left: 50%; top: 50%; width: 100vw; margin: calc(-100vw * 9/32) 0 0 -50vw }
    #mov-layer .mov iframe { width: 100vw; height: calc(100vw * 9/16); }
}


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

}