/* ヘッダー・ドロワー・固定電話ピル・フッター（両エリア共用）
   値は docs/design-main.md §2 / docs/design-recruit.md §2 の実測。ブレークポイントは min-width 4 段（〜599 / 600〜 / 768〜1079 / 1080〜）。
   折りたたみ規約: 100vh 禁止・center+overflow-x 併用禁止・body overflow-x:hidden 禁止・タップ標的 44px・ch 単位禁止 */

/* ---------- ページ上端のグラデ帯（ヘッダーとヒーローはこの上に載る） ---------- */
/* 高さは参照の実測: 医院トップ ≈780（344: 640）、医院下層 ≈500（344: 180）、採用トップ ≈740、採用下層 ≈560（344: 600） */
body.area-main { background-color: var(--c-cream); background-image: var(--g-page-top-sub); background-repeat: no-repeat; background-size: 100% clamp(180px, 38vw, 520px); }
body.area-main.page-home { background-image: var(--g-page-top); background-size: 100% clamp(640px, 60vw, 780px); }
body.area-recruit { background-color: var(--c-cream); background-image: var(--g-page-top-recruit); background-repeat: no-repeat; background-size: 100% clamp(560px, 46vw, 600px); }
body.area-recruit.page-recruit-home { background-size: 100% clamp(600px, 58vw, 740px); }
/* 〜599（参照 ip440/ip393/fold344 の画素で式を合わせた。誤差 3 以内）:
   医院下層は幅に比例する斜めの帯（高さ 0.445W。下は地のクリーム）。採用は幅に関係なく高さ 860 の絵を横に伸ばしたもの（下層・トップで傾きが違う） */
@media (max-width: 599px) {
  body.area-main:not(.page-home) { background-image: var(--g-page-top-sub-sp); background-size: 100% 44.5vw; }
  body.area-recruit { background-image: var(--g-page-top-recruit-sp); background-size: 100% 860px; }
  body.area-recruit.page-recruit-home { background-image: var(--g-page-top-recruit-home-sp); background-size: 100% 860px; }
}
/* 1080〜（PC）: 帯は横いっぱい。高さは参照実測 — 医院トップ 780（1920 左端 y700 でクリーム・右端 y850）、医院下層は右端で 0.4W・左端で 0.18W（1920: 766 / 350）、採用トップ 1440: 675 / 1920: 710〜880、採用下層 1920: 460〜680 */
@media (min-width: 1080px) {
  body.area-main { background-image: var(--g-page-top-sub-pc); background-size: 100% clamp(520px, 42vw, 820px); }
  body.area-main.page-home { background-image: var(--g-page-top-pc); background-size: 100% 780px; }
  body.area-recruit { background-image: var(--g-page-top-recruit-sub-pc); background-size: 100% clamp(480px, 31vw, 600px); }
  body.area-recruit.page-recruit-home { background-image: var(--g-page-top-recruit); background-size: 100% clamp(600px, 40vw + 100px, 760px); }
}

/* ---------- ヘッダー（背景は透明で帯が透ける） ---------- */
.hd { position: relative; z-index: 200; }
/* 〜1079: ヘッダー（ロゴ＋丸いハンバーガー）は画面上端に留まる（現行と同じ）。
   医院の 1080〜 も同じ（2026-09-28 現行照合: 現行 urala.com は 1366・1080・841・390 ともヘッダーが position: fixed で、送ってもロゴ・ピルのナビ・ハンバーガーが残る。
   以前は 1080〜 だけ relative で、送るとヘッダーが消えてメニューを開く手段が無かった）。採用の 1080〜 は従来どおり流れる。
   背景は付けない＝スクロールしても透明のまま（2026-09-29 ユーザー指示「ヘッダーに背景色つけんといてほしい。スクロールしていった時に」）。
   9/28 に医院の「ロゴの下に本文が入って重なって見える」の指摘で、送ったら地色の半透明の帯（.hd::before・blur・下の細い線）を敷いていたが外した。
   本文はロゴの後ろを通る（現行 STUDIO と同じ見え方）。帯を戻すときは git の fcc6dda の shell.css の .hd::before を見る。
   is-scrolled（site.js。8px 以上スクロール）は付けたまま（ほかで使うときのため）。アンカーの飛び先はヘッダーの下に出す（scroll-padding-top 96） */
/* 画面上端に留まるヘッダーの中のリンク・ボタンは scroll-margin-top を負にする: ヘッダーは scroll-padding-top の内側に居続けるので、
   そのままだと Tab・Shift+Tab・focus() でフォーカスが入るたびにブラウザが「隠れている」と見てページを上へ送る
   （2026-09-28 実測: /price を 900 送って Shift+Tab でヘッダーへ → Chromium で 1 回ごとに約 320 上へ。WebKit は focus() で約 80）。
   −120 は scroll-padding-top（96・104）より大きい値＝ヘッダーの中の物は常に見えている扱いになる。アンカーの飛び先（main の中）には効かない */
@media (max-width: 1079px) {
  .hd { position: sticky; top: 0; }
  .hd-inner :is(a, button) { scroll-margin-top: -120px; }
  html { scroll-padding-top: 96px; }
}
@media (min-width: 1080px) {
  .hd-main { position: sticky; top: 0; }
  .hd-main .hd-inner :is(a, button) { scroll-margin-top: -120px; }
  html:has(> body.area-main) { scroll-padding-top: 104px; }   /* ヘッダー 89 ＋ 15 */
  .hd-recruit::before { content: none; }   /* 採用の 1080〜 は流れるヘッダーのまま（帯も出さない） */
}
.hd-inner { width: min(100% - var(--gutter) * 2, calc(var(--container) + 80px)); margin-inline: auto; min-height: var(--hd-h); display: flex; align-items: center; gap: var(--sp-4); }
.hd-logo { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); flex: none; }
.hd-logo .logo-img { height: 30px; width: auto; object-fit: contain; }   /* 参照 344: 医院 205×33・採用 180×29。768〜: 254×41 */
.hd-recruit-tag { font-family: var(--f-en); font-weight: 600; letter-spacing: 0.1em; color: var(--c-orange); font-size: 14px; line-height: 1; white-space: nowrap; }
.hd-nav { display: none; flex: 1 1 auto; min-width: 0; justify-content: center; }
.hd-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.hd .hd-switch, .hd .hd-entry { display: none; }   /* components.css の .btn より後に読まれても負けないよう .hd を付ける */

/* 白いピル型ナビ（1080〜のみ） */
.hd-pill { display: flex; align-items: center; background: var(--c-white); border-radius: var(--r-pill); height: 56px; padding: 0 8px; }
.hd-recruit .hd-pill { height: 60px; }
.hd-pill > .nav-item { position: relative; display: flex; align-items: center; height: 100%; }
.hd-pill > .nav-item + .nav-item::before { content: ""; width: 1px; height: 24px; background: var(--c-line); flex: none; }
.hd-recruit .hd-pill > .nav-item + .nav-item::before { background: none; border-left: 1px dashed var(--c-line-2); }
.hd-pill > .nav-item > a, .hd-pill > .nav-item > .nav-parent, .hd-pill > .nav-item > .nav-dead { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); padding: 0 22px; font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; color: var(--c-orange); white-space: nowrap; border-radius: var(--r-pill); }
@media (hover: hover) and (pointer: fine) { .hd-pill > .nav-item > a:hover, .hd-pill > .nav-item > .nav-parent:hover { color: var(--c-ink-soft); } }
/* 医院のドロップダウンの親（「私たちについて」）は、マウスを乗せてもオレンジのまま（現行 1366 実測 2026-09-28: ホーム・診療科目で探す等のリンクは #574D45 に変わり、
   ドロップダウンの親だけ色が変わらない＝開いたメニューの方が反応する）。hover.css（最後に読む）の同じ指定より詳細度を 1 つ上げる */
@media (hover: hover) and (pointer: fine) { .hd-main .hd-pill > .nav-item > .nav-parent:hover { color: var(--c-orange); } }
.hd-pill .nav-dead { color: var(--c-ink-soft); }
.hd-pill .i-dd { width: 14px; height: 14px; transition: transform .2s; }
.hd-pill [aria-expanded="true"] > .i-dd { transform: rotate(180deg); }
.hd-pill .i-ext { width: 12px; height: 12px; }
/* ドロップダウン（白 角丸 16・点線区切り・ピーチの点）。開閉の仕組み（2026-09-28 作り直し。shell.mjs navLinks・site.js「ヘッダーのドロップダウン」）:
   開くのは li.is-open のときだけ（site.js がホバー・キーボードのフォーカス・開閉ボタンで付け外しする。押した後に開いたまま残らない）。
   JS が無いとき（html に .js が無い）だけ、従来の :hover と :focus-within で開く。
   ピルとメニューの間の隙間は ::before の透明の橋でつなぐ（高さ＝隙間ちょうど。ピルの中まで伸ばすと隣の親のホバーを奪う）。医院は下の .hd-main の指定（9）で上書き */
.hd-pill .nav-sub { display: none; position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); min-width: 240px; width: max-content; max-width: 320px; background: var(--c-white); border-radius: var(--r-m); padding: 20px 28px; z-index: 5; }
.hd-pill .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.hd-pill .nav-item.is-open > .nav-sub, html:not(.js) .hd-pill .nav-item.has-sub:focus-within > .nav-sub { display: block; }
@media (hover: hover) and (pointer: fine) { html:not(.js) .hd-pill .nav-item.has-sub:hover > .nav-sub { display: block; } }
/* 開くときだけ 0.2 秒で上から軽く降りる（縦だけ。translate は位置合わせの transform と別の指定なので打ち消し合わない）。閉じるのは即時 */
@keyframes dd-in { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: no-preference) { .hd-pill .nav-item.is-open > .nav-sub { animation: dd-in .2s cubic-bezier(.22, 1, .36, 1); } }
/* 開閉ボタン（親に href がある項目の横。shell.mjs の .nav-dd）: マウスの端末では出さない（ホバーとキーボードのフォーカスで開く）。指の端末は下の「指の端末のピル」で出す */
.hd-pill .nav-dd { display: none; }
.hd-pill .nav-sub li + li { border-top: var(--dash); }
.hd-pill .nav-sub a { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 15px; color: var(--c-ink-soft); white-space: normal; }
.hd-pill .nav-sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-peach); flex: none; }
@media (hover: hover) and (pointer: fine) { .hd-pill .nav-sub a:hover { color: var(--c-orange); } }
/* 医院のドロップダウンは Figma pc/top 1027:9316（箱）・1027:9330（中身）どおり（2026-09-28 医院指摘「『１分でわかるウララ歯科クリニック』を 1 行に」。
   以前は最大 320・15px・字間 0.06em で、この項目だけ 2 行に折れていた）:
   箱 白 336×187・角丸 10・影なし。内側 上下 28・左 35（32 ＋ 中身の枠の 3）・右 32。行は 点 5（ピーチ）＋ 8 ＋ 字 16px/1.7・字間 0・#574D45、
   行の下 10 に 1px 点線（Figma の線は行 37 の内側＝字の下 9 ＋ 線 1。最後の行は無し）、行の間 15（送り 52）。一番長い「１分でわかる…」は字 256 ＋ 13 ＝ 269 ＝ 行の幅ちょうど。折らない（nowrap）。
   位置: 箱の上端はピルの下 9、箱の左は親の項目の中心 −123（Figma 1366: 項目「私たちについて」の中心 x735・箱 x612〜948）。
   ピルと箱の間の 9 は ::before の橋でつなぐ（マウスで下へ動かす途中で :hover が外れて閉じない）。1080〜1199 もこの寸法のまま（箱の右端 ≦ 画面の右端 − 300） */
.hd-main .hd-pill .nav-sub { top: calc(100% + 9px); transform: translateX(-123px); min-width: 0; width: 336px; max-width: none; border-radius: 10px; padding: 28px 32px 28px 35px; }
.hd-main .hd-pill .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.hd-main .hd-pill .nav-sub li { display: flow-root; padding-bottom: 9px; border-bottom: var(--dash); }   /* flow-root: 子の負のマージンを行の外（行の間 15）と相殺させない */
.hd-main .hd-pill .nav-sub li + li { margin-top: 15px; border-top: 0; }
.hd-main .hd-pill .nav-sub li:last-child { padding-bottom: 0; border-bottom: 0; }
.hd-main .hd-pill .nav-sub a { gap: 8px; min-height: var(--tap); margin-block: -8.5px; font-family: var(--f-round); font-size: 16px; line-height: 1.7; letter-spacing: 0; white-space: nowrap; }   /* 見た目の行 27 で 44 の当たり判定 */
/* 採用のメガメニュー（Figma ヘッダー部品 149:7419 の開いた形 149:7420／149:7737／149:7908／149:8030 の下半分。2026-09-28 照合）:
   箱 白・角丸 8・影なし・内側 32・幅は中身なり。親の項目の真下に中央寄せ、上端はピルの下 8（隙間は上の橋でつなぐ）。
   行: 点 5（#EEAD75）＋ 8 ＋ 字 16px/1.7・字間 6%・#574D45。行の間 16。最後以外は字の下 12 に 1px の点線 #C5B5A8（線は字の幅だけ＝行ごとに長さが違う）。
   当たり判定は 44（見た目の行 27.2 の上下に −8.4 ずつ）。ホバーは不透明度 0.6（hover.css の「オレンジ＋0.7」より強い指定で上書き） */
.hd-recruit .hd-pill .nav-sub { min-width: 0; width: max-content; max-width: none; padding: 32px; border-radius: 8px; }
.hd-recruit .hd-pill .nav-sub li { display: flow-root; width: fit-content; padding-bottom: 12px; border-bottom: var(--dash); }
.hd-recruit .hd-pill .nav-sub li + li { margin-top: 16px; border-top: 0; }
.hd-recruit .hd-pill .nav-sub li:last-child { padding-bottom: 0; border-bottom: 0; }
.hd-recruit .hd-pill .nav-sub a { gap: 8px; min-height: var(--tap); margin-block: -8.4px; font-family: var(--f-round); font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-soft); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .hd-recruit .hd-pill .nav-sub a:hover { color: var(--c-ink-soft); opacity: .6; } }

/* 指の端末のピル（hover が無い・指で触る端末の 1080〜。開いた折りたたみの横・タブレットの横）:
   親の文字はページへ移るリンクのまま、横に 44×44 の開閉ボタン（⌄）を出す。ホバーでしか開かない作りにしない。
   幅を増やさないよう、親の文字の右の余白をボタンに置き換える（採用: 文字の左 14・右 0 ＋ ボタン 44。1 項目あたり Figma より +10）。
   医院の「私たちについて」は親の文字そのものが開閉ボタンなので、⌄ を出すだけ */
@media (hover: none), (pointer: coarse) {
  .hd-pill > .nav-item > .nav-dd { display: inline-flex; align-items: center; justify-content: center; flex: none; width: var(--tap); min-height: var(--tap); padding: 0; color: var(--c-orange); border-radius: var(--r-pill); }
  .hd-pill > .nav-item > .nav-dd .i-dd, .hd-pill > .nav-item > button.nav-parent .i-dd { display: block; }
  .hd-pill > .nav-item > button.nav-parent { gap: 4px; }
  .hd-recruit .hd-pill > .nav-item > a.nav-parent { padding-left: 14px; padding-right: 0; }
}

/* 右端: 医院=「採用サイト」ピル、採用=「応募フォーム」＋「医院サイト」、両方ハンバーガー */
.hd-switch { align-items: center; gap: 6px; min-height: var(--tap); padding: 0 18px; border-radius: var(--r-pill); border: 1.5px solid var(--c-orange); color: var(--c-orange); background: var(--c-white); font-family: var(--f-round); font-size: 14px; letter-spacing: 0.04em; white-space: nowrap; }
.hd-switch .icon { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .hd-switch:hover { background: var(--c-peach-soft); } }
.hd .hd-entry { min-height: var(--tap); padding: 0 22px; font-size: 15px; }   /* 矢印なしなので左右対称（components の .btn-sm より後勝ち） */
.menu-toggle { width: 56px; height: 56px; border-radius: 50%; background: var(--c-white); position: relative; flex: none; transition: transform .2s; }
@media (hover: hover) and (pointer: fine) { .menu-toggle:hover { transform: scale(.95); } }
.menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { content: ""; position: absolute; left: 50%; width: 24px; height: 2px; margin-left: -12px; background: var(--c-orange); border-radius: 2px; transition: transform .25s, opacity .25s, top .25s; }
.menu-toggle-bars { top: calc(50% - 1px); } .menu-toggle-bars::before { left: 12px; top: -7px; } .menu-toggle-bars::after { left: 12px; top: 7px; }
.hd-recruit .menu-toggle-bars::before { top: -6px; } .hd-recruit .menu-toggle-bars::after { top: 6px; }
[data-menu-open] .menu-toggle-bars { background: transparent; }
[data-menu-open] .menu-toggle-bars::before { top: 0; transform: rotate(45deg); }
[data-menu-open] .menu-toggle-bars::after { top: 0; transform: rotate(-45deg); }
/* 〜399（344 カバー画面）: 予算 344−32 = 312 = ロゴ 173 ＋ 8 ＋ RECRUIT 62 ＋ 8 ＋ 丸 56 */
@media (max-width: 399px) { .hd-inner { width: calc(100% - 32px); gap: 8px; } .hd-logo .logo-img { height: 28px; } .hd-logo { gap: 8px; } .hd-recruit-tag { font-size: 11px; } .hd-actions { gap: 8px; } }
/* 〜767（現行 urala.com・採用プレビューを 390/344 で実測 2026-09-26。幅で縮めない）: ロゴは画面左端 16、丸（60・影なし）は右端から 8・上から 10。
   医院ロゴ 203×32.8 @x16,y23.6、採用ロゴ 180×29 @x16,y25.5 ＋ 12 ＋ RECRUIT（Roboto 12px・字間 3px @x208）。
   344 の予算: 16 ＋ ロゴ 180 ＋ 12 ＋ RECRUIT のインク ≈64 ＝ 272 ≤ 丸の左端 276（RECRUIT の末尾の字間は負のマージンで相殺） */
@media (max-width: 767px) {
  .hd-inner { width: 100%; padding: 0 8px 0 16px; gap: 0; }
  .hd-logo { gap: 12px; }
  .hd-main .hd-logo .logo-img { height: 32.8px; }
  .hd-recruit .hd-logo .logo-img { height: 29px; }
  .hd-recruit-tag { font-size: 12px; font-weight: 400; letter-spacing: 3px; margin-right: -3px; }
  .menu-toggle { width: 60px; height: 60px; }
  .hd-recruit .menu-toggle-bars::before { top: -7px; } .hd-recruit .menu-toggle-bars::after { top: 7px; }
  [data-menu-open] .hd-recruit .menu-toggle-bars::before, [data-menu-open] .hd-recruit .menu-toggle-bars::after { top: 0; }
  /* 採用のヘッダーは 70 高（ページの縦位置を動かさない）。参照は丸が y10〜70・ロゴの中心 y40 なので上揃え＋上 10 */
  .hd-recruit .hd-inner { align-items: flex-start; padding-top: 10px; }
  .hd-recruit .hd-logo { min-height: 60px; }
}
/* 600〜1079（現行 841/673 実測。現行はおよそ 541 からこの形）: ロゴは左 24（医院 254×41 @y39.5／採用 230×37 @y41.4 ＋ 16 ＋ RECRUIT Roboto 16px 字間 4px）、丸 60 は右 24・上 30。
   ヘッダーの高さは 90（丸の下端 = 90。768〜 は元から 90、600〜767 は 80／採用 70 から 90 に） */
@media (min-width: 600px) and (max-width: 1079px) {
  .hd-main .hd-inner, .hd-recruit .hd-inner { width: 100%; min-height: 90px; padding: 30px 24px 0; align-items: flex-start; gap: 0; }
  .hd-logo { min-height: 60px; gap: 16px; }
  .hd-main .hd-logo .logo-img { height: 41px; }
  .hd-recruit .hd-logo .logo-img { height: 37.1px; }
  .hd-recruit-tag { font-size: 16px; font-weight: 400; letter-spacing: 4px; margin-right: -4px; line-height: 1.7; }
}
@media (min-width: 768px) { .menu-toggle { width: 60px; height: 60px; } .hd-logo .logo-img { height: 38px; } .hd-logo { gap: 16px; } }
/* 1080〜: ヘッダーは中央の箱に閉じ込めず端寄せ（参照 pc1280/1440/1920 とも: ロゴは画面左端 60、ハンバーガーの右端は画面右端から 50、ピルはハンバーガーの左 15）。
   1080〜1279 は左右 40。ピルは 60 高（参照 y30〜90）。ナビはロゴとの間ではなく右端に寄せる（center だと溢れたとき両側に食み出してロゴの RECRUIT が欠ける） */
@media (min-width: 1080px) {
  .hd-inner { width: 100%; max-width: none; padding: 0 40px; gap: 12px; }
  .hd-inner > .hd-logo { margin-right: auto; }   /* ロゴが残りを押し出す（ナビが無い幅でもボタン群が右端に付く） */
  .hd-nav { flex: none; min-width: auto; justify-content: flex-end; }
  .hd-actions { margin-left: 0; gap: 12px; }
  .hd-pill, .hd-recruit .hd-pill { height: 60px; }
}
@media (min-width: 1280px) { .hd-inner { padding: 0 50px 0 60px; } }
/* 医院: 1080〜 でピルナビ＋「採用サイト」。1080〜1279 は字を詰めて 1 行に収める（幅の予算 1080−80 = 1000: ロゴ 211 ＋ ナビ 5 項目 ≈ 505 ＋ ボタン 96 ＋ 丸 60 ＋ 隙間 36 ≒ 908） */
@media (min-width: 1080px) {
  .hd-main .hd-nav { display: flex; }
  .hd-main .hd-switch { display: inline-flex; padding: 0 12px; font-size: 13px; }
  .hd-main .hd-logo .logo-img { height: 34px; }
  .hd-main .hd-pill > .nav-item > a, .hd-main .hd-pill > .nav-item > .nav-parent, .hd-main .hd-pill > .nav-item > .nav-dead { padding: 0 10px; font-size: 13px; letter-spacing: 0.02em; }
}
@media (min-width: 1280px) {
  .hd-main .hd-logo .logo-img { height: 41px; }
  .hd-main .hd-switch { padding: 0 18px; font-size: 14px; }
  .hd-main .hd-pill > .nav-item > a, .hd-main .hd-pill > .nav-item > .nav-parent, .hd-main .hd-pill > .nav-item > .nav-dead { padding: 0 16px; font-size: 16px; letter-spacing: 0.06em; }
}
/* 1440〜: 参照どおりピル幅 ≈700（項目の左右 22）。予算 1440−110 = 1330 ≥ ロゴ 254 ＋ ピル 707 ＋ ボタン 130 ＋ 丸 60 ＋ 隙間 36 = 1187 */
@media (min-width: 1440px) {
  .hd-main .hd-pill > .nav-item > a, .hd-main .hd-pill > .nav-item > .nav-parent, .hd-main .hd-pill > .nav-item > .nav-dead { padding: 0 22px; }
}
/* 採用: ナビ 6 項目なのでピルは 1200〜（プレビューも ≤1120 で非表示）。「応募フォーム」は 1080〜、「医院サイト」は 1440〜（それ未満はドロワーとフッターにある） */
/* 「応募フォーム」ボタンはピルが無い 1080〜1199 だけ（ピルの中に同じ項目があるので二重に出さない） */
@media (min-width: 1080px) and (max-width: 1199px) {
  .hd-recruit .hd-entry { display: inline-flex; }
}
/* 1200〜: ロゴ 230 ＋ RECRUIT 70 ＋ ピル（6 項目）＋ 丸 60。予算 1200−80 = 1120 → ピルは 15px/12px 詰め。1280〜 は参照どおり 16px */
@media (min-width: 1200px) {
  .hd-recruit .hd-nav { display: flex; }
  .hd-recruit .hd-logo .logo-img { height: 38px; }
  .hd-recruit .hd-recruit-tag { font-size: 13px; }
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 12px; font-size: 15px; letter-spacing: 0.04em; }
}
@media (min-width: 1280px) {
  .hd-recruit .hd-logo .logo-img { height: 38px; }   /* 参照 pc1280〜1920: 採用のロゴは 232×38（医院の 254×41 より一回り小さい）＋ RECRUIT 14px */
  .hd-recruit .hd-recruit-tag { font-size: 14px; }
  .hd-recruit .hd-inner { gap: 12px; }
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 12px; font-size: 16px; letter-spacing: 0.04em; }
}
/* 1440〜: 「医院サイト」はピルの右・ハンバーガーの左（原本のヘッダーには無いボタン。ドロワーとフッターにもある）。
   予算 1440−110 = 1330 ≥ ロゴ＋RECRUIT 332 ＋ ピル（6 項目・chevron 4・左右 14）≈ 744 ＋ ボタン 130 ＋ 丸 60 ＋ 隙間 36 = 1302。1600〜 は参照のピル幅 ≈780 に寄せて左右 20 */
@media (min-width: 1440px) {
  .hd-recruit .hd-switch { display: inline-flex; padding: 0 14px; font-size: 13px; }
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 14px; letter-spacing: 0.06em; }
}
@media (min-width: 1600px) {
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 20px; }
}

/* ---------- Figma 準拠のヘッダー（2026-09-25。上の実測値より後勝ち） ----------
   医院 Header 477:388（1366×89）: ロゴ 254×40 @x60,y38。白いピル 704×61 @x543,y28（角丸 30・影 0 0 6 #C49A84/20%・左右 16）。
     項目 Zen Maru 16px 字間 0・オレンジ・左右 24、区切りは 1×27 の点線 #C5B5A8（2/2。2026-09-28 実線から直した＝現行も点線）。ハンバーガー 59×59（同じ影）はピルの 10 右、右端から 50。棒 24×2・間 7。
   採用 72:913（1440×108）: 上下 24・左右 40。ロゴ 254×41 ＋ 20 ＋ RECRUIT（Roboto 16px 字間 4px）。ピル 高さ 60・左右 16（影なし）、項目 16px 字間 6%・左右 24、
     区切りは項目の右の 1px 点線 #C5B5A8（最後は無し）。ハンバーガー 60（影なし）はピルの 10 右。棒 22×2・間 8。
   どちらもドロップダウンの「⌄」は描かれていない → 1080〜 は出さない（開閉は従来どおりボタン・ホバー） */
@media (min-width: 1080px) {
  .hd-pill .i-dd { display: none; }
  .hd-pill > .nav-item > a, .hd-pill > .nav-item > .nav-parent, .hd-pill > .nav-item > .nav-dead { gap: 0; }
  /* 医院 */
  .hd-main .hd-inner { align-items: center; padding-top: 28px; gap: 10px; }   /* 高さ 89（--hd-h）＝ 上 28 ＋ ピル 61。ロゴ・丸の中心 y58.5 */
  .hd-main .hd-logo .logo-img { width: 254px; height: 40px; }
  .hd-main .hd-pill { height: 61px; padding: 0 16px; border-radius: 30px; box-shadow: var(--shadow-pill); }
  .hd-main .hd-pill > .nav-item + .nav-item::before { width: 1px; height: 27px; margin-right: -1px; background: repeating-linear-gradient(var(--c-line-2) 0 2px, transparent 2px 4px); }   /* Figma Line 5〜8: 2/2 の点線・幅を取らない（字→線 24・線→字 24。ピル 704） */
  .hd-main .hd-pill > .nav-item > a, .hd-main .hd-pill > .nav-item > .nav-parent, .hd-main .hd-pill > .nav-item > .nav-dead { padding: 0 16px; font-size: 15px; letter-spacing: 0; line-height: 1.7; }
  .hd-main .menu-toggle { width: 59px; height: 59px; box-shadow: var(--shadow-pill); }
  /* 採用 */
  .hd-recruit .hd-inner { align-items: center; padding-top: 24px; padding-bottom: 24px; gap: 10px; }   /* 108 = 24 ＋ 60 ＋ 24 */
  .hd-recruit .hd-logo { gap: 20px; }
  .hd-recruit .hd-logo .logo-img { width: 254px; height: 41px; }
  .hd-recruit .hd-recruit-tag { font-weight: 400; font-size: 16px; letter-spacing: 4px; line-height: 1.7; margin-right: -4px; }
  .hd-recruit .hd-pill { height: 60px; padding: 0 16px; border-radius: 30px; }
  .hd-recruit .hd-pill > .nav-item + .nav-item::before { width: 0; height: 27px; margin-right: -1px; background: none; border-left: 1px dashed var(--c-line-2); }   /* 当たり判定 44 は項目側で保つ（線だけ 27）。線は幅を取らない（Figma は項目の右端の中の線＝ピル 807。取るとピルが 5 本ぶん広い） */
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { line-height: 1.7; }
  .hd-recruit .menu-toggle { width: 60px; height: 60px; }
  .hd-recruit .menu-toggle-bars, .hd-recruit .menu-toggle-bars::before, .hd-recruit .menu-toggle-bars::after { width: 22px; margin-left: -11px; }
  .hd-recruit .menu-toggle-bars::before { left: 11px; top: -8px; } .hd-recruit .menu-toggle-bars::after { left: 11px; top: 8px; }
  [data-menu-open] .hd-recruit .menu-toggle-bars::before, [data-menu-open] .hd-recruit .menu-toggle-bars::after { top: 0; }
}
/* 1200〜: 医院は Figma の値そのまま（予算 1200−80: ロゴ 254 ＋ ピル ≈708 ＋ 10 ＋ 59 = 1031） */
@media (min-width: 1200px) {
  .hd-main .hd-pill > .nav-item > a, .hd-main .hd-pill > .nav-item > .nav-parent, .hd-main .hd-pill > .nav-item > .nav-dead { padding: 0 24px; font-size: 16px; letter-spacing: 0; }
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 12px; font-size: 15px; letter-spacing: 0.04em; }
}
/* 医院のピルが 4 項目のとき（2026-09-29〜 ユーザー指示で「診療科目で探す」を非表示。nav.json の hidden）: 1080〜1199 も Figma の値（16px・左右 24）で 1 行に入る
   （予算 1080−80 = 1000 ≥ ロゴ 254 ＋ 10 ＋ ピル ≈544 ＋ 10 ＋ 丸 59 ≈ 877）。5 項目に戻すと :has が外れて上の 15px・左右 16 に自然に戻る */
@media (min-width: 1080px) and (max-width: 1199px) {
  .hd-main .hd-pill:not(:has(> .nav-item:nth-child(5))) > .nav-item > :is(a, .nav-parent, .nav-dead) { padding: 0 24px; font-size: 16px; letter-spacing: 0; }
}
@media (min-width: 1280px) {
  .hd-recruit .hd-inner { padding-left: 40px; padding-right: 40px; }
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 14px; font-size: 16px; letter-spacing: 0.06em; }
}
/* 1440〜: 採用は Figma の値そのまま（予算 1440−80: ロゴ＋RECRUIT ≈374 ＋ ピル ≈813 ＋ 10 ＋ 60 = 1257） */
@media (min-width: 1440px) {
  .hd-recruit .hd-pill > .nav-item > a, .hd-recruit .hd-pill > .nav-item > .nav-parent, .hd-recruit .hd-pill > .nav-item > .nav-dead { padding: 0 calc(24px - 0.06em) 0 24px; }   /* 右は字間の末尾 0.06em ぶん詰める（Figma の字の枠は最後の字の後ろの字間を持たない。6 項目で +5.8 → ピル 812 を Figma 807 に） */
}
/* 指の端末の 1200〜1439（採用。タブレットの横 1280・1366 など）: ピルに開閉ボタン（44×44）を 5 つ足すと 1 項目 +30 前後で入らない
   （2026-09-28 実測: 1280 でピル 847＞使える幅 759、1366 でロゴとの間 10 しか残らない）。1080〜1199 と同じく、ピルの代わりに「応募フォーム」＋ハンバーガーにする
   （ドロワーの見出しもリンクなので、親のページへもそのまま移れる）。マウスの端末は幅どおりピルのまま */
@media (min-width: 1200px) and (max-width: 1439px) and (hover: none), (min-width: 1200px) and (max-width: 1439px) and (pointer: coarse) {
  .hd-recruit .hd-nav { display: none; }
  .hd-recruit .hd-entry { display: inline-flex; }
}
/* 〜767 の医院ヘッダーは現行の実測（上の 〜767 ブロック）に合わせる。Figma SP/header 556:5458（ロゴ 203×32 @x15・丸 59 影あり・右 10）とは 1px 差なので、
   全ページ共通の殻として現行を正とした（2026-09-26 医院指摘「デザインが変わってしまっている箇所」への対応） */

/* ---------- ドロワー（ハンバーガーの中身。中でスクロールできる。100vh は使わない） ----------
   現行（urala.com・採用 STUDIO プレビュー。2026-09-26 に 390/841/1366 で開いて実測）に合わせる。医院指摘「ハンバーガーメニューの背景も違う」。
   背面: 黒 16% の幕（パネルの外・左下の角丸の外を押すと閉じる）。
   パネル: 地 #F9F6F4 に 黄 #FFF9CC → ピーチ #FFE2CA → 地 のグラデ（現行は絵。〜599 は 390×576 の絵＝194° で幅に比例、600〜 は 800×625 の絵＝187°・px 固定）。
     左下だけ角丸 50（医院 1080〜 は 100）。ノイズの質感は再現しない。右下にスマイル 3 つ（〜599: 132×170・右 34 下 33、600〜: 182×234・右 34 下 34）。
   〜599（390 実測）: 和文ロゴ 200×32 @x15,y19（採用も RECRUIT を付けない）・閉じる丸 60 @右 8 上 10（ハンバーガーと同じ位置）。
     医院: 1 列。最初の点線 y116（左右 24）・点線 #C5B5A8・行 60.2（16px/1.7 字間 6%・オレンジ・左 8。開閉の見出しは字間 0）・＋ は右 12。
       子 13px/1.8 #574D45（点 5px #EEAD75・左 15・間 8・行 37.5。見出しの行の 7 下から）。「採用情報」の後ろに別窓の印 16px（間 6）。
       最後の「プライバシーポリシー」は 13px・字間 0・行 54・区切りなし。中身の下 112。
     採用: 左右 32。見出し 20px/1.7 字間 6%（「ホーム」の字の上端 y110）、子 16px/1.8 字間 6% #574D45（見出し→子 16・行 45）、区切り 1px 実線 #C5B5A8（上下 24）。
       最後に「医院サイト ↗」20px と「プライバシーポリシー」16px（間 16）。中身の下 169。
   600〜1079（673・841 実測。現行はおよそ 541 からこの形）: 閉じる丸は右 50・上 30。ロゴは出さない（幕越しにヘッダーのロゴが見える）。
     医院: 右寄せ 800 幅（それ未満の幅では全幅）・高さは中身なり（中身の下 160）。2 列（中央・列の間 80）: 1 列目 ホーム／私たちについて＋子／症状から探す（リンク）＋子、2 列目 料金表〜プライバシーポリシー。
       見出し 20px/1.7（最初の字の上端 y134）、子 14px/1.7（見出し→子 18・行 38・次のグループまで 39）、2 列目は行 66。区切りなし。1080〜 は子 16px（行 41）・角丸 100。
     採用: 左 9 を空けたほぼ全幅・左右 80・上 134。グループの子は横並び（間 24）。最後の「プライバシーポリシー」の下にも区切り。中身の下 184。
   採用 1080〜 は Figma 139:4303（下の 1080〜 ブロック）。 */
.drawer { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.16); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  --g-drawer-sp: linear-gradient(194deg, #FFF9CC 0, #FFE2CA 109.9vw, var(--c-cream) 145.1vw); }   /* 〜599 の地（医院は .dw-scroll にも同じ絵を敷く） */
/* 医院 〜599 の止め色は現行 390 の画素の平均に合わせる（2026-09-28。現行の絵はノイズで濃く、#FFF9CC／#FFE2CA では青が 10 前後多く淡かった。
   左端 y90・200・330 と右端 y200〜450 の 10 点で ±3 以内になる色を 2 点から逆算） */
.drawer-main { --g-drawer-sp: linear-gradient(194deg, #FFF6C2 0, #FFDEC0 109.9vw, var(--c-cream) 145.1vw); }
.drawer[hidden] { display: none; }
/* 縦に送る箱（ドロワー全体・〜599 の医院の中身・/case の目次のシート）のスクロールバーを隠す（2026-09-28。医院指摘「スクロール機能がある箇所のものは全般的に非表示に」の範囲。
   バーを出す設定の Chromium で、1366×657 のノート PC ではドロワーの右端に 15px のバーが出ていた）。送れるのは今までどおり（指・ホイール・キー）。
   本文（main）の中の箱は base.css、チャットの箱は assist.css */
.drawer, .dw-scroll, .fab-sheet { scrollbar-width: none; }
.drawer::-webkit-scrollbar, .dw-scroll::-webkit-scrollbar, .fab-sheet::-webkit-scrollbar { display: none; }
.drawer-inner { position: relative; min-height: 100%; margin-left: auto; overflow: clip; padding-bottom: 112px; border-radius: 0 0 0 50px;
  background-color: var(--c-cream); background-image: var(--g-drawer-sp); }
.drawer-top, .dw-nav, .dw-cta { position: relative; z-index: 1; }
.dw-smiles { position: absolute; z-index: 0; right: 34px; bottom: 33px; width: 132px; pointer-events: none; }
.dw-smiles svg { display: block; width: 100%; height: auto; }
.drawer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 8px 0 15px; }
.dw-logo { display: flex; align-items: flex-start; min-height: var(--tap); padding-top: 9px; }
.dw-logo .logo-img { width: auto; height: 32px; }
.drawer-close { width: 60px; height: 60px; flex: none; border-radius: 50%; background: var(--c-white); color: var(--c-orange); display: inline-flex; align-items: center; justify-content: center; }
.drawer-close .icon { width: 36px; height: 36px; }   /* ×は 18×18（現行）。線の太さは 2px 相当に戻す */
.drawer-close .icon path { stroke-width: 1.4; }
.dw-list, .dw-sub { list-style: none; }
.dw-sub[hidden] { display: none; }
.dw-sub a { display: flex; align-items: center; gap: 8px; min-height: var(--tap); font-family: var(--f-round); color: var(--c-ink-soft); }
.dw-sub a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-peach); flex: none; }
.dw-btn[aria-expanded="true"] .i-plus, .dw-btn[aria-expanded="false"] .i-minus { display: none; }
/* 医院 〜599 */
.dw-nav-main { padding: 46px 24px 0; }
.dw-nav-main .dw-col-1 { border-top: 1px dashed var(--c-line-2); }
.dw-nav-main .dw-row { border-bottom: 1px dashed var(--c-line-2); }
.dw-nav-main .dw-link, .dw-nav-main .dw-btn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 59.2px; padding: 0 7px 0 8px; font-family: var(--f-round); font-size: 16px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); text-align: left; }
.dw-nav-main .dw-btn { letter-spacing: 0; }
/* ＋ は 21px の枠（線 14.2 相当・太さ 1.9。現行 390 の ＋ は 14×14・太さ約 1.7、開いた × は 10.7。24 の枠だと 16・12 で一回り大きかった。2026-09-28 照合）。
   枠を 24 から 21 にすると中心が右へ 1.5 動くので、右の余白 1.5 で中心を元の位置（ボタンの右端 −19）に保つ */
.dw-nav-main .dw-btn > .icon { margin-left: auto; margin-right: 1.5px; width: 21px; height: 21px; flex: none; }
.dw-nav-main .dw-head { display: none; }
.dw-nav-main .dw-link .i-ext { width: 16px; height: 16px; flex: none; }
.dw-nav-main .dw-row-small { border-bottom: 0; }
.dw-nav-main .dw-row-small .dw-link { min-height: 54px; font-size: 13px; letter-spacing: 0; }
.dw-nav-main .dw-sub { padding: 1px 0 12px 15px; }
.dw-nav-main .dw-sub:not([hidden]) { display: flex; flex-direction: column; }   /* 子の負のマージンを兄弟で相殺させない（ブロックだと隣り合う負のマージンが 1 つにまとまって行が 40.8 になる） */
.dw-nav-main .dw-sub a { margin-block: -3.25px; font-size: 13px; line-height: 1.8; letter-spacing: 0; }   /* 44 の当たり判定のまま行 37.5 */
/* 開いた見出しの印は「＋」を 45 度回した「×」（現行 390/344 を開いて照合 2026-09-28。以前は「−」に差し替えていた）。
   回すのは rotate（hover.css のホバーの transform: scale と打ち消し合わない） */
.dw-nav-main .dw-btn[aria-expanded] > .i-minus { display: none; }   /* components.css の .acc-btn[aria-expanded] の出し分けより強く */
.dw-nav-main .dw-btn[aria-expanded] > .i-plus { display: block; transition: var(--t-hover, transform .3s), rotate .3s var(--ease-hover, ease); }
.dw-nav-main .dw-btn[aria-expanded="true"] > .i-plus { rotate: 45deg; }
/* 〜599（医院・採用とも）: パネルは画面の高さに固定（左下の角丸 50 とスマイルは画面の下に見える）。ロゴと × は上に残し、その下の中身だけを .dw-scroll の中で送る
   （現行 urala.com 390 を開いて実測: パネル 393×659 の箱の中で 885 の中身が送られ、ロゴと × は動かない。スマイルは箱の下 33・右 34 から中身と一緒に上へ流れる）。
   採用の現行（STUDIO プレビュー）も同じ形（2026-09-29 実測: iPhone 393×659 でスマイルは y456〜626＝画面の下 33、400 送るとスマイルと地が一緒に 400 上がり、ロゴは動かない）。
   以前の採用はパネルが中身の高さ（1483）まで伸び、スマイルが 1281〜1450 の画面外にあったので、開いたときの「3 つ順番に出る」動きが画面の外で終わって見えなかった。
   現行は送った中身がロゴの下に透けて重なるので、こちらはロゴの段の下端で切り、切り口を 24px でぼかす。中身の下の余白（医院 112・採用 169）は中身の側に持たせる */
@media (max-width: 599px) {
  .drawer .drawer-inner { height: 100%; min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .drawer .drawer-top { flex: none; }
  .drawer .dw-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
  /* 地のグラデは中身と一緒に流す（現行 390: ピーチの帯は送る前 y300〜350・最後まで送ると y100〜150。下はクリームになり、中身と一緒に上がったスマイル 3 つがクリームの上で見える。
     2026-09-28 照合。以前は動かない .drawer-inner の地だけで、スマイルがピーチの上に乗ってほとんど見えなかった）。
     .drawer-inner と同じ絵を background-attachment: local で中身の側に敷く。194° のグラデの 0% の線は右上の角を通り、止め色は vw なので、
     右上の角を .drawer-inner の右上（＝ロゴの段 70 ぶん上）に置けば、送る前は下の地とぴったり重なる（高さは色に効かない）。上端 24 は上の mask で下の地へつながる */
  .drawer .dw-scroll { background-image: var(--g-drawer-sp); background-repeat: no-repeat; background-size: 100% calc(100% + 70px); background-position: 0 -70px; background-attachment: local; }
  .drawer-main .dw-nav-main { padding-bottom: 112px; }
}
/* 採用 〜599 */
.drawer-recruit .dw-nav { padding: 40px 32px 0; }
.dw-list-recruit > .dw-row { padding: 24px 0; border-bottom: 1px solid var(--c-line-2); }
.dw-list-recruit > .dw-row:first-child { padding-top: 0; }
.dw-list-recruit .dw-link, .dw-list-recruit .dw-head { display: flex; align-items: center; width: auto; min-height: var(--tap); margin-block: -5px; font-family: var(--f-round); font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }   /* 見た目の行 34 で 44 の当たり判定 */
/* 見出しがリンクのとき（2026-09-28 親の文字を押すとそのページへ）: 当たり判定は字の幅だけ（行いっぱいにすると右の余白を押しても移ってしまう）。ホバーは .dw-link と同じ */
.dw-list-recruit a.dw-head { width: fit-content; transition: color .3s cubic-bezier(.4, .4, 0, 1); }
@media (hover: hover) and (pointer: fine) { .dw-list-recruit a.dw-head:hover { color: var(--c-ink-soft); } }
.dw-list-recruit .dw-sub { display: grid; justify-items: start; gap: 16.2px; padding-top: 16px; }
.dw-list-recruit .dw-sub a { margin-block: -7.6px; font-size: 16px; line-height: 1.8; letter-spacing: 0.06em; }
.drawer-recruit .dw-cta { padding: 24px 32px 169px; }   /* 下の 169 は中身の下の余白（〜599 は .dw-scroll の中で送るので中身の側に持つ。600〜 は下の規則で 0） */
.dw-ext-row { display: grid; justify-items: start; gap: 16px; }
.dw-ext { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); margin-block: -5px; font-family: var(--f-round); font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
.dw-ext + .dw-ext { margin-block: -8.4px; font-size: 16px; }
.dw-ext .i-ext { width: 14px; height: 14px; }
@media (min-width: 600px) {
  .drawer-inner { background-image: linear-gradient(187deg, #FFF9CC 0, #FFE2CA 458px, var(--c-cream) 605px); }
  .drawer-top { position: absolute; top: 30px; right: 50px; padding: 0; }
  .dw-logo { display: none; }
  .dw-smiles { width: 182px; bottom: 34px; }
  /* 医院: 右寄せ 800 のパネルに 2 列 */
  .drawer-main .drawer-inner { width: min(800px, 100%); min-height: 0; padding-bottom: 160px; }
  .dw-nav-main { display: grid; grid-template-columns: max-content max-content; justify-content: center; align-items: start; column-gap: 80px; padding: 134px 24px 0; }
  .dw-nav-main .dw-list { display: flex; flex-direction: column; border-top: 0; }   /* 行は flex の子（負のマージンを行の外へ漏らさない） */
  .dw-nav-main .dw-row { border-bottom: 0; }
  .dw-nav-main .dw-btn { display: none; }
  .dw-nav-main .dw-link, .dw-nav-main .dw-head { display: flex; align-items: center; width: auto; min-height: var(--tap); margin-block: -5px; padding: 0; font-family: var(--f-round); font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); }
  .dw-nav-main .dw-row-small .dw-link { min-height: var(--tap); margin-block: -8.4px; font-size: 16px; letter-spacing: 0; }
  .dw-nav-main .dw-sub, .dw-nav-main .dw-sub[hidden] { display: flex; flex-direction: column; padding: 10.9px 0 0 3px; }   /* 開閉しない（子は開いたまま） */
  .dw-nav-main .dw-sp-only { display: none; }
  .dw-nav-main .dw-sub a { margin-block: -3px; font-size: 14px; line-height: 1.7; }   /* 行 38 */
  .dw-col-1 > .dw-row + .dw-row { margin-top: 40px; }
  .dw-col-1 > .dw-group + .dw-group { margin-top: 31.9px; }   /* 最後の子の字の下端 → 次の見出しの字の上端 39 */
  .dw-col-2 > .dw-row + .dw-row { margin-top: 32px; }
  /* 採用: ほぼ全幅・子は横並び */
  .drawer-recruit .drawer-inner { width: calc(100% - 9px); min-height: 0; padding-bottom: 184px; }
  .drawer-recruit .dw-nav { padding: 134px 80px 0; }
  /* 閉じる丸をナビより手前に（医院・採用とも。2026-09-28 実測: 600〜 は .dw-nav の上の余白 134 が丸 60 に重なり、同じ z-index 1 で後にある .dw-nav が押下を奪って × が効かなかった。
     医院は 600〜1920 の全幅で × が押せず、Esc と幕でしか閉じられなかった） */
  .drawer-top { z-index: 2; }
  .dw-list-recruit .dw-sub { display: flex; flex-wrap: wrap; gap: 24px; margin-right: -2px; }   /* 841 で「私たちについて」の子 3 つが 672 ちょうど（現行も 1 行）。字幅の端数で折れないよう 2 だけ余裕 */
  .drawer-recruit .dw-cta { padding: 24px 80px 0; }
  .drawer-recruit .dw-ext-row { padding-bottom: 24px; border-bottom: 1px solid var(--c-line-2); }
}
@media (min-width: 1080px) {
  .drawer-main .drawer-inner { border-radius: 0 0 0 100px; }
  .dw-nav-main .dw-sub, .dw-nav-main .dw-sub[hidden] { padding-top: 11.1px; }
  .dw-nav-main .dw-sub a { margin-block: -1.5px; font-size: 16px; }   /* 行 41 */
  .dw-col-1 > .dw-group + .dw-group { margin-top: 34.1px; }
}

/* 採用ドロワー 1080〜（Figma ナビゲーションメニュー 139:4303）: 画面右上に 744 幅のパネル（左下の角丸 80・高さは中身なり＝774 @1440）。
   地は上が黄・左上がピーチ・下がクリームのグラデ（Figma は画像 → CSS で近似。ノイズの質感は無し）。中は 左 120／上 120 の 2 列（列の間 80）。
   見出し 20px 字間 6%・オレンジ、子は 16px 字間 6% #574D45（点 5px ピーチ・間 8）、子の行間 16、見出し→子 24、グループの間 56。
   2 列目の下に「医院サイト ↗」20px と「プライバシーポリシー」13px。閉じる丸 60（白・×オレンジ）は右 40・上 24。スマイル 3 つは 156×200・右 89・下 71。
   応募フォーム（content の 6 グループ目。Figma のドロワーには無いが現行にある）は 2 列目の「医院サイト」の上に入る */
@media (min-width: 1080px) {
  .drawer:has(.dw-list-recruit) { background: rgba(39, 18, 0, 0.16); }
  .drawer:has(.dw-list-recruit) .drawer-inner { position: absolute; top: 0; right: 0; width: 744px; max-width: 100%; margin: 0; padding: 120px 0 120px 120px; border-radius: 0 0 0 80px; min-height: 0;
    background: radial-gradient(90% 55% at 100% 0%, #FFF1C2 0%, rgba(255, 241, 194, 0) 100%), radial-gradient(80% 45% at 0% 12%, #FDD3B0 0%, rgba(253, 211, 176, 0) 100%), linear-gradient(180deg, #FDE2C6 0%, #FBEBDD 45%, var(--c-cream) 80%); }
  .drawer:has(.dw-list-recruit) .drawer-top { position: absolute; top: 24px; right: 40px; min-height: 0; }
  .drawer:has(.dw-list-recruit) .dw-smiles { width: 156px; right: 89px; bottom: 71px; }
  .drawer:has(.dw-list-recruit) .dw-nav { padding: 0; }   /* 余白はパネル側（上 120・左 120）。600〜1079 の左右 80・上 134 を持ち込まない */
  /* 2 列目の左端は Figma どおりパネル左から 476（120 ＋ 1 列目の一番長い「3分で分かる…」276 ＋ 80）。段組は列幅が等分なので、列 268・間 88 にして合わせる
     （列 272・間 80 だと 472。1 列目の 276 の字は列から 8 はみ出すが、間 88 の中に収まる） */
  .dw-list.dw-list-recruit { display: block; columns: 2; column-gap: 88px; border-top: 0; }
  /* flow-root: 見出しの負のマージン（44 の当たり判定）を行の中に閉じ込める。閉じ込めないと「ホーム」の下の −5 が行の外の 56 と相殺され、
     「ホーム」→「私たちについて」が 61 になっていた（Figma 139:4769 は 56。2026-09-28 照合） */
  .dw-list-recruit > .dw-row { display: flow-root; break-inside: avoid; padding: 0; border-bottom: 0; }
  .dw-list-recruit > .dw-row:nth-child(4) { break-before: column; }
  .dw-list-recruit > .dw-row + .dw-row { margin-top: 56px; }
  .dw-list-recruit > .dw-row:nth-child(4) { margin-top: 0; }
  .dw-list-recruit .dw-link, .dw-list-recruit .dw-head { width: auto; min-height: var(--tap); padding: 0; font-size: 20px; letter-spacing: 0.06em; line-height: 1.7; margin-block: -5px; }   /* 見た目の行 34（20×1.7）で 44 の当たり判定 */
  .dw-list-recruit .dw-sub { display: grid; gap: 16px; padding: 24px 0 0; margin-right: 0; }
  .dw-list-recruit .dw-sub a { min-height: var(--tap); margin-block: -8.4px; gap: 8px; font-size: 16px; letter-spacing: 0.06em; line-height: 1.7; white-space: nowrap; }
  .dw-list-recruit .dw-sub a::before { width: 5px; height: 5px; background: var(--c-peach); }
  /* 段組の一番下の行（2 列目の「応募フォーム」）の最後の子だけ、当たり判定の下 8.4 を流れの中に置く。はみ出しのままだと、段組の高さに
     数えるかどうかがブラウザで違い（Chromium・WebKit は数える）、下の「医院サイト」との間が 64 になっていた。その 8.4 を下の余白から引いて 56（Figma のグループの間） */
  .dw-list-recruit > .dw-row:last-child .dw-sub > li:last-child > a { margin-bottom: 0; }
  .drawer:has(.dw-list-recruit) .dw-cta { display: block; padding: calc(56px - 8.4px) 0 0 calc(50% + 44px); }   /* 左は 2 列目の頭（列 268 ＋ 間 88 = 356＝パネル左から 476） */
  .drawer:has(.dw-list-recruit) .dw-ext-row { display: grid; justify-items: start; gap: 24px; padding: 0; border-bottom: 0; }
  .drawer:has(.dw-list-recruit) .dw-ext { margin-block: -5px; padding: 0; gap: 4px; font-size: 20px; letter-spacing: 0.06em; line-height: 1.7; }
  .drawer:has(.dw-list-recruit) .dw-ext + .dw-ext { margin-block: -10.3px; font-size: 13px; line-height: 1.8; }
  .drawer:has(.dw-list-recruit) .dw-ext .i-ext { width: 14px; height: 14px; }
}

/* ---------- ドロワーの開閉（2026-09-28 医院指摘「ハンバーガーメニュー開く時のアニメーションつけて。閉じる時も」） ----------
   動きは site.js（Web Animations。CSS に clip-path の初期値は置かない＝JS が無い・動きを減らす設定では今までどおり即時に出る）:
     開く: ハンバーガーの丸の中心から、パネル（.drawer-inner）が clip-path の円で広がる（0.85s・終わりでゆっくり。2026-09-28 に 0.52s から遅くした）。背面の幕は同じ時間で濃くなる。
           パネル型（医院 600〜 の右寄せ 800・採用 1080〜 の右上パネル）も同じ丸の中心から（＝面の右上から広がる形）。
     閉じる: 円が丸へ縮んで消える（0.6s）→ 消え終わってから hidden。閉じている途中はドロワーを inert にして、押した指は下の丸に届く（もう一度押すと途中から開き直す）。
   中の項目の stagger（motion.css。html.mo のときだけ）は、面が広がるのに合わせて頭の遅れを 80 → 320ms、間隔 60ms・1 項目 0.7s にする（motion.css より詳細度を上げて上書き） */
html.mo .drawer:not([hidden]) .drawer-inner .dw-row,
html.mo .drawer:not([hidden]) .drawer-inner .dw-cta > * { animation-duration: .7s; animation-delay: calc(320ms + var(--mo-i, 0) * 60ms); }

/* ---------- 右下の固定ボタン: 電話（.reserve）・さがす（.fab-assist）・目次（.fab-toc。/case と /recruit/data） ----------
   〜1079: 電話の丸を一番下に、上へ さがす → 目次 を同じ 60 の丸で縦に積む（間 12）。1080〜: 電話はピル、丸は画面の右下の角に横に並べる（ピルはその上）。
   html.fab-end（〜1079 は下の歯 .ft-bottom が見えたら、1080〜 はフッターが画面の下 3 割より上に来たら。shell.mjs の FAB_SCRIPT）: 丸を画面の下端に横 1 列に並べ直す（1080〜 はピルも下げ、丸はピルの左）。
     ページの一番下では下の歯と帯の上だけに載り、フッターのボタン・メニュー・Copyright を塞がない。
   ドロワー（html[data-menu-open]）・チャット（html.as-lock）・目次のシート（html.fab-toc-open）を開いている間は隠す。
   z-index: 丸・電話 150（ヘッダー 200・ドロワー 300・チャット 400 より下）。目次を開いている間だけ 260（ヘッダーの上・ドロワーの下） */
body { --fab-size: 60px; --fab-gap: 12px; --fab-step: calc(var(--fab-size) + var(--fab-gap)); --fab-r: 16px; --fab-b: 24px; --fab-pill-w: 243px; --fab-ease: cubic-bezier(.33, 1, .68, 1); }
@media (max-width: 767px) { body { --fab-r: 14px; --fab-b: 14px; } }   /* 参照 440/393/344: 丸 60 の右端・下端とも画面端から 14 */

/* 電話（〜1079 は丸）。受話器は丸の中心に置く（2026-09-28 ユーザー「電話のアイコンずれてる中央から」: 以前は .reserve-body が行の箱のまま
   受話器がベースラインに載り、絵が 3〜4px 上にずれていた）。受話器の絵は左下が重いので、外接枠の中心を右上へ 0.5px 寄せて見た目の中心に合わせる
   （外接枠・面積の重心とも丸の中心から 1px 以内。scratchpad の measure-phone.mjs で 344〜1079 を実測） */
.reserve { position: fixed; z-index: 150; right: var(--fab-r); bottom: var(--fab-b); width: var(--fab-size); height: var(--fab-size); border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-orange); color: var(--c-orange); display: flex; align-items: center; justify-content: center; }
.reserve-tab, .reserve-txt { display: none; }
.reserve-body, .reserve-ic { display: flex; align-items: center; justify-content: center; }
.reserve-ic .icon { display: block; width: 20px; height: 24.44px; }   /* viewBox 18×22 と同じ比 */
@media (max-width: 1079px) { .reserve-ic .icon { translate: .5px -.8px; } }
@media (min-width: 1080px) {
  .reserve { right: 0; bottom: calc(var(--fab-b) + var(--fab-size) + 16px); width: auto; height: auto; border: 0; border-radius: 0; background: none; display: flex; flex-direction: column; align-items: flex-end; }   /* 右下の角の丸（24＋60）の 16 上 */
  .reserve-tab { display: block; width: 150px; height: 24px; margin-right: 45px; background: var(--c-orange); color: var(--c-white); font-size: 13px; line-height: 24px; text-align: center; border-radius: 12px 12px 0 0; }
  .reserve-body { display: flex; align-items: center; gap: 12px; width: max-content; min-width: 240px; height: 72px; padding: 0 20px 0 14px; background: var(--c-white); border: 2px solid var(--c-orange); border-right: 0; border-radius: 36px 0 0 36px; }
  .reserve-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--c-peach-soft); flex: none; }
  .reserve-ic .icon { width: 16px; height: 20px; }
  .reserve-txt { display: grid; line-height: 1.2; }
  .reserve-num { font-family: var(--f-en); font-weight: 400; font-size: 22px; letter-spacing: 0.06em; color: var(--c-orange); white-space: nowrap; }   /* 参照: 本体幅 240 に収まる太さ */
  .reserve-txt small { font-size: 12px; color: var(--c-ink-soft); letter-spacing: 0.02em; }
}
/* 1080〜 Figma（pc/top 718:15501 @1366）: タブ 151×27（角丸 上 10・右端から 32・白 13px/1.8）＋ 本体 243×69（白・線 2 オレンジ・左の角丸 38.5・右は画面端）。
   丸 40 #F7E7DB（左 14）に受話器 18×21、その右 12 に番号 Zen Maru 24px 字間 6%・オレンジ、下に「年中無休」「9:00 - 18:00」13px/1.8 オレンジ（中央揃え） */
@media (min-width: 1080px) {
  .reserve-tab { width: 151px; height: 27px; margin-right: 32px; font-size: 13px; line-height: 27px; letter-spacing: 0; border-radius: 10px 10px 0 0; }
  .reserve-body { justify-content: flex-start; gap: 12px; width: 243px; min-width: 0; height: 69px; padding: 0 0 0 12px; border-radius: 38.5px 0 0 38.5px; }   /* 左詰め（中央寄せだと丸が左 25・番号の右 10 になり Figma の 左 14・右 22 から 11 ずれる） */
  .reserve-ic .icon { width: 18px; height: 21px; }
  .reserve-txt { justify-items: center; gap: 2px; line-height: 1; }   /* 番号 27 ＋ 2 ＋ 下の字 23 ＝ 52（Figma Frame 92。本体の上から 8） */
  .reserve-num { font-family: var(--f-round); font-weight: 500; font-size: 24px; letter-spacing: 0.06em; line-height: 27px; }
  .reserve-txt small { font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-orange); }
}
/* 採用のピル（1080〜）: 見出し「お電話でのお問い合わせ」（11 字）は 151 に収まらないので幅は中身なり。下の字は診療時間（shell.mjs reserveData） */
@media (min-width: 1080px) { .reserve-recruit .reserve-tab { width: auto; min-width: 151px; padding: 0 14px; } }

/* さがす・目次の丸（電話の丸と同じ 60・白・線 2 オレンジ）。絵 26 ＋ 小さい字 11px。--fab-i は下からの段（電話 0・さがす 1・目次 2） */
.fab-btn { position: fixed; z-index: 150; right: var(--fab-r); bottom: calc(var(--fab-b) + var(--fab-i, 1) * var(--fab-step)); width: var(--fab-size); height: var(--fab-size);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px 0 0; border-radius: 50%; background: var(--c-white); border: 2px solid var(--c-orange); color: var(--c-orange);
  font-family: var(--f-round); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: opacity .25s ease, visibility .25s, translate .3s var(--ease-hover, ease), box-shadow .3s var(--ease-hover, ease), background-color .3s; }
.fab-btn::-webkit-details-marker { display: none; }
.fab-btn::marker { content: ""; }
.fab-ic { display: block; flex: none; width: 26px; height: 26px; }
.fab-label { display: block; white-space: nowrap; }
.fab-btn:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; }
/* 目次: 閉じている間は「≡ 目次」、開いている間は「× 閉じる」 */
.fab-toc { position: relative; z-index: 150; }
.fab-toc[open] { z-index: 260; }
.fab-ic-close, .fab-l-close, .fab-toc[open] .fab-ic-toc, .fab-toc[open] .fab-l-open { display: none; }
.fab-toc[open] .fab-ic-close, .fab-toc[open] .fab-l-close { display: block; }
.fab-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.16); }
/* シート: 目次の丸の上に右寄せで出る（丸は見えたまま＝JS が無くても丸で閉じられる）。高さが足りない画面では中でスクロール（100vh は使わない。fixed の % は画面の高さ） */
.fab-sheet { --fab-sheet-b: calc(var(--fab-b) + 3 * var(--fab-step)); position: fixed; right: var(--fab-r); bottom: var(--fab-sheet-b); width: min(320px, calc(100% - var(--fab-r) * 2));
  max-height: calc(100% - var(--fab-sheet-b) - 16px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 6px 16px 10px 20px; border-radius: var(--r-l); background: var(--c-white); box-shadow: 0 8px 28px rgba(87, 77, 69, 0.18); color: var(--c-ink); }
.fab-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fab-sheet-title { margin: 0; font-family: var(--f-round); font-size: 15px; line-height: 1.5; letter-spacing: 0.04em; color: var(--c-ink-deep); }
.fab-sheet-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -8px; border-radius: 50%; color: var(--c-orange); }
.fab-sheet-close .fab-ic-close { display: block; width: 22px; height: 22px; }
html:not(.js) .fab-sheet-close { display: none; }   /* JS が無いときは下の丸（× 閉じる）で閉じる */
.fab-sheet-list { list-style: none; margin: 0; padding: 0; }
.fab-sheet-list li + li { border-top: 1px dashed var(--c-line-2); }
.fab-sheet-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 2px; font-family: var(--f-round); font-size: 15px; line-height: 1.5; letter-spacing: 0.02em; color: var(--c-orange); }
.fab-sheet-go { flex: none; width: 16px; height: 16px; }
@media (min-width: 600px) { .fab-sheet { width: min(360px, calc(100% - var(--fab-r) * 2)); } }   /* 一番長い「入れ歯や噛み合わせについてお悩みの方」（15px×18 字）が 1 行に入る幅 */

/* ページの一番下（html.fab-end）: 下端に横 1 列（右から 電話・さがす・目次） */
html.fab-end .fab-btn { right: calc(var(--fab-r) + var(--fab-i, 1) * var(--fab-step)); bottom: var(--fab-b); }
html.fab-end .fab-sheet { --fab-sheet-b: calc(var(--fab-b) + var(--fab-step)); }
/* 並べ替えの動き（読み込み直後は動かさない＝ html.fab-ready は最初の判定の後に付く）。a.reserve は hover.css の .reserve の transition より強くするため */
html.fab-ready .fab-btn { transition: right .45s var(--fab-ease), bottom .45s var(--fab-ease), opacity .25s ease, visibility .25s, translate .3s var(--ease-hover, ease), box-shadow .3s var(--ease-hover, ease), background-color .3s; }
html.fab-ready a.reserve { transition: bottom .45s var(--fab-ease), opacity .25s ease, visibility .25s, color .3s, background-color .3s, border-color .3s, box-shadow .3s var(--ease-hover, ease), transform .3s var(--ease-hover, ease); }

/* 1080〜: 電話はピル（上の 1080〜 ブロック）、丸は右下の角に横並び（右から さがす・目次）。ページの一番下ではピルを下げ、丸はピルの左へ */
@media (min-width: 1080px) {
  body { --fab-r: 24px; --fab-b: 24px; }
  .fab-btn { right: calc(var(--fab-r) + (var(--fab-i, 1) - 1) * var(--fab-step)); bottom: var(--fab-b); }
  .fab-sheet { --fab-sheet-b: calc(var(--fab-b) + var(--fab-step)); }
  html.fab-end .reserve { bottom: var(--fab-b); }
  html.fab-end .fab-btn { right: calc(var(--fab-pill-w) + 16px + (var(--fab-i, 1) - 1) * var(--fab-step)); bottom: calc(var(--fab-b) + 4.5px); }   /* ピルの本体（高さ 69）と丸の中心を揃える */
  html.fab-end .fab-sheet { right: calc(var(--fab-pill-w) + 16px); --fab-sheet-b: calc(var(--fab-b) + 4.5px + var(--fab-step)); }
}

/* 隠す: ドロワー・目次のシートを開いている間（押せない・読めない）。チャットを開いている間は薄く消すだけ（閉じたときに押したボタンへフォーカスを戻せるように） */
html[data-menu-open] .reserve, html[data-menu-open] .fab-btn,
html.fab-toc-open .reserve, html.fab-toc-open .fab-assist { opacity: 0; visibility: hidden; pointer-events: none; }
html.as-lock .reserve, html.as-lock .fab-btn { opacity: 0; pointer-events: none; }
/* 目次の丸を出す幅と時機（ページの fabMenu が選ぶ。shell.mjs の fabs()。/case はどちらも使わず全幅に出し、〜1079 の時機は case-index.css が持つ）:
   .fab-toc-stack（stackOnly）: 丸を縦に積む 〜1079 だけ出す（/recruit/data。1080〜 は今までどおり さがす だけ）。
   html.fab-toc-wait（showAfter）: ページの頭を過ぎる（FAB_SCRIPT が html.fab-toc-past）までは丸を出さない。頭には目次ピルがあるので同じ役の丸を重ねない。
     シートを開いている間（html.fab-toc-open）は × 閉じる の丸なので隠さない。出るときは .fab-btn の opacity の変化（0.25s）で薄く出る */
@media (min-width: 1080px) { .fab-toc-stack { display: none; } }
html.fab-toc-wait:not(.fab-toc-past):not(.fab-toc-open) .fab-toc-btn { opacity: 0; visibility: hidden; pointer-events: none; }
/* 背の低い画面（横向きのスマホ。高さ 〜540）: 縦に積んだ丸 3 つの上ではシートの高さが 100 前後しか取れず、4 項目のうち 1 つしか見えなかった
   （2026-09-29 照合: iPhone 15 Pro 横 734×343 で 97・844×390 で 134）。/recruit/data（.fab-toc-stack）だけ、シートを目次の丸（× 閉じる）の左に、画面の下端から出す。
   一番下（html.fab-end）の横 1 列では、左端の目次の丸のさらに左。/case は今までどおり丸の上（下端のぼかし .is-more で続きを示す） */
@media (max-width: 1079px) and (max-height: 540px) {
  .fab-toc-stack .fab-sheet, .fab-toc-stoc .fab-sheet { --fab-sheet-r: calc(var(--fab-r) + var(--fab-size) + var(--fab-gap)); --fab-sheet-b: var(--fab-b); right: var(--fab-sheet-r); width: min(360px, calc(100% - var(--fab-sheet-r) - 16px)); }
  html.fab-end .fab-toc-stack .fab-sheet, html.fab-end .fab-toc-stoc .fab-sheet { --fab-sheet-r: calc(var(--fab-r) + 2 * var(--fab-step) + var(--fab-size) + var(--fab-gap)); --fab-sheet-b: var(--fab-b); }
}

@media (hover: hover) and (pointer: fine) {
  .fab-btn:hover { translate: 0 -3px; box-shadow: 0 6px 16px rgba(229, 99, 0, 0.18); }
  .fab-sheet-list a:hover { color: var(--c-ink-soft); }
  .fab-sheet-close:hover { background: var(--c-peach-soft); }
}
/* ページ間の移動では、電話（motion.css の mo-reserve）と同じく「さがす」も動かさない */
@media (prefers-reduced-motion: no-preference) {
  .fab-assist { view-transition-name: mo-fab-assist; }
  ::view-transition-group(mo-fab-assist), ::view-transition-old(mo-fab-assist), ::view-transition-new(mo-fab-assist) { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .fab-btn, html.fab-ready .fab-btn, html.fab-ready a.reserve { transition: none; } }
@media print { .reserve, .drawer, .fab-btn, .fab-toc { display: none; } }

/* ---------- 右側の目次（旗 s01。shell.mjs の sideToc・assets/js/side-toc.js。2026-10-05 ユーザー「セクション多いところは右にメニュー」） ----------
   節が 5 つ以上の 20 ページ（content/side-toc.json）。nav.stoc（右の一覧）と、右下の目次の丸（.fab-toc-stoc）の 2 つを出しておき、どちらか 1 つだけを見せる。
   1200〜: side-toc.js が html.stoc-js を付け、一覧を見えないまま置いて測る。一覧の左端（−16）より右に本文の中身がはみ出す区間が、
     ページの 3 割以下なら html.stoc-rail（一覧を出し、丸を隠す）。はみ出す所を通る間だけ html.stoc-hit で一覧を薄く消す。
   〜1199・JS が無いとき・本文と被る幅: 今までの右下の目次の丸（showAfter で h1 を過ぎてから出る）。
   一覧も h1 を過ぎてから（html.fab-toc-past。FAB_SCRIPT）。フッターが画面の下 3 割に入ったら（html.stoc-end。side-toc.js。html.fab-end も）・ドロワー・チャット・丸のシートを開いている間は消す。
   一覧を出すページでも、一覧が消えている間（被る区間・フッター）は右下の丸を出す（目次の入口がどこにも無い時間を作らない）。丸を隠すのは一覧が見えている間だけ。
   背の低い横向きの画面（〜1079 で高さ 〜540）のシートは /recruit/data（.fab-toc-stack）と同じく丸の左に下端から出す（上の「背の低い画面」）
   上端はヘッダーの下 24（採用のヘッダーは流れて消えるので画面の上 32）。下端は電話のピルの上 16（ピルの上端 = 画面の高さ − 196）。入りきらなければ中でスクロール */
.stoc { display: none; }
@media (min-width: 1200px) {
  html.stoc-js .stoc { display: block; position: fixed; z-index: 140; top: calc(var(--hd-h) + 24px); right: 24px; width: 208px; max-height: calc(100% - var(--hd-h) - 24px - 212px);
    overflow-y: auto; overscroll-behavior: contain; padding: 14px 10px 10px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.96); box-shadow: 0 4px 20px rgba(87, 77, 69, 0.12);
    visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s; }
  html.stoc-js .area-recruit .stoc { top: 32px; max-height: calc(100% - 32px - 212px); }
  html.stoc-rail:not(.fab-end):not(.stoc-end):not(.stoc-hit):not(.fab-toc-open):not([data-menu-open]):not(.as-lock):is(.fab-toc-past, :not(.fab-toc-wait)) .stoc { visibility: visible; opacity: 1; }
  html.stoc-rail:not(.fab-end):not(.stoc-end):not(.stoc-hit):not(.fab-toc-open) .fab-toc-stoc .fab-toc-btn { opacity: 0; visibility: hidden; pointer-events: none; }
}
.stoc-title { margin: 0 8px 6px; font-family: var(--f-round); font-weight: 500; font-size: 12px; line-height: 1.5; letter-spacing: 0.08em; color: var(--c-ink-soft); }
.stoc-list { list-style: none; margin: 0; padding: 0; }
.stoc-a { display: flex; align-items: flex-start; gap: 8px; padding: 6px 8px; border-radius: var(--r-s); font-family: var(--f-round); font-size: 13px; line-height: 1.5; letter-spacing: 0.02em; color: var(--c-ink); transition: color .2s, background-color .2s; }
.stoc-a::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 6.25px; border-radius: 50%; border: 1.5px solid var(--c-line-2); box-sizing: border-box; transition: background-color .2s, border-color .2s; }   /* 点は 1 行目の中心（13×1.5 の行の中央） */
.stoc-a[aria-current] { color: var(--c-orange-deep); background: var(--c-peach-soft); }
.stoc-a[aria-current]::before { background: var(--c-orange); border-color: var(--c-orange); }
.stoc-a:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 1px; }
/* 丸のシートでも今いる節に薄い面（右側の目次のページだけ） */
.fab-toc-stoc .fab-sheet-list a[aria-current] { margin-inline: -8px; padding-inline: 10px; border-radius: var(--r-s); background: var(--c-peach-soft); color: var(--c-orange-deep); }
@media (hover: hover) and (pointer: fine) { .stoc-a:hover { color: var(--c-orange-deep); } }
@media (pointer: coarse) { .stoc-a { padding-block: 12.25px; } }   /* 指で押す広い画面（タブレットの横向きなど）は 1 行の項目を高さ 44 に */
@media (prefers-reduced-motion: reduce) { html.stoc-js .stoc, .stoc-a, .stoc-a::before { transition: none; } }
@media print { .stoc { display: none !important; } }

/* ---------- フッター（開いた口の中に文字。上の歯・ロゴ・ナビ・舌＋RECRUIT・下の歯・ピーチの帯） ----------
   参照 pc1280: 口は幅 1140（採用 1200）・全高 ≈700。中は薄いベージュのグラデ（歯の下 #EBE2DB → 下 #F7F3F0）、舌は #F1E9E4 の双丘、下の歯は口の下端に沈む。
   〜1079（参照 344/841）: 口は「上の歯＋ロゴ＋舌」だけの楕円。ナビはその下でクリーム地に 1 列（舌の上に少し重なる）→ RECRUIT/CTA → Copyright 横書き → 下の歯＋ピーチ帯。
   ただし医院の 912〜1079 は現行どおり PC の口の絵を縮めた 1 画面の型（下の「912〜1079 の医院フッター」。〜1079 の指定をそこで上書きする）。
   医院の口・舌・帯（〜911）には現行と同じ粒を敷く（下の「医院フッターの粒」） */
.ft { position: relative; display: flex; flex-direction: column; background: var(--c-cream); margin-top: var(--section-y); --ft-w: 1140px; }
.ft-recruit { --ft-w: 1200px; }
.ft-mouth { position: relative; z-index: 1; width: 100%; }
.ft-top { position: relative; overflow: clip; text-align: center; }
/* 歯: 白。上の歯は下辺が丸く、下の歯は上辺が丸い。列数は幅で 6 → 8 */
.ft-teeth { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; padding: 0 8px; list-style: none; }
.ft-teeth li { background: var(--c-white); height: var(--tooth-h, 64px); border-radius: 0 0 44% 44% / 0 0 42% 42%; }
.ft-teeth li:nth-child(n+7) { display: none; }
.ft-teeth-bottom li { border-radius: 44% 44% 0 0 / 42% 42% 0 0; }
.ft-logo { display: flex; align-items: center; justify-content: center; width: min(390px, 91%); min-height: 44px; margin-inline: auto; }
.ft-logo-img { width: 100%; height: auto; }
/* ナビ */
.ft-nav { position: relative; z-index: 1; text-align: left; }
.ft-cols { list-style: none; }
.ft-parent, .ft-leaves a { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; color: var(--c-orange); }
.ft-cols .ft-acc { display: none; }
.ft-sub { margin-top: 0; list-style: none; }
.ft-sub a { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); font-size: 13px; color: var(--c-ink-soft); }
.ft-sub a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c-peach); flex: none; }
.ft-sub-top { display: none; }
.ft-leaves { list-style: none; display: grid; gap: 0; }
.ft-leaves a .i-ext, .ft-ext .i-ext { width: 14px; height: 14px; margin-left: 6px; }
.ft-leaves a[data-small] { font-size: 13px; }
/* 舌の上の CTA: 医院 = RECRUIT ＋ グラデピル、採用 = 3 ボタン */
.ft-tongue { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 48px; }
.ft-recruit-en { font-family: var(--f-en); font-weight: 400; font-size: clamp(44px, 2rem + 2vw, 64px); letter-spacing: 0.15em; text-indent: 0.15em; color: var(--c-orange); line-height: 1; }
.ft-tongue .btn-lg { min-width: 280px; }
.ft-tongue-recruit .btn-outline { background: var(--c-white); border-color: var(--c-white); }   /* 参照: 募集要項／見学申し込みは白塗り・枠なし（エントリーだけオレンジ）。枠線だけだと舌の輪郭が透けてボタンと重なって見える */
.ft-copy { position: relative; z-index: 1; font-family: var(--f-en); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; color: var(--c-orange); text-align: center; padding: 20px var(--gutter) 24px; line-height: 1.5; }
.ft-bottom { position: relative; z-index: 1; }
/* 帯は飾り（aria-hidden）なので押されない。2026-10-05 修正リスト No.87「各画面の一番下のリクルートボタンが死んでいる」: 1080〜 は帯の箱（上は透明の円弧）が医院フッターの「採用サイトへ」に被り、
   押せる面が 1760 で 77%・1920 で 57%・2560 で 0% だった（見た目は隠れていないので気づきにくい） */
.ft-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; background: var(--c-peach); pointer-events: none; }

/* 〜1079: 楕円の口（上の歯＋ロゴ＋舌）。舌は口の下半分の双丘。ナビは口の下端に重ねる */
@media (max-width: 1079px) {
  .ft { margin-top: var(--section-y); }
  /* 口の形は参照実測（344: 344×315、上下の角の縦半径 ≈95・100 / 841: 841×740、≈270・190）→ 角丸の縦半径 34%/30% の丸長方形 */
  .ft-top { aspect-ratio: 10 / 9; border-radius: 50% / 34% 34% 30% 30%; --tooth-h: clamp(56px, 14vw, 120px);
    background-image: radial-gradient(40% 46% at 26% 100%, var(--c-tongue) 0 68%, transparent 69%), radial-gradient(40% 46% at 74% 100%, var(--c-tongue) 0 68%, transparent 69%),
      linear-gradient(180deg, var(--c-mouth-1) 0%, var(--c-mouth-2) 38%, var(--c-mouth-3) 100%); }
  .ft-teeth-top { gap: clamp(6px, 1.4vw, 12px); padding: 0 clamp(8px, 2vw, 16px); }
  .ft-logo { margin: clamp(20px, 5vw, 40px) auto 0; }
  /* ナビ開始 ≒ 歯 (14vw) ＋ 余白 ＋ ロゴ ＋ 40 ≈ 0.187W ＋ 95。口の高さ 0.9W から差し引く */
  .ft-nav { margin-top: calc(-71% + 95px); padding: 0 var(--gutter); }
  .ft-cols { display: flex; flex-direction: column; gap: 0; border-top: var(--dash-ft); }
  .ft-col { border-bottom: var(--dash-ft); }
  .ft-col.has-sub .ft-parent { display: none; }
  .ft-cols .ft-acc { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 60px; padding: 8px 4px; font-family: var(--f-round); font-size: 16px; letter-spacing: 0.06em; color: var(--c-orange); text-align: left; }
  .ft-cols .ft-acc > .icon { margin-left: auto; width: 24px; height: 24px; color: var(--c-orange); }
  .ft-cols .ft-acc[aria-expanded="true"] .i-plus { display: none; }
  .ft-cols .ft-acc[aria-expanded="false"] .i-minus { display: none; }
  /* 開閉は hidden 属性（shell.mjs が付け、site.js の slide が外す・付ける）。閉じる間も表示のまま縮めてから hidden になるので、開く・閉じるとも動く。
     JS が無いときは <head> の noscript が子を開いたまま見せる。医院・採用とも同じ（2026-09-28 採用も医院と同じ開閉に） */
  .ft-sub { display: block; padding: 0 0 12px 12px; margin: 0; }
  .ft-sub[hidden] { display: none; }
  .ft-sub a { min-height: var(--tap); font-size: 14px; }
  .ft-sub-top { display: block; }
  .ft-col-leaves { border-bottom: 0; }
  .ft-leaves li { border-bottom: var(--dash-ft); }
  .ft-leaves a { min-height: 60px; width: 100%; padding: 8px 4px; }
  .ft-tongue { margin-top: 40px; padding: 0 var(--gutter); flex-direction: column; gap: 20px; }
  .ft-tongue .btn-lg { width: calc(100% - 40px); min-width: 0; max-width: 360px; }
  .ft-tongue-recruit { align-items: flex-start; }
  .ft-copy { padding-top: 24px; }
  /* 下の歯＋ピーチ帯（帯の上辺は中央がわずかに下がる浅い弧） */
  .ft-bottom { --tooth-h: clamp(52px, 14vw, 120px); padding-top: 10px; background-image: radial-gradient(52% clamp(8px, 7vw, 64px) at 50% 0%, var(--c-cream) 0 99%, var(--c-peach) 100%); background-color: var(--c-peach); }
  .ft-teeth-bottom { gap: clamp(6px, 1.4vw, 12px); padding: 0 clamp(8px, 2vw, 16px); }
  .ft-band { display: none; }
}
@media (min-width: 600px) and (max-width: 1079px) {
  .ft-tongue { flex-direction: row; justify-content: center; }
  .ft-tongue-recruit { justify-content: flex-start; }
}
/* 〜1079（2026-09-26 に 〜767 から広げた。現行は 673・841 でも同じ「幅に比例する口の絵」＋1 列のメニュー。PC 型は 1080〜）:
   参照 440/393/344 の実測（W = 画面幅。口の絵だけ幅に比例し、ロゴ・ナビ・RECRUIT 以下は px 固定）。600〜1079 の差分は次のブロック。
   口: 幅 W・高さ 0.8564W（原本の画像 390×334）。原本の輪郭 1px は引かない（2026-09-28 医院指摘）。角は横 50%・縦 上 0.307W／下 0.17W。上端を T とする。
   上の歯 6 本: 幅 0.1295/0.1295/0.138/0.138/0.1295/0.1295W・隙間 0.0114W、下端 T＋0.168/0.152/0.132W（外ほど下）、下の角 r 0.048W。上端は口の弧で切れる。
   舌: 双丘（丘の中心 x 0.345W/0.655W・y T＋0.628W、半径 0.345W×0.1735W＝左右の丘が口の縁まで届く）＋その下は全幅。頂 T＋0.4545W・谷 T＋0.473W。上縁 #EAE0D9 → 下へ消える。
     （2026-09-26 修正: 以前は半径 0.297W×0.119W で丘が縁の手前で終わり、両脇に段が出ていた）
   医院: ロゴ 296×41 を T＋106・ナビの最初の点線 T＋219・行 60.2・点線 #C5B5A8（左右 25）→ RECRUIT（cap 26・幅 156）は最後の点線の 37 下 → 32 → ボタン 238×60 → 25 → Copyright → 110 → ページ下端。
     （医院の口・歯・舌・帯とロゴ〜Copyright の位置は、下の「〜911 の医院フッターの形」「〜599 の医院フッター」が正。2026-09-28 に現行の絵の座標と 344/390 の実測で合わせ直した）
   採用: ロゴ 幅 W−80 を T＋120 → メニューは医院と同じ点線区切りの 1 列・開閉つき（2026-09-28 ユーザー「採用のフッターもアコーディオンの方が良くない？」。
     以前は現行どおり子を全部開いた縦並びで長かった）。最初の点線はロゴ下端の 56 下（390 で医院と同じ T＋219）→ ボタン 3 つ（幅 70%・高さ 58・間隔 17）。
   下の歯 7 本（幅 0.1333W・隙間 0.0111W・上端はページ下端から 0.165W・白→透明）の前にピーチ #E8904C の帯（端 8.125W%・中央 0.94W%。PC と同じ弧）。
   医院の口の地・舌・帯の色は「医院フッターの粒」で現行の作り（地の色＋粒＋消すグラデ）に置き換える。ここの --g-mouth-sp 等は採用のフッターが使う */
@media (max-width: 1079px) {
  .ft { container-type: inline-size; background: transparent; margin-top: -26px; }   /* 参照: 最終セクションの中身 → 口の上端 = about 25 / トップ 372（新実装はセクションの下余白が大きいぶん詰める） */
  .ft-recruit { margin-top: 30px; }   /* 参照: ENTRY 帯の下端 → 口の上端 80 */
  /* 輪郭線は引かない（2026-09-28 医院指摘「フッター採用、通常両方に変なラインが入ってる」: 1px の線が iPhone の 3 倍密度でくっきり出て、
     口の下側の弧がメニューの行（ホーム・私たちについて）を横切って見えた）。口の形は上の歯・中のグラデ・舌の面で見せる */
  .ft-top { aspect-ratio: 390 / 334; border-radius: 50% / 35.9% 35.9% 19.9% 19.9%; --tooth-h: auto;
    background-image: var(--g-mouth-sp); }
  .ft-top::after { content: ""; position: absolute; left: 0; right: 0; top: 53.07%; bottom: 0; pointer-events: none;
    background: var(--g-tongue-sp);
    -webkit-mask-image: radial-gradient(34.5% 43.17% at 34.5% 43.17%, #000 99.5%, transparent 100%), radial-gradient(34.5% 43.17% at 65.5% 43.17%, #000 99.5%, transparent 100%), linear-gradient(180deg, transparent 43.17%, #000 43.17%);
    mask-image: radial-gradient(34.5% 43.17% at 34.5% 43.17%, #000 99.5%, transparent 100%), radial-gradient(34.5% 43.17% at 65.5% 43.17%, #000 99.5%, transparent 100%), linear-gradient(180deg, transparent 43.17%, #000 43.17%); }
  .ft-teeth-top { position: absolute; inset: 0 0 auto; display: flex; justify-content: center; align-items: flex-start; gap: 1.14cqw; padding: 0; z-index: 1; }
  .ft-teeth-top li { flex: none; width: 12.95cqw; height: 16.8cqw; border-radius: 0 0 4.8cqw 4.8cqw; }
  .ft-teeth-top li:nth-child(2), .ft-teeth-top li:nth-child(5) { height: 15.2cqw; }
  .ft-teeth-top li:nth-child(3), .ft-teeth-top li:nth-child(4) { width: 13.8cqw; height: 13.2cqw; }
  .ft-logo { position: absolute; z-index: 1; left: 50%; top: max(104.5px, 16cqw); width: 296px; margin: 0; transform: translateX(-50%); }
  .ft-recruit .ft-logo { top: max(120px, 17cqw); width: calc(100% - 80px); }   /* 600〜767 では歯の下端（0.168W）より下に逃がす */
  /* ナビ（医院・採用とも）: 最初の点線を T＋219 に（口の高さ 85.641% を差し引く）。行 59.2＋点線 1 */
  .ft { --dash-ft: 1px dashed var(--c-line-2); }
  .ft-nav { margin-top: calc(219px - 85.641%); padding: 0 25px; }
  .ft .ft-cols .ft-acc { min-height: 59.2px; padding: 8px 8px 8px 7px; letter-spacing: 0; }
  .ft .ft-cols .ft-acc > .icon { width: 21px; height: 21px; }
  .ft .ft-leaves a { min-height: 59.2px; padding: 8px 4px 8px 7px; }
  .ft .ft-leaves a[data-small] { min-height: 54px; letter-spacing: 0; }
  .ft .ft-leaves a .i-ext-sp { width: 16px; height: 16px; margin-left: 6px; }   /* 現行: 「採用情報」の 6 右に 16×16 の別窓の印（採用の「医院サイト」も同じ印。PC 用の印は隠す） */
  .ft .ft-leaves a .i-ext:not(.i-ext-sp) { display: none; }
  .ft-main .ft-tongue { flex-direction: column; margin-top: 31px; padding: 0 20px; gap: 27px; }
  .ft-recruit-en { font-size: 36px; letter-spacing: 0.03em; text-indent: 0.03em; }
  .ft-main .ft-tongue .btn-lg { width: 238px; max-width: 100%; min-height: 60px; padding: 0 44px 0 24px; justify-content: flex-start; }
  .ft-main .ft-tongue .btn-arrow { right: 20px; width: 18px; height: 18px; margin-top: -9px; }   /* 参照: 山形 7×11 の右端がボタン右端から 27 */
  /* 採用のナビ: 行・字・点線・開閉は医院と同じ（上の .ft の指定）。最初の点線だけロゴ（幅 W−80 で医院より大きい）の下端から 56 下に置く
     ＝ ロゴ上端 ＋ ロゴ高 (13.846cqw − 11.08) ＋ 56 − 口の高さ 85.641cqw（390 で T＋219.5＝医院と同じ高さ） */
  .ft-recruit .ft-nav { margin-top: calc(max(120px, 17cqw) + 44.92px - 71.795cqw); }
  .ft-recruit .ft-tongue { flex-direction: column; justify-content: flex-start; margin-top: 65px; padding: 0 40px; gap: 17px; }
  .ft-tongue-recruit .btn-circle { width: 70%; min-height: 57px; padding: 0 18px 0 26px; justify-content: space-between; font-size: 18px; white-space: nowrap; }
  /* Copyright は横書き 1 行（参照の採用は縦書きがボタンに重なって崩れているので合わせない）→ ページ下端まで 110 */
  .ft-copy { padding: 21px 20px 107px; letter-spacing: 0.06em; }
  .ft-main .ft-copy { word-spacing: 1px; }   /* 現行 344〜968: 語の間に 1px（字の幅 309。0 だと 302）。344 でも左右 16 の内側に 1 行で入る。1080〜 は Figma の文字箱 302 のまま */
  /* 採用: 原本はエントリーのボタン下端 → ページ下端 122（3 幅とも）。Copyright は現行 390 どおり右端に縦書き（ボタンの右・下端から 84。2026-09-26 撮り直しで確認）。
     縦書きにして流れから外すぶん、口の箱の下に 122 を残してボタンと下の歯の間隔を保つ */
  .ft-recruit .ft-mouth { margin-bottom: 122px; }
  .ft-recruit .ft-copy { position: absolute; z-index: 2; right: 12px; bottom: 84px; height: auto; padding: 0; writing-mode: vertical-rl; white-space: nowrap; font-size: 11px; line-height: 1; letter-spacing: 0; pointer-events: none; }   /* 文字は飾り。ボタンに被っても押せるように（No.78） */
  /* 下の歯＋ピーチ帯はフッターの下端に重ねる（流し込みにしない） */
  .ft-bottom { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 16.5cqw; padding: 0; background: none; overflow: clip; }
  .ft-teeth-bottom { display: flex; gap: 1.11cqw; padding: 0; height: 100%; }
  .ft-teeth-bottom li, .ft-teeth-bottom li:nth-child(n+7) { display: block; flex: none; width: 13.33cqw; height: 100%; border-radius: 5cqw 5cqw 0 0; background: linear-gradient(180deg, var(--c-white) 0 33%, rgba(255, 255, 255, 0) 85%); }
  .ft-teeth-bottom li:nth-child(n+8) { display: none; }
  .ft-band { display: block; z-index: 2; height: 8.125cqw; background-color: transparent; background-image: radial-gradient(57.3% 14.06cqw at 50% -6.87cqw, transparent 0 calc(100% - 1.5px), var(--c-band-sp) 100%); }
}
/* 〜399: 採用のボタンは幅 70%（344 で 185）に「見学申し込み」18px が 1 行で入るよう左右と丸の間を詰める（以前は 2 行に折れていた） */
@media (max-width: 399px) {
  .ft-tongue-recruit .btn-circle { padding: 0 12px 0 20px; gap: 8px; }
}
/* 600〜1079（現行 673・841 実測。口の絵は幅に比例、中身は px 固定で 2 幅とも同じ位置）:
   医院: ロゴ 390×54 を T＋160、最初の点線 T＋234、メニューは左右 100（行 60.2・字は SP と同じ）。
     最後の点線の 32 下に「RECRUIT（Roboto 48px 字間 8%・行 81.6）＋ 採用サイトへ（280×80・18px）」を横並び・中央 → 25 → Copyright（11px 字間 8%）→ 180 → ページ下端。
   採用: ロゴ 390×54 を T＋120、最初の点線 T＋194、左右 100。メニューは医院と同じ 1 列の開閉（2026-09-28）。最後の点線の 65 下にボタン 3 つを横並び（中央）→ 200 → ページ下端。
     Copyright は縦書きで画面左 12・下端はページ下端から 139（下の歯の上。ボタンと重ならない幅なので現行どおり縦） */
@media (min-width: 600px) and (max-width: 1079px) {
  /* 最後の中身 → 口の上端（現行 841: 症状ページ 64・採用の ENTRY 帯 80）。症状ページ 83 本と採用の data/faq で合わせた値。ページごとの差はページ側の下余白 */
  .ft { margin-top: 14px; }
  .ft-recruit { margin-top: 24px; }
  .ft-logo { top: 160px; width: 390px; }
  .ft-recruit .ft-logo { top: 120px; width: 390px; }
  .ft-nav { margin-top: calc(234px - 85.641%); padding: 0 100px; }
  .ft-main .ft-tongue { flex-direction: row; justify-content: center; align-items: center; margin-top: 32px; padding: 0 20px; gap: 3px; }   /* 現行 673・841: RECRUIT の箱の右端 → ボタン 3 */
  .ft-main .ft-recruit-en { font-size: 48px; letter-spacing: 0.08em; text-indent: 0; line-height: 1.7; }
  .ft-main .ft-tongue .btn-lg { width: 280px; min-height: 80px; padding: 0 44px 0 45px; font-size: 18px; letter-spacing: 0.06em; }
  .ft-main .ft-tongue .btn-arrow { right: 25px; width: 26px; height: 26px; margin-top: -13px; }   /* 山形 8×13 の右端がボタン右端から 35 */
  .ft-main .ft-copy { padding: 24px 20px 180px; font-size: 11px; line-height: 1.7; letter-spacing: 0.08em; }   /* 現行: RECRUIT の行の下端 → Copyright 24 */
  .ft-recruit .ft-nav { margin-top: calc(120px + 54px + 20px - 85.641%); }   /* 採用: ロゴ（T＋120・高さ 54）の下端から 20 下に最初の点線（医院もロゴ下端 → 点線 20）。左右 100・行は医院と同じ */
  .ft-recruit .ft-tongue { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-bottom: 200px; padding: 0 40px; gap: 16px; }
  .ft-tongue-recruit .btn-circle { width: auto; gap: 16px; }   /* 現行 841: 募集要項 160・見学申し込み 198・エントリー 179 幅 */
  /* right: auto … 〜1079 の right: 12px が残ると、left: 12px と合わせて箱が左右いっぱいに伸び、透明な箱が 3 つのボタン（募集要項・見学申し込み・エントリー）の上に被って押せなかった
     （2026-10-01 医院の修正リスト No.78「一番下のボタンが死んでいる」。iPad 縦など 600〜1079）。文字は飾りなので押す操作も通す（pointer-events: none） */
  .ft-recruit .ft-copy { position: absolute; z-index: 1; left: 12px; right: auto; bottom: 139px; height: auto; padding: 0; writing-mode: vertical-rl; white-space: nowrap; font-size: 11px; line-height: 1.4; letter-spacing: 0; pointer-events: none; }
}
/* ---------- 医院フッターの粒（2026-09-28 ユーザー「医院サイトのフッターが現行と違ってる」。採用のフッターは対象外なので .ft-main だけ） ----------
   現行 STUDIO の口の絵は、面ごとに「黒で不透明度だけが画素ごとにばらつく雑音の PNG」を mix-blend-mode: overlay で重ね、その上をクリームの透明→不透明のグラデで下へ消している
   （1.5MB の PNG を base64 で内包した SVG を幅別に 3 枚）。こちらは同じ性質の 128px のタイル（assets/img/ft-grain.png・8.5KB。黒・不透明度 0.11〜0.89 の 16 段・平均 0.5・ばらつき 0.24。
   iPhone（DPR3）で口の中を撮ると 青の揺れ 現行 1.91／こちら 2.09・隣の画素との相関 0.77／0.72。
   白色雑音なので継ぎ目は出ない）を background-blend-mode: overlay で敷く。overlay は明るい面ほど効きが弱い（暗くなる量 = 不透明度 ×（1 − 下の色））ので、白い歯には粒が出ない。
   粒の細かさは現行どおり雑音 1 画素 = 絵の 0.8px（〜911 は口の絵が幅に比例するので 0.8 × W/390、912〜1079 は 0.8 × 1.1W/1366、1080〜 は 0.8px）。
   塗りの順（上から）: クリームへ消すグラデ → 粒 → 地のグラデ。位置は現行の SVG の値（390 幅の絵で 地 #F1EAE5 → #F9F6F4 が 0〜102.7、消すのが 128.1〜177.9。舌は 地 175〜238.7・消す 254.5〜285.4）。
   以前の --g-mouth-sp・--g-tongue-sp は現行の粒を平均した色だったので、粒を敷くと平均の色は同じまま（390・DPR3 で実測して確認）。
   〜911 の帯（下唇）: 現行は #EEAD75 に粒を不透明度 0.7 の overlay（雑音 1 画素 = 0.2 × W/390px。平均すると #E8904C）。現行の粒は画面の画素より細かく、
     ブラウザが縮めるときに均されて柔らかく見える。こちらのタイルは縮めずに同じ見え方になるよう、あらかじめぼかした雑音（assets/img/ft-grain-band.png・5.8KB。
     作り方と合わせた値は tools/dev/make-ft-grain-band.py）を 0.2 × W/390px（タイル 6.564cqw）で敷く。iPhone（DPR3）の実測で 青の揺れ 6.24／6.29・隣の画素との相関 0.52／0.56（現行／こちら）。
     以前のタイル（ぼかさない雑音を 2 倍の大きさで）は揺れ 11.2・相関 0.29 で、帯の粒が粗く斑に見えた。
   口の縁の切り方（全幅共通。2026-09-28）: 粒を overlay で重ねた面を「角丸＋overflow: clip」で切ると、WebKit（iPhone・Mac の Safari）は縁の半透明の画素で黒い粒を
     そのまま描き、口の輪郭に細い灰色の線が出る（医院の「変なライン」と同じ見え方。角丸の箱で縁の最小の明るさ 187／clip-path 222＝線なし。Chromium はどちらも 222）。
     なので粒を敷いた面は角丸にせず clip-path: inset(… round …) で切る（〜911 の .ft-top、912〜1079 の .ft-mouth::before、1080〜 の .ft-mouth）。

   〜911 の医院フッターの形（2026-09-28 現行の絵 s-390x334_888ad459.svg・s-390x64_be82ec43.svg の座標をそのまま。W＝画面幅、絵の 1px ＝ W/390）:
     口: 上辺は半楕円（横半径 195・縦半径 125.25 ＝ 高さ 334 の 37.5%）。以前の 35.9% は現行の輪郭線（別の箱）を測った値だった。
     上の歯 8 本: 左端 −21 から 幅 50/50/51/55/54/51/50/50・隙間 3（計 432 を中央に置いて左右に 21 はみ出す）、下端 73/65/59/51/51/59/65/73、下の角 r20。
       両端の 2 本は上（絵の −16）が透明で下（73）が白。口の弧で切れて、左右の縁に歯の先だけが少し見える（以前は 6 本で両端が無かった）。
     舌: 丘 2 つ（中心 x 134.46・255.54／y 254.43、半径 134.46 × 79.43。上端 175・谷 183.5）。以前は半径 × 67.7 で上端が 2px 低く、丘が平たかった。
     下の歯 7 本: 左端 0 から 幅 54/54/53/53/53/53/54・隙間 3・高さ 63・上の角 r20、白（上から 17.2 まで）→ クリーム（59）。帯は絵の高さ 64（16.41cqw）の下半分 */
@media (max-width: 911px) {
  .ft-main .ft-top { border-radius: 0; clip-path: inset(0 round 50% 50% 50% 50% / 37.5% 37.5% 19.9% 19.9%);
    background-image: linear-gradient(180deg, rgba(249, 246, 244, 0) 38.37%, var(--c-cream) 53.25%), url("/assets/img/ft-grain.4dbc09dabf.png"), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 30.75%);
    background-size: auto, 26.26cqw 26.26cqw, auto; background-blend-mode: normal, overlay, normal; }
  /* 舌（.ft-top の上から 52.4%＝絵の 175 から下の箱・高さ 159）: 地 0〜40.09%（175〜238.7）、消す 50.01%〜69.41%（254.5〜285.4）。丘は箱の幅の 34.48%・高さの 49.96% */
  .ft-main .ft-top::after { top: 52.4%;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) 50.01%, var(--c-cream) 69.41%), url("/assets/img/ft-grain.4dbc09dabf.png") 0 0 / 26.26cqw 26.26cqw, linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 40.09%);
    background-blend-mode: normal, overlay, normal;
    -webkit-mask-image: radial-gradient(34.48% 49.96% at 34.48% 49.96%, #000 99.5%, transparent 100%), radial-gradient(34.48% 49.96% at 65.52% 49.96%, #000 99.5%, transparent 100%);
    mask-image: radial-gradient(34.48% 49.96% at 34.48% 49.96%, #000 99.5%, transparent 100%), radial-gradient(34.48% 49.96% at 65.52% 49.96%, #000 99.5%, transparent 100%); }
  .ft-main .ft-teeth-top { gap: 0.769cqw; }
  .ft-main .ft-teeth-top li, .ft-main .ft-teeth-top li:nth-child(n+7) { display: block; width: 12.821cqw; height: 16.667cqw; border-radius: 0 0 5.128cqw 5.128cqw; }
  .ft-main .ft-teeth-top li:nth-child(1), .ft-main .ft-teeth-top li:nth-child(8) { height: 18.718cqw; background: linear-gradient(180deg, rgba(249, 246, 244, 0) -21.92%, var(--c-white) 100%); }
  .ft-main .ft-teeth-top li:nth-child(3), .ft-main .ft-teeth-top li:nth-child(6) { width: 13.077cqw; height: 15.128cqw; }
  .ft-main .ft-teeth-top li:nth-child(4) { width: 14.103cqw; height: 13.077cqw; }
  .ft-main .ft-teeth-top li:nth-child(5) { width: 13.846cqw; height: 13.077cqw; }
  /* 行の字は点線の左端から 8（現行 344〜841） */
  .ft-main .ft-cols .ft-acc { padding-left: 8px; line-height: 1.7; }   /* 行 27.2 は現行と同じ（1.6 だと字が 0.2 上がる） */
  .ft-main .ft-leaves a { padding-left: 8px; }
  /* 開いた印は「＋」を 45 度回した「×」（現行 390・841・iPhone を開いて照合 2026-09-28: 0.3s で回る。以前は「−」に差し替えていた）。ドロワーの見出しと同じ作り。
     回すのは rotate（hover.css のホバーの transform: scale と打ち消し合わない）。JS が無いときは aria-expanded が false のままで、印は noscript が隠す */
  .ft-main .ft-cols .ft-acc[aria-expanded] > .i-minus { display: none; }
  .ft-main .ft-cols .ft-acc[aria-expanded="true"] > .i-plus { display: block; rotate: 45deg; }
  .ft-main .ft-cols .ft-acc > .i-plus { transition: var(--t-hover, transform .3s), rotate .3s cubic-bezier(.4, .4, 0, 1); }
  /* 開いた子の項目（現行 390・841 を開いて実測 2026-09-28）: 字 13px・字間 0・行 23.4（1.8）・行の間 14（字の上端どうし 37.4）。
     点 5×5 は点線の左端から 15、点 → 字 8（字は点線の左端 +28）。親の行の下端 → 最初の子の行 7.8、最後の子の行の下端 → 次の点線 20.2（3 項目で +126.2。字の上端で 最後の子 → 次の親 59.4）。
     以前は 14px・字間 0.02em・行 1.7・間隔 44・点 6×6 で、3 項目で +144（両方開くと 49 長かった）。
     当たり判定 44 は 1080〜 と同じく padding と負の margin で保つ（隣どうしは 6.6 重なる）。a を flex（塊）にするのは li の行の高さ（strut）を持ち込まないため */
  .ft-main .ft-sub { display: grid; gap: 14px; padding: 7.8px 0 20.2px 15px; }
  .ft-main .ft-sub[hidden] { display: none; }
  .ft-main .ft-sub a { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: var(--tap); padding-block: 10.3px; margin-block: -10.3px; font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .ft-main .ft-sub a::before { width: 5px; height: 5px; }
  .ft-main .ft-bottom { height: 16.41cqw; }
  .ft-main .ft-teeth-bottom { gap: 0.769cqw; }
  .ft-main .ft-teeth-bottom li, .ft-main .ft-teeth-bottom li:nth-child(n+7) { width: 13.846cqw; height: 16.154cqw; border-radius: 5.128cqw 5.128cqw 0 0; background: linear-gradient(180deg, var(--c-white) 27.2%, var(--c-cream) 93.7%); }
  .ft-main .ft-teeth-bottom li:nth-child(n+3):nth-child(-n+6) { width: 13.59cqw; }
  .ft-main .ft-band { background: url("/assets/img/ft-grain-band.229ed546a3.png") 0 0 / 6.564cqw 6.564cqw, var(--c-peach); background-blend-mode: overlay;
    -webkit-mask-image: radial-gradient(57.3% 14.06cqw at 50% -6.87cqw, transparent 0 calc(100% - 1.5px), #000 100%);
    mask-image: radial-gradient(57.3% 14.06cqw at 50% -6.87cqw, transparent 0 calc(100% - 1.5px), #000 100%); }
}
@media (prefers-reduced-motion: reduce) { .ft-main .ft-cols .ft-acc > .i-plus { transition: none; } }   /* 開閉の印は回さず、すぐ「×」にする */
/* 帯の粒の DPR2 以下用（Android の多く・iPad）: DPR3 用のタイルはあらかじめぼかしてあるので、DPR2 では現行より粒が約 3 割弱く粗く見えた
   （390 の帯の左下で 青の揺れ 現行 7.38／こちら 4.81・隣の画素との相関 0.13／0.38）。ぼかしを弱めてばらつきを上げたタイル（tools/dev/make-ft-grain-band.py の σ 0.4・0.13）で 7.0／0.15 前後 */
@media (max-width: 911px) and (max-resolution: 2.5dppx), (max-width: 911px) and (-webkit-max-device-pixel-ratio: 2.5) {
  .ft-main .ft-band { background-image: url("/assets/img/ft-grain-band-2x.041fd95021.png"), none; }
}
/* 〜599 の医院フッター（現行 344・390 の実測。T＝口の上端）: ロゴの絵 T＋104・最初の点線 T＋217・点線の左右 24。
   最後の点線 → 20 → RECRUIT（Roboto 36px 字間 8%・行 61.2）→ 11.8 → 採用サイトへ（238×60）→ 20.1 → Copyright（11px 字間 8%・行 18.7）→ 104.2 → ページ下端。
   以前は点線が 2 下・左右 25、RECRUIT の字間 3%（字の幅が 11 狭い）、Copyright の字間 6%・行 16.5 だった */
@media (max-width: 599px) {
  .ft-main .ft-logo { top: 102.5px; }   /* 箱は当たり判定 44 で、高さ 41 の絵はその中で 1.5 下がる */
  .ft-main .ft-nav { margin-top: calc(217px - 85.641%); padding: 0 24px; }
  .ft-main .ft-tongue { margin-top: 20px; gap: 11.8px; }
  .ft-main .ft-recruit-en { letter-spacing: 0.08em; text-indent: 0; line-height: 1.7; }
  .ft-main .ft-copy { padding: 20.1px 16px 104.2px; line-height: 1.7; letter-spacing: 0.08em; }   /* 左右 16: 344 でも 1 行（字の幅 309） */
}
/* 912〜1079 の医院フッター（2026-09-28。現行は 912 から PC の口の絵を幅に比例させた 1 画面の型に変わる。以前はここも 〜911 と同じ 1 列の開閉で、高さ 1169・歯が大きかった）:
   現行 912/968/1024/1079 の実測。高さ 550。口の絵（PC の 1366×697）は幅 1.1W に縮めて縦横とも中央（絵の中心がフッターの上から 275）。
   --u = 1.1W/1366（= 0.080527cqw）が絵の 1px。絵の上端 = 275 − 348.5u（912 で 19、1079 で −28。はみ出しは .ft で切る）。
   口: 幅 1218u・上辺は半楕円（縦半径 398.75u）。上の歯 8 本（PC と同じ寸法 × u、両端の 2 本は上が透明で下が白）は口の弧で切る。舌は絵の y425u から、下の歯 8 本は y593u から。
   帯: 高さ 8.2cqw（PC と同じ 1366×112 の絵を幅に合わせたもの。粒なし）。
   中身は px 固定で、どの幅でも同じ位置: ロゴ 390×54 を y110。メニュー 5 列（文字の上端 y184・列の間 32。親 16px、子 13px・行 31.4・点は列の左から 3・点と字の間 8。
   「症状から探す」の列だけ幅 194 で「入れ歯や噛み合わせについて／お悩みの方」と折り返す）→ 16 → RECRUIT（64px・行 108.8）と採用サイトへ（280×80）を 40 空けて横並び → Copyright（横書き・中央）→ 下端まで 44.4。
   当たり判定 44 は上下の padding と負の margin で作る（2 行に折り返した項目でも次の行に食い込まない） */
@media (min-width: 912px) and (max-width: 1079px) {
  .ft-main { --u: 0.080527cqw; min-height: 550px; overflow: clip; isolation: isolate; }
  .ft-main .ft-mouth { z-index: auto; }
  .ft-main .ft-mouth::before { content: ""; position: absolute; z-index: 0; left: 50%; top: calc(275px - 348.5 * var(--u)); width: calc(1218 * var(--u)); height: calc(697 * var(--u)); transform: translateX(-50%); pointer-events: none;
    clip-path: inset(0 round 50% 50% 0 0 / calc(398.75 * var(--u)) calc(398.75 * var(--u)) 0 0);   /* 角丸にしない（WebKit で縁に線。上の「口の縁の切り方」） */
    background-image: linear-gradient(180deg, rgba(249, 246, 244, 0) calc(408 * var(--u)), var(--c-cream) calc(566 * var(--u))), url("/assets/img/ft-grain.4dbc09dabf.png"), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) calc(327 * var(--u)));
    background-size: auto, calc(102.4 * var(--u)) calc(102.4 * var(--u)), auto; background-blend-mode: normal, overlay, normal; }
  .ft-main .ft-mouth::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: calc(275px + 76.5 * var(--u)); height: calc(432 * var(--u)); pointer-events: none;
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) calc(216 * var(--u)), var(--c-cream) calc(300 * var(--u))), url("/assets/img/ft-grain.4dbc09dabf.png") 0 0 / calc(102.4 * var(--u)) calc(102.4 * var(--u)), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) calc(173 * var(--u)));
    background-blend-mode: normal, overlay, normal;
    -webkit-mask-image: radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% - 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%), radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% + 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%);
    mask-image: radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% - 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%), radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% + 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%); }
  .ft-main .ft-top { aspect-ratio: auto; height: 184px; border-radius: 0; background: none; overflow: visible; z-index: 2; }
  .ft-main .ft-top::after { content: none; }
  .ft-main .ft-teeth-top { position: absolute; inset: auto; top: calc(275px - 348.5 * var(--u)); left: 50%; width: calc(1218 * var(--u)); height: calc(184 * var(--u)); transform: translateX(-50%); z-index: 0;
    display: flex; justify-content: center; align-items: flex-start; gap: calc(6 * var(--u)); padding: 0;
    clip-path: ellipse(50% calc(398.75 * var(--u)) at 50% calc(398.75 * var(--u))); }
  .ft-main .ft-teeth-top li, .ft-main .ft-teeth-top li:nth-child(n+7) { display: block; flex: none; width: calc(138 * var(--u)); height: calc(184 * var(--u)); margin: 0; border-radius: 0 0 calc(50 * var(--u)) calc(50 * var(--u)); background: var(--c-white); }
  .ft-main .ft-teeth-top li:nth-child(1), .ft-main .ft-teeth-top li:nth-child(8) { background: linear-gradient(180deg, rgba(249, 246, 244, 0) -16.3%, var(--c-white) 100%); }
  .ft-main .ft-teeth-top li:nth-child(2), .ft-main .ft-teeth-top li:nth-child(7) { height: calc(166 * var(--u)); }
  .ft-main .ft-teeth-top li:nth-child(3), .ft-main .ft-teeth-top li:nth-child(6) { width: calc(139 * var(--u)); height: calc(146 * var(--u)); }
  .ft-main .ft-teeth-top li:nth-child(4), .ft-main .ft-teeth-top li:nth-child(5) { width: calc(147 * var(--u)); height: calc(126 * var(--u)); }
  .ft-main .ft-logo { top: 110px; width: 390px; }
  .ft-main .ft-nav { z-index: 2; margin-top: 0; padding: 0 20px; }
  .ft-main .ft-cols { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 0 32px; border-top: 0; }
  .ft-main .ft-col, .ft-main .ft-leaves li { border-bottom: 0; }
  /* 「症状から探す」は見出し（→ /case）だけ（2026-09-29: 子が 14 のまとまりになり、この幅・高さ 550 の 1 画面の型には入らない。
     現行のこの幅は旧 4 見出しを出しているが、旧 4 見出しは今の /case の見出しと合わないので出さない。〜911 の開閉と 1080〜 には 14 件とも出る） */
  .ft-main .ft-cols .ft-col-case .ft-sub, .ft-main .ft-cols .ft-col-case .ft-sub[hidden] { display: none; }
  .ft-main .ft-col.has-sub .ft-parent { display: flex; }
  .ft-main .ft-cols .ft-acc, .ft-main .ft-sub-top { display: none; }
  .ft-main .ft-parent, .ft-main .ft-leaves a { display: flex; width: max-content; min-height: var(--tap); padding: 8.4px 0; margin-block: -8.4px; font-size: 16px; line-height: 1.7; letter-spacing: 0; }
  .ft-main .ft-leaves a { letter-spacing: 0.06em; }
  .ft-main .ft-leaves { gap: 14px; }
  .ft-main .ft-leaves a[data-small] { min-height: var(--tap); padding: 10.95px 0; margin-block: -10.95px; font-size: 13px; letter-spacing: 0; }
  .ft-main .ft-cols .ft-sub, .ft-main .ft-cols .ft-sub[hidden] { display: grid; gap: 8px; margin-top: 10px; padding: 0 0 0 3px; }
  .ft-main .ft-sub a { display: flex; width: fit-content; align-items: flex-start; gap: 8px; min-height: var(--tap); padding: 10.3px 0; margin-block: -10.3px; font-size: 13px; line-height: 1.8; letter-spacing: 0; }
  .ft-main .ft-sub a::before { width: 5px; height: 5px; margin-top: 9.2px; }
  .ft-main .ft-tongue { z-index: 2; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; margin-top: 16px; padding: 0 20px; gap: 0 40px; }
  .ft-main .ft-recruit-en { font-size: 64px; letter-spacing: 0.08em; text-indent: 0; line-height: 1.7; }
  .ft-main .ft-copy { z-index: 3; padding: 0 20px 44.4px; }
  .ft-main .ft-bottom { z-index: 0; left: 50%; right: auto; top: calc(275px + 244.5 * var(--u)); bottom: 0; width: calc(1126 * var(--u)); height: auto; transform: translateX(-50%); }
  .ft-main .ft-teeth-bottom { position: absolute; left: 0; right: 0; top: 0; justify-content: center; align-items: flex-start; gap: calc(6 * var(--u)); height: auto; }
  .ft-main .ft-teeth-bottom li, .ft-main .ft-teeth-bottom li:nth-child(n+7), .ft-main .ft-teeth-bottom li:nth-child(n+8) { display: block; flex: none; width: calc(136 * var(--u)); height: calc(158 * var(--u)); border-radius: calc(50 * var(--u)) calc(50 * var(--u)) 0 0; background: linear-gradient(180deg, var(--c-white) 0, var(--c-cream) calc(39.5 * var(--u))); }
  .ft-main .ft-teeth-bottom li:nth-child(n+3):nth-child(-n+6) { width: calc(135 * var(--u)); }
  .ft-main .ft-band { z-index: 1; height: 8.2cqw; background: radial-gradient(56.7% 13.69cqw at 50% -6.44cqw, transparent 0 calc(100% - 1.5px), var(--c-peach) 100%); }
}
/* 1080〜: 口の弧の中に全部。参照 pc1280/1440/1920 実測（3 幅とも縦位置は同じ。口の幅だけ 1140 → 1220（採用 1268））:
   口は幅 1220・上辺が半楕円（rx 610 / ry 400）・左右は垂直・下端は画面下端まで。ピーチの帯（全幅・端で高さ 8.1vw）は口の「前」に載り、
   上辺は中央で下がる楕円弧（画面幅の 50%×7.2vw の透明な切り欠き）。下の歯 8 本（124×104・間隔 20）は帯の弧に沈む。
   上の歯 6 本（140×130・間隔 8）は弧に沿って外側ほど 20px ずつ下がる（下端 126/146/166）。ロゴ 390×54 は y174、ナビ親の中心 y270、RECRUIT 行の中心 y520、下の歯 y594〜、全高 ≈700。
   .ft の上に白い面は敷かない（アクセス欄との間に白い帯が出る） */
@media (min-width: 1080px) {
  .ft { margin-top: 64px; padding-bottom: 0; --ft-w: 1140px; --ft-band-h: 8.125vw; --ft-teeth-h: 104px; }   /* 参照: 最終セクションの下端から口の上端まで 65（about）〜100（トップ）。ページ側の section 余白と足して見る */
  .ft-recruit { --ft-w: 1200px; }
  .ft-mouth { width: min(100%, var(--ft-w)); margin: 0 auto; padding-bottom: calc(var(--ft-teeth-h) + 34px); min-height: 700px; overflow: clip; border-radius: 50% 50% 0 0 / 400px 400px 0 0;
    background-image: radial-gradient(300px 314px at 28.7% calc(100% + 56px), var(--c-mouth-3) 0%, var(--c-tongue) 60%, var(--c-tongue-2) 99%, transparent 100%),
      radial-gradient(300px 314px at 71.3% calc(100% + 56px), var(--c-mouth-3) 0%, var(--c-tongue) 60%, var(--c-tongue-2) 99%, transparent 100%),
      linear-gradient(180deg, var(--c-mouth-1) 0%, var(--c-mouth-2) 35%, var(--c-mouth-3) 60%, var(--c-mouth-3) 100%); }
  .ft-top { overflow: visible; }
  /* 上の歯: 6 本。弧に沿って外側ほど下がる（中央 0 / ±1 20 / ±2 40）。上端は口の弧で切れる */
  .ft-teeth-top { display: flex; justify-content: center; align-items: flex-start; gap: 8px; padding: 0; height: 170px; }
  .ft-teeth-top li { --tooth-h: 130px; width: 140px; flex: none; margin-top: 40px; }
  .ft-teeth-top li:nth-child(2), .ft-teeth-top li:nth-child(5) { margin-top: 20px; }
  .ft-teeth-top li:nth-child(3), .ft-teeth-top li:nth-child(4) { margin-top: 0; }
  .ft-logo { margin: 4px auto 0; }
  .ft-nav { padding: 20px 40px 0; }
  .ft-cols { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px clamp(32px, 4vw, 56px); }   /* 1080 で 5 列（医院）／6 列（採用）が 1 行に収まる隙間 */
  .ft-sub[hidden] { display: block; }   /* 子の ul は SP の開閉用に hidden 付きで出る。PC では常に見せる（下の Figma ブロックで grid） */
  .ft-tongue { margin-top: 40px; padding: 0 20px; min-height: 80px; }
  .ft-recruit-en { font-size: 60px; letter-spacing: 0.03em; text-indent: 0.03em; }   /* 参照: 高さ 45（cap）・幅 276 */
  .ft-copy { position: absolute; left: 20px; top: 185px; z-index: 3; width: auto; padding: 0; font-size: 11px; letter-spacing: 0.02em; writing-mode: vertical-rl; line-height: 1.2; }
  /* 下の歯: 口の下端に 8 本。上が白く下へ薄れ、帯の弧に沈む */
  .ft-bottom { position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%); width: min(100%, var(--ft-w)); height: var(--ft-teeth-h); overflow: clip; border-radius: 0; background: none; padding: 0; }   /* 歯 8 本の列（1132）は 1080〜1131 で口より広いので、装飾として左右均等に切る（横スクロールを出さない） */
  .ft-teeth-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 20px; padding: 0; }
  .ft-teeth-bottom li, .ft-teeth-bottom li:nth-child(n+7) { display: block; --tooth-h: var(--ft-teeth-h); width: 124px; flex: none; background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 12%, rgba(255, 255, 255, 0) 75%); }
  /* ピーチの帯: 口の前。上辺は画面幅より大きい楕円の下側の弧（切り欠きは透明にして口の中を見せる。クリームで塗ると口の中が消える）。
     参照 1280/1440/1920 を実測して式を合わせた（3 幅とも誤差 1px）: 楕円 rx 57.3vw × ry 14.06vw、最下点はページ下端から 0.94vw、画面端での帯の高さ 8.125vw。
     rx を半幅（50%）にすると画面端で弧が垂直に立ち「角」ができる → 半幅より大きくして端でも緩い傾き（約 24°）にする */
  .ft-band { display: block; z-index: 2; height: var(--ft-band-h); background-color: transparent; background-image: radial-gradient(57.3% 14.06vw at 50% -6.87vw, transparent 0 calc(100% - 1.5px), var(--c-peach) 100%); }
}
/* 1280〜: ナビ列の隙間を参照（≈75）に寄せる。予算 1140−80 = 1060 ≥ 5 列 ≈780 ＋ 4×56 */
@media (min-width: 1280px) {
  .ft-cols { gap: 16px 56px; }
  .ft-recruit .ft-cols { gap: 16px 48px; }
}
/* 1440〜: 口の幅 1220（採用 1268）。ナビの隙間 医院 72 / 採用 60（参照 1920: 列の左端 431/553/849/1171/1364） */
@media (min-width: 1440px) {
  .ft { --ft-w: 1220px; }
  .ft-recruit { --ft-w: 1268px; }
  .ft-cols { gap: 16px 72px; }
  .ft-recruit .ft-cols { gap: 16px 60px; }
}
/* ---------- Figma 準拠のフッター（2026-09-25。上の実測値より後勝ち） ----------
   PC: 医院 pc/top の footer 909:18510（部品 909:16605・1366×697）／採用 Frame 161 72:1058（1440×686。同じ口の絵を下 11 だけ切ったもの）。
   口: 幅 1218・上辺は半楕円（縦半径 399）・その下は垂直。塗りは #F1EAE5 → #F9F6F4（上から 327 で地と同色）。Figma の口の絵は画面中央から 11 左に寄っているが、中身（ナビ・ロゴ）は中央なので口も中央に置く。
   上の歯 8 本（幅 138/138/139/147/147/139/138/138・間 6・下端 184/166/146/126/…・下の角丸 50。両端の 2 本は下へ透明に）。
   舌: 横長の楕円 2 つ（732×432、中心は画面中央 ±164.7・上端 y425）、塗り #F1EAE5 → 地（上から 173）。
   ロゴ 390×54: 医院 y165／採用 y160。ナビ（文字の上端）: 医院 y248／採用 y254。
   医院のナビ: 5 列・列の間 72。親 16px 字間 0・オレンジ、子 13px/1.8 字間 0 #574D45（点 5px ピーチ・間 6）、親→子 10・子の行 31、子なし項目の行 41（最後の列 37）、プライバシーポリシー 12px。
   採用のナビ: 6 列・列の間 56。親 16px 字間 6%、子 13px/1.8 字間 6%（点 5px・間 8）、親→子 24・子の行 39。最後の列「医院サイト ↗（14px・間 4）」→ 24 →「プライバシーポリシー」13px。
   医院: RECRUIT（Roboto 64px 字間 8%・行 109）＋ 41 ＋「採用サイトへ」グラデ 280×79。行の上端 y457（ボタンの中心 y511.5）。
   採用: 3 ボタン（募集要項・見学申し込み＝白／エントリー＝オレンジ。高さ 56・左 24 右 16・丸 32・間 24）を y470。
   Copyright: Roboto 11px 字間 8%・縦書き・画面左 34・上端 y242（採用 y193）。
   下の歯 8 本（136×158・間 6・上端 y593・上の角丸 50・白 → 40px で地）。ピーチの帯（端で 8.2vw・中央 0.95vw。楕円 rx 56.7%・ry 13.69vw・中心は帯の上端から −6.44vw）。
   （Figma SP/top のフッター 556:4948（2 列の点付きメニュー）は 2026-09-26 に使うのをやめた。〜1079 は現行 SP の形。上の 〜1079 ブロック） */
@media (min-width: 1080px) {
  .ft, .ft-recruit { --ft-w: min(1218px, 100%); height: 697px; }
  .ft-recruit { height: 686px; }
  /* 口の面（弧）は中身を持たない ::before に描いて、その ::before だけを clip-path で切る（2026-09-29 医院指摘「ページを戻ったりしたときにフッターの画像が崩れる」）。
     以前は口の箱そのもの（中に歯・ロゴ・メニュー・ボタン）を角丸／clip-path で切っていた。中の歯が噛む動き（translate）などで別の層に分かれると、
     口の箱の角丸の切り抜きが合成の段階（GPU）で掛かり、戻る・進むのあとに弧の途中から下が四角いまま（弧で切られずに）描かれることがあった（医院の画面の「口の中の四角い面」）。
     ::before は子を持たず動かないので、切り抜きは常に描く段階で掛かる。口の箱は四角の overflow: clip だけ（1080〜1131 で歯の列が口より広いぶんを切る）。
     上の歯の列は口と同じ楕円（横半径 50%・縦半径 399）で別に切る（.ft-teeth-top の clip-path） */
  .ft-mouth { position: relative; height: 100%; min-height: 0; padding-bottom: 0; border-radius: 0; background: none; overflow: clip; }
  .ft-mouth::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; clip-path: inset(0 round 50% 50% 0 0 / 399px 399px 0 0);
    background-image: linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 327px); }
  .ft-mouth::after { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: 425px; height: 432px; pointer-events: none;
    background: linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 173px);
    -webkit-mask-image: radial-gradient(366px 216px at calc(50% - 164.7px) 216px, #000 99.5%, transparent 100%), radial-gradient(366px 216px at calc(50% + 164.7px) 216px, #000 99.5%, transparent 100%);
    mask-image: radial-gradient(366px 216px at calc(50% - 164.7px) 216px, #000 99.5%, transparent 100%), radial-gradient(366px 216px at calc(50% + 164.7px) 216px, #000 99.5%, transparent 100%); }
  .ft-top { position: relative; z-index: 1; height: 219px; padding-top: 165px; }   /* ロゴの上余白は padding で（margin だと .ft-top の外へ相殺されて歯ごと下がる） */
  .ft-recruit .ft-top { height: 214px; padding-top: 160px; }
  .ft-teeth-top { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: flex; justify-content: center; align-items: flex-start; gap: 6px; padding: 0;
    clip-path: ellipse(50% 399px at 50% 399px); }   /* 列（8 本で 1166）は口の幅の中央。口の弧と同じ楕円で切る（両端の歯は弧で欠ける） */
  .ft-teeth-top li, .ft-teeth-top li:nth-child(n+7) { display: block; flex: none; width: 138px; height: 184px; margin: 0; border-radius: 0 0 50px 50px; background: var(--c-white); }
  .ft-teeth-top li:nth-child(n) { margin-top: 0; }   /* 旧実測の「外ほど margin-top で下げる」を打ち消す（Figma は上端を揃えて高さで下端を変える） */
  .ft-teeth-top li:nth-child(1), .ft-teeth-top li:nth-child(8) { background: linear-gradient(180deg, var(--c-white) 0%, rgba(255, 255, 255, 0) 100%); }
  .ft-teeth-top li:nth-child(2), .ft-teeth-top li:nth-child(7) { height: 166px; }
  .ft-teeth-top li:nth-child(3), .ft-teeth-top li:nth-child(6) { width: 139px; height: 146px; }
  .ft-teeth-top li:nth-child(4), .ft-teeth-top li:nth-child(5) { width: 147px; height: 126px; }
  .ft-logo { position: relative; margin: 0 auto; width: 390px; min-height: 54px; }
  .ft-nav { padding: 29px 20px 0; }
  .ft-recruit .ft-nav { padding-top: 40px; }
  .ft-cols, .ft-main .ft-cols, .ft-recruit .ft-cols { flex-wrap: nowrap; justify-content: center; align-items: flex-start; gap: 0 clamp(44px, 7.5vw - 30px, 72px); }
  .ft-recruit .ft-cols { gap: 0 clamp(28px, 7.5vw - 52px, 56px); }
  /* 当たり判定 44 は保ち、負のマージンで見た目の行（16px/1.7 = 27.2・13px/1.8 = 23.4・12px/1.8 = 21.6）に詰める */
  .ft-parent, .ft-leaves a, .ft-sub a { display: flex; width: max-content; min-height: var(--tap); line-height: 1.7; }
  .ft-parent, .ft-leaves a { font-size: 16px; letter-spacing: 0; margin-block: -8.4px; }
  .ft-sub, .ft-sub[hidden] { display: grid; gap: 7.6px; margin-top: 10px; }   /* 子の ul は SP の開閉用に hidden 付きで出る。PC は常に開いた列 */
  .ft-sub a { gap: 6px; font-size: 13px; line-height: 1.8; letter-spacing: 0; margin-block: -10.3px; }
  .ft-sub a::before { width: 5px; height: 5px; background: var(--c-peach); }
  .ft-leaves { gap: 14px; }
  .ft-main .ft-col-leaves:last-child .ft-leaves { gap: 10px; }
  .ft-leaves a[data-small] { font-size: 12px; line-height: 1.8; margin-block: -11.2px; }
  .ft-recruit .ft-parent, .ft-recruit .ft-leaves a { letter-spacing: 0.06em; }
  .ft-recruit .ft-sub { gap: 15.6px; margin-top: 24px; }
  .ft-recruit .ft-sub a { gap: 8px; letter-spacing: 0.06em; }
  .ft-recruit .ft-leaves { gap: 24px; }
  .ft-recruit .ft-leaves a[data-small] { font-size: 13px; letter-spacing: 0.06em; margin-block: -10.3px; }
  .ft-leaves a .i-ext, .ft-ext .i-ext { width: 14px; height: 14px; margin-left: 4px; align-self: center; }
  .ft-tongue { position: relative; z-index: 1; margin-top: 56px; padding: 0; min-height: 0; flex-wrap: nowrap; gap: 0 41px; }
  .ft-recruit-en { font-size: 64px; letter-spacing: 0.08em; text-indent: 0; line-height: 1.7; }
  .ft-main .ft-tongue .btn-lg { min-width: 280px; min-height: 79px; padding: 24px 60px; }
  .ft-recruit .ft-tongue { margin-top: 64px; gap: 24px; }
  .ft-tongue-recruit .btn-circle { min-height: 56px; padding: 12px 16px 12px 24px; gap: 16px; border: 0; font-size: 18px; letter-spacing: 0.06em; line-height: 1.7; }
  .ft-tongue-recruit .btn-outline { background: var(--c-white); }
  .ft-copy { left: 34px; top: 242px; font-size: 11px; letter-spacing: 0.08em; line-height: 1.7; }
  .ft-recruit .ft-copy { top: 193px; }
  .ft-bottom { height: 104px; width: var(--ft-w); }
  .ft-recruit .ft-bottom { height: 93px; }
  .ft-teeth-bottom { top: 0; bottom: auto; gap: 6px; align-items: flex-start; }
  .ft-teeth-bottom li, .ft-teeth-bottom li:nth-child(n+7) { width: 136px; height: 158px; border-radius: 50px 50px 0 0; background: linear-gradient(180deg, var(--c-white) 0, var(--c-cream) 39.5px); }
  .ft-teeth-bottom li:nth-child(n+3):nth-child(-n+6) { width: 135px; }
  .ft-band { height: 8.2vw; background-image: radial-gradient(56.7% 13.69vw at 50% -6.44vw, transparent 0 calc(100% - 1.5px), var(--c-peach) 100%); }
}
/* 医院の「症状から探す」の列（1080〜。2026-09-29 ユーザー指示「フッターに細かい症状の数を全部出さないとおかしい」）:
   子は /case の 14 のまとまり（shell.mjs が case.json から作る。.ft-col-case）。Figma の子の字（13px/1.8・点 5px・点と字の間 6・子の行 31）のまま
   3 列に組む（5・5・4。上から下へ読んで右の列へ。行の数は shell.mjs が --ft-sub-rows で渡す）。列の高さは 4 件のときより 1 行（31）高いだけ。
   口の絵（弧・上の歯・舌・下の歯・帯）は Figma の寸法のまま伸ばさない。収め方:
   - 横: 症状の列が 468 幅になり、Figma の 5 列（列の間 72）では 1143 幅で口の弧（文字の上端の高さで 1144）からはみ出す。
     「ホーム」（子なし・1 行）を「私たちについて」の上に積んで 4 列にし（ホームの下 14 は Figma の子なし項目の間隔）、列の間を幅に合わせる
     （1218〜 は 60、1080 で 20。弧と一番外の字の間は 1080〜1920 のどこでも 25 以上）。
   - 縦: 列が 31 高くなったぶん、メニュー → RECRUIT の行の間を Figma の 56 から 36 に詰める（RECRUIT の行は Figma より 12 下。ボタンの下端 → 下の歯 30）。 */
@media (min-width: 1080px) {
  .ft-main .ft-cols { display: grid; grid-template-columns: repeat(4, auto); grid-template-rows: auto 1fr; justify-content: center; align-items: start; gap: 14px clamp(20px, 30.8vw - 314px, 60px); }   /* 1fr: 2 行にまたがる列の余りを 2 行目だけで受ける（ホームの行を伸ばさない＝ホーム → 私たちについて は子なし項目の間隔 14 のまま） */
  .ft-main .ft-cols > .ft-col:nth-child(1) { grid-area: 1 / 1; }
  .ft-main .ft-cols > .ft-col:nth-child(2) { grid-area: 2 / 1; }
  .ft-main .ft-cols > .ft-col:nth-child(n+3) { grid-row: 1 / span 2; }
  .ft-main .ft-col-case .ft-sub, .ft-main .ft-col-case .ft-sub[hidden] { grid-auto-flow: column; grid-template-rows: repeat(var(--ft-sub-rows, 5), auto); column-gap: 16px; }
  .ft-main .ft-tongue { margin-top: 36px; }
  /* 舌の丘も RECRUIT の行と同じ 12 下げる（Figma の上端 425 → 437。舌と RECRUIT の位置関係は Figma のまま・下の歯 593 は動かさない）。
     425 のままだと 5 行目（「歯ぐきから血・ぐらぐら」「口内炎・舌・唇」）の行の下端が丘の頂上より 5 下に入り、字の下端が丘の縁に接していた（2026-09-29 照合） */
  .ft-main .ft-mouth::after { top: 437px; }
}
/* 〜1079 の医院フッターは Figma SP/top 556:4948（2 列の点付きメニュー・口 390×256）を使わない。現行 SP の形（上の 〜1079 ブロック）に全ページ揃える
   （2026-09-26 医院指摘「スマホのフッターデザインが現行サイトと違う」。以前はトップだけでなく全ページがこの 2 列版だった） */
@media (min-width: 1080px) { .ft .i-ext-sp { display: none; } }   /* 「採用情報」の別窓の印は 〜1079 だけ（Figma の pc/about の最新の画面にも「採用情報」は印なしで載っている。現行 PC には印がある） */
/* 1080〜 の医院フッターの粒（仕組みは上の「医院フッターの粒」）: 口 地 0〜327・消す 408〜566、舌（.ft-mouth::after の箱の上から）地 0〜173・消す 216〜300（現行 1366×697 の SVG の値）。
   両端の上の歯は現行どおり上が透明で下が白（以前は逆向きで、弧の外の上側だけ白く、口の中では見えていなかった）。
   口の面は角丸にせず clip-path で切る（WebKit で縁に線が出るため。上の「口の縁の切り方」）。面は口の箱ではなく中身の無い ::before に塗る（上の「Figma 準拠のフッター」の .ft-mouth::before の説明）。
   帯は粒なしの #EEAD75（Figma のサイトマップ版 909:17691・現行 PC とも単色） */
@media (min-width: 1080px) {
  .ft-main .ft-mouth::before {
    background-image: linear-gradient(180deg, rgba(249, 246, 244, 0) 408px, var(--c-cream) 566px), url("/assets/img/ft-grain.4dbc09dabf.png"), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 327px);
    background-size: auto, 102.4px 102.4px, auto; background-blend-mode: normal, overlay, normal; }
  .ft-main .ft-mouth::after { background: linear-gradient(180deg, rgba(249, 246, 244, 0) 216px, var(--c-cream) 300px), url("/assets/img/ft-grain.4dbc09dabf.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #F1EAE5 0, var(--c-cream) 173px);
    background-blend-mode: normal, overlay, normal; }
  .ft-main .ft-teeth-top li:nth-child(1), .ft-main .ft-teeth-top li:nth-child(8) { background: linear-gradient(180deg, rgba(249, 246, 244, 0) -16.3%, var(--c-white) 100%); }
}
/* ---------- 採用のフッター 1080〜 を現行の採用サイト（STUDIO プレビュー）に合わせる（2026-09-29 ユーザー「今のプレビューと見比べるとちょっとちっちゃくなってるし、
   色もちょっと違う気がする。なんで？エントリーとの距離も若干違うし、ちょっと調整して」。上の「Figma 準拠のフッター」より後勝ち） ----------
   現行 1920/1440/1280/1180/1100/1080 の /recruit・/about・/interviews を実測（口の絵は画像 1800×945 を 幅 min(1360, 画面幅) で表示。中の口は画像の幅の 0.9344）:
   - 口の絵: Figma（医院と同じ口 1218 幅）をそのまま 1.0434 倍した絵（弧の横半径 635.4・縦半径 416.3、上の歯・舌・下の歯とも同じ倍率で一致）。
     画面が 1360 より狭いと画面幅に比例して縮む。→ 絵の 1px を --u = min(1.0434px, 0.07672vw) にして、口・歯・舌を Figma の値 × --u で描く
     （以前は Figma の 1440 のフレームの値で、口 1218 固定＝1440〜 で 4% 小さく、1080〜1279 では逆に大きかった）。
   - 口の面と舌は医院と同じ粒（ざらつき）入り（現行の絵は医院の口と同じ粒の絵。以前は粒なしの平らなグラデで、明るく見えていた）。両端の上の歯は上が透明・下が白。
   - 口の上端 → ページ下端 697（1121〜）・600（1080〜1120。現行はここで中身を 48.5 上げた型に変わる）。以前は 686。
     中身（口の上端から）: ロゴ 163.5（1080〜1120 は 115）→ メニューの字の上端 257.5（209）→ 子の行 39.4 間隔 → ボタン 474.9（426.6）。Copyright は左 15・上 190・字間 0・行 1.4。
   - ボタン: 高さ 58.6（上下 14）・左 26・右 18・字と丸の間 16・丸 24。エントリーの塗りは #E56300（--c-orange。以前は Figma の PC ボタンの --c-orange-2 #E36200）。
   - メニューの列の間: 1121〜 は 56（ただし弧からはみ出さないよう 1121〜1180 は少し詰める）、1080〜1120 は 40。
   - エントリーの帯の下端 → 口の上端 80（全ページ。以前はトップ・先輩スタッフの声など 19 ページで 200＝帯の段の下余白 136 ＋ フッターの上 64。about だけ 80 だった） */
@media (min-width: 1080px) {
  .ft-recruit { --u: min(1.0434px, 0.07672vw); --ft-w: calc(1218 * var(--u)); height: 697px; }
  .ft-recruit .ft-mouth::before { clip-path: inset(0 round 50% 50% 0 0 / calc(399 * var(--u)) calc(399 * var(--u)) 0 0);
    background-image: linear-gradient(180deg, rgba(249, 246, 244, 0) calc(408 * var(--u)), var(--c-cream) calc(566 * var(--u))), url("/assets/img/ft-grain.4dbc09dabf.png"), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) calc(327 * var(--u)));
    background-size: auto, calc(102.4 * var(--u)) calc(102.4 * var(--u)), auto; background-blend-mode: normal, overlay, normal; }
  .ft-recruit .ft-mouth::after { top: calc(425 * var(--u)); height: calc(432 * var(--u));
    background: linear-gradient(180deg, rgba(249, 246, 244, 0) calc(216 * var(--u)), var(--c-cream) calc(300 * var(--u))), url("/assets/img/ft-grain.4dbc09dabf.png") 0 0 / calc(102.4 * var(--u)) calc(102.4 * var(--u)), linear-gradient(180deg, #F1EAE5 0, var(--c-cream) calc(173 * var(--u)));
    background-blend-mode: normal, overlay, normal;
    -webkit-mask-image: radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% - 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%), radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% + 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%);
    mask-image: radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% - 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%), radial-gradient(calc(366 * var(--u)) calc(216 * var(--u)) at calc(50% + 164.7 * var(--u)) calc(216 * var(--u)), #000 99.5%, transparent 100%); }
  .ft-recruit .ft-teeth-top { gap: calc(6 * var(--u)); clip-path: ellipse(50% calc(399 * var(--u)) at 50% calc(399 * var(--u))); }
  .ft-recruit .ft-teeth-top li, .ft-recruit .ft-teeth-top li:nth-child(n+7) { width: calc(138 * var(--u)); height: calc(184 * var(--u)); border-radius: 0 0 calc(50 * var(--u)) calc(50 * var(--u)); }
  .ft-recruit .ft-teeth-top li:nth-child(1), .ft-recruit .ft-teeth-top li:nth-child(8) { background: linear-gradient(180deg, rgba(249, 246, 244, 0) -16.3%, var(--c-white) 100%); }
  .ft-recruit .ft-teeth-top li:nth-child(2), .ft-recruit .ft-teeth-top li:nth-child(7) { height: calc(166 * var(--u)); }
  .ft-recruit .ft-teeth-top li:nth-child(3), .ft-recruit .ft-teeth-top li:nth-child(6) { width: calc(139 * var(--u)); height: calc(146 * var(--u)); }
  .ft-recruit .ft-teeth-top li:nth-child(4), .ft-recruit .ft-teeth-top li:nth-child(5) { width: calc(147 * var(--u)); height: calc(126 * var(--u)); }
  .ft-recruit .ft-bottom { height: calc(697px - 593 * var(--u)); }   /* 下の歯の上端 = 口の上端から 593 × --u */
  /* 2026-10-05 修正リスト No.78 の見直し: 1121〜1172 は下の歯の上端（口の上端から 593 × --u）がボタンの下端（533.5px）より上に来て、歯がボタンの下側を最大 23px 覆っていた
     （見た目も欠け、押しても歯が受ける）。口の箱が z-index 1 で層を作り、同じ z-index 1 で後ろにある .ft-bottom がボタンの手前に描かれていたため。
     医院フッター 912〜1079 と同じく口の箱の層を外し、ボタンの列を前に出す（今の STUDIO も歯の手前にボタン） */
  .ft-recruit .ft-mouth { z-index: auto; }
  .ft-recruit .ft-tongue { z-index: 2; }
  .ft-recruit .ft-teeth-bottom { gap: calc(6 * var(--u)); }
  .ft-recruit .ft-teeth-bottom li, .ft-recruit .ft-teeth-bottom li:nth-child(n+7) { width: calc(136 * var(--u)); height: calc(158 * var(--u)); border-radius: calc(50 * var(--u)) calc(50 * var(--u)) 0 0; background: linear-gradient(180deg, var(--c-white) 0, var(--c-cream) calc(39.5 * var(--u))); }
  .ft-recruit .ft-teeth-bottom li:nth-child(n+3):nth-child(-n+6) { width: calc(135 * var(--u)); }
  .ft-recruit .ft-top { height: 217.5px; padding-top: 163.5px; }
  .ft-recruit .ft-cols { gap: 0 clamp(40px, 11.86vw - 84px, 56px); }
  .ft-recruit .ft-sub { gap: 16px; }
  .ft-recruit .ft-leaves a[data-small] { line-height: 1.7; margin-block: -10.95px; }
  .ft-recruit .ft-copy { left: 15px; top: 190px; letter-spacing: 0; line-height: 1.4; }
  .ft-tongue-recruit .btn-circle { min-height: 58.6px; padding: 14px 18px 14px 26px; gap: 16px; }
  .ft-tongue-recruit .btn-circle .btn-ring { width: 24px; height: 24px; }
  .ft-tongue-recruit .btn-circle .btn-ring .icon { width: 16px; height: 16px; }
  .ft-tongue-recruit .btn-circle.btn-primary { background: var(--c-orange); border-color: var(--c-orange); }
  /* エントリーの帯（.cta-gradient）で終わるページは、その段の下余白を 16 にする（＋フッターの上 64 ＝ 80） */
  .area-recruit .main > section:last-child:has(.cta-gradient) { padding-bottom: 16px; }
}
@media (min-width: 1080px) and (max-width: 1120px) {
  .ft-recruit { height: 600px; }
  .ft-recruit .ft-bottom { height: calc(600px - 593 * var(--u)); }
  .ft-recruit .ft-top { height: 169px; padding-top: 115px; }
  .ft-recruit .ft-cols { gap: 0 40px; }
}
@media (prefers-reduced-motion: reduce) { .menu-toggle, .menu-toggle-bars, .menu-toggle-bars::before, .menu-toggle-bars::after { transition: none; } }

/* ドロワーの右下のスマイル 3 つを、開くたびに 1 つずつ出す（2026-09-28 ユーザー「メニューのこの3つ1個ずつ出すアニメーション」。
   2026-09-29「採用サイトの…ロゴ3つ順番に出すアニメーションできてない」で出し方を作り直し）。
   動き: 上の大きいスマイル → 真ん中 → 下の順に、少し回りながら跳ねて出る（1 つ 0.7s・次まで 250ms・拡大 0.3 → 1 で少し行き過ぎて戻る・回転 −24° → 0・不透明度は 60% の所で 1）。
   以前は開いた瞬間からの時間（0.55／0.8／1.05s）だけで動かしていた。採用はスマイルが画面の外（〜599 は中身の一番下 y1281〜1450、841 は 875〜1108、
   1440×789 は下半分）にあり、動きが画面の外で終わるので、送って見に行くと止まった 3 つが並んでいるだけだった（医院 〜599 は画面の下に見えるので動いて見えていた）。
   今は motion.js（「ドロワーの右下のスマイル」）が 1 つずつ半分以上見えたかを見て .is-pop と遅れ --dw-pop-d を付ける:
     開いてから 550ms より前には出さない（丸から広がる面がスマイルに届いてから）・前のスマイルから 250ms 空ける・上から順（下が先に見えても上を先に出す）。
   閉じ終わって hidden になったら .is-pop を外す（次に開いたときにもう一度出る）。隠すのは html.mo のときだけ（reduce・JS なし・演出オフは最初から見える）。
   現行（STUDIO 採用・urala.com）はスマイルが 1 枚の画像で、個別には動かない（採用は動きなし、医院はパネルごと右から 0.4s で入る）。この動きは 9/28 の指示で足したもの */
.dw-s { transform-box: fill-box; transform-origin: 50% 60%; }
html.mo .drawer:not([hidden]) .dw-s:not(.is-pop) { opacity: 0; }
html.mo .drawer:not([hidden]) .dw-s.is-pop { animation: dw-smile-pop .7s cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: var(--dw-pop-d, 0ms); }
@keyframes dw-smile-pop { 0% { opacity: 0; scale: .3; rotate: -24deg; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; rotate: 0deg; } }