/* :root{color-scheme:light} … テーマ側に任せるため削除 */
.hk-page, .hk-page *{box-sizing:border-box}
/* body{margin:0} … テーマのCSSを壊すので削除 */
.hk-page{
  --acc:#8FC5D9; --acct:#1A6E88; --acct2:#155B72; --acc2:#BADDE9; --acc3:#E3F0F6;
  --pop:#8FC5D9; --popt:#9E5335;
  --bg:#F4F8FA; --bg2:#E7F2F7; --bg3:#FAFCFD; --card:#fff; --bd:#DCE7EC;
  --ink:#1F2C33; --sub:#5A6B73; --alert:#C0392B;
  --r:16px; --r2:12px; --sh:0 2px 14px rgba(38,48,47,.07);
  --font:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  --en:"Marcellus",serif;
  font-family:var(--font);color:var(--ink);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;letter-spacing:.01em
}
.hk-page img{max-width:100%;height:auto;display:block}
.hk-page a{color:var(--acct)}
.hk-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.hk-sec{padding:78px 0}
.hk-sec.t1{background:var(--bg)}
.hk-sec.t2{background:var(--bg3)}
.hk-sec.t3{background:var(--bg2)}
@media(max-width:600px){.hk-sec{padding:54px 0}.hk-wrap{padding:0 18px}}

/* hero : 左＝文字パネル / 右＝集合写真（PC） 上＝写真 / 下＝文字（SP） */
.hk-hero{position:relative;background:#0E3A4A;display:grid;
  grid-template-columns:minmax(300px,0.9fr) 1.1fr;align-items:stretch;
  min-height:clamp(360px,38vw,700px)}
.hk-hero>img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
.hk-hero .txt{display:flex;flex-direction:column;justify-content:center;color:#fff;
  background:linear-gradient(158deg,#14526A 0%,#0E3A4A 56%,#0A2B38 100%);
  padding:44px clamp(24px,3vw,48px) 44px clamp(24px,calc((100vw - 1104px)/2),64px)}
.hk-hero .inner{text-align:left;max-width:34em}
.hk-hero .eyebrow{font-family:var(--en);font-size:12.5px;letter-spacing:.32em;color:#8FC5D9;margin:0 0 10px}
.hk-hero h1{margin:0 0 18px;font-size:15px;font-weight:700;letter-spacing:.24em;color:#fff;opacity:.9}
.hk-hero .copy{margin:0;font-size:min(2.33vw,34px);line-height:1.5;font-weight:700;letter-spacing:.03em;color:#fff}
.hk-hero .copy .a{display:block}
.hk-hero .copy em{font-style:normal;color:#93D2E8}
.hk-hero .sub{margin:24px 0 0;font-size:15.5px;color:#fff;opacity:.94;line-height:1.85}
.hk-hero .sub span{display:block;text-wrap:balance;line-break:strict;overflow-wrap:normal}
.hk-hero .clinic{margin:26px 0 0;font-size:13px;color:#fff;opacity:.72;line-height:1.85;letter-spacing:.05em;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.18);display:inline-block}

@media(max-width:1080px){
  .hk-hero{grid-template-columns:minmax(280px,1fr) 1.02fr}
  .hk-hero .copy{font-size:min(2.6vw,32px)}
}
@media(max-width:900px){
  .hk-hero{display:flex;flex-direction:column;min-height:0}
  .hk-hero>img{order:-1;height:auto;aspect-ratio:auto}
  .hk-hero .txt{padding:28px 22px 32px;justify-content:flex-start}
  .hk-hero .inner{max-width:none}
  .hk-hero .eyebrow{font-size:11.5px;letter-spacing:.28em;margin:0 0 7px}
  .hk-hero h1{font-size:15px;margin:0 0 12px}
  .hk-hero .copy{font-size:26px;line-height:1.6}
  .hk-hero .copy .c{display:block}
  .hk-hero .sub{margin:18px 0 0;font-size:16px;line-height:1.75}
  .hk-hero .clinic{margin:20px 0 0;font-size:13px;line-height:1.8;padding-top:16px}
}
@media(max-width:480px){
  .hk-hero .copy{font-size:22px}
  .hk-hero .txt{padding:26px 18px 30px}
}
@media(max-width:400px){
  .hk-hero .copy{font-size:20px}
  .hk-hero .sub{font-size:15.5px}
}
@media(max-width:360px){
  .hk-hero .copy{font-size:18px}
  .hk-hero .txt{padding:22px 16px 26px}
}

/* hero tel bar */
.hk-telbar{background:#E7F2F7;color:#0E3A4A;border-bottom:1px solid #cfe0e8}
.hk-telbar .in{max-width:1080px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
.hk-telbar .l{font-size:13px;letter-spacing:.08em;margin:0;color:#1A6E88;font-weight:700}
.hk-telbar a{font-family:var(--en);font-size:32px;line-height:1.1;color:#0E3A4A;text-decoration:none;letter-spacing:.01em}
.hk-telbar .h{font-size:12.5px;margin:0;line-height:1.7;color:#4E6570}
@media(max-width:700px){
  .hk-telbar .in{flex-direction:column;gap:10px;text-align:center;padding:20px 18px 22px}
  .hk-telbar .l{font-size:13.5px}
  .hk-telbar a{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
    background:#1A6E88;color:#fff;border-radius:999px;padding:15px 18px;font-size:27px;
    box-shadow:0 3px 12px rgba(26,110,136,.28)}
  .hk-telbar a svg{width:22px;height:22px;fill:#fff;flex:0 0 auto}
  .hk-telbar .h{font-size:13px;line-height:1.8}
}
.hk-telbar a svg{display:none}
@media(max-width:700px){.hk-telbar a svg{display:block}}

/* section title */
.hk-st{text-align:center;margin:0 0 40px}
.hk-st .chip{display:inline-block;font-family:var(--en);font-size:11.5px;letter-spacing:.24em;color:var(--acct2);background:var(--acc3);padding:6px 18px;border-radius:999px;margin:0 0 14px}
.hk-st h2{margin:0;font-size:29px;font-weight:700;letter-spacing:.04em;line-height:1.62}
.hk-st h2::after{content:"";display:block;width:42px;height:3px;border-radius:9px;background:var(--acc);margin:14px auto 0}
.hk-st p{margin:16px 0 0;color:var(--sub);font-size:15.5px;text-wrap:balance;line-break:strict}
@media(max-width:600px){.hk-st h2{font-size:23px}}

/* lead */
.hk-lead{max-width:760px;margin:0 auto;text-align:center;font-size:17px;line-height:2.05}
.hk-lead p{margin:0 0 18px}
.hk-lead strong{color:var(--acct);font-weight:700}
.hk-lead .fine{font-size:14px;color:var(--sub);margin:0}

/* reasons */
.hk-reason{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;margin:0 0 58px}
.hk-reason:nth-child(even) .ph{order:2}
.hk-reason:last-child{margin-bottom:0}
.hk-reason .ph img{width:100%;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}
.hk-reason .ph img.land{aspect-ratio:3/2}
.hk-reason .ph img.port{aspect-ratio:3/4}
.hk-reason .ph img.wide{aspect-ratio:16/9}
.hk-reason .no{font-family:var(--en);font-size:13px;letter-spacing:.2em;color:var(--acct);margin:0 0 10px}
.hk-reason h3{margin:0 0 16px;font-size:24px;font-weight:700;line-height:1.6;letter-spacing:.03em;text-wrap:balance}
.hk-reason p{margin:0 0 12px;color:var(--ink);font-size:15.5px}
.hk-reason p:last-child{margin:0}
.hk-reason .hl{color:var(--acct);font-weight:700}
@media(max-width:860px){.hk-reason{grid-template-columns:1fr;gap:22px;margin-bottom:44px}.hk-reason:nth-child(even) .ph{order:0}.hk-reason h3{font-size:20px}}

/* menu grid */
.hk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:880px){.hk-grid{grid-template-columns:repeat(2,1fr)}}
.hk-tile{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;position:relative;scroll-margin-top:90px}
/* 開いたときに右上の角が「ペラッ」とめくれる。要素は足さない（::after だけ） */
.hk-tile::after{content:"";position:absolute;top:0;right:0;width:0;height:0;z-index:3;pointer-events:none;
  background:linear-gradient(225deg,#fff 0%,#eef6f9 45%,#cfe3ea 100%);
  -webkit-clip-path:polygon(100% 0,0 0,100% 100%);clip-path:polygon(100% 0,0 0,100% 100%);
  box-shadow:-3px 3px 8px rgba(14,58,74,.18);
  transition:width .45s cubic-bezier(.34,1.3,.64,1),height .45s cubic-bezier(.34,1.3,.64,1)}
.hk-tile[open]::after{width:72px;height:72px}
@media (prefers-reduced-motion:reduce){.hk-tile::after{transition:none}}
/* このページの先頭へ戻る（テーマの #gototop はサイトのトップへ飛ぶので自前で持つ） */
.hk-totop{display:block;margin:0 auto 18px;padding:12px 22px;border:1px solid var(--bd);
  border-radius:999px;background:#fff;color:#1A6E88;cursor:pointer;
  font:700 13px/1 system-ui,"Hiragino Sans","Noto Sans JP",sans-serif;letter-spacing:.04em;
  box-shadow:0 1px 6px rgba(14,58,74,.10)}
.hk-totop:hover{background:#F2F8FB}
.hk-totop:focus-visible{outline:2px solid #1A6E88;outline-offset:3px}
.hk-tile>summary{list-style:none;cursor:pointer;padding:26px 18px 22px;text-align:center;border-top:5px solid var(--cat)}
.hk-tile>summary::-webkit-details-marker{display:none}
.hk-tile .ic{width:66px;height:66px;margin:0 auto 12px;border:1.5px solid var(--cat);border-radius:50%;display:grid;place-items:center;color:var(--cat);line-height:1.3;text-align:center;flex:0 0 auto}
.hk-tile .ic img{width:66%;height:66%;object-fit:contain;display:block}
.hk-tile .ic.noimg{border-style:dashed;font-size:9px}
.hk-tile .nm{display:block;font-size:16.5px;font-weight:700;letter-spacing:.04em}
.hk-tile .when{display:block;margin-top:6px;font-size:12.5px;color:var(--sub);line-height:1.6}
.hk-tile .more{display:inline-block;margin-top:12px;font-size:12px;color:var(--cat);font-weight:700;letter-spacing:.06em}
.hk-tile .ic{background:var(--bg3)}
.hk-tile .more::after{content:" ＋"}
.hk-tile[open] .more::after{content:" －"}
.hk-tile[open]{grid-column:1/-1}
.hk-tile[open]>summary{text-align:left;display:flex;align-items:center;gap:16px;padding:22px 24px}
.hk-tile[open] .ic{margin:0}
.hk-tile[open] .nm{font-size:20px}
.hk-tile[open] .more{margin:0 0 0 auto}
.hk-body{padding:0 24px 26px;border-top:1px solid var(--bd);margin-top:2px}
.hk-body .def{margin:20px 0 20px;font-size:15.5px}
.hk-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:30px}
@media(max-width:760px){.hk-cols{grid-template-columns:1fr;gap:20px}.hk-body{padding:0 18px 22px}}
.hk-h4{margin:0 0 10px;font-size:14.5px;font-weight:700;color:var(--cat);display:flex;align-items:center;gap:8px}
.hk-h4::before{content:"";width:15px;height:15px;border-radius:5px;background:var(--cat);opacity:.3}
.hk-flow{counter-reset:s;list-style:none;margin:0;padding:0}
.hk-flow li{counter-increment:s;position:relative;padding-left:38px;margin:0 0 9px;font-size:15px}
.hk-flow li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:1px;width:27px;height:27px;border-radius:50%;background:var(--cat);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.hk-mini{background:var(--bg3);border-radius:var(--r2);padding:6px 16px}
.hk-mini div{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14.5px}
.hk-mini div+div{border-top:1px dotted var(--bd)}
.hk-mini span{color:var(--sub)}
.hk-mini b{color:var(--popt)}
.hk-note{font-size:12.5px;line-height:1.9;color:var(--sub);margin:16px 0 0}
.hk-alert{color:var(--alert);font-weight:700}

/* gallery（横スクロールは廃止。院内紹介ブロック .hk-places に置き換えた）
   ここにあったスライダーのCSSは、使う要素が無くなったので削除済み。 */

/* team */
.hk-docs{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:0 0 28px}
@media(max-width:820px){.hk-docs{grid-template-columns:1fr}}
.hk-doc{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:30px 30px 32px}
.hk-dhead{display:block;margin:0 0 20px}
.hk-doc .ph{width:100%;aspect-ratio:4/3;border-radius:var(--r2);overflow:hidden;background:var(--bg2);margin:0 0 20px}
.hk-doc .ph img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

@media(max-width:380px){.hk-doc{padding:22px 20px 24px}}
.hk-doc .rome{margin:0 0 7px;font-family:var(--en);font-size:12.5px;letter-spacing:.24em;color:var(--acc2)}
.hk-doc h3{margin:0;font-size:27px;font-weight:700;letter-spacing:.04em;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.hk-doc h3 small{font-size:12.5px;background:var(--acct);color:#fff;padding:5px 14px;border-radius:99px;font-weight:700;letter-spacing:.06em}
.hk-doc .msg{margin:0 0 20px;font-size:15.5px;line-height:1.95}
.hk-doc .hk-cv{margin:0 0 20px;padding:0;list-style:none}
.hk-doc .hk-cv:last-child{margin-bottom:0}
.hk-doc .hk-cv li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.95;margin:0 0 4px}
.hk-doc .hk-cv li:last-child{margin-bottom:0}
.hk-doc .hk-cv li::before{content:"";position:absolute;left:2px;top:.88em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.hk-doc .hk-h4{margin-top:0}
.hk-team img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}
.hk-team figcaption{margin:12px 0 0;text-align:center;font-size:14px;color:var(--sub)}
@media(max-width:600px){.hk-team img{aspect-ratio:16/10}}

/* first visit */
/* 役割（歯科医師 / 歯科衛生士） */
.hk-roles{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hk-role{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;display:flex;flex-direction:column}
.hk-role>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.hk-role.dr>img{object-position:center 46%}
.hk-role.dh>img{object-position:center 50%}   /* 元が縦長すぎたため、写真側を先に切ってある */
.hk-role .bd{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.hk-role .tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.12em;padding:5px 14px;border-radius:999px;margin:0 0 12px}
.hk-role.dr .tag{background:#E3F0F6;color:#155B72}
.hk-role.dh .tag{background:#F7EAE2;color:#8A5336}
.hk-role h3{margin:0 0 16px;font-size:21px;font-weight:700;letter-spacing:.03em;line-height:1.5;text-wrap:balance}
.hk-role h3 em{font-style:normal}
.hk-role.dr h3 em{color:var(--acct)}
.hk-role.dh h3 em{color:#9E5335}
.hk-role ul{margin:0;padding:0;list-style:none}
.hk-role li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.85;margin:0 0 9px}
.hk-role li::before{content:"";position:absolute;left:2px;top:.78em;width:8px;height:8px;border-radius:50%}
.hk-role.dr li::before{background:var(--acc)}
.hk-role.dh li::before{background:#E0B49C}
.hk-role .fine{margin:16px 0 0;padding-top:14px;border-top:1px dashed var(--bd);font-size:12.5px;line-height:1.85;color:var(--sub)}
.hk-roles+.hk-bridge{margin:26px auto 0;max-width:740px;text-align:center;font-size:15px;line-height:1.9;color:var(--ink);text-wrap:balance;line-break:strict}
.hk-roles+.hk-bridge b{color:var(--acct)}
/* ★ 画像の比率はPCと揃える（16/9にすると切り取り量が変わって別の絵になる） */
@media(max-width:860px){.hk-roles{grid-template-columns:1fr}.hk-role h3{font-size:19px}}

/* 院内紹介ブロック（横スクロールをやめて、1枚ずつ並べる） */
.hk-page .hk-places{max-width:1360px;margin:30px auto 0;padding:0 24px;display:grid;gap:22px}
.hk-page .hk-place{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:46px;
  align-items:center;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);
  box-shadow:var(--sh);padding:26px 34px}
.hk-page .hk-place .im{border-radius:var(--r2);overflow:hidden;background:var(--bg2)}
.hk-page .hk-place .im img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 50%;display:block}
.hk-page .hk-place.port{grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:40px}
.hk-page .hk-place.port .im{width:100%;max-width:320px;margin:0 auto}
.hk-page .hk-place.port .im img{aspect-ratio:5/8}
.hk-page .hk-place .bd{max-width:640px}
.hk-page .hk-place .no{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--acc2);margin:0 0 8px}
.hk-page .hk-place h3{margin:0 0 14px;font-size:22px;font-weight:700;letter-spacing:.04em;line-height:1.6;text-wrap:balance}
.hk-page .hk-place p{margin:0 0 12px;font-size:15.5px;line-height:1.95}
.hk-page .hk-place p:last-child{margin:0}
/* 交互に左右を入れ替える。画像が右に来る回 */
.hk-page .hk-place.rev .im{order:2}
@media(max-width:820px){
  .hk-page .hk-places{padding:0 18px;gap:18px;margin-top:26px}
  .hk-page .hk-place,
  .hk-page .hk-place.port{grid-template-columns:1fr;gap:18px;padding:20px 20px 24px}
  .hk-page .hk-place.rev .im{order:0}          /* 縦積みでは必ず写真が上 */
  .hk-page .hk-place h3{font-size:19px}
  .hk-page .hk-place.port .im{max-width:280px}
}

/* 個室ブロック */
.hk-page .hk-room{display:grid;grid-template-columns:minmax(240px,410px) minmax(0,1fr);gap:56px;align-items:center;
  max-width:1360px;margin:30px auto 0;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--r);box-shadow:var(--sh);padding:34px 40px}
.hk-page .hk-room .bd{max-width:640px}
.hk-page .hk-room img{width:100%;aspect-ratio:5/8;object-fit:cover;border-radius:var(--r2);display:block}
.hk-page .hk-room h3{margin:0 0 16px;font-size:24px;font-weight:700;letter-spacing:.04em;line-height:1.6}
.hk-page .hk-room p{margin:0 0 14px;font-size:15.5px;line-height:1.95}
.hk-page .hk-room p:last-child{margin:0}
@media(max-width:760px){
  .hk-page .hk-room{grid-template-columns:1fr;gap:20px;padding:22px 20px 24px;margin-top:26px}
  .hk-page .hk-room img{max-width:280px;margin:0 auto}
  .hk-page .hk-room h3{font-size:19px;text-align:center}
}

/* メンテナンス冒頭の写真 */
.hk-mntph{margin:0 0 30px;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.hk-mntph img{width:100%;aspect-ratio:16/7;object-fit:cover;object-position:center 46%;display:block}
/* ★ 16/7 → 4/3 は振れ幅が大きく、スマホだけ別の場所が写っていた。16/9 に寄せる */
@media(max-width:600px){.hk-mntph img{aspect-ratio:16/9}}

.hk-fv{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.hk-fv{grid-template-columns:1fr}}
.hk-card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);padding:26px 24px}
.hk-card h3{margin:0 0 14px;font-size:16.5px;font-weight:700;color:var(--acct);text-wrap:balance;line-break:strict}
.hk-card ul{margin:0;padding:0;list-style:none}
.hk-card li{position:relative;padding-left:20px;font-size:14.5px;margin:0 0 9px}
.hk-card li::before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:8px;border-radius:50%;background:var(--acc);opacity:.6}
.hk-card li b{font-weight:700}

/* faq */
.hk-faq{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);margin:0 0 12px;overflow:hidden}
.hk-faq>summary{list-style:none;cursor:pointer;padding:20px 22px 20px 60px;position:relative;font-size:16px;font-weight:700;line-height:1.7}
.hk-faq>summary::-webkit-details-marker{display:none}
.hk-faq>summary::before{content:"Q";position:absolute;left:20px;top:19px;width:27px;height:27px;border-radius:50%;background:var(--acct);color:#fff;font-size:13px;display:grid;place-items:center}
.hk-faq .a{margin:0;padding:0 22px 22px 60px;position:relative;font-size:15px}
.hk-faq .a::before{content:"A";position:absolute;left:20px;top:-2px;width:27px;height:27px;border-radius:50%;background:var(--acc3);color:var(--acct2);font-size:13px;font-weight:700;display:grid;place-items:center}

/* cta */
.hk-cta{text-align:center}
.hk-cta .ttl{font-size:20px;font-weight:700;color:var(--acct);margin:0 0 4px;letter-spacing:.06em}
.hk-cta .tel{display:inline-block;font-family:var(--en);font-size:52px;line-height:1.15;color:var(--ink);letter-spacing:.02em;text-decoration:none;margin:8px 0 2px;font-weight:700}
.hk-cta .hours{font-size:14px;color:var(--sub);margin:0 0 6px}
.hk-cta .note2{font-size:13.5px;color:var(--sub);margin:0}
.hk-links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:34px 0 0}
.hk-links a{font-size:13.5px;border:1px solid var(--acc2);color:var(--acct);padding:9px 18px;border-radius:999px;text-decoration:none;background:#fff}
@media(max-width:600px){.hk-cta .tel{font-size:36px}}

/* credit */
.hk-credit{border:1px solid var(--bd);background:var(--card);border-radius:var(--r);padding:22px 24px;font-size:13.5px;color:var(--sub);line-height:2}
.hk-credit b{color:var(--ink)}
.mocknote{background:#23201c;color:#e6e0d5;font-size:12px;padding:11px 20px;text-align:center;font-family:system-ui,sans-serif;line-height:1.7}
.mocknote b{color:#8FC5D9}
.brsp{display:none}
@media(max-width:900px){.brsp{display:inline}}
.brpc{display:inline}
@media(max-width:900px){.brpc{display:none}}





/* ===================================================================
 * デザイン刷新（2026-09-16）
 * 本文の文字サイズ・行間は触らない。患者さんの年齢層を考えて読みやすさを優先。
 * 「古く見える」原因になっていた形だけを入れ替える。
 * =================================================================== */

/* 角丸と影。全部同じ強さの影で平坦に見えていたので、
   輪郭は髪の毛一本ぶん、影は下に長く薄く。 */
.hk-page{--r:18px; --r2:14px;
  --bd:#E3EDF1;
  --sh:0 1px 2px rgba(20,44,54,.045), 0 10px 28px -14px rgba(20,44,54,.20)}

/* 区切りの余白を広げる（詰まっていると古く見える） */
.hk-page .hk-sec{padding:94px 0}
@media(max-width:600px){.hk-page .hk-sec{padding:58px 0}}

/* --- 見出しブロック -------------------------------------------------
   中央揃え＋下に42pxの棒、という形をやめる。
   ラベル＋大きな見出し＋リード文を、左揃えの2段組に。 */
.hk-page .hk-st{text-align:left;max-width:1080px;margin:0 auto 48px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:10px 52px;align-items:end}
.hk-page .hk-st .chip{grid-column:1/-1;background:none;padding:0;border-radius:0;
  color:var(--acct);font-size:11.5px;letter-spacing:.26em;margin:0 0 10px;
  display:flex;align-items:center;gap:14px}
.hk-page .hk-st .chip::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--acc2),rgba(143,197,217,0))}
.hk-page .hk-st h2{font-size:clamp(26px,3.05vw,42px);letter-spacing:.012em;line-height:1.42;color:#12313E}
.hk-page .hk-st h2::after{display:none}
.hk-page .hk-st p{margin:0;padding-bottom:7px;font-size:15.5px;text-wrap:balance}
@media(max-width:820px){
  .hk-page .hk-st{grid-template-columns:1fr;gap:12px;margin-bottom:34px}
  .hk-page .hk-st p{padding-bottom:0}
}

/* --- FVのコピーを大きく、字間を詰める --- */
.hk-page .hk-hero .copy{font-size:min(2.42vw,36px);letter-spacing:.006em;line-height:1.46;
  line-break:strict;overflow-wrap:normal;text-wrap:balance}
.hk-page .hk-hero .eyebrow{letter-spacing:.34em}
@media(max-width:900px){.hk-page .hk-hero .copy{font-size:26px;line-height:1.54}}

/* --- 見出しの字間。.04em は広すぎて間延びして見える --- */
.hk-page .hk-reason h3,
.hk-page .hk-role h3,
.hk-page .hk-place h3,
.hk-page .hk-doc h3,
.hk-page .hk-room h3{letter-spacing:.015em;color:#12313E}

/* --- タイルに反応を足す（押せることが見た目で分かる） --- */
.hk-page .hk-tile{transition:transform .22s cubic-bezier(.22,.61,.36,1),
  box-shadow .22s ease, border-color .22s ease}
.hk-page .hk-tile:not([open]):hover{transform:translateY(-3px);border-color:var(--acc2);
  box-shadow:0 2px 4px rgba(20,44,54,.05), 0 20px 40px -18px rgba(20,44,54,.30)}
.hk-page .hk-tile>summary:focus-visible{outline:2px solid var(--acct);outline-offset:-3px;border-radius:var(--r)}

/* --- 画面に入ったら、ふわっと出す --- */
.hk-page [data-rv]{opacity:0;transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1)}
.hk-page [data-rv].rv-on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hk-page [data-rv]{opacity:1;transform:none;transition:none}
}




/* ===== 支給エンジンのバグ回避 =====
   .sr-bob の keyframes が transform を丸ごと上書きするため、
   clampX() が入れた translateX(◯px) が消え、待機中だけ画面左端に瞬間移動する。
   transform を使わない translate プロパティ版に差し替える（合成されるので位置が保たれる）。 */
#shiburin-root .sr-stage.sr-bob{ animation-name: sr-bob-fix; }
@keyframes sr-bob-fix{ 0%,100%{ translate:0 0 } 50%{ translate:0 -2px } }




/* ×で消したあと、戻すためのボタン。
   エンジンが [data-shiburin-show] を見て自動で出し入れする（非表示のときだけ出る）。 */
.hk-shiburin-back{display:block;margin:0 auto 24px;padding:9px 18px;border-radius:999px;
  border:1px solid #bfdbe6;background:#fff;color:#1A6E88;cursor:pointer;
  font:600 12.5px/1 -apple-system,"Hiragino Sans","Noto Sans JP",system-ui,sans-serif}
.hk-shiburin-back:hover{background:#EEF7FA}
.hk-shiburin-back[hidden]{display:none}



/* ===== スマホの文字サイズ調整（読みやすさ優先・最後に適用） ===== */
@media(max-width:767px){
  .hk-page{font-size:16.5px}
  .hk-page .hk-hero .eyebrow{font-size:12.5px}
  .hk-page .hk-hero .sub{font-size:16.5px;line-height:1.85}
  .hk-page .hk-hero .clinic{font-size:14px}
  .hk-page .hk-telbar .h{font-size:14px}
  .hk-page .hk-telbar .l{font-size:14.5px}
  .hk-page .hk-st .chip{font-size:12.5px}
  .hk-page .hk-st h2{font-size:24px}
  .hk-page .hk-st p{font-size:16.5px;line-height:1.85}
  .hk-page .hk-lead{font-size:18px;line-height:1.95}
  .hk-page .hk-lead .fine{font-size:14.5px;line-height:1.8}
  .hk-page .hk-reason .no{font-size:13px}
  .hk-page .hk-reason h3{font-size:21px}
  .hk-page .hk-reason p{font-size:16.5px;line-height:1.9}
  .hk-page .hk-tile .nm{font-size:17.5px}
  .hk-page .hk-tile .when{font-size:14px}
  .hk-page .hk-tile .more{font-size:13.5px}
  .hk-page .hk-tile[open] .nm{font-size:21px}
  .hk-page .hk-body .def{font-size:16.5px;line-height:1.9}
  .hk-page .hk-h4{font-size:15.5px}
  .hk-page .hk-flow li{font-size:16px;line-height:1.85}
  .hk-page .hk-flow li::before{font-size:12.5px}
  .hk-page .hk-mini div{font-size:15.5px}
  .hk-page .hk-note{font-size:14px;line-height:1.85}
  .hk-page .hk-doc .rome{font-size:13.5px}
  .hk-page .hk-doc h3 small{font-size:13.5px}
  .hk-page .hk-doc .msg{font-size:16.5px;line-height:1.95}
  .hk-page .hk-doc .hk-cv li{font-size:15.5px}
  .hk-page .hk-team figcaption{font-size:15px}
  .hk-page .hk-role .tag{font-size:13.5px}
  .hk-page .hk-role h3{font-size:20px}
  .hk-page .hk-role li{font-size:15.5px;line-height:1.85}
  .hk-page .hk-role .fine{font-size:14px;line-height:1.8}
  .hk-page .hk-roles+.hk-bridge{font-size:16px;line-height:1.9}
  .hk-page .hk-place .no{font-size:13px}
  .hk-page .hk-place h3{font-size:20px}
  .hk-page .hk-place p{font-size:16.5px;line-height:1.9}
  .hk-page .hk-room h3{font-size:20px}
  .hk-page .hk-room p{font-size:16.5px;line-height:1.9}
  .hk-page .hk-card h3{font-size:17.5px}
  .hk-page .hk-card li{font-size:15.5px;line-height:1.8}
  .hk-page .hk-faq>summary{font-size:17px}
  .hk-page .hk-faq>summary::before{font-size:14px}
  .hk-page .hk-faq .a{font-size:16px;line-height:1.9}
  .hk-page .hk-faq .a::before{font-size:14px}
  .hk-page .hk-cta .ttl{font-size:21px}
  .hk-page .hk-cta .hours{font-size:15px}
  .hk-page .hk-cta .note2{font-size:14.5px;line-height:1.8}
  .hk-page .hk-links a{font-size:15px}
  .hk-page .hk-credit{font-size:14px;line-height:1.8}
}



/* ===== スマホ：メニュータイルを1列＋横並びに（文字を大きくしても折れないように） ===== */
@media(max-width:430px){
  .hk-page .hk-grid{grid-template-columns:1fr;gap:10px}
  .hk-page .hk-tile:not([open])>summary{display:flex;align-items:center;gap:14px;text-align:left;padding:15px 16px}
  .hk-page .hk-tile:not([open]) .ic{width:52px;height:52px;margin:0;flex:0 0 auto}
  .hk-page .hk-tile:not([open]) .nm{font-size:17px}
  .hk-page .hk-tile:not([open]) .when{margin-top:3px;font-size:13.5px}
  .hk-page .hk-tile:not([open]) .more{margin:0 0 0 auto;flex:0 0 auto;white-space:nowrap}
}



/* ===== スマホ：ヒーローのコピーを1行に収める ===== */
@media(max-width:520px){
  .hk-page .hk-hero .copy{font-size:min(5.8vw,24px);line-break:strict}
}



/* ===== スマホ：開いたタイルの見出し行を整える ===== */
@media(max-width:430px){
  .hk-page .hk-tile[open]>summary{padding:16px;gap:12px}
  .hk-page .hk-tile[open] .ic{width:52px;height:52px}
  .hk-page .hk-tile[open] .nm{font-size:19px}
  .hk-page .hk-tile[open] .when{display:none}
  .hk-page .hk-tile[open] .more{white-space:nowrap}
}



/* ===== 数字と単位が行またぎで割れないように（3／か月 のような折れの防止） ===== */
.hk-page .nw{white-space:nowrap}



/* ===== 日本語の改行位置：文節で折り返し、単語や「数字＋単位」を割らない ===== */
.hk-page .jbr{display:inline-block}



/* ===== 禁則を厳しく（行頭の「ー」「っ」などを防ぐ） ===== */
.hk-page{line-break:strict;overflow-wrap:normal}



/* ===== 360px 級の狭い端末：見出しが1文字だけあふれるのを防ぐ ===== */
@media(max-width:380px){
  .hk-page .hk-place h3,
  .hk-page .hk-room h3{font-size:19px;letter-spacing:0}
}

/* 本文中の電話番号。スマホでタップして発信できることが分かるようにする */
.hk-page a.hk-tel-inline{color:var(--acct);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.hk-page .hk-card a.hk-tel-inline{color:inherit}

/* 見出しが2文と長いセクション（WHY）だけ、見出し側のカラムを広くする。
   既定の 1fr / 0.86fr だと見出しが5行になり、右のリード文との差で右上が大きく空くため。
   他のセクションは見出しが短く、いまの比率のほうが収まりがよいので触らない。 */
.hk-page .hk-st.wide{grid-template-columns:1fr;gap:16px}
.hk-page .hk-st.wide p{max-width:820px;padding-bottom:0}
@media(max-width:820px){
  .hk-page .hk-st.wide{grid-template-columns:1fr;gap:12px}
}