@charset "UTF-8";
/***************************************
01.Reset
***************************************/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
html {
	/*overflow-x: hidden;*/
}
body {
	line-height: 1;
	text-align: left;
	overflow-x: hidden;
	position: relative;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

:root{
	--ink:#555555;
}
*{
	box-sizing:border-box;
}
html{
	scroll-behavior:smooth;
}
body{
	margin:0;
	color:var(--ink);
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 16px;
	line-height: 1.5;
	background: #fff;
}
body.is-locked{
	overflow:hidden;
}
img{
	display:block;
	max-width:100%;
}
a{
	color:inherit;
}
.sp-only {
		display: none;
	}
.visually-hidden{
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip:rect(0 0 0 0);
}
.hero{
	width: 100%;
    height: 100%;
	aspect-ratio: 1440 / 810;
	background:url(../img/pc-mv.jpg) center/cover no-repeat;
}
.header{
	position:fixed;
	z-index:30;
	top:20px;
	right:24px;
}
.menu-button{
	position:relative;
	z-index:2;
	width:52px;
	height:52px;
	border:0;
	border-radius:50%;
	background:#292929;
	cursor:pointer;
}
.menu-button span{
	display:block;
	width:24px;
	height:2px;
	margin:5px auto;
	background:#fff;
	transition:.25s;
}
.header.open .menu-button span:nth-child(1){
	transform:translateY(7px) rotate(45deg);
}
.header.open .menu-button span:nth-child(2){
	opacity:0;
}
.header.open .menu-button span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg);
}
.nav{
	position:absolute;
	top:0;
	right:0;
	width:240px;
	padding:68px 28px 26px;
	background:rgba(255,255,255,.96);
	border-radius:22px;
	box-shadow:0 12px 45px #0002;
	opacity:0;
	visibility:hidden;
	transform:translateY(-8px);
	transition:.25s;
}
.header.open .nav{
	opacity:1;
	visibility:visible;
	transform:none;
}
.nav a{
	display:block;
	padding:8px 0;
	font-weight:bold;
	text-decoration:none;
	letter-spacing:.08em;
}
.nav a img{
	width: auto;
	height: 16px;
}
.floating-ticket{
	position:fixed;
	z-index:20;
	right:15px;
	bottom: 10px;
	width:150px;
	transform:translateY(-50%);
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .25s, visibility .25s, transform .2s;
}
.floating-ticket.is-visible{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}
.floating-ticket:hover{
	transform:translateY(-45%);
}
.bg{
	background-position:center top;
	background-size: contain;
    background-repeat: no-repeat;
}
.bg-top{
	background-image:url(../img/pc-new-intro-bg.png);
}
.bg-cast{
	background-image:url(../img/pc-cast-bg.png);
}
.bg-ticket{
	background-image:url(../img/pc-ticket-bg.png);
}
.bg-bottom{
	background-image:url(../img/pc-access-goods-bg.png);
}
.section{
	width:800px;
	margin:auto;
	padding:40px 0 40px;
	text-align:center;
	scroll-margin-top:20px;
}
.section h2{
	margin:0 auto 16px;
}
.section h2 img{
	height:60px;
	width:auto;
	margin:auto;
}
.news{
	padding-top: 67px;
}
.news-list{
	width:max-content;
	max-width:100%;
	margin:auto;
	text-align:left;
	font-size:16px;
	font-weight: 500;
	max-height: 100px;
    overflow: auto;
}
.news-list p{
	display:flex;
	gap: 16px;
    margin-bottom: 8px;
}
.button{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	min-width:200px;
	min-height:44px;
	margin-top:8px;
	padding:8px 24px;
	color:#fff;
	background: linear-gradient(180deg, #6B6560 0%, #332D27 100%);
	border-radius:999px;
	text-decoration:none;
	font-weight:bold;
	font-size:16px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
}
.button:hover {
	background: #332D27;
}

.introduction{
	
}
.lead{
	font-size:20px;
	font-weight:600;
	line-height:2;
}
.lead p {
	margin-bottom: 16px;
}
.cast{
	padding-top:65px;
}
.note{
	font-size:14px;
	font-weight: bold;
	margin-bottom: 16px;
}
.cast-card{
	width: 100%;
	display:block;
	margin:0 auto;
	padding:0;
	border:0;
	cursor:pointer;
	overflow:hidden;
}
.cast-card img{
	width:100%;
	transition:.35s;
}
.cast-card:hover img{
	transform:scale(1.025);
}
.cast-name{
	font-size: 24px;
	margin:8px 0 12px;
	font-weight:bold;
	line-height: 1em;
}
.sns{
	display:flex;
	justify-content:center;
	gap:16px;
}
.sns a{
	width:36px;
}
.sns a:hover {
	opacity: 0.6;
}


.tickets{
	
}
.ticket-panel{
	width:min(720px,100%);
	margin:16px auto 0;
	padding:40px 72px;
	background:#fff url(../img/ticket-img.png) -9999px no-repeat;
	border:2px solid #4a4845;
	outline:1px solid #4a4845;
	outline-offset:-10px;
	clip-path:polygon(7% 0,93% 0,94% 2%,98% 3%,99% 7%,100% 8%,100% 92%,99% 93%,98% 97%,94% 98%,93% 100%,7% 100%,6% 98%,2% 97%,1% 93%,0 92%,0 8%,1% 7%,2% 3%,6% 2%);
}
.ticket-panel h3{
	margin:0;
	font-size:28px;
	line-height:1.2;
	font-weight: bold;
}
.date{
	margin:7px 0;
	font-size:24px;
	font-weight: bold;
}
.date small {
	font-size: 16px;
}
.venue{
	font-size: 18px;
	color: #332D27;
	font-weight:bold;
	display: flex;
	justify-content: center;
	gap: 5px;
	align-items: baseline;
	text-decoration: underline;
}
.venue::before {
	display: block;
	content: "";
	background: url("../img/map-pin.png")no-repeat;
	width: 12px;
	height: 17px;
	background-size: contain;
}
.ticket-row h4 {
	font-weight: bold;
	font-size: 22px;
	display: flex;
	align-items: center;
	gap: 20px;
}
.ticket-row h4::before,
.ticket-row h4::after {
	content: "";
	flex: 1;
	border-top: 2px dotted #4a4540;
}
.ticket-row{
	margin-top:40px;
}
.ticket-row p {
	font-size: 18px;
	font-weight: bold;
	padding-top: 8px;
}
.ticket-row p.text-01 {
    padding: 16px 0;
}
.ticket-row .f-17{
	font-size:17px;
}
.ticket-row .f-18{
	font-size:18px;
}
.ticket-row strong{
	font-size:32px;
}

.notice{
	text-align:left;
	font-size:16px;
	font-weight: 500;
}
.notice h3{
	text-align:center;
	font-size:20px;
	font-weight: bold;
	margin-top: 40px;
}
.notice p {
    padding-bottom: 16px;
}
.notice ul{
	padding-left:1em;
	list-style: disc;
	margin-top: 24px;
}
.notice ul li {
	margin-bottom: 8px;
}
.contact{
	margin-top:40px;
}
.contact h3 {
	font-weight: bold;
	font-size: 18px;
}
.contact p{
	margin-top:8px;
	font-weight: 500;
}
.access{
	padding-bottom:10px;
}
.address{
	font-size:18px;
	font-weight: bold;
	margin: 16px 0;
}
.access-grid{
	display:grid;
	grid-template-columns:1fr 1.15fr;
	gap:24px;
	align-items:flex-start;
	text-align:left;
}
.access-grid iframe{
	width:100%;
	height:240px;
	border:0;
}
.access-grid ul{
	margin:0;
	padding-left:1.4em;
	font-size:16px;
	font-weight: 500;
	line-height: 1.5em;
	list-style: disc;
}
.access-grid ul li {
	margin-bottom: 8px;
}
.goods{
	padding-top:80px;
}
.goods h2{
	margin-bottom:0;
}
.goods>p{
	margin-top: 16px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1em;
}
.guest{
	margin-top:80px;
}
footer{
	padding:12px 0;
	text-align:center;
	font-size:14px;
}
.popup{
	position:fixed;
	z-index:100;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
	opacity:0;
	visibility:hidden;
	transition:.25s;
}
.popup.is-visible{
	opacity:1;
	visibility:visible;
}
.popup-backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.72);
}
.popup-box{
	position:relative;
	width:min(92vw,760px);
	max-height:88vh;
	background:transparent;
}
.popup-box img{
	width:100%;
	max-height:80vh;
	object-fit:contain;
}
.popup-close{
	position:absolute;
	z-index:2;
	right: 5.7vw;
    top: -2.8vw;
	width:38px;
	height:38px;
	border:0;
	color:#332D27;
	background:transparent;
	cursor:pointer;
}
.popup-close::before,
.popup-close::after{
	position:absolute;
	top:50%;
	left:50%;
	width:30px;
	height:2px;
	content:"";
	background:#332D27;
	border-radius:999px;
}
.popup-close::before{
	transform:translate(-50%,-50%) rotate(45deg);
}
.popup-close::after{
	transform:translate(-50%,-50%) rotate(-45deg);
}
.popup-frame-top,.popup-frame-bottom{
	display:block;
	width:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
}
.popup-frame-top{
	aspect-ratio:1604/115;
	background-image:url(../img/pc-flame-top.png);
	margin-bottom:-1px;
}
.popup-frame-middle{
	position:relative;
	background:#fff url(../img/pc-flame-middle.png) center top/100% 10px repeat-y;
}
.popup-frame-bottom{
	position:relative;
	aspect-ratio:1604/114;
	margin-top:-1px;
	overflow:hidden;
	background-image:none;
}
.popup-frame-bottom::before{
	position:absolute;
	inset:-3px 0 -2px;
	content:"";
	background:url(../img/pc-flame-bottom.png) center/100% 100% no-repeat;
}
.announcement-popup-box{
	width:76vw;
}
.announcement-content{
	min-height:180px;
	padding:42px 60px 30px;
	text-align:center;
}
.announcement-title{
	font-size:32px;
	font-weight:700;
}
.announcement-button{
	font-family: "Zen Maru Gothic", sans-serif;
	min-width:160px;
	min-height:34px;
	margin-top:20px;
	padding: 10px 40px 12px;
    font-size: 14px;
}
.cast-popup-box{
	width:76vw;
	text-align:center;
}
.cast-popup-content{
	padding:16px 70px 20px;
}
.cast-popup-list{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:32px;
	max-height:50vh;
	padding-right:16px;
	overflow-y:scroll;
	scrollbar-gutter:stable;
	scrollbar-width:none;
}
.cast-popup-list::-webkit-scrollbar{
	display:none;
}
.cast-scrollbar{
	position:absolute;
	top:16px;
	right:70px;
	width:4px;
	height:50vh;
	background:#ededed;
}
.cast-scrollbar span{
	display:block;
	width:100%;
	min-height:28px;
	background:#888;
	border-radius:999px;
}
.cast-popup-member>img{
	width:100%;
	aspect-ratio:1/1;
	object-fit:cover;
}
.cast-popup-member p{
	margin:8px 0 10px;
	font-size:16px;
	font-weight:700;
}
.cast-popup-sns{
	display:flex;
	justify-content:center;
	gap:16px;
}
.cast-popup-sns a,
.cast-popup-sns img{
	display:block;
	width:auto;
	height:16px;
	object-fit:contain;
}
@media(max-width:768px){
	body{
		font-size:12px;
	}
	.sp-only {
		display: block;
	}
	.hero{
		height:auto;
		min-height:0;
		aspect-ratio:2186/3096;
		background-image:url(../img/sp-mv.jpg);
	}
	.header{
		top:12px;
		right:12px;
	}
	.menu-button{
		width:46px;
		height:46px;
	}
	.floating-ticket{
		width:100px;
	}
	.section{
		width: 100%;
		margin: 0 auto;
		padding: 32px 16px;
	}
	.section h2{
		margin-bottom: 8px;
	}
	.section h2 img{
		height: 40px;
		width: auto;
	}
	.button {
		font-size: 14px;
	}
	.news{
		padding-top:40px;
		padding-bottom:32px;
	}
	.news-list{
		font-size:14px;
		max-height: 80px;
	}
	.news-list p{
		gap:8px;
	}
	.introduction{
		padding-top:32px;
		padding-bottom:16px;
		text-align:left;
	}
	.introduction h2{
		margin-left:auto;
		margin-right:auto;
	}
	.lead{
		font-size:18px;
		line-height:2;
	}
	.note {
		font-size: 14px;
		margin-bottom: 8px;
	}
	.cast{
		padding-top:32px;
	}
	.cast-card{
		margin-top:10px;
	}
	.cast-name {
		font-size: 20px;
	}
	.ticket-panel{
		padding:32px 24px;
	}
	.ticket-panel h3{
		font-size: 20px;
	}
	.date {
		font-size: 20px;
		margin: 8px auto 16px;
	}
	.venue {
		font-size: 16px; }
	.notice{
		font-size:14px;
	}
	.ticket-row{
		margin-top: 32px;
	}
	.ticket-row h4 {
     	font-size: 16px; 
	}
	.ticket-row p {
		font-size: 14px;
	}
	.ticket-row .f-17,
	.ticket-row .f-18 {
		font-size: 14px;
	}

	.ticket-row strong {
		font-size: 24px;
	}
	.access-grid{
		display:flex;
		flex-direction:column;
		gap:18px;
	}
	.access-grid iframe{
		height:220px;
	}
	.access-grid ul{
		width:100%;
		font-size: 14px;
	}
	.address {
    	font-size: 14px;
	}
	.contact p {
		font-size: 14px;
	}
	.goods>p {
		margin-top: 5px;
		font-size: 14px;
	}
	.guest{
		margin-top:48px;
	}
	.nav{
		width:220px;
	}
	.popup{
		padding:18px;
	}
	.popup-close{
		right: 8vw;
        top: -3vw;
		width:32px;
		height:32px;
	}
	.popup-close::before,
	.popup-close::after{
		width:24px;
		height:2px;
	}
	.popup-frame-top{
		aspect-ratio:720/65;
		background-image:url(../img/sp-flame-top.png);
	}
	.popup-frame-middle{
		background-image:url(../img/sp-flame-middle.png);
	}
	.popup-frame-bottom{
		aspect-ratio:720/65;
	}
	.popup-frame-bottom::before{
		background-image:url(../img/sp-flame-bottom.png);
	}
	.announcement-popup-box {
		width: 100%;
	}
	.announcement-content{
		min-height:180px;
		padding:90px 28px 90px;
	}
	.announcement-title{
		font-size:24px;
	}
	.announcement-button{
		min-width:150px;
		min-height:32px;
		font-size:14px;
	}
	.cast-popup-box{
		width:min(94vw,360px);
	}
	.cast-popup-content{
		padding:8px 24px 12px;
	}
	.cast-scrollbar{
		top:8px;
		right:16px;
	}
	.cast-popup-list{
		grid-template-columns:repeat(2,minmax(0,1fr));
		gap:16px;
		max-height:50vh;
		padding-right:8px;
		margin-top: 15px;
	}
	.cast-popup-member p{
		margin:5px 0 10px;
		font-size:14px;
	}

	footer {
		font-size: 12px;
		padding: 8px 0;
	}
}
/* Fixed navigation: desktop appears after the key visual;
mobile remains as a top bar. */ body.is-menu-open{
	overflow:hidden;
}
@media(min-width:701px){
	.header{
		top:0;
		left:0;
		right:auto;
		width:100%;
		height:45px;
		background:#302a25;
		transform:translateY(-105%);
		transition:transform .25s;
	}
	.header.is-visible{
		transform:translateY(0);
	}
	.menu-button{
		display:none;
	}
	.nav{
		position:static;
		width: 100%;
		height:100%;
		margin:auto;
		padding:0 40px;
		display:flex;
		align-items:center;
		justify-content:flex-end;
		gap:26px;
		background:transparent;
		border-radius:0;
		box-shadow:none;
		opacity:1;
		visibility:visible;
		transform:none;
	}
	.nav a{
		display:block;
		padding:0;
		color:#fff;
		font-weight:900;
		line-height:1;
		text-decoration:none;
		letter-spacing:.02em;
		font-size: 16px;
	}
	.nav a:hover{
		opacity:.72;
	}
}
@media(max-width:700px){
	.header{
		top:0;
		right:auto;
		left:0;
		width:100%;
		height:52px;
		background:#302a25;
		transform:translateY(-105%);
		transition:transform .25s;
	}
	.header.is-visible,.header.open{
		transform:translateY(0);
	}
	.menu-button{
		display:block;
		position:absolute;
		z-index:3;
		top:0;
		right:0;
		width:54px;
		height:52px;
		border-radius:0;
		background:transparent;
	}
	.menu-button span{
		width:27px;
		height:2px;
		margin:6px auto;
	}
	.header.open .menu-button span:nth-child(1){
		transform:translateY(8px) rotate(45deg);
	}
	.header.open .menu-button span:nth-child(3){
		transform:translateY(-8px) rotate(-45deg);
	}
	.nav{
		position:fixed;
		z-index:2;
		inset:0;
		width:100%;
		height:100dvh;
		margin:0;
		padding:72px 24px 42px;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		gap:38px;
		background:#302a25;
		border-radius:0;
		box-shadow:none;
		opacity:0;
		visibility:hidden;
		transform:none;
		transition:opacity .25s,visibility .25s;
	}
	.header.open .nav{
		opacity:1;
		visibility:visible;
	}
	.nav{
		gap: 48px;
	}
	.nav a{
		padding:0;
		color:#fff;
		font-size:32px;
		font-weight:bold;
		line-height:1;
		text-decoration:none;
	}
	.nav a img {
		width: auto;
		height: 28px;
	}
	.header.open .menu-button{
		position:fixed;
	}
}
/* Three-part, content-responsive ticket frame. */ .ticket-panel{
	width:min(802px,100%);
	margin:16px auto;
	padding:0;
	border:0;
	outline:0;
	background:none;
	clip-path:none;
}
.ticket-frame-top,.ticket-frame-bottom{
	width:100%;
	background-repeat:no-repeat;
	background-position:center;
	background-size:100% 100%;
}
.ticket-frame-top{
	aspect-ratio:1604/114;
	background-image:url(../img/pc-flame-top.png);
}
.ticket-frame-middle{
	padding:16px 70px 20px;
	background:#fff url(../img/pc-flame-middle.png) center top/100% 10px repeat-y;
}
.ticket-frame-bottom{
	aspect-ratio:1604/114;
	background-image:url(../img/pc-flame-bottom.png);
}
@media(max-width:700px){
	.ticket-panel{
		width:100%;
		padding:0;
		margin: 8px auto 24px;
	}
	.date small {
		font-size: 12px;
	}
	.ticket-frame-top{
		aspect-ratio:720/65;
		background-image:url(../img/sp-flame-top.png);
	}
	.ticket-frame-middle{
		padding:0 24px;
		background-image:url(../img/sp-flame-middle.png);
	}
	.ticket-frame-bottom{
		aspect-ratio:720/65;
		background-image:url(../img/sp-flame-bottom.png);
	}
	.notice ul{
		margin-top: 16px;
	}
	.contact{
		margin-top: 32px;
	}
}
@media(prefers-reduced-motion:reduce){
	html{
		scroll-behavior:auto;
	}
	*{
		transition:none!important;
	}
}
@media(max-width:450px){
	.bg{
		background-position:center center;
		background-size:100%;
		background-repeat:no-repeat;
	}
	.bg-top{
		background-image:url(../img/sp-new-intro-bg.png);
	}
	.bg-cast{
		background-image:url(../img/sp-cast-bg.png);
	}
	.bg-ticket{
		background-image:url(../img/sp-ticket-bg.png);
	}
	.bg-bottom{
		background-image:url(../img/sp-access-goods-bg.png);
	}
}