/* ============================================================
   LIFELANTERN CLINIC / 制作例12
   世界観 = 生成り × 深緑 × アプリコット × ペールミント / Klee One の手書き調
   動きの主題 = 「呼吸」。速い動き・派手な動きは置かない。
   ------------------------------------------------------------
   出現演出の約束(社内実測の地雷を避けるため。緩めないこと):
     ・隠すのに opacity を使わない  → 持ち上げ = translate / 覆い = clip-path
     ・IntersectionObserver を使わない → clip-path を持つ要素は永久に見えない
     ・隠す側は :where(html.js) の中に置く → JS が落ちたら本文は全部出る
       (html.js .rise と書くと .rise.seen に詳細度で勝ってしまい今度は永久に出ない)
     ・触る演出は必ず @media(hover:hover) の中(指の画面で :hover が居座るため)
     ・ループは translate / scale / rotate、ホバーは transform に分ける(同じ property に
       animation と transition を同時に載せると触った瞬間に瞬間移動する)
   ------------------------------------------------------------
   見出しの大きさの約束(2026-08-26 に作り直した。緩めないこと):
     ・h1 / h2 / h3 は **一本の物差し**から取る。節ごとに cqi で別々に決めない。
       節ごとの cqi 方式は、器の幅が節ごとに違うため「幅 721px で小見出しが主見出しより
       大きい」「幅 1px 動かすと半分になる」という逆転と崖を必ず作る(21 幅で実測)。
     ・h2 / h3 は vw の clamp = 幅の連続関数。折り返しの境目で跳ねようがない。
     ・器のほうを文字に合わせる(器が狭ければ 1 列に戻す / 余白を詰める)。
       文字のほうを器に合わせると上の逆転が戻ってくる。
   ============================================================ */

/* ---------- 1. 土台 ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:clip}
img{display:block;width:100%;height:100%;object-fit:cover}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
figure{margin:0}

:root{
  --bg:#f7eadb;          /* 生成りのクリーム */
  --ink:#173e3d;         /* 深い緑 */
  --cream:#fbf4ea;       /* オフホワイト */
  --apricot:#f2c5a3;
  --mint:#a9d7d2;
  --mist:#edf3f1;        /* ミントを薄めた地 */
  --peach:#f6e3d3;       /* アプリコットを薄めた地 */
  --muted:#356460;
  --body:"Zen Maru Gothic","Yu Gothic",sans-serif;
  --hand:"Klee One",serif;
  --ease:cubic-bezier(.16,.7,.24,1);
  /* 見出しの物差し(全節共通)。h1 はヒーロー専用なので下で別に持つ。 */
  --h2:clamp(26px,4.6vw,62px);
  --h3:clamp(23px,3.8vw,56px);   /* 大きく見せる小見出し = 3つの姿勢 */
}

.demo{position:fixed;z-index:99;left:10px;bottom:10px;padding:9px 13px;border:1px solid currentColor;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-radius:999px;font:600 12px/1 var(--body);letter-spacing:.08em}
.demo a{text-decoration:underline;margin-left:10px}
.skip{position:fixed;top:-80px;left:8px;z-index:110;background:#fff;color:#000;padding:10px}
.skip:focus{top:8px}
:focus-visible{outline:3px solid #65a7ff;outline-offset:4px}
@media(max-width:720px){.demo{max-width:calc(100vw - 20px)}}

/* ---------- 2. 見出しの「かたまり」 ----------
   作者が割った位置でだけ改行する。1 かたまり = 1 行。
   shared-quality.css が ≤820px で white-space:normal!important を当ててくるので、
   全長パス + !important で上から押さえる(24 本が共有するファイルには触らない)。 */
main p,main li,main dd,main dt{word-break:auto-phrase}
.phrase{display:block;white-space:nowrap}
html body div#main main h1 span.phrase,
html body div#main main h2 span.phrase,
html body div#main main p span.phrase{display:block!important;white-space:nowrap!important;width:auto!important}

/* ---------- 3. 出現演出 ---------- */
:where(html.js) .rise{translate:0 22px;clip-path:inset(0 0 100% 0)}
:where(html.js) .rise-wipe{clip-path:inset(0 0 100% 0)}
:where(html.js) .lift{translate:0 20px}
.rise.seen,.lift.seen{translate:none}
.rise.seen,.rise-wipe.seen{clip-path:inset(0)}
html.anim .rise.seen{transition:translate .7s var(--ease) var(--d,0s),clip-path .7s var(--ease) var(--d,0s)}
html.anim .rise-wipe.seen{transition:clip-path .7s var(--ease) var(--d,0s)}
html.anim .lift.seen{transition:translate .7s var(--ease) var(--d,0s)}
/* 開き切ったら clip-path を捨てる。clip-path を持つ要素は後ろの静的な兄弟より上に描かれ、
   触れる部品の当たり判定まで切ってしまうため。 */
.rise.done,.rise-wipe.done{clip-path:none}

/* 線が描かれる演出。長さは site.js が getTotalLength() で実測して --len に入れる。 */
:where(html.js) .drawn{stroke-dasharray:var(--len,900px);stroke-dashoffset:var(--len,900px)}
.seen .drawn{animation:draw 1.25s var(--ease) var(--dd,.08s) both}
.seen .dl-sweep.drawn{animation:sweep20 1.7s var(--ease) .3s both}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
  .rise,.rise-wipe,.lift{translate:none!important;clip-path:none!important}
  .drawn{stroke-dasharray:none!important;stroke-dashoffset:0!important}
}

/* ---------- 4. ヘッダー ----------
   ★2026-08-26: 透明 + color:#fff + mix-blend-mode:difference をやめた。
     地の色によって出る色が変わり、深緑の帯(#173e3d)の上ではパレットに無いピンク
     #E8C1C2 が出ていた。さらに地が無いので、下の本文の字画とロゴの字画が混ざっていた
     (診療時間表の「9:00—13:00」/ 相談室の線画 / QUESTIONS で実測)。
     承認・配信済みの兄弟 09-relay-logistics の .relay-head と同じ「地を敷いた帯」にする。
   ★上端は共有 CSS が top:56px!important(≤820px は 52px)で決めていて、上の帯との間に
     写真が 12px だけ覗く隙間ができる。下の「共有 CSS の上書き」で 44px = 上の帯の下端
     (22 幅で実測、全幅 44px)にそろえ、画面の上を 1 本の帯にする。 */
.split-head{position:fixed;z-index:30;inset:20px 0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px clamp(14px,2.6vw,30px);background:var(--cream);border-bottom:1px solid #173e3d24;color:var(--ink)}
.split-head>a{font:600 15px/1.2 var(--body);letter-spacing:.1em}
.split-head nav{display:flex;gap:22px;font-size:12px;line-height:1.2}
@media(hover:hover){
  .split-head nav a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .3s ease}
  .split-head nav a:hover{text-decoration-color:currentColor}
}
/* 飛び先が帯の下に潜らないようにする。帯の下端は実測 87px(>820px)/ 89px(≤820px)。 */
#care,#finder,#rooms,#team,#outpatient,#visit{scroll-margin-top:102px}

/* ---------- 5. ヒーロー(2分割) ----------
   ★列幅そのものを --l / --r で動かす。grid item に flex-basis は効かないため、
     以前の pointermove は 1px も動いていなかった(2026-08-26 実測)。
   ★左右の振れ幅は 44%〜56% に閉じてある。これ以上振ると医師の頭(画像上端から 5.5%)が切れる。 */
.split-hero{position:relative;display:grid;grid-template-columns:var(--l,50%) var(--r,50%);aspect-ratio:4/3;background:var(--bg);container-type:inline-size}
/* ★写真の枠だけを名指しする。.seam も div なので .split-hero>div と書くと巻き込まれ、
   詳細度で position:absolute を奪われて格子の 2 行目になる(2026-08-26 実測。
   ヒーローの高さが 26px 縮み、写真が縦に 37px 切られていた)。 */
.split-hero>.patient,.split-hero>.doctor{position:relative;overflow:hidden;min-width:0;height:100%}
.split-hero>.patient>img,.split-hero>.doctor>img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
/* ★白い字に影だけでは、明るい写真(白衣・ブラインド・カーテン)の上で沈む。
   このページが既に持っている語彙(深緑の小さな丸)に載せる。
   実測: 白 #fff を #0f2b2acc(明るい写真の上)に載せた比 = 8.6。
   ★位置は共有 CSS が top:110px!important で決めていて、site.css の bottom:20px は
     死んでいた(2026-08-26 実測)。下の「共有 CSS の上書き」でこちら側から明示する。 */
.split-hero>.patient>span,.split-hero>.doctor>span{position:absolute;left:20px;padding:6px 13px;border-radius:999px;background:#0f2b2acc;backdrop-filter:blur(3px);font-size:12px;line-height:1.4;letter-spacing:.14em;color:#fff}
@media(hover:hover) and (pointer:fine){
  .split-hero{transition:grid-template-columns .2s ease-out}
}

.seam{position:absolute;z-index:2;top:0;bottom:0;left:var(--l,50%);width:26px;translate:-50% 0;pointer-events:none;display:grid;place-items:center}
.seam-line{display:block;position:absolute;top:0;bottom:0;left:50%;width:1px;translate:-50% 0;
  background:linear-gradient(180deg,#fff0 0%,#ffffffb0 22%,#fff0 48%,#ffffffb0 74%,#fff0 100%);
  background-size:100% 220%;animation:seamflow 14s linear infinite}
.seam-mark{position:relative;width:26px;height:26px}
.seam-halo{fill:var(--apricot);opacity:.4;transform-box:view-box;transform-origin:12px 12px;animation:breathe 6s ease-in-out infinite}
.seam-orb{fill:#fff;animation:blink 6s ease-in-out infinite}

.split-hero h1{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;width:80%;min-width:0;margin:0;text-align:center;
  font-family:var(--hand);font-weight:600;font-size:min(108px,calc(80cqi / 9.4));line-height:1.25;color:#fff;
  text-shadow:0 2px 10px #000c,0 6px 40px #000a,0 0 2px #0007}
.split-hero>p{position:absolute;z-index:3;bottom:20px;left:50%;translate:-50% 0;margin:0;padding:8px 18px;border-radius:999px;
  background:#0f2b2ac9;backdrop-filter:blur(4px);color:#fff;font-size:14px;line-height:1.4;white-space:nowrap}
/* ★SCROLL の白い字は、写真の淡いところに乗ると実画素の比が 1.15〜1.28 しか無かった
   (影を 8px 付けても足りない。2026-08-26 実測)。他の 2 つと同じ深緑の丸に載せる。 */
.dive{position:absolute;z-index:3;right:26px;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:11px 15px 9px;border-radius:999px;background:#0f2b2ad9;backdrop-filter:blur(4px);
  color:#fff;font-size:12px;line-height:1.2;letter-spacing:.18em;animation:hop 2.8s ease-in-out infinite}
.dive svg{width:18px;height:32px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 6. 呼吸の帯 ---------- */
.breath{background:var(--ink);color:var(--cream);container-type:inline-size;display:grid;gap:clamp(28px,3.4vw,50px);
  padding:clamp(60px,6.5vw,108px) clamp(20px,5vw,72px) clamp(52px,5.5vw,92px)}
.breath-copy{display:grid;gap:16px;max-width:920px}
.breath .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--mint)}
.breath .lede{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.3}
.breath .sub{margin:0;font-size:15px;line-height:2;max-width:640px;color:#dceae7}
.breath-wave{width:100%;aspect-ratio:900/160;max-height:180px}
.wv{fill:none;stroke-linecap:round}
.wv-back{stroke:#2d635f;stroke-width:11}
.wv-front{stroke:var(--mint);stroke-width:3}
.flow-a{animation:wave 24s linear infinite}
.wv-halo{fill:var(--mint);opacity:.2;transform-box:view-box;transform-origin:405px 80px;animation:breathe 6.5s ease-in-out infinite}
.wv-core{fill:var(--apricot);animation:blink 6.5s ease-in-out infinite}
.breath-facts{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);
  border-top:1px solid #ffffff33;padding-top:clamp(22px,2.6vw,36px)}
.breath-facts>div{display:grid;gap:10px}
.breath-facts dt{font-family:var(--hand);font-weight:600;font-size:clamp(30px,3.4vw,50px);line-height:1.1;color:var(--apricot)}
.breath-facts dd{margin:0;font-size:13px;line-height:1.75;color:#cfe1de}

/* ---------- 7. 困りごと / 診療の方法 ----------
   ★2 列にするのは 1024px から(以前は 821px から)。821px で 2 列にすると器が
     0.428×画面幅 まで狭まり、見出しが器に合わせて半分(60px→29.5px)に落ちていた。
     器のほうを広く保ち、文字は共通の物差しのままにする。 */
.paired{display:grid;grid-template-columns:1fr;background:var(--cream);padding-top:clamp(36px,4.6vw,84px)}
.paired-shot{grid-column:1/-1;justify-self:center;width:100%;max-width:1100px;margin:0 auto clamp(28px,4vw,58px);aspect-ratio:3/2;overflow:hidden}
.paired>div{container-type:inline-size;display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px);
  padding:clamp(40px,4.4vw,78px) clamp(18px,2.6vw,48px) clamp(52px,5vw,86px)}
.paired .left{background:var(--apricot)}
.paired .right{background:var(--mint)}
.paired .tag{margin:0;font-size:12px;line-height:1.4;letter-spacing:.16em;color:#2a5450}
.paired h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.paired article{display:flex;flex-direction:column;gap:clamp(20px,2.2vw,30px)}
.paired ul,.paired ol{margin:0;padding:0 0 0 1.3em}
.paired li{padding:15px 0;border-bottom:1px solid #173e3d3d;font-size:15px;line-height:1.7}
.art{align-self:start}
.art svg{width:100%;height:auto}
.art-tangle{width:min(224px,58%)}
.art-dial{width:min(132px,38%)}
.tg{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tg-end{fill:var(--ink);transform-box:view-box;transform-origin:208px 104px;animation:breathe 5.4s ease-in-out infinite}
.dl-ring{fill:none;stroke:#173e3d33;stroke-width:3}
.dl-sweep{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;transform-box:view-box;transform-origin:65px 65px;rotate:-90deg}
.dl-ticks path{fill:none;stroke:#173e3d85;stroke-width:2;stroke-linecap:round}
.dl-hand{transform-box:view-box;transform-origin:65px 65px;animation:dial 20s linear infinite}
.dl-hand path{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.dl-pin{fill:var(--ink)}
@media(min-width:1024px){
  .paired{grid-template-columns:1fr 1fr}
}

/* ---------- 8. 3つの姿勢 ---------- */
.sync-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--bg)}
.sync-steps>div{container-type:inline-size;display:flex;flex-direction:column;gap:18px;border-right:1px solid #173e3d26;
  padding:clamp(40px,4vw,72px) clamp(20px,3vw,48px) clamp(48px,5vw,80px)}
.sync-steps>div:last-child{border-right:0}
.step-art{width:min(120px,44%)}
.step-art svg{width:100%;height:auto;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sync-steps>div>span{font-size:12px;line-height:1.4;letter-spacing:.14em;color:var(--muted)}
.sync-steps h3{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h3);line-height:1.2}
.sync-steps p{margin:0;font-size:15px;line-height:1.9}
.rp{fill:none;stroke:var(--ink);stroke-width:2;opacity:.5;transform-box:view-box;transform-origin:36px 60px}
.rp1{animation:ripple 4.2s ease-out infinite}
.rp2{animation:ripple 4.2s ease-out .55s infinite}
.rp3{animation:ripple 4.2s ease-out 1.1s infinite}
.cup-dot,.un-dot{fill:var(--ink);stroke:none}
.gr-bud{fill:var(--ink);stroke:none;transform-box:view-box;transform-origin:60px 44px;animation:breathe 5s ease-in-out infinite}
.gr-leafl,.gr-leafr{transform-box:view-box;transform-origin:60px 64px;animation:sway 7s ease-in-out infinite}
.gr-leafr{animation-delay:.9s}
@media(hover:hover){
  .sync-steps>div{transition:background-color .5s ease}
  .sync-steps>div:hover{background:var(--cream)}
  .sync-steps>div .step-art{transition:transform .55s var(--ease)}
  .sync-steps>div:hover .step-art{transform:translateX(6px)}
}

/* ---------- 9. 症状から入り口を選ぶ ----------
   ★クラス名 .routes は 19-trail-outdoor と共有していて、共有 CSS の
     .routes h3{margin-top:10px!important}(全幅)と .routes h2{line-height:1.05!important}
     を 12 まで拾っていた。12 固有の名前に変えて縁を切る(共有ファイルには触らない)。 */
.finder{background:var(--cream);container-type:inline-size;display:grid;gap:clamp(28px,3.4vw,50px);
  padding:clamp(60px,6.5vw,108px) clamp(20px,5vw,72px)}
.finder>header{display:grid;gap:16px;max-width:900px}
.finder .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--muted)}
.finder h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.finder .lead{margin:0;font-size:15px;line-height:2;max-width:620px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips button{padding:12px 18px;border:1px solid #173e3d33;border-radius:999px;background:#fff;color:var(--ink);
  font-size:14px;line-height:1.4;transition:background-color .35s ease,color .35s ease,border-color .35s ease,translate .35s var(--ease)}
.chips button[aria-pressed="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
@media(hover:hover){.chips button:hover{border-color:var(--ink);translate:0 -3px}}
.finder-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
.finder-routes article{background:#fff;border:1px solid #173e3d1a;border-radius:20px;display:flex;flex-direction:column;gap:12px;
  scroll-margin-top:102px;scroll-margin-bottom:24px;
  padding:clamp(22px,2.4vw,34px);transition:transform .5s var(--ease),box-shadow .5s ease,border-color .5s ease}
.route-art{width:56px}
.route-art svg{width:100%;height:auto;fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .5s ease}
.rt-beam{stroke:var(--apricot);stroke-width:3;stroke-dasharray:14px;stroke-dashoffset:14px;transition:stroke-dashoffset .6s var(--ease)}
.finder-routes b{font-size:12px;line-height:1.4;letter-spacing:.18em;color:var(--muted)}
.finder-routes h3{margin:0;font-family:var(--hand);font-weight:600;font-size:clamp(20px,2vw,28px);line-height:1.4}
.finder-routes p{margin:0;font-size:14px;line-height:1.9}
.finder-routes article[data-active="true"]{border-color:var(--ink);box-shadow:0 16px 36px #173e3d1f;transform:translateY(-6px)}
.finder-routes article[data-active="true"] .route-art svg{stroke:var(--ink)}
.finder-routes article[data-active="true"] .rt-beam{stroke-dashoffset:0}
@media(hover:hover){.finder-routes article:hover{border-color:var(--ink)}}

/* ---------- 10. 院内のご案内 ---------- */
.rooms{background:var(--mist);container-type:inline-size;display:grid;gap:clamp(26px,3.2vw,46px);
  padding:clamp(60px,6.5vw,108px) clamp(20px,5vw,72px)}
.rooms>header{display:grid;gap:16px;max-width:860px}
.rooms .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--muted)}
.rooms h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.rooms .lead{margin:0;font-size:15px;line-height:2;max-width:620px}
.corridor{width:100%;aspect-ratio:1200/140;max-height:132px}
.cr-floor{fill:none;stroke:#173e3d47;stroke-width:2;stroke-dasharray:5px 11px;animation:dash 16s linear infinite}
.cr-walk{fill:none;stroke:var(--ink);stroke-width:2}
.cr-doors path{fill:none;stroke:#173e3d59;stroke-width:2;stroke-linejoin:round}
.cr-cord{fill:none;stroke:#173e3d4d;stroke-width:2}
.cr-lamps ellipse{fill:var(--apricot);stroke:none;animation:glow 5s ease-in-out infinite}
.cr-lamps ellipse:nth-of-type(2){animation-delay:1.2s}
.cr-lamps ellipse:nth-of-type(3){animation-delay:2.4s}
.cr-lamps ellipse:nth-of-type(4){animation-delay:3.6s}
.room-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,24px)}
/* ★上 = 絵の帯 / 下 = 文字 の二段。見出しの下マージンで絵の上に文字が乗るのを避ける。 */
.room{background:#fff;border:1px solid #173e3d17;border-radius:20px;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s ease}
/* ★写真に差し替える器。比を 3:2 = 1536x1024 に合わせてあるので、線画の <svg> を
   <img> に置き換えるだけで切り取り 0 で入る。
   ★中身は <svg> でも <img> でもよいように .room-shot>* で名指しする。
     svg だけを名指しすると、写真に差し替えた瞬間に拡大の演出が一致 0 件で黙って死ぬ。 */
.room-shot{aspect-ratio:3/2;background:var(--cream);overflow:hidden}
.room-shot>*{width:100%;height:100%;object-fit:cover}
.room figcaption{display:grid;gap:10px;padding:clamp(16px,1.6vw,24px)}
.room b{font-size:12px;line-height:1.4;letter-spacing:.18em;color:var(--muted)}
.room h3{margin:0;font-family:var(--hand);font-weight:600;font-size:clamp(19px,1.7vw,24px);line-height:1.4}
.room p{margin:0;font-size:14px;line-height:1.85}
@media(hover:hover){
  .room:hover{transform:translateY(-8px);box-shadow:0 18px 38px #173e3d1c}
  .room .room-shot>*{transition:transform .6s var(--ease)}
  .room:hover .room-shot>*{transform:scale(1.05)}
}

/* ---------- 11. 医師とスタッフ ----------
   ★左右の余白を 6vw → 4.6vw に詰めた。2 列のときの器が 0.38×画面幅 しか無く、
     8 文字のかたまり(専門をまたいで、)が共通の物差しでは入らなかったため。 */
.team{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:var(--ink);color:#fff}
.team-image{aspect-ratio:1;overflow:hidden}
.team-image img{transition:scale .9s var(--ease)}
.team-copy{container-type:inline-size;display:grid;align-content:center;gap:clamp(18px,2vw,28px);padding:clamp(30px,4.6vw,88px)}
.team .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--mint)}
.team h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.team .body{margin:0;font-size:15px;line-height:2;max-width:540px}
.ring{width:min(196px,50%)}
.ring svg{width:100%;height:auto}
.rg-track{fill:none;stroke:#ffffff2e;stroke-width:3}
.rg-arc{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;transform-box:view-box;transform-origin:110px 110px;rotate:-90deg}
.rg-node{fill:var(--apricot);animation:glow 4.5s ease-in-out infinite}
.rg-n2{animation-delay:1.5s}
.rg-n3{animation-delay:3s}
.rg-core{fill:none;stroke:#ffffff66;stroke-width:2;transform-box:view-box;transform-origin:110px 110px;animation:pulsering 5.5s ease-in-out infinite}
.rg-chart{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.team-roles{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.team-roles li{padding:8px 16px;border:1px solid #ffffff45;border-radius:999px;font-size:13px;line-height:1.4}
@media(hover:hover){.team-image:hover img{scale:1.05}}

/* ---------- 12. 三つの外来 ---------- */
.outpatient{background:var(--cream);padding:clamp(60px,6.5vw,108px) clamp(20px,5vw,72px)}
.outpatient>header{display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:end;margin-bottom:clamp(36px,5vw,74px)}
.op-title{display:grid;gap:14px}
.outpatient .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.18em;color:var(--muted)}
.outpatient h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.2}
.outpatient .lead{margin:0;line-height:2;max-width:520px;font-size:15px}
.op-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.op-cards article{background:#fff;border-radius:20px;padding:clamp(26px,2.6vw,38px);display:flex;flex-direction:column;gap:14px;
  transition:transform .5s var(--ease),box-shadow .5s ease}
.op-art{width:44px}
.op-art svg{width:100%;height:auto;fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.op-mark{stroke:var(--apricot)}
.op-cards b{font:600 13px/1.4 var(--body);letter-spacing:.18em;color:var(--muted)}
.op-cards h3{margin:0;font-family:var(--hand);font-weight:600;font-size:clamp(21px,2.2vw,30px);line-height:1.4}
.op-cards p{margin:0;font-size:15px;line-height:1.95}
.op-cards ul{margin:auto 0 0;padding:0;list-style:none;border-top:1px solid #dfe8e5}
.op-cards li{padding:12px 0;border-bottom:1px solid #dfe8e5;font-size:14px;line-height:1.6}
.op-hours{margin-top:clamp(36px,5vw,74px);background:var(--ink);color:#fff;border-radius:20px;padding:clamp(28px,3.5vw,52px)}
.op-hours h3{margin:0 0 20px;font-family:var(--hand);font-weight:600;font-size:clamp(22px,2vw,28px);line-height:1.4}
.op-hours table{width:100%;border-collapse:collapse;font-size:15px}
.op-hours th,.op-hours td{padding:14px 8px;text-align:center;border-bottom:1px solid #ffffff2e}
.op-hours thead th{font-size:13px;letter-spacing:.06em;color:#a8c9c4}
/* ★列頭「時間」と、その下の「9:00—13:00」の軸を揃える(左寄せ同士)。 */
.op-hours thead th:first-child{text-align:left}
.op-hours tbody th{text-align:left;font-weight:400;white-space:nowrap}
.op-hours .fine{margin:18px 0 0;font-size:13px;line-height:1.9;color:#c4dbd7}
@media(hover:hover){
  .op-cards article:hover{transform:translateY(-8px);box-shadow:0 18px 40px #173e3d1c}
  .op-hours tbody tr{transition:background-color .35s ease}
  .op-hours tbody tr:hover{background:#ffffff14}
}

/* ---------- 13. よくある質問 ---------- */
.faq{background:var(--bg);container-type:inline-size;display:grid;gap:clamp(24px,3vw,44px);
  padding:clamp(60px,6.5vw,108px) clamp(20px,5vw,72px)}
.faq>header{display:grid;gap:14px}
.faq .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--muted)}
.faq h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.faq-list{max-width:880px;border-top:1px solid #173e3d2e}
.qa{border-bottom:1px solid #173e3d2e}
/* ★開閉は display:none で切る。closed な <details> は文字が見えないのに矩形を返し、
   重なりを数える機械が「答えが 5 か所で重なっている」という嘘の赤を出した(2026-08-26 実測)。
   ★既定の書き方は「開いている」。閉じるのは site.js の仕事 = JS が落ちたら答えは全部読める。 */
.q{position:relative;display:block;width:100%;text-align:left;padding:20px 48px 20px 0;font-size:16px;line-height:1.7;font-weight:700}
.q::before,.q::after{content:"";position:absolute;right:10px;top:calc(50% - 1px);width:17px;height:2px;background:currentColor;border-radius:2px}
.q::after{rotate:90deg;transition:rotate .4s var(--ease)}
.q[aria-expanded="true"]::after{rotate:180deg}
.qa .a{padding-top:14px;animation:unfold .5s var(--ease)}
.qa.shut .a{display:none}
.qa .a p{margin:0;padding:0 0 24px;font-size:15px;line-height:2;max-width:740px}
/* ★見出しの器は 1296px なのに一覧が 880px 固定で、右が 400〜900px 空いていた(実測)。
   広い画面では一覧も節の幅いっぱいに開いて、上の見出しと左右の端を揃える。 */
@media(min-width:1024px){
  .faq-list{max-width:none}
  .q{padding-right:60px;font-size:17px}
}
@media(hover:hover){
  .q{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;transition:text-decoration-color .3s ease}
  .q:hover{text-decoration-color:currentColor}
}

/* ---------- 14. 予約への締め ---------- */
.visit{background:var(--peach);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:clamp(24px,4vw,64px);
  padding:clamp(56px,9vh,132px) clamp(20px,5vw,72px)}
.visit-copy{flex:1 1 320px;min-width:0;container-type:inline-size;display:grid;gap:16px}
.visit .over{margin:0;font-size:12px;line-height:1.4;letter-spacing:.2em;color:var(--muted)}
.visit h2{margin:0;font-family:var(--hand);font-weight:600;font-size:var(--h2);line-height:1.25}
.visit-sub{margin:0;font-size:15px;line-height:1.95;max-width:460px}
.lantern{flex:0 0 auto;width:clamp(96px,11vw,164px)}
.lantern svg{width:100%;height:auto;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ln-glow{fill:var(--apricot);stroke:none;opacity:.3;transform-box:view-box;transform-origin:85px 102px;animation:lantern 5.5s ease-in-out infinite}
.ln-flame{fill:#d9924f;stroke:none;animation:blink 5.5s ease-in-out infinite}
.visit-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:14px;border:1px solid var(--ink);border-radius:999px;
  padding:18px 26px;font-size:15px;line-height:1.4;transition:background-color .4s ease,color .4s ease}
.visit-cta svg{width:34px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:translate .4s var(--ease)}
@media(hover:hover){
  .visit-cta:hover{background:var(--ink);color:var(--peach)}
  .visit-cta:hover svg{translate:6px 0}
}

/* ---------- 15. 足元 ---------- */
footer{background:var(--ink);color:var(--cream);display:grid;grid-template-columns:1fr 1fr auto;align-items:center;
  gap:12px;padding:30px clamp(20px,5vw,72px);font-size:12px;line-height:1.5}
footer b{display:inline-flex;align-items:center;gap:10px;letter-spacing:.08em}
.mark{width:15px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mark circle{fill:var(--apricot);stroke:none;animation:glow 6s ease-in-out infinite}

/* ---------- 16. 折り返し ---------- */
@media(max-width:900px){
  .outpatient>header{grid-template-columns:1fr;gap:20px}
  .op-cards{grid-template-columns:1fr}
  .op-hours table{font-size:13px}
  .op-hours th,.op-hours td{padding:11px 4px}
}
@media(max-width:820px){
  .finder-routes{grid-template-columns:1fr}
  .room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-head{padding:0 clamp(14px,4vw,20px)}
}
@media(max-width:720px){
  .split-head nav{display:none}
  .split-hero{grid-template-columns:1fr;aspect-ratio:auto}
  .split-hero>.patient,.split-hero>.doctor{aspect-ratio:2/3;height:auto}
  .seam,.dive{display:none}
  /* ★狭い画面では 2 分割が成立しない(1 列になる)。写真 2 枚を先に積むと、
     このページの言いたいこと(見出し)が 1,170px 下に沈む。格子の順番だけ入れ替えて
     見出し → 写真 の順にする。横に広い画面の構図には一切触らない。
     ★天の余白 64px の根拠(実測): 共有CSS が ≤820px で全てのリンクに min-height:44px を当てるため、
     固定ヘッダーの帯は 44px〜89px を占める。64px なら見出しの文字は 108px から = 19px 空く。
     ★上限の 46px は外した。46px 止まりのせいで、幅 464〜720px で主見出しが節の見出し
     (最大 68px)に負けていた(2026-08-26 実測)。 */
  .split-hero h1{order:-2;position:static;translate:none;width:100%;padding:64px 16px 4px;text-align:left;color:var(--ink);text-shadow:none;
    font-size:min(108px,calc((100cqi - 32px) / 9.4))}
  .split-hero>p{order:-1;position:static;translate:none;width:auto;padding:0 16px 30px;border-radius:0;background:none;backdrop-filter:none;
    color:var(--ink);text-align:left;font-size:13px;white-space:normal}
  .sync-steps{grid-template-columns:1fr}
  .sync-steps>div{border-right:0;border-bottom:1px solid #173e3d26}
  .sync-steps>div:last-child{border-bottom:0}
  .team{grid-template-columns:1fr}
  .visit{display:block}
  .visit .lantern{margin:26px 0 0;width:min(158px,42vw)}
  .visit-cta{margin-top:26px}
  footer{grid-template-columns:1fr;gap:8px}
  .corridor{aspect-ratio:9/2}
  .breath-wave{aspect-ratio:5/2}
}
@media(max-width:560px){
  .breath-facts{grid-template-columns:1fr;gap:16px}
  .breath-facts>div{grid-template-columns:auto 1fr;align-items:baseline;gap:14px}
  .breath-facts dt{font-size:34px}
}
@media(max-width:520px){
  .room-grid{grid-template-columns:1fr}
}

/* ---------- 17. 動きの定義 ---------- */
@keyframes draw{from{stroke-dashoffset:var(--len,900px)}to{stroke-dashoffset:0}}
@keyframes sweep20{from{stroke-dashoffset:var(--len,302px)}to{stroke-dashoffset:calc(var(--len,302px) * .667)}}
@keyframes breathe{0%,100%{scale:1}50%{scale:1.16}}
@keyframes blink{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes glow{0%,100%{opacity:.42}50%{opacity:1}}
@keyframes wave{from{translate:0 0}to{translate:270px 0}}
@keyframes ripple{0%,100%{opacity:.5;scale:.86}50%{opacity:.16;scale:1.14}}
@keyframes dial{from{rotate:0deg}to{rotate:360deg}}
@keyframes hop{0%,100%{translate:0 0}50%{translate:0 7px}}
@keyframes lantern{0%,100%{opacity:.3;scale:.9}50%{opacity:.58;scale:1.08}}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes dash{to{stroke-dashoffset:-160px}}
@keyframes seamflow{from{background-position:0 -120%}to{background-position:0 120%}}
@keyframes pulsering{0%,100%{scale:1;opacity:.5}50%{scale:1.1;opacity:.9}}
@keyframes unfold{from{translate:0 -8px;clip-path:inset(0 0 100% 0)}to{translate:none;clip-path:inset(0)}}

/*HEADING-LEADING-20260811 ── 見出しの行間の是正(オーナー指示 2026-08-11「標準的な行間に。空けすぎないこと」)。
  対象 = **実測で 2 行以上に折り返し、行間が 1.06 未満、かつ日本語を含む**見出しだけ。
  セレクタは実際に描画された要素から機械で取った全長パス。共有 shared-quality.css が
  site.css の**後**に読まれて `!important` で勝つため、短いセレクタでは当たらない。
*/
html body div#main main section.split-hero h1{line-height:1.25!important}
/*/HEADING-LEADING-20260811*/

/* ── 共有 shared-quality.css の上書き(全長パス + !important) ────────────────
   共有ファイルは 24 本のサンプルが読むので触らない。当たり負けしている物だけを
   こちら側から名指しで押さえる。当たっている規則は sharedhit.cjs で実測した。
   1) ヘッダーの上端 → top:56px!important(≤820px は 52px)。上の帯の下端は 44px なので
      写真が 12px だけ覗く隙間ができていた。44px にそろえて 1 本の帯にする。
   2) .visit h2 → 幅 ≤480px で font-size:32px!important。幅 320px では主見出し(30.6px)を
      追い越していた。
   3) .sync-steps h3 → 幅 721〜900px で font-size:24px!important。この帯だけ他所の都合で
      潰れ、720px の 64px から 1px 動いただけで 24px に落ちていた。
   4) .split-hero>div>span → top:110px!important / ≤820px は 120px!important。
      site.css の bottom:20px は死んでいた。狭い画面では写真の下に置きたいので、
      こちら側で「広い画面 = 上 / 狭い画面 = 下」を明示して持つ。 */
html body div#main header.split-head.split-head{top:44px!important}
html body div#main main section.visit h2{font-size:var(--h2)!important;line-height:1.25!important}
html body div#main main section.sync-steps h3{font-size:var(--h3)!important}
html body div#main main section.split-hero>div>span{top:110px!important;bottom:auto!important}
@media(max-width:720px){
  html body div#main main section.split-hero>div>span{top:auto!important;bottom:18px!important}
}

/* ★画面の外にある節は動きを止める。
   animation の一括指定は animation-play-state を running へ戻すため、この規則は
   必ずファイルの末尾 + id を含む長いセレクタ + !important で置く(2026-08-21 実測)。 */
html body div#main main section.rest,
html body div#main main section.rest *{animation-play-state:paused!important}