@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');

:root{
  --sky-0:#F7FAFC;
  --sky-1:#EFF5F9;
  --sky-2:#DCEAF2;
  --blue:#2E93C7;
  --blue-deep:#1E6E96;
  --gray-head:#8B97A0;
  --beige:#F3E7D3;
  --beige-2:#EEDFC4;
  --paper:#FFFFFF;
  --ink:#212B2E;
  --ink-soft:#5C6A6D;
  --ink-faint:#8B9A9C;
  --line:#E1E9ED;
  --ok:#3F9C6E;
  --warn:#D98A3C;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation-duration:.001ms !important; transition-duration:.001ms !important;} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  padding-bottom:64px;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
.mono{font-family:"Space Grotesk","Zen Kaku Gothic New",sans-serif;}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s cubic-bezier(.16,.8,.3,1), transform .6s cubic-bezier(.16,.8,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }

/* ---------------- Top bar ---------------- */
.topbar{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.topbar-inner{max-width:1180px;margin:0 auto;padding:14px 28px; display:flex;align-items:center;justify-content:space-between;gap:16px;}
.brand{font-size:15px; font-weight:700; letter-spacing:.03em; display:flex; flex-direction:column; line-height:1.35; color:var(--blue-deep);}
.brand small{font-size:9.5px; font-weight:500; letter-spacing:.16em; color:var(--ink-soft);}
.topbar-links{display:flex; gap:18px; font-size:12px; list-style:none; margin:0; padding:0;}
.topbar-links a{text-decoration:none; color:var(--ink-soft); white-space:nowrap;}
.topbar-links a:hover{color:var(--blue-deep);}
.topbar-cta{display:flex; align-items:center; gap:12px;}
.topbar-tel{font-family:"Space Grotesk",sans-serif; font-size:15px; font-weight:700; color:var(--blue-deep); white-space:nowrap; font-variant-numeric:tabular-nums;}
.topbar-tel span{font-size:9px; display:block; color:var(--warn); font-weight:700; letter-spacing:.14em; font-family:"Zen Kaku Gothic New",sans-serif;}
.topbar-btn{background:var(--blue); color:#fff; font-size:12.5px; font-weight:700; text-decoration:none; padding:10px 18px; border-radius:2px; white-space:nowrap;}
@media (max-width:920px){ .topbar-links{display:none;} }
@media (max-width:620px){ .topbar-btn{display:none;} }

/* ---------------- Hero ---------------- */
.hero{position:relative; overflow:hidden;}
.hero-photo{width:100%; height:min(64vh,560px); object-fit:cover; object-position:center 30%; display:block;}
.hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,40,55,.55) 0%, rgba(14,40,55,.25) 45%, rgba(14,40,55,.55) 100%);}
.hero-inner{position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px;}
.hero-eyebrow{font-family:"Space Grotesk",sans-serif; font-size:12px; letter-spacing:.3em; color:#BFE0F0; font-weight:700; margin-bottom:18px; text-transform:uppercase;}
.hero h1{font-size:clamp(26px,4.6vw,42px); font-weight:900; letter-spacing:.02em; line-height:1.5; margin:0; color:#fff; text-wrap:balance;}
.hero .sub{margin-top:20px; max-width:52ch; font-size:14.5px; color:#E3ECF0;}
.hero-actions{margin-top:32px; display:flex; flex-wrap:wrap; gap:14px; justify-content:center;}
.hero .phone-reservation-note{max-width:620px; margin:14px 0 0; padding:9px 16px; border:1px solid rgba(255,255,255,.38); border-radius:3px; background:rgba(8,38,54,.28); color:#fff; font-size:13px; line-height:1.7; font-weight:700;}
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:2px; font-size:14px; font-weight:700; letter-spacing:.03em; text-decoration:none; border:1px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background-color .15s ease, color .15s ease;}
.btn:focus-visible{outline:2px solid var(--warn); outline-offset:3px;}
.btn .arrow{transition:transform .18s ease;}
.btn:hover .arrow{transform:translateX(4px);}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(30,110,150,.55); background:var(--blue-deep);}
.btn-outline{border-color:#fff; color:#fff; background:rgba(255,255,255,.08);}
.btn-outline:hover{background:rgba(255,255,255,.18); transform:translateY(-2px);}
.btn-outline.dark{border-color:var(--blue-deep); color:var(--blue-deep); background:transparent;}
.btn-outline.dark:hover{background:var(--sky-1);}

/* ---------------- Section shells ---------------- */
section{padding:80px 0;}
.rule-head{max-width:820px; margin:0 auto 18px; padding:16px 0; border-top:1px solid var(--blue); border-bottom:1px solid var(--blue); text-align:center;}
.rule-head h2{font-size:19px; font-weight:700; letter-spacing:.06em; color:var(--blue-deep); margin:0;}
.rule-sub{text-align:center; max-width:64ch; margin:0 auto 48px; color:var(--ink-soft); font-size:13.5px;}
.sec-tint{background:var(--sky-1);}
.note{font-size:11.5px; color:var(--ink-faint); margin-top:18px; text-align:center;}
.note b{color:var(--warn); font-weight:700;}

/* ---------------- About ---------------- */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; margin-bottom:20px;}
.about-photo{border-radius:8px; overflow:hidden; border:1px solid var(--line);}
.about-photo img{aspect-ratio:4/3; object-fit:cover;}
.about-copy h3{font-size:19px; font-weight:900; margin:0 0 16px; line-height:1.6;}
.about-copy p{font-size:14px; color:var(--ink-soft); margin:0 0 14px;}
@media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }

/* ---------------- Worry band ---------------- */
.worry-band{background:var(--sky-1); padding:76px 0;}
.worry-inner{position:relative;}
.worry-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:760px;}
.worry-chip{aspect-ratio:1; border-radius:50%; background:#6E88A0; color:#fff; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; font-weight:700; padding:12px; line-height:1.5;}
.worry-chip:nth-child(3n+2){background:#7C93A8;}
.worry-chip:nth-child(3n+3){background:#8AA0B4;}
.worry-photo{display:none;}
.worry-lead{text-align:center; margin-top:40px; font-size:19px; font-weight:900; color:var(--ink);}
.worry-lead .hl{color:var(--blue-deep);}
@media (min-width:860px){
  .worry-grid{grid-template-columns:repeat(4,132px); gap:22px;}
  .worry-photo{display:block; position:absolute; right:0; bottom:-20px; width:230px; border-radius:8px; overflow:hidden; box-shadow:0 24px 40px -22px rgba(20,60,80,.35);}
  .worry-photo img{aspect-ratio:3/4; object-fit:cover;}
}
@media (max-width:520px){ .worry-grid{grid-template-columns:1fr 1fr;} }

/* ---------------- Reason cards ---------------- */
.reason-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px 40px;}
.reason-card .ph{border-radius:8px; overflow:hidden; margin-bottom:18px; border:1px solid var(--line);}
.reason-card .ph img{aspect-ratio:16/10; object-fit:cover;}
.reason-card .tag{font-family:"Space Grotesk",sans-serif; font-size:12px; color:var(--blue); font-weight:700; letter-spacing:.14em;}
.reason-card .num{font-family:"Space Grotesk",sans-serif; font-size:36px; font-weight:700; color:var(--blue-deep); display:block; margin:2px 0 8px;}
.reason-card h4{font-size:16.5px; font-weight:900; margin:0 0 10px;}
.reason-card p{font-size:13px; color:var(--ink-soft); margin:0;}
@media (max-width:760px){ .reason-grid{grid-template-columns:1fr;} }

/* ---------------- Merit / Demerit ---------------- */
.md-panel{background:var(--beige); padding:64px 0; border-radius:8px;}
.md-block + .md-block{margin-top:44px; padding-top:44px; border-top:1px solid var(--beige-2);}
.md-label{font-family:"Space Grotesk",sans-serif; font-size:28px; font-weight:700; letter-spacing:.04em; margin-bottom:26px; color:var(--warn);}
.md-block.demerit .md-label{color:var(--blue-deep);}
.md-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 44px;}
.md-item h4{font-size:14.5px; font-weight:900; margin:0 0 10px; border-bottom:1px solid rgba(33,43,46,.14); padding-bottom:10px;}
.md-item p{font-size:12.5px; color:var(--ink-soft); margin:0;}
@media (max-width:700px){ .md-grid{grid-template-columns:1fr;} }

/* ---------------- Comparison cards ---------------- */
.cmp-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.cmp-card{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--paper);}
.cmp-card .head{padding:16px; text-align:center; font-weight:700; color:#fff; font-size:15.5px;}
.cmp-card.primary .head{background:var(--blue);}
.cmp-card .head.gray{background:var(--gray-head);}
.cmp-card .body{padding:22px 22px 20px;}
.cmp-card ul{list-style:none; margin:0; padding:0;}
.cmp-card ul.ok li{color:var(--ink); font-size:12.5px; padding:7px 0 7px 24px; position:relative;}
.cmp-card ul.ok li::before{content:"○"; position:absolute; left:0; color:var(--ok); font-weight:700;}
.cmp-card ul.ng{margin-top:10px; padding-top:12px; border-top:1px dashed var(--line);}
.cmp-card ul.ng li{color:var(--ink-soft); font-size:12.5px; padding:7px 0 7px 24px; position:relative;}
.cmp-card ul.ng li::before{content:"×"; position:absolute; left:0; color:var(--warn); font-weight:700;}
@media (max-width:820px){ .cmp-cards{grid-template-columns:1fr;} }

/* ---------------- Price rows ---------------- */
.price-featured{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 0 28px;padding:34px clamp(24px,4vw,44px);color:#fff;background:linear-gradient(120deg,var(--blue-deep),#2a9bc8);border-radius:10px;box-shadow:0 20px 46px -32px rgba(18,77,106,.8)}
.price-kicker{font:700 10px/1.4 "Space Grotesk",sans-serif;letter-spacing:.2em;color:#cdebf6}.price-featured h3{margin:7px 0 5px;font-size:clamp(20px,2.5vw,28px);letter-spacing:.04em}.price-featured p{margin:0;color:#e6f4f8;font-size:13px}.price-featured-amount{flex:0 0 auto;text-align:right;font-weight:700}.price-featured-amount>span{font:700 clamp(31px,4vw,47px)/1 "Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.price-featured-amount small{display:block;margin-top:8px;font-size:10px;letter-spacing:.09em;color:#dceff6}
.price-groups{display:grid;grid-template-columns:1fr 1fr;gap:22px}.price-group{padding:0;background:var(--paper);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 16px 38px -34px rgba(20,72,98,.65)}.price-group-head{display:flex;align-items:center;gap:17px;padding:21px 24px;background:linear-gradient(120deg,#f2f7fa,#f9fbfc);border-bottom:1px solid var(--line)}.price-group-head>span{font:700 28px/1 "Space Grotesk",sans-serif;color:#a7cfdf}.price-group-head p{margin:0 0 3px;font:700 9px/1.4 "Space Grotesk",sans-serif;letter-spacing:.17em;color:var(--blue-deep)}.price-group-head h3{margin:0;font-size:16px;letter-spacing:.04em}.price-list{margin:0;padding:0 24px}.price-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.price-list>div:last-child{border-bottom:0}.price-list dt{font-size:13.5px;font-weight:700;line-height:1.55}.price-list dt small{display:block;margin-top:3px;color:var(--ink-faint);font-size:10.5px;font-weight:500}.price-list dd{margin:0;text-align:right;white-space:nowrap;font-size:12px}.price-list dd strong{font:700 20px/1.2 "Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;color:var(--blue-deep)}.price-list dd small{display:block;margin-top:3px;color:var(--ink-faint);font-size:9px}.price-group-note{margin:0;padding:15px 24px 18px;background:#fbf8f1;border-top:1px solid #ede5d5;color:var(--ink-soft);font-size:11px;line-height:1.8}.price-notice{display:grid;grid-template-columns:180px 1fr;gap:24px;margin-top:28px;padding:22px 26px;border-left:3px solid var(--warn);background:#fbf8f1}.price-notice strong{font-size:13px;color:var(--ink)}.price-notice p{margin:0;color:var(--ink-soft);font-size:11.5px}
@media (max-width:760px){.price-featured{align-items:flex-start;flex-direction:column}.price-featured-amount{text-align:left}.price-groups{grid-template-columns:1fr}.price-notice{grid-template-columns:1fr;gap:6px}.price-list{padding:0 18px}.price-group-head{padding:18px}.price-list>div{gap:12px}.price-list dd strong{font-size:18px}}

/* ---------------- Timeline ---------------- */
.timeline{position:relative; max-width:820px; margin:0 auto;}
.timeline::before{content:""; position:absolute; left:27px; top:8px; bottom:8px; width:1px; background:var(--line);}
.tl-step{position:relative; padding:0 0 40px 74px;}
.tl-step:last-child{padding-bottom:0;}
.tl-num{position:absolute; left:0; top:0; width:56px; height:56px; border-radius:50%; background:var(--paper); border:1px solid var(--blue); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:18px;}
.tl-step h4{margin:6px 0 8px; font-size:16px; font-weight:700;}
.tl-step p{margin:0; font-size:13px; color:var(--ink-soft);}
.tl-body{display:grid; grid-template-columns:1fr 170px; gap:22px; align-items:start;}
.tl-body img{border-radius:6px; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--line);}
@media (max-width:620px){ .tl-body{grid-template-columns:1fr;} .tl-body img{order:-1;} }

/* ---------------- FAQ ---------------- */
.faq-list{max-width:780px; margin:0 auto; display:flex; flex-direction:column;}
.faq-item{background:var(--paper); border-bottom:1px solid var(--line);}
.faq-item:nth-child(even){background:var(--sky-1);}
.faq-item summary{cursor:pointer; list-style:none; padding:22px 54px 22px 60px; position:relative; font-size:14.5px; font-weight:700; color:var(--ink);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"Q"; position:absolute; left:20px; top:50%; transform:translateY(-50%); font-family:"Space Grotesk",sans-serif; color:var(--warn); font-weight:700; font-size:18px;}
.faq-item summary::after{content:"+"; position:absolute; right:22px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--blue-deep); transition:transform .2s ease; font-weight:400;}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq-item .a{padding:0 24px 24px 60px; font-size:13.5px; color:var(--ink-soft); margin:0; position:relative;}
.faq-item .a::before{content:"A"; position:absolute; left:0; top:0; font-family:"Space Grotesk",sans-serif; color:var(--blue); font-weight:700; font-size:16px;}

/* ---------------- Clinic info panel ---------------- */
.info-panel{position:relative; border-radius:8px; overflow:hidden; min-height:420px; display:flex; align-items:stretch;}
.info-panel .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.info-panel .scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 38%, rgba(255,255,255,.55) 62%, rgba(255,255,255,.2) 100%);}
.info-content{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; width:100%;}
.info-left{padding:52px clamp(24px,4vw,56px);}
.info-left h2{font-size:22px; font-weight:900; margin:0; color:var(--ink);}
.info-left .addr{margin-top:20px; font-size:13.5px; color:var(--ink-soft); line-height:2;}
.info-left .tel-big{margin-top:26px; font-family:"Space Grotesk",sans-serif; font-size:28px; font-weight:700; color:var(--blue-deep); font-variant-numeric:tabular-nums;}
.info-left .tel-lbl{font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft); margin-top:4px;}
.info-right{padding:52px clamp(24px,4vw,56px) 52px 0;}
.hours-table{width:100%; border-collapse:collapse; font-size:13px;}
.hours-table th,.hours-table td{text-align:left; padding:11px 4px; border-bottom:1px solid var(--line); font-weight:400; color:var(--ink);}
.hours-table th{color:var(--ink-soft); font-weight:700; width:38%;}
.closed{margin-top:14px; font-size:12px; color:var(--warn); font-weight:700;}
.staff-links{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap;}
.staff-links a{font-size:12px; padding:8px 14px; border:1px solid var(--line); border-radius:20px; text-decoration:none; color:var(--ink); background:rgba(255,255,255,.7);}
.staff-links a:hover{border-color:var(--blue); color:var(--blue-deep);}
.info-chips{display:flex; gap:20px; margin-top:22px;}
.info-chip{display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-soft); font-weight:700;}
.info-chip .ic{width:30px; height:30px; border-radius:50%; background:var(--sky-2); display:flex; align-items:center; justify-content:center; font-size:14px;}
@media (max-width:860px){ .info-content{grid-template-columns:1fr;} .info-right{padding-left:clamp(24px,4vw,56px);} }

/* ---------------- Doctor card ---------------- */
.doc-band{display:grid; grid-template-columns:.55fr 1fr; gap:48px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:clamp(24px,4vw,48px);}
.doc-band img{border-radius:6px; aspect-ratio:4/5; object-fit:cover; object-position:center 20%;}
.doc-band .role{font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.18em; color:var(--warn); text-transform:uppercase;}
.doc-band h3{font-size:22px; font-weight:900; margin:12px 0 4px;}
.doc-band .sub-role{font-size:12.5px; color:var(--ink-soft); margin-bottom:18px;}
.doc-band p{font-size:14px; color:var(--ink-soft); margin:0 0 12px;}
@media (max-width:760px){ .doc-band{grid-template-columns:1fr;} .doc-band img{max-width:220px; margin:0 auto;} }

/* ---------------- CTA band (closing) ---------------- */
.cta-band{position:relative; border-radius:8px; overflow:hidden; min-height:280px; display:flex; align-items:center;}
.cta-band img.bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cta-band .scrim{position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,51,72,.85), rgba(14,51,72,.35));}
.cta-band .content{position:relative; z-index:1; color:#fff; padding:56px clamp(24px,5vw,64px); max-width:520px;}
.cta-band h3{font-size:22px; font-weight:900; margin:0 0 14px;}
.cta-band p{font-size:14px; color:#DCE9EF; margin:0 0 26px;}
.cta-band .phone-reservation-note{margin:-10px 0 24px; padding-left:14px; border-left:3px solid #9BD5E8; color:#fff; font-weight:700; line-height:1.8;}

/* ---------------- Guide grid (existing site links) ---------------- */
.flow-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.flow-card{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:24px 22px; text-decoration:none; color:var(--ink); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;}
.flow-card::before{content:"";position:absolute; left:0; top:0; bottom:0; width:0; background:var(--blue); transition:width .2s ease;}
.flow-card:hover{border-color:var(--blue-deep); transform:translateY(-4px); box-shadow:0 18px 30px -20px rgba(30,110,150,.4);}
.flow-card:hover::before{width:3px;}
.flow-card .tag{font-family:"Space Grotesk",sans-serif; font-size:10.5px; letter-spacing:.14em; color:var(--blue-deep); font-weight:700;}
.flow-card h4{font-size:15px; font-weight:700; margin:10px 0 8px;}
.flow-card p{font-size:12px; color:var(--ink-soft); margin:0;}
@media (max-width:860px){ .flow-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .flow-grid{grid-template-columns:1fr;} }

/* ---------------- Footer ---------------- */
footer{background:var(--sky-2); color:var(--ink); padding:56px 0 90px; border-top:1px solid var(--line);}
.foot-grid{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:12px; opacity:.85; margin-bottom:32px;}
.foot-grid a{text-decoration:none;}
.foot-grid a:hover{color:var(--blue-deep); text-decoration:underline;}
.foot-area{font-size:11.5px; opacity:.65; line-height:1.9; max-width:74ch;}
.foot-bottom{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; font-size:11px; opacity:.6;}
.foot-bottom a{text-decoration:underline;}

/* ---------------- Floating bottom bar ---------------- */
.floatbar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); box-shadow:0 -8px 24px -18px rgba(30,80,110,.3);}
.floatbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 10px; font-size:13.5px; font-weight:700; text-decoration:none;}
.floatbar .fb-tel{background:#fff; color:var(--blue-deep);}
.floatbar .fb-form{background:var(--blue); color:#fff;}