/* おかだ歯科・矯正歯科 トップ v2（全面組み直し 2026-07-09）
   方式＝本物サイトの実測採寸（PC基準1280・SP基準390）を --u 倍率でそのまま再現。
   数値の出どころ＝ヘッドレス実測（scratchpad Lspec/Sspec 2026-07-09）。 */

@font-face{font-family:"wf-text";src:url(../_assets/fonts/madefor-text_400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"wf-text";src:url(../_assets/fonts/madefor-text_700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"wf-disp";src:url(../_assets/fonts/madefor-display_400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"wf-disp";src:url(../_assets/fonts/madefor-display_700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"wf-rozha";src:url(../_assets/fonts/rozha_1.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"wf-work";src:url(../_assets/fonts/worksans_1.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --u: calc(100vw / 1280);
  --pink: rgba(250,109,183,.7);      /* ボタン */
  --pink-wash: rgba(250,109,183,.2); /* 節のかぶせ */
  --green: rgb(77,163,103);          /* 4枠見出し・訪問帯かぶせ */
  --cyan-wash: rgba(46,231,240,.15); /* ヒーロー下地 */
  --cyan-panel: rgba(46,231,240,.3); /* 医師カプセル */
  --red: rgb(185,44,44);
  --jp: "Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
  --t: "wf-text", var(--jp);
  --d: "wf-disp", var(--jp);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:clip}
body{font-family:var(--t);color:#000;background:#fff;-webkit-font-smoothing:antialiased}
img{display:block}
a{color:inherit;text-decoration:none}

/* 絶対配置の共通型：各節=relative、子=absolute（left/top/width を --u 倍で指定） */
section,header,footer{position:relative}
.ab{position:absolute}

/* ── ヘッダー（本物：白・高さ300・張り付かない） ── */
.header{height:calc(300*var(--u));background:#fff;z-index:5}
.logo{left:calc(10*var(--u));top:calc(13*var(--u));width:calc(566*var(--u))}
.logo img{width:100%}
.tel-label{left:calc(649*var(--u));top:calc(120*var(--u));font-family:"wf-rozha",serif;font-size:calc(36.4*var(--u));line-height:1.3;color:var(--red)}
.tel-num{left:calc(714*var(--u));top:calc(112*var(--u));font-size:calc(42*var(--u));line-height:1.3;color:var(--red)}
.line-ic{left:calc(1011*var(--u));top:calc(108*var(--u));width:calc(56*var(--u))}
.line-ic img{width:100%}
.line-txt{left:calc(1082*var(--u));top:calc(106*var(--u));font-family:"wf-work",var(--jp);font-weight:600;font-size:calc(22.3*var(--u));line-height:1.3}
.gold-line{left:calc(649*var(--u));top:calc(174*var(--u));width:calc(602*var(--u));height:calc(3*var(--u));background:#c9962e}
.gnav{left:0;right:calc(65*var(--u));top:calc(224*var(--u));display:flex;justify-content:flex-end;gap:calc(29*var(--u));font-size:calc(16*var(--u));align-items:center}
.gnav .cur{border-bottom:1.5px solid #000;padding-bottom:2px}
.gnav a:hover,.gnav .dd-btn:hover{opacity:.6}
.dd{position:relative}
.dd-btn{cursor:pointer}
.dd-btn::after{content:"▾";margin-left:calc(6*var(--u));font-size:.72em}
.dd-menu{position:absolute;top:100%;left:calc(-12*var(--u));background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14);padding:calc(8*var(--u)) 0;min-width:calc(210*var(--u));opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;z-index:20}
.dd:hover .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:block;padding:calc(8*var(--u)) calc(18*var(--u));white-space:nowrap}
.dd-menu a:hover{background:#fdeef6}
.menu-btn{display:none}

/* ── ヒーロー（薄い水色下地に写真コラージュ＋黒文字・登場アニメなし） ── */
.hero{height:calc(817*var(--u));background:var(--cyan-wash);overflow:clip}
.hero .ph{border-radius:calc(100*var(--u));overflow:hidden}
.hero .ph img{width:100%;height:100%;object-fit:cover}
.hp1{left:calc(-19*var(--u));top:calc(-81*var(--u));width:calc(600*var(--u));height:calc(450*var(--u))}
.hp2{left:calc(698*var(--u));top:calc(-21*var(--u));width:calc(370*var(--u));height:calc(483*var(--u))}
.hp2 img{object-position:50% 60%}
.hp3{left:calc(1104*var(--u));top:calc(186*var(--u));width:calc(186*var(--u));height:calc(347*var(--u))}
.hp4{left:calc(-17*var(--u));top:calc(474*var(--u));width:calc(297*var(--u));height:calc(344*var(--u))}
.hp4 img{object-position:72% 42%}
.hp5{left:calc(370*var(--u));top:calc(520*var(--u));width:calc(477*var(--u));height:calc(340*var(--u))}
.hp5 img{object-position:50% 78%}
.hp6{left:calc(998*var(--u));top:calc(589*var(--u));width:calc(199*var(--u));height:calc(260*var(--u))}
.hp6 img{object-position:47% 36%}
.hero h1{left:0;right:0;top:calc(219*var(--u));text-align:center;font-family:var(--d);font-weight:700;font-size:calc(60*var(--u));line-height:1.2;z-index:2}
.hero .hsub{left:0;right:0;top:calc(356*var(--u));text-align:center;font-family:var(--d);font-weight:700;font-size:calc(36*var(--u));line-height:1.3;z-index:2}

/* ── 診療内容（4分割・背景写真=透明度20%・文字は上乗せ） ── */
.shinryo{height:calc(948*var(--u));background:#fff}
.shinryo::before{content:"";position:absolute;inset:0;background:var(--pink-wash)}
.quad{position:absolute;overflow:hidden}
.quad>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.q1>img{object-position:51% 20%}
.q2>img{object-position:50% 28%}
.q1{left:0;top:0;width:50%;height:calc(540*var(--u))}
.q2{left:50%;top:0;width:50%;height:calc(540*var(--u))}
.q3{left:0;top:calc(540*var(--u));width:50%;height:calc(408*var(--u))}
.q4{left:50%;top:calc(540*var(--u));width:50%;height:calc(408*var(--u))}
.q1 .sh-title{position:absolute;left:calc(176*var(--u));top:calc(30*var(--u));width:calc(288*var(--u));text-align:center;font-family:"ＭＳ Ｐゴシック",var(--jp);font-weight:700;font-size:calc(36*var(--u));line-height:1.3;color:rgb(110,110,110)}
.q1 .sh-lead{position:absolute;left:calc(6*var(--u));top:calc(161*var(--u));width:calc(628*var(--u));text-align:center;font-weight:700;font-size:calc(26*var(--u));line-height:1.6}
.q2 .sh-txt{position:absolute;left:calc(96*var(--u));top:calc(282*var(--u));font-weight:700;font-size:calc(24*var(--u));line-height:1.5}
.q3 ul{position:absolute;left:calc(6*var(--u));top:calc(31*var(--u));width:calc(536*var(--u));list-style:none;text-align:center;font-weight:700;font-size:calc(24*var(--u))}
.q3 li{margin-bottom:calc(30*var(--u));line-height:1.5}
.q4 .sh-txt{position:absolute;left:calc(107*var(--u));top:calc(154*var(--u));font-weight:700;font-size:calc(24*var(--u));line-height:1.5}

/* ── レース帯＋院内紹介ボタン ── */
.lace{height:calc(50*var(--u));background:#fff}
.lace::before{content:"";position:absolute;inset:0;background:var(--pink-wash)}
.lace::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(22*var(--u));
  background:radial-gradient(circle at 50% 0, rgba(255,255,255,.9) calc(9*var(--u)), transparent calc(10*var(--u)));
  background-size:calc(24*var(--u)) calc(22*var(--u))}
.btn{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--pink);color:#fff;font-weight:700;border-radius:calc(100*var(--u))}
.btn:hover{opacity:.85}
.lace .btn{left:calc(569*var(--u));top:calc(4*var(--u));width:calc(142*var(--u));height:calc(42*var(--u));font-size:calc(15*var(--u));z-index:2}

/* ── 歯並び帯（背景画像1枚） ── */
.hanarabi{height:calc(600*var(--u))}
.hanarabi>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hanarabi .btn{left:calc(565*var(--u));top:calc(514*var(--u));width:calc(150*var(--u));height:calc(42*var(--u));font-size:calc(15*var(--u))}

/* ── ご案内4枠（白地・丸写真・緑見出し・3D起き上がり対象） ── */
.guide{height:calc(1010*var(--u));background:#fff}
.guide h2{left:0;top:calc(21*var(--u));font-family:var(--d);font-weight:700;font-size:calc(42*var(--u));line-height:1.3}
.gcol .gph{position:absolute;border-radius:50%;overflow:hidden}
.gcol .gph img{width:100%;height:100%;object-fit:cover}
.gc1 .gph img{object-position:65% 10%}
.gc2 .gph img{transform:scale(1.25);transform-origin:28% 15%}
.gc3 .gph img{object-position:50% 22%}
.gc4 .gph img{object-position:50% 55%}
.gcol{position:absolute;top:calc(161*var(--u));height:calc(800*var(--u))}
.gc1{left:calc(9*var(--u));width:calc(291*var(--u))}
.gc2{left:calc(308*var(--u));width:calc(312*var(--u))}
.gc3{left:calc(622*var(--u));width:calc(314*var(--u))}
.gc4{left:calc(936*var(--u));width:calc(343*var(--u))}
.gc1 .gph{left:calc(6*var(--u));top:calc(4*var(--u));width:calc(278*var(--u));height:calc(279*var(--u))}
.gc2 .gph{left:calc(21*var(--u));top:0;width:calc(270*var(--u));height:calc(296*var(--u))}
.gc3 .gph{left:calc(7*var(--u));top:calc(5*var(--u));width:calc(300*var(--u));height:calc(272*var(--u))}
.gc4 .gph{left:calc(20*var(--u));top:calc(2*var(--u));width:calc(303*var(--u));height:calc(287*var(--u))}
.gbody{position:absolute;left:0;right:0}
.gc1 .gbody{top:calc(391*var(--u))}
.gc2 .gbody{top:calc(377*var(--u))}
.gc3 .gbody{top:calc(370*var(--u))}
.gc4 .gbody{top:calc(367*var(--u))}
.gbody h3{text-align:center;color:var(--green);font-weight:700;font-size:calc(22*var(--u));line-height:1.6}
.gc1 .gbody p{margin:calc(94*var(--u)) auto 0;width:calc(270*var(--u))}
.gc2 .gbody p{margin:calc(70*var(--u)) auto 0;width:calc(289*var(--u))}
.gc3 .gbody p{margin:calc(53*var(--u)) auto 0;width:calc(296*var(--u))}
.gc4 .gbody p{margin:calc(62*var(--u)) auto 0;width:calc(319*var(--u))}
.gbody p{font-size:calc(14*var(--u));line-height:1.6;text-align:left}
.gc1 .btn{left:calc(63*var(--u));top:calc(724*var(--u));width:calc(164*var(--u));height:calc(42*var(--u));font-size:calc(15*var(--u))}
.gc2 .btn{left:calc(63*var(--u));top:calc(719*var(--u));width:calc(185*var(--u));height:calc(44*var(--u));font-size:calc(15*var(--u))}
.gc3 .btn{left:calc(64*var(--u));top:calc(730*var(--u));width:calc(186*var(--u));height:calc(42*var(--u));font-size:calc(15*var(--u))}
.gc4 .btn{left:calc(73*var(--u));top:calc(730*var(--u));width:calc(196*var(--u));height:calc(47*var(--u));font-size:calc(15*var(--u))}

/* ── 訪問歯科帯（背景めくり＝土台はCSSの張り付き・ドリフトはJS） ── */
.homecare{height:calc(607*var(--u));overflow:clip}
.hc-bgwrap{position:absolute;left:0;right:0;top:-100lvh;height:calc(100% + 200lvh);overflow:clip}
.hc-bgi{position:sticky;top:0;height:100lvh;width:100%}
.hc-bgi img{width:100%;height:100%;object-fit:cover}
.hc-tint{position:absolute;inset:0;background:rgba(77,163,103,.2)}
.homecare h2{left:calc(67*var(--u));top:calc(53*var(--u));font-family:var(--d);font-weight:700;font-size:calc(34*var(--u));line-height:1.3;z-index:2}
.homecare .hc-txt{left:calc(109*var(--u));top:calc(186*var(--u));font-size:calc(18*var(--u));line-height:1.6;z-index:2}
.homecare .btn{left:calc(421*var(--u));top:calc(489*var(--u));width:calc(207*var(--u));height:calc(52*var(--u));font-size:calc(20*var(--u));font-weight:400;z-index:2}
.hc-staff{left:calc(757*var(--u));top:calc(129*var(--u));width:calc(424*var(--u));height:calc(424*var(--u));border-radius:calc(50*var(--u));overflow:hidden;z-index:2}
.hc-staff img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}

/* ── クリニック概要 ── */
.outline{height:calc(896*var(--u));background:#fff}
.outline h2{left:0;right:0;top:calc(35*var(--u));text-align:center;font-family:var(--d);font-weight:700;font-size:calc(42*var(--u))}
.ol-name{left:calc(62*var(--u));top:calc(226*var(--u));font-family:var(--d);font-weight:700;font-size:calc(38*var(--u))}
.ol-addr{left:calc(62*var(--u));top:calc(306*var(--u));font-size:calc(18.2*var(--u));line-height:1.6}
.ol-tel{left:calc(62*var(--u));top:calc(348*var(--u));font-size:calc(22.3*var(--u));line-height:1.6}
.ol-tel b{font-weight:400;font-size:calc(26.3*var(--u));margin-left:calc(12*var(--u))}
.ol-park{left:calc(62*var(--u));top:calc(404*var(--u));font-size:calc(18.2*var(--u));line-height:1.6}
.ol-acc{left:calc(62*var(--u));top:calc(462*var(--u));font-size:calc(18.2*var(--u));line-height:1.6}
.ol-hours{left:calc(62*var(--u));top:calc(551*var(--u));width:calc(544*var(--u))}
.ol-hours img{width:100%}
.ol-map{left:calc(709*var(--u));top:calc(517*var(--u));width:calc(519*var(--u));height:calc(466*var(--u));border:0}

/* ── 歯科医師・スタッフのご紹介（水色カプセル・縮小→等倍対象） ── */
.doctors{height:calc(798*var(--u));background:#fff}
.doctors h2{left:calc(40*var(--u));top:calc(76*var(--u));font-family:var(--d);font-weight:700;font-size:calc(36*var(--u));line-height:1.3}
.doc-intro{left:calc(54*var(--u));top:calc(283*var(--u));font-size:calc(16*var(--u));line-height:1.6}
.capsule{position:absolute;top:calc(80*var(--u));width:calc(249*var(--u));height:calc(578*var(--u));background:var(--cyan-panel);border-radius:calc(200*var(--u))}
.cap1{left:calc(585*var(--u))}
.cap2{left:calc(854*var(--u))}
.capsule .dph{position:absolute;left:calc(14*var(--u));top:calc(15*var(--u));width:calc(220*var(--u));height:calc(220*var(--u));border-radius:calc(100*var(--u));overflow:hidden}
.capsule .dph img{width:100%;height:100%;object-fit:cover}
.capsule .role{position:absolute;left:calc(15*var(--u));top:calc(255*var(--u));font-family:var(--d);font-weight:700;font-size:calc(18*var(--u))}
.capsule h3{position:absolute;left:calc(15*var(--u));top:calc(282*var(--u));font-family:var(--d);font-weight:700;font-size:calc(26*var(--u))}
.capsule .bio{position:absolute;left:calc(16*var(--u));top:calc(381*var(--u));width:calc(215*var(--u));font-size:calc(12*var(--u));line-height:1.6}
.doctors .btn{left:calc(528*var(--u));top:calc(612*var(--u));width:calc(214*var(--u));height:calc(47*var(--u));font-size:calc(24*var(--u));border-radius:calc(30*var(--u))}

/* ── ネット予約帯 ── */
.reserve{height:calc(590*var(--u));overflow:clip}
.rs-wash{position:absolute;inset:0;background:rgba(255,255,255,.45)}
.rs-band{position:absolute;left:0;top:calc(76*var(--u));width:calc(888*var(--u));height:calc(269*var(--u));background:rgba(255,255,255,.55)}
.rs-blob{position:absolute;left:calc(873*var(--u));top:calc(75*var(--u));width:calc(232*var(--u));height:calc(271*var(--u))}
.reserve h2{left:calc(97*var(--u));top:calc(77*var(--u));font-family:var(--d);font-weight:400;font-size:calc(46.5*var(--u));z-index:2}
.rs-link{left:calc(880*var(--u));top:calc(128*var(--u));width:calc(220*var(--u));text-align:center;color:#fff;font-weight:700;font-size:calc(16*var(--u));letter-spacing:.35em;text-decoration:underline;z-index:2}

/* ── リンク（LINE・インスタ） ── */
.links{height:calc(240*var(--u));background:#fff}
.lk-line{left:calc(181*var(--u));top:calc(94*var(--u));width:calc(227*var(--u))}
.lk-line img{width:100%}
.lk-ig{left:calc(514*var(--u));top:calc(99*var(--u));width:calc(60*var(--u));height:calc(60*var(--u))}
.lk-ig svg{width:100%;height:100%}

/* ── フッター ── */
.footer{height:calc(395*var(--u));background:#fff;border-top:1px solid #d9d9d9;font-size:calc(16*var(--u))}
.fc{position:absolute;top:calc(9*var(--u))}
.fc h3{font-family:var(--d);font-weight:400;font-size:calc(28*var(--u));margin-bottom:calc(8*var(--u))}
.fc1{left:calc(43*var(--u))}
.fc2{left:calc(326*var(--u));font-size:calc(15.2*var(--u))}
.fc3{left:calc(683*var(--u))}
.fc4{left:calc(1003*var(--u));font-family:var(--d);font-size:calc(16.2*var(--u))}
.fc li{list-style:none;line-height:1.6;padding:calc(3*var(--u)) 0}
.fc a{text-decoration:underline}
.fc p{line-height:1.6}
.fc3 .ind{padding-left:calc(30*var(--u))}
.f-priv{left:0;right:0;top:calc(313*var(--u));text-align:center;font-size:calc(14*var(--u))}
.f-priv a{text-decoration:underline}
.f-copy{left:0;right:0;top:calc(342*var(--u));text-align:center;font-size:calc(14*var(--u))}

/* ── スマホ下部固定バー（本物：電話｜予約｜アクセス） ── */
.fixbar{display:none}

/* ════════ スマホ（基準390・タブレットはPC表示の縮小） ════════ */
@media (max-width:750px){
:root{--u: calc(100vw / 390)}
/* ヘッダー209 */
.header{height:calc(209*var(--u))}
.logo{left:calc(13*var(--u));top:calc(23*var(--u));width:calc(356*var(--u))}
.tel-label{left:calc(79*var(--u));top:calc(98*var(--u));font-size:calc(12.3*var(--u))}
.tel-num{left:calc(114*var(--u));top:calc(92*var(--u));font-size:calc(21.3*var(--u))}
.line-ic{left:calc(274*var(--u));top:calc(83*var(--u));width:calc(40*var(--u))}
.line-txt{left:calc(326*var(--u));top:calc(93*var(--u));font-size:calc(10.8*var(--u))}
.gold-line{display:none}
.gnav{position:fixed;inset:0;background:#fff;display:none;flex-direction:column;justify-content:center;align-items:center;gap:calc(18*var(--u));font-size:calc(17*var(--u));z-index:60}
.gnav.open{display:flex}
.dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;text-align:center;display:none;min-width:0}
.dd.open .dd-menu{display:block}
.menu-btn{display:block;position:absolute;right:calc(28*var(--u));top:calc(142*var(--u));width:calc(36*var(--u));height:calc(26*var(--u));background:none;border:none;cursor:pointer;z-index:70}
.menu-btn span{display:block;height:2px;background:#000;margin:calc(5*var(--u)) 0}
/* ヒーロー282 */
.hero{height:calc(282*var(--u))}
.hero .ph{border-radius:calc(40*var(--u))}
.hp1{left:calc(-6*var(--u));top:calc(-25*var(--u));width:calc(183*var(--u));height:calc(137*var(--u))}
.hp2{left:calc(220*var(--u));top:0;width:calc(133*var(--u));height:calc(174*var(--u))}
.hp3{left:calc(339*var(--u));top:calc(94*var(--u));width:calc(52*var(--u));height:calc(107*var(--u))}
.hp4{left:calc(-42*var(--u));top:calc(104*var(--u));width:calc(136*var(--u));height:calc(178*var(--u))}
.hp5{left:calc(113*var(--u));top:calc(170*var(--u));width:calc(171*var(--u));height:calc(130*var(--u))}
.hp6{left:calc(294*var(--u));top:calc(193*var(--u));width:calc(89*var(--u));height:calc(117*var(--u))}
.hero h1{top:calc(94*var(--u));font-size:calc(22*var(--u))}
.hero .hsub{top:calc(132*var(--u));font-size:calc(16*var(--u));left:calc(25*var(--u));right:calc(25*var(--u))}
/* 診療内容995（縦積み） */
.shinryo{height:calc(995*var(--u))}
.q1{left:0;top:0;width:100%;height:calc(229*var(--u))}
.q2{left:0;top:calc(229*var(--u));width:100%;height:calc(319*var(--u))}
.q3{left:0;top:calc(548*var(--u));width:100%;height:calc(277*var(--u))}
.q4{left:0;top:calc(825*var(--u));width:100%;height:calc(170*var(--u))}
.q1 .sh-title{left:calc(99*var(--u));top:calc(10*var(--u));width:calc(192*var(--u));font-size:calc(24*var(--u))}
.q1 .sh-lead{left:calc(4*var(--u));top:calc(126*var(--u));width:calc(382*var(--u));font-size:calc(16*var(--u));line-height:1.5}
.q2 .sh-txt{left:0;top:calc(147*var(--u));width:100%;text-align:center;font-size:calc(16*var(--u))}
.q3 ul{left:calc(7*var(--u));top:calc(61*var(--u));width:calc(351*var(--u));font-size:calc(16*var(--u))}
.q3 li{margin-bottom:calc(20*var(--u))}
.q4 .sh-txt{left:calc(4*var(--u));top:calc(37*var(--u));width:calc(382*var(--u));text-align:center;font-size:calc(16*var(--u))}
/* レース30 */
.lace{height:calc(30*var(--u))}
.lace::after{height:calc(14*var(--u));background-size:calc(16*var(--u)) calc(14*var(--u))}
.lace .btn{left:calc(147*var(--u));top:calc(2*var(--u));width:calc(96*var(--u));height:calc(26*var(--u));font-size:calc(12*var(--u))}
/* 歯並び195 */
.hanarabi{height:calc(195*var(--u))}
.hanarabi .btn{left:calc(139*var(--u));top:calc(163*var(--u));width:calc(112*var(--u));height:calc(28*var(--u));font-size:calc(12*var(--u))}
/* 4枠 2678（縦積み・かまぼこ形写真＝実測 2026-07-09） */
.guide{height:calc(2678*var(--u))}
.guide h2{left:calc(17*var(--u));top:calc(12*var(--u));font-size:calc(20*var(--u))}
.gcol{height:auto}
.gc1{left:calc(31*var(--u));top:calc(90*var(--u));width:calc(337*var(--u))}
.gc2{left:calc(42*var(--u));top:calc(710*var(--u));width:calc(325*var(--u))}
.gc3{left:calc(42*var(--u));top:calc(1353*var(--u));width:calc(325*var(--u))}
.gc4{left:calc(32*var(--u));top:calc(2137*var(--u));width:calc(325*var(--u))}
.gcol .gph{display:block;left:0;top:0;width:100%;height:calc(229*var(--u));border-radius:calc(160*var(--u)) calc(160*var(--u)) calc(12*var(--u)) calc(12*var(--u))}
.gc2 .gph{height:calc(221*var(--u))}
.gc1 .gph img,.gc2 .gph img,.gc3 .gph img,.gc4 .gph img{transform:none;object-position:50% 40%}
.gcol .gbody{top:calc(246*var(--u))}
.gbody h3{font-size:calc(16*var(--u));line-height:1.6}
.gbody p{font-size:calc(14*var(--u));line-height:1.6}
.gc1 .gbody p,.gc2 .gbody p,.gc3 .gbody p,.gc4 .gbody p{margin:calc(18*var(--u)) auto 0;width:calc(310*var(--u))}
.gcol .btn{border-radius:calc(15*var(--u));font-size:calc(16*var(--u))}
.gc1 .btn{left:calc(118*var(--u));top:calc(464*var(--u));width:calc(100*var(--u));height:calc(31*var(--u))}
.gc2 .btn{left:calc(98*var(--u));top:calc(469*var(--u));width:calc(130*var(--u));height:calc(37*var(--u))}
.gc3 .btn{left:calc(97*var(--u));top:calc(522*var(--u));width:calc(130*var(--u));height:calc(31*var(--u))}
.gc4 .btn{left:calc(96*var(--u));top:calc(525*var(--u));width:calc(135*var(--u));height:calc(37*var(--u))}
/* 訪問700 */
.homecare{height:calc(700*var(--u))}
.hc-tint{background-color:rgba(77,163,103,.2);background-image:linear-gradient(rgba(255,255,255,.42),rgba(255,255,255,.42))}
.homecare h2{left:0;right:0;top:calc(20*var(--u));text-align:center;font-size:calc(20.8*var(--u))}
.hc-staff{left:calc(60*var(--u));top:calc(90*var(--u));width:calc(270*var(--u));height:calc(287*var(--u));border-radius:calc(30*var(--u))}
.homecare .hc-txt{left:calc(43*var(--u));top:calc(413*var(--u));font-size:calc(14*var(--u))}
.homecare .btn{left:calc(128*var(--u));top:calc(637*var(--u));width:calc(134*var(--u));height:calc(38*var(--u));font-size:calc(14.3*var(--u))}
/* 概要1010 */
.outline{height:calc(1010*var(--u))}
.outline h2{top:calc(47*var(--u));font-size:calc(20*var(--u))}
.ol-name{left:calc(24*var(--u));top:calc(151*var(--u));font-size:calc(18*var(--u))}
.ol-addr{left:calc(24*var(--u));top:calc(199*var(--u));font-size:calc(14.6*var(--u));width:calc(340*var(--u))}
.ol-hours{left:calc(24*var(--u));top:calc(279*var(--u));width:calc(303*var(--u))}
.ol-tel{left:calc(13*var(--u));top:calc(462*var(--u));font-size:calc(14*var(--u))}
.ol-tel b{font-size:calc(16*var(--u))}
.ol-park{left:calc(13*var(--u));top:calc(501*var(--u));font-size:calc(13.5*var(--u))}
.ol-acc{left:calc(13*var(--u));top:calc(544*var(--u));font-size:calc(13.5*var(--u))}
.ol-map{left:calc(24*var(--u));top:calc(640*var(--u));width:calc(342*var(--u));height:calc(330*var(--u))}
/* 医師1493（縦積み） */
.doctors{height:calc(1493*var(--u))}
.doctors h2{left:calc(49*var(--u));top:calc(10*var(--u));font-size:calc(20*var(--u))}
.doc-intro{left:calc(49*var(--u));top:calc(115*var(--u));font-size:calc(14*var(--u))}
/* スマホは水色カプセル無し＝白地に大きな角丸写真＋名前＋略歴 */
.capsule{background:transparent;width:calc(300*var(--u));height:calc(560*var(--u));border-radius:0}
.cap1{left:calc(45*var(--u));top:calc(185*var(--u))}
.cap2{left:calc(45*var(--u));top:calc(795*var(--u))}
.capsule .dph{left:calc(45*var(--u));top:0;width:calc(230*var(--u));height:calc(230*var(--u));border-radius:calc(40*var(--u))}
.capsule .role{left:calc(12*var(--u));top:calc(248*var(--u));font-size:calc(14*var(--u))}
.capsule h3{left:calc(12*var(--u));top:calc(272*var(--u));font-size:calc(22*var(--u));letter-spacing:.25em}
.capsule .bio{left:calc(12*var(--u));top:calc(360*var(--u));width:calc(300*var(--u));font-size:calc(13*var(--u))}
.doctors .btn{left:calc(113*var(--u));top:calc(1330*var(--u));width:calc(164*var(--u));height:calc(40*var(--u));font-size:calc(14*var(--u))}
/* 予約355 */
.reserve{height:calc(355*var(--u))}
.rs-band{top:calc(30*var(--u));width:calc(300*var(--u));height:calc(120*var(--u))}
.rs-blob{left:calc(120*var(--u));top:calc(140*var(--u));width:calc(150*var(--u));height:calc(175*var(--u))}
.reserve h2{left:calc(30*var(--u));top:calc(28*var(--u));font-size:calc(20.8*var(--u))}
.rs-link{left:calc(85*var(--u));top:calc(167*var(--u));width:calc(170*var(--u));font-size:calc(14*var(--u))}
/* リンク154 */
.links{height:calc(154*var(--u))}
.lk-line{left:calc(87*var(--u));top:calc(3*var(--u));width:calc(106*var(--u))}
.lk-ig{left:calc(252*var(--u));top:calc(19*var(--u));width:calc(39*var(--u));height:calc(39*var(--u))}
/* フッター856（縦積み） */
.footer{height:calc(856*var(--u));font-size:calc(14*var(--u))}
.fc h3{font-size:calc(20.8*var(--u))}
.fc1{left:calc(20*var(--u));top:calc(42*var(--u))}
.fc2{left:calc(20*var(--u));top:calc(240*var(--u));font-size:calc(14.6*var(--u))}
.fc3{left:calc(20*var(--u));top:calc(372*var(--u))}
.fc4{left:calc(20*var(--u));top:calc(604*var(--u));font-size:calc(14.6*var(--u))}
.f-priv{top:calc(653*var(--u))}
.f-copy{top:calc(776*var(--u))}
/* 下部固定バー（白地に角丸3色ボタン＝本物準拠） */
.fixbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;gap:calc(14*var(--u));padding:calc(12*var(--u)) calc(14*var(--u)) calc(16*var(--u));box-shadow:0 -2px 8px rgba(0,0,0,.06)}
.fixbar a{flex:1;text-align:center;padding:calc(18*var(--u)) 0;color:#fff;font-weight:700;font-size:calc(20*var(--u));border-radius:calc(16*var(--u))}
.fixbar .f-tel{background:#ef9ecb}
.fixbar .f-yoyaku{background:#b5d4ad}
.fixbar .f-map{background:#f2c48d}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ════════ 整え（2026-07-09 社長GO＝再現の上に統一感を出す） ════════ */
/* 1) 見出し＝同じ書体・そろえた大きさ（節見出し38・帯見出し34） */
.q1 .sh-title{font-family:var(--d);color:#333;font-size:calc(34*var(--u))}
.guide h2{left:0;right:0;text-align:center;font-size:calc(38*var(--u))}
.outline h2,.doctors h2{font-size:calc(38*var(--u))}
.reserve h2{font-family:var(--d);font-weight:700;font-size:calc(38*var(--u));top:calc(88*var(--u))}
.hero h1{font-size:calc(54*var(--u))}
.hero .hsub{font-size:calc(26*var(--u))}
/* 2) 本文＝2段階（読ませる18・添える16）・行間2.0で統一 */
.q1 .sh-lead{font-size:calc(20*var(--u));line-height:2}
.q2 .sh-txt,.q4 .sh-txt{font-size:calc(18*var(--u));line-height:2}
.q3 ul{font-size:calc(18*var(--u))}
.q3 li{margin-bottom:calc(22*var(--u));line-height:2}
.homecare .hc-txt{line-height:2}
/* 3) ボタン＝1規格（高さ46・丸ピル・字16太字） */
.lace .btn,.hanarabi .btn,.homecare .btn,.doctors .btn{height:calc(46*var(--u));font-size:calc(16*var(--u));font-weight:700;border-radius:calc(999*var(--u))}
.btn{letter-spacing:.06em}
/* 4) フッター＝見出し小さく太く・下線はなぞった時だけ */
.fc h3{font-weight:700;font-size:calc(20*var(--u));margin-bottom:calc(12*var(--u))}
.fc a{text-decoration:none}
.fc a:hover,.f-priv a:hover{text-decoration:underline}
.f-copy{color:#888}
.footer{border-top:1px solid #eee}

/* 5) スマホ・タブレット＝文字とボタンに上限（拡大で巨大化させない） */
@media (max-width:750px){
.fixbar{gap:10px;padding:8px 10px 10px}
.fixbar a{padding:12px 0;font-size:15px;border-radius:12px}
.hero h1{font-size:clamp(18px,calc(22*var(--u)),30px)}
.hero .hsub{font-size:clamp(13px,calc(16*var(--u)),21px)}
.q1 .sh-title{font-size:clamp(17px,calc(24*var(--u)),28px)}
.q1 .sh-lead,.q2 .sh-txt,.q4 .sh-txt,.q3 ul{font-size:clamp(13px,calc(16*var(--u)),18px)}
.guide h2,.outline h2,.doctors h2,.homecare h2,.reserve h2{font-size:clamp(16px,calc(20*var(--u)),26px)}
.gbody h3{font-size:clamp(14px,calc(16*var(--u)),20px)}
.gbody p,.homecare .hc-txt{font-size:clamp(12px,calc(14*var(--u)),17px)}
.capsule h3{font-size:clamp(16px,calc(22*var(--u)),26px)}
.capsule .role{font-size:clamp(12px,calc(14*var(--u)),17px)}
.capsule .bio,.doc-intro{font-size:clamp(11px,calc(13*var(--u)),16px)}
.ol-addr,.ol-acc,.ol-park,.ol-tel{font-size:clamp(12px,calc(14*var(--u)),17px)}
.gcol .btn,.homecare .btn,.doctors .btn,.hanarabi .btn,.lace .btn{height:clamp(30px,calc(38*var(--u)),44px);font-size:clamp(12px,calc(14*var(--u)),16px)}
.fc h3{font-size:clamp(15px,calc(18*var(--u)),21px)}
.fc li,.fc p{font-size:clamp(12px,calc(14*var(--u)),17px)}
}

/* 6) 4枠の行揃え（PCのみ＝見出し・本文・ボタンを同じ高さに） */
@media (min-width:751px){
.gc1 .gbody,.gc2 .gbody,.gc3 .gbody,.gc4 .gbody{top:calc(528*var(--u))}
.gbody h3{min-height:calc(74*var(--u))}
.gc1 .gbody p,.gc2 .gbody p,.gc3 .gbody p,.gc4 .gbody p{margin-top:calc(36*var(--u))}
.gc1 .btn,.gc2 .btn,.gc3 .btn,.gc4 .btn{top:calc(884*var(--u));height:calc(46*var(--u));font-size:calc(16*var(--u));border-radius:calc(999*var(--u))}
.gcol .gph{top:calc(10*var(--u))}
}

/* ════════ 整え第2弾（2026-07-09 社長指摘5点） ════════ */
/* 写真の上の文字を読みやすく（白のにじみ＋かぶせ強化）＝全幅共通 */
.homecare h2,.homecare .hc-txt,.reserve h2{text-shadow:0 1px 8px rgba(255,255,255,.95),0 0 16px rgba(255,255,255,.85)}
.rs-wash{background:rgba(255,255,255,.5)}
@media (max-width:750px){
/* 文字の上限を引き上げ（タブレットで小さすぎ解消） */
.hero h1{font-size:clamp(18px,calc(22*var(--u)),36px)}
.hero .hsub{font-size:clamp(13px,calc(16*var(--u)),24px)}
.q1 .sh-title{font-size:clamp(17px,calc(24*var(--u)),34px)}
.q1 .sh-lead,.q2 .sh-txt,.q4 .sh-txt,.q3 ul{font-size:clamp(13px,calc(16*var(--u)),21px)}
.guide h2,.outline h2,.doctors h2,.homecare h2,.reserve h2{font-size:clamp(16px,calc(20*var(--u)),32px)}
.gbody h3{font-size:clamp(14px,calc(16*var(--u)),24px)}
.gbody p,.homecare .hc-txt{font-size:clamp(12px,calc(14*var(--u)),20px)}
.capsule h3{font-size:clamp(16px,calc(22*var(--u)),30px)}
.capsule .role{font-size:clamp(12px,calc(14*var(--u)),19px)}
.capsule .bio,.doc-intro{font-size:clamp(11px,calc(13*var(--u)),18px)}
.ol-addr,.ol-acc,.ol-park,.ol-tel{font-size:clamp(12px,calc(14*var(--u)),19px)}
.fc li,.fc p{font-size:clamp(12px,calc(14*var(--u)),19px)}
.fc h3{font-size:clamp(15px,calc(18*var(--u)),24px)}
/* 小児歯科ボタンの見切れ解消（節の高さに余裕） */
.guide{height:calc(2740*var(--u))}
/* ネット予約区画の組み直し（雫形の中に文字を収める） */
.homecare .hc-tint,.hc-tint{background-color:rgba(77,163,103,.2);background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5))}
.reserve h2{left:calc(30*var(--u));top:calc(30*var(--u))}
.rs-band{top:calc(30*var(--u));width:calc(280*var(--u));height:calc(90*var(--u))}
.rs-blob{left:calc(120*var(--u));top:calc(140*var(--u));width:calc(150*var(--u));height:calc(175*var(--u))}
.rs-link{left:calc(120*var(--u));top:calc(178*var(--u));width:calc(150*var(--u));font-size:clamp(12px,calc(13*var(--u)),16px);letter-spacing:.15em}
}

/* ════════ 整え第3弾（2026-07-09 動画指摘）＝戻りスクロールで半透明ヘッダー＋予約ピンク形の実寸 ════════ */
.header.float{position:fixed;left:0;right:0;top:0;transform:translateY(-100%);transition:transform .3s ease;z-index:80;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(0,0,0,.08)}
.header.float.show{transform:none}
.rs-blob{left:calc(873*var(--u));right:0;width:auto;top:calc(75*var(--u));bottom:0;height:auto}
@media (max-width:750px){
.rs-blob{left:calc(120*var(--u));right:auto;width:calc(150*var(--u));top:calc(140*var(--u));bottom:auto;height:calc(175*var(--u))}
}

/* 降りてくるヘッダー＝スマホ/タブレットは薄型（ロゴ＋メニューのみ・2026-07-09） */
@media (max-width:750px){
.header.float{height:60px}
.header.float .logo{left:12px;top:8px;width:auto}
.header.float .logo img{width:auto;height:44px}
.header.float .tel-label,.header.float .tel-num,.header.float .line-ic,.header.float .line-txt,.header.float .gold-line{display:none}
.header.float .menu-btn{top:17px;right:16px;left:auto;width:34px;height:26px}
.header.float .menu-btn span{margin:5px 0}
}

/* ════════ ヘッダー刷新（2026-07-09 社長指示＝大元をコンパクトに・薄型化は撤回） ════════ */
@media (max-width:750px){
.header{height:110px}
.logo{left:14px;top:10px;width:auto}
.logo img{width:auto;height:46px}
.tel-label{left:16px;top:76px;font-size:12px;line-height:1.2}
.tel-num{left:50px;top:68px;font-size:22px;line-height:1.2}
.line-ic{left:228px;top:68px;width:32px}
.line-ic img{width:100%}
.line-txt{left:268px;top:70px;font-size:10.5px}
.menu-btn{left:auto;right:16px;top:20px;width:34px;height:26px}
.menu-btn span{margin:5px 0}
.header.float{height:110px}
.header.float .logo{left:14px;top:10px;width:auto}
.header.float .logo img{height:46px}
.header.float .tel-label,.header.float .tel-num,.header.float .line-txt{display:block}
.header.float .line-ic{display:block}
.header.float .menu-btn{top:20px}
}

/* ════════ 微調整（2026-07-09）＝ヘッダー+25%・予約ピンクはD形（本物準拠） ════════ */
.rs-blob{background:rgb(250,109,183);border-radius:0 calc(140*var(--u)) calc(140*var(--u)) 0;left:calc(873*var(--u));top:calc(75*var(--u));width:calc(232*var(--u));height:calc(271*var(--u));right:auto;bottom:auto}
.rs-band{left:0;right:0;width:auto;top:calc(75*var(--u));height:calc(82*var(--u));background:rgba(255,255,255,.45)}
.reserve::after{content:"";position:absolute;left:0;right:0;top:calc(287*var(--u));height:calc(58*var(--u));background:rgba(255,255,255,.4)}
.rs-blob,.rs-link{z-index:2}
@media (max-width:750px){
.header,.header.float{height:138px}
.logo img,.header.float .logo img{height:58px}
.tel-label{left:16px;top:96px;font-size:14px}
.tel-num{left:58px;top:86px;font-size:26px}
.line-ic{left:292px;top:88px;width:36px}
.line-txt{left:334px;top:90px;font-size:11px}
.menu-btn,.header.float .menu-btn{top:26px}
.rs-blob{left:calc(120*var(--u));right:auto;top:calc(140*var(--u));width:calc(150*var(--u));height:calc(175*var(--u));border-radius:calc(75*var(--u)) calc(75*var(--u)) 0 0}
.rs-band{top:calc(30*var(--u));height:calc(60*var(--u))}
.reserve::after{display:none}
}