/* =========================================================================
   ベース / リセット
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); background: var(--color-bg); }

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: transparent; /* 背景は html と body::before（固定レイヤー）が担う */
  -webkit-font-smoothing: antialiased;
}

/* サイト全体の固定背景：ブランド色の淡い光＋星の粒。
   スクロールしてもこのレイヤーは動かず、コンテンツが上を流れる（没入感の核） */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 40% at 88% 0%, rgba(43, 142, 152, 0.06), transparent 60%),
    radial-gradient(50% 42% at 6% 100%, rgba(208, 69, 142, 0.05), transparent 60%);
}

/* 差し込み画像を枠いっぱいに表示するユーティリティ */
.cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* スクロール進捗バー（main.js が生成） */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  z-index: 200; pointer-events: none;
}

/* =========================================================================
   モバイル：アプリ風の下部タブバー（main.js が生成・スマホ幅のみ表示）
   ========================================================================= */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom); /* iPhoneのホームバー領域を避ける */
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 8px;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-text-muted);
  transition: color 0.2s var(--ease), transform 0.1s var(--ease);
}
.tabbar a:active { transform: scale(0.9); } /* タップの押し込みフィードバック */
.tabbar a.is-active { color: var(--color-primary-dark); }
.tabbar svg { width: 24px; height: 24px; display: block; }

/* スマホ専用の改行（PCでは無効） */
.br-sp { display: none; }

@media (max-width: 720px) {
  .br-sp { display: inline; }

  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); }
  /* タブバーの高さぶん下に余白（JS有効時のみ） */
  html.js body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.js .hero__scroll { bottom: 92px; } /* スクロール指示をタブバーの上に */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }

h1, h2, h3 { font-family: var(--font-heading); line-height: 1.3; margin: 0; font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 800px; }

/* キーボード操作時のフォーカスリング（白＋ゴールドの二重輪で、白/ダーク/ゴールドどの背景でも視認可能） */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-primary-dark);
}

/* =========================================================================
   画像プレースホルダ（画像差し込み前のグレー枠）
   ========================================================================= */
.media-placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, var(--placeholder-bg), var(--placeholder-bg) 12px,
      #f7f8fb 12px, #f7f8fb 24px);
  color: var(--placeholder-fg);
  overflow: hidden;
}
.media-placeholder--dark {
  background:
    repeating-linear-gradient(45deg, var(--placeholder-bg-dark), var(--placeholder-bg-dark) 12px,
      #20283b 12px, #20283b 24px);
  color: var(--placeholder-fg-dark);
}
.placeholder-label {
  font-size: 0.78rem; letter-spacing: 0.12em; font-weight: 700;
  background: #ffffff; border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 999px;
}
.media-placeholder--dark .placeholder-label { background: rgba(255, 255, 255, 0.12); }

/* =========================================================================
   ボタン / リンク
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 30px; border-radius: 999px;
  font-weight: 700; letter-spacing: 0.04em; cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--sm { padding: 10px 20px; font-size: 0.88rem; }
.btn--primary { background: var(--color-primary); color: #fff; position: relative; overflow: hidden; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; }
/* ホバーで光が走るシャイン効果（transformのみでアニメーション＝軽量） */
.btn--primary::after {
  content: ""; position: absolute; top: 0; left: -60%; height: 100%; width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: transform 0.55s var(--ease);
}
.btn--primary:hover::after { transform: translateX(340%) skewX(-18deg); }
/* LINE登録ボタン（LINEブランドグリーン） */
.btn--line { background: #06C755; color: #fff; }
.btn--line:hover { background: #05b34c; color: #fff; }
.btn--ghost { border-color: rgba(28, 23, 38, 0.4); color: var(--color-text); }
.btn--ghost:hover { background: rgba(28, 23, 38, 0.06); }
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, 0.15); }
.btn--outline { border-color: var(--color-text); color: var(--color-text); }
.btn--outline:hover { background: var(--color-text); color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--color-primary-dark);
  margin-top: 8px;
}
.link-arrow::after { content: "→"; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================================
   ヘッダー / ナビ（基本はダーク背景＋白文字）
   ========================================================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-h);
  background: transparent; z-index: 100;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  background: var(--color-header-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(25, 18, 56, 0.07);
}
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__logo { height: 46px; width: auto; display: block; transition: transform 0.4s var(--ease); }
.brand:hover .brand__logo { transform: rotate(-8deg) scale(1.08); }
.brand__text {
  font-family: var(--font-en); font-weight: 700; font-size: 1.3rem;
  letter-spacing: 0.08em; color: var(--color-text);
}

.nav__list { display: flex; gap: 28px; align-items: center; }
.nav__link {
  color: var(--color-text); font-size: 0.92rem; font-weight: 600; position: relative;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--color-primary);
  transition: width 0.25s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__link--cta {
  background: #06C755; color: #fff; /* LINEブランドグリーン */
  padding: 9px 22px; border-radius: 999px;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: #05b34c; color: #fff; }

/* ハンバーガー（モバイル） */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; background: var(--color-text); border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

/* =========================================================================
   ヒーロー
   ========================================================================= */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  color: var(--color-text); overflow: hidden; background: #fff;
}
.hero__media {
  position: absolute; inset: 0;
  background: url("../assets/images/photo-table.jpg") center/cover no-repeat;
}
/* 暗幕＋ブランド色の照明（右上ティール／左下マゼンタ）で画像なしでも豊かに見せる */
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.94) 4%,
    rgba(255, 255, 255, 0.78) 34%,
    rgba(255, 255, 255, 0.2) 62%,
    rgba(255, 255, 255, 0.03) 100%);
}

/* 星のきらめき（PRISM風の微細な光の粒） */
.hero__stars {
  display: none; /* 白背景では星は使わない */
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 25%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(2px 2px at 45% 15%, rgba(255, 255, 255, 0.45), transparent 55%),
    radial-gradient(1.5px 1.5px at 58% 44%, rgba(255, 255, 255, 0.30), transparent 55%),
    radial-gradient(2.5px 2.5px at 71% 23%, rgba(255, 217, 236, 0.50), transparent 55%),
    radial-gradient(1.5px 1.5px at 83% 62%, rgba(191, 239, 241, 0.45), transparent 55%),
    radial-gradient(2px 2px at 92% 35%, rgba(255, 255, 255, 0.40), transparent 55%),
    radial-gradient(1.5px 1.5px at 8% 82%, rgba(191, 239, 241, 0.35), transparent 55%),
    radial-gradient(2px 2px at 38% 88%, rgba(255, 255, 255, 0.30), transparent 55%),
    radial-gradient(1.5px 1.5px at 66% 78%, rgba(255, 217, 236, 0.40), transparent 55%);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.4; } to { opacity: 1; } }

/* 巨大な LUDENS 透かし文字（アウトラインのみ） */
.hero__watermark {
  position: absolute; left: 50%; top: 13%; transform: translateX(-50%);
  font-family: var(--font-en); font-weight: 700;
  font-size: clamp(90px, 17vw, 250px); letter-spacing: 0.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(28, 23, 38, 0.08);
  pointer-events: none; user-select: none; white-space: nowrap;
}

/* ガラス製トランプカードの浮遊（グラスモーフィズム） */
.hero__cards { position: absolute; inset: 0; pointer-events: none; }
.glass-card {
  position: absolute;
  width: clamp(80px, 9vw, 130px); aspect-ratio: 5 / 7;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(30px, 3.4vw, 48px);
  /* 白背景では「本物のトランプ」らしい白カード＋柔らかい影で表現 */
  background: #ffffff;
  border: 1px solid #ecebf2;
  box-shadow: 0 16px 36px rgba(25, 18, 56, 0.14);
  animation: cardDrift 9s ease-in-out infinite alternate;
}
.glass-card--1 { right: 9%;  top: 20%; rotate: 12deg; color: #1c1726; }
.glass-card--2 { right: 22%; top: 48%; rotate: -9deg; color: var(--color-primary); animation-duration: 11s; animation-delay: -3s; }
.glass-card--3 { right: 4%;  top: 56%; rotate: 5deg;  color: var(--color-secondary); animation-duration: 13s; animation-delay: -6s; }
@keyframes cardDrift { from { translate: 0 -10px; } to { translate: 0 14px; } }

/* トランプのスートがゆっくり舞い上がる装飾 */
.hero__suits { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__suits .suit {
  position: absolute; bottom: -14%;
  font-size: 40px; line-height: 1; opacity: 0;
  animation: suitRise 24s linear infinite;
}
.hero__suits .suit:nth-child(1) { left: 6%;  font-size: 34px; color: var(--color-primary);   animation-duration: 26s; animation-delay: -4s; }
.hero__suits .suit:nth-child(2) { left: 18%; font-size: 52px; color: var(--color-secondary); animation-duration: 32s; animation-delay: -14s; }
.hero__suits .suit:nth-child(3) { left: 33%; font-size: 28px; color: var(--color-tertiary);        animation-duration: 22s; animation-delay: -8s; }
.hero__suits .suit:nth-child(4) { left: 47%; font-size: 44px; color: var(--color-primary);   animation-duration: 30s; animation-delay: -20s; }
.hero__suits .suit:nth-child(5) { left: 60%; font-size: 30px; color: var(--color-secondary); animation-duration: 24s; animation-delay: -2s; }
.hero__suits .suit:nth-child(6) { left: 72%; font-size: 56px; color: var(--color-tertiary);        animation-duration: 34s; animation-delay: -17s; }
.hero__suits .suit:nth-child(7) { left: 84%; font-size: 36px; color: var(--color-primary);   animation-duration: 27s; animation-delay: -10s; }
.hero__suits .suit:nth-child(8) { left: 93%; font-size: 26px; color: var(--color-secondary); animation-duration: 21s; animation-delay: -6s; }
@keyframes suitRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.18; }
  85%  { opacity: 0.10; }
  100% { transform: translateY(-115vh) rotate(38deg); opacity: 0; }
}
.hero__content { position: relative; z-index: 2; max-width: 720px; }
.hero__eyebrow { letter-spacing: 0.3em; font-size: 0.82rem; font-weight: 700; color: var(--color-secondary); margin: 0 0 16px; }
.hero__title { font-size: clamp(2.4rem, 6.5vw, 4.6rem); margin-bottom: 20px; line-height: 1.15; }

.hero__lead { font-size: 1.05rem; margin-bottom: 36px; max-width: 38em; color: var(--color-text-muted); }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero .btn--ghost { background: rgba(255, 255, 255, 0.72); }
.hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.92); }

.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: 24px; height: 40px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 999px; z-index: 2; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45));
}
.hero__scroll span {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px;
  margin-left: -2px; background: #ffffff; border-radius: 2px;
  animation: scrollDot 1.6s var(--ease) infinite;
}
@keyframes scrollDot { 0%{opacity:0;transform:translateY(0)} 40%{opacity:1} 100%{opacity:0;transform:translateY(12px)} }

/* =========================================================================
   セクション共通
   ========================================================================= */
.section { padding-block: var(--section-py); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-dark); color: var(--color-text-on-dark); }
.section--dark .section__eyebrow { color: var(--color-primary); }

.section__head { text-align: center; margin-bottom: clamp(36px, 5vw, 64px); }
/* エディトリアル風のセクション番号（01 — ABOUT POKER）を自動付与 */
body { counter-reset: sec; }
.section .section__eyebrow::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " — ";
  color: var(--color-secondary-dark);
}
/* タイトル下のスペードアクセント（ポーカーらしさの控えめな飾り） */
.section__head::after {
  content: "♠"; display: block; margin-top: 12px;
  font-size: 0.9rem; color: var(--color-primary);
}
.section__eyebrow { letter-spacing: 0.3em; font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark); margin: 0 0 10px; }
.section__title { font-size: clamp(1.7rem, 4vw, 2.6rem); }

/* ----- はじめての方へ ----- */
.intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.intro__body .section__eyebrow, .intro__body .section__title { text-align: left; }
.intro__body p { color: var(--color-text-muted); margin: 0 0 16px; }
.intro__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; }
/* デザイン画像（正方形グラフィック等）はトリミングせず全体を表示 */
.intro__media--natural { aspect-ratio: auto; }

/* ----- お知らせ ----- */
.news-list__row { border-bottom: 1px solid var(--color-border); }
.news-list__row .news-row {
  display: grid; grid-template-columns: 120px 80px 1fr; align-items: center; gap: 16px;
  padding: 20px 4px;
}
.news__date { font-family: var(--font-en); color: var(--color-text-muted); font-size: 0.9rem; }
.news__cat {
  justify-self: start; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  border: 1px solid var(--color-primary); color: var(--color-primary-dark);
  padding: 3px 10px; border-radius: 999px;
}
.news__title { font-weight: 600; }

/* ----- カードグリッド（ゲーム） ----- */
/* auto-fit + min() で、カード数や画面幅が変わっても破綻しない */
.card-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover {
  transform: translateY(-6px) rotate(0.6deg);
  box-shadow: var(--shadow-md);
  border-color: rgba(208, 69, 142, 0.35);
}
.card__media { aspect-ratio: 4 / 3; position: relative; }

/* 各カードの隅にスートの透かし（♠♥♦♣）を入れてトランプらしく */
.card__media::after {
  position: absolute; right: 12px; bottom: 2px;
  font-size: 64px; line-height: 1; opacity: 0.16; pointer-events: none;
}
.card-grid .card:nth-child(4n+1) .card__media::after { content: "♠"; color: #1c1726; }
.card-grid .card:nth-child(4n+2) .card__media::after { content: "♥"; color: var(--color-primary); }
.card-grid .card:nth-child(4n+3) .card__media::after { content: "♦"; color: var(--color-secondary); }
.card-grid .card:nth-child(4n)   .card__media::after { content: "♣"; color: #1c1726; }

/* ディール演出：配る前はわずかに傾けておく（表示時に .is-visible で水平に戻る） */
.js .card-grid .reveal { transform: translateY(28px) rotate(-2deg); }
/* 表示後はカード自身の速いトランジションに戻す（ホバーが機敏になる） */
.js .card.reveal.is-visible { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
/* .js .reveal.is-visible の transform:none に負けないよう、hover を高詳細度で再定義
   （JSチルトが無効な環境=タッチ/reduced-motion でもホバー浮き上がりが効く） */
.js .card.reveal.is-visible:hover { transform: translateY(-6px) rotate(0.6deg); }
.card__body { padding: 20px; }
.card__title { font-size: 1.1rem; margin-bottom: 8px; }
.card__desc { color: var(--color-text-muted); font-size: 0.9rem; margin: 0; }

/* ----- 店舗情報（1店舗） ----- */
.info-logo {
  display: block; width: min(220px, 60%); height: auto;
  margin: 0 auto clamp(28px, 4vw, 44px);
  object-fit: contain;
}
/* gallery-grid を流用しつつ、風景は3枚なので desktop は3列に上書き
   （.gallery-grid がソース後方にあるため詳細度を上げて確実に上書き） */
.gallery-grid.info-photos { margin-bottom: clamp(28px, 4vw, 44px); grid-template-columns: repeat(3, 1fr); }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.info-list__row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.info-list__row dt { font-weight: 700; }
.info-list__row dd { margin: 0; color: var(--color-text-muted); }
.info-actions { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.info-sns { display: flex; gap: 12px; flex-wrap: wrap; }
.info-sns a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--color-border); border-radius: 999px;
  font-weight: 600; font-size: 0.9rem; background: var(--color-surface);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.info-sns a:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.info-illust { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }

/* ----- ギャラリー（Food & Drinks） ----- */
.gallery-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); }
.gallery__item { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); }

/* フード＆ドリンク：1枚運用時の画像 */
.food-image { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* ----- 料金 ----- */
/* 初心者パック（イチオシ枠：マゼンタ縁取り＋バッジで最も目立たせる） */
.price-featured {
  position: relative;
  max-width: 760px; margin: 12px auto clamp(32px, 5vw, 48px);
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 40px 24px 30px;
  text-align: center;
}
.price-featured__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em;
  padding: 6px 20px; border-radius: 999px; margin: 0;
  white-space: nowrap;
}
.price-featured__name { font-size: 1.5rem; margin: 0 0 18px; }

/* パック内容の図解（アイコン3つ ＋ ＝ 価格） */
.pack-items {
  display: flex; justify-content: center; align-items: stretch;
  gap: 6px; margin: 0 0 4px;
}
.pack-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--color-bg-alt); border-radius: var(--radius);
  padding: 18px 16px 14px; min-width: 148px;
}
.pack-item__icon { width: 56px; height: 56px; display: block; margin-bottom: 4px; }
.pack-item__label { font-weight: 700; }
.pack-item__desc { font-size: 0.76rem; color: var(--color-text-muted); }
.pack-plus, .pack-equals {
  align-self: center; font-weight: 700; font-size: 1.5rem;
  color: var(--color-primary); line-height: 1;
}
.pack-equals { margin: 10px 0 6px; text-align: center; }
.price-featured__price {
  font-family: var(--font-en); font-size: clamp(2.2rem, 5vw, 2.8rem);
  font-weight: 700; line-height: 1.2; color: var(--color-primary-dark);
  margin: 0 0 10px;
}
.price-featured__lead { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }
.price-featured__link { margin-top: 14px; }

.price-plans {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  max-width: 760px; margin-inline: auto;
}
.price-plan {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 32px 24px; text-align: center;
}
.price-plan__name {
  display: inline-block; margin: 0 0 12px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em;
  color: var(--color-primary-dark);
  border: 1.5px solid var(--color-primary); border-radius: 999px;
  padding: 4px 18px;
}
/* プラン内容の図解（初心者パックのミニ版） */
.plan-items { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 12px; }
.plan-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.plan-item svg { width: 46px; height: 46px; display: block; }
.plan-item span { font-size: 0.8rem; font-weight: 700; }
.price-plan__price {
  margin: 0; font-family: var(--font-en);
  font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.2;
}
.price-plan__tax { font-size: 0.5em; font-weight: 600; color: var(--color-text-muted); margin-left: 4px; }
.price-plans__note { text-align: center; color: var(--color-text-muted); font-size: 0.88rem; margin: 16px 0 0; }

/* 単品ドリンクを1卓だけ中央に表示 */
.price-table--single { max-width: 480px; margin: clamp(28px, 4vw, 40px) auto 0; }
.price-table {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 24px 24px 12px;
}
.price-table__title {
  text-align: center; font-size: 1.05rem; margin-bottom: 10px;
  padding-bottom: 12px; border-bottom: 2px solid var(--color-primary);
}
.price-table dl { margin: 0; }
.price-table__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 2px; border-bottom: 1px dashed var(--color-border);
}
.price-table__row:last-child { border-bottom: none; }
.price-table__row dt { font-size: 0.95rem; }
.price-table__row dd { margin: 0; font-weight: 700; }

.price-notes {
  max-width: 760px; margin: clamp(24px, 4vw, 36px) auto 0;
  color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.9;
}

/* ----- チップ購入料金（リングゲーム詳細ページ：横1列×吹き出しコメント） ----- */
.chip-rows { display: grid; gap: 14px; max-width: 640px; margin-inline: auto; }
.chip-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px 16px;
}
.chip-row svg { width: 76px; height: 52px; flex: none; }
.chip-row__info { flex: none; min-width: 132px; }
.chip-card__points { margin: 0; font-weight: 700; font-size: 1rem; white-space: nowrap; }
.chip-card__points span { font-size: 0.75em; margin-left: 1px; }
.chip-card__bb { font-size: 0.68em; color: var(--color-text-muted); font-weight: 600; }
.chip-card__price {
  margin: 2px 0 0; font-family: var(--font-en); font-weight: 700;
  font-size: 1.2rem; color: var(--color-primary-dark);
}
/* 吹き出しコメント（左向きのしっぽ付き） */
.chip-row__comment {
  position: relative; flex: 1; margin: 0 0 0 8px;
  border-radius: 12px; padding: 10px 12px;
  font-size: 0.78rem; font-weight: 700; line-height: 1.6;
}
.chip-row__comment::before {
  content: ""; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  border-style: solid; border-width: 6px 8px 6px 0;
  border-color: transparent transparent transparent transparent;
}
.chip-row__comment--teal   { background: #e7f4f5; color: #1f7b83; }
.chip-row__comment--teal::before   { border-right-color: #e7f4f5; }
.chip-row__comment--pink   { background: #fbeaf3; color: #b93b80; }
.chip-row__comment--pink::before   { border-right-color: #fbeaf3; }
.chip-row__comment--purple { background: #efecf8; color: #5b4b96; }
.chip-row__comment--purple::before { border-right-color: #efecf8; }

@media (max-width: 420px) {
  .chip-row { padding: 12px 10px; gap: 8px; }
  .chip-row svg { width: 48px; height: 36px; }
  /* 点数側を細くして吹き出しの幅を確保（点数は2行に折り返してOK） */
  .chip-row__info { min-width: 96px; max-width: 106px; }
  .chip-card__points { font-size: 0.92rem; white-space: normal; line-height: 1.35; }
  .chip-card__price { font-size: 1.05rem; }
  .chip-row__comment { font-size: 0.72rem; padding: 8px 10px; margin-left: 4px; }
}

/* ----- FAQ ----- */
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 4px;
  font-weight: 700; position: relative;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; color: var(--color-primary-dark); transition: transform 0.25s var(--ease);
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 4px 22px; color: var(--color-text-muted); }
.faq__a p { margin: 0; }
/* 開いたときにふわっと表示 */
details[open] .faq__a { animation: faqOpen 0.3s var(--ease); }
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ----- 予約 CTA バンド ----- */
.cta-band { position: relative; color: #fff; overflow: hidden; }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(208, 69, 142, 0.94), rgba(107, 90, 168, 0.94));
}
.cta-band__content {
  position: relative; z-index: 2; text-align: center;
  padding-block: clamp(64px, 9vw, 110px);
}
.cta-band__title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-bottom: 14px; }
.cta-band__lead { margin: 0 0 32px; color: rgba(255,255,255,0.9); }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ----- 下層ページ：バナー ----- */
.subhero {
  position: relative; min-height: 46vh; display: flex; align-items: center;
  color: var(--color-text); overflow: hidden; background: #fff;
  padding-top: var(--header-h);
}
.subhero__media { position: absolute; inset: 0; }
/* 白ベースの淡いブランド照明 */
.subhero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 90% at 85% 15%, rgba(43, 142, 152, 0.10), transparent 60%),
    radial-gradient(60% 90% at 10% 90%, rgba(208, 69, 142, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.9));
}
/* ページごとの大きなスート透かし（右下） */
.subhero__suit {
  position: absolute; right: 3%; bottom: -14%; z-index: 1;
  font-size: clamp(150px, 24vw, 270px); line-height: 1;
  color: rgba(28, 23, 38, 0.06);
  pointer-events: none; user-select: none;
}
.subhero__content { position: relative; z-index: 2; padding-block: clamp(32px, 6vw, 56px); }
.subhero .section__eyebrow { color: var(--color-secondary); text-align: left; }
.subhero__content h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 8px 0 12px; }
.subhero__lead { margin: 0; color: var(--color-text-muted); font-size: 1.05rem; }

/* ----- ゲームの流れ（ステップ） ----- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flow__item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 28px 24px;
}
/* ステップ番号をポーカーチップ風の円形デザインに */
.flow__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 50%;
  font-family: var(--font-en); font-size: 1.05rem; font-weight: 700;
  background: var(--color-primary); color: #fff;
  border: 2px dashed rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 3px var(--color-primary);
}
.flow__title { margin: 12px 0 8px; font-size: 1.05rem; }
.flow__item p { margin: 0; color: var(--color-text-muted); font-size: 0.92rem; }

.back-link-wrap { padding-block: clamp(32px, 5vw, 48px); }

/* ----- ゲーム詳細ページ：リード文（説明を大きく見せる） ----- */
.detail-lead {
  font-size: clamp(1.02rem, 1.8vw, 1.2rem); font-weight: 500;
  text-align: center; line-height: 2.1;
  max-width: 34em; margin-inline: auto;
}

/* リード文の下の補足段落 */
.detail-sub {
  text-align: center; color: var(--color-text-muted);
  max-width: 36em; margin: 18px auto 0;
  font-size: 0.95rem; line-height: 2;
}

/* ----- ゲーム詳細ページ：特徴カード（アイコン付き） ----- */
.feature-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: clamp(28px, 4vw, 44px);
}
.feature-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 28px 20px 24px; text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-card svg { width: 56px; height: 56px; display: block; margin: 0 auto 14px; }
.feature-card h3 { font-size: 1.02rem; margin: 0 0 6px; }
.feature-card p { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.feature-note {
  margin: clamp(24px, 4vw, 32px) auto 0; padding-top: 18px;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 0.92rem; text-align: center;
}

/* ----- ゲーム詳細ページ：こんな方におすすめ（スート付きタグ） ----- */
.fit { margin-top: clamp(32px, 5vw, 48px); text-align: center; }
.fit__title { font-weight: 700; margin: 0 0 16px; font-size: 1.05rem; }
.fit__tags { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fit__tags li {
  border: 1px solid var(--color-border); background: var(--color-bg-alt);
  border-radius: 999px; padding: 9px 18px;
  font-size: 0.9rem; font-weight: 600;
}
.fit__tags li:nth-child(3n+1)::before { content: "♠ "; color: var(--color-primary); }
.fit__tags li:nth-child(3n+2)::before { content: "♦ "; color: var(--color-secondary); }
.fit__tags li:nth-child(3n)::before   { content: "♥ "; color: var(--color-primary); }
.card__link { margin-top: 4px; }

/* ----- 採用 ----- */
.recruit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.recruit__body .section__eyebrow, .recruit__body .section__title { text-align: left; }
.recruit__body p { color: var(--color-text-muted); margin: 0 0 24px; }
.recruit__media { aspect-ratio: 4 / 3; border-radius: var(--radius); }
.recruit--solo { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; text-align: center; }
.recruit--solo .section__eyebrow, .recruit--solo .section__title { text-align: center; }
.recruit__note { margin: 14px 0 0; color: var(--color-text-muted); font-size: 0.92rem; }

/* CTAバンドは背景グラデが正式デザインのため、仮ラベルは出さない */
.cta-band .placeholder-label { display: none; }

/* =========================================================================
   フッター
   ========================================================================= */
.site-footer { background: var(--color-bg-alt); color: var(--color-text); padding: 64px 0 28px; border-top: 1px solid var(--color-border); }
.footer__inner {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 32px; flex-wrap: wrap; margin-bottom: 36px;
}
.footer__tagline { color: var(--color-secondary-dark); font-size: 0.82rem; letter-spacing: 0.2em; margin: 8px 0 0; }
.footer__nav ul, .footer__social { display: flex; flex-direction: column; gap: 12px; }
.footer__nav a, .footer__social a { color: var(--color-text-muted); font-size: 0.9rem; transition: color 0.2s var(--ease); }
.footer__nav a:hover, .footer__social a:hover { color: var(--color-primary); }
.footer__legal {
  display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;
  padding-top: 24px; border-top: 1px solid var(--color-border); margin-bottom: 16px;
}
.footer__legal a { color: var(--color-text-muted); font-size: 0.8rem; }
.footer__legal a:hover { color: var(--color-primary); }
.footer__copy { text-align: center; color: #9b96a6; font-size: 0.8rem; margin: 0; }

/* =========================================================================
   下層ページ共通 / 予約フォーム
   ========================================================================= */
.page { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 72px)); padding-bottom: var(--section-py); }
.page__head { text-align: center; margin-bottom: clamp(32px, 5vw, 48px); }
.page__lead { color: var(--color-text-muted); margin: 12px 0 0; }

.reserve-form { display: block; }
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.92rem; }
.req {
  font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--color-primary-dark);
  padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
}
.form-row input, .form-row select, .form-row textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: #1a1526; /* 入力欄は白背景なので濃色固定 */
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: #fff; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.form-row textarea { resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(200, 162, 75, 0.18);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 20px; }

.form-actions { text-align: center; margin-top: 28px; }
.form-actions .btn { width: 100%; max-width: 360px; }
.form-note { text-align: center; color: var(--color-text-muted); font-size: 0.82rem; margin: 16px 0 0; }

/* ----- 法的ページ（利用規約・プライバシーポリシー） ----- */
.legal-body { color: var(--color-text); }
.legal-body h2 {
  font-size: 1.15rem; margin: clamp(28px, 4vw, 40px) 0 12px;
  padding-left: 12px; border-left: 3px solid var(--color-primary);
}
.legal-body p { margin: 0 0 14px; color: var(--color-text-muted); }
.legal-body ol {
  list-style: decimal; padding-left: 1.6em; margin: 0 0 14px;
  color: var(--color-text-muted);
}
.legal-body ol li { margin-bottom: 6px; }
.legal-body a { color: var(--color-primary-dark); font-weight: 600; text-decoration: underline; }
.legal-date { margin-top: clamp(28px, 4vw, 40px); text-align: right; font-size: 0.9rem; }
.back-link-center { text-align: center; margin-top: clamp(32px, 5vw, 48px); }

/* 送信完了 / エラー表示 */
.form-alert { padding: 16px 18px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 600; }
.form-alert--success { background: #eaf6ec; color: #1d6b34; border: 1px solid #b6e0c0; }
.form-alert--error { background: #fdeceb; color: #a32a23; border: 1px solid #f3c2bf; }

@media (max-width: 600px) {
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; gap: 0; }
}

/* =========================================================================
   reveal アニメーション
   ========================================================================= */
/* JS有効時のみ初期非表示にする（JS無効・読み込み失敗時は本文がそのまま見える） */
.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .card.reveal.is-visible { transition: none; }  /* カードのhover用transitionもOFF */
  .hero__scroll span { animation: none; }
  .hero__suits { display: none; }           /* 舞い上がるスート装飾をOFF */
  .hero__stars, .glass-card { animation: none; }  /* きらめき・浮遊をOFF */
  .js .card.reveal.is-visible:hover { transform: none; }
  .btn--primary::after { display: none; }   /* シャイン効果をOFF */
  details[open] .faq__a { animation: none; }
  .brand__logo { transition: none; }
  .brand:hover .brand__logo { transform: none; }  /* ロゴhoverの変形もOFF */
  .card:hover { transform: none; }
}

/* =========================================================================
   レスポンシブ
   ========================================================================= */
@media (max-width: 820px) {
  .intro__grid, .recruit, .info-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: 1fr; }
  .feature-cards { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .price-plans { grid-template-columns: 1fr; }
  /* 初心者パックの図解：スマホでも横並びのままコンパクトに（縦に長くしない） */
  .pack-items { gap: 4px; }
  .pack-item { min-width: 0; flex: 1; padding: 12px 6px 10px; }
  .pack-item__icon { width: 38px; height: 38px; margin-bottom: 2px; }
  .pack-item__label { font-size: 0.78rem; }
  .pack-item__desc { font-size: 0.58rem; }
  .pack-plus { font-size: 1.1rem; }
}

@media (max-width: 720px) {
  /* CTAバンドの見出しを必ず1行に（画面幅に応じて縮小） */
  .cta-band__title { font-size: min(2rem, 6.2vw); white-space: nowrap; }
  .cta-band__lead { font-size: 0.95rem; }
  /* 電話番号ボタンも途中で折り返さない */
  .cta-band__actions .btn { white-space: nowrap; }
  .cta-band .btn--ghost { font-size: 0.88rem; padding-left: 14px; padding-right: 14px; }

  /* 狭い画面では浮遊カードを消して文字の可読性を優先 */
  .hero__cards { display: none; }
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.94) 6%,
      rgba(255, 255, 255, 0.86) 42%,
      rgba(255, 255, 255, 0.24) 64%,
      rgba(255, 255, 255, 0.03) 100%);
  }
  .hero__watermark { top: 9%; }

  .news-list__row .news-row { grid-template-columns: auto auto; row-gap: 6px; padding: 16px 4px; }
  .news__title { grid-column: 1 / -1; }

  .nav-toggle { display: flex; z-index: 110; }

  /* メニューを開いている間だけ背景スクロールを止める（モバイル幅のみ適用） */
  body.nav-open { overflow: hidden; }

  /* 背景を暗くするオーバーレイ（メニューを開いた時だけ表示） */
  .nav-open::before {
    content: ""; position: fixed; inset: 0;
    background: rgba(22, 16, 40, 0.35); backdrop-filter: blur(2px);
    z-index: 95;
  }

  /* メニューを開いている間はヘッダー帯も紺色にして、パネルと色を統一。
     さらに backdrop-filter を解除する。これがあると固定ナビの基準がヘッダーに
     なってしまい、パネルがヘッダー高さまでしか広がらない（下部が透ける）ため。 */
  body.nav-open .site-header {
    background: #fff; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }

  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 320px);
    /* 紺色で統一。背景(dimmed)との区別は影＋左境界線でつける */
    background: #fff;
    box-shadow: -12px 0 36px rgba(25, 18, 56, 0.14);
    border-left: 1px solid var(--color-border);
    padding: calc(var(--header-h) + 24px) 28px 28px;
    z-index: 105;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .nav.is-open { transform: translateX(0); visibility: visible; transition: transform 0.35s var(--ease), visibility 0s; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: 22px; }

  .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 360px) {
  .info-sns { gap: 6px; }
  .info-sns a { padding: 7px 8px; font-size: 0.72rem; }
}

@media (max-width: 480px) {
  .info-sns { flex-wrap: nowrap; gap: 8px; }
  .info-sns a { padding: 8px 11px; font-size: 0.78rem; white-space: nowrap; }

  .gallery-grid { grid-template-columns: 1fr; }
  .info-list__row { grid-template-columns: 1fr; gap: 4px; }
}