@charset "UTF-8";
/* =====================================================================
   Roze（ロゼ）公式サイト  共通スタイル
   - カラートークン / タイポ / 共通コンポーネント
   - PHPエンジニアへ：ブランド微調整は :root の変数を変えるだけで全ページ反映
   - ビジュアル方向：ダークヘッダー × ライトボディのハイブリッド
     （モノグラムロゴ飛び出し＋金CSSワードマーク／角丸ゼロのシャープエッジ）
   ===================================================================== */

/* ---- フォント：Google Fonts は parts/header.html の <link> で読込 ----
   見出し＝明朝（Shippori Mincho / Noto Serif JP）／本文＝Noto Sans JP */

:root {
  /* ブランドカラー（ブランドキット確定4色＋派生） */
  --plum:      #1C1220;   /* 濃帯：ヘッダ／フッタ／文字 */
  --softplum:  #2D2230;   /* 濃帯の明るい側 */
  --bordeaux:  #5A0E1E;   /* 深ワイン：CTA／カード枠 */
  --rose-deep: #7D122A;   /* ローズ：主役アクセント */
  --rose:      #7D122A;   /* 副（後方互換） */
  --gold:      #D4AF6A;   /* 金：アクセント */
  --goldlight: #F5DEB3;   /* 明るい金（ハイライト） */
  --golddark:  #A67C00;   /* 暗い金（メタリックの陰） */
  --champagne: #F2E6D6;   /* シャンパン：暗地の上の文字 */

  /* ベース */
  --ivory: #FAF6F2;       /* 地 */
  --paper: #FFFFFF;       /* カード等の白面 */
  --ink:   #2B2228;       /* 文字（真っ黒回避） */
  --muted: #8A7E84;       /* 補助文字 */
  --line:  #E7DAC9;       /* 罫線（金寄り） */
  --rose-mist: #FBEDEF;   /* 淡ローズの面（画像読込前の下地） */
  --taupe: #4A3E46;       /* くすみ文字 */

  /* メタリック金グラデ（テキスト/罫線で再利用） */
  --gold-metallic: linear-gradient(135deg, #A67C00 0%, #D4AF6A 25%, #F5DEB3 50%, #D4AF6A 75%, #A67C00 100%);

  /* タイポ */
  --font-serif: "Shippori Mincho", "Noto Serif JP", "Yu Mincho", serif;
  --font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-serif-en: "Cinzel", "Cormorant Garamond", "Times New Roman", serif; /* 欧文セリフ見出し（銀馬車流の和欧ミックス） */

  /* レイアウト */
  --wrap: 1200px;         /* コンテンツ最大幅 */
  --gap:  16px;           /* グリッド間隔（余白控えめ） */
  --pad:  20px;           /* セクション内パディング */

  /* 角丸は使用しない（高級感重視のシャープエッジ） */
  --radius: 0;
}

/* ---- リセット（最小限） ---- */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.2;
  font-size: 16px;  /* 基準フォントサイズ（標準16px） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 枠外オーナメント等の装飾が横スクロールを生まないようにする。
     clip は hidden と違いスクロールコンテナを作らず position:sticky を壊さない。 */
  overflow-x: clip;
}
html { overflow-x: clip; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 600; font-family: var(--font-serif); }

/* ---- 共通：ラッパ ---- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* ---- 金メタリック文字ユーティリティ ---- */
.gold-text {
  background: var(--gold-metallic);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShine 7s linear infinite;
}
@keyframes goldShine { to { background-position: 200% center; } }

/* ---- 共通：セクション見出し ---- */
.section-head {
  text-align: center;
  margin: 30px 0 5px;
}
.section-head .en {
  display: block;
  font-family: var(--font-serif-en);
  letter-spacing: .42em;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.section-head .ja {
  font-family: var(--font-serif);
  /* 明朝見出しを大きく＋字間（兜・エマーブル流） */
  font-size: clamp(30px, 5vw, 50px);
  letter-spacing: .18em;
  font-weight: 500;
  position: relative;
  display: inline-block;
  padding-bottom: 64px;
}
/* 見出し下の金フローラル区切り（画像オーナメント） */
.section-head .ja::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 540px; max-width: 95vw; height: 64px;
  transform: translateX(-50%);
  background: url(../img/ornament-divider.png) center / contain no-repeat;
  opacity: 1;
}

/* =====================================================================
   最上部ユーティリティバー
   ===================================================================== */
.utility-bar {
  background: #120B14;
  color: var(--champagne);
}
.utility-bar .wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 30px;
}
.utility-bar .utility-text {
  font-size: 11px;
  letter-spacing: .2em;
  opacity: .72;
}

/* =====================================================================
   ヘッダー / グローバルナビ（parts/header.html）
   ダーク帯＋モノグラムロゴ飛び出し＋金ワードマーク＋RESERVE
   ===================================================================== */
.site-header {
  position: relative;          /* モバイルナビの絶対配置基準 */
  /* ワインのグラデ：rose-deep(上) → bordeaux(下)。当初のワイン基調を復元 */
  background: linear-gradient(to bottom, var(--rose-deep) 0%, var(--bordeaux) 100%);
  color: #fff;
  border-bottom: 1px solid rgba(212, 175, 106, .35);
  box-shadow: 0 4px 24px rgba(28, 18, 32, .28);
  overflow: visible;           /* ロゴを帯から飛び出させる */
}
/* 帯上端の金メタリックライン */
.site-header::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold-metallic);
  z-index: 2;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
}

/* ロゴ（モノグラム画像＋金ワードマーク） */
.site-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 3;
}
.site-logo .logo-mark {
  width: auto;
  height: 148px;               /* 帯より大きく取り上下へ大きく飛び出す（参照案準拠） */
  margin: -38px 0;             /* レイアウト高を帯(72px)内に収める：(72-148)/2 */
  position: relative;
  top: 7px;                    /* PNG下側の透明余白(下14.9%/上6.4%)を相殺し、絵柄が帯の上下へ均等に飛び出すよう下げる */
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45));
  transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
.site-logo:hover .logo-mark { transform: scale(1.04) rotate(-1deg); }
.site-logo .logo-words {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  /* ロゴPNG右側の透明余白(約5.8%)＋視覚間隔を相殺し、テキストを絵柄へさらに寄せる */
  margin-left: -24px;
}
.site-logo .logo-sub {
  font-family: var(--font-serif);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(242, 230, 214, .65);
  margin-bottom: 2px;
}
.site-logo .logo-name {
  font-family: var(--font-serif);
  font-size: 30px;
  letter-spacing: .16em;
  font-weight: 600;
}

/* グローバルナビ（日本語大＋英語小の2段／競合「麗」型） */
.gnav ul { display: flex; gap: 30px; align-items: center; }
.gnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1.2;
  color: rgba(242, 230, 214, .82);
  padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.gnav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.gnav .nav-ja { font-size: 15px; font-weight: 600; letter-spacing: .08em; } /* 日本語＝主役 */
.gnav .nav-en {
  font-family: var(--font-serif);
  font-size: 10px;             /* 欧文ラベル＝従属・字間広め・控えめ金 */
  letter-spacing: .22em;
  font-weight: 400;
  color: rgba(212, 175, 106, .7);
  transition: color .25s;
}
.gnav a:hover .nav-en { color: var(--gold); }

/* ヘッダー右上の連絡先（営業時間＋電話）— 競合慣習に倣い常時表示。番号を金で主役に */
.header-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;                       /* 営業時間を電話番号に密接させる */
  position: relative;
  z-index: 3;
}
.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 26px;             /* 営業時間より明確に大きく＝主役 */
  line-height: 1;              /* 行ボックス余白を除去し営業時間と密接させる */
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold);
  transition: color .25s, text-shadow .25s;
}
.header-tel .tel-icon { font-size: 19px; }
.header-tel:hover { color: var(--goldlight); text-shadow: 0 0 14px rgba(212, 175, 106, .5); }
.header-hours {
  font-size: 11px;             /* 番号に対して控えめ＝従属情報 */
  line-height: 1.1;            /* 行ボックス余白を除去し電話番号に密接 */
  letter-spacing: .16em;
  color: rgba(242, 230, 214, .7);
}

/* ハンバーガー（モバイル） */
.nav-toggle {
  display: none;
  background: none; border: 1px solid rgba(212, 175, 106, .55);
  color: var(--gold); width: 44px; height: 40px; cursor: pointer;
  font-size: 18px; line-height: 1;
}

/* =====================================================================
   フッター（parts/footer.html）— 濃色帯＋金ワードマーク
   ===================================================================== */
.site-footer {
  position: relative;
  /* ヘッダーと同じワインのグラデで上下を揃える（確定方向メモ「フッター＝ボルドー濃色帯」とも一致） */
  background: linear-gradient(to bottom, var(--rose-deep) 0%, var(--bordeaux) 100%);
  color: #efe6ea;
  margin-top: 64px;
  padding: 44px 0 24px;
  font-size: 13px;
  border-top: 1px solid rgba(212, 175, 106, .3);
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--gold-metallic);
}
.site-footer .foot-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.site-footer .foot-logo .foot-mark {
  width: auto; height: 72px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4));
}
.site-footer .foot-logo .foot-name {
  font-family: var(--font-serif);
  font-size: 28px;
  letter-spacing: .16em;
}
.site-footer .foot-info { color: #cdbcc4; line-height: 1.9; }
.site-footer .foot-info a { color: var(--gold); }
.site-footer .foot-exit {
  display: inline-block;
  margin-top: 16px;
  border: 1px solid rgba(212, 175, 106, .6);
  color: var(--gold);
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: .1em;
  transition: background .3s, color .3s;
}
.site-footer .foot-exit:hover { background: var(--gold); color: var(--plum); }
.site-footer .copyright {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(212, 175, 106, .12);
  color: #a99aa1;
  font-size: 11px;
  text-align: center;
  letter-spacing: .04em;
}

/* =====================================================================
   在籍一覧 companion.html  — キャストグリッド
   ===================================================================== */
.cast-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* モバイル2列 */
  gap: var(--gap);
  margin: 8px 0 24px;
}
@media (min-width: 600px) { .cast-grid { gap: 22px; } }

.cast-card {
  background: var(--paper);
  border: 1px solid rgba(122, 18, 42, .28);
  display: block;
  position: relative;
  overflow: visible;
  min-width: 0;        /* Grid 内で 1fr が正常機能するよう min-width:auto を上書き */
  transition: box-shadow .5s, transform .5s, border-color .5s;
}
.cast-card:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 40px rgba(90, 14, 30, .22);
  transform: translateY(-10px);
}

/* サムネ（グラデ廃止・写真は下端までシャープに） */
.cast-thumb {
  position: relative;
  /* 現行サイトのサムネ実寸 210×300px（=7:10）に枠を合わせ、object-fit:cover でも切れないようにする */
  aspect-ratio: 7 / 10;
  overflow: hidden;
  background: var(--softplum);
}
.cast-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.19, 1, .22, 1);
}
.cast-card:hover .cast-thumb img { transform: scale(1.08); }

/* hover：金の光沢スイープ */
.cast-thumb::after {
  content: "";
  position: absolute; top: 0; left: -160%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(245, 222, 179, .5) 50%, transparent 100%);
  transform: skewX(-20deg);
  z-index: 2;
  pointer-events: none;
}
.cast-card:hover .cast-thumb::after { animation: shineSweep 1.1s cubic-bezier(.25, 1, .5, 1) forwards; }
@keyframes shineSweep { to { left: 170%; } }

/* 金フローラルの額装（画像オーナメントを対角配置・枠外へ突き出し）
   .cast-thumb(overflow:hidden)の外＝.cast-card(overflow:visible)直下に置き、
   サムネ領域(7:10)に重ねたうえでオーナメントを角の外側へ translate する。 */
.thumb-frame {
  position: absolute; top: 0; left: 0; right: 0;
  aspect-ratio: 7 / 10;        /* サムネと同寸に重ねる */
  /* 出勤時間バー(.cast-status z:4)・バッジ(.cast-badges z:4)・本体(z:4)より前面に。
     額縁は最前面に置くのが意図。pointer-events:none でクリックは阻害しない。 */
  z-index: 5; pointer-events: none;
}
.thumb-frame::before, .thumb-frame::after,
.thumb-frame--b::before, .thumb-frame--b::after {
  content: "";
  position: absolute;
  width: 29%; aspect-ratio: 1 / 1;   /* 旧42%→70%に縮小 */
  background: url(../img/ornament-corner.png) no-repeat center / contain;
  opacity: .82;
  transition: opacity .5s, transform .5s;
}
/* 四隅にコーナー画像を90°刻みで一周配置（TL=0/TR=90/BR=180/BL=270）。
   translate はやや控えめに角をまたぐ程度（無敵風の角接地）。全edgeを明示し
   span1(.thumb-frame) と span2(.thumb-frame--b) の規則が混ざらないようにする。 */
.thumb-frame::before { top: 0; left: 0; right: auto; bottom: auto; transform: translate(-16%, -16%); }
.thumb-frame::after  { bottom: 0; right: 0; top: auto; left: auto; transform: translate(16%, 16%) rotate(180deg); }
.thumb-frame--b::before { top: 0; right: 0; left: auto; bottom: auto; transform: translate(16%, -16%) rotate(90deg); }
.thumb-frame--b::after  { bottom: 0; left: 0; top: auto; right: auto; transform: translate(-16%, 16%) rotate(270deg); }
.cast-card:hover .thumb-frame::before { opacity: 1; transform: translate(-16%, -16%) scale(1.06); }
.cast-card:hover .thumb-frame::after  { opacity: 1; transform: translate(16%, 16%) rotate(180deg) scale(1.06); }
.cast-card:hover .thumb-frame--b::before { opacity: 1; transform: translate(16%, -16%) rotate(90deg) scale(1.06); }
.cast-card:hover .thumb-frame--b::after  { opacity: 1; transform: translate(-16%, 16%) rotate(270deg) scale(1.06); }

/* バッジ（新人・更新）右上に金プレート風で配置 */
.cast-badges {
  position: absolute; top: 0; right: 0;
  z-index: 4;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-end;
}
.badge {
  font-size: 11px; letter-spacing: .14em;
  padding: 4px 12px; font-weight: 500;
  border: 1px solid var(--goldlight);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}
/* PHP: 画像バッジへ差し替え可（<img> に置換できる構造） */
.badge--new {
  background: linear-gradient(135deg, #7D122A 0%, #5A0E1E 50%, #7D122A 100%);
  color: var(--goldlight);
  border-color: var(--gold);
}
.badge--update {
  background: var(--gold-metallic);
  color: var(--plum);
}

/* New アイコン（quality-p 参考：筆記体Newを左上の角から枠外へはみ出し配置）
   オーナメント(.thumb-frame)同様、overflow:hidden の .cast-thumb の外＝
   overflow:visible の .cast-card 直下へ置き、負オフセットで角から飛び出させる。
   額縁(5)・出勤バー(4)より前面の z-index:7 で最前面に。 */
.cast-new {
  position: absolute;
  top: -12px; left: -10px;
  width: 92px; height: auto;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
/* ランキングメダル（quality-p 参考：左下に月桂冠メダル画像。上位カードに表示）
   出勤バー(中央寄せ)の左端に重なる配置。順位画像は ranking_no{1..5}.png。 */
.cast-thumb .cast-rank {
  position: absolute;
  left: 6px; bottom: 6px;
  width: 72px; height: auto;
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .4));
}

.cast-body {
  padding: 4px 12px 10px;      /* 余白を大胆に圧縮（上4/下10） */
  text-align: center;
  position: relative;
  z-index: 4;
  background: var(--paper);
}
.cast-name {
  margin: 10px 0;             /* UA既定1emは排し、氏名の上下に10pxのゆとりを付与 */
  font-family: var(--font-serif);
  font-size: 24px;            /* 塊内ジャンプ強化：氏名÷年齢=2.0倍・÷キャッチ≈1.85倍 */
  line-height: 1.1;           /* 行ボックス余白を除去し氏名の上下を締める */
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--plum);
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
}
.cast-name .age { font-family: var(--font-sans); font-size: 12px; color: var(--muted); }
.cast-spec {
  margin: 3px 0 0;             /* UA既定の下マージン(1em)も除去・上は3pxに圧縮 */
  padding-top: 6px;
  line-height: 1.2;            /* 継承1.7の行box余白を除去 */
  font-size: 14px;
  color: var(--bordeaux);
  font-weight: 700;
  letter-spacing: .06em;
  position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cast-spec::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 1px;
  background: var(--gold-metallic);
}
.cast-catch {
  margin: 6px 0 0;           /* UA既定の下マージン(1em)も除去・下端の余白を排除 */
  font-size: 16px;
  line-height: 1.5;
  color: var(--taupe);
  font-family: var(--font-serif);
  letter-spacing: .04em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =====================================================================
   キャスト詳細 profile.html
   ===================================================================== */
.breadcrumb { font-size: 12px; color: var(--muted); margin: 22px 0 6px; letter-spacing: .04em; }
.breadcrumb a:hover { color: var(--rose-deep); }
.breadcrumb .sep { margin: 0 8px; color: var(--line); }

.profile { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 8px; }
/* モバイル：profile-media を解除して中の gallery を .profile の直接グリッド項目に。
   写メ日記は既に .profile 直下（profile-info の後）にあるため、order で
   「写真(0) → 情報(1) → 写メ日記(2) → 戻る(3)」に並べ替え＝写メ日記をページ最下部へ（PCではこの解除を打ち消す）。 */
.profile-media { display: contents; }
.profile > .profile-info { order: 1; }
.profile > .profile-diary { order: 2; }
.profile > .back-link { order: 3; }

/* ギャラリー（主役・大きく・金額装） */
.gallery .main {
  position: relative;
  background: var(--softplum);
  border: 1px solid var(--gold);
  overflow: visible;           /* 角オーナメントを枠外へ突き出すため */
  box-shadow: 0 14px 36px rgba(28, 18, 32, .18);
}
/* Swiper × Grid/Flex の幅暴走防止（重要）：
   グリッド/フレックスアイテムは既定 min-width:auto のため、Swiper の swiper-wrapper
   （全スライドを横一列に並べる）の本来幅まで親が膨張し、autoHeight と相互作用して
   幅がブラウザ上限まで暴走する。アイテムに min-width:0 を与え、コンテナ幅を確定させる。
   ※モバイルは .profile-media が display:contents のため .gallery が grid item になる。 */
.profile-media, .gallery { min-width: 0; }
.gallery .main,
.gallery .gallery-main,
.gallery .gallery-thumbs { width: 100%; max-width: 100%; min-width: 0; }
/* Swiper メイン：金枠の内側でスライドをクリップ（.main は overflow:visible のまま＝
   四隅オーナメントは枠外へ突き出し続け、写真スライドだけが内側でクリップされる）。 */
.gallery .main .gallery-main { overflow: hidden; }
/* 主写真は切らずに本来の縦横比で全体を表示（枠が画像に追従） */
.gallery .main .swiper-slide img { display: block; width: 100%; height: auto; }
/* --radius:0 厳守（Swiper 既定の角丸を打ち消し） */
.gallery .swiper,
.gallery .swiper-slide,
.gallery .swiper-slide img { border-radius: 0; }
/* メイン画像の四隅フローラル額装（枠外へ控えめ突き出し・無敵風の角接地）
   .main::before/::after=左上/右下、.main-corners::before/::after=右上/左下 */
.main-corners { position: absolute; inset: 0; pointer-events: none; }
.gallery .main::before, .gallery .main::after,
.main-corners::before, .main-corners::after {
  content: "";
  position: absolute;
  width: 24%; aspect-ratio: 1 / 1;   /* 旧34%→70%に縮小 */
  background: url(../img/ornament-corner.png) no-repeat center / contain;
  opacity: .85; z-index: 2; pointer-events: none;
}
.gallery .main::before { top: 0; left: 0; transform: translate(-16%, -16%); }
.gallery .main::after { bottom: 0; right: 0; transform: translate(16%, 16%) rotate(180deg); }
.main-corners::before { top: 0; right: 0; transform: translate(16%, -16%) rotate(90deg); }
.main-corners::after { bottom: 0; left: 0; transform: translate(-16%, 16%) rotate(270deg); }
/* サムネ（Swiper）：横並びスライド。主写真と連動し、現在表示中は金枠でハイライト。
   Swiper が各スライド幅をインライン指定するため、高さは aspect-ratio で追従させる。 */
.gallery .gallery-thumbs { margin-top: 10px; }
.gallery-thumbs .swiper-slide {
  border: 1px solid var(--line); aspect-ratio: 3 / 4; overflow: hidden;
  cursor: pointer; opacity: .72;
  transition: border-color .25s, opacity .25s;
}
.gallery-thumbs .swiper-slide:hover { opacity: 1; }
/* Swiper が現在スライドに付与する .swiper-slide-thumb-active を選択枠に */
.gallery-thumbs .swiper-slide-thumb-active {
  border-color: var(--gold); outline: 1px solid var(--gold); opacity: 1;
}
.gallery-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* プロフィール見出し */
.profile-head .name {
  font-family: var(--font-serif);
  font-size: clamp(34px, 5vw, 48px); letter-spacing: .1em;
  font-weight: 500;
  color: var(--plum);
  display: flex; align-items: baseline; gap: 10px;
}
.profile-head .name .age { font-family: var(--font-sans); font-size: 14px; color: var(--muted); }
.profile-head .profile-spec {
  margin-top: 6px; margin-bottom: 6px;
  font-family: var(--font-serif);            /* ゴシック→明朝で品と可読性を両立 */
  font-size: clamp(15px, 2.4vw, 24px); font-weight: 600;  /* スマフォで1行に収まる下限へ */
  color: var(--bordeaux);
  letter-spacing: .04em;                     /* 字間も詰めて1行化を補助 */
}
.profile-head .catch {
  margin-top: 12px; color: var(--rose-deep);
  font-family: var(--font-serif); font-size: 24px; font-weight: 500; letter-spacing: .04em;
}
.profile-tags { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

/* プロフィール表（金罫線・見出し装飾） */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.spec-table th, .spec-table td {
  border-bottom: 1px solid var(--line);
  text-align: left; padding: 12px 10px; vertical-align: top;
}
.spec-table th {
  width: 34%; color: var(--plum); font-weight: 500;
  font-size: 13px;                 /* ラベルは控えめ＝表内ミニジャンプ（値÷ラベル≈1.23倍） */
  background: linear-gradient(to right, rgba(212, 175, 106, .14), rgba(212, 175, 106, .04));
  letter-spacing: .06em;
  border-left: 2px solid var(--gold);
}
.spec-table td {
  font-family: var(--font-serif);  /* 値は明朝で「格」を付与 */
  font-size: 16px; color: var(--ink);
}
.spec-table tr:hover td { background: rgba(212, 175, 106, .05); }

/* コメントブロック（金ダイヤ見出し） */
.comment-block { margin-top: 26px; }
.comment-block h3 {
  font-family: var(--font-serif);  /* 本文同寸1.0倍→明朝26pxで1.6倍の見出しジャンプ */
  font-size: 26px; font-weight: 600; color: var(--plum);
  padding-left: 18px; letter-spacing: .08em;
  position: relative;
}
.comment-block h3::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 8px; height: 8px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--gold-metallic);
}
.comment-block p { margin: 14px 0 0; white-space: pre-line; font-size: 17px; line-height: 1.9; }

/* 週間出勤テーブル（金装飾・視認性） */
.schedule-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 14px; font-size: 15px; text-align: center; }
.schedule-table th, .schedule-table td { border: 1px solid var(--line); padding: 13px 4px; }
.schedule-table thead th {
  background: linear-gradient(to bottom, var(--plum), var(--softplum));
  color: var(--gold); font-weight: 600; font-size: 15px; letter-spacing: .08em;
  border-color: rgba(212, 175, 106, .4);
}
.schedule-table tbody td { background: var(--paper); }
.schedule-table .sun { color: var(--rose-deep); }
.schedule-table .sat { color: #3a5a9c; }
.schedule-table thead .sun { color: #f0a8b4; }
.schedule-table thead .sat { color: #a8c0f0; }
.schedule-table td.off { color: var(--muted); background: var(--ivory); }

/* CTA */
.cta { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600;  /* 明朝で品を出す */
  padding: 15px 26px; font-size: 16px; letter-spacing: .1em; cursor: pointer;
  border: 1px solid var(--gold); /* 金の細線 */
  box-shadow: 0 2px 9px rgba(0, 0, 0, .25); /* 琥珀流：箔押し風ドロップシャドウ */
  transition: background .3s, box-shadow .3s, color .3s, transform .3s;
}
.btn--tel { background: var(--bordeaux); color: var(--champagne); flex: 1; min-width: 200px; }
.btn--tel:hover { background: #6e1124; box-shadow: 0 4px 18px rgba(212, 175, 106, .4); transform: translateY(-1px); }
.btn--reserve { background: var(--paper); color: var(--bordeaux); flex: 1; min-width: 200px; }
.btn--reserve:hover { background: var(--gold); color: var(--plum); box-shadow: 0 4px 18px rgba(212, 175, 106, .45); transform: translateY(-1px); }
.back-link { display: inline-block; margin-top: 26px; color: var(--muted); font-size: 15px; }
.back-link:hover { color: var(--rose-deep); }

/* =====================================================================
   登場アニメ（CSSのみ・load時に発火。JS非依存で必ず最終表示される）
   ===================================================================== */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.reveal { animation: riseIn .7s cubic-bezier(.19, 1, .22, 1) both; }
/* カードグリッドは軽いスタッガで上品に */
.cast-grid .cast-card { animation: riseIn .6s cubic-bezier(.19, 1, .22, 1) backwards; }
.cast-grid .cast-card:nth-child(2)  { animation-delay: .04s; }
.cast-grid .cast-card:nth-child(3)  { animation-delay: .08s; }
.cast-grid .cast-card:nth-child(4)  { animation-delay: .12s; }
.cast-grid .cast-card:nth-child(5)  { animation-delay: .16s; }
.cast-grid .cast-card:nth-child(6)  { animation-delay: .20s; }
.cast-grid .cast-card:nth-child(n+7){ animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .cast-grid .cast-card { animation: none; }
}

/* =====================================================================
   在籍一覧：フィルタタブ（一段）
   ===================================================================== */
.cast-filter {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
}
.cast-filter button {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--taupe);
  background: none;
  border: 1px solid var(--line);
  padding: 9px 20px;
  cursor: pointer;
  transition: color .25s, border-color .25s, background .25s;
}
.cast-filter button:hover { color: var(--plum); border-color: var(--gold); }
.cast-filter button.is-active {
  color: var(--plum);
  border-color: var(--gold);
  background: linear-gradient(to bottom, rgba(212, 175, 106, .18), rgba(212, 175, 106, .05));
  box-shadow: inset 0 -2px 0 var(--gold); /* 金下線でアクティブ表現 */
}
/* フィルタで非表示にするカード */
.cast-card.is-hidden { display: none; }

/* =====================================================================
   在籍一覧：本日出勤バッジ（サムネ下端の金帯）
   ===================================================================== */
.cast-status {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  background: linear-gradient(to right, rgba(28, 18, 32, .60), rgba(90, 14, 30, .60));
  color: var(--goldlight);
  font-size: 13px;
  letter-spacing: .1em;
  text-align: center;
  padding: 5px 6px;
  border-top: 1px solid rgba(212, 175, 106, .5);
}
.cast-status .dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
  vertical-align: middle;
}

/* =====================================================================
   詳細：欧文ラベル付きサブ見出し（英語大＋日本語小の横並び。競合「Newface 新人情報」型）
   ===================================================================== */
.sub-head {
  margin: 20px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  overflow: hidden;   /* 長い欧文見出しがページ幅を押し広げるのを防止 */
  min-width: 0;
}
.sub-head .en {
  font-family: var(--font-serif-en);
  font-size: 28px;
  letter-spacing: .06em;
  font-weight: 600;
  line-height: 1.1;
  /* ヘッダーロゴと同じ金メタリックシャイン（goldShine は既定義） */
  background: var(--gold-metallic);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: goldShine 7s linear infinite;
}
.sub-head .ja {
  font-family: var(--font-serif);
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 400;
}
.sub-head::after { /* 金の下線アクセント（小面積） */
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 56px; height: 2px;
  background: var(--gold-metallic);
}

/* =====================================================================
   詳細：上部CTA（複製）＋ モバイル sticky バー
   ===================================================================== */
.cta--top { margin-top: 18px; }
/* モバイルのみ画面下に固定する予約バー（PCでは非表示） */
.cta-sticky { display: none; }
@media (max-width: 640px) {
  .cta-sticky {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    gap: 0;
    background: var(--plum);
    border-top: 1px solid rgba(212, 175, 106, .5);
    box-shadow: 0 -4px 18px rgba(28, 18, 32, .4);
  }
  .cta-sticky a {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 6px;
    font-size: 13px; letter-spacing: .08em;
  }
  .cta-sticky .s-tel { background: var(--bordeaux); color: var(--champagne); }
  .cta-sticky .s-reserve { background: var(--gold-metallic); color: var(--plum); font-weight: 700; }
  /* 固定バーの高さ分、本文末尾に余白を確保 */
  .profile { padding-bottom: 64px; }
}

/* =====================================================================
   詳細：7日間出勤テーブル（日付＋曜日の2段ヘッダ）
   ===================================================================== */
.schedule-table thead th .dow { display: block; font-size: 12px; }
.schedule-table thead th .date {
  display: block;
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--champagne);
  opacity: .85;
  letter-spacing: .02em;
  margin-top: 2px;
}
.schedule-table td .time { font-weight: 700; color: var(--bordeaux); letter-spacing: .02em; }

/* スマホ：7列横並びは幅が足りず切れるため、各日を縦に積む（1日=1行）。
   thead を隠し、td の data-dow/data-date を ::before でラベル表示。
   sun/sat/off の色は td 側クラスを継承するためラベルも自然に色が付く。 */
@media (max-width: 640px) {
  .schedule-table { table-layout: auto; margin-top: 12px; }
  .schedule-table thead { display: none; }
  .schedule-table, .schedule-table tbody, .schedule-table tr { display: block; width: 100%; }
  .schedule-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 14px;
    font-size: 15px;
    border: 1px solid var(--line);
    border-top: none;            /* 行間の二重罫を回避 */
    background: var(--paper);
  }
  .schedule-table tr td:first-child { border-top: 1px solid var(--line); }
  .schedule-table td::before {
    content: attr(data-dow) "\3000" attr(data-date);  /* 全角スペースで曜日と日付を区切る */
    font-weight: 600;
    letter-spacing: .06em;
  }
  .schedule-table td.off { color: var(--muted); background: var(--ivory); }
  .schedule-table td .time { font-size: 15px; }
}

/* =====================================================================
   詳細：他キャストのレコメンド（横スクロール）
   ===================================================================== */
.cast-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cast-rail::-webkit-scrollbar { height: 6px; }
.cast-rail::-webkit-scrollbar-thumb { background: var(--gold); }
.rail-card {
  flex: 0 0 46%;
  max-width: 200px;
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid rgba(122, 18, 42, .28);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.rail-card:hover { border-color: var(--gold); box-shadow: 0 10px 24px rgba(90, 14, 30, .2); transform: translateY(-3px); }
.rail-card .rail-thumb { aspect-ratio: 3 / 4; overflow: hidden; background: var(--softplum); }
.rail-card .rail-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.19,1,.22,1); }
.rail-card:hover .rail-thumb img { transform: scale(1.07); }
.rail-card .rail-name {
  font-family: var(--font-serif);
  font-size: 16px; letter-spacing: .06em; color: var(--plum);
  text-align: center; padding: 10px 6px 13px;
}
.rail-card .rail-name .age { font-family: var(--font-sans); font-size: 11px; color: var(--muted); margin-left: 5px; }
@media (min-width: 600px) { .rail-card { flex-basis: 24%; } }

/* =====================================================================
   詳細：写メ日記／口コミ 外部埋め込み枠
   ===================================================================== */
.embed-frame {
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px rgba(28, 18, 32, .14);
  background: var(--softplum);
}
.embed-frame iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.embed-note { font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .02em; }

/* =====================================================================
   レスポンシブ
   ===================================================================== */
@media (min-width: 600px) {
  .cast-grid { grid-template-columns: repeat(3, 1fr); } /* タブレット3列 */
}
@media (min-width: 900px) {
  body { font-size: 16px; }
  .cast-grid { grid-template-columns: repeat(4, 1fr); } /* PC4列 */
  .profile { grid-template-columns: 400px 1fr; align-items: start; } /* 左=写真(400px native)・右=情報 */
  /* PC：左カラム＝写真ギャラリーのみ。元画像が 400×600(2:3) なので列幅 400px で等倍表示＝鮮明、
     かつ高さ約700pxでビューポート内に収まる → sticky の上端固定が成立する。
     ・店長コメント等で右カラムが長いため profile-media を sticky 化し、写真を全域でピン留め。
       sticky の制約域は親 .profile（本文ぶん背が高い）なので、右カラム全域で固定が持続する。
     ・align-self:start で grid セル内引き伸ばしを防止（sticky の前提）。
     ・祖先に overflow:hidden/auto を作らないこと（本サイトは clip 使用済み）。 */
  .profile-media            { display: block; grid-column: 1; grid-row: 1;
                              position: sticky; top: 20px; align-self: start; }
  .profile > .profile-info  { grid-column: 2; grid-row: 1; }
  .profile > .profile-diary { grid-column: 2; grid-row: 2; } /* 写メ日記＝右カラム末尾 */
  .profile > .back-link     { grid-column: 1 / -1; grid-row: 3; } /* 全幅で最下部 */
  .section-head .ja { font-size: 44px; } /* PC見出しの頂点を引き上げ：44→26→24→16 の階段化（ジャンプ率2.75倍） */
  /* PC：電話ボタンは不要（来店客はWEB予約が主流）。WEBボタンをコンテナ幅いっぱいに拡大 */
  .btn--tel { display: none; }
  .cta .btn--reserve { width: 100%; }
}

/* モバイル：ナビ折りたたみ＋ロゴ飛び出し量を抑制 */
@media (max-width: 768px) {
  /* 連絡先：スマホでは窮屈さ回避のためヘッダー右端の連絡先（電話番号＋営業時間）を非表示。
     予約導線はモバイル固定バー（.cta-sticky）が担うため重複も回避。 */
  .header-contact { display: none; }
  .site-logo .logo-mark { height: 72px; margin: -10px 0; top: 3px; } /* モバイルは飛び出し控えめ */
  .site-logo .logo-words { margin-left: -6px; }                      /* 小サイズに合わせ寄せ量を縮小 */
  .site-logo .logo-name { font-size: 24px; }
  /* 中間帯はモバイルで15〜20%縮小（2列カードの折返し防止・狭幅での過大化回避） */
  .cast-name { font-size: 21px; }
  .comment-block h3 { font-size: 21px; }
  .profile-head .catch { font-size: 20px; }
  /* sub-head の英語タイトルをモバイルで縮小（長い欧文が折り返し・オーバーフローしないよう） */
  .sub-head .en { font-size: 22px; }
  /* スペック行：2列カードの狭幅でも1行に収まるよう縮小（ellipsis は維持） */
  .cast-spec { font-size: 11px; letter-spacing: .02em; }
  /* 2列カードの最外列が画面端を超えないよう、四隅オーナメントの突き出しを抑制 */
  .thumb-frame::before { transform: translate(-8%, -8%); }
  .thumb-frame::after  { transform: translate(8%, 8%) rotate(180deg); }
  .thumb-frame--b::before { transform: translate(8%, -8%) rotate(90deg); }
  .thumb-frame--b::after  { transform: translate(-8%, 8%) rotate(270deg); }
  .cast-card:hover .thumb-frame::before { transform: translate(-8%, -8%) scale(1.06); }
  .cast-card:hover .thumb-frame::after  { transform: translate(8%, 8%) rotate(180deg) scale(1.06); }
  .cast-card:hover .thumb-frame--b::before { transform: translate(8%, -8%) rotate(90deg) scale(1.06); }
  .cast-card:hover .thumb-frame--b::after  { transform: translate(-8%, 8%) rotate(270deg) scale(1.06); }
  /* 2列で細いカードでは New を縮小（はみ出しは維持）。メダルは出勤バー(高さ約30px)に
     被るため、bottom を上げてバーの上へ逃がす＋やや縮小。 */
  .cast-new { width: 62px; top: -9px; left: -7px; }
  .cast-thumb .cast-rank { width: 52px; left: 4px; bottom: 36px; }
  .nav-toggle { display: inline-block; }
  .gnav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--plum); border-top: 1px solid rgba(212, 175, 106, .4);
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
    z-index: 20;
  }
  .gnav.is-open { max-height: 70vh; }
  .gnav ul { flex-direction: column; gap: 0; padding: 4px var(--pad) 12px; }
  .gnav li { width: 100%; border-bottom: 1px solid rgba(212, 175, 106, .12); }
  /* ドロワーは横並びに：日本語の右に英語小（縦リストで自然に並ぶ） */
  .gnav a { display: flex; flex-direction: row; align-items: baseline; gap: 10px; padding: 14px 0; }
}

/* =====================================================================
   出勤情報 schedule.html — 日付ナビ（7日分横並び・モバイルは横スクロール）
   PHP エンジニア構造：<a href="?cnt=N"><button class="schedule-tab">...</button></a>
   <a> が flex アイテム・<button> が内部コンテンツ＆ビジュアルを担う
   ===================================================================== */
.schedule-date-nav {
  display: flex;
  width: 100%;          /* flex が子の合計幅まで膨らむのを抑止し内部スクロールを成立させる */
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin: 0 0 24px;
  border: 1px solid var(--line);
}
.schedule-date-nav::-webkit-scrollbar { height: 4px; }
.schedule-date-nav::-webkit-scrollbar-thumb { background: var(--gold); }
/* <a> = flex アイテム。border-right と scroll-snap はここで制御 */
.schedule-date-nav a {
  flex: 1;
  min-width: 76px;
  display: flex;          /* 内部の button が <a> 全体を満たすために必要 */
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  border-right: 1px solid var(--line);
}
.schedule-date-nav a:last-child { border-right: none; }
/* <button> = 内部コンテンツ担当。<a> の幅・高さを満たして伸びる */
.schedule-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px;
  width: 100%;
  background: var(--paper);
  border: none;
  cursor: pointer;
  transition: background .25s;
}
.schedule-tab .tab-date {
  font-family: var(--font-serif-en);
  font-size: 20px; font-weight: 600;
  color: var(--ink); letter-spacing: .04em;
  transition: color .25s;
}
.schedule-tab .tab-dow {
  font-size: 13px; color: var(--muted);
  letter-spacing: .06em; transition: color .25s;
}
.schedule-tab .tab-dow.sat { color: #3a5a9c; }
.schedule-tab .tab-dow.sun { color: var(--rose-deep); }
/* アクティブ：ワイン→ボルドーグラデ（ヘッダーと同系）＋金の日付 */
.schedule-tab.is-active {
  background: linear-gradient(to bottom, var(--rose-deep), var(--bordeaux));
}
.schedule-tab.is-active .tab-date { color: var(--gold); }
.schedule-tab.is-active .tab-dow { color: rgba(242, 230, 214, .85); }
.schedule-tab.is-active .tab-dow.sat { color: #a8c0f0; }
.schedule-tab.is-active .tab-dow.sun { color: #f0a8b4; }
.schedule-tab:hover:not(.is-active) { background: rgba(212, 175, 106, .08); }

/* =====================================================================
   トップへ戻るボタン（スクロール量 300px 超で右下に浮上）
   .is-visible を JS で付与。opacity+visibility の二重管理で transition が効く。
   ===================================================================== */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 32px;
  z-index: 100;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plum);
  border: 1px solid rgba(212, 175, 106, .6);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .35s, visibility .35s, transform .35s, background .25s, border-color .25s;
}
/* CSS三角形（回転なし＝flex中央揃えで常に完璧センタリング） */
.back-to-top::before {
  content: "";
  display: block;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 6px 9px 6px;
  border-color: transparent transparent var(--gold) transparent;
  transition: border-color .25s;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover { background: var(--bordeaux); border-color: var(--gold); }
.back-to-top:hover::before { border-color: transparent transparent var(--goldlight) transparent; }
/* モバイル：.cta-sticky（約56px）の上へ避ける */
@media (max-width: 640px) {
  .back-to-top { right: 16px; bottom: 72px; width: 44px; height: 44px; }
}

/* =====================================================================
   SPLASH PAGE（index.html 専用）
   標準ヘッダー/フッターを使わない独立レイアウト。
   他ページには影響なし（.splash-body クラス前提）。
   ===================================================================== */

.splash-body {
  margin: 0;
  /* overflow は設定しない：.splash-wrap 以下へのスクロールを許可 */
  background: #0a0308; /* 画像読み込み前のフォールバック＋PRセクション背景 */
}

/* ── ラッパー：全画面固定 ── */
.splash-wrap {
  position: relative;
  width: 100vw;
  height: 100dvh; /* dynamic viewport height：モバイルブラウザUI高さ変動に対応 */
  overflow: hidden;
}

/* ── 背景画像 ── */
.splash-bg {
  position: absolute;
  inset: 0;
  background: url(../img/index-bg.png) center / cover no-repeat;
}
/* SP（768px以下）：縦長画像に切替・上寄せで頭部（ロゴ）が見えるよう調整 */
@media (max-width: 768px) {
  .splash-bg {
    background-image: url(../img/index-bg-sp.png);
    background-position: top center;
  }
}

/* ── 下部スクリム：PC非表示 / モバイルのみ表示 ── */
.splash-scrim {
  display: none; /* PC：スクリムなし */
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 3, 8, .82) 0%,
    rgba(10, 3, 8, .45) 30%,
    transparent 60%
  );
  pointer-events: none;
}
@media (max-width: 768px) {
  .splash-scrim { display: block; }
}

/* ── CTAブロック：画面下部中央 ── */
.splash-cta {
  position: absolute;
  bottom: 52px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
}

/* ── ENTERボタン（画像ボタン：assets/img/index-enter.png） ── */
.splash-enter {
  display: inline-block;
  text-decoration: none;
  animation: splashFade 1.4s ease .7s both;
  transition: filter .25s ease, transform .25s ease;
}
.splash-enter img {
  display: block;
  width: 400px;   /* 800px 2x → 400px 1x表示 */
  height: auto;
  max-width: 82vw; /* モバイルではみ出し防止 */
}
.splash-enter:hover {
  filter: brightness(1.18);
  transform: scale(1.03);
}

/* ── 年齢確認文 ── */
.splash-age-notice {
  font-size: 11px;
  line-height: 1.9;
  color: rgba(255, 255, 255, .55);
  text-align: center;
  letter-spacing: .05em;
  max-width: 460px;
  animation: splashFade 1.4s ease 1.0s both;
}

/* ── 退場リンク ── */
.splash-exit {
  font-size: 11px;
  color: rgba(212, 175, 106, .6);
  text-decoration: underline;
  text-underline-offset: 3px;
  letter-spacing: .1em;
  animation: splashFade 1.4s ease 1.2s both;
  transition: color .2s ease;
}
.splash-exit:hover { color: var(--gold); }

/* ── フッター（著作年） ── */
.splash-foot {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, .28);
  letter-spacing: .1em;
}

/* ── フェードインアニメ（CSSのみ・JS不要） ── */
@keyframes splashFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── モバイル調整（640px以下） ── */
@media (max-width: 640px) {
  .splash-cta { bottom: 40px; gap: 16px; }
  .splash-age-notice { font-size: 9px; }
}

/* ── スクロール先：PRセクション ─────────────────────────── */
/* ムーランルージュ・無敵と同構造：求人バナー → PR文 → 媒体バナー列 */
.splash-pr {
  background: #0a0308;
  color: var(--champagne);
  font-family: var(--font-sans);
  padding: 48px 20px 56px;
  text-align: center;
}

/* ── スクロール誘導インジケーター ── */
.splash-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 40px;
  opacity: 0;
  animation: splashFade 1.4s ease 1.8s both;
}
.splash-scroll-hint span {
  font-size: 20px;
  letter-spacing: .22em;
  color: rgba(212, 175, 106, .5);
  font-family: var(--font-serif-en);
}
.splash-scroll-hint::after {
  content: '';
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(212,175,106,.5), transparent);
  animation: scrollLine 1.8s ease-in-out 2.0s infinite;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── 求人バナー ── */
.splash-recruit {
  display: block;
  margin: 0 auto 40px;
  max-width: 480px;
}
.splash-recruit-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  height: 80px;
  margin: 0 auto 40px;
  border: 1px dashed rgba(212,175,106,.35);
  color: rgba(212,175,106,.45);
  font-size: 11px;
  letter-spacing: .1em;
}

/* ── PR 区切り罫 ── */
.splash-pr-rule {
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  margin: 0 auto 32px;
}

/* ── PR コピーブロック ── */
.splash-pr-copy {
  max-width: 720px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.splash-pr-copy p {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 2.0;
  letter-spacing: .08em;
  color: rgba(242, 230, 214, .82);
  margin: 0;
}
.splash-pr-copy p strong {
  color: var(--champagne);
  font-weight: 600;
}
.splash-pr-copy .pr-lead {
  font-size: 36px;
  letter-spacing: .04em;
  color: var(--champagne);
  font-weight: 600;
  font-kerning: normal;
  font-feature-settings: "palt" 1; /* 日本語プロポーショナルメトリクス：字間を最適化 */
}
/* 読点・句点の直後を個別に詰める（span.kern-punct で囲んだ文字に適用） */
.splash-pr-copy .pr-lead .kern-punct {
  letter-spacing: -.25em;
}
.splash-pr-copy .pr-gold {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .2em;
  font-family: var(--font-serif-en);
}

/* ── 媒体バナー列 ── */
.splash-banners {
  margin-top: 40px;
  border-top: 1px solid rgba(212,175,106,.18);
  padding-top: 32px;
}
.splash-banners-label {
  font-size: 20px;
  letter-spacing: .2em;
  color: rgba(212,175,106,.4);
  font-family: var(--font-serif-en);
  margin-bottom: 20px;
}
.splash-banner-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
/* バナープレースホルダー：実バナー画像に差し替え */
.splash-banner-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed rgba(212,175,106,.25);
  color: rgba(212,175,106,.35);
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: center;
  padding: 4px;
  text-decoration: none;
  transition: border-color .2s ease;
}
.splash-banner-slot:hover { border-color: rgba(212,175,106,.55); }
/* 標準バナーサイズ（実バナー差し替え後は img に切替可） */
.splash-banner-slot--wide   { width: 234px; height: 60px; }  /* 234×60 */
.splash-banner-slot--medium { width: 180px; height: 45px; }  /* 180×45 */

/* ── モバイル調整 ── */
@media (max-width: 640px) {
  .splash-pr { padding: 36px 16px 48px; }
  .splash-pr-copy p { font-size: 13px; line-height: 1.9; }
  .splash-pr-copy .pr-lead { font-size: 30px; }
  .splash-banner-slot--wide { width: 160px; height: 42px; }
}

/* =====================================================================
   TOP ページ（top.html）
   ===================================================================== */

/* ── TOPページ専用ボタン（グローバルな .btn を上書きしないようスコープ限定） ── */
.top-section .btn {
  display: inline-block;
  padding: 14px 44px;
  font-family: var(--font-serif-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  transition: background .22s, color .22s;
}
.top-section .btn:hover {
  background: var(--gold);
  color: var(--plum);
}

/* ── TOPセクション共通 ── */
.top-section {
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.top-section__more {
  text-align: center;
  margin-top: 24px;
}
/* ダーク帯（SYSTEM等）*/
.top-section--dark {
  background: var(--plum);
  border-top-color: rgba(212,175,106,.2);
}
.top-section--dark .section-head .ja {
  color: var(--champagne);
}
.top-section--dark .section-head .ja::after {
  filter: brightness(2) saturate(.4);
  opacity: .42;
}
.top-section--dark .top-section__more .btn {
  color: var(--gold);
  border-color: var(--gold);
}
.top-section--dark .top-section__more .btn:hover {
  background: var(--gold);
  color: var(--plum);
}

/* ── HERO（共通ベース） ── */
.top-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, var(--plum) 0%, var(--bordeaux) 100%);
}

/* PC：画像実寸比率 1920×912 に合わせる（16:9 にすると画像が左右クリップされる）
   PHP: ヒーロー画像の縦横サイズが変わったらここの比率も更新すること */
@media (min-width: 769px) {
  .top-hero { aspect-ratio: 1920 / 912; }
}

/* SP：90dvh固定（768px以下） */
@media (max-width: 768px) {
  .top-hero { height: 90dvh; }
}

/* PC/SP 切り替え背景画像（共通ベース） */
.top-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  z-index: 0;
}
/* PC用：769px以上で表示 */
@media (min-width: 769px) {
  .top-hero__bg--pc { display: block; }
  .top-hero__bg--sp { display: none; }
}
/* SP用：768px以下で表示 */
@media (max-width: 768px) {
  .top-hero__bg--pc { display: none; }
  .top-hero__bg--sp { display: block; }
}

/* ── ヒーロー Swiper（共通ベース） ── */
.top-hero-swiper {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
}
/* PC：親の aspect-ratio から高さが確定するため 100% で追従 */
@media (min-width: 769px) {
  .top-hero-swiper { height: 100%; }
}
/* SP：親と同じ 90dvh を明示（Swiper が height:auto に戻すのを防ぐ） */
@media (max-width: 768px) {
  .top-hero-swiper { height: 90dvh; }
}
.top-hero-swiper .swiper-wrapper,
.top-hero-swiper .swiper-slide {
  height: 100%;
}
.top-hero-swiper .swiper-slide {
  position: relative;
}
/* ヒーロースライド全面リンク（PHP: 各スライドのリンク先を差し替え） */
.top-hero__link {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* ページネーション：金ドット */
.top-hero-swiper .swiper-pagination {
  bottom: 72px; /* SCROLLヒントの上に配置 */
  z-index: 4;
}
.top-hero-swiper .swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: rgba(212,175,106,.45);
  opacity: 1;
  transition: background .3s, transform .3s;
}
.top-hero-swiper .swiper-pagination-bullet-active {
  background: var(--gold);
  transform: scale(1.35);
}

/* SCROLLヒント */
.top-hero__scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.top-hero__scroll span {
  font-family: var(--font-serif-en);
  font-size: 10px; letter-spacing: .3em;
  color: rgba(212,175,106,.55);
}
.top-hero__scroll::after {
  content: "";
  width: 1px; height: 32px;
  background: var(--gold);
  opacity: .4;
  animation: scrollPulse 2.2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: .15; }
  50%       { opacity: .58; }
}

/* ── CONCEPT帯 ── */
.top-concept {
  padding: 40px var(--pad);
  text-align: center;
  background: var(--ivory);
  border-top: 1px solid var(--line);
}
.top-concept__ornament {
  width: 540px; max-width: 95vw; height: 64px;
  margin: 0 auto 18px;
  background: url(../img/ornament-divider.png) center / contain no-repeat;
  opacity: .8;
}
.top-concept__lead {
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .18em; font-weight: 500;
  color: var(--bordeaux);
  margin: 0 0 11px;
}
.top-concept__lead .kern-punct { letter-spacing: -.25em; }
.top-concept__body {
  font-size: 15px; line-height: 2.1; letter-spacing: .06em;
  color: var(--taupe);
  max-width: 680px; margin: 0 auto;
}

/* ── FEATURED（注目キャスト） ── */
.top-featured {
  border-top: 1px solid rgba(212, 175, 106, .3); /* 金色の薄い仕切り線（フッターと統一） */
  padding-top: 40px;
  display: grid;
  grid-template-columns: 300px 1fr;
  grid-template-rows: 450px; /* 写真列 300px × (3/2) = 450px で行高さを確定。スクロールの上限を作る */
  gap: 40px;
  margin-top: 40px;
}
/* 左：写真リンク */
.top-featured__photo {
  display: block;
  height: 100%; /* 行高さ（450px）を埋める */
  overflow: hidden;
  border: 1px solid rgba(122, 18, 42, .22);
  border-radius: var(--radius);
}
.top-featured__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1s cubic-bezier(.19, 1, .22, 1);
}
.top-featured__photo:hover img { transform: scale(1.05); }
/* 右：テキストパネル（写真と同じ高さ 450px でスクロール） */
.top-featured__body {
  height: 100%; /* 行高さ（450px）に揃える → overflow-y が初めて有効になる */
  overflow-y: auto;
  min-height: 0;
  padding: 4px 8px 4px 0;
  /* 金スクロールバー（schedule・hero と統一） */
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}
.top-featured__body::-webkit-scrollbar { width: 4px; }
.top-featured__body::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 2px; }
/* 右パネル：profile.html の .profile-head / .comment-block / .sub-head をそのまま流用 */
/* モバイル：縦並び・写真フル幅・テキストはmax-height固定でスクロール */
@media (max-width: 768px) {
  .top-featured {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .top-featured__photo {
    aspect-ratio: 3 / 4; /* SPでは少し横広に */
    width: 100%;
  }
  .top-featured__body {
    max-height: 280px;
    overflow-y: auto;
    padding: 0 4px 0 0;
  }
}

/* ── RANKING ── */
.top-ranking__grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}
.top-ranking__sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ── NEWS ── */
.top-news__list {
  max-width: 760px; margin: 40px auto 0;
  list-style: none; padding: 0;
}
.top-news__item {
  display: flex; align-items: baseline; gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.top-news__item:first-child { border-top: 1px solid var(--line); }
.top-news__date {
  font-family: var(--font-serif-en);
  font-size: 12px; letter-spacing: .12em;
  color: var(--gold); white-space: nowrap;
}
.top-news__title {
  font-size: 14px; letter-spacing: .06em;
  line-height: 1.8; color: var(--ink); margin: 0;
}

/* 料金表だけを包むダーク帯（section-head は白地に出したため section--dark は使わない） */
.system-pricing-band {
  background: var(--plum);
  border-top: 1px solid rgba(212,175,106,.2);
  padding: 48px 0 56px;
}

/* ダーク帯内タイトル */
.system-pricing-band__title {
  text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--champagne);
  margin: 0 0 36px;
}

/* ── SYSTEM料金（ダーク帯）── 競合準拠：装飾枠＋点線区切り ── */
/* 競合共通：thead廃止・全体を1つの装飾ボックスで囲む・点線で行分割 */
.top-system__list {
  width: 100%; max-width: 900px;
  margin: 36px auto 0;
  border: 1px solid rgba(212,175,106,.35);
  padding: 0;
}
.top-system__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 52px;
  border-bottom: 1px dashed rgba(212,175,106,.2);
}
.top-system__row:last-child { border-bottom: none; }
.top-system__row dt {
  font-family: var(--font-serif-en);
  font-size: 22px; letter-spacing: .22em; font-weight: 500;
  color: rgba(212,175,106,.65);
  min-width: 240px;
}
.top-system__row dd {
  font-family: var(--font-serif);
  font-size: clamp(44px, 5vw, 62px); letter-spacing: .04em;
  color: var(--champagne);
  margin: 0;
}
.top-system__note {
  max-width: 900px; margin: 14px auto 0;
  font-size: 12px; letter-spacing: .05em;
  color: rgba(242,230,214,.35); text-align: left;
  padding: 0 52px;
}

/* ── SYSTEM BANNERS ── */
/* auto-fill グリッド：バナーを追加するだけで自動折り返し。min 280px を下回らない。 */
.system-banners {
  padding: 48px 0;
  background: var(--bordeaux);
  border-top: 1px solid rgba(212,175,106,.15);
}
.system-banners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 0;
}
.system-banners__item { list-style: none; }
.system-banners__link {
  display: block;
  border: 1px solid rgba(212,175,106,.25);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.system-banners__link:hover {
  border-color: rgba(212,175,106,.7);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
/* バナー画像：横長 3:1 を基本に、実画像で上書き可 */
.system-banners__link img {
  width: 100%; height: auto;
  display: block;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
/* プレースホルダー（実画像差し替え前の仮表示） */
.system-banners__placeholder {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 1;
  background: rgba(212,175,106,.06);
  color: rgba(212,175,106,.4);
  font-size: 12px; letter-spacing: .1em;
  text-align: center; line-height: 1.8;
  border: 1px dashed rgba(212,175,106,.2);
}
@media (max-width: 600px) {
  .system-banners__grid { grid-template-columns: 1fr; }
}

/* ── WIDE BANNERS（白背景・900px幅）── */
.system-wide-banners {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 40px 0;
}
.system-wide-banners__item {
  max-width: 900px;
  margin: 0 auto 24px;
}
.system-wide-banners__item:last-child { margin-bottom: 0; }
.system-wide-banners__item .system-banners__link img {
  aspect-ratio: auto;   /* 実画像の縦横比に追従 */
  width: 100%;
  height: auto;
}

/* ── ACCESS / 店舗案内 ── */
.top-access__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px; margin-top: 48px;
  align-items: start;
}
.top-access__info dl { margin: 0; }
.top-access__info dt {
  font-family: var(--font-serif-en);
  font-size: 11px; letter-spacing: .22em;
  color: var(--gold); font-weight: 600;
  margin-top: 18px;
}
.top-access__info dt:first-child { margin-top: 0; }
.top-access__info dd {
  margin: 4px 0 0; font-size: 15px;
  line-height: 1.8; letter-spacing: .05em; color: var(--taupe);
}
.top-access__info .btn { margin-top: 28px; }
.top-access__map {
  width: 100%; aspect-ratio: 4/3;
  background: var(--rose-mist);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; letter-spacing: .1em;
  overflow: hidden;
}
.top-access__map iframe {
  width: 100%; height: 100%; border: 0; display: block;
}

/* ── RECRUIT帯 ── */
.top-recruit {
  background: var(--plum);
  padding: 52px var(--pad) 48px;
  text-align: center;
  border-top: 1px solid rgba(212,175,106,.18);
}

/* ── モバイル ── */
@media (max-width: 768px) {
  .top-ranking__grid { grid-template-columns: 1fr; }
  .top-ranking__sub { grid-template-columns: 1fr 1fr; }
  .top-access__cols { grid-template-columns: 1fr; }
  .top-section { padding: 28px 0; }
  .top-system__row { padding: 22px 20px; }
  .top-system__row dt { font-size: 18px; letter-spacing: .12em; min-width: 110px; }
  .top-system__row dd { font-size: 30px; }
  .top-concept { padding: 28px var(--pad); }
  /* 見出し系：狭い画面では字間をリセット（はみ出し防止） */
  .section-head .ja,
  .top-concept__lead { letter-spacing: 0; }
}
@media (max-width: 480px) {
  .top-section .btn { padding: 12px 28px; font-size: 11px; }
}