/* ============================================================
   Spiritual Harmony — Refreshed LP  v2
   デザイントークン（data-palette / data-typeset）駆動
   色・フォントのハードコード禁止。CSS変数経由で4パレット全対応。
   ============================================================ */

/* ============================================================
   1. デザイントークン（CSS カスタムプロパティ）
   ============================================================ */
:root {
  /* ---------- palette: bone（デフォルト） ---------- */
  --bg:        #F6F2EA;
  --bg-2:      #EFEAE0;
  --bg-3:      #E7E0D2;
  --ink:       #1B1A16;
  --ink-2:     #3A372F;
  --ink-3:     #6B6659;
  --rule:      #D9D2C2;
  --accent:    #3D4868;
  --accent-2:  #2C3550;
  /* WCAG AA 用の濃いアクセント。白/淡色テキストを乗せる小要素・淡背景上のアクセント文字に使う。
     パレット連動: 各 --accent を黒に寄せて自動導出（lumina は下で実測値に固定）。 */
  --accent-strong: color-mix(in oklab, var(--accent) 70%, #000);
  --paper:     #FFFFFF;

  /* スマホ・クイックメニュー配色（茶色地＋白文字・設定可能トークン）*/
  --hqm-bg:    #4A2E1C;
  --hqm-ink:   #FFFFFF;

  /* ---------- gradient helpers（accent系・2色相グラデ）---------- */
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-accent-h: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);

  /* ---------- type tokens（editorial デフォルト）---------- */
  --font-jp-head: "Shippori Mincho", "Noto Serif JP", serif;
  --font-en-head: "Cormorant Garamond", "EB Garamond", serif;
  --font-body:    "Noto Sans JP", "Inter", system-ui, sans-serif;

  /* ---------- spacing / shape ---------- */
  --radius:   2px;
  --radius-lg: calc(var(--radius) + 4px);  /* 既定 6px。--radius に連動（管理画面のradius調整で大角丸も追従）*/
  --maxw:     1280px;
  --gut:      clamp(20px, 4vw, 56px);

  /* ---------- リスト/行の余白（調整可能ノブ・全リストで共有） ----------
     項目間の間隔はこのトークンで一括調整可能。値を変えれば全リストに反映。 */
  --row-pad:       9px;   /* NEWS/お知らせ等の行上下余白（旧18px→半分） */
  --list-row-pad: 8px;   /* コラム一覧など サムネ付きリスト行の上下余白（旧24px→さらに圧縮） */
  --section-pad: clamp(32px, 4vw, 52px);  /* セクション上下余白（hr.rule両脇の二重計上を圧縮・調整可能） */
  --head-mb:    clamp(28px, 3.2vw, 44px); /* section-head 下マージン（見出し〜本文・管理画面で調整可） */
  --block-gap:  24px;     /* カード/グリッド間の汎用ギャップ（管理画面で調整可） */

  /* ---------- font controls（管理画面で調整可・既定で H2 +3pt 太字）---------- */
  --font-scale: 1;        /* 本文の拡大率（0.9〜1.3） */
  --h2-extra:   4px;      /* セクション見出し H2 の追加サイズ（既定 +3pt≒4px） */
  --h2-weight:  700;      /* セクション見出し H2 の太さ（既定 太字） */
  --h2-rule-h:  3px;      /* セクション見出し下線（::after）の太さ（管理画面で調整可） */
  --hl-pink:    #F7BCD6;   /* 本文キーワードのピンク蛍光ハイライト色 */

  /* ---------- shape controls（管理画面で調整可・未設定は既定にフォールバック）----------
     本文の行間・本文リンクの色（enum→このトークンに写像）。
     リンク色は body コンテキスト要素に color:inherit が掛かるため
     本文リンク（.col-body a 等）専用トークンとして扱い、ヘッダ/ボタンには波及させない。 */
  --body-leading: 2.0;            /* コラム本文の行間（1.7〜2.3） */
  --body-link:   var(--accent);   /* 本文リンク色（enum: accent / accent-2 / ink へ写像）*/

  /* ---------- topbar height（scroll-padding用）---------- */
  --topbar-h: 72px;

  /* ---------- elevation ---------- */
  --shadow-sm:  0 4px 16px -8px rgba(0,0,0,.14);
  --shadow-md:  0 12px 32px -16px rgba(0,0,0,.22);
  --shadow-lg:  0 24px 56px -24px rgba(0,0,0,.28);

  /* ---------- transition ---------- */
  --ease-out: cubic-bezier(.22,.68,0,1.2);
  --ease-std: cubic-bezier(.4,0,.2,1);
}

/* ---------- palette variants ---------- */
[data-palette="bone"] {
  --bg:#F6F2EA; --bg-2:#EFEAE0; --bg-3:#E7E0D2;
  --ink:#1B1A16; --ink-2:#3A372F; --ink-3:#6B6659;
  --rule:#D9D2C2; --accent:#3D4868; --accent-2:#2C3550;
}
[data-palette="dawn"] {
  --bg:#FBF5EE; --bg-2:#F5ECE0; --bg-3:#EBDDCB;
  --ink:#1F1A19; --ink-2:#46372F; --ink-3:#7A6555;
  --rule:#E3D2BD; --accent:#8B5A4A; --accent-2:#6B3F31;
}
[data-palette="sanctuary"] {
  --bg:#F4F4F1; --bg-2:#ECECE6; --bg-3:#DFDFD7;
  --ink:#16181C; --ink-2:#2E3138; --ink-3:#5C616A;
  --rule:#CFD0CB; --accent:#2A3950; --accent-2:#1A2436;
}
[data-palette="forest"] {
  --bg:#F1EFE8; --bg-2:#E5E3D8; --bg-3:#D6D3C2;
  --ink:#181A14; --ink-2:#2F3326; --ink-3:#5E624F;
  --rule:#CCC9B6; --accent:#4A5A3C; --accent-2:#34422A;
}

/* ---------- 新パレット3種（カラフル系・上品トーン維持）---------- */
/* aurora: 神秘的・紫×ティール。--accent と --accent-2 が異色相なので
   --grad-accent が自然に2色相グラデになる。 */
[data-palette="aurora"] {
  --bg:#F5F2FB; --bg-2:#ECE6F7; --bg-3:#DFD4F0;
  --ink:#1E1832; --ink-2:#3C3360; --ink-3:#5F558A;
  --rule:#D9CCEE; --accent:#7A4FD0; --accent-2:#2FA9B5; --paper:#FCFAFF;
}
/* lumina: 温かな光・コーラル×ゴールド。日なたの癒しトーン。 */
[data-palette="lumina"] {
  --bg:#FFF7EF; --bg-2:#FDEADB; --bg-3:#FAD9C3;
  --ink:#2C1B13; --ink-2:#50352A; --ink-3:#7A5645;
  --rule:#F2D3BD; --accent:#E86A3C; --accent-2:#E0A52A; --paper:#FFFCF8;
  --accent-strong:#B0481A; /* 白文字/淡背景上で WCAG AA を満たす濃いテラコッタ（accent の濃色版） */
}
/* celeste: 爽やか・スカイ×ローズ。軽やかで明るい癒しトーン。 */
[data-palette="celeste"] {
  --bg:#F0F6FA; --bg-2:#E3EFF5; --bg-3:#D2E5EE;
  --ink:#14202A; --ink-2:#2C3F4E; --ink-3:#4E626F;
  --rule:#C8DCE6; --accent:#2E8FB0; --accent-2:#E8788C; --paper:#FBFDFE;
}
/* brown: 温もりのアースカラー・焙煎コーヒー×テラコッタ。本文コントラスト AA達成。 */
[data-palette="brown"] {
  --bg:#F7F1E8; --bg-2:#EFE5D6; --bg-3:#E4D5BF;
  --ink:#2A1F16; --ink-2:#4A3829; --ink-3:#7A6450;
  --rule:#DCC9AE; --accent:#8A5A3C; --accent-2:#5E3A24; --paper:#FFFCF6;
}
/* beige: 落ち着いた暖ベージュ・サンド×キャメル/ブロンズ。中立で上品、本文コントラスト AA達成。 */
[data-palette="beige"] {
  --bg:#F4EEE2; --bg-2:#ECE3D2; --bg-3:#DFD2BA;
  --ink:#211C14; --ink-2:#473C2C; --ink-3:#75674E;
  --rule:#DAC9AC; --accent:#8A6A3E; --accent-2:#5E4527; --paper:#FBF7EF;
}

/* ---------- shape トークンの既定 ----------
   enum（リンク色/下線/影/見出し下線ON-OFF/交互背景）の写像は head-tokens.njk が
   ビルド時に <style id="dynamic-tokens"> へ直接出力する（body タグ改修を避けるため）。
   ここでは「未設定時に効く既定」と、下の各要素が参照するトークン定義のみを持つ。 */

/* ---------- typesets ---------- */
[data-typeset="editorial"] {
  --font-jp-head:"Shippori Mincho","Noto Serif JP",serif;
  --font-en-head:"Cormorant Garamond","EB Garamond",serif;
  --font-body:"Noto Sans JP","Inter",system-ui,sans-serif;
}
[data-typeset="modern"] {
  --font-jp-head:"Zen Kaku Gothic New","Noto Sans JP",sans-serif;
  --font-en-head:"Fraunces","EB Garamond",serif;
  --font-body:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
}
[data-typeset="classical"] {
  --font-jp-head:"Noto Serif JP",serif;
  --font-en-head:"EB Garamond",serif;
  --font-body:"Noto Serif JP",serif;
}


/* ============================================================
   2. リセット / ベース
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: calc(16px * var(--font-scale));
  line-height: 1.75;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* 横スクロール禁止。clip は position:sticky を壊さない */
}
/* ドロワー開放中は背景スクロール禁止 */
body.nav-open {
  overflow: hidden;
}
/* height:auto = width/height 属性を「比率指定」として働かせCLSを防ぎつつ縮小時の歪みを回避。
   object-fit cover 等で高さを明示する要素は個別ルール（より高い詳細度）が優先され無傷。 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* フォーカスリング可視化（a11y） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius);
}


/* ============================================================
   3. アトミック テキストスタイル
   ============================================================ */
.eyebrow {
  font-family: var(--font-en-head);
  /* 専門家合議: italic解除 + weight500 で「装飾」から「読めるラベル」へ。
     letter-spacing も詰めて upright uppercase の霞みを解消。 */
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  /* グラデラインで accent→accent-2 の2色相を視覚化 */
  background: var(--grad-accent);
  display: inline-block;
  flex-shrink: 0;
  border-radius: 1px;
}
.eyebrow.no-rule::before { display: none; }

/* --- ラベル/見出しアイコン（インラインSVG・currentColor 追従） --- */
.ico {
  width: 1em; height: 1em;
  flex-shrink: 0;
  vertical-align: -0.14em;
}
/* eyebrow にアイコンが入る場合は罫線を消してアイコンに置換 */
.eyebrow.has-icon::before { display: none; }
.eyebrow .ico { width: 17px; height: 17px; }
/* サイドバー見出しのアイコン */
.sidebar-h .ico { width: 16px; height: 16px; color: var(--accent); vertical-align: -0.16em; margin-right: 7px; }
/* パンくずホームのアイコン */
.breadcrumb .ico { width: 13px; height: 13px; vertical-align: -0.12em; margin-right: 4px; }

.h-jp {
  font-family: var(--font-jp-head);
  /* 見出しの存在感強化: Shippori Mincho 500→600（細明朝の骨格を出す） */
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.h-en {
  font-family: var(--font-en-head);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  margin: 0;
}
.body-lead {
  font-size: calc(17px * var(--font-scale));
  line-height: 1.95;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.body-sm {
  font-size: calc(14px * var(--font-scale));
  color: var(--ink-3);
  line-height: 1.8;
}

/* ---------- accent-word: 本文内の強調語（ピンクのマーカーハイライト）---------- */
.accent-word {
  color: var(--ink);
  font-weight: 600;
  font-style: normal;
  position: relative;
  display: inline;
  /* 蛍光ペン風: テキスト下 40% にピンクのマーカーを敷く */
  background-image: linear-gradient(transparent 58%, var(--hl-pink) 58%);
  background-repeat: no-repeat;
  padding: 0 .08em;
}
/* 下線ハイライトはマーカーに置き換えたため撤去 */
.accent-word::after { display: none; }


/* ============================================================
   4. レイアウト ユーティリティ
   ============================================================ */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}
section { position: relative; }
.section-pad {
  /* セクション上下余白は調整可能トークン。広すぎたため大幅圧縮（旧 72-140px → 約半分） */
  padding: var(--section-pad) 0;
}
.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* scroll-padding for in-page anchors */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 12px);
}


/* ============================================================
   5. ヘッダー / ナビゲーション
   ============================================================ */

/* ---------- 5-A. topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .3s var(--ease-std);
}
/* ガラス背景は ::before に分離する。
   .topbar 自体に backdrop-filter / transform を置くと position:fixed の子
   （モバイルドロワー .primary）の「包含ブロック」になり、ドロワーが topbar の
   72px 内に閉じ込められて全画面展開できなくなるため（CSS仕様）。 */
.topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  z-index: -1;
  pointer-events: none;
  transition: background .3s;
}
/* スクロール後の質感強化はJSで .scrolled クラスを付与することを想定 */
.topbar.scrolled::before {
  background: color-mix(in oklab, var(--bg) 96%, transparent);
}
.topbar.scrolled {
  box-shadow: 0 2px 20px -8px rgba(0,0,0,.18);
}

/* ---------- 5-B. topbar-inner ---------- */
.topbar-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---------- 5-C. ブランドロゴ ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity .2s;
}
/* サイトアイコン（ブランド名の前のロゴ・正方形ファビコン） */
.brand-logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; display: block; border-radius: 6px; }

/* ヘッダーのクイックアクション・アイコン（カウンセリング／予約・スマホのみ☰の前） */
.topbar-icons { display: none; align-items: center; gap: 6px; }
.topbar-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: none; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, border-color .2s, color .2s;
}
.topbar-icon:hover { background: var(--bg-2); color: var(--accent); border-color: var(--ink-3); }
.topbar-icon svg { width: 20px; height: 20px; }
.brand:hover { opacity: .75; }

.brand-mark {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.brand-jp {
  font-family: var(--font-jp-head);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--ink-3);
}

/* ---------- 5-D. ハンバーガーボタン（モバイル専用） ---------- */
.nav-toggle {
  display: none; /* デスクトップでは非表示 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, background .2s;
}
.nav-toggle:hover {
  background: var(--bg-2);
  border-color: var(--ink-3);
}
/* 3本線 */
.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .3s var(--ease-out), opacity .2s, width .3s;
  transform-origin: center;
}
/* × アニメーション（body.nav-open 時） */
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
  width: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ---------- 5-E. プライマリナビ（デスクトップ横並び） ---------- */
.primary {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  letter-spacing: 0.1em;
  flex: 1;
  justify-content: flex-end;
}

/* ---------- 5-F. nav-group（ドロップダウン親） ---------- */
.nav-group {
  position: relative;
}

/* ---------- 5-G. nav-top（全ナビリンク共通） ---------- */
.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  color: var(--ink-2);
  border-radius: var(--radius);
  position: relative;
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-top:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
/* ホバー下線（デスクトップのみ、モバイルでは非表示） */
.nav-top::after {
  content: "";
  position: absolute;
  inset: auto 10px -1px 10px;
  height: 1.5px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-std);
  border-radius: 1px;
}
.nav-top:hover::after { transform: scaleX(1); }

/* ---------- 5-G-2. ナビ枠スタイル（admin: site.theme.nav で切替・設定駆動） ----------
   plain（既定・ホバー下線）/ frame（各メニューをハイライン枠で囲う）/
   divider（項目間に縦の区切り線）/ underline（各項目下に常時タブ罫線）。
   body[data-nav="..."] で出し分け。色は既存トークン参照（ハードコード回避）。 */

/* frame: 各メニューを細い枠＋淡い面で囲い「押せる単位」を静止時から明確化 */
body[data-nav="frame"] .nav-top {
  border: 1px solid var(--rule);
  background: color-mix(in oklab, var(--paper) 55%, transparent);
}
body[data-nav="frame"] .nav-top:hover {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
/* 枠ありのときはホバー下線と二重装飾になるため抑止 */
body[data-nav="frame"] .nav-top::after { display: none; }

/* underline: 各項目の下にうっすら常時罫線（タブ風）。ホバーでアクセントに昇格 */
body[data-nav="underline"] .nav-top::after {
  inset: auto 10px 2px 10px;
  height: 1px;
  background: var(--rule);
  transform: scaleX(1);
  opacity: .85;
}
body[data-nav="underline"] .nav-top:hover::after {
  background: var(--grad-accent);
  height: 1.5px;
  opacity: 1;
}

/* divider: 箱で囲わず項目間に縦の細罫線だけ入れて分離を明確化（デスクトップ限定）。
   折り返す狭幅では縦線が宙に浮くため ≥881px のみ適用。 */
@media (min-width: 881px) {
  body[data-nav="divider"] .primary { gap: 0; }
  body[data-nav="divider"] .primary > * + * { border-left: 1px solid var(--rule); }
}

/* ---------- 5-H. ケアレット（▾） ---------- */
.nav-top.has-children .caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  margin-top: 1px;
  opacity: .65;
  transition: transform .25s var(--ease-std);
  flex-shrink: 0;
}
.nav-group:hover .caret,
.nav-group:focus-within .caret,
.nav-group.open .caret {
  transform: rotate(180deg);
  opacity: 1;
}

/* ---------- 5-I. ドロップダウンメニュー（デスクトップ） ---------- */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 200px;
  background: color-mix(in oklab, var(--bg) 97%, transparent);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease-std), transform .22s var(--ease-std), visibility .22s;
  z-index: 200;
}
/* 小さな三角形（装飾） */
.nav-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background: color-mix(in oklab, var(--bg) 97%, transparent);
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
/* 透明ホバーブリッジ：nav-top とドロップダウンの間の隙間(top:calc(100%+10px))で
   ホバーが切れて子項目をクリックできなくなる問題を防ぐ。ドロップダウンの一部なので
   表示中(pointer-events:auto)はこのブリッジ上もホバー扱いになり、メニューが閉じない。 */
.nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}
/* hover / focus-within でフェード＋上スライド表示 */
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* ドロップダウン内リンク */
.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  white-space: nowrap;
  transition: color .15s, background .15s, padding-left .15s;
}
.nav-dropdown a:hover {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, transparent);
  padding-left: 26px;
}

/* ---------- 5-J. 予約ボタン ---------- */
.book-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--grad-accent);
  color: var(--bg);
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow: 0 4px 14px -6px color-mix(in oklab, var(--accent) 55%, transparent);
  transition: box-shadow .25s, transform .25s var(--ease-out), filter .2s;
}
/* ヘッダーの「お問い合わせ」ボタン（予約ボタンの隣・アウトライン＝予約を主役に）。
   .book-btn を継承するのでモバイル非表示・pill形状は共通。予約ボタンとの間隔を詰める。 */
/* ヘッダー右上のCTAクラスタ（お問い合わせ＋ご予約を隣接グループ化）。
   nav が flex:1 で伸びるため、この一塊が右端へ寄る。 */
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.book-btn.book-btn--inquiry {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  box-shadow: none;
}
.book-btn.book-btn--inquiry:hover {
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  color: var(--accent);
  transform: translateY(-2px);
}
.book-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--accent) 60%, transparent);
  filter: brightness(1.08);
}
.book-btn:active { transform: translateY(0); }
.book-btn .arrow { transition: transform .2s var(--ease-out); }

/* ヘッダー和文ブランド名（カタカナ）は常時非表示。
   ナビ多数＋予約ボタンは単一行カラム(maxw 1280)に収まる上限ぎりぎりで、
   brand-jp を足すと約100px 溢れて右端 CTA が見切れるため出さない。
   ブランド表記は英字マーク＋トラスト帯＋ヒーロー本文で担保する。 */
.brand-jp { display: none; }

/* ブランド名ブロック（英字マーク＋カタカナ＋小さな説明行）。
   デスクトップはナビ行が詰まっているため説明行は出さず、スマホ(≤880)でのみ表示。 */
.brand-text { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.05; }
.brand-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.brand-sub { display: none; }
@media (max-width: 880px) {
  .brand { align-items: center; gap: 8px; min-width: 0; }
  .brand-row { gap: 5px; }
  .brand-row .brand-mark { line-height: 1; }
  /* スマホは横幅が足りないためカタカナは出さず、説明行（研究所・氏名・女性専用）のみ表示。
     これでブランド＝左／3ボタン＝右 を1行に収め、ヘッダーの段落ち（余分な高さ）を防ぐ。 */
  .brand-row .brand-jp { display: none; }
  /* 説明行は mark 直下に密着（細い区切り線のみ・はみ出しは省略記号） */
  .brand-text { overflow: hidden; }
  /* 説明行は全文（小林由起子を含む）を省略せず1行表示するため極小フォントに */
  .brand-sub {
    display: block;
    margin-top: 2px; padding-top: 2px;
    border-top: 1px solid color-mix(in oklab, var(--ink) 40%, transparent);
    font-family: var(--font-jp-head); font-weight: 400;
    font-size: 6.5px; letter-spacing: 0; line-height: 1.25;
    color: var(--ink-2); white-space: nowrap;
    overflow: visible; text-overflow: clip;
  }
  .brand-sub b { font-weight: 700; color: var(--ink); }
  /* 3ボタン（カウンセリング/予約/☰）を必ず1行右側に固定し、段落ちさせない */
  .topbar-inner { flex-wrap: nowrap; }
  .topbar-icons, .nav-toggle { flex-shrink: 0; }
}
.book-btn:hover .arrow { transform: translateX(4px); }


/* ============================================================
   5-K. 折り返しナビ（≤1280px）— ハンバーガー全廃・常時横並び
   ナビ多項目＋予約ボタンは単一行カラム(maxw 1280)に収まらないため、
   ビューポートがカラム上限を割る ≤1280px ではブランド／予約ボタンの下に
   2段目として折り返し、中央寄せで整然と並べる（右端 CTA の見切れ防止）。
   ※ 単一行が成立するのは概ね vw ≥ 1281px（ナビ実測 約1165px ＋ 左右余白）。
   ============================================================ */
@media (max-width: 1280px) {
  /* topbar の固定高を解除し、ナビ2段ぶんに合わせて伸縮させる */
  .topbar { height: auto; }
  .topbar-inner {
    flex-wrap: wrap;
    gap: 6px 16px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* プライマリナビを2段目に回し、全幅・中央寄せで折り返す */
  .primary {
    order: 3;
    flex: 0 0 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 2px;
  }

  /* nav-top: 横並びを保ったまま、タップ領域を確保 */
  .nav-top {
    font-size: 13px;
    padding: 9px 11px;
  }
}

/* ============================================================
   5-K-2. スマホのサブメニュー（≤880px）
   ホバーが無いタッチ端末向け。ドロップダウンをトップバー中央に
   固定幅パネルで開く（マウス機の 881–1280px は項目直下のまま）。
   ============================================================ */
@media (max-width: 880px) {
  /* ── スマホのサブメニュー（ホバー無し→タップで開く） ──
     アイテム基準だと端で見切れるため、トップバー中央に固定幅パネルで開く。
     .nav-group を static にして絶対配置の基準を sticky な .topbar に移す。 */
  .nav-group { position: static; }
  .nav-dropdown {
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    width: min(92vw, 340px);
    min-width: 0;
  }
  .nav-dropdown::before { display: none; } /* 中央三角はパネル中央とズレるため非表示 */
  /* JS が付与する .open でフェード表示（タップ開閉） */
  .nav-group.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}

/* ---------- 560px以下: トップバーを詰める ---------- */
@media (max-width: 560px) {
  .topbar-inner { gap: 6px 10px; }
  .brand-mark { font-size: 23px; font-weight: 700; }
}

/* ============================================================
   5-K-3. ハンバーガー・ドロワー（≤880px）
   スマホ/縦タブレットはヘッダーを1行（ブランド＋☰）にし、ナビは☰で
   ドロワー展開。予約ボタンは下部バー（ご予約）と重複のためヘッダーから除外。
   ※ 881–1280px は従来どおりインライン折返しナビ（不変）。
   ============================================================ */
@media (max-width: 880px) {
  /* ブランド＝左／3ボタン＝右 を必ず1行に固定（段落ち＝余分な高さを防ぐ）。
     ドロワー化で .primary は absolute なので nowrap でも干渉しない。
     幅が足りなければブランドを縮め、説明行を省略記号で詰める（mark は保持）。 */
  .topbar-inner { flex-wrap: nowrap; }
  .brand { flex-shrink: 1; min-width: 0; }
  .brand-text { min-width: 0; overflow: hidden; }
  .brand-mark { white-space: nowrap; }
  /* 右側クラスタ: [カウンセリング][予約][☰]。予約フルボタンは除外（下部バー・ナビ内と重複） */
  .topbar-icons { display: flex; order: 3; margin-left: auto; }
  .nav-toggle { display: flex; order: 4; margin-left: 6px; }
  .book-btn { display: none !important; }
  .topbar-cta { display: none !important; }
  /* ヒーローの CTA（空き状況/カウンセリング）はヘッダーのアイコンへ移動＝スマホでは非表示 */
  .hero-banner .hero-cta { display: none; }

  /* インラインナビ → ☰ で開く不透明ドロワー（トップバー直下にオーバーレイ） */
  .primary {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    justify-content: flex-start; gap: 0;
    margin: 0; padding: 4px var(--gut) 10px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: var(--shadow-lg);
    max-height: calc(100vh - var(--topbar-h) - 8px);
    overflow-y: auto;
    z-index: 90;
    display: none;
  }
  body.nav-open .primary { display: flex; }

  /* ドロワー項目: 全幅・大きめタップ領域・区切り線 */
  .nav-group { position: static; width: 100%; }
  .nav-top {
    width: 100%; justify-content: space-between;
    font-size: 15px; letter-spacing: 0; padding: 13px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .nav-top::after { display: none; } /* インライン用の下線アニメは無効化 */
  .nav-top.has-children .caret { display: inline-block; } /* 展開の手がかりとして表示 */

  /* サブメニューはドロワー内アコーディオン（中央固定パネルの絶対配置・transform・blur を打ち消す） */
  .nav-dropdown {
    position: static; top: auto; left: auto; right: auto; transform: none; width: 100%;
    min-width: 0; opacity: 1; visibility: visible; pointer-events: auto;
    box-shadow: none; border: 0; background: var(--bg-2);
    backdrop-filter: none; -webkit-backdrop-filter: none;
    padding: 0; margin: 0; border-radius: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .28s var(--ease-out);
  }
  .nav-dropdown::before { display: none; }
  /* .open 時に中央寄せ transform が復活するため、ここで明示的に打ち消す（同特異度・後勝ち） */
  .nav-group.open .nav-dropdown { max-height: 600px; transform: none; }
  .nav-dropdown a { display: block; padding: 11px 16px; font-size: 14px; border-bottom: 1px solid var(--rule); }
}

/* ---------- ヘッダー右クラスタを小型スマホでも1行に収める ---------- */
@media (max-width: 480px) {
  .topbar-icons { gap: 4px; }
  .topbar-icon { width: 38px; height: 38px; }
  .topbar-icon svg { width: 18px; height: 18px; }
  .nav-toggle { width: 38px; height: 38px; }
  /* 英字マーク "Spiritual Harmony" を1行に全文表示するため段階縮小。
     右クラスタ（3ボタン）と1行共存するとブランド幅が狭く、23px のままだと
     401px 付近で末尾 "ny" が overflow:hidden で見切れる（実測: 全文21px=157px /
     375px時の表示箱≈136px）。19px(143px) で 401–480px 帯を安全に収める。 */
  .brand-mark { font-size: 19px; }
}
@media (max-width: 400px) {
  .brand { gap: 7px; }
  /* 375px(iPhone)で表示箱≈136px。16px(全文120px)なら余裕を持って全文表示でき、
     360px 端末でも見切れない（旧 21px は約20px はみ出して "Spiritual Harmo" に欠けていた）。 */
  .brand-mark { font-size: 16px; font-weight: 700; }
  /* 説明行（日本スピリチュアル…女性専用）は英字マークより長く、狭幅では英字マーク右端で
     overflow:hidden 切れが起きる（実測: 6.5px=176px / 375px時の表示箱≈176px・等幅ギリギリ）。
     6.3px(170px)に微縮小し 361–375px 帯でも末尾「女性専用」まで全文表示する。 */
  .brand-sub { font-size: 6.3px; }
  .brand-logo { width: 26px; height: 26px; }
  .topbar-icons { gap: 3px; }
  .topbar-icon, .nav-toggle { width: 36px; height: 36px; }
  .topbar-icon svg { width: 17px; height: 17px; }
  .nav-toggle { margin-left: 4px; }
}
@media (max-width: 360px) {
  .brand { gap: 6px; }
  .brand-mark { font-size: 15px; }
  /* 360px は表示箱≈172px とさらに狭いため説明行を 6px(162px)へ。末尾まで切れずに収める。 */
  .brand-sub { font-size: 6px; }
  .brand-logo { width: 24px; height: 24px; }
  .topbar-icons { gap: 2px; }
  .topbar-icon, .nav-toggle { width: 34px; height: 34px; }
  .topbar-icon svg { width: 16px; height: 16px; }
}


/* ============================================================
   6. trust ribbon（最上部帯）
   ============================================================ */
.trust-ribbon {
  background: var(--ink);
  color: color-mix(in oklab, var(--bg) 85%, transparent);
  font-size: 12px;
  letter-spacing: 0.18em;
  padding: 9px 0;
  text-align: center;
}
.trust-ribbon .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}
/* 実績サマリーを最上部リボンへ統合（独立バンド廃止）。タグライン左 / 実績右。 */
.trust-ribbon .trust-ribbon-inner {
  justify-content: space-between;
  gap: 10px 24px;
}
.trust-ribbon .ribbon-tagline { text-align: left; }
.ribbon-stats {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ribbon-stat { white-space: nowrap; }
.ribbon-stat b {
  color: var(--bg);
  font-weight: 700;
  margin-right: 5px;
  letter-spacing: 0;
}
@media (max-width: 720px) {
  /* モバイル最上部は SEO 説明文（tagline）を「省略せず」全文表示（極小フォント・折返し可）。
     実績サマリー（stats）は下のヒーロー帯と重複するため畳む。 */
  .trust-ribbon { padding: 5px 0; }
  .trust-ribbon .wrap { padding-inline: 3px; }
  .trust-ribbon .trust-ribbon-inner { justify-content: center; }
  /* SEO説明文は「1行」で全文表示（折返し・末尾切れなし・極小フォントで横幅に収める） */
  .trust-ribbon .ribbon-tagline {
    display: block; width: 100%; text-align: center;
    font-size: clamp(5.5px, 1.75vw, 7px); letter-spacing: 0; line-height: 1.5;
    white-space: nowrap; overflow: visible;
    color: color-mix(in oklab, var(--bg) 92%, transparent);
  }
  .ribbon-stats { display: none; }
}
.trust-ribbon .dot {
  width: 4px; height: 4px; border-radius: 50%;
  /* カラフル強化: accent-2 の淡い彩りをドットに */
  background: color-mix(in oklab, var(--accent-2) 60%, transparent);
  display: inline-block;
  flex-shrink: 0;
}
.trust-ribbon strong {
  font-weight: 500;
  /* カラフル強化: 強調テキストを accent-2 に近い色で際立たせる */
  color: color-mix(in oklab, var(--accent-2) 80%, white);
  font-family: var(--font-en-head);
  font-style: italic;
  letter-spacing: 0.1em;
}


/* ============================================================
   7. legacy salon banners + news
   ============================================================ */
.legacy {
  background: var(--bg-2);
  padding: var(--section-pad) 0;  /* 旧 clamp(64-96px) は突出。共通の余白トークンに統一（管理画面で調整可） */
  position: relative;
}
.legacy-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(18px, 2.4vw, 30px);
  flex-wrap: wrap;
}
.legacy-head h2 {
  font-family: var(--font-jp-head);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 34px);
  letter-spacing: 0.06em;
  margin: 8px 0 0;
  line-height: 1.45;
}
.legacy-head .eyebrow { margin-bottom: 0; }
.legacy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 720px) {
  /* サロンバナーは左右2枚を1行に（第一画面に収める）。見出し・余白も圧縮 */
  .legacy-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .legacy { padding: 0 0 clamp(12px, 3.5vw, 18px); }
  .legacy-head { display: none; }
  /* バナー画像（焼き込みでサロン名あり）を見せるため、タグ/CTA の被せは非表示にする */
  .legacy-banner .banner-tag,
  .legacy-banner .banner-arrow { display: none; }
}

/* 最新お知らせ1行ストリップ（サロン直下・第一画面） */
.legacy-news {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding: 8px 12px;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  text-decoration: none; color: var(--ink-2);
  font-size: 12px; line-height: 1.3; overflow: hidden;
}
.legacy-news-badge {
  flex-shrink: 0; background: var(--accent-strong); color: var(--bg);
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.04em;
}
.legacy-news-date { flex-shrink: 0; color: var(--ink-3); font-family: var(--font-en-head); font-size: 11px; }
.legacy-news-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.legacy-banner {
  position: relative;
  display: block;
  aspect-ratio: 473 / 113;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .3s;
}
.legacy-banner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}
.legacy-banner img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .6s var(--ease-std);
}
.legacy-banner:hover img { transform: scale(1.018); }
.legacy-banner .banner-tag {
  position: absolute;
  left: 14px; top: 12px;
  z-index: 2;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  color: var(--accent);
  padding: 4px 10px;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.16em;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.legacy-banner .banner-arrow {
  position: absolute;
  right: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--ink-2);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  padding: 4px 10px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  transition: background .2s, color .2s, border-color .2s, padding .2s;
}
.legacy-banner:hover .banner-arrow {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  padding-right: 14px;
}

/* 旧 .news-card/.news-list ブロックは現行 .news-feed/.news-feed-item へ移行済のため削除 */


/* ============================================================
   8. ヒーローセクション
   ============================================================ */
.hero {
  /* バナーをナビ直下にフラッシュさせ、上の白余白を排除 */
  padding-top: 0;
  /* ヒーロー下の余白を圧縮（新着情報とのギャップ削減） */
  padding-bottom: clamp(4px, 1vw, 12px);
  position: relative;
  /* overflow: hidden を削除 → バナーのフルブリードのためにクリップしない。
     代わりに横スクロールは body の overflow-x:hidden で吸収済み。 */
}
/* ヒーロー背景の装飾グラデーション（カラフル強化: accent + accent-2 の2色相）*/
.hero::before {
  content: "";
  position: absolute;
  inset: 0 -10% 0 auto;
  width: 55%;
  /* 右上を accent、右下を accent-2 で彩る2色相ウォッシュ */
  background:
    radial-gradient(ellipse at 75% 20%,
      color-mix(in oklab, var(--accent) 10%, transparent) 0%,
      transparent 55%),
    radial-gradient(ellipse at 60% 80%,
      color-mix(in oklab, var(--accent-2) 8%, transparent) 0%,
      transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────────
   ヒーローバナー：フルブリード（画面幅いっぱい）表示
   ──────────────────────────────────────────────────────────
   戦略:
   1. `.hero` 自体は `.wrap` を持たない（padding 0）のでバナーは
      親の幅をそのまま継承できる。
   2. `.hero-banner` を親コンテナの左端まで引き出すため
      margin-inline を打ち消す。ただし `.hero` が `.wrap` に
      ラップされている場合は左右の --gut 分を負 margin で引き出す。
   3. 100vw は OS スクロールバー幅を含む可能性があるため使わず、
      width:100% + calc で --gut を吸収する方式を採用。
      これにより横スクロールが絶対に発生しない。
   4. 角丸・border を除去してフルブリード感を強調。
   ────────────────────────────────────────────────────────── */
.hero-banner {
  /* 真のフルブリード: .wrap(max-width:1280px) の制約を超え、ビューポート全幅へ。
     50%(=wrap中心) から 50vw 引き出すことで左右端まで到達。
     横スクロールは html,body の overflow-x:clip で吸収済み。 */
  width: 100vw;
  max-width: 100vw;
  margin-top: 0;
  margin-left:  calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* バナー下の余白を圧縮（ヒーロー→新着情報のギャップ削減） */
  margin-bottom: clamp(10px, 1.5vw, 18px);
  /* フルブリードなので角丸・border・余分な shadow を除去 */
  border: none;
  border-radius: 0;
  overflow: hidden;
  background: var(--bg-2);
  line-height: 0;
}

/* ============================================================
   PC専用（≥721px）: ヒーロー画像直下の余白を詰め、先頭セクションの
   見出しを中央に寄せて中央スペースを活用する。スマホは対象外。
   ============================================================ */
@media (min-width: 721px) {
  .hero { padding-bottom: 0; }
  .hero-banner { margin-bottom: 0; }
  .legacy { padding-top: clamp(20px, 2.4vw, 32px); }
  /* 先頭セクション（サロン）の見出しを横中央へ寄せ、中央の空きを使う */
  .legacy-head {
    flex-direction: column; align-items: center; text-align: center;
    gap: 10px;
  }
  .legacy-head > div { width: 100%; }
  .legacy-head p { max-width: 46em; margin-inline: auto; }
}
.hero-banner img {
  width: 100%;
  height: auto;
  display: block;
  /* 比率を保ちつつ全幅でもクロップせず表示 */
  object-fit: cover;
  object-position: center center;
}

/* ≤560px: 同じく 100vw フルブリード（base と同方式・横スクロールは overflow-x:clip で吸収） */
@media (max-width: 560px) {
  .hero-banner {
    width: 100vw;
    max-width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-items: center;
}
/* ポートレート撤去に伴い1カラム化。コンテンツを中央寄せにして右側の空白を解消する */
.hero-grid > div { max-width: 940px; margin-inline: auto; text-align: center; }
.hero-grid .hero-lede { max-width: 44em; margin-inline: auto; }
.hero-grid .hero-cta { justify-content: center; }
.hero-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(14px, 2vw, 24px);
  gap: 18px;
  flex-wrap: wrap;
}
.hero-meta {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.hero h1.h-jp {
  font-size: clamp(38px, 5.8vw, 76px);
  line-height: 1.3;
  letter-spacing: 0.02em;
}
/* hero内の accent-word は特大スケール */
.hero h1 .accent-word {
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero h1 .accent-word::after { display: none; } /* text-clip時は下線不要 */

.hero .h-en-sub {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-3);
  margin-top: 18px;
  letter-spacing: 0.04em;
}
.hero-lede {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: 16px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 30em;
}
.hero-cta {
  margin-top: clamp(18px, 2.4vw, 30px);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ボタン */
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-size: 13px;
  letter-spacing: 0.18em;
  border-radius: 999px;
  transition: all .25s var(--ease-out);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--grad-accent);
  color: var(--bg);
  box-shadow: 0 6px 20px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.btn-primary:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -10px color-mix(in oklab, var(--accent) 55%, transparent);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-2);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  transform: translateY(-1px);
}

/* ポートレート */
.hero-portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-2);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  filter: saturate(0.85) contrast(1.02);
  transition: transform .8s var(--ease-std), filter .6s;
}
.hero-portrait:hover img {
  transform: scale(1.02);
  filter: saturate(0.95) contrast(1.03);
}
.hero-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    color-mix(in oklab, var(--bg) 55%, transparent) 100%);
  pointer-events: none;
}
.portrait-caption {
  position: absolute;
  left: -8px;
  bottom: 28px;
  background: var(--bg);
  padding: 14px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: 280px;
  box-shadow: var(--shadow-sm);
}
.portrait-caption .name-en {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.portrait-caption .name-jp {
  font-family: var(--font-jp-head);
  font-size: 18px;
  margin-top: 4px;
  letter-spacing: 0.08em;
}
.portrait-caption .name-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.1em;
}

/* header stats strip（ヘッダー直下の独立した薄帯。旧ヒーロー .trust から移設）
   既存の topbar / trust-ribbon フレームには触れず、その下に1行で並べる。 */
.header-stats {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in oklab, var(--bg) 72%, transparent);
}
.header-stats .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 clamp(18px, 3vw, 40px);
  padding: 10px 0;
}
.header-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
}
/* 項目間の縦罫線 */
.header-stat:not(:last-child) {
  border-right: 1px solid var(--rule);
  padding-right: clamp(18px, 3vw, 40px);
}
.header-stat .num {
  font-family: var(--font-en-head);
  font-size: 21px;
  line-height: 1;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-stat .num .unit {
  font-size: 12px;
  margin-left: 2px;
  color: var(--ink-3);
  -webkit-text-fill-color: var(--ink-3);
}
.header-stat .label {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  /* モバイルは縦罫線を外し、2×2グリッドで安定配置（折返しの不揃いを防ぐ） */
  .header-stats .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 9px 6px;
  }
  .header-stat {
    justify-content: center;
    gap: 5px;
  }
  .header-stat:not(:last-child) { border-right: 0; padding-right: 0; }
  .header-stat .num { font-size: 17px; }
  .header-stat .num .unit,
  .header-stat .label { font-size: 10.5px; }
}


/* ============================================================
   8-B. お知らせ（news）独立セクション
   ──────────────────────────────────────────────────────────
   DOM契約:
     <section class="news-section section-pad">
       <div class="wrap">
         <header class="section-head">…</header>   ← 既存流用
         <ul class="news-feed">
           <li class="news-feed-item">
             <time class="date">2026.05.20</time>
             <span class="tag [muted]">お知らせ</span>
             <a href="…">本文リンクテキスト</a>
           </li>
         </ul>
         <div class="news-more">
           <a href="…">すべて見る →</a>
         </div>
       </div>
     </section>
   ============================================================ */

/* セクション背景（heritage: bg-2 で legacy と区別） */
.news-section {
  background: var(--bg-2);
}
/* VIEW ALL をフィード末尾へ移動したため、見出しは単一カラムで詰める */
.news-section .section-head { grid-template-columns: 1fr; }

/* ──── タグ絞り込みタブ（JSが生成。既定タブのみ表示し「すべて」で詳細展開）──── */
.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.news-tabs:empty { display: none; }
.news-tab {
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px; /* タップ領域確保（指操作・WCAG 2.5.x） */
  padding: 6px 16px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-2);
  cursor: pointer;
  transition: background .25s var(--ease-std), color .25s, border-color .25s;
}
.news-tab:hover { border-color: var(--accent); color: var(--ink); }
.news-tab.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--bg);
}

/* ──── フィード（ul）──── */
.news-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

/* ──── 各行（li）──── */
.news-feed-item {
  display: grid;
  /* 日付(固定) | タグ(固定) | 本文リンク(伸縮) */
  grid-template-columns: 90px 72px 1fr;
  gap: 8px 20px;
  align-items: baseline;
  padding: var(--row-pad) 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.75;
  transition: background .2s var(--ease-std), padding-left .2s var(--ease-out);
}
.news-feed-item:hover {
  background: color-mix(in oklab, var(--accent) 5%, transparent);
  padding-left: 14px;
}
/* JS フィルタが立てる hidden 属性を display:grid より優先（最新3件だけ表示）。
   この specificity (0,2,0) が後段メディアクエリの .news-feed-item(0,1,0) にも勝つ。 */
.news-feed-item[hidden] { display: none; }

/* ──── 日付 ──── */
.news-feed-item .date {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* <time> のデフォルト display を block に */
  display: block;
}

/* ──── タグバッジ ──── */
.news-feed-item .tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: var(--radius);
  background: var(--accent-strong);
  color: var(--bg);
  white-space: nowrap;
  text-align: center;
  align-self: center;
  line-height: 1.5;
}
/* muted: 控えめバリアント（通常のお知らせ等） */
.news-feed-item .tag.muted {
  background: transparent;
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
/* NEW・重要 強調バリアント（accent色をそのまま使用） */
.news-feed-item .tag.new,
.news-feed-item .tag.important {
  background: var(--grad-accent);
  color: var(--bg);
  border: none;
}

/* ──── 本文リンク ──── */
.news-feed-item a {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.8;
  transition: color .2s var(--ease-std);
  /* テキストが長い場合の折り返し許可 */
  overflow-wrap: break-word;
  word-break: break-word;
}
.news-feed-item a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ──── 「もっと見る」リンク ──── */
.news-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 24px;
}
.news-more a {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color .2s var(--ease-std), gap .2s var(--ease-out);
}
.news-more a::after {
  content: "→";
  font-style: normal;
  display: inline-block;
  transition: transform .2s var(--ease-out);
}
.news-more a:hover {
  color: var(--accent);
  gap: 12px;
}
.news-more a:hover::after {
  transform: translateX(4px);
}

/* ──── レスポンシブ（≤720px）──── */
@media (max-width: 720px) {
  .news-feed-item {
    /* タブレット: 日付+タグ / 本文の2行構成 */
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 6px 12px;
    padding: 16px 8px;
  }
  .news-feed-item .date  { grid-row: 1; grid-column: 1; }
  .news-feed-item .tag   { grid-row: 1; grid-column: 2; align-self: center; }
  .news-feed-item a      { grid-row: 2; grid-column: 1 / -1; }
}

/* ──── レスポンシブ（≤480px）──── */
@media (max-width: 480px) {
  .news-feed-item {
    /* モバイル: 日付・タグ・本文を縦積み */
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 14px 8px;
  }
  .news-feed-item .date  { grid-row: 1; }
  .news-feed-item .tag   { grid-row: 2; align-self: start; }
  .news-feed-item a      { grid-row: 3; }
}

/* ──── prefers-reduced-motion: news フィード行のホバーアニメ無効 ──── */
@media (prefers-reduced-motion: reduce) {
  .news-feed-item,
  .news-feed-item a,
  .news-more a,
  .news-more a::after {
    transition: none !important;
  }
}


/* ============================================================
   9. セクションヘッダーパターン
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2.2fr;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: var(--head-mb);
  align-items: start;
}
/* セクション大見出しの装飾オーナメント（金線モノライン・原典#11の金唐草バナーを踏襲）。
   全 section-head の最上段に中央配置（grid 全幅 span）。先日導入の金線アイコンと同系の金で統一。
   装飾のみのため content 空・aria 不要（背景画像）。高さ固定で CLS を回避。 */
.section-head::before {
  content: "";
  grid-column: 1 / -1;
  width: 100%;
  max-width: 360px;
  height: 26px;
  margin: 0 auto 14px;
  background: url("/wp-content/uploads/ornaments/section-flourish.png") center / contain no-repeat;
  opacity: .92;
}
@media (max-width: 720px) {
  .section-head { grid-template-columns: 1fr; gap: 16px; }
  .section-head::before { max-width: 260px; height: 20px; margin-bottom: 10px; }
}
.section-head .label-block .eyebrow { margin-bottom: 12px; }
.section-head .num-tag {
  /* 日本語ラベル（コラム / メニュー・料金 等）。ラテン専用フォントだと日本語が細い既定明朝に
     フォールバックし px を上げても小さく見えるため、和文見出しフォントを明示指定する（根本原因対処）。 */
  font-family: var(--font-jp-head);
  font-style: normal;
  font-weight: 700;
  font-size: 30px;
  color: var(--accent-strong);
  letter-spacing: 0.08em;
}
/* ラベル左のブランドアイコンも拡大して文字サイズと釣り合わせる */
.section-head .num-tag .brand-icon {
  width: 34px;
  height: 34px;
  vertical-align: -0.30em;
  margin-right: 12px;
}
.section-head h2.h-jp {
  font-size: calc(clamp(28px, 3.4vw, 44px) + var(--h2-extra));
  font-weight: var(--h2-weight);
  line-height: 1.4;
  margin-bottom: 12px;
}
/* 見出しの装飾下線（カラフル強化: 幅を拡大し2色相グラデで存在感アップ） */
.section-head h2.h-jp::after {
  content: "";
  display: block;
  width: 56px;
  height: var(--h2-rule-h);  /* 既定 3px。管理画面の見出し下線の太さで調整可 */
  background: var(--grad-accent);
  margin-top: 14px;
  border-radius: 2px;
}
/* 見出し下線 ON/OFF・セクション交互背景は head-tokens.njk が enum に応じて出力する
   （既定 = 下線 ON / 交互背景 OFF）。styles.css 既定はそのまま。 */
.section-head .head-lead {
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.95;
  margin-top: 16px;
  max-width: 36em;
}


/* ============================================================
   10. 理念（philosophy）
   ============================================================ */
.philo {
  background: var(--bg-2);
}
.philo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--block-gap, 32px);
  margin-top: clamp(16px, 2vw, 28px);
}
/* ご相談の流れ（process）を中央寄せ（site.process.align='center'・admin設定）。
   ステップ数が列数より少ないと左寄せに見えるため、flex 中央寄せにして箱と注釈をセンタリング。 */
.process--centered .philo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.process--centered .philo-grid > .philo-card {
  flex: 0 1 clamp(200px, 22vw, 250px);
}
.process--centered .section-note { text-align: center; }
@media (max-width: 480px) {
  .process--centered .philo-grid > .philo-card { flex-basis: calc(50% - 6px); }
}
@media (max-width: 880px) {
  .philo-grid { grid-template-columns: repeat(2, 1fr); }
}
/* スマホでも2×2を維持して縦の冗長スペースを削減 */
@media (max-width: 480px) {
  .philo-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .philo-card { padding: 18px 14px; }
  .philo-card .pillar-jp { font-size: 18px; margin: 4px 0 10px; }
  .philo-card .pillar { font-size: 11px; }
  /* モバイルはアイコンを縮小して縦の冗長スペースを削減 */
  .philo-card .pillar-icon,
  .philo-card .step-icon { width: 38px; height: 38px; margin: 0 0 8px; }
}
.philo-card {
  background: var(--bg);
  padding: 24px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: relative;
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s;
  overflow: hidden;
}
/* カード上端のアクセントライン */
.philo-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  border-radius: var(--radius) var(--radius) 0 0;
}
.philo-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--accent) 30%, var(--rule));
}
.philo-card:hover::before { transform: scaleX(1); }

.philo-card .pillar {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.12em;
}
.philo-card .pillar-jp {
  font-family: var(--font-jp-head);
  font-size: 22px;
  margin: 6px 0 18px;
  letter-spacing: 0.06em;
}
.philo-card p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
}
.philo-card .idx {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  /* カラフル強化: ink-3→accent-2 でカード右上数字に彩り */
  color: var(--accent-2);
  opacity: .55;
}

/* 理念 / 予約ステップ: 連番テキストの代わりに置くアイコン画像
   （テンプレが <img class="pillar-icon">（理念）/ <img class="step-icon">（予約ステップ）を出力）。
   右上の .idx 連番とは別ブロックでカード左上に縦積みするため干渉しない。 */
.philo-card .pillar-icon,
.philo-card .step-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  display: block;
  margin: 0 0 10px;
  opacity: .92;
}
/* en ラベル(.pillar)が空文字でも余白が出ないように非表示にする */
.philo-card .pillar:empty { display: none; }


/* ============================================================
   11. カウンセリングメニュー
   ============================================================ */
/* スピリチュアルカウンセリングの説明（とは／得られること）— 全文掲載の本文ブロック */
.counseling-about {
  margin: clamp(24px, 3vw, 40px) 0 clamp(28px, 3.5vw, 48px);
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.counseling-about .about-block { max-width: 60em; }
.counseling-about .about-h {
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: 0.04em;
  margin: 0 0 clamp(10px, 1.4vw, 16px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.counseling-about .about-p {
  font-size: clamp(15px, 1.05vw, 16.5px);
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 1em;
}
.counseling-about .about-p:last-child { margin-bottom: 0; }

.menu-table {
  border-top: 2px solid var(--ink);
}
.menu-row {
  display: grid;
  grid-template-columns: 80px 1.2fr 1.4fr 1.4fr auto;
  align-items: center;
  gap: 28px;
  padding: 22px 8px;
  border-bottom: 1px solid var(--rule);
  transition: background .25s, padding-left .25s var(--ease-out), box-shadow .25s;
  position: relative;
}
.menu-row::after {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  border-left: 3px solid var(--accent);
  opacity: 0;
  transition: opacity .25s;
}
.menu-row:hover {
  background: var(--bg-2);
  padding-left: 20px;
}
.menu-row:hover::after { opacity: 1; }

@media (max-width: 880px) {
  /* スマホは番号とタイトルを同一行に（番号の後に改行しない）。説明/料金/CTAは下へ積む */
  .menu-row {
    display: block;
    padding: 20px 8px;
  }
  .menu-num { display: inline; font-size: 24px; margin-right: 10px; vertical-align: baseline; }
  .menu-title { display: inline; font-size: 20px; }
  .menu-title .en { display: block; margin-top: 4px; }
  .menu-desc { margin-top: 12px; }
  .menu-prices { margin-top: 10px; }
  .menu-cta { margin-top: 12px; }
  .menu-row:hover { padding-left: 8px; }
  .menu-row::after { border-left-width: 2px; }
}
.menu-num {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 28px;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.menu-title {
  font-family: var(--font-jp-head);
  font-size: 22px;
  letter-spacing: 0.06em;
}
.menu-title .en {
  display: block;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  margin-top: 4px;
}
.menu-desc { font-size: 15px; color: var(--ink-2); line-height: 1.85; }
/* 料金・時間は高齢層にも読みやすいよう拡大（dur 16px / yen 23px・太め） */
.menu-prices { font-size: 16px; color: var(--ink-2); line-height: 2; }
.menu-prices .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  white-space: nowrap;
}
.menu-prices .dur { font-size: 16px; color: var(--ink-3); white-space: nowrap; }
.menu-prices .yen {
  font-family: var(--font-en-head);
  font-size: 23px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.menu-cta {
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--accent-strong);
  white-space: nowrap;
  font-family: var(--font-en-head);
  font-style: italic;
}
.menu-cta::after {
  content: " →";
  display: inline-block;
  transition: transform .25s var(--ease-out);
}
.menu-row:hover .menu-cta::after { transform: translateX(6px); }


/* ============================================================
   12. サロン
   ============================================================ */
.salons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap, clamp(24px, 3vw, 48px));
}
@media (max-width: 880px) { .salons-grid { grid-template-columns: 1fr; } }

.salon-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), border-color .3s;
}
.salon-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--rule));
}
.salon-img {
  aspect-ratio: 4/3;
  background: var(--bg-3);
  overflow: hidden;
}
.salon-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-std), filter .5s;
}
.salon-card:hover .salon-img img {
  transform: scale(1.05);
  filter: saturate(1.05);
}
.salon-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.salon-pin {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  /* カラフル強化: グラデテキストで2色相を表現 */
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.12em;
}
.salon-name {
  font-family: var(--font-jp-head);
  font-size: 24px;
  letter-spacing: 0.08em;
  margin: 6px 0 4px;
}
.salon-region {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
}
.salon-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.9;
  margin: 14px 0;
  flex: 1;
}
.salon-meta {
  font-size: 12px;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  display: grid;
  gap: 6px;
}
.salon-meta .k {
  color: var(--ink-3);
  letter-spacing: 0.1em;
  margin-right: 12px;
  min-width: 60px;
  display: inline-block;
}
.salon-meta .v { color: var(--ink-2); }

/* salon gallery */
.gallery {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
@media (max-width: 880px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .ph {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-3);
  border-radius: var(--radius);
}
.gallery .ph img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
  transition: filter .3s, transform .6s var(--ease-std);
}
.gallery .ph:hover img {
  filter: saturate(1.1) brightness(1.03);
  transform: scale(1.06);
}


/* ============================================================
   13. プロフィール
   ============================================================ */
.profile-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 880px) { .profile-grid { grid-template-columns: 1fr; } }

.profile-photo {
  aspect-ratio: 3/4;
  background: var(--bg-2);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.profile-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  filter: saturate(0.88);
  transition: filter .5s;
}
.profile-photo:hover img { filter: saturate(1); }

.profile-cv {
  font-size: 14px;
  line-height: 1.95;
  color: var(--ink-2);
}
.cv-list { list-style: none; padding: 0; margin: 0; }
.cv-list li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--ink-2);
  transition: background .2s;
}
.cv-list li:hover { background: color-mix(in oklab, var(--accent) 4%, transparent); }
.cv-list li:last-child { border-bottom: 1px solid var(--rule); }
.cv-list .year {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-strong);
}

/* プロフィール下段（経歴・資格）— グリッド外の全幅ブロック。
   写真下の空白を活用し、cv-list / credentials を2カラムで上品に見せる。 */
.profile-extras {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--rule);
}
/* ≥721px は2カラム（広い余白を活用）。≤720px は1カラム（base のまま）。 */
@media (min-width: 721px) {
  .profile-extras .cv-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  /* 2カラム時は各行に上罫を引き、列をまたぐ二重線を避ける（最後の1〜2件のみ下罫）。 */
  .profile-extras .cv-list li:last-child,
  .profile-extras .cv-list li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--rule); }
  .profile-extras .credentials-list { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); }
}
/* ≤640px は確実に1カラムで積む（誤った2カラム化を防ぐ）。 */
@media (max-width: 640px) {
  .profile-extras .cv-list,
  .profile-extras .credentials-list { grid-template-columns: 1fr; }
}


/* ============================================================
   14. お客様の声
   ============================================================ */
.testimonials { background: var(--bg-2); }
.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--block-gap, 24px);
}
@media (max-width: 880px) { .t-grid { grid-template-columns: 1fr; } }

.t-card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out), border-color .3s;
  overflow: hidden;
}
/* カラフル強化: ホバー時に上端グラデラインを表示（philo-card 同様の手法）*/
.t-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.t-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in oklab, var(--accent) 25%, var(--rule));
}
.t-card:hover::before { transform: scaleX(1); }
.t-quote {
  font-family: var(--font-en-head);
  font-size: 56px;
  line-height: 1;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: .45;
  position: absolute;
  top: 16px;
  left: 22px;
}
.t-title {
  font-family: var(--font-jp-head);
  font-size: 17px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  margin: 20px 0 14px;
}
.t-body {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.95;
  flex: 1;
}
.t-meta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}


/* ============================================================
   15. 講座・セミナー
   ============================================================ */
.ws-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--block-gap, 24px);
}
@media (max-width: 880px) { .ws-grid { grid-template-columns: 1fr; } }

.ws-card {
  display: flex;
  flex-direction: column;
  transition: transform .3s var(--ease-out);
}
.ws-card:hover { transform: translateY(-3px); }
.ws-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--bg-3);
  margin-bottom: 14px;
  border-radius: var(--radius);
}
.ws-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-std), filter .4s;
}
.ws-card:hover .ws-img img {
  transform: scale(1.05);
  filter: saturate(1.05);
}
.ws-tag {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 12px;
  /* カラフル強化: グラデテキストで accent→accent-2 の2色相 */
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.12em;
}
.ws-name {
  font-family: var(--font-jp-head);
  font-size: 20px;
  letter-spacing: 0.06em;
  margin: 4px 0 10px;
}
.ws-desc { font-size: 13px; color: var(--ink-2); line-height: 1.9; }

/* カードをクリック可能リンク化（詳細ページへ） */
a.ws-card { color: inherit; text-decoration: none; }
.ws-card-more {
  margin-top: 10px;
  font-family: var(--font-en-head);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  opacity: 0.9;
}
.ws-card-more span { display: inline-block; transition: transform .3s var(--ease-out); }
.ws-card:hover .ws-card-more span { transform: translateX(4px); }

/* 養成講座（フラッグシップ）への導線バナー */
.ws-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(28px, 4vw, 48px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: inherit;
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.ws-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ws-feature-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-3);
}
.ws-feature-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-std);
}
.ws-feature:hover .ws-feature-media img { transform: scale(1.04); }
.ws-feature-eyebrow {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.12em;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ws-feature-title {
  font-family: var(--font-jp-head);
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.06em;
  margin: 0.4em 0 0.5em;
}
.ws-feature-desc { font-size: 14px; color: var(--ink-2); line-height: 1.95; margin: 0 0 1em; }
.ws-feature-cta { font-size: 13px; letter-spacing: 0.06em; color: var(--accent-strong); font-weight: 500; }
.ws-feature-cta span { display: inline-block; transition: transform .3s var(--ease-out); }
.ws-feature:hover .ws-feature-cta span { transform: translateX(4px); }
/* 2本目のフィーチャー（シンギングボウル）は画像を右に配し、養成講座と同格の並列を視覚化 */
.ws-feature--reverse .ws-feature-media { order: 2; }
@media (max-width: 760px) {
  .ws-feature { grid-template-columns: 1fr; }
  .ws-feature--reverse .ws-feature-media { order: 0; }
}

/* セクション末尾のCTA（詳細・お申し込みへ） */
.ws-cta-row { margin-top: clamp(28px, 4vw, 44px); text-align: center; }


/* ============================================================
   16. 書籍・CD
   ============================================================ */
.books {
  background: var(--ink);
  color: var(--bg);
}
.books .eyebrow {
  /* 書籍セクション（暗背景）: グラデ効果を解除してテキスト色を明るく */
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  /* accent-2 を白に混ぜて暗背景でも視認できる明るい色に */
  color: color-mix(in oklab, var(--accent-2) 70%, white);
}
.books .section-head h2.h-jp { color: var(--bg); }
.books .section-head h2.h-jp::after { opacity: .7; }
.books .section-head .head-lead {
  color: color-mix(in oklab, var(--bg) 75%, transparent);
}
.books .salon-detail-link {
  /* 暗背景(--ink)上では濃いaccent-strongが沈むため、accentを白に寄せた明色でAAを確保 */
  color: color-mix(in oklab, var(--accent) 62%, white);
}
.books .num-tag {
  /* 暗背景: accent-2 を白に混ぜて可読性維持 */
  color: color-mix(in oklab, var(--accent-2) 60%, white);
}
.books-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--block-gap, 24px);
}
@media (max-width: 880px) {
  .books-grid { grid-template-columns: repeat(2, 1fr); }
}
.book-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .3s var(--ease-out);
}
.book-card:hover { transform: translateY(-4px); }
.book-cover {
  aspect-ratio: 3/4;
  background: color-mix(in oklab, var(--bg) 8%, var(--ink));
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--bg) 15%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  transition: box-shadow .35s var(--ease-out);
}
.book-card:hover .book-cover {
  box-shadow: 0 20px 48px -16px rgba(0,0,0,.6);
}
.book-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-std);
}
.book-card:hover .book-cover img { transform: scale(1.04); }
.book-title {
  font-family: var(--font-jp-head);
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--bg);
}
.book-meta {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 12px;
  color: color-mix(in oklab, var(--bg) 55%, transparent);
}


/* ============================================================
   17. FAQ
   ============================================================ */
.faq-list { border-top: 1px solid var(--rule); }
.faq-item {
  border-bottom: 1px solid var(--rule);
  transition: background .2s;
}
.faq-item.open { background: color-mix(in oklab, var(--accent) 4%, transparent); }

.faq-q {
  width: 100%;
  background: none;
  border: 0;
  padding: 22px 8px;
  text-align: left;
  font-family: var(--font-jp-head);
  font-size: 19px;
  color: var(--ink);
  letter-spacing: 0.04em;
  cursor: pointer;
  display: grid;
  grid-template-columns: 32px 1fr 28px;
  gap: 20px;
  align-items: center;
  transition: padding-left .25s var(--ease-out);
}
.faq-q:hover { padding-left: 12px; }
.faq-item.open .faq-q { padding-left: 12px; }

.faq-q .q-mark {
  font-family: var(--font-en-head);
  font-style: italic;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 22px;
}

.faq-toggle {
  width: 28px; height: 28px;
  position: relative;
  flex-shrink: 0;
}
.faq-toggle::before, .faq-toggle::after {
  content: "";
  position: absolute;
  background: var(--ink-2);
  transition: transform .3s var(--ease-out);
}
.faq-toggle::before { left: 0; right: 0; top: 50%; height: 1px; }
.faq-toggle::after  { top: 0; bottom: 0; left: 50%; width: 1px; }
.faq-item.open .faq-toggle::after { transform: scaleY(0); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-std);
  padding: 0 56px 0 52px;
}
.faq-item.open .faq-a {
  max-height: 600px;
  padding-bottom: 20px;
}
.faq-a-inner {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 2;
}


/* ============================================================
   18. ピアノ
   ============================================================ */
.piano-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) { .piano-grid { grid-template-columns: 1fr; } }

.piano-img {
  aspect-ratio: 1/1;
  background: var(--bg-3);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.piano-img img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   19. 最終 CTA
   ============================================================ */
.final-cta {
  text-align: center;
  background: var(--bg-2);
  position: relative;
  overflow: hidden;
}
/* 背景の2色相円形グラデーション装飾（カラフル強化: accent 上部 + accent-2 下部）*/
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%,
      color-mix(in oklab, var(--accent-2) 9%, transparent) 0%,
      transparent 55%),
    radial-gradient(ellipse at 70% 85%,
      color-mix(in oklab, var(--accent) 10%, transparent) 0%,
      transparent 60%);
  pointer-events: none;
}
.final-cta > * { position: relative; z-index: 1; }
.final-cta h2.h-jp {
  font-size: clamp(32px, 4.5vw, 56px);
  margin-bottom: 16px;
  line-height: 1.4;
}
.final-cta .h-en { font-size: clamp(20px, 2vw, 26px); margin-bottom: 20px; }
.final-cta .ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }


/* ============================================================
   20. フッター
   ============================================================ */
footer.foot {
  background: var(--ink);
  color: color-mix(in oklab, var(--bg) 75%, transparent);
  padding: 56px 0 28px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid color-mix(in oklab, var(--bg) 15%, transparent);
}
@media (max-width: 880px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; padding-bottom: 32px; }
}
.foot h4 {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  letter-spacing: 0.16em;
  font-weight: 400;
  margin: 0 0 18px;
  text-transform: uppercase;
}
.foot ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
  font-size: 13px;
}
.foot ul a {
  color: color-mix(in oklab, var(--bg) 80%, transparent);
  transition: color .2s;
}
.foot ul a:hover { color: var(--bg); }
.foot-brand-mark {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 28px;
  color: var(--bg);
  margin-bottom: 12px;
}
.foot-brand-sub {
  font-family: var(--font-jp-head);
  font-size: 14px;
  letter-spacing: 0.2em;
  color: color-mix(in oklab, var(--bg) 65%, transparent);
  margin-bottom: 20px;
}
.foot-tag {
  font-size: 13px;
  line-height: 1.9;
  color: color-mix(in oklab, var(--bg) 60%, transparent);
  max-width: 28em;
}
.foot-bottom {
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: color-mix(in oklab, var(--bg) 50%, transparent);
  flex-wrap: wrap;
  gap: 16px;
}
/* 最下部クレジット（Powered by …）。控えめ・中央・リンクは下線 */
.foot-powered {
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--bg) 42%, transparent);
}
.foot-powered a {
  color: color-mix(in oklab, var(--bg) 62%, transparent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.foot-powered a:hover { color: var(--bg); }


/* ============================================================
   21. sticky booking ribbon（サイド）
   ============================================================ */
.ribbon {
  /* 右端の縦タブ。rotate+fixed だと変形後ボックスが画面外にはみ出し横スクロール＆不可視に
     なるため、writing-mode による縦書きで right:0 に正しく収める（はみ出さない）。 */
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: var(--grad-accent);
  color: var(--bg);
  padding: 26px 11px;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.14em;
  z-index: 30;
  white-space: nowrap;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  transition: filter .2s, box-shadow .2s;
  box-shadow: -4px 0 20px -8px rgba(0,0,0,.25);
}
.ribbon:hover {
  filter: brightness(1.1);
  box-shadow: -6px 0 28px -8px rgba(0,0,0,.3);
}
@media (max-width: 720px) { .ribbon { display: none; } }


/* ============================================================
   22. モバイル下部固定バー
   ============================================================ */
.mobile-cta { display: none; }

/* アイテム共通 */
.mobile-cta .mc-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px 9px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  /* 項目間に太い区切り線 */
  border-left: 2px solid color-mix(in oklab, var(--ink) 55%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, color .18s;
  text-align: center;
  line-height: 1;
}
.mobile-cta .mc-item:first-child { border-left: 0; }

/* SVGアイコン */
.mobile-cta .mc-item svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mobile-cta .mc-label {
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
}

/* primary（予約）強調 */
.mobile-cta .mc-item.primary {
  background: var(--grad-accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  box-shadow: 0 -4px 16px -8px color-mix(in oklab, var(--accent) 50%, transparent);
}
.mobile-cta .mc-item.primary svg {
  width: 24px; height: 24px;
}
.mobile-cta .mc-item.primary:active {
  filter: brightness(1.1);
}
.mobile-cta .mc-item:not(.primary):hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
}

/* ≤880pxで表示（4アイテム対応） */
@media (max-width: 880px) {
  .mobile-cta {
    display: grid;
    /* アイテム数に追従（4でも5でも等幅）。primary は背景で強調 */
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 110; /* ドロワー(z:90)より前面 */
    background: color-mix(in oklab, var(--bg) 95%, transparent);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -6px 24px -12px rgba(0,0,0,.3);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 720-880px のサイドリボンと重複非表示 */
  .ribbon { display: none; }

  /* フッターをバー分底上げ（固定バー実測高 ≈59px → 予約64px=実高+5px余裕） */
  footer.foot {
    padding-bottom: calc(20px + 64px + env(safe-area-inset-bottom, 0px));
  }

  /* アンカージャンプがバーに隠れないよう（実バー高に整合） */
  html {
    scroll-padding-bottom: 64px;
  }
}


/* ============================================================
   23. スクロールフェードイン（prefers-reduced-motion 対応）
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  section {
    animation: fadeInUp .85s var(--ease-out) both;
    animation-delay: calc(var(--section-delay, 0) * 1ms);
  }
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* カードの順番アニメ（philo-card / t-card / ws-card） */
  .philo-card,
  .t-card,
  .ws-card,
  .book-card {
    animation: fadeInUp .6s var(--ease-out) both;
  }
  .philo-card:nth-child(2), .t-card:nth-child(2), .ws-card:nth-child(2), .book-card:nth-child(2) { animation-delay: .08s; }
  .philo-card:nth-child(3), .t-card:nth-child(3), .ws-card:nth-child(3), .book-card:nth-child(3) { animation-delay: .16s; }
  .philo-card:nth-child(4), .book-card:nth-child(4) { animation-delay: .24s; }
}

/* アニメーション完全無効 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   スピリチュアルコラム（記事ページ / 一覧ページ）
   旧サイト harmony-mc.com の投稿を移植・再現。既存トークン駆動。
   ============================================================ */

/* --- 共通: 記事用の狭い読みやすいカラム --- */
.wrap-narrow { max-width: 760px; }

/* --- パンくず --- */
.breadcrumb {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink-2);
  padding: 28px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.breadcrumb a { color: var(--ink-2); text-decoration: none; transition: color .2s var(--ease-std); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--ink); font-weight: 500; }

/* --- 記事ヘッダ --- */
.col-article { padding-bottom: clamp(48px, 8vw, 96px); }
.col-head { padding: 12px 0 28px; border-bottom: 1px solid var(--rule); margin-bottom: 36px; }
.col-title {
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.34;
  letter-spacing: .01em;
  margin: 10px 0 18px;
}
.col-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-family: var(--font-body);
  font-size: 13px; color: var(--ink-3);
}
.col-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--rule); display: inline-block; }

/* --- 記事本文 --- */
.col-body {
  font-family: var(--font-body);
  font-size: calc(16.5px * var(--font-scale));
  line-height: var(--body-leading);  /* 既定 2.0。管理画面の本文行間で調整可 */
  color: var(--ink-2);
  letter-spacing: .01em;
}
.col-body p { margin: 0 0 1.5em; }
.col-body h2, .col-body h3, .col-body h4 {
  font-family: var(--font-jp-head);
  color: var(--ink);
  line-height: 1.5;
  margin: 2em 0 .8em;
  letter-spacing: .01em;
}
.col-body h2 { font-size: clamp(20px, 3vw, 25px); padding-bottom: .35em; border-bottom: 1px solid var(--rule); }
.col-body h3 { font-size: clamp(18px, 2.6vw, 21px); padding-left: 14px; border-left: 3px solid var(--accent); }
.col-body h4 { font-size: 17px; }
.col-body img {
  max-width: 100%; height: auto; display: block;
  margin: 1.6em auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.col-body a { color: var(--body-link); text-decoration: underline; text-underline-offset: 3px; }
.col-body a:hover { opacity: .8; }
/* リンク下線スタイル（既定 = 常時下線）。enum hover/none は head-tokens.njk が上書き出力。 */
.col-body strong { font-weight: 700; color: var(--ink); }
.col-body ul, .col-body ol { margin: 0 0 1.5em; padding-left: 1.4em; }
.col-body li { margin-bottom: .5em; }
.col-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  color: var(--ink-3); font-style: italic;
}

/* --- 本文で使える装飾クラス（admin/sanitize.js の ALLOWED_CLASSES と対で維持する） ---
   これらは以前からサニタイザで「許可」されていたが CSS が一度も定義されておらず、
   管理画面で付けても見た目が何も変わらない（＝運営者から見て機能が壊れている）状態だった。
   許可リストとスタイルはセットで存在させること。片方だけ増やすと同じ状態が再発する。
   色は既存トークン参照のみ（生 hex を書かない）。 */

/* リード文: 記事冒頭の導入。本文より少し大きく、落ち着いた色で締める。 */
.col-body .lead {
  font-size: 1.06em;
  line-height: 1.95;
  color: var(--ink-2);
  margin-bottom: 1.8em;
}

/* キーワードのハイライト。下地だけ敷く（文字色は本文のまま＝コントラストを落とさない）。
   background-image のグラデーションで「蛍光ペンで引いた」見え方にする。 */
.col-body .hl-pink {
  background-image: linear-gradient(
    transparent 58%,
    color-mix(in oklab, var(--accent) 22%, transparent) 58%
  );
  padding: 0 .1em;
  font-weight: 600;
}

/* 補足の小さめテキスト。※注記など。 */
.col-body .small {
  font-size: .88em;
  color: var(--ink-3);
}

/* 注記ボックス / 注意ボックス。枠と左罫で本文と区別する。
   note = 補足、caution = 気をつけてほしいこと（より強い罫）。 */
.col-body .note,
.col-body .caution {
  margin: 1.6em 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm, 6px);
  background: var(--bg-2, transparent);
  color: var(--ink-2);
  font-size: .95em;
  line-height: 1.85;
}
.col-body .caution {
  border-left-color: var(--accent-strong);
  color: var(--ink);
}
.col-body .note > :last-child,
.col-body .caution > :last-child { margin-bottom: 0; }

/* 表: 承認済みの CSS 加算（seminar-cms-spec §11-Q1）。
   モバイルで横スクロールを本文全体に波及させないため、必ず自前の枠内でスクロールさせる。
   これが無いと画面全体に横スクロールが出て規約違反になる。 */
.col-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: .95em;
}
.col-body table :is(th, td) {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.col-body table th {
  background: var(--bg-2, transparent);
  font-weight: 700;
  color: var(--ink);
}
.col-body table caption {
  caption-side: bottom;
  margin-top: .6em;
  font-size: .88em;
  color: var(--ink-3);
  text-align: left;
}
/* 表の横あふれは表自身をスクロールさせて受け止める（本文の横スクロールを防ぐ）。 */
.col-body table { display: block; overflow-x: auto; }

/* 区切り線: 章の切れ目。 */
.col-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.4em 0;
}

/* 図版とキャプション。 */
.col-body figure { margin: 1.8em 0; }
.col-body figure img { margin: 0; }
.col-body figcaption {
  margin-top: .6em;
  font-size: .88em;
  color: var(--ink-3);
  line-height: 1.7;
}

/* --- 著者ボックス --- */
.col-author {
  display: flex; gap: 18px; align-items: flex-start;
  margin: 48px 0 0; padding: 26px;
  background: var(--bg-2); border-radius: var(--radius-lg);
}
.col-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.col-author-name { font-family: var(--font-jp-head); font-size: 17px; color: var(--ink); margin-bottom: 8px; }
.col-author-name span { font-family: var(--font-en-head); font-size: 13px; color: var(--ink-3); margin-left: 6px; }
.col-author p { font-family: var(--font-body); font-size: 13.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 10px; }
.col-author-link { font-family: var(--font-body); font-size: 13px; color: var(--accent); text-decoration: none; }
.col-author-link:hover { text-decoration: underline; }

/* --- 関連記事 --- */
.col-related { margin: 56px 0 0; }
.related-h {
  font-family: var(--font-jp-head); font-size: 19px; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.related-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-std);
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-title {
  font-family: var(--font-jp-head); font-size: 14px; line-height: 1.55; color: var(--ink);
  padding: 14px 14px 6px; flex: 1;
}
.related-date { font-family: var(--font-en-head); font-size: 12px; font-weight: 500; color: var(--ink-2); padding: 0 14px 14px; }

/* --- 記事末 CTA --- */
.col-foot-cta {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center;
  margin: 56px 0 0; padding-top: 32px; border-top: 1px solid var(--rule);
}

/* --- コラム一覧ページ --- */
.col-index-grid {
  display: grid;
  /* 3列固定: カード総数を3の倍数(9)で運用し、最終行に空きスロットが出ないようにする。
     auto-fill だと幅により4列化し 9枚=4,4,1 で空きが出るため固定する。 */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; margin-top: 24px;
}
@media (max-width: 900px) { .col-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .col-index-grid { grid-template-columns: 1fr; } }
.col-card {
  position: relative;
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-std);
}
.col-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* 更新が直近1週間以内のカードに付く NEW バッジ（JSが日付から判定して付与） */
.badge-new {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-block; padding: 3px 10px;
  background: var(--accent); color: var(--paper);
  font-family: var(--font-en-head); font-weight: 700; font-size: 11px;
  letter-spacing: .14em; line-height: 1.5; border-radius: 999px;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 42%, transparent);
}
.col-card-thumb { display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-3); }
.col-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.col-card:hover .col-card-thumb img { transform: scale(1.05); }
.col-card-body { display: flex; flex-direction: column; padding: 18px 18px 20px; flex: 1; }
.col-card-date { font-family: var(--font-en-head); font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 8px; letter-spacing: .04em; }
.col-card-title { font-family: var(--font-jp-head); font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.col-card-excerpt {
  font-family: var(--font-body); font-size: 13px; line-height: 1.8; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 720px) {
  .related-grid { grid-template-columns: 1fr; }
  .col-body { font-size: 16px; line-height: 1.95; }
}

/* --- 記事内 FAQ（native details / summary・JS不要） --- */
.col-faq { margin: 52px 0 0; }
.col-faq-h {
  font-family: var(--font-jp-head); font-size: 19px; color: var(--ink);
  padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--rule);
}
.col-faq-item {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--paper); margin-bottom: 12px; overflow: hidden;
}
.col-faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--font-jp-head); font-size: 15.5px; color: var(--ink);
  padding: 16px 52px 16px 20px; line-height: 1.5;
  transition: background .2s var(--ease-std);
}
.col-faq-item summary::-webkit-details-marker { display: none; }
.col-faq-item summary::before { content: "Q"; color: var(--accent); font-family: var(--font-en-head); font-weight: 500; margin-right: 10px; }
.col-faq-item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease-std);
}
.col-faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.col-faq-item summary:hover { background: var(--bg-2); }
.col-faq-a {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.9; color: var(--ink-2);
  padding: 0 20px 18px; 
}
.col-faq-a::before { content: "A"; color: var(--accent); font-family: var(--font-en-head); font-weight: 500; margin-right: 10px; }

/* --- 予約カレンダー埋め込み（旧 /yoyakucalendar/ の iframe 表示を再現） --- */
/* エクスプレス予約 CTA（カレンダー上部・最短日程で申し込む導線） */
.booking-express {
  text-align: center;
  margin: 4px 0 0;
}
.btn-express {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-family: var(--font-jp-head);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--bg);
  background: var(--grad-accent);
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: transform .2s var(--ease-std), box-shadow .2s, filter .2s;
}
.btn-express svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-express:hover { transform: translateY(-2px); filter: brightness(1.05); }

.booking-embed {
  /* 予約アプリ上部のチロメ（ヘッダ/ログイン/案内文）を隠し2か月カレンダー＋凡例まで表示。
     iframe を上にオフセットして上端を切り、コンテナ高さでカレンダー範囲だけ見せる。
     値は外部アプリのレイアウト計測に基づく調整可能ノブ。
     計測 2026-05（iframe 実幅 980px・2か月は縦積み）:
       カレンダーカード上端 ≈152px / 凡例下端 ≈1502px / カード下端 ≈1528px。
       → crop=152（カード上端まで切り上げ）, visible=1400（カード下端+月行変動の余裕を内包）。 */
  --booking-crop: 152px;     /* 隠す上部チロメの高さ（計測: カレンダーカード上端 ≈152px） */
  --booking-visible: 1400px; /* 2か月カレンダー＋凡例がちょうど収まる高さ（下端 ≈1528-152≈1376 + 月行変動の余裕） */
  margin: 20px auto 10px;
  max-width: 980px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  height: var(--booking-visible);
  /* 残存リスク: 外部カレンダーはクロスオリジンのため月の週数（5週/6週）で
     全体高が ±約55px 変動する。visible はそれを内包する余裕値だが、
     週数が極端に多い月では下端にわずかな余白、少ない月では凡例下に
     若干の隙間が出る可能性がある（pixel 固定クロップの構造的限界）。
     mask フェードは下端の不自然なグラデが出るため撤去し、凡例まで素直に見せる。 */
  contain: layout; /* iframe の遅延ロードによるレイアウトシフトを隔離 */
}
.booking-embed iframe {
  display: block;
  width: 100%;
  height: calc(var(--booking-visible) + var(--booking-crop));
  margin-top: calc(-1 * var(--booking-crop));
  border: 0;
}
/* タップ遷移プレビュー: iframe を装飾プレビュー化し、外側 <a> 全面をタップで予約フロントへ。
   高さを抑えた「プレビュー」表示にし、下端フェード＋アクセントの開くCTAで誘導する。 */
.booking-embed--preview {
  position: relative;
  display: block;
  /* 1ヶ月まるごと表示（半月切れを解消）。下端の翌月境界部にフェード＋CTAを逃がす。
     値は外部カレンダーの行高に基づく調整ノブ（--booking-month-h で微調整可）。 */
  --booking-month-h: 900px;
  height: var(--booking-month-h);
  cursor: pointer;
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (max-width: 720px) {
  .booking-embed--preview { --booking-month-h: 760px; }
}
.booking-embed--preview iframe {
  pointer-events: none; /* プレビューは操作不可。タップは外側 <a> が受ける */
}
.booking-embed--preview::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper) 88%);
  pointer-events: none;
}
.booking-embed__open {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 3vw, 22px);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--accent-strong, #B0481A);
  color: #fff;
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 16px);
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.booking-embed__open svg { width: 19px; height: 19px; }
@media (hover: hover) {
  .booking-embed--preview:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
}
.booking-embed--preview:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.booking-embed-fallback {
  text-align: center;
  color: var(--ink-3);
  margin: 0;
}
.booking-embed-fallback a { color: var(--accent); }
@media (max-width: 720px) {
  /* モバイル（iframe 実幅 ≈340-380px・2か月縦積み）計測 2026-05:
     カード上端 ≈148px / 凡例下端 ≈1382px / カード下端 ≈1400px。
     → crop=148, visible=1300（カード下端 ≈1400-148≈1252 + 月行変動の余裕）。 */
  .booking-embed { --booking-crop: 148px; --booking-visible: 1300px; }
}

/* コラム一覧ページのセクションラッパー（section-pad 継承・上書きフック） */
.col-index { padding-top: clamp(20px, 4vw, 40px); }

/* ============================================================
   コラム一覧 / カテゴリーアーカイブ: 旧サイトのリスト+サイドバー構成
   ============================================================ */
.col-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: clamp(32px, 5vw, 56px);
  margin-top: 40px;
}
.col-main { min-width: 0; }

/* --- リスト行 --- */
.col-row {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  padding: var(--list-row-pad) 0;
  border-bottom: 1px solid var(--rule);
}
.col-row:first-child { padding-top: 0; }
.col-row-thumb {
  flex-shrink: 0;
  width: clamp(120px, 22vw, 220px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  display: block;
}
.col-row-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.col-row:hover .col-row-thumb img { transform: scale(1.05); }
.col-row-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--ink-3); font-size: 28px; }
.col-row-body { min-width: 0; flex: 1; }
.col-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.col-row-meta time { font-family: var(--font-en-head); font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: .04em; }
.col-row-title {
  font-family: var(--font-jp-head); font-size: clamp(17px, 2.2vw, 21px); line-height: 1.5;
  margin: 0 0 8px;
}
.col-row-title a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease-std); }
.col-row-title a:hover { color: var(--accent); }
.col-row-excerpt {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.85; color: var(--ink-2); margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.col-row-more { font-family: var(--font-body); font-size: 12.5px; color: var(--accent); text-decoration: none; }
.col-row-more:hover { text-decoration: underline; }

/* --- カテゴリーバッジ --- */
.cat-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--paper); background: var(--accent-strong);
  padding: 4px 12px; border-radius: 999px; text-decoration: none;
  transition: background .2s var(--ease-std);
}
.cat-badge .ico { width: 12px; height: 12px; }
.cat-badge:hover { background: var(--accent-2); }
.cat-badge-lg { font-size: 13px; padding: 6px 15px; margin-bottom: 14px; }

/* --- サイドバー --- */
.col-sidebar { min-width: 0; }
.sidebar-block { margin-bottom: 40px; }
.sidebar-h {
  font-family: var(--font-jp-head); font-size: 16px; font-weight: 600; color: var(--ink);
  padding-bottom: 12px; margin: 0 0 16px; border-bottom: 2px solid var(--accent);
  display: flex; align-items: center;
}
.recent-list, .cat-list { list-style: none; margin: 0; padding: 0; }
.recent-list li { margin-bottom: 14px; }
.recent-list li a { display: flex; gap: 12px; align-items: center; text-decoration: none; }
.recent-thumb {
  flex-shrink: 0; width: 64px; height: 48px; border-radius: var(--radius); overflow: hidden;
  background: var(--bg-3); display: block;
}
.recent-thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-text { min-width: 0; }
.recent-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: var(--font-jp-head); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--ink);
  transition: color .2s var(--ease-std);
}
.recent-list li a:hover .recent-title { color: var(--accent); }
.recent-date { font-family: var(--font-en-head); font-size: 12px; font-weight: 500; color: var(--ink-2); }
.cat-list li { border-bottom: 1px dotted var(--rule); }
.cat-list li a {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 10px 2px; text-decoration: none;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  transition: color .2s var(--ease-std);
}
.cat-list li a:hover { color: var(--accent); }
.cat-count { font-family: var(--font-en-head); font-size: 12px; color: var(--ink-2); }

@media (max-width: 880px) {
  .col-layout { grid-template-columns: 1fr; }
  .col-sidebar { border-top: 1px solid var(--rule); padding-top: 24px; }
}
@media (max-width: 560px) {
  .col-row { flex-direction: column; }
  .col-row-thumb { width: 100%; aspect-ratio: 16 / 9; }
}

/* --- 記事冒頭 TL;DR 要点ボックス（LLM抽出・概要把握） --- */
.col-summary {
  background: var(--bg-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 18px 22px;
  margin: 0 0 28px;
}
.col-summary-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-jp-head); font-size: 13px; font-weight: 600;
  color: var(--accent); margin-bottom: 6px;
}
.col-summary-label .ico { width: 15px; height: 15px; }
.col-summary p {
  margin: 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.85; color: var(--ink-2);
}

/* --- 目次 --- */
.col-toc {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin: 0 0 36px;
}
.col-toc-h {
  font-family: var(--font-jp-head); font-size: 14px; font-weight: 600; color: var(--ink);
  margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.col-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.col-toc li { margin: 0; }
.col-toc li.toc-l3 { padding-left: 18px; }
.col-toc a {
  display: block; padding: 6px 0;
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.6;
  color: var(--ink-2); text-decoration: none;
  transition: color .2s var(--ease-std);
}
.col-toc a:hover { color: var(--accent); text-decoration: underline; }
/* アンカー着地時にトップバー分のオフセット（既存 scroll-padding と整合） */
.col-body :where(h2, h3)[id] { scroll-margin-top: calc(var(--topbar-h) + 16px); }

/* --- ページ上部へ戻るボタン（縦長ページ用・全ページ共通） --- */
.to-top {
  position: fixed; right: 22px; bottom: 26px; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--accent); color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s var(--ease-std), transform .3s var(--ease-out), visibility .3s, background .2s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-2); }
.to-top svg { width: 20px; height: 20px; }
/* モバイルでは下部CTAバーに被らないよう持ち上げる */
@media (max-width: 880px) {
  .to-top { right: 16px; bottom: 80px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s, visibility .2s; transform: none; }
}

/* ============================================================
   スマートフォン: 余白を詰めて1画面の情報量を増やす（調整可能）
   ============================================================ */
@media (max-width: 720px) {
  :root {
    --section-pad: 26px;   /* セクション上下（PC基準 32-52 → モバイルは圧縮） */
    --gut: 18px;           /* 横余白を圧縮 */
  }
  /* モバイルは sticky ヘッダー高さを圧縮（scroll-padding / ドロワーも追従） */
  :root { --topbar-h: 56px; }
  /* trust-ribbon: モバイルでも元サイト同様の説明文（tagline）をトップに表示する。
     1行に収まらない場合は折返し、余白・行間を圧縮して圧迫感を抑える。 */
  .trust-ribbon { padding: 6px 0; font-size: 10.5px; letter-spacing: 0.04em; }
  .trust-ribbon .wrap { gap: 6px; line-height: 1.5; }
  .ribbon-tagline { display: block; text-align: center; }
  .hero { padding-top: 4px; padding-bottom: 16px; }
  .hero-banner { margin-top: 4px; margin-bottom: 12px; }
  .hero-eyebrow-row { margin-bottom: 10px; gap: 8px; }
  /* ヒーロー見出しはモバイルで2行に収める（font を絞って改行数を抑制） */
  .hero h1.h-jp { font-size: clamp(16px, 4.5vw, 30px); line-height: 1.32; letter-spacing: 0; }
  .hero .h-en-sub { margin-top: 8px; }
  .hero-lede { margin-top: 12px; line-height: 1.85; }
  .hero-grid { gap: 14px; }
  /* 肖像が trust stats を画面外へ押し出すため上限を設定。
     モバイルではキャプションを写真に重ねず下に配置し、被写体が隠れないようにする */
  .hero-portrait { aspect-ratio: auto; max-height: none; overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .hero-portrait img { height: 300px; object-position: 50% 22%; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
  .hero-portrait::after { display: none; }
  .portrait-caption { position: static; left: auto; bottom: auto; max-width: none; margin: -22px 14px 0; }
  .section-head { margin-bottom: 16px; }
  .section-head .head-lead { margin-top: 10px; }
  /* セクション見出し H2: モバイルは1行に収めるため縮小（太字は維持） */
  .section-head h2.h-jp { font-size: clamp(18px, 4.6vw, 30px); line-height: 1.34; }
  /* アイコン付き見出し（サロンバナー / メルマガ）も同サイズに揃えて1行化 */
  .legacy-head h2,
  .newsletter-block h2.h-jp { font-size: clamp(18px, 4.8vw, 30px); line-height: 1.34; }
  /* サロン/カウンセリングのカード内余白を圧縮（理念カードと同等に） */
  .salon-body { padding: 20px; }
  .salon-desc { margin: 12px 0; }
  .salon-meta { padding-top: 12px; }
  .menu-row { padding: 18px 8px; gap: 8px; }
  .faq-q { padding: 18px 4px; }
  .faq-item.open .faq-a { padding-bottom: 16px; }
  .gallery { margin-top: 24px; }
  /* NEWS: VIEW ALL をフィード末尾に置いた際の余白・最終CTA */
  .news-more { margin-top: 16px; }
  .final-cta .h-en { margin-bottom: 20px; }
  .col-summary { margin-bottom: 18px; padding: 14px 16px; }
  .col-toc { margin-bottom: 22px; padding: 14px 16px; }
  .col-head { padding: 8px 0 18px; margin-bottom: 22px; }
  .col-author { margin-top: 32px; padding: 18px; }
  .col-related, .col-faq { margin-top: 34px; }
  .booking-embed { margin-top: 14px; }
  .final-cta .ctas { margin-top: 20px; }
}
@media (max-width: 480px) {
  :root { --section-pad: 20px; --gut: 15px; }
  .salon-body { padding: 18px; }
  .menu-row { padding: 14px 8px; }
  .news-feed-item { align-items: start; }
}

/* =========================================
   お悩みキーワード（concerns）— 全パレット追従・トークン駆動
   元デザイン(ダーク前提)をライトテーマ用にトークン化して移植
========================================= */
.concerns-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: clamp(20px, 3vw, 30px) 0;
}
.concern-tag {
  display: inline-block;
  padding: 10px 20px;
  background: color-mix(in oklab, var(--concern-accent, var(--accent)) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--concern-accent, var(--accent)) 45%, transparent);
  border-radius: var(--concern-radius, 30px);
  color: var(--ink);
  font-size: calc(var(--concern-text, 1.05rem) * var(--font-scale));
  line-height: 1.4;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.concern-tag:hover {
  background: color-mix(in oklab, var(--concern-accent, var(--accent)) 14%, transparent);
  border-color: var(--concern-accent, var(--accent));
  box-shadow: 0 0 12px color-mix(in oklab, var(--concern-accent, var(--accent)) 28%, transparent);
}
/* セクションを優しく区切るスピリチュアルライン */
.spiritual-divider {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--concern-accent, var(--accent)) 50%, transparent) 50%, transparent 100%);
  margin: clamp(18px, 4vw, 28px) 0 0;
}
/* シニア層にも優しいユニバーサルテキスト（文字拡大率に連動）*/
.universal-text {
  font-size: calc(1.1rem * var(--font-scale));
  line-height: 1.8;
  color: var(--ink-2);
}
@media (max-width: 720px) {
  .concerns-tags { gap: 8px; margin: 18px 0; }
  .concern-tag { padding: 8px 16px; font-size: calc(0.95rem * var(--font-scale)); }
}

/* =========================================
   ユーティリティ（インラインstyle集約・a11y）
========================================= */
/* スクリーンリーダー専用（視覚的に隠すが読み上げ対象に残す）*/
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
/* セクション補足注記（旧: 各所のインライン margin-top:24px; max-width:46em を集約）*/
.section-note { margin-top: 16px; max-width: 46em; }
/* プロフィール英字名（旧: profile.njk のインライン）*/
.name-en-inline {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 0.6em;
  color: var(--ink-3);
}
/* ピアノ見出し（旧: piano.njk のインライン）*/
.piano-heading { font-size: clamp(28px, 3.4vw, 44px); margin: 0 0 16px; }
/* 余白削減: 旧インライン margin の集約（ハードコード回避・調整可能） */
#piano .hero-cta { margin-top: 24px; }
.final-cta .eyebrow { margin-bottom: 12px; }
.final-cta .body-sm { margin-top: 20px; }
.col-cta-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
/* ニュースレター中央ブロック（旧: newsletter.njk のインライン）*/
.newsletter-block { text-align: center; max-width: 42em; margin-inline: auto; }
.newsletter-block .eyebrow { margin-bottom: 12px; }
.newsletter-block .head-lead { margin-top: 14px; margin-bottom: 20px; }

/* === YouTube セクション === */
.youtube-feature {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.youtube-thumb {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
}
.youtube-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform .6s var(--ease-std), filter .4s;
}
.youtube-thumb:hover img { transform: scale(1.04); filter: saturate(1.05); }
.youtube-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--ink) 12%, transparent);
  transition: background .3s;
}
.youtube-play svg { filter: drop-shadow(0 4px 14px rgba(0,0,0,.35)); transition: transform .3s var(--ease-out); }
.youtube-thumb:hover .youtube-play { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.youtube-thumb:hover .youtube-play svg { transform: scale(1.08); }
.youtube-summary {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 24px;
}
@media (max-width: 880px) {
  .youtube-feature { grid-template-columns: 1fr; gap: 22px; }
}

/* === スピリチュアルカウンセリングとは ページ (/spiritual-counseling/) === */
.sc-section { margin-top: clamp(32px, 5vw, 56px); }
.sc-section > h2.h-jp { margin-bottom: 16px; }
.sc-prose p { font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 62em; margin: 0 0 1.1em; }
.sc-callout {
  margin: 18px 0 4px; padding: 16px 20px; font-size: 14px; line-height: 1.85;
  background: var(--bg-2); border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius); color: var(--ink-2);
}
.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; }
.compare-table {
  width: 100%; min-width: 540px; border-collapse: collapse;
  font-size: 14px; line-height: 1.8; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden;
}
.compare-table th, .compare-table td { padding: 13px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.compare-table thead th { font-family: var(--font-jp-head); background: var(--bg-2); color: var(--ink); letter-spacing: .04em; border-bottom: 2px solid color-mix(in oklab, var(--accent) 30%, var(--rule)); }
.compare-table tbody th { font-family: var(--font-jp-head); font-weight: 500; color: var(--ink-3); white-space: nowrap; background: color-mix(in oklab, var(--bg-2) 55%, transparent); }
.compare-table td { color: var(--ink-2); }
.compare-table td.col-sc { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.sc-glossary { display: grid; gap: 12px; margin: 6px 0 0; padding: 0; list-style: none; }
.sc-glossary li { padding: 14px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); }
.sc-glossary .term { font-family: var(--font-jp-head); color: var(--ink); font-size: 15px; letter-spacing: .03em; }
.sc-glossary .term .en { font-family: var(--font-en-head); font-style: italic; color: var(--accent); font-size: .88em; margin-left: 6px; }
.sc-glossary .def { display: block; margin-top: 5px; font-size: 14px; line-height: 1.8; color: var(--ink-2); }

/* サロンカードの詳細リンク（鎌倉サロン等） */
.salon-detail-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; align-self: flex-start;
  font-family: var(--font-jp-head); font-size: 14px; letter-spacing: .04em;
  color: var(--accent-strong); border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent);
  padding-bottom: 2px; transition: gap .25s var(--ease-out), border-color .25s;
}
.salon-detail-link:hover { gap: 10px; border-color: var(--accent); }

/* === 鎌倉サロン詳細ページ (/kamakurasalon/) === */
.ks-hero { margin: 0 0 clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--rule); }
.ks-hero img { display: block; width: 100%; height: auto; }
.ks-info {
  display: grid; gap: 10px; margin: 0 0 clamp(24px, 4vw, 40px);
  padding: 20px 24px; background: var(--bg-2);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.ks-info > div { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; line-height: 1.7; }
.ks-info .k { min-width: 7em; color: var(--ink-3); letter-spacing: .08em; font-family: var(--font-jp-head); }
.ks-info .v { color: var(--ink-2); }
.ks-note { font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.ks-section { margin-top: clamp(32px, 5vw, 56px); }
.ks-section > h2.h-jp { margin-bottom: 16px; }
.ks-prose p { font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 62em; margin: 0 0 1.1em; }
.ks-sub { margin-top: clamp(22px, 3.5vw, 36px); }
.ks-sub > h3 { font-family: var(--font-jp-head); font-size: clamp(18px, 2.2vw, 22px); margin: 0 0 12px; color: var(--ink); letter-spacing: .04em; }
.ks-spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 6px; }
.ks-spot-grid figure { margin: 0; }
.ks-spot-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); display: block; border: 1px solid var(--rule); }

/* ブランドマーク（原サイトのfaviconロゴ）をセクションタイトルのアイコンに */
.brand-icon {
  display: inline-block;
  width: 18px; height: 18px;
  vertical-align: -0.22em;
  margin-right: 8px;
  border-radius: 4px;
  object-fit: contain;
}

/* ============================================================
   counseling 詳細ページ（/counseling/）— 旧 WP harmony-mc.com/counseling/ 復元
   ============================================================ */
.counseling-page .breadcrumb { margin-bottom: 18px; }
.menu-detail-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.menu-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.menu-detail-fig {
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
  aspect-ratio: 4 / 3;
}
.menu-detail-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.menu-detail-title {
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  margin: 0 0 14px;
}
.menu-detail-note {
  font-size: 13px;
  color: var(--ink-3);
  margin: -6px 0 12px;
  padding-left: 10px;
  border-left: 2px solid var(--accent-2);
}
.menu-detail-lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.menu-detail-prices {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border-top: 1px solid var(--rule);
}
.menu-detail-prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 4px;
  border-bottom: 1px solid var(--rule);
  gap: 16px;
}
.menu-detail-prices .dur {
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.menu-detail-prices .yen {
  font-family: var(--font-en-head);
  font-size: 23px;
  color: var(--ink);
  font-weight: 600;
}
.menu-detail-cta { margin: 0; }
.menu-detail-cta .btn-primary {
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

/* 注意事項ブロック */
.menu-notes {
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: clamp(24px, 3vw, 36px);
  background: color-mix(in oklab, var(--bg) 60%, transparent);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.menu-notes h2 {
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 18px;
}
.menu-notes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 14px;
}
.menu-notes-list li {
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--ink-2);
  padding-left: 18px;
  position: relative;
}
.menu-notes-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}
.menu-notes-more {
  margin: 6px 0 0;
  font-size: 14px;
}
.menu-notes-more a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* LPからの詳細ページ誘導リンク */
.menu-detail-link {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  text-align: right;
  font-size: 14px;
}
.menu-detail-link a {
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.menu-detail-link a:hover { color: var(--ink); }

.menu-back {
  margin: clamp(28px, 3vw, 40px) 0 0;
  text-align: center;
  font-size: 14px;
}
.menu-back a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 3px; }
.menu-back a:hover { color: var(--ink); border-color: var(--ink); }

/* モバイル: 画像と本文を縦並びに */
@media (max-width: 720px) {
  .menu-detail {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .menu-detail-fig { aspect-ratio: 16 / 10; }
  .menu-detail-title { font-size: clamp(18px, 4.6vw, 24px); margin-bottom: 10px; }
  .menu-detail-lead { font-size: 14px; line-height: 1.85; }
  .menu-detail-prices .yen { font-size: 16px; }
}

/* ============================================================
   セミナー・講座ページ (/seminar/) — .sem-*
   骨格: .wrap / .breadcrumb / .section-head / .menu-back を流用。
   既存 .sc-/.ks- と調和（--bg-2 カード / --rule 枠 / accent 左罫）。
   トークンのみ使用・横スクロール禁止（minmax(0,1fr)/min-width:0）・タップ44px以上。
   メディアクエリは既存流儀（max-width デスクトップファースト）。
   ============================================================ */

/* ヒーロー（旧サイトの講座風景バナー・横長） */
.sem-hero {
  margin: clamp(20px, 3vw, 32px) 0 clamp(26px, 4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.sem-hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* リード（講座の特徴・理念） */
.sem-intro {
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.sem-intro > h2.h-jp { margin: 0 0 14px; }
.sem-intro p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62em;
  margin: 0 0 1.1em;
}
.sem-intro p:last-child { margin-bottom: 0; }

/* セクション */
.sem-section { margin-top: clamp(34px, 5vw, 60px); }
.sem-section > h2.h-jp { margin-bottom: 14px; }
.sem-prose p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62em;
  margin: 0 0 1.1em;
}
.sem-prose p:last-child { margin-bottom: 0; }

.sem-note {
  margin: 18px 0 0;
  padding: 14px 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
}

/* セミナーハブ→詳細記事への導線リンク */
.sem-detail-link {
  margin: 18px 0 0;
  font-size: 15px;
}
.sem-detail-link a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.sem-detail-link a:hover { opacity: .8; }

/* 開催状況バッジ（募集中 / 終了）— /latest/ セミナー記事 */
.sem-status {
  display: inline-block;
  margin: 0 0 12px;
  padding: 4px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  border: 1px solid var(--rule);
  color: var(--ink-2);
  background: var(--bg);
}
.sem-status--recruiting {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
.sem-status--ended {
  color: var(--ink-2);
  background: var(--bg);
  border-color: var(--rule);
  opacity: .85;
}
/* カード上のバッジ配色（col-card 内の cat-badge を上書き） */
.cat-badge.sem-status--recruiting { color: var(--accent); font-weight: 600; }
.cat-badge.sem-status--ended { color: var(--ink-2); opacity: .8; }
.sem-ended-note {
  margin: 0 0 22px;
  padding: 12px 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg);
  border: 1px dashed var(--rule);
  border-radius: var(--radius);
}

/* 関連するセミナー・講座（/latest 記事下部・同カテゴリの他記事一覧） */
.sem-related {
  margin: clamp(32px, 5vw, 48px) 0 0;
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid var(--rule);
}
.sem-related > h2 {
  font-size: clamp(18px, 2.2vw, 22px);
  margin: 0 0 18px;
}
.sem-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
.sem-related-link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 16px 18px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-std), border-color .2s var(--ease-std);
}
.sem-related-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--accent);
}
.sem-related-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.sem-related-title {
  font-family: var(--font-jp-head);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.5;
  color: var(--ink);
}
.sem-related-date {
  font-family: var(--font-en-head);
  font-size: 13px;
  color: var(--ink-3, var(--ink-2));
  white-space: nowrap;
}

/* 養成プログラム（4段階ステップ） */
.sem-steps {
  list-style: none;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  counter-reset: none;
}
.sem-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2.4vw, 26px);
  align-items: start;
  padding: clamp(18px, 2.4vw, 26px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.sem-step-no {
  font-family: var(--font-en-head);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent);
  white-space: nowrap;
  padding-top: 2px;
}
.sem-step-body { min-width: 0; }
.sem-step-body h3 {
  font-family: var(--font-jp-head);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink);
  margin: 0 0 8px;
}
.sem-step-body p {
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.sem-step-meta {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-family: var(--font-jp-head);
}

/* 体験セミナー（カード3枚） */
.sem-grid {
  margin: clamp(18px, 2.5vw, 26px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--block-gap);
}
.sem-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-std);
}
.sem-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.sem-card-thumb {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-3);
}
.sem-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sem-card-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(18px, 2.2vw, 24px);
}
.sem-num {
  font-family: var(--font-en-head);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin: 0 0 8px;
}
.sem-title {
  font-family: var(--font-jp-head);
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 12px;
  text-wrap: pretty;
}
.sem-desc {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.sem-features {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
  display: grid;
  gap: 9px;
}
/* カード内の「詳しく見る →」導線（experience カードに href がある場合のみ描画） */
.sem-card-more {
  margin: 16px 0 0;
  font-size: 14px;
}
.sem-card-more a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.sem-card-more a:hover { opacity: .8; }
.sem-features li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
}
.sem-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}

/* 養成講座ステップ内のカリキュラム詳細（desc/meta と区切る） */
.sem-step-details { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bg-3); }

/* 開催概要などの仕様リスト（ラベル／値の定義リスト） */
.sem-spec {
  list-style: none;
  padding: 0;
  margin: clamp(14px, 2vw, 20px) 0 0;
  border-top: 1px solid var(--bg-3);
}
.sem-spec > div {
  display: grid;
  grid-template-columns: minmax(88px, 150px) 1fr;
  gap: 10px 18px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--bg-3);
}
.sem-spec dt { font-weight: 600; color: var(--ink); font-size: 14px; letter-spacing: 0.02em; }
.sem-spec dd { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.85; }
@media (max-width: 520px) {
  .sem-spec > div { grid-template-columns: 1fr; gap: 3px; }
}

/* FAQ（details/summary・JS不要） */
.sem-faq {
  display: grid;
  gap: 12px;
  margin: clamp(18px, 2.5vw, 26px) 0 0;
}
.sem-faq-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg-2);
  overflow: hidden;
}
.sem-faq-item > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding: 14px 18px;
  font-family: var(--font-jp-head);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.sem-faq-item > summary::-webkit-details-marker { display: none; }
.sem-faq-item > summary::after {
  content: "＋";
  flex-shrink: 0;
  font-family: var(--font-en-head);
  color: var(--accent);
}
.sem-faq-item[open] > summary::after { content: "−"; }
.sem-faq-item > summary:hover { color: var(--accent); }
.sem-faq-answer {
  padding: 2px 18px 16px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
}

/* 申込・お問い合わせブロック */
.sem-cta-block {
  margin: clamp(36px, 4.5vw, 60px) 0 0;
  padding: clamp(24px, 3.5vw, 40px);
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
}
/* 上部CTA（intro直後・すぐ申し込めるよう先頭に配置）は余白を少し詰める */
.sem-cta-block--top { margin-top: clamp(20px, 2.6vw, 32px); }
.sem-cta-block > h2.h-jp {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.4vw, 28px);
}
.sem-cta-block .sem-cta-lead {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 40em;
  margin: 0 auto 22px;
}
.sem-cta-block .hero-cta { justify-content: center; }
.sem-cta-block .btn-primary,
.sem-cta-block .btn-ghost { min-height: 44px; }

@media (max-width: 880px) {
  .sem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sem-grid { grid-template-columns: 1fr; }
  .sem-step { grid-template-columns: 1fr; gap: 6px; }
  .sem-step-no { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sem-card { transition: none; }
  .sem-card:hover { transform: none; }
}

/* ============================================================
   著書・CD ページ (/spiritual-books/) — .bookpage-*
   ※ 既存トップ #books の .book-card/.book-cover/.book-title/.book-meta とは
      別プレフィックス（.bookpage-*）で衝突回避（デグレ防止）。
   骨格: .wrap / .breadcrumb / .section-head / .menu-back を流用。
   カードは書影(左)＋本文(右)。モバイルは縦積み。横スクロール禁止・タップ44px以上。
   ============================================================ */

/* セクション末尾「詳しく見る」リンク（books.njk・既存 salon-detail-link 流用） */
.books-more {
  margin: clamp(20px, 3vw, 30px) 0 0;
  text-align: center;
}

.bookpage-intro {
  margin: clamp(20px, 3vw, 32px) 0 clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.bookpage-intro p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62em;
  margin: 0;
}

.bookpage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.bookpage-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.bookpage-cover {
  margin: 0;
  min-width: 0;
  width: 100%;
  max-width: 220px;
  justify-self: center;
}
.bookpage-cover img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: calc(var(--radius) - 1px);
  box-shadow: var(--shadow-md);
}

.bookpage-body { min-width: 0; }

.bookpage-title {
  font-family: var(--font-jp-head);
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.bookpage-title .en {
  display: block;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 0.6em;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-top: 4px;
}
.bookpage-author {
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.bookpage-author .by {
  color: var(--ink-3);
  font-size: 12px;
  margin-right: 5px;
  font-family: var(--font-jp-head);
}

/* メタ定義リスト（ks-info 流儀） */
.bookpage-meta {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.bookpage-meta > div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 14px;
  line-height: 1.7;
  min-width: 0;
  margin: 0;
}
.bookpage-meta dt {
  min-width: 5em;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  font-family: var(--font-jp-head);
  margin: 0;
}
.bookpage-meta dd {
  color: var(--ink-2);
  min-width: 0;
  margin: 0;
  word-break: break-word;
}
.bookpage-meta dd.price {
  font-family: var(--font-en-head);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
}

.bookpage-desc p {
  font-size: 15px;
  line-height: 1.95;
  color: var(--ink-2);
  max-width: 62em;
  margin: 0 0 1.1em;
}
.bookpage-desc p:last-child { margin-bottom: 0; }

.bookpage-highlight {
  margin: 18px 0 4px;
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-2);
  border-radius: var(--radius);
}
.bookpage-highlight h3 {
  font-family: var(--font-jp-head);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 8px;
}
.bookpage-highlight ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.bookpage-highlight li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-2);
}
.bookpage-highlight li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}

.bookpage-buy {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.bookpage-buy .btn-primary,
.bookpage-buy .btn-ghost {
  width: auto;
  max-width: 100%;
  min-height: 44px;
}

@media (max-width: 880px) {
  .bookpage-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr); gap: 24px; }
}
@media (max-width: 720px) {
  .bookpage-card { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .bookpage-cover { max-width: 190px; }
  .bookpage-title { font-size: clamp(18px, 4.6vw, 24px); }
  .bookpage-desc p { font-size: 14px; line-height: 1.85; }
  .bookpage-meta { padding: 14px 16px; }
  .bookpage-buy .btn-primary,
  .bookpage-buy .btn-ghost { width: 100%; justify-content: center; }
}

/* プロフィール 資格・所属ブロック */
.profile-credentials {
  margin-top: clamp(20px, 3vw, 28px);
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.profile-credentials-title {
  font-family: var(--font-jp-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin: 0 0 10px; /* h3 化に伴いブラウザ既定の上下マージンを打ち消す */
}
.credentials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.credentials-list li {
  position: relative;
  padding-left: 16px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.credentials-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* メールマガジン休止中の注記 */
.newsletter-notice {
  margin: 6px auto 0;
  max-width: 40em;
  padding: 12px 18px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

/* ============================================================
   ヒーロー実テキスト化（写真＋HTMLテキストのオーバーレイ）
   ・焼き込みテキストを廃し、見出し/価値提案を実テキストでレンダリング
   ・淡い写真でも可読になるよう左から paper スクリムを敷く
   ・モバイルは写真の下にテキストを積む（短いバナー上の重ねは破綻するため）
   ============================================================ */
.hero-banner { position: relative; line-height: normal; }
.hero-banner > picture,
.hero-banner > picture > img { display: block; width: 100%; height: auto; }
/* ヒーロー動画: 横長バナーに合わせ object-fit:cover で高さを制御（3:2素材を帯状に） */
.hero-banner > video.hero-video {
  display: block;
  width: 100%;
  height: clamp(360px, 52vh, 600px);
  object-fit: cover;
  object-position: center 40%;
  background: var(--bg-2);
}
@media (max-width: 720px) {
  .hero-banner > video.hero-video { height: clamp(200px, 34vh, 300px); }
}
/* 動きを抑える設定では自動再生を弱める（poster が見える） */
@media (prefers-reduced-motion: reduce) {
  .hero-banner > video.hero-video { /* JS で pause、poster 表示にフォールバック */ }
}
.hero-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(95deg,
    color-mix(in oklab, var(--paper) 88%, transparent) 0%,
    color-mix(in oklab, var(--paper) 64%, transparent) 30%,
    color-mix(in oklab, var(--paper) 14%, transparent) 52%,
    transparent 70%);
}
.hero-overlay-inner {
  position: absolute; inset: 0; z-index: 2;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gut);
  display: flex; align-items: center;
}
.hero-content { max-width: 38em; }
.hero-content .hero-eyebrow {
  font-family: var(--font-en-head); font-style: italic;
  font-size: clamp(13px, 1.2vw, 15px); letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 14px;
}
.hero-content .hero-title.h-jp {
  font-size: clamp(25px, 3.4vw, 50px); line-height: 1.34; letter-spacing: 0.02em;
  color: var(--ink); margin: 0; text-align: left; text-wrap: balance;
}
.hero-content .hero-lede {
  margin-top: clamp(14px, 1.6vw, 20px); max-width: 30em;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.95; color: var(--ink-2);
}
.hero-content .hero-cta { margin-top: clamp(18px, 2vw, 28px); justify-content: flex-start; }
/* ヒーローの「お悩みチップ」— 検索意図に即した具体テーマ導線。
   data 駆動（site.hero.chips・enabledItems でトグル）。動画上でも可読なよう paper 背景。 */
.hero-chips {
  list-style: none; margin: clamp(14px, 1.6vw, 20px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px 10px; max-width: 34em;
}
.hero-chips li { margin: 0; }
.hero-chip {
  display: inline-block; padding: 7px 14px; border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 78%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 38%, transparent);
  color: var(--ink-2); text-decoration: none; line-height: 1.3;
  font-size: clamp(12px, 0.95vw, 13.5px); letter-spacing: 0.01em;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.hero-chip:hover {
  background: color-mix(in oklab, var(--accent) 12%, var(--paper));
  border-color: var(--accent); color: var(--ink);
}

/* 動画ヒーロー（HTMLタイトル併用）: 動画を絶対配置の「背景」にし、高さはオーバーレイ内容で決める。
   これによりコピー量（見出し・lede・CTA・チップ）が増えても動画帯から溢れない。デスクトップのみ。 */
@media (min-width: 721px) {
  .hero-banner.has-video { position: relative; }
  .hero-banner.has-video > video.hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .hero-banner.has-video > .hero-overlay-inner {
    position: relative; inset: auto;
    min-height: clamp(420px, 60vh, 640px);
    padding-block: clamp(30px, 5vh, 60px);
  }
}

/* 動画に見出しが焼き込まれているヒーロー（site.hero.banner.textBaked）。
   左スクリムを下スクリムに替え、CTA・チップを下部中央へ寄せて中央の焼き込み文字と干渉させない。 */
.hero-banner.text-baked::after {
  background: linear-gradient(to top,
    color-mix(in oklab, var(--paper) 82%, transparent) 0%,
    color-mix(in oklab, var(--paper) 40%, transparent) 22%,
    transparent 46%);
}
.hero-banner.text-baked .hero-overlay-inner { align-items: flex-end; }
.hero-banner.text-baked .hero-content {
  max-width: none; width: 100%;
  padding-bottom: clamp(16px, 3vh, 30px);
  display: flex; flex-direction: column; align-items: center;
}
.hero-banner.text-baked .hero-cta { justify-content: center; }
.hero-banner.text-baked .hero-chips { justify-content: center; max-width: 42em; }

@media (max-width: 720px) {
  /* 焼き込みヒーローはモバイルでも動画の下に CTA・チップを中央配置 */
  .hero-banner.text-baked .hero-content { align-items: center; text-align: center; }
  .hero-banner.text-baked .hero-chips { justify-content: center; }
  /* お悩みチップを約半分のサイズに圧縮（第一画面に収めるため） */
  .hero-content .hero-chips { gap: 5px 6px; margin-top: clamp(8px, 2.5vw, 12px); max-width: none; }
  .hero-content .hero-chip { padding: 3.5px 9px; font-size: 11px; line-height: 1.25; }
  /* 画像とクイックメニューの隙間（content の上 padding＋menu の上 margin）を除去し密着 */
  .hero-banner.text-baked .hero-content { padding-top: 0; padding-bottom: clamp(4px, 1.5vw, 8px); }
  .hero-banner.text-baked .hero-content .hero-quickmenu { margin-top: 0; }
  /* チップ〜サロン間の余白を圧縮（ヒーロー下 margin・ヒーロー section 下 padding を詰める） */
  .hero-banner.text-baked { margin-bottom: 0; }
  .hero { padding-bottom: 0; }
  .hero-banner::after { display: none; }
  .hero-overlay-inner { position: static; display: block; padding: 0; max-width: none; }
  .hero-content {
    max-width: none;
    padding: clamp(18px, 5vw, 26px) var(--gut) clamp(4px, 2vw, 12px);
  }
  .hero-content .hero-title.h-jp { font-size: clamp(22px, 6vw, 32px); line-height: 1.4; }
  .hero-content .hero-lede { margin-top: 12px; }
}

/* ============================================================
   モバイル・ヒーロー重ね（≤720px・焼き込み以外）
   要望: PC同様に「アイキャッチ＋見出し＋予約CTA」を画像/動画に重ね、
   説明文(lede)とお悩みチップは画像の下（paper地）に置く。
   実装: メディアを上部の固定高「帯」として絶対配置し、その帯の上に
   アイキャッチ＋見出し＋CTA を重ねる。帯上部に paper スクリムを敷いて
   濃色テキストの可読性を確保（PCの左スクリムのモバイル版）。説明文・チップは
   flex order で後ろへ回し、メディア帯の下（地の paper 上）に通常表示する。
   メディア帯高さ(--hero-mh)は見出し帯と概ね一致させ、説明文が画像下に出るよう調整。
   ============================================================ */
@media (max-width: 720px) {
  .hero-banner:not(.text-baked) { position: relative; overflow: hidden; border-radius: var(--radius); }
  /* メディア（動画/画像）をバナー全面の背景に（高さは内容が決める）。
     説明文・チップは不透明 paper パネルで覆うので、見出し長に関わらず画像へ重ならない。 */
  .hero-banner:not(.text-baked) > picture { position: absolute; inset: 0; z-index: 0; }
  .hero-banner:not(.text-baked) > video.hero-video,
  .hero-banner:not(.text-baked) > picture > img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center 34%; z-index: 0;
  }
  /* 見出し帯の可読性スクリム（白文字を載せるため上部をダークに・下方は写真を残す） */
  .hero-banner:not(.text-baked)::after {
    display: block; content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--ink) 72%, transparent) 0%,
      color-mix(in oklab, var(--ink) 48%, transparent) 27%,
      color-mix(in oklab, var(--ink) 16%, transparent) 49%,
      transparent 64%);
  }
  .hero-banner:not(.text-baked) > .hero-overlay-inner {
    position: relative; z-index: 2; display: block; padding: 0; inset: auto; max-width: none;
  }
  /* hero-content を flex 化。アイキャッチ＋見出しを画像へ重ね、説明文・チップは order で後ろへ。 */
  .hero-banner:not(.text-baked) .hero-content {
    display: flex; flex-direction: column; max-width: none;
    padding: clamp(16px, 4.5vw, 22px) var(--gut) 0;
  }
  .hero-banner:not(.text-baked) .hero-content .hero-eyebrow { margin-bottom: 6px; }
  /* 画像に重なる見出し・アイキャッチは白文字＋ソフトシャドウで可読性を確保（ダークスクリム上） */
  .hero-banner:not(.text-baked) .hero-content .hero-title {
    color: var(--paper);
    text-shadow: 0 1px 12px color-mix(in oklab, var(--ink) 68%, transparent);
  }
  .hero-banner:not(.text-baked) .hero-content .hero-title .accent-word {
    background: none; color: var(--paper);
    -webkit-text-fill-color: var(--paper); -webkit-background-clip: border-box; background-clip: border-box;
  }
  .hero-banner:not(.text-baked) .hero-content .hero-eyebrow {
    color: color-mix(in oklab, var(--paper) 84%, var(--accent));
    text-shadow: 0 1px 8px color-mix(in oklab, var(--ink) 58%, transparent);
  }
  /* 説明文＝メディアの「下」: 不透明 paper パネルで全幅に敷き、画像との重なりを物理的に回避。
     パネルの上端＝画像の下端に見えるため、見出しがどんな長さでも説明文は必ず画像の下に出る。 */
  /* クイックメニュー: ヒーロー画像の直下に隙間なく連結（in serial）。lede・chips より上 */
  .hero-banner:not(.text-baked) .hero-content .hero-quickmenu {
    order: 1; margin-top: 0;
  }
  .hero-banner:not(.text-baked) .hero-content .hero-lede {
    order: 2; margin: 0 calc(-1 * var(--gut));
    padding: clamp(14px, 4vw, 18px) var(--gut) 0;
    background: var(--paper); box-shadow: 0 -1px 0 var(--rule);
  }
  .hero-banner:not(.text-baked) .hero-content .hero-chips {
    order: 3; margin: 0 calc(-1 * var(--gut));
    padding: clamp(10px, 3vw, 14px) var(--gut) clamp(14px, 4vw, 18px);
    background: var(--paper); max-width: none;
  }
}

/* ============================================================
   スマホ専用クイックメニュー（.hero-quickmenu）
   ・ヒーロー画像の「前（上）」に 6枠の主要メニューを提示
   ・太線(2px)の外周フレーム＋セル間の細線で区切る格子レイアウト
   ・PC では非表示（既存のグローバルナビ／ドロップダウンで導線確保）
   ・内容は data 駆動（site.hero.quickMenu・enabledItems）
   ============================================================ */
.hero-quickmenu { display: none; }
@media (max-width: 720px) {
  .hero-quickmenu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 画面両端まで最大化（フルブリード）。横スクロールは body の overflow-x で吸収 */
    width: 100vw; max-width: 100vw;
    margin: clamp(12px, 3.5vw, 16px) calc(50% - 50vw) 0;
    border-block: 2px solid var(--hqm-bg);
    overflow: hidden;
    background: var(--hqm-bg);
  }
  .hqm-item {
    display: flex; align-items: center; justify-content: center;
    min-height: 30px; padding: 6px 12px;
    text-decoration: none; color: var(--hqm-ink);
    background: var(--hqm-bg);
    /* セル間の区切り線（茶色地に映える白の細線・外周は 2px フレームが担うので内側のみ） */
    border-top: 1.5px solid color-mix(in oklab, var(--hqm-ink) 40%, transparent);
    border-left: 1.5px solid color-mix(in oklab, var(--hqm-ink) 40%, transparent);
    transition: background .2s ease;
  }
  .hqm-item:nth-child(-n + 2) { border-top: none; } /* 最上段は外周フレームと重複させない */
  .hqm-item:nth-child(odd) { border-left: none; }   /* 左列は外周フレームと重複させない */
  .hqm-item:active { background: color-mix(in oklab, #000 16%, var(--hqm-bg)); }
  .hqm-label {
    font-family: var(--font-jp-head); font-weight: 600;
    font-size: clamp(12.5px, 3.5vw, 14px); line-height: 1.3; letter-spacing: 0.01em;
    text-align: center;
  }
}

/* ============================================================
   「初めての方へ」セクション — .ft-*
   ============================================================ */
.ft-grid {
  margin-top: clamp(20px, 3vw, 30px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--block-gap);
}
.ft-card {
  min-width: 0;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.ft-q {
  font-family: var(--font-jp-head);
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
  padding-left: 26px;
  position: relative;
}
.ft-q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 17px;
  color: var(--accent);
}
.ft-a {
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink-2);
  margin: 0;
  padding-left: 26px;
  position: relative;
}
.ft-a::before {
  content: "A";
  position: absolute;
  left: 0;
  top: -1px;
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 17px;
  color: var(--accent-2);
}
.ft-cta { margin-top: clamp(24px, 3vw, 36px); }

/* お客様の声 — 悩み別タグ */
.t-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 12px;
}
.t-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-jp-head);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 28%, var(--rule));
}
.t-tag svg { width: 11px; height: 11px; opacity: 0.8; }

/* プロフィール 資格の権威注記 */
.credentials-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .ft-grid { grid-template-columns: 1fr; }
}

/* ===== PWA インストール促進バナー（スマホ・設定駆動・トークン配色） ===== */
:root { --pwa-h: 56px; }
/* バナー高さ分を first paint 前に予約し CLS を出さない（JS が html.pwa-on を head で付与） */
html.pwa-on body { padding-top: var(--pwa-h); }

.pwa-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--pwa-h);
  padding: 8px 12px;
  background: var(--paper, #FFFCF8);
  color: var(--ink, #2C1B13);
  border-bottom: 1px solid var(--rule, #F2D3BD);
  box-shadow: 0 2px 12px -6px rgba(0,0,0,.25);
  font-family: inherit;
}
.pwa-banner__icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  flex: 0 0 auto;
}
.pwa-banner__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  flex: 1 1 auto;
}
.pwa-banner__txt strong { font-size: 13px; font-weight: 700; }
.pwa-banner__txt span {
  font-size: 11px;
  color: var(--ink-3, #7A5645);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pwa-banner__cta {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-strong, #B0481A);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.pwa-banner__close {
  flex: 0 0 auto;
  width: 32px; height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink-3, #7A5645);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* iOS 用「ホーム画面に追加」手順シート */
.pwa-sheet {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20,12,8,.5);
}
.pwa-sheet[hidden] { display: none; }
.pwa-sheet__card {
  width: 100%;
  max-width: 480px;
  background: var(--paper, #FFFCF8);
  color: var(--ink, #2C1B13);
  border-radius: 18px 18px 0 0;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 40px -12px rgba(0,0,0,.4);
}
.pwa-sheet__title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.pwa-sheet__steps {
  margin: 0; padding-left: 1.3em;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 14px; line-height: 1.7;
}
.pwa-sheet__steps .pwa-ic {
  display: inline-flex;
  vertical-align: -4px;
  margin: 0 4px;
  color: var(--accent, #E86A3C);
}
.pwa-sheet__close {
  margin-top: 18px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--accent, #E86A3C);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

/* デスクトップでは（JS 側で出さないが保険として）バナー余白を予約しない */
@media (min-width: 721px) {
  html.pwa-on body { padding-top: 0; }
  .pwa-banner { display: none; }
}

/* ============================================================
   PC限定 (≥721px) のレイアウト調整（スマホは不変）
   ① ヒーロー直下に「予約カレンダー(#booking)」「カウンセリングメニュー(#counseling)」を移動
   ② 焼き込みヒーロー: CTA帯を画像に重ねず画像の直下へ（スクリム撤去で画像くっきり）
   ============================================================ */
@media (min-width: 721px) {
  /* ① 並び替え: #top を flex 列にし order で制御。full-bleed 子のはみ出しは min-width:0 で抑止 */
  #top { display: flex; flex-direction: column; }
  #top > * { order: 5; min-width: 0; }
  #top > .hero { order: 0; }
  #top > #news { order: 1; }         /* 新着情報をキーワード直下・カレンダー前へ（第一画面） */
  #top > #salons-top { order: 2; }  /* サロン案内の複製（キーワード下・カレンダー前） */
  #top > #booking { order: 3; }
  #top > #counseling { order: 4; }
  /* 原本 #legacy は order 指定なし＝既定(5)で従来の下方位置に残す（複製＝上下両方に表示） */
  .salons-top { display: block; padding-block: clamp(16px, 2.5vw, 30px); }
  /* 並び替えで位置が崩れる区切り線は PC では非表示（各 section-pad の余白で分離） */
  #top > hr.rule { display: none; }

  /* ② 焼き込みヒーロー: overlay-inner を絶対配置→通常フロー化し、CTA帯を画像の【直下】へ。
       コンテンツが画像外に出るので白スクリムは不要（撤去＝画像が完全にくっきり＝透過解消）。 */
  .hero-banner.text-baked::after { display: none; }
  .hero-banner.text-baked > .hero-overlay-inner {
    position: static;
    inset: auto;
    display: block;
    padding-block: clamp(16px, 2vw, 28px);
  }
  .hero-banner.text-baked .hero-content { padding-bottom: 0; }
  /* ヒーロー画像の高さを約120%に拡大（31.6vw→37.5vw・cover維持で縦に広げる・PC のみ） */
  .hero-banner > picture > img { height: 37.5vw; object-fit: cover; }
  /* キーワードチップ（お悩みハッシュタグ）。広い画面では1行に収まり、
     タブレット幅では折り返してはみ出さない（横スクロール禁止・global §C）。
     nowrap だと6個を強制1行にしてタブレットで画面外へはみ出すため wrap にする。 */
  .hero-chips { flex-wrap: wrap; max-width: none; justify-content: center; }
  /* 各チップは縮ませず・文字も折り返さず表示（"恋愛・夫婦のこと"等を内部改行しない） */
  .hero-chips li { flex-shrink: 0; }
  .hero-chips .hero-chip { white-space: nowrap; }

  /* ③ ヘッダーを太線フレームで目立たせる（PC のみ） */
  .topbar {
    border-top: 2px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    box-shadow: 0 4px 0 0 color-mix(in oklab, var(--accent) 22%, transparent);
  }
}

/* ④ 各メニュー項目の枠を「太いブラウン」に（デスクトップのインラインナビのみ・スマホ/タブレットのドロワー不変）。
   ブラウンはトークン --ink-2(#50352A) を参照（ハードコード回避）。 */
@media (min-width: 881px) {
  body[data-nav="frame"] .nav-top {
    border: 2px solid var(--ink-2);
    background: color-mix(in oklab, var(--paper) 70%, transparent);
  }
  body[data-nav="frame"] .nav-top:hover {
    border-color: var(--ink);
    background: color-mix(in oklab, var(--ink-2) 8%, transparent);
  }
}

/* ⑤ デスクトップのブランドを添付の形に構成（PC のみ・スマホ不変）:
   上段 = "Spiritual Harmony"（伊体セリフ）＋ カタカナ／下段サブタイトル = 日本スピリチュアルサポート研究所　小林由起子　女性専用。
   既存の「デスクトップは brand-jp / brand-sub 非表示」を上書きして両方表示する。 */
@media (min-width: 881px) {
  .brand { align-items: center; }
  .brand-text { line-height: 1.15; }
  .brand-row { align-items: baseline; gap: 8px; flex-wrap: nowrap; }
  /* カタカナをマーク横に（baseline 揃え） */
  .brand-jp { display: inline; font-size: 12px; letter-spacing: 0.18em; color: var(--ink-3); white-space: nowrap; }
  /* 説明行（全文・小林由起子を強調）。マーク直下に細い区切り線＋小フォント */
  .brand-sub {
    display: block;
    margin-top: 3px; padding-top: 4px;
    border-top: 1px solid color-mix(in oklab, var(--ink) 26%, transparent);
    font-family: var(--font-jp-head); font-weight: 400;
    font-size: 11px; letter-spacing: 0.04em; line-height: 1.2;
    color: var(--ink-2); white-space: nowrap;
  }
  .brand-sub b { font-weight: 700; color: var(--ink); }

  /* 添付のブランドを活かすため、ヘッダーを2段に: 上段=ブランド(左)＋予約ボタン(右) / 下段=ナビ(中央)。
     ナビが横幅を多く取るため、ブランドと同一行に詰め込まず段組みにして見切れ・段崩れを防ぐ。 */
  .topbar { height: auto; min-height: var(--topbar-h); }
  .topbar-inner { flex-wrap: wrap; align-items: center; row-gap: 8px; }
  .topbar-inner .brand { order: 0; }
  .topbar-inner .book-btn { order: 1; margin-left: auto; }
  .topbar-inner .topbar-cta { order: 1; margin-left: auto; }
  /* メニューを全幅で埋め、項目間の隙間をゼロに。各項目が伸びて隣接し、ブラウン枠は重ねて1本線に。 */
  .topbar-inner .primary { order: 2; flex-basis: 100%; gap: 0; justify-content: flex-start; }
  .topbar-inner .primary > .nav-top,
  .topbar-inner .primary > .nav-group { flex: 1 1 auto; }
  .topbar-inner .primary > .nav-group { display: flex; }
  .topbar-inner .primary .nav-top { justify-content: center; border-radius: 0; }
  .topbar-inner .primary > .nav-group > .nav-top { width: 100%; } /* ドロップダウン内側のみ親枠いっぱいに */
  .topbar-inner .primary > * + * { margin-left: -2px; } /* 隣接ブラウン枠を重ねて隙間ゼロ */

  /* 端の項目のドロップダウンが画面外へ溢れないよう端揃え（先頭=左／末尾=右）。中央寄せ(translateX(-50%))を解除。 */
  .topbar-inner .primary > .nav-group:first-child .nav-dropdown { left: 0; right: auto; transform: translateX(0) translateY(-8px); }
  .topbar-inner .primary > .nav-group:first-child:hover .nav-dropdown,
  .topbar-inner .primary > .nav-group:first-child:focus-within .nav-dropdown { transform: translateX(0) translateY(0); }
  .topbar-inner .primary > .nav-group:first-child .nav-dropdown::before { left: 30px; transform: translateX(0); }

  .topbar-inner .primary > .nav-group:last-of-type .nav-dropdown { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
  .topbar-inner .primary > .nav-group:last-of-type:hover .nav-dropdown,
  .topbar-inner .primary > .nav-group:last-of-type:focus-within .nav-dropdown { transform: translateX(0) translateY(0); }
  .topbar-inner .primary > .nav-group:last-of-type .nav-dropdown::before { left: auto; right: 30px; transform: translateX(0); }
}

/* ============================================================
   予約系CTAの色（濃紺→オレンジ×ブラウン）
   var(--grad-accent) は :root の濃紺(#3D4868)で確定 inherit され lumina の橙に
   切り替わらない（CSS変数の既知挙動）。要素へ直接グラデを当て、ここで var(--accent) を
   適用中パレット=lumina の橙に解決させて温色化する。色はトークン参照（ハードコード回避）。
   ============================================================ */
.btn-primary,
.book-btn,
.mobile-cta .mc-item.primary {
  background: linear-gradient(135deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 42%, var(--ink-2)) 100%);
}
.btn-primary:hover,
.book-btn:hover {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent) 42%, var(--ink-2)) 0%,
    var(--accent) 100%);
}

/* サロン案内の複製は既定(スマホ)では非表示。PC のみ表示（上の @media で display:block）。 */
.salons-top { display: none; }

/* 新着情報の見出し装飾(section-flourish)を「上→右側」へ。絶対配置で縦スペースを消費しない（PC限定）。 */
@media (min-width: 721px) {
  .news-section .section-head { position: relative; }
  .news-section .section-head::before {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    grid-column: auto;          /* グリッド全幅spanを解除 */
    width: clamp(150px, 20vw, 240px);
    height: 22px;
    margin: 0;                  /* 上下マージン除去＝縦スペースを食わない */
  }
}