/* =========================================================
   DESIGN TOKENS — デザイン変更はこのブロックだけを編集する
   GayMassageBox テーマ（gmb）メインCSS
   ========================================================= */
:root {
  /* Color (DESIGN.md 17) */
  --color-text: #072835;
  --color-text-sub: #516971;
  --color-text-muted: rgba(81, 105, 113, 0.65);
  --color-bg: #ffffff;
  --color-bg-sub: #f7f7f5;
  --color-notice-bg: #fbe9e9; /* ヘッダー上のお知らせの帯 */
  --color-bg-muted: #747c82;
  --color-bg-whitepink: #f9e4e4;
  --ul-h: 1px; /* テキストリンクの下線の太さ（背景の線で描く。末尾の「下線アニメーション」） */
  --ul-dur: 0.4s; /* 伸びる下線の時間 */
  --ul-redraw: 0.6s; /* 引き直す下線の時間 */
  --reveal-y: 1.25rem; /* スクロールでのフェードイン: 下からの距離（20px） */
  --reveal-dur: 0.6s; /* 同: 時間 */
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); /* 同: 自然に減速する ease-out */
  --color-border: #e6e9eb;
  --color-border-strong: #d2d7da;
  --color-accent: #c4301c;
  --color-accent-dark: #9a291a;
  --color-accent-soft: #fbeeee;
  --color-accent-green: #165e74; /* 英字見出しの差し色（グリーン） */
  --cta-bg: linear-gradient(to bottom right, #165e74 0%, #072835 100%); /* CTA（予約・検索）の背景 */
  --cta-hover-filter: brightness(1.2); /* CTA の hover */
  --color-save: #e76554; /* 保存済みボタンの枠・文字・ハート */
  --color-save-bg: #fbe9e9; /* 保存済みボタンの背景 */
  --color-white: #ffffff;
  --color-star: #b40000;
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-focus: #1a5fb4;
  --text-shadow-hero: 0 2px 12px rgba(0, 0, 0, 0.45); /* ヒーローの英字の影 */
  --footer-bg: #031820; /* フッター（暗い背景・白ベースの文字） */
  --footer-text: #ffffff;
  --footer-text-sub: rgba(255, 255, 255, 0.72);
  --footer-text-muted: rgba(255, 255, 255, 0.5);
  --footer-border: rgba(255, 255, 255, 0.16);
  --footer-line: rgba(255, 255, 255, 0.24); /* エリアのブロックの縦線 */
  --footer-line-strong: rgba(255, 255, 255, 0.7); /* 縦線のうち見出しの横 */
  --footer-wordmark-size: 11.5vw; /* フッターのワードマーク。画面幅に比例（両端がほんの少し切れる大きさ） */
  --footer-wordmark-color: rgba(255, 255, 255, 0.07);
  --footer-wordmark-mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.15) 100%); /* 上から下へ消える */

  /* Typography (DESIGN.md 18) */
  --font-base: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', Meiryo, sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs: 0.82rem;
  --fs-sm: 0.92rem;
  --fs-base: 1.05rem;
  --fs-md: clamp(1.125rem, 1.4vw, 1.25rem); /* 18〜20px */
  --fs-lg: clamp(1.375rem, 2.6vw, 1.6rem); /* 22〜24px */
  --fs-xl: clamp(1.75rem, 2.3vw, 2rem); /* 28〜32px */
  --fs-2xl: clamp(2.225rem, 5vw, 3.5rem);
  --fs-p-title: clamp(1.75rem, 4vw, 2.5rem);
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;
  --gnav-icon: 1.5rem; /* ヘッダーのアイコン（1023px 以下）24px */
  --gnav-hit: 2.75rem; /* ヘッダーのアイコンのタップ領域 44px（正方形） */
  /* ロゴ「GAY MEN'S／MASSAGE」の文字の大きさ。ロゴの部品（BOX・角かっこ・版の札・余白）はすべて em で、これに比例する（rem を使うと比率が崩れる）。
         スマホは「画面幅 − 左右の余白 − アイコンの並び − すき間」をロゴの幅（約 15.4em、フォント差・小さい文字の丸めの余裕を見て 16.5em）で割った大きさ。最大 12px */
  --logo-size: clamp(0.375rem, (100vw - var(--gutter) * 2 - var(--gnav-hit) * 4 - (var(--gnav-icon) - var(--gnav-hit)) / 2 - var(--space-3)) / 16.5, 0.75rem);
  --logo-drawer-h: 2.5rem; /* ロゴ画像の高さ（ドロワー） */
  --logo-footer-h: 3rem; /* ロゴ画像の高さ（フッター） */
  --logo-stroke: 0.3em; /* ロゴの角かっこの線の太さ */
  --lh-base: 1.85;
  --lh-tight: 1.45;
  --ls-en: 0.04em;
  --ls-label: -0.1rem;
  --ls-head: 0;

  /* Layout (DESIGN.md 6) */
  --content-max-width: 1200px;
  --content-wide-width: 1400px;
  --content-text-width: 760px;
  --gutter: 20px;
  --header-h: 60px;
  --section-space: 56px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Shape */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 0.68rem;
  --shadow-panel: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.14);
  --shadow-card: 0 2px 10px rgba(0, 0, 0, 0.06); /* 写真付きカード（.card）の影。クリックできる範囲を示す */
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.1);
  --card-pad: 0.38rem; /* カードの写真と枠線の間 */
  --card-radius: calc(var(--radius-lg) + var(--card-pad)); /* 内側の写真の角丸と同心円になる外側の角丸 */
  --card-border: var(--color-border);
  --zoom-bg: rgba(10, 7, 7, 0.92); /* 写真の拡大表示の背景 */
  --zoom-text: var(--color-white);
  --access-map-bg: url('/wp-content/uploads/map-bg-grid.png'); /* 店舗ページの地図リンクの背景画像（ルート相対パス） */
  --access-map-rotate: 18deg; /* 背景の傾き */
  --access-map-x: -1%; /* 中央からのずれ（横） */
  --access-map-y: -2%; /* 中央からのずれ（縦） */
  --access-map-opacity: 0.4; /* 背景の濃さ */
  --lp-space: var(--section-space); /* LP パーツ（/about/ など）のセクションの上下 */
  --lp-hero-bg: var(--color-bg-sub);
  --lp-num-color: var(--color-accent-green); /* 番号・POINT の色 */
  --lp-panel-bg: var(--color-white);
  --lp-mark: rgba(255, 230, 0, 0.45); /* 表の強調（蛍光ペン風） */
  --gd-bg: #0e0e11; /* 専用ガイド記事（body.gd-page）の main の背景。以下 --gd-* はこのページだけで使う */
  --gd-surface: #17171c; /* カード・囲みの面 */
  --gd-surface-2: #22222a; /* 面の中の面・チップ */
  --gd-border: rgba(255, 255, 255, 0.12); /* 線 */
  --gd-border-strong: rgba(255, 255, 255, 0.24);
  --gd-text: #f4f4f5; /* 見出し・強調 */
  --gd-text-sub: #a6a6ae; /* 本文 */
  --gd-text-muted: #8a8a93; /* 補足・英字のサブタイトル */
  --gd-accent: #196b85; /* アクセント（塗り・線）。白文字を載せられる */
  --gd-accent-text: #5aaac3; /* 黒背景の上のアクセントの文字（--gd-accent を明るくした同じ色相） */
  --gd-mark: rgba(25, 107, 133, 0.55); /* 表の強調（蛍光ペン風） */
  --gd-line: 1px; /* 線の太さ */
  --gd-fs-h1: clamp(1.75rem, 4vw, 2.5rem); /* 記事タイトル（375: 30px／1280: 46px） */
  --gd-fs-h2: clamp(1.75rem, 4vw, 2.5rem); /* 章の見出し（375: 28px／1280: 40px） */
  --gd-fs-h3: clamp(1.375rem, 2.6vw, 1.6rem); /* 小見出し（22〜25.6px） */
  --gd-fs-lead: clamp(1.375rem, 2.2vw, 1.75rem); /* 強調の一文（22〜28px） */
  --gd-fs-stat: clamp(3rem, 9vw, 4.75rem); /* 数字 */
  --gd-fs-num: clamp(3.5rem, 7.5vw, 6rem); /* 章番号（375: 56px／1280: 96px）。いちばん大きい段 */
  --gd-lh-body: 2rem; /* 本文の行間 32px（8px の倍数） */
  --gd-lh-h2: 2.5rem; /* H2 の行間 40px（900px 以上は 56px） */
  --gd-lh-h3: 2rem; /* H3 の行間 32px */
  --gd-space-block: var(--space-6); /* 部品の間 32px */
  --gd-space-sub: var(--space-8); /* 小見出し・ポイントの前 64px */
  --gd-space-chapter: calc(var(--space-8) * 1.5); /* 章の間 96px（900px 以上は 128px） */
  --gd-gutter: var(--gutter); /* 12カラムのガター */
  --gd-head-cols: 4; /* 左の見出しの列の数（変えるときは --gd-col-head / --gd-col-body の線も合わせる） */
  --gd-col-full: 1 / -1;
  --gd-col-head: 1 / 5; /* 章・ポイントの番号の列 */
  --gd-col-body: 5 / -1; /* 本文の列（8列） */
  --gd-head-offset: calc((100% - 11 * var(--gd-gutter)) / 12 * var(--gd-head-cols) + var(--gd-head-cols) * var(--gd-gutter)); /* 5列目の左端までの距離 */
  --gd-rule: var(--gd-line) solid var(--gd-border); /* 罫線 */
  --gd-rule-strong: var(--gd-line) solid var(--gd-border-strong); /* 章・ポイントの罫線 */
  --gd-rule-accent: 0.125rem solid var(--gd-accent); /* 当サイトの注記・比較・強調の罫線 */
  --gd-icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c5.523 0 10 4.477 10 10a10 10 0 0 1 -19.995 .324l-.005 -.324l.004 -.28c.148 -5.393 4.566 -9.72 9.996 -9.72zm.01 13l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -8a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z'/%3E%3C/svg%3E"); /* 注意の囲みのアイコン（Tabler Icons「alert-circle」塗り、MIT License） */
  --gd-grid-radius: 0.6rem; /* 格子の部品の外枠の角丸（親だけに付ける） */
  --gd-cell-pad: var(--space-5); /* 格子のセルの中の余白（900px 以上は 32px） */
  --gd-optical: -0.04em; /* 大きな文字の左の余白（サイドベアリング）の補正（推定値。実測で調整） */

  /* Image */
  --ratio-card: 4 / 3;
  --ratio-wide: 16 / 9;
  --ratio-hero: 16 / 7;

  /* Motion (DESIGN.md 23) */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dur: 0.25s;
  --dur-img: 0.4s;
  --zoom: 1.03;

  /* WordPress 管理バー（ログイン中のみ表示）の高さ。固定・追従要素の位置に使う */
  --adminbar: 0px;
}
body.admin-bar {
  --adminbar: 32px;
}
@media (max-width: 782px) {
  body.admin-bar {
    --adminbar: 46px;
  }
}
@media (max-width: 600px) {
  body.admin-bar {
    --adminbar: 0px;
  }
}
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 64px;
    --section-space: 80px;
    --fs-xl: 28px;
    --logo-size: 1.025rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --header-h: 72px;
    --section-space: 104px;
    --fs-xl: 30px;
    --logo-size: 1rem;
  }
}

/* =========================================================
                     BASE
                     ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--adminbar) + 56px);
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background: var(--color-bg);
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.05em;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  word-break: auto-phrase;
  text-wrap: balance;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 200;
  background: var(--color-text);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: var(--radius);
}
.skip-link:focus {
  top: 8px;
}
.container {
  width: 100%;
  max-width: calc(var(--content-max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container--text {
  max-width: calc(var(--content-text-width) + var(--gutter) * 2);
}
.section {
  padding: var(--section-space) 0;
}
.section--sub {
  background: var(--color-bg-sub);
}
.section:not(.section--sub) + .section:not(.section--sub) {
  padding-top: 0;
}
.muted {
  color: var(--color-text-sub);
}
.en {
  font-family: var(--font-en);
  letter-spacing: var(--ls-en);
}

/* =========================================================
                     SECTION HEADING (DESIGN.md 7)
                     ========================================================= */
.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.sec-head__label {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
  line-height: 1;
}
/* 英字見出しの一部の単語だけ色を付ける（例: トップのイントロ） */
.sec-head__label .is-green {
  color: var(--color-accent-green);
  font-weight: var(--fw-black);
}
.sec-head__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.sec-head__lead {
  margin-top: var(--space-3);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
  max-width: 40em;
}
.sec-head > .sec-head__lead {
  flex-basis: 100%; /* リード文は見出し＋リンクの行の下に、1行分使って置く */
  max-width: none; /* .sec-head__lead の max-width: 40em が残ると幅が 40em に縮み、同じ行に入ってしまうため解除 */
  margin-top: calc(var(--space-3) - var(--space-4)); /* .sec-head の gap（space-4）を差し引き、見出しとの間を space-3 に保つ */
}
.sec-head__more {
  flex-shrink: 0;
  font-size: var(--fs-sm);
  color: var(--color-text);
  padding-bottom: 2px;
  white-space: nowrap;
}
.sec-head__more:hover {
  color: var(--color-text-sub);
}

/* =========================================================
                     BUTTONS (DESIGN.md 19)
                     ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-align: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.btn--primary {
  background: var(--cta-bg);
  background-origin: border-box; /* 透明な枠線の下でグラデーションが繰り返して上下に線が出るのを防ぐ */
  color: var(--color-white);
}
.btn--primary:hover {
  -webkit-filter: var(--cta-hover-filter);
  filter: var(--cta-hover-filter);
}
.btn--secondary {
  background: var(--color-white);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
.btn--secondary:hover {
  border-color: var(--color-text);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: var(--fs-sm);
}
.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.btn-row--center {
  justify-content: center;
}
.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* =========================================================
                     HEADER (DESIGN.md 3)
                     ========================================================= */
/* ヘッダーの上のお知らせの帯（追従しない。1行で、入りきらない分は「…」） */
.notice-bar {
  background: var(--color-notice-bg);
}
.notice-bar__link {
  display: block;
  max-width: calc(var(--content-max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: var(--space-2) var(--space-4); /* スマホは左右を詰めて、375px で1行に収める */
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.notice-bar__link:hover,
a.notice-bar__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 600px) {
  .notice-bar__link {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    font-size: var(--fs-sm);
  }
}
.site-header {
  position: sticky;
  top: var(--adminbar);
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: saturate(1.4) blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: 100%;
  max-width: var(--content-wide-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.logo {
  display: inline-flex;
  flex-direction: row;
  line-height: 1;
}
.logo__mark {
  display: inline-flex;
  align-items: stretch; /* 角かっこの高さを左の2行に揃える */
  font-family: var(--font-en);
  font-size: var(--logo-size);
  font-weight: var(--fw-bold);
  line-height: 1;
  white-space: nowrap;
}
.logo__words {
  display: flex;
  flex-direction: column; /* GAY MEN'S／MASSAGE の2行 */
  justify-content: center;
  letter-spacing: -0.02em;
}
/* 角かっこ（線で描く。文字色に合わせる） */
.logo__bracket {
  flex-shrink: 0;
  width: 0.4em;
  margin-left: 0.44em; /* 0.55rem（PC の 20px で換算） */
  border: var(--logo-stroke) solid currentColor;
  border-right: 0;
}
.logo__bracket--end {
  margin-left: 0.256em; /* 0.32rem */
  border-right: var(--logo-stroke) solid currentColor;
  border-left: 0;
}
.logo__box {
  display: flex;
  align-items: center;
  margin-left: 0.156em;
  font-size: 2.15em;
  font-weight: var(--fw-black);
  line-height: calc(2 / 2.15); /* 箱の高さを左の2行（2em）に合わせ、角かっこが文字より伸びないように */
  letter-spacing: 0.02em;
}
/* 版のラベル（丸い札。下の行の高さに揃える） */
.logo__ver {
  align-self: flex-end;
  margin-left: 0.44em; /* 0.55rem */
  padding: 0.2em 0.65em;
  border-radius: var(--radius-sm);
  background: var(--logo-ver-bg, var(--color-text));
  color: var(--logo-ver-text, var(--color-white));
  font-size: 0.78em;
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: 1.6;
}
.site-footer .logo {
  --logo-ver-bg: var(--footer-text); /* 暗い背景では札を白に */
  --logo-ver-text: var(--footer-bg);
}
.gnav {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  /* 1023px 以下: アイコンだけを 44px の正方形に並べる（間の見た目 20px）。
             右へ (44-24)/2 ずらし、三本線の線の右端を本文の右端（gutter の線）に揃える */
  margin-right: calc((var(--gnav-icon) - var(--gnav-hit)) / 2);
}
.gnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--gnav-hit);
  min-height: var(--gnav-hit);
  padding: 0;
  font-size: var(--fs-base);
  border-radius: var(--radius);
  background: none;
  border: 0;
}
.gnav__link .icon {
  width: var(--gnav-icon);
  height: var(--gnav-icon);
}
.gnav__link:hover {
  background: var(--color-bg-sub);
}
.gnav__link[aria-current='page'] {
  color: var(--color-accent-green);
}
.gnav__text {
  display: none;
  font-weight: var(--fw-medium);
}
.count-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}
.count-badge[hidden] {
  display: none;
}
@media (min-width: 1024px) {
  /* PC: 文字付き。アイコンは共通の 20px */
  .gnav {
    gap: var(--space-3);
    margin-right: 0;
  }
  .gnav__text {
    display: inline;
  }
  .gnav__link {
    gap: 6px;
    padding: 0 14px;
  }
  .gnav__link .icon {
    width: 20px;
    height: 20px;
  }
  .count-badge {
    position: static;
  }
}

/* Drawer */
.drawer {
  position: fixed;
  inset: 0;
  top: var(--adminbar); /* 管理バーが出ているときは、その下から */
  z-index: 150;
  visibility: hidden;
}
.drawer.is-open {
  visibility: visible;
}
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-bg);
  padding: var(--space-5);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.drawer.is-open .drawer__backdrop {
  opacity: 1;
}
.drawer.is-open .drawer__panel {
  transform: none;
}
.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}
.drawer__close {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.drawer__close:hover {
  background: var(--color-bg-sub);
}
.drawer__search {
  display: flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.drawer__search input {
  flex: 1;
  border: 0;
  padding: 0 12px;
  min-height: 44px;
  min-width: 0;
}
.drawer__search button {
  border: 0;
  background: var(--cta-bg);
  background-origin: border-box; /* 透明な枠線の下でグラデーションが繰り返して上下に線が出るのを防ぐ */
  color: var(--color-white);
  width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: filter var(--dur) var(--ease);
}
.drawer__search button:hover {
  -webkit-filter: var(--cta-hover-filter);
  filter: var(--cta-hover-filter);
}
.drawer__nav a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
  font-weight: var(--fw-medium);
}
.drawer__nav a:hover {
  color: var(--color-accent-green);
}
.drawer__lang {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

/* =========================================================
                     BREADCRUMB / PAGE TITLE
                     ========================================================= */
.breadcrumb {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  font-size: 12px;
  color: var(--color-text-sub);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  color: var(--color-text-muted);
}
.breadcrumb a:hover {
  color: var(--color-accent-green);
}
.page-title {
  padding-block: var(--space-6);
}
.page-title__label {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--color-accent-green);
  margin-bottom: var(--space-2);
}
.page-title h1 {
  font-size: var(--fs-p-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.page-title__lead {
  margin-top: var(--space-3);
  color: var(--color-text-sub);
  max-width: 44em;
}
.page-title__count {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.page-title__count strong {
  font-size: var(--fs-lg);
  color: var(--color-text);
  font-weight: var(--fw-medium);
  margin-right: 2px;
}

/* =========================================================
                     MEDIA (画像 + プレースホルダー)
                     ========================================================= */
.media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-muted);
  aspect-ratio: var(--ratio-card);
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-img) var(--ease);
}
.media--wide {
  aspect-ratio: var(--ratio-wide);
}
.media--square {
  aspect-ratio: 1 / 1;
}
.media--portrait {
  aspect-ratio: 3 / 4;
}
@media (hover: hover) {
  a:hover .media img,
  .card:hover .media img {
    transform: scale(var(--zoom));
  }
}

/* =========================================================
                     BADGES / TAGS / STARS
                     ========================================================= */
.badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}
.badge--gay {
  background: var(--color-accent-green);
  color: var(--color-white);
}
.badge--gay-friendly {
  background: var(--color-white);
  color: var(--color-accent-green);
  border: 1px solid var(--color-accent-green);
}
.badge--soft {
  background: var(--color-bg-sub);
  color: var(--color-text-sub);
}
.badge--paused {
  background: var(--color-text-sub); /* 休業中（店舗ページ・一覧のカードで共通） */
  color: var(--color-white);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: #d8eae8;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  line-height: 1.3;
}
a.tag:hover {
  background: #c3dedb;
}
.stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
}
.stars__icons {
  position: relative;
  display: inline-block;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--color-border-strong);
  line-height: 1;
}
.stars__icons::before {
  content: '★★★★★';
}
.stars__icons span {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  color: var(--color-star);
  white-space: nowrap;
}
.stars__icons span::before {
  content: '★★★★★';
}
.stars__num {
  font-weight: var(--fw-bold);
}
.stars__count {
  color: var(--color-text-sub);
  font-size: 12px;
}

/* =========================================================
                     SAVE BUTTON
                     ========================================================= */
.save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-save);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.save-btn svg {
  width: 20px;
  height: 20px;
}
.save-btn[aria-pressed='true'] {
  color: var(--color-save);
}
.save-btn[aria-pressed='true'] svg path {
  fill: currentColor;
}
.save-btn:hover {
  background: var(--color-white);
}
.save-btn--labeled {
  width: auto;
  height: 48px;
  padding: 0 18px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-strong);
  background: var(--color-white);
  font-size: var(--fs-sm);
}
.save-btn--labeled[aria-pressed='true'] {
  border-color: var(--color-save-bg);
  background: var(--color-save-bg);
}
.card .save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

/* =========================================================
                     CARDS (DESIGN.md 8)
                     ========================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--card-pad) var(--card-pad) 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease);
  min-width: 0; /* グリッドの列が中身（1行のエリアなど）に押し広げられないように */
}
@media (hover: hover) {
  .card:hover {
    box-shadow: var(--shadow-card-hover);
  }
}
.card__link {
  display: block;
}
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.card__media {
  border-radius: var(--radius-lg);
}
.card__body {
  padding: var(--space-4) var(--space-2) var(--space-4); /* 文字を写真の端から少し内側に */
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.card__meta {
  display: flex;
  flex-wrap: nowrap; /* バッジと場所を1行に。長い場所は .card__place-text で「…」に省略 */
  align-items: center;
  gap: 8px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.card__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.card__catch {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__meta .badge {
  flex-shrink: 0;
}
.card__place {
  display: flex;
  flex: 1 1 auto;
  min-width: 0; /* 縮められるように（省略表示のため） */
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-sub);
}
.card__place svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.card__place-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* カード型（.card）: バッジの行とエリアの行に分ける。検索結果（.result-card）は横並びのまま */
.card .card__meta {
  flex-wrap: wrap;
}
.card .card__place {
  flex-basis: 100%; /* エリアは次の行に1行分使って置く（長いと「…」） */
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: 4px;
}
.card__price {
  font-size: 12px;
  color: var(--color-text-sub);
}
.card__price strong {
  font-size: var(--fs-base);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.card .tags {
  position: relative;
  z-index: 2;
}
.card-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Row card (S) */
.row-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.row-card .media {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}
.row-card__name {
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.row-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.row-card__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-text-sub);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.row-list {
  border-top: 1px solid var(--color-border);
}

/* Feature (article) card (DESIGN.md 11) */
.article-card {
  position: relative;
}
.article-card .media {
  border-radius: var(--radius-lg);
}
.article-card__cat {
  margin-top: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--gd-accent);
}
.article-card__title {
  margin-top: 4px;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}
.article-card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.article-card__date {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* =========================================================
                     HERO + SEARCH PANEL (DESIGN.md 4, 5)
                     ========================================================= */
.hero {
  position: relative;
}
.hero__viewport {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-muted);
}
.hero__track {
  display: flex;
  transition: transform 0.7s var(--ease);
}
.hero__slide {
  position: relative;
  flex: 0 0 100%;
}
.hero__slide .media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.hero__caption {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 64px;
  z-index: 2;
  color: var(--color-white);
  font-size: var(--fs-sm);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  line-height: var(--lh-tight);
}
.hero__caption small {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
  opacity: 0.9;
}
.hero__caption a {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.hero__slide::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(2, 13, 17, 0.65), transparent);
  pointer-events: none;
}
.hero__controls {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-4);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.hero__dots {
  display: flex;
  gap: 6px;
  margin-right: var(--space-2);
}
.hero__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.55);
  position: relative;
}
.hero__dot::before {
  content: '';
  position: absolute;
  inset: -18px;
}
.hero__dot[aria-current='true'] {
  background: var(--color-white);
}
.round-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.round-btn:hover:not(:disabled) {
  border-color: var(--color-text);
}
.round-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.round-btn svg {
  width: 18px;
  height: 18px;
}
.hero__controls .round-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-color: transparent;
}
/* ヒーロー左上に固定で重ねる英字（色以外は .sec-head__label と同じ指定） */
.hero__en {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 3;
  margin: 0;
  pointer-events: none;
  font-family: var(--font-en);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-white);
  text-shadow: var(--text-shadow-hero);
}
.hero__en span {
  display: block; /* 最初の単語（DISCOVER）のあとで改行 */
}

.search-panel {
  position: relative;
  z-index: 5;
  background: var(--color-white);
}
.search-panel__inner {
  padding: var(--space-5) var(--gutter) var(--space-6);
}
.search-panel__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.search-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0;
  font-size: var(--fs-sm);
}
.search-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-sub);
  font-weight: var(--fw-bold);
  background: var(--color-bg-sub);
  border-radius: 50px;
  min-height: 26px;
  padding: 0 10px 0 7px;
}
.search-panel__badge svg {
  width: 16px;
  height: 16px;
}
.search-panel__count strong {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.search-panel__more {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.search-panel__more:hover {
  color: var(--color-accent-green);
}

.search-form {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-white);
}
.search-form__field {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60px;
  padding: 8px 14px 8px 44px;
  border-bottom: 1px solid var(--color-border);
}
.search-form__field:last-of-type {
  border-bottom: 0;
}
.search-form__field > svg {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--color-text-sub);
}
.search-form__field label {
  font-size: 11px;
  color: var(--color-text-sub);
  line-height: 1.2;
}
.search-form__field select,
.search-form__field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 2px 0 0;
  font-size: var(--fs-base);
  min-height: 28px;
  appearance: none;
  -webkit-appearance: none;
}
.search-form__field select:focus,
.search-form__field input:focus {
  outline: none;
}
.search-form__field:focus-within {
  box-shadow: inset 0 0 0 2px var(--color-focus);
}
.search-form__submit {
  margin: 8px;
}
@media (min-width: 768px) {
  .hero__slide .media {
    aspect-ratio: var(--ratio-hero);
  }
  .search-panel {
    max-width: var(--content-max-width);
    margin: -88px auto 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-panel);
    width: calc(100% - var(--gutter) * 2);
    background: rgba(255 255 255 / 85%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .search-panel__inner {
    padding: var(--space-6) var(--space-6) var(--space-6);
  }
  .search-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--space-5);
  }
  .search-panel__meta {
    margin: 0;
    justify-content: flex-end;
  }
  .search-form {
    grid-template-columns: 1.1fr 1.1fr 1.4fr auto;
    margin-top: var(--space-5);
  }
  .search-form__field {
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }
  .search-form__field:last-of-type {
    border-right: 0;
  }
  .search-form__submit {
    margin: 8px;
    min-width: 140px;
  }
  .hero__caption,
  .hero__controls {
    bottom: 116px;
  }
  .hero__caption {
    right: auto;
    left: max(var(--gutter), calc((100% - var(--content-max-width)) / 2));
  }
  .hero__controls {
    right: max(var(--gutter), calc((100% - var(--content-max-width)) / 2));
  }
  .hero__en {
    top: var(--space-7);
    right: auto;
    left: max(var(--gutter), calc((100% - var(--content-max-width)) / 2));
  }
}
@media (min-width: 1200px) {
  .hero__slide .media {
    aspect-ratio: auto;
    height: min(68vh, 620px);
  }
}

/* Compact search bar (検索ページ・エリアページ・404) */
.searchbar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}
.searchbar .container {
  padding-top: var(--space-1);
}
.searchbar .search-form {
  margin: var(--space-4) 0;
}
@media (min-width: 768px) {
  .searchbar--sticky {
    position: sticky;
    top: calc(var(--header-h) + var(--adminbar));
    z-index: 60;
    background: rgba(255 255 255 / 85%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* =========================================================
                     CAROUSEL (DESIGN.md 4-4)
                     ========================================================= */
.carousel {
  position: relative;
}
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  padding: var(--space-2) var(--gutter) var(--space-4); /* カードの影が上下で切れないように */
  margin: 0 calc(var(--gutter) * -1);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track > * {
  scroll-snap-align: start;
}
.carousel__nav {
  display: none;
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .carousel__track {
    grid-auto-columns: calc((100% - var(--space-5) * 1.5) / 2.5);
  }
}
@media (min-width: 1024px) {
  .carousel__nav {
    display: flex;
  }
  .carousel__track {
    grid-auto-columns: calc((100% - var(--space-5) * 3) / 4);
    margin: 0;
    padding: 0 0 var(--space-2);
    scroll-padding: 0;
  }
}

/* =========================================================
                     TOP SECTIONS
                     ========================================================= */
.intro {
  display: grid;
  gap: var(--space-5);
}
.intro__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .intro__title {
    font-size: var(--fs-lg);
  }
}
.intro__text {
  color: var(--color-text-sub);
}
.intro__text p + p {
  margin-top: var(--space-3);
}
@media (min-width: 1024px) {
  .intro {
    grid-template-columns: 5fr 6fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.type-cards {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .type-cards {
    grid-template-columns: 1fr 1fr;
  }
}
.type-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-white);
}
.type-card .media {
  aspect-ratio: 5 / 4;
  border-radius: 0;
}
@media (min-width: 1200px) {
  .type-card .media {
    aspect-ratio: 16 / 7;
  }
}
.type-card__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(2, 13, 17, 0.65), transparent);
}
.type-card__en {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
  opacity: 0.85;
}
.type-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  margin-top: 0;
}
.type-card__text {
  font-size: var(--fs-sm);
  opacity: 0.9;
  margin-top: 4px;
  line-height: var(--lh-tight);
}
.type-card__count {
  display: inline-flex;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
}

.new-card__date {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--color-text-sub);
}
.new-card__date b {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  margin-right: 6px;
}

.pickup-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
}
@media (max-width: 767.98px) {
  .pickup-grid {
    grid-auto-flow: column;
    grid-auto-columns: 72%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) var(--space-2);
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .pickup-grid > * {
    scroll-snap-align: start;
  }
}
@media (min-width: 768px) {
  .pickup-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1200px) {
  .pickup-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  background: none;
  font-size: var(--fs-base);
  color: var(--color-text-sub);
  border-bottom: 4px solid transparent;
  margin-bottom: -1px;
}
.tab:hover {
  color: var(--color-text);
}
.tab[aria-selected='true'],
.tab[aria-current='page'] {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  font-weight: var(--fw-medium);
}

.rank-grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 768px) {
  .rank-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.rank-no {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg) 0 var(--radius) 0;
  background: var(--color-text);
  color: var(--color-white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-md);
}
.rank-no--1 {
  background: var(--color-text);
  color: var(--color-white);
}
.rank-note {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-top: calc(var(--space-5) * -1);
  margin-bottom: var(--space-5);
}

/* Collaboration-style banner (DESIGN.md 12) */
.banner-wide {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-white);
}
.banner-wide .media {
  aspect-ratio: 5 / 3;
  border-radius: 0;
}
.banner-wide__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: linear-gradient(to top, rgba(2, 13, 17, 0.65), transparent);
}
.banner-wide__label {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
}
.banner-wide__title {
  margin-top: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.banner-wide__text {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  max-width: 36em;
  opacity: 0.92;
  line-height: var(--lh-tight);
}
.banner-wide__cta {
  display: inline-flex;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}
@media (min-width: 768px) {
  .banner-wide .media {
    aspect-ratio: 16 / 5;
  }
  .banner-wide__body {
    padding: var(--space-7);
  }
}

/* Reviews */
.review-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .review-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.review-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border);
}
.review-card .media {
  border-radius: var(--radius);
  aspect-ratio: 1 / 1;
}
.review-card__shop {
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.review-card__shop a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.review-card__meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.review-card__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  line-height: 1.75;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* News list (DESIGN.md 14) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.chip:hover {
  border-color: var(--color-text);
}
.chip[aria-pressed='true'],
.chip[aria-current='page'] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}
.chip__x {
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
}
.news-list {
  border-top: 1px solid var(--color-border);
}
.news-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.news-item__date {
  font-family: var(--font-en);
  font-size: 12px;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.news-item__meta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.news-item__cat {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--color-bg-whitepink);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}
.news-item__title {
  font-weight: var(--fw-medium);
}
.news-item__title a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.news-item__title a:hover {
  color: var(--color-text-sub);
}
.news-item__shop {
  font-size: 12px;
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .news-item {
    grid-template-columns: 220px 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

/* お知らせのカード（トップのカルーセル・お知らせ一覧で共通。template-parts/news-card.php） */
.news-card {
  display: grid;
  grid-template-areas: 'image' 'body' 'foot';
  grid-template-rows: auto 1fr auto;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
  border-radius: var(--card-radius);
  background: var(--color-bg-sub);
}
.news-card__body {
  grid-area: body;
  min-width: 0;
}
.news-card__image {
  grid-area: image;
}
.news-card__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.news-card__foot {
  grid-area: foot;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.news-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.news-card__avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--color-bg-sub);
}
.news-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.news-card__who {
  min-width: 0;
}
.news-card__shop {
  display: block;
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis;
}
a.news-card__shop:hover {
  color: var(--color-text-sub);
}
.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  flex-direction: column;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.news-card__title {
  margin-top: var(--space-4);
  overflow: hidden;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  white-space: nowrap;
  text-overflow: ellipsis; /* タイトルは1行 */
}
.news-card__title a:hover {
  color: var(--color-text-sub);
}
.news-card__text {
  display: -webkit-box;
  margin-top: var(--space-2);
  overflow: hidden;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--color-text-sub);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10; /* 本文は10行まで。超えた分は「…」 */
  line-clamp: 10;
}
.news-card__more {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding-bottom: 4px;
}
.news-card__more::after {
  content: ' \2192';
}
@media (min-width: 768px) {
  .news-card--has-image {
    grid-template-areas: 'body image' 'foot foot';
    grid-template-columns: minmax(0, 1fr) 38%;
    grid-template-rows: 1fr auto;
    column-gap: var(--space-5);
  }
  .news-card__image img {
    aspect-ratio: 4 / 5;
  }
}
/* トップのカルーセル: スマホ 88%、768px 以上は1枚＋次が少し、1024px 以上は2枚＋次が少し */
.carousel--news .carousel__track {
  grid-auto-columns: 88%;
}
@media (min-width: 768px) {
  .carousel--news .carousel__track {
    grid-auto-columns: calc((100% - var(--space-5)) / 1.3);
  }
}
@media (min-width: 1024px) {
  .carousel--news .carousel__track {
    grid-auto-columns: calc((100% - var(--space-5) * 2) / 2.3);
  }
}
/* お知らせ一覧: スマホ1列、900px 以上は2列 */
.news-grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Area directory (DESIGN.md 13, 15) */
.area-dir {
  display: grid;
  gap: var(--space-5) var(--space-7);
}
@media (min-width: 768px) {
  .area-dir {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .area-dir {
    grid-template-columns: repeat(3, 1fr);
  }
}
.area-dir__group {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-text);
}
.area-dir__region {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.area-dir__region a:hover {
  color: var(--color-text-sub);
}
.area-dir__region small {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
}
.area-dir__prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
}
.area-dir__prefs a {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  min-height: 32px;
  align-items: center;
}
.area-dir__prefs a:hover {
  color: var(--color-text-sub);
}
.area-dir__prefs .num {
  font-size: 11px;
  color: var(--color-text-muted);
}
.area-dir__prefs .is-empty {
  color: var(--color-text-muted);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

/* FAQ */
.faq {
  border-top: 1px solid var(--color-border);
}
.faq details {
  border-bottom: 1px solid var(--color-border);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  min-height: 60px;
  padding: var(--space-3) 0;
  cursor: pointer;
  font-weight: var(--fw-medium);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq__a {
  padding: 0 0 var(--space-5);
  color: var(--color-text-sub);
}

/* Listing CTA band */
.cta-band {
  background: var(--color-bg-sub);
  padding: var(--space-7) 0;
}
.cta-band__inner {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.cta-band__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}
.cta-band__text {
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
  margin-top: 4px;
}
@media (min-width: 768px) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
  }
}

/* =========================================================
                     FOOTER (DESIGN.md 24)
                     ========================================================= */
.site-footer {
  padding: var(--space-7) 0 calc(var(--space-7) + 64px);
  font-size: var(--fs-sm);
  background: var(--footer-bg);
  color: var(--footer-text);
  overflow: hidden; /* 画面幅いっぱいのワードマークで横スクロールが出ないように */
}
.site-footer :focus-visible {
  outline-color: var(--footer-text); /* 暗い背景でもフォーカスが見えるように */
}
.site-footer__grid {
  display: grid;
  gap: var(--space-6);
}
.site-footer__brand p {
  margin-top: var(--space-3);
  color: var(--footer-text-sub);
  font-size: var(--fs-sm);
  max-width: 30em;
}
.site-footer__title {
  font-size: var(--fs-base);
  color: var(--footer-text-muted);
  margin-bottom: var(--space-3);
}
.site-footer__links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--footer-text-sub);
}
.site-footer__links a:hover {
  color: var(--footer-text);
}
/* エリアから探す: 地方ごとのブロック（左の縦線＋見出し＋都道府県の縦並び） */
.site-footer__areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-4);
}
.site-footer__area {
  border-left: 2px solid var(--footer-line);
  padding-left: var(--space-4);
}
.site-footer__area-title {
  margin-left: calc(-1 * var(--space-4) - 2px); /* 縦線の上に重ねて、見出しの横だけ明るくする */
  padding-left: var(--space-4);
  border-left: 2px solid var(--footer-line-strong);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--footer-text);
}
.site-footer__area-list {
  margin-top: var(--space-2);
  list-style: none;
  padding: 0;
}
.site-footer__area-list a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--fs-sm);
  color: var(--footer-text-sub);
}
.site-footer__area-title a:hover,
.site-footer__area-list a:hover {
  color: var(--footer-text);
}
.site-footer__sns {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.site-footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--footer-border);
}
.site-footer__sns a:hover {
  border-color: var(--footer-text);
}
.site-footer__sns svg {
  width: 16px;
  height: 16px;
}
/* ワードマーク（飾り）。文字色は薄い単色、上から下へのフェードは mask-image で表す。
                     mask が効かない環境でも、薄い文字として表示されるだけで崩れない（background-clip: text は文字が消えることがある） */
.site-footer__wordmark {
  display: flex;
  justify-content: center; /* 中央揃え。画面より広い分は左右に均等にはみ出す（両端がほんの少し切れる） */
  width: 100vw;
  margin: var(--space-7) 0 0 calc(50% - 50vw); /* コンテナの外へ広げて画面幅いっぱいに */
  font-family: var(--font-en);
  font-size: var(--footer-wordmark-size);
  font-weight: var(--fw-black);
  line-height: 0.8;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--footer-wordmark-color);
  -webkit-mask-image: var(--footer-wordmark-mask);
  mask-image: var(--footer-wordmark-mask);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.site-footer__wordmark + .site-footer__bottom {
  margin-top: 0; /* ワードマークと下部の間を詰める */
}
.site-footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  display: grid;
  gap: var(--space-3);
  font-size: 12px;
  color: var(--footer-text-muted);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.site-footer__legal a:hover {
  color: var(--footer-text);
}
.to-top {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 70;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
.to-top svg {
  width: 18px;
  height: 18px;
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
  .site-footer__areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .site-footer__bottom {
    /* grid-template-columns: 1fr auto; */
    align-items: center;
  }
}
@media (min-width: 1024px) {
  .site-footer {
    padding-bottom: var(--space-7);
  }
  .site-footer__areas {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .to-top {
    bottom: 24px;
  }
}

/* Mobile tab bar (仕様書 4.5) */
.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 探す・ランキング・お知らせ・保存・履歴 */
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabbar a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  font-size: 10px;
  color: var(--color-text-sub);
}
.tabbar a[aria-current='page'] {
  color: var(--color-accent-green);
}
.tabbar svg {
  width: 22px;
  height: 22px;
}
.tabbar .count-badge {
  top: 4px;
  right: calc(50% - 22px);
}
@media (min-width: 1024px) {
  .tabbar {
    display: none;
  }
}

/* =========================================================
                     SEARCH PAGE (DESIGN.md 16)
                     ========================================================= */
.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 中身（1行で省略する場所の表示など）の幅で、列が画面より広がらないように */
  gap: var(--space-6);
  padding-bottom: var(--section-space);
}
@media (min-width: 1024px) {
  .search-layout {
    grid-template-columns: 272px minmax(0, 1fr);
    align-items: start;
  }
}
.filter-panel {
  display: none;
}
.filter-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.filter-panel__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.filter-group {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.filter-group legend,
.filter-group__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-3);
  padding: 0;
}
.filter-group fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.filter-sub {
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--color-text-muted);
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent-green);
  flex-shrink: 0;
}
.check__num {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-muted);
}
.check.is-zero {
  color: var(--color-text-muted);
}
.filter-panel__foot {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-5);
}
.filter-panel__foot .btn--primary {
  flex: 1;
}
.filter-toggle {
  position: relative;
}
@media (min-width: 1024px) {
  .filter-panel {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--adminbar) + 100px);
    max-height: calc(100vh - var(--header-h) - var(--adminbar) - 120px);
    overflow-y: auto;
    padding-right: var(--space-2);
  }
  .filter-panel__close,
  .filter-panel__foot,
  .filter-toggle {
    display: none;
  }
}
@media (max-width: 1023.98px) {
  .filter-panel.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 160;
    max-height: 88vh;
    background: var(--color-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-sheet);
    padding: var(--space-5) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }
  .filter-panel.is-open .filter-panel__body {
    overflow-y: auto;
    flex: 1;
  }
  .sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 155;
    background: var(--color-overlay);
  }
}
.sheet-backdrop[hidden] {
  display: none;
}
.result-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.result-bar__count {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.result-bar__count strong {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-right: 2px;
}
.result-bar__tools {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.select {
  position: relative;
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-white);
  font-size: var(--fs-sm);
}
.select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.active-chips:empty {
  display: none;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0 6px;
  min-height: 36px;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.link-btn:hover {
  color: var(--color-accent-green);
}

/* Search result card (情報密度を少し高く) */
.result-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}
.result-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.result-card__media {
  position: relative;
}
.result-card__media .media {
  border-radius: var(--radius-lg);
}
.result-card__media .save-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}
.result-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.result-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.result-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.result-card .tags {
  position: relative;
  z-index: 2;
}
.result-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-2);
}
.result-card__price {
  font-size: 12px;
  color: var(--color-text-sub);
}
.result-card__price strong {
  font-size: var(--fs-lg);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.result-card__cta {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .result-card {
    grid-template-columns: 300px minmax(0, 1fr);
    gap: var(--space-5);
  }
}
.empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--color-bg-sub);
  border-radius: var(--radius-lg);
}
.empty__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.empty__text {
  margin-top: var(--space-2);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
}
.empty .btn-row {
  justify-content: center;
  margin-top: var(--space-5);
}

/* =========================================================
                     SHOP DETAIL (仕様書 3.4)
                     ========================================================= */
.shop-hero .carousel__track {
  grid-auto-columns: 100%;
  gap: 0;
  margin: 0;
  padding: 0;
  scroll-padding: 0;
}
.shop-hero .media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.shop-hero__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gutter);
  font-size: 12px;
  color: var(--color-text-muted);
}
.shop-hero__dots {
  display: flex;
  gap: 6px;
}
.shop-hero__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  position: relative;
}
.shop-hero__dots button::before {
  content: '';
  position: absolute;
  inset: -14px;
}
.shop-hero__dots button[aria-current='true'] {
  background: var(--color-text);
}
@media (min-width: 768px) {
  .shop-hero .carousel__track {
    grid-auto-columns: calc((100% - 8px) / 2);
    gap: 8px;
  }
  .shop-hero {
    max-width: var(--content-wide-width);
    margin: 0 auto;
    padding: var(--space-4) var(--gutter) 0;
  }
  .shop-hero .media {
    aspect-ratio: 3 / 2;
    border-radius: var(--radius);
  }
}
@media (min-width: 1200px) {
  .shop-hero .carousel__track {
    grid-auto-columns: calc((100% - 16px) / 3);
  }
}

.shop-layout {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--section-space);
}
@media (min-width: 1024px) {
  .shop-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--space-8);
    align-items: start;
  }
}
.shop-head {
  padding: var(--space-5) 0 var(--space-5);
}
.shop-head__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.shop-head h1 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.shop-head__catch {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: 1.7;
  color: var(--color-text);
}
.shop-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  align-items: center;
}
.shop-head__meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-head__meta svg {
  width: 16px;
  height: 16px;
}
.shop-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.shop-head__actions .btn--primary {
  flex: 1 1 220px;
}
@media (min-width: 1024px) {
  .shop-head__actions {
    display: none;
  }
}

.anchor-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--adminbar));
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.anchor-nav ul {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.anchor-nav ul::-webkit-scrollbar {
  display: none;
}
.anchor-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  font-weight: var(--fw-medium);
}
.anchor-nav a:hover {
  color: var(--color-text);
}
.anchor-nav a.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
}
@media (min-width: 1024px) {
  .anchor-nav {
    margin: 0;
    padding: 0;
  }
}

.shop-section {
  padding: var(--space-7) 0 0;
}
.shop-section__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-5);
}
.shop-section__title small {
  font-family: var(--font-en);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-head);
  text-transform: uppercase;
  color: var(--color-text);
}
.shop-intro p + p {
  margin-top: var(--space-4);
}
.gallery-strip .carousel__track {
  grid-auto-columns: 72%;
}
@media (min-width: 768px) {
  .gallery-strip .carousel__track {
    grid-auto-columns: calc((100% - var(--space-5) * 2) / 3);
  }
}
.gallery-strip figure .media {
  border-radius: var(--radius);
}
.gallery-strip figcaption {
  margin-top: var(--space-2);
  font-size: 12px;
  color: var(--color-text-sub);
}

.point-list {
  display: grid;
  gap: var(--space-6);
}
.point {
  display: grid;
  gap: var(--space-4);
  align-content: start; /* 行の高さが揃って余った分を、画像と見出しの間に配らない（見出しを上揃えにする） */
}
.point .media {
  border-radius: var(--radius-lg);
}
.point__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.point__text {
  margin-top: var(--space-2);
  color: var(--color-text-sub);
  font-size: var(--fs-sm);
}
@media (min-width: 768px) {
  .point-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
}

.course-list {
  display: grid;
  gap: var(--space-4);
}
.course {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.course__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.course__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.course__price {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}
.course__price small {
  font-size: 12px;
  color: var(--color-text-sub);
  font-weight: var(--fw-normal);
  margin-left: 2px;
}
.course__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.course__spec dt {
  display: inline;
  color: var(--color-text-muted);
  margin-right: 6px;
}
.course__spec dd {
  display: inline;
  color: var(--color-text);
}
.course__text {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .course-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
.note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}
.notes {
  margin-top: var(--space-4);
  font-size: 12px;
  color: var(--color-text-sub);
}
.notes li {
  position: relative;
  padding-left: 1em;
}
.notes li + li {
  margin-top: 4px;
}
.notes li::before {
  content: '※';
  position: absolute;
  left: 0;
}

.info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.info-table th,
.info-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.info-table tr:first-child th,
.info-table tr:first-child td {
  border-top: 1px solid var(--color-border);
}
.info-table th {
  width: 7.5em;
  font-weight: var(--fw-medium);
  color: var(--color-text-sub);
  padding-right: var(--space-4);
}
.info-table a {
  word-break: break-all;
}
.ext {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ext svg {
  width: 14px;
  height: 14px;
}

.access {
  display: grid;
  gap: var(--space-5);
}
.access__map {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 5;
  border-radius: var(--radius-lg);
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.access__map::before {
  content: '';
  position: absolute;
  inset: -48%; /* 回転させても四隅に余白が出ないよう、枠より大きく敷く（外側は overflow: hidden で隠れる） */
  background: var(--access-map-bg) center / 70% no-repeat;
  opacity: var(--access-map-opacity);
  transform: translate(var(--access-map-x), var(--access-map-y)) rotate(var(--access-map-rotate));
  pointer-events: none;
}
.access__pin {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}
.access__pin svg {
  width: 32px;
  height: 32px;
  color: var(--color-text-sub);
}
.access dl {
  display: grid;
  grid-template-columns: 6em 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
}
.access dt {
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .access {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

.review-summary {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5);
  background: var(--color-bg-sub);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.review-summary__num {
  font-size: 40px;
  font-weight: var(--fw-medium);
  line-height: 1;
  font-family: var(--font-en);
}
.review-summary .stars__icons {
  font-size: 18px;
}
.review-list > li {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.review-list__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  font-size: var(--fs-sm);
}
.review-list__nick {
  font-weight: var(--fw-medium);
}
.review-list__date {
  color: var(--color-text-muted);
  font-size: 12px;
}
.review-list__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
}

.form {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.form__row {
  display: grid;
  gap: var(--space-2);
}
.form__row label,
.form__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.form__req {
  margin-left: 6px;
  font-size: 11px;
  color: var(--color-accent);
  font-weight: var(--fw-bold);
}
.form input[type='text'],
.form input[type='email'],
.form input[type='url'],
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-white);
}
.form textarea {
  min-height: 140px;
  resize: vertical;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 0;
  border-color: transparent;
}
.form__rating {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.form__rating label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: var(--fw-normal);
  cursor: pointer;
}
.form__rating input {
  accent-color: var(--color-accent-green);
}
.form__msg {
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-bg-sub);
  font-size: var(--fs-sm);
}
.form__msg[hidden] {
  display: none;
}
.rules {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}
.rules h3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}
.rules ul {
  margin-top: var(--space-2);
  color: var(--color-text-sub);
}
.rules li::before {
  content: '・';
}

.shop-aside {
  display: none;
}
@media (min-width: 1024px) {
  .shop-aside {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--adminbar) + 72px);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-top: var(--space-5);
  }
  .shop-aside__name {
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
  }
  .shop-aside__meta {
    margin-top: var(--space-2);
    font-size: 12px;
    color: var(--color-text-sub);
  }
  .shop-aside__price {
    margin: var(--space-4) 0;
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-text-sub);
  }
  .shop-aside__price strong {
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--color-text);
    margin-right: 2px;
  }
  .shop-aside .btn {
    width: 100%;
  }
  .shop-aside .save-btn--labeled {
    width: 100%;
    margin-top: var(--space-3);
  }
}
.inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-sub);
  border-radius: var(--radius-lg);
}
.inline-cta p {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.inline-cta .btn {
  flex: 0 0 auto;
}
@media (max-width: 599.98px) {
  .inline-cta .btn {
    width: 100%;
  }
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--color-border);
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease);
}
.sticky-cta.is-visible {
  transform: none;
}
.sticky-cta .btn--primary {
  flex: 1;
}
.sticky-cta .save-btn {
  border: 1px solid var(--color-border-strong);
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
}
.sticky-cta .save-btn[aria-pressed='true'] {
  border-color: var(--color-save-bg);
  background: var(--color-save-bg);
}
@media (min-width: 1024px) {
  .sticky-cta {
    display: none;
  }
}
.shop-page .tabbar {
  display: none;
}

/* =========================================================
                     ARTICLE (ガイド・お知らせ・固定ページ)
                     ========================================================= */
.article {
  padding-bottom: var(--section-space);
}
.article__head {
  padding-block: var(--space-6) var(--space-5);
}
.article__cat {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--color-bg-whitepink);
  padding: 0 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
}
.article__title {
  margin-top: var(--space-2);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}
.article__date {
  margin-top: var(--space-3);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  gap: var(--space-4);
}
.article__eyecatch {
  margin-bottom: var(--space-6);
}
.article__eyecatch .media {
  border-radius: var(--radius-lg);
}
.prose {
  font-size: var(--fs-base);
}
.prose > * + * {
  margin-top: var(--space-5);
}
.prose h2 {
  margin-top: var(--space-7);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.prose ul {
  padding-left: 1.2em;
  list-style: disc;
}
.prose ol {
  padding-left: 1.4em;
  list-style: decimal;
}
.prose li + li {
  margin-top: 4px;
}
.prose a {
  color: var(--color-text-sub);
}
.lead {
  font-size: var(--fs-md);
  line-height: 1.9;
}
.toc {
  padding: var(--space-5);
  background: var(--color-bg-sub);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}
.toc__title {
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-2);
}
.toc ol {
  list-style: decimal;
  padding-left: 1.4em;
}
.toc a:hover {
  color: var(--color-accent);
}
.post-nav {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.post-nav a {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.post-nav a:hover {
  border-color: var(--color-text);
}
.post-nav small {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
}
@media (min-width: 768px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }
  .post-nav__next {
    text-align: right;
  }
}
.poster {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}
.poster .media {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
}
.poster a::after {
  content: '';
  position: absolute;
  inset: 0;
}
.poster__label {
  font-size: 11px;
  color: var(--color-text-muted);
}
.poster__name {
  font-weight: var(--fw-medium);
}

.steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}
.steps li {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-5) 64px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: var(--space-5);
  top: var(--space-5);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-white);
  font-size: 13px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
}
.steps b {
  display: block;
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
}
.steps p {
  margin-top: 4px;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Gallery (男子図鑑) */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
@media (min-width: 768px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}
@media (min-width: 1024px) {
  .tile-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
}
.tile .media {
  aspect-ratio: 3 / 4;
  border-radius: 0;
}
.tile__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: var(--space-5) var(--space-3) var(--space-3);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(2, 13, 17, 0.65), transparent);
  font-size: 12px;
}
.tile__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.filters-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

/* Area page */
.sub-areas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.visit-note {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  margin-bottom: var(--space-5);
}
.next-step {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.next-step p {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* 404 */
.notfound {
  text-align: center;
  padding-block: var(--space-8);
}
.notfound__code {
  font-family: var(--font-en);
  font-size: 72px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  line-height: 1;
}
.notfound h1 {
  margin-top: var(--space-4);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
}
.notfound p {
  margin-top: var(--space-3);
  color: var(--color-text-sub);
}
.notfound .search-form {
  margin: var(--space-6) auto 0;
  max-width: 720px;
  text-align: left;
}

.is-hidden,
[hidden] {
  display: none !important;
}

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

/* =========================================================
                     WORDPRESS 版で追加した部品
                     ========================================================= */
.section-bottom {
  padding-bottom: var(--section-space);
}
.small {
  font-size: 12px;
}
.card__visual {
  position: relative;
}
.card__visual .rank-no {
  border-radius: var(--radius-lg) 0 var(--radius) 0;
}
.media--noimage img {
  object-fit: cover;
}

/* ロゴ画像（外観 > カスタマイズ > サイト基本情報 > ロゴ） */
.logo--image img {
  display: block;
  width: auto;
  max-height: calc(var(--header-h) - 20px);
}
.drawer__head .logo--image img {
  max-height: var(--logo-drawer-h);
}
.site-footer .logo--image img {
  max-height: var(--logo-footer-h);
}

/* 店舗ページ: 写真の拡大表示（single-gmb_shop.php の <dialog class="zoom-view">、shop.js） */
.zoom {
  display: block;
  cursor: zoom-in;
}
html.is-zoom-open {
  overflow: hidden; /* 開いている間は後ろをスクロールさせない */
}
.zoom-view {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--zoom-text);
  overflow: hidden;
}
.zoom-view[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: zoom-view-in var(--dur) var(--ease);
}
.zoom-view::backdrop {
  background: var(--zoom-bg);
}
@keyframes zoom-view-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.zoom-view__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-8) var(--gutter);
  width: 100%;
  height: 100%;
  justify-content: center;
}
.zoom-view__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--space-8) * 2 - var(--space-7));
  max-height: calc(100dvh - var(--space-8) * 2 - var(--space-7)); /* 写真全体を切らずに収める（下のキャプション分を残す） */
  object-fit: contain;
  border-radius: var(--radius);
}
.zoom-view__caption {
  font-size: var(--fs-sm);
  text-align: center;
  color: var(--zoom-text);
}
.zoom-view__counter {
  position: absolute;
  top: var(--space-5);
  left: var(--gutter);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--zoom-text);
}
.zoom-view__close,
.zoom-view__prev,
.zoom-view__next {
  position: absolute;
  z-index: 1;
}
.zoom-view__close {
  top: var(--space-3);
  right: var(--gutter);
}
.zoom-view__prev,
.zoom-view__next {
  bottom: var(--space-4); /* スマホは画面下の左右（写真を指で隠さないように） */
}
.zoom-view__prev {
  left: var(--gutter);
}
.zoom-view__next {
  right: var(--gutter);
}
.zoom-view [hidden] {
  display: none;
}
@media (min-width: 768px) {
  .zoom-view__prev,
  .zoom-view__next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .zoom-view__figure {
    padding-inline: calc(var(--gutter) + var(--space-8));
  }
}
@media (prefers-reduced-motion: reduce) {
  .zoom-view[open] {
    animation: none;
  }
}

/* 見出し */
.sec-head__tools {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.sec-head--tight {
  margin-bottom: var(--space-4);
}
.shop-subtitle {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.guide-shops__title {
  margin-top: var(--space-7);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}

/* バッジ */
.badge--accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.count-badge--static {
  position: static;
  display: inline-block;
  margin-left: 6px;
}

/* トップページ */
.intro__types {
  margin-top: var(--space-7);
}

/* ランキング */
.rank-item {
  position: relative;
  min-width: 0; /* グリッドの列が中のカード（1行のエリア）に押し広げられないように */
}
.rank-item > .card {
  height: 100%; /* 包む要素があっても、ほかの一覧と同じくカードの高さを行でそろえる */
}
.rank-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
}
.rank-tools .tabs {
  flex: 1;
  margin-bottom: 0;
}
.rank-grid--page {
  margin-top: var(--space-6);
}
.row-list--ranked {
  margin-top: var(--space-7);
  list-style: none;
  padding: 0;
}
.row-card__rank {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-md);
  text-align: center;
}
.row-list--ranked .row-card,
.row-card:has(.row-card__rank) {
  grid-template-columns: 32px 72px 1fr;
}

/* 一覧ページ */
.visit-block {
  padding-top: var(--space-8);
}
.visit-block .sec-head__title {
  margin-bottom: var(--space-3);
}
.nearby-areas {
  margin-top: var(--space-7);
}
.chip-row--center {
  justify-content: center;
  margin-top: var(--space-6);
}
.filters-inline__count {
  align-self: center;
}
.page-extra {
  margin-top: var(--space-7);
}
.personal-loading {
  padding: var(--space-6) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

/* 検索ページ */
.search-page {
  padding-top: var(--space-2);
}
.search-form--compact {
  margin-top: var(--space-4);
}
@media (min-width: 768px) {
  .search-form--compact {
    grid-template-columns: 1fr 1.6fr auto;
    margin-top: var(--space-4);
  }
}

/* 店舗ページ */
.shop-main {
  min-width: 0;
}
.shop-hero--single .media {
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  .shop-hero--single {
    max-width: var(--content-max-width);
    margin: var(--space-5) auto 0;
    padding: 0 var(--gutter);
  }
  .shop-hero--single .media {
    border-radius: var(--radius-lg);
  }
}
.shop-closed {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
  font-size: var(--fs-sm);
}
.shop-closed a {
  margin-left: 6px;
}
.shop-aside__stars {
  margin: var(--space-2) 0 var(--space-3);
}
.review-summary__count {
  margin-top: 4px;
  font-size: 12px;
}

/* 記事・固定ページ */
.article--page {
  padding-top: 0;
}
.article--page > * + * {
  margin-top: var(--space-5);
}
.article .steps,
.article .faq {
  margin-top: var(--space-5);
}
.article .row-list {
  margin-top: var(--space-4);
  list-style: none;
  padding: 0;
}
.site-footer__area-block {
  margin-top: var(--space-7);
}

/* ページ送り（paginate_links の type=list） */
.pagination {
  margin-top: var(--space-7);
}
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}
.pagination li > .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  background: var(--color-white);
}
.pagination li > a.page-numbers:hover {
  border-color: var(--color-text);
}
.pagination li > .page-numbers.current {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-white);
}
.pagination li > .page-numbers.dots {
  border-color: transparent;
  background: none;
}

/* 口コミフォーム（comment_form） */
.form__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form__fieldset legend {
  margin-bottom: var(--space-2);
  padding: 0;
}
.form-submit {
  margin: 0;
}
.form .comment-notes,
.form .logged-in-as {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* 本文（ブロックエディター・クラシックエディターの出力） */
.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.prose figure {
  margin: 0;
}
.prose figcaption,
.prose .wp-caption-text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}
.prose blockquote {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-bg-sub);
  color: var(--color-text-sub);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th,
.prose td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.prose th {
  background: var(--color-bg-sub);
  font-weight: var(--fw-medium);
}
.prose .wp-block-table {
  overflow-x: auto;
}
.prose .wp-block-button__link,
.prose .wp-element-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-5);
  border-radius: var(--radius);
  background: var(--cta-bg);
  background-origin: border-box; /* 透明な枠線の下でグラデーションが繰り返して上下に線が出るのを防ぐ */
  color: var(--color-white);
  text-decoration: none;
  transition: filter var(--dur) var(--ease);
}
.prose .wp-block-button__link:hover,
.prose .wp-element-button:hover {
  -webkit-filter: var(--cta-hover-filter);
  filter: var(--cta-hover-filter);
}
.prose .wp-block-image,
.prose .wp-block-embed {
  margin-block: var(--space-5);
}
.prose .aligncenter {
  margin-inline: auto;
  text-align: center;
}
.prose .alignleft {
  float: left;
  margin: 0 var(--space-5) var(--space-3) 0;
}
.prose .alignright {
  float: right;
  margin: 0 0 var(--space-3) var(--space-5);
}
.prose::after {
  content: '';
  display: table;
  clear: both;
}
.prose hr {
  border: 0;
  border-top: 1px solid var(--color-border);
}
.prose .toc a {
  color: inherit;
  text-decoration: none;
}
.prose .toc a:hover {
  color: var(--color-text-sub);
}
.wp-block-embed__wrapper iframe,
.prose iframe {
  max-width: 100%;
}

/* テーマ未完成時の管理者向け表示 */
.notice {
  padding: var(--space-4);
  border-left: 4px solid var(--color-accent);
  background: var(--color-accent-soft);
}

/* =========================================================
                     LP パーツ（template-parts/lp/。/about/ で使用。/listing/ などにも使い回せる）
                     クラスはすべて lp- で始める。既存の部品（.steps / .faq / .anchor-nav / .btn / gmb_sec_head）はそのまま使う。
                     ========================================================= */
.lp-section {
  padding-block: var(--lp-space);
}
.lp-section--sub {
  background: var(--color-bg-sub);
}
.lp-section:not(.lp-section--sub) + .lp-section:not(.lp-section--sub) {
  padding-top: 0; /* 白いセクションが続くときに余白が二重にならないように */
}
.lp-narrow {
  max-width: calc(var(--content-text-width) + var(--gutter) * 2);
}
.lp-prose {
  line-height: var(--lh-base);
}
.lp-prose p + p,
.lp-prose p + ul,
.lp-prose ul + p {
  margin-top: var(--space-3);
}
.lp-prose ul {
  padding-left: 1.4em;
  list-style: disc;
}
.lp-prose li + li {
  margin-top: var(--space-2);
}
.lp-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.lp-link::after {
  content: '\2192';
}
.lp-link:hover {
  color: var(--color-accent-green);
}

/* ヒーロー */
.lp-hero {
  padding-block: var(--space-6) var(--space-7);
  background: var(--lp-hero-bg);
}
.lp-hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.lp-hero__title {
  font-size: var(--fs-p-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-hero__catch {
  margin-top: var(--space-3);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-hero__lead {
  max-width: 36em;
  margin-top: var(--space-4);
  color: var(--color-text-sub);
}
.lp-hero__lead p + p {
  margin-top: var(--space-2);
}
.lp-hero__buttons {
  margin-top: var(--space-5);
}
.lp-hero__media {
  border-radius: var(--radius-lg);
}

/* ページ内リンク（外側が追従する） */
.lp-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--adminbar));
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--color-border);
}
.lp-nav .anchor-nav {
  position: static;
  background: transparent;
  border-bottom: 0;
}

/* 文章＋画像 */
.lp-split {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.lp-split__visual {
  order: -1; /* スマホは画像が上 */
}
.lp-split__media {
  border-radius: var(--radius-lg);
}
.lp-split .sec-head {
  margin-bottom: var(--space-5);
}
.lp-quote {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 4px solid var(--lp-num-color);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--color-bg-sub);
}
.lp-quote__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--lp-num-color);
}
.lp-quote li {
  position: relative;
  padding-left: 1.2em;
  line-height: var(--lh-base);
}
.lp-quote li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.5em;
  border-top: 2px solid var(--lp-num-color);
}
.lp-quote li + li {
  margin-top: var(--space-2);
}

/* 番号付きカード（選ばれる理由など） */
.lp-numbered {
  display: grid;
  gap: var(--space-4);
}
.lp-numbered__item {
  padding: var(--space-5);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--lp-panel-bg);
  box-shadow: var(--shadow-card);
}
.lp-numbered__no {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--lp-num-color);
}
.lp-numbered__title {
  margin-top: var(--space-3);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-numbered__text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* 流れ（.steps の4列版） */
.lp-steps li {
  display: flex;
  flex-direction: column;
}
.lp-steps .lp-link {
  align-self: flex-start;
}

/* 機能カード（POINT） */
.lp-points {
  display: grid;
  gap: var(--space-5);
}
.lp-point {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--card-pad);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--lp-panel-bg);
  box-shadow: var(--shadow-card);
}
.lp-point__media {
  border-radius: var(--radius-lg);
}
.lp-point__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3) var(--space-4);
}
.lp-point__no {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-en);
  text-transform: uppercase;
  color: var(--lp-num-color);
}
.lp-point__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-point__text {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-point__list {
  padding-left: 1.4em;
  list-style: disc;
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-point__note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.lp-point .lp-link {
  align-self: flex-start;
  margin-top: auto; /* リンクをカードの下端にそろえる */
  padding-top: var(--space-2);
}

/* 開閉できる説明（.faq の見た目を共有） */
.lp-doc__body {
  padding-bottom: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-docs__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
}
.lp-docs__links .lp-link {
  margin-top: 0;
}

/* 最後の行動パネル */
.lp-cta__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* 中身の幅で、列が画面より広がらないように */
  gap: var(--space-5);
}
.lp-cta__panel {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sub);
}
.lp-cta__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-cta__text {
  margin-top: var(--space-3);
  overflow-wrap: anywhere; /* メールアドレスなど、区切りのない長い文字列もスマホで折り返す */
  color: var(--color-text-sub);
}
.lp-cta__text a {
  color: var(--color-text);
}
.lp-cta__buttons {
  margin-top: var(--space-5);
}

@media (min-width: 600px) {
  .lp-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .lp-numbered,
  .steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-cta__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lp-hero__inner {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-8);
  }
  .lp-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
  }
  .lp-split__visual {
    order: 0;
  }
  .lp-split--reverse .lp-split__visual {
    order: -1;
  }
  .lp-numbered,
  .steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lp-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lp-nav .anchor-nav {
    margin: 0 calc(var(--space-3) * -1); /* 先頭のリンクの文字をコンテンツの左端にそろえる */
  }
}

/* LP パーツの追加分（/listing/、2026-09-30）: お知らせ帯・見出しの上の一行・料金カード・チェック箇条・フォーム枠 */
.lp-hero__notice {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--lp-num-color);
  border-bottom: 1px solid var(--lp-num-color);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--lp-num-color);
}
.lp-numbered__kicker {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}

/* 料金カード */
.lp-plans {
  display: grid;
  gap: var(--space-5);
}
.lp-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--lp-panel-bg);
  box-shadow: var(--shadow-card);
}
.lp-plan__name {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.lp-plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.lp-plan__price-note {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-plan__price strong {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--lp-num-color);
}
.lp-plan__text {
  font-size: var(--fs-sm);
}
.lp-plan__note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.lp-plan__button {
  margin-top: auto; /* ボタンをカードの下端にそろえる */
}

/* チェック付きの箇条（ルール・注意事項） */
.lp-checklist {
  display: grid;
  gap: var(--space-3);
}
.lp-checklist li {
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) calc(var(--space-4) + var(--space-6));
  border-bottom: 1px solid var(--card-border);
}
.lp-checklist li::before {
  content: '';
  position: absolute;
  left: var(--space-5);
  top: calc(var(--space-4) + 0.35em);
  width: 0.45em;
  height: 0.8em;
  border-right: 2px solid var(--lp-num-color);
  border-bottom: 2px solid var(--lp-num-color);
  transform: rotate(45deg);
}
.lp-list__notes {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-list__notes p + p {
  margin-top: var(--space-2);
}
.lp-list__links {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-sub);
}
.lp-list__links-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
}
.lp-list__links-text {
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-list__links .lp-docs__links {
  margin-top: var(--space-3);
}

/* 申し込みフォームの枠 */
.lp-form__placeholder {
  padding: var(--space-7) var(--space-5);
  border: 4px double var(--color-border-strong);
  border-radius: var(--radius-lg);
  background: var(--lp-panel-bg);
  text-align: center;
}
.lp-form__placeholder-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
}
.lp-form__placeholder-text {
  margin-top: var(--space-3);
  color: var(--color-text-sub);
}

@media (min-width: 768px) {
  .lp-plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-cta__panels--single {
    grid-template-columns: minmax(0, 1fr); /* パネルが1枚のときは横幅いっぱい */
  }
}
@media (min-width: 1024px) {
  .lp-plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* LP パーツの追加分（英語ページ、2026-09-30）: 箇条の見出し・表・エリア別の店舗一覧 */
.lp-checklist__term {
  font-weight: var(--fw-bold);
}

/* 表（相場など） */
.lp-table__intro {
  margin-bottom: var(--space-6);
}
.lp-table {
  overflow-x: auto; /* スマホでは表を横にスクロール */
  -webkit-overflow-scrolling: touch;
}
.lp-table table {
  width: 100%;
  min-width: 36em;
  border-collapse: collapse;
  text-align: center;
}
.lp-table caption {
  padding-bottom: var(--space-3);
  text-align: left;
  font-size: var(--fs-base);
}
.lp-table__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.lp-table thead th {
  padding: var(--space-4) var(--space-3);
  background: var(--color-text);
  color: var(--color-white);
  font-weight: var(--fw-bold);
}
.lp-table tbody th,
.lp-table tbody td {
  padding: var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  background: var(--lp-panel-bg);
  font-weight: var(--fw-normal);
}
.lp-table__sub {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-table__main {
  display: block;
}
.lp-table .is-highlight {
  padding: 0 0.2em;
  background: linear-gradient(transparent 60%, var(--lp-mark) 60%);
  color: inherit;
}
.lp-table__notes {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
}
.lp-table__notes dt {
  font-weight: var(--fw-bold);
}
.lp-table__notes dd {
  margin: 0;
  color: var(--color-text-sub);
}

/* エリア別の店舗一覧 */
.lp-shops__area + .lp-shops__area {
  margin-top: var(--space-7);
}
.lp-shops__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}
.lp-shops__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-shops__sub {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.lp-shops__head .lp-link {
  margin-top: 0;
}
.lp-shops__empty {
  padding: var(--space-6) var(--space-5);
  border: 2px dashed var(--color-border-strong);
  border-radius: var(--card-radius);
  text-align: center;
  color: var(--color-text-sub);
}

/* =========================================================
                     専用ガイド記事（.gd）— ダークの配色
                     template-parts/guide/{スラッグ}.php の本文。single-gmb_guide.php が .gd で包み、body に gd-page を付ける。
                     ここのセレクターはすべて body.gd-page か .gd / .gd- で始まり、ほかのページには効かない。
                     色・文字の大きさは :root の --gd-* を変える。モノトーン＋アクセント1色（--gd-accent）。
                     ========================================================= */

/* main の中だけ、既存の色の変数をダーク用に置き換える（パンくず・タイトル・目次・紹介店舗・関連ガイドも追従） */
body.gd-page #main {
  --color-text: var(--gd-text);
  --color-text-sub: var(--gd-text-sub);
  --color-text-muted: var(--gd-text-muted);
  --color-bg: var(--gd-bg);
  --color-bg-sub: var(--gd-surface);
  --color-border: var(--gd-border);
  --color-border-strong: var(--gd-border-strong);
  --card-border: var(--gd-border);
  --color-accent: var(--gd-accent-text);
  --color-accent-dark: var(--gd-accent-text);
  --color-accent-soft: var(--gd-surface-2);
  --color-accent-green: var(--gd-accent);
  --color-star: var(--gd-text);
  --cta-bg: var(--gd-accent);
  --lp-mark: var(--gd-mark);
  --shadow-card: none;
  --shadow-card-hover: none;
  background: var(--gd-bg);
  color: var(--color-text);
}
/* 色を直接書いている既存の部品（このページの main の中だけ） */
body.gd-page #main .tag {
  background: var(--gd-surface-2);
  color: var(--gd-text);
}
body.gd-page #main a.tag:hover {
  background: var(--gd-accent);
  color: var(--color-white);
}
body.gd-page #main .article__cat,
body.gd-page #main .badge--accent {
  background: var(--gd-accent);
  color: var(--color-white);
}
body.gd-page #main .badge--gay-friendly {
  background: transparent;
  border-color: var(--gd-accent-text);
  color: var(--gd-accent-text);
}
body.gd-page #main .breadcrumb a:hover,
body.gd-page #main .sec-head__label .is-green,
body.gd-page #main .toc a:hover {
  color: var(--gd-accent-text);
}
body.gd-page #main .article__title {
  font-size: var(--gd-fs-h1);
  font-weight: var(--fw-normal);
  text-wrap: auto;
}
body.gd-page #main .toc {
  padding: 0;
  background: transparent;
  font-size: var(--fs-base);
}

/* ---------------------------------------------------------
                     本文のグリッド（Müller-Brockmann のモジュラーグリッドの考え方。配色・フォントはサイトのもの）
                     - 900px 以上: 12カラム。左の4列（--gd-col-head）＝章・ポイントの番号の列、右の8列（--gd-col-body）＝本文の列。
                       横に並べる部品は本文の列の中で2列（subgrid で4列ずつ）か3列。縦の線は「1列目の左端」と「5列目の左端」の2本。
                     - 900px 未満: 1列。
                     - 箱（面＋角丸）は使わず、罫線・余白・文字の大きさで区切る。余白は --gd-space-* の5段、行間は 8px の倍数。
                     --------------------------------------------------------- */
/* 900px 以上で変わる値（このページの変数だけ） */
@media (min-width: 900px) {
  :root {
    --gd-lh-h2: 3.5rem; /* 56px */
    --gd-space-chapter: calc(var(--space-8) * 2); /* 128px */
    --gd-cell-pad: var(--space-6); /* 32px */
  }
}
body.gd-page #main .article.container--text {
  max-width: calc(var(--content-max-width) + var(--gutter) * 2); /* パンくず・ヘッダー（.container）と左端を揃える */
}
.gd {
  counter-reset: gd-chapter;
  font-size: var(--fs-base);
  line-height: var(--gd-lh-body);
  color: var(--gd-text-sub);
}
.gd > * + * {
  margin-top: var(--gd-space-block);
}
.gd p + p {
  margin-top: var(--space-4);
}
.gd a:not([class]) {
  color: var(--gd-text-sub);
}
.gd strong {
  font-weight: var(--fw-normal);
  color: var(--gd-text);
}
.gd .toc a {
  text-decoration: none;
}

/* 英字（見出しの下のサブタイトル・項目の上のラベル） */
.gd-en {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--space-5);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gd-text-muted);
}
.gd .gd-label + p {
  margin-top: 0;
}
.gd-label {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  line-height: var(--space-4);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gd-accent-text);
}

/* 章の見出し: 上の罫線 → 大きな章番号（連番。目次の文字には入らない）→ H2 → 英字 */
.gd > h2 {
  counter-increment: gd-chapter;
  position: relative;
  margin-top: var(--gd-space-chapter);
  padding-top: var(--space-5);
  border-top: var(--gd-rule-strong);
  font-size: var(--gd-fs-h2);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h2);
  letter-spacing: -0.01em;
  text-indent: var(--gd-optical);
  color: var(--gd-text);
  scroll-margin-top: calc(var(--header-h) + var(--adminbar) + var(--space-4));
}
.gd > h2::before {
  content: counter(gd-chapter, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);
  margin-left: var(--gd-optical);
  text-indent: 0;
  font-family: var(--font-en);
  font-size: var(--gd-fs-num);
  font-weight: var(--fw-normal);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gd-accent-text);
}
.gd > h2 + .gd-en {
  margin-top: var(--space-2);
}
.gd h3 {
  margin-top: var(--gd-space-sub);
  font-size: var(--gd-fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h3);
  color: var(--gd-text);
}
.gd h3 + .gd-en {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
}
.gd h3 + .gd-en + * {
  margin-top: var(--space-5);
}
.gd-muted {
  font-size: var(--fs-sm);
  color: var(--gd-text-muted);
}

/* 導入 */
.gd-intro > * + * {
  margin-top: var(--space-4);
}
.gd-intro > .gd-note {
  margin-top: var(--gd-space-block);
}

/* 注記（罫線＋ラベル＋見出し。箱にしない） */
.gd-note {
  padding-top: var(--space-4);
  font-size: var(--fs-sm);
}
/* .gd-note--site {} */
.gd-note__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--gd-fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  color: var(--gd-text);
}
.gd-note--warn .gd-note__title::before {
  content: '';
  flex-shrink: 0;
  width: 1.25em; /* 見出しの文字の大きさに比例 */
  height: 1.25em;
  background-color: var(--gd-text); /* アイコンの色（SVG は形だけ。mask で切り抜く） */
  -webkit-mask: var(--gd-icon-alert) center / contain no-repeat;
  mask: var(--gd-icon-alert) center / contain no-repeat;
}
.gd-dl > div {
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: var(--space-3);
}
.gd-dl > div + div {
  margin-top: var(--space-2);
}
.gd-dl dt {
  font-weight: var(--fw-normal);
  color: var(--gd-text);
}
.gd-dl--rows {
  border-top: var(--gd-rule);
}
.gd-dl--rows > div {
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: var(--gd-rule);
}
.gd-dl--rows > div + div {
  margin-top: 0;
}
.gd-dl--rows dt {
  font-size: var(--fs-md);
}

/* チェック付きの一覧（わかること・チェックリスト） */
.gd-summary {
  padding-top: var(--space-5);
}
.gd-checkbox {
  padding-top: var(--space-4);
}
.gd-summary__title,
.gd-checkbox__title {
  margin-bottom: var(--space-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  color: var(--gd-text);
}
.gd-summary__title {
  font-size: var(--gd-fs-h3);
  line-height: var(--gd-lh-h3);
}
.gd-summary .gd-muted {
  margin-top: var(--space-4);
}
.gd-checks li {
  position: relative;
  padding-left: 1.8em;
}
.gd-checks li + li {
  margin-top: var(--space-2);
}
.gd-checks li::before {
  content: '';
  position: absolute;
  top: 0.75em;
  left: 0.35em;
  width: 0.7em;
  height: 0.4em;
  border-left: 0.15em solid var(--gd-accent-text);
  border-bottom: 0.15em solid var(--gd-accent-text);
  transform: rotate(-45deg);
}
.gd-checkgrid {
  display: grid;
}
.gd-checkgrid .gd-checkbox {
  font-size: var(--fs-sm);
}

/* 定義 */
.gd-define {
  padding-block: var(--space-5);
}
.gd-define__term {
  font-size: var(--gd-fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h3);
  color: var(--gd-text);
}
.gd-define__body {
  margin-top: var(--space-4);
}
.gd-define__sub {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--gd-text-muted);
}

/* 数字（上の罫線＋大きな数字。左揃え） */
.gd-stats {
  display: grid;
  gap: var(--gd-space-block) var(--gd-gutter);
}
.gd-stat {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: var(--gd-rule-strong);
}
.gd-stat__value {
  margin-top: var(--space-2);
  margin-left: var(--gd-optical);
  font-family: var(--font-en);
  font-size: var(--gd-fs-stat);
  font-weight: var(--fw-normal);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gd-text);
}
.gd-stat__value span {
  margin-left: 0.15em;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--gd-text-sub);
}
.gd-stat__label {
  margin-top: var(--space-3);
  font-size: var(--fs-xs);
  line-height: var(--space-5);
  color: var(--gd-text-muted);
}

/* 段組みの項目（違い・場所・衛生・費用・3つの視点） */
.gd-cards,
.gd-fees,
.gd-axes,
.gd-compare,
.gd-views {
  display: grid;
  gap: var(--gd-space-block) var(--gd-gutter);
}
.gd-card,
.gd-fee,
.gd-view {
  min-width: 0;
  font-size: var(--fs-sm);
}
/* 格子（1枚の角丸グリッド）: 外枠は親の border、セルの間の線は「線1本分のすき間」から見える親の背景。
                 列数（1〜3列）が変わっても縦線・横線が外枠までつながる。セルには border・角丸を付けない。
                 項目数が列数で割り切れないときは、最後のセルを横幅いっぱいにする（空いた所が線の色で埋まるため） */
.gd-views,
.gd-cards,
.gd-compare,
.gd-fees,
.gd-checkgrid {
  gap: var(--gd-line);
  border: var(--gd-rule);
  border-radius: var(--gd-grid-radius);
  overflow: hidden; /* 角丸の外に中身・背景を出さない */
  background: var(--gd-border); /* すき間から見える色＝線の色 */
}
.gd-views > .gd-view,
.gd-cards > .gd-card,
.gd-compare > .gd-compare__col,
.gd-fees > .gd-fee,
.gd-checkgrid > .gd-checkbox {
  padding: var(--gd-cell-pad);
  background: var(--gd-bg); /* ページと同じ背景。すき間だけが線に見える */
}
.gd-card__title,
.gd-fee__name {
  margin-bottom: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  color: var(--gd-text);
}
.gd-views {
  margin-top: var(--gd-space-block);
}
.gd-view__no {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  letter-spacing: 0.2em;
  color: var(--gd-accent-text);
}
.gd .gd-view__en {
  margin-top: var(--space-2);
  margin-left: var(--gd-optical);
  font-size: var(--fs-xl);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  letter-spacing: 0.06em;
  color: var(--gd-text);
}
.gd .gd-view__ja {
  margin-top: var(--space-1);
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--gd-text);
}
.gd .gd-view__text {
  margin-top: var(--space-3);
  color: var(--gd-text-sub);
}

/* 強調（最初にやること）: 上下の罫線に挟んだ大きな一文 */
.gd-highlight {
  padding: var(--space-5);
  border: var(--gd-rule-accent);
  border-radius: var(--gd-grid-radius);
}
.gd-highlight__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--gd-text-muted);
}
.gd-highlight__text {
  margin-top: var(--space-2);
  font-size: var(--gd-fs-lead);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h2);
  color: var(--gd-text);
}
.gd .gd-highlight strong {
  color: var(--gd-accent-text);
}

/* リンクの行（軸 → 探し方・ポイントの目次・探し方）: 罫線の行＋右の矢印 */
.gd-axis,
.gd-index a,
.gd-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--space-3);
  padding: var(--space-4) 0;
  border-top: var(--gd-rule);
  color: var(--gd-text);
  transition: color var(--dur) var(--ease);
}
.gd-axis::after,
.gd-index a::after,
.gd-entry::after {
  content: '\2192';
  grid-column: 2;
  grid-row: 1 / span 3;
  color: var(--gd-accent-text);
  transition: transform var(--dur) var(--ease);
}
.gd-axis:hover,
.gd-index a:hover,
.gd-entry:hover {
  color: var(--gd-accent-text);
}
.gd-axis:hover::after,
.gd-index a:hover::after,
.gd-entry:hover::after {
  transform: translateX(0.25em);
}
.gd-axis > span,
.gd-entry > span {
  grid-column: 1;
}
.gd-axis__if {
  font-size: var(--fs-xs);
  color: var(--gd-text-muted);
}
.gd-axis__then,
.gd-entry__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
}
.gd-entry__text {
  font-size: var(--fs-xs);
  color: var(--gd-text-muted);
}
.gd-index {
  display: grid;
  column-gap: var(--gd-gutter);
  border-bottom: var(--gd-rule);
}
.gd-index a {
  grid-template-columns: 2.5em minmax(0, 1fr) auto;
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--space-5);
}
.gd-index a::after {
  grid-column: 3;
  grid-row: 1;
}
.gd-index .en {
  font-weight: var(--fw-normal);
  color: var(--gd-accent-text);
}
.gd-entries {
  display: grid;
  column-gap: var(--gd-gutter);
  border-bottom: var(--gd-rule);
}

/* 各ポイント: 上の罫線＋番号（PC は左の4列）＋中身 */
.gd-point {
  margin-top: var(--gd-space-sub);
  padding-top: var(--space-5);
  border-top: var(--gd-rule-strong);
  scroll-margin-top: calc(var(--header-h) + var(--adminbar) + var(--space-4));
}
.gd > .gd-index + .gd-point {
  margin-top: var(--gd-space-sub);
}
.gd-point > * + * {
  margin-top: var(--space-4);
}
.gd-point__no {
  margin-left: var(--gd-optical);
  font-family: var(--font-en);
  font-size: var(--fs-xl);
  font-weight: var(--fw-normal);
  line-height: var(--space-7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gd-accent-text);
}
.gd .gd-point__title {
  margin-top: var(--space-2);
}
.gd-tags {
  gap: var(--space-2);
}
.gd-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.gd-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--gd-accent-text);
}
.gd-link::after {
  content: '\2192';
}
.gd-link:hover {
  color: var(--gd-text);
}

/* 2列の比較: 上にアクセントの線 */
.gd-compare__col {
  min-width: 0;
  font-size: var(--fs-sm);
}
.gd-compare__col > * + * {
  margin-top: var(--space-3);
}
.gd-compare__col > .gd-label + * {
  margin-top: 0;
}
.gd-compare__label {
  font-size: var(--gd-fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h3);
  color: var(--gd-text);
}
.gd-compare__note {
  color: var(--gd-text-muted);
}
.gd-compare__for {
  font-weight: var(--fw-medium);
  color: var(--gd-text);
}
.gd-compare__for::before {
  content: '\2714\FE0E';
  margin-right: var(--space-2);
  color: var(--gd-accent-text);
}

/* 注意サイン */
.gd-flags {
  border-top: var(--gd-rule);
}
.gd-flags li {
  position: relative;
  padding: var(--space-4) 0 var(--space-4) 2em;
  border-bottom: var(--gd-rule);
  font-size: var(--fs-sm);
}
.gd-flags li::before {
  content: '\00D7';
  position: absolute;
  top: var(--space-4);
  left: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--space-5);
  color: var(--gd-text-muted);
}
.gd-flags strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--fs-md);
}

/* 理由・流れ: 番号＋中身の行を罫線で区切る */
.gd-reasons,
.gd-flow {
  border-bottom: var(--gd-rule);
}
.gd-reasons {
  counter-reset: gd-reason;
}
.gd-flow {
  counter-reset: gd-step;
}
.gd-reasons li,
.gd-flow li {
  position: relative;
  padding: var(--space-5) 0 var(--space-5) 3.5em;
  border-top: var(--gd-rule);
  font-size: var(--fs-sm);
}
.gd-reasons li {
  counter-increment: gd-reason;
}
.gd-flow li {
  counter-increment: gd-step;
  font-size: var(--fs-base);
}
.gd-reasons li::before,
.gd-flow li::before {
  content: counter(gd-reason, decimal-leading-zero);
  position: absolute;
  top: var(--space-5);
  left: 0;
  font-family: var(--font-en);
  font-size: var(--fs-lg);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  color: var(--gd-accent-text);
}
.gd-flow li::before {
  content: counter(gd-step, decimal-leading-zero);
}
.gd-reasons__title,
.gd-flow__title {
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  line-height: var(--space-6);
  color: var(--gd-text);
}
.gd-flow__title {
  font-size: var(--gd-fs-h3);
  line-height: var(--gd-lh-h3);
}
.gd-flow li > * + * {
  margin-top: var(--space-3);
}
.gd-flow li > .gd-label + * {
  margin-top: 0;
}
.gd-flow__note {
  font-size: var(--fs-sm);
  color: var(--gd-text-muted);
}

/* よくある質問（既存の .faq） */
.gd-faq summary {
  justify-content: flex-start;
  color: var(--gd-text);
}
.gd-faq summary::before {
  content: 'Q';
  flex-shrink: 0;
  font-family: var(--font-en);
  font-size: var(--fs-md);
  font-weight: var(--fw-normal);
  color: var(--gd-accent-text);
}
.gd-faq summary::after {
  margin-left: auto;
}
.gd-cta {
  text-align: left;
}

/* 図（画像＋出典） */
.gd-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.gd-figure figcaption {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--gd-rule);
  font-size: var(--fs-xs);
  line-height: var(--space-5);
  color: var(--gd-text-muted);
}

/* 著者・ご利用にあたって */
.gd > .gd-author {
  margin-top: var(--gd-space-chapter);
}
.gd-author {
  display: grid;
  gap: var(--space-4) var(--gd-gutter);
  padding-top: var(--space-5);
  border-top: var(--gd-rule-strong);
  font-size: var(--fs-sm);
}
.gd-author__photo {
  width: 4.5rem;
}
.gd-author__photo .media {
  border-radius: 50%; /* 写真の丸だけは残す */
  overflow: hidden;
}
.gd-author__label {
  font-size: var(--fs-xs);
  color: var(--gd-text-muted);
}
.gd-author__name {
  margin-top: var(--space-1);
  font-size: var(--gd-fs-h3);
  font-weight: var(--fw-normal);
  line-height: var(--gd-lh-h3);
  color: var(--gd-text);
}
.gd-author__name .en {
  margin-left: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--gd-text-muted);
}
.gd-author__body p + p {
  margin-top: var(--space-2);
}
.gd-disclaimer {
  padding-top: var(--space-4);
  border-top: var(--gd-rule);
  font-size: var(--fs-xs);
  line-height: var(--space-5);
  color: var(--gd-text-muted);
}
.gd-disclaimer__title {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--gd-text);
}
.gd-disclaimer__date {
  text-align: right;
}

/* ---- 600px 以上: 段組みを2列に ---- */
@media (min-width: 600px) {
  .gd-cards,
  .gd-fees,
  .gd-axes,
  .gd-compare,
  .gd-index,
  .gd-entries,
  .gd-checkgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gd-stats,
  .gd-cards--3,
  .gd-views {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gd-fees > .gd-fee:last-child:nth-child(odd) {
    grid-column: 1 / -1; /* 2列で端数の1つは横幅いっぱい（格子を閉じる） */
  }
  .gd-author {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .gd-dl--rows > div {
    grid-template-columns: 10em 1fr;
    gap: var(--space-4);
  }
}

/* ---- 900px 以上: 12カラムのグリッド ---- */
@media (min-width: 900px) {
  .gd {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gd-gutter);
    align-items: start;
  }
  .gd > * {
    grid-column: var(--gd-col-body);
    min-width: 0;
  }
  /* 章の見出し: 12列いっぱいに罫線。番号は左の4列、H2 は5列目から */
  .gd > h2 {
    grid-column: var(--gd-col-full);
    padding-left: var(--gd-head-offset);
  }
  .gd > h2::before {
    position: absolute;
    top: var(--space-5);
    left: 0;
    margin-bottom: 0;
  }
  .gd > h2 + .gd-en + * {
    margin-top: var(--space-7);
  }
  /* 本文の列の中で3つずつ並べる部品（.gd-stats .gd-cards--3 .gd-views は 600px 以上で3列済み） */
  .gd > .gd-checkgrid,
  .gd > .gd-entries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* 本文の8列を使うリンクの行（2つなら4列ずつ）。格子の部品は間が 0 なので subgrid にしない */
  .gd > .gd-axes,
  .gd > .gd-index {
    grid-template-columns: subgrid;
    column-gap: var(--gd-gutter);
  }
  .gd > .gd-axes > *,
  .gd > .gd-index > li {
    grid-column: span 4;
  }
  /* ポイント: 12列の subgrid。番号は左の4列、中身は右の8列 */
  .gd > .gd-point {
    grid-column: var(--gd-col-full);
    display: grid;
    grid-template-columns: subgrid;
    column-gap: var(--gd-gutter);
    align-items: start;
  }
  .gd-point > * {
    grid-column: var(--gd-col-body);
    min-width: 0;
  }
  .gd-point > .gd-point__no {
    grid-column: var(--gd-col-head);
    grid-row: 1 / span 2;
    font-size: var(--gd-fs-h2);
    line-height: var(--gd-lh-h2);
  }
  .gd .gd-point > .gd-point__title {
    margin-top: 0;
  }
  /* 本文の列の外に出る、記事の下の部品（紹介するお店）も5列目に揃える */
  body.gd-page #main .article > .guide-shops__title,
  body.gd-page #main .article > .row-list {
    margin-left: var(--gd-head-offset);
  }
}

/* subgrid が使えないブラウザー: 同じ列数のグリッドで代わりに出す */
@supports not (grid-template-columns: subgrid) {
  @media (min-width: 900px) {
    .gd > .gd-point {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
    .gd > .gd-axes,
    .gd > .gd-index {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }
}

/* =========================================================
             テキストリンクの下線アニメーション
             下線は text-decoration / border-bottom ではなく背景の1本の線（文字色）で描く。2行にまたがっても行ごとに付く。
             A「伸びる」: ふだんは線なし。ホバー・フォーカス・タップで左から伸び、離すと右へ縮む。
             B「引き直す」: ふだんから線あり。ホバー・フォーカス・タップで右へ縮んで消え、左から伸び直す。
             ボタン・カード・行全体のリンク（ドロワー、ガイドの .gd-axis など、規約の .lg-links）は対象外。
             線の縦の位置は --ul-y（既定は箱の下端）。行全体を押せる高さのあるリンクは、文字のすぐ下に寄せる。
             ========================================================= */
.breadcrumb a,
.hero__caption a,
.area-dir__prefs a,
.site-footer__links a,
.site-footer__area-title a,
.site-footer__area-list a,
.site-footer__legal a,
.toc a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 0 var(--ul-h);
  background-position: 100% var(--ul-y, 100%);
  transition: background-size var(--ul-dur) var(--ease), color var(--dur) var(--ease);
}
.breadcrumb a:hover,
.breadcrumb a:focus-visible,
.breadcrumb a:active,
.hero__caption a:hover,
.hero__caption a:focus-visible,
.hero__caption a:active,
.area-dir__prefs a:hover,
.area-dir__prefs a:focus-visible,
.area-dir__prefs a:active,
.site-footer__links a:hover,
.site-footer__links a:focus-visible,
.site-footer__links a:active,
.site-footer__area-title a:hover,
.site-footer__area-title a:focus-visible,
.site-footer__area-title a:active,
.site-footer__area-list a:hover,
.site-footer__area-list a:focus-visible,
.site-footer__area-list a:active,
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible,
.site-footer__legal a:active,
.toc a:hover,
.toc a:focus-visible,
.toc a:active {
  background-size: 100% var(--ul-h);
  background-position: 0 var(--ul-y, 100%);
}
.area-dir__prefs a,
.site-footer__links a,
.site-footer__area-list a {
  --ul-y: calc(50% + 0.75em); /* 高さ 32px の箱の中で、文字のすぐ下 */
}

.sec-head__more,
.search-panel__more,
.lp-link,
.gd-link,
.info-table a,
.shop-closed a,
.lp-prose a,
.lp-cta__text a,
.link-btn,
.news-card__more {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% var(--ul-h);
  background-position: 0 var(--ul-y, 100%);
}
.sec-head__more:hover,
.sec-head__more:focus-visible,
.sec-head__more:active,
.search-panel__more:hover,
.search-panel__more:focus-visible,
.search-panel__more:active,
.lp-link:hover,
.lp-link:focus-visible,
.lp-link:active,
.gd-link:hover,
.gd-link:focus-visible,
.gd-link:active,
.info-table a:hover,
.info-table a:focus-visible,
.info-table a:active,
.shop-closed a:hover,
.shop-closed a:focus-visible,
.shop-closed a:active,
.lp-prose a:hover,
.lp-prose a:focus-visible,
.lp-prose a:active,
.lp-cta__text a:hover,
.lp-cta__text a:focus-visible,
.lp-cta__text a:active,
.link-btn:hover,
.link-btn:focus-visible,
.link-btn:active,
.news-card__more:hover,
.news-card__more:focus-visible,
.news-card__more:active {
  animation: gmb-underline-redraw var(--ul-redraw) var(--ease);
}
/* 本文中のリンク（クラスなし）。ボタン（クラス付き）・目次・行全体のリンク（規約の .lg-links、ガイドの .gd-index）は除く。:not() に複合セレクターを使うので、別の規則にしている */
.prose a:not([class]):not(.toc a):not(.lg-links a),
.gd a:not([class]):not(.toc a):not(.gd-index a) {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% var(--ul-h);
  background-position: 0 var(--ul-y, 100%);
}
.prose a:not([class]):not(.toc a):not(.lg-links a):hover,
.prose a:not([class]):not(.toc a):not(.lg-links a):focus-visible,
.prose a:not([class]):not(.toc a):not(.lg-links a):active,
.gd a:not([class]):not(.toc a):not(.gd-index a):hover,
.gd a:not([class]):not(.toc a):not(.gd-index a):focus-visible,
.gd a:not([class]):not(.toc a):not(.gd-index a):active {
  animation: gmb-underline-redraw var(--ul-redraw) var(--ease);
}
@keyframes gmb-underline-redraw {
  0% {
    background-size: 100% var(--ul-h);
    background-position: 100% var(--ul-y, 100%);
  }
  50% {
    background-size: 0 var(--ul-h);
    background-position: 100% var(--ul-y, 100%);
  }
  50.1% {
    background-position: 0 var(--ul-y, 100%);
  }
  100% {
    background-size: 100% var(--ul-h);
    background-position: 0 var(--ul-y, 100%);
  }
}

/* =========================================================
     口コミの一覧（/reviews/・/reviews/area/{都道府県}/、page-reviews.php）
     カードは .review-card（トップと共通）、絞り込みは .tabs・.select・.chip を使い回す。
     ========================================================= */
.review-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: var(--space-6);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.review-stats > div {
  padding: var(--space-4) var(--space-2);
  text-align: center;
}
.review-stats > div + div {
  border-left: 1px solid var(--color-border);
}
.review-stats dt {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
}
.review-stats dd {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
}
.review-stats dd > .en {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: 1.1;
}
.review-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
}
.review-tools .tabs {
  flex: 1;
  margin-bottom: 0;
}
.review-list-section {
  margin-top: var(--space-7);
}
.review-list-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}
.review-list-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.review-sort {
  display: flex;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}
.review-sort a {
  color: var(--color-text-sub);
}
.review-sort a[aria-current='page'] {
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.review-range {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.review-areas {
  margin-top: var(--space-8);
}
.review-areas__lead {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
}
.review-areas__group {
  margin-top: var(--space-5);
}
.review-areas__region {
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}
.review-areas .chip-row {
  margin-bottom: 0;
}
.review-areas__num {
  margin-left: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.review-areas__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-6);
}

/* =========================================================
   スクロールでのフェードイン（main.js の setupReveal）
   .reveal は JS が初期化できた要素にだけ付く。JS が動かない・失敗したときは何も隠れない。
   動かすのは opacity と transform だけ（隠れている間も場所は取ったまま＝レイアウトはずれない）。
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0s),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0s);
}
.reveal.is-revealed,
.reveal:focus-within {
  opacity: 1;
  transform: none;
}
/* トップの英字（DISCOVER／MEN-ONLY SPACES）: JS を待たない CSS だけのアニメーション */
.hero__en span {
  animation: gmb-reveal-in var(--reveal-dur) var(--reveal-ease) both;
}
.hero__en span + span {
  animation-delay: 0.12s;
}
@keyframes gmb-reveal-in {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-y));
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
@media print {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}