@charset "utf-8";
/* =========================================================
   辻堂がじゅまる歯科 — 子ども定期検診LP
   デザイン規範: DESIGN.md（暖色A案 テラコッタ×木漏れ日）
   トークンの正本: honban/css/style.css :root と同値
   ========================================================= */

:root{
  /* ブランド */
  --primary:#C56A38;
  --primary-dark:#9C5026;
  --primary-light:#F7E8DB;
  --accent:#B85E2A;
  --accent-hover:#9C5026;
  /* 背景 */
  --bg-soft:#FBF8F3;
  --bg-warm:#F5ECE0;
  --warm-deep:#F0DAC8;
  --white:#FFFFFF;
  --paper:#FFFCF7;
  /* テキスト・境界 */
  --text:#3A2E26;
  --text-light:#6B5A4D;
  --border:#E5D9C9;
  --leaf:#7A9A6B;
  --ink:#9C5026;
  /* 形 */
  --r:8px; --r-lg:12px; --r-xl:20px;
  /* 影（茶チント・CTA限定で使用） */
  --shadow-cta:0 2px 4px rgba(120,72,40,.06), 0 10px 26px rgba(120,72,40,.16);
  --shadow-soft:0 1px 2px rgba(120,72,40,.06), 0 8px 22px rgba(120,72,40,.08);
  /* 書体 */
  --f-body:"Noto Sans JP",sans-serif;
  --f-display:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  /* 寸法 */
  --fs-hero:clamp(1.9rem,1.1rem + 3.6vw,3.1rem);
  --fs-h2:clamp(1.45rem,1.15rem + 1.2vw,1.875rem);
  --fs-lead:clamp(.95rem,.88rem + .3vw,1.0625rem);
  --space-section:clamp(64px,6vw + 24px,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--text);
  font-family:var(--f-body);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.55;margin:0}
p{margin:0}
ul,ol,dl{margin:0;padding:0;list-style:none}
dd{margin:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{width:min(1060px,100% - 40px);margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--text);color:var(--white);padding:10px 20px;border-radius:0 0 var(--r) var(--r);font-family:var(--f-display)}
.skip-link:focus{left:16px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f-display);font-weight:700;text-decoration:none;
  background:var(--accent);color:var(--white);
  border:1px solid transparent;border-radius:var(--r);
  padding:14px 32px;font-size:.9375rem;line-height:1.5;
  transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-sm{padding:8px 20px;font-size:.8125rem}
.btn-lg{padding:16px 34px;font-size:1rem}
.btn-web{display:flex;width:100%;max-width:var(--cta-w);margin:0;box-shadow:var(--shadow-cta)}
/* 予約セクションのCTA2つを同じ幅の縦積みに揃える */
.reserve-cta{--cta-w:340px;display:grid;gap:14px;justify-items:start;margin:24px 0 14px}
.btn-ghost{background:var(--white);color:var(--accent);border-color:var(--accent)}
.btn-ghost:hover{background:var(--accent);color:var(--white)}
/* 電話ボタン（唯一の主CTA。影はここだけ） */
.btn-tel{flex-direction:column;gap:2px;padding:12px 30px;box-shadow:var(--shadow-cta)}
/* 副CTA。Web予約（主）と役割を分けるため白地＋枠線。番号の視認性は保つ */
.btn-tel-ghost{background:var(--white);color:var(--accent);border-color:var(--accent);box-shadow:none}
.btn-tel-ghost:hover{background:var(--primary-light);color:var(--accent-hover)}
.btn-tel-ghost .tel-ic .f-l,.btn-tel-ghost .tel-ic path{fill:rgba(184,94,42,.14)}
.tel-lbl{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;letter-spacing:.04em;opacity:.95}
.tel-ic{width:16px;height:16px;flex:none}
.tel-ic .f-l,.tel-ic path{fill:rgba(255,255,255,.22);stroke:currentColor}
.tel-num{font-size:1.36rem;letter-spacing:.02em;line-height:1.25}

/* ---------- ヘッダー ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,252,247,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
/* 公式ロゴ（歯＋猫）。縦長のため高さ基準・地色なしで置く */
.logo-mark{width:auto;height:38px;flex:none;object-fit:contain}
.logo-txt{font-family:var(--f-display);font-weight:700;font-size:.95rem;line-height:1.3;display:flex;flex-direction:column}
.logo-txt em{font-style:normal;font-family:var(--f-body);font-weight:400;font-size:.68rem;color:var(--text-light);letter-spacing:.06em}
.head-nav{display:none;align-items:center;gap:20px}
.head-nav a{font-family:var(--f-display);font-weight:700;font-size:.875rem;text-decoration:none;position:relative}
.head-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--primary);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.head-nav a:not(.btn):hover::after{transform:scaleX(1)}
@media (min-width:1000px){.head-nav{display:flex}.head-in{min-height:72px}}

/* ---------- セクション共通 ---------- */
.sec{padding:var(--space-section) 0}
.sec-age{background:var(--bg-soft)}
.sec-menu{background:var(--white)}
.sec-why{background:var(--bg-warm)}
.sec-trouble{background:var(--bg-soft)}
.sec-school{background:var(--bg-warm)}
.sec-about{background:var(--white)}
.sec-flow{background:var(--bg-soft)}
.sec-reserve{background:var(--warm-deep)}

.sec-head{text-align:center;margin-bottom:44px}
.sec-label{font-family:var(--f-display);font-weight:700;font-size:.82rem;letter-spacing:.1em;color:var(--primary-dark);margin-bottom:10px}
.sec-title{font-size:var(--fs-h2);letter-spacing:.02em}
.sec-head .sec-title::after{content:"";display:block;width:74px;height:22px;margin:14px auto 0;background:no-repeat center/contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 22'%3E%3Cpath fill='%23C56A38' fill-opacity='.9' d='M37 3.2c3 4.2 6.6 6.4 11 6.6-2.6 3.8-6.2 5.6-10.8 5.4-4.6.2-8.2-1.6-10.8-5.4 4.4-.2 8-2.4 10.6-6.6Z'/%3E%3Cpath fill='%23C56A38' fill-opacity='.45' d='M2 11h20v1.6H2zM52 11h20v1.6H52z'/%3E%3C/svg%3E")}
.sec-lead{margin:16px auto 0;max-width:40em;font-size:var(--fs-lead);color:var(--text-light)}
.sec-head-l{text-align:left;margin-bottom:34px}
.sec-head-l .sec-title::after{margin-inline:0}
.sp-br{display:inline}
@media (min-width:760px){.sp-br{display:none}}
.pc-br{display:none}
@media (min-width:900px){.pc-br{display:inline}}

.note{margin-top:28px;font-size:.78rem;line-height:1.9;color:var(--text-light);border-top:1px solid var(--border);padding-top:14px}
.tag{display:inline-block;font-family:var(--f-display);font-weight:700;font-size:.66rem;background:var(--primary-light);color:var(--primary-dark);border-radius:999px;padding:.1em .8em;margin-left:.5em;vertical-align:.14em;letter-spacing:.06em}

/* 区切り波 */
.divider{line-height:0;margin-top:-1px}
.divider svg{width:100%;height:38px;fill:var(--to)}
.divider.flip svg{transform:scaleX(-1)}
@media (min-width:900px){.divider svg{height:62px}}

/* 画像の器（枠は細い罫線＋角丸。影は付けない） */
.art-frame{border-radius:var(--r-lg);overflow:hidden;background:var(--primary-light);border:1px solid var(--border)}
.art-frame img{width:100%;height:100%;object-fit:cover;background:var(--primary-light)}

/* マスコット */
.mascot{width:100%;height:auto;filter:drop-shadow(0 8px 12px rgba(120,72,40,.14))}
@keyframes sway{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-5px)}}
.sway{animation:sway 5s ease-in-out infinite;transform-origin:50% 92%}

/* 吹き出し（共通） */
.hero-bubble,.scene-bubble{
  position:absolute;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:var(--r-xl);padding:9px 15px;
  font-family:var(--f-display);font-weight:700;font-size:.82rem;line-height:1.55;
}
.hero-bubble .tail,.scene-bubble .tail{position:absolute;width:28px;height:19px;stroke:var(--ink)}

/* =========================================================
   1. ヒーロー
   ========================================================= */
.hero{position:relative;padding:26px 0 28px;overflow:hidden;background:linear-gradient(180deg,var(--paper) 0%,var(--bg-warm) 100%)}
.hero-in{display:grid;gap:24px}
.eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.eyebrow .tagline{font-family:var(--f-display);font-weight:700;font-size:.75rem;letter-spacing:.08em;color:var(--white);background:var(--primary);border-radius:999px;padding:.25em 1em}
.eyebrow .jp{font-size:.75rem;color:var(--text-light);letter-spacing:.04em}
.hero-h1{font-size:var(--fs-hero);line-height:1.45;letter-spacing:.01em}
.hero-h1 .mark{display:inline-block;background:linear-gradient(transparent 62%,#F6CFA4 62%,#F6CFA4 96%,transparent 96%);padding-inline:.06em}
/* 意図的な強調（このページで唯一、字送りとサイズを崩す1行） */
.hero-sub{margin-top:18px;font-family:var(--f-display);font-weight:700;font-size:clamp(1.22rem,5vw,1.72rem);line-height:1.5;letter-spacing:.12em;color:var(--primary-dark)}
.hero-lead{margin-top:10px;font-size:.9375rem;color:var(--text-light);max-width:32em}
.hero-topic{margin-top:8px;font-family:var(--f-display);font-weight:700;font-size:.9375rem;color:var(--primary)}
/* 予約セクションと同じ「同幅の縦積み」で電話とWebを2本立てにする */
.hero-btns{--cta-w:320px;margin-top:20px;display:grid;gap:10px;justify-items:start}
.hero-btns .btn{width:100%;max-width:var(--cta-w)}
.hero-sublink{margin-top:9px;font-size:.8125rem}
.hero-sublink a{color:var(--text-light);text-underline-offset:.25em}
.hero-note{margin-top:10px;font-size:.72rem;color:var(--text-light);line-height:1.7}
.hero-art{position:relative;padding-bottom:26px}
.hero-art .art-frame{aspect-ratio:4/3;max-width:520px;margin-inline:auto}
.hero-art .art-frame img{object-position:50% 50%}
.mascot-hero{display:none}
.hero-bubble{left:6px;bottom:22px}
.hero-bubble .tail{right:16px;bottom:-16px}
@media (min-width:900px){
  .hero{padding:56px 0 50px}
  .hero-in{grid-template-columns:1.04fr .96fr;align-items:center;gap:48px}
  .hero-art{padding-bottom:0}
  .hero-art .art-frame{aspect-ratio:4/3;max-width:none}
  .hero-bubble{left:-14px;bottom:40px;font-size:.94rem;padding:12px 18px}
}
/* 背景の丸（装飾） */
.deco-ring{position:absolute;border-radius:50%;pointer-events:none}
.d1{width:150px;height:150px;top:-56px;right:-46px;border:1px dashed rgba(197,106,56,.35)}
.d2{width:96px;height:96px;bottom:26px;left:-44px;background:rgba(240,218,200,.55)}
@media (max-width:767px){.deco-ring{display:none}}

/* =========================================================
   2. 年齢タイムライン（カードを使わない器）
   ========================================================= */
.tl-wrap{position:relative}
.tl-path{position:absolute;left:0;right:0;top:6px;width:100%;height:66px;display:none;pointer-events:none;
  fill:none;stroke:#D9BFA2;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 14}
.timeline{position:relative;display:grid;gap:20px}
.timeline::before{content:"";position:absolute;left:30px;top:24px;bottom:24px;width:0;border-left:3px dotted var(--border)}
.tl-item{position:relative;display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:start;padding-bottom:20px}
.tl-item:not(:last-child)::after{content:"";position:absolute;left:76px;right:0;bottom:0;border-bottom:1px solid var(--border)}
.tl-badge{position:relative;width:62px;height:62px;display:grid;place-items:center;background:transparent}
.tl-badge .ring{position:absolute;inset:0;width:100%;height:100%;--ring-fill:var(--paper)}
.tl-age{position:relative;font-family:var(--f-display);font-weight:700;font-size:1rem;line-height:1;text-align:center;letter-spacing:-.02em}
.tl-age small{font-size:.56rem;display:inline-block;margin-inline:.05em}
.tl-body{position:relative;padding:2px 52px 0 0}
.tl-icon{position:absolute;right:0;top:-2px;width:40px;height:40px;background:var(--white);border:1px solid var(--border);border-radius:50%;padding:6px}
.tl-icon svg{width:100%;height:100%}
.tl-body h3{font-size:1.0625rem}
.tl-body p{margin-top:4px;font-size:.875rem;color:var(--text-light)}
.tl-key .tl-badge .ring{--ring-fill:var(--primary-light)}
@media (min-width:760px) and (max-width:1059px){
  .timeline{grid-template-columns:repeat(2,1fr);gap:0 34px}
  .timeline::before{display:none}
  .tl-item:nth-last-child(2)::after{display:none}
}
@media (min-width:1060px){
  .tl-path{display:block}
  .timeline{grid-template-columns:repeat(5,1fr);gap:0 16px;padding-top:4px}
  .timeline::before{display:none}
  .tl-item{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0;padding-bottom:0}
  .tl-item::after{display:none}
  .tl-badge{z-index:2}
  .tl-badge::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--bg-soft);z-index:-1}
  .tl-body{position:static;padding:0;width:100%}
  .tl-body h3{font-size:1rem;margin-top:10px}
  .tl-body p{font-size:.84rem;text-align:left}
  .tl-icon{position:absolute;top:2px;left:calc(50% + 18px);right:auto;width:36px;height:36px;padding:5px;z-index:3}
}

/* =========================================================
   3. 検診で行うこと（左右交互の帯。カード枠なし）
   ========================================================= */
.scene-list{display:grid;gap:48px}
.scene{display:grid;gap:20px}
.scene-art{position:relative}
.scene-art .art-frame{aspect-ratio:4/3;max-width:520px;margin-inline:auto}
.scene-bubble{right:8px;top:-14px;max-width:11em}
.scene-bubble .tail{left:22px;bottom:-16px;transform:scaleX(-1)}
.scene-no{font-family:var(--f-display);font-weight:700;font-size:1.9rem;line-height:1;color:var(--primary);opacity:.42;letter-spacing:.04em}
.scene-txt h3{font-size:clamp(1.14rem,4.6vw,1.4rem);margin:6px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--primary-light)}
.scene-txt p{font-size:.9375rem;color:var(--text-light)}
/* 01 だけは実写＋ワイド配置で、このセクションの主役として重くする */
.scene-lead .scene-art{margin:0}
.scene-lead .scene-art .art-frame{aspect-ratio:16/10;max-width:none}
.art-cap{margin-top:10px;font-size:.78rem;line-height:1.75;color:var(--text-light);padding-left:12px;border-left:2px solid var(--primary-light)}
@media (min-width:820px){
  .scene-list{gap:64px}
  .scene{grid-template-columns:1fr 1.05fr;align-items:center;gap:44px}
  .scene.rev .scene-art{order:2}
  .scene-art .art-frame{max-width:none;aspect-ratio:4/3.1}
  .scene-lead{grid-template-columns:1fr;gap:28px}
  .scene-lead .scene-art .art-frame{aspect-ratio:2.15/1}
  .art-cap{font-size:.82rem;margin-top:12px}
  .scene-lead .scene-txt{
    display:grid;grid-template-columns:1fr 1.15fr;column-gap:48px;align-items:start;
    grid-template-areas:"no body" "ttl body";
  }
  .scene-lead .scene-txt .scene-no{grid-area:no;font-size:2.5rem;opacity:.5}
  .scene-lead .scene-txt h3{grid-area:ttl;font-size:1.6rem;margin-top:10px}
  .scene-lead .scene-txt p:not(.scene-no){grid-area:body;align-self:center;font-size:1rem}
}

/* 追加2項目は罫線リストに解体 */
.plus-list{margin-top:44px;border-top:1px solid var(--border)}
.plus-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:18px 2px;border-bottom:1px solid var(--border)}
.plus-ic{width:44px;height:44px;display:grid;place-items:center;padding:7px;background:var(--bg-soft);border-radius:50%}
.plus-ic svg{width:100%;height:100%}
.plus-list h3{font-size:1rem}
.plus-list p{margin-top:2px;font-size:.875rem;color:var(--text-light)}
@media (min-width:820px){
  .plus-list{display:grid;grid-template-columns:repeat(2,1fr);column-gap:44px}
  .plus-list li{grid-template-columns:48px 1fr}
}

/* =========================================================
   4. なぜ定期検診か（筆頭主役＋罫線リスト）
   ========================================================= */
.why-lead{display:grid;gap:16px;align-items:start;margin-bottom:44px}
.why-lead-ic{width:76px;height:76px;display:grid;place-items:center;padding:12px;background:var(--paper);border:1px solid var(--border);border-radius:50%}
.why-lead-ic svg{width:100%;height:100%}
.why-lead-kicker{font-family:var(--f-display);font-weight:700;font-size:.78rem;letter-spacing:.1em;color:var(--primary-dark);border-bottom:2px dotted var(--primary);display:inline-block;padding-bottom:2px;margin-bottom:10px}
.why-lead-h{font-size:clamp(1.42rem,5.4vw,2.24rem);line-height:1.45;letter-spacing:.01em}
.why-lead-p{margin-top:14px;font-size:clamp(.95rem,3.6vw,1.05rem);color:var(--text-light);max-width:32em}
.why-lead-pt{margin-top:18px;font-family:var(--f-display);font-weight:700;font-size:clamp(1rem,4vw,1.2rem);line-height:1.7;border-left:5px solid var(--primary);padding-left:14px}
@media (min-width:820px){
  .why-lead{grid-template-columns:auto 1fr;gap:32px;margin-bottom:56px}
  .why-lead-ic{width:104px;height:104px;padding:16px;margin-top:6px}
}
.why-sub-lbl{font-family:var(--f-display);font-weight:700;font-size:.9rem;color:var(--text-light);padding-bottom:10px;border-bottom:2px solid var(--primary-dark)}
.why-list li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;padding:18px 2px;border-bottom:1px solid rgba(156,80,38,.18)}
.why-list li:last-child{border-bottom:0}
.why-ic{width:42px;height:42px;display:grid;place-items:center;padding:6px;background:var(--paper);border-radius:50%}
.why-ic svg{width:100%;height:100%}
.why-list h3{font-size:1.0625rem}
.why-list p{margin-top:2px;font-size:.9rem;color:var(--text-light)}
@media (min-width:820px){
  .why-list li{grid-template-columns:52px 1fr;gap:18px;padding:22px 2px}
}

/* =========================================================
   5. 困りごと来院（吹き出しクラスタ。カードにしない）
   ========================================================= */
.trb-cluster{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:20px 10px;max-width:900px;margin-inline:auto;
}
.trb-cluster>li{display:flex}
.trb{
  position:relative;background:var(--paper);border:1.5px solid var(--ink);color:inherit;
  border-radius:999px;padding:8px 14px;cursor:pointer;text-align:left;
  font-family:var(--f-display);font-weight:700;line-height:1.5;letter-spacing:.01em;
  transform:rotate(var(--rot,0deg)) translateY(var(--dy,0));
  transition:background-color .2s ease;
}
.trb:hover{background:var(--primary-light)}
.trb[aria-expanded="true"]{background:var(--primary-light);border-color:var(--primary-dark)}
.trb-txt{position:relative}
.trb-txt::after{content:"";display:inline-block;width:.5em;height:.5em;margin-left:.5em;vertical-align:.12em;
  border-right:2px solid var(--primary-dark);border-bottom:2px solid var(--primary-dark);
  transform:rotate(45deg) translateY(-.1em);transition:transform .2s ease}
.trb[aria-expanded="true"] .trb-txt::after{transform:rotate(225deg) translateY(-.16em)}
.trb-cloud{border-radius:58% 42% 60% 40%/54% 58% 42% 46%;padding:12px 18px}
.trb-s{font-size:.78rem}
.trb-m{font-size:.84rem}
.trb-l{font-size:.92rem}
.trb .tail{position:absolute;left:24px;bottom:-14px;width:25px;height:17px;stroke:var(--ink)}
.trb-cluster>li:nth-child(1){--rot:-2.4deg;--dy:-6px}
.trb-cluster>li:nth-child(2){--rot:1.8deg;--dy:10px}
.trb-cluster>li:nth-child(3){--rot:-1.4deg;--dy:-2px}
.trb-cluster>li:nth-child(4){--rot:2.6deg;--dy:14px}
.trb-cluster>li:nth-child(5){--rot:-1.8deg;--dy:2px}
.trb-cluster>li:nth-child(6){--rot:1.6deg;--dy:-8px}
@media (min-width:760px){
  .trb-cluster{gap:26px 18px}
  .trb{padding:11px 20px}
  .trb-cloud{padding:16px 26px}
  .trb-s{font-size:.9rem}
  .trb-m{font-size:1rem}
  .trb-l{font-size:1.12rem}
}

.trb-hint{margin-top:22px;text-align:center;font-size:.78rem;color:var(--text-light)}

/* 選んだ吹き出しの説明を、共通の1エリアに切り替えて表示 */
.trb-detail{max-width:760px;margin:18px auto 0}
.trb-panel{background:var(--paper);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 18px}
.trb-panel[hidden]{display:none}
.trb-p-h{font-size:1.06rem;padding-bottom:10px;border-bottom:2px solid var(--primary-light)}
.trb-p-list{margin-top:14px;display:grid;gap:14px}
.trb-p-list dt{font-family:var(--f-display);font-weight:700;font-size:.88rem;color:var(--primary-dark)}
.trb-p-list dd{margin-top:3px;font-size:.9rem;color:var(--text-light)}
.trb-p-ask{margin-top:16px;padding-top:12px;border-top:1px dotted var(--border);font-size:.88rem;line-height:1.85}
@media (min-width:820px){
  .trb-panel{padding:26px 30px}
  .trb-p-list{gap:16px}
  .trb-p-list dd{font-size:.9375rem}
}

.trb-lead{display:grid;grid-template-columns:88px 1fr;gap:14px;align-items:center;margin-top:44px}
.mascot-trb{width:88px}
.trb-catch{font-family:var(--f-display);font-weight:700;font-size:clamp(1.06rem,4.2vw,1.44rem);line-height:1.6}
.trb-sub{margin-top:8px;font-size:.9rem;color:var(--text-light)}
.trb-urgent{
  display:flex;align-items:flex-start;gap:10px;margin-top:16px;
  background:var(--primary-light);border-radius:var(--r-lg);padding:12px 16px;
  font-size:.86rem;line-height:1.8;color:var(--primary-dark);
}
.trb-urgent-ic{flex:none;width:26px;height:26px;display:grid;place-items:center;background:var(--paper);border-radius:50%;padding:3px;margin-top:1px}
.trb-urgent-ic svg{width:100%;height:100%}
.trb-cta{margin-top:18px}
.trb-cta .tel-ic{width:15px;height:15px}
@media (min-width:820px){
  .trb-lead{grid-template-columns:132px 1fr;gap:32px;margin-top:56px;max-width:880px;margin-inline:auto}
  .mascot-trb{width:132px}
  .trb-sub{font-size:.9375rem}
  .trb-urgent{font-size:.9rem}
}

/* =========================================================
   6. 当院について
   ========================================================= */
.about-story{display:grid;gap:26px;margin-bottom:44px}
.about-director{margin:0;max-width:300px}
.director-frame{aspect-ratio:3/4}
.director-frame img{object-position:50% 18%}
.about-director figcaption{margin-top:10px;font-family:var(--f-display);font-weight:700;font-size:.9rem;text-align:center}
.about-story-txt{display:grid;gap:16px;align-content:center}
.story-quote{margin:0;position:relative;padding-left:22px}
.story-quote::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;background:var(--primary)}
.story-quote p{font-family:var(--f-display);font-weight:700;font-size:clamp(1.16rem,4.6vw,1.6rem);line-height:1.6}
.story-body p+p{margin-top:12px}
.story-body p{font-size:.9375rem;color:var(--text-light)}
@media (min-width:820px){
  .about-story{grid-template-columns:300px 1fr;gap:48px;align-items:center}
}
.about-cat{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;background:var(--bg-warm);border-radius:var(--r-xl);padding:20px 22px;margin-bottom:36px}
.cat-photo-wrap{position:relative}
.cat-photo{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 30%;border-radius:var(--r-lg);border:1px solid var(--border)}
.mascot-cat{position:absolute;right:-14px;bottom:-12px;width:52px}
.about-cat h3{font-size:1.0625rem}
.about-cat p{margin-top:4px;font-size:.9rem;color:var(--text-light)}
@media (min-width:820px){
  .about-cat{grid-template-columns:170px 1fr;gap:28px;padding:26px 34px}
  .mascot-cat{width:72px;right:-18px;bottom:-14px}
}
.info-list{border-top:1px solid var(--border)}
.info-row{display:grid;grid-template-columns:1fr;gap:2px;padding:16px 2px;border-bottom:1px solid var(--border)}
.info-row dt{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:.94rem}
.info-ic{width:34px;height:34px;flex:none;display:grid;place-items:center;padding:5px;background:var(--bg-soft);border-radius:50%}
.info-ic svg{width:100%;height:100%}
.info-row dd{font-size:.9rem;color:var(--text-light)}
@media (min-width:820px){
  .info-row{grid-template-columns:12em 1fr;gap:24px;align-items:center;padding:18px 2px}
}

/* =========================================================
   7. 流れ＋FAQ
   ========================================================= */
.flow-wrap{position:relative}
.flow-path{position:absolute;left:0;right:0;top:0;height:96px;width:100%;display:none;
  fill:none;stroke:#D9BFA2;stroke-width:5;stroke-linecap:round;stroke-dasharray:1 16}
.flow-list{display:grid;gap:20px;position:relative}
.flow-step{display:grid;grid-template-columns:54px 1fr;gap:4px 14px;align-items:center}
.flow-no{width:54px;height:54px;display:grid;place-items:center;position:relative;grid-row:span 2}
.flow-no .ring{position:absolute;inset:0;width:100%;height:100%;--ring-fill:var(--primary-light)}
.flow-no em{position:relative;font-style:normal;font-family:var(--f-display);font-weight:700;font-size:1.24rem;line-height:1}
.flow-step h3{font-size:1.0625rem;align-self:end}
.flow-step p{font-size:.875rem;color:var(--text-light);grid-column:2;align-self:start}
.flow-step:not(:last-child){padding-bottom:20px;border-bottom:1px solid var(--border)}
@media (min-width:860px){
  .flow-wrap{padding-top:82px}
  .flow-path{display:block}
  .flow-list{grid-template-columns:repeat(3,1fr);gap:30px}
  .flow-step,.flow-step:not(:last-child){grid-template-columns:1fr;justify-items:center;align-content:start;text-align:center;gap:0;padding-bottom:0;border-bottom:0}
  .flow-no{grid-row:auto;margin-bottom:12px}
  .flow-no::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:var(--bg-soft);z-index:-1}
  .flow-step p{grid-column:1;margin-top:6px}
}

.faq-block{margin-top:64px;max-width:760px;margin-inline:auto}
.faq-h{font-size:1.24rem;text-align:center;margin-bottom:22px}
.faq-list{display:grid;gap:10px}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.faq-item h3{margin:0;font-size:1rem}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;text-align:left;background:none;border:0;padding:15px 16px;cursor:pointer;color:inherit;font-family:var(--f-display);font-weight:700;font-size:.96rem;line-height:1.6}
.q-mark{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:var(--white);font-size:.82rem;font-family:var(--f-display)}
.q-txt{flex:1}
.q-ico{position:relative;flex:none;width:18px;height:18px}
.q-ico::before,.q-ico::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:var(--primary-dark);transform:translate(-50%,-50%)}
.q-ico::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .25s ease}
.faq-q[aria-expanded="true"] .q-ico::after{transform:translate(-50%,-50%) rotate(0)}
.faq-a{padding:0 16px 16px 54px}
.faq-a p{font-size:.9rem;color:var(--text-light)}
.faq-q:hover{background:var(--bg-soft)}

/* =========================================================
   8. 予約CTA
   ========================================================= */
.reserve-in{display:grid;gap:32px}
.reserve-txt .sec-label{text-align:left}
.reserve-h{font-size:clamp(1.42rem,5vw,2.05rem)}
.reserve-txt .sec-title::after{display:none}
.reserve-txt .sec-lead{margin-inline:0;color:var(--text)}
.tel-block{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;max-width:var(--cta-w);
  margin-top:0;padding:16px 30px;text-decoration:none;
  background:var(--accent);color:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow-cta);transition:background-color .25s ease,transform .25s ease;
}
.tel-block:hover{background:var(--accent-hover);transform:translateY(-1px)}
.tel-block-lbl{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:700;font-size:.82rem;letter-spacing:.04em}
.tel-block-lbl .tel-ic{width:17px;height:17px}
.tel-block-num{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.2;letter-spacing:.02em}
.reserve-sub{margin-top:12px;font-size:.8rem;color:var(--text-light)}
.hours{background:var(--paper);border-radius:var(--r-lg);padding:20px 18px}
.hours-h{font-size:1rem;padding-bottom:10px;border-bottom:2px solid var(--primary-light)}
.hours-tbl{width:100%;border-collapse:collapse;margin-top:6px;font-size:.875rem}
.hours-tbl th,.hours-tbl td{padding:11px 2px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.hours-tbl th{font-family:var(--f-display);font-weight:700;white-space:nowrap;width:7.2em}
.hours-note{display:inline-block;margin-left:.6em;font-size:.72rem;color:var(--text-light)}
.hours-tbl .is-closed td,.hours-tbl .is-closed th{color:var(--text-light)}
.hours-addr{margin-top:14px;font-size:.8rem;line-height:1.85;color:var(--text-light)}
@media (min-width:900px){
  .reserve-in{grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}
  .hours{padding:26px 28px}
}

/* ---------- フッター ---------- */
.site-foot{background:#3A352F;color:rgba(255,255,255,.82);padding:44px 0 28px;text-align:center}
.foot-logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:#fff}
.foot-logo .logo-mark{height:42px}
.foot-addr{margin-top:10px;font-size:.82rem}
.foot-nav{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center}
.foot-nav a{font-size:.82rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.foot-nav a:hover{color:#F0DAC8;border-color:#F0DAC8}
.copy{margin-top:22px;font-size:.72rem;color:rgba(255,255,255,.6);letter-spacing:.04em}

/* ---------- モバイル固定電話バー ---------- */
.mbar{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:60;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--accent);color:var(--white);text-decoration:none;
  border-radius:999px;padding:11px 16px;box-shadow:var(--shadow-cta);
}
.mbar .tel-ic{width:20px;height:20px}
.mbar-txt{font-family:var(--f-display);font-weight:700;font-size:1.06rem;line-height:1.2;display:flex;align-items:baseline;gap:8px}
.mbar-txt em{font-style:normal;font-size:.74rem;letter-spacing:.04em}
/* ヒーロー内の電話CTAと重複する間は退避（JS: .is-off / JS無効時は常時表示） */
.mbar{transition:opacity .28s ease,transform .28s ease,visibility 0s linear 0s}
.mbar.is-off{
  opacity:0;transform:translateY(150%);visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
}
@media (prefers-reduced-motion:reduce){
  .mbar,.mbar.is-off{transition:none}
  .mbar.is-off{transform:none}
}
@media (min-width:1000px){.mbar{display:none}}
@media (max-width:999px){body{padding-bottom:72px}}

/* =========================================================
   出現アニメ（主役数点のみ）
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1)}
.js .reveal.is-in{opacity:1;transform:none}
.js .flow-path{stroke-dashoffset:420;transition:stroke-dashoffset 1.8s ease}
.js .flow-wrap.is-in .flow-path{stroke-dashoffset:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .flow-path{stroke-dashoffset:0}
}