/* SPES GROUP 作り直し版（v2）— カヲル 2026-11-04 夜
   型：八木が谷の試作（ブロックマンの組み）＝ u 32px（携帯 30）・中の幅 1312px・12 列・溝 1u・窓 6u／13u／20u・字 6 段・段の間 5u（携帯 4u）。
   縦の空きは全部 u の整数倍。見出しとそれが指す札・箇条は一つのかたまり（data-z）で一緒に動かし、間は 1u 以上・段の境と小見出しは 2u 以上。
   動き：完成パターン #1（出現 .18→1・36px・.85 秒、写真 .04→1・52px・1.6 秒・中で 2.2 秒、行ごと .07 秒、横並び .16 秒、触れると 1.6 秒・1.018 倍）。
   視差：写真は枠の中で ±9%（人 ±4%）、帯 ±9%（帯の高さの 11%）、字のかたまりの奥行きは見出し・リード・本文の 3 段。
   PC も指の端末も、CSS の送りの時間軸（scroll()・view()）で動かす（台本で transform を書かない。指の端末で揺れないため）。無い端末は止まる。
   色：地 #F3F8FB・白 #FCFDFE・クリーム #FFF7EF・空 #EAF4FB→#D4E9F6、字の紺 #1A2028、SPES の青 #25599B、水色 #42A1DA、金 #957845（細い線と番号だけ）、朝日の橙 #F08C5A（小さな印だけ）。
   予約：水色 #1E7AB8（白い字 4.6:1）・LINE の緑 #04843B（白い字 4.9:1。触れると #036F31。字は段どおりの大きさ。2026-11-04 夜 なおさん「LINE の文字が黒より白の方がいい」→ 評価役の推しの緑）。
   書体 3 家族：和文 ヒラギノ角ゴ（ほかは BIZ UDPGothic）・欧文と数字 Spectral・トップの頭の一文だけ Zen Old Mincho。丸ゴは使わない。字は 15px 以上（© だけ 13px）。 */

/* ── 値 ───────────────────────── */
:root{
  --u:30px; --gap:20px; --gut:20px; --wrap:1312px;
  --sec:calc(var(--u) * 4); --sec-h:calc(var(--u) * 3);
  --f1:15px; --f2:16px; --f3:18px; --f4:22px; --f5:28px; --f6:34px; --f0:13px;
  --lh1:var(--u); --lh2:var(--u); --lh3:calc(var(--u) * 1.2); --lh4:calc(var(--u) * 1.25); --lh5:calc(var(--u) * 1.5); --lh6:calc(var(--u) * 1.75);
  --win-s:calc(var(--u) * 6); --win-m:calc(var(--u) * 13); --win-l:calc(var(--u) * 20);
  --zh:24px; --zl:14px; --zb:8px;
  --paper:#F3F8FB; --white:#FCFDFE; --cream:#FFF7EF; --sky:#EAF4FB; --sky2:#D4E9F6; --stone:#E3EFF7;
  --ink:#1A2028; --txt:#2E363F; --lab:#56616D; --line:#D3E2EC; --line-g:rgba(149,120,69,.38);
  --blue:#25599B; --blue-d:#1D4A84; --aqua:#42A1DA; --gold:#957845; --gold-l:#D4BC8A; --sky-l:#A8DBF6; --sun:#F08C5A; --sun-t:#B5562A; --gold-t:#7D6232;
  --book:#1E7AB8; --book-d:#17689E; --lineg:#04843B; --lineg-d:#036F31;
  --card:#FFFDF9;
  --tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --shadow:0 1px 1px rgba(26,32,40,.04),0 2px 6px rgba(26,32,40,.04),0 14px 30px -14px rgba(37,89,155,.20);
  --shadow-h:0 1px 1px rgba(26,32,40,.05),0 5px 12px rgba(26,32,40,.06),0 24px 42px -16px rgba(37,89,155,.30);
  --r:16px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;
  --en:"Spectral","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",sans-serif;
  --min:"Zen Old Mincho","Hiragino Mincho ProN",serif;
  --out:cubic-bezier(.16,1,.3,1); --soft:cubic-bezier(.33,0,.15,1); --pic-in:cubic-bezier(.2,.6,.35,1); --pic-mv:cubic-bezier(.22,.61,.36,1);
  --hd:60px; --bb:calc(64px + env(safe-area-inset-bottom,0px));
  /* 出現（下層。トップは一段深く） */
  --op0:.18; --mv:36px; --tin:.85s; --mvp:52px; --tpic:1.6s; --trs:2.2s;
}
@media (min-width:768px){
  :root{--u:32px; --gap:32px; --gut:clamp(32px,4.4vw,64px); --sec:calc(var(--u) * 5); --sec-h:calc(var(--u) * 4);
    --f2:17px; --f3:20px; --f4:28px; --f5:40px; --f6:56px;
    --lh4:calc(var(--u) * 1.5); --lh5:calc(var(--u) * 2); --lh6:calc(var(--u) * 2.5);
    --zh:48px; --zl:28px; --zb:16px; --r:20px}
}
@media (min-width:1024px){:root{--hd:80px; --bb:0px}}
body.top{--op0:.12; --mv:40px; --tin:1s; --mvp:64px; --tpic:2s; --trs:2.8s; --zh:26px; --zl:18px; --zb:10px}
@media (min-width:768px){body.top{--zh:52px; --zl:36px; --zb:20px}}

/* ── 土台 ───────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;font-synthesis:none;text-autospace:normal;scroll-padding-top:calc(var(--hd) + var(--u))}
html.l-wbr body{word-break:keep-all;line-break:strict;overflow-wrap:break-word}
.kj,.nb{white-space:nowrap}
body{margin:0;background:var(--paper);color:var(--txt);font-family:var(--sans);font-size:var(--f2);line-height:var(--lh2);letter-spacing:.04em;
  font-kerning:none;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* text-wrap:pretty は英語だけ（Safari は和文の keep-all と <wbr> の所で、行末の字を次の行の頭に二重に描くことがある：評価役 note_dup） */
html[lang="en"] :is(p,li,dd,td,th){text-wrap:pretty}
h1,h2,h3,.lead,.eb,.btn,.more,.hd__nav a,.dr a,.kc__name,.oc__h,.sy__h,.ft6__h,.bk__name{font-feature-settings:"palt" 1}
h1,h2,h3{font-weight:600;color:var(--ink);text-wrap:balance}
.num,.tel-big{font-family:var(--en);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
::selection{background:#BFE0F4;color:var(--ink)}
.skip{position:absolute;left:8px;top:-60px;z-index:2000;padding:8px 16px;background:var(--white);color:var(--blue);border-radius:8px}
.skip:focus{top:8px}
.ln{display:block}

/* 中の幅と 12 列 */
.w{width:100%;max-width:calc(var(--wrap) + var(--gut) * 2);margin-inline:auto;padding-inline:var(--gut)}
.g12{display:grid;grid-template-columns:minmax(0,1fr);row-gap:calc(var(--u) * 2)}
@media (min-width:768px){.g12{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}}

/* 字の段 6 つ（f1 15・f2 本文・f3 リード・f4 見出し・f5 大きな見出し・f6 頭） */
.h2{font-size:var(--f5);line-height:var(--lh5);letter-spacing:.02em}
.h2--l{font-size:var(--f5)}
.h3{font-size:var(--f3);line-height:var(--lh3);letter-spacing:.04em}
.lead{font-size:var(--f3);line-height:var(--lh3);color:var(--ink);letter-spacing:.04em;max-width:30em}
.note{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
p{max-width:34em}

/* 小さな英字の札：漢字一字・英字・右へ引かれる金の線（一手：水平線、左から 1.6 秒） */
.eb{display:flex;align-items:center;gap:12px;margin:0 0 var(--u);max-width:none;font-size:var(--f1);line-height:var(--lh1);color:var(--gold)}
.eb__k{font-weight:600;color:var(--blue);letter-spacing:0}
.eb__e{font-family:var(--sans);font-size:var(--f1);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.eb__hz{flex:1 1 auto;max-width:160px;height:1px;background:var(--line-g);transform-origin:left center}
.hz{display:block;height:1px;background:var(--line-g);transform-origin:left center}
html.js [data-hz]{transform:scaleX(0);transition:transform 1.6s var(--soft) .2s}
html.js [data-hz].is-in{transform:none}

/* ── 段（section）：地は上下 5u（携帯 4u）。地の無い段は上だけ。同じ地を続けない ── */
.sec{padding-top:var(--sec)}
.sec--white,.sec--cream,.sec--sky{margin-top:var(--sec);padding-bottom:var(--sec)}
.sec--white{background:var(--white)}
.sec--cream{background:var(--cream)}
.sec--sky{background:linear-gradient(180deg,var(--sky),var(--sky2))}
:is(.sec--white,.sec--cream,.sec--sky,.band)+:is(.sec--white,.sec--cream,.sec--sky,.band){margin-top:0}
.band+.sec:not(.sec--white,.sec--cream,.sec--sky){padding-top:var(--sec)}
.sec--first{padding-top:var(--sec-h)}
.crumbs+.subnav+.sec--first,.crumbs+.sec--first{padding-top:var(--sec-h)}
main>.sec:last-child{padding-bottom:var(--sec)}

/* 段の頭：見出し（左 6 列）とリード（右 6 列、下そろえ）。携帯は縦に。中身との間は 2u */
.sh{margin-bottom:calc(var(--u) * 2);row-gap:var(--u)}
.sh .h2{margin:0}
@media (min-width:768px){
  .sh{align-items:end}
  .sh__a{grid-column:1 / span 6}
  .sh__b{grid-column:7 / span 6;margin:0}
}
.more-row{margin-top:var(--u);max-width:none}
.sh+*,.rg+*{margin-top:0}

/* ── 紙のウィジェットの札 ── */
.card{background:var(--tex),var(--card);border-radius:var(--r);box-shadow:var(--shadow)}

/* ── ボタン・印 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:26px;font-size:var(--f2);font-weight:600;
  line-height:1.3;letter-spacing:.06em;white-space:nowrap;transition:background-color .5s var(--soft),translate .5s var(--soft),box-shadow .5s var(--soft)}
.btn .ic{width:20px;height:20px;flex:none}
.btn--tel{background:var(--book);color:#fff}
.btn--line{background:var(--lineg);color:#fff}
.btn--s{min-height:48px;padding:0 20px;font-size:var(--f1);border-radius:24px}
.btn--tel.btn--s span{font-family:var(--en);font-weight:400;font-size:var(--f2);letter-spacing:.02em}
@media (hover:hover){
  .btn--tel:hover{background:var(--book-d);translate:0 -2px;box-shadow:0 10px 20px -12px rgba(30,122,184,.7)}
  .btn--line:hover{background:var(--lineg-d);translate:0 -2px;box-shadow:0 10px 20px -12px rgba(6,199,85,.7)}
}
.btns{display:flex;flex-wrap:wrap;gap:12px;max-width:none}
.btns{container-type:inline-size}
.btns .btn{flex:1 1 140px}
.more{display:inline-flex;align-items:center;gap:16px;min-height:44px;color:var(--blue);font-size:var(--f2);font-weight:600;letter-spacing:.08em}
.more i{position:relative;display:block;width:40px;height:1px;background:currentColor;transition:width .6s var(--soft)}
.more i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.more:hover{color:var(--blue-d)}.more:hover i{width:56px}}

/* ── 上の帯（頭の上では透け、送ると白に細い金の線） ── */
.hd{position:fixed;inset:0 0 auto;z-index:1000;height:var(--hd);color:var(--ink);background:rgba(252,253,254,.97);box-shadow:0 1px 0 var(--line-g);
  /* すりガラスのぼかしはやめる：ほぼ不透明で見えないのに、Safari は送るたびに下を描き直して重くなる（2026-11-06 点検） */
  transition:transform .7s var(--soft),background-color .6s var(--soft),color .6s var(--soft),box-shadow .6s var(--soft)}
.hd--over:not(.is-solid){background:rgba(252,253,254,0);box-shadow:0 1px 0 rgba(255,255,255,0);color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
.hd.is-hide{transform:translateY(-100%)}
body.menu-open .hd{transform:none;background:transparent;box-shadow:none;color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.hd__in{height:100%;display:flex;align-items:center;gap:24px;max-width:calc(var(--wrap) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)}
.hd__logo{position:relative;display:block;flex:none;width:59px;height:42px;transition:opacity .5s var(--soft)}
@media (min-width:1024px){.hd__logo{width:73px;height:52px}}
.hd__lg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .6s var(--soft)}
.hd__lg--w{opacity:0}
.hd--over:not(.is-solid) .hd__lg--c{opacity:0}
.hd--over:not(.is-solid) .hd__lg--w{opacity:1}
body.menu-open .hd .hd__lg--c{opacity:1}body.menu-open .hd .hd__lg--w{opacity:0}
@media (hover:hover){.hd__logo:hover{opacity:.72}}
.hd__nav{display:none;margin-left:auto}
.hd__nav ul{display:flex;gap:28px}
.hd__nav a{position:relative;display:flex;align-items:center;min-height:44px;font-size:var(--f1);font-weight:600;letter-spacing:.12em}
.hd__nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--soft)}
.hd__nav a[aria-current]::after{transform:none}
@media (hover:hover){.hd__nav a:hover::after{transform:none}}
.hd__end{display:flex;align-items:center;gap:12px;margin-left:auto}
.hd__lang{display:flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--en);font-size:var(--f1);letter-spacing:.14em}
@media (hover:hover){.hd__lang:hover{color:var(--gold)}}
.hd__book{display:none;align-items:center;min-height:44px;padding:0 24px;border-radius:22px;background:var(--book);color:#fff;font-size:var(--f1);font-weight:600;letter-spacing:.14em;
  transition:background-color .5s var(--soft),translate .5s var(--soft)}
@media (hover:hover){.hd__book:hover{background:var(--book-d);translate:0 -1px}}
@media (min-width:1024px){.hd__nav{display:block}.hd__end{margin-left:20px}.hd__book{display:flex}.burger{display:none!important}}
/* 携帯のメニューの印（アマン・BPC と同じ：同じ長さの 1px の線 3 本・24px・間 6px・押せる広さ 44px → 開くと真ん中が消え、上下が 45° で正方形の ×、.5 秒） */
.burger{position:relative;width:44px;height:44px;margin-right:-10px}
.burger span{position:absolute;left:10px;width:24px;height:1px;background:currentColor;transition:transform .5s var(--soft),opacity .3s var(--soft),background-color .5s var(--soft)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (hover:hover){.burger:hover span{background:var(--gold)}}

/* 引き出し（朝の空の水色） */
.dr{position:fixed;inset:0;z-index:990;overflow-y:auto;background:linear-gradient(180deg,var(--sky),var(--sky2));color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .6s var(--soft),visibility 0s linear .6s}
body.menu-open .dr{opacity:1;visibility:visible;transition:opacity .6s var(--soft)}
body.menu-open{overflow:hidden}
.dr__in{max-width:640px;margin:0 auto;padding:calc(var(--hd) + var(--u)) var(--gut) calc(var(--u) * 2)}
.dr__nav li{border-bottom:1px solid var(--line)}
.dr__nav a{display:flex;align-items:center;min-height:56px;font-size:var(--f4);font-weight:600;letter-spacing:.06em}
.dr__blk{margin-top:calc(var(--u) * 2)}
.dr__h{font-size:var(--f1);color:var(--gold);letter-spacing:.14em;margin-bottom:var(--u)}
.dr__cl{display:grid;gap:12px}
.dr__c{container-type:inline-size;padding:20px;border-radius:var(--r);background:var(--tex),var(--card);box-shadow:var(--shadow)}
.dr__n{display:block;font-weight:600}
.dr__n small{display:block;margin-top:4px;font-size:var(--f1);font-weight:400;color:var(--lab)}
html[lang="en"] .dr__h{letter-spacing:.04em}
.dr__ca{margin-top:12px}
.dr__lang{margin-top:calc(var(--u) * 2)}
.dr__lang a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--en);letter-spacing:.14em;color:var(--blue)}
html.js body:not(.menu-open) .dr li{opacity:0;transform:translateY(12px)}
.dr li{transition:opacity .6s var(--soft),transform .6s var(--soft)}

/* 携帯・タブレットの下の帯：電話・LINE → 下から 4 院の板 */
.bb{position:fixed;inset:auto 0 0;z-index:950;display:flex;gap:8px;padding:8px var(--gut) calc(8px + env(safe-area-inset-bottom,0px));background:rgba(252,253,254,.97);
  box-shadow:0 -1px 0 var(--line-g);transition:transform .6s var(--soft)}
.bb.is-off{transform:translateY(110%)}
.bb__b{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:24px;font-size:var(--f2);font-weight:600;letter-spacing:.06em}
.bb__b .ic{width:20px;height:20px;flex:none}
html[lang="en"] .bb__b{letter-spacing:0}
.bb__b--tel{background:var(--book);color:#fff}
.bb__b--line{background:var(--lineg);color:#fff}
@media (min-width:1024px){.bb,.bs{display:none!important}}
body{padding-bottom:var(--bb)}
.bs{position:fixed;inset:0;z-index:1100;visibility:hidden;transition:visibility 0s linear .6s}
.bs.is-open{visibility:visible;transition:none}
.bs__bg{position:absolute;inset:0;background:rgba(26,32,40,.4);opacity:0;transition:opacity .6s var(--soft)}
.bs.is-open .bs__bg{opacity:1}
.bs__p{position:absolute;inset:auto 0 0;max-height:86svh;overflow-y:auto;padding:var(--u) var(--gut) calc(var(--u) + env(safe-area-inset-bottom,0px));
  border-radius:20px 20px 0 0;background:linear-gradient(180deg,var(--sky),var(--white));transform:translateY(100%);transition:transform .6s var(--soft)}
.bs.is-open .bs__p{transform:none}
.bs__hd{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:var(--u)}
.bs__h{font-size:var(--f3);font-weight:600;color:var(--ink)}
.bs__x{position:relative;width:44px;height:44px;flex:none}
.bs__x span{position:absolute;left:10px;top:21px;width:24px;height:1px;background:var(--ink)}
.bs__x span:first-child{transform:rotate(45deg)}.bs__x span:last-child{transform:rotate(-45deg)}
.bs__l{display:grid;gap:12px}
.bs__c{container-type:inline-size;padding:20px;border-radius:16px;background:var(--tex),var(--card);box-shadow:var(--shadow)}
.bs__n{display:flex;flex-direction:column;font-weight:600;color:var(--ink)}
.bs__n small{font-size:var(--f1);font-weight:400;color:var(--lab)}
.bs__a{margin-top:12px}

/* ── トップの頭（全幅のループ 100svh。送ると動画は 35% 遅れて沈み、字は上へ抜けながら薄く） ── */
.hero{position:relative;height:100svh;min-height:600px;overflow:clip;color:#fff;background:#24303C}
.hero__media,.ph__media{position:absolute;inset:0}
.vbox{position:relative;overflow:clip}
.vbox>picture,.vbox>picture img,.vbox>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vbox>video{opacity:0;transition:opacity .01s linear}
.vbox.is-playing>video{opacity:1}
.hero .vbox,.ph .vbox{position:absolute;inset:0}
.vbox--head{animation:hdIn 7s var(--pic-mv) both}
@keyframes hdIn{from{scale:1.08;opacity:0}12%{opacity:1}to{scale:1;opacity:1}}
.hero__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,28,40,.62) 0%,rgba(18,28,40,.28) 34%,rgba(18,28,40,0) 62%),linear-gradient(90deg,rgba(18,28,40,.32),rgba(18,28,40,0) 60%)}
.hero__txt{position:absolute;left:0;right:0;bottom:calc(var(--u) * 3);z-index:2}
.hero__label{font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--f1);letter-spacing:.12em;color:rgba(255,255,255,.88);margin-bottom:var(--u)}
.hero__scenes{display:grid}
.hs{grid-area:1 / 1;align-self:end}
.hs__t{font-family:var(--min);font-weight:500;font-size:var(--f6);line-height:var(--lh6);letter-spacing:.06em;color:#fff;text-shadow:0 2px 24px rgba(10,20,30,.28)}
.hl{display:block}
.hs__en{display:block;margin-top:12px;font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.04em;color:rgba(255,255,255,.9)}
.hero__sub{margin-top:var(--u);font-size:var(--f1);line-height:var(--lh1);color:rgba(255,255,255,.92);letter-spacing:.08em;max-width:none}
/* 言葉の入れ替え：柔らかい縁の帯で拭うように現れ、同じ向きへ拭われて去る（作り直し版のまま） */
.hs .hl,.hs .hs__en{-webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 60%);mask-image:linear-gradient(90deg,#000 40%,transparent 60%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;opacity:0}
.hs.is-on .hl,.hs.is-on .hs__en{-webkit-mask-position:0 0;mask-position:0 0;opacity:1;
  transition:-webkit-mask-position 1.6s var(--soft) calc(var(--d0,.35s) + var(--i,0) * .18s),mask-position 1.6s var(--soft) calc(var(--d0,.35s) + var(--i,0) * .18s),opacity .8s var(--soft) calc(var(--d0,.35s) + var(--i,0) * .18s)}
.hs.is-on .hs__en{transition-delay:calc(var(--d0,.35s) + .6s)}
.hs.is-out .hl,.hs.is-out .hs__en{-webkit-mask-position:-160% 0;mask-position:-160% 0;opacity:0;transition:-webkit-mask-position 1.2s var(--soft),mask-position 1.2s var(--soft),opacity 1.2s var(--soft)}
.hero__foot{position:absolute;left:0;right:0;bottom:var(--u);z-index:2;display:flex;align-items:center;gap:24px}
.hz--hero{flex:1 1 auto;background:rgba(255,255,255,.55)}
.hero__scroll{display:none;font-family:var(--en);font-style:italic;font-size:var(--f1);letter-spacing:.16em;color:rgba(255,255,255,.85)}
@media (min-width:768px){
  .hero__txt{bottom:calc(var(--u) * 3)}
  .hero__scroll{display:block}
}
/* 携帯・タブレット：頭（100svh）の下には予約の帯が重なるので、字と線はその上に */
@media (max-width:1023px){.hero__txt{bottom:calc(var(--bb) + var(--u) * 2)}.hero__foot{bottom:calc(var(--bb) + var(--u) - 6px)}}

/* ── 下層の頭（ループ動画に字。送ると 24% 遅れて沈む） ── */
.ph{position:relative;height:78svh;min-height:520px;max-height:900px;overflow:clip;color:#fff;background:#24303C}
@media (min-width:768px){.ph{height:84svh;min-height:600px;max-height:980px}}
.ph__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,28,40,.62) 0%,rgba(18,28,40,.22) 40%,rgba(18,28,40,0) 66%),linear-gradient(90deg,rgba(18,28,40,.28),rgba(18,28,40,0) 55%)}
.ph__txt{position:absolute;left:0;right:0;bottom:calc(var(--u) * 2);z-index:2}
.ph__en{font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.06em;color:rgba(255,255,255,.9);margin-bottom:12px;max-width:none}
.ph__h{font-size:var(--f5);line-height:var(--lh5);letter-spacing:.06em;color:#fff;text-shadow:0 2px 24px rgba(10,20,30,.25)}
.ph__lead{margin-top:12px;font-size:var(--f2);line-height:var(--lh2);color:rgba(255,255,255,.94)}
.ph__foot{position:absolute;left:0;right:0;bottom:var(--u);z-index:2}
.hz--ph{background:rgba(255,255,255,.55)}
@media (min-width:768px){.ph__txt{bottom:calc(var(--u) * 3)}.ph__h{font-size:var(--f6);line-height:var(--lh6)}.ph__lead{font-size:var(--f3);line-height:var(--lh3)}}
/* 頭の出（字）：ふわっと */
.hero__txt,.ph__txt{animation:txIn 1.4s var(--out) .5s both}
@keyframes txIn{from{opacity:0;translate:0 24px}to{opacity:1;translate:0 0}}
/* 確かめの画面写真（?shot）：頭の出の動きを済ませた姿で。携帯の頭は 1000px まで（画面写真の道具が窓を頁の高さにしても頭が頁を覆わない） */
.is-shot .vbox--head,.is-shot .hero__txt,.is-shot .ph__txt{animation:none!important}
.is-shot .bb{display:none}   /* 頁全体の写真では、画面に止まる下の帯が途中に写り込むので外す（頭の動きの写真には写る） */
@media (max-width:767px){.hero{max-height:1000px}}

/* 現在地・院のメニュー */
.crumbs{margin-top:var(--u)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 12px;font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.crumbs li+li::before{content:"／";margin-right:12px;color:var(--line)}
.crumbs a{display:inline-flex;align-items:center;min-height:30px;color:var(--blue)}
@media (hover:hover){.crumbs a:hover{color:var(--gold)}}
.subnav{margin-top:var(--u)}
.subnav ul{display:flex;flex-wrap:wrap;gap:8px}
.subnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:22px;background:var(--white);font-size:var(--f1);font-weight:600;color:var(--blue);letter-spacing:.06em;
  transition:border-color .5s var(--soft),color .5s var(--soft),translate .5s var(--soft)}
@media (hover:hover){.subnav a:hover{border-color:var(--gold);color:var(--ink);translate:0 -1px}}

/* ── 写真の窓（出現・枠の中の視差・中で落ち着く） ── */
.fr{position:relative;overflow:clip;border-radius:calc(var(--r) - 6px);background:var(--stone)}
.fr picture,.fr img{display:block;width:100%;height:100%}
.fr img{object-fit:cover;scale:1.2}
.fr[data-px="4"] img{scale:1.1}
.fr[data-px=""] img,.fr:not([data-px]) img{scale:1}
.fr--4x3{aspect-ratio:4 / 3}.fr--4x5{aspect-ratio:4 / 5}.fr--3x4{aspect-ratio:3 / 4}.fr--1x1{aspect-ratio:1}
.fr--wm{height:var(--win-m)}.fr--wl{height:var(--win-m)}
@media (min-width:768px){.fr--wl{height:var(--win-l)}}
html.js .fr[data-rv]{opacity:.04;transform:translateY(var(--mvp));transition:opacity 1.1s var(--pic-in) var(--d,0s),transform var(--tpic) var(--pic-mv) var(--d,0s)}
html.js .fr[data-rv] img{scale:1.26;transition:scale var(--trs) var(--pic-mv) var(--d,0s)}
html.js .fr[data-rv][data-px="4"] img{scale:1.14}
html.js .fr[data-rv].is-in{opacity:1;transform:none}
html.js .fr[data-rv].is-in img{scale:1.2}
html.js .fr[data-rv][data-px="4"].is-in img{scale:1.1}
@media (hover:hover){
  a .fr.is-in img,a.fr.is-in img{transition:scale 1.6s var(--soft)}
  a:hover .fr.is-in img{scale:calc(1.2 * 1.018)}
  a:hover .fr[data-px="4"].is-in img{scale:calc(1.1 * 1.018)}
}

/* ── 出現（字）：かたまりの中は行ごとに .07 秒ずらす ── */
html.js [data-rv]:not(.fr):not(.has-ln){opacity:var(--op0);transform:translateY(var(--mv));transition:opacity var(--tin) var(--out) var(--d,0s),transform var(--tin) var(--out) var(--d,0s)}
html.js [data-rv].is-in:not(.fr):not(.has-ln){opacity:1;transform:none}
html.js .has-ln>.ln,html.js .has-ln>.lu{opacity:var(--op0);transform:translateY(var(--mv));transition:opacity var(--tin) var(--out),transform var(--tin) var(--out);transition-delay:calc(var(--d,0s) + var(--li,0) * .07s)}
html.js .has-ln.is-in>.ln,html.js .has-ln.is-in>.lu{opacity:1;transform:none}
.card[data-rv]{transition-property:opacity,transform,box-shadow,translate!important}

/* ── 送りの時間軸の動き（PC も指の端末も CSS で。無い端末と動きを減らす設定は止まる） ── */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  /* 字のかたまりの奥行き：画面の下から入る時は下に、上へ出る時は上に（中身はひとかたまり。見出しと札が離れない） */
  [data-z]{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  [data-z="h"]{--z:var(--zh)}[data-z="l"]{--z:var(--zl)}[data-z="b"]{--z:var(--zb)}
  /* 写真は枠の中で（場面 ±9%・人 ±4%）。枠は overflow:clip（hidden にすると送りの時間軸が枠につながって止まる） */
  .fr[data-px="9"] img{animation:pxIn linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .fr[data-px="4"] img{animation:pxIn4 linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  /* 全幅の帯：帯の高さの ±11% */
  .band__media{animation:bandPx linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
@supports (animation-timeline:scroll()){
  .hero__media{animation:hdSink linear both;animation-timeline:scroll(root block);animation-range:0px 130vh;--sink:35vh}
  .ph__media{animation:hdSink linear both;animation-timeline:scroll(root block);animation-range:0px 130vh;--sink:24vh}
  .hero__txt,.ph__txt{animation:txIn 1.4s var(--out) .5s both,hdTx linear both;animation-timeline:auto,scroll(root block);animation-range:normal,0px 80vh}
  .hero__foot,.ph__foot{animation:hdFoot linear both;animation-timeline:scroll(root block);animation-range:0px 60vh}
}}
@keyframes zDep{from{translate:0 var(--z,0px)}to{translate:0 calc(var(--z,0px) * -1)}}
@keyframes pxIn{from{translate:0 -9%}to{translate:0 9%}}
@keyframes pxIn4{from{translate:0 -4%}to{translate:0 4%}}
@keyframes bandPx{from{translate:0 -9%}to{translate:0 9%}}
@keyframes hdSink{to{translate:0 var(--sink)}}
@keyframes hdTx{to{translate:0 -12vh;opacity:0}}
@keyframes hdFoot{to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-rv],html.js .has-ln>.ln,html.js .has-ln>.lu,html.js [data-hz]{opacity:1!important;transform:none!important}
}

/* ── 動く絵（平らな塗りのループ。地は紙の白 #FEFDF9＝札の地と同じ） ── */
.lp{position:relative;aspect-ratio:1;background:#FEFDF9}
.lp.vbox>picture img,.lp.vbox>video{object-fit:contain}
.lp--still picture,.lp--still img{width:100%;height:100%;object-fit:contain}
.ext{aspect-ratio:4 / 3;background:#FEFDF9}
/* レイのスタッフの絵（透過） */
.kch{position:relative;width:min(100%,200px);aspect-ratio:4 / 5;background:transparent}
.kch>picture img,.kch>video{object-fit:contain}

/* ── トップ ── */
.about__g{align-items:end}
@media (min-width:768px){.about__t{grid-column:1 / span 5;align-self:center}.about__m{grid-column:7 / span 6}}
.about .lead{margin-top:var(--u)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:calc(var(--u) * 2)}
.fact{display:flex;flex-direction:column;padding-top:var(--u);border-top:1px solid var(--line-g)}
.fact__v{font-size:var(--f5);line-height:var(--lh5);color:var(--gold);font-weight:300}
.fact__v small{margin-left:4px;font-family:var(--sans);font-size:var(--f1);color:var(--ink);font-weight:400}
.fact__k{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.phil__g{align-items:end;margin-top:calc(var(--u) * 3)}
@media (min-width:768px){.phil__h{grid-column:1 / span 6}.phil__l{grid-column:7 / span 6}}
.phil__l{display:grid;gap:12px;counter-reset:c}
.phil__l li{display:flex;gap:16px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:var(--f2);line-height:var(--lh2);color:var(--ink);font-weight:600}
.phil__l .no{color:var(--gold);font-size:var(--f3);font-weight:400}
.walk{margin-top:calc(var(--u) * 2)}
.walk__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:720px;margin:0 auto}
.walk .lp{aspect-ratio:4 / 5;background:transparent;mix-blend-mode:multiply;filter:brightness(1.04)}
.hz--walk{margin-top:-1px;max-width:none;background:var(--gold-l)}
.cards3{display:grid;gap:var(--gap)}
.apc{display:flex;flex-direction:column;overflow:clip}
.apc__ill{border-radius:var(--r) var(--r) 0 0}
.apc__b{padding:var(--u);padding-top:0}
.apc__no{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;color:var(--gold);max-width:none}
.apc__no .num{font-size:var(--f4);line-height:var(--lh4)}
.apc__k{font-weight:600;color:var(--blue)}
.apc__e{font-size:var(--f1);letter-spacing:.2em;text-transform:uppercase}
.apc .h3{margin-bottom:12px}
@media (min-width:1024px){.cards3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cards3+.more-row,.cards3+.chartbox{margin-top:calc(var(--u) * 2)}
/* 携帯・タブレットの札は横に送る列。列の端は画面の端から 8px 内側で切る（端に字が付かない） */
@media (max-width:1023px){
  .reel.reel{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1 + 8px);padding:0 calc(var(--gut) - 8px) 20px;scroll-padding-inline:calc(var(--gut) - 8px);scrollbar-width:none}
  .reel::-webkit-scrollbar{display:none}
  .reel.reel>*{flex:0 0 82%;scroll-snap-align:start}
  .reel.reel--2>*{flex-basis:46%}
}
@media (min-width:768px) and (max-width:1023px){.reel.reel>*{flex-basis:46%}.reel.reel--2>*{flex-basis:31%}}
@media (max-width:767px){.prc__ill{max-width:200px}}
/* 札の中の動く絵は、紙の地に溶かす（絵の地の白と紙のきめの差を見せない） */
.card .lp{background:transparent;mix-blend-mode:multiply}
/* 帯（施術の手元のループ。縦の一文） */
.band{position:relative;height:min(125vw,620px);overflow:clip;color:#fff;background:#24303C;margin-top:var(--sec)}
@media (min-width:768px){.band{aspect-ratio:auto;height:clamp(480px,42.71vw,860px)}}
.band__media{position:absolute;inset:-12% 0}
.band__media .vbox{position:absolute;inset:0}
.band__shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(18,28,40,.5),rgba(18,28,40,0) 55%)}
.band__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;padding-block:calc(var(--u) * 2)}
.band__t{writing-mode:vertical-rl;font-size:var(--f4);line-height:2;letter-spacing:.2em;font-weight:600;color:#fff;text-shadow:0 2px 20px rgba(10,20,30,.3);max-width:none}
.band__t .ln{display:block}
.band__cap{font-family:var(--en);font-style:italic;font-size:var(--f1);letter-spacing:.12em;color:rgba(255,255,255,.85)}
/* 院の札（院の中の一コマ 4:5） */
.cl4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--u) 12px}
@media (min-width:768px){.cl4{gap:calc(var(--u) * 2) var(--gap)}}
@media (min-width:1024px){.cl4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kc{display:flex;flex-direction:column}
.kc__a{display:flex;flex-direction:column}
.kc__pic{margin-bottom:12px}
.kc__no{font-size:var(--f1);line-height:var(--lh1);color:var(--gold)}
.kc__name{font-size:var(--f3);line-height:var(--lh3);font-weight:600;color:var(--ink);transition:color .5s var(--soft)}
.kc__st{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.kc__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;color:var(--blue);font-size:var(--f3);transition:color .5s var(--soft)}
.kc__tel .ic{width:18px;height:18px}
@media (hover:hover){.kc__a:hover .kc__name{color:var(--blue)}.kc__tel:hover{color:var(--gold)}}
.cl4+.more-row{margin-top:calc(var(--u) * 2)}
/* 支えるもの・院の頁の手入れ（2 枚の札）。トップは左 4 列に見出し・右 8 列に札を縦に（ブロックマンの型 b） */
.pr__h .lead{margin-top:var(--u)}
.pr__h,.pr__g .pr2{grid-column:1 / -1}
@media (min-width:1024px){.pr__g{align-items:start}.pr__h{grid-column:1 / span 4}.pr__g .pr2{grid-column:5 / span 8;grid-template-columns:minmax(0,1fr)}}
.pr2{display:grid;gap:var(--gap)}
@media (min-width:1024px){.pr2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prc{display:grid;grid-template-columns:minmax(0,1fr);overflow:clip}
.prc__ill{max-width:280px;width:100%;margin:0 auto}
.prc__b{padding:0 var(--u) var(--u)}
.prc__b>*+*{margin-top:12px}
.prc__s{font-weight:600;color:var(--ink)}
.prc__tag{font-size:var(--f1);color:var(--gold);letter-spacing:.08em}
@media (min-width:768px){.prc{grid-template-columns:5fr 7fr;align-items:center}.prc__ill{max-width:none}.prc__b{padding:var(--u) var(--u) var(--u) 0}}
/* 声（最初の一文だけ。残りは「続きを読む」） */
.vq2,.vq3{display:grid;gap:var(--gap)}
@media (min-width:768px){.vq2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.vq3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vc{padding:var(--u)}
.vc__face{width:96px;margin-bottom:var(--u)}
.vc__face .lp{aspect-ratio:1;border-radius:50%;background:#EAF5FB}
.vc__face .lp.vbox>picture img,.vc__face .lp.vbox>video{object-fit:cover}
.vc__q{font-size:var(--f3);line-height:var(--lh3);color:var(--ink)}
.vc__q::before{content:"“";display:block;font-family:var(--en);font-size:40px;line-height:30px;height:30px;color:var(--gold-l)}
.vc__who{margin-top:12px;font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.vc__who .vc__cl2::before{content:"・"}
.vc__b{margin-top:var(--u)}
/* 続きを読む（台本がある時だけ閉じておく） */
html.js [data-more]:not(.is-open){display:none}
.mb__t p{margin-top:12px}
.mb__b{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:4px;color:var(--blue);font-size:var(--f1);font-weight:600;letter-spacing:.06em;transition:color .5s var(--soft)}
.mb__b i{width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .5s var(--soft)}
.mb__b[aria-expanded="true"] i{transform:translateY(2px) rotate(-135deg)}
@media (hover:hover){.mb__b:hover{color:var(--gold)}}
.vc__b p+p{margin-top:12px}
.vc__more{margin-top:12px}
.vc__more summary,.sf__more summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue);font-weight:600;cursor:pointer;list-style:none}
.vc__more summary::-webkit-details-marker,.sf__more summary::-webkit-details-marker{display:none}
.vc__more summary::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .5s var(--soft)}
.vc__more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.vc__more p{margin-top:12px}
@media (hover:hover){.vc__more summary:hover,.sf__more summary:hover{color:var(--gold)}}
/* 仲間の顔の帯 */
.faces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
@media (min-width:768px){.faces{gap:var(--gap)}}
.rc__g{margin-top:calc(var(--u) * 2)}
@media (min-width:768px){.rc__h{grid-column:1 / span 6}.rc__b{grid-column:7 / span 6;align-self:end}}

/* ── 予約の帯（全頁の終わり） ── */
.bk__g{row-gap:calc(var(--u) * 2)}
@media (min-width:1280px){.bk__t{grid-column:1 / span 4}.bk__l{grid-column:6 / span 7}}
@media (min-width:768px) and (max-width:1279px){.bk__t,.bk__l{grid-column:1 / -1}}
.bk__t .lead{margin-top:var(--u)}
.bk .kch--book{margin-top:var(--u);width:160px}
@media (max-width:1279px){
  .bk__t{display:grid;grid-template-columns:minmax(0,1fr) 96px;column-gap:16px}
  .bk__t>*{grid-column:1 / -1}
  .bk__t>.lead{grid-column:1;grid-row:3}
  .bk .kch--book{grid-column:2;grid-row:3;width:96px;margin-top:0;align-self:end}
}
.bk__l{display:grid;gap:12px}
@media (min-width:768px){.bk__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}}
.bk__c{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--u);padding:var(--u);container-type:inline-size}
.bk__n{display:flex;flex-direction:column}
.bk__no{font-size:var(--f1);color:var(--gold)}
.bk__name{font-size:var(--f3);line-height:var(--lh3);font-weight:600;color:var(--ink);transition:color .5s var(--soft)}
.bk__st{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
@media (hover:hover){.bk__n:hover .bk__name{color:var(--blue)}}
/* 電話と LINE の札（予約の帯・引き出し・下の板・院の頁）：札の中が 420px 未満なら縦に積む（字と縁の間 20px 以上） */
.bka{display:flex;flex-wrap:wrap;gap:12px;max-width:none}
.bka .btn{flex:1 1 auto;padding:0 20px;min-height:52px}
@container (max-width:419.98px){.bka .btn{flex:1 1 100%}}
.bk__a .btn--tel span,.bs__a .btn--tel span,.dr__ca .btn--tel span{font-family:var(--en);font-weight:400;font-size:var(--f3);letter-spacing:.02em}
.bk__a .btn--line,.bs__a .btn--line,.dr__ca .btn--line{flex:0 1 auto}
@container (max-width:419.98px){.bk__a .btn--line,.bs__a .btn--line,.dr__ca .btn--line{flex:1 1 100%}}


/* ── 当院紹介 ── */
@media (min-width:768px){.ob-in__t{grid-column:1 / span 8}.ob-in__c{grid-column:10 / span 3;align-self:end;justify-self:end}}
.ob-in .lead{margin-top:var(--u)}
.ob-in__c .kch{width:150px}
@media (max-width:767px){.ob-in__c{display:none}}
.ob-idx{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u)}
.ob-idx a{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 20px;border-radius:24px;background:var(--white);box-shadow:var(--shadow);font-weight:600;color:var(--ink);
  transition:translate .5s var(--soft),box-shadow .5s var(--soft),color .5s var(--soft)}
.ob-idx .num{color:var(--gold);font-size:var(--f3)}
@media (hover:hover){.ob-idx a:hover{translate:0 -2px;box-shadow:var(--shadow-h);color:var(--blue)}}
.rg{display:flex;flex-direction:column;margin-bottom:calc(var(--u) * 2)}
.rg__en{display:flex;align-items:center;gap:12px;font-family:var(--en);font-style:italic;font-size:var(--f3);line-height:var(--lh3);color:var(--gold);max-width:none}
.rg__n{margin-left:16px;font-size:var(--f1);font-weight:400;color:var(--lab);letter-spacing:.08em}
.oc3{display:grid;gap:var(--gap)}
@media (min-width:768px){.oc3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.oc3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.oc{display:flex;flex-direction:column;overflow:clip;transition:translate .5s var(--soft),box-shadow .5s var(--soft)}
.oc__ext{display:block;border-bottom:1px solid var(--line)}
.oc__ext .ext{border-radius:0}
.oc__b{display:flex;flex-direction:column;padding:var(--u);flex:1 1 auto}
.oc__no{display:flex;gap:12px;align-items:baseline;font-size:var(--f1);line-height:var(--lh1);color:var(--lab);max-width:none}
.oc__no .num{color:var(--gold);font-size:var(--f3)}
.oc__h{margin-top:4px;font-size:var(--f4);line-height:var(--lh4)}
.oc__h a{transition:color .5s var(--soft)}
@media (hover:hover){.oc__h a:hover{color:var(--blue)}.oc:has(.oc__ext:hover){translate:0 -3px;box-shadow:var(--shadow-h)}}
.oc__dl{margin-top:var(--u);display:grid;gap:8px}
.oc__dl>div{display:grid;grid-template-columns:4.2em minmax(0,1fr);gap:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.oc__dl dt{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.oc__dl dd{font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
.oc__hr{display:flex;flex-direction:column}
.oc__tel{display:inline-flex;align-items:center;min-height:30px;color:var(--blue);font-size:var(--f3);transition:color .5s var(--soft)}
@media (hover:hover){.oc__tel:hover{color:var(--gold)}}
.oc .btns{margin-top:var(--u)}
.oc .btns .btn{padding:0 20px}
.oc .more-row{margin-top:12px}
@media (min-width:1024px){
  .oc--wide{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
  .oc--wide .oc__ext{grid-column:1 / span 6;border-bottom:0;border-right:1px solid var(--line)}
  .oc--wide .oc__ext .ext{height:100%;aspect-ratio:auto}
  .oc--wide .oc__b{grid-column:7 / span 6;padding:calc(var(--u) * 2) var(--u)}
}

/* ── 院の頁 ── */
@media (min-width:768px){.tk-info__ext{grid-column:1 / span 6}.tk-info__d{grid-column:7 / span 6}}
.tk-info__g{align-items:start}
.tk-info__ext .ext{border-radius:var(--r);overflow:clip}
.spec{margin-top:var(--u);display:grid}
.spec>div{display:grid;grid-template-columns:5em minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.spec>div:first-child{border-top:1px solid var(--line)}
.spec dt{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.spec dd{font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
.tel-big{display:inline-flex;align-items:center;min-height:44px;font-size:var(--f4);color:var(--blue);transition:color .5s var(--soft)}
@media (hover:hover){.tel-big:hover{color:var(--gold)}}
.hrs{margin-top:var(--u)}
.hrs__lab{font-size:var(--f1);line-height:var(--lh1);color:var(--lab);margin-bottom:8px}
.hours{width:100%;border-collapse:collapse;table-layout:fixed;font-size:var(--f1)}
.hours th,.hours td{padding:6px 0;text-align:center;border-bottom:1px solid var(--line);font-weight:400}
.hours thead th{color:var(--lab)}
html[lang="en"] .hours thead th{white-space:nowrap;text-wrap:nowrap!important;letter-spacing:0;font-size:var(--f1)}
.hours thead th:first-child,.hours tbody th{width:7.2em;text-align:left;color:var(--ink)}
.hours tbody th{font-size:var(--f1);letter-spacing:0}
.hours td.on::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--aqua)}
.hours td.off::before{content:"";display:inline-block;width:10px;height:1px;background:var(--lab);vertical-align:middle}
.hrs .note{margin-top:8px}
.tk-info .btns{margin-top:var(--u)}
.ft6s{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:calc(var(--u) * 2)}
@media (min-width:768px){.ft6s{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}}
@media (min-width:1280px){.ft6s{grid-template-columns:repeat(6,minmax(0,1fr))}}
.ft6{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px;border-radius:var(--r);background:var(--tex),var(--card);box-shadow:var(--shadow);text-align:center}
.ft6__ic{width:64px;height:64px}
.ft6__ic svg{width:100%;height:100%}
.ft6__t{display:flex;flex-direction:column}
.ft6__tag{font-size:var(--f1);line-height:var(--lh1);color:var(--sun-t);font-weight:600}
.ft6__h{font-size:var(--f2);line-height:var(--lh2);color:var(--ink);font-weight:600}
.chartbox{padding:var(--u);margin-top:0}
.chartbox__n{margin-top:var(--u);font-size:var(--f1);line-height:var(--lh1);color:var(--lab);max-width:46em}
.chart .kc-src{font-size:var(--f1);line-height:var(--lh1)}
/* 図の札の字（綾波の .kc-nw）は、かたまりの間でだけ折る（Safari は keep-all のとき、折らない字のかたまりの境でも折らない） */
.chart .kc-nw{display:inline-block}
.who{display:grid;gap:var(--u);padding:var(--u)}
.who .h3{font-size:var(--f4);line-height:var(--lh4);margin-bottom:var(--u)}
@media (min-width:768px){.who{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:calc(var(--u) * 2)}.who__t{grid-column:1 / span 9}.who__c{grid-column:10 / span 3;align-self:end;justify-self:center}}
.who__c .kch{width:160px;margin:0 auto}
.chk{display:grid;gap:0 var(--gap)}
@media (min-width:768px){.chk:not(.chk--s){grid-template-columns:repeat(2,minmax(0,1fr))}}
.chk li{position:relative;padding:12px 0 12px 28px;border-bottom:1px solid var(--line);font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
.chk li::before{content:"";position:absolute;left:4px;top:calc(12px + var(--lh2) / 2 - 4px);width:8px;height:8px;border-radius:50%;background:var(--aqua)}
.chk--s li{padding-top:6px;padding-bottom:6px;font-size:var(--f1);line-height:var(--lh1)}
.chk--s li::before{top:calc(6px + var(--lh1) / 2 - 4px)}
.why6{display:grid;gap:var(--gap)}
@media (min-width:1024px){.why6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.why{padding:var(--u);display:flex;flex-direction:column;gap:12px}
.why__no{font-size:var(--f5);line-height:var(--lh5);color:var(--gold);font-weight:300}
.dir__g{align-items:center}
@media (min-width:768px){.dir__m{grid-column:1 / span 5}.dir__t{grid-column:7 / span 6}}
.dir__b{margin-top:0}
.dir__b>p{font-size:var(--f3);line-height:var(--lh3);color:var(--ink)}
.dir__b>p+p{margin-top:calc(var(--u) / 2);font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}  /* 全部見せる挨拶：二段目からは本文の大きさ */
.dir__name{display:flex;flex-direction:column;margin-top:var(--u);font-size:var(--f1);line-height:var(--lh1);color:var(--lab);max-width:none}
.dir__name strong{font-size:var(--f4);line-height:var(--lh4);color:var(--ink);font-weight:600;letter-spacing:.12em}
.dir__t .h2{margin-bottom:var(--u)}
.sfs__h{margin-top:calc(var(--u) * 3);margin-bottom:var(--u);font-size:var(--f3);line-height:var(--lh3);font-weight:600;color:var(--ink)}
.sfs{display:grid;gap:12px}
@media (min-width:768px){.sfs{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}}
.sf{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:start;padding:16px}
@media (min-width:1024px){.sf{grid-template-columns:120px minmax(0,1fr);padding:var(--u) 24px}}
@media (min-width:768px) and (max-width:1023px){.sf{grid-template-columns:minmax(0,1fr)}.sf__m{max-width:160px}}
.sf__role{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.sf__name{font-family:var(--en);font-size:var(--f3);line-height:var(--lh3);color:var(--ink)}
.sf__msg{margin-top:8px;font-size:var(--f1);line-height:var(--lh1)}
.sf .mb__t .sf__msg{margin-top:0}
.camp__g{align-items:center}
@media (min-width:768px){.camp__t{grid-column:1 / span 5}.camp{grid-column:7 / span 6}}
.camp__lab{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;margin-bottom:var(--u);border-radius:15px;background:var(--sun-t);color:#fff;font-size:var(--f1);font-weight:600;letter-spacing:.1em}
.camp__t .lead{margin-top:var(--u)}
.camp{padding:var(--u)}
.camp__tb{width:100%;border-collapse:collapse}
.camp__tb th,.camp__tb td{padding:12px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:400}
.camp__tb thead th{font-size:var(--f1);color:var(--lab)}
.camp__tb th[scope="row"],.camp__tb thead th:first-child{text-align:left;color:var(--ink);font-weight:600}
.camp__tb s{color:var(--lab);font-size:var(--f2)}
.camp__new{font-size:var(--f3);color:var(--sun-t);font-weight:600}
.camp__sum{font-size:var(--f4)}
.camp__tb tfoot th,.camp__tb tfoot td{border-bottom:0;padding-top:16px}
.camp__n{margin-top:var(--u);display:grid;gap:4px}
.camp__n li{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.camp .btns{margin-top:var(--u)}
.sy6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:1024px){.sy6{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}}
.sy{display:flex;flex-direction:column;overflow:clip}
.sy__ill{border-radius:var(--r) var(--r) 0 0}
@media (min-width:1024px){.sy__ill{aspect-ratio:16 / 10}}
.sy__h{padding:12px 16px 0;font-size:var(--f2);line-height:var(--lh2);font-weight:600;color:var(--ink)}
.sy__t{padding:4px 16px 16px;font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
@media (min-width:768px){.sy__h{padding:16px var(--u) 0;font-size:var(--f3);line-height:var(--lh3)}.sy__t{padding:8px var(--u) var(--u)}}
.ins2{display:grid;gap:var(--gap);margin-top:calc(var(--u) * 2)}
@media (min-width:768px){.ins2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ins{padding:var(--u)}
.ins .h3{margin-bottom:12px}
.prc__price{display:flex;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--line);max-width:none;color:var(--ink)}
.prc__price .num{font-size:var(--f4);color:var(--blue)}
.prc__price small{font-size:var(--f1);color:var(--lab)}
.acc__g{align-items:start}
@media (min-width:768px){.acc__t{grid-column:1 / span 4}.acc__m{grid-column:5 / span 8}}
.acc__ad{margin-top:0;color:var(--ink)}
.acc__m .ddmap__frame{border-radius:var(--r);overflow:clip;box-shadow:var(--shadow)}
.acc__m .ddmap__foot{padding-inline:4px;font-size:var(--f1)}
.ddmap__gmap{display:inline-flex;align-items:center;min-height:44px}
.ddmap__src{font-size:var(--f0);color:var(--lab)}

/* ── 印（綾波の動く印）── */
.ki svg{display:block}

/* ==========================================================
   第 2 段（2026-11-04 夜）：残りの頁の部品。型と値は第 1 段のまま、同じ部品を使い回す
   ========================================================== */
/* 下層の短い頭（お問い合わせ・個人情報・お礼・見つからない頁） */
.ph--s{height:56svh;min-height:420px;max-height:640px}
@media (min-width:768px){.ph--s{height:60svh;min-height:480px;max-height:680px}}
/* 2 列の欄（会社概要と沿革・募集要項とエントリー・お問い合わせ） */
.co__g{align-items:start}
@media (min-width:1024px){.co__a{grid-column:1 / span 6}.co__b{grid-column:8 / span 5}}
@media (min-width:768px) and (max-width:1023px){.co__a,.co__b{grid-column:1 / -1}}
.co__h{margin-bottom:var(--u)}
.co-rinri{margin-top:var(--u);padding-top:var(--u);border-top:1px solid var(--line);font-size:var(--f1);line-height:var(--lh1);color:var(--lab);max-width:34em}
.hi{display:grid;gap:0}
.hi li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.hi li:first-child{border-top:1px solid var(--line)}
.hi__y{font-size:var(--f3);line-height:var(--lh2);color:var(--gold)}
.kch--co{margin-top:calc(var(--u) * 2);width:150px}
.phil__g--first{margin-top:0}
/* 施術：骨格インナー（左に文、右に腸腰筋の図と「こった筋肉 → ほぐれた筋肉」） */
.prog__g{align-items:start}
@media (min-width:1280px){.prog__t{grid-column:1 / span 5}.prog__m{grid-column:7 / span 6}}
@media (max-width:1279px){.prog__t,.prog__m{grid-column:1 / -1}}
.prog__t .lead{margin-top:var(--u)}
.prog__t p+p{margin-top:var(--u)}
.prog__who{margin-top:var(--u);font-weight:600;color:var(--ink)}
.prog__t .chk{margin-top:12px}
.prog__m{display:grid;gap:var(--gap)}
.prog__fig{position:relative;padding:var(--u);overflow:clip}
.prog__fig .chart{position:relative;z-index:1}
/* 筋肉がふわふわ息をする線画（骨格インナーの一か所だけ。図の後ろに薄く敷く。字の真下は .08 以下） */
.breath{position:absolute;inset:0;z-index:0;aspect-ratio:auto;background:transparent;opacity:.08;mix-blend-mode:multiply;pointer-events:none}
.breath.vbox>picture img,.breath.vbox>video{object-fit:cover}
.mood{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);align-items:center;gap:12px;padding:var(--u)}
.mood .kch{width:100%;margin:0 auto}
.mood__ar{display:block;height:12px;background:linear-gradient(90deg,var(--aqua),var(--aqua)) center/100% 2px no-repeat;position:relative}
.mood__ar::after{content:"";position:absolute;right:0;top:1px;width:9px;height:9px;border-top:2px solid var(--aqua);border-right:2px solid var(--aqua);transform:rotate(45deg)}
/* 施術：インソール 2 枚・足の専門家の言葉 */
.ins2--big{align-items:start}
.insc{padding:var(--u);display:flex;flex-direction:column;gap:12px}
.insc__cl{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.insc__who{margin-top:12px;font-weight:600;color:var(--ink)}
.steps{display:grid;gap:0;margin-top:12px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:2.6em minmax(0,1fr);column-gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.steps .no{grid-row:1 / span 2;font-size:var(--f3);color:var(--gold);line-height:var(--lh2)}
.ins__st{font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
.steps p{font-size:var(--f1);line-height:var(--lh1)}
.partner{display:grid;gap:var(--u);margin-top:calc(var(--u) * 2);padding:var(--u)}
@media (min-width:768px){.partner{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:calc(var(--u) * 2)}.partner__c{grid-column:1 / span 3;align-self:center}.partner__t{grid-column:4 / span 9}}
.partner__c .kch{width:min(100%,180px);margin:0 auto}
.partner__h{font-size:var(--f1);color:var(--gold);letter-spacing:.08em;margin-bottom:12px}
.partner__b>p{font-size:var(--f3);line-height:var(--lh3);color:var(--ink)}
.partner__n{margin-top:var(--u);font-weight:600;color:var(--ink)}
.sy6--full{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:768px){.sy6--full{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}}
@media (min-width:1180px){.sy6--full{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sy--full{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:16px}
.sy--full .sy__ill{grid-row:1 / span 2;border-radius:12px}
.sy--full .sy__h,.sy--full .sy__t{padding:0}
.sy--full .sy__t{margin-top:4px}
/* 患者さんの声の一覧 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:22px;background:var(--white);font-size:var(--f1);font-weight:600;color:var(--blue);
  transition:background-color .5s var(--soft),color .5s var(--soft),border-color .5s var(--soft)}
.chip.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
@media (hover:hover){.chip:not(.is-on):hover{border-color:var(--gold);color:var(--ink)}}
.vp__note{margin-top:var(--u)}
.vg__h{margin-bottom:calc(var(--u) * 2);align-items:end}
.vg__side{display:none}
@media (min-width:768px){.vg__side{display:block;grid-column:10 / span 3;justify-self:end;width:min(100%,180px)}}
.vg__ill{aspect-ratio:4 / 5;background:transparent;mix-blend-mode:multiply;filter:brightness(1.04)}
.vg[hidden]{display:none}
.vc__cl{color:var(--lab)}
/* 採用 */
.why2{display:flex;flex-direction:column;overflow:clip}
.why2 .fr{border-radius:var(--r) var(--r) 0 0}
.fr--3x2{aspect-ratio:3 / 2}
.why2__b{padding:var(--u)}
.why2__b .h3{margin-bottom:12px}
.rc-perk{margin-top:calc(var(--u) * 2)}
.rc-career__p{margin-top:calc(var(--u) * 2)}
.ivs{display:grid;gap:var(--gap)}
@media (min-width:1024px){.ivs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.iv{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--u);padding:var(--u)}
@media (min-width:768px){.iv{grid-template-columns:140px minmax(0,1fr)}}
.iv--career{max-width:880px}
@media (max-width:767px){.iv__m{max-width:160px}}
.iv__role{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.iv__h{margin-top:8px}
.iv__name{margin-top:8px;font-family:var(--en);font-size:var(--f3);color:var(--ink)}
.iv__years{margin-top:12px;display:grid;gap:4px}
.iv__years li{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.qa__it{padding-top:var(--u)}
.qa__q{font-size:var(--f1);line-height:var(--lh1);color:var(--gold);font-weight:600}
.qa__h{margin-top:4px;font-weight:600;color:var(--ink)}
.sh__c{display:flex;justify-content:flex-end}
.kch--thumb{width:120px}
@media (max-width:767px){.sh__c{display:none}}
/* フォーム */
.fm{padding:var(--u);display:grid;gap:16px;container-type:inline-size}
.fm__lead{margin-bottom:var(--u)}
.fm__r{display:grid;gap:6px}
.fm__r label{font-size:var(--f1);line-height:var(--lh1);font-weight:600;color:var(--ink)}
.req{display:inline-block;margin-left:8px;padding:0 8px;border-radius:4px;background:var(--sun-t);color:#fff;font-size:var(--f1);line-height:24px;font-weight:600;vertical-align:1px}
.fm input:not([type=checkbox]),.fm select,.fm textarea{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font:inherit;font-size:var(--f2);color:var(--ink);
  transition:border-color .4s var(--soft),box-shadow .4s var(--soft)}
.fm textarea{min-height:180px;resize:vertical}
.fm input:focus,.fm select:focus,.fm textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,89,155,.15)}
.fm__agree label{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.fm__agree input{width:22px;height:22px;margin-top:4px;flex:none;accent-color:var(--blue)}
.fm__agree a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.fm__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fm__send{max-width:none}
.btn--send{width:100%;min-height:56px;font-size:var(--f3)}
.fm__msg{padding:12px 16px;border-radius:10px;font-weight:600}
.fm__msg--ok{background:#E7F5EC;color:#1C5B33}
.fm__msg--ng{background:#FCE9E2;color:#8A3415}
.ct__t .lead{margin-top:var(--u)}
.ct__t .kch{margin-top:calc(var(--u) * 2);width:150px}
@media (max-width:767px){.ct__t .kch{display:none}}
/* お礼・見つからない頁 */
.nf__g{display:grid;gap:var(--u);align-items:center}
@media (min-width:768px){.nf__g{grid-template-columns:200px minmax(0,1fr);column-gap:calc(var(--u) * 2)}}
.nf__c .kch{width:min(100%,180px)}
.nf__t .more-row{margin-top:var(--u)}
/* 個人情報 */
@media (min-width:1024px){.pv__l{grid-column:1 / span 8}}
.pv__l{grid-column:1 / -1;display:grid;gap:calc(var(--u) * 2)}
.pv__s .h3{margin-bottom:12px}
.pv__s p{overflow-wrap:anywhere}
/* 院の頁：初回の特典の横の案内の絵 */
.kch--camp{width:140px;margin-top:var(--u)}
@media (max-width:767px){.kch--camp{display:none}}

/* ── 英語の頁：見出しは Spectral、字間は欧文の値 ── */
html[lang="en"] body{letter-spacing:.01em;word-break:normal;overflow-wrap:break-word;hyphens:manual}
html[lang="en"] :is(.h2,.ph__h,.hs__t,.rg__en,.band__t){font-family:var(--en);font-weight:400;letter-spacing:0}
html[lang="en"] .hs__t{font-weight:300;font-size:var(--f6)}
html[lang="en"] :is(.h3,.oc__h,.kc__name,.bk__name,.sy__h,.ft6__h){letter-spacing:.01em}
html[lang="en"] .lead{letter-spacing:.01em}
html[lang="en"] .vc__who .vc__cl2::before{content:" · "}
html[lang="en"] .eb__e{letter-spacing:.2em}
html[lang="en"] .band__t--en{writing-mode:horizontal-tb;max-width:16em;line-height:1.4;font-size:var(--f5)}
html[lang="en"] .hd__nav ul{gap:22px}
html[lang="en"] .hd__nav a{letter-spacing:.06em}
html[lang="en"] .hours tbody th{width:6.4em}
html[lang="en"] .spec>div,html[lang="en"] .oc__dl>div{grid-template-columns:6.2em minmax(0,1fr)}

/* 携帯の予約の帯：4 院の札は下の板（電話・LINE を押すと出る）に任せ、ここは二つのボタンだけ（縦を詰める。2026-11-04 夜 トップを携帯 8,000px 前後に） */
.bk__sheet{display:none;margin-top:var(--u);container-type:inline-size}
@media (max-width:767px){
  .bk__sheet{display:flex}
  .bk__l{display:none}
  .bk__g{row-gap:0}
  .ap .lp.apc__ill,.tk-method .lp.apc__ill,.tr-ap .lp.apc__ill{aspect-ratio:16 / 10}
  .vq .vc__face{display:none}
  .walk__row{max-width:280px}
  .reel.reel--cl>*{flex-basis:60%}
  .phil__g{margin-top:calc(var(--u) * 2)}
}

/* 横に送る列の中の写真は、枠の中の視差を止める（列が送りの時間軸の箱になり、途中で止まるため） */
/* 携帯の横の列の写真の視差は、下の「視差の取りこぼし」で列の時間軸（--reel）につないだので止めない（2026-11-05） */
/* 綾波の運動器の図：狭い時はラベルの列を縮められるように。英語は 520px 未満で 1 列 */
@container (max-width:940px){.chart .kc-ex__fig{grid-template-columns:repeat(2,minmax(0,1fr))}.chart .kc-ex__name{white-space:normal}}
@container (max-width:520px){.chart .kc-chart[lang=en] .kc-ex__fig{grid-template-columns:minmax(0,1fr)}}
/* 英語の帯：横書きで左下に */
html[lang="en"] .band__in{align-items:flex-start;justify-content:flex-end;gap:var(--u)}
html[lang="en"] .band__t--en{font-size:var(--f4);line-height:1.4;max-width:min(100%,18em)}
html[lang="en"] .band__t--en .ln{display:block}
.ft6{padding:16px 12px}
.sh__bx{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.sh__bx .kch{width:110px;flex:none}

/* 字の色の橙は一段深く（#B4572A、紙の白に 4.6:1）。#F08C5A は点・線・地の印だけ */
/* タブレット（768〜1023）：見出しと文を左右に分ける組みは 1 列に（6 列では大きな見出しが語の途中で折れるため。評価役 camp_chrome_820） */
@media (min-width:768px) and (max-width:1023px){
  .sh__a,.sh__b,.about__t,.about__m,.phil__h,.phil__l,.rc__h,.rc__b,.camp__t,.camp,.tk-info__ext,.tk-info__d,.acc__t,.acc__m,.ob-in__t,.ob-in__c,.bk__t,.bk__l{grid-column:1 / -1}
  .about__m{max-width:520px}
  .dir__m{grid-column:1 / span 5}.dir__t{grid-column:6 / span 7}
  .ob-in__c{display:none}
}

/* 特長・待遇の札：携帯は 1 列の横長（印を左、字を右）。2 列では長い語（ショッピングモール・First-visit）が札に入らない */
@media (max-width:767px){
  .ft6s{grid-template-columns:minmax(0,1fr)}
  .ft6{flex-direction:row;align-items:center;gap:16px;padding:12px 20px;text-align:left}
  .ft6__ic{width:48px;height:48px;flex:none}
}


/* ==========================================================
   評価役の文字組の洗い出し（2026-11-04 夜 _review/作り直し_第2段_20261104/文字組_洗い出し.md §2）を当てた層
   ========================================================== */
/* 2-1 Safari の二重描き：Safari だけ text-wrap:pretty を止める（hanging-punctuation は Safari だけが知っている） */
@supports (hanging-punctuation:first){:is(p,li,dd,td,th):lang(ja){text-wrap:wrap!important}}
/* 2-5 和文と並ぶ Spectral の数は一つ上の段に（Spectral の数字はヒラギノより 15% 低い） */
.hours th,.kc__no,.bk__no,.oc__no .num,.apc__no .num{font-size:var(--f2)}
/* 2-6 字の色：小さな金の字は #7D6232、橙の字は #B5562A。#957845・#F08C5A は線・点・大きな数だけ */
.eb__e,.kc__no,.bk__no,.apc__no,.apc__e,.prc__tag,.rg__en,.no,.oc__no .num,.ob-idx .num,.ft__latin,.why__no,.hi__y,.qa__q,.partner__h,.dr__h,.phil__l .no,.steps .no{color:var(--gold-t)}
.chart .kc-f--limit{background:var(--sun-t)}
/* 頭の上のメニューを映像の明るい所でも読めるように、上にも薄い影 */
.hero__shade,.ph__shade{box-shadow:inset 0 160px 120px -60px rgba(18,28,40,.38)}
/* 2-7 箱の縁と字：ボタンは左右 16px 以上（20px）、札は 1u 以上 */
.prc__b{padding:var(--u)!important}
.camp__lab{padding:0 16px;min-height:32px;border-radius:16px}
.bb__b{padding:0 16px}
/* 2-8 札の中の空きは u の拍に：番号→題→本文の間の 12・8・4px は 0（行の箱が u の高さ） */
.h3,.vc__q,.sy__h,.oc__h,.kc__name,.bk__name{line-height:var(--u)}
.apc__no,.apc .h3,.ins .h3,.why2__b .h3,.pv__s .h3,.co__h{margin:0}
.why{gap:0}
.prc__b>*+*{margin-top:0}
.prc__b>.chk,.prc__b>.prc__price,.prc__b>.more-row{margin-top:var(--u)}
.vc__who,.vc__more,.sf__msg,.hrs__lab,.hrs .note,.ph__en,.ph__lead,.hs__en,.iv__h,.iv__name,.iv__years,.insc__cl{margin-top:0;margin-bottom:0}
.camp__n{gap:0}
.mb__b{margin-top:0}
.insc{gap:0}
.insc>*+*{margin-top:0}
.insc>.steps,.insc>.prc__price,.insc>.insc__who{margin-top:var(--u)}
.co__h{margin-bottom:var(--u)}
.pv__s .h3{margin-bottom:0}
.vc__q::before{display:none}
.fact{border-top:0;padding-top:0}
/* 2-9 見出しの字間と行送り：大きいほど締める。段の見出しは 1.4（PC 56px＝1.75u・携帯 39px＝1.3u） */
:root{--lh5:calc(var(--u) * 1.3)}
@media (min-width:768px){:root{--lh5:calc(var(--u) * 1.75)}}
.h2{letter-spacing:.01em}
.ph__h{letter-spacing:.02em;font-size:var(--f6);line-height:var(--lh6)}
.hs__t{letter-spacing:.04em}
/* 2-10 院の一覧の受付：曜日の札の下に時間帯を 1 行ずつ */
.oc__hr{display:grid;gap:0}
.oc__hd{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.oc__hd+.nb,.oc__hr .nb{display:block}
/* 2-11 続く括弧：Safari だけ閉じ括弧の後ろを詰める。段落の頭の「は半字ぶら下げ */
/* 2026-11-05：Chrome も Shippori・ヒラギノでは続く約物を詰めなかった（測って 2.1 字分）→ ブラウザの自動の詰めは切り、.pk で全部の端末を同じに詰める */
html[lang="ja"]{text-spacing-trim:space-all}
.pk{margin-inline-end:-.5em}
.po{margin-inline-start:-.5em}
/* 2-12 行の長さ：注記は 34 字まで。3 列の札は 1280 以上、1024〜1279 は 2 列 */
.chartbox__n{max-width:34em}
@media (min-width:1024px) and (max-width:1279px){.cards3,.why6,.vq3,.sy6{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* 2-2 スタッフ：写真と字を横に並べるのは 1280 以上だけ（字の欄が 13 字を下回らないように） */
@media (min-width:1024px) and (max-width:1279px){.sf{grid-template-columns:minmax(0,1fr)!important}.sf__m{max-width:180px}}
/* 2-5 綾波の図の字も段に（22・26・30・32・38px をなくす） */
.chart .kc-life__sex{font-size:var(--f3)!important}
.chart .kc-num,.chart .kc-f--avg .kc-num,.chart .kc-cs__age .kc-num{font-size:var(--f4)!important;font-family:var(--en)!important}
.chart .kc-life__ticks li{font-size:var(--f1)!important}
.chart .kc-ex__name{font-size:var(--f2)!important}
.chart .kc-ex__lead{font-size:var(--f2)!important}
.chart .kc-il__names{font-size:var(--f3)!important}
.chart .kc-il__op{font-size:var(--f4)!important}

/* ==========================================================
   B 構成（§2-13）：同じ型の札の列は 1 頁に 1 つ、携帯の横送りは声だけ、全幅の帯、明暗、一手
   ========================================================== */
/* 段の頭の 3 回目からは、見出しの下にリード（左右交互にはしない） */
.sh--stack .sh__a,.sh--stack .sh__b{grid-column:1 / -1}
@media (min-width:768px){.sh--stack .sh__b{grid-column:1 / span 8}}
.sh--stack{row-gap:var(--u)}
/* 施術の三つ・院の施術：札をやめて、絵と字を地に置く（同じ大きさの札の列は声だけに）。骨盤の絵の寝台の高さ（66.5%）に金の水平線が通る＝一手 */
.cards3>li.apc{background:none;box-shadow:none;border-radius:0;overflow:visible}
.apc__ill{border-radius:0!important}
.apc__b{padding:var(--u) 0 0!important}
@media (min-width:1024px){
  .cards3{position:relative}
  .cards3 .apc__ill{background:transparent;mix-blend-mode:multiply}
  .cards3 .apc__ill::after{content:"";position:absolute;left:0;right:0;top:66.5%;height:1px;background:var(--gold-l);mix-blend-mode:multiply;z-index:2}
}
/* 携帯：横送りは声だけ。施術の三つは「絵＋題」と「本文」の 2 段の行に、症状は行に、理由・スタッフ・院は縦に */
@media (max-width:767px){
  .cards3.reel{display:grid!important;overflow:visible;margin-inline:0;padding:0;gap:calc(var(--u) * 2)}
  .cards3.reel>*{flex:none}
  .apc{display:grid!important;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto auto;grid-template-areas:"ill no" "ill head" "text text";column-gap:16px;align-content:start}
  .apc__ill{grid-area:ill;aspect-ratio:1!important;mix-blend-mode:multiply;background:transparent;align-self:center}
  .apc__b{display:contents}
  .apc__b>.apc__no{grid-area:no;align-self:end}
  .apc__b>.h3{grid-area:head;align-self:start}
  .apc__b>p:last-child{grid-area:text;margin-top:var(--u)}
  .why2>.why2__b{padding:var(--u) 0 0}
  .why6.reel,.sy6.reel,.vq3.reel.ivs,.cl4.reel{display:grid!important;overflow:visible;margin-inline:0;padding:0}
  .why6.reel>*,.sy6.reel>*,.cl4.reel>*{flex:none}
  .cl4.reel{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--u) 12px}
}
/* 理由：白い札の列をやめ、金の番号と細い線の箇条に（札の列は声だけ） */
.why6>li.why{background:none;box-shadow:none;border-radius:0;padding:var(--u) 0 0;border-top:1px solid var(--line)}
.why6{column-gap:var(--gap);row-gap:var(--u)}
@media (max-width:767px){.why6{grid-template-columns:minmax(0,1fr)}}
.why__no{font-size:var(--f4);line-height:var(--lh4)}
/* 症状：札をやめて「絵＋題＋症状の名」の行に（絵の板と字の列を格子にそろえる） */
.sy6>li.sy{background:none;box-shadow:none;border-radius:0;overflow:visible;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"ill h" "ill t";column-gap:16px;align-items:start;padding:var(--u) 0 0;border-top:1px solid var(--line)}
.sy6 .sy__ill{grid-area:ill;border-radius:12px!important;mix-blend-mode:multiply;background:transparent}
.sy6 .sy__h{grid-area:h;padding:0!important}
.sy6 .sy__t{grid-area:t;padding:0!important}
@media (max-width:767px){.sy6{grid-template-columns:minmax(0,1fr)!important;row-gap:var(--u)}}
@media (min-width:768px){.sy6{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--u)}}
@media (min-width:1280px){.sy6{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
/* 特長の印・保険の二つ・手入れの二つ：札をやめて地に置く（細い線で区切る） */
.ft6s>li.ft6{background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--line)}
.ins2>.ins{background:none;box-shadow:none;border-radius:0;padding:var(--u) 0 0;border-top:1px solid var(--line)}
.pr2>.prc{background:none;box-shadow:none;border-radius:0;border-top:1px solid var(--line)}
.prc .prc__ill{mix-blend-mode:normal;background:transparent;clip-path:circle(47.2% at 50% 50%)}  /* Safari は動画に multiply が効かず白い四角が出るので、円で切り抜く（円の半径は絵の 47.2〜48%） */
.insc{background:none!important;box-shadow:none!important;border-radius:0!important;padding:var(--u) 0 0!important;border-top:1px solid var(--line)}
/* 予約の帯の 4 院：札をやめて、細い線の行に（どの頁にも出るので、札の列を増やさない） */
.bk__l>li.bk__c{background:none;box-shadow:none;border-radius:0;padding:var(--u) 0 0;border-top:1px solid rgba(37,89,155,.18)}
/* スタッフ・インタビュー・採用の三つ：札をやめて地に置く */
.sf,.iv,.why2{background:none!important;box-shadow:none!important;border-radius:0!important}
.sf{padding:var(--u) 0 0!important;border-top:1px solid var(--line)}
.iv{padding:var(--u) 0 0!important;border-top:1px solid var(--line)}
.why2 .fr{border-radius:calc(var(--r) - 6px)!important}
/* 全幅の帯：暗めの帯（長い頁の明暗の節目）。字の無い帯は英字の注記だけ */
.band--dark .band__shade{background:linear-gradient(0deg,rgba(18,28,40,.55),rgba(18,28,40,.15) 60%),linear-gradient(270deg,rgba(18,28,40,.35),rgba(18,28,40,0) 55%)}
.band__in:not(:has(.band__t)){justify-content:flex-end}
/* 頭：英字の注記と一文を一つのかたまりに */
.hero__blk .hero__label{margin-bottom:12px}
/* 上の帯の押せる物は 7 つまで（PC は言葉の切り替えを足元へ） */
@media (min-width:1024px){.hd__lang{display:none}}
.ml1{margin-inline-start:1em}
.dir__name>span{display:block}
.kc__st .nb{display:block}

/* 2026-11-05 最後の採点 §3 */
html[lang="en"] .hours thead th:first-child,html[lang="en"] .hours tbody th{width:5em}
html[lang="en"] .spec dt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:normal;word-break:normal}
.who .who__t .h3{line-height:max(var(--lh4),1.4em)}
/* タブレット（768〜1023）：声のほかは横送りにせず 2 列の格子（最後の採点 3-5） */
@media (min-width:768px) and (max-width:1023px){
  .why6.reel,.sy6.reel,.cl4.reel,.cards3.reel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible;margin-inline:0;padding:0;gap:var(--u) var(--gap)}
  .why6.reel>*,.sy6.reel>*,.cl4.reel>*,.cards3.reel>*{flex:none}
}

/* ══ トップの組み直し（最後の採点 3-6・3-8、縦書き 2026-11-05） ══ */
/* 頭：英字の注記（左下）と、縦書きの一文（右上。Zen Old Mincho）の 2 つだけ */
.hero__v{position:absolute;inset:0 0 auto 0;z-index:2;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:calc(var(--u) * 4);pointer-events:none}
.hv{writing-mode:vertical-rl;-webkit-writing-mode:vertical-rl;text-orientation:mixed;font-family:var(--min);font-weight:500;font-size:var(--f6);line-height:1.9;letter-spacing:.24em;color:#fff;text-shadow:0 2px 24px rgba(10,20,30,.4);max-width:none;font-feature-settings:normal}
.hv .hl{display:block}
.hero--top .hero__shade{background:linear-gradient(0deg,rgba(18,28,40,.5) 0%,rgba(18,28,40,.12) 30%,rgba(18,28,40,0) 55%),linear-gradient(270deg,rgba(18,28,40,.42),rgba(18,28,40,0) 46%)}
@media (min-width:768px){.hero__v{padding-top:calc(var(--u) * 5)}}
@media (max-width:767px){.hero__v{padding-top:calc(var(--u) * 3.5)}}
/* 頭の一文は早く出す（遅れ .3 秒・行ごと .25 秒。出る長さ 1.8 秒はそのまま。採点 2 回目 §5-4） */
.hv .hl{animation:hvIn 1.8s var(--out) both;animation-delay:calc(.3s + var(--i) * .25s)}
@keyframes hvIn{from{opacity:0;translate:0 -20px}to{opacity:1;translate:0 0}}
.is-shot .hv .hl{animation:none!important}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  .hero__v{animation:hdTx linear both;animation-timeline:scroll(root block);animation-range:0px 80vh}
}}
.hs__t--en{margin-top:4px}
.hs__t--en .hl{display:block}
.hero--top .hero__txt{bottom:calc(var(--u) * 3)}
@media (max-width:1023px){.hero--top .hero__txt{bottom:calc(var(--bb) + var(--u) * 2)}}

/* 数：同じ大きさの札にせず、字の幅なりに一行で */
.about__t .facts{display:flex;flex-wrap:wrap;gap:var(--u) calc(var(--u) * 2);grid-template-columns:none;margin-top:var(--u)}
.about__t .fact{flex:0 0 auto}
.about__t .facts+.more-row{margin-top:var(--u)}

/* 三つの整え方：札の列ではなく、細い線で区切る行 */
.apl{display:grid;gap:0;margin-top:calc(var(--u) * 2)}
.apl>.apc{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"ill no" "ill head" "text text";column-gap:16px;padding:var(--u) 0;border-top:1px solid var(--line);background:none;box-shadow:none;border-radius:0;overflow:visible}
.apl>.apc:last-child{border-bottom:1px solid var(--line)}
.apl .apc__ill{grid-area:ill;aspect-ratio:1!important;border-radius:12px!important;mix-blend-mode:multiply;background:transparent;align-self:center}
.apl .apc__b{display:contents;padding:0}
.apl .apc__no{grid-area:no;align-self:end;margin:0}
.apl .apc__b>.h3{grid-area:head;align-self:start;margin:0}
.apl .apc__b>p:last-child{grid-area:text;margin-top:var(--u)}
@media (min-width:768px){
  .apl>.apc{grid-template-columns:160px minmax(0,4fr) minmax(0,6fr);grid-template-areas:"ill no text" "ill head text";column-gap:var(--gap)}
  .apl .apc__b>p:last-child{margin-top:0;align-self:center}
}
.apl+.more-row{margin-top:calc(var(--u) * 2)}

/* 院：始まりの院を大きく、残り 3 院は小さな写真の行（大小の組） */
.kfl{display:grid;gap:0;margin-top:calc(var(--u) * 2)}
@media (min-width:1024px){.kfl{grid-template-rows:auto auto auto 1fr}.kf--big{grid-row:1 / span 4!important}}
.kf__a{display:flex;flex-direction:column;color:inherit}
.kf__b{display:flex;flex-direction:column}
.kf__no{font-size:var(--f2);line-height:var(--lh1);color:var(--gold-t)}
.kf__name{font-size:var(--f3);line-height:var(--lh3);font-weight:600;color:var(--ink);font-feature-settings:"palt" 1;transition:color .5s var(--soft)}
.kf__st{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.kf__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--blue);font-size:var(--f3);transition:color .5s var(--soft)}
.kf__tel .ic{width:18px;height:18px}
@media (hover:hover){.kf__a:hover .kf__name{color:var(--blue)}.kf__tel:hover{color:var(--gold)}}
.kf--big .kf__pic{margin-bottom:var(--u)}
.kf--big .kf__name{font-size:var(--f4);line-height:var(--lh4)}
.kf:not(.kf--big){display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:16px;padding:var(--u) 0;border-top:1px solid var(--line)}
.kf:not(.kf--big):last-child{border-bottom:1px solid var(--line)}
.kf:not(.kf--big) .kf__a{display:contents}
.kf:not(.kf--big) .kf__pic{grid-row:1 / span 2;grid-column:1;align-self:start}
.kf:not(.kf--big) .kf__b{grid-column:2}
.kf:not(.kf--big) .kf__tel{grid-column:2;align-self:start}
.kf--big{margin-bottom:calc(var(--u) * 2)}
@media (min-width:1024px){
  .kfl{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
  .kf--big{grid-column:1 / span 7;grid-row:1 / span 3;margin-bottom:0}
  .kf:not(.kf--big){grid-column:8 / span 5;grid-template-columns:160px minmax(0,1fr);column-gap:var(--gap)}
  .kf:not(.kf--big):first-of-type,.kf--big+.kf{padding-top:0;border-top:0}
}
.kfl+.more-row{margin-top:calc(var(--u) * 2)}

/* 声：一人の声を大きな一文で */
.vb__h{grid-column:1 / -1}
.vb{grid-column:1 / -1;margin-top:calc(var(--u) * 2)}
.vb__q p{font-size:var(--f5);line-height:var(--lh5);font-weight:600;letter-spacing:.02em;color:var(--ink);font-feature-settings:"palt" 1;max-width:24em}
.vb__q p::before{content:"“";display:block;font-family:var(--en);font-size:var(--f6);line-height:var(--lh4);color:var(--gold-t)}
html[lang="ja"] .vb__q p::before{content:none}
.vb,.vb__q{margin:0}
.vb__who{margin-top:var(--u);font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.vb__cl{display:inline-block;margin-left:1em}
.vb .more-row{margin-top:var(--u)}
.vb__note{margin-top:var(--u)}
@media (min-width:768px){.vb__h{grid-column:1 / span 5}.vb{grid-column:6 / span 7;margin-top:0}}

/* 一手：歩く人の地面＝海の水平線（一本の金の線） */
.hope{position:relative;margin-top:var(--sec)}
.hope__t{text-align:center;font-family:var(--min);font-weight:500;font-size:var(--f4);line-height:var(--lh4);letter-spacing:.14em;color:var(--ink);max-width:none;margin-bottom:var(--u)}
html[lang="en"] .hope__t{font-family:var(--en);letter-spacing:.02em}
html[lang="en"] .hope__t .nb+.nb::before{content:" "}
.hope .walk__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:720px;margin:0 auto}
.hope .lp{aspect-ratio:4 / 5;background:transparent;mix-blend-mode:multiply;filter:brightness(1.04)}
.hope__sea{--bh:clamp(240px,30vw,520px);position:relative;height:var(--bh);overflow:clip;background:#3A4656;--ih:max(56.25vw,calc(var(--bh) / .45))}
.hope__img{position:absolute;left:50%;top:calc(var(--ih) * -.55);height:var(--ih);width:calc(var(--ih) / .5625);translate:-50% 0}
.hope__img picture,.hope__img img{display:block;width:100%;height:100%;object-fit:cover}
.hope__sea::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,28,40,.45),rgba(18,28,40,0) 70%)}
.hz--hope{position:absolute;left:0;right:0;top:0;z-index:2;height:1px;background:var(--gold)}
.hope__cap{position:absolute;left:0;right:0;bottom:var(--u);z-index:2;text-align:right;font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--f1);line-height:var(--lh1);letter-spacing:.12em;color:rgba(255,255,255,.88);max-width:none}
@media (max-width:767px){.hope .walk__row{max-width:280px}}

/* 携帯のトップを詰める（色の段の内側の余白・写真の縦横・帯） */
@media (max-width:767px){
  .top .sec--cream,.top .sec--sky{padding-block:calc(var(--u) * 3)}
  .top .about__m .fr--wl{height:calc(var(--u) * 9)}
  .kf:not(.kf--big){grid-template-columns:88px minmax(0,1fr)}
  .top .band{height:min(104vw,440px)}
}
@media (max-width:767px){.kc-cs .kc-cs__t{letter-spacing:0}}
/* PC：上の帯が隠れている間だけ、右上の隅に小さな「ご予約」（最後の採点 3-9） */
.fbk{display:none}
@media (min-width:1024px){
  .fbk{display:inline-flex;align-items:center;position:fixed;top:16px;right:var(--gut);z-index:60;min-height:44px;padding:0 24px;border-radius:22px;background:var(--book);color:#fff;font-size:var(--f1);font-weight:600;letter-spacing:.06em;box-shadow:0 6px 20px rgba(20,40,70,.18);opacity:0;translate:0 -8px;pointer-events:none;transition:opacity .6s var(--soft),translate .6s var(--soft),background-color .5s var(--soft)}
  .hd.is-hide~.fbk{opacity:1;translate:0 0;pointer-events:auto}
  body.menu-open .fbk{opacity:0;pointer-events:none}
}
@media (hover:hover) and (min-width:1024px){.fbk:hover{background:var(--book-d);translate:0 -2px}}
/* 札の中の空きを u と u/2 に（最後の採点 16） */
.btns,.bka{gap:calc(var(--u) / 2)}
.ft6{gap:calc(var(--u) / 2)}
.sy6 .sy__t{margin-top:calc(var(--u) / 2)}
.kf:not(.kf--big) .kf__b{grid-row:1}
.kf:not(.kf--big) .kf__tel{grid-row:2}
.vb__q p{max-width:none}
html[lang="en"] .vb__q p{font-family:var(--en);font-weight:400;letter-spacing:0}
.vb__h .more-row{margin-top:calc(var(--u) * 2)}
.vb__h .vb__note{margin-top:var(--u)}
@media (max-width:767px){.vb__h .more-row,.vb__h .vb__note{display:none}}
@media (min-width:768px){.vb .more-row,.vb .vb__note{display:none}}
.top .vq.sec--cream{padding-block:calc(var(--u) * 3)}

/* 院の頁：同じ大きさの札の列は 1 頁 1 つ（声）まで。ほかは 2 列の、細い線で区切る行（2026-11-05） */
@media (min-width:1024px){
  .why6,.sy6,.ft6s,.sfs{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:var(--gap)!important}
  .ft6s>li.ft6{flex-direction:row;justify-content:flex-start;text-align:left;gap:var(--u);padding:var(--u) 0 0}
}
.apl .apc__no:empty{display:none}
/* 携帯の格子は 4 列（顔の 4 枚が列の頭にそろう）。中身は既定で全幅 */
@media (max-width:767px){.g12{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}.g12>*{grid-column:1 / -1}}
/* 採用の図：字と縁の間を 16px 以上に（携帯） */
@media (max-width:767px){.rc-career .chartbox{padding-inline:calc(var(--u) * 1.2)}.kc-cs .kc-cs__lab{max-width:calc(100% - 16px)}}
/* 英語の行の長さ 45〜75 字：右の欄を広げ、段落の上限を英語の字の幅で（2026-11-05） */
html[lang="en"] p,html[lang="en"] .lead{max-width:40em}
@media (min-width:768px){
  html[lang="en"] .sh:not(.sh--stack) .sh__a{grid-column:1 / span 5}
  html[lang="en"] .sh:not(.sh--stack) .sh__b{grid-column:6 / span 7}
  html[lang="en"] .sh--stack .sh__b{grid-column:1 / span 9}
}

/* 欧文組版（キット layout.css の写し。2026.11.05 なおさん。英文は lang="en" の所だけ。小文字の字間は触らない） */
:where(p,li,dd,figcaption):lang(en){font-variant-numeric:oldstyle-nums proportional-nums;hyphens:auto;text-wrap:pretty}
:where(table,.l-num,[data-num]){font-variant-numeric:lining-nums tabular-nums}
:where(h1,h2,h3,h4,h5,h6):lang(en){hyphens:manual}
/* 和文の中の英単語の前後は、手で空けずに字送りでそろえる（数字の前後は空けない） */
html[lang="ja"] body{text-autospace:ideograph-alpha}
.tlk{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .5s var(--soft)}
@media (hover:hover){.tlk:hover{color:var(--gold)}}
/* 英語の欄を広げる（1 行 10〜12 語に近づける） */
@media (min-width:1024px){html[lang="en"] .co__a{grid-column:1 / span 5}html[lang="en"] .co__b{grid-column:7 / span 6}}
@media (min-width:1280px){html[lang="en"] .bk__t{grid-column:1 / span 5}html[lang="en"] .bk__l{grid-column:7 / span 6}}

/* ══ 採点 2 回目（2026-11-05）：格子と u の拍（16）・一手（14） ══ */
/* 携帯の札・行の間は u（12px をなくす）。横送りの .reel の 12px も上書き */
@media (max-width:767px){
  .why6.reel,.sy6.reel,.why6,.sy6{gap:var(--u) var(--gap)}
  .sfs{gap:var(--u)}
  .ft6s{gap:calc(var(--u) / 2)}
  .cl4.reel{gap:var(--u) var(--gap)}
  .prc__ill{margin-inline:0}
  .cl4{gap:var(--u) var(--gap)}
  .pr2,.ins2{gap:var(--u)}
  /* 三つの整え方：番号と題を絵の下の端にそろえ、本文はその u 下から */
  .apl>.apc{grid-template-rows:1fr auto auto}
}
/* 症状の行：絵の高さの余りは本文の行へ（題→本文は常に u/2） */
.sy6>li.sy{grid-template-rows:auto 1fr}
/* 地図の注記：u/2 の拍に */
.ddmap .ddmap__foot{margin-top:calc(var(--u) / 2);row-gap:0}
/* 保険と自費などの見出し→本文は u/2 */
.ins .h3{margin-bottom:calc(var(--u) / 2)}
.ins>p+p{margin-top:calc(var(--u) / 2)}
/* 格子の外の箱を列の線に：声の頁の脇の絵・当院紹介の案内の絵（右の 2 列いっぱい）、送信後の頁（12 列） */
@media (min-width:768px){
  .vg__side{grid-column:11 / span 2;justify-self:stretch;width:auto}
  .vg__side .kch,.vg__side .lp{width:100%}
  .ob-in__c{grid-column:11 / span 2;justify-self:stretch}
  .ob-in__c .kch{width:100%}
  .nf__g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .nf__c{grid-column:1 / span 2}
  .nf__c .kch{width:100%}
  .nf__t{grid-column:3 / span 10}
}
/* APPROACH の印は線だけ（白地の線画を地に溶かす） */
.apl .apc__ill--ln{background:transparent;mix-blend-mode:multiply;filter:brightness(1.03)}

/* 動きを減らす（会社の標準 2026-11-05）：端末の設定、または <html data-motion="reduce"> のどちらかで止める。色の変化だけ 150ms まで残す */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-duration:.15s!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js [data-rv],html.js .has-ln>.ln,html.js .has-ln>.lu,html.js [data-hz],html.js .fr[data-rv]{opacity:1!important;transform:none!important}
  .fr img,.fr[data-rv] img,a:hover .fr img,a:hover .fr.is-in img{scale:1!important;translate:none!important}
  a:hover,button:hover,.btn:hover,.fbk:hover,.ob-idx a:hover{translate:none!important}
  .hs .hl,.hs .hs__en{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important}
}

/* ══ 頭の言葉（案 C。2026-11-05 なおさん）：右上の縦書きと左下の小さな字を 1 組にして、動画のカットに合わせて入れ替える ══ */
.hero__scenes{position:absolute;inset:0;z-index:2;display:grid;pointer-events:none}
.hero__scenes .hs{grid-area:1 / 1;position:relative;align-self:stretch}
.hs__vw{position:absolute;inset:0 0 auto 0;display:flex;justify-content:flex-end;align-items:flex-start;padding-top:calc(var(--u) * 5)}
.hs__sw{position:absolute;left:0;right:0;bottom:calc(var(--u) * 3)}
.hs__s{max-width:30em;font-size:var(--f2);line-height:var(--lh2);letter-spacing:.06em;color:rgba(255,255,255,.94);text-shadow:0 1px 16px rgba(10,20,30,.45)}
.hs__s--en{font-family:var(--en);font-style:italic;font-weight:300;font-size:var(--f1);letter-spacing:.12em;color:rgba(255,255,255,.88)}
.hero__scenes .hv .hl{animation:none}
/* 縦書きは上から拭うように現れる */
.hs .hv .hl{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 60%);mask-image:linear-gradient(180deg,#000 40%,transparent 60%);-webkit-mask-size:100% 260%;mask-size:100% 260%;-webkit-mask-position:0 100%;mask-position:0 100%}
.hs.is-on .hv .hl{-webkit-mask-position:0 0;mask-position:0 0}
.hs.is-out .hv .hl{-webkit-mask-position:0 -160%;mask-position:0 -160%}
/* 行ごとに少しずつずらす（縦書きの 1 行目 → 2 行目 → 左下の行。八木が谷の「1 行ずつずらす」） */
.hero__scenes .hs.is-on .hl{transition-delay:calc(.8s + var(--i,0) * .32s)}
/* 消える字は 0.7 秒で去り、次の字はその後（0.8 秒）から出す。同じ所で前と後が重なって見えないように（2026-11-05 なおさん「消えるタイミングで二重表示」） */
.hero__scenes .hs.is-out .hl{transition:-webkit-mask-position .7s var(--soft),mask-position .7s var(--soft),opacity .6s var(--soft)}
.hero__scenes .hs__s .hl{display:block}
/* 開いた時の最初の 1 組も、同じ順で 1 行ずつ現れる（backwards なので、出た後は入れ替えの動きを邪魔しない） */
.hero__scenes .hs.is-on:first-child .hl{animation:hsIn 1.6s var(--soft) backwards;animation-delay:calc(.5s + var(--i,0) * .32s)}
@keyframes hsIn{from{opacity:0;-webkit-mask-position:0 100%;mask-position:0 100%}}
.hero__scenes .hs.is-on:first-child .hs__s .hl{animation-name:hsInS}
@keyframes hsInS{from{opacity:0;-webkit-mask-position:100% 0;mask-position:100% 0}}
html[lang="en"] .hv{writing-mode:horizontal-tb;-webkit-writing-mode:horizontal-tb;font-family:var(--en);font-weight:300;letter-spacing:0;line-height:var(--lh6);text-align:left}
@media (max-width:767px){.hs__vw{padding-top:calc(var(--u) * 3.5)}.hs__s{max-width:none}html[lang="en"] .hs__vw{justify-content:flex-start}}
@media (max-width:1023px){.hs__sw{bottom:calc(var(--bb) + var(--u) * 2)}}
.is-shot .hero__scenes{animation:none!important}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:scroll()){
  .hero__scenes{animation:hdTx linear both;animation-timeline:scroll(root block);animation-range:0px 80vh}
}}
@media (prefers-reduced-motion:reduce){
  .hero__scenes,.hero__scenes .hl{animation:none!important}
  .hero__scenes .hs:not(:first-child){display:none}
}

/* ══ 頭の言葉の字組み（2026-11-05 なおさん「文字組が全く感じられない。素組み」）══
   縦：かなを一回り小さく漢字を立てる・句読点は半角どり（vpal）・2 行目は一字半下げて段差・行間は詰めて一つの塊に。
   左下：引用のかぎはぶら下げ、名は金の細線から。 */
.hero__scenes .hv{font-feature-settings:"vpal" 1;letter-spacing:.14em;line-height:1.22}
.hero__scenes .hv .kn{font-size:.86em;letter-spacing:.2em}
.hero__scenes .hv .pk{letter-spacing:0}
.hero__scenes .hv .hl + .hl{padding-inline-start:1.5em}
html[lang="en"] .hero__scenes .hv{font-feature-settings:normal;letter-spacing:.005em;line-height:1.18}
html[lang="en"] .hero__scenes .hv .hl + .hl{padding-block-start:0;padding-inline-start:1.2em}
.hs__s{font-feature-settings:"palt" 1;letter-spacing:.1em}
.hs__s .hs__q{word-break:keep-all;margin-left:-.5em}
.hs__by{display:flex!important;flex-wrap:wrap;align-items:baseline;column-gap:14px;margin-top:10px;font-size:var(--f1);letter-spacing:.14em;color:rgba(255,255,255,.86)}
.hs__by::before{content:"";flex:0 0 24px;height:1px;align-self:center;background:var(--gold)}
.hs__role,.hs__name{white-space:nowrap}
.hs__name{font-family:var(--min);font-size:var(--f3);letter-spacing:.24em;color:#fff}
html[lang="en"] .hs__s{font-feature-settings:normal;letter-spacing:.01em}
html[lang="en"] .hs__by{letter-spacing:.08em;font-size:var(--f1)}
html[lang="en"] .hs__name{font-family:var(--en);font-style:italic;font-size:var(--f3);letter-spacing:.02em;text-transform:none}

/* ══════════════════════════════════════════════════════════════════════
   八木が谷土台（2026-11-05 カヲル 第 1 段：トップと上の帯・メニュー）
   なおさん「ページレイアウトが 50 点。フォントセレクトも 50 点」「院への誘導、人材募集の誘導が全くかんがえられていない」→「八木が谷を土台に」。
   正本＝yakigaya-static の完成版（site/index.html・style.css）。持ってきた物：
   ・段の組み：見出しは明朝で字間を広く（.1em）、英字の小見出しは金の短い線＋大文字、本文は細い字で左に寄せ、写真は角を立てる（角丸なし）、
     「考え」の段は大きな写真に小さな写真を縁付きで重ねる、数は金の大きな数字を細い線の上に、帯は左下に横組みの一文と金の短い線。
   ・書体の組（3 家族）：和文の見出し＝しっぽり明朝 500、本文＝ヒラギノ角ゴ（ほかの端末は BIZ UDPGothic）、英字と数字＝Newsreader（なおさんが八木が谷で選んだ英字）。
     頭の縦書きだけ Zen Old Mincho（案 C のまま）。丸ゴシックは使わない。字は 15px 以上。
   ・上の帯：字だけのメニュー（触れると下に線が伸びる）＋右端に線の囲み（採用情報＋募集中）と塗りの「ご予約」。角は立てる。
   残した物：色・予約のボタンの色（電話 #1E7AB8・LINE #04843B 白い字）・頭の動画と言葉・動き（#1 の値）・携帯の下の帯・動きを減らす設定。
   第 1 段はトップ（body.top）と、全頁で共通の上の帯・引き出し・下の帯だけ。下層の段の組みは第 2 段（なおさんの OK の後）。
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --serif:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --disp:"Hiragino Mincho ProN","Shippori Mincho","Yu Mincho",serif;
  --br:2px;
}
body.top{--en:"Newsreader","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",sans-serif}

/* ── 上の帯（全頁） ── */
.hd__nav{display:none}
.hd__end{margin-left:auto}
.hd__nav ul{gap:30px}
.hd__nav li{position:relative}
.hd__nav a,.hd__ddb{position:relative;display:flex;align-items:center;gap:6px;min-height:44px;font-size:var(--f1);font-weight:400;letter-spacing:.14em;font-feature-settings:"palt" 1}
.hd__nav a::after,.hd__ddb::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--out)}
.hd__ddb::after{right:18px}
.hd__nav a[aria-current]::after,.hd__ddb[aria-current]::after{transform:none;transform-origin:left}
@media (hover:hover){.hd__nav a:hover::after,.hd__ddb:hover::after,.hd__dd.is-open .hd__ddb::after{transform:none;transform-origin:left}}
.hd__ddb .ic--dn{width:12px;height:12px;flex:none;transition:rotate .5s var(--soft)}
.hd__dd.is-open .ic--dn{rotate:180deg}
/* 採用情報（線の囲み）＋募集中の金の印 */
.bdg{display:inline-flex;align-items:center;flex:none;height:24px;padding:0 8px;background:var(--gold-t);color:#fff;font-family:var(--sans);font-size:var(--f1);font-weight:600;line-height:1;letter-spacing:.08em;white-space:nowrap}
html[lang="en"] .bdg{letter-spacing:.04em}
.hd__rc{display:none;align-items:center;gap:12px;min-height:44px;padding:0 12px 0 18px;border:1px solid rgba(26,32,40,.35);font-size:var(--f1);letter-spacing:.14em;white-space:nowrap;
  transition:border-color .5s var(--soft),color .5s var(--soft),background-color .5s var(--soft),translate .5s var(--soft)}
.hd--over:not(.is-solid) .hd__rc{border-color:rgba(255,255,255,.7)}
@media (hover:hover){.hd__rc:hover{border-color:var(--gold);color:var(--gold-t);translate:0 -1px}.hd--over:not(.is-solid) .hd__rc:hover{border-color:var(--gold-l);color:var(--gold-l)}}
.hd__rc[aria-current]{border-color:var(--gold)}
@media (min-width:600px){.hd__rc{display:inline-flex}}
.hd__book{border-radius:var(--br);padding:0 26px;font-weight:400;letter-spacing:.16em}
@media (min-width:1024px) and (max-width:1199.98px){.burger{display:block!important}.hd__end{gap:16px}}
@media (min-width:1200px){
  .hd__nav{display:block;margin-left:auto}
  .hd__end{margin-left:30px}
  .burger{display:none!important}
}
@media (min-width:1360px){.hd__nav ul{gap:40px}}
/* 院を探す：押すと 4 院の板（白い紙。地名つき） */
.dd{position:absolute;top:calc(100% + 14px);left:-28px;width:620px;padding:12px 28px 20px;background:var(--white);color:var(--ink);box-shadow:0 1px 0 var(--line-g),0 24px 48px -20px rgba(26,40,60,.35);
  opacity:0;visibility:hidden;translate:0 -8px;transition:opacity .45s var(--soft),translate .45s var(--soft),visibility 0s linear .45s}
.dd::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.hd__dd.is-open .dd{opacity:1;visibility:visible;translate:0 0;transition:opacity .45s var(--soft),translate .45s var(--soft)}
.dd__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
.dd__a{display:flex;flex-direction:column;padding:16px 0;border-bottom:1px solid var(--line);min-height:0!important;gap:0!important;letter-spacing:.04em!important}
.dd__a::after{display:none}
.dd__ar{font-size:var(--f1);line-height:var(--lh1);color:var(--gold-t);letter-spacing:.1em}
.dd__nm{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.08em;color:var(--ink);transition:color .5s var(--soft)}
.dd__st{font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
@media (hover:hover){.dd__a:hover .dd__nm{color:var(--blue)}}
.dd__all{margin-top:12px;max-width:none}
html[lang="en"] .dd__nm{font-family:var(--disp);font-weight:400;letter-spacing:0}

/* 引き出し（1199px まで）：一番上に 4 院と「スタッフ募集中」、その下にメニュー（八木が谷：明朝の項目＋右に英字の小さな札） */
.dr__in{padding-top:calc(var(--hd) + var(--u) / 2)}
.dr__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 calc(var(--u) / 2);color:var(--ink);letter-spacing:.08em}
.dr__hjp{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3)}
.dr__hen{order:2;font-family:var(--disp);font-style:italic;font-size:var(--f1);color:var(--gold-t);letter-spacing:.06em}
.dr__cl{display:grid;gap:0;border-top:1px solid rgba(37,89,155,.2)}
.dr__c{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(37,89,155,.2);background:none;box-shadow:none;border-radius:0}
.dr__n{display:flex;flex-direction:column}
.dr__ar,.dr__st{font-size:var(--f1);line-height:1.6;color:var(--lab);font-weight:400}
.dr__ar{color:var(--gold-t);letter-spacing:.08em}
.dr__nm{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:1.5;letter-spacing:.06em;color:var(--ink);transition:color .5s var(--soft)}
.dr__tel{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--br);background:var(--book);color:#fff;transition:background-color .5s var(--soft)}
.dr__tel .ic{width:22px;height:22px}
@media (hover:hover){.dr__n:hover .dr__nm{color:var(--blue)}.dr__tel:hover{background:var(--book-d)}}
.dr__rc{display:grid;grid-template-columns:auto minmax(0,1fr) 24px;grid-template-areas:"b h a" "b s a";align-items:center;column-gap:16px;margin-top:var(--u);padding:16px 20px;background:var(--white);color:var(--ink);box-shadow:var(--shadow);
  transition:translate .5s var(--soft),box-shadow .5s var(--soft)}
.dr__rc .bdg{grid-area:b}
.dr__rch{grid-area:h;font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:1.5;letter-spacing:.08em}
.dr__rcs{grid-area:s;font-size:var(--f1);line-height:1.6;color:var(--lab)}
.dr__rc .ic--ar{grid-area:a;width:24px;height:12px;color:var(--gold);transition:translate .5s var(--soft)}
@media (hover:hover){.dr__rc:hover{translate:0 -2px;box-shadow:var(--shadow-h)}.dr__rc:hover .ic--ar{translate:4px 0}}
.dr__nav{margin-top:var(--u)}
.dr__nav li{border-bottom:1px solid rgba(37,89,155,.2)}
.dr__nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:56px;padding:14px 0 10px;font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:1.6;letter-spacing:.12em;transition:color .5s var(--soft)}
.dr__nav a small{font-family:var(--sans);font-size:var(--f1);font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--lab)}
@media (hover:hover){.dr__nav a:hover{color:var(--blue)}}
html[lang="en"] :is(.dr__nm,.dr__rch,.dr__hjp,.dr__nav a){font-family:var(--disp);font-weight:400;letter-spacing:.01em}
.dr__lang{margin-top:var(--u)}
/* 下の帯と 4 院の板も角を立てる（八木が谷の .btn） */
.bb__b,.bs__c,.bs .btn,.dr .btn{border-radius:var(--br)}

/* ── トップの字（明朝の見出し・字間を広く） ── */
body.top :is(.h2,.h3){font-family:var(--serif);font-weight:500}
body.top .h2{letter-spacing:.1em}
body.top .lead{font-family:var(--serif);font-weight:500;letter-spacing:.06em;color:var(--txt)}
body.top .fr,body.top .fr img{border-radius:0}
body.top .btn{border-radius:var(--br)}
/* 英字の小見出し：金の短い線＋大文字（漢字一字は使わない）。線は左から引かれる＝一手 */
body.top .eb{gap:16px}
body.top .eb__k{display:none}
body.top .eb__hz{order:-1;flex:0 0 40px;max-width:40px;background:var(--gold)}
body.top .eb__e{letter-spacing:.3em;color:var(--gold-t)}
/* ページを移るリンク：字＋下線＋矢印。触れると青い線が伸びる（八木が谷の .more） */
body.top .more{gap:14px;font-weight:400;letter-spacing:.16em;color:var(--ink);
  background:linear-gradient(var(--blue),var(--blue)) 0 calc(100% - 6px) / 0 1px no-repeat,linear-gradient(rgba(26,32,40,.45),rgba(26,32,40,.45)) 0 calc(100% - 6px) / 100% 1px no-repeat;
  transition:background-size .6s var(--out),color .5s var(--out)}
body.top .more i{width:18px;transition:translate .6s var(--out)}
@media (hover:hover){body.top .more:hover{color:var(--blue);background-size:100% 1px,100% 1px}body.top .more:hover i{width:18px;translate:6px 0}}
.tmore{display:flex;flex-wrap:wrap;gap:0 40px}
.tmore .more--go{color:var(--blue)}

/* ── 頭：入口の帯（下の端。PC は白い紙が頭に食い込む形、携帯は頭の下の段） ── */
.hero--top{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);height:calc(100svh - var(--bb));min-height:560px}
.hero--top>.hero__media,.hero--top>.hero__shade{grid-row:1 / -1;grid-column:1}
.hero--top>.hero__scenes{position:relative;inset:auto;grid-row:1;grid-column:1;min-height:0}
.hero--top .hs__sw{bottom:calc(var(--u) * 2)}
.hero--top>.ent{grid-row:2;grid-column:1;position:relative;z-index:3}
@media (max-width:767px){.hero--top>.hero__media,.hero--top>.hero__shade{grid-row:1}}
.ent__in{position:relative;display:grid;background:var(--white);color:var(--ink)}
.hz--ent{position:absolute;left:0;right:0;top:0;z-index:2;height:1px;background:var(--gold)}
.ent__h{display:flex;flex-direction:column;justify-content:center;max-width:none}
.ent__hen{font-family:var(--disp);font-style:italic;font-size:var(--f1);line-height:var(--lh1);letter-spacing:.06em;color:var(--gold-t)}
.ent__hjp{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.1em}
.ent__l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.ent__a{position:relative;display:flex;flex-direction:column;justify-content:center;height:100%;transition:background-color .5s var(--soft)}
.ent__ar{font-size:var(--f1);line-height:var(--lh1);letter-spacing:.1em;color:var(--gold-t)}
.ent__nm{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:1.5;letter-spacing:.06em;color:var(--ink);transition:color .5s var(--soft)}
.ent__a .ic--ar,.ent__rc .ic--ar{position:absolute;right:20px;bottom:22px;width:24px;height:12px;color:var(--gold);transition:translate .6s var(--out),color .5s var(--soft)}
.ent__rc{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--sky);color:var(--ink);transition:background-color .5s var(--soft)}
.ent__rc .bdg{align-self:flex-start;margin-bottom:6px}
.ent__rch{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:1.5;letter-spacing:.1em}
.ent__rcs{font-size:var(--f1);line-height:var(--lh1);color:var(--lab);letter-spacing:.06em}
@media (hover:hover){
  .ent__a:hover{background:var(--sky)}.ent__a:hover .ent__nm{color:var(--blue)}.ent__a:hover .ic--ar{translate:6px 0;color:var(--blue)}
  .ent__rc:hover{background:var(--sky2)}.ent__rc:hover .ic--ar{translate:6px 0;color:var(--blue)}
}
html[lang="en"] :is(.ent__hjp,.ent__nm,.ent__rch){font-family:var(--disp);font-weight:400;letter-spacing:.01em}
html[lang="en"] .ent__ar{letter-spacing:.06em}
/* PC（1280 から）：1 行に「見出し｜4 院｜募集中」 */
@media (min-width:1280px){
  .ent__in{grid-template-columns:auto minmax(0,1fr) 260px;align-items:stretch}
  .ent__h{padding:28px 36px 28px 32px}
  .ent__l li{border-left:1px solid var(--line)}
  .ent__a{padding:24px 52px 24px 24px;min-height:112px}
  .ent__rc{padding:24px 56px 24px 28px}
}
/* タブレット・小さな PC（768〜1279）：上の行に見出しと募集中、下の行に 4 院 */
@media (min-width:768px) and (max-width:1279.98px){
  .ent__in{grid-template-columns:minmax(0,1fr) auto}
  .ent__h{padding:20px 24px 12px}
  .ent__rc{grid-row:1 / span 2;grid-column:2;padding:20px 56px 20px 28px;min-width:240px}
  .ent__l{grid-column:1;border-top:1px solid var(--line)}
  .ent__l li+li{border-left:1px solid var(--line)}
  .ent__a{padding:16px 44px 16px 24px;min-height:96px}
  .ent__a .ic--ar{right:14px;bottom:18px}
}
/* 携帯：頭の下の段（白）。見出し → 4 院（2×2）→ 募集中の行 */
@media (max-width:767px){
  .ent .w{padding-inline:0}
  .ent__in{grid-template-columns:minmax(0,1fr);padding:18px var(--gut) 14px}
  .ent__h{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px}
  .ent__hen{order:2}
  .ent__hjp{font-size:var(--f3);line-height:1.5}
  .ent__l{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ent__a{min-height:56px;padding:8px 32px 8px 12px;border:1px solid var(--line)}
  .ent__ar{line-height:1.5}
  .ent__nm{font-size:var(--f2);line-height:1.4}
  .ent__a .ic--ar{right:10px;bottom:auto;top:calc(50% - 6px);width:16px}
  .ent__rc{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"b h" "b s";column-gap:12px;align-items:center;margin-top:8px;padding:10px 40px 10px 12px}
  .ent__rc .bdg{grid-area:b;margin:0;align-self:center}
  .ent__rch{grid-area:h;font-size:var(--f2);line-height:1.4}
  .ent__rcs{grid-area:s;line-height:1.5}
  .ent__rc .ic--ar{right:12px;bottom:auto;top:calc(50% - 6px);width:20px}
  .hz--ent{display:none}
  .hero--top .hs__sw{bottom:var(--u)}
}
/* 画面の低い携帯（SE など）：縦書きを一段小さく、上に寄せる */
@media (max-width:767px) and (max-height:720px){
  .hero--top .hv{font-size:var(--f5)}
  .hero--top .hs__vw{padding-top:calc(var(--u) * 2.5)}
}

/* ── 院（2 番目）：4 院を写真の札で。携帯は横に送る列 ── */
.tc{scroll-margin-top:var(--hd)}
.ccl{display:grid;gap:calc(var(--u) * 2) var(--gap)}
@media (min-width:768px){.ccl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.ccl{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:768px) and (max-width:1023.98px){.ccl.reel{display:grid!important;overflow:visible;margin-inline:0;padding:0}.ccl.reel>*{flex:none}}
.cc{display:flex;flex-direction:column}
.cc__a{display:flex;flex-direction:column}
.cc__pic{margin-bottom:var(--u)}
.cc__no{display:flex;align-items:baseline;gap:14px;color:var(--gold-t)}
.cc__no .num{font-size:var(--f3);line-height:var(--lh1);letter-spacing:.04em}
.cc__ar{font-size:var(--f1);line-height:var(--lh1);letter-spacing:.1em;color:var(--lab)}
.cc__nm{margin-top:4px;font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.08em;color:var(--ink);transition:color .5s var(--soft)}
@media (hover:hover){.cc__a:hover .cc__nm{color:var(--blue)}}
.cc__st{margin-top:calc(var(--u) / 2);font-size:var(--f1);line-height:var(--lh1);color:var(--lab)}
.cc__hr{display:flex;flex-direction:column;font-size:var(--f1);line-height:var(--lh1);color:var(--ink)}
.hrl{display:flex;flex-wrap:wrap;column-gap:10px}
.hrl__d{color:var(--lab)}
.cc__bk{margin-top:var(--u)}
.cc__more{margin-top:calc(var(--u) / 2);max-width:none}
html[lang="en"] .cc__nm{font-family:var(--disp);font-weight:400;letter-spacing:.01em}

/* ── 施術の三つ：細い線の上に金の短い線、金の番号と明朝の題（八木が谷の「流れ」） ── */
.a3l{display:grid;gap:calc(var(--u) * 2) var(--gap)}
@media (min-width:1024px){.a3l{grid-template-columns:repeat(3,minmax(0,1fr))}}
.a3{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;padding-top:var(--u);border-top:1px solid var(--line)}
.a3::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--gold)}
.a3__ill{width:200px;aspect-ratio:1;background:transparent;mix-blend-mode:multiply;filter:brightness(1.03);margin-bottom:calc(var(--u) / 2)}
.a3__no{display:flex;align-items:baseline;gap:14px;max-width:none;color:var(--gold-t)}
.a3__no .num{font-family:var(--disp);font-weight:300;font-size:var(--f5);line-height:var(--lh5);color:var(--gold)}
.a3__e{font-size:var(--f1);letter-spacing:.24em;text-transform:uppercase}
.a3__h{font-size:var(--f4);line-height:var(--lh4);letter-spacing:.1em}
.a3__p{margin-top:calc(var(--u) / 2);color:var(--txt)}
@media (max-width:767px){
  .a3{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"ill no" "ill h" "p p";column-gap:16px}
  .a3__ill{grid-area:ill;width:96px;margin:0;align-self:center}
  .a3__no{grid-area:no;align-self:end}
  .a3__no .num{font-size:var(--f4);line-height:var(--lh4)}
  .a3__h{grid-area:h;align-self:start}
  .a3__p{grid-area:p;margin-top:var(--u)}
}
.a3l+.tmore,.ccl+.tmore{margin-top:calc(var(--u) * 2)}

/* ── 帯（施術の手元のループ）：左下に横組みの明朝の一文と、金の短い線の英字（八木が谷の帯） ── */
.band--yk{height:min(112vw,560px)}
@media (min-width:768px){.band--yk{height:clamp(520px,46vw,860px)}}
.band--yk .band__shade{background:radial-gradient(ellipse 75% 65% at 0% 100%,rgba(14,24,36,.42),rgba(14,24,36,0) 72%),linear-gradient(0deg,rgba(14,24,36,.62),rgba(14,24,36,.12) 55%,rgba(14,24,36,0))}
.band--yk .band__in{align-items:flex-start;justify-content:flex-end;padding-block:calc(var(--u) * 2)}
.band__copy{max-width:none;font-family:var(--serif);font-weight:500;font-size:var(--f5);line-height:var(--lh5);letter-spacing:.14em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.3)}
@media (min-width:768px){.band__copy{font-size:var(--f6);line-height:calc(var(--u) * 3)}}
.band__sub{display:flex;align-items:center;gap:14px;margin-top:var(--u);max-width:none;font-family:var(--disp);font-style:italic;font-size:var(--f1);line-height:var(--lh1);letter-spacing:.12em;color:rgba(255,255,255,.9)}
.band__sub::before{content:"";width:28px;height:1px;background:var(--gold-l)}
html[lang="en"] .band__copy{font-family:var(--disp);font-weight:300;letter-spacing:.005em;line-height:1.25}

/* ── 声：一人の声を明朝の大きな一文で ── */
body.top .vb__q p{font-family:var(--serif);font-weight:500;font-size:var(--f4);line-height:var(--lh5);letter-spacing:.08em}
@media (max-width:767px){body.top .vb__q p{line-height:var(--lh4)}}
html[lang="en"] body.top .vb__q p{font-family:var(--disp);font-weight:400;letter-spacing:0;line-height:var(--lh4)}
body.top .vb .tmore{margin-top:var(--u)}

/* ── 採用（大きな帯）：用件の見出し・要点の 4 行・二つの入口。左に背中の写真と仲間の顔 ── */
.tr{scroll-margin-top:var(--hd)}
.tr__g{align-items:center}
@media (min-width:1024px){.tr__m{grid-column:1 / span 6}.tr__t{grid-column:8 / span 5}}
@media (min-width:768px) and (max-width:1023.98px){.tr__m,.tr__t{grid-column:1 / -1}}
.tr__pic{aspect-ratio:3 / 2}
.tr__faces{margin-top:var(--gap);gap:12px}
@media (min-width:768px){.tr__faces{gap:16px}}
.tr__eb{flex-wrap:wrap}
.tr__eb .bdg{margin-left:4px}
.tr__catch{margin-top:var(--u)}
.tr__p{margin-top:calc(var(--u) / 2)}
.tr__dl{margin-top:var(--u);border-top:1px solid rgba(37,89,155,.22)}
.tr__dl>div{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:16px;padding:10px 0;border-bottom:1px solid rgba(37,89,155,.22)}
.tr__dl dt{font-size:var(--f1);line-height:var(--lh2);color:var(--gold-t);letter-spacing:.1em}
.tr__dl dd{margin:0;font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
html[lang="en"] .tr__dl>div{grid-template-columns:8.5em minmax(0,1fr)}
.tr__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u);max-width:none}
.tr__btns .btn{gap:16px;min-height:56px;padding:0 24px 0 28px;font-weight:400;letter-spacing:.14em}
.tr__btns .btn .ic--ar{width:22px;height:11px;flex:none;transition:translate .6s var(--out)}
.btn--rc{background:var(--blue);color:#fff}
.btn--rc2{border:1px solid var(--blue);color:var(--blue);background:transparent}
@media (hover:hover){
  .btn--rc:hover{background:var(--blue-d);translate:0 -2px;box-shadow:0 10px 20px -12px rgba(37,89,155,.7)}
  .btn--rc2:hover{background:var(--white);translate:0 -2px}
  .tr__btns .btn:hover .ic--ar{translate:5px 0}
}
@media (max-width:767px){.tr__btns .btn{flex:1 1 100%;justify-content:space-between}}

/* ── 希望（歩く人の地面＝海の水平線）：明朝に ── */
.hope__t{font-family:var(--serif)}

/* ── 会社と理念（八木が谷の「考え」：大きな写真に小さな写真を縁付きで重ねる＋金の大きな数） ── */
.tb__g{display:grid;gap:calc(var(--u) * 2)}
@media (min-width:900px){.tb__g{grid-template-columns:5fr 6fr;column-gap:clamp(64px,8vw,128px);align-items:center}}
.tb__imgs{position:relative}
.tb__a{width:100%}
.tb__b{position:absolute;right:0;bottom:0;width:58%;outline:10px solid var(--white);outline-offset:0}
.tb__h{font-size:var(--f5);line-height:var(--lh5)}
@media (min-width:1024px){.tb__h{font-size:var(--f6);line-height:calc(var(--u) * 3)}}
.tb .lead{margin-top:var(--u)}
.tb__ph{margin-top:calc(var(--u) * 2);max-width:34em}
.tb__phh{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.1em;color:var(--ink);margin-bottom:calc(var(--u) / 2)}
.tb__cr{border-top:1px solid var(--line)}
.tb__cr li{display:flex;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--f2);line-height:var(--lh2);color:var(--ink)}
.tb__cr .no{font-family:var(--disp);color:var(--gold-t)}
.tb .tmore{margin-top:var(--u)}
.fcl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:calc(var(--u) * 3);border-top:1px solid var(--line)}
.fc{position:relative;display:flex;flex-direction:column;padding:var(--u) 16px var(--u) 0;border-right:1px solid var(--line)}
.fc+.fc{padding-left:16px}
.fc:last-child{border-right:0}
.fc::before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--gold)}
.fc+.fc::before{left:16px}
.fc__k{font-size:var(--f1);line-height:var(--lh1);letter-spacing:.14em;color:var(--lab)}
.fc__v{margin-top:calc(var(--u) / 2);font-family:var(--disp);font-weight:300;font-size:var(--f5);line-height:var(--lh5);color:var(--gold);letter-spacing:.02em}
.fc__v small{margin-left:6px;font-family:var(--sans);font-size:var(--f1);font-weight:400;color:var(--ink);letter-spacing:.1em}
@media (min-width:768px){.fc{padding:var(--u) 24px var(--u) 0}.fc+.fc{padding-left:32px}.fc+.fc::before{left:32px}.fc__v{font-size:var(--f6);line-height:calc(var(--u) * 2)}}
html[lang="en"] .tb__phh{font-family:var(--disp);font-weight:400;letter-spacing:.01em}

/* ── 英語の頁：見出しは Newsreader（明朝の字間は使わない） ── */
html[lang="en"] body.top :is(.h2,.h3,.a3__h){font-family:var(--disp);font-weight:400;letter-spacing:0;line-height:1.25}
html[lang="en"] body.top .lead{font-family:var(--disp);font-weight:400;letter-spacing:0}
html[lang="en"] body.top .eb__e{letter-spacing:.2em}

/* 動きを減らす：触れた時の動きも止める（色の変化だけ残す） */
@media (prefers-reduced-motion:reduce){
  .dd,.hd__dd.is-open .dd{translate:none!important}
  .ent__a:hover .ic--ar,.ent__rc:hover .ic--ar,.dr__rc:hover,.dr__rc:hover .ic--ar,.tr__btns .btn:hover,.tr__btns .btn:hover .ic--ar,.hd__rc:hover,body.top .more:hover i{translate:none!important}
  .hd__ddb .ic--dn{transition:none!important}
}

/* ══ 頭：開き（海）→ 4 院を順に溶かして切り替える（2026-11-05 なおさん「病院 4 つも分かりやすく順番に」「左下に病院の名前、右上に縦で明朝」）══ */
.hero--top>.hero__media{isolation:isolate;z-index:0}
.hero--top>.hero__shade{z-index:1}
.hsl{position:absolute;inset:0;opacity:0;z-index:1}
.hsl.is-prev{opacity:1;z-index:2}
.hsl.is-on{opacity:1;z-index:3;animation:hslIn 1.6s cubic-bezier(.45,0,.25,1) both}
.hsl:first-child.is-on{animation:none}
@keyframes hslIn{from{opacity:0}to{opacity:1}}
/* 右上：縦書きの明朝（Zen Old Mincho）と、その下に言った人 */
.hero--top .hs__vw{padding-top:min(calc(var(--u) * 5),16svh)}
.hs__vb{display:flex;flex-direction:column;align-items:flex-end;gap:var(--u)}
.hero--top .hv{font-size:min(var(--f6),6.2svh)}
.hero--top .hs__s{max-width:22em;text-align:right;font-size:var(--f1);line-height:var(--lh1)}
.hero--top .hs__s .hs__q{margin-left:0}
.hero--top .hs__by{justify-content:flex-end}
@media (max-width:767px){.hero--top .hs__s{display:none}}
/* 左下：今映っている院（院の頁へ）。数（1／4）・地名と駅・院の名・院の頁へ */
.hs.is-on .hcl{pointer-events:auto}
.hcl{display:inline-flex;flex-direction:column;align-items:flex-start;max-width:100%;color:#fff;text-shadow:0 1px 18px rgba(10,20,30,.5)}
.hcl__n{display:flex!important;align-items:center;gap:12px;margin-bottom:calc(var(--u) / 2);font-family:var(--disp);font-size:var(--f1);line-height:var(--lh1);letter-spacing:.08em;color:var(--gold-l)}
.hcl__n .num{font-family:var(--disp)}
.hcl__n i{display:block;width:40px;height:1px;background:rgba(255,255,255,.55)}
.hcl__ar{font-size:var(--f1);line-height:var(--lh1);letter-spacing:.1em;color:rgba(255,255,255,.94)}
.hcl__sep{display:inline-block;width:16px;height:1px;margin:0 10px;vertical-align:middle;background:rgba(255,255,255,.6)}
.hcl__nm{margin-top:4px;font-family:var(--serif);font-weight:500;font-size:var(--f5);line-height:var(--lh5);letter-spacing:.12em;color:#fff}
.hcl__nm--s{font-size:var(--f4);line-height:var(--lh4)}
.hcl__go{display:inline-flex!important;align-items:center;gap:14px;min-height:44px;font-size:var(--f1);letter-spacing:.16em;color:#fff}
.hcl__go span{padding-bottom:3px;background:linear-gradient(var(--gold-l),var(--gold-l)) 0 100% / 0 1px no-repeat,linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)) 0 100% / 100% 1px no-repeat;transition:background-size .6s var(--out)}
.hcl__go .ic--ar{width:24px;height:12px;flex:none;color:var(--gold-l);transition:translate .6s var(--out)}
@media (hover:hover){.hcl:hover .hcl__go span{background-size:100% 1px,100% 1px}.hcl:hover .hcl__go .ic--ar{translate:6px 0}}
html[lang="en"] .hcl__nm{font-family:var(--disp);font-weight:400;letter-spacing:.005em;line-height:1.2}
@media (max-width:767px){
  .hcl__nm{font-size:var(--f4);line-height:var(--lh4)}
  .hcl__nm--s{font-size:var(--f3);line-height:var(--lh3)}
  .hcl__ar .hcl__sep{display:none}
  .hcl__ar .nb{display:block}
}
/* 入口の 4 院の札＝切り替えの印：今映っている院に金の線が伸びる */
.ent__a::before{content:"";position:absolute;left:0;right:0;top:0;z-index:3;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left}
.ent__a.is-on::before{transform:none}
.ent__a.is-run::before{animation:enRun var(--dur,8s) linear both}
@keyframes enRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ent__a.is-on .ent__nm{color:var(--blue)}
.ent__a.is-on .ic--ar{color:var(--blue)}
@media (max-width:767px){.ent__a.is-on{border-color:rgba(149,120,69,.6)}}

/* 採用の帯：代表の言葉（案 C の 3 つめ） */
.tr__q{display:flex;flex-direction:column;margin-top:var(--u);max-width:none}
.tr__qv{font-family:var(--serif);font-weight:500;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.1em;color:var(--ink)}
html[lang="ja"] .tr__qv .qo{margin-inline-start:-1em}
html[lang="en"] .tr__qv{font-family:var(--disp);font-weight:400;letter-spacing:0}
html[lang="en"] .tr__qv::before{content:"\201C"}html[lang="en"] .tr__qv::after{content:"\201D"}
.tr__qby{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-size:var(--f1);line-height:var(--lh1);color:var(--lab);letter-spacing:.1em}
.tr__qby::before{content:"";width:24px;height:1px;background:var(--gold)}
.tr__qn{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .hsl.is-on{animation:none!important}
  .ent__a.is-run::before{animation:none!important}
  .hcl:hover .hcl__go .ic--ar{translate:none!important}
}

/* ══ 直し（第 1 段の見直し 2026-11-05）══ */
/* 頭の白い入口と院の段を続ける（間に地の色の帯を作らない） */
.hero--top+.sec--white{margin-top:0}
/* 縦書き＋言った人が、入口の帯の上に収まるように（画面の高さで縮める） */
.hero--top .hs__vw{padding-top:min(calc(var(--u) * 4),13svh)}
.hero--top .hv{font-size:min(var(--f6),5.4svh)}
@media (max-width:767px){
  .hero--top{height:max(calc(100svh - var(--bb)),660px)}
  .hero--top .hs__vw{padding-top:calc(var(--u) * 3.5)}
  .hero--top .hv{font-size:min(30px,4.2svh)}
  .hcl{max-width:calc(100% - 104px)}
  .ent__nm{font-size:var(--f1);letter-spacing:.02em}
  .ent__a{padding:8px 26px 8px 10px}
  .ent__a .ic--ar{right:8px;width:14px}
}
@media (max-width:767px) and (max-height:720px){.hero--top .hv{font-size:24px}.hero--top .hs__vw{padding-top:calc(var(--u) * 2.5)}}
/* 声：PC でも「すべて読む」「お近くの院へ」と注記を出す（前の組みの隠しを外す） */
body.top .vb .tmore{display:flex!important}
body.top .vb .vb__note{display:block!important}

/* 採用への次の行き先（院の頁・会社案内の最後。白い段） */
.rcn{padding-block:var(--sec);background:var(--white)}
.rcn__g{display:grid;gap:calc(var(--u) * 2);align-items:center}
@media (min-width:1024px){.rcn__g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}.rcn__m{grid-column:1 / span 5}.rcn__t{grid-column:7 / span 6}}
.rcn .fr,.rcn .fr img{border-radius:0}
.rcn__eb{gap:16px}
.rcn__eb .eb__hz{order:-1;flex:0 0 40px;max-width:40px;background:var(--gold)}
.rcn__eb .eb__e{letter-spacing:.3em;color:var(--gold-t)}
.rcn__eb .bdg{margin-left:4px}
.rcn__h{font-family:var(--serif);font-weight:500;font-size:var(--f5);line-height:var(--lh5);letter-spacing:.1em;color:var(--ink)}
html[lang="en"] .rcn__h{font-family:var(--disp);font-weight:400;letter-spacing:0;line-height:1.25}
.rcn__p{margin-top:var(--u)}
.rcn .tr__btns .btn{border-radius:var(--br)}
/* 採用の頁の頭：見学・応募と募集要項の入口 */
.ph__go{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--u);max-width:none}
.ph__go .btn{gap:16px;min-height:52px;padding:0 22px 0 26px;border-radius:var(--br);font-weight:400;letter-spacing:.14em}
.ph__go .btn .ic--ar{width:22px;height:11px;flex:none;transition:translate .6s var(--out)}
.ph__go .btn--rc2{background:var(--blue);border-color:var(--blue);color:#fff}
.btn--rcw{border:1px solid rgba(255,255,255,.75);color:#fff;background:rgba(18,28,40,.15)}
@media (hover:hover){.ph__go .btn--rc2:hover{background:var(--blue-d);translate:0 -2px}.btn--rcw:hover{background:rgba(255,255,255,.14);border-color:#fff;translate:0 -2px}.ph__go .btn:hover .ic--ar{translate:5px 0}}
/* 採用の頁：浮かぶ入口と携帯の下の帯は「見学・応募」 */
.bb--rc{justify-content:center}
.bb__b--rc{gap:16px;background:var(--blue);color:#fff;letter-spacing:.14em}
.bb__b--rc .ic--ar{width:22px;height:11px;flex:none}
@media (hover:hover){.bb__b--rc:hover{background:var(--blue-d)}}
.fbk{border-radius:var(--br)}
.fbk--rc{background:var(--blue)}
@media (hover:hover) and (min-width:1024px){.fbk--rc:hover{background:var(--blue-d)}}
@media (prefers-reduced-motion:reduce){.ph__go .btn:hover,.ph__go .btn:hover .ic--ar{translate:none!important}}
/* 左下の院の名の下を少し沈める（明るいカットでも読めるように） */
.hero--top .hero__shade{background:radial-gradient(ellipse 62% 48% at 0% 78%,rgba(14,24,36,.52),rgba(14,24,36,0) 72%),linear-gradient(0deg,rgba(18,28,40,.5) 0%,rgba(18,28,40,.12) 30%,rgba(18,28,40,0) 55%),linear-gradient(270deg,rgba(18,28,40,.42),rgba(18,28,40,0) 46%)}
@media (max-width:767px){.hero--top .hero__shade{background:linear-gradient(0deg,rgba(14,24,36,.62) 0%,rgba(14,24,36,.2) 34%,rgba(14,24,36,0) 56%),linear-gradient(270deg,rgba(18,28,40,.42),rgba(18,28,40,0) 50%)}}
/* 海の帯から会社の段へ、地の色の帯を挟まずに続ける */
.hope+.sec--white{margin-top:0}
/* 院を探すの板：上の帯のメニューの組み（横並び・真ん中ぞろえ）を受けないように */
.hd__nav .dd__l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.hd__nav .dd__a{align-items:flex-start;justify-content:flex-start}
.hd__nav .dd__all .more{min-height:44px}
/* タブレット（768〜1279）の入口：上の行＝見出し｜募集中、下の行＝4 院を全幅で（4 院の札を細くしない） */
@media (min-width:768px) and (max-width:1279.98px){
  .ent__h{grid-row:1;grid-column:1}
  .ent__rc{grid-row:1;grid-column:2;min-width:300px}
  .ent__l{grid-row:2;grid-column:1 / -1}
}
/* 院の札：受付の行の数がちがっても、電話・LINE の高さを 4 院でそろえる */
.cc__hr{margin-bottom:var(--u)}
.cc__bk{margin-top:auto}
/* 英語の携帯：頭の言葉は横組み（上の左）なので、左下の院の欄は全幅に。言葉を一段小さく */
@media (max-width:767px){
  html[lang="en"] .hcl{max-width:100%}
  html[lang="en"] .hero--top .hv{font-size:min(28px,3.8svh)}
}

/* ══ 頭の言葉の出方・消え方（2026-11-05 なおさん「右上の行間もう少しあけて」「消え方と表示の仕方が気に入らない」「左下も出方消え方、これきらい」「右上は 1 文字ずつほんのすこしずつ時間差」）══
   拭う形（mask）はやめ、八木が谷の字の所作に：
   ・右上の縦書き：1 字ずつ 0.06 秒ずらし、ぼかし 8px→0・濃さ 0→1・上から 12px 沈んで定位置へ（1.2 秒・--out）。2 行目は 1 行目の最後の字に続けて。
   ・右上の下の字と左下の院：行ごとに、右上の最後の字の後に続けて 0.32 秒ずつ。ぼかし 8px→0・濃さ 0→1・下から 16px 上がる（1.4 秒・--out）。
   ・消える時：全部の字と行が一緒に、濃さ 1→0・ぼかし 0→6px、0.6 秒。動かさない。消えきってから次（main.js の --d0 .8 秒）。
   ・縦書きの行の間は 1.5（2 行目を一字半下げる段差はそのまま）。 */
.hero--top .hero__scenes .hv{line-height:1.5}
.hero--top .hero__scenes .hv .hl{white-space:nowrap}
.hero--top .hs .ch{display:inline-block}
.hero--top .hero__scenes .hs .hl,.hero--top .hero__scenes .hs .ch{-webkit-mask-image:none!important;mask-image:none!important;opacity:0;filter:blur(8px);transition:none;animation:none}
.hero--top .hero__scenes .hs .hl{translate:0 16px}
.hero--top .hero__scenes .hs .ch{translate:0 -12px}
.hero--top .hero__scenes .hs .hv .hl{opacity:1;filter:none;translate:none}
/* 出る */
.hero--top .hero__scenes .hs.is-on .hl,.hero--top .hero__scenes .hs.is-on .ch{opacity:1;filter:blur(0);translate:0 0}
.hero--top .hero__scenes .hs.is-on .hl{transition:opacity 1.4s var(--out),filter 1.4s var(--out),translate 1.4s var(--out);transition-delay:calc(var(--d0,.8s) + var(--nc,0) * .06s + var(--j,0) * .32s)}
.hero--top .hero__scenes .hs.is-on .ch{transition:opacity 1.2s var(--out),filter 1.2s var(--out),translate 1.2s var(--out);transition-delay:calc(var(--d0,.8s) + var(--c,0) * .06s)}
.hero--top .hero__scenes .hs.is-on .hv .hl{transition:none}
/* 開いた時の最初の一組も同じ出方で */
.hero--top .hero__scenes .hs.is-on:first-child .ch{animation:hsCh 1.2s var(--out) backwards;animation-delay:calc(.5s + var(--c,0) * .06s)}
.hero--top .hero__scenes .hs.is-on:first-child :is(.hs__s,.hcl) .hl{animation:hsLn 1.4s var(--out) backwards;animation-delay:calc(.5s + var(--nc,0) * .06s + var(--j,0) * .32s)}
@keyframes hsCh{from{opacity:0;filter:blur(8px);translate:0 -12px}}
@keyframes hsLn{from{opacity:0;filter:blur(8px);translate:0 16px}}
/* 消える：一緒に、動かさずに */
.hero--top .hero__scenes .hs.is-out .hl,.hero--top .hero__scenes .hs.is-out .ch{opacity:0;filter:blur(6px);translate:0 0;transition:opacity .6s var(--soft),filter .6s var(--soft);transition-delay:0s}
.hero--top .hero__scenes .hs.is-out .hv .hl{opacity:1;filter:none}
@media (max-width:767px){.hero--top .hcl{max-width:calc(100% - 124px)}html[lang="en"] .hero--top .hcl{max-width:100%}}
.is-shot .hero--top .hero__scenes .hs .hl,.is-shot .hero--top .hero__scenes .hs .ch{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .hero--top .hero__scenes .hs .hl,.hero--top .hero__scenes .hs .ch{opacity:1!important;filter:none!important;translate:none!important;animation:none!important}
}

/* ══ 募集中の印（2026-11-05 なおさん「これかっこわるい」）：囲みと塗りの札をやめ、金の小さな丸（3 秒で息をする）と細い金の字 ══ */
.bdg{display:inline-flex;align-items:center;gap:8px;height:auto;padding:0;background:none;color:var(--gold-t);font-family:var(--serif);font-size:var(--f1);font-weight:500;line-height:1.2;letter-spacing:.24em;white-space:nowrap}
html[lang="en"] .bdg{font-family:var(--disp);font-style:italic;font-weight:300;letter-spacing:.08em}
.bdg__dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold);animation:bdgBreath 3s ease-in-out infinite}
@keyframes bdgBreath{0%,100%{opacity:1}50%{opacity:.22}}
/* 上の帯：「採用情報」はほかのメニューと同じ字。右肩に印。ご予約との間はメニューの間と同じ */
.hd__rc{position:relative;gap:6px;min-height:44px;padding:0;border:0!important;background:none!important;font-weight:400;letter-spacing:.14em;font-feature-settings:"palt" 1}
.hd__rc .bdg{align-self:flex-start;margin-top:4px;color:inherit}
.hd__rc .bdg__t{color:var(--gold-t)}
.hd--over:not(.is-solid) .hd__rc .bdg__t{color:var(--gold-l)}
.hd--over:not(.is-solid) .hd__rc .bdg__dot{background:var(--gold-l)}
.hd__rc::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--out)}
.hd__rct{transition:color .5s var(--soft)}
.hd__rc[aria-current]::after{transform:none;transform-origin:left}
/* 2026-11-05 なおさん「採用情報だけでいいよ。募集中っていらない」：上の帯は印なし、ほかのメニューと同じ触れ方（下に線） */
@media (hover:hover){
  .hd__rc:hover{translate:none}
  .hd__rc:hover::after{transform:none;transform-origin:left}
}
@media (min-width:1024px){.hd__end{gap:24px}}
@media (min-width:1200px){.hd__end{gap:30px}}
@media (min-width:1360px){.hd__end{gap:40px}.hd__end{margin-left:40px}}
/* 入口の帯・引き出し・採用の段の印も同じ */
.ent__rc .bdg{margin-bottom:4px}
@media (max-width:767px){.ent__rc .bdg{flex-direction:column;align-items:center;gap:4px;letter-spacing:.12em}}
.dr__rc .bdg{flex-direction:column;align-items:center;gap:4px;letter-spacing:.12em}
@media (prefers-reduced-motion:reduce){.bdg__dot{animation:none!important;opacity:1!important}}

/* ══ 歩く人と海の段（2026-11-05 なおさん「リードもないし、なんか寂しいし、中途半端」）══
   左に字のかたまり（金の短い線＋英字 → 見出し → リード → お近くの院へ）、右に 3 人。3 人の足元は海の帯の水平線（金の線）にそろえ、下の札は海の上に。 */
.hope{margin-top:0;padding-top:calc(var(--u) * 4);background:var(--paper)}
.hp__g{align-items:end;row-gap:calc(var(--u) * 2)}
@media (min-width:1024px){.hp__t{grid-column:1 / span 5;align-self:center;padding-bottom:calc(var(--u) * 2)}.hp__w{grid-column:7 / span 6}}
@media (min-width:768px) and (max-width:1023.98px){.hp__t,.hp__w{grid-column:1 / -1}}
.hp__eb{gap:16px}
.hp__eb .eb__hz{order:-1;flex:0 0 40px;max-width:40px;background:var(--gold)}
.hp__eb .eb__e{letter-spacing:.3em;color:var(--gold-t)}
.hp__t .lead{margin-top:var(--u)}
.hp__t .tmore{margin-top:var(--u)}
.hp__w{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);max-width:640px;width:100%;justify-self:center}
.hp__p{position:relative}
.hp__fig .lp{aspect-ratio:4 / 5;background:transparent;mix-blend-mode:multiply;filter:brightness(1.04);translate:0 4.5%}
.hp__lab{position:absolute;left:0;right:0;top:calc(100% + var(--u) / 2);display:flex;justify-content:center;align-items:baseline;gap:10px;max-width:none;font-family:var(--serif);font-weight:500;font-size:var(--f2);line-height:var(--lh1);letter-spacing:.14em;color:#fff;text-shadow:0 1px 12px rgba(10,20,30,.5)}
.hp__lab .num{font-family:var(--disp);font-size:var(--f1);color:var(--gold-l);letter-spacing:.04em}
html[lang="en"] .hp__lab{font-family:var(--disp);font-weight:400;letter-spacing:.04em}
.hope__sea{--bh:clamp(200px,26vw,440px);margin-top:0}
@media (max-width:767px){.hope{padding-top:calc(var(--u) * 3)}.hp__w{max-width:300px;gap:12px}.hp__lab{font-size:var(--f1);gap:6px}}
/* 歩く人：地を絵の紙の白にそろえ（重ねの合成は奥行きの動きの箱で効かないため）、絵の下の余白は枠で切って、足元を水平線に */
.hope{background:#FEFDF9;padding-top:calc(var(--u) * 3)}
.hp__fig{overflow:clip}
.hp__fig .lp{mix-blend-mode:normal;filter:none;background:#FEFDF9}

/* ══════════════════════════════════════════════════════════════════════
   八木が谷土台 第 2 段（2026-11-05 カヲル：下層の全頁。なおさん「下層も広げて」）
   第 1 段のトップの組みを全頁に：明朝の見出し・金の短い線＋英字の小見出し・角を立てた写真とボタン・字の大きさの差・下線と矢印のリンク。
   頁の頭は八木が谷の下層の頭（.ovh）に寄せる：大きな英字（Newsreader 300）→ 金の短い線＋和名（明朝の小さな字）→ リード（明朝）。動画のループはそのまま。
   英字と数字は全頁 Newsreader（Spectral はやめた。書体は 3 家族＋頭の縦書きの Zen Old Mincho）。
   ══════════════════════════════════════════════════════════════════════ */
:root{--en:"Newsreader","Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",sans-serif;--r:2px}
/* 見出しは明朝。大きいほど字間を締めすぎない（.1em） */
:is(.h2,.h3,.oc__h,.sy__h,.bk__name,.kc__name,.qa__q,.ins__st,.sfs__h,.dir__name strong,.prog__who,.partner__h){font-family:var(--serif);font-weight:500}
.h2{letter-spacing:.1em}
.h3,.oc__h,.sy__h,.bk__name,.kc__name{letter-spacing:.08em}
.lead{font-family:var(--serif);font-weight:500;letter-spacing:.06em;color:var(--txt)}
html[lang="en"] :is(.h2,.h3,.oc__h,.sy__h,.bk__name,.kc__name,.qa__q,.ins__st,.sfs__h,.dir__name strong,.prog__who,.partner__h,.lead){font-family:var(--disp);font-weight:400;letter-spacing:0}
html[lang="en"] .h2{line-height:1.25}
/* 英字の小見出し：金の短い線が先、漢字一字はやめる */
.eb{gap:16px}
.eb__k{display:none}
.eb>.eb__hz{order:-1;flex:0 0 40px;max-width:40px;background:var(--gold)}
.eb__e{letter-spacing:.3em;color:var(--gold-t)}
html[lang="en"] .eb__e{letter-spacing:.2em}
/* 頁を移るリンク：字＋下線＋矢印、触れると青い線が伸びる */
.more{gap:14px;font-weight:400;letter-spacing:.16em;color:var(--ink);
  background:linear-gradient(var(--blue),var(--blue)) 0 calc(100% - 6px) / 0 1px no-repeat,linear-gradient(rgba(26,32,40,.45),rgba(26,32,40,.45)) 0 calc(100% - 6px) / 100% 1px no-repeat;
  transition:background-size .6s var(--out),color .5s var(--out)}
.more i{width:18px;transition:translate .6s var(--out)}
@media (hover:hover){.more:hover{color:var(--blue);background-size:100% 1px,100% 1px}.more:hover i{width:18px;translate:6px 0}}
.more--go{color:var(--blue)}
/* 角を立てる：写真・札・ボタン・入力欄 */
.fr,.fr img,.tk-info__ext .ext,.acc__m .ddmap__frame,.why2 .fr,.apc__ill,.sy__ill,.sy--full .sy__ill{border-radius:0!important}
.apl .apc__ill,.sy6 .sy__ill{border-radius:0!important}
.card{border-radius:var(--br)}
.btn,.btn--s,.subnav a,.ob-idx a,.chip,.camp__lab,.fm input:not([type=checkbox]),.fm select,.fm textarea,.fm__msg{border-radius:var(--br)}
.btn{font-weight:500;letter-spacing:.08em}
/* 頁の中の案内（院の頁・採用）と院の目次・声の絞り込み：細い線の四角、選んだ物は青 */
.subnav a,.ob-idx a,.chip{border:1px solid rgba(37,89,155,.3);background:transparent;box-shadow:none;font-weight:400;color:var(--blue);letter-spacing:.1em}
@media (hover:hover){.subnav a:hover,.ob-idx a:hover,.chip:hover{border-color:var(--blue);background:rgba(37,89,155,.05);color:var(--blue);translate:0 -1px;box-shadow:none}}
.chip.is-on,.chip[aria-pressed="true"],.subnav__go{background:var(--blue)!important;border-color:var(--blue)!important;color:#fff!important}
@media (hover:hover){.subnav__go:hover{background:var(--blue-d)!important}}

/* ── 頁の頭（八木が谷の下層の頭）：大きな英字 → 金の短い線＋和名 → リード ── */
.ph{height:clamp(500px,72svh,680px)}
@media (min-width:768px){.ph{height:clamp(560px,74svh,800px)}}
.ph--s{height:clamp(420px,54svh,560px)}
@media (min-width:768px){.ph--s{height:clamp(460px,58svh,620px)}}
.ph__en{margin-bottom:calc(var(--u) / 2);font-family:var(--disp);font-style:normal;font-weight:300;font-size:clamp(48px,6.2vw,92px);line-height:1.05;letter-spacing:-.005em;color:#fff;text-shadow:0 2px 24px rgba(10,20,30,.25)}
.ph__h{font-family:var(--serif);font-weight:500;font-size:var(--f2);line-height:var(--lh2);letter-spacing:.24em;color:#fff;text-shadow:0 1px 16px rgba(10,20,30,.4)}
.ph__h::before{content:"";display:inline-block;width:28px;height:1px;margin-right:14px;vertical-align:middle;background:var(--gold-l)}
.ph__h .ln{display:inline}
@media (min-width:768px){.ph__h{font-size:var(--f2);line-height:var(--lh2)}}
.ph__lead{margin-top:calc(var(--u) / 2);max-width:30em;font-family:var(--serif);font-weight:500;font-size:var(--f2);line-height:var(--lh2);letter-spacing:.06em;color:rgba(255,255,255,.94)}
@media (min-width:768px){.ph__lead{font-size:var(--f3);line-height:var(--lh3)}}
html[lang="en"] .ph__h{font-family:var(--disp);font-weight:400;letter-spacing:.06em}
html[lang="en"] .ph__lead{font-family:var(--disp);font-weight:400;letter-spacing:0}

/* ── 院の一覧・声の院ごとの頭：大きな英字（地名）→ 金の短い線＋和名（八木が谷の章の頭） ── */
.rg__en{gap:16px;font-family:var(--disp);font-style:normal;font-weight:300;font-size:var(--f5);line-height:var(--lh5);letter-spacing:0;color:var(--ink)}
.rg__en .eb__hz{display:none}
:is(.rg,.vg__h) .h2{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;margin-top:4px;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.16em}
:is(.rg,.vg__h) .h2::before{content:"";flex:0 0 28px;height:1px;align-self:center;background:var(--gold)}
html[lang="en"] :is(.rg,.vg__h) .h2{letter-spacing:.02em}
.rg__n{margin-left:0}

/* ── 院の外観の絵（アスカの縦 4:5 の水彩とループ。院の札・院の一覧・院の頁の案内） ── */
.ext--45{aspect-ratio:4 / 5;background:#FEFDF9}
.ext--45.vbox>picture img,.ext--45.vbox>video,.ext--45 img{object-fit:cover}
.cc__ext{position:relative;overflow:clip}
.cc__ext .ext{width:100%}
@media (hover:hover){
  .cc__ext img,.cc__ext video{transition:scale 1.6s var(--soft)}
  a:hover .cc__ext img,a:hover .cc__ext video{scale:1.018}
}
.kc__pic.cc__ext{margin-bottom:12px}
.oc__ext .ext--45{aspect-ratio:4 / 5}
@media (min-width:1024px){.oc--wide .oc__ext .ext--45{height:100%;aspect-ratio:auto}}
.tk-info__ext .ext--45{aspect-ratio:4 / 5}

/* ── 声の頁：高根木戸・大久保の脇はお年寄りの顔の絵（丸く）、勝田台・まつもとは走る人 ── */
.vg__face{aspect-ratio:1!important;border-radius:50%;overflow:clip;background:#EAF5FB}
.vg__face.vbox>picture img,.vg__face.vbox>video{object-fit:cover}

/* ── 次の行き先（施術・声）：最後の段の終わりに「お近くの院へ」 ── */
.nxt{margin-top:calc(var(--u) * 2)}
.band+.sec.nxs,.nxs{padding-top:calc(var(--u) * 2)}
.nxs .nxt{margin-top:0}
.nxs+.sec--sky{margin-top:calc(var(--u) * 2)}

/* ── 図の数字・英文も Newsreader に ── */
.chart .kc-chart[lang=en],.chart .kc-num,.chart .kc-ex__name i,.chart .kc-il__op{font-family:var(--disp)!important}
/* 歩く人と海（2026-11-05 なおさん「見出しの下に短いリード、小さい字で」「キャプション的な」「線画のアニメーション」）：
   3 人は細い線画のループ（地は白）。見出しのすぐ下に本文の大きさのリード。下は金の番号＋一行の説明 */
.hope{background:#FFFFFF}
.hp__fig .lp{background:#FFFFFF}
.hp__lead{margin-top:calc(var(--u) / 2);max-width:24em;font-family:var(--serif);font-weight:500;font-size:var(--f2);line-height:var(--lh2);letter-spacing:.06em;color:var(--txt)}
html[lang="en"] .hp__lead{font-family:var(--disp);font-weight:400;letter-spacing:0}
.hp__lab{flex-direction:column;align-items:center;gap:2px;left:-8px;right:-8px;text-align:center}
.hp__lab .num{font-size:var(--f1);line-height:var(--lh1)}
.hp__cap{font-family:var(--serif);font-weight:500;font-size:var(--f1);line-height:1.6;letter-spacing:.06em;color:#fff}
html[lang="en"] .hp__cap{font-family:var(--disp);font-weight:400;letter-spacing:.01em}
.hope__sea{--bh:clamp(240px,26vw,440px)}
@media (max-width:767px){.hp__w{max-width:none;gap:8px}.hp__lab{left:-4px;right:-4px}.hope__sea{--bh:260px}}
/* 院ごとの頭の和名：金の短い線は字の前の飾りに（中の字を離さない） */
:is(.rg,.vg__h) .h2{display:block}
:is(.rg,.vg__h) .h2::before{display:inline-block;width:28px;height:1px;margin-right:14px;vertical-align:middle}
:is(.rg,.vg__h) .rg__n{margin-left:12px}
/* 会社案内：理念の下の水平線に 3 人（足元を線に） */
.co-walk{margin-top:calc(var(--u) * 2)}
.co-walk .walk__row{max-width:480px;margin:0 auto;gap:var(--gap)}
.co-walk .lp{aspect-ratio:4 / 5;background:transparent;mix-blend-mode:multiply;filter:brightness(1.04);translate:0 4.5%}
@media (max-width:767px){.co-walk .walk__row{max-width:280px;gap:12px}}

/* ══ 第 2 段の点検の直し ══ */
/* リンクの下線は字（span）に引く（2 行に折れても行ごとに線。a に地を持たせない） */
.more,body.top .more{background:none}
.more>span{padding-bottom:3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(var(--blue),var(--blue)) 0 100% / 0 1px no-repeat,linear-gradient(rgba(26,32,40,.45),rgba(26,32,40,.45)) 0 100% / 100% 1px no-repeat;transition:background-size .6s var(--out)}
@media (hover:hover){.more:hover,body.top .more:hover{background:none}.more:hover>span{background-size:100% 1px,100% 1px}}
/* 初回の特典の見出し：1024〜1279 は字の欄を 6 列に（「の」だけの行を作らない） */
@media (min-width:1024px) and (max-width:1279.98px){.camp__t{grid-column:1 / span 6}.camp{grid-column:7 / span 6}}
/* 頭の縦書き：タブレット・小さな PC は画面の高さで一段小さく（言った人の字が入口の帯にかからない） */
@media (max-width:1279.98px) and (min-width:768px){.hero--top .hv{font-size:min(var(--f6),4.6svh)}}
/* 声の札の題も明朝に */
.vc__q{font-family:var(--serif);font-weight:500;letter-spacing:.06em}
html[lang="en"] .vc__q{font-family:var(--disp);font-weight:400;letter-spacing:0}
/* 採用情報もメニューの 1 項目として、会社案内との間をメニューの間（30／40px）にそろえる（印を外した分 24px 広かった） */
@media (min-width:1200px){.hd__end{margin-left:6px}}
@media (min-width:1360px){.hd__end{margin-left:16px}}
@media (min-width:1200px){html[lang="en"] .hd__end{margin-left:-2px}}

/* ══ 入口の札＝すりガラス（2026-11-05 なおさん「このカード何とかしてくれ。リキッドグラスっぽくするか、半透明にするか」）
   768 から：白い紙をやめ、動画の上に浮く 1 枚のすりガラス（ぼかし 22px・紺の薄い色・上の縁に光の線・角丸）。字は白、地名と印は淡い水色（2026-11-05 なおさん「水色によせようか」）。
   区切りは白の細い線。触れると少し明るいガラスに。今映っている院・触れた院は、名の下に水色の線が伸びる（なおさん「板ではなく線」。地を明るくする板はやめた）。 ══ */
@media (min-width:768px){
  .hero--top>.ent{padding-bottom:calc(var(--u) * 2)}
  .ent__in{background:rgba(18,52,86,.34);color:#fff;border-radius:18px;overflow:hidden;
    -webkit-backdrop-filter:blur(22px) saturate(1.35);backdrop-filter:blur(22px) saturate(1.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.16),0 24px 60px -28px rgba(6,14,24,.6)}
  .ent__in::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 42%)}
  .hz--ent{display:none}
  .ent__hen,.ent__ar{color:var(--sky-l)}
  .ent__hjp,.ent__nm,.ent__rch{color:#fff}
  .ent__rcs{color:rgba(255,255,255,.78)}
  .ent__l li,.ent__l li+li{border-color:rgba(255,255,255,.16)!important}
  .ent__l{border-color:rgba(255,255,255,.16)!important}
  .ent__a .ic--ar,.ent__rc .ic--ar{color:var(--sky-l)}
  .ent__rc{background:rgba(255,255,255,.10);border-left:1px solid rgba(255,255,255,.16)}
  .ent__rc .bdg,.ent__rc .bdg__t{color:var(--sky-l)}
  .ent__rc .bdg__dot{background:var(--sky-l)}
  .ent__a::before{background:var(--sky-l)}
  .ent__a.is-on .ent__nm{color:#fff}
  .ent__a.is-on .ic--ar{color:#fff}
  .ent__a.is-on,.ent__a:hover{background:none}
  .ent__a::before{height:1.5px;left:24px;right:52px;top:auto;bottom:12px}
  @media (max-width:1199px){.ent__a::before{bottom:8px}}
}
@media (min-width:768px) and (hover:hover){
  .ent__rc:hover{background:rgba(255,255,255,.16)}
  .ent__a:hover::before{transform:none;transition:transform .6s var(--out)}
  .ent__a:hover .ent__nm{color:#fff}
  .ent__a:hover .ic--ar,.ent__rc:hover .ic--ar{color:#fff}
}
/* ぼかしの効かない端末は濃い紺の半透明で字を読ませる */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (min-width:768px){.ent__in{background:rgba(16,28,44,.78)}}
}
/* 縦書きの言葉と下の小さな字が、入口の札にかからないよう、頭の場面の枠の高さ（cqh）で大きさを決める（768 から。白い紙の時は札の裏に隠れていた） */
@media (min-width:768px){
  .hero--top>.hero__scenes{container-type:size}
  .hero--top .hs__vw{padding-top:min(calc(var(--u) * 5),16svh,8cqh)}
  html[lang="ja"] .hero--top .hv{font-size:min(var(--f6),6.2svh,7.2cqh)}
}
@media (min-width:768px) and (max-width:1279.98px){html[lang="ja"] .hero--top .hv{font-size:min(var(--f6),6cqh)}}
/* 縦書きの頭が上の帯（ロゴ・メニュー）にかからないよう、上の空きは帯の高さ＋16px 以上。字の大きさは残りの高さから決める */
@media (min-width:768px){
  .hero--top .hs__vw{padding-top:max(calc(var(--hd) + 16px),min(calc(var(--u) * 5),16svh,8cqh))}
  html[lang="ja"] .hero--top .hv{font-size:min(var(--f6),6.2svh,7.2cqh,calc((100cqh - var(--hd) - 112px) / 10.4))}
}
/* タブレットの入口の札は低く（2 段で高さを取りすぎない） */
@media (min-width:768px) and (max-width:1279.98px){
  .ent__h{padding:14px 24px 10px}
  .ent__rc{padding:14px 56px 14px 28px}
  .ent__a{padding:12px 44px 12px 24px;min-height:80px}
  .ent__a .ic--ar,.ent__rc .ic--ar{bottom:14px}
}
/* 施術の三つの絵（2026-11-05 なおさん「なんでここ正方形じゃないんですか？」）：multiply は出現の動きの中で効かず、白い絵の地がそのまま出て、
   縦長（4:5）の歩く人だけ細い白の四角になっていた → 3 枚とも同じ大きさの白い紙の正方形にし、絵はその中に収める */
.a3__ill{mix-blend-mode:normal!important;filter:none!important;background:#FFFFFB!important;border-radius:0;box-shadow:0 1px 2px rgba(26,40,60,.05),0 14px 34px -22px rgba(26,40,60,.22)}
.a3__ill.vbox>picture,.a3__ill.vbox>video{inset:6%;width:88%;height:88%}
.a3__ill.vbox>picture img{object-fit:contain}
/* ボタンの並びの幅をそろえる（2026-11-05 なおさん「ボタンが並んでいるのに横の長さが合ってない」）：
   横に並ぶ組は同じ幅（一番長い字に合わせた等分）。携帯で縦に積む時は全幅 */
/* 410px より広ければ同じ幅で横に、狭ければ全幅で縦に積む（flex-basis の切り替え。中途半端に幅の違う 2 つが並ばない） */
.bka .btn{flex:1 1 calc((410px - 100%) * 999);min-width:0}
@media (min-width:768px){
  .tr__btns,.ph__go{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;width:auto}
  .tr__btns .btn,.ph__go .btn{justify-content:center;gap:16px}
}
/* 施術の段（施術の頁・各院の頁の apc）の絵も、トップと同じ白い紙の正方形にそろえる */
.apc__ill{mix-blend-mode:normal!important;filter:none!important;background:#FFFFFB!important;aspect-ratio:1!important;box-shadow:0 1px 2px rgba(26,40,60,.05),0 14px 34px -22px rgba(26,40,60,.22)}
.apc__ill.vbox>picture,.apc__ill.vbox>video{inset:6%;width:88%;height:88%}
.apc__ill.vbox>picture img{object-fit:contain}
.cards3 .apc__ill::after{display:none}
/* 写真の窓は縦の並び（flex）の中でも決めた比のまま（縦長の写真の元の高さに引っぱられて 3:2 が 4:5 に伸びていた。採用の「選ばれる理由」） */
.fr{min-height:0;flex:none}
@media (max-width:767px){.ph__go .btn,.tr__btns .btn{flex:1 1 calc((420px - 100%) * 999);min-width:0}}
/* 視差の取りこぼし（2026-11-05 なおさん「パララックス効果が全然ついてない」。burokku_audit で数えた）
   ①動く絵（.lp：施術の三つ・歩く人・症状の札・院の外観）は止まっていた → 箱ごと奥行き（リードと同じ量）で動かす
     ただし札の中の絵（見出し・番号と一つのかたまり＝[data-z] の中）は札ごと動くので、絵だけ重ねて動かさない（絵が番号にかぶった。2026-11-05 夜）
   ②携帯の横に送る列（.reel）の中の写真は、列が横の送りの入れ物になるため view() が列につながって止まっていた
     → 列そのものに縦の名前付きの時間軸を置き、中の写真・絵はそれで動かす */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .lp:not(.hero .lp):not(.ph .lp):not([data-z] .lp):not(.hp__w .lp){animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zl)}
  .hp__w{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zl)}
  .reel{view-timeline:--reel block}
  .reel .fr[data-px] img,.reel .lp:not(.hero .lp):not(.ph .lp):not([data-z] .lp),.reel [data-z]{animation-timeline:--reel}
}}
/* 書体の組（2026-11-05 なおさん「書体の選び方」）：見出しは h2 と同じ明朝（Shippori Mincho 500）にそろえる。
   小見出し（h3・施術の三つ・札の名）だけ太いゴシックで、まわりの明朝の見出しから浮いていた。本文・ボタン・小さな札はゴシックのまま */
html[lang="ja"] :is(h3,.h3,.a3__h){font-family:var(--serif);font-weight:500;letter-spacing:.08em}
/* 施術の三つの絵：列の幅いっぱいの正方形（小さな四角の右に空きが残り、上の線・下の字と左右がそろっていなかった） */
@media (min-width:1024px){.a3__ill{width:100%}}
/* タブレット（1 列）：絵は左に 220 の正方形、字は右に（列いっぱいだと大きすぎる） */
@media (min-width:768px) and (max-width:1023.98px){
  .a3{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"ill no" "ill h" "ill p";column-gap:var(--gap);align-content:center}
  .a3__ill{grid-area:ill;width:220px;margin:0;align-self:start}
  .a3__no{grid-area:no;align-self:end}.a3__h{grid-area:h}.a3__p{grid-area:p;align-self:start}
}
/* 電話の番号は LINE と同じゴシック（2026-11-05 なおさん「電話はこれ明朝だけど、ゴシックじゃなくていいのかな？」）。数字は等幅で、字の大きさ・太さも LINE と同じ */
.btn--tel span,.btn--tel.btn--s span,.bk__a .btn--tel span,.bs__a .btn--tel span,.dr__ca .btn--tel span{font-family:var(--sans)!important;font-weight:inherit!important;font-size:inherit!important;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.04em!important}

/* 声の引用の鍵カッコ（2026-11-05 なおさん「鍵カッコがおかしい」）：英字の書体の大きな金の「を飾りで付けていて、上が切れ・後ろに大きな空き・」と高さが合わなかった
   → 本文と同じ明朝・同じ大きさの本物の括弧にし、開きは半角に詰めて行の左へぶら下げる（2 行目の頭と本文の頭がそろう）。閉じは「。」と詰める */
.vb__q .qo,.vb__q .qc{font-feature-settings:"palt" 1,"halt" 1;letter-spacing:0}
.vb__q .qo{margin-inline-start:-1em}
/* 携帯は左の余白が 20px しかないので、ぶら下げを浅く（引用の「は半字、見出しの頭の「は 1/4 字）。画面の端から 8px 以上離す */
@media (max-width:767px){
  .vb__q .qo,html[lang="ja"] .tr__qv .qo{margin-inline-start:-.5em}
  :is(h1,h2,h3,.h1,.h2,.h3,.ph__h) .po{margin-inline-start:-.25em}
}

/* ══ HOPE の段（2026-11-05 なおさん「白い文字と白い線画の人間にして、海と重ねるってこと？」「なんでこれ、下半分の中途半端な位置に海があるの？」
   「（頭が）きれてる」）：下の海の帯をやめ、白い地の上で 3 人の絵の真下に番号と言葉を紺で置く。絵の枠は切らない（視差で上下しても頭と足が出る）。 ══ */
.hope{padding-bottom:calc(var(--u) * 4)}
.hp__fig{overflow:visible}
.hp__fig .lp{translate:none}
.hp__lab{position:static;margin-top:calc(var(--u) / 2);text-shadow:none;color:var(--ink)}
.hp__cap{color:var(--txt)}
.hp__lab .num{color:var(--gold-t)}
@media (max-width:767px){.hope{padding-bottom:calc(var(--u) * 3)}}
.hp__cap .nb{display:inline-block;white-space:normal}
.hp__cap .nb{display:block}
@media (max-width:767px){.hp__cap{letter-spacing:.02em}.hp__w{gap:4px}}
@media (max-width:767px){.hp__w{width:calc(100% + 8px);margin-inline:-4px;justify-self:stretch}.hp__cap{letter-spacing:0}}
@media (min-width:1024px){.hp__g{align-items:center}.hp__t{padding-bottom:0}}
/* 約物の詰め（2026-11-05 夜 なおさん「文字間隔とか組版、詰めもね」）：詰めた約物（.pk）には字間を足さない。見出し・引用の「。」」「」。」が 1.7 字分に開いていた */
.pk{letter-spacing:0}
:is(h1,h2,h3,.h2,.h3,.ph__lead) .pk{margin-inline-end:-.56em}
/* ABOUT の写真は 1 枚（2026-11-05 夜 なおさん「この画像の置き方、八木が谷造園でみかけたのでやめよう」：大小 2 枚を重ねる置き方はやめた） */
/* 採用情報＝ご予約の次に目立つ「線の札」（2026-11-05 夜 なおさん「採用情報は、ご予約の次に目立たせたい」）：
   ご予約と同じ高さ・角・字の大きさで、塗りではなく 1px の線。動画の上は白い線と白い字に薄いすりガラス、白い帯の上は青の線と青の字。触れると塗りが入る */
.hd__rc{padding:0 22px!important;border:1px solid var(--book)!important;border-radius:var(--br);color:var(--book);font-weight:500;letter-spacing:.16em;transition:background-color .5s var(--soft),color .5s var(--soft),border-color .5s var(--soft)}
.hd__rc::after{display:none}
.hd--over:not(.is-solid) .hd__rc{border-color:rgba(255,255,255,.85)!important;color:#fff;background:rgba(255,255,255,.08)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (hover:hover){
  .hd__rc:hover{background:var(--book)!important;color:#fff}
  .hd--over:not(.is-solid) .hd__rc:hover{background:rgba(255,255,255,.22)!important;color:#fff}
}
.hd__rc[aria-current]{background:var(--sky)!important}
body.menu-open .hd .hd__rc{border-color:var(--book)!important;color:var(--book);background:none!important}
/* 施術の三つ・院の頁の三つの絵：絵の動画を札いっぱいに（内側の四角の縁が見えていた。絵は動画の中に余白を持っている）。携帯は絵を大きく（64px の切手になっていた） */
.a3__ill.vbox>picture,.a3__ill.vbox>video,.apc__ill.vbox>picture,.apc__ill.vbox>video{inset:0!important;width:100%!important;height:100%!important}
@media (max-width:767px){.a3__ill{width:132px!important}.a3l .a3{grid-template-columns:132px minmax(0,1fr)}}

/* ===== 言語の切り替え（JP | EN、どの幅でも上の帯に出す。2026-11-05 なおさん「日本語英語切り替えも」） ===== */
.ls{display:inline-flex;align-items:center;gap:0;margin:0;font-family:var(--en);font-size:var(--f1);letter-spacing:.16em;line-height:1}
.ls__o{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:44px;padding:0 6px;opacity:.55;transition:opacity .5s var(--soft),color .5s var(--soft)}
.ls__o.is-on{opacity:1;position:relative}
.ls__o.is-on::after{content:"";position:absolute;left:10px;right:calc(10px - .16em);bottom:11px;height:1px;background:currentColor}
.ls__bar{display:block;width:1px;height:12px;background:currentColor;opacity:.4}
@media (hover:hover){a.ls__o:hover{opacity:1;color:var(--gold)}}
.hd__lang{display:inline-flex!important;min-height:44px;padding:0}
@media (min-width:1024px){.hd__lang{display:inline-flex!important}}
.dr__lang{font-size:var(--f1);color:var(--blue)}
.dr__lang .ls__o{min-width:52px}

/* ===== Instagram の入口（トップの段） ===== */
.ig__g{display:grid;gap:calc(var(--u) * 1.5)}
.ig__l{list-style:none;margin:0;padding:0;border-top:1px solid rgba(37,89,155,.2)}
.ig__a a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;grid-template-areas:"ic nm go" "ic hd go";column-gap:14px;align-items:center;min-height:72px;padding:12px 0;border-bottom:1px solid rgba(37,89,155,.2);color:var(--ink)}
.ig__a .ic{grid-area:ic;width:22px;height:22px;color:var(--blue);transition:color .5s var(--soft)}
.ig__an{grid-area:nm;font-size:var(--f2);font-weight:600;letter-spacing:.04em;line-height:1.4}
.ig__au{grid-area:hd;font-family:var(--en);font-size:var(--f1);color:var(--txt);letter-spacing:.02em;line-height:1.5;overflow-wrap:anywhere}
.ig__go{grid-area:go;display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--book);border-radius:var(--br);color:var(--book);font-size:var(--f1);letter-spacing:.08em;white-space:nowrap;transition:background-color .5s var(--soft),color .5s var(--soft)}
@media (hover:hover){.ig__a a:hover .ig__go{background:var(--book);color:#fff}.ig__a a:hover .ic{color:var(--gold)}}
.ig__p{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ig__p .fr{border-radius:calc(var(--r) - 6px)}
@media (min-width:1024px){
  .ig__g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center}
  .ig__g{row-gap:var(--u);grid-template-rows:auto 1fr}
  .ig__t{grid-column:1 / span 5;grid-row:1;align-self:end}
  .ig__l{grid-column:1 / span 5;grid-row:2;align-self:start}
  .ig__p{grid-column:7 / span 6;grid-row:1 / span 2;gap:12px}
}
@media (max-width:599.98px){
  .ig__go{width:40px;height:40px;min-height:0;padding:0;justify-content:center;font-size:0;letter-spacing:0}
  .ig__go::before{content:"";width:9px;height:9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateX(-2px) rotate(45deg)}
}

/* Instagram のボタン（院の頁のアクセスの段） */
.btn--ig{background:transparent;color:var(--book);box-shadow:inset 0 0 0 1px var(--book);transition:background-color .5s var(--soft),color .5s var(--soft)}
@media (hover:hover){.btn--ig:hover{background:var(--book);color:#fff}}
.acc__ig{margin-top:var(--u);padding:20px 24px;display:grid;gap:8px;justify-items:start}
.acc__igt{font-size:var(--f1);color:var(--txt)}
.acc__igu{font-family:var(--en);font-size:var(--f3);letter-spacing:.02em;color:var(--ink)}
.acc__ig .btn{margin-top:4px}

/* 携帯のメニュー：院ごとの Instagram */
.dr__c{grid-template-columns:minmax(0,1fr) 48px 48px}
.dr__ig{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--br);box-shadow:inset 0 0 0 1px var(--book);color:var(--book);transition:background-color .5s var(--soft),color .5s var(--soft)}
.dr__ig .ic{width:22px;height:22px}
@media (hover:hover){.dr__ig:hover{background:var(--book);color:#fff}}


/* 採用の段の 4 人の顔：下に小さく院と役目と名前（2026-11-05 なおさん「ちっちゃい文字でプロフィール」） */
.face__c{margin-top:10px;display:grid;gap:2px;line-height:1.5}
.face__r{font-size:var(--f1);letter-spacing:.04em;color:var(--txt)}
.face__n{font-size:var(--f1);letter-spacing:.08em;color:var(--ink)}
html[lang="en"] .face__n{font-family:var(--en);letter-spacing:.02em}
.face{min-width:0}
.face__c span{word-break:keep-all;overflow-wrap:anywhere}
.face{container-type:inline-size}
.face__r,.face__n{white-space:nowrap;font-size:min(var(--f0),10.4cqi);letter-spacing:.02em}  /* 院名・名前は 1 行ずつの 2 行に（2026-11-06 なおさん「文字小さくしていいから2行にして　デザイン優先」） */
html[lang="en"] .face__r,html[lang="en"] .face__n{white-space:normal;font-size:var(--f0)}
@media (max-width:599.98px){.tr__faces{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--gap)}}
/* 数字の札は一つずつ奥行きが違うので、上の線は札ごとに持つ（動いた時に字が線に触れない） */
.fcl{border-top:0}
.fc{border-top:1px solid var(--line);padding-top:calc(var(--u) + 8px)}

/* ---- 綾波 2026-11-05：水彩の絵（なおさんが選んだ C）の大きさと置き方をそろえる ----
   症状の絵＝円いっぱいの水彩（円の外は白＝乗算で消える）128px（携帯 104px）。アイコン 72px（携帯 56px）、ゆっくり浮く。
   スタッフ＝腰から上の水彩。下の切れ目は紙へ溶かす。横に立つ物は 168px、小さく添える物は 136px（携帯 120px） */
.sy6>li.sy{grid-template-columns:128px minmax(0,1fr);column-gap:var(--gap,24px);align-items:center}
.sy6 .sy__ill{width:128px;aspect-ratio:1!important;border-radius:50%!important}
@media (max-width:767px){.sy6>li.sy{grid-template-columns:104px minmax(0,1fr);column-gap:16px}.sy6 .sy__ill{width:104px}}
.ft6__ic{width:72px;height:72px}
.ft6__ic .wci,.ft6__ic .wci img{display:block;width:100%;height:100%}
.ft6__ic .wci img{animation:wci-float 5.6s cubic-bezier(.45,0,.55,1) infinite}
.ft6s>li:nth-child(2n) .wci img{animation-delay:-1.9s}
.ft6s>li:nth-child(3n) .wci img{animation-delay:-3.7s}
@keyframes wci-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (max-width:767px){.ft6__ic{width:56px;height:56px}}
.kch{-webkit-mask-image:linear-gradient(#000 84%,transparent 99%);mask-image:linear-gradient(#000 84%,transparent 99%)}
.kch--side,.who__c .kch,.ob-in__c .kch,.ct__t .kch,.kch--co{width:168px}
.sh__bx .kch,.kch--thumb,.kch--camp,.partner__c .kch{width:136px}
@media (max-width:767px){.kch--side,.who__c .kch,.ob-in__c .kch,.kch--co,.sh__bx .kch,.kch--thumb,.partner__c .kch{width:120px}}
@media (prefers-reduced-motion:reduce){.ft6__ic .wci img{animation:none}}
/* 綾波：施術の三つの札の絵も、症状と同じ円の水彩に（白い紙の箱と影はやめる） */
.apc__ill,.a3__ill{background:transparent!important;box-shadow:none!important;mix-blend-mode:multiply!important;border-radius:50%!important;overflow:hidden}
.apc__ill.vbox>picture,.apc__ill.vbox>video,.a3__ill.vbox>picture,.a3__ill.vbox>video{inset:0;width:100%;height:100%}
.cards3 .apc__ill::after{display:none}

/* 四角い地の中の丸い絵は、丸に切り抜いて地に直に置く（白い四角を見せない）。円の大きさは 3 つでそろえる（2026-11-06 なおさん「白い四角いるの？まるで良くない？」） */
.lp.lp--circ{background:transparent!important;mix-blend-mode:normal!important;filter:none!important;border-radius:0!important;overflow:clip}
.lp--circ.vbox>picture img,.lp--circ.vbox>video{clip-path:circle(var(--cr) at var(--cx) var(--cy));transform-origin:var(--cx) var(--cy);scale:var(--cs);translate:calc(50% - var(--cx)) calc(50% - var(--cy))}
.cards3 .lp--circ::after{display:none}

/* 大文字の小さな英字の札は、欧文の書体（Newsreader）で組む。和文のゴシックの英字で組まない。番号と同じ一つの家族にそろえ、字間は大文字の字面に合わせて .14em（欧文組版：大文字だけの語は字間を少し開けるが、.24em は開けすぎ。2026-11-06 なおさん「欧文組版の技術を活かしてたら、この書体にならなくない？」） */
.eb__e,.apc__e,.a3__e,.dr__nav a small{font-family:var(--en);font-weight:400;letter-spacing:.14em;font-feature-settings:"kern" 1,"lnum" 1}
html[lang="en"] .eb__e{letter-spacing:.14em}

/* 採用の映像（押した時だけ読む・音あり）。2026-11-06 */
.film{position:relative;margin-top:calc(var(--u) * 2);aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--r);background:#0d1014}
.film picture,.film img{display:block;width:100%;height:100%;object-fit:cover}
.film>video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.film__play{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:16px;padding:clamp(16px,4vw,48px);border:0;background:linear-gradient(to top,rgba(10,16,24,.55),rgba(10,16,24,0) 55%);color:#fff;cursor:pointer;text-align:left;font:inherit}
.film__ic{flex:none;width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,255,255,.8);display:grid;place-items:center;transition:background-color .5s,border-color .5s}
.film__ic::before{content:"";margin-left:5px;border-style:solid;border-width:10px 0 10px 16px;border-color:transparent transparent transparent #fff}
.film__t{display:flex;flex-direction:column;gap:4px;font-size:var(--f3);line-height:var(--lh3);letter-spacing:.08em}
.film__t small{font-size:var(--f1);opacity:.85;letter-spacing:.1em}
.film.is-on .film__play,.film.is-on picture{display:none}
@media (hover:hover){.film__play:hover .film__ic{background:rgba(255,255,255,.18);border-color:#fff}.film img{transition:transform 1.6s cubic-bezier(.33,0,.15,1)}.film__play:hover~picture img,.film:hover img{transform:scale(1.018)}}
@media (prefers-reduced-motion:reduce){.film img{transition:none!important;transform:none!important}}
.film>video[hidden]{display:none}

/* 綾波 2026-11-06：頁の頭の大きな英字（--disp）をヒラギノ明朝の欧文へ（ほかの端末はしっぽり明朝）。なおさん「この一番上の英語書体…合ってない」→ 画面で見たヒラギノ明朝の欧文に「これいいよ。これで決定」。小さな英字と数字（--en）は Newsreader のまま。SPES だけ */

/* 視差の抜けを埋める（2026-11-06 なおさん「パララックスをちゃんと細かく」）：帯の上の字・スタッフの見出し・地図・案内の絵・声の絞り込みと注記 */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .band__in{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zl)}
  .sfs__h{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zh)}
  .acc__m .ddmap,.kch{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zb)}
  .vp .chips,.vp__note{animation:zDep linear both;animation-timeline:view();animation-range:cover 0% cover 100%;--z:var(--zb)}
}}


/* 三つの段の上の線：列ごとに切れて点線に見えた（2026-11-06 なおさん「何で点線？」）→ PC は一本の線に。金の短い印は各列の頭に残す */
@media (min-width:1024px){.a3l{border-top:1px solid var(--line)}.a3l .a3{border-top:0}}

/* ご予約の段の地：空色のグラデーション → 白に近い灰（2026-11-06 なおさん「ここの背景は白か白に近いグレーとかは？」）。青と緑のボタンが立つ */
.bk.sec--sky{background:#F4F6F8}


/* 2026-11-06 Instagram の段の 4 つの四角を正方形のループ動画に（2 カットのディゾルブ）。写真の視差の拡大は掛けない（動画に替わる時にずれないよう） */
.ig__tile--v .vbox{position:absolute;inset:0}
.ig__tile--v .vbox img{scale:1}
/* 2026-11-06 なおさん「この細い下線が下過ぎない？」：頭の水平線を文字のかたまりに寄せる（リードの下 1u、下の縁から 2u） */
.ph__txt{bottom:calc(var(--u) * 3)}
.ph__foot{bottom:calc(var(--u) * 2)}

/* ══ 2026-11-06 ブロックマンの点検（なおさん「明らかに良くなるところはミサト判断で」）。戻すときはこの塊を消す ══ */
/* 1 トップの About：写真と文を 12 列の格子へ（写真 1〜5 列・文 7〜12 列。ほかの写真＋文の段と同じ 64／736 の線） */
@media (min-width:900px){
  .tb__g{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .tb__g>.tb__imgs{grid-column:1 / span 5}
  .tb__g>.tb__t{grid-column:7 / span 6}
}
/* 2 施術の「三つの手」と院の頁の方法：絵 1〜2 列・番号と見出し 3〜6 列・本文 7〜12 列（上のリードの 736 の線にそろえる） */
@media (min-width:1024px){
  .apl>.apc{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-areas:"ill ill no no no no text text text text text text" "ill ill head head head head text text text text text text"}
}
/* 3 見出しと次の行の間を 1u（予約の段と同じ） */
.ig__t .lead{margin-top:var(--u)}
.acc__ad{margin-top:var(--u)}
/* 4 院の札：時間の行が多い札でも、ボタンの行を札の下にそろえる */
.oc__b>.btns,.oc .oc__b .btns{margin-top:auto;padding-top:var(--u)}
/* 5 院の頁のケアの二枚：上でそろえる */
@media (min-width:768px){.prc{align-items:start}}
/* 6 声の札：一行の声でも、名前と本文の線を隣とそろえる */
@media (min-width:768px){.vq3 .vc__q{min-height:calc(var(--u) * 2 + 30px)}}
/* 7 数の札：数を札の下にそろえる（携帯で「千葉と長野」が二行でも） */
.fc__v{margin-top:auto}
.fc__k{margin-bottom:calc(var(--u) / 2)}
/* 9 小さな英字と数字は Newsreader（--disp のヒラギノ明朝は頁の頭の大きな英字だけ。2186 の決まり） */
.dr__hen,.ent__hen,.band__sub,.hcl__n,.hcl__n .num,.a3__no .num,.fc__v,.hp__lab .num,.tb__cr .no{font-family:var(--en)}
.chart .kc-num,.chart .kc-il__op,.chart .kc-ex__name i{font-family:var(--en)!important}
/* 10 施術の運動器の図：上のリードとほぼ同じ吹き出しは消す（図は残す） */
.tr-ex .kc-ex__lead{display:none}
/* 13 声の頁：絞り込みの後の大きな空きを詰め、各院の見出しの高さを横の絵に引っ張らせない */
.vp+.vg{padding-top:var(--sec-h)}
/* 11 施術の協力者の札：語り手と違う人の絵を外し、文を 1〜9 列に */
.partner--solo .partner__t{grid-column:1 / span 9}

/* 6 の続き：三行の声もあるので、札の三つの行（声・名前・本文）を subgrid で横の札とそろえる */
@media (min-width:1024px){@supports (grid-template-rows:subgrid){
  .vq3:not(.reel) .vc__q{padding-bottom:12px}
  .vq3:not(.reel) .vc{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .vq3:not(.reel) .vc__q{min-height:0}
}}
/* 2026-11-06 なおさん「ここ大文字にして縦しないと」：縦組みの中の欧字は全角の大文字で一字ずつ立てる */
.tu{text-orientation:upright;-webkit-text-orientation:upright;letter-spacing:.2em}

/* ══ 2026-11-06 ブロックマンの点検 二周目（ミサト判断。戻すときは tools/v2/_style_before_blockman2_20261106.css） ══ */
/* 英語：曲がった引用符が全角の幅になる（Don’ t）→ palt で詰める。小文字の英語に字間を付けない（欧文組版）。大文字の札だけ .14em */
html[lang="en"] body{font-feature-settings:"palt" 1}
html[lang="en"] body :not(.ph__en,.rg__en,.ph__en *,.rg__en *){letter-spacing:0!important}
html[lang="en"] body :is(.eb__e,.a3__e,.apc__e,.dr__nav a small){letter-spacing:.14em!important}
/* 大文字の札の字間を .14em に一本化（古い .3em／.2em が勝っていた） */
.eb__e,body.top .eb__e,.rcn__eb .eb__e,.hp__eb .eb__e,html[lang="en"] .eb__e,html[lang="en"] body.top .eb__e{letter-spacing:.14em}
/* 英語の見出し・リード・札の名・図の字は Newsreader。ヒラギノ明朝は頁の頭の大きな英字だけ（なおさんの決定のまま） */
html[lang="en"]{--disp:var(--en)}
html[lang="en"] :is(.ph__en,.rg__en){font-family:"Hiragino Mincho ProN","Shippori Mincho",serif}
/* 英語のリードは語の途中で分けない */
:lang(en):is(.lead,.sh__b,.ph__lead,.hp__lead,.band__copy,.rcn__p,.tr__q){hyphens:manual}
/* タブレット：施術の考え方の 3 列は 1024 から（820 で見出しが 3 字ずつ折れていた） */
@media (min-width:768px) and (max-width:1023.98px){
  .apl>.apc{grid-template-columns:120px minmax(0,1fr);grid-template-areas:"ill no" "ill head" "ill text"}
  .apl .apc__b>p:last-child{margin-top:var(--u);align-self:start}
}
/* ご予約の段：日本語も英語と同じ格子（5 列＋7 列目から 6 列） */
@media (min-width:1280px){.bk__t{grid-column:1 / span 5}.bk__l{grid-column:7 / span 6}}
/* 細い線は 2 色に：区切りは --line、押せる縁だけ青の .3 */
.bk__l>li.bk__c{border-top-color:var(--line)}
.ig__l{border-top-color:var(--line)}
.ig__a a{border-bottom-color:var(--line)}
.tr__dl,.tr__dl>div{border-color:var(--line)}
/* 頭の入口の帯だけ角が 18px だった → 札・ボタンと同じ角 */
.ent__in{border-radius:var(--br)}
/* 写真と字の段：字は写真の上の端から下げる（真ん中寄せで札の高さが段ごとにずれていた） */
@media (min-width:768px){.dir__g,.tr__g,.rcn__g{align-items:start}}
/* 見出しの横の小さな絵が見出しを押し下げない */
.sh .sh__a,.vg__h .sh__a{align-self:start}
:is(.sh__bx,.sh__c) .kch{max-height:calc(var(--u) * 4)}
/* 縦の一文はヒラギノ明朝（トップの縦の一文と同じ家族）。読み込んでいない Zen Old Mincho を外す */
:root{--min:"Hiragino Mincho ProN","Shippori Mincho",serif}
.band__t{font-family:var(--min);font-weight:500}
/* ボタン：送信は電話の水色を借りない。小さい札のボタンも本文の段の字 */
.btn--send{background:var(--blue);color:#fff;font-size:var(--f2);min-height:52px}
@media (hover:hover){.btn--send:hover{background:var(--blue-d)}}
.btn--s{font-size:var(--f2)}
.btn--rc{letter-spacing:.08em}

/* 2026-11-06 なおさん「インスタのリンクもわかりやすくしたい」：Instagram の色の丸い印（一目でインスタと分かる）、行全体が押せる札、ボタンは「Instagram を見る」で携帯でも字を出す */
.ig__a a{grid-template-columns:44px minmax(0,1fr) auto;column-gap:16px;min-height:80px}
.ig__a .ic{width:44px;height:44px;padding:10px;border-radius:50%;color:#fff;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);stroke-width:1.6}
@media (hover:hover){.ig__a a:hover .ic{color:#fff;translate:0 -2px}.ig__a a:hover .ig__an{color:var(--blue)}}
.ig__go{gap:8px;min-height:44px;background:var(--book);color:#fff}
.ig__go::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
@media (hover:hover){.ig__a a:hover .ig__go{background:var(--blue-d)}}
@media (max-width:599.98px){
  .ig__go{width:auto;height:auto;min-height:40px;padding:0 12px;font-size:var(--f1);letter-spacing:.04em}
  .ig__go::before{content:none}
}
/* 2026-11-06 なおさん「絵が小さいし、切り抜けてないし」：声の頁の院ごとの横の絵を大きく、白い地を頁の地に溶かす（乗算） */
@media (min-width:768px){.vg__side{grid-column:10 / span 3;justify-self:end;width:min(100%,280px)}}
.vg__side video,.vg__side img{mix-blend-mode:multiply}
.vg__side .vbox,.vg__side .kch,.vg__side .lp{background:transparent!important;box-shadow:none!important;max-height:none}
/* 2026-11-06 声のカードの絵：カードの頭に空色の丸と、症状・人の動く絵（白い地は乗算で丸に溶かす） */
.vc__art{position:relative;width:144px;aspect-ratio:1;margin:0 0 var(--u);border-radius:50%;background:#EAF5FB;overflow:hidden;display:grid;place-items:center}
.vc__art>.lp,.vc__art>.vbox{width:100%;height:100%;aspect-ratio:auto!important;background:transparent!important;box-shadow:none!important;border-radius:0}
.vc__art .lp picture img,.vc__art .lp video{width:100%;height:100%;object-fit:cover}
.vc__art>.lp{mix-blend-mode:normal;clip-path:circle(47% at 50% 50%)}  /* Safari は動画の multiply で送りが重くなるので、絵の円（半径 47〜48%）で切り抜く */
.vc__art--ch .kch{width:86%;height:auto;aspect-ratio:4 / 5!important;margin-top:14%}
.vc__art--ch .kch img,.vc__art--ch .kch video{width:100%;height:100%;object-fit:contain}
.vc__art--ch .kch--wide{width:84%;aspect-ratio:2 / 1!important;margin-top:0}
@media (max-width:767px){.vc__art{width:112px}}
.vq .vc__art{display:none}
/* 声のカードに絵が入って行が 4 段に（絵・見出し・名前・本文）。2 枚だけの院は 2 列で空きを作らない */
@media (min-width:1024px){@supports (grid-template-rows:subgrid){.vq3:not(.reel) .vc{grid-row:span 4}}
  .vq3:not(.reel):has(>.vc:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 名前の下の英字（2026-11-06 なおさん） */
.dir__en{display:block;margin-top:4px;font-family:var(--en);font-style:normal;font-size:var(--f2);letter-spacing:.04em;color:var(--lab)}

/* ── 足元（2026-11-06 作り直し。なおさん「フッターだけデザインもっとよくしたい」）──
   左に会社（ロゴ・SPES の意味・本社・代表の Instagram）、右に 4 院の名簿（院の頁・住所と駅・電話・LINE・Instagram）。
   金の水平線（左から 1.6 秒で引かれる）の下に、メニューと JP/EN・©。地は朝の空の水色。字は 15px 以上（© だけ 13px） */
.ft{position:relative;padding:calc(var(--u) * 2) 0 calc(var(--u) * 1.5);background:linear-gradient(180deg,var(--sky2) 0%,var(--sky) 62%,#F4F9FD 100%);color:var(--ink)}
.ft a{transition:color .5s var(--soft),background-color .5s var(--soft),border-color .5s var(--soft),opacity .5s var(--soft)}
.ft__in{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--u) * 1.5) var(--gap)}
.ft__brand{display:grid;gap:12px;align-content:start;justify-items:start}
.ft__logo{display:block;width:120px}
.ft__logo img{display:block;width:100%;height:auto}
.ft__latin{margin:4px 0 0;font-family:var(--en);font-style:italic;font-size:var(--f2);letter-spacing:.06em;color:var(--gold-t)}
.ft__co{display:grid;margin:0;font-size:var(--f1);line-height:1.75;color:var(--lab)}
.ft__con{color:var(--ink);font-weight:600;letter-spacing:.06em}
.ft__pres{display:inline-grid;grid-template-columns:32px auto;column-gap:12px;align-items:center;min-height:44px;margin-top:4px;color:var(--ink)}
.ft__pres .ic{grid-row:1 / span 2;width:32px;height:32px;padding:6px;border-radius:50%;color:#fff;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.ft__presn{font-size:var(--f1);line-height:1.5}
.ft__presu{font-family:var(--en);font-size:var(--f1);line-height:1.4;color:var(--lab)}
.ft__h{margin:0 0 4px}
.ft__h a{display:inline-flex;align-items:baseline;gap:14px;min-height:44px;align-items:center;color:var(--ink)}
.ft__hen{font-family:var(--en);font-style:italic;font-size:var(--f3);letter-spacing:.04em;color:var(--gold-t)}
.ft__hjp{font-size:var(--f1);letter-spacing:.12em;font-weight:600}
.ft .ic--ar{width:22px;height:11px;flex:none;transition:translate .5s var(--soft)}
.bkc__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--gap)}
.bkc__c{display:grid;align-content:start;gap:6px;padding:18px 0 20px;border-top:1px solid rgba(37,89,155,.16)}
.bkc__cn{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:var(--f3);font-weight:600;letter-spacing:.06em;line-height:1.4;color:var(--ink)}
.bkc__cn .ic--ar{color:var(--blue)}
.bkc__ca{margin:0;font-size:var(--f1);line-height:1.75;color:var(--lab)}
.bkc__ct{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:6px 0 0}
.bkc__tel{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-right:6px;color:var(--blue)}
.bkc__tel .ic{width:18px;height:18px}
.bkc__tel .num{font-size:var(--f3);letter-spacing:.04em}
.bkc__line{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border-radius:22px;background:var(--lineg);color:#fff;font-family:var(--sans);font-size:var(--f1);font-weight:600;letter-spacing:.04em}
.bkc__line .ic{width:18px;height:18px}
.bkc__ig{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;background:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)}
.bkc__ig .ic{width:22px;height:22px}
.ft__hz{grid-column:1 / -1;max-width:none;background:var(--gold)}
.ft__nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gap)}
.ft__nav a{display:flex;align-items:center;min-height:44px;font-size:var(--f1);letter-spacing:.06em;color:var(--ink)}
.ft__bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin:0;max-width:none}
.ft__lang{color:var(--blue);font-size:var(--f1)}
.ft__copy{font-family:var(--en);font-size:var(--f0);letter-spacing:.12em;color:var(--lab);white-space:nowrap}
@media (hover:hover){
  .bkc__cn:hover,.ft__h a:hover,.ft__nav a:hover,.ft__pres:hover .ft__presn{color:var(--blue)}
  .bkc__cn:hover .ic--ar,.ft__h a:hover .ic--ar{translate:5px 0}
  .bkc__tel:hover{color:var(--blue-d)}
  .bkc__tel:hover .num{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
  .bkc__line:hover{background:var(--lineg-d)}
  .bkc__ig:hover,.ft__pres:hover .ic,.ft__logo:hover{opacity:.8}
  .ft__nav a:hover{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--gold)}
}
@media (prefers-reduced-motion:reduce){
  .bkc__cn:hover .ic--ar,.ft__h a:hover .ic--ar{translate:none}
  .ft .ic--ar,.ft a{transition-duration:.15s}
}
html[data-motion=reduce] .bkc__cn:hover .ic--ar,html[data-motion=reduce] .ft__h a:hover .ic--ar{translate:none}
html[data-motion=reduce] .ft .ic--ar,html[data-motion=reduce] .ft a{transition-duration:.15s}
@media (min-width:600px){.bkc__l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:768px){
  .ft{padding-top:calc(var(--u) * 3)}
  .ft__in{grid-template-columns:repeat(12,minmax(0,1fr))}
  .ft__brand,.ft__cls{grid-column:1 / -1}
  .ft__nav{grid-column:1 / span 8}
  .ft__nav ul{display:flex;flex-wrap:wrap;gap:0 32px}
  .ft__bot{grid-column:9 / -1;justify-content:flex-end;align-self:center}
}
@media (min-width:1024px){
  .ft__brand{grid-column:1 / span 3}
  .ft__cls{grid-column:4 / -1}
}
@media (min-width:1280px){
  .bkc__l{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bkc__c{padding-right:8px}
}
/* 足元の詰め：院の札は名前・住所・連絡の 3 段を横でそろえる（名前や住所が 2 行の院があっても、電話の行が一列に並ぶ） */
@media (min-width:600px){
  .bkc__l{grid-auto-rows:auto}
  .bkc__c{grid-row:span 3;grid-template-rows:subgrid;row-gap:6px}
  .bkc__ct{align-self:end}
}
.ft__in{row-gap:var(--u)}
.ft__hz{margin-top:calc(var(--u) / 2)}
@media (max-width:767.98px){
  .ft__brand{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .ft__logo{width:96px}
  .ft__latin{margin:0 0 4px}
  .ft__co,.ft__pres{grid-column:1 / -1}
  .ft__hz{margin-top:0}
  .bkc__c{gap:2px;padding:14px 0 16px}
  .bkc__ct{margin-top:4px}
  .ft__nav ul{column-gap:16px}
  .ft__bot{flex-wrap:nowrap}
}

/* 足元の院：紙の札にする（2026-11-06 なおさん「フッターの各病院をカードにする？」「病院いっこ設立するのって大変なんだよ。だから、適当に並べたくない」）。
   サイトの札と同じ紙の白・きめ・角丸・影。院ごとに外観の絵（止め絵 4:5）・金の番号と地域・名前・住所、細い線の下に電話・LINE・Instagram。広い画面でも 2×2 */
.bkc__l{gap:12px}
.bkc__c{grid-row:auto;grid-template-rows:none;display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:16px;row-gap:0;align-content:start;padding:16px;border-top:0;border-radius:var(--r);background:var(--tex),var(--card);box-shadow:var(--shadow);transition:box-shadow .5s var(--soft),translate .5s var(--soft)}
.bkc__cx{display:block;align-self:start;border-radius:calc(var(--r) * .6);overflow:clip;background:#FEFDF9;box-shadow:inset 0 0 0 1px var(--line)}
.bkc__cx img{display:block;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;transition:scale 1.6s cubic-bezier(.33,0,.15,1)}
.bkc__cb{display:flex;flex-direction:column;gap:2px;min-width:0}
.bkc__no{display:flex;align-items:baseline;gap:10px;margin:0;font-size:var(--f1);line-height:1.5;letter-spacing:.06em;color:var(--lab)}
.bkc__no .num{font-family:var(--en);font-size:var(--f2);color:var(--gold-t)}
.bkc__cn{min-height:40px;font-size:var(--f2)}
.bkc__ct{grid-column:1 / -1;align-self:end;gap:8px;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.bkc__tel{margin-right:auto}
@media (min-width:600px){.bkc__l{gap:var(--gap)}.bkc__c{grid-template-columns:112px minmax(0,1fr);column-gap:20px;padding:24px}.bkc__ct{align-self:end}}
@media (min-width:1280px){.bkc__l{grid-template-columns:repeat(2,minmax(0,1fr))}.bkc__c{padding-right:24px}}
@media (max-width:899.98px){.bkc__l{grid-template-columns:minmax(0,1fr)}}  /* 2 列だと連絡の行が折れる幅 */
@media (hover:hover){.bkc__c:has(.bkc__cn:hover,.bkc__cx:hover){box-shadow:var(--shadow-h);translate:0 -2px}.bkc__c:has(.bkc__cn:hover,.bkc__cx:hover) .bkc__cx img{scale:1.018}}
@media (prefers-reduced-motion:reduce){.bkc__c:has(.bkc__cn:hover,.bkc__cx:hover){translate:none}.bkc__c:has(.bkc__cn:hover,.bkc__cx:hover) .bkc__cx img{scale:none}}

/* 個人情報の取り扱い：© の横に豆文字（2026-11-06 なおさん「今の半分にして。豆文字で」。法の注記の下限 12px） */
.ft__pv{display:inline-flex;align-items:center;min-height:32px;font-size:12px;letter-spacing:.04em;color:var(--lab)}
@media (hover:hover){.ft__pv:hover{color:var(--blue);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}}
/* 足元の最後の行：メニューと JP/EN・個人情報・© を高さをそろえて一列に（2026-11-06 なおさん「ここは高さ揃えて一列に」） */
@media (min-width:1024px){
  .ft__nav{grid-column:1 / span 7;align-self:center}
  .ft__nav ul{flex-wrap:nowrap;column-gap:clamp(18px,2.2vw,32px)}
  .ft__nav a{white-space:nowrap}
  .ft__bot{grid-column:8 / -1;flex-wrap:nowrap;column-gap:clamp(14px,1.6vw,24px);align-self:center}
}
@media (min-width:768px) and (max-width:1023.98px){.ft__nav,.ft__bot{grid-column:1 / -1}.ft__bot{justify-content:flex-start}}

/* ご予約の段の 4 院の札（足元から移した。2026-11-06 なおさん「これとこれを統合したら？」）：見出しは上、札は 2×2 で全幅。携帯も札をそのまま出す */
.bk__t,.bkc__l{grid-column:1 / -1!important}
.bkc__l{list-style:none;margin:0;padding:0;display:grid}
.bkc__l a{transition:color .5s var(--soft),background-color .5s var(--soft),opacity .5s var(--soft)}
.bkc__l .ic--ar{width:22px;height:11px;flex:none;transition:translate .5s var(--soft)}
@media (hover:hover){.bkc__cn:hover{color:var(--blue)}.bkc__cn:hover .ic--ar{translate:5px 0}}
@media (prefers-reduced-motion:reduce){.bkc__cn:hover .ic--ar{translate:none}}
/* 足元：院の札が抜けたので、会社の塊を横一列に */
@media (min-width:768px){.ft__brand{grid-column:1 / -1!important;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:end;column-gap:calc(var(--u) * 1.5)}.ft__brand>*{margin:0}}
/* Instagram の印は平らに（2026-11-06 なおさん「インスタのロゴがフラットデザインじゃなくてダサいからフラットにして」）：虹のグラデーションをやめ、細い線の丸に青の線の印。触れると青で塗り、印は白 */
.ig__a .ic,.ft__pres .ic,.bkc__ig{background:none;color:var(--blue);box-shadow:inset 0 0 0 1px rgba(37,89,155,.35);transition:background-color .5s var(--soft),color .5s var(--soft),box-shadow .5s var(--soft)}
@media (hover:hover){
  .ig__a a:hover .ic,.ft__pres:hover .ic,.bkc__ig:hover{background:var(--blue);color:#fff;box-shadow:inset 0 0 0 1px var(--blue);opacity:1}
}
/* 足元の色：SPES の青（2026-11-07 なおさん「フッターのいろがきにいらない」→ 4 案から「aだな」）。字は白、補いの字は白の .75、線と飾りは金 #D9C08A。英字の注記「SPES – Latin for hope」は外した（「これ邪魔」） */
.ft{background:#25599B;color:#fff}
.ft :is(.ft__con,.ft__presn,.ft__nav a,.ft__lang,.ft__lang .ls__o){color:#fff}
.ft :is(.ft__co,.ft__coa,.ft__presu,.ft__copy,.ft__pv){color:rgba(255,255,255,.75)}
.ft .ls__bar{background:rgba(255,255,255,.4)}
.ft .ls__o:not(.is-on){color:rgba(255,255,255,.6)}
.ft .ls__o.is-on{border-color:#fff;text-decoration-color:#fff}
.ft__hz{background:#D9C08A}
.ft__pres .ic{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ft ::selection{background:#D9C08A;color:#1A2028}
.ft :focus-visible{outline-color:#fff}
@media (hover:hover){
  .ft__nav a:hover,.ft__pres:hover .ft__presn,.ft .ls__o:not(.is-on):hover,.ft__pv:hover{color:#D9C08A}
  .ft__nav a:hover{text-decoration-color:#D9C08A}
  .ft__pres:hover .ic{background:#fff;color:#25599B;box-shadow:inset 0 0 0 1px #fff}
}
/* 英字の注記は代表の Instagram の下へ（なおさん「入れるなら白沼の下」） */
.ft__brand{grid-template-columns:auto minmax(0,1fr) auto}
@media (max-width:767.98px){.ft__brand{grid-template-columns:minmax(0,1fr)}}
.ft__side{display:grid;justify-items:start;row-gap:6px}
.ft__side .ft__latin{margin:0 0 0 44px;font-size:var(--f1);color:#D9C08A}
/* 携帯の下の帯の分の空き（body の padding）も足元の青に */
body{padding-bottom:0}
.ft{padding-bottom:calc(var(--u) * 1.5 + var(--bb, 0px))}
/* 院の札の LINE と Instagram を目立たせる（2026-11-07 なおさん「LINEとインスタのリンクは目立たせたいみたい」）：電話の番号は一段目、二段目に「LINEで予約」と「Instagram」を同じ幅の大きなボタンで並べる。Instagram は平らな一色 */
.bkc__ct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.bkc__tel{grid-column:1 / -1;margin:0;justify-self:start}
.bkc__line,.bkc__ig{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;height:auto;min-height:52px;padding:0 16px;border-radius:26px;font-family:var(--sans);font-size:var(--f2);font-weight:600;letter-spacing:.04em;color:#fff;white-space:nowrap}
.bkc__line .ic,.bkc__ig .ic{width:20px;height:20px}
.bkc__ig,.bkc__ig:hover{background:#C13584;color:#fff;box-shadow:none}
@media (hover:hover){.bkc__ig:hover{background:#A52C70;color:#fff;box-shadow:none}}
.bkc__ct :is(.bkc__line,.bkc__ig) span{white-space:nowrap}
.bkc__ct :is(.bkc__line,.bkc__ig) .ic{width:20px;height:20px;flex:none}
@media (max-width:419.98px){.bkc__ct{column-gap:8px}.bkc__ct :is(.bkc__line,.bkc__ig){padding:0 8px;gap:6px;font-size:var(--f1);letter-spacing:.02em}}
/* 院長の顔の札：名前が写真の出現（52px・1.6 秒）より先に上がって写真に重なっていた → 名前も写真と同じ量・同じ時間で上げ、間を 16px に（2026-11-07 なおさん「文字と画像がちかくて、パララックスの時に重なるから少し離そう」） */
.face__c{margin-top:16px}
html.js .face__c[data-rv]:not(.is-in):not(.fr):not(.has-ln){transform:translateY(var(--mvp))}
html.js .face__c[data-rv]:not(.fr):not(.has-ln){transition:opacity 1.1s var(--pic-in) var(--d,0s),transform var(--tpic) var(--pic-mv) var(--d,0s)}

/* ===== 動きを減らす設定の写し（kit tools/reduce_copy.py が作る。ここは直さない） ===== */
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important}
html[data-motion=reduce].js [data-rv],html[data-motion=reduce].js .has-ln>.ln,html[data-motion=reduce].js .has-ln>.lu,html[data-motion=reduce].js [data-hz]{opacity:1!important;transform:none!important}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke!important;transition-duration:.15s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-motion=reduce].js [data-rv],html[data-motion=reduce].js .has-ln>.ln,html[data-motion=reduce].js .has-ln>.lu,html[data-motion=reduce].js [data-hz],html[data-motion=reduce].js .fr[data-rv]{opacity:1!important;transform:none!important}
html[data-motion=reduce] .fr img,html[data-motion=reduce] .fr[data-rv] img,html[data-motion=reduce] a:hover .fr img,html[data-motion=reduce] a:hover .fr.is-in img{scale:1!important;translate:none!important}
html[data-motion=reduce] a:hover,html[data-motion=reduce] button:hover,html[data-motion=reduce] .btn:hover,html[data-motion=reduce] .fbk:hover,html[data-motion=reduce] .ob-idx a:hover{translate:none!important}
html[data-motion=reduce] .hs .hl,html[data-motion=reduce] .hs .hs__en{-webkit-mask-image:none!important;mask-image:none!important;opacity:1!important}
html[data-motion=reduce] .hero__scenes,html[data-motion=reduce] .hero__scenes .hl{animation:none!important}
html[data-motion=reduce] .hero__scenes .hs:not(:first-child){display:none}
html[data-motion=reduce] .dd,html[data-motion=reduce] .hd__dd.is-open .dd{translate:none!important}
html[data-motion=reduce] .ent__a:hover .ic--ar,html[data-motion=reduce] .ent__rc:hover .ic--ar,html[data-motion=reduce] .dr__rc:hover,html[data-motion=reduce] .dr__rc:hover .ic--ar,html[data-motion=reduce] .tr__btns .btn:hover,html[data-motion=reduce] .tr__btns .btn:hover .ic--ar,html[data-motion=reduce] .hd__rc:hover,html[data-motion=reduce] body.top .more:hover i{translate:none!important}
html[data-motion=reduce] .hd__ddb .ic--dn{transition:none!important}
html[data-motion=reduce] .hsl.is-on{animation:none!important}
html[data-motion=reduce] .ent__a.is-run::before{animation:none!important}
html[data-motion=reduce] .hcl:hover .hcl__go .ic--ar{translate:none!important}
html[data-motion=reduce] .ph__go .btn:hover,html[data-motion=reduce] .ph__go .btn:hover .ic--ar{translate:none!important}
html[data-motion=reduce] .hero--top .hero__scenes .hs .hl,html[data-motion=reduce] .hero--top .hero__scenes .hs .ch{opacity:1!important;filter:none!important;translate:none!important;animation:none!important}
html[data-motion=reduce] .bdg__dot{animation:none!important;opacity:1!important}
html[data-motion=reduce] .ft6__ic .wci img{animation:none}
html[data-motion=reduce] .film img{transition:none!important;transform:none!important}
html[data-motion=reduce] .bkc__cn:hover .ic--ar,html[data-motion=reduce] .ft__h a:hover .ic--ar{translate:none}
html[data-motion=reduce] .ft .ic--ar,html[data-motion=reduce] .ft a{transition-duration:.15s}
html[data-motion=reduce] .bkc__c:has(.bkc__cn:hover,.bkc__cx:hover){translate:none}
html[data-motion=reduce] .bkc__c:has(.bkc__cn:hover,.bkc__cx:hover) .bkc__cx img{scale:none}
html[data-motion=reduce] .bkc__cn:hover .ic--ar{translate:none}
/* ===== 写しここまで ===== */