/* ============================================================
   なかむら接骨院 共通スタイル
   ※このファイルは自動生成です。直接編集しないでください。
   　 正本は index.html の <style>。触ったら _build/extract_css.py を実行する。
   ============================================================ */

/* ============================================================
   なかむら接骨院（デモ）
   採用FV : fv-77 FocusPull（移植・改変3点は site-design.md §16）
   ヘッダー : header-12 ／ フッター : footer-08 ／ SPメニュー : spmenu-03
   ============================================================ */

:root{
  --paper:#F7F4EE;
  --white:#FFFFFF;
  --navy:#16325C;
  --navy-d:#0F2444;
  --navy-pale:#E6EAF1;
  --ink:#1A1A18;
  --ink-sub:#4A4A45;
  --line:#D8D2C6;
  --alert:#8C3A2E;
  --wrap:1320px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;
  font-size:18px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}
@media(min-width:900px){ body{font-size:19px;} }
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
.mincho{font-family:'Noto Serif JP',serif;}
.mono{font-family:'Space Grotesk',monospace;letter-spacing:.14em;}
h1,h2,h3,.lead,.btn,summary{word-break:auto-phrase;text-wrap:balance;}
p,li,dd,td,th{text-wrap:pretty;}   /* 行末に1文字だけ落ちるのを防ぐ */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===================== ヘッダー（header-12 移植） ===================== */
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.hd-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:11px 26px;}
.hd-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;}
.hd-logo .mk{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif JP',serif;font-weight:600;font-size:21px;flex:none;}
.hd-logo .nm{font-family:'Noto Serif JP',serif;font-weight:600;font-size:21px;letter-spacing:.06em;line-height:1.25;white-space:nowrap;}
.hd-logo .nm small{display:block;font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-sub);}
.hd-nav{display:flex;gap:20px;min-width:0;overflow:hidden;}
.hd-nav a{position:relative;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;
  white-space:nowrap;padding:6px 0;transition:color .2s ease;}
/* 下線は真ん中から外へ開く。border ではなく擬似要素にしないと、伸びる動きが作れない */
.hd-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--navy);
  transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.22,1,.36,1);}
.hd-nav a:hover,.hd-nav a:focus-visible{color:var(--navy);}
.hd-nav a:hover::after,.hd-nav a:focus-visible::after{transform:scaleX(1);}
@media (prefers-reduced-motion: reduce){
  .hd-nav a::after{transition:none;}
  .hd-nav a{transition:none;}
}
.hd-right{display:flex;align-items:center;gap:12px;flex:none;}
.hd-stat{display:flex;align-items:center;gap:9px;border:1.5px solid var(--navy);border-radius:999px;padding:6px 15px;background:var(--navy-pale);white-space:nowrap;text-decoration:none;}
.hd-stat b{font-size:13px;color:var(--navy);font-weight:700;}
.hd-stat small{font-size:9.5px;color:var(--ink-sub);}
.hd-tel{display:inline-flex;flex-direction:column;align-items:center;text-decoration:none;border:1.5px solid var(--navy);color:var(--navy);border-radius:8px;padding:6px 15px;line-height:1.3;}
.hd-tel .num{font-family:'Space Grotesk',monospace;font-weight:700;font-size:17px;letter-spacing:.02em;}
.hd-tel small{font-size:10px;color:var(--ink-sub);white-space:nowrap;}
.hd-cta{display:inline-flex;flex-direction:column;align-items:center;background:var(--navy);color:#fff;border-radius:8px;padding:7px 20px;text-decoration:none;line-height:1.3;white-space:nowrap;}
.hd-cta b{font-size:14.5px;letter-spacing:.06em;}
.hd-cta small{font-size:9.5px;opacity:.85;}
.hd-cta:hover{background:var(--navy-d);}
.hd-burger{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--white);border-radius:8px;position:relative;cursor:pointer;flex:none;}
.hd-burger i{position:absolute;left:50%;top:50%;width:19px;height:1.8px;background:var(--navy);transform:translate(-50%,-50%);transition:transform .3s,opacity .2s;}
.hd-burger i:nth-child(1){transform:translate(-50%,calc(-50% - 6px));}
.hd-burger i:nth-child(3){transform:translate(-50%,calc(-50% + 6px));}
/* ご予約と電話は右端の縦レール（.rail）へ移したので、ヘッダーからは消す。
   ヘッダーに残すのは 屋号 ／ ナビ ／ 今週の空き状況 だけ。
   WordPress では外観→メニューから項目を足せるので、項目数を前提にしない。 */
.hd-tel,.hd-cta{display:none;}
@media(max-width:1180px){ .hd-stat{display:none;} }
@media(max-width:1023px){ .hd-nav{display:none;} .hd-burger{display:block;} }

/* ===================== 右端の縦レール（PCのみ） =====================
   板の幅を決めていたのは、横書きの電話番号と縦書きの補足文だった。
   タブは幅50pxに固定し、番号は触れたときだけ左側に横書きで出す（縦書きの数字は読めない）。 */
.rail{display:none;position:fixed;right:0;top:50%;transform:translateY(-50%);
  z-index:45;flex-direction:column;gap:6px;}
.rail a{position:relative;display:flex;align-items:center;justify-content:center;
  width:50px;padding:24px 0;text-decoration:none;border-radius:6px 0 0 6px;
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:15px;font-weight:700;letter-spacing:.16em;line-height:1;
  box-shadow:0 4px 14px -9px rgba(26,26,24,.45);}
.rail .rsv{background:var(--navy);color:var(--white);}
.rail .rsv:hover{background:var(--navy-d);}
.rail .tel{background:rgba(255,255,255,.96);color:var(--navy);
  border:1px solid var(--navy);border-right:0;}
.rail .tel:hover{background:var(--navy-pale);}
/* 電話番号も縦に置く。数字を寝かせる（text-orientation:mixed）と読めないので、
   1文字ずつ立てる（upright）。日本語の看板と同じ組み方。 */
.rail .tel{gap:11px;}
.rail .tel span{border-bottom:1px solid rgba(22,50,92,.35);padding-bottom:11px;}
.rail .tel b{writing-mode:vertical-rl;text-orientation:upright;
  font-family:'Space Grotesk',monospace;font-size:15px;font-weight:700;letter-spacing:0;}
/* 1200px 未満では出さない。1024px で出すと本文の右端にかぶっていた。
   その幅は下部の固定バー（.spbar）が受け持つ。 */
@media(min-width:1200px){ .rail{display:flex;} }
@media(max-width:820px){
  .hd-in{padding:10px 18px;}
  .hd-stat,.hd-tel,.hd-cta{display:none;}
  .hd-burger{display:block;}
  .hd-logo .nm{font-size:19px;}
  .hd-logo .mk{width:40px;height:40px;font-size:19px;}
}

/* ===================== ファーストビュー（fv-77 FocusPull） ===================== */
.hero{position:relative;width:100%;background:var(--paper);}

/* 写真の器。スマホ＝上部の帯／PC＝全面 */
.hero-media{position:relative;height:min(40vh,320px);overflow:hidden;}
@media(min-width:560px){ .hero-media{height:min(46vh,420px);} }

/* ピントが合う世界 */
.hero-world{position:absolute;inset:-3%;background:url("../images/fv.jpg") 68% 40%/cover no-repeat;transform:none;filter:none;}
/* JSが動くときだけ、ぼけ→ピントを演出する（.j 無しなら最初から鮮明＝ゼロフラッシュ） */
/* カーブに注意。cubic-bezier(.3,.1,.2,1) は**最初の25%で一気に終わる**ので、
   1.2秒にすると 400ms でほぼ鮮明になり「効いていない」ように見えた。
   ゆっくり始まって最後に収まるカーブにして、変化が目で追える長さにする。 */
/* 1.6秒だと、変化の8割が1.2秒で終わって「パッと合った」ように見えた（2026-08-16 本人指摘）。
   時間を伸ばすだけでなく、カーブを中盤が寝た形にして、変化を全体へ均す。 */
.j .hero-world{
  filter:blur(28px) saturate(.68);
  transform:scale(1.06);
  animation:heroFocus 2.6s cubic-bezier(.35,0,.5,1) .2s forwards;
}
@keyframes heroFocus{ to{ filter:blur(0) saturate(1); transform:scale(1);} }

/* 生成りのスクリム（文字を写真に直接乗せない） */
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(247,244,238,0) 0%,
    rgba(247,244,238,0) 74%,
    rgba(247,244,238,.5) 91%,
    rgba(247,244,238,1) 100%);
}
.hero-inner{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto;padding:22px 22px 44px;}
.hero-copy{max-width:min(100%,620px);}
/* 部位を先に読ませる（自分の部位か → 自分の状況か、の順）。h1 より小さく保つ */
.hero-scope{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--navy);
  font-size:clamp(15px,2.6vw,21px);letter-spacing:.08em;line-height:1.6;margin:0 0 12px;}
.hero h1{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(26px,7.4vw,56px);line-height:1.5;letter-spacing:.04em;margin:0;
  word-break:normal;text-wrap:nowrap;}
.hero h1 span{display:block;}
.hero-sub{font-size:clamp(15px,3.9vw,20px);line-height:1.85;color:var(--ink);margin:20px 0 0;font-weight:500;}
/* 誰が施術するか（1人院の売りの核。6院中ゼロの空白地帯なのでFVに置く） */
.hero-who{display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:12px 18px 12px 14px;
  background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:10px;
  max-width:440px;width:fit-content;}
.hero-who .ph{width:64px;height:64px;border-radius:50%;overflow:hidden;flex:none;background:var(--navy-pale);}
.hero-who .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.38);transform-origin:center 36%;}
.hero-who p{margin:0;}
.hero-who-flat{background:none;border:0;border-radius:0;padding:0;margin-top:22px;}
.hero-who-flat b{font-size:19px;}
.hero-who-flat span{font-size:13.5px;}
.hero-who b{display:block;font-family:'Noto Serif JP',serif;font-size:17.5px;font-weight:600;color:var(--navy);line-height:1.5;}
.hero-who span{display:block;font-size:13px;color:var(--ink-sub);line-height:1.65;margin-top:2px;}

.hero-facts{list-style:none;margin:22px 0 0;padding:0 0 0 14px;border-left:2px solid var(--navy);}
.hero-facts li{font-size:16px;color:var(--ink-sub);line-height:1.85;}
.hero-facts li b{color:var(--navy);font-weight:700;}
@media(min-width:560px){
  .hero-facts{display:flex;flex-wrap:wrap;padding-left:0;border-left:0;gap:0;}
  .hero-facts li{padding:0 15px;border-left:1px solid var(--line);line-height:1.5;}
  .hero-facts li:first-child{padding-left:0;border-left:0;}
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  border-radius:8px;padding:16px 30px;font-weight:700;font-size:16.5px;letter-spacing:.04em;line-height:1.4;}
.btn-main{background:var(--navy);color:#fff;box-shadow:0 10px 22px -14px rgba(22,50,92,.9);}
.btn-main:hover{background:var(--navy-d);}
.btn-sub{border:1.5px solid var(--navy);color:var(--navy);background:rgba(255,255,255,.7);}
.btn-sub:hover{background:var(--navy-pale);}

/* 入場：文字は「すぐ」出す（原本の2.3〜3.3秒 → 0.1〜0.5秒） */
.j .hero-scope,.j .hero h1,.j .hero-sub,.j .hero-who,.j .hero-facts,.j .hero-cta{opacity:0;animation:heroRise .5s ease forwards;}
.j .hero-scope{animation-delay:.04s;}
.j .hero h1{animation-delay:.10s;}
.j .hero-sub{animation-delay:.30s;}
.j .hero-who{animation-delay:.42s;}
.j .hero-facts{animation-delay:.54s;}
.j .hero-cta{animation-delay:.64s;}
@keyframes heroRise{ from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }

/* スマホ（縦持ち・十分な高さがある時だけ）：写真の左の余白に、縦書きで見出しを2行 */
@media(max-width:879px) and (min-height:600px){
  .hero{
    --band:min(58vh,480px);        /* 写真の帯の高さ */
    --h1fs:clamp(24px,6.8vw,36px); /* 縦書き見出しの字送り */
    --h1w:calc(var(--h1fs) * 3.8); /* 2列ぶんの幅（line-height 1.9 × 2列） */
    --blank:34%;                   /* 左端から観葉植物の手前までの空白（実測ベース） */
  }
  .hero-media{height:var(--band);}
  .hero-media::after{content:"";position:absolute;inset:0;z-index:2;
    background:linear-gradient(90deg,
      rgba(247,244,238,.66) 0%,
      rgba(247,244,238,.32) 30%,
      rgba(247,244,238,0) 54%);}
  .hero-inner{position:static;padding-top:24px;}
  .hero h1{
    position:absolute;z-index:4;margin:0;padding:0;
    /* 縦：帯の7.5%＝院長の頭の高さに上ぞろえ */
    top:calc(var(--band) * .075);
    height:calc(var(--band) * .86);
    /* 横：左の空白の中心（空白 － 文字幅）÷2 */
    left:calc((var(--blank) - var(--h1w)) / 2);
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:var(--h1fs);
    line-height:1.9;letter-spacing:.08em;
  }
  .hero h1 span{display:block;}
}
/* 幅が広いほど写真の横切り出しが減り、空白が右へ広がる */
@media(min-width:480px) and (max-width:879px) and (min-height:600px){
  .hero{--blank:42%;}
}
@media(min-width:620px) and (max-width:879px) and (min-height:600px){
  .hero{--blank:50%;}
}

@media(min-width:880px){
  /* 左半分はスクリムで写真が生成りまで薄まるので、下の生成りの節と地続きに見えて
     どこでFVが終わったのか分からなかった（2026-08-16 本人指摘）。細い罫で切る。 */
  .hero{min-height:min(90vh,800px);overflow:hidden;border-bottom:1px solid var(--line);}
  .hero-media{position:absolute;inset:0;height:auto;}
  /* 院長の頭上に余白を残すため、上寄りに見せる。
     右端のレールを細くして、板が隠していたカーテンが露出した。
     器を右へ伸ばして院長を右に寄せ、右の余白を詰める（はみ出しは .hero-media が切る）。 */
  .hero-world{inset:-3% -14% -3% -3%;background-position:left 12%;}
  .hero-scrim{background:linear-gradient(90deg,
    rgba(247,244,238,.98) 0%,
    rgba(247,244,238,.96) 30%,
    rgba(247,244,238,.62) 44%,
    rgba(247,244,238,.14) 56%,
    rgba(247,244,238,0) 68%);}
  .hero-inner{min-height:min(90vh,800px);display:flex;flex-direction:column;justify-content:center;padding:0 26px;}
  .hero-copy{max-width:min(48%,620px);}
}
/* 880〜1099px は3つの事実が1行に収まらず、折り返した行の頭に区切り線だけが残る。
   この幅だけ縦積み（スマホと同じ組み方）に戻す。 */
@media(min-width:880px) and (max-width:1099px){
  .hero-facts{display:block;padding:0 0 0 14px;border-left:2px solid var(--navy);}
  .hero-facts li{padding:0;border-left:0;line-height:1.85;}
}
/* この幅には下部の固定バーが出る。その高さぶんFVを縮めないと、
   画面が低いノートPCで2つ目のボタンがバーの裏に隠れる。 */
@media(min-width:880px) and (max-width:1199px){
  .hero-inner{padding-bottom:84px;}
}

@media (prefers-reduced-motion: reduce){
  .j .hero-world{animation:none;filter:none;transform:none;}
  .j .hero-scope,.j .hero h1,.j .hero-sub,.j .hero-who,.j .hero-facts,.j .hero-cta{animation:none;opacity:1;transform:none;}
}

/* ===================== スマホ下部固定バー（spmenu-03） ===================== */
.spbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;
  grid-template-columns:1fr 1.25fr;background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -14px 30px -20px rgba(26,26,24,.5);}
.spbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:11px 6px;text-decoration:none;line-height:1.35;}
.spbar .tel{color:var(--navy);}
.spbar .tel b{font-family:'Space Grotesk',monospace;font-size:16px;font-weight:700;}
.spbar .tel small{font-size:9.5px;color:var(--ink-sub);}
.spbar .rsv{background:var(--navy);color:#fff;}
.spbar .rsv b{font-size:15.5px;letter-spacing:.08em;}
.spbar .rsv small{font-size:9.5px;opacity:.9;}
/* 1199px まで受け持つ。821〜1023px は、下部バーもレールも出ない空白帯だった。 */
@media(max-width:1199px){
  .spbar{display:grid;}
  body{padding-bottom:72px;}
}

/* ===================== 固定ページのページヒーロー（FVはトップ専用） ===================== */
.phero{background:var(--navy);color:var(--white);
  padding:clamp(42px,6.5vw,80px) 0 clamp(38px,5.5vw,68px);}
.phero__crumb{font-size:12.5px;color:rgba(255,255,255,.68);margin:0 0 16px;letter-spacing:.04em;}
.phero__crumb a{color:rgba(255,255,255,.82);text-decoration:none;}
.phero__crumb a:hover{text-decoration:underline;}
.phero h1{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(25px,4.4vw,42px);line-height:1.55;letter-spacing:.03em;margin:0;}
.phero__sub{margin:18px 0 0;font-size:clamp(15.5px,2vw,18px);line-height:1.95;
  color:rgba(255,255,255,.82);max-width:40em;}

/* ===================== セクション共通 ===================== */
.sec{padding:clamp(62px,8.5vw,112px) 0;position:relative;}
.sec-in{width:min(1060px,calc(100% - 44px));margin:0 auto;}
.sec-in--wide{width:min(1320px,calc(100% - 44px));}
.sec--paper{background:var(--paper);}
.sec--white{background:var(--white);}
.sec--pale{background:var(--navy-pale);}
.sec--navy{background:var(--navy);color:var(--white);}
.eyebrow{display:block;font-size:11.5px;letter-spacing:.26em;color:var(--navy);font-weight:700;margin:0;}
.sec--navy .eyebrow{color:rgba(255,255,255,.72);}
.sec h2{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(23px,4vw,40px);line-height:1.6;letter-spacing:.03em;margin:14px 0 0;}
.sec h3{font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(18px,2.4vw,23px);line-height:1.6;margin:0;}
.sec .note{color:var(--ink-sub);font-size:15.5px;line-height:1.95;margin:18px 0 0;max-width:46em;}
.sec--navy .note{color:rgba(255,255,255,.78);}
/* 土台の余白リセット。:where() で詳細度を 0 にしてあるので、
   あとから `.c-note__lead{margin:20px 0 0}` とクラス1つで書けばちゃんと効く。
   `.sec p{}` のままだと (0,1,1) になり、クラス1つの指定が**書いても効かない**。
   それに気づかず12か所を死なせた（2026-08-16。qa_local が検出するようになった） */
.sec :where(p){margin:0;}
.lead{font-size:clamp(16.5px,2.1vw,19px);line-height:2.05;margin:22px 0 0;}

/* 装飾レイヤー（白背景のPNGを紙に馴染ませる。必ず本文の後ろ・z-index:0） */
.deco{position:absolute;pointer-events:none;z-index:0;
  mix-blend-mode:multiply;opacity:.5;}
.deco img{width:100%;height:auto;display:block;}
.deco--tr{top:clamp(10px,2vw,28px);right:clamp(6px,2vw,30px);width:clamp(150px,17vw,260px);}
.sec>.sec-in{position:relative;z-index:1;}
@media(max-width:768px){ .deco{opacity:.34;} }

/* 768px以下：1カラムに落として余白を詰める（スマホの縦を短くする） */
@media(max-width:768px){
  .sec{padding:58px 0;}
  .sec-in,.sec-in--wide{width:calc(100% - 40px);}
  .c-not__after{grid-template-columns:1fr;}
  .c-first60__pics{grid-template-columns:repeat(2,1fr);}
  .fullbleed{height:min(38vh,260px);}
  .ft__grid{grid-template-columns:1fr;}
  .ft__map,.ft__map iframe{min-height:240px;}
}

/* シグネチャモチーフ：濃紺の細い縦罫＋小さな番号 */
.idx{list-style:none;margin:0;padding:0;counter-reset:idx;}
.idx>li{counter-increment:idx;position:relative;padding:24px 0 24px 58px;border-bottom:1px solid var(--line);}
.idx>li:first-child{border-top:1px solid var(--line);}
.idx>li::before{content:counter(idx,decimal-leading-zero);position:absolute;left:0;top:28px;
  font-family:'Space Grotesk',monospace;font-size:12px;letter-spacing:.16em;color:var(--navy);font-weight:700;}
.idx>li::after{content:"";position:absolute;left:30px;top:28px;bottom:28px;width:1px;background:var(--line);}
.idx .t{display:block;font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(17px,2.3vw,22px);line-height:1.7;}
.idx .w{display:block;font-size:14.5px;line-height:1.9;color:var(--ink-sub);margin-top:7px;}
@media(max-width:600px){ .idx>li{padding-left:44px;} .idx>li::after{left:22px;} }

/* 控えめなスクロール表示（GSAPを使わない＝CDN依存ゼロ・二重登録バグなし）
   .j が付いている＝JSが動いているときだけ隠す。JSが落ちたら最初から全部見える。 */
.j .rv{opacity:0;transform:translateY(18px);}
.j .rv.is-in{opacity:1;transform:none;
  transition:opacity .75s ease,transform .75s cubic-bezier(.22,1,.36,1);}
@media (prefers-reduced-motion: reduce){
  .j .rv{opacity:1;transform:none;}
  .j .rv.is-in{transition:none;}
}

/* ③ 共感 */
.c-empathy__q{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(21px,3.4vw,34px);line-height:1.85;letter-spacing:.02em;margin:0;}
.c-empathy__list{list-style:none;margin:38px 0 0;padding:0;}
.c-empathy__list li{position:relative;padding:0 0 0 26px;margin:0 0 16px;
  font-size:clamp(16.5px,2.2vw,20px);line-height:1.95;}
.c-empathy__list li::before{content:"";position:absolute;left:0;top:.85em;width:14px;height:1px;background:var(--navy);}
.c-empathy__turn{margin:44px 0 0;padding:28px 0 0;border-top:1px solid var(--line);}
/* 不満を言葉にして終わると、読み手の視線が次に向かない。
   効果は一言も言えないので、代わりに「まだ決めなくていい」と猶予を差し出す（2026-08-16 追加） */
.c-empathy__wait{margin:46px 0 0;padding-left:20px;border-left:2px solid var(--navy);
  font-size:clamp(16.5px,2.2vw,20px);line-height:2.15;}
/* 「決める前に」の一行だけ朱にする。ここがこの節の芯 */
.c-empathy__wait b{color:var(--alert);}
/* 共感パートは膝の話で絞る（絞らないと刺さらない）。
   ただし腰の方が「自分の話ではない」と離れないよう、最後に一行だけ橋を架ける */
.c-empathy__also{margin:34px 0 0;font-size:clamp(16px,2.1vw,18.5px);color:var(--ink-sub);}

/* ④ 立ち位置（濃紺の色面） */
.c-stand__big{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(22px,4.2vw,44px);line-height:1.7;letter-spacing:.03em;margin:16px 0 0;}
.c-stand__big span{display:block;}      /* 改行位置を確定させる（孤立文字を出さない） */
.c-stand__big em{font-style:normal;border-bottom:2px solid rgba(255,255,255,.55);padding-bottom:3px;}
.c-stand__body{margin:32px 0 0;font-size:clamp(16px,2.1vw,18.5px);line-height:2.1;color:rgba(255,255,255,.88);max-width:42em;}
.c-stand__body p+p{margin-top:1.3em;}

/* ⑤ お受けしていない状態 */
.c-not h2{color:var(--alert);}
.c-not__box{margin:34px 0 0;padding:24px 26px;background:var(--paper);border:1px solid var(--line);}
.c-not__box p{font-size:16px;line-height:2;}
.c-not__idx{margin:34px 0 0;}
.c-not__after{margin:40px 0 0;display:grid;gap:20px;}
@media(min-width:820px){ .c-not__after{grid-template-columns:1fr 1fr;gap:26px;} }
.c-not__card{padding:26px 28px;border:1px solid var(--line);background:var(--white);}
.c-not__card h3{margin-bottom:12px;}
.c-not__card p{font-size:15.5px;line-height:1.95;color:var(--ink-sub);}

/* ⑤ 判断分岐ボード（vs-08「Decision split」を参照して再実装）
   7項目を上から読ませるのではなく、左右で「どちらに当てはまるか」を見せる。
   中央の縦書きラベルは原本にあるが、60代後半が読むので使わない（問いは板の上に横書き）。

   ⚠️ 左右を別々の箱にすると、行の高さがそろわず読みにくかった（2026-08-16 本人指摘）。
   いまは **左右をまたぐ1枚のグリッド**で、左の1項目目と右の1項目目が同じ行に載る。
   HTMLは「左・右・左・右…」と交互に並べること。この並び順が行の対応そのもの。
   （左7項目・右5項目なので、6・7項目目は左だけの行になる） */
.c-not__ask{margin:28px 0 0;font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(18px,2.6vw,25px);line-height:1.7;letter-spacing:.02em;}
.c-not__board{margin:24px 0 0;display:grid;grid-template-columns:1fr;
  border:1px solid var(--line);background:var(--white);}
.c-not__hd,.c-not__item,.c-not__board .c-not__foot{position:relative;z-index:1;}
.c-not__hd{padding:28px 26px 20px;}
.c-not__hd h3{margin:0;}
.c-not__hd--no h3{color:var(--alert);}
.c-not__hd--yes h3{color:var(--navy);}
.c-not__hd p{margin:12px 0 0;font-size:15px;line-height:1.95;color:var(--ink-sub);}
.c-not__item{padding:16px 26px;border-top:1px solid var(--line);}
.c-not__item b{display:block;font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(16px,2vw,19px);line-height:1.75;}
.c-not__item p{margin:6px 0 0;font-size:14.5px;line-height:1.85;color:var(--ink-sub);}
.c-not__foot{margin:22px 26px 26px;padding:16px 18px;background:var(--white);
  border:1px solid var(--line);font-size:15px;line-height:1.9;}
.c-not__go{margin:14px 0 2px;width:100%;font-size:16px;padding:14px 20px;}
/* スマホは板が縦に積まれるので、色は各セルに乗せる。並ぶ順は order で戻す */
.c-not__hd--no,.c-not__item--no,.c-not__foot--no{background:var(--paper);}
.c-not__hd--yes,.c-not__item--yes,.c-not__foot--yes{background:var(--navy-pale);}
@media(max-width:899px){
  .c-not__hd--no{order:1;} .c-not__item--no{order:2;} .c-not__foot--no{order:3;}
  .c-not__spine{order:4;}
  .c-not__hd--yes{order:5;} .c-not__item--yes{order:6;} .c-not__foot--yes{order:7;}
  .c-not__item--yes:first-of-type{border-top:0;}
}
/* 中央の背骨。スマホは横罫（板が縦に積まれるため） */
.c-not__spine{position:relative;height:56px;background:var(--white);z-index:1;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.c-not__spine::before{content:"";position:absolute;left:26px;right:26px;top:50%;height:1px;background:var(--line);}
.c-not__node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--navy);
  top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 6px var(--white);}
.c-not__node--1{left:25%;} .c-not__node--2{left:50%;} .c-not__node--3{left:75%;}
@media(min-width:900px){
  /* 行は「見出し1 ＋ 項目7 ＋ 足元1」の9行。背骨が全行をまたぐので明示的に切っておく
     （暗黙の行のままだと grid-row:1/-1 が1行しか伸びない） */
  .c-not__board{grid-template-columns:1fr 74px 1fr;grid-template-rows:repeat(9,auto);}
  .c-not__hd{grid-row:1;padding:32px 30px 20px;}
  .c-not__hd--no,.c-not__item--no,.c-not__foot--no{grid-column:1;}
  .c-not__hd--yes,.c-not__item--yes,.c-not__foot--yes{grid-column:3;}
  .c-not__item{padding:16px 30px;}
  .c-not__foot{margin:22px 30px 30px;}
  /* 色は板そのものを縦3本に塗り分ける。
     右列は項目が2行ぶん足りないので、セルごとに塗ると下が塗り残る。
     全行をまたぐ下敷き要素を置くのも不可（自動配置がその列を避けて崩れる）。 */
  .c-not__hd,.c-not__item,.c-not__foot,.c-not__spine{background:transparent;}
  .c-not__board{background:linear-gradient(90deg,
    var(--paper) 0 calc(50% - 37px),
    var(--white) calc(50% - 37px) calc(50% + 37px),
    var(--navy-pale) calc(50% + 37px) 100%);}
  /* 足元は行の高さに引き伸ばさない（右にボタンがあるぶん左が間延びする） */
  .c-not__board .c-not__foot{align-self:start;}
  .c-not__spine{grid-column:2;grid-row:1/-1;height:auto;
    border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);}
  .c-not__spine::before{left:50%;right:auto;top:28px;bottom:28px;height:auto;width:1px;transform:translateX(-50%);}
  .c-not__node{left:50%;top:auto;}
  .c-not__node--1{top:25%;} .c-not__node--2{top:50%;} .c-not__node--3{top:75%;}
}

/* ⑥ 初回60分（特大の抜き：ページに1つだけ） */
.c-first60__pull{display:flex;align-items:baseline;gap:14px;margin:26px 0 0;}
.c-first60__num{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--navy);
  font-size:clamp(96px,21vw,220px);line-height:.82;letter-spacing:-.02em;}
.c-first60__unit{font-family:'Noto Serif JP',serif;font-size:clamp(20px,3vw,30px);color:var(--navy);}
.c-first60__grid{margin:44px 0 0;border-top:1px solid var(--line);}
.c-first60__row{display:grid;grid-template-columns:auto auto 1fr;gap:6px 20px;
  align-items:start;padding:24px 0;border-bottom:1px solid var(--line);}
.c-first60__k{font-family:'Noto Serif JP',serif;font-weight:600;font-size:19px;white-space:nowrap;}
.c-first60__m{font-family:'Space Grotesk',monospace;font-weight:700;font-size:19px;color:var(--navy);white-space:nowrap;}
.c-first60__d{font-size:15.5px;line-height:1.95;color:var(--ink-sub);grid-column:1/-1;}
@media(min-width:760px){ .c-first60__d{grid-column:3;} }
.c-first60__say{margin:34px 0 0;padding:26px 28px;background:var(--navy-pale);border-left:3px solid var(--navy);}
.c-first60__say p{font-size:16.5px;line-height:2;}
.c-first60__say p+p{margin-top:1em;}
.c-first60__pics{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:34px 0 0;}
@media(min-width:760px){ .c-first60__pics{grid-template-columns:repeat(4,1fr);} }
.c-first60__pics img{width:100%;aspect-ratio:1/1;object-fit:cover;}

/* ⑦ 4つの根拠（reasons-09「証拠レイヤー」を参照して再実装）
   確かめられる材料を、机に並べた資料に見立てる。
   原本は3枚を±2度傾けて重ねるが、ここは「静を売る」枠なので、
   傾きは±0.5度まで・重ねずに2×2で並べる。傾きはスマホでは付けない。 */
.c-why__head{display:grid;gap:16px;margin:34px 0 0;}
@media(min-width:900px){ .c-why__head{grid-template-columns:1fr 330px;gap:54px;align-items:end;} }
.c-why__head .note{margin:0;}
.c-why__list{list-style:none;margin:42px 0 0;padding:0;display:grid;gap:26px;}
/* 4枚とも同じ大きさにそろえる（grid-auto-rows:1fr）。
   自然な高さに任せると、紙の大きさがばらついて散らかって見えた（2026-08-16 本人指摘）。 */
@media(min-width:820px){ .c-why__list{grid-template-columns:1fr 1fr;gap:36px 30px;grid-auto-rows:1fr;} }
/* 傾きは紙側に掛ける。li に掛けると .rv の transform:none に打ち消される */
.c-why__proof{position:relative;height:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:3px;padding:26px 28px 24px;
  box-shadow:0 18px 40px -32px rgba(26,26,24,.55);}
/* 下に紙がもう2枚ある見立て */
.c-why__proof::after{content:"";position:absolute;left:11px;right:11px;bottom:-6px;height:1px;
  background:var(--line);box-shadow:0 5px 0 var(--line);}
/* 大きさをそろえたので、傾きはさらに浅くする（傾き＋大きさの差は散らかって見える） */
@media(min-width:820px){
  .c-why__list>li:nth-child(1) .c-why__proof{transform:rotate(-.3deg);}
  .c-why__list>li:nth-child(2) .c-why__proof{transform:rotate(.25deg);}
  .c-why__list>li:nth-child(3) .c-why__proof{transform:rotate(.3deg);}
  .c-why__list>li:nth-child(4) .c-why__proof{transform:rotate(-.25deg);}
}
.c-why__n{display:block;font-size:12px;letter-spacing:.08em;color:var(--navy);font-weight:700;}
.c-why__t{display:block;font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(17px,2.2vw,22px);line-height:1.65;margin-top:13px;}
.c-why__b{display:block;font-size:15px;line-height:1.95;color:var(--ink-sub);margin-top:13px;}
.c-why__b b{color:var(--ink);}
.c-why__cav{display:block;font-size:13.5px;line-height:1.85;color:var(--ink-sub);margin-top:13px;padding-left:14px;border-left:2px solid var(--line);}

/* 全幅の写真帯 */
.fullbleed{width:100%;height:min(52vh,420px);overflow:hidden;}
.fullbleed img{width:100%;height:100%;object-fit:cover;}

/* ⑧ 院長（message-10「注釈付きポートレート」を参照して再実装）
   原本は暗いポートレートを全面に敷き、その上に注記を浮かせる。
   このサイトは生成り基調なので暗転させず、写真を右半分の面として置き、
   注記カードだけが写真の上へせり出す形にした。
   ※ .c-doc* は about.html（従来の非対称ブロック）が使っているので触らない。 */
.c-port{position:relative;overflow:hidden;}
.c-port__stage{display:grid;}
.c-port__ph{position:relative;min-height:min(88vw,380px);}
/* スマホは横長に切るので、上を詰めすぎると頭が切れる */
.c-port__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;}
.c-port__txt{position:relative;z-index:2;padding:clamp(46px,7vw,84px) 22px;}
.c-port__in{width:100%;max-width:640px;margin:0 auto;}
@media(min-width:900px){
  .c-port__stage{grid-template-columns:1fr 1fr;}
  .c-port__txt{order:1;display:flex;align-items:center;padding-left:0;padding-right:0;}
  /* 列いっぱいに敷くと顔が大きすぎた（2026-08-16 本人指摘）。
     顔の大きさを決めているのは列の幅（正方形の写真を cover で敷くため）なので、
     高さだけでなく **幅にも上限**を掛けて、額に入れた1枚として中央に置く。 */
  .c-port__ph{order:2;min-height:0;display:flex;align-items:center;
    /* 右端を本文の右端（.sec-in）にそろえる。左端は列の頭に置いたまま＝注記が写真に重なる */
    padding-right:max(22px,calc((100vw - 1060px) / 2));}
  .c-port__ph img{position:static;width:100%;height:100%;max-height:540px;object-position:center 8%;}
  /* 左端を他セクション（.sec-in）と1pxずれずにそろえる */
  .c-port__in{width:min(530px,calc(50vw - 22px));max-width:none;margin:0 0 0 auto;padding-right:44px;}
}
.c-port__name{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(24px,3.2vw,34px);line-height:1.5;margin:14px 0 0;}
.c-port__name small{display:block;font-family:'Noto Sans JP',sans-serif;font-size:13px;
  letter-spacing:.14em;color:var(--ink-sub);font-weight:500;margin-top:8px;}
.c-port__body{margin:26px 0 0;font-size:clamp(16px,2.05vw,18px);line-height:2.1;}
.c-port__body p+p{margin-top:1.35em;}
.c-port__notes{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:12px;}
.c-port__notes>li{background:var(--white);border:1px solid var(--line);padding:15px 20px;
  box-shadow:0 18px 36px -30px rgba(26,26,24,.6);}
.c-port__notes span{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--navy);font-weight:700;}
.c-port__notes b{display:block;font-family:'Noto Serif JP',serif;font-weight:600;font-size:17px;margin-top:5px;}
.c-port__notes p{margin:4px 0 0;font-size:14.5px;line-height:1.85;color:var(--ink-sub);}
/* 注記だけが写真の上へせり出す（原本の「注記が写真に重なる」を残す） */
@media(min-width:1100px){ .c-port__notes{margin-right:clamp(-116px,-7vw,-56px);} }

/* ⑧ 院長（非対称）※ about.html で使用 */
.c-doc__wrap{display:grid;gap:30px;margin:34px 0 0;}
@media(min-width:900px){ .c-doc__wrap{grid-template-columns:38% 1fr;gap:64px;align-items:start;} }
.c-doc__ph img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 22%;}
.c-doc__name{font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(22px,3vw,30px);margin:0;}
.c-doc__name small{display:block;font-family:'Noto Sans JP',sans-serif;font-size:13px;
  letter-spacing:.14em;color:var(--ink-sub);font-weight:500;margin-top:8px;}
.c-doc__body{margin:26px 0 0;font-size:clamp(16px,2.05vw,18px);line-height:2.1;}
.c-doc__body p:first-child::first-letter{font-family:'Noto Serif JP',serif;font-size:2.9em;
  float:left;line-height:.92;padding:.06em .12em 0 0;color:var(--navy);}
.c-doc__body p+p{margin-top:1.35em;}
.c-doc__tbl{margin:32px 0 0;border-top:1px solid var(--line);}
.c-doc__tbl dl{display:grid;grid-template-columns:6.5em 1fr;gap:0 18px;margin:0;}
.c-doc__tbl dt{font-size:13px;letter-spacing:.12em;color:var(--navy);font-weight:700;
  padding:16px 0;border-bottom:1px solid var(--line);}
.c-doc__tbl dd{margin:0;font-size:15.5px;line-height:1.9;padding:16px 0;border-bottom:1px solid var(--line);}

/* ⑨ 料金（pricing-14「総額安心の保証書」を参照して再実装）
   二重枠の証書。左に主役の価格と丸スタンプ、右に「含まれるもの」。
   原本の金色は使わず、サイトの濃紺と朱（--alert）に置き換えた。
   ※ .c-price* は service.html が使っているので触らない。 */
.c-cert__lead{margin:20px 0 0;font-size:clamp(16px,2.1vw,18.5px);line-height:2.05;max-width:44em;}
.c-cert__paper{margin:38px 0 0;background:var(--paper);border:1px solid var(--line);padding:13px;
  box-shadow:0 34px 70px -54px rgba(26,26,24,.65);}
.c-cert__frame{border:1px solid rgba(22,50,92,.3);padding:clamp(26px,4.4vw,48px);display:grid;gap:30px;}
.c-cert__l{position:relative;padding-bottom:126px;}
.c-cert__pl{display:block;font-size:12.5px;letter-spacing:.18em;color:var(--navy);font-weight:700;}
.c-cert__price{display:flex;align-items:baseline;gap:2px;margin:12px 0 0;
  font-family:'Noto Serif JP',serif;font-weight:600;color:var(--navy);}
.c-cert__price b{font-weight:600;font-size:clamp(42px,6.6vw,64px);line-height:1.05;}
.c-cert__price small{font-size:clamp(18px,2.4vw,24px);}
.c-cert__price i{font-style:normal;font-family:'Noto Sans JP',sans-serif;font-weight:500;
  font-size:15px;color:var(--ink-sub);margin-left:12px;}
.c-cert__desc{margin:18px 0 0;font-size:15px;line-height:1.95;color:var(--ink-sub);max-width:26em;}
/* 丸スタンプ。保証しているのは料金であって、体の状態ではない */
.c-cert__stamp{position:absolute;left:0;bottom:6px;width:114px;height:114px;
  border:2.5px solid var(--alert);border-radius:50%;color:var(--alert);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:15px;line-height:1.55;
  letter-spacing:.06em;transform:rotate(-7deg);}
.c-cert__stamp::before{content:"";position:absolute;inset:5px;border:1px solid rgba(140,58,46,.45);border-radius:50%;}
.c-cert__r h3{display:flex;align-items:center;gap:14px;font-size:clamp(16px,2vw,18.5px);letter-spacing:.05em;margin:0 0 14px;}
.c-cert__r h3::after{content:"";flex:1 1 auto;height:1px;background:var(--line);}
.c-cert__r ul{list-style:none;margin:0;padding:0;}
.c-cert__r li{display:flex;align-items:baseline;gap:15px;padding:12px 0;font-size:15.5px;
  border-bottom:1px dashed rgba(216,210,198,.95);}
.c-cert__r li:last-child{border-bottom:0;}
.c-cert__r li::before{content:"";flex:none;width:7px;height:13px;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:rotate(45deg) translate(-1px,-2px);}
.c-cert__r li small{margin-left:auto;font-size:12.5px;color:var(--ink-sub);white-space:nowrap;}
@media(min-width:860px){
  .c-cert__frame{grid-template-columns:1fr 1.08fr;gap:clamp(30px,4.6vw,56px);}
  .c-cert__r{border-left:1px solid var(--line);padding-left:clamp(28px,4.4vw,54px);}
}
@media(max-width:859px){
  .c-cert__l{border-bottom:1px solid var(--line);padding-bottom:28px;}
  .c-cert__stamp{position:static;margin:24px 0 0;}
}
/* 見出しが2行に折り返す幅では、横に伸びる罫を出さない */
@media(max-width:600px){
  .c-cert__r h3{display:block;}
  .c-cert__r h3::after{display:none;}
}
.c-cert__alt{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px;}
.c-cert__alt>li{display:flex;align-items:baseline;gap:11px;border:1px solid var(--line);border-radius:999px;
  padding:10px 24px;background:var(--paper);font-size:13.5px;color:var(--ink-sub);}
.c-cert__alt b{font-family:'Noto Serif JP',serif;font-weight:600;font-size:16.5px;color:var(--navy);}
.c-cert__foot{margin:30px 0 0;padding:26px 28px;border:2px solid var(--navy);background:var(--white);}
.c-cert__foot p{font-size:15.5px;line-height:1.95;color:var(--ink-sub);}
.c-cert__foot p+p{margin-top:1em;}
.c-cert__foot b{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--navy);}

/* ⑨ 料金 ※ service.html で使用 */
.c-price__tbl{margin:34px 0 0;border-top:2px solid var(--navy);}
.c-price__row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  padding:26px 0;border-bottom:1px solid var(--line);}
.c-price__k{font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(18px,2.4vw,23px);flex:none;}
.c-price__v{font-family:'Noto Serif JP',serif;font-weight:600;color:var(--navy);
  font-size:clamp(26px,4.4vw,44px);line-height:1.2;margin-left:auto;}
.c-price__v small{font-size:.46em;margin-left:2px;}
.c-price__t{font-size:14.5px;color:var(--ink-sub);width:100%;}
.c-price__none{display:flex;flex-wrap:wrap;gap:6px 18px;padding:22px 0;border-bottom:1px solid var(--line);
  font-size:16.5px;}
.c-price__none b{font-family:'Noto Serif JP',serif;color:var(--navy);margin-left:auto;}
.c-price__rr{margin:36px 0 0;padding:28px 30px;border:2px solid var(--navy);background:var(--white);}
.c-price__rr p{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(17px,2.3vw,21px);line-height:1.85;color:var(--navy);}
.c-price__rr p+p{margin-top:.9em;}

/* ⑩ 保険と整形外科 */
.c-ins__quote{margin:30px 0 0;padding:26px 28px;background:var(--white);border-left:3px solid var(--navy);}
.c-ins__quote p{font-size:16px;line-height:2.05;}
.c-ins__quote p+p{margin-top:.9em;}
.c-ins__strong{margin:24px 0 0;font-size:clamp(17px,2.3vw,21px);font-family:'Noto Serif JP',serif;
  font-weight:600;color:var(--navy);line-height:1.8;}
.c-ins__tblwrap{margin:38px 0 0;overflow-x:auto;}
.c-ins__tbl{width:100%;min-width:560px;border-collapse:collapse;font-size:15.5px;}
.c-ins__tbl th,.c-ins__tbl td{padding:16px 14px;border-bottom:1px solid var(--line);
  text-align:left;line-height:1.85;vertical-align:top;}
.c-ins__tbl thead th{background:var(--navy);color:var(--white);font-weight:700;font-size:14.5px;letter-spacing:.06em;}
.c-ins__tbl tbody th{width:9em;font-weight:700;color:var(--navy);font-size:14.5px;}
.c-ins__tbl .em{font-weight:700;}

/* ===================== スクロールヒント =====================
   横に流れる表は、指で動かせることが分からないと「切れている」と誤解される。
   端が隠れているときだけ、右端に矢印と文字を出す。動かしたら消える。 */
/* ヒントは表の「上」に出す。重ねると表の文字とぶつかる（実際にぶつかった）。
   右端は色ではなく影でぼかす。背景色が違うセクションでも同じ見え方になる。 */
.shint-wrap{position:relative;}
.shint-wrap > .shint__cue{position:absolute;top:0;right:0;display:flex;align-items:center;gap:7px;
  pointer-events:none;opacity:0;transition:opacity .3s;}
.shint-wrap.is-cue > .shint__cue{opacity:1;}
.shint__cue span{font-size:13px;font-weight:700;color:var(--navy);letter-spacing:.04em;}
.shint__cue i{font-style:normal;color:var(--navy);font-size:19px;line-height:1;
  animation:shintNudge 1.5s ease-in-out infinite;}
@keyframes shintNudge{
  0%,100%{ transform:translateX(-4px); opacity:.5; }
  50%    { transform:translateX(4px);  opacity:1; }
}
.shint-wrap.is-cue > .shint{box-shadow:inset -20px 0 18px -18px rgba(26,26,24,.3);}
@media (prefers-reduced-motion: reduce){ .shint__cue i{animation:none;opacity:1;} }
@media(max-width:899px){ .shint-wrap{padding-top:28px;} }
@media(min-width:900px){ .shint-wrap > .shint__cue{display:none;} }

/* ⑪ 今週の空き状況 */
.c-slot__tblwrap{margin:32px 0 0;overflow-x:auto;}
.c-slot__tbl{width:100%;min-width:520px;border-collapse:collapse;text-align:center;}
.c-slot__tbl th,.c-slot__tbl td{padding:15px 8px;border:1px solid var(--line);background:var(--white);}
.c-slot__tbl thead th{background:var(--navy);color:var(--white);font-size:15px;font-weight:700;}
.c-slot__tbl tbody th{background:var(--white);font-size:15px;font-weight:700;color:var(--navy);width:5.5em;}
.c-slot__tbl td{font-size:20px;font-family:'Noto Serif JP',serif;}
.c-slot__tbl .x{color:var(--ink-sub);}
.c-slot__tbl .off{font-size:14px;font-family:'Noto Sans JP',sans-serif;color:var(--ink-sub);}
.c-slot__legend{margin:18px 0 0;font-size:15px;color:var(--ink-sub);line-height:1.95;}

/* ⑫ ご家族の方へ */
.c-fam{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.c-fam .sec-in{display:grid;gap:24px;}
@media(min-width:900px){ .c-fam .sec-in{grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;} }

/* ⑬ よくある質問（faq-12「担当者が答える台帳」を参照して再実装）
   原本は1枚ごとに回答者の顔・名前・肩書を付ける（スタッフが複数いる前提）。
   ここは院長ひとりなので同じ帯が7枚並び、くどいと判断した（2026-08-16 本人指摘）。
   **回答者は冒頭で1回だけ名乗る。**カードには付けない。
   開閉式にはしない（60代後半に開閉操作を強いない）。
   ※ .c-faq* は faq.html が使っているので触らない。 */
.c-ledger__whoami{display:flex;align-items:flex-start;gap:18px;margin:22px 0 0;max-width:50em;}
.c-ledger__whoami img{width:60px;height:60px;flex:none;border-radius:50%;object-fit:cover;
  object-position:center 10%;box-shadow:0 0 0 1px var(--line);}
.c-ledger__whoami p{font-size:clamp(15.5px,2vw,17.5px);line-height:1.95;color:var(--ink-sub);}
.c-ledger__whoami b{color:var(--ink);}
.c-ledger__grid{margin:36px 0 0;display:grid;gap:18px;}
@media(min-width:860px){ .c-ledger__grid{grid-template-columns:1fr 1fr;gap:22px;} }
.c-ledger__card{background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:26px;display:flex;flex-direction:column;
  box-shadow:0 18px 44px -38px rgba(26,26,24,.5);}
.c-ledger__q{display:grid;grid-template-columns:1.4em 1fr;gap:12px;align-items:baseline;margin:0;
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(16.5px,2vw,19.5px);line-height:1.7;}
.c-ledger__q i{font-style:normal;color:var(--navy);}
.c-ledger__a{margin:14px 0 0;font-size:15px;line-height:1.95;color:var(--ink-sub);flex:1 1 auto;}
.c-ledger__more{border:1px dashed rgba(26,26,24,.3);border-radius:8px;padding:28px 26px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;}
.c-ledger__more h3{margin:0;}
.c-ledger__more p{font-size:14.5px;line-height:1.9;color:var(--ink-sub);}
.c-ledger__more .btn{padding:13px 26px;font-size:15px;}

/* ⑬ FAQ（開いた状態で見せる。60代後半に開閉操作を強いない）※ faq.html で使用 */
.c-faq__list{margin:34px 0 0;}
.c-faq__item{padding:30px 0;border-bottom:1px solid var(--line);}
.c-faq__item:first-child{border-top:1px solid var(--line);}
.c-faq__q{display:grid;grid-template-columns:1.6em 1fr;gap:12px;align-items:baseline;
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(17px,2.3vw,21px);line-height:1.7;margin:0;}
.c-faq__q i{font-style:normal;font-family:'Space Grotesk',monospace;color:var(--navy);font-size:.8em;}
.c-faq__a{display:grid;grid-template-columns:1.6em 1fr;gap:12px;align-items:baseline;
  font-size:15.5px;line-height:2;color:var(--ink-sub);margin:14px 0 0;}
.c-faq__a i{font-style:normal;font-family:'Space Grotesk',monospace;color:var(--ink-sub);font-size:.85em;}

/* ⑭ 流れ（process-07「配送追跡風」を参照して再実装）
   荷物の追跡画面の見立て。済み／いまここ／これから、を1本の軌道で見せる。
   原本は「いまここ」が無限に脈打つが、治療院で点滅させ続けない。
   静止した二重丸に置き換えた（強度は弱まで）。 */
.c-track__lead{margin:20px 0 0;font-size:clamp(16px,2.1vw,18.5px);line-height:2.05;max-width:46em;}
.c-track__box{margin:36px 0 0;background:var(--white);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 28px 56px -44px rgba(26,26,24,.6);}
.c-track__th{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 18px;
  padding:16px 24px;background:var(--paper);border-bottom:1px solid var(--line);font-size:13.5px;}
.c-track__ttl b{font-family:'Noto Serif JP',serif;font-weight:600;font-size:16px;}
.c-track__pos{color:var(--ink-sub);}
.c-track__pos b{font-family:'Noto Serif JP',serif;font-weight:600;font-size:18px;color:var(--navy);}
.c-track__body{display:grid;}
.c-track__steps{list-style:none;margin:0;padding:26px 24px 26px 26px;}
.c-track__steps li{position:relative;padding:14px 0 14px 42px;}
/* 軌道は「1本の線」ではなく、段ごとの線分でつなぐ（段の高さがまちまちでもずれない） */
.c-track__steps li::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;
  background:var(--line);border-radius:2px;}
.c-track__steps li:first-child::before{top:29px;}
.c-track__steps li:last-child::before{bottom:auto;height:29px;}
.c-track__steps li.is-done::before{background:var(--navy);}
.c-track__steps li.is-now::before{background:linear-gradient(var(--navy) 29px,var(--line) 29px);}
.c-track__dot{position:absolute;left:0;top:20px;width:19px;height:19px;border-radius:50%;
  background:var(--white);border:3px solid var(--line);}
.is-done .c-track__dot{border-color:var(--navy);background:var(--navy);}
.is-done .c-track__dot::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border-right:2px solid var(--white);border-bottom:2px solid var(--white);transform:rotate(45deg);}
.is-now .c-track__dot{border-color:var(--navy);box-shadow:0 0 0 5px rgba(22,50,92,.13);}
.is-now .c-track__dot::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--navy);}
.c-track__tt{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;}
.c-track__tt h3{font-size:clamp(16.5px,2.1vw,20px);line-height:1.65;}
.c-track__steps li:not(.is-done):not(.is-now) h3{color:var(--ink-sub);}
.c-track__st{font-size:11.5px;letter-spacing:.14em;color:var(--navy);font-weight:700;}
.c-track__chip{font-size:11.5px;letter-spacing:.14em;font-weight:700;background:var(--navy);color:var(--white);
  border-radius:999px;padding:3px 12px;}
.c-track__steps p{margin:6px 0 0;font-size:14.5px;line-height:1.9;color:var(--ink-sub);}
.c-track__side{border-top:1px solid var(--line);background:var(--paper);
  padding:24px;display:flex;flex-direction:column;gap:18px;}
.c-track__bx .k{display:block;font-size:11.5px;letter-spacing:.16em;color:var(--navy);font-weight:700;}
.c-track__bx .v{display:block;font-family:'Noto Serif JP',serif;font-weight:600;font-size:16.5px;line-height:1.6;margin-top:3px;}
.c-track__bx .s{display:block;font-size:13px;color:var(--ink-sub);line-height:1.7;}
.c-track__memo{margin-top:auto;border:1px dashed rgba(26,26,24,.3);border-radius:8px;
  padding:14px 16px;font-size:13.5px;line-height:1.85;color:var(--ink-sub);}
.c-track__memo b{color:var(--ink);}
@media(min-width:900px){
  .c-track__body{grid-template-columns:1fr 292px;}
  .c-track__steps{padding:30px 30px 30px 30px;}
  .c-track__side{border-top:0;border-left:1px solid var(--line);padding:30px 26px;}
}

/* ⑮ お知らせ（blog-14「店主の手帖」を参照して再実装）
   左に手帖のカード、右に記事の並び。
   ※ .c-news__list の中身（li > a > img + .dt + .ttl）は変えない。
      build_theme.py がこの塊を WordPress の投稿ループに丸ごと差し替えるので、
      構造を変えると差し替えが外れる（NEWS_LOOP も直すことになる）。
   ※ .c-news__list はお知らせ一覧ページも使うので、行の見た目は .c-note 配下だけで変える。 */
.c-note__lead{margin:20px 0 0;font-size:clamp(16px,2.1vw,18.5px);line-height:2.05;max-width:46em;}
.c-note__cols{display:grid;gap:36px;margin:36px 0 0;}
@media(min-width:980px){ .c-note__cols{grid-template-columns:340px 1fr;gap:60px;align-items:start;} }
.c-note__card{background:var(--white);border:1px solid var(--line);border-radius:4px;
  padding:22px 22px 26px;box-shadow:0 24px 50px -40px rgba(26,26,24,.6);}
@media(min-width:980px){ .c-note__card{transform:rotate(-1.2deg);} }
.c-note__card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;}
.c-note__who{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin:16px 0 12px;padding-bottom:11px;border-bottom:1px solid var(--line);}
.c-note__who b{font-family:'Noto Serif JP',serif;font-weight:600;font-size:17.5px;}
.c-note__who span{font-size:11.5px;letter-spacing:.14em;color:var(--navy);font-weight:700;}
.c-note__card p{font-size:14.5px;line-height:1.9;color:var(--ink-sub);}
.c-note__sig{margin-top:14px;text-align:right;font-family:'Noto Serif JP',serif;font-size:14px;}
.c-note .c-news__list{border-top:1px solid var(--line);}
.c-note .c-news__list li:first-child{border-top:0;}
.c-note .c-news__list a{grid-template-columns:96px 1fr;gap:22px;padding:22px 2px;}
.c-note .c-news__list img{width:96px;height:96px;border:1px solid var(--line);}
.c-note .c-news__list .ttl{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(16px,1.9vw,19px);line-height:1.65;}
.c-note__more{margin:26px 0 0;}
.c-note__more a{font-size:15px;letter-spacing:.1em;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--navy);padding-bottom:4px;}
.c-note__more a:hover{opacity:.65;}

.c-news__list{list-style:none;margin:0;padding:0;}
.c-news__list li{border-bottom:1px dotted var(--line);}
.c-news__list li:first-child{border-top:1px dotted var(--line);}
.c-news__list a{display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:center;
  padding:18px 0;text-decoration:none;}
.c-news__list a:hover .ttl{color:var(--navy);}
.c-news__list img{width:88px;height:62px;object-fit:cover;}
.c-news__list .dt{display:block;font-family:'Space Grotesk',monospace;font-size:12px;
  letter-spacing:.1em;color:var(--ink-sub);}
.c-news__list .ttl{display:block;font-size:16px;line-height:1.75;margin-top:5px;}

/* ⑯ アクセス */
.c-acc__wrap{display:grid;gap:32px;}
@media(min-width:900px){ .c-acc__wrap{grid-template-columns:1fr 1fr;gap:52px;align-items:start;} }
.c-acc__dl{margin:0;border-top:1px solid var(--line);}
.c-acc__dl div{display:grid;grid-template-columns:6.5em 1fr;gap:0 18px;border-bottom:1px solid var(--line);}
.c-acc__dl dt{font-size:13px;letter-spacing:.12em;color:var(--navy);font-weight:700;padding:16px 0;}
.c-acc__dl dd{margin:0;font-size:16px;line-height:1.9;padding:16px 0;}
.c-acc__dl dd small{display:block;font-size:13.5px;color:var(--ink-sub);}
.c-acc__map{width:100%;aspect-ratio:4/3;border:1px solid var(--line);background:var(--navy-pale);}
.c-acc__map iframe{width:100%;height:100%;border:0;display:block;}

/* ⑰ 最終CTA（cta-11「対角二択」を参照して再実装）
   1枚を斜めに割って「書く／話す」の2択にする。中央の丸で、どちらも同じ人が受けると言う。
   原本は50:50・左が電話だが、当院は電話が補助（施術中は出られない）。
   フォーム側を先（左）・広め（58%）にして、主従を形で示す。
   原本の特大タイポ（最大124px）は使わない。ページの特大は⑥の「60」1つだけと決めている。
   ※ .c-cta* は下層ページのCTAが使っているので触らない。 */
.c-two{position:relative;padding:clamp(62px,8.5vw,112px) 0 0;overflow:hidden;}
.c-two__head{width:min(1060px,calc(100% - 44px));margin:0 auto clamp(30px,4vw,46px);
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 32px;}
.c-two__h{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(24px,4.2vw,42px);line-height:1.6;margin:14px 0 0;}
.c-two__sub{font-size:15px;line-height:1.95;color:var(--ink-sub);max-width:26em;}
.c-two__stage{position:relative;height:clamp(440px,58vh,560px);}
.c-two__panel{position:absolute;inset:0;display:block;text-decoration:none;overflow:hidden;}
.c-two__panel::after{content:"";position:absolute;inset:0;background:rgba(22,50,92,.08);
  opacity:0;transition:opacity .3s ease;}
.c-two__panel:hover::after{opacity:1;}
.c-two__write{clip-path:polygon(0 0,58% 0,42% 100%,0 100%);background:var(--navy);color:var(--white);}
.c-two__talk{clip-path:polygon(58% 0,100% 0,100% 100%,42% 100%);background:var(--white);color:var(--ink);}
/* 中身は、それぞれの台形の真ん中に置く。
   斜めに割ると、左の台形は高さの半分の位置で 0〜50%、右は 50〜100% を占める。
   その中心＝25% と 75%（外側の端に寄せると、片側だけ余白が空いて見えた） */
/* width を指定しないと、left:75% の側は「右端までの残り幅」に押し込まれて
   大きい文字が2行に割れる。中身なりの幅を持たせてから、中央へ寄せる */
.c-two__in{position:absolute;top:50%;display:flex;flex-direction:column;gap:9px;
  width:max-content;max-width:44vw;}
.c-two__write .c-two__in{left:25%;transform:translate(-50%,-50%);}
.c-two__talk .c-two__in{left:75%;transform:translate(-50%,-50%);text-align:right;align-items:flex-end;}
.c-two__tag{font-size:12.5px;letter-spacing:.16em;font-weight:700;}
.c-two__write .c-two__tag{color:var(--navy-pale);}
.c-two__talk .c-two__tag{color:var(--navy);}
.c-two__big{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(42px,7vw,74px);line-height:1.2;letter-spacing:.03em;}
.c-two__line{display:flex;flex-direction:column;gap:3px;
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(17px,2.1vw,22px);letter-spacing:.04em;}
.c-two__line small{font-family:'Noto Sans JP',sans-serif;font-weight:400;font-size:12.5px;letter-spacing:.04em;}
.c-two__write .c-two__line small{color:rgba(255,255,255,.68);}
.c-two__talk .c-two__line small{color:var(--ink-sub);}
.c-two__go{margin-top:12px;font-size:13.5px;font-weight:700;letter-spacing:.14em;}
.c-two__write .c-two__go{color:var(--navy-pale);}
.c-two__talk .c-two__go{color:var(--navy);}
.c-two__badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-6deg);
  width:132px;height:132px;border-radius:50%;background:var(--paper);border:1.5px solid var(--navy);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:'Noto Serif JP',serif;font-weight:600;font-size:14px;line-height:1.7;color:var(--ink);
  z-index:2;box-shadow:0 22px 44px -26px rgba(26,26,24,.55);pointer-events:none;}
.c-two__foot{width:min(1060px,calc(100% - 44px));margin:clamp(26px,3.4vw,40px) auto 0;
  padding-bottom:clamp(56px,7vw,92px);font-size:15px;line-height:1.95;color:var(--ink-sub);}
.c-two__foot b{color:var(--ink);font-family:'Noto Serif JP',serif;font-weight:600;}
@media(max-width:859px){
  .c-two__stage{height:auto;display:flex;flex-direction:column;}
  .c-two__panel{position:relative;inset:auto;}
  .c-two__write{clip-path:polygon(0 0,100% 0,100% 88%,0 100%);padding:52px 0 84px;order:1;}
  /* 上の余白は丸バッジの逃げ。詰めるとバッジが「話す。」の肩書きに重なる */
  .c-two__talk{clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);padding:126px 0 56px;margin-top:-46px;order:3;}
  /* transform の打ち消しは .c-two__in だけでは効かない。
     PC側で .c-two__write .c-two__in（詳細度2）に掛けているので、こちらも同じ形で書く。
     これを忘れると、文字が半分ずれて上の段落と重なる（qa_live が検出） */
  .c-two__in{position:relative;top:auto;width:auto;max-width:none;}
  .c-two__write .c-two__in{left:auto;transform:none;margin:0 clamp(22px,6vw,48px);}
  .c-two__talk .c-two__in{left:auto;right:auto;transform:none;margin:0 clamp(22px,6vw,48px) 0 auto;}
  .c-two__badge{position:relative;left:auto;top:auto;transform:rotate(-6deg);order:2;
    margin:-92px auto -56px;width:116px;height:116px;font-size:13px;z-index:3;}
}
@media (prefers-reduced-motion: reduce){ .c-two__panel::after{transition:none;} }

/* ⑰ 最終CTA ※ 下層ページで使用 */
.c-cta__h{font-family:'Noto Serif JP',serif;font-weight:600;
  font-size:clamp(24px,4.2vw,42px);line-height:1.6;margin:14px 0 0;}
.c-cta__body{margin:28px 0 0;font-size:clamp(16px,2.1vw,18.5px);line-height:2.05;color:rgba(255,255,255,.88);max-width:40em;}
.c-cta__body p+p{margin-top:1.2em;}
.c-cta__body b{color:var(--white);}
.c-cta__btns{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 0;}
.btn-onnavy{background:var(--white);color:var(--navy);}
.btn-onnavy:hover{background:var(--navy-pale);}
.btn-ghost{border:1.5px solid rgba(255,255,255,.6);color:var(--white);}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.c-cta__tel{margin:22px 0 0;font-size:14.5px;color:rgba(255,255,255,.7);}

/* ===================== 予約フォーム（contact.html） ===================== */
.c-form{margin:30px 0 0;max-width:640px;}
.c-form__note{font-size:14.5px;color:var(--ink-sub);line-height:1.9;margin:0 0 26px;}
.c-form__row{margin:0 0 22px;border:0;padding:0;}
.c-form__row label,.c-form__row legend{display:block;font-size:15.5px;font-weight:700;margin:0 0 8px;padding:0;}
.c-form__row input[type="text"],.c-form__row input[type="tel"],
.c-form__row input[type="email"],.c-form__row textarea{
  width:100%;font-family:inherit;font-size:17px;line-height:1.7;color:var(--ink);
  padding:14px 14px;border:1px solid var(--line);border-radius:6px;background:var(--white);}
.c-form__row input:focus,.c-form__row textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy);}
.c-form__ck{display:inline-flex;align-items:center;gap:8px;font-weight:400;font-size:16.5px;margin:0 20px 8px 0;}
.c-form__ck input{width:22px;height:22px;accent-color:var(--navy);flex:none;}
.c-form__help{font-size:14px;color:var(--ink-sub);line-height:1.85;margin:8px 0 0;font-weight:400;}
.c-form__submit{width:100%;justify-content:center;margin-top:12px;border:0;cursor:pointer;font-family:inherit;}

/* ===================== フッター（footer-08 移植） ===================== */
.ft{background:var(--paper);border-top:1px solid var(--line);}
.ft__grid{display:grid;}
@media(min-width:900px){ .ft__grid{grid-template-columns:1.05fr 1fr;} }
.ft__map{min-height:300px;background:var(--navy-pale);}
.ft__map iframe{width:100%;height:100%;min-height:300px;border:0;display:block;}
.ft__nap{padding:clamp(38px,5vw,54px) clamp(24px,4vw,52px);}
.ft__brand{font-family:'Noto Serif JP',serif;font-weight:600;font-size:clamp(24px,3.2vw,30px);
  letter-spacing:.06em;margin:12px 0 0;}
.ft__yomi{display:block;font-family:'Space Grotesk',monospace;font-size:10px;
  letter-spacing:.24em;color:var(--ink-sub);margin-top:8px;}
.ft__dl{margin:26px 0 0;border-top:1px solid var(--line);}
.ft__dl div{display:grid;grid-template-columns:6.2em 1fr;gap:0 18px;border-bottom:1px solid var(--line);}
.ft__dl dt{font-family:'Space Grotesk',monospace;font-size:10px;letter-spacing:.18em;
  color:var(--navy);font-weight:700;padding:14px 0;align-self:center;}
.ft__dl dd{margin:0;font-size:15px;line-height:1.85;padding:14px 0;}
.ft__dl dd small{display:block;color:var(--ink-sub);font-size:13px;}
/* 電話は指で押す場所。高さ44px以上を確保する（60代後半が対象） */
.ft__tel{font-family:'Space Grotesk',monospace;font-size:21px;font-weight:700;
  color:var(--ink);text-decoration:none;letter-spacing:.02em;
  display:inline-flex;align-items:center;min-height:44px;}
.ft__acts{display:flex;gap:12px;margin:28px 0 0;flex-wrap:wrap;}
.ft__acts a{flex:1 1 180px;display:flex;align-items:center;justify-content:center;
  padding:15px 12px;border-radius:8px;text-decoration:none;font-weight:700;font-size:15.5px;}
.ft__acts .p{background:var(--navy);color:#fff;}
.ft__acts .p:hover{background:var(--navy-d);}
.ft__acts .s{border:1.5px solid var(--ink);color:var(--ink);}
.ft__low{border-top:1px solid var(--line);}
.ft__low-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding:20px 26px;flex-wrap:wrap;}
.ft__low nav{display:flex;gap:20px;flex-wrap:wrap;}
.ft__low a{color:var(--ink-sub);text-decoration:none;font-size:13.5px;}
.ft__low a:hover{color:var(--navy);}
.ft__cp{font-family:'Space Grotesk',monospace;font-size:10.5px;letter-spacing:.12em;color:var(--ink-sub);}
.ft__demo{background:var(--navy-pale);border-top:1px solid var(--line);}
.ft__demo p{max-width:var(--wrap);margin:0 auto;padding:16px 26px;font-size:13.5px;
  color:var(--ink-sub);line-height:1.8;}

/* ===================== スマホ全画面メニュー（spmenu-03） ===================== */
.spnav{position:fixed;inset:0;z-index:70;background:var(--navy);
  opacity:0;visibility:hidden;transition:opacity .4s;overflow-y:auto;}
.spnav.is-open{opacity:1;visibility:visible;}
.spnav__in{min-height:100%;display:flex;flex-direction:column;justify-content:center;padding:88px 30px 110px;}
.spnav__close{position:absolute;top:16px;right:18px;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);
  background:none;border-radius:8px;cursor:pointer;}
.spnav__close::before,.spnav__close::after{content:"";position:absolute;left:50%;top:50%;
  width:20px;height:1.8px;background:#fff;}
.spnav__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.spnav__close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.spnav a{display:flex;align-items:baseline;gap:16px;color:var(--white);text-decoration:none;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.16);}
.spnav a .n{font-family:'Space Grotesk',monospace;font-size:10.5px;letter-spacing:.2em;
  color:rgba(255,255,255,.6);width:2.6em;flex:none;}
.spnav a .x{font-family:'Noto Serif JP',serif;font-size:20px;letter-spacing:.08em;font-weight:600;}
body.is-locked{overflow:hidden;}