@charset "utf-8";
body,div,main,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}
main{ display: block; }
body { overflow-x: hidden; color:#1a1418; font-size:16px;line-height: 160%; font-family:
	/* 欧文 */            "Helvetica Neue", "Helvetica", "Arial",
	/* 和文 Mac */        "Hiragino Sans", "Hiragino Kaku Gothic ProN",
	/* 和文 Win：UD書体 */ "BIZ UDPGothic",
	/* 和文 Win：游ゴシックは Regular が細くかすれるため Medium を優先 */
	                      "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック",
	                      "Meiryo", sans-serif;}
ul { list-style: none; }
fieldset,img { border: 0; vertical-align: top; overflow: hidden; }
a {color:#8a6a2f; text-decoration:none; transition: color 0.4s;  }
a:hover {color:#d64835;}
img{ max-width:100%; height:auto; }

.sp_none{ display: block; }
.pc_none{ display: none; }

.fw_title{font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;font-optical-sizing: auto;font-style: normal;}

.red_cl{ color:#c23a28; }
.gold_cl{ color:#a98b45; }
.white_cl{ color:#fff; }
.black_cl{ color: #1a1418; }

.fs14{ font-size:0.7em; line-height: 150%; }
.fs16{ font-size:0.8em; line-height: 160%; }
.fs18{ font-size:0.9em; line-height: 170%; }
.fs22{ font-size:1.1em; line-height: 175%; }
.fs24{ font-size:1.2em; line-height: 170%; }
.fs26{ font-size:1.3em; line-height: 170%; }
.fs28{ font-size:1.4em; line-height: 170%; }
.fs30{ font-size:1.5em; line-height: 160%; }
.fs32{ font-size:1.6em; line-height: 150%; }
.fs36{ font-size:1.8em; line-height: 140%; }
.fs40{ font-size:2em; line-height: 130%; }

.fws{ font-weight: 300; }
.fwb{ font-weight: 600; }

:root{
	--htmlfont:100px;
	--bg:#0a0308;
	--gold:#dccc94;
	--accent:#e83828;
	--red:#d64835;
	--paper:#fbf8f2;
	--panel:#251a26;   /* セクション見出し帯の背景（ページ背景と差をつける濃プラム） */

	/* --htmlfont はレイアウト専用（rem）。本文サイズは --fontbase で独立管理する。 */
	--fontbase:18px;
	--textscale:1;
}

/******************************************************************/
html{ font-size:var(--htmlfont); }
/* KV演出のための初期非表示は、JSが動く環境（html.js）でのみ適用する。
   JS無効・JSエラー時は .js が付かないため、素の状態でそのまま表示される。 */
html.js{ opacity: 0; transition: opacity 1s; visibility: hidden; }
html.js.pgshow{ opacity: 1; visibility: visible; }
/* JSなしでは機能しないUIは出さない */
html:not(.js) .textsize_bar{ display: none; }
body{font-size: calc(var(--fontbase) * var(--textscale)); line-height:155%; position: relative; background: var(--bg);}

.wrap{ position: relative; z-index: 10; }

/* ---------- 文字サイズ切替 ---------- */
/* このバーだけは px 固定（--textscale の影響を受けない） */
.textsize_bar{ position: fixed; top:0; left:0; right:0; padding-top:env(safe-area-inset-top, 0px); z-index: 20; background:rgba(18,8,15,.78); border-bottom:1px solid rgba(220,204,148,.18); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
@media screen{
    html.js .wrap{ padding-top:calc(55px + env(safe-area-inset-top, 0px)); }
    html.js .inner_mob[id]{ scroll-margin-top:calc(71px + env(safe-area-inset-top, 0px)); }
}
	.textsize{ max-width:1300px; margin:0 auto; padding:7px 4%; box-sizing:border-box; display:flex; align-items:center; justify-content:flex-end; gap:8px; font-size:14px; line-height:1.2; }
	.ts_label{ color:#efe9e0; letter-spacing:.08em; margin-right:4px; white-space:nowrap; }
	.ts_btn{ font-family:inherit; font-size:14px; line-height:1; color:var(--gold); background:transparent; border:1px solid rgba(220,204,148,.6); border-radius:2px; padding:0 14px; min-height:40px; min-width:64px; cursor:pointer; letter-spacing:.06em; transition:background .25s, color .25s; }
	.ts_btn:hover{ background:rgba(220,204,148,.18); }
	.ts_btn[aria-pressed="true"]{ background:var(--gold); color:#0a0308; font-weight:700; }
	.ts_btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ---------- key visual ---------- */
.event_hero{ width:min(1500px, 100%); margin:0 auto; position:relative; z-index:3; color:#fff; }
/* 写真・タイトル・公演情報を一枚のポスターとして配置する。 */
.top{ position:relative; aspect-ratio:1.55; isolation:isolate; overflow:hidden; }
.top_logo{ margin:0; }
.kv_stack{ position:absolute; inset:0; display:block; overflow:hidden; }
.kv_art{ position:absolute; left:6%; bottom:-16%; height:125%; width:auto; max-width:none; z-index:0; }
.kv_stack::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, transparent 82%, var(--bg) 100%); }
.kv_title{ position:absolute; right:9%; top:4%; height:88%; width:auto; max-width:none; z-index:2; }
.kv_portraits{ position:absolute; right:28%; bottom:41%; width:14%; height:auto; z-index:3; }
.top_info{ position:absolute; right:19.5%; bottom:10%; width:24%; z-index:3; }
.hero_event{ display:block; width:100%; height:auto; }
.top_nav{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; width:min(680px, 91%); margin:20px auto 0; }
.top_nav a{ flex:1 1 9em; display:flex; align-items:center; justify-content:center; gap:1em; min-height:48px; padding:.6em 16px; box-sizing:border-box; color:var(--gold); line-height:1.5; border:1px solid rgba(220,204,148,.4); }
.top_nav .top_nav_ticket{ background:var(--gold); color:var(--bg); border-color:var(--gold); font-weight:700; }
.top_nav a:hover{ background:#efe3bc; color:var(--bg); }
.top_nav a:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.nwr{ display:inline-block; }

/* ---------- main ---------- */
.main{ width: 1000px; max-width: 91%; margin-left: auto; margin-right: auto; position: relative; z-index: 2; padding-bottom: 0.6rem;}
	.inner_mob{position:relative; box-sizing: border-box; background: var(--paper); margin-top:6%;}
		/* セクション見出し帯は装飾要素のため文字サイズ変更の対象外（--textscale を掛けない） */
		.mob_title{text-align: center; padding: 1em; background: var(--panel); line-height: 0; font-size: var(--fontbase);}
			.tit_txjp{font-weight: 700; font-size: 2.3em; line-height: 1; color: var(--gold); display: inline-block; padding-bottom: 0.24em; letter-spacing: 0.12em; }
			.tit_txen{font-size:0.8em; color: var(--accent); display: inline-block; line-height: 1; letter-spacing: 0.26em;}
		.inner_cont{ padding: 2em; }
		.inner_mob[id]{ scroll-margin-top:16px; }
		/* 保険: 万一 id付きセクションに .anim が付いた場合もアニメを無効化する */
		.inner_mob:target{ transform:none; transition:none; }
			.txin_mobws{width: 600px; margin: 0 auto; max-width: 100%;}
			/* FAQなど長文セクション: 本文を一段小さく・行送りを広げ、1行46字程度で折り返す */
			.txin_mobws.txin_wide{width: 100%; max-width: 46em; line-height: 1.6;}
			/* 「・」項目は行送りではなく項目間の余白で区切る */
			.txin_wide .qline{ margin-bottom: 0.5em; }
			/* 「■」見出しと本文の間に余白を入れる */
			.txin_wide h4{ margin-bottom: 0.45em; }

	.lead_catch{ text-align:center; font-weight:700; line-height:1.8; font-feature-settings:"palt" 1; }
	.section_subtitle{ border-bottom:1px solid rgba(169,139,69,.45); padding-bottom:0.4em; margin-bottom:0.8em; }
	.notice{ font-size:0.9em; line-height:1.8; color:#c23a28; }
	/* 「※」項目は2行目以降を一字下げ（ぶら下げインデント） */
	.notice p{ padding-left:1em; text-indent:-1em; }
	/* ※(U+203B) は欧文フォント側の字形が拾われると半角幅になり、字下げ幅(1em)と揃わない。
	   先頭文字だけ和文フォントで描画して全角幅に固定する。 */
	.notice p::first-letter,
	.qline::first-letter{ font-family:"Hiragino Sans","BIZ UDPGothic","Yu Gothic Medium","Noto Sans JP",sans-serif; }
	.faq_hint{ color:#4a4148; font-size:0.9em; margin-bottom:1.2em; }
	.faq_item{ border-top:1px solid rgba(169,139,69,.45); }
	.faq_item:last-child{ border-bottom:1px solid rgba(169,139,69,.45); }
	.faq_item summary{ position:relative; list-style:none; padding:1em 2.6em 1em 1em; min-height:48px; box-sizing:border-box; font-weight:700; line-height:1.6; cursor:pointer; background:rgba(169,139,69,.07); transition:background-color .2s ease; }
	.faq_item summary::-webkit-details-marker{ display:none; }
	.faq_item summary::after{ content:""; position:absolute; right:1em; top:1.35em; width:0.45em; height:0.45em; border-right:2px solid #8a6a2f; border-bottom:2px solid #8a6a2f; transform:rotate(45deg); }
	.faq_item[open] summary::after{ transform:rotate(225deg); top:1.55em; }
	.faq_item[open] summary{ background:rgba(169,139,69,.14); }
	@media (hover:hover){
		.faq_item summary:hover{ background:rgba(169,139,69,.24); }
	}
	.faq_item summary:focus-visible{ background:rgba(169,139,69,.24); outline:2px solid #8a6a2f; outline-offset:3px; }
	.faq_answer{ padding:1em 1em 1.4em; line-height:1.8; overflow-wrap:anywhere; }
	.rule_gold{ border:0; border-top:1px solid rgba(169,139,69,.45); margin: 1.4em 0; }

	.member_grid{ display: flex; flex-wrap: wrap; justify-content: space-between; }
	.member_card{ width: 48%; margin-bottom: 1.4em; text-align: center; }
	.member_card img{ width: 100%; }
	.member_name{ font-weight: 700; padding-top: 0.5em; }
	.member_role{ color: #4a4148; line-height: 1.6; }
	.photo_credit{ display: block; text-align: right; font-size: 0.6em; line-height: 1.4; padding: 0.3em 0 1em; color:#6b626a; }

	/* 小見出し（.section_subtitle）の罫線と左端・幅を揃える */
	.prog_list{ margin: 0; max-width: none; }
	.prog_list li{ display:flex; align-items: baseline; padding: 0.5em 0; border-bottom: 1px dotted rgba(26,20,24,.25); }
	.prog_list li:last-child{ border-bottom: 0; }
	.prog_ttl{ flex-shrink: 0; width: 9.5em; font-weight: 700; }
	.prog_cast{ font-size: 0.9em; }
	.prog_break{ justify-content: center; color:#6b626a; font-size:0.9em; }

	.price_list li{ padding: 0.15em 0; }
	.price_seat{ display:inline-block; width: 5.6em; font-weight: 700; }

	.mline{ padding-left: 5em; text-indent: -5em; }
	/* 「時　間｜」等ラベル付き行: 折り返しを本文の頭に揃える */
	.iline{ padding-left: 4em; text-indent: -4em; }

	/* 別ウィンドウで開くリンクのアイコン */
	.ex_ico{ display:inline-block; width:0.78em; height:0.78em; margin-left:0.35em; vertical-align:-0.02em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
	.sr_only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
	.qline{ padding-left: 1em; text-indent: -1em; }

	/* 申込ボタン */
	.apply_list{ margin-top:0.2em; }
	.apply_list li{ display:flex; align-items:center; flex-wrap:wrap; gap:0 0.8em; }
	.apply_code{ color:#4a4148; white-space:nowrap; }
	/* FAQ内の小見出し（＜電子チケット＞など） */
	.faq_sub{ font-weight:700; margin:1.2em 0 0.4em; }
	/* 仮原稿の項目マーク（本原稿に差し替えたら span ごと削除する） */
	.faq_tmp{ color:#c23a28; font-size:0.85em; font-weight:400; margin-left:0.3em; }
	/* FAQ内のお問い合わせリンク */
	.faq_contacts li{ margin:0.4em 0; }
	.faq_contacts a{ text-decoration:underline; text-underline-offset:0.2em; }
	/* チケット欄の1行注意書き（.notice のぶら下げ指定を流用） */
	.price_note{ margin-top:0.4em; }

	.tbd_box{ border:1px solid rgba(169,139,69,.45); background:rgba(220,204,148,.14); padding:1em 1.2em; text-align:center; line-height:1.9; }

	.ban_lcf{ display: inline-flex; align-items:center; justify-content:center; min-height:44px; box-sizing:border-box; font-size: 1.2em; line-height: 110%; padding: 0.45em 1.4em; margin: 0.1rem 0; border: 0.02rem solid #a98b45; position: relative; color: #a98b45; overflow: hidden;}
		.ban_lcf::before{content: ""; width:150%; height:500%; opacity: 0; border-radius:999px; background: #a98b45; position: absolute; transition: all .5s ease-Out; top:50%; left: 50%; transform: translate(-50%,-50%) scale(0, 0); z-index:0;}
		.ban_lcf span{position: relative; z-index: 5;}
		.ban_lcf:hover{ color: #fff;}
		.ban_lcf:hover::before{ transform: translate(-50%,-50%) scale(1, 1); opacity: 1;}

footer{ display: block; background: var(--bg); padding:2em 1em; color: #efe9e0; text-align: center; }
footer .ftcopy{ line-height:2; display: block;}

/* 原稿の販売日程。文字拡大時も横幅を固定しない。 */
/* 受付名 | 内容 の2カラム（SPでは縦積み） */
.ticket_schedule{ display:flex; margin-top:1.4em; padding-top:1.4em; }
.section_subtitle + .ticket_schedule{ margin-top:0; padding-top:0; border-top:0; }
	.ticket_instit{ flex:none; width:10em; box-sizing:border-box; padding-right:1.2em; text-align:center; border-right:1px solid rgba(169,139,69,.45); }
	.ticket_insc{ flex:1 1 auto; min-width:0; padding-left:1.6em; }
.ticket_schedule h5, .ticket_contacts h5{ font-size:1em; line-height:1.6; }
.ticket_guides{ margin:0.7em 0; line-height:1.8; }
.ticket_dates dt{ font-weight:700; margin-top:0.7em; }
.ticket_dates dd{ margin:0; overflow-wrap:anywhere; }
.ticket_contacts h5{ margin:1em 0 0.4em; }
/* 本文中のリンクは色だけに頼らず下線でも識別できるようにする（JIS X 8341-3 1.4.1） */
.iline a,
.ticket_contacts a{ text-decoration:underline; text-underline-offset:0.2em; }
.ticket_contacts li{ margin:0.4em 0; }


@media screen and (max-width:1100px) {
	/* レイアウト倍率に下限を設け、タブレット域での痩せすぎを防ぐ */
	:root{--htmlfont: clamp(72px, 9vw, 100px); --fontbase: clamp(17px, 1.8vw, 18px);}
}

@media screen and (max-width:768px) {
	:root{--htmlfont:13.02vw; --fontbase: clamp(16px, 4.2vw, 18px);}

	html{ width: 100%; overflow-x: hidden; }
	body{ overflow-x: hidden;}
	.sp_none{ display: none; }
	.pc_none{ display: block; }
	.inner_cont{ padding:2em 18px; }

	/* 見出しは1行に収める。狭い端末では vw 側が効いて自動で縮む */
	.tit_txjp{ font-size: min(2.3em, 8vw); }

	/* SPは枠いっぱいに使う（行送り・項目間の余白は共通指定） */
	.txin_mobws.txin_wide{ max-width: 100%; }

	.textsize{ justify-content:center; padding:7px 3%; gap:6px; font-size:13px; }
	.ts_label{ font-size:13px; margin-right:2px; }
	.ts_btn{ font-size:13px; min-width:0; padding:0 12px; }

	.member_card{ width: 48%; }
	.prog_list li{ display:block; }
	.prog_ttl{ width:auto; display:block; }
	.prog_cast{ display:block; padding-left: 1em; }

	.ticket_schedule{ display:block; }
	.ticket_instit{ width:auto; padding:0 0 0.5em; text-align:left; border-right:0; border-bottom:1px solid rgba(169,139,69,.45); margin-bottom:0.8em; }
	.ticket_insc{ padding-left:0; }
}


/* TB：縦長の構図へ。タイトルを右上、公演情報を右下に置く。 */
@media screen and (min-width:541px) and (max-width:1000px){
    .event_hero{ max-width:800px; }
    .top{ aspect-ratio:0.8; }
    .kv_art{ left:-9%; height:114%; bottom:-14%; }
    .kv_title{ right:5%; top:3%; height:64%; }
    .kv_portraits{ right:19%; bottom:35%; width:29%; }
    .top_info{ right:5%; bottom:5%; width:44%; }
}
/* SP：参考の縦長ポスターの比率と重なりを再現。 */
@media screen and (max-width:540px){
    .musician_separator{ display:none; }
    .musician_synth{ display:block; }
    .information_title{ font-size:min(1.3em, 5.8vw); line-height:1.5; }
    .price_list{ font-size:min(1em, 4vw); }
    .price_list li{ white-space:nowrap; }
    .price_seat{ width:3.3em; }
    #faq .faq_item{ font-size:.9em; }
    #faq .faq_answer{ padding:1em .5em 1.4em; line-height:1.75; }
    .top{ aspect-ratio:2 / 3; }
    .kv_art{ left:-15%; height:107%; bottom:-8%; }
    .kv_title{ right:5%; top:3%; height:57%; }
    .kv_portraits{ right:20%; bottom:32%; width:32%; }
    /* 元の右上位置を保ち、画像内の文章の左端をアー写に揃える。 */
    .top_info{ right:5%; top:70.505%; bottom:auto; width:49%; }
    .top_nav{ gap:8px; margin-top:16px; }
    .top_nav a{ font-size:.9em; }
}

/******************************************************************/
/* 印刷用（背景は印刷されない前提で、黒地＋金文字を紙向けに置き換える） */
@media print {
    .event_hero{ width:100%; }
    .top{ aspect-ratio:1.55; }
    .kv_art, .kv_title, .top_info{ opacity:1 !important; animation:none !important; }
    .hero_event{ filter:drop-shadow(0 0 1px #000); }

	html{ opacity:1 !important; visibility:visible !important; font-size:100px; }
	body{ background:#fff !important; color:#000; }
	body::after{ display:none !important; }
	.anim{ transform:none !important; transition:none !important; }

	/* 画面専用のUIは印刷しない */
	.textsize_bar, .top_nav, .faq_hint{ display:none !important; }

	/* 黒地前提のロゴ類を紙向けに調整 */
	.kv_title{ filter: brightness(0); }          /* 金文字のタイトルを黒に（透過は維持） */
	.kv_lovez{ display:none !important; }        /* 白抜き部分が飛ぶため非表示（会場名は下のテキストで表示） */

	/* 黒地のパーツを紙向けに反転 */
	.mob_title{ background:#fff !important; border-bottom:2px solid #000; }
	.tit_txjp{ color:#000 !important; }
	.tit_txen{ color:#555 !important; }
	.hero_event{ filter:brightness(0); }
	.toptitle, .kv_venue, .top_time, .top_ticket_status, .top_catch{ color:#000 !important; }
	footer{ background:#fff !important; color:#000 !important; }
	a{ color:#000 !important; text-decoration:underline; }

	/* FAQは全項目を開いた状態で印刷する（JSのbeforeprintと二重の担保） */
	.faq_item > .faq_answer{ display:block !important; }
	.faq_item summary::after{ display:none !important; }
	.faq_item summary{ padding-right:0; background:transparent !important; }
	.faq_item, .faq_answer, .member_card, .prog_list li{ break-inside:avoid; page-break-inside:avoid; }
	.inner_mob{ break-inside:auto; }
}

/* 高解像度写真の左右の黒背景をページ背景へなじませる。 */
.kv_art{ -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }