/* ============================================================
   C案【上質ホテル】 — 手本の骨格・装飾・動きを再現
   関口の緑×白（地 #F6FAF2 ／ 本文 #2B2E29 ／ 差し色 #5FA03C）／ 角丸ゼロ ／ 影ゼロ
   文字サイズは 100 / 22 / 16 / 15 / 10 の5段
   余白は 280 / 125 / 33 の3段
   ============================================================ */
:root{
  --bg:#F6FAF2;          /* さらに淡い地（ほぼ白） */
  --tint:#EDF4E6;        /* 淡い緑 */
  --ink:#2B2E29;         /* 文字の黒 */
  --sub:#5B6157;         /* 補足の文字 */
  --acc:#5FA03C;         /* 主役の緑（細い線・小さな面だけ） */
  --acc-d:#3E7226;       /* 濃い緑（文字・締め） */
  --rule:#8CBB73;        /* 主役の緑の細線 */
  --rule2:#E2E8DC;       /* 線 */
  --ph-ink:#3E7226;
  --serif:Georgia,"Times New Roman","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --hd:90px;
  --gapS:33px;
  --gapM:125px;
  --gapL:280px;
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-hotel:cubic-bezier(.165,.84,.44,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.75;
  letter-spacing:.1em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--ink);text-decoration:none}
::selection{background:rgba(95,160,60,.28)}
img,svg{display:block}
h1,h2,h3,h4{font-weight:300;line-height:1.4}
li{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- 読み込み画面（ロゴが左から水色に染まる） ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  animation:loadOut .9s var(--ease-out) 1.7s forwards}
.loader.is-off{opacity:0;visibility:hidden;pointer-events:none}
@keyframes loadOut{to{opacity:0;visibility:hidden}}
.loader .lg{width:48.2%;max-width:420px}
.loader .lg img{width:100%;height:auto;display:block}
.loader .lgbar{display:block;height:1px;background:#e3e5e7;margin-top:22px;overflow:hidden}
.loader .lgbar i{display:block;height:100%;width:100%;background:#5FA03C;transform:scaleX(0);transform-origin:0 50%;animation:lgfill 1.7s cubic-bezier(.19,1,.22,1) forwards}
@keyframes lgfill{to{transform:scaleX(1)}}

/* ---------- 【決め手8】画面固定の背景（白い雲形・半透明） ---------- */
.p-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.p-bg path{fill:var(--tint)}

.l-wrap{position:relative;z-index:1}

/* ---------- 固定ヘッダー ---------- */
.hd{position:fixed;top:0;left:0;width:100%;height:var(--hd);z-index:60;pointer-events:none;
    transition:height .6s cubic-bezier(.23,1,.32,1)}
.hd.is-min{height:72px}
.hd-band{display:none}
.hd-l{position:absolute;top:0;left:0;display:flex;gap:1px;pointer-events:auto}
.hd-r{position:absolute;top:0;right:0;pointer-events:auto}
.hd-box{position:relative;display:flex;align-items:center;justify-content:center;
  width:var(--hd);height:var(--hd);background:#fff;overflow:hidden;
  transition:width .4s var(--ease-hotel),height .6s cubic-bezier(.23,1,.32,1)}
.hd.is-min .hd-box{height:72px}
/* 電話ボタン：ホバーで幅が伸び、番号が左から現れる */
.hd-tel{width:var(--hd)}
.hd-tel .ic{transition:transform .4s var(--ease-hotel)}
.hd-tel .num{position:absolute;left:52px;font-family:var(--serif);font-size:15px;
  letter-spacing:.04em;white-space:nowrap;color:var(--ink);
  clip-path:inset(0 100% 0 0);transition:clip-path .4s var(--ease-hotel)}
.hd-tel:hover{width:190px}
.hd-tel:hover .ic{transform:translateX(-12px)}
.hd-tel:hover .num{clip-path:inset(0)}
.hd-rsv{flex-direction:column;font-family:var(--serif);font-size:14px;letter-spacing:.06em;line-height:1.3;text-align:center}
.hd-rsv small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;color:var(--sub)}
.hd-menu{flex-direction:column}
.hd-menu span{display:block;width:18px;height:1px;background:var(--acc);margin:3px auto;flex:0 0 auto;
  transition:transform .5s var(--ease-out),opacity .3s}
.is-open .hd-menu span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.is-open .hd-menu span:nth-child(2){opacity:0}
.is-open .hd-menu span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
/* 手本と同じ「中央にロゴ」 */
.hd-logo{position:absolute;left:50%;top:0;height:var(--hd);transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;pointer-events:auto;
  background:#fff;padding:0 24px;
  transition:height .6s cubic-bezier(.23,1,.32,1)}
.hd.is-min .hd-logo{height:72px}
/* 本物のロゴ画像：上下の透明余白だけ刈り取って表示（縦横比はそのまま・拡大縮小は高さ1つで決まる） */
.lg-img{display:block;flex:0 0 auto;overflow:hidden;height:var(--lgh);width:calc(var(--lgh) * 5.1121)}
.lg-img img{display:block;width:calc(var(--lgh) * 5.1121);height:calc(var(--lgh) * 1.8307);
  margin-top:calc(var(--lgh) * -0.44409)}
.hd-logo .lg-img{--lgh:44px}
/* SEO用ティッカー（18秒で右→左） */
.hd-tick{position:absolute;top:35px;right:104px;pointer-events:none;text-align:right}
.hd.is-min .hd-tick{top:26px}
.hd-tick h1,.hd-tick p{font-size:14px;font-weight:300;letter-spacing:.12em;white-space:nowrap;color:var(--sub);
  margin:0;background:rgba(255,255,255,.92);padding:5px 14px}

/* ---------- メニュー ---------- */
.nav{position:fixed;inset:0;z-index:55;background:var(--bg);
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out);
  display:flex;align-items:center;justify-content:center;visibility:hidden}
.is-open .nav{clip-path:inset(0);visibility:visible}
.nav ul{width:min(88%,520px)}
.nav li{border-bottom:1px solid var(--rule2)}
.nav a{display:flex;align-items:baseline;gap:16px;padding:20px 4px;font-size:16px;letter-spacing:.14em}
.nav a em{font-family:var(--serif);font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--acc-d)}
.nav .navtel{display:block;margin-top:40px;font-family:var(--serif);font-size:22px;letter-spacing:.06em;text-align:center}

/* ---------- 共通パーツ ---------- */
.sec{position:relative;padding:0 0 var(--gapL)}
.inner{width:87.5%;max-width:1440px;margin:0 auto}
.s-ttl{text-align:center;position:relative;z-index:2}
.s-en{font-family:var(--serif);font-weight:300;font-size:clamp(3.25rem,8.4vw,6.25rem);
  line-height:1;letter-spacing:-.02em;margin-bottom:.1em}
.s-en.tight{letter-spacing:-.06em}
.s-en i{display:inline-block;font-style:normal}
.s-jp{font-size:15px;letter-spacing:.2em;overflow:hidden;color:var(--acc-d)}
.s-jp span{display:inline-block}

/* 写真の場所（色面）＋ 裏のぼかし複製 */
.pic{position:relative;display:block}
.pic .u-blur{position:absolute;left:2.5%;top:150px;width:95%;height:100%;z-index:0;
  transform:translate3d(0,var(--py,0px),0)}
.pic .u-blur i{display:block;width:100%;height:100%;filter:blur(38px) saturate(.45) brightness(1.1);opacity:.55;
  transition:transform 1.5s var(--ease-out)}
.pic .frame{position:relative;z-index:1;overflow:hidden;clip-path:inset(0);
  transition:clip-path 1.5s var(--ease-out)}
.pic .face{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  transition:transform 1.5s var(--ease-out)}
.pic .face::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.72),rgba(255,255,255,0) 62%)}
.pic .cap-in{position:relative;z-index:2;font-size:13px;letter-spacing:.12em;color:var(--ph-ink)}
.pic:hover .frame{clip-path:inset(10px)}
.pic:hover .face{transform:scale(1.1)}
.pic:hover .u-blur i{transform:scale(.9)}
.pic .frame,.pic .face,.pic .u-blur i{transition-duration:1.5s}
.pic:not(:hover) .frame,.pic:not(:hover) .face,.pic:not(:hover) .u-blur i{
  transition-duration:.5s;transition-timing-function:cubic-bezier(.25,.46,.45,.94)}
.ph1{background:linear-gradient(155deg,#F3F8ED 0%,#E4EFDA 45%,#C6DCB4 100%)}
.ph2{background:linear-gradient(200deg,#F5F9F1 0%,#E7F0DF 50%,#CBDDBC 100%)}
.ph3{background:linear-gradient(120deg,#F1F7EB 0%,#DFEBD4 60%,#C0D8AC 100%)}
.ph4{background:linear-gradient(170deg,#F4F8F0 0%,#E5EEDD 55%,#C8DCB8 100%)}

/* ---------- 写真・イラストの出し方（緑×白に合わせる：彩度は落としたまま青みだけ抜く） ---------- */
.face>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;
  filter:saturate(.78) contrast(1.02) brightness(1.03) sepia(.07)}
/* 写真の上の白いつやは弱める（写真が飛ばないように） */
.pic .face.is-photo::after{background:radial-gradient(120% 90% at 30% 12%,rgba(255,255,255,.22),rgba(255,255,255,0) 62%)}
/* 症状の帯＝人物写真。下半分にごく淡い暗がりを敷いて、白い見出し板の縁を締める */
.band .face>img{filter:saturate(.74) contrast(1.02) brightness(1.03) sepia(.07)}
.band .face::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(43,46,41,.30) 0%,rgba(43,46,41,.10) 34%,rgba(43,46,41,0) 62%)}
/* 裏のぼかし層も同じ絵にする（色面のときと同じ光り方を保つ） */
.u-blur i{background-size:cover;background-position:50% 50%}
/* 予約帯の背景写真 */
.reserve .bgpic>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.74) contrast(1.02) brightness(1.04) sepia(.07)}
.reserve .bgpic::after{content:"";position:absolute;inset:0;background:rgba(246,250,242,.36)}

/* 白62×62の角ボタン（＋／▶） */
.corner{position:absolute;right:0;bottom:0;z-index:3;width:62px;height:62px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform 1.5s var(--ease-out)}
.pic:hover .corner{transform:translate3d(-9px,-9px,0)}
.corner .bar{position:absolute;background:var(--acc)}
.corner .bar.h{width:14px;height:1px;transition:transform .25s cubic-bezier(.77,0,.175,1)}
.corner .bar.v{width:1px;height:14px;transition:transform .25s cubic-bezier(.77,0,.175,1) .15s}
.pic:hover .corner .bar.h{transform:translate3d(100%,0,0);transition:transform .6s var(--ease-hotel) .3s}
.pic:hover .corner .bar.v{transform:translate3d(100%,0,0);transition:transform .6s var(--ease-hotel) .45s}
.corner .tri{width:0;height:0;border-left:8px solid var(--acc);border-top:5px solid transparent;border-bottom:5px solid transparent}
/* 【動き】Featureのモーダル：clip-path が上から開く 0.8s */
.mdl{position:fixed;inset:0;z-index:80;background:var(--bg);visibility:hidden;
  display:flex;align-items:center;justify-content:center;padding:40px 6%;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-out),visibility 0s linear .8s}
.mdl.is-on{visibility:visible;clip-path:inset(0);transition:clip-path .8s var(--ease-out),visibility 0s}
.mdl-in{width:min(100%,760px);text-align:center}
.mdl-in em{display:block;font-family:var(--serif);font-style:normal;font-size:10px;
  letter-spacing:.2em;color:var(--acc-d);margin-bottom:14px}
.mdl-in h3{font-size:22px;letter-spacing:.08em}
.mdl-in p{margin-top:1.8em;font-size:16px;line-height:1.75;letter-spacing:.1em;text-align:left}
.mdl-cl{position:absolute;right:0;top:0;width:62px;height:62px;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:transform .8s var(--ease-out)}
.mdl-cl:hover{transform:translate3d(-9px,9px,0)}
.mdl-cl span{position:absolute;width:16px;height:1px;background:var(--ink)}
.mdl-cl span:nth-child(1){transform:rotate(45deg)}
.mdl-cl span:nth-child(2){transform:rotate(-45deg)}
.cap{margin-top:var(--gapS);font-size:22px;letter-spacing:.08em;line-height:1.36;text-align:center}
.cap em{display:block;font-family:var(--serif);font-style:normal;font-size:10px;letter-spacing:.2em;
  color:var(--acc-d);margin-bottom:10px}

/* ---------- 視差（GSAPは --py だけを動かす。transformの取り合いを起こさない） ---------- */
[data-parallax]{transform:translate3d(0,var(--py,0px),0)}

/* ---------- 画面に入った時の動き（CSSのtransitionで動かす＝JSが転んでも文字は残る） ----------
   隠す指定は .js-on が付いた時だけ有効。JSが動かなければ最初から全部見える。 */
.js-on [data-rev]{opacity:0;transform:translate3d(0,calc(var(--py,0px) + 200px),0);
  transition:transform 3.5s var(--ease-out),opacity 1s cubic-bezier(.445,.05,.55,.95)}
.js-on [data-rev].is-in{opacity:1;transform:translate3d(0,var(--py,0px),0)}
.js-on [data-rev].is-done{transition:opacity .3s linear}
.js-on .s-en i{opacity:0;transform:translate3d(0,40px,0) rotate(6deg);
  transition:opacity 1.75s cubic-bezier(.445,.05,.55,.95),transform 2.5s var(--ease-hotel)}
.js-on .s-en i.is-in{opacity:1;transform:none}
.js-on .s-jp span{opacity:0;transform:translate3d(0,100%,0);
  transition:transform 1.5s cubic-bezier(.445,.05,.55,.95) 1.4s,opacity .9s linear 1.4s}
.js-on .s-jp span.is-in{opacity:1;transform:none}
.js-on .f-hair{transform:scaleY(0);transform-origin:0 0;
  transition:transform .5s var(--ease-hotel) .5s}
.js-on .f-hair.b{transition-duration:2s;transition-delay:1.5s}
.js-on .f-hair.is-in{transform:scaleY(1)}
.js-on .kv-ttl .ch>i{opacity:0;transform:translate3d(0,120%,0);
  transition:transform 1s var(--ease-out),opacity 1s var(--ease-hotel)}
.js-on .kv-ttl .ch>i.is-in{opacity:1;transform:none}

/* 文字の色が下から染み込む（JSが付ける時だけ・6秒で必ず外す） */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .txt-color{background-image:linear-gradient(0deg,rgba(43,46,41,0) 33%,#2B2E29 66%);
    background-size:100% 300%;background-position:50% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    transition:background-position 4.5s cubic-bezier(.39,.575,.565,1),
               transform 3.5s var(--ease-out),opacity 1s cubic-bezier(.445,.05,.55,.95)}
  .txt-color.is-soak{background-position:50% 0%}
}

/* 文字リンク（ホバーで上へ抜けて入れ替わる） */
.hup{position:relative;display:inline-block;overflow:hidden;vertical-align:bottom}
.hup i{display:block;font-style:normal;transition:transform 1.4s cubic-bezier(.07,1,.07,1)}
.hup i+i{position:absolute;left:0;top:110%}
.hup:hover i{transform:translate3d(0,-110%,0)}

/* ============================================================
   1｜キービジュアル
   ============================================================ */
.kv{padding-top:238px;text-align:center;position:relative}
@keyframes markcolor{0%{fill:#5FA03C}25%{fill:#3E7226}50%{fill:#5FA03C}75%{fill:#3E7226}100%{fill:#5FA03C}}
.mark{fill:#5FA03C;animation:markcolor 12s linear infinite}
.logo-w{font-family:var(--sans);font-size:19px;letter-spacing:.14em;margin-top:10px;white-space:nowrap}
.logo-w em{display:block;font-family:var(--serif);font-style:normal;font-size:10px;
  letter-spacing:.24em;color:var(--sub);margin-top:4px}
.kv-ttl{margin-top:0;font-size:clamp(1.25rem,5.2vw,2.8125rem);letter-spacing:.07em;font-weight:300;
  line-height:1.66;padding-bottom:1.5em}
.kv-ttl i{display:inline-block;font-style:normal}
/* 各文字を自分だけで刈り取る＝下からせり上がるのに、円弧の裾は切られない */
.kv-ttl .ch{overflow:hidden;vertical-align:bottom}
.kv-ttl i>i{display:inline-block}

/* 【決め手2】巨大な円の縁を回るカードスライダー */
.wheel{--cw:min(600px,32.85vw);--ch:min(1020px,57.36vw);--wstep:4.5;
  position:relative;margin-top:180px;height:calc(var(--ch) + 40px);overflow:hidden;cursor:grab}
.wheel.is-drag{cursor:grabbing}
.wcard{position:absolute;top:0;left:50%;width:var(--cw);height:var(--ch);
  margin-left:calc(var(--cw) / -2);transform-origin:50% 764%;will-change:transform}
.wcard .frame{width:100%;height:100%}
.wcard .face{height:100%;flex-direction:column;gap:14px}
.wcard .no{position:relative;z-index:2;font-family:var(--serif);font-size:10px;letter-spacing:.24em;color:var(--sub)}
.kv-lead{margin:70px auto 0;width:87.5%;max-width:900px;font-size:22px;line-height:1.818;letter-spacing:.12em}
.kv-lead p+p{margin-top:1.6em}
.kv-btns{margin-top:56px;display:flex;justify-content:center;gap:1px;flex-wrap:wrap}
.kv-btns a{background:#fff;min-width:300px;padding:26px 30px;font-size:16px;letter-spacing:.12em;
  transition:transform 1.5s var(--ease-out)}
.kv-btns a b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.04em;color:var(--acc-d)}
.kv-btns a:hover{transform:translate3d(0,-9px,0)}
.kv-sign{margin:120px auto 0;width:min(1100px,86%)}
.kv-sign svg{width:100%;height:auto}
.kv-sign path{fill:none;stroke:#D4E6CA;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   2｜Feature（中央に巨大英字・左右に不揃いの写真）
   ============================================================ */
.feature{padding-top:0}
.f-hair{position:absolute;left:50%;width:1px;background:var(--acc);transform-origin:0 0;z-index:0}
.f-hair.a{top:0;height:236px}
.f-hair.b{top:478px;bottom:280px}
/* 手本と同じく、巨大英字の「横」に写真が来るよう、写真の塊を見出しより上へ食い込ませる */
.f-grid{position:relative;width:95%;max-width:1600px;margin:0 auto;margin-top:-232px}
.f-row{display:grid;grid-template-columns:1fr 26% 1fr;align-items:start;column-gap:0}
.f-row+.f-row{margin-top:120px}
.f-item{position:relative;z-index:1}
.f-item .frame{height:100%}
.f-item .face{height:100%}
/* 写真の裏のぼかし層は写真より150px下まで伸びる＝説明文の上に被って字が薄く見える。
   文字側を必ず上に置く。 */
.f-txt,.cap{position:relative;z-index:2}
.f-txt{margin-top:var(--gapS);text-align:center}
.f-txt h3{font-size:22px;letter-spacing:.08em}
.f-txt h3 em{display:block;font-family:var(--serif);font-style:normal;font-size:10px;
  letter-spacing:.2em;color:var(--acc-d);margin-bottom:10px}
.f-txt p{margin-top:16px;font-size:16px;line-height:1.75;letter-spacing:.1em;text-align:left}
.a-left{justify-self:start}
.a-right{justify-self:end}

/* ============================================================
   3｜診療時間
   ============================================================ */
.hours-wrap{margin-top:var(--gapM);width:87.5%;max-width:1260px;margin-left:auto;margin-right:auto}
table{width:100%;border-collapse:collapse;background:transparent}
th,td{border-bottom:1px solid var(--rule);padding:22px 4px;text-align:center;font-weight:300;
  font-size:15px;letter-spacing:.08em}
thead th{border-bottom:1px solid var(--rule);color:var(--sub);font-size:15px;letter-spacing:.16em}
tbody th{text-align:left;font-family:var(--serif);font-size:18px;letter-spacing:.02em;
  border-right:1px solid var(--rule);padding-left:8px;white-space:nowrap}
td{font-family:var(--serif);font-size:17px}
.hours-note{margin-top:34px;font-size:16px;line-height:1.9;letter-spacing:.1em}
.hours-note li{position:relative;padding-left:1.2em}
.hours-note li::before{content:"—";position:absolute;left:0;color:var(--acc-d)}

/* ============================================================
   4｜お知らせ
   ============================================================ */
.news-list{margin-top:var(--gapM);width:87.5%;max-width:1260px;margin-left:auto;margin-right:auto}
.news-list li{border-bottom:1px solid var(--rule)}
.news-list a{display:grid;grid-template-columns:170px 1fr;gap:0 30px;padding:34px 4px;align-items:baseline}
.news-list time{font-family:var(--serif);font-size:16px;letter-spacing:.06em;color:var(--sub)}
.news-list h3{font-size:22px;letter-spacing:.08em}
.news-list p{margin-top:12px;font-size:16px;letter-spacing:.1em}

/* ============================================================
   5｜症状からさがす（全幅・横ドラッグ帯）
   ============================================================ */
.sym-lead{margin:var(--gapS) auto 0;width:87.5%;max-width:900px;text-align:center;
  font-size:22px;line-height:1.818;letter-spacing:.1em}
.band{margin-top:var(--gapM);width:100vw;margin-left:calc(50% - 50vw);
  display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;cursor:grab;padding-bottom:2px}
.band::-webkit-scrollbar{display:none}
.band.is-drag{cursor:grabbing}
.band a{position:relative;flex:0 0 auto;width:320px;height:min(720px,42vw);min-height:300px;
  display:block;overflow:hidden;clip-path:inset(0);transition:clip-path 1.5s var(--ease-out)}
.band a:hover{clip-path:inset(10px)}
.band .face{position:absolute;inset:0;transition:transform 1.5s var(--ease-out)}
.band a:hover .face{transform:scale(1.1)}
.band .lb{position:absolute;left:0;bottom:0;z-index:2;background:#fff;padding:20px 26px;
  font-size:16px;letter-spacing:.12em;white-space:nowrap}
.band .lb em{display:block;font-family:var(--serif);font-style:normal;font-size:10px;
  letter-spacing:.2em;color:var(--acc-d)}

/* ============================================================
   6｜院長のごあいさつ
   ============================================================ */
.msg-grid{margin-top:var(--gapM);display:grid;grid-template-columns:30.16% 1fr;gap:0 8.5%;align-items:start}
.msg-pic .frame{aspect-ratio:3/4}
.msg-pic .face{height:100%}
.msg-body p{font-size:16px;line-height:1.75;letter-spacing:.1em}
.msg-body h3{font-size:22px;letter-spacing:.1em;margin-bottom:1.3em}
.msg-name{margin-top:2em;font-size:16px;letter-spacing:.16em}
.msg-name b{font-family:var(--serif);font-weight:400}

/* ============================================================
   7｜アクセス
   ============================================================ */
.acc-grid{margin-top:var(--gapM);display:flex;justify-content:space-between;flex-wrap:wrap;gap:60px 0}
.acc-col{width:46.43%}
.acc-col h3{text-align:center;font-size:22px;letter-spacing:.1em;padding-bottom:38px;
  border-bottom:1px solid var(--rule)}
.acc-col dl{display:flex;flex-wrap:wrap}
.acc-col dt,.acc-col dd{padding:25px 0;border-bottom:1px solid var(--rule);font-size:16px;letter-spacing:.1em}
.acc-col dt{width:165px;border-right:1px solid var(--rule);color:var(--sub);font-size:15px;letter-spacing:.16em}
.acc-col dd{width:calc(100% - 165px);padding-left:25px}
.acc-map{margin-top:0}
.acc-map .frame{aspect-ratio:4/3;min-height:0}   /* 2026-08-29 修正：min-height が幅を押し広げ、スマホで地図が画面からはみ出していた */
.acc-map .face{height:100%;overflow:hidden}
.acc-map .map-fr{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.acc-map .face::after{display:none}                 /* 地図の上に白いつやを敷かない */
.acc-map .corner{pointer-events:none}               /* 角の飾りは地図の操作を邪魔しない */
.acc-map .pic:hover .frame{clip-path:inset(0)}      /* 地図は拡大させない（掴んで動かせるように） */
.acc-map .pic:hover .face{transform:none}

/* ============================================================
   8｜口コミ・電話の帯
   ============================================================ */
.reserve{position:relative;height:772px;overflow:hidden;display:flex;align-items:center;
  justify-content:center;padding:0 6%}
.reserve .bgpic{position:absolute;left:0;top:-10%;width:100%;height:120%;z-index:0}
.reserve .bgpic .cap-in{position:absolute;left:6%;top:14%;font-size:13px;letter-spacing:.12em;color:var(--ph-ink)}
.r-card{position:relative;z-index:2;background:#fff;width:570px;max-width:100%;padding:80px 46px 46px;text-align:center}
.r-card p{font-size:22px;line-height:1.636;letter-spacing:.1em}
.r-card .rule{margin-top:65px;height:1px;background:var(--rule2)}
.r-btns{display:flex}
.r-btns a{flex:1;padding:34px 8px;font-size:15px;letter-spacing:.14em;color:var(--sub)}
.r-btns a+a{border-left:1px solid var(--rule2)}
.r-btns a b{display:block;margin-top:6px;font-family:var(--serif);font-weight:400;font-size:22px;
  letter-spacing:.04em;color:var(--acc-d)}

/* ============================================================
   9｜フッター
   ============================================================ */
.ft{position:relative;z-index:1;background:#fff;min-height:110px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:24px 30px;flex-wrap:wrap}
.ft-l{display:flex;align-items:center;gap:18px}
.ft-l .lg-img{--lgh:34px}
.ft-info{font-size:15px;letter-spacing:.1em;line-height:1.9}
.ft-info a{font-family:var(--serif)}
.ft-c{font-family:var(--serif);font-size:10px;letter-spacing:.08em;color:var(--sub)}

/* ============================================================
   スマホ（375px）
   ============================================================ */
@media (max-width:900px){
  :root{--hd:62px;--gapL:120px;--gapM:60px;--gapS:22px}
  body{font-size:16px}
  .hd-tick{display:none}
  .hd-band{display:block;position:absolute;inset:0;background:#fff;z-index:-1}
  .hd-tel:hover{width:var(--hd)}
  .hd-tel .num{display:none}
  .hd-box{width:var(--hd)}
  .hd.is-min .hd-box,.hd.is-min{height:62px}
  .hd-rsv{display:none}          /* 中央のロゴに場所を譲る（診療時間は本文に区画がある） */
  .hd-logo{height:62px;padding:0 14px}
  .hd.is-min .hd-logo{height:62px}
  .hd-logo .lg-img{--lgh:32px}
  .ft-l .lg-img{--lgh:28px}
  .inner{width:88%}
  .kv{padding-top:150px}
  .kv-ttl{margin-top:0;line-height:1.9;padding-bottom:1.9em}
  .wheel{--cw:70vw;--ch:96vw;--wstep:5.6;margin-top:70px;height:calc(var(--ch) + 24px)}
  .kv-lead{font-size:16px;line-height:1.9;letter-spacing:.08em;margin-top:44px}
  .kv-btns{margin-top:36px;flex-direction:column;align-items:center}
  .kv-btns a{width:100%;min-width:0;text-align:center;padding:20px}
  .kv-btns a b{font-size:19px}
  .kv-sign{margin-top:60px;width:92%}
  .f-hair.a{height:120px}
  .f-hair.b{top:260px;bottom:120px}
  .f-grid{width:88%;margin-top:var(--gapM)}
  .f-row{grid-template-columns:1fr;row-gap:60px}
  .f-row+.f-row{margin-top:60px}
  .f-item{width:100%!important;margin:0!important}
  .f-item .frame{height:auto!important;aspect-ratio:4/3;width:100%}
  .f-txt p{font-size:16px}
  .cap{font-size:19px}
  .corner{width:48px;height:48px}
  .band a{width:220px;height:280px;min-height:0}
  .band .lb{padding:14px 16px;font-size:14px}
  .sym-lead{font-size:16px;line-height:1.9}
  .msg-grid{grid-template-columns:1fr;row-gap:40px}
  .acc-col{width:100%}
  .acc-col dt{width:96px;font-size:13px;letter-spacing:.08em;padding-right:10px}
  .acc-col dd{width:calc(100% - 96px);padding-left:14px;font-size:15px}
  .reserve{height:auto;padding:90px 6%}
  .reserve .bgpic{height:100%;top:0}
  .r-card{padding:44px 22px 22px}
  .r-card p{font-size:16px}
  .r-card .rule{margin-top:34px}
  .r-btns a{padding:22px 4px;font-size:13px}
  .r-btns a b{font-size:18px}
  /* 診療時間の表を375pxに収める */
  th,td{padding:14px 1px;font-size:13px;letter-spacing:0}
  thead th{font-size:13px;letter-spacing:.04em}
  tbody th{font-size:13px;padding-left:2px;letter-spacing:0}
  td{font-size:15px}
  .hours-wrap{width:92%}
  .hours-note{font-size:15px}
  .news-list{width:88%}
  .news-list a{grid-template-columns:1fr;gap:8px;padding:26px 2px}
  .news-list h3{font-size:19px}
  .ft{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .loader{display:none!important}
}