/* =========================================================================
   BARRET Official — main.css（モバイルファースト）
   コンセプト：商店街のダークブルーの建物と、1公演1枚のフライヤー。
   識別記号はフライヤーと同じ黒い角丸の日付バッジ。

   設計の基準幅：320 / 360 / 375 / 390 / 414（スマホ）、768（タブレット）、1024 / 1280（PC）
   - スマホでは横に並べる要素を2つまでにし、本文の幅を最低240px確保する
   - 日本語の見出しは文節で改行（word-break: auto-phrase）。対応しないブラウザは通常の改行
   - 出演者名・時刻・金額は途中で改行しない単位として扱う
   ========================================================================= */

:root {
	/* 白地の配色：本文は白、次のライブ・フッター・メニューは黒。ロゴの緑と黄色を差し色に少しだけ */
	--facade: #0a0a0a;      /* 黒い面（次のライブ・フッター） */
	--facade-2: #2b2b2b;    /* 黒の上の区切り */
	--facade-soft: #a3a39c; /* 黒の上の補足文字 */
	--shutter: #ffffff;     /* 背景 */
	--paper: #f3f3f0;       /* 一段沈んだ面（交互のセクション） */
	--ink: #161616;         /* 本文 */
	--ink-soft: #5c5c57;    /* 補足 */
	--line: #dcdcd5;
	--green: #16a000;       /* ロゴの緑（ボタンなどの面） */
	--green-dark: #0e7400;  /* 白の上で読める緑（文字・リンク用） */
	--yellow: #f2d900;      /* ロゴの黄（黒の上・面だけに使う） */
	--black: #000;
	--red: #c8362b;

	--font-display: "Anton", "Arial Narrow", "Helvetica Neue", Impact, "kozuka-gothic-pr6n", "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Zen Kaku Gothic New", sans-serif;   /* 英字は Anton。中に日本語（曜日など）が混ざったときは本文と同じ小塚ゴシック */
	--font-body: "kozuka-gothic-pr6n", "Kozuka Gothic Pr6N", "小塚ゴシック Pr6N", "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;   /* 本文：小塚ゴシック Pr6N（Adobe Fonts。読み込めないときは Zen Kaku Gothic New） */

	--wrap: 1120px;
	--narrow: 760px;
	--gutter: 16px;
	--radius: 10px;
	--focus: 2px solid var(--green-dark);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;   /* 追従ヘッダーの下に見出しが隠れないように */
}

body {
	margin: 0;
	background: var(--shutter);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 500;   /* 本文は少し太め（小塚ゴシックの M。読み込めないときの Zen Kaku Gothic New も 500） */
	font-size: 1rem;
	line-height: 1.75;
	letter-spacing: 0.02em;
	overflow-wrap: break-word;   /* 単語の途中では改行しない（長すぎるURLなどだけ折る） */
	line-break: strict;          /* 行頭に「、」「ー」などを置かない */
	-webkit-font-smoothing: antialiased;
}

img,
svg,
iframe { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--green-dark); text-underline-offset: 0.2em; }
a:hover { color: var(--ink); }

:focus-visible { outline: var(--focus); outline-offset: 2px; }

h1, h2, h3, h4 {
	line-height: 1.4;
	margin: 0 0 0.6em;
	font-weight: 700;
	word-break: auto-phrase;     /* 日本語を文節で改行（対応ブラウザ） */
	text-wrap: balance;
}
p { margin: 0 0 1em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed !important;
	top: 8px; left: 8px;
	width: auto; height: auto;
	clip: auto;
	z-index: 1000;
	padding: 12px 16px;
	background: var(--yellow);
	color: var(--black);
	font-weight: 700;
}

.container {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--narrow) + var(--gutter) * 2); }

.section { padding-block: 48px; }
.section--tight { padding-block: 32px; }
@media (min-width: 768px) {
	.section { padding-block: 80px; }
	.section--tight { padding-block: 48px; }
}

.icon { width: 22px; height: 22px; fill: currentColor; flex: none; }

/* ---------- ローディング（ロゴを描く） ---------- */
.loader { display: none; }
.is-loading body { overflow: hidden; }
.is-loading .loader {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	background: var(--paper);
	transition: opacity 0.5s ease, visibility 0.5s;
}
.is-loaded .loader { opacity: 0; visibility: hidden; }
.loader__logo { width: min(72vw, 420px); height: auto; overflow: visible; }
.is-loading .loader__lines path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: loader-draw 1.1s cubic-bezier(0.55, 0.1, 0.35, 1) forwards;
	animation-delay: calc(var(--i) * 18ms);
}
.is-loading .loader__fill { opacity: 0; animation: loader-fade 0.45s ease 1s forwards; }
.is-loading .loader__wipe { transform: scaleX(0); transform-origin: 0 0; animation: loader-wipe 0.6s cubic-bezier(0.6, 0, 0.2, 1) 1.15s forwards; }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-wipe { to { transform: scaleX(1); } }

/* ---------- header ---------- */
.site-header {
	background: var(--facade);
	color: #fff;
	position: sticky;              /* スクロールしても上に追従する */
	top: var(--header-top, 0px);
	z-index: 50;
}
.admin-bar .site-header { --header-top: 46px; }
@media (min-width: 783px) { .admin-bar .site-header { --header-top: 32px; } }
@media (max-width: 600px) { .admin-bar .site-header { --header-top: 0px; } }   /* スマホの管理バーはスクロールで隠れるため */
.site-header.is-scrolled { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); }
.site-header__inner {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 10px var(--gutter);
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.site-logo { margin: 0; line-height: 1; min-width: 0; flex: 0 1 auto; }
.site-logo a {
	display: inline-block;
	max-width: 100%;
	color: #fff;
	text-decoration: none;
}
.site-logo__img { width: 104px; height: auto; }   /* 背景を透過したロゴを、外観の濃紺に直接のせる */
.site-logo__text {
	display: block;
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sns a {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	color: inherit;
	border-radius: 50%;
}
.sns a:hover { background: var(--facade-2); color: var(--yellow); }
.sns--header { display: none; }

.menu-toggle {
	margin-left: auto;
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-right: -10px;   /* 囲いがないので、アイコンの右端を余白の線にそろえる */
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.menu-toggle__close { display: none; }

.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.menu-toggle .icon { width: 30px; height: 30px; }

/* スマホのメニュー：ヘッダーの下に開く。2列で、1画面に収まる */
.global-nav { width: 100%; display: none; }
.global-nav.is-open {
	display: block;
	max-height: calc(100vh - 80px);   /* 開いたメニューが画面からはみ出す場合は中でスクロール */
	max-height: calc(100dvh - 80px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.global-nav__list {
	list-style: none;
	margin: 4px 0 6px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: 1px solid var(--facade-2);
}
.global-nav__list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 60px;
	padding: 8px 4px;
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--facade-2);
	line-height: 1.3;
}
.global-nav__list a:hover,
.global-nav__list .current-menu-item > a { color: var(--yellow); }
.nav-en { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.05em; }
.nav-ja { font-size: 0.75rem; color: var(--facade-soft); }

@media (min-width: 1120px) {
	.site-header__inner { flex-wrap: nowrap; padding-block: 14px; gap: 16px; }
	.site-logo__img { width: 124px; }
	.site-logo__text { font-size: 1.5rem; }
	.menu-toggle { display: none; }
	.global-nav { display: block; width: auto; margin-left: auto; }
	.global-nav__list { display: flex; gap: 2px; margin: 0; border: 0; }
	.global-nav.is-open { max-height: none; overflow: visible; }
	.global-nav__list a {
		align-items: center;
		min-height: 0;
		padding: 6px 8px;
		border: 0;
		white-space: nowrap;
	}
	.nav-en { font-size: 1.0625rem; }
	.nav-ja { font-size: 0.6875rem; }
}
@media (min-width: 1120px) { .site-logo { flex: none; } }   /* ロゴは縮めない（メニューが増えてもロゴが消えないように） */
@media (min-width: 1440px) {
	/* 広い画面ではSNSも並べる。ロゴ＋SNS＋メニューが入るよう、ヘッダーだけ少し広く */
	.site-header__inner { max-width: calc(1320px + var(--gutter) * 2); }
	.sns--header { display: flex; flex: none; flex-wrap: nowrap; }
}

/* ---------- メインビュー（スライド） ----------
   切り替え：次の写真が斜めのワイプで現れ（1.2s）、写真はゆっくり拡大し続ける（縮小はしない）。
   前の写真は左へ押し出されながら暗くなる。タイトルは1文字ずつせり上がる。 */
.hero { position: relative; background: var(--black); color: #fff; overflow: hidden; isolation: isolate; }
.hero__stage { position: relative; aspect-ratio: 1 / 1; max-width: 100%; touch-action: pan-y; }
@media (max-width: 599px) {
	.hero--portrait .hero__stage { aspect-ratio: 4 / 5; }   /* スマホ：縦長（既定） */
	.hero--portrait .hero__title { font-size: clamp(2.75rem, 13vw, 4rem); }
}
.hero__media picture { display: block; width: 100%; height: 100%; }
@media (max-width: 599px) {
	/* 「画面いっぱい」：ヘッダーを除いた画面の高さに合わせる（--header-h は main.js が実測） */
	.hero--full .hero__stage { aspect-ratio: auto; height: calc(100vh - var(--header-h, 68px)); height: calc(100svh - var(--header-h, 68px)); min-height: 420px; }
	.hero--full .hero__caption { bottom: 88px; }
	.hero--full .hero__title { font-size: clamp(3rem, 15vw, 4.5rem); }
	.hero--full .hero__ui { bottom: 24px; }
}
@media (min-width: 600px) { .hero__stage { aspect-ratio: 16 / 10; } }
@media (min-width: 1024px) { .hero__stage { aspect-ratio: auto; height: 100vh; height: 100svh; min-height: 560px; } }   /* PC も画面いっぱい（ヘッダーは写真の上に重なる） */
.hero__slide { position: absolute; inset: 0; margin: 0; z-index: 0; visibility: hidden; }
.hero__slide.is-active { z-index: 2; visibility: visible; }
.hero__slide.is-leaving { z-index: 1; visibility: visible; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform-origin: 50% 50%; will-change: transform; }
@media (max-width: 599px) {
	.hero__img { object-position: var(--pos-x, 50%) 45%; transform-origin: var(--pos-x, 50%) 50%; }   /* 横長写真を縦に切り抜くとき、見せる位置（左右）を写真ごとに指定 */
}
.hero__slide::after {   /* 文字を読みやすくするための下側の影 */
	content: "";
	position: absolute;
	inset: 40% 0 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
	pointer-events: none;
}

/* 入る写真：斜めワイプ */
.hero.js-on .hero__slide.is-active:not(.is-first) { animation: hero-wipe 1.25s cubic-bezier(0.77, 0, 0.18, 1) both; }
@keyframes hero-wipe {
	from { clip-path: polygon(112% 0, 112% 0, 100% 100%, 100% 100%); }
	to { clip-path: polygon(-12% 0, 112% 0, 100% 100%, 0% 100%); }
}
/* 写真：表示中はゆっくり拡大するだけ（縮小はしない）。
   表示中→退場中でも同じアニメーション名なので途切れず、写真が跳ねない。
   見えなくなってから初期状態に戻るので、戻る瞬間は見えない。 */
.hero.js-on .hero__slide.is-active .hero__img,
.hero.js-on .hero__slide.is-leaving .hero__img { animation: hero-drift 10s linear both; }
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.hero.js-on:not(.is-ready) .hero__slide.is-active .hero__img { animation-play-state: paused; }
.hero.is-held .hero__img,
.hero.is-paused .hero__img { animation-play-state: paused; }
/* 出る写真：左へ押し出されて暗くなる */
.hero.js-on .hero__slide.is-leaving .hero__media { animation: hero-push 1.25s cubic-bezier(0.77, 0, 0.18, 1) both; }
@keyframes hero-push { to { transform: translateX(-10%); filter: brightness(0.35); } }

/* キャプション */
.hero__caption {
	position: absolute;
	z-index: 3;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 72px;
	display: grid;
	gap: 6px;
	justify-items: start;
	max-width: var(--wrap);
	margin-inline: auto;
	pointer-events: none;
}
@media (min-width: 1184px) { .hero__caption { left: calc((100vw - var(--wrap)) / 2); } }
.hero__count { font-family: var(--font-display); font-size: 0.9375rem; letter-spacing: 0.12em; color: var(--yellow); }
.hero__count span { color: rgba(255, 255, 255, 0.55); margin-left: 4px; }
.hero__title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 11vw, 6.5rem);
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}
.hero__ch { display: inline-block; overflow: hidden; vertical-align: top; padding-block: 0.06em; margin-block: -0.06em; }
.hero__ch > span { display: inline-block; }
.hero__sp { display: inline-block; width: 0.28em; }
.hero__sub { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.85); }
@media (min-width: 768px) {
	.hero__caption { bottom: 96px; gap: 10px; }
	.hero__count { font-size: 1.0625rem; }
	.hero__sub { font-size: 1rem; }
}

.hero.js-on .hero__ch > span { transform: translateY(110%) rotate(8deg); }
.hero.js-on .hero__count,
.hero.js-on .hero__sub { opacity: 0; transform: translateY(14px); }
.hero.is-ready .hero__slide.is-active .hero__ch > span {
	animation: hero-letter 0.95s cubic-bezier(0.2, 0.85, 0.2, 1) both;
	animation-delay: calc(0.55s + var(--d) * 38ms);
}
.hero.is-ready .hero__slide.is-active .hero__count { animation: hero-fadeup 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.45s both; }
.hero.is-ready .hero__slide.is-active .hero__sub { animation: hero-fadeup 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 1s both; }
.hero.is-ready .hero__slide.is-active.is-first .hero__ch > span { animation-delay: calc(0.15s + var(--d) * 38ms); }
.hero.is-ready .hero__slide.is-active.is-first .hero__count { animation-delay: 0.05s; }
.hero.is-ready .hero__slide.is-active.is-first .hero__sub { animation-delay: 0.6s; }
.hero.is-ready .hero__slide.is-leaving .hero__ch > span { animation: hero-letter-out 0.5s cubic-bezier(0.7, 0, 0.84, 0) both; animation-delay: calc(var(--d) * 18ms); }
.hero.is-ready .hero__slide.is-leaving .hero__count,
.hero.is-ready .hero__slide.is-leaving .hero__sub { animation: hero-fadeout 0.35s ease both; }
@keyframes hero-letter { from { transform: translateY(110%) rotate(8deg); } to { transform: none; } }
@keyframes hero-letter-out { from { transform: none; } to { transform: translateY(-110%) rotate(-6deg); } }
@keyframes hero-fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hero-fadeout { to { opacity: 0; transform: translateY(-8px); } }

/* 進行バーと一時停止 */
.hero__ui {
	position: absolute;
	z-index: 4;
	left: var(--gutter);
	right: var(--gutter);
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--wrap);
	margin-inline: auto;
}
@media (min-width: 1184px) { .hero__ui { left: calc((100vw - var(--wrap)) / 2); right: calc((100vw - var(--wrap)) / 2); } }
@media (min-width: 768px) { .hero__ui { bottom: 32px; } }
.hero__bars { flex: 1; display: flex; gap: 10px; min-width: 0; }
.hero__bar {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 8px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.6);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.hero__bar-label {
	font-family: var(--font-display);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.3s;
}
.hero__bar.is-active .hero__bar-label,
.hero__bar:hover .hero__bar-label { color: #fff; }
.hero__bar-track { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; border-radius: 2px; }
.hero__bar-fill { position: absolute; inset: 0; background: var(--yellow); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.hero__bar:not(.is-active):not(.is-done) .hero__bar-fill { transform: scaleX(0); }
.hero__bar.is-done .hero__bar-fill { transform: scaleX(1); background: rgba(255, 255, 255, 0.7); }
@media (max-width: 599px) { .hero__bar-label { display: none; } .hero__bar-track { height: 3px; } }


/* 動きを減らす設定：フェードのみ、文字は最初から表示 */
.hero.is-reduced .hero__slide.is-active:not(.is-first) { animation: hero-fade 0.45s ease both; }
.hero.is-reduced .hero__img,
.hero.is-reduced .hero__slide.is-leaving .hero__media { animation: none !important; transform: none; }
.hero.is-reduced .hero__ch > span,
.hero.is-reduced .hero__count,
.hero.is-reduced .hero__sub { animation: none !important; transform: none; opacity: 1; }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- ABOUT の抜粋（トップ・白背景） ---------- */
.about-intro { background: var(--paper); }
.about-intro__grid { display: grid; gap: 4px 48px; }
.about-intro__body { display: grid; gap: 16px; justify-items: start; max-width: 40em; }
.about-intro__body > * { margin: 0; }
.about-intro__catch {
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.08em;
	word-break: auto-phrase;
}
.about-intro__text { color: var(--ink-soft); line-height: 1.9; }
@media (min-width: 900px) {
	.about-intro__grid { grid-template-columns: 280px minmax(0, 1fr); align-items: start; }
	.about-intro__catch { font-size: 2.25rem; }
}

/* ---------- トップの看板（ロゴ。メインビュー写真が未設定のとき） ---------- */
.signboard { background: var(--paper); border-bottom: 1px solid var(--line); }
.signboard__inner { display: grid; justify-items: center; text-align: center; gap: 10px; padding-block: 28px 24px; }
.signboard__logo { width: min(100%, 560px); height: auto; }
.signboard__name { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; margin: 0; color: var(--green); }
.signboard__tagline { margin: 6px 0 0; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.12em; }
.signboard__place { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
@media (min-width: 768px) {
	.signboard__inner { padding-block: 48px 40px; }
	.signboard__tagline { font-size: 1.375rem; }
}

/* ---------- 白いヘッダー（カスタマイザーで選択。既定） ---------- */
.site-header--light { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.site-header--light .site-logo a { color: var(--ink); }
.site-header--light .sns a:hover { background: var(--shutter); color: var(--green-dark); }
.site-header--light .menu-toggle { color: var(--ink); }
.site-header--light .global-nav__list { border-top-color: var(--line); }
.site-header--light .global-nav__list a { color: var(--ink); border-bottom-color: var(--line); }
.site-header--light .global-nav__list a:hover,
.site-header--light .global-nav__list .current-menu-item > a { color: var(--green-dark); }
.site-header--light .nav-ja { color: var(--ink-soft); }

/* ---------- トップ：ヘッダーをメインビューの上に重ねる ----------
   写真の上では背景なし・ロゴとメニューは白。写真を過ぎるかメニューを開くと、通常の白いヘッダーに戻る。 */
.site-header--overlay {
	position: fixed;
	left: 0;
	right: 0;
	top: var(--header-top, 0px);
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.site-header--overlay:not(.is-solid) {
	background: transparent;
	color: #fff;
	border-bottom-color: transparent;
	box-shadow: none;
}
.site-header--overlay:not(.is-solid)::before {   /* 写真が明るくてもロゴとメニューが読めるよう、上だけ薄く暗くする */
	content: "";
	position: absolute;
	inset: 0 0 -56px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 60%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	z-index: -1;
}
.site-header--overlay:not(.is-solid) .menu-toggle,
.site-header--overlay:not(.is-solid) .site-logo a,
.site-header--overlay:not(.is-solid) .global-nav__list a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.site-header--overlay:not(.is-solid) .menu-toggle { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.site-header--overlay:not(.is-solid) .nav-ja { color: rgba(255, 255, 255, 0.75); }
.site-header--overlay:not(.is-solid) .site-logo__img { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); }
.site-header--overlay:not(.is-solid) .global-nav__list a:hover { color: var(--yellow); }
.site-header--overlay.is-solid { box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.35); }
/* 重ねている間、写真はヘッダーの裏から始まる。画面いっぱいはヘッダー分を引かない */
@media (max-width: 599px) {
	.has-overlay-header .hero--full .hero__stage { height: 100vh; height: 100svh; }
}

/* ---------- section titles ---------- */
.section-title,
.page-title { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; text-wrap: initial; }
.section-title__en,
.page-title__en {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 2.125rem;
	line-height: 1;
	letter-spacing: 0.03em;
}
.section-title__ja,
.page-title__ja { font-size: 0.8125rem; color: var(--ink-soft); font-weight: 700; }
.section-title--on-dark .section-title__ja { color: var(--facade-soft); }
.page-title__plain { font-size: 1.5rem; }
@media (min-width: 768px) {
	.section-title,
	.page-title { margin-bottom: 28px; }
	.section-title__en,
	.page-title__en { font-size: 2.75rem; }
	.page-title__plain { font-size: 2rem; }
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px 16px;
	margin-bottom: 20px;
}
.section-head .section-title { margin-bottom: 0; min-width: 0; }
.section-head .view-more { flex: none; }
.section-foot { display: flex; justify-content: flex-end; margin-top: 28px; }   /* View More は各セクションの右下 */
@media (min-width: 768px) { .section-foot { margin-top: 40px; } }
@media (min-width: 768px) { .section-head { margin-bottom: 28px; } }

.text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	color: var(--green-dark);
}

.empty { color: var(--ink-soft); padding-block: 24px; margin: 0; }
.empty--on-dark { color: var(--facade-soft); }

/* ---------- buttons ----------
   2つの大きさだけを使う。
   L（高さ52）：そのページの主な行動 … チケットを予約する／送信／View More
   S（高さ44）：一覧の中の行動 … 予約する／View Detail／Spotifyで聴く／スライドの矢印
   形はすべて角丸の帯、文字は本文と同じ書体の太字にそろえる。 */
.btn,
.view-more,
.view-detail {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn .icon,
.view-more .icon,
.view-detail .icon { width: 18px; height: 18px; flex: none; }
.view-more .icon,
.view-detail .icon { margin-right: -6px; transition: transform 0.2s; }
.view-more:hover .icon,
.view-detail:hover .icon { transform: translateX(3px); }

.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--ticket { background: var(--yellow); color: var(--black); }
.btn--ticket:hover { background: #fff; color: var(--black); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--block { width: 100%; }

/* View More：一覧ページへ（L・黒） */
.view-more { position: relative; min-width: 168px; background: var(--ink); border-color: var(--ink); color: #fff; }
.view-more:hover { background: var(--green); border-color: var(--green); color: #fff; }

/* S サイズ */
.btn--small,
.view-detail,
.btn--spotify { min-height: 44px; padding: 0 20px; font-size: 0.875rem; min-width: 120px; }
.btn--small { background: var(--green); color: #fff; }
.btn--small:hover { background: var(--green-dark); color: #fff; }
.view-detail { position: relative; border-color: var(--ink); color: var(--ink); background: transparent; }
.view-detail:hover { background: var(--ink); color: #fff; }
.btn--spotify { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--spotify:hover { background: var(--ink); color: #fff; }
.btn--spotify .icon { color: #1db954; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- date badge（識別記号） ---------- */
.date-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 62px;
	border-radius: 12px;
	background: var(--black);
	color: #fff;
	line-height: 1;
	flex: none;
}
.date-badge__day { font-family: var(--font-display); font-size: 1.875rem; letter-spacing: 0.02em; }
.date-badge__wd { font-size: 0.75rem; font-weight: 700; margin-top: 3px; letter-spacing: 0.08em; }
.date-badge--lg { width: 72px; height: 78px; border-radius: 14px; }
.date-badge--lg .date-badge__day { font-size: 2.375rem; }
.date-badge--lg .date-badge__wd { font-size: 0.8125rem; }
@media (min-width: 768px) {
	.date-badge--lg { width: 84px; height: 92px; border-radius: 16px; }
	.date-badge--lg .date-badge__day { font-size: 2.75rem; }
	.date-badge--lg .date-badge__wd { font-size: 0.875rem; }
}

/* ---------- status labels ---------- */
.status {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
}
.status--soldout,
.status--cancelled { background: var(--red); color: #fff; }
.status--few { background: var(--yellow); color: var(--black); }
.status--postponed { background: var(--ink-soft); color: #fff; }
.status--past { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.status--today { background: var(--green); color: #fff; }

/* ---------- key/value（OPEN 17:00 など。途中で改行しない） ---------- */
.kv { white-space: nowrap; }
.kv__k { font-size: 0.6875rem; font-weight: 700; color: var(--ink-soft); letter-spacing: 0.06em; margin-right: 3px; }
.kv--note { white-space: normal; color: var(--ink-soft); }

/* ---------- 出演者（名前の途中で改行しない） ---------- */
.acts { list-style: none; margin: 0; padding: 0; }
.acts li { display: inline-block; max-width: 100%; }
.acts li:not(:last-child)::after { content: "/"; margin-inline: 0.45em; color: var(--ink-soft); font-weight: 400; }
.acts--lg li { font-size: 1.0625rem; font-weight: 700; }
@media (min-width: 768px) { .acts--lg li { font-size: 1.1875rem; } }

/* ---------- NEXT LIVE ---------- */
.next-live {
	background: var(--facade);
	color: #fff;
	padding-block: 32px 48px;
}
@media (min-width: 768px) { .next-live { padding-block: 56px 80px; } }
.next-live a { color: #fff; }
.next-live .kv__k,
.next-live .kv--note,
.next-live .acts li::after { color: var(--facade-soft); }
.next-live .live-detail__date { margin-bottom: 6px; }
.next-live .live-detail__ymd { font-size: 1.625rem; letter-spacing: 0.04em; color: var(--yellow); }   /* 差し色は日付の文字だけに */
@media (min-width: 768px) { .next-live .live-detail__ymd { font-size: 2.125rem; } }
.next-live .text-link { color: var(--yellow); }

/* ---------- live detail（次のライブ・公演ページ） ---------- */
.live-detail { display: grid; gap: 24px; align-items: start; }
.live-detail__info { min-width: 0; }
.live-detail__flyer { margin: 0; width: min(100%, 320px); justify-self: center; order: 2; }
.live-detail__flyer img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.live-detail__date { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.live-detail__ymd { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.06em; white-space: nowrap; }
.live-detail__title { font-size: 1.375rem; margin-bottom: 12px; }
.live-detail__title a { text-decoration: none; }
.live-detail__title a:hover { text-decoration: underline; }
.live-detail__status { margin-bottom: 12px; display: flex; gap: 6px; }
.live-detail__acts { margin-bottom: 16px; }
.live-detail__acts .label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 2px; opacity: 0.8; }
.live-detail__meta { margin: 0 0 20px; display: grid; gap: 4px; }
.live-detail__meta div { display: block; }   /* 「時間」「料金」の見出しは読み上げ用だけ（OPEN／前売 などで分かるため） */
.live-detail__meta dt { font-size: 0.8125rem; font-weight: 700; opacity: 0.8; }
.live-detail__meta dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 14px; min-width: 0; }
.live-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.live-detail__actions .btn--ticket { flex: 1 1 100%; max-width: 400px; }
/* スマホ：情報 → フライヤー → 紹介文 ／ PC：左にフライヤー、右に情報と紹介文 */
.live-detail__content { order: 3; min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }

@media (min-width: 768px) {
	.live-detail { grid-template-columns: 280px minmax(0, 1fr); gap: 0 40px; }
	.live-detail__flyer { order: 0; width: 100%; position: sticky; top: 112px; grid-column: 1; grid-row: 1 / span 2; }
	.live-detail__info { grid-column: 2; grid-row: 1; }
	.live-detail__content { grid-column: 2; grid-row: 2; margin-top: 28px; }
	.live-detail--no-flyer .live-detail__info,
	.live-detail--no-flyer .live-detail__content { grid-column: 1; }
	.live-detail__title { font-size: 1.75rem; }
	.live-detail__ymd { font-size: 1.25rem; }
	.live-detail__actions .btn--ticket { flex: 0 0 auto; }
}
@media (min-width: 1024px) {
	.live-detail { grid-template-columns: 340px minmax(0, 1fr); gap: 0 56px; }
	.live-detail__title { font-size: 2rem; }
}
.live-detail--no-flyer { grid-template-columns: minmax(0, 1fr); max-width: var(--narrow); }

/* トップの「次のライブ」：予約ボタンはフライヤーの真下（スマホ：情報 → フライヤー → ボタン） */
.live-detail__actions--below { order: 3; width: min(100%, 320px); justify-self: center; margin-top: 0; display: flex; justify-content: center; }
/* スマホ：View Detail がフライヤーと黒い面の下端のちょうど真ん中に来るよう、上下の余白をそろえる（上は行間の24px） */
@media (max-width: 767px) { .next-live { padding-bottom: 24px; } }
@media (min-width: 768px) {
	/* PC：TICKET は前売・当日の料金のすぐ下（右の列）。フライヤーは左の列に2段ぶん */
	.live-detail--compact { grid-template-rows: auto 1fr; }
	.live-detail--compact .live-detail__flyer { position: static; grid-row: 1 / span 2; }
	.live-detail--compact .live-detail__info { grid-row: 1; }
	.live-detail--compact .live-detail__meta { margin-bottom: 4px; }
	/* PC：レビュー → 線 → TICKET の順（レビューがないときは料金の下に線を引いて TICKET） */
	.live-detail__actions--below { grid-column: 2; grid-row: 3; align-self: start; justify-self: stretch; justify-content: flex-start; width: auto; max-width: 46em; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--facade-2); }
	.live-detail--compact { grid-template-rows: auto auto 1fr; }
	.live-detail--compact:not(:has(.live-detail__review)) { grid-template-rows: auto 1fr; }
	.live-detail--compact:not(:has(.live-detail__review)) .live-detail__actions--below { grid-row: 2; }
	/* 公演ページと同じく、フライヤーは左に止まったまま、右の情報とレビューだけが流れる */
	.live-detail--compact .live-detail__flyer { grid-row: 1 / span 3; position: sticky; top: calc(var(--header-h, 72px) + 24px); align-self: start; }
	.live-detail--compact .live-detail__review { grid-column: 2; grid-row: 2; align-self: start; display: block; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--facade-2); max-width: 46em; color: #e4e3dd; font-size: 0.9375rem; line-height: 2; }
	.live-detail--no-flyer .live-detail__review,
	.live-detail--no-flyer .live-detail__actions--below { grid-column: 1; grid-row: auto; }
	.live-detail__review p { margin: 0 0 1em; }
	.live-detail__review p:last-child { margin-bottom: 0; }
	.live-detail--no-flyer .live-detail__actions--below { grid-column: 1; grid-row: auto; }

}

/* 「次のライブ」の表示時だけ、フライヤーがそっと出る（唯一の自動アニメーション） */
@media (prefers-reduced-motion: no-preference) {
	.next-live .live-detail__flyer img { animation: flyer-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
	@keyframes flyer-in {
		from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); }
		to { opacity: 1; transform: none; }
	}
}

/* ---------- live list（一覧の行）----------
   左の細い列：日付バッジ＋フライヤー上部（タイトル帯）
   右：状態、タイトル、出演、時間・料金、予約ボタン */
.live-list { border-top: 2px solid var(--ink); }
.live-row {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	gap: 14px;
	padding-block: 18px;
	border-bottom: 1px solid var(--line);
}
.live-row__media { display: grid; gap: 8px; align-content: start; }
.live-row__flyer { display: block; border-radius: 4px; overflow: hidden; background: var(--line); }
.live-row__flyer img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
/* 正方形・横長のフライヤーは切らずに見せる（正方形はそのまま、横長は正方形の枠に収めて上下に余白） */
.live-row__flyer--square img { aspect-ratio: 1 / 1; object-position: center; }
.live-row__flyer--wide { background: var(--ink); }
.live-row__flyer--wide img { aspect-ratio: 1 / 1; object-fit: contain; }
.live-row__body { min-width: 0; display: grid; gap: 6px; align-content: start; justify-items: start; }
.live-row__body > * { margin: 0; }
.live-row__flags { display: flex; flex-wrap: wrap; gap: 6px; }
.live-row__title { font-size: 1.0625rem; line-height: 1.45; text-wrap: pretty; }
.live-row__title a { color: var(--ink); text-decoration: none; }
.live-row__title a:hover { text-decoration: underline; color: var(--green-dark); }
.live-row .acts { font-size: 0.9375rem; line-height: 1.6; }
.live-row__meta { font-size: 0.875rem; line-height: 1.6; }
.live-row__meta p { margin: 0; display: flex; flex-wrap: wrap; gap: 0 12px; }
.live-row__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.live-row.is-past .view-detail { color: var(--ink-soft); border-color: var(--line); }
.live-row.is-past { opacity: 0.62; }
.live-row.is-past .date-badge { background: var(--ink-soft); }
.live-row.is-cancelled .live-row__title a { text-decoration: line-through; }
.live-row.is-today .date-badge { background: var(--green); }

@media (min-width: 768px) {
	.live-row { grid-template-columns: 76px minmax(0, 1fr); gap: 24px; padding-block: 24px; }
	.live-row .date-badge { width: 76px; height: 76px; }
	.live-row .date-badge__day { font-size: 2.25rem; }
	.live-row__title { font-size: 1.25rem; }
	.live-row .acts { font-size: 1rem; }
}

/* ---------- schedule page ---------- */
.page-header {
	background: var(--paper);
	padding-block: 28px 20px;
	border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .page-header { padding-block: 48px 28px; } }
.page-header .page-title { margin-bottom: 8px; }

.month-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.month-nav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	padding-inline: 4px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.month-nav__next { justify-self: end; }
.month-nav__current {
	margin: 0;
	font-family: var(--font-display);
	font-size: 3.25rem;
	line-height: 1;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}
.page-header--schedule > .container > .month-nav__current { text-align: left; }
.month-nav__y { font-size: 0.42em; vertical-align: 0.95em; margin-right: 0.1em; }
@media (min-width: 768px) { .month-nav__current { font-size: 5rem; } }

.month-jump,
.year-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; align-items: center; }
.month-jump a,
.year-nav a {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 40px;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink);
	font-size: 0.875rem;
	font-weight: 700;
	background: var(--shutter);
}
.month-jump a:hover,
.year-nav a:hover,
.year-nav a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.year-nav__label { font-size: 0.75rem; color: var(--ink-soft); font-weight: 700; margin-right: 4px; }

.month-heading {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.75rem;
	letter-spacing: 0.03em;
	margin: 40px 0 8px;
	scroll-margin-top: 16px;
}
.month-heading:first-child { margin-top: 0; }
.month-heading a { color: var(--ink); text-decoration: none; }

/* ---------- single live ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 4px 8px; padding-block: 12px; font-size: 0.8125rem; color: var(--ink-soft); }
.breadcrumb a { min-height: 32px; display: inline-flex; align-items: center; }
.live-single > .container:first-of-type { padding-bottom: 40px; }
.live-single .live-detail__flyer img { box-shadow: 0 18px 40px -22px rgba(22, 38, 63, 0.6); }

.reserve {
	background: var(--paper);
	padding-block: 40px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
@media (min-width: 768px) { .reserve { padding-block: 64px; } }
.reserve__note { color: var(--ink-soft); font-size: 0.9375rem; }
.reserve__closed {
	padding: 18px 20px;
	border-radius: var(--radius);
	background: var(--shutter);
	font-weight: 700;
}
/* 公演ページの予約：かたまり全体を細く（640px）して中央に置く。中の見出し・文・ボタン・フォームは左の線にそろえる */
.reserve .container { max-width: calc(640px + var(--gutter) * 2); }
.reserve .rsv-choice__btns { max-width: none; }
/* ほかのページも同じ幅（640px）にそろえる
 * - 固定ページ（STUDIO・TEENS・HALL RENTAL・CONTACT）：本文の列はもともと中央にあるので、ボタンとフォームを本文の列の幅いっぱいに（上の表や囲みと左右の端がそろう）
 * - 空転ラジオのお便り：かたまりを640pxにして中央に */
.entry-content .rsv-choice { max-width: none; }
.entry-content .rsv-choice__btns { max-width: none; }
.radio-form .container { max-width: calc(640px + var(--gutter) * 2); }
.live-single__foot { padding-block: 40px 64px; }
.live-single__back { margin: 0; display: flex; justify-content: center; }
@media (min-width: 768px) { .live-single__foot { padding-block: 56px 88px; } }

.share { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 700;
}
.share a:hover { border-color: var(--ink); }
.share .icon { width: 18px; height: 18px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 6px; min-width: 0; }
.form__label { font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.form__req,
.form__opt {
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 3px;
	line-height: 1.5;
	white-space: nowrap;
}
.form__req { background: var(--red); color: #fff; }
.form__opt { background: var(--shutter); color: var(--ink-soft); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1px solid #9aa39b;
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 1rem; /* iOS で拡大されない大きさ */
}
.form textarea { min-height: 160px; resize: vertical; }
.form select.form__qty { width: auto; min-width: 8em; }
.form input:focus,
.form select:focus,
.form textarea:focus { outline: var(--focus); outline-offset: 1px; border-color: var(--ink); }
.form .has-error input,
.form .has-error select,
.form .has-error textarea { border-color: var(--red); border-width: 2px; }
.form__help { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
.form__error { margin: 0; font-size: 0.875rem; font-weight: 700; color: var(--red); }
.form__error::before { content: "！ "; }
.form__consent-text { margin: 0; font-size: 0.875rem; color: var(--ink-soft); }
.form__check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; cursor: pointer; }
.form__check input { width: 22px; height: 22px; accent-color: var(--green); flex: none; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { margin: 8px 0 0; }

.form-errors {
	padding: 16px 18px;
	border: 2px solid var(--red);
	border-radius: var(--radius);
	background: #fff5f4;
}
.form-errors p { font-weight: 700; color: var(--red); margin-bottom: 6px; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-errors a { color: var(--red); }

.form-done {
	padding: 22px;
	border-radius: var(--radius);
	background: #eef7f1;
	border: 2px solid var(--green);
}
.form-done__title { font-weight: 700; font-size: 1.125rem; color: var(--green-dark); margin-bottom: 8px; }

/* ---------- 空転ラジオ（スライド） ---------- */
.radio { background: var(--paper); }
.radio__intro { display: grid; gap: 16px; justify-items: start; margin-bottom: 24px; }
.radio__lead { max-width: 46em; color: var(--ink-soft); font-size: 0.9375rem; margin: 0; }
.radio__lead--archive { margin-bottom: 24px; }
.radio-archive__foot { display: flex; justify-content: center; margin: 40px 0 0; }
@media (min-width: 900px) {
	.radio__intro { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; }
}
.radio-slider { --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); }
.radio-slider__track {
	list-style: none;
	margin: 0;
	padding: 4px var(--edge) 12px;
	display: flex;
	column-gap: 16px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.radio-slider__track::-webkit-scrollbar { display: none; }
.radio-slider__track { position: relative; }   /* カードの位置をトラック基準で測る */
.radio-slider__track .radio-card { flex: 0 0 min(68vw, 260px); scroll-snap-align: start; }
.radio-slider__track .radio-card:last-child { scroll-snap-align: end; }

.radio-slider__nav { display: flex; gap: 8px; flex: none; }
.is-static .radio-slider__nav { visibility: hidden; }
.slider-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--ink);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
}
.slider-btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.slider-btn:disabled { opacity: 0.3; cursor: default; }

.radio-card a { position: relative; display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.radio-card__img { display: block; border-radius: 10px; overflow: hidden; background: var(--line); aspect-ratio: 1 / 1; }
.radio-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.radio-card a:hover .radio-card__img img { transform: scale(1.03); }
.radio-card__meta { display: flex; align-items: baseline; gap: 10px; font-size: 0.8125rem; color: var(--ink-soft); }
.radio-card__no { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.04em; color: var(--ink); }
.radio-card__title { font-weight: 700; line-height: 1.5; word-break: auto-phrase; }
.radio-card a:hover .radio-card__title { color: var(--green-dark); text-decoration: underline; }

.radio-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
@media (min-width: 768px) { .radio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1024px) { .radio-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- news ---------- */
.news-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.news-list li { display: grid; gap: 2px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.news-list time { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--ink-soft); font-size: 0.875rem; }
.news-list a { color: var(--ink); font-weight: 700; text-decoration: none; }
.news-list a:hover { text-decoration: underline; color: var(--green-dark); }
@media (min-width: 600px) {
	.news-list li { grid-template-columns: 7em minmax(0, 1fr); gap: 12px; align-items: baseline; }
}

/* ---------- pickup ---------- */
.pickup { background: var(--paper); }
.pickup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 600px) { .pickup-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pickup-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pickup-card a {
	display: grid;
	align-content: start;   /* 説明文がないカードで画像の枠が伸びないように */
	gap: 10px;
	height: 100%;
	color: var(--ink);
	text-decoration: none;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--ink);
}
.pickup-card__img { display: block; border-radius: 6px; overflow: hidden; background: var(--line); }
.pickup-card__img img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; object-position: top; }
.pickup-card--banner .pickup-card__img img { aspect-ratio: 1920 / 845; object-fit: cover; object-position: center; }   /* トップ用の横長画像は、高さをそろえて並べる */   /* トップ用に用意した横長画像はそのまま見せる */
.pickup-card__title { font-weight: 700; font-size: 1.125rem; }
.pickup-card__text { font-size: 0.875rem; color: var(--ink-soft); }
.pickup-card a:hover .pickup-card__title { color: var(--green-dark); text-decoration: underline; }

/* ---------- access / info ---------- */
.access__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .access__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: start; } }
.info { margin: 0; display: grid; border-top: 1px solid var(--line); }
.info__row { display: grid; gap: 2px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.info dt { font-weight: 700; font-size: 0.8125rem; color: var(--ink-soft); }
.info dd { margin: 0; min-width: 0; }
@media (min-width: 600px) { .info__row { grid-template-columns: 6em minmax(0, 1fr); gap: 12px; } }
.map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); background: var(--line); }
.map-link { margin-top: 8px; font-size: 0.875rem; }

/* ---------- ABOUT ページの資料（フロアマップ・機材・駐車場） ---------- */
.doc-figure { margin: 1.4em 0; }
.doc-figure a { display: block; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.doc-figure img { width: 100%; border-radius: 0; }
/* リンクで包まない画像（押しても大きくしない）も、枠の見た目はそろえる */
.doc-figure > img { display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.doc-figure--poster > img { border: 0; background: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.45); }
.doc-figure--poster,
.entry-content .doc-figure--poster { max-width: 520px; margin: 0 auto 2em; }   /* 縦長のチラシはページの先頭に、幅を抑えて */
.doc-figure--poster a { border: 0; background: none; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.45); }
.doc-figure figcaption { margin-top: 8px; }
.notes { margin: 1em 0; padding: 16px 18px 16px 2.2em; background: var(--paper); border-radius: 8px; border: 1px solid var(--line); font-size: 0.9375rem; }
.notes li + li { margin-top: 6px; }
.note-small { font-size: 0.8125rem; color: var(--ink-soft); }
.gear-table th[scope="rowgroup"] { white-space: nowrap; font-family: var(--font-display); font-weight: 400; letter-spacing: 0.04em; }
.gear-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gear-table th[scope="row"] { vertical-align: top; white-space: nowrap; }
@media (max-width: 599px) {
	.entry-content .gear-table { font-size: 0.8125rem; }
	.entry-content .gear-table th,
	.entry-content .gear-table td { padding: 7px 8px; }
}
.gear-table caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 6px; }
.entry-content h3.gear-heading { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; letter-spacing: 0.05em; margin-bottom: 0.4em; }

/* ---------- page content ---------- */
.page-visual { margin: 0 0 28px; }
.page-visual img { width: 100%; border-radius: var(--radius); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2 {
	font-size: 1.25rem;
	margin-top: 2em;
	padding-left: 12px;
	border-left: 6px solid var(--green);
}
.entry-content h3 { font-size: 1.0625rem; margin-top: 1.6em; }
.entry-content img { border-radius: 6px; }
.entry-content figure { margin: 1.6em 0; }
.entry-content figcaption { font-size: 0.8125rem; color: var(--ink-soft); margin-top: 6px; }
.entry-content .wp-block-table,
.entry-content .table-scroll { overflow-x: auto; margin: 1.5em 0; }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.entry-content th,
.entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.entry-content th { background: var(--paper); }
.entry-content td.price,
.entry-content .price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.entry-content iframe { width: 100%; border: 0; }
.entry-content .wp-block-embed__wrapper iframe,
.entry-content iframe[src*="youtube"] { aspect-ratio: 16 / 9; height: auto; }
.form-launch { margin: 24px 0; }

.post-header { margin-bottom: 24px; }
.post-header__date { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--ink-soft); }
.post-header__title { font-size: 1.5rem; margin-top: 4px; }
@media (min-width: 768px) { .post-header__title { font-size: 2rem; } }
.post-back { margin-top: 40px; }

.navigation.pagination { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-links .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--ink);
	background: var(--paper);
}
.nav-links .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { background: var(--facade); color: #dfe5ee; font-size: 0.9375rem; }
.site-footer a { color: #fff; }
.site-footer__inner {
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 40px var(--gutter) 16px;
	display: grid;
	gap: 28px;
}
@media (min-width: 900px) { .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-top: 56px; } }
.site-footer__name { font-family: var(--font-display); font-size: 1.625rem; color: #fff; letter-spacing: 0.04em; margin-bottom: 8px; line-height: 1.1; }
.site-footer address { font-style: normal; margin-bottom: 12px; }
.sns--footer { margin-left: -10px; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: 0.06em; }
.footer-nav a:hover { color: var(--yellow); }
.site-footer__copy { margin: 0; padding: 16px var(--gutter) 24px; text-align: center; border-top: 1px solid var(--facade-2); color: #9fb0c8; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media print {
	.site-header, .site-footer, .share, .reserve, .breadcrumb { display: none; }
	body { background: #fff; color: #000; }
}

/* ---------- トップ：ACCESS 前のバナー（募集チラシなど） ---------- */
.top-banner { background: var(--facade); }
.top-banner__inner { max-width: calc(520px + var(--gutter) * 2); }
.top-banner__link { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 22px 44px -24px rgba(0, 0, 0, 0.7); transition: transform 0.25s ease; }
.top-banner__link:hover { transform: translateY(-3px); }
.top-banner__img { display: block; width: 100%; height: auto; }
.top-banner .section-foot { margin-top: 20px; }
.top-banner .view-more { background: #fff; border-color: #fff; color: var(--ink); }
.top-banner .view-more:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .top-banner__link { transition: none; } .top-banner__link:hover { transform: none; } }

/* ---------- ギャラリー「スライドショー」（ABOUT のライブ写真） ----------
   JS なしでも横スワイプで見られる。JS があれば矢印・点・自動送り */
.slideshow { position: relative; margin: 1.8em 0; }
.entry-content .wp-block-gallery.is-style-barret-slideshow,
.wp-block-gallery.is-style-barret-slideshow {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 0 !important;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: 8px;
	background: var(--facade);
}
.wp-block-gallery.is-style-barret-slideshow::-webkit-scrollbar { display: none; }
.wp-block-gallery.is-style-barret-slideshow > figure.wp-block-image,
.wp-block-gallery.has-nested-images.is-style-barret-slideshow figure.wp-block-image:not(#individual-image) {
	flex: 0 0 100% !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	position: relative;
}
.wp-block-gallery.is-style-barret-slideshow figure.wp-block-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 842 / 595;
	object-fit: cover !important;
	border-radius: 0;
}
.wp-block-gallery.is-style-barret-slideshow figure.wp-block-image figcaption {
	position: absolute; inset: auto 0 0; margin: 0; padding: 24px 14px 10px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); color: #fff; font-size: 0.8125rem; text-align: left;
}
.wp-block-gallery.is-style-barret-slideshow > figcaption { display: none; }
.slideshow__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.slideshow__dots { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.slideshow__dot {
	width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.slideshow__dot::before {
	content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
	border-radius: 50%; border: 2px solid var(--ink); background: transparent; transition: background 0.2s;
}
.slideshow__dot[aria-current="true"]::before { background: var(--ink); }
.slideshow__arrows { display: flex; gap: 8px; }
.slideshow__arrow {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
	border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer;
}
.slideshow__arrow svg { width: 18px; height: 18px; }
.slideshow__arrow:hover { background: var(--ink); color: #fff; }
.slideshow__dot:focus-visible, .slideshow__arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }


/* ---------- スライドショーの遊び（ABOUT のライブ写真） ----------
   - 写真はゆっくり寄っていく
   - 切り替わる瞬間、舞台の照明がひと筋、斜めに流れる（緑→黄）
   - 左下に「03 / 06」、下の黄色い線が次の写真までの時間
   - 点の代わりに、フィルムのコマのような小さな写真 */
.slideshow__stage { position: relative; overflow: hidden; border-radius: 8px; }
.slideshow__stage .wp-block-gallery.is-style-barret-slideshow { border-radius: 0; }
.wp-block-gallery.is-style-barret-slideshow figure.wp-block-image { overflow: hidden; }
.wp-block-gallery.is-style-barret-slideshow figure.wp-block-image img { transform-origin: 60% 45%; }
.wp-block-gallery.is-style-barret-slideshow figure.is-current img { animation: ss-kenburns 7s ease-out both; }
@keyframes ss-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.slideshow__sweep {
	position: absolute;
	inset: -20% -60%;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	mix-blend-mode: screen;
	background: linear-gradient(105deg, transparent 38%, rgba(22, 160, 0, 0.35) 46%, rgba(242, 217, 0, 0.5) 50%, rgba(255, 255, 255, 0.25) 52%, transparent 60%);
	transform: translateX(-45%);
}
.slideshow__sweep.is-on { animation: ss-sweep 1.1s cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes ss-sweep {
	0% { opacity: 0; transform: translateX(-45%); }
	15% { opacity: 1; }
	100% { opacity: 0; transform: translateX(45%); }
}
.slideshow__count {
	position: absolute;
	left: 14px;
	bottom: 14px;
	z-index: 3;
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.75);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}
.slideshow__count b { font-weight: 400; font-size: 2.25rem; line-height: 1; color: #fff; margin-right: 2px; }
.slideshow__progress { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px; background: rgba(255, 255, 255, 0.15); pointer-events: none; }
.slideshow__progress span { display: block; height: 100%; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; }
.slideshow__progress.is-running span { animation: ss-progress 5s linear both; }
.slideshow.is-paused .slideshow__progress span,
.slideshow.is-offscreen .slideshow__progress span { animation-play-state: paused; }
.slideshow.is-held .slideshow__progress { display: none; }
@keyframes ss-progress { to { transform: scaleX(1); } }
.slideshow__thumbs { gap: 6px; }
.slideshow__thumb { width: 52px; height: 36px; padding: 0; border: 0; border-radius: 3px; overflow: hidden; background: var(--paper); cursor: pointer; position: relative; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.slideshow__thumb::before { display: none; }
.slideshow__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: grayscale(1) brightness(0.6); transition: filter 0.4s; }
.slideshow__thumb:hover img { filter: grayscale(0.3) brightness(0.9); }
.slideshow__thumb[aria-current="true"] { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--green); }
.slideshow__thumb[aria-current="true"] img { filter: none; }
@media (max-width: 599px) {
	.slideshow__thumb { width: 38px; height: 28px; }
	.slideshow__thumbs { gap: 4px; }
	.slideshow__count b { font-size: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-barret-slideshow figure.is-current img { animation: none; }
	.slideshow__sweep { display: none; }
}

/* 次のライブのレビュー：スマホでは出さない（公演ページで読める） */
.live-detail__review { display: none; }

/* ---------- TICKET：ボタンではなく文字のリンク（次のライブ） ---------- */
.ticket-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding-bottom: 5px;
	font-family: var(--font-display);
	font-size: 1.625rem;
	line-height: 1;
	letter-spacing: 0.06em;
	color: var(--yellow);
	text-decoration: none;
}
.ticket-link::before {   /* 下線：マウスを乗せると右から左へ引き直す */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: currentColor;
	transform-origin: 100% 50%;
}
.ticket-link::after {   /* 矢印 */
	content: "";
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.ticket-link:hover,
.next-live a.ticket-link:hover { color: #fff; }
.ticket-link.is-tap::before,
.ticket-link:hover::before { animation: vm-line 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ticket-link.is-tap::after,
.ticket-link:hover::after { transform: translateX(5px) rotate(45deg); }
.next-live a.ticket-link { color: var(--yellow); }
@media (min-width: 768px) { .ticket-link { font-size: 1.875rem; } }

/* =========================================================================
   夜の配色の調整（黒地で読めるように、白前提だった箇所を置き換える）
   ========================================================================= */
.loader { background: var(--shutter); }
.is-loading .loader { background: var(--shutter); }
.site-header--light { background: rgba(255, 255, 255, 0.96); border-bottom-color: var(--line); }
.site-header--light .sns a:hover { background: var(--paper); color: var(--green-dark); }
.site-header--light .global-nav__list a:hover,
.site-header--light .global-nav__list .current-menu-item > a,
.global-nav__list a:hover,
.global-nav__list .current-menu-item > a { color: var(--green-dark); }
.btn--primary,
.btn--small { background: var(--green); color: #000; }
.btn--primary:hover,
.btn--small:hover { background: var(--yellow); color: #000; }
.btn--ghost:hover,
.view-detail:hover,
.btn--spotify:hover,
.slider-btn:hover:not(:disabled),
.slideshow__arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.view-detail:hover .icon { color: inherit; }
.year-nav a[aria-current="page"],
.year-nav a:hover,
.month-jump a:hover,
.nav-links .current { background: var(--yellow); color: #000; border-color: var(--yellow); }
.status--cancelled,
.status--soldout { background: var(--red); color: #000; }
.status--postponed { background: var(--ink-soft); color: #000; }
.status--today { background: var(--green); color: #000; }
.date-badge { background: var(--ink); color: #fff; box-shadow: none; }
.live-row.is-past .date-badge { background: transparent; color: var(--ink-soft); }
.live-row.is-today .date-badge { background: var(--green); color: #000; box-shadow: none; }
.live-list,
.news-list { border-top-color: var(--ink); }
.text-link,
.live-row__title a:hover,
.radio-card a:hover .radio-card__title,
.pickup-card a:hover .pickup-card__title,
.news-list a:hover { color: var(--green-dark); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea { background: #fff; border-color: #a9a9a1; color: var(--ink); }
.form input::placeholder,
.form textarea::placeholder { color: #8a8a83; }
.form input:focus,
.form select:focus,
.form textarea:focus { border-color: var(--ink); outline-color: var(--green); }
.form select option { background: #fff; color: var(--ink); }
.form__req { color: #000; }
.form__check input { accent-color: var(--green); }
.form-errors { background: #fff4f2; }
.form-errors p,
.form-errors a,
.form__error { color: var(--red); }
.form-done { background: #effaec; border-color: var(--green); }
.form-done__title { color: var(--green-dark); }
.entry-content h2 { border-left-color: var(--green); }
.doc-figure a { background: #fff; }   /* 白地の資料画像はそのまま */
.map iframe { filter: grayscale(0.3); }
/* フッター：黒地に白い文字 */
.site-footer { background: var(--facade); color: #fff; border-top: 0; }
.site-footer a,
.site-footer__name,
.site-footer .sns a { color: #fff; }
.site-footer a:hover,
.footer-nav a:hover,
.site-footer .sns a:hover { color: var(--yellow); }
.site-footer__copy { color: rgba(255, 255, 255, 0.7); border-top-color: var(--facade-2); }
.top-banner { background: var(--paper); }
.slideshow__dot::before { border-color: var(--ink); }
.slideshow__dot[aria-current="true"]::before { background: var(--green); border-color: var(--green); }
.slideshow__arrow { background: transparent; }
::selection { background: var(--yellow); color: #000; }

/* =========================================================================
   View More：ボタンではなく文字のリンク。
   画面に入ると右から左へ流れて止まり、マウスを乗せると文字が右から左へ入れ替わる
   ========================================================================= */
body:not(.design-b) .view-more,
body:not(.design-b) .view-more:hover,
body:not(.design-b) .top-banner .view-more,
body:not(.design-b) .top-banner .view-more:hover {
	min-width: 0;
	min-height: 44px;
	padding: 0;
	gap: 12px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.375rem;
	letter-spacing: 0.06em;
}
body:not(.design-b) .view-more { position: relative; padding-bottom: 6px; }
body:not(.design-b) .section-foot { overflow-x: clip; }   /* 流れてくる間に画面の横幅を広げない */
body:not(.design-b) .view-more::after {   /* 下線：右から左へ引かれる */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 1px;
	background: var(--line);
	transform-origin: 100% 50%;
}
body:not(.design-b) .view-more:hover::after,
body:not(.design-b) .view-more.is-tap::after { background: var(--green); animation: vm-line 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
body:not(.design-b) .view-more__txt { position: relative; display: inline-block; overflow: visible; clip-path: inset(-0.4em 0); vertical-align: bottom; }
body:not(.design-b) .view-more__txt > span { display: inline-block; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
body:not(.design-b) .view-more__txt::after {
	content: attr(data-text);
	position: absolute;
	left: 100%;
	top: 0;
	color: var(--green-dark);
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 入れ替わる文字の幅をそろえて、ちょうど1文字列ぶん動かす（端が見切れないように） */
body:not(.design-b) .view-more:hover .view-more__txt > span,
body:not(.design-b) .view-more.is-tap .view-more__txt > span { transform: translateX(-100%); }
body:not(.design-b) .view-more:hover .view-more__txt::after,
body:not(.design-b) .view-more.is-tap .view-more__txt::after { transform: translateX(-100%); }
body:not(.design-b) .view-more .icon { width: 22px; height: 22px; margin: 0; color: var(--green); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s; }
body:not(.design-b) .view-more:hover .icon,
body:not(.design-b) .view-more.is-tap .icon { color: var(--green-dark); transform: translateX(4px); }
@keyframes vm-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* 画面に入ったとき、右から左へ流れて止まる（main.js が .is-in を付ける） */
html.js-vm body:not(.design-b) .view-more { opacity: 0; transform: translateX(64px); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
html.js-vm body:not(.design-b) .view-more.is-in { opacity: 1; transform: none; }
@media (min-width: 768px) { .view-more, .view-more:hover { font-size: 1.625rem; } }
@media (prefers-reduced-motion: reduce) {
	html.js-vm body:not(.design-b) .view-more { opacity: 1; transform: none; }
	body:not(.design-b) .view-more__txt::after { display: none; }
	body:not(.design-b) .view-more:hover .view-more__txt > span { transform: none; }
}

/* =========================================================================
   スマホのメニュー：画面いっぱいに幕が下りる。項目は大きな文字で1列
   ========================================================================= */
@media (max-width: 1119px) {
	body:not(.design-b) .global-nav.is-open {
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--header-h, 68px) + var(--header-top, 0px));
		bottom: 0;
		max-height: none;
		overflow-y: auto;
		padding: 8px var(--gutter) 40px;
		background: var(--shutter);
		animation: nav-curtain 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	body:not(.design-b) .global-nav__list { grid-template-columns: 1fr; border-top: 0; margin: 0; }
	body:not(.design-b) .global-nav__list a,
	body:not(.design-b) .site-header--light .global-nav__list a,
	body:not(.design-b) .site-header--overlay:not(.is-solid) .global-nav__list a {
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		min-height: 0;
		padding: 12px 0 10px;
		border-bottom: 1px solid var(--line);
		color: var(--ink);
		text-shadow: none;
	}
	body:not(.design-b) .global-nav .nav-en { font-size: clamp(2.125rem, 10vw, 3rem); line-height: 1; letter-spacing: 0.02em; }
	body:not(.design-b) .global-nav .nav-ja,
	body:not(.design-b) .site-header--overlay:not(.is-solid) .global-nav .nav-ja { font-size: 0.75rem; color: var(--ink-soft); }
	body:not(.design-b) .global-nav__list a:hover .nav-ja,
	body:not(.design-b) .global-nav__list .current-menu-item > a .nav-ja { color: var(--green-dark); }
	body:not(.design-b) .global-nav.is-open li { animation: nav-rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(60ms + var(--n, 0) * 45ms); }
	body:not(.design-b) .global-nav__list li:nth-child(2) { --n: 1; }
	body:not(.design-b) .global-nav__list li:nth-child(3) { --n: 2; }
	body:not(.design-b) .global-nav__list li:nth-child(4) { --n: 3; }
	body:not(.design-b) .global-nav__list li:nth-child(5) { --n: 4; }
	body:not(.design-b) .global-nav__list li:nth-child(6) { --n: 5; }
	body:not(.design-b) .global-nav__list li:nth-child(7) { --n: 6; }
	body:not(.design-b) .global-nav__list li:nth-child(8) { --n: 7; }
	body:not(.design-b) .global-nav__list li:nth-child(9) { --n: 8; }
	body:not(.design-b) .global-nav__list .current-menu-item > a::before {   /* いまいるページに緑の印 */
		content: "";
		order: -1;
		flex: none;
		width: 8px;
		height: 8px;
		margin-right: -4px;
		align-self: center;
		border-radius: 50%;
		background: var(--green);
	}
}
@keyframes nav-curtain { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes nav-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }


/* =========================================================================
   要素ごとの登場の動き（main.js が .anim と .is-in を付ける。案Aのみ）
   ========================================================================= */
html.js-anim body:not(.design-b) .anim {
	--anim-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--anim-delay: calc(var(--anim-i, 0) * 80ms);
	transition-delay: var(--anim-delay);
	transition-timing-function: var(--anim-ease);
}
/* 見出しの英字：下から文字がせり上がる（マスクの中から） */
html.js-anim body:not(.design-b) .anim--rise-mask { clip-path: inset(0 0 100% 0); transform: translateY(0.4em); transition-property: clip-path, transform; transition-duration: 0.9s; }
html.js-anim body:not(.design-b) .anim--rise-mask.is-in { clip-path: inset(-0.1em -0.1em -0.2em -0.1em); transform: none; }
/* 見出しの日本語：少し遅れてふわっと */
html.js-anim body:not(.design-b) .anim--fade-late { opacity: 0; transition: opacity 0.8s ease 0.35s; }
html.js-anim body:not(.design-b) .anim--fade-late.is-in { opacity: 1; }
/* キャッチコピー：左から右へ書かれていくように */
html.js-anim body:not(.design-b) .anim--wipe-right { clip-path: inset(0 100% 0 0); transition-property: clip-path; transition-duration: 1.4s; transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
html.js-anim body:not(.design-b) .anim--wipe-right.is-in { clip-path: inset(-0.2em -0.2em -0.2em -0.2em); }
/* 文章・表：下から静かに */
html.js-anim body:not(.design-b) .anim--fade-up { opacity: 0; transform: translateY(18px); transition-property: opacity, transform; transition-duration: 0.9s; }
html.js-anim body:not(.design-b) .anim--fade-up.is-in { opacity: 1; transform: none; }
/* 次のライブのフライヤー：掲示板に貼られるように、傾いて落ちてきてまっすぐに */
html.js-anim body:not(.design-b) .anim--poster-drop { opacity: 0; transform: translateY(-40px) rotate(-6deg); transform-origin: 50% 0; transition-property: opacity, transform; transition-duration: 0.6s, 1.1s; transition-timing-function: ease, cubic-bezier(0.34, 1.56, 0.64, 1); }
html.js-anim body:not(.design-b) .anim--poster-drop.is-in { opacity: 1; transform: none; }
html.js-anim body:not(.design-b) .next-live .anim--poster-drop img { animation: none; }
/* 次のライブの日付：左から滑り込む */
html.js-anim body:not(.design-b) .anim--slide-left { opacity: 0; transform: translateX(-40px); transition-property: opacity, transform; transition-duration: 0.8s; }
html.js-anim body:not(.design-b) .anim--slide-left.is-in { opacity: 1; transform: none; }
/* 出演者：1組ずつポンと出る */
html.js-anim body:not(.design-b) .anim--pop { opacity: 0; transform: scale(0.8); transition-property: opacity, transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(0.3s + var(--anim-i, 0) * 90ms); }
html.js-anim body:not(.design-b) .anim--pop.is-in { opacity: 1; transform: none; }
/* スケジュールの行：左から順に。日付バッジは日めくりのようにめくれる */
html.js-anim body:not(.design-b) .anim--slide-row { opacity: 0; transform: translateX(-24px); transition-property: opacity, transform; transition-duration: 0.8s; }
html.js-anim body:not(.design-b) .anim--slide-row.is-in { opacity: 1; transform: none; }
html.js-anim body:not(.design-b) .anim--slide-row .date-badge { transform: perspective(300px) rotateX(-90deg); transform-origin: 50% 0; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(0.2s + var(--anim-i, 0) * 80ms); }
html.js-anim body:not(.design-b) .anim--slide-row.is-in .date-badge { transform: none; }
/* ラジオ：下から少し大きくなりながら */
html.js-anim body:not(.design-b) .anim--rise-scale { opacity: 0; transform: translateY(28px) scale(0.94); transition-property: opacity, transform; transition-duration: 0.8s; }
html.js-anim body:not(.design-b) .anim--rise-scale.is-in { opacity: 1; transform: none; }
/* お知らせ：下線が左から引かれ、文字が出る */
html.js-anim body:not(.design-b) .anim--line-in { position: relative; border-bottom-color: transparent; opacity: 0; transition: opacity 0.6s ease var(--anim-delay); }
html.js-anim body:not(.design-b) .anim--line-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) var(--anim-delay); }
html.js-anim body:not(.design-b) .anim--line-in.is-in { opacity: 1; }
html.js-anim body:not(.design-b) .anim--line-in.is-in::after { transform: none; }
/* ピックアップ：写真の幕が下から上へ開き、少し引いて定着 */
html.js-anim body:not(.design-b) .anim--curtain .pickup-card__img { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1) var(--anim-delay); }
html.js-anim body:not(.design-b) .anim--curtain .pickup-card__img img { transform: scale(1.15); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--anim-delay); }
html.js-anim body:not(.design-b) .anim--curtain .pickup-card__title,
html.js-anim body:not(.design-b) .anim--curtain .pickup-card__text { opacity: 0; transition: opacity 0.7s ease calc(var(--anim-delay) + 0.5s); }
html.js-anim body:not(.design-b) .anim--curtain.is-in .pickup-card__img { clip-path: inset(0 0 0 0); }
html.js-anim body:not(.design-b) .anim--curtain.is-in .pickup-card__img img { transform: none; }
html.js-anim body:not(.design-b) .anim--curtain.is-in .pickup-card__title,
html.js-anim body:not(.design-b) .anim--curtain.is-in .pickup-card__text { opacity: 1; }
/* アクセスの情報：右から1行ずつ */
html.js-anim body:not(.design-b) .anim--slide-right { opacity: 0; transform: translateX(24px); transition-property: opacity, transform; transition-duration: 0.7s; }
html.js-anim body:not(.design-b) .anim--slide-right.is-in { opacity: 1; transform: none; }
/* 地図：少し寄った状態から引いて定着 */
html.js-anim body:not(.design-b) .anim--zoom-out { opacity: 0; transform: scale(1.06); transition-property: opacity, transform; transition-duration: 1.2s; }
html.js-anim body:not(.design-b) .anim--zoom-out.is-in { opacity: 1; transform: none; }
/* 本文の見出し：左の緑の線が伸びてから文字 */
html.js-anim body:not(.design-b) .entry-content > h2.anim--rule-grow { border-left-color: transparent; position: relative; opacity: 0; transition: opacity 0.6s ease 0.2s; }
html.js-anim body:not(.design-b) .entry-content > h2.anim--rule-grow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--green); transform: scaleY(0); transform-origin: 50% 0; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
html.js-anim body:not(.design-b) .entry-content > h2.anim--rule-grow.is-in { opacity: 1; }
html.js-anim body:not(.design-b) .entry-content > h2.anim--rule-grow.is-in::before { transform: none; }
html.js-anim body:not(.design-b) .site-main { overflow-x: clip; }   /* 横から入ってくる途中で、画面の横幅を広げない */


/* =========================================================================
   次のライブ（スマホ）：フライヤーの裏にレビューのカード。タップで表裏が返る
   PC ではカードを使わず、レビューは右の列に出す
   ========================================================================= */
.flip__back,
.flip__hint { display: none; }
@media (max-width: 767px) {
	.live-detail__flyer.has-flip { position: relative; perspective: 1400px; margin-bottom: 8px; }
	/* 裏に重なっているカードの端（表のときだけ少しのぞく） */
	.live-detail__flyer.has-flip::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		border-radius: 6px;
		background: #f2f1ec;
		transform: rotate(4deg) translate(12px, 8px);
		box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.8);
		transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
	}
	.live-detail__flyer.has-flip.is-flipped::before { opacity: 0; transform: rotate(0deg); }
	.flip {
		position: relative;
		z-index: 1;
		transform-style: preserve-3d;
		transition: transform 0.8s cubic-bezier(0.3, 1.25, 0.5, 1);
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.has-flip.is-flipped .flip { transform: rotateY(180deg); }
	.flip__face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
	.flip__front a { display: block; pointer-events: none; }   /* スマホではタップで裏返す（詳細へは下の View Detail から） */
	.flip__back {
		display: flex;
		flex-direction: column;
		position: absolute;
		inset: 0;
		padding: 20px 18px 48px;   /* 下は「TAP」の札の分あける */
		border-radius: 6px;
		background: #f2f1ec;
		color: #161616;
		transform: rotateY(180deg);
		overflow: hidden;
	}
	.flip__label { margin: 0 0 10px; font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.08em; color: var(--green-dark); border-bottom: 2px solid #161616; padding-bottom: 6px; }
	.flip__text { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 0.8125rem; line-height: 1.85; padding-right: 4px; }
	.flip__text p { margin: 0 0 0.9em; }
	.flip__text p:last-child { margin-bottom: 0; }
	/* 「TAP」の札：右下に。裏返すと「もどる」の意味で同じ場所に */
	.flip__hint {
		display: inline-flex;
		align-items: baseline;
		gap: 6px;
		position: absolute;
		right: -6px;
		bottom: 14px;
		z-index: 2;
		padding: 7px 14px 6px;
		border-radius: 999px;
		background: var(--yellow);
		border: 2px solid #000;   /* 黄色いフライヤーの上でも見えるように */
		color: #000;
		font-family: var(--font-display);
		font-size: 0.9375rem;
		letter-spacing: 0.08em;
		line-height: 1;
		box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
		pointer-events: none;
		animation: flip-blink 1.6s ease-in-out infinite;
	}
	.flip:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; border-radius: 6px; }
}
/* TAP の札：ゆっくり点滅（明るさと光のにじみ） */
@keyframes flip-blink {
	0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(242, 217, 0, 0.7), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
	50% { opacity: 0.35; box-shadow: 0 0 14px 4px rgba(242, 217, 0, 0.45), 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
	.flip { transition: none; }
	.flip__hint { animation: none; }
}


/* ---------- 一覧の「予約する」と「View Detail」 ----------
   予約できないときは押せない札（理由を表示）。View Detail はボタンではなく文字のリンク */
.btn--disabled,
.btn--disabled:hover { background: var(--paper); color: var(--ink-soft); border-color: var(--line); cursor: not-allowed; }
.btn--disabled::before { display: none; }
body:not(.design-b) .view-detail,
body:not(.design-b) .view-detail:hover {
	min-width: 0;
	min-height: 40px;
	padding: 0;
	gap: 4px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--ink);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	position: relative;
}
/* 本文と釣り合う大きさ。下線は矢印まで通して1つのまとまりに */
body:not(.design-b) .view-detail::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 1px;
	background: currentColor;
	transform-origin: 100% 50%;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
body:not(.design-b) .view-detail:hover { color: var(--green-dark); }
body:not(.design-b) .view-detail:hover::after { animation: vm-line 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
body:not(.design-b) .view-detail .icon { width: 14px; height: 14px; margin: 0; color: var(--green); }
body:not(.design-b) .live-row__actions { margin-top: 0; }
body:not(.design-b) .live-row.is-past .view-detail { color: var(--ink-soft); }
/* トップのライブスケジュール：
   スマホは View Detail を各行の右端に、本文と釣り合う大きさで（下線は矢印まで通す）。
   PC はライブスケジュールのページと同じ（左寄せ・同じ大きさ） */
@media (max-width: 767px) {
	.upcoming .live-row__actions { justify-self: end; margin-top: -2px; }
	body:not(.design-b) .upcoming .view-detail,
	body:not(.design-b) .upcoming .view-detail:hover { min-height: 36px; font-size: 0.9375rem; letter-spacing: 0.08em; gap: 4px; padding: 0; }
	body:not(.design-b) .upcoming .view-detail::after { left: 0; right: 0; bottom: 6px; }
	body:not(.design-b) .upcoming .view-detail .icon { width: 14px; height: 14px; }
}


/* ---------- スマホのメニュー：背景に画像／動画（カスタマイザーで設定） ----------
   黒の上に薄く重ね、メニューの文字は白にして読みやすくする */
.global-nav__bg { display: none; }
@media (max-width: 1119px) {
	body:not(.design-b) .global-nav.is-open.has-menu-bg { background: #000; isolation: isolate; }
	.global-nav.is-open .global-nav__bg {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: calc(var(--header-h, 68px) + var(--header-top, 0px));
		bottom: 0;
		z-index: -1;
		pointer-events: none;
		overflow: hidden;
	}
	.global-nav__bg img,
	.global-nav__bg video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: var(--menu-bg-opacity, 0.35);
		animation: menu-bg-in 1.2s ease both;
	}
	.global-nav__bg::after {   /* 下に向かって少し暗く。文字の下は特に読みやすく */
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55));
	}
	body:not(.design-b) .has-menu-bg .global-nav__list a,
	body:not(.design-b) .site-header--light .has-menu-bg .global-nav__list a { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.22); }
	body:not(.design-b) .has-menu-bg .global-nav__list a:hover,
	body:not(.design-b) .has-menu-bg .global-nav__list .current-menu-item > a { color: var(--yellow); }
	body:not(.design-b) .has-menu-bg .nav-ja { color: rgba(255, 255, 255, 0.7) !important; }
	body:not(.design-b) .has-menu-bg .global-nav__list a:hover .nav-ja,
	body:not(.design-b) .has-menu-bg .global-nav__list .current-menu-item > a .nav-ja { color: var(--yellow) !important; }
}
@keyframes menu-bg-in { from { opacity: 0; transform: scale(1.06); } to { opacity: var(--menu-bg-opacity, 0.35); transform: none; } }
@media (prefers-reduced-motion: reduce) { .global-nav__bg img, .global-nav__bg video { animation: none; } }


/* ローディングの終わり：白い画面ごと上へ持ち上がり、下からトップが現れる */
.is-loading .loader { opacity: 1; transform: none; transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s linear 0.85s; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35); }
.is-loaded .loader { opacity: 1; transform: translateY(-100%); visibility: hidden; }
.is-loading .loader__logo { transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1); }
.is-loaded .loader__logo { transform: translateY(-12vh); }   /* ロゴは少し速く上へ抜けて、奥行きを出す */

/* =========================================================================
   トップのポップアップ（ローディングのあと、1回の訪問につき1回）
   ========================================================================= */
.popup[hidden] { display: none; }
.popup { position: fixed; inset: 0; z-index: 950; display: grid; place-items: center; padding: 56px 16px 24px; }
.popup__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.82); opacity: 0; transition: opacity 0.4s ease; }
.popup__panel {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100svh - 96px);
	opacity: 0;
	transform: translateY(40px) rotate(-3deg) scale(0.96);
	transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.popup.is-open .popup__backdrop { opacity: 1; }
.popup.is-open .popup__panel { opacity: 1; transform: none; }
.popup.is-closing .popup__backdrop { opacity: 0; }
.popup.is-closing .popup__panel { opacity: 0; transform: translateY(20px) scale(0.97); transition-duration: 0.3s; }
.popup__img { display: block; width: 100%; height: auto; max-height: calc(100svh - 96px); object-fit: contain; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.9); }
.popup__link { display: block; }
.popup__close {
	position: absolute;
	top: -48px;
	right: 0;
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s, color 0.2s;
}
.popup__close .icon { width: 22px; height: 22px; }
.popup__close:hover { background: var(--yellow); border-color: var(--yellow); color: #000; transform: rotate(90deg); }
.popup__close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
html.has-popup body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .popup__panel, .popup__backdrop { transition: opacity 0.2s; transform: none; } }


/* ---------- YouTube（ABOUT の最上部など） ----------
   本文の幅より広く、画面に合わせて大きく。サムネイルは最高画質、押すとその場で再生 */
.yt {
	position: relative;
	width: min(calc(100vw - var(--gutter) * 2), 1120px);
	left: 50%;
	transform: translateX(-50%);
	margin: 0 0 2.4em;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
.entry-content .yt { margin: 0 0 2.4em; }
.yt__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; }
.yt__poster { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s; filter: brightness(0.85); }
.yt__play:hover .yt__poster { transform: scale(1.03); filter: brightness(1); }
.yt__icon {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 84px;
	height: 84px;
	margin: -42px 0 0 -42px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	border: 2px solid #fff;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s;
}
.yt__icon::before { content: ""; position: absolute; left: 33px; top: 25px; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; }
.yt__play:hover .yt__icon { transform: scale(1.08); background: var(--green); border-color: var(--green); }
.yt__play:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; aspect-ratio: auto; }
@media (max-width: 599px) {
	.yt { border-radius: 0; width: 100vw; }   /* スマホは画面の端から端まで */
	.yt__icon { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
	.yt__icon::before { left: 25px; top: 19px; border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}


/* ---------- FC2 のフォーム（中身は FC2 の画面。ここでは枠・見出し・読み込み中を整える） ---------- */
.fc2 { margin: 24px 0 0; }
.fc2-anchor { scroll-margin-top: 96px; }
.fc2__head { margin-bottom: 14px; }
.fc2__title { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 700; }
.fc2__title::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--green); }
.fc2__note { color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.9; }
.fc2__note p { margin: 0; }
.fc2__frame {
	position: relative;
	display: flex;
	justify-content: center;
	min-height: 420px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;   /* 当初のフォームと同じく、枠で囲まずページの地にそのまま置く */
	overflow: hidden;
}
.fc2__iframe { display: block; width: 100%; max-width: 100% !important; min-height: 380px; border: 0; background: transparent; }
.fc2.is-ready .fc2__iframe { min-height: 0; }
.fc2.is-ready .fc2__frame { min-height: 0; }
.fc2__loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 12px;
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.875rem;
	pointer-events: none;
	transition: opacity 0.3s;
}
.fc2__loading span { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--green); animation: fc2-spin 0.9s linear infinite; }
@keyframes fc2-spin { to { transform: rotate(360deg); } }
.fc2.is-ready .fc2__loading,
.fc2.is-loaded .fc2__loading { opacity: 0; }
.fc2__alt { margin: 10px 0 0; font-size: 0.8125rem; color: var(--ink-soft); text-align: right; }
.fc2__alt a { color: var(--green-dark); }

@media (prefers-reduced-motion: reduce) { .fc2__loading span { animation: none; } }


/* ---------- ポップアップのボタン ---------- */
.popup__panel:has(.popup__btn) .popup__img { max-height: calc(100svh - 170px); }
.popup__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	margin-top: 14px;
	border-radius: 999px;
	background: var(--yellow);
	color: #000;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.8);
	transition: background 0.2s, transform 0.2s;
}
.popup__btn .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.popup__btn:hover { background: #fff; }
.popup__btn:hover .icon { transform: translateX(4px); }
.popup__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- 右下の小さな告知（ポップアップを閉じたあと） ---------- */
.float-ad[hidden] { display: none; }
.float-ad {
	position: fixed;
	right: calc(12px + env(safe-area-inset-right, 0px));
	bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--float-offset, 0px));
	z-index: 80;
	width: min(320px, calc(100vw - 24px));
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.float-ad.is-shown { opacity: 1; transform: none; }
.float-ad.is-shown.is-tucked { opacity: 0; transform: translateY(24px); pointer-events: none; }   /* フッターが見えているあいだは隠す（下のボタンを押せるように） */
.float-ad__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 40px 8px 8px;
	border-radius: 10px;
	background: var(--facade);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s;
}
.float-ad__link:hover { color: #fff; }   /* 黒地なので、マウスを乗せても白のまま（ふつうのリンクの黒にならないように） */
.float-ad__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.float-ad__img { flex: none; width: 64px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 4px; background: var(--facade-2); }
.float-ad__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.float-ad__text { display: grid; gap: 4px; min-width: 0; }
.float-ad__name { font-size: 0.8125rem; font-weight: 700; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.float-ad__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 700; color: var(--yellow); }
.float-ad__cta .icon { width: 14px; height: 14px; }
.float-ad__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
}
.float-ad__close .icon { width: 16px; height: 16px; }
.float-ad__close:hover { background: var(--yellow); color: #000; }
.float-ad__close:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
/* マウスを乗せたとき（白い文字のまま）：少し浮く・黄色の細い枠・フライヤーが寄る・名前に下線が引かれる・矢印が右へ */
.float-ad__img img { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.float-ad__name { background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat; transition: background-size 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.float-ad__cta .icon { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) {
	.float-ad__link:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--yellow) inset, 0 24px 44px -18px rgba(0, 0, 0, 0.8); }
	.float-ad__link:hover .float-ad__img img { transform: scale(1.08); }
	.float-ad__link:hover .float-ad__name { background-size: 100% 1px; }
	.float-ad__link:hover .float-ad__cta .icon { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
	.float-ad__link, .float-ad__img img, .float-ad__name, .float-ad__cta .icon { transition: none; }
	.float-ad__link:hover { transform: none; }
	.float-ad__link:hover .float-ad__img img { transform: none; }
}
@media (min-width: 768px) {
	.float-ad { right: 20px; bottom: calc(20px + var(--float-offset, 0px)); width: 340px; }
	.float-ad__img { width: 76px; }
	.float-ad__name { font-size: 0.875rem; }
}
/* メニューやポップアップが開いているあいだは隠す */
.has-popup .float-ad,
html:has(.global-nav.is-open) .float-ad { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .float-ad { transition: opacity 0.2s; transform: none; } }

/* ---------- PC：ライブ一覧の View Detail は行の右側（縦は真ん中）に、少し大きく ----------
   トップのライブスケジュールと、ライブスケジュールのページの両方 */
@media (min-width: 1024px) {
	body:not(.design-b) .live-row__body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
	body:not(.design-b) .live-row__body > * { grid-column: 1; }
	body:not(.design-b) .live-row__body > .live-row__actions {
		grid-column: 2;
		grid-row: 1 / span 6;
		align-self: center;
		justify-self: end;
		margin: 0;
	}
	body:not(.design-b) .live-row .view-detail,
	body:not(.design-b) .live-row .view-detail:hover { font-size: 1.0625rem; gap: 6px; min-height: 44px; }
	body:not(.design-b) .live-row .view-detail::after { bottom: 9px; }
	body:not(.design-b) .live-row .view-detail .icon { width: 16px; height: 16px; }
}

/* ---------- フッター：SOUTH MUSIC SUMMIT 特設ページへのボタン ----------
   文字の書体・大きさ・字間・高さはほかのメニュー（TOP・ABOUT…）とそろえ、
   色（フライヤーの赤・からし色の縁）だけで目立たせる */
.footer-nav a.footer-special {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 8px;
	min-height: 44px;
	padding: 0 16px 0 18px;
	border: 1px solid #f8b62e;
	border-radius: 4px;
	background: #d03d2b;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s;
}
.footer-nav a.footer-special,
.footer-nav a.footer-special:hover { color: #fff; }
.footer-nav a.footer-special:hover { background: #a92f21; }
.footer-special .icon { flex: none; width: 16px; height: 16px; transition: transform 0.2s; }
.footer-special:hover .icon { transform: translateX(3px); }
.footer-special:focus-visible { outline: 2px solid #f8b62e; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .footer-nav a.footer-special, .footer-special .icon { transition: none; } }

/* ---------- ライブスケジュール：UPCOMING／PAST のタブ ---------- */
.sched-tabs { display: flex; gap: 0; margin-top: 16px; border-bottom: 1px solid var(--line); }
.sched-tabs__tab {
	position: relative;
	display: inline-grid;
	justify-items: center;
	gap: 2px;
	min-width: 120px;
	min-height: 56px;
	padding: 8px 20px 10px;
	color: var(--ink-soft);
	text-decoration: none;
	font-family: var(--font-display);
	font-size: 1.125rem;
	letter-spacing: 0.08em;
	line-height: 1.1;
	transition: color 0.2s;
}
.sched-tabs__tab small { font-family: var(--font-body, inherit); font-size: 0.6875rem; letter-spacing: 0.04em; font-weight: 700; }
.sched-tabs__tab::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 3px;
	background: var(--green);
	transform: scaleX(0);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sched-tabs__tab:hover { color: var(--ink); }
.sched-tabs__tab[aria-current="page"] { color: var(--ink); }
.sched-tabs__tab[aria-current="page"]::after,
.sched-tabs__tab:hover::after { transform: none; }
.page-header--schedule .month-nav { margin-top: 16px; }
@media (min-width: 768px) { .sched-tabs__tab { min-width: 150px; font-size: 1.25rem; } }

/* ---------- 月の選択（UPCOMING・PAST 共通の文字組み） ----------
   箱で囲まず、数字を主役に。2桁の月（Anton）＋英字の月＋年＋公演数。
   選んでいる月は、上のタブと同じ緑の下線で示す */
.up-months__y,
.past-months__y { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.18em; color: var(--ink-soft); line-height: 1; }
.up-months__m,
.past-months__m { font-family: var(--font-display); font-size: 2.75rem; line-height: 0.9; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.up-months__en,
.past-months__en { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.32em; margin-right: -0.32em; line-height: 1; }
.up-months__n,
.past-months__n { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1; }
.up-months__n::before,
.past-months__n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* タブ：UPCOMING ｜ PAST を左から並べる（見出し・月の段・一覧と左端をそろえる） */

/* UPCOMING の下の段：予定がある月で絞り込む。
   タブと同じ「英字（Anton）＋小さな日本語」を、ひと回り小さく。選んでいる月は細い緑の下線 */
.sched-months {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 14px;
}
.sched-months__label {
	flex: none;
	font-family: var(--font-display);
	font-size: 0.6875rem;
	letter-spacing: 0.24em;
	color: var(--ink-soft);
	padding-right: 18px;
	border-right: 1px solid var(--line);
	line-height: 2.4;
}
.sched-months__list {
	list-style: none;
	margin: 0;
	padding: 0 0 2px;
	display: flex;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sched-months__list::-webkit-scrollbar { display: none; }
.sched-months__list li { flex: none; }
.sched-months__item {
	position: relative;
	display: inline-grid;
	justify-items: center;
	gap: 1px;
	padding: 6px 14px 8px;
	color: var(--ink-soft);
	text-decoration: none;
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.1em;
	line-height: 1.1;
	transition: color 0.2s;
}
.sched-months__item small { font-family: var(--font-body); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; white-space: nowrap; }
.sched-months__item::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 0;
	height: 2px;
	background: var(--green);
	transform: scaleX(0);
	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.sched-months__item:hover,
.sched-months__item[aria-current="page"] { color: var(--ink); }
.sched-months__item:hover::after { transform: scaleX(0.4); }
.sched-months__item[aria-current="page"]::after { transform: none; }
.sched-months__item:focus-visible { outline: var(--focus); outline-offset: 2px; }
/* 公演数：英字の右肩に小さな丸 */
.sched-months__n {
	position: absolute;
	top: 1px;
	right: 2px;
	min-width: 15px;
	height: 15px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--line);
	color: var(--ink);
	font-family: var(--font-body);
	font-style: normal;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 15px;
	text-align: center;
	transition: background-color 0.2s, color 0.2s;
}
.sched-months__item[aria-current="page"] .sched-months__n,
.sched-months__item:hover .sched-months__n { background: var(--green); color: #fff; }
@media (min-width: 768px) {
	.sched-months { margin-top: 18px; }
	.sched-months__item { font-size: 1.125rem; padding-inline: 16px; }
	.sched-months__item::after { left: 16px; right: 16px; }
}
@media (max-width: 599px) {
	.sched-months { gap: 10px; }
	.sched-months__label { padding-right: 10px; }
	.sched-months__item { padding-inline: 11px; }
	.sched-months__item::after { left: 11px; right: 11px; }
}
@media (prefers-reduced-motion: reduce) { .sched-months__item, .sched-months__item::after, .sched-months__n { transition: none; } }
.up-month .month-heading:focus { outline: none; }
.up-month[hidden] { display: none; }

/* PAST：年ごとに 1〜12月の面（細い線で区切った格子） */
.past-year + .past-year { margin-top: 48px; }
.past-year__title { display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 400; font-size: 2rem; letter-spacing: 0.04em; margin: 0 0 14px; }
.past-year__title::after { content: ""; flex: 1; height: 1px; background: var(--line); transform: translateY(-0.3em); }
.past-months {
	list-style: none;
	margin: 0;
	padding: 1px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--line);
	border-radius: 4px;
	overflow: hidden;
}
.past-months li { display: grid; background: #fff; }
.past-months a,
.past-months .is-empty {
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 7px;
	min-height: 112px;
	padding: 16px 8px;
	text-decoration: none;
	color: var(--ink);
	transition: background-color 0.25s, color 0.25s;
}
.past-months .is-empty { color: #cfcfc8; }
.past-months a:hover { background: var(--ink); color: #fff; }
.past-months a:hover .past-months__n::before { background: var(--yellow); }
.past-months a:focus-visible { outline: var(--focus); outline-offset: -3px; }
@media (min-width: 600px) { .past-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
	.past-months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.past-months__m { font-size: 3.25rem; }
}
@media (prefers-reduced-motion: reduce) {
	.past-months a { transition: none; }
}

/* ---------- PAST：その月の一覧 ---------- */
.past-back { margin: 8px 0 0; font-size: 0.875rem; }
.is-past-archive .live-row.is-past { opacity: 1; }



/* ---------- 「LINEで予約」「メールで予約」（inc/line-choice.php） ---------- */
.rsv-choice { margin-top: 24px; }
.rsv-choice__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 599px) { .rsv-choice--contact .rsv-choice__btns, .rsv-choice--apply .rsv-choice__btns { grid-template-columns: 1fr; } }
   /* 「お問い合わせ」「申し込み」は長いので、スマホは縦に並べる */
.rsv-choice__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 56px;
	padding: 10px 14px;
	border: 1px solid var(--ink);
	border-radius: var(--radius);
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.rsv-choice__btn .icon { flex: none; width: 22px; height: 22px; fill: currentColor; }
.rsv-choice__btn--line { border-color: var(--green); background: var(--green); color: #fff; }   /* サイトの緑（ロゴの緑）にそろえる */
.rsv-choice__btn--line:hover { border-color: var(--green-dark); background: var(--green-dark); color: #fff; }
.rsv-choice__btn--mail:hover { background: var(--ink); color: #fff; }
.rsv-choice__btn:hover { transform: translateY(-1px); }
.rsv-choice__btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
.rsv-choice__arrow { width: 8px; height: 8px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate 0.25s, translate 0.25s; }
.rsv-choice.is-open .rsv-choice__arrow { rotate: 225deg; translate: 0 2px; }
.rsv-choice.is-open .rsv-choice__btn--mail { background: var(--ink); color: #fff; }
.rsv-choice__panel { scroll-margin-top: 96px; }
.rsv-choice__panel[hidden] { display: none; }
.rsv-choice__panel > .fc2 { margin-top: 20px; }
@media (min-width: 768px) {
	.rsv-choice__btns { gap: 14px; max-width: 560px; }
	.rsv-choice__btn { min-height: 60px; font-size: 1rem; }
}
/* スマホ：2つ並べても文字が改行されないように、余白・アイコン・文字を少し詰める（画面の幅に合わせて文字の大きさを変える） */
@media (max-width: 599px) {
	.rsv-choice__btn { gap: 6px; padding-inline: 8px; font-size: clamp(0.8125rem, 3.7vw, 0.9375rem); letter-spacing: 0.02em; }
	.rsv-choice__btn .icon { width: 18px; height: 18px; }
	.rsv-choice__arrow { width: 7px; height: 7px; }
}
@media (max-width: 359px) { .rsv-choice__arrow { display: none; } }   /* とても小さい画面では矢印を省いて、文字の場所をあける */
@media (prefers-reduced-motion: reduce) { .rsv-choice__btn, .rsv-choice__arrow { transition: none; } }



/* PAST：年の段（MONTH の段と同じ形）。公演がまだない年は薄く */
.sched-months__item.is-zero { color: var(--ink-soft); opacity: 0.7; }
.sched-months__item.is-zero:hover,
.sched-months__item.is-zero[aria-current="page"] { opacity: 1; }
/* PAST：公演がまだない年 */
.past-year__none { margin-left: 14px; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); }
.past-year.is-none .past-months { opacity: 0.55; }
.past-year[hidden] { display: none; }

/* 年・月を選んだあと、その見出しに読み上げ位置を移すときの枠は出さない（スマホで緑の枠が出ないように） */
.past-year__title:focus,
.month-heading:focus,
[tabindex="-1"]:focus { outline: none; }


/* =========================================================================
   トップ：FOOD への入口（写真の左下に黒い板、右に見出し・リード・View More）
   ========================================================================= */
.top-food { background: var(--paper); overflow-x: clip; }
.top-food__grid { display: grid; gap: 44px; align-items: center; }
.top-food__photo { position: relative; display: block; margin: 0 18px 18px 0; isolation: isolate; }
.top-food__block { position: absolute; inset: 18px -18px -18px 18px; z-index: -1; background: var(--facade); }
.top-food__img { display: block; overflow: hidden; border-radius: 2px; background: var(--line); }
.top-food__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.top-food__photo:hover .top-food__img img { transform: scale(1.04); }
.top-food__body { display: grid; gap: 16px; justify-items: start; }
.top-food__body > * { margin: 0; }
.top-food__catch { font-size: clamp(1rem, 4.3vw, 1.25rem); font-weight: 700; line-height: 1.7; letter-spacing: 0.02em; }   /* スマホでは「。」までが1行に収まる大きさ */
.top-food__text { font-size: 0.9375rem; color: var(--ink-soft); line-height: 2; word-break: auto-phrase; }
.top-food__phrase { display: inline-block; }
@media (min-width: 768px) {
	/* 写真と文字の高さがそろうように：左右は同じ幅、文字は小さめにまとめる */
	.top-food__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
	.top-food__photo { margin: 0 28px 28px 0; }
	.top-food__block { inset: 28px -28px -28px 28px; }
	.top-food__body { gap: 14px; max-width: 32em; }
	.top-food__catch { font-size: clamp(1.25rem, 1.7vw, 1.5rem); letter-spacing: 0.04em; }
}
@media (min-width: 1200px) { .top-food__grid { gap: 72px; } }
/* 登場：写真は下から幕が上がり、少し引いて定着。黒い板はあとから左から伸びる */
html.js-anim body:not(.design-b) .anim--photo-curtain { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s cubic-bezier(0.7, 0, 0.2, 1); }
html.js-anim body:not(.design-b) .anim--photo-curtain img { transform: scale(1.18); transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
html.js-anim body:not(.design-b) .anim--photo-curtain.is-in { clip-path: inset(0 0 0 0); }
html.js-anim body:not(.design-b) .anim--photo-curtain.is-in img { transform: none; }
html.js-anim body:not(.design-b) .anim--block-wipe { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.7, 0, 0.2, 1) 0.6s; }
html.js-anim body:not(.design-b) .anim--block-wipe.is-in { clip-path: inset(0 0 0 0); }

/* =========================================================================
   お知らせの詳細：日付と題名の下に線。前後のお知らせ。一覧へは中央のボタン
   ========================================================================= */
.post-single .post-header { margin-bottom: 32px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.post-single .post-header__title { margin: 6px 0 0; line-height: 1.5; letter-spacing: 0.03em; word-break: auto-phrase; }
.post-pager { display: grid; gap: 1px; margin-top: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--line); }
.post-pager__link { display: grid; gap: 4px; padding: 16px 4px; background: var(--shutter); color: var(--ink); text-decoration: none; }
.post-pager__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--ink-soft); }
.post-pager__title { font-weight: 700; line-height: 1.6; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.post-pager__link:hover .post-pager__title { color: var(--green-dark); text-decoration: underline; }
.post-pager__link--prev { text-align: right; }
@media (min-width: 768px) {
	.post-pager { grid-template-columns: 1fr 1fr; }
	.post-pager__link { padding: 20px 16px; }
	.post-pager__link--prev:only-child { grid-column: 2; }
}
.post-single .live-single__foot { padding-bottom: 0; }

/* メニューが11個（NEWS を足した）になっても1行に収まるように、PCのメニューを少し詰める */
@media (min-width: 1120px) {
	.global-nav__list { gap: 0; }
	.global-nav__list a { padding: 6px 7px; }
	.nav-ja { font-size: 0.625rem; letter-spacing: 0; }
}
@media (min-width: 1120px) and (max-width: 1279px) {
	.site-logo__img { width: 108px; }
	.global-nav__list a { padding: 6px 5px; }
	.nav-en { font-size: 1rem; }
}
/* SNS をヘッダーに並べるのは、メニューと並んでも余裕のある広い画面だけ */
@media (min-width: 1440px) and (max-width: 1679px) {
	.sns--header { display: none; }
}
@media (min-width: 1680px) {
	.site-header__inner { max-width: calc(1420px + var(--gutter) * 2); }   /* SNS＋11個のメニューが入る幅 */
}

/* トップ：白とグレーが交互になるように。FOOD（グレー）があるときは、PICK UP を白、そのすぐ後の ACCESS をグレーに */
.top-food ~ .pickup { background: transparent; }
.top-food ~ .pickup + .access { background: var(--paper); }

/* フッター：SOUTH MUSIC SUMMIT（SMS 2026）はメニューの並びの中（CONTACT の横・ACCESS の下）。
   ほかのメニューと同じ見た目で、文字の色だけフライヤーの赤に（黒地で読みやすい明るさ） */
.footer-nav li.footer-nav__special { min-width: 0; }
.footer-nav li.footer-nav__special a.footer-special { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; gap: 6px; min-height: 44px; color: #ff5a3c; }
.footer-nav li.footer-nav__special a.footer-special:hover { background: none; color: var(--yellow); }


/* 空転ラジオ：「お便りを送る」ボタン（押すとフォームが開く）。ボタンは真ん中に */
.radio-letter { margin-top: 0; }
.radio-letter__btns { display: flex; justify-content: center; }
.radio-letter__btn { width: min(100%, 360px); }

/* スマホでメインビューの上をスクロールしたときのがたつき対策：メインビューの描き直しを中だけに留める。
   （ヘッダーには transform を付けない。付けるとハンバーガーメニューの画面がヘッダーの中に閉じ込められるため） */
.hero__stage { contain: paint; }

/* メインビューの高さを、最初に測った画面の高さ（--hero-vh、main.js）で固定する。
   アプリ内ブラウザでスクロール中にツールバーが出入りしても、写真の高さが変わらないように */
@media (max-width: 599px) {
	.has-hero-vh .hero--full .hero__stage { height: calc(var(--hero-vh) - var(--header-h, 68px)); }
	.has-hero-vh .has-overlay-header .hero--full .hero__stage { height: var(--hero-vh); }
}
@media (min-width: 1024px) { .has-hero-vh .hero__stage { height: var(--hero-vh); } }

/* スマホのメニュー：英語・日本語とも1行に収める（HALL RENTAL が2行にならないように）。項目が増えた分の時間差も */
@media (max-width: 1119px) {
	body:not(.design-b) .global-nav .nav-en { font-size: clamp(1.75rem, 8.6vw, 3rem); white-space: nowrap; min-width: 0; }
	body:not(.design-b) .global-nav .nav-ja { flex: none; white-space: nowrap; }
	body:not(.design-b) .global-nav__list li:nth-child(10) { --n: 9; }
	body:not(.design-b) .global-nav__list li:nth-child(11) { --n: 10; }
	body:not(.design-b) .global-nav__list li:nth-child(n+12) { --n: 11; }
}