/* =========================================================
   テーマ：金×明朝・バランス版（2026-10-13 採用）
   黒は「枠」（ヘッダー・フッター・最初の画面・総額パネル・電話の帯・店舗名ラベル）、
   アイボリーは「中身」、金は「アクセント」（ボタン・金額・細い線・小さな英字）。
   style.css / pages.css の後に読み込み、色・書体・形を上書きする
   ========================================================= */
:root {
  /* 色の名前は style.css と共通。役割はそのまま、色だけ黒×金×アイボリーに置き換える */
  --night: #12100C;       /* ヘッダー・フッター・年齢確認：ロゴ画像の黒 */
  --teal: #161616;        /* 黒い面：最初の画面・総額パネル・選択中の状態 */
  --teal-2: #3A3326;      /* 黒い面の上の区切り線・選択欄 */
  --teal-light: #F1DCA0;  /* 黒い面の上の差し色（淡い金） */
  --coral: #C9A55C;       /* 金：ボタンの塗り・「今すぐ」 */
  --coral-ink: #9A7432;   /* アイボリーの上の金の文字（読みやすさのため濃いめ） */
  --paper: #F7F2E8;       /* アイボリー（黒い面の上では文字色） */
  --ink: #1E1B16;
  --gray: #7A7266;
  --line: #DCCFB6;
  --bg: #F7F2E8;
  --card: #FFFDF8;
  --mint: #EFE6D3;        /* タグ・補助の地 */
  --mint-ink: #7A5A22;
  --img: #E3D8C3;
  --gold-hi: #F1DCA0;
  --gold: #C9A55C;
  --gold-lo: #8E6B2E;
  --gold-grad: linear-gradient(180deg, #F1DCA0 0%, #C9A55C 58%, #8E6B2E 100%);
  --gold-grad-dark: linear-gradient(180deg, #C29A4B 0%, #9A7432 60%, #6E5222 100%);
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --mincho: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif-en: "Libre Baskerville", "Times New Roman", serif;
  --num: "Bricolage Grotesque", "Zen Kaku Gothic New", sans-serif;
}

body { letter-spacing: .04em; }

/* ---------- 書体：見出しは明朝、数字は Bricolage Grotesque ---------- */
.hero-title, .doc-title, .article-title, .shop-head h1, .section-head h2, .block-head h2,
.recruit h2, .article h2, .doc h2, .doc h3, .article h3, .point h3, .read-card h3,
.shop-card .nm, .age-q, .market h2, .calc h2, .list-head h2, .filter-title, .drawer-head h2 {
  font-family: var(--mincho); font-weight: 800; letter-spacing: .05em;
}
/* 小見出しの役割をしている太字も明朝にそろえる（16px前後以上のもの）。
   ボタン・メニュー・表のラベル・バッジ・12px前後の小さな太字・金額はゴシック／Bricolage のまま */
.board-row b, .steps b, .checklist b, .bd-head b {
  font-family: var(--mincho); font-weight: 800; letter-spacing: .05em;
}
.hero-title { font-weight: 800; letter-spacing: .04em; line-height: 1.25; }
.doc-title, .article-title { font-weight: 800; letter-spacing: .04em; line-height: 1.35; }
.price, .yen, .point .yen, .fact b, .board-row .no, .market-row .price, .shift-row .time,
.article h2 .no, .steps li::before, .bd .total b {
  font-family: var(--num); letter-spacing: .01em;
}

/* 小さな英字の見出し（data-en="…" を付けた見出しの上に出す） */
[data-en]::before {
  content: attr(data-en); display: block; margin-bottom: 6px;
  font-family: var(--serif-en); font-style: italic; font-weight: 400;
  font-size: 13px; letter-spacing: .12em; color: var(--coral-ink);
}
.hero [data-en]::before, .recruit [data-en]::before, .market [data-en]::before, .calc [data-en]::before { color: var(--gold); }

/* ---------- ボタン・バッジ ---------- */
.btn-primary { background: var(--gold-grad); color: #161616; letter-spacing: .1em; }
.btn-primary:hover { background: linear-gradient(180deg, #F7E7B8 0%, #D4B26A 58%, #9A7432 100%); }
.btn-outline { border-color: var(--ink); }
.btn-ghost { border-color: rgba(241, 220, 160, .6); color: var(--gold-hi); }
.btn-ghost:hover { background: var(--gold-hi); color: #161616; }
.badge-now, .st-now { background: #161616; color: var(--gold-hi); }
.count { background: var(--gold); color: #161616; }
.tag { background: transparent; border: 1px solid var(--coral-ink); color: var(--coral-ink); font-weight: 500; letter-spacing: .08em; }
.verified { border-color: var(--coral-ink); color: var(--coral-ink); }

/* ---------- ヘッダー・フッター ---------- */
.site-header { border-bottom: 1px solid var(--gold-lo); }
.gnav a:hover, .header-keep:hover { color: var(--gold-hi); }
.site-footer { color: #CFC5B2; border-top: 2px solid var(--gold); }
.footer-note { color: #8E8475; }

/* ---------- 最初の画面（黒い帯＋金の線） ---------- */
.hero { background: #161616; border-bottom: 2px solid var(--gold); }
.hero-visual { background: linear-gradient(180deg, #161616 0%, #1F1B14 100%); }
.hero-visual i {
  background-color: #2A2318; opacity: .7;
  background-image:
    linear-gradient(90deg, #161616 0 3px, transparent 3px),
    linear-gradient(0deg, #161616 0 4px, transparent 4px);
}
.hero-visual::after { background: linear-gradient(180deg, rgba(22, 22, 22, .15), rgba(22, 22, 22, .7)); }
.hero-title em { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-open .pill { border-color: var(--gold); color: var(--gold-hi); }

/* 発車標のボード */
.market { background: #1E1B16; border: 1px solid var(--gold-lo); }
.market h2 { opacity: 1; color: var(--gold-hi); border-bottom-color: var(--teal-2); }
.market-row, .board-row { border-bottom-color: var(--teal-2) !important; }
.market-row .area, .board-row .no { color: var(--gold); }

/* ---------- 中身（アイボリー） ---------- */
.section-head, .block-head, .doc-head, .article-head, .doc h2, .article h2 { border-color: var(--ink) !important; }
.points, .facts, .breakdowns, .contact-box { border: 0 !important; border-top: 1px solid var(--coral-ink) !important; border-bottom: 1px solid var(--coral-ink) !important; background: transparent; }
.point, .fact, .bd { border-color: var(--line) !important; }
.point .k { color: var(--coral-ink); }
.point .yen, .fact b { color: var(--ink); }
.fact b.free { background: var(--gold-grad-dark); -webkit-background-clip: text; background-clip: text; color: transparent; }
.read-card, .shop-card, .card, .feature, .filter { background: var(--card); border-color: var(--line); }
.read-card:hover, .shop-card:hover, .card:hover { border-color: var(--coral-ink); }
.read-card:hover h3, .shop-card:hover .nm, .card:hover .card-name, .feature:hover b { color: var(--coral-ink); }
.contact-box .mail { color: var(--coral-ink); }
.steps li::before, .article h2 .no { color: var(--coral-ink); }
.doc .todo { background: var(--mint); }
.crumb a:hover, .toc a:hover { color: var(--coral-ink); }

/* 読みもののサムネイル・店舗ページの絵（夜景を黒と金に） */
.city { background: linear-gradient(180deg, #0F0E0B 0%, #1F1B14 70%, #3A3326 100%); }
.city i { background-color: #D9BE7E; }
.city::after { background: linear-gradient(180deg, transparent 40%, rgba(18, 16, 12, .45)); }

/* 掲載店舗の募集（黒い帯） */
.recruit { background: #161616; border-top: 2px solid var(--gold); color: var(--paper); }

/* ---------- 掲載中のお店：店舗名の縦書きラベル ---------- */
.shop-card.has-vlabel { grid-template-columns: 54px minmax(0, 1fr); column-gap: 14px; padding: 0 14px 0 0; }
.shop-card.has-vlabel > :not(.vlabel) { grid-column: 2; }
.shop-card.has-vlabel > :nth-child(2) { padding-top: 14px; }
.shop-card.has-vlabel .ft { margin-bottom: 14px; }
.shop-card.has-vlabel > :not(.vlabel) { align-self: start; }
.shop-card.has-vlabel .tag { justify-self: start; }
.vlabel {
  grid-column: 1; grid-row: 1 / span 4; background: #161616; color: var(--gold-hi);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px; padding: 14px 0;
}
.vlabel b { font-family: var(--mincho); font-size: 17px; font-weight: 800; letter-spacing: .16em; }
.vlabel span { font-family: var(--serif-en); font-size: 9.5px; letter-spacing: .22em; color: var(--gold); }
.shop-card .price { color: var(--coral-ink); }

/* ---------- 店舗ページ ---------- */
.telbar {
  background: #161616; color: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; margin-top: 12px; border-bottom: 1px solid var(--gold);
}
.telbar .info { display: grid; gap: 1px; font-size: 12px; letter-spacing: .1em; }
.telbar b { font-family: var(--num); font-size: 18px; letter-spacing: .06em; color: var(--gold-hi); white-space: nowrap; }
.telbar .btn { padding: 8px 18px; font-size: 13px; white-space: nowrap; }
.shop-hero { border-bottom: 2px solid var(--gold); }
.shop-head { align-items: center; }
.shop-head .vlabel { writing-mode: horizontal-tb; grid-row: auto; padding: 4px 12px; font-size: 11px; }
.price-table th { color: var(--gray); }
.calc { background: #161616; border-top: 2px solid var(--gold); }
.calc-field select { background: #24201A; border-color: var(--teal-2); color: var(--paper); }
.calc-total { border-top-color: var(--gold); }
.calc-total .price { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc .btn-outline { border-color: rgba(241, 220, 160, .55); color: var(--gold-hi); }
.calc .btn-outline:hover { background: var(--gold-hi); color: #161616; }
.cta-bar .price { color: var(--coral-ink); }
.shop-note a { color: var(--coral-ink); }

/* ---------- 年齢確認 ---------- */
.age-box { border-color: var(--gold-lo); }
.age-text { color: #B8AE9C; }

/* ---------- スマホの下部ナビ ---------- */
.bottom-nav .is-active { color: var(--coral-ink) !important; }
@media (max-width: 767px) {
  .bottom-nav { border-top: 1px solid var(--gold) !important; }
  .telbar { margin-inline: -16px; }
}