@charset "UTF-8";
/* 赤塚クリニック ─ ティファニーブルー × 白 × ゴールド */

:root{
  --t:#0ABAB5;
  --t-d:#0A8C89;
  --t-dd:#0B4B49;
  --t-l:#E8F7F6;
  --t-ll:#F3FAFA;
  --gold:#C2A14D;
  --gold-l:#DEC58A;
  --bg:#F6F6F2;
  --ink:#173835;
  --sub:#4F6C6A;
  --line:#DFEAE9;
  --radius:8px;
  --head-h:92px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",Meiryo,sans-serif;
  color:var(--ink);background:var(--bg);line-height:2.05;font-size:16px;
  letter-spacing:.055em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:"Jost",Georgia,"Times New Roman",serif;letter-spacing:.2em}

/* ================= header ================= */
.hd{position:fixed;inset:0 0 auto 0;height:var(--head-h);z-index:80;
  background:rgba(255,255,255,.97);display:flex;align-items:center;padding:0 26px;gap:20px;
  transform:translateY(-105%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
  box-shadow:0 2px 18px rgba(11,75,73,.07)}
.hd.show{transform:none}
body.sub .hd{transform:none}
.hd .brand{display:flex;align-items:center;gap:12px;flex:none}
.hd .brand svg{width:52px;height:auto}
.hd .brand b{display:block;font-size:19px;font-weight:700;letter-spacing:.14em;color:var(--t-dd);line-height:1.3}
.hd .brand i{display:block;font-style:normal;font-size:9.5px;letter-spacing:.22em;color:var(--gold)}
.hd nav{margin-left:auto;display:flex;align-items:stretch;height:56px}
.hd nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:0 20px;font-size:13px;font-weight:600;letter-spacing:.09em;color:var(--t-dd);
  border-left:1px solid var(--line);position:relative}
.hd nav a:last-of-type{border-right:1px solid var(--line)}
.hd nav a svg{width:24px;height:24px;stroke:var(--t-dd);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:.2s}
.hd nav a:hover svg,.hd nav a[aria-current] svg{stroke:var(--t)}
.hd nav a[aria-current]::after{content:"";position:absolute;left:22%;right:22%;bottom:-4px;height:2px;background:var(--t)}
.hd .acts{display:flex;gap:10px;flex:none;margin-left:14px}
.hd .acts a{border-radius:var(--radius);padding:0 22px;height:52px;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:14px;letter-spacing:.08em;white-space:nowrap}
.hd .acts .a1{background:var(--t);color:#fff}
.hd .acts .a1:hover{background:var(--t-d)}
.hd .acts .a2{background:var(--t-dd);color:#fff;gap:8px}
.hd .acts .a2:hover{background:#083634}
.hd .acts .a2 svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;
  width:48px;height:44px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger i{display:block;width:20px;height:1.5px;background:var(--t-dd)}

/* ================= hero ================= */
.hero{display:grid;grid-template-columns:392px 1fr;align-items:stretch;background:var(--bg);position:relative}
.hero .side{padding:40px 30px 44px;text-align:center}
.hero .side .mark{width:118px;margin:0 auto 14px}
.hero .side h1{font-size:25px;font-weight:700;letter-spacing:.16em;color:var(--t-dd);line-height:1.5}
.hero .side .sub{font-size:10px;letter-spacing:.24em;color:var(--gold);margin-top:4px}
.hero .side .depts{font-size:11.5px;letter-spacing:.04em;color:var(--sub);margin:20px 0 20px;
  padding-bottom:18px;border-bottom:1px solid var(--line);line-height:1.9;white-space:nowrap}
.qmenu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.qmenu a{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:15px 4px 12px;
  display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:var(--t-dd);transition:.16s}
.qmenu a:hover{border-color:var(--t);background:var(--t-ll)}
.qmenu a svg{width:27px;height:27px;stroke:var(--t-d);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.side-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px}
.side-cta a{border-radius:var(--radius);height:52px;display:flex;align-items:center;justify-content:center;
  gap:7px;font-weight:700;font-size:13.5px;letter-spacing:.05em}
.side-cta .c1{background:var(--t);color:#fff}
.side-cta .c2{background:var(--t-dd);color:#fff}
.side-cta svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}

.hero .main{position:relative;min-height:calc(100vh - 24px);max-height:920px;overflow:hidden;display:flex;flex-direction:column}
.hero .cp{position:relative;z-index:4;padding:clamp(44px,7vh,92px) clamp(20px,4vw,60px) clamp(30px,4vh,46px)}
.hero .cp h2{font-size:clamp(30px,3.7vw,50px);font-weight:700;line-height:1.62;letter-spacing:.12em;color:var(--t-dd)}
.hero .cp .lbl{display:block;margin-top:20px;font-size:clamp(12px,1.15vw,15px);color:var(--t-d);
  letter-spacing:.1em;font-family:Georgia,"Times New Roman",serif}
.hero .photo{position:relative;flex:1;min-height:0;clip-path:polygon(0 17%, 100% 0, 100% 100%, 0 100%)}
.hero .photo .slides{position:absolute;inset:0}
.hero .photo .slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 44%;opacity:0;transition:opacity 1.8s ease;will-change:opacity}
.hero .photo .slides img.on{opacity:1;animation:kb 10s ease-out forwards}
@keyframes kb{from{transform:scale(1.07)}to{transform:scale(1)}}
.hero .dots{position:absolute;right:26px;bottom:24px;z-index:5;display:flex;gap:9px}
.hero .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);display:block;transition:.3s}
.hero .dots i.on{background:#fff;width:24px;border-radius:5px}
.hero .memo{position:absolute;right:0;bottom:0;z-index:6;background:rgba(255,255,255,.94);
  border-top-left-radius:var(--radius);padding:14px 26px;font-size:12.5px;color:var(--t-dd);
  letter-spacing:.05em;line-height:1.8;display:flex;align-items:center;gap:10px}
.hero .memo svg{width:17px;height:17px;stroke:var(--t);fill:none;stroke-width:1.6;flex:none}

/* ================= 診療時間表 ================= */
table.hours{width:100%;border-collapse:collapse;font-size:12.5px;letter-spacing:.02em}
table.hours th,table.hours td{padding:9px 2px;text-align:center;border-bottom:1px solid var(--line)}
table.hours thead th{color:var(--t-dd);font-weight:700;font-size:12px;border-bottom:1.5px solid var(--t-dd)}
table.hours thead th:first-child{text-align:left;padding-left:2px}
table.hours tbody th{text-align:left;font-weight:600;color:var(--ink);white-space:nowrap;font-size:12px}
table.hours td{color:var(--t);font-size:15px;font-weight:700}
table.hours td.x{color:#C3D2D1}
table.hours td.n{font-size:10.5px;color:var(--gold);font-weight:700;letter-spacing:0}
.hours-note{margin-top:12px;font-size:11px;color:var(--sub);line-height:1.95;text-align:left;letter-spacing:.02em}
.hours-note b{color:var(--t-d)}
.hours-wide table.hours{font-size:15px}
.hours-wide table.hours td{font-size:20px}
.hours-wide table.hours th,.hours-wide table.hours td{padding:14px 4px}
.hours-wide table.hours tbody th{font-size:14.5px}
.hours-wide .hours-note{font-size:13.5px;text-align:center}

/* ================= 共通レイアウト ================= */
.in{max-width:1240px;margin:0 auto;padding:0 34px}
section{padding:96px 0}
.tint{background:#fff}
.divider{max-width:1240px;margin:0 auto;padding:0 34px}
.divider::before{content:"";display:block;border-top:1px dashed var(--gold);opacity:.6}

.sh{text-align:center;margin-bottom:56px}
.sh .orn{width:26px;margin:0 auto 14px;display:block}
.sh h2{font-size:clamp(23px,2.7vw,30px);font-weight:700;letter-spacing:.2em;color:var(--t-dd);line-height:1.6}
.sh .en{display:block;font-size:11px;color:var(--gold);margin-top:9px}
.sh p{margin-top:22px;color:var(--sub);font-size:15px;line-height:2.2}
.sh.left{text-align:left}
.sh.left .orn{margin-left:0}

/* 大きな中央テキストブロック（ABOUT US） */
.aboutblk{text-align:center}
.aboutblk .mark{width:120px;margin:0 auto 26px}
.aboutblk .lbl{display:inline-block;font-size:11px;color:var(--gold);letter-spacing:.28em;margin-bottom:22px}
.aboutblk .lbl::before,.aboutblk .lbl::after{content:"|";margin:0 16px;color:var(--gold-l)}
.aboutblk h2{font-size:clamp(24px,3.1vw,34px);font-weight:700;color:var(--t-d);letter-spacing:.14em;line-height:1.85}
.aboutblk .body{margin-top:34px;font-size:15.5px;line-height:2.5;color:var(--sub);letter-spacing:.07em}
.aboutblk .body span{display:block}
.aboutblk .body .gap{height:22px}

/* 丸ボタン */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:52px;background:var(--t-dd);
  color:#fff;border-radius:var(--radius);min-width:300px;height:62px;padding:0 30px;font-weight:700;
  font-size:15px;letter-spacing:.12em;transition:.16s}
.pill:hover{background:#083634}
.pill svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.4}
.pill.gold{background:var(--gold)}.pill.gold:hover{background:#AA8B3E}
.center{text-align:center}

/* 3カラム 写真＋見出し＋本文 */
.feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px}
.feat3 .ph{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);margin-bottom:26px}
.feat3 .ph img{width:100%;height:100%;object-fit:cover;transition:.5s}
.feat3 a:hover .ph img{transform:scale(1.05)}
.feat3 h3{text-align:center;font-size:19px;font-weight:700;color:var(--t-d);letter-spacing:.13em;margin-bottom:16px}
.feat3 p{font-size:14.5px;line-height:2.15;color:var(--sub);text-align:justify}

/* 左テキスト＋右カードグリッド */
.split2{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start}
.cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cardgrid.six{grid-template-columns:repeat(6,1fr)}
@media(max-width:1000px){.cardgrid.six{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.cardgrid.six{grid-template-columns:1fr 1fr}}
.cardgrid a,.cardgrid .it{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 16px 18px;text-align:center;transition:.16s}
.cardgrid a:hover{border-color:var(--t);box-shadow:0 8px 22px rgba(11,75,73,.07)}
.cardgrid .ic{width:64px;height:64px;border-radius:50%;background:var(--t-ll);display:grid;place-items:center;margin:0 auto 16px}
.cardgrid .ic svg{width:30px;height:30px;stroke:var(--t-d);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.cardgrid .it{cursor:default}
.cardgrid b{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;
  font-weight:700;color:var(--t-dd);letter-spacing:.08em;border-top:1px solid var(--line);padding-top:13px}
.cardgrid b svg{width:15px;height:15px;stroke:var(--t);fill:none;stroke-width:1.6;flex:none}

/* お知らせ */
.newswrap{display:grid;grid-template-columns:260px 1fr;gap:50px;align-items:start}
.news{max-width:none;margin:0}
.news a{display:flex;align-items:center;gap:26px;padding:20px 6px;border-bottom:1px solid var(--line);transition:.15s}
.news a:hover{background:var(--t-ll)}
.news time{font-size:13px;color:var(--sub);letter-spacing:.08em;flex:none;font-family:Georgia,serif}
.news .tag{font-size:11.5px;color:var(--t-d);border:1px solid var(--t-l);background:var(--t-ll);
  border-radius:3px;padding:3px 16px;flex:none;letter-spacing:.08em}
.news .ttl{font-size:15px;font-weight:600}
.news-more{display:flex;align-items:center;justify-content:flex-end;gap:16px;margin-top:26px;
  font-size:14px;font-weight:700;color:var(--t-dd);letter-spacing:.1em}
.news-more span.c{width:40px;height:40px;border-radius:50%;background:var(--t-dd);display:grid;place-items:center}
.news-more span.c svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.4}

/* アクセス */
.acc-head{display:grid;grid-template-columns:auto 1fr auto;gap:44px;align-items:center;margin-bottom:44px}
.acc-head .t .orn{width:26px;height:auto;display:block;margin-bottom:10px}
.acc-head .t h2{font-size:29px;font-weight:700;letter-spacing:.22em;color:var(--t-dd);line-height:1.4}
.acc-head .t .en{display:block;font-size:11px;color:var(--gold);margin-top:6px}
.acc-head .adr{font-size:15.5px;line-height:2.1}
.acc-head .adr a{color:var(--t-d);border-bottom:1px solid var(--t-l);font-weight:600}
.wayto{background:#fff;border-radius:var(--radius);display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line)}
.wayto > div{display:flex;gap:26px;padding:34px 36px;align-items:flex-start}
.wayto > div + div{border-left:1px solid var(--line)}
.wayto .ic{width:72px;flex:none}
.wayto .ic svg{width:72px;height:52px;stroke:var(--t-d);fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.wayto h4{font-size:17px;font-weight:700;color:var(--t-dd);letter-spacing:.1em;margin-bottom:8px}
.wayto p,.wayto li{font-size:14.5px;color:var(--sub);line-height:2}
.wayto ul{list-style:none}
.wayto li{position:relative;padding-left:16px}
.wayto li::before{content:"";position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--t)}
.map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.map iframe{display:block;width:100%;height:420px;border:0}

/* 提携病院 */
.hosp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px 44px}
.hosp p{font-size:14.5px;color:var(--sub);line-height:2.1;margin-bottom:22px}
.hosp ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px}
.hosp li{font-size:14px;background:var(--t-ll);border:1px solid var(--t-l);border-radius:4px;
  padding:8px 18px;color:var(--t-dd);letter-spacing:.06em}
.hosp li.pri{background:var(--t-dd);color:#fff;border-color:var(--t-dd)}

/* 汎用 */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split.rev .txt{order:2}
.split .ph img{border-radius:var(--radius)}
.split h3{font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--t-dd);letter-spacing:.13em;
  line-height:1.85;margin-bottom:22px}
.split h3 .g{color:var(--t)}
.split p{font-size:15.5px;line-height:2.3;color:var(--sub)}
.split p + p{margin-top:16px}
.dl{border-top:1px solid var(--line)}
.dl > div{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:17px 4px}
.dl dt{flex:0 0 168px;font-weight:700;color:var(--t-dd);font-size:14.5px;letter-spacing:.08em}
.dl dd{flex:1;color:var(--sub);font-size:14.5px}
ul.checks{list-style:none}
ul.checks li{position:relative;padding-left:28px;margin-bottom:12px;font-size:15.5px;color:var(--sub);line-height:2}
ul.checks li::before{content:"";position:absolute;left:5px;top:13px;width:7px;height:7px;border-radius:50%;
  background:var(--t);box-shadow:0 0 0 4px var(--t-ll)}
ul.checks li b{color:var(--ink)}
.note-box{background:var(--t-ll);border:1px solid var(--t-l);border-radius:var(--radius);
  padding:24px 28px;font-size:15px;color:var(--t-dd);line-height:2.15}

/* 下層ページヘッダー */
.phead{margin-top:var(--head-h);position:relative;height:clamp(200px,24vw,300px);overflow:hidden;background:var(--t-dd)}
.phead img{width:100%;height:100%;object-fit:cover;opacity:.4}
.phead .in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;color:#fff}
.phead h1{font-size:clamp(24px,3.4vw,34px);font-weight:700;letter-spacing:.24em}
.phead .en{display:block;font-size:11px;color:var(--gold-l);margin-top:9px}
.crumb{background:#fff;font-size:12.5px;color:var(--sub);border-bottom:1px solid var(--line)}
.crumb .in{padding-top:14px;padding-bottom:14px}
.crumb a{color:var(--t-d)}

/* 問診票 */
.forms{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:960px;margin:0 auto}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.formcard .prev{background:var(--t-ll);padding:36px;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.formcard .prev img{max-height:420px;width:auto;box-shadow:0 10px 30px rgba(11,75,73,.14)}
.formcard .bd{padding:28px}
.formcard h3{font-size:18px;font-weight:700;color:var(--t-dd);letter-spacing:.1em;margin-bottom:8px}
.formcard p{font-size:14px;color:var(--sub);margin-bottom:20px;line-height:2}

/* footer */
footer{background:var(--t-dd);color:#fff;padding:70px 0 130px;margin-top:0}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
footer .brand{display:flex;align-items:center;gap:14px;margin-bottom:22px}
footer .brand svg{width:64px}
footer .brand b{font-size:19px;font-weight:700;letter-spacing:.14em;display:block}
footer .brand i{font-style:normal;font-size:9.5px;color:var(--gold-l);letter-spacing:.22em}
footer p,footer li{font-size:14px;color:#BCD9D8;line-height:2.1}
footer h4{font-size:12px;font-weight:700;color:var(--gold-l);margin-bottom:14px;letter-spacing:.22em}
footer ul{list-style:none}
footer a:hover{color:#fff;text-decoration:underline}
footer .cr{margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:12px;color:#89AFAD;text-align:center;letter-spacing:.1em}

/* フローティング（右下） */
.float{position:fixed;right:22px;bottom:22px;z-index:70;background:#fff;border-radius:var(--radius);
  box-shadow:0 8px 28px rgba(11,75,73,.16);display:flex;overflow:hidden}
.float a{display:flex;align-items:center;gap:10px;padding:17px 24px;font-size:13.5px;font-weight:700;
  color:var(--t-dd);letter-spacing:.08em}
.float a + a{border-left:1px solid var(--line)}
.float a:hover{background:var(--t-ll)}
.float svg{width:15px;height:15px;stroke:var(--t);fill:none;stroke-width:1.7}
.fixcta{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;background:#fff;
  border-top:1px solid var(--line);padding:9px 11px;gap:9px;box-shadow:0 -4px 16px rgba(11,75,73,.1)}
.fixcta a{flex:1;border-radius:var(--radius);padding:14px 6px;text-align:center;font-weight:700;font-size:14.5px}
.fixcta .p1{background:var(--t-dd);color:#fff}
.fixcta .p2{border:1.5px solid var(--t);color:var(--t-d)}

/* ================= responsive ================= */
@media(max-width:1180px){
  .hd nav a{padding:0 13px;font-size:12px}
  .hd .acts a{padding:0 15px;font-size:13px}
  .hero{grid-template-columns:340px 1fr}
}
@media(max-width:1000px){
  .feat3{grid-template-columns:1fr;gap:44px}
  .split2{grid-template-columns:1fr;gap:34px}
  .split{grid-template-columns:1fr;gap:30px}
  .split.rev .txt{order:0}
  .acc-head{grid-template-columns:1fr;gap:20px}
  .wayto{grid-template-columns:1fr}
  .wayto > div + div{border-left:none;border-top:1px solid var(--line)}
  .forms{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero .photo{height:56vw;min-height:300px;max-height:460px;order:-1}
  .hero .side{max-width:520px;margin:0 auto}
}
@media(max-width:820px){
  :root{--head-h:68px}
  .petals{display:none}
  .glow{display:none}
  .hd{transform:none!important}
  .hero{margin-top:var(--head-h)}
  body{font-size:15.5px;line-height:1.95}
  section{padding:62px 0}
  .in,.divider{padding:0 20px}
  .hd{padding:0 14px}
  .hd nav,.hd .acts{display:none}
  .hd nav.open{display:flex;position:absolute;top:var(--head-h);left:0;right:0;background:#fff;
    flex-direction:column;height:auto;box-shadow:0 12px 24px rgba(11,75,73,.12);padding:6px 0}
  .hd nav.open a{flex-direction:row;justify-content:flex-start;gap:14px;padding:15px 22px;
    border-left:none;border-bottom:1px solid var(--line);font-size:15px}
  .hd nav.open a:last-of-type{border-right:none}
  .hd nav.open a[aria-current]::after{display:none}
  .burger{display:flex}
  .hd .brand b{font-size:16px;letter-spacing:.1em}
  .hd .brand svg{width:42px}
  .hero .cp h2{font-size:22px;line-height:1.9;letter-spacing:.1em}
  .hero .cp p{display:none}
  .hero .side{padding:26px 20px 34px}
  .cardgrid{grid-template-columns:1fr 1fr}
  .float{display:none}
  .fixcta{display:flex}
  footer{padding:48px 0 118px}
  footer .grid{grid-template-columns:1fr;gap:30px}
  .map iframe{height:300px}
  .hosp{padding:26px 22px}
  .dl > div{flex-direction:column;gap:5px}
  .dl dt{flex:none}
  .hours-wide table.hours{font-size:13px}
  .hours-wide table.hours td{font-size:17px}
}


/* ================= スクロール表示 ================= */
.rv{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.22,.61,.36,1),transform .95s cubic-bezier(.22,.61,.36,1)}
.rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}}


/* 写真準備中の枠 */
.ph.soon{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:var(--radius);background:var(--t-ll);
  display:grid;place-items:center;text-align:center}
.ph.soon span{font-size:13px;color:var(--sub);letter-spacing:.08em;line-height:2}
.ph.soon svg{width:38px;height:38px;stroke:var(--gold-l);fill:none;stroke-width:1.2;margin:0 auto 12px}

/* 医師プロフィール */
.doctor{display:grid;grid-template-columns:340px 1fr;gap:52px;align-items:start}
.doctor .ph img,.doctor .ph.soon{border-radius:var(--radius)}
.doctor .nm{font-size:26px;font-weight:700;color:var(--t-dd);letter-spacing:.13em;line-height:1.5}
.doctor .nm small{display:block;font-size:13px;font-weight:400;color:var(--sub);letter-spacing:.1em;margin-top:6px}
.doctor .role{display:inline-block;font-size:12px;color:#fff;background:var(--t);border-radius:3px;
  padding:4px 14px;letter-spacing:.1em;margin-bottom:14px}
.doctor .lead{margin:18px 0 24px;font-size:15.5px;line-height:2.25;color:var(--sub)}
.prof{border-top:1px solid var(--line);margin-top:8px}
.prof > div{display:flex;gap:20px;border-bottom:1px solid var(--line);padding:14px 2px}
.prof dt{flex:0 0 96px;font-weight:700;color:var(--t-dd);font-size:13.5px;letter-spacing:.1em}
.prof dd{flex:1;color:var(--sub);font-size:14px;line-height:2}
@media(max-width:1000px){.doctor{grid-template-columns:1fr;gap:26px}.doctor .ph{max-width:400px}}

/* 症状リスト（2列） */
.sympt{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.sympt li{margin-bottom:6px}
@media(max-width:820px){.sympt{grid-template-columns:1fr}}


/* ================= 斜めエッジのセクション ================= */
.slant{position:relative;background:#EAF5F4;padding:118px 0 108px;margin:70px 0}
.slant::before{content:"";position:absolute;left:0;right:0;top:-70px;height:71px;background:#EAF5F4;
  clip-path:polygon(0 100%, 100% 0, 100% 100%)}
.slant::after{content:"";position:absolute;left:0;right:0;bottom:-70px;height:71px;background:#EAF5F4;
  clip-path:polygon(0 0, 100% 0, 0 100%)}

/* 斜めパネルのフォトギャラリー */
.gal{overflow:hidden;padding:26px 0 40px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.gal .track{display:flex;align-items:flex-start;gap:20px;width:max-content;animation:mv 74s linear infinite}
.gal figure{flex:none;position:relative;width:322px;height:292px;transform:skewX(-9deg);
  overflow:hidden;border-radius:3px;box-shadow:0 14px 30px -16px rgba(11,75,73,.5);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s}
.gal figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(255,255,255,.5);border-radius:3px;
  background:linear-gradient(180deg,rgba(6,42,41,0) 54%,rgba(6,42,41,.30) 74%,rgba(6,42,41,.72) 100%)}
.gal figure .im{position:absolute;inset:0;overflow:hidden}
.gal figure img{width:126%;height:100%;margin-left:-13%;object-fit:cover;
  transform:skewX(9deg) scale(1.02);transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.gal figure figcaption{position:absolute;left:0;right:0;bottom:14px;z-index:2;
  transform:skewX(9deg);text-align:center;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.gal figure figcaption b{display:block;font-size:14.5px;font-weight:700;letter-spacing:.16em}
.gal figure figcaption i{display:block;margin-top:5px;font-style:normal;font-size:9.5px;
  letter-spacing:.22em;color:var(--gold-l)}
.gal figure:nth-child(3n+2){height:238px;margin-top:52px}
.gal figure:nth-child(3n+3){height:264px;margin-top:24px}
.gal figure:hover{transform:skewX(-9deg) translateY(-8px);box-shadow:0 22px 38px -16px rgba(11,75,73,.6)}
.gal figure:hover img{transform:skewX(9deg) scale(1.1)}
@keyframes mv{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.gal .track{animation:none}}

/* リッチフッター */
.fnav{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:start}
.fchips{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 22px}
.fchips span{font-size:12px;border:1px solid rgba(255,255,255,.28);border-radius:3px;padding:5px 13px;
  color:#CFE6E5;letter-spacing:.08em}
.ftel{font-size:26px;font-weight:700;letter-spacing:.08em;color:#fff;margin:6px 0 18px;display:block;
  font-family:Georgia,serif}
.fhours table.hours th,.fhours table.hours td{border-color:rgba(255,255,255,.18)}
.fhours table.hours thead th{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.fhours table.hours tbody th{color:#CFE6E5}
.fhours table.hours td{color:#6FD8D4}
.fhours table.hours td.x{color:#4E7574}
.fhours table.hours td.n{color:var(--gold-l)}
.fhours .hours-note{color:#9FC4C3}
.fbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.fbtns a{border-radius:var(--radius);height:52px;display:flex;align-items:center;justify-content:center;
  gap:8px;font-weight:700;font-size:14px;background:var(--t);color:#fff;letter-spacing:.06em}
.fbtns a.o{background:transparent;border:1px solid rgba(255,255,255,.42);color:#fff}
.fbtns svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:1.8}
.fsite{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fmap{margin-top:26px;border-radius:var(--radius);overflow:hidden}
.fmap iframe{display:block;width:100%;height:230px;border:0}

@media(max-width:1000px){
  .newswrap{grid-template-columns:1fr;gap:22px}
  .fnav{grid-template-columns:1fr;gap:34px}
  .gal figure{width:186px;height:172px}
  .gal figure:nth-child(3n+2){height:142px;margin-top:30px}
  .gal figure:nth-child(3n+3){height:158px;margin-top:14px}
  .gal figure figcaption b{font-size:12.5px}
}
@media(max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero .main{min-height:0;max-height:none;order:-1;padding-top:22px}
  .hero .cp{position:static;padding:0 20px 20px}
  .hero .cp h2{font-size:25px;line-height:1.7}
  .hero .photo{position:relative;inset:auto;height:min(62vw,320px);clip-path:polygon(0 13%, 100% 0, 100% 100%, 0 100%)}
  .hero .memo{position:static;border-radius:0;font-size:11.5px;padding:12px 20px;background:#fff}
  .hero .side{max-width:520px;margin:0 auto;padding-top:22px}
  .hero .side .depts{white-space:normal}
  .slant{padding:70px 0 62px;margin:44px 0}
  .slant::before{height:44px;top:-44px}
  .slant::after{height:44px;bottom:-44px}
  .fsite{grid-template-columns:1fr 1fr;gap:18px}
  .ftel{font-size:22px}
}


/* ================= エフェクト ================= */
/* ① オープニング：ロゴがふわりと出て、幕が上に引く */
.opening{position:fixed;inset:0;z-index:200;background:var(--bg);display:grid;place-items:center;
  transition:transform 1s cubic-bezier(.7,0,.3,1),visibility 1s}
.opening .op-mark{width:120px;opacity:0;transform:translateY(14px) scale(.94);
  animation:opIn .9s .12s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes opIn{to{opacity:1;transform:none}}
.opening.done{transform:translateY(-101%);visibility:hidden}
body.noanim .opening{display:none}

/* ② キャッチコピーが1文字ずつ立ち上がる */
.hero .cp h2 .c{display:inline-block;opacity:0;transform:translateY(.42em);
  animation:chUp .82s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:calc(var(--i)*.045s + 1.15s)}
@keyframes chUp{to{opacity:1;transform:none}}
.hero .cp .lbl{opacity:0;animation:chUp .9s 1.9s cubic-bezier(.22,.61,.36,1) forwards}

/* ③ 写真がワイプで現れる */
.hero .photo{--wipe:0}
.hero .photo .slides{clip-path:inset(0 0 calc(100% - var(--wipe)*100%) 0);
  transition:clip-path 1.5s cubic-bezier(.65,0,.25,1)}
body.ready .hero .photo{--wipe:1}
.wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s cubic-bezier(.65,0,.25,1)}
.wipe.on{clip-path:inset(0 0 0 0)}

/* ④ 見出しの金線がスッと伸びる */
.sh h2{position:relative;display:inline-block}
.sh h2::after{content:"";position:absolute;left:50%;bottom:-14px;width:0;height:1.5px;background:var(--gold);
  transition:width .9s .25s cubic-bezier(.22,.61,.36,1),left .9s .25s cubic-bezier(.22,.61,.36,1)}
.sh.on h2::after,.rv.on h2::after{width:46px;left:calc(50% - 23px)}
.sh.left h2::after{left:0}
.sh.left.on h2::after,.sh.left.rv.on h2::after{left:0;width:46px}

/* ⑤ ボタンの矢印が動く */
.pill svg,.cardgrid b svg,.news-more span.c svg,.float svg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.pill:hover svg,.cardgrid a:hover b svg,.float a:hover svg{transform:translateX(5px)}

/* ⑥ 診療時間の●が順に灯る */
.hours-wide.on table.hours td:not(.x):not(.n){animation:dotOn .5s backwards}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(2){animation-delay:.05s}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(3){animation-delay:.12s}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(4){animation-delay:.19s}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(5){animation-delay:.26s}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(6){animation-delay:.33s}
.hours-wide.on tbody tr:nth-child(1) td:nth-child(7){animation-delay:.40s}
.hours-wide.on tbody tr:nth-child(2) td{animation-delay:.47s}
@keyframes dotOn{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* ⑦ 鈴蘭がふわりと舞う */
.petals{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.petals i{position:absolute;top:-12vh;left:var(--x);width:22px;opacity:var(--o);
  transform:scale(var(--s));animation:fall var(--d) linear infinite}
.petals i svg{width:100%;height:auto;animation:sway 6s ease-in-out infinite alternate}
@keyframes fall{from{transform:translateY(-12vh) scale(var(--s))}
                to{transform:translateY(118vh) scale(var(--s))}}
@keyframes sway{from{margin-left:-16px;rotate:-12deg}to{margin-left:16px;rotate:12deg}}
body.sub .petals{opacity:.55}

@media(prefers-reduced-motion:reduce){
  .petals{display:none}
  .opening{display:none}
  .hero .cp h2 .c,.hero .cp .lbl{opacity:1;animation:none;transform:none}
  .hero .photo .slides{clip-path:none}
  .wipe{clip-path:none}
}


/* ================= 追加エフェクト ================= */
/* ⑧ ページ遷移フェード（JSが無くても自動で明ける） */
.veil{position:fixed;inset:0;z-index:190;background:var(--bg);opacity:1;
  animation:veilOut .6s .06s cubic-bezier(.22,.61,.36,1) forwards;pointer-events:none}
@keyframes veilOut{to{opacity:0;visibility:hidden}}
.veil.on{animation:none;opacity:1;visibility:visible;transition:opacity .42s ease}
body.sub .veil{background:var(--bg)}

/* ⑨ パララックス */
[data-px]{will-change:transform}

/* ⑩ 背景の風景（鈴蘭台の山なみと雲） */
.scenery{position:absolute;left:0;right:0;bottom:0;height:190px;pointer-events:none;overflow:hidden;z-index:0}
.scenery svg{position:absolute;bottom:0;width:100%;height:100%}
.scenery .cloud{position:absolute;opacity:.75}
.scenery .c1{top:14px;left:-14%;width:170px;animation:drift 62s linear infinite}
.scenery .c2{top:52px;left:-26%;width:120px;animation:drift 88s linear infinite;animation-delay:-30s}
.scenery .c3{top:6px;left:-40%;width:200px;animation:drift 106s linear infinite;animation-delay:-70s}
@keyframes drift{to{transform:translateX(160vw)}}
.slant{overflow:hidden}
.slant .in,.slant .gal{position:relative;z-index:1}

/* ⑪ カーソル追従の淡い光（PCのみ） */
.glow{position:fixed;top:0;left:0;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle,rgba(10,186,181,.15),rgba(10,186,181,0) 62%);
  transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .6s ease;mix-blend-mode:multiply}
.glow.on{opacity:1}
@media(hover:none),(pointer:coarse){.glow{display:none}}

@media(prefers-reduced-motion:reduce){
  .veil{display:none}
  .glow{display:none}
  .scenery .cloud{animation:none}
  [data-px]{transform:none!important}
}