/* =========================================
   🍁 上石神井かえで整体院 — くすみ紅葉パレット
   ========================================= */

:root {
  /*
   * カラー（ロゴ完全準拠版 / 2026-04-18）
   * ロゴから抽出した5色を軸に、ダークブラウン＋もみじ赤＋マスタードゴールドで統一
   */

  /* 【メイン】もみじ赤（ロゴの葉・"かえで"文字と同色） */
  --mori-aka:     #C8362E;  /* ロゴレッド */
  --mori-aka-dk:  #A52A23;  /* ホバー用 */
  --mori-aka-lt:  #E8A8A5;  /* 淡いもみじ */

  /* 【サブ】ダークブラウン（ロゴ円背景・"上石神井"文字と同色） */
  --cha-dk:       #5C3D28;  /* ロゴブラウン */
  --cha:          #7D5943;  /* ブラウン中間 */
  --cha-lt:       #AB968A;  /* ライトブラウン */

  /* 【アクセント】マスタードゴールド（ロゴの英字と同色） */
  --koyo-gold:    #B8953F;  /* ロゴゴールド */
  --koyo-gold-lt: #D4B96A;  /* 淡いゴールド */
  --koyo-gold-bg: #F0E4C1;  /* 極淡ゴールド（背景用） */

  /* 【補助色】オリーブグリーン（ヤギの角・わずかに使う） */
  --olive:        #8FA073;  /* くすみオリーブ */

  /* 【ベース】温かみクリーム（ロゴの背景と馴染む） */
  --cream:        #F5EDDC;  /* ロゴクリーム */
  --nuku-shiro:   #FAF5E9;  /* 背景: 温かい生成り */
  --awa-beige:    #F0E8D4;  /* セクション背景 */

  /* 【テキスト】ロゴブラウンに馴染むダーク */
  --sumi:         #3A2A1E;  /* テキスト・深いブラウン（ロゴ同系） */
  --sumi-soft:    #5C4A3C;  /* ソフト */
  --kasumi-gray:  #8A7865;  /* くすみブラウングレー */

  /* 余白・丸み */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* フォント */
  --ff-mincho: "Zen Old Mincho", "Noto Serif JP", serif;
  --ff-round:  "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", sans-serif;  /* Aベースの丸ゴシック */
  --ff-gothic: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  --ff-num:    "Inter", sans-serif;
}

/* =========================================
   基本リセット
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }
/* モバイルドロワーナビ等によるwindow.innerWidth膨張を全ページで抑制（html必須） */
/* `clip`は`hidden`と違いスクロールコンテナを作らないため、`position: sticky`が正しく動作する */
html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }
section[id] { scroll-margin-top: 80px; }
body {
  margin: 0;
  font-family: var(--ff-gothic);
  color: var(--sumi);
  background: var(--nuku-shiro);
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.sp-only { display: none; }
@media (max-width: 640px) {
  .sp-only { display: inline; }
}
.pc-only { display: inline; }
@media (max-width: 640px) {
  .pc-only { display: none; }
}

.accent { color: var(--mori-aka); }

/* =========================================
   ボタン
   ========================================= */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border-radius: var(--radius-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  transition: all .25s ease;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  min-width: 180px;
}
.btn-label { font-size: 16px; }
.btn-sub   { font-size: 11px; font-weight: 500; margin-top: 2px; letter-spacing: 0.1em; }
.btn-sm    { padding: 10px 20px; min-width: 0; }

.btn-primary {
  background: var(--mori-aka);
  color: #fff;
  box-shadow: 0 4px 14px rgba(168, 74, 60, 0.25);
}
.btn-primary:hover {
  background: var(--mori-aka-dk);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(168, 74, 60, 0.35);
}

.btn-ghost {
  background: transparent;
  color: var(--mori-aka);
  border-color: var(--mori-aka);
}
.btn-ghost:hover {
  background: var(--mori-aka);
  color: #fff;
}

.btn-line {
  background: #06C755;
  color: #fff;
  border-color: #06C755;
  box-shadow: 0 4px 14px rgba(6, 199, 85, 0.25);
}
.btn-line:hover {
  background: #05a347;
  border-color: #05a347;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(6, 199, 85, 0.35);
}

/* =========================================
   ヘッダー
   ========================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 238, 0.96);
  /* backdrop-filterは付けない: 付けると containing block を作り、子要素のpos:fixed(モバイルナビ等)がbody scroll lock時にビューポートではなくヘッダーを基準にしてしまうため */
  border-bottom: 1px solid var(--awa-beige);
}
/* ヘッダー専用: コンテナ幅を広げて左右余白を縮小 */
.site-header > .container {
  max-width: 1320px;
  padding: 0 32px;
}
.header-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
/* 上段: ロゴ + SNS + CTA + ハンバーガー */
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  gap: 24px;
}
/* 上段右側ユーティリティ */
.header-utility {
  display: flex;
  align-items: center;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-round);
  color: var(--sumi);
  line-height: 1.2;
}
.logo-mark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}
.logo-sub {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--cha-dk);
  text-align: center;
}
.logo-main {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: var(--sumi);
}
@media (max-width: 640px) {
  .logo { gap: 8px; }
  .logo-mark { width: 40px; height: 40px; }
  .logo-sub { font-size: 9px; letter-spacing: 0.04em; }
  .logo-main { font-size: 13px; letter-spacing: 0.02em; }
}
/* ===== デスクトップ: nav は nav-list の内容をそのまま横並び表示 ===== */
.nav { display: flex; align-items: center; }
.nav-header  { display: none; }            /* モバイルのみ */
.nav-cta-group { display: none; }          /* モバイルのみ */
.nav-sub-panel { display: none; }          /* モバイルのみ */
.nav-accordion { display: none; }          /* モバイルのみ表示するアコーディオン子メニュー */
.nav-scroll  { display: contents; }        /* 子をそのままflexに参加させる */
.nav-list {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}
.nav-link {
  color: var(--sumi-soft);
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  /* button要素として使う際のリセット */
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
.nav-link:hover { color: var(--mori-aka); }
.nav-plus { display: none; }               /* デスクトップでは「+」非表示 */
.nav-cta { flex-shrink: 0; }

/* デスクトップでは「トップ」項目はロゴクリックで戻れるため非表示 */
.nav-item--top-only-mobile { display: none; }

/* デスクトップで「症状別」ボタンを他のリンクと同じ縦位置に揃える
   button要素は line-height: normal がデフォルトのため、明示的に inherit する */
.nav-accordion-trigger {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--sumi-soft);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.header-cta .btn {
  flex-direction: row;
  gap: 6px;
  min-width: 0;
}
.header-cta .btn i {
  font-size: 16px;
}

/* ===== PC専用 SNSアイコン（円形） ===== */
.header-sns {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 10px;
}
.header-sns a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--awa-beige);
  color: var(--cha-dk);
  font-size: 16px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.header-sns a:hover {
  background: var(--koyo-gold);
  color: #fff;
  transform: translateY(-2px);
}

/* ===== PC専用 下段ナビゲーション ===== */
.nav-pc {
  display: flex;
  justify-content: center;
}
.nav-pc-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
}
.nav-pc-list > li {
  position: relative;
}
.nav-pc-link {
  display: flex;
  align-items: center;
  gap: 4px;
  /* 上を詰めて1段目との間隔を縮小、下はヒーローとの余白として維持 */
  padding: 0 26px 14px;
  font-family: var(--ff-round);
  font-size: 17px;
  font-weight: 600;
  color: var(--sumi);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-pc-link:hover,
.nav-pc-item--has-dropdown:hover > .nav-pc-link {
  color: var(--koyo-red);
}
.nav-pc-arrow {
  font-size: 10px;
  color: var(--cha-dk);
  margin-left: 4px;
  transition: transform 0.2s ease;
}
.nav-pc-item--has-dropdown:hover .nav-pc-arrow {
  transform: rotate(180deg);
  color: var(--koyo-red);
}

/* ===== ドロップダウン（症状別） ===== */
.nav-pc-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(92, 61, 40, 0.15);
  padding: 12px 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 110;
}
.nav-pc-item--has-dropdown:hover .nav-pc-dropdown,
.nav-pc-item--has-dropdown:focus-within .nav-pc-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-pc-dropdown a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  color: var(--sumi);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-pc-dropdown a:hover {
  background: var(--cream);
  color: var(--koyo-red);
}
.nav-pc-sub-arrow {
  color: var(--koyo-gold);
  font-weight: 700;
}

/* ===== PC時：旧.nav（モバイルドロワー）を非表示 ===== */
.nav-pc ~ .nav {
  display: none;
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--sumi);
  border-radius: 1px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45, 42, 38, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}
.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* スクロールトップボタン */
.scroll-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--mori-aka);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(168, 74, 60, 0.35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s;
  z-index: 80;
}
.scroll-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--mori-aka-dk);
  transform: translateY(-3px);
}
@media (max-width: 640px) {
  .scroll-top {
    bottom: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
}

@media (max-width: 900px) {

  /* ===== ドロワーナビ本体（フルスクリーン化） ===== */
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;          /* 子要素を幅いっぱいに広げる（重要） */
    gap: 0;
    padding: 0;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 95;
    box-shadow: none;              /* フルスクリーン化に伴い影を除去 */
  }
  .nav.is-open { transform: translateX(0); }

  /* ===== ヘッダー行（ロゴ左寄せ・CLOSE右寄せ・透過背景） ===== */
  .nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    background: transparent;       /* 透過 */
    border-bottom: 1px solid var(--awa-beige);
    flex-shrink: 0;
    gap: 8px;
  }
  .nav-logo {
    gap: 6px;
    flex: 1;                       /* 左側を埋めて確実に左寄せ */
    min-width: 0;
  }
  .nav-logo .logo-mark { width: 26px; height: 26px; flex-shrink: 0; }
  .nav-logo .logo-text { overflow: hidden; }
  .nav-logo .logo-sub  { font-size: 8px; letter-spacing: 0.04em; }
  .nav-logo .logo-main { font-size: 12px; letter-spacing: 0.02em; }

  /* CLOSEボタン（テキスト＋シンプル✕線） */
  .nav-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 4px 6px;
    color: var(--sumi);
    flex-shrink: 0;
  }
  .nav-close-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 14px;
  }
  .nav-close-icon span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 22px;
    height: 1.5px;
    background: var(--sumi);
    border-radius: 1px;
  }
  .nav-close-icon span:nth-child(1) { transform: translateY(-50%) rotate(45deg); }
  .nav-close-icon span:nth-child(2) { transform: translateY(-50%) rotate(-45deg); }
  .nav-close-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--sumi);
  }

  /* ===== スクロールエリア（メニューリスト） ===== */
  .nav-scroll {
    display: block;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
  }
  .nav-list {
    display: block;
    padding: 0 24px;
    margin: 0;
    list-style: none;
  }
  .nav-item {
    border-bottom: 1px dotted var(--awa-beige);
  }
  /* モバイルでは「トップ」項目を表示（PCでは非表示にしている） */
  .nav-item--top-only-mobile { display: block; }
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--sumi);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
  }
  .nav-link:hover { color: var(--mori-aka); }
  .nav-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 18px;
    font-weight: 300;
    color: var(--cha-lt);
    line-height: 1;
    flex-shrink: 0;
    transition: transform .25s ease;
  }
  .nav-accordion-trigger[aria-expanded="true"] .nav-plus {
    transform: rotate(45deg);  /* +が×に変形 */
  }

  /* ===== 症状別 アコーディオン（その場で下に展開） ===== */
  .nav-accordion {
    /* グローバルの`display: none`を上書きしないとモバイルで開かない */
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-accordion.is-open {
    max-height: 320px;  /* 4項目分の余裕 */
  }
  .nav-sub-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 0 11px 16px;
    font-size: 15px;
    color: var(--sumi-soft);
    transition: color .2s;
  }
  .nav-sub-link:hover { color: var(--mori-aka); }
  .nav-sub-arrow {
    color: var(--cha-lt);
    font-size: 13px;
    flex-shrink: 0;
  }

  /* ===== CTAボタン群（下部・横並び2列） ===== */
  .nav-cta-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 14px 16px 20px;
    flex-shrink: 0;
    border-top: 1px solid var(--awa-beige);
    box-sizing: border-box;
  }
  .nav-cta-btn {
    min-width: 0;          /* .btnのmin-width:180pxを打ち消し（重要） */
    width: 100%;
    flex-direction: row;   /* .btnのcolumnを上書き */
    justify-content: center;
    align-items: center;
    padding: 11px 6px;
    font-size: 13px;
    border-radius: var(--radius-md);
    gap: 5px;
    box-sizing: border-box;
  }
  .nav-cta-btn i { font-size: 14px; }

  .nav-toggle { display: flex; }
  .header-cta .nav-cta { display: none; }

  /* モバイル: 2段構成を解除して旧1段レイアウトに戻す */
  .header-top {
    height: 72px;
    gap: 16px;
  }
  /* モバイルでSNSアイコン非表示 */
  .header-sns { display: none; }
  /* モバイルでPCナビ非表示 */
  .nav-pc { display: none; }
  /* モバイルでドロワー（旧.nav）を有効化 */
  .nav-pc ~ .nav { display: flex; }
}

/* =========================================
   ヒーロー V2（どうぶつ病院スタイル・3枚コラージュ）
   ========================================= */
.hero-v2 {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--nuku-shiro) 0%, var(--cream) 100%);
  padding: 40px 0 80px;
  min-height: 600px;
}
.hero-v2-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(184, 149, 63, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 92% 82%, rgba(200, 54, 46, 0.12) 0%, transparent 55%);
}
.hero-v2-bg::before,
.hero-v2-bg::after {
  content: "🍁";
  position: absolute;
  opacity: 0.15;
}
.hero-v2-bg::before { top: 8%; right: 4%; font-size: 80px; transform: rotate(20deg); }
.hero-v2-bg::after { bottom: 10%; left: 5%; font-size: 60px; transform: rotate(-15deg); }

.hero-v2-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-v2-copy {
  padding: 0;
  display: flex;
  flex-direction: column;
  /* PC版: ベース間隔は統一・上下の引き上げ/押し下げは個別margin */
  gap: 22px;
}
/* PC版（901px以上）のみ: 上下バランス調整 */
@media (min-width: 901px) {
  /* 左カラム全体を grid 行の高さまで縦に伸ばす */
  .hero-v2-copy {
    align-self: stretch;
    padding-top: 40px;        /* 上端の余白 */
    padding-bottom: 40px;     /* 下端の余白 */
  }
  /* 営業ステータス + CTA だけを下端寄りに押し下げる
     marginBottom で下端から少し離して、リード文とのギャップを縮める */
  .hero-v2-copy .hero-v2-cta-pc {
    margin-top: auto;
    margin-bottom: 20px;     /* 下端から離してCTA位置を上に */
  }
  /* バッジと小見出し「上石神井駅 徒歩2分 姿勢改善専門」だけを視覚的に少し上へ
     transform は後続要素を巻き込まないので h1本体・リード・CTAは動かない */
  .hero-v2-copy .hero-v2-badges {
    transform: translateY(-12px);
  }
  .hero-v2-copy .hero-v2-title .small {
    transform: translateY(-12px);
    /* PC版で1行に収めるため、親clamp連動ではなく独立の clamp() で固定
       狭いPC幅(901px〜)では13px・広いPC幅では最大18px */
    font-size: clamp(13px, 1.4vw, 18px);
    letter-spacing: 0.05em;
  }
}

.hero-v2-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;            /* gap管理に切替 */
}
.hero-v2-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--ff-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #fff;
  color: var(--sumi);
  box-shadow: 0 2px 8px rgba(45, 42, 38, 0.08);
}
.hero-v2-badge.red  { background: var(--mori-aka); color: #fff; }
.hero-v2-badge.gold { background: #8B6F2C; color: #fff; }

.hero-v2-title {
  font-family: var(--ff-round);
  font-size: clamp(28px, 4.5vw, 54px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--sumi);
  margin-bottom: 0;            /* gap管理に切替 */
  letter-spacing: 0.04em;
}
.hero-v2-title .emphasize {
  color: var(--mori-aka);
  background: linear-gradient(transparent 60%, rgba(232, 217, 168, 0.8) 60%);
  padding: 0 4px;
}
.hero-v2-title .small {
  display: block;
  font-size: 0.5em;
  color: var(--cha);
  font-weight: 700;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.hero-v2-lead {
  font-size: 16px;
  line-height: 2;
  color: var(--sumi-soft);
  margin-bottom: 0;            /* gap管理に切替 */
}

.hero-v2-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-v2-cta .btn {
  font-family: var(--ff-round);
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 20px 40px;
  min-width: 220px;
}

/* ===== Googleクチコミバッジ ===== */
.hero-v2-badge.hero-v2-badge-google {
  background: #fff;
  color: var(--sumi);
  text-decoration: none;
  border: 1.5px solid #FBBC04;
  transition: transform .15s ease, box-shadow .15s ease;
  padding: 4px 12px 4px 6px;
}
.hero-v2-badge-google-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}
.hero-v2-badge.hero-v2-badge-google:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 42, 38, 0.16);
}

/* ===== PC/モバイル CTA表示切替 ===== */
.hero-v2-cta-pc { display: flex; }      /* PCで表示 */
.hero-v2-cta-mobile { display: none; }  /* モバイルで表示 */

/* ===== 看板型 営業ステータス（PC版のみ） ===== */
.hero-v2-cta-pc {
  align-items: stretch;
  gap: 14px;
}
.status-board {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 12px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(92, 61, 40, 0.12);
}
.status-board-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: #fff;
  border-radius: 12px;
  font-size: 24px;
  flex-shrink: 0;
}
.status-board-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.status-board-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-round);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.status-board-label::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-board-time {
  font-family: 'Inter', var(--ff-round);
  font-size: 18px;
  font-weight: 700;
  color: var(--sumi);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* 状態1: 営業中 */
.status-board[data-state="open"] .status-board-icon {
  background: linear-gradient(135deg, #3da45c 0%, #2d8a4a 100%);
  box-shadow: 0 4px 10px rgba(45, 138, 74, 0.32);
}
.status-board[data-state="open"] .status-board-label { color: #2d8a4a; }
.status-board[data-state="open"] .status-board-label::before {
  background: #2d8a4a;
  animation: status-pulse 2s infinite;
}
/* 状態2: まもなく終了 */
.status-board[data-state="closing-soon"] .status-board-icon {
  background: linear-gradient(135deg, #d4a73c 0%, #b8853a 100%);
  box-shadow: 0 4px 10px rgba(184, 133, 58, 0.32);
}
.status-board[data-state="closing-soon"] .status-board-label { color: #b8853a; }
.status-board[data-state="closing-soon"] .status-board-label::before {
  background: #b8853a;
  animation: status-pulse 2s infinite;
}
/* 状態3: 予約受付終了 */
.status-board[data-state="reservation-closed"] .status-board-icon {
  background: linear-gradient(135deg, #888 0%, #5c3d28 100%);
  box-shadow: 0 4px 10px rgba(92, 61, 40, 0.25);
}
.status-board[data-state="reservation-closed"] .status-board-label { color: #5c3d28; }
.status-board[data-state="reservation-closed"] .status-board-label::before { background: #888; }
/* 状態4: 営業時間外 */
.status-board[data-state="closed"] .status-board-icon {
  background: linear-gradient(135deg, #888 0%, #666 100%);
  box-shadow: 0 4px 10px rgba(80, 80, 80, 0.25);
}
.status-board[data-state="closed"] .status-board-label { color: #666; }
.status-board[data-state="closed"] .status-board-label::before { background: #888; }
/* 状態5: お休み */
.status-board[data-state="holiday"] .status-board-icon {
  background: linear-gradient(135deg, #d05750 0%, #a83a32 100%);
  box-shadow: 0 4px 10px rgba(168, 58, 50, 0.3);
}
.status-board[data-state="holiday"] .status-board-label { color: #a83a32; }
.status-board[data-state="holiday"] .status-board-label::before { background: #a83a32; }
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* 3枚コラージュ */
.hero-v2-visual {
  position: relative;
  height: 640px;
}
.hero-v2-photo {
  position: absolute;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(92, 61, 40, 0.25);
  transition: transform .4s ease;
  background: #fff;
}
.hero-v2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-v2-photo-1 {
  width: 66%;
  height: 55%;
  top: 0;
  left: 0;
  border-radius: 42% 58% 48% 52% / 55% 45% 55% 45%;
  transform: rotate(-3deg);
  border: 7px solid #fff;
  z-index: 1;
}
.hero-v2-photo-1:hover { transform: rotate(-3deg) scale(1.03); }
.hero-v2-photo-2 {
  width: 52%;
  height: 44%;
  bottom: 2%;
  right: 2%;
  border-radius: 55% 45% 48% 52% / 48% 52% 48% 52%;
  transform: rotate(5deg);
  border: 7px solid #fff;
  z-index: 3;
}
.hero-v2-photo-2:hover { transform: rotate(5deg) scale(1.03); }
.hero-v2-photo-3 {
  width: 40%;
  height: 38%;
  top: 4%;
  right: -2%;
  border-radius: 50% 50% 52% 48% / 55% 45% 55% 45%;
  transform: rotate(6deg);
  border: 6px solid #fff;
  z-index: 2;
}
.hero-v2-photo-3:hover { transform: rotate(6deg) scale(1.03); }
.hero-v2-photo-4 {
  width: 40%;
  height: 34%;
  bottom: 6%;
  left: 2%;
  border-radius: 52% 48% 55% 45% / 48% 52% 45% 55%;
  transform: rotate(-4deg);
  border: 5px solid #fff;
  z-index: 2;
}
.hero-v2-photo-4:hover { transform: rotate(-4deg) scale(1.03); }

/* スライドショー（PC では非表示・モバイル時のみ有効・4枚で24秒サイクル） */
.hero-v2-slideshow { display: none; }
@keyframes hero-v2-slideshow {
  0%     { opacity: 0; transform: scale(1.08); }
  4.16%  { opacity: 1; }
  25%    { opacity: 1; transform: scale(1.02); }
  29.16% { opacity: 0; transform: scale(1); }
  100%   { opacity: 0; }
}

@media (max-width: 900px) {
  /* モバイル時：スライドショーをヒーロー全面背景にする */
  .hero-v2 {
    padding: 0;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--cha-dk);
  }
  .hero-v2-bg { display: none; }
  .hero-v2-visual { display: none; }

  .hero-v2-slideshow {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  .hero-v2-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: hero-v2-slideshow 24s ease-in-out infinite;
    animation-fill-mode: both;
    will-change: opacity, transform;
  }
  .hero-v2-slide-1 { background-image: url("../assets/kaede_store_010.webp"); animation-delay: 0s; }
  .hero-v2-slide-2 { background-image: url("../assets/kaede_store_018-hero.webp"); animation-delay: 6s; }
  .hero-v2-slide-3 { background-image: url("../assets/kaede_store_007.webp"); animation-delay: 12s; }
  .hero-v2-slide-4 {
    background-image: url("../assets/kaede_store_013.webp");
    background-position: 55% 50%; /* 院長が中央に来るよう調整 */
    animation-delay: 18s;
  }

  /* テキスト可読性のためのオーバーレイ：上下にダーク・中央クリア（写真主役） */
  .hero-v2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20, 12, 4, 0.55) 0%,
      rgba(20, 12, 4, 0.30) 22%,
      rgba(20, 12, 4, 0.05) 38%,
      rgba(20, 12, 4, 0) 50%,
      rgba(20, 12, 4, 0.10) 62%,
      rgba(40, 28, 18, 0.55) 82%,
      rgba(40, 28, 18, 0.78) 100%
    );
    z-index: -1;
  }

  /* レイアウト：見出しを上、バッジ＋CTAを下に */
  .hero-v2-inner {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 620px;
    padding: 24px 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
  }
  .hero-v2-copy {
    display: contents;
  }

  /* 見出し：上部・左寄せ。サブを見出しの下に表示 */
  .hero-v2-title {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    margin-bottom: 0;
  }
  .hero-v2-title-main { order: 1; line-height: 1.45; }
  .hero-v2-title .small {
    order: 2;
    margin: 14px 0 0;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.06em;
  }

  /* リード文はモバイル版では非表示 */
  .hero-v2-lead { display: none; }

  /* バッジ：status-board の直下に配置（横一列・4個） */
  .hero-v2-badges {
    order: 3;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: center;
    padding: 0 8px;
  }
  /* バッジ自体を少し小さくして4個が収まるよう調整 */
  .hero-v2-badge {
    padding: 5px 9px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }
  .hero-v2-badge.hero-v2-badge-google {
    padding: 3px 9px 3px 5px;
  }
  .hero-v2-badge-google-icon { width: 16px; height: 16px; }
  /* バッジ：モバイル版は3色を半透明白に統一（フロストガラス風） */
  .hero-v2-badge,
  .hero-v2-badge.red,
  .hero-v2-badge.gold {
    background: rgba(255, 255, 255, 0.92);
    color: var(--cha-dk);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  }
  /* Googleバッジもフロスト統一（背景白・枠線維持） */
  .hero-v2-badge.hero-v2-badge-google {
    background: rgba(255, 255, 255, 0.96);
  }

  .hero-v2-title {
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.5;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
  }
  .hero-v2-title .small {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 8px;
  }
  .hero-v2-title .emphasize {
    color: #F2D98A;
    background: none;
    padding: 0;
  }

  .hero-v2-lead {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.85;
    margin-bottom: 22px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
  }

  /* モバイルでは下部に常時CTAがあるため、ヒーロー内CTA2ボタンを廃止し、
     代わりにPC版で使っている営業ステータス看板（status-board）のみを表示する。
     順序：title → status-board（margin-top: autoで画面下寄りに配置） → badges */
  .hero-v2-cta-pc {
    display: flex;
    order: 2;
    margin-top: auto;
    gap: 0;
  }
  .hero-v2-cta-pc .btn { display: none; }   /* PC版に併設されているネット予約ボタンはモバイルでは非表示 */
  .hero-v2-cta-mobile { display: none; }    /* 旧モバイル用CTA2ボタンは廃止 */

  /* status-board をモバイル幅に最適化（左寄せ・コンパクト） */
  .hero-v2-cta-pc .status-board {
    padding: 10px 18px 10px 10px;
    gap: 12px;
    border-radius: 10px;
  }
  .hero-v2-cta-pc .status-board-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
    border-radius: 10px;
  }
  .hero-v2-cta-pc .status-board-label {
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .hero-v2-cta-pc .status-board-time {
    font-size: 16px;
  }
}

/* アニメーション無効化（アクセシビリティ） */
@media (prefers-reduced-motion: reduce) {
  .hero-v2-slide { animation: none; }
  .hero-v2-slide-1 { opacity: 1; }
  .hero-v2-slide-2 { opacity: 0; }
  .hero-v2-slide-3 { opacity: 0; }
  .hero-v2-slide-4 { opacity: 0; }
}

/* =========================================
   ヒーロー（V1・旧版は未使用）
   ========================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--nuku-shiro);
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 85% 20%, rgba(184, 149, 63, 0.20) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(200, 54, 46, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(92, 61, 40, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--nuku-shiro) 0%, var(--cream) 100%);
  z-index: 0;
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 96px 24px 120px;
  text-align: center;
}
.hero-eyebrow {
  font-family: var(--ff-mincho);
  font-size: 14px;
  letter-spacing: 0.3em;
  color: var(--koyo-gold);
  margin-bottom: 24px;
}
.hero-title {
  font-family: var(--ff-round);
  font-size: clamp(32px, 6vw, 58px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--sumi);
  margin-bottom: 32px;
  letter-spacing: 0.04em;
}
.hero-lead {
  font-size: 16px;
  color: var(--sumi-soft);
  margin-bottom: 48px;
  line-height: 2;
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero-badges {
  display: flex;
  gap: 24px 32px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--cha-dk);
  font-weight: 700;
}

/* =========================================
   セクション共通
   ========================================= */
.section-heading {
  text-align: center;
  margin-bottom: 64px;
}
.section-eyebrow {
  font-family: var(--ff-num);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #7A5F25;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.section-eyebrow-jp {
  font-family: var(--ff-round);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: #7A5F25;
  margin-top: -12px;
  margin-bottom: 16px;
}
.section-title {
  font-family: var(--ff-round);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: var(--sumi);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

/* =========================================
   院長からのごあいさつ
   ========================================= */
.greeting {
  padding: 112px 0;
  background: var(--nuku-shiro);
  position: relative;
  overflow: hidden;
}
.greeting::before {
  content: "🍁";
  position: absolute;
  left: -40px;
  top: 40px;
  font-size: 180px;
  opacity: 0.05;
  transform: rotate(-20deg);
  pointer-events: none;
}
.greeting-inner {
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-areas:
    "photo eyebrows"
    "photo title"
    "photo text";
  column-gap: 64px;
  row-gap: 16px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.greeting-photo {
  grid-area: photo;
  position: relative;
  align-self: center;
}
.greeting-eyebrows { grid-area: eyebrows; }
.greeting-title { grid-area: title; }
.greeting-text { grid-area: text; }
.greeting-namecard { display: none; } /* PCでは非表示（モバイル時のみ表示） */
.greeting-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(92, 61, 40, 0.2);
}
.greeting-photo-badge {
  position: absolute;
  right: -16px;
  bottom: 32px;
  background: var(--mori-aka);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  font-family: var(--ff-round);
  letter-spacing: 0.05em;
  box-shadow: 0 8px 20px rgba(200, 54, 46, 0.3);
}

.greeting-title {
  font-family: var(--ff-round);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  line-height: 1.5;
  color: var(--sumi);
  margin: 20px 0 32px;
  letter-spacing: 0.04em;
}
.greeting-text p {
  font-size: 15px;
  line-height: 2.1;
  color: var(--sumi-soft);
  margin-bottom: 20px;
}
.greeting-text strong {
  color: var(--sumi);
  font-weight: 700;
}
.greeting-signature {
  margin-top: 32px !important;
  font-size: 14px !important;
  color: var(--cha-dk) !important;
  padding-top: 20px;
  border-top: 1px solid var(--cream);
}
.signature-name {
  font-family: "Klee One", var(--ff-mincho);
  font-size: 32px;
  font-weight: 600;
  color: var(--sumi);
  margin-left: 12px;
  letter-spacing: 0.15em;
}

@media (max-width: 900px) {
  .greeting { padding: 56px 0; }
  /* 雑誌風：センタリング型レイアウト
     eyebrows → 写真（中・四角）→ 名前 → 見出し → 本文 */
  .greeting-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrows"
      "photo"
      "namecard"
      "title"
      "text";
    column-gap: 0;
    row-gap: 18px;
    align-items: stretch;
    text-align: center;
  }
  /* eyebrows */
  .greeting-eyebrows .section-eyebrow {
    margin-bottom: 4px;
    font-size: 13px;
  }
  .greeting-eyebrows .section-eyebrow-jp {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 14px;
  }
  /* 写真（中サイズ・四角・センタリング） */
  .greeting-photo {
    max-width: 260px;
    width: 100%;
    margin: 12px auto 0;
    align-self: center;
  }
  .greeting-photo img {
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(92, 61, 40, 0.18);
  }
  /* 名前カード */
  .greeting-namecard {
    display: block;
    margin: 0 auto;
  }
  .greeting-namecard-role {
    font-size: 13px;
    color: var(--sumi-soft);
    margin: 0 0 4px;
    letter-spacing: 0.08em;
  }
  .greeting-namecard-name {
    font-family: var(--ff-round);
    font-size: 20px;
    font-weight: 700;
    color: var(--cha-dk);
    margin: 0;
    letter-spacing: 0.08em;
  }
  .greeting-namecard-furigana {
    display: inline-block;
    margin-left: 8px;
    font-size: 12px;
    font-weight: 400;
    color: var(--kasumi-gray);
    letter-spacing: 0.04em;
  }
  /* 見出し（センタリング・少し大きめ） */
  .greeting-title {
    font-size: 22px;
    line-height: 1.55;
    margin: 8px 0 0;
  }
  /* 本文は読みやすく左寄せに戻す */
  .greeting-text {
    text-align: left;
    margin-top: 4px;
  }
  /* 署名は名前カードと重複するのでモバイルでは非表示 */
  .greeting-signature {
    display: none;
  }
}

/* =========================================
   お悩み
   ========================================= */
.concerns {
  padding: 112px 0;
  background: var(--awa-beige);
}
/* お悩みグリッド（参考B 症状カードスタイル） */
.concern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto 64px;
}
.concern-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px 20px 56px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(45, 42, 38, 0.06);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  min-height: 240px;
}
.concern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(45, 42, 38, 0.12);
}
.concern-card:hover .concern-icon {
  color: var(--mori-aka);
}
.concern-card:hover .concern-arrow {
  background: var(--mori-aka);
  color: #fff;
  transform: translateX(2px);
}

.concern-icon {
  width: 72px;
  height: 72px;
  color: var(--koyo-gold);
  transition: color .3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.concern-icon svg {
  width: 100%;
  height: 100%;
}
.concern-icon i {
  font-size: 56px;
  line-height: 1;
}

.concern-label {
  font-family: var(--ff-round);
  font-size: 16px;
  font-weight: 700;
  color: var(--sumi);
  line-height: 1.6;
  letter-spacing: 0.02em;
  margin: 0;
}

.concern-arrow {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--awa-beige);
  color: var(--sumi-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all .25s ease;
}

.concerns-lead {
  text-align: center;
  font-size: 17px;
  color: var(--sumi-soft);
  line-height: 2;
  font-family: var(--ff-round);
  margin-bottom: 48px;
}
.concerns-lead strong {
  color: var(--mori-aka);
  font-weight: 900;
  font-size: 1.15em;
}

@media (max-width: 1024px) {
  .concern-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .concern-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .concern-card {
    min-height: 200px;
    padding: 24px 14px 48px;
    gap: 14px;
  }
  .concern-icon { width: 56px; height: 56px; }
  .concern-icon i { font-size: 42px; }
  .concern-label { font-size: 13px; line-height: 1.5; }
  .concern-arrow {
    right: 50%;
    transform: translateX(50%);
    bottom: 14px;
  }
  .concern-card:hover .concern-arrow {
    transform: translateX(50%) translateX(2px);
  }
}
@media (max-width: 640px) {
  .concerns { padding: 64px 0; }
  .concerns .section-heading { margin-bottom: 28px; }
  .concerns-lead { margin-bottom: 28px; font-size: 15px; }
  .concern-grid { margin-bottom: 0; }
}

/* =========================================
   選ばれる理由（参考A どうぶつ病院スタイル）
   ========================================= */
.reasons {
  padding: 112px 0;
  background: var(--nuku-shiro);
  position: relative;
}
.reasons::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(200, 54, 46, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(184, 149, 63, 0.04) 0%, transparent 40%);
  pointer-events: none;
}
.title-deco {
  display: inline-block;
  font-size: 0.7em;
  margin: 0 14px;
  vertical-align: middle;
  opacity: 0.8;
}

.feature-list {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.feature-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}
.feature-item.feature-reverse {
  direction: rtl;
}
.feature-item.feature-reverse > * {
  direction: ltr;
}

.feature-body {
  padding: 0 8px;
}

.feature-title {
  font-family: var(--ff-round);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 900;
  line-height: 1.6;
  color: var(--sumi);
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  text-align: left;
  direction: ltr;
}
.feature-icon {
  font-size: 0.85em;
  margin-right: 10px;
  display: inline-block;
  vertical-align: baseline;
}
.feature-title .accent {
  color: var(--mori-aka);
}

.feature-text {
  font-size: 15px;
  line-height: 2;
  color: var(--sumi-soft);
  margin-bottom: 24px;
}
.feature-text strong {
  color: var(--sumi);
  font-weight: 700;
  background: linear-gradient(transparent 65%, rgba(232, 163, 61, 0.25) 65%);
  padding: 0 2px;
}

.feature-btn {
  display: block;
  width: fit-content;
  margin: 24px auto 0;
  background: var(--mori-aka);
  color: #fff;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  box-shadow: 0 6px 16px rgba(200, 54, 46, 0.25);
  transition: all .25s ease;
}
.feature-btn:hover {
  background: var(--mori-aka-dk);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(200, 54, 46, 0.35);
}

.feature-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%;  /* 有機的な角丸 */
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(92, 61, 40, 0.15);
  transition: border-radius .6s ease;
}
.feature-photo:hover {
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
}
.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.feature-item:hover .feature-photo img {
  transform: scale(1.05);
}

@media (max-width: 900px) {
  .feature-list { gap: 64px; }
  .feature-item,
  .feature-item.feature-reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    direction: ltr;
  }
  .feature-photo {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 640px) {
  /* モバイルでは全ての🍁絵文字を非表示にしてバランスを整える */
  .title-deco { display: none; }
  .feature-icon { display: none; }
  /* 小見出しは2行でセンタリング（17pxで2行に収める） */
  .feature-title {
    font-size: 17px;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.02em;
  }
  /* AIボタン：モバイルは余白を少し詰める */
  .feature-btn {
    margin-top: 16px;
  }
}

/* 古い .reason-* 系のスタイルは feature-* に置き換え済み */

/* =========================================
   施術の流れ
   ========================================= */
.flow {
  padding: 112px 0;
  background: var(--awa-beige);
}
.flow-steps {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}
.flow-step {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 56px 28px 32px;
  text-align: center;
  position: relative;
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.06);
}
.flow-step-num {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--mori-aka);
  color: #fff;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(200, 54, 46, 0.3);
}
.flow-step-title {
  font-family: var(--ff-round);
  font-size: 20px;
  font-weight: 900;
  color: var(--sumi);
  line-height: 1.5;
  margin-bottom: 16px;
  letter-spacing: 0.03em;
}
.flow-step-desc {
  font-size: 14px;
  line-height: 2;
  color: var(--sumi-soft);
  text-align: left;
}
.flow-step-desc strong {
  color: var(--mori-aka);
  font-weight: 700;
}
.flow-step-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--kasumi-gray);
  text-align: left;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .flow-steps { grid-template-columns: 1fr; gap: 48px; }
}

/* =========================================
   料金
   ========================================= */
.price {
  padding: 112px 0;
  background: var(--nuku-shiro);
}
.price-intro {
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  color: var(--sumi-soft);
  margin: 0 auto 56px;
  max-width: 640px;
}

/* ブロック共通 */
.price-block {
  max-width: 900px;
  margin: 0 auto 56px;
}
.price-block-title {
  text-align: center;
  margin: 0 0 24px;
  position: relative;
}
.price-block-title::before,
.price-block-title::after {
  content: "";
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--cha-lt);
  vertical-align: middle;
  margin: 0 16px;
}
.price-block-badge {
  font-family: var(--ff-round);
  font-size: 20px;
  font-weight: 900;
  color: var(--cha-dk);
  letter-spacing: 0.05em;
}

/* テーブル */
.price-table {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.05);
}
.price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 24px 28px;
  align-items: center;
  border-bottom: 1px solid var(--cream);
}
.price-row:last-child { border-bottom: none; }
.price-row-featured {
  background: linear-gradient(180deg, #fff 0%, var(--awa-beige) 100%);
}
.price-row-option {
  background: var(--awa-beige);
}
.price-row-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-row-label strong {
  font-family: var(--ff-round);
  font-size: 18px;
  font-weight: 900;
  color: var(--sumi);
}
.price-row-desc {
  font-size: 13px;
  color: var(--sumi-soft);
  line-height: 1.6;
}
.price-option-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #7A5F25;
  background: var(--koyo-gold-bg);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.1em;
  width: fit-content;
  margin-bottom: 4px;
}
.price-row-value {
  text-align: right;
  white-space: nowrap;
}
.price-amount {
  font-family: var(--ff-num);
  font-size: 32px;
  font-weight: 700;
  color: var(--mori-aka);
  line-height: 1;
}
.price-yen {
  font-size: 20px;
  margin-right: 2px;
}
.price-plus {
  font-size: 22px;
  margin-right: 2px;
}
.price-tax {
  font-size: 11px;
  color: var(--kasumi-gray);
  margin-left: 4px;
  font-weight: 500;
  font-family: var(--ff-round);
}
.price-note {
  font-size: 13px;
  color: var(--sumi-soft);
  text-align: center;
  margin: 16px 0 0;
  line-height: 1.7;
}

/* キャッシュレス */
.price-cashless {
  max-width: 900px;
  margin: 80px auto 56px;
}
.price-cashless-title {
  text-align: center;
  font-family: var(--ff-round);
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 900;
  color: var(--sumi);
  margin: 0 0 12px;
}
.price-cashless-lead {
  text-align: center;
  font-size: 14px;
  color: var(--sumi-soft);
  margin: 0 0 32px;
  line-height: 1.8;
}
.payment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.payment-col {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.05);
}
.payment-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--koyo-gold-bg);
  color: var(--koyo-gold);
  border-radius: 50%;
}
.payment-icon i { font-size: 22px; }
.payment-col-title {
  font-family: var(--ff-round);
  font-size: 15px;
  font-weight: 900;
  color: var(--sumi);
  margin: 0 0 12px;
  padding-bottom: 12px;
  position: relative;
}
.payment-col-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 1px;
  background: var(--cha-lt);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.payment-brands {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.payment-brands .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(45, 42, 38, 0.1);
  border-radius: 6px;
  overflow: hidden;
}
.payment-brands .brand img {
  max-height: 28px;
  max-width: 68px;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

/* キャンセルポリシー */
.price-cancel-policy {
  max-width: 600px;
  margin: 0 auto;
  background: var(--awa-beige);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-align: center;
}
.price-cancel-policy h4 {
  font-family: var(--ff-round);
  font-size: 14px;
  font-weight: 700;
  color: var(--sumi);
  margin: 0 0 6px;
}
.price-cancel-policy h4 i {
  color: var(--koyo-gold);
  margin-right: 6px;
}
.price-cancel-policy p {
  font-size: 13px;
  color: var(--sumi-soft);
  margin: 0;
}
.price-footnote {
  max-width: 600px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.8;
  color: var(--sumi-soft);
  opacity: 0.85;
}

@media (max-width: 900px) {
  .payment-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .price { padding: 72px 0; }
  .price-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
  }
  .price-row-value { text-align: left; }
  .price-amount { font-size: 28px; }
  .price-block-title::before,
  .price-block-title::after { width: 24px; margin: 0 10px; }
  .price-block-badge { font-size: 17px; }
}

/* =========================================
   選ばれる方 / 向かない方
   ========================================= */
.suited {
  padding: 112px 0;
  background: var(--awa-beige);
}
.suited-wrap {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.suited-col {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.06);
}
.suited-col h3 {
  font-family: var(--ff-round);
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 24px;
  line-height: 1.5;
  padding-bottom: 16px;
  border-bottom: 3px solid;
  letter-spacing: 0.03em;
}
.suited-yes h3 {
  color: var(--mori-aka);
  border-color: var(--mori-aka);
}
.suited-no h3 {
  color: var(--cha);
  border-color: var(--cha-lt);
}
.suited-col ul li {
  font-size: 15px;
  line-height: 1.9;
  color: var(--sumi-soft);
  padding: 10px 0 10px 28px;
  position: relative;
  border-bottom: 1px dashed var(--cream);
}
.suited-yes ul li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  top: 10px;
  color: var(--mori-aka);
  font-weight: 900;
}
.suited-no ul li::before {
  content: "—";
  position: absolute;
  left: 4px;
  top: 10px;
  color: var(--cha-lt);
  font-weight: 700;
}
.suited-no-note {
  margin-top: 20px;
  padding: 16px;
  background: var(--cream);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.8;
  color: var(--sumi-soft);
  text-align: center;
}
.suited-no-note strong {
  color: var(--mori-aka);
  font-weight: 700;
}

@media (max-width: 900px) {
  .suited-wrap { grid-template-columns: 1fr; }
}

/* =========================================
   予約CTA
   ========================================= */
.reserve {
  padding: 88px 0;
  background: linear-gradient(135deg, var(--cha-dk) 0%, var(--cha) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reserve::before,
.reserve::after {
  content: "🍁";
  position: absolute;
  font-size: 240px;
  opacity: 0.07;
  pointer-events: none;
}
.reserve::before { left: -60px; top: -40px; transform: rotate(-15deg); }
.reserve::after { right: -60px; bottom: -40px; transform: rotate(25deg); }
.reserve-inner { position: relative; z-index: 1; }
.reserve .section-eyebrow {
  color: var(--koyo-gold-lt);
  margin-bottom: 16px;
}
.reserve-title {
  font-family: var(--ff-round);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
}
.reserve-title .accent {
  color: var(--koyo-gold-lt);
}
.reserve-lead {
  font-size: 15px;
  line-height: 2;
  color: var(--cream);
  margin-bottom: 40px;
  opacity: 0.9;
}
.reserve-cta-grid {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.reserve-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 44px;
  border-radius: 999px;
  font-family: var(--ff-round);
  font-weight: 900;
  letter-spacing: 0.05em;
  transition: all .25s ease;
  min-width: 220px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.reserve-cta-label { font-size: 18px; }
.reserve-cta-sub { font-size: 12px; font-weight: 500; opacity: 0.85; margin-top: 4px; letter-spacing: 0.1em; }
.reserve-cta-primary {
  background: var(--mori-aka);
  color: #fff;
}
.reserve-cta-primary:hover {
  background: var(--mori-aka-dk);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(200, 54, 46, 0.4);
}
.reserve-cta-line {
  background: #06C755;  /* LINE公式色 */
  color: #fff;
}
.reserve-cta-line:hover {
  background: #05a347;
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(6, 199, 85, 0.4);
}
/* モバイル: ネット予約・LINEを横一列（50/50）に */
@media (max-width: 640px) {
  .reserve-cta-grid {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .reserve-cta {
    min-width: 0;
    flex: 1 1 0;
    padding: 16px 10px;
  }
  .reserve-cta-label { font-size: 16px; }
  .reserve-cta-sub { font-size: 11px; }
}

/* =========================================
   FAQ
   ========================================= */
.faq {
  padding: 112px 0;
  background: var(--nuku-shiro);
}
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: #fff;
  border-radius: var(--radius-md);
  border: 2px solid var(--cream);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s;
}
.faq-item[open] {
  border-color: var(--koyo-gold);
  box-shadow: 0 6px 20px rgba(184, 149, 63, 0.15);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 24px 20px 20px;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 16px;
  color: var(--sumi);
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--ff-num);
  font-size: 24px;
  font-weight: 300;
  color: var(--mori-aka);
  transition: transform .25s;
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-q {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mori-aka);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-num);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.faq-a {
  padding: 0 24px 24px 68px;
  font-size: 15px;
  line-height: 2;
  color: var(--sumi-soft);
  border-top: 1px dashed var(--cream);
  padding-top: 16px;
  margin: 0 20px;
}
.faq-a strong {
  color: var(--mori-aka);
  font-weight: 700;
}
@media (max-width: 640px) {
  .faq-item summary { padding: 16px; font-size: 14px; }
  .faq-a { padding-left: 56px; }
}


/* =========================================
   情報統合フッターブロック（リベ大スタイル翻案・2026-04-26）
   page-reserve CTA の直下に配置
   ========================================= */
.info-footer {
  background: var(--awa-beige);
  padding: 72px 0 56px;
}

/* 2カラム: 左info / 右map */
.info-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}

/* 左カラム: 基本情報 */
.info-footer-info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* 左カラム上部のロゴ（ヘッダーと同じスタイルを継承＋微調整） */
.info-footer-logo {
  margin-bottom: 36px;
  cursor: default;
}
.info-footer-logo .logo-mark {
  width: 60px;
  height: 60px;
}
.info-footer-logo .logo-main {
  font-size: 19px;
}

/* 情報行コンテナ */
.info-footer-info-rows {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}
.info-footer-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 18px;
  align-items: start;
}
.info-footer-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(200, 54, 46, 0.1);
  color: var(--mori-aka);
  font-size: 19px;
}
.info-footer-row-body { min-width: 0; padding-top: 2px; }
.info-footer-row-body .info-footer-row-label {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--cha-dk);
  margin: 0 0 6px;
  letter-spacing: 0.04em;
}
.info-footer-row-body .info-footer-row-value {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--sumi);
}
.info-footer-row-body .info-footer-row-value strong {
  color: var(--mori-aka);
  font-weight: 700;
}
.info-footer-row-body .info-footer-row-value small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--sumi-soft);
}

/* 営業時間の行（平日 / 土日祝 を揃える） */
.info-footer-hours-line {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.info-footer-hours-line + .info-footer-hours-line {
  margin-top: 2px;
}
.info-footer-hours-day {
  display: inline-block;
  min-width: 56px;
  color: var(--sumi);
  font-weight: 500;
}

/* 右カラム: 地図 */
.info-footer-map {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.info-footer-map-iframe {
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: 0 6px 22px rgba(92, 61, 40, 0.12);
  display: block;
  background: #f0e8d4;
}
.info-footer-map-link-row {
  text-align: right;
  margin: 0;
}
.info-footer-map-link-row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--mori-aka);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.info-footer-map-link-row a:hover { color: var(--mori-aka-dk); }


/* サイトマップ */
.info-footer-sitemap {
  border-top: 1px dashed rgba(92, 61, 40, 0.2);
  padding-top: 32px;
  margin-bottom: 28px;
}
.info-footer-sitemap-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.info-footer-sitemap-list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cha-dk);
  text-decoration: none;
  transition: color 0.2s;
}
.info-footer-sitemap-list a::before {
  content: "▶";
  color: var(--koyo-gold);
  font-size: 9px;
  margin-right: 2px;
}
.info-footer-sitemap-list a:hover { color: var(--mori-aka); }

/* SNSリンク */
.info-footer-sns-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.info-footer-sns-icons {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.info-footer-sns-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--mori-aka);
  font-size: 18px;
  border: 1px solid rgba(200, 54, 46, 0.2);
  transition: all 0.2s;
}
.info-footer-sns-icons a:hover {
  background: var(--mori-aka);
  color: #fff;
  transform: translateY(-2px);
}
.info-footer-sns-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
}
.info-footer-sns-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--cha-dk);
  text-decoration: none;
  font-weight: 600;
}
.info-footer-sns-links a i { color: var(--koyo-gold); }
.info-footer-sns-links a:hover { color: var(--mori-aka); }

/* 最小ボトムバー */
.site-footer-bottom {
  background: var(--cha-dk);
  color: rgba(244, 217, 168, 0.7);
  padding: 18px 0;
}
.site-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer-bottom p {
  font-size: 12px;
  margin: 0;
  letter-spacing: 0.06em;
}
.site-footer-bottom-legal {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer-bottom-legal a {
  font-size: 12px;
  color: rgba(244, 217, 168, 0.7);
  transition: color 0.2s;
}
.site-footer-bottom-legal a:hover { color: var(--koyo-gold-lt); }

/* レスポンシブ */
@media (max-width: 900px) {
  .info-footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .info-footer-map-iframe { height: 360px; }
}
@media (max-width: 600px) {
  .info-footer { padding: 52px 0 40px; }
  .info-footer-brand { margin-bottom: 36px; }
  .info-footer-brand-logo { width: 180px; }
  /* ロゴだけセンタリング（住所・営業時間は左寄せ維持） */
  .info-footer-logo { justify-content: center; text-align: center; }
  .info-footer-grid { gap: 24px; margin-bottom: 36px; }
  .info-footer-map-iframe { height: 280px; }
  .info-footer-hours { padding: 22px 14px; margin-bottom: 36px; }
  .info-footer-hours-table { font-size: 12.5px; }
  .info-footer-hours-table th,
  .info-footer-hours-table td { padding: 10px 3px; }
  .info-footer-hours-table tbody th { font-size: 11.5px; padding-left: 4px; }
  .info-footer-hours-on { font-size: 15px; }
  .info-footer-hours-off { font-size: 14px; }
  .info-footer-sitemap-list { gap: 8px 16px; }
  .info-footer-sitemap-list a { font-size: 12.5px; }
  .info-footer-sns-links { gap: 14px; font-size: 12.5px; }
  .site-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* =========================================
   お知らせ / コラム（News / Column）
   リベ大どうぶつ病院スタイルを紅葉カラーに置換
   ========================================= */
.news {
  padding: 96px 0 80px;
  background: var(--awa-beige);
}
.news-heading {
  margin-bottom: 32px;
}
.news-title-en {
  font-family: var(--ff-round);
  font-size: 56px;
  font-weight: 700;
  color: var(--cha-dk);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0;
}
.news-title-jp {
  font-size: 16px;
  color: var(--sumi-soft);
  margin-top: 8px;
}
.news-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(92, 61, 40, 0.18);
  margin-bottom: 0;
}
.news-tab {
  position: relative;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 14px 40px;
  font-family: var(--ff-round);
  font-size: 16px;
  font-weight: 500;
  color: var(--sumi-soft);
  cursor: pointer;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  transition: color 0.2s;
  bottom: -1px;
}
.news-tab:hover {
  color: var(--cha-dk);
}
.news-tab.is-active {
  color: var(--cha-dk);
  font-weight: 700;
  background: var(--awa-beige);
  border-color: rgba(92, 61, 40, 0.18);
}
.news-panel {
  padding-top: 8px;
}
.news-panel[hidden] { display: none; }
.news-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
}
.news-item {
  border-bottom: 1px solid rgba(92, 61, 40, 0.12);
}
.news-item-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 4px;
  text-decoration: none;
  color: var(--sumi);
  transition: color 0.2s;
}
.news-item-link:hover {
  color: var(--mori-aka);
}
.news-item-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.news-date {
  font-family: var(--ff-num);
  font-size: 14px;
  color: var(--sumi-soft);
  min-width: 84px;
  flex-shrink: 0;
}
.news-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 999px;
  min-width: 72px;
  text-align: center;
  flex-shrink: 0;
}
.news-badge-news {
  background: var(--koyo-gold-bg);
  color: var(--koyo-gold);
}
.news-badge-column {
  background: rgba(200, 54, 46, 0.1);
  color: var(--mori-aka-dk);
}
.news-item-title {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

/* PC: 3カラムカード化 */
@media (min-width: 641px) {
  .news-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .news-item {
    background: #fff;
    border: 1px solid rgba(92, 61, 40, 0.06);
    border-bottom: 1px solid rgba(92, 61, 40, 0.06);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(92, 61, 40, 0.04);
    transition: transform .2s, box-shadow .2s, border-color .2s;
  }
  .news-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(92, 61, 40, 0.08);
    border-color: rgba(184, 149, 63, 0.25);
  }
  .news-item-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 22px 26px;
    height: 100%;
    box-sizing: border-box;
  }
  .news-item-meta { gap: 12px; }
  .news-date { min-width: 0; }
  .news-item-title {
    font-weight: 500;
    color: var(--cha-dk);
  }
}
.news-more {
  display: flex;
  justify-content: flex-end;
}
.btn-news-more {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mori-aka);
  color: #fff;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  padding: 16px 40px;
  border-radius: 999px;
  min-width: 0;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.btn-news-more::before {
  content: "▶";
  font-size: 10px;
}
.btn-news-more:hover {
  background: var(--mori-aka-dk);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .news { padding: 64px 0 56px; }
  .news-title-en { font-size: 36px; }
  .news-tab { padding: 12px 24px; font-size: 14px; }
  .news-item-link {
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 16px 4px;
  }
  .news-date { min-width: auto; font-size: 13px; }
  .news-item-title {
    flex: 0 0 100%;
    font-size: 14px;
  }
}

/* =========================================
   はじめての方へ（First Visit）
   ========================================= */
.first-visit {
  padding: 112px 0;
  background: var(--awa-beige);
}
.fv-subheading {
  font-family: var(--ff-round);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 900;
  color: var(--sumi);
  text-align: center;
  margin-top: 48px;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}
.fv-lead {
  text-align: center;
  color: var(--sumi-soft);
  font-size: 15px;
  line-height: 1.9;
  margin-bottom: 40px;
}

/* A. 安心ポイント */
.fv-safety { margin-bottom: 72px; }
.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.safety-card {
  background: var(--nuku-shiro);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  transition: transform .3s ease, box-shadow .3s ease;
}
.safety-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(92, 61, 40, 0.08);
}
.safety-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--koyo-gold);
  background: var(--koyo-gold-bg);
  border-radius: 50%;
}
.safety-icon i { font-size: 28px; }
.safety-title {
  font-family: var(--ff-round);
  font-size: 17px;
  font-weight: 900;
  color: var(--sumi);
  margin: 0;
  padding-bottom: 12px;
  position: relative;
}
.safety-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 1px;
  background: var(--cha-lt);
}
.safety-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--sumi-soft);
  margin: 12px 0 0;
}

/* モバイル */
@media (max-width: 900px) {
  .safety-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .first-visit { padding: 72px 0; }
  .safety-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   サブページ共通
   ========================================= */
.subpage-main {
  padding: 80px 0 96px;
  background: var(--nuku-shiro);
}
.subpage-content {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  padding: 48px 40px;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.05);
}
.subpage-intro {
  font-size: 15px;
  line-height: 2;
  color: var(--sumi);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px dashed var(--awa-beige);
}
.subpage-section {
  margin-bottom: 32px;
}
.subpage-section:last-child {
  margin-bottom: 0;
}
.subpage-section h2 {
  font-family: var(--ff-round);
  font-size: 18px;
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 12px;
  padding-left: 14px;
  border-left: 3px solid var(--mori-aka);
}
.subpage-section p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sumi);
  margin-bottom: 12px;
}
.subpage-section p:last-child { margin-bottom: 0; }
.subpage-section ul {
  margin: 0;
  padding-left: 20px;
}
.subpage-section ul li {
  font-size: 14px;
  line-height: 1.9;
  color: var(--sumi);
  list-style: disc;
  margin-bottom: 4px;
}

.subpage-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.subpage-dl > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--awa-beige);
}
.subpage-dl > div:last-child { border-bottom: none; }
.subpage-dl dt {
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 14px;
  color: var(--koyo-gold);
  letter-spacing: 0.05em;
}
.subpage-dl dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--sumi);
}
.subpage-date {
  margin: 40px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--awa-beige);
  font-size: 12px;
  color: var(--sumi-soft);
  text-align: right;
  line-height: 1.7;
}
.subpage-back {
  max-width: 820px;
  margin: 48px auto 0;
  text-align: center;
}

@media (max-width: 640px) {
  .subpage-main { padding: 48px 0 64px; }
  .subpage-content { padding: 32px 20px; }
  .subpage-section h2 { font-size: 16px; }
  .subpage-dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* =========================================
   フローティングCTA（スマホ下部）
   ========================================= */
.floating-cta { display: none; }

@media (max-width: 900px) {
  .floating-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    z-index: 70;
    box-shadow: 0 -4px 16px rgba(45, 42, 38, 0.12);
    border-top: 1px solid rgba(45, 42, 38, 0.06);
  }

  .floating-cta-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: calc(16px + env(safe-area-inset-bottom) / 2) 8px calc(16px + env(safe-area-inset-bottom) / 2);
    color: #fff;
    font-family: var(--ff-round);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: background .2s;
  }
  .floating-cta-btn i { font-size: 16px; line-height: 1; }
  .floating-cta-net  { background: var(--mori-aka); }
  .floating-cta-net:hover { background: var(--mori-aka-dk); }
  .floating-cta-line { background: #06C755; }
  .floating-cta-line:hover { background: #05a347; }

  /* フローティングCTA常時表示のため、スクロールトップを常にCTAの上にずらす */
  .floating-cta ~ .scroll-top.is-visible {
    bottom: 78px;
  }
}

/* =========================================
   🍁 共通：コンパクト予約CTAブロック (.page-reserve)
   トップ中間CTA・コラム記事末尾・症状ページ末尾などで再利用
   ========================================= */
.page-reserve {
  background: var(--cream);
  padding: 64px 0;
  text-align: center;
}
.page-reserve-eyebrow {
  font-family: var(--ff-num);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #7A5F25;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.page-reserve-title {
  font-family: var(--ff-round);
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--cha-dk);
  margin: 0 0 16px;
  line-height: 1.5;
}
.page-reserve-title em {
  font-style: normal;
  color: var(--mori-aka);
}
.page-reserve-lead {
  color: var(--sumi-soft);
  margin: 0 0 28px;
  font-size: 15px;
}
.page-reserve-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.page-reserve-cta .btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--ff-round);
  font-weight: 700;
  transition: background .2s, transform .2s;
  min-width: 200px;
}
.page-reserve-cta .btn-primary { background: var(--mori-aka); color: #fff; }
.page-reserve-cta .btn-primary:hover { background: var(--mori-aka-dk); transform: translateY(-1px); }
.page-reserve-cta .btn-line { background: #06C755; color: #fff; }
.page-reserve-cta .btn-line:hover { background: #05a347; transform: translateY(-1px); }
.page-reserve-cta .btn-label { font-size: 16px; }
.page-reserve-cta .btn-sub { font-size: 11px; margin-top: 2px; letter-spacing: 0.05em; }
@media (max-width: 600px) {
  .page-reserve-cta { gap: 10px; flex-wrap: nowrap; padding: 0 16px; }
  .page-reserve-cta .btn { min-width: 0; flex: 1; padding: 12px 8px; }
  .page-reserve-cta .btn-label { font-size: 14px; }
  .page-reserve-cta .btn-sub { font-size: 10px; }
}

/* ---- トップページ中間CTA: 症状ページと同仕様（写真背景＋ダークオーバーレイ） ---- */
.page-reserve-hero {
  position: relative;
  background-image: url('../assets/room-lounge.webp');
  background-size: cover;
  background-position: center 40%;
  color: #fff;
}
.page-reserve-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(40, 22, 8, 0.72);
  z-index: 0;
}
.page-reserve-hero .container {
  position: relative;
  z-index: 1;
}
.page-reserve-hero .page-reserve-eyebrow {
  color: var(--koyo-gold-lt);
}
.page-reserve-hero .page-reserve-title {
  color: var(--koyo-gold-lt);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.page-reserve-hero .page-reserve-title em {
  color: var(--koyo-gold-lt);
}
.page-reserve-hero .page-reserve-lead {
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================
   🍁 コラム / お知らせ ページ専用スタイル
   （/column/, /news/, /column/{date-slug}/ で利用）
   ========================================= */

/* ---- 一覧ページ：記事カードリスト ---- */
.column-list-section {
  padding: 64px 0 80px;
  background: var(--nuku-shiro);
}
.column-list-heading {
  text-align: center;
  margin: 0 0 40px;
}
.column-list-heading-eyebrow {
  font-family: var(--ff-num);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--koyo-gold);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.column-list-heading h2 {
  font-family: var(--ff-round);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--cha-dk);
  margin: 0;
  letter-spacing: 0.04em;
}
.column-list-heading h2 .sp-only { display: none; }
@media (max-width: 720px) {
  .column-list-heading h2 .sp-only { display: inline; }
}
.column-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  border-top: 1px solid rgba(92, 61, 40, 0.12);
}
.column-list-item {
  border-bottom: 1px solid rgba(92, 61, 40, 0.12);
}
.column-list-item a {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 8px;
  text-decoration: none;
  color: var(--sumi);
  transition: background .2s, color .2s;
}
.column-list-item a:hover {
  background: rgba(184, 149, 63, 0.06);
}
.column-list-item a:hover .column-list-title {
  color: var(--mori-aka);
}
.column-list-date {
  flex: 0 0 96px;
  font-family: var(--ff-num);
  font-size: 14px;
  color: var(--kasumi-gray);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.column-list-badge {
  flex: 0 0 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 0;
  font-family: var(--ff-round);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 999px;
  white-space: nowrap;
}
.column-list-badge-column {
  background: var(--koyo-gold-bg);
  color: var(--koyo-gold);
  border: 1px solid var(--koyo-gold-lt);
}
.column-list-badge-news {
  background: #FCE5E3;
  color: var(--mori-aka-dk);
  border: 1px solid var(--mori-aka-lt);
}
.column-list-title {
  flex: 1;
  min-width: 0;
  font-family: var(--ff-round);
  font-size: 16px;
  font-weight: 500;
  color: var(--sumi);
  line-height: 1.55;
  transition: color .2s;
}
.column-list-arrow {
  flex: 0 0 auto;
  color: var(--koyo-gold);
  font-size: 14px;
  opacity: 0.6;
  transition: opacity .2s, transform .2s;
}
.column-list-item a:hover .column-list-arrow {
  opacity: 1;
  transform: translateX(2px);
}
@media (max-width: 720px) {
  .column-list-section { padding: 40px 0 56px; }
  .column-list { padding-inline: 16px; }
  .column-list-item a {
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 16px 4px;
  }
  .column-list-arrow { display: none; }
  .column-list-title {
    flex-basis: 100%;
    font-size: 15px;
  }
  .column-list-date { flex: 0 0 88px; font-size: 13px; }
  .column-list-badge { flex: 0 0 56px; font-size: 10px; }
}

/* 一覧ページ末尾の「現在表示している記事は◯本」テキスト */
.column-list-footnote {
  max-width: 880px;
  margin: 32px auto 0;
  padding: 0 24px;
  text-align: center;
  color: var(--kasumi-gray);
  font-size: 13px;
}

/* ---- 記事ページ：記事ヘッダー ---- */
.article {
  background: var(--nuku-shiro);
  padding: 56px 0 24px;
}
.article-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-header {
  text-align: center;
  margin-bottom: 40px;
}
.article-meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.article-meta .column-list-badge {
  font-size: 12px;
  padding: 4px 12px;
}
.article-meta-date {
  font-family: var(--ff-num);
  font-size: 14px;
  color: var(--kasumi-gray);
  letter-spacing: 0.05em;
}
.article-title {
  font-family: var(--ff-round);
  font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 700;
  color: var(--cha-dk);
  line-height: 1.5;
  letter-spacing: 0.02em;
  margin: 0;
}

/* ---- 記事ページ：イントロ（院長挨拶＋お悩み＋リード） ---- */
.article-intro {
  background: var(--cream);
  border-radius: var(--radius-md);
  padding: 28px 28px 24px;
  margin-bottom: 36px;
  border: 1px solid rgba(184, 149, 63, 0.18);
}
.article-intro-greeting {
  font-family: var(--ff-round);
  font-size: 15px;
  color: var(--cha-dk);
  font-weight: 500;
  margin: 0 0 18px;
}
.article-intro-concerns {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.article-intro-concerns li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--sumi);
  line-height: 1.6;
}
.article-intro-concerns li::before {
  content: "□";
  color: var(--mori-aka);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.article-intro-lead {
  font-size: 15px;
  color: var(--sumi);
  line-height: 1.85;
  margin: 0;
}
.article-intro-lead .marker {
  background: linear-gradient(transparent 60%, rgba(184, 149, 63, 0.32) 60%);
  font-weight: 700;
  padding: 0 2px;
}
@media (max-width: 720px) {
  .article-intro { padding: 22px 18px 20px; }
  .article-intro-greeting, .article-intro-concerns li, .article-intro-lead { font-size: 14px; }
}

/* ---- 記事ページ：目次 ---- */
.article-toc {
  background: #F4EFE5;
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 40px;
}
.article-toc-title {
  font-family: var(--ff-round);
  font-size: 14px;
  font-weight: 700;
  color: var(--cha-dk);
  letter-spacing: 0.08em;
  margin: 0 0 12px;
}
.article-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.article-toc-list li {
  counter-increment: toc;
  margin: 6px 0;
}
.article-toc-list li a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--sumi-soft);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.55;
  transition: color .15s;
}
.article-toc-list li a:hover { color: var(--mori-aka); }
.article-toc-list li a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--ff-num);
  font-size: 12px;
  color: var(--koyo-gold);
  font-weight: 700;
}
@media (max-width: 720px) {
  .article-toc { padding: 18px 18px; }
  .article-toc-list li a { font-size: 13px; }
}

/* ---- 記事ページ：本文 ---- */
.article-body {
  font-family: var(--ff-gothic);
  font-size: 16px;
  line-height: 1.95;
  color: var(--sumi);
}
.article-body h2 {
  font-family: var(--ff-round);
  font-size: 22px;
  font-weight: 700;
  color: var(--cha-dk);
  margin: 56px 0 20px;
  padding: 12px 0 12px 16px;
  border-left: 5px solid var(--koyo-gold);
  background: linear-gradient(to right, rgba(184, 149, 63, 0.06), transparent);
  scroll-margin-top: 80px;
}
.article-body h3 {
  font-family: var(--ff-round);
  font-size: 18px;
  font-weight: 700;
  color: var(--mori-aka-dk);
  margin: 36px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.article-body h3::before {
  content: "▶";
  color: var(--koyo-gold);
  font-size: 12px;
}
.article-body p {
  margin: 0 0 18px;
}
.article-body strong {
  background: linear-gradient(transparent 62%, rgba(245, 220, 130, 0.6) 62%);
  font-weight: 700;
  padding: 0 2px;
  color: var(--sumi);
}
.article-body ul, .article-body ol {
  margin: 0 0 22px;
  padding-left: 1.4em;
}
.article-body li {
  margin: 4px 0;
}
.article-body hr {
  border: none;
  border-top: 1px dashed rgba(92, 61, 40, 0.2);
  margin: 36px 0;
}
.article-body .article-callout {
  background: var(--cream);
  border-left: 4px solid var(--mori-aka);
  padding: 16px 20px;
  margin: 24px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 15px;
  line-height: 1.8;
}
@media (max-width: 720px) {
  .article-body { font-size: 15px; line-height: 1.85; }
  .article-body h2 { font-size: 19px; margin: 40px 0 16px; padding: 10px 0 10px 12px; }
  .article-body h3 { font-size: 16px; margin: 28px 0 12px; }
}

/* ---- 記事ページ：関連記事 ---- */
.article-related {
  max-width: 760px;
  margin: 64px auto 0;
  padding: 0 24px;
}
.article-related-title {
  font-family: var(--ff-round);
  font-size: 16px;
  font-weight: 700;
  color: var(--cha-dk);
  letter-spacing: 0.06em;
  margin: 0 0 16px;
  text-align: center;
}
.article-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.article-related-list a {
  display: block;
  background: #fff;
  border: 1px solid rgba(92, 61, 40, 0.12);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--sumi);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.article-related-list a:hover {
  border-color: var(--koyo-gold-lt);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(92, 61, 40, 0.06);
}
.article-related-date {
  font-family: var(--ff-num);
  font-size: 12px;
  color: var(--kasumi-gray);
  display: block;
  margin-bottom: 6px;
}
.article-related-headline {
  font-family: var(--ff-round);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}
@media (max-width: 720px) {
  .article-related-list { grid-template-columns: 1fr; }
}
.article-related-empty {
  text-align: center;
  color: var(--kasumi-gray);
  font-size: 14px;
  padding: 18px 0;
}

/* ---- 一覧へ戻るボタン ---- */
.article-back-wrap {
  text-align: center;
  margin: 48px auto 0;
  padding: 0 24px;
}
.article-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 38px;
  background: var(--cha-dk);
  color: #fff;
  font-family: var(--ff-round);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.06em;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.article-back-btn:hover {
  background: #4A2F1F;
  transform: translateY(-1px);
}
.article-back-btn::before {
  content: "▶";
  font-size: 12px;
  transform: rotate(180deg);
}

/* =========================================
   フォトギャラリー（リベ大スタイル・8枚レイアウト・フルワイド）
   ========================================= */
.photo-gallery {
  background: var(--nuku-shiro);
  padding: 56px 0;          /* 左右パディング 0 で画面端まで延ばす */
}
.photo-gallery-grid {
  /* max-width 撤廃。左右パディングだけ少し残して、両端は画面端ぎりぎりまで */
  margin: 0;
  padding: 0 12px;          /* PC: 12px の細いマージンで「見切れ感」演出 */
  display: grid;
  gap: 12px;
}
.photo-gallery-item {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 14px rgba(45, 42, 38, 0.08);
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease;
}
.photo-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45, 42, 38, 0.16);
}
.photo-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* PC: 2段4列の整然グリッド（gp-1〜gp-4 が1段目、gp-5〜gp-8 が2段目） */
@media (min-width: 901px) {
  .photo-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
  }
  .photo-gallery-item img {
    aspect-ratio: 4 / 3;
  }
}

/* モバイル: 不規則3段組（リベ大スクショ準拠）
   1段目: 大2枚
   2段目: 小3枚
   3段目: 大3枚
*/
@media (max-width: 900px) {
  .photo-gallery {
    padding: 36px 0;
  }
  .photo-gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    padding: 0 6px;          /* モバイル: 6px の極細マージンで見切れ感を強調 */
  }
  /* 1段目（大2枚） */
  .gp-1 { grid-column: span 3; }
  .gp-2 { grid-column: span 3; }
  /* 2段目（小3枚） */
  .gp-3 { grid-column: span 2; }
  .gp-4 { grid-column: span 2; }
  .gp-5 { grid-column: span 2; }
  /* 3段目（大3枚） */
  .gp-6 { grid-column: span 2; }
  .gp-7 { grid-column: span 2; }
  .gp-8 { grid-column: span 2; }
  /* 全画像 4:3 で揃える */
  .photo-gallery-item img {
    aspect-ratio: 4 / 3;
  }
}

/* AI姿勢分析の注記（共通スタイル・posture-analysisから流用）
   index.htmlのこだわり①向けに左詰めに調整（PC・モバイル共通） */
.ai-note {
  margin-top: 28px;
  padding: 14px 20px;
  background: rgba(92, 61, 40, 0.05);
  border: 1px solid var(--awa-beige);
  border-radius: var(--radius-md);
  font-size: 12px;
  line-height: 1.8;
  color: var(--kasumi-gray);
  max-width: 860px;
  margin-inline: auto;
  text-align: left;
}