@charset "utf-8";
/* =========================================================================
   中島ラウンジ / LOUNGE NAKAJIMA
   デザイン本体。配色とフォントは SITE_SPEC.md の「2. デザイントークン」と対応。
   ====================================================================== */

:root {
	--bg:          #0b0b0b;
	--bg-alt:      #121212;
	--gold:        #c8a45c;
	--gold-bright: #e0c489;
	--gold-dim:    #8f7238;
	--text:        #f2efe9;
	--text-dim:    #9a9691;
	--accent:      #a8112a;

	--font-en: "Cormorant Garamond", "Times New Roman", serif;
	--font-mc: "Noto Serif JP", "Yu Mincho", serif;
	--font-go: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

	--wrap: 1180px;
	--head-h: 84px;

	/* 見出しの下に敷く金の飾り罫。中央の菱形から左右へ細い罫が伸びる */
	--ornament: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='16'%20viewBox='0%200%20240%2016'%3E%3Cdefs%3E%3ClinearGradient%20id='a'%20gradientUnits='userSpaceOnUse'%20x1='0'%20y1='0'%20x2='240'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%23c8a45c'%20stop-opacity='0'/%3E%3Cstop%20offset='.44'%20stop-color='%23c8a45c'%20stop-opacity='.9'/%3E%3Cstop%20offset='.56'%20stop-color='%23c8a45c'%20stop-opacity='.9'/%3E%3Cstop%20offset='1'%20stop-color='%23c8a45c'%20stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20fill='none'%20stroke='url%28%23a%29'%20stroke-width='1'%3E%3Cpath%20d='M4%208H98'/%3E%3Cpath%20d='M142%208h94'/%3E%3C/g%3E%3Cg%20fill='none'%20stroke='%23c8a45c'%20stroke-width='1'%3E%3Cpath%20d='M120%203.2l4.8%204.8-4.8%204.8L115.2%208z'/%3E%3Cpath%20d='M106%208c4.2-3.2%208.4-3.2%2012.6%200-4.2%203.2-8.4%203.2-12.6%200z'%20opacity='.6'/%3E%3Cpath%20d='M134%208c-4.2-3.2-8.4-3.2-12.6%200%204.2%203.2%208.4%203.2%2012.6%200z'%20opacity='.6'/%3E%3C/g%3E%3C/svg%3E");

	/* 金の箔押し風グラデーション。大きな欧文見出しにだけ使う */
	--foil: linear-gradient(174deg,
		#fbeec6 0%, #dcbb7c 24%, #a8843f 46%,
		#8f7238 54%, #e3caa0 76%, #fbeec6 100%);
}

/* 本文の中で目立たせたい語句。テンプレート側は nakajima_gold() の 【】《》 で指定する */
/* 既定の本文色（#f2efe9）と --gold-bright は近く、金色にしても目立たない。
   はっきり金と分かる --gold に、細い金の下罫を添える（2026-08-20 調整） */
.em-gold {
	font-style: normal; font-weight: 400; color: var(--gold);
	letter-spacing: .05em;
	padding-bottom: 2px;
	background: linear-gradient(90deg, rgba(200,164,92,.55), rgba(200,164,92,.18)) left bottom / 100% 1px no-repeat;
}
/* 金額など、一番目立たせたいところ。箔押しのグラデーションと淡い光を足す */
.em-gold--lg {
	font-family: var(--font-mc); font-size: 1.34em; letter-spacing: .06em;
	padding-bottom: 0; background: none;
	color: var(--gold-bright);
	text-shadow: 0 0 22px rgba(200, 164, 92, .45), 0 1px 0 rgba(0, 0, 0, .6);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.em-gold--lg {
		background-image: var(--foil);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
		/* 文字が透明になると text-shadow は出ないので、光は捨てて箔の質感を取る */
		text-shadow: none;
	}
}

/* 金の箔押し文字。背景クリップが効かない環境では単色ゴールドのまま出る */
.foil { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.foil {
		background-image: var(--foil);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}

/* 見出しの下（または上）に置く飾り罫 */
.ornament-line {
	display: block; width: 240px; height: 16px; margin-inline: auto;
	background: var(--ornament) center / contain no-repeat;
}

/* ---------- ベース ---------------------------------------------------- */

html { scroll-behavior: smooth; }

/* 背景は body ではなく html に置く。body には蓮の写真を敷くため透過にする */
html { background: var(--bg); }

body {
	margin: 0;
	background: transparent;
	color: var(--text);
	font-family: var(--font-go);
	font-weight: 300;
	font-size: 15px;
	line-height: 2;
	letter-spacing: .06em;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* ---------- 背景（モノクロの蓮） --------------------------------------

   参考にしたのは求人媒体 chocolat の店舗ページ。あちらは黒バラを一面に敷いている。
   当店はそれを蓮に置き換えたもの。

   実装で気をつけていること:
   - background-attachment: fixed は iOS Safari で描画が崩れるため使わない。
     代わりに position: fixed の擬似要素を2枚重ねる。
   - 1枚目が写真、2枚目が黒の膜。文字の可読性は膜の濃さだけで調整できるようにしてある。
     写真を直接暗くしないのは、後から実写に差し替えても同じ濃さに揃うようにするため。
   - 写真が読めない時でも html の黒が残るので、真っ黒になって中身が消えることはない。
   - **画像URLの ?v= は消さないこと。** Xserver の静的ファイルキャッシュが効いていて、
     同じファイル名で中身だけ差し替えても古い画像が配信され続ける（2026-08-20 に実際に発生。
     サーバー上のファイルは新しいのに、ブラウザには前の画像が返ってきた）。
     画像を作り直したら、この数字を1つ上げること。
   -------------------------------------------------------------------- */

body::before,
body::after {
	content: ""; position: fixed; inset: 0; pointer-events: none;
}
body::before {
	z-index: -2;
	background: url("../img/bg-lotus.jpg?v=4") center center / cover no-repeat;
	opacity: .42;
}
body::after {
	z-index: -1;
	background:
		radial-gradient(130% 90% at 50% 0%,
			rgba(8, 8, 8, .22) 0%, rgba(8, 8, 8, .62) 55%, rgba(8, 8, 8, .84) 100%);
}
@media (max-width: 768px) {
	/* スマホは縦長なので、横位置ではなく縦位置で構図を取った画像へ差し替える */
	body::before { background-image: url("../img/bg-lotus-sp.jpg?v=4"); opacity: .40; }
}

img, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s ease, opacity .3s ease; }
a:hover { color: var(--gold-bright); }
ul, ol { list-style: none; margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
h1, h2, h3, h4, p, dl, dd { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { width: min(100% - 48px, var(--wrap)); margin-inline: auto; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.skip-link:focus {
	position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto;
	background: var(--gold); color: #000; padding: 8px 16px; z-index: 9999;
}

/* スクロールで浮かび上がる要素。
   重要: 既定では表示したままにし、JSが確実に動くと分かった時（htmlに .js-reveal が付いた時）
   だけ隠す。こうしておけば、JSが読めない・止まった環境でも中身が消えることはない。
   さらに lounge.js 側で3秒後に強制表示する保険も入れている。 */
.reveal { opacity: 1; transform: none; }
.js-reveal .reveal { opacity: 0; transform: translateY(30px); }
.js-reveal .reveal.is-in {
	opacity: 1; transform: none;
	transition: opacity .9s ease, transform .9s ease;
}

/* ---------- ヘッダー -------------------------------------------------- */

.site-head {
	position: fixed; inset: 0 0 auto; z-index: 100;
	height: var(--head-h);
	background: transparent;
	transition: background .4s ease, height .4s ease;
}
.site-head.is-scrolled {
	background: rgba(8, 8, 8, .92);
	height: 64px;
	border-bottom: 1px solid rgba(200, 164, 92, .22);
}
.site-head__inner {
	width: min(100% - 40px, 1440px); height: 100%; margin-inline: auto;
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-head__logo a { display: flex; flex-direction: column; line-height: 1.2; }
.logo-en {
	font-family: var(--font-en); font-size: 22px; letter-spacing: .22em;
	color: var(--gold); text-transform: uppercase;
}
.logo-ja { font-family: var(--font-mc); font-size: 10px; letter-spacing: .3em; color: var(--text-dim); }

/* ロゴ画像。高さで揃え、幅は自動にして比率を保つ */
.logo-img { height: 46px; width: auto; transition: height .4s ease; }
.site-head.is-scrolled .logo-img { height: 38px; }
.logo-img--foot { height: 58px; margin-inline: auto; }

.gnav { display: flex; align-items: center; gap: 32px; }
.gnav__list { display: flex; align-items: center; gap: 28px; }
.gnav__list a {
	font-family: var(--font-en); font-size: 14px; letter-spacing: .18em;
	text-transform: uppercase; position: relative; padding-bottom: 4px;
}
.gnav__list a::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
	background: var(--gold); transition: width .3s ease;
}
.gnav__list a:hover::after { width: 100%; }
.gnav__tel a { font-family: var(--font-en); font-size: 17px; letter-spacing: .1em; color: var(--gold); }

.navtoggle { display: none; width: 40px; height: 40px; position: relative; }
.navtoggle__bar {
	position: absolute; left: 8px; width: 24px; height: 1px; background: var(--text);
	transition: transform .3s ease, opacity .3s ease;
}
.navtoggle__bar:nth-child(1) { top: 16px; }
.navtoggle__bar:nth-child(2) { top: 24px; }
.navtoggle.is-open .navtoggle__bar:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.navtoggle.is-open .navtoggle__bar:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- ヒーロー -------------------------------------------------- */

.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
/* 明るさ・彩度の補正は動画側に焼き込み済み（build_header_video.py）。
   CSSのbrightnessで暗部を持ち上げると圧縮ノイズが増幅されて見えるため、
   ここではfilterを掛けない（2026-08-12） */
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__video--placeholder {
	display: block; width: 100%; height: 100%;
	background: radial-gradient(ellipse at 50% 40%, #241d12 0%, #0b0b0b 70%);
}
.hero__veil {
	position: absolute; inset: 0;
	/* 中央にだけ暗さを足してロゴの可読性を確保しつつ、周辺は店内が見えるようにする */
	background:
		radial-gradient(ellipse 70% 55% at 50% 48%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%),
		linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 42%, rgba(0,0,0,.8) 100%);
}
.hero__body {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; text-align: center; padding: 0 24px;
}
.hero__logo { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* ヒーローのロゴ画像。画面の高さと幅の両方に収まるよう上限を2つ設ける */
.hero__logo-img {
	width: auto; max-width: min(78vw, 520px); max-height: 62svh;
	filter: drop-shadow(0 4px 26px rgba(0, 0, 0, .85));
}
/* 背景の明るい部分に文字が重なっても読めるようにする */
.hero__en, .hero__ja, .hero__catch { text-shadow: 0 2px 30px rgba(0, 0, 0, .95), 0 0 8px rgba(0, 0, 0, .6); }
.site-head:not(.is-scrolled) .site-head__logo, .site-head:not(.is-scrolled) .gnav__list {
	text-shadow: 0 1px 16px rgba(0, 0, 0, .9);
}
.hero__en {
	font-family: var(--font-en); font-weight: 300;
	font-size: clamp(30px, 6.4vw, 74px); letter-spacing: .3em;
	text-indent: .3em; color: var(--gold); line-height: 1.1;
}
.hero__ja {
	font-family: var(--font-mc); font-size: clamp(11px, 1.6vw, 14px);
	letter-spacing: .5em; text-indent: .5em; color: var(--text-dim);
}
.hero__catch {
	margin-top: 28px; font-family: var(--font-mc);
	font-size: clamp(13px, 2vw, 17px); letter-spacing: .24em; text-indent: .24em;
}
.hero__scroll {
	position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__scroll-text { font-family: var(--font-en); font-size: 11px; letter-spacing: .3em; color: var(--text-dim); }
.hero__scroll-line { width: 1px; height: 54px; background: linear-gradient(180deg, var(--gold), transparent); }

/* ---------- セクション共通 -------------------------------------------- */

.sec { padding: 120px 0; }
/* 交互に敷く黒。濃くしすぎると背景の蓮が消えてセクションの境目が硬い線になるので、
   蓮がうっすら残る濃さに留めている（2026-08-20 に .58 から下げた） */
.sec:nth-of-type(even) { background: rgba(14, 14, 14, .42); }
.sec--concept { background: transparent; }

.sec-head { text-align: center; margin-bottom: 56px; }
/* 欧文と和文の2行をまとめて包む h2。見出しのテキストを両方とも h2 の中に置くための器で、
   見た目は持たせない（サイズと太さは中の span 側で決める）。 */
.sec-head__ttl { margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: 400; }
.sec-head__en {
	display: block;
	font-family: var(--font-en); font-weight: 300;
	font-size: clamp(28px, 4.2vw, 46px); letter-spacing: .3em; text-indent: .3em;
	color: var(--gold); line-height: 1.15;
}
/* 大きな欧文だけ金の箔押しにする。和文や小さい文字に掛けると潰れて読めない */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sec-head__en {
		background-image: var(--foil);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
	}
}
.sec-head__ja {
	display: block;
	margin-top: 14px; font-family: var(--font-mc); font-size: 12px;
	letter-spacing: .34em; text-indent: .34em; color: var(--text-dim);
}
/* 直線1本から、中央に菱形を置いた飾り罫へ差し替えた（2026-08-20） */
.sec-head::after {
	content: ""; display: block; width: 240px; height: 16px; margin: 26px auto 0;
	background: var(--ornament) center / contain no-repeat;
}
.sec__lead { text-align: center; color: var(--text-dim); margin-bottom: 40px; }
.sec__more { text-align: center; margin-top: 56px; }
.empty { text-align: center; color: var(--text-dim); padding: 40px 0; }

.btn-gold {
	display: inline-block; position: relative; padding: 16px 52px;
	border: 1px solid var(--gold-dim);
	font-family: var(--font-en); font-size: 13px; letter-spacing: .26em; text-indent: .26em;
	color: var(--gold); overflow: hidden;
}
.btn-gold__line {
	position: absolute; inset: 0; background: var(--gold);
	transform: scaleX(0); transform-origin: right center; transition: transform .4s ease; z-index: -1;
}
.btn-gold { z-index: 0; }
.btn-gold:hover { color: #0b0b0b; border-color: var(--gold); }
.btn-gold:hover .btn-gold__line { transform: scaleX(1); transform-origin: left center; }

/* 画像が無いときのプレースホルダ */
.ph {
	display: flex; align-items: center; justify-content: center;
	width: 100%; aspect-ratio: 3 / 4;
	background: linear-gradient(145deg, #1a1a1a, #0e0e0e);
	border: 1px solid rgba(200, 164, 92, .16);
}
.ph__mark { font-family: var(--font-en); font-size: 12px; letter-spacing: .24em; color: var(--gold-dim); }

/* ---------- CONCEPT --------------------------------------------------- */

.concept { max-width: 720px; margin-inline: auto; text-align: center; }
.concept__lead {
	font-family: var(--font-mc); font-size: clamp(18px, 3vw, 26px);
	letter-spacing: .18em; margin-bottom: 28px;
}
.concept__text { color: var(--text-dim); text-align: left; }
/* コンセプト下の解説ブロック（何の店か・いつ使うか・場所・料金・初めての方へ）。
   見出しは ACCESS や SYSTEM と同じ .blockttl を使い、作法を揃えている */
.concept__detail { margin-top: 56px; text-align: left; }
.concept__detail .blockttl { margin-top: 40px; }
.concept__detail .blockttl:first-child { margin-top: 0; }
.concept__detail .concept__text { margin: 0 0 1.6em; }
.concept__detail a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.concept__detail a:hover { color: var(--gold-bright); }
.concept__note { margin-top: 32px; font-size: 12px; color: var(--gold-dim); }

/* ---------- NEWS ------------------------------------------------------ */

.newslist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.newslist__item a { display: block; }
.newslist__thumb { display: block; overflow: hidden; margin-bottom: 16px; }
.newslist__thumb img, .newslist__thumb .ph {
	width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
	transition: transform .6s ease;
}
.newslist__item a:hover .newslist__thumb img { transform: scale(1.05); }
.newslist__date {
	display: block; font-family: var(--font-en); font-size: 13px;
	letter-spacing: .18em; color: var(--gold);
}
.newslist__title { display: block; margin-top: 6px; font-size: 15px; line-height: 1.8; }

/* 一覧ページ用の行タイプ */
.newsrows { border-top: 1px solid rgba(200,164,92,.18); }
.newsrows__item { border-bottom: 1px solid rgba(200,164,92,.18); }
.newsrows__item a { display: flex; gap: 28px; align-items: center; padding: 24px 8px; text-decoration: none; }
.newsrows__thumb { flex: 0 0 140px; }
.newsrows__thumb img, .newsrows__thumb .ph { width: 140px; aspect-ratio: 4 / 3; object-fit: cover; }
.newsrows__body { display: block; flex: 1 1 auto; min-width: 0; }
.newsrows__date {
	display: block; font-family: var(--font-en); font-size: 13px;
	letter-spacing: .16em; color: var(--gold);
}
.newsrows__title { display: block; margin-top: 4px; font-size: 16px; line-height: 1.7; }
.newsrows__excerpt { display: block; margin-top: 6px; font-size: 13px; color: var(--text-dim); line-height: 1.8; }

/* ---------- CAST ------------------------------------------------------ */

.castgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.castgrid__thumb { display: block; overflow: hidden; position: relative; }
.castgrid__thumb img, .castgrid__thumb .ph, .castgrid__thumb .cast-video {
	width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
	transition: transform .7s ease, filter .7s ease;
	filter: grayscale(.15);
}
.castgrid__item a:hover .castgrid__thumb img,
.castgrid__item a:hover .castgrid__thumb .cast-video { transform: scale(1.06); filter: none; }

/* 動画を設定したキャストの表示。写真と同じ枠に収める */
.cast-video { display: block; background: #101010; }
.castdetail__main .cast-video { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.castgrid__name {
	display: block; margin-top: 14px; text-align: center;
	font-family: var(--font-mc); font-size: 15px; letter-spacing: .18em;
}

/* キャスト詳細 */
.castdetail { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.castdetail__main img, .castdetail__main .ph { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.castdetail__sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.castdetail__sub img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* キャスト名。欧文（ローマ字）を大きく、和名を小さく添える。
   TOPの .sec-head と同じ作法に揃えたもの（2026-08-20 刷新） */
/* キャスト個別ページの名前。ページの主題なので h1 で出している。
   欧文・和文それぞれの大きさは下の2つで決めるため、器側は継承に戻す */
.castdetail__name { margin: 0; font-size: inherit; font-weight: 400; }
.castdetail__en {
	display: block; font-family: var(--font-en); font-weight: 300;
	font-size: clamp(30px, 4.4vw, 46px); letter-spacing: .26em; text-indent: .26em;
	color: var(--gold); line-height: 1.1;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.castdetail__en {
		background-image: var(--foil);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
	}
}
.castdetail__ja {
	display: block; position: relative; margin-top: 16px; padding-top: 18px;
	font-family: var(--font-mc); font-size: 15px;
	letter-spacing: .3em; text-indent: .3em; color: var(--text);
}
/* 和名の上に細い金の罫を引く。飾り罫だと写真の横で主張が強すぎるので、
   ここは左端から伸びる1本線にしている */
.castdetail__ja::before {
	content: ""; position: absolute; top: 0; left: 0; width: 78px; height: 1px;
	background: linear-gradient(90deg, var(--gold), rgba(200, 164, 92, 0));
}
/* 背景の蓮の上でも読めるように、文字の後ろだけ柔らかく暗くする。
   縁が見えると板を貼ったように見えるので、外へ向けて透明に抜くグラデーションにしている。
   セクション全体を暗くしないのは、蓮を消したくないため（2026-08-20 追加） */
.castdetail__body { position: relative; }
.castdetail__body::before {
	content: ""; position: absolute; inset: -32px -36px; z-index: -1; pointer-events: none;
	background: radial-gradient(115% 100% at 50% 50%,
		rgba(6, 6, 6, .78) 0%, rgba(6, 6, 6, .62) 52%, rgba(6, 6, 6, 0) 100%);
}
.castdetail__profile { margin-top: 36px; border-top: 1px solid rgba(200,164,92,.2); }
.castdetail__profile div {
	display: flex; gap: 20px; padding: 14px 4px;
	border-bottom: 1px solid rgba(200,164,92,.2);
}
.castdetail__profile dt {
	flex: 0 0 7em; font-family: var(--font-mc); font-size: 13px;
	letter-spacing: .16em; color: var(--gold-dim);
}
.castdetail__profile dd { margin: 0; font-size: 14px; color: var(--text); }
.castdetail__comment { margin-top: 36px; color: var(--text-dim); }
.castdetail__comment p { margin: 0 0 1em; }

/* ---------- GALLERY --------------------------------------------------- */

.gallerygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallerygrid__item { overflow: hidden; }
.gallerygrid__item img {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
	transition: transform .7s ease; cursor: zoom-in;
}
.gallerygrid__item img:hover { transform: scale(1.05); }

/* ライトボックス */
.lightbox {
	position: fixed; inset: 0; z-index: 200; display: none;
	align-items: center; justify-content: center; background: rgba(0,0,0,.92); padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; }
.lightbox__close {
	position: absolute; top: 20px; right: 24px;
	font-family: var(--font-en); font-size: 14px; letter-spacing: .2em; color: var(--gold);
}

/* ---------- SYSTEM ---------------------------------------------------- */

.ratetable { max-width: 760px; margin-inline: auto; }
.ratetable table { border-top: 1px solid rgba(200,164,92,.22); }
.ratetable th, .ratetable td {
	padding: 20px 12px; border-bottom: 1px solid rgba(200,164,92,.22);
	text-align: left; font-weight: 400;
}
.ratetable th { font-family: var(--font-mc); letter-spacing: .16em; width: 40%; }
.ratetable__time { color: var(--text-dim); font-size: 14px; width: 25%; }
.ratetable__price {
	text-align: right; font-family: var(--font-en); font-size: 20px;
	letter-spacing: .1em; color: var(--gold);
}
.ratetable__note { margin-top: 20px; font-size: 12px; color: var(--text-dim); text-align: right; }

/* ---------- ACCESS ---------------------------------------------------- */

.access { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.access__map { aspect-ratio: 1 / 1; }
/* 地図は色を落とさずそのまま出す。
   以前は黒背景に合わせて grayscale と invert をかけていたが、
   それだと店舗を示す赤いピンまで灰色になり、場所が分からなくなるため外した。 */
.access__map { position: relative; }
.access__map iframe {
	display: block; width: 100%; height: 100%;
	border: 1px solid rgba(200, 164, 92, .35);
	/* 地図自体は動かせないようにする。動かせるとピンの位置だけ中央に
	   取り残されて実際の場所とずれてしまうため。操作は下のリンクへ委ねる */
	pointer-events: none;
}

/* 店舗の位置を示すピン。ピン全体がリンクになっていて、
   押すとGoogleマップの経路案内が開く。

   【赤マーカー隠しの契約 - 崩すと再発するので変更時は必ず守ること】
   埋め込み地図は q=座標 指定のため、Googleの赤マーカー（約27x43px）が
   「先端＝地図中心」に必ず立つ。iframe は pointer-events:none で操作不能、
   座標も固定なので、赤マーカーの位置は地図中心から絶対にずれない。
   よって金ピンも「先端＝地図中心」に固定し、赤より一回り大きい 48x68px に
   することで、幾何学的に必ず全体を覆う（余白: 左右約10px・上25px）。
   - ピンの位置を flex や translateY の目分量合わせに戻さないこと
   - ピンを 44x62px より小さくしないこと
   - ホバー等の動きは transform-origin を先端(50% 100%)に固定した
     scale だけにすること（translate で動かすと先端が中心から離れて赤が出る） */
.access__pin {
	position: absolute; inset: 0; z-index: 2;
	display: block; text-decoration: none;
}
.access__pin svg {
	position: absolute; left: 50%; top: 50%;
	width: 48px; height: 68px;
	/* 先端(SVG下端)を地図中心＝赤マーカーの先端と同じ点に固定する */
	transform: translate(-50%, -100%);
	transform-origin: 50% 100%;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
	transition: transform .3s ease;
}
/* 先端を固定したまま少しふくらませる。translateで持ち上げないこと */
.access__pin:hover svg { transform: translate(-50%, -100%) scale(1.06); }
.access__pin-label {
	position: absolute; left: 50%; top: 50%;
	transform: translateX(-50%);
	margin-top: 10px;
	font-family: var(--font-en); font-size: 13px; letter-spacing: .12em;
	color: #0b0b0b; background: rgba(200, 164, 92, .95);
	padding: 3px 12px; white-space: nowrap;
}
.access__info { border-top: 1px solid rgba(200,164,92,.2); }
.access__info dt {
	font-family: var(--font-mc); font-size: 12px; letter-spacing: .2em;
	color: var(--gold-dim); padding-top: 16px;
}
.access__info dd { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid rgba(200,164,92,.2); }

/* ---------- INSTAGRAM ------------------------------------------------- */

.insta__link { text-align: center; font-family: var(--font-en); font-size: 20px; letter-spacing: .2em; color: var(--gold); }
.insta__embed { margin-top: 32px; display: flex; justify-content: center; }

/* ---------- 下層ページ共通 -------------------------------------------- */

.pagehead {
	padding: calc(var(--head-h) + 90px) 0 60px;
	text-align: center; border-bottom: 1px solid rgba(200,164,92,.16);
	background: linear-gradient(180deg, rgba(20, 18, 16, .82) 0%, rgba(11, 11, 11, .32) 100%);
}
/* .sec-head__ttl と同じ考え方の器。見出しのテキストを欧文・和文とも h1 の中に入れる */
.pagehead__ttl { margin: 0; padding: 0; border: 0; font-size: inherit; font-weight: 400; }
.pagehead__en {
	display: block;
	font-family: var(--font-en); font-weight: 300;
	font-size: clamp(32px, 5.2vw, 56px); letter-spacing: .3em; text-indent: .3em;
	color: var(--gold); line-height: 1.1;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.pagehead__en {
		background-image: var(--foil);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
	}
}
/* 和文の上に飾り罫を出す。帯（.pagehead__banner）が見出しの後ろに来るので、
   .pagehead::after ではなくこちらに付けないと順番がずれる */
.pagehead__ja {
	display: block;
	position: relative; margin-top: 10px; padding-top: 34px;
	font-family: var(--font-mc); font-size: 12px; letter-spacing: .32em; text-indent: .32em;
	color: var(--text-dim);
}
.pagehead__ja::before {
	content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
	width: 240px; height: 16px;
	background: var(--ornament) center / contain no-repeat;
}

/* 見出し下のイメージ画像（帯）。
   固定ページのアイキャッチを全幅で敷く。画像は横長(21:9)で作り、
   object-fit: cover で切り出す。位置を上寄せ(30%)にしているのは、
   人物の頭が切れないようにするため。 */
.pagehead__banner {
	margin-top: 40px;
	width: 100%;
	/* 当初の設定に戻した（2026-08-08 ユーザー指示）。
	   一度は 21:9 -> 2:1 -> 16:9 と帯を大きくしたが、元の高さ固定へ戻している。 */
	height: 260px;
	overflow: hidden; position: relative;
}
.pagehead__banner img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center 30%;
	display: block;
}
/* 上下端に黒をかけて、見出しと本文へ自然につなげる */
.pagehead__banner::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%,
		rgba(0,0,0,0) 74%, rgba(0,0,0,.65) 100%);
}
/* 帯があるときは見出しの下線を消す（線と画像が二重に見えるため） */
.pagehead:has(.pagehead__banner) { border-bottom: 0; padding-bottom: 0; }

@media (max-width: 768px) {
	/* スマホは縦が長いので低く保つ */
	.pagehead__banner { height: 160px; margin-top: 28px; }
}

/* 下層ページの中見出し（欧文を大きく、和文を小さく添える二段構え）。
   TOPの .sec-head と同じ作法を、本文の中でも使えるようにしたもの。 */
.secttl { text-align: center; margin: 0 auto 34px; }
.secttl__en {
	display: block; font-family: var(--font-en); font-weight: 300;
	font-size: clamp(22px, 3.4vw, 34px); letter-spacing: .3em; text-indent: .3em;
	color: var(--gold); line-height: 1.15;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.secttl__en {
		background-image: var(--foil);
		-webkit-background-clip: text; background-clip: text;
		color: transparent; -webkit-text-fill-color: transparent;
	}
}
.secttl__ja {
	display: block; margin-top: 12px; font-family: var(--font-mc); font-size: 12px;
	letter-spacing: .34em; text-indent: .34em; color: var(--text-dim);
}
.secttl::after {
	content: ""; display: block; width: 240px; height: 16px; margin: 22px auto 0;
	background: var(--ornament) center / contain no-repeat;
}

/* 左に縦罫を引くだけの中見出し。ACCESS と SYSTEM で使う。
   以前は各テンプレートに style 属性で直書きしていたものを共通化した（2026-08-20）。 */
.blockttl {
	position: relative; margin: 0 0 22px; padding-left: 20px;
	font-family: var(--font-mc); font-size: 19px; letter-spacing: .16em;
	color: var(--gold); line-height: 1.6; border: 0;
}
.blockttl::before {
	content: ""; position: absolute; left: 0; top: .5em; width: 9px; height: 9px;
	border: 1px solid var(--gold); transform: rotate(45deg);
}
.blockttl::after {
	content: ""; position: absolute; left: 4px; top: calc(.5em + 14px); bottom: 2px;
	width: 1px; background: linear-gradient(180deg, var(--gold-dim), transparent);
}

.pagebody { padding: 90px 0 120px; }
.pagebody h2 {
	font-family: var(--font-mc); font-size: 22px; letter-spacing: .16em;
	color: var(--gold); margin: 56px 0 20px; padding-left: 14px; border-left: 2px solid var(--gold-dim);
}
.pagebody h3 { font-family: var(--font-mc); font-size: 17px; letter-spacing: .14em; margin: 32px 0 12px; }
.pagebody p { margin: 0 0 1.6em; color: var(--text-dim); }
/* 下線は本文（記事の中身）のリンクにだけ付ける。
   一覧のカードやボタンまで下線が付くと崩れるので範囲を限定している */
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }

/* 一覧・詳細で使う見出しは本文用のh2スタイルを引き継がない
   （.pagebody h2 より詳細度を高くする必要があるので .pagebody を前に付ける） */
.pagebody .castdetail__name, .pagebody .sec-head__ttl {
	border-left: 0; padding-left: 0; margin: 0;
}
.pagebody .secttl { border-left: 0; padding-left: 0; margin: 0 auto 34px; }
.pagebody .blockttl { border-left: 0; padding-left: 20px; }

/* パンくず。見出し帯の直下に細く敷く。
   検索結果に階層が出るようにするのが主目的なので、装飾は最小限にとどめる。 */
.crumb { padding: 16px 0 0; }
.crumb__list {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	margin: 0; padding: 0; list-style: none;
	font-size: 12px; letter-spacing: .08em; color: var(--text-dim);
}
.crumb__item { display: flex; align-items: center; gap: 8px; }
/* 区切りは項目の前に置く。先頭（ホーム）にだけ出ないようにする */
.crumb__item + .crumb__item::before {
	content: ""; width: 5px; height: 5px; flex: none;
	border-top: 1px solid var(--gold-dim); border-right: 1px solid var(--gold-dim);
	transform: rotate(45deg);
}
.crumb__item a { color: var(--text-dim); }
.crumb__item a:hover { color: var(--gold-bright); }
.crumb__item--current { color: var(--gold); }

/* ページャ */
.pager { display: flex; justify-content: center; gap: 12px; margin-top: 64px; }
.pager .page-numbers {
	display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px;
	border: 1px solid rgba(200,164,92,.3); font-family: var(--font-en); font-size: 14px;
}
.pager .page-numbers.current, .pager .page-numbers:hover { background: var(--gold); color: #0b0b0b; }

/* 求人 */
.recruit-table { max-width: 820px; margin-inline: auto; border-top: 1px solid rgba(200,164,92,.22); }
.recruit-table th, .recruit-table td {
	padding: 18px 12px; border-bottom: 1px solid rgba(200,164,92,.22);
	text-align: left; vertical-align: top; font-weight: 400;
}
.recruit-table th {
	width: 12em; font-family: var(--font-mc); font-size: 13px;
	letter-spacing: .16em; color: var(--gold-dim);
}

/* 待遇（カードで並べる） */
.recruit-perks { max-width: 820px; margin: 72px auto 0; }
.recruit-perks__list {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
	list-style: none; margin: 0; padding: 0;
}
.recruit-perks__item {
	position: relative; padding: 18px 10px;
	border: 1px solid rgba(200, 164, 92, .26);
	background: rgba(8, 8, 8, .45);
	text-align: center; font-size: 13px; line-height: 1.5; letter-spacing: .04em;
}
/* 内側にもう1本細い罫を入れて二重枠にする */
.recruit-perks__item::before {
	content: ""; position: absolute; inset: 4px;
	border: 1px solid rgba(200, 164, 92, .12); pointer-events: none;
}

/* 当店の働き方（待遇1つずつの解説） */
.recruit-points { max-width: 820px; margin: 72px auto 0; }
.recruit-points__item {
	padding: 24px 0; border-bottom: 1px solid rgba(200, 164, 92, .18);
}
.recruit-points__item:first-of-type { border-top: 1px solid rgba(200, 164, 92, .18); }
.recruit-points__ttl {
	position: relative; margin: 0 0 12px; padding: 0 0 0 24px; border: 0;
	font-family: var(--font-mc); font-size: 16px; letter-spacing: .08em;
	color: var(--gold-bright); line-height: 1.6;
}
.recruit-points__ttl::before {
	content: ""; position: absolute; left: 2px; top: .62em;
	width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg);
}
.recruit-points__body { padding-left: 24px; }
.recruit-points__body { margin: 0; font-size: 14px; line-height: 2; color: var(--text-dim); }

/* 体験入店について */
.recruit-trial { max-width: 820px; margin: 72px auto 0; }
.recruit-trial__lead {
	margin: 0 0 28px; font-size: 14px; line-height: 2; color: var(--text-dim); text-align: center;
}

/* よくあるご質問 */
.recruit-faq { max-width: 820px; margin: 72px auto 0; }
.recruit-faq__item {
	padding: 22px 0; border-bottom: 1px solid rgba(200, 164, 92, .18);
}
.recruit-faq__item:first-of-type { border-top: 1px solid rgba(200, 164, 92, .18); }
.recruit-faq__q {
	margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--text);
	padding-left: 1.6em; text-indent: -1.6em;
}
.recruit-faq__q::before {
	content: "Q."; margin-right: .6em; font-family: var(--font-en);
	color: var(--gold); letter-spacing: .04em;
}
.recruit-faq__a {
	margin: 0; font-size: 14px; line-height: 2; color: var(--text-dim);
	padding-left: 1.6em; text-indent: -1.6em;
}
.recruit-faq__a::before {
	content: "A."; margin-right: .6em; font-family: var(--font-en);
	color: var(--gold-dim); letter-spacing: .04em;
}

/* 求人ページの電話番号（応募はフォームではなく電話のみ） */
.recruit-tel {
	position: relative; max-width: 720px; margin: 80px auto 0; padding: 52px 28px;
	border: 1px solid rgba(200, 164, 92, .30);
	background: rgba(8, 8, 8, .50);
	text-align: center;
}
/* 内側にもう1本細い罫を入れて二重枠にする */
.recruit-tel::before {
	content: ""; position: absolute; inset: 7px;
	border: 1px solid rgba(200, 164, 92, .14); pointer-events: none;
}
.recruit-tel > * { position: relative; }
.recruit-tel__ttl {
	font-family: var(--font-mc); font-size: 19px; letter-spacing: .18em;
	color: var(--gold); border: 0; padding: 0; margin: 0 0 18px;
}
.recruit-tel__ttl::after {
	content: ""; display: block; width: 200px; height: 16px; margin: 16px auto 0;
	background: var(--ornament) center / contain no-repeat;
}
.recruit-tel__lead { color: var(--text-dim); font-size: 14px; margin-bottom: 22px; }
.recruit-tel__num {
	display: inline-block; font-family: var(--font-en);
	font-size: clamp(34px, 6vw, 50px); letter-spacing: .06em; color: var(--gold);
	line-height: 1.1;
}
.recruit-tel__num:hover { color: var(--gold-bright); }
.recruit-tel__num--off { font-family: var(--font-mc); font-size: 26px; opacity: .6; }
.recruit-tel__note { margin-top: 16px; font-size: 12px; color: var(--text-dim); }

/* 求人ページのLINE導線（電話の枠の中に置く） */
.recruit-line {
	margin-top: 38px; padding-top: 32px;
	border-top: 1px solid rgba(200, 164, 92, .20);
}
.recruit-line__ttl {
	font-family: var(--font-mc); font-size: 15px; letter-spacing: .16em; color: var(--gold);
}
.recruit-line__lead { margin-top: 8px; font-size: 13px; color: var(--text-dim); }
/* QRとボタンは横に並べない。横並びにすると2つで1組の中央揃えになり、
   QR単体は中央から左へずれる（2026-08-20 PC表示で発生）。
   幅を問わず縦積みにして、それぞれを中央に置く。 */
.recruit-line__body {
	margin-top: 26px; display: flex; flex-direction: column;
	align-items: center; gap: 26px;
}
/* QRは白地のまま出す。反転させると読み取れない端末があるため色は変えない */
.recruit-line__qr { margin: 0; text-align: center; align-self: center; }
/* img の既定は display:block なので、親が横幅いっぱいに伸びると左に寄る。
   自分で左右autoの余白を持たせて、どの幅でも中央に来るようにしておく（2026-08-20 修正） */
.recruit-line__qr img {
	width: 148px; height: 148px; padding: 8px; background: #fff;
	border: 1px solid rgba(200, 164, 92, .35);
	box-sizing: content-box; margin-inline: auto;
}
.recruit-line__qr figcaption {
	margin-top: 10px; font-size: 11px; letter-spacing: .06em; color: var(--text-dim);
}
.recruit-line__act { max-width: 320px; margin-inline: auto; text-align: center; align-self: center; }
.recruit-line__note { margin-top: 14px; font-size: 11px; line-height: 1.9; color: var(--text-dim); }

.btn-line {
	display: inline-block; padding: 15px 34px;
	border: 1px solid #06c755; color: #06c755;
	font-family: var(--font-mc); font-size: 14px; letter-spacing: .14em;
	transition: background .3s ease, color .3s ease;
}
.btn-line:hover { background: #06c755; color: #06231a; }

/* フォーム（Contact Form 7） */
.formwrap { max-width: 720px; margin-inline: auto; }
.formwrap label { display: block; margin-bottom: 24px; font-size: 13px; letter-spacing: .12em; color: var(--gold-dim); }
.formwrap input[type=text], .formwrap input[type=email], .formwrap input[type=tel],
.formwrap input[type=date], .formwrap select, .formwrap textarea {
	width: 100%; margin-top: 8px; padding: 14px 16px;
	background: rgba(255,255,255,.04); border: 1px solid rgba(200,164,92,.28);
	color: var(--text); font: inherit; border-radius: 0;
}
.formwrap textarea { min-height: 170px; resize: vertical; }
.formwrap input:focus, .formwrap select:focus, .formwrap textarea:focus {
	outline: 0; border-color: var(--gold);
}
.formwrap input[type=submit], .formwrap button[type=submit] {
	display: block; margin: 8px auto 0; padding: 16px 64px;
	background: transparent; border: 1px solid var(--gold);
	color: var(--gold); font-family: var(--font-en); font-size: 14px;
	letter-spacing: .26em; cursor: pointer; transition: background .3s ease, color .3s ease;
}
.formwrap input[type=submit]:hover { background: var(--gold); color: #0b0b0b; }
.formwrap .form-note { font-size: 12px; color: var(--text-dim); text-align: center; margin-top: 24px; }

/* ---------- フッター -------------------------------------------------- */

.site-foot { border-top: 1px solid rgba(200,164,92,.2); padding: 72px 0 100px; background: rgba(8, 8, 8, .62); }
.site-foot__inner { width: min(100% - 48px, var(--wrap)); margin-inline: auto; text-align: center; }
.site-foot__logo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 36px; }
.site-foot__logo .logo-en { font-size: 26px; }
.site-foot__info {
	display: grid; grid-template-columns: auto auto; gap: 4px 20px;
	justify-content: center; margin-bottom: 36px; font-size: 13px;
}
.site-foot__info dt { font-family: var(--font-mc); color: var(--gold-dim); text-align: right; }
.site-foot__info dd { margin: 0; text-align: left; color: var(--text-dim); }
.site-foot__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-bottom: 32px; }
.site-foot__list a { font-family: var(--font-en); font-size: 13px; letter-spacing: .18em; }
/* GALLERY の説明文。写真の上に置く導入文 */
.gallery-intro {
	max-width: 760px; margin: 0 auto 56px;
	color: var(--text-dim); line-height: 2;
}
.gallery-intro p { margin: 0 0 1.6em; }
.gallery-intro p:last-child { margin-bottom: 0; }
.gallery-intro a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.gallery-intro a:hover { color: var(--gold-bright); }

.site-foot__about {
	max-width: 560px; margin: 0 auto 20px;
	font-size: 12px; line-height: 2; letter-spacing: .06em; color: var(--text-dim);
}
.site-foot__about a { color: var(--gold); }
.site-foot__about a:hover { color: var(--gold-bright); }
.site-foot__copy { font-family: var(--font-en); font-size: 11px; letter-spacing: .24em; color: var(--text-dim); }

/* ---------- 画面下に追尾する固定バー ---------------------------------- */
/* スクロールを始めると下からせり上がって出てくる。PC・スマホ共通。
   バーの分だけフッターに余白を足してあるので、内容が隠れることはない。 */

.fixbar {
	position: fixed; inset: auto 0 0; z-index: 120;
	display: flex; align-items: stretch;
	background: rgba(10, 10, 10, .96);
	border-top: 1px solid rgba(200, 164, 92, .35);
	backdrop-filter: blur(6px);
	transform: translateY(110%);
	transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}
.fixbar.is-visible { transform: none; }

.fixbar__item {
	flex: 1 1 0; min-width: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 3px; padding: 12px 8px; text-align: center;
	transition: background .3s ease, color .3s ease;
}
.fixbar__item + .fixbar__item { border-left: 1px solid rgba(200, 164, 92, .22); }
.fixbar__item:hover { background: rgba(200, 164, 92, .1); }

.fixbar__en {
	font-family: var(--font-en); font-size: 13px; letter-spacing: .22em;
	text-indent: .22em; color: var(--gold);
}
.fixbar__ja {
	font-size: 12px; letter-spacing: .04em; color: var(--text-dim);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* 電話番号が未設定のときの非活性表示 */
.fixbar__item--off { cursor: default; opacity: .5; }
.fixbar__item--off:hover { background: none; }

/* LINEは公式色を少しだけ使う */
.fixbar__item--line .fixbar__en { color: #06c755; }


/* バーに隠れないようフッター下部に余白を確保する */
.site-foot { padding-bottom: 130px; }

/* =========================================================================
   レスポンシブ
   ====================================================================== */

@media (max-width: 1024px) {
	.castgrid { grid-template-columns: repeat(3, 1fr); }
	.castdetail { grid-template-columns: 1fr; gap: 40px; }
	.access { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 768px) {
	body { font-size: 14px; line-height: 1.95; }
	:root { --head-h: 64px; }

	.sec { padding: 72px 0; }
	.sec-head { margin-bottom: 40px; }

	/* ロゴが2行に折り返さないよう小さくする */
	.site-head__logo .logo-en { font-size: 16px; letter-spacing: .14em; }
	.site-head__logo .logo-ja { font-size: 9px; letter-spacing: .24em; }

	/* ナビをドロワーにする */
	.navtoggle { display: block; }
	.gnav {
		position: fixed; inset: 0; z-index: 90;
		flex-direction: column; justify-content: center; gap: 36px;
		background: rgba(8,8,8,.97);
		opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease;
	}
	.gnav.is-open { opacity: 1; visibility: visible; }
	.gnav__list { flex-direction: column; gap: 26px; text-align: center; }
	.gnav__list a { font-size: 16px; }
	.navtoggle { position: relative; z-index: 95; }

	.newslist { grid-template-columns: 1fr; gap: 28px; }
	.newsrows__item a { flex-direction: row; gap: 16px; padding: 18px 4px; align-items: flex-start; }
	.newsrows__thumb { flex: 0 0 96px; }
	.newsrows__thumb img, .newsrows__thumb .ph { width: 96px; }

	.castgrid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
	.gallerygrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.castdetail__sub { gap: 8px; }

	.ratetable th, .ratetable td { padding: 14px 6px; font-size: 13px; }
	.ratetable__price { font-size: 17px; }
	.ratetable th { width: 45%; }
	.ratetable__time { display: none; }

	.recruit-table th, .recruit-table td { display: block; width: auto; padding: 10px 4px; }
	.recruit-table th { border-bottom: 0; padding-bottom: 0; }

	.secttl__ja { letter-spacing: .28em; text-indent: .28em; }
	/* 和文の添え書きは字間が広いと画面幅で折り返すので、狭い画面では詰める。
	   .hero__ja--sub と .pagehead__ja は文字数が多いものがあるため特に効く
	   （「兵庫県姫路市 魚町の高級ラウンジ」「姫路市魚町へのアクセス」など） */
	.sec-head__ja, .pagehead__ja { letter-spacing: .2em; text-indent: .2em; }
	.hero__ja--sub { letter-spacing: .24em; text-indent: .24em; }
	.secttl::after, .sec-head::after, .pagehead__ja::before,
	.recruit-tel__ttl::after { width: 190px; }
	.concept__detail { margin-top: 40px; }
	.gallery-intro { margin-bottom: 40px; }
	.crumb__list { font-size: 11px; }
	.recruit-perks, .recruit-points, .recruit-trial, .recruit-faq { margin-top: 52px; }
	.recruit-perks__list { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	.recruit-perks__item { padding: 14px 8px; font-size: 12px; }
	.recruit-points__item, .recruit-faq__item { padding: 20px 0; }
	.recruit-points__ttl { font-size: 15px; }
	.recruit-points__body, .recruit-faq__a { font-size: 13px; line-height: 1.9; }
	.recruit-line__body { gap: 22px; }
	.recruit-line__qr img { width: 140px; height: 140px; }
	.recruit-faq__q { font-size: 14px; }

	.pagehead { padding: calc(var(--head-h) + 56px) 0 40px; }
	.pagebody { padding: 56px 0 96px; }

	.site-foot { padding: 56px 0 130px; }
	.site-foot__info { grid-template-columns: 1fr; gap: 0; }
	.site-foot__info dt { text-align: center; margin-top: 12px; }
	.site-foot__info dd { text-align: center; }

	/* 固定バーはスマホでは文字を小さくして4項目を収める */
	.fixbar__item { padding: 9px 4px; gap: 2px; }
	.fixbar__en { font-size: 11px; letter-spacing: .14em; text-indent: .14em; }
	.fixbar__ja { font-size: 10px; letter-spacing: 0; }
}

/* 幅が狭い端末では電話番号などの補足文字を省いてアイコン的に見せる */
@media (max-width: 400px) {
	.fixbar__ja { font-size: 9px; }
	.fixbar__item { padding: 8px 2px; }
}

/* 動きを減らす設定の端末では演出を止める（動画はJS側で一時停止して静止画として見せる） */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.castgrid__thumb img, .newslist__thumb img, .gallerygrid__item img { transition: none; }
}


/* ---------- キャスト写真の拡大表示 ------------------------------------ */

/* 写真を包むボタン。見た目は写真のままにする。
   既存の .castdetail__main img / .castdetail__sub img は img を直接指していて
   ボタンで包むと縦横比の指定が効かなくなるため、ここで同じ指定を入れ直す。 */
.castzoom {
	display: block; width: 100%; padding: 0; border: 0; background: none;
	cursor: zoom-in; line-height: 0;
}
.castzoom img { display: block; width: 100%; height: auto; }
.castdetail__main > .castzoom img { aspect-ratio: 3 / 4; object-fit: cover; }
.castdetail__sub  > .castzoom img { aspect-ratio: 1 / 1; object-fit: cover; }
.castzoom:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 拡大したときに全画面に出る層 */
.imgview {
	position: fixed; inset: 0; z-index: 9999;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, .92);
	opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
	cursor: zoom-out; padding: 24px;
}
.imgview.is-open { opacity: 1; visibility: visible; }
.imgview img {
	max-width: 100%; max-height: 100%;
	object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
.imgview__close {
	position: absolute; top: 16px; right: 20px;
	width: 44px; height: 44px; border: 0; background: none;
	color: var(--text); font-size: 30px; line-height: 1; cursor: pointer;
}
.imgview__close:hover { color: var(--gold); }

/* BGMの再生ボタン ---------------------------------------------------------
   自動再生はブラウザが禁じているため、訪問者が押して初めて鳴る。
   世界観を壊さないよう、ゴールドの細い枠だけの控えめな見た目にする。
   スマホは下部の固定バー（電話 / LINE）と重ならない高さに置く。
   -------------------------------------------------------------------- */
.bgmtoggle {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--gold-dim);
	border-radius: 50%;
	background: rgba(11, 11, 11, 0.72);
	color: var(--gold);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background 0.3s;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.bgmtoggle:hover,
.bgmtoggle:focus-visible {
	color: var(--gold-bright);
	border-color: var(--gold);
	background: rgba(11, 11, 11, 0.9);
}

.bgmtoggle__icon {
	display: flex;
}

/* 再生中は音符を消して、揺れる3本線に切り替える */
.bgmtoggle__bars {
	display: none;
	align-items: flex-end;
	gap: 3px;
	height: 16px;
}

.bgmtoggle__bars i {
	display: block;
	width: 2px;
	height: 6px;
	background: currentColor;
	animation: bgmbar 1.1s ease-in-out infinite;
}

.bgmtoggle__bars i:nth-child(2) { animation-delay: 0.18s; }
.bgmtoggle__bars i:nth-child(3) { animation-delay: 0.36s; }

@keyframes bgmbar {
	0%, 100% { height: 5px; }
	50%      { height: 15px; }
}

.bgmtoggle.is-playing .bgmtoggle__icon { display: none; }
.bgmtoggle.is-playing .bgmtoggle__bars { display: flex; }

@media (max-width: 768px) {
	.bgmtoggle {
		right: 14px;
		bottom: 82px; /* 固定バーの上 */
		width: 42px;
		height: 42px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bgmtoggle__bars i { animation: none; height: 10px; }
}