@charset "UTF-8";

:root {
  --white: #ffffff;
  --paper: #f6f8f7;
  --mist: #e8f0ef;
  --aqua: #d9e8e7;
  --teal: #24757a;
  --teal-deep: #15565d;
  --navy: #153740;
  --ink: #20343a;
  --muted: #607277;
  --line: rgba(21, 55, 64, .16);
  --apricot: #a95337;
  --sans: "Avenir Next", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: #d8dfde;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-feature-settings: "palt" 1;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible, summary:focus-visible, .tablewrap:focus-visible { outline: 3px solid var(--apricot); outline-offset: 3px; }
figure, h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, li, td, th, dd, dt { word-break: auto-phrase; }
p, li, dd, td { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.nowrap { white-space: nowrap; }

.shell {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: 82px;
  overflow: hidden;
  background: var(--white);
}
.portfolio-note {
  padding: 8px 18px 9px;
  background: var(--navy);
  color: rgba(255,255,255,.92);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
}

/* compact masthead */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 9px 20px;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line);
}
.topbar__brand { display: grid; line-height: 1.12; }
.topbar__name { color: var(--navy); font-size: 20px; font-weight: 800; letter-spacing: .26em; }
.topbar__sub { margin-top: 3px; color: var(--muted); font-size: 8.5px; letter-spacing: .04em; }
.topbar__link {
  padding: 7px 11px 6px;
  border-bottom: 2px solid var(--teal);
  color: var(--teal-deep);
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* hero: offer and CTA stay within the first mobile viewport */
.hero { position: relative; padding: 27px 22px 32px; background: var(--white); }
.hero__text { position: relative; z-index: 2; }
.hero__tag {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--teal);
  color: var(--teal-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.hero h1 {
  max-width: 9.5em;
  margin-top: 12px;
  color: var(--navy);
  font-size: clamp(33px, 9vw, 41px);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: 1.3;
  text-wrap: pretty;
}
.hero__lead { max-width: 31em; margin-top: 12px; color: #41575d; font-size: 13px; line-height: 1.75; }
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--aqua);
  background-image: var(--img);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.ph--hero { width: calc(100% + 44px); margin: 21px -22px 0; aspect-ratio: 4 / 3; background-position: center 58%; }
.ph--sq { aspect-ratio: 1 / 1; }
.ph--tall { aspect-ratio: 4 / 5; }
.ph--wide { aspect-ratio: 4 / 3; }
.ph--rounded { border-radius: 0; }

.hero__panel {
  position: relative;
  z-index: 2;
  margin: -54px 0 0 14px;
  padding: 15px 14px 14px;
  background: var(--white);
  border-top: 4px solid var(--teal);
  box-shadow: 0 12px 28px rgba(21,55,64,.14);
}
.hero__facts, .reserve__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 12px;
}
.hero__facts li, .reserve__facts li {
  display: grid;
  padding: 7px 5px;
  border-left: 1px solid var(--line);
  text-align: center;
  line-height: 1.25;
}
.hero__facts li:first-child, .reserve__facts li:first-child { border-left: 0; }
.hero__facts strong, .reserve__facts strong { color: var(--teal-deep); font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.hero__facts span, .reserve__facts span { margin-top: 4px; color: var(--muted); font-size: 9px; }

.cta {
  display: flex;
  min-height: 54px;
  padding: 0 18px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--teal);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.cta span { font-size: 21px; line-height: 1; }
.cta--light { background: #fff; color: var(--teal-deep); }
.cta--demo { background: var(--navy); cursor: not-allowed; }
.micro { margin-top: 7px; color: var(--muted); font-size: 9.5px; line-height: 1.5; text-align: center; }

/* editorial section rhythm */
.sec { padding: 66px 24px 62px; }
.sec__head { margin-bottom: 27px; }
.sec__head--center { text-align: center; }
.sec__no {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sec h2 {
  max-width: 13.5em;
  color: var(--navy);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.38;
}
.sec h3 { color: var(--navy); font-size: 16px; font-weight: 800; letter-spacing: -.02em; line-height: 1.5; }
.prose p + p { margin-top: 13px; }
.prose { margin-top: 22px; font-size: 14px; }
.prose--small { font-size: 13px; color: rgba(255,255,255,.8); }
.note { margin-top: 15px; color: var(--muted); font-size: 10.5px; line-height: 1.7; }

/* 01: one editorial lead image, two compact follow-ups */
.sec--concerns { background: var(--mist); }
.sec--concerns .sec__head { max-width: 330px; }
.concerns { display: grid; gap: 0; }
.concerns li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 15px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.concerns li:last-child { border-bottom: 1px solid var(--line); }
.concerns li:first-child { grid-template-columns: 1fr; gap: 14px; padding-top: 0; border-top: 0; }
.concerns li:first-child .ph { width: calc(100% + 48px); margin-left: -24px; aspect-ratio: 16 / 9; }
.concerns li > div { min-width: 0; }
.concerns span { color: var(--teal-deep); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.concerns h3 { margin-top: 1px; font-size: 15px; }
.concerns p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.65; }

/* 02: full-bleed clinical photograph and factual register */
.sec--about { padding-top: 72px; background: var(--white); }
.sec--about h2 { font-size: 30px; }
.sec--about > .ph { width: calc(100% + 24px); margin-left: -24px; aspect-ratio: 5 / 4; background-position: center 62%; }
.facts { display: grid; gap: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.facts > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.facts dt { color: var(--teal-deep); font-weight: 800; }
.facts dd { color: #40555b; line-height: 1.65; }
.facts--line > div { grid-template-columns: 96px 1fr; }

/* 03: comparison plane, not another card stack */
.sec--treatment { background: #f8fbfa; }
.sec--treatment > .ph { width: 88%; margin-left: auto; aspect-ratio: 5 / 4; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: -18px; position: relative; }
.card { min-height: 184px; padding: 18px 14px; background: var(--navy); color: #fff; }
.card + .card { margin-top: 30px; background: var(--aqua); color: var(--ink); }
.card h3 { color: inherit; font-size: 14px; }
.card p { margin-top: 8px; color: inherit; font-size: 12px; line-height: 1.68; opacity: .88; }

/* 04: price is the visual offer, with no decorative cards */
.sec--price { padding-right: 18px; padding-left: 18px; background: var(--aqua); }
.sec--price .sec__head { padding: 0 6px; }
.sec--price h2 { font-size: 30px; }
.tablewrap { overflow-x: auto; border-top: 4px solid var(--navy); background: var(--white); }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
thead th { background: var(--navy); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; }
th, td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); line-height: 1.45; }
tbody th { font-weight: 800; color: var(--navy); }
tbody td:last-child { color: var(--teal-deep); font-weight: 800; white-space: nowrap; text-align: right; }
tbody td:nth-child(2) { white-space: nowrap; }
tbody tr:first-child { background: #edf6f4; }
tbody tr:first-child th, tbody tr:first-child td { border-bottom: 2px solid var(--teal); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
.sec--price .facts { margin-right: 6px; margin-left: 6px; }
.sec--price .note { margin-right: 6px; margin-left: 6px; }

/* 05: safety information is sober, not a stack of decorated tiles */
.sec--risk { padding-top: 70px; background: var(--navy); color: #e9f1f3; }
.sec--risk h2 { max-width: 11em; color: #fff; font-size: 30px; }
.sec--risk h3 { color: #fff; }
.sec--risk .note { color: #9fc3c5; }
.risks { display: grid; border-top: 1px solid rgba(255,255,255,.24); }
.risks li { display: grid; gap: 2px; padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.18); }
.risks strong { color: #fff; font-size: 14px; }
.risks span { color: rgba(255,255,255,.76); font-size: 12.5px; line-height: 1.65; }

.sec--cta { padding: 31px 22px 33px; background: var(--teal); color: #fff; text-align: left; }
.sec__kicker { max-width: 26em; margin-bottom: 14px; font-size: 13px; font-weight: 800; line-height: 1.65; }

/* 06: alternating photo-led and text-only steps */
.sec--flow { padding-right: 0; padding-left: 0; background: var(--white); }
.sec--flow .sec__head { padding: 0 24px; }
.flow { display: grid; border-top: 1px solid var(--line); }
.flow li {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 15px;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.flow li:nth-child(1), .flow li:nth-child(4) { grid-template-columns: 1fr; gap: 13px; padding: 24px 0; }
.flow li:nth-child(1) > div, .flow li:nth-child(4) > div { padding: 0 24px; }
.flow li:nth-child(1) .ph, .flow li:nth-child(4) .ph { aspect-ratio: 16 / 8; }
.flow li:nth-child(1) .ph { width: 88%; }
.flow li:nth-child(4) .ph { width: 88%; margin-left: auto; }
.flow li > div { min-width: 0; }
.flow__text-only { grid-template-columns: 1fr !important; margin-left: 24px; padding: 17px 24px 17px 18px !important; border-left: 2px solid var(--teal); }
.flow span { color: var(--teal-deep); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.flow h3 { margin-top: 1px; font-size: 15px; }
.flow p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.68; }

/* 07: human proof with intentionally asymmetric portraits */
.sec--staff { background: var(--paper); }
.staff { display: grid; gap: 42px; }
.staff__card { display: grid; gap: 14px; }
.staff__card .ph { width: calc(100% + 24px); margin-left: -24px; aspect-ratio: 4 / 3; }
.staff__card:nth-child(2) .ph { width: 82%; margin-left: auto; aspect-ratio: 3 / 4; }
.staff__card span { color: var(--teal-deep); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; }
.staff__card h3 { margin-top: 2px; }
.staff__card p { margin-top: 7px; color: #40555b; font-size: 13px; line-height: 1.72; }
.policy { display: grid; gap: 9px; margin-top: 30px; padding: 19px 0; border-top: 2px solid var(--teal); border-bottom: 1px solid var(--line); }
.policy li { position: relative; padding-left: 27px; font-size: 13px; font-weight: 800; color: var(--navy); }
.policy li::before { position: absolute; left: 4px; top: 0; color: var(--teal); content: "✓"; }

/* 08: wide location image and compact directory-like facts */
.sec--clinic { background: var(--white); }
.sec--clinic > .ph { width: calc(100% + 48px); margin-left: -24px; aspect-ratio: 16 / 9; }
.sec--clinic .facts { margin-top: 0; border-top: 0; }

/* 09: questions use strong typography instead of accordion cards */
.sec--faq { background: var(--mist); }
.faq { display: grid; border-top: 2px solid var(--navy); }
.faq details { background: transparent; border-bottom: 1px solid rgba(21,55,64,.24); }
.faq summary { position: relative; padding: 16px 36px 16px 2px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.55; }
.faq summary { text-wrap: pretty; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { position: absolute; right: 4px; top: 13px; color: var(--teal-deep); font-size: 20px; content: "+"; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 2px 17px; color: #40555b; font-size: 13px; line-height: 1.72; }

.sec--reserve { padding-top: 55px; padding-bottom: 42px; background: var(--aqua); }
.sec--reserve h2 { max-width: 12em; margin: 0 auto; font-size: 29px; }
.reserve__facts { margin-top: 25px; padding: 12px 0; border-top: 1px solid rgba(21,55,64,.2); border-bottom: 1px solid rgba(21,55,64,.2); }

.foot { padding: 24px 20px 22px; background: var(--navy); color: rgba(255,255,255,.76); font-size: 10.5px; line-height: 1.75; }
.foot p + p { margin-top: 5px; }
.foot strong { color: #fff; }

/* persistent conversion bar */
.sticky {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.16);
}
.sticky div { display: grid; line-height: 1.2; }
.sticky div span { color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .04em; }
.sticky div strong { color: #fff; font-size: 19px; letter-spacing: -.02em; }
.sticky div small { font-size: 10px; font-weight: 400; color: rgba(255,255,255,.78); }
.sticky > a { display: flex; min-width: 142px; height: 50px; padding: 0 15px; align-items: center; justify-content: space-between; background: var(--apricot); color: #fff; font-size: 13px; font-weight: 800; text-decoration: none; }
.sticky > a span { font-size: 20px; }

@media (min-width: 481px) { .sticky { right: calc(50vw - 240px); left: calc(50vw - 240px); } }
@media (max-width: 374px) {
  .portfolio-note { font-size: 10px; }
  .hero { padding-right: 18px; padding-left: 18px; }
  .hero h1 { font-size: 31px; }
  .faq summary { padding-right: 28px; font-size: 13px; }
  .hero__panel { margin-left: 8px; }
  .hero__facts strong, .reserve__facts strong { font-size: 13px; }
  .sec { padding-right: 20px; padding-left: 20px; }
  .sec--flow { padding-right: 0; padding-left: 0; }
  .sec--flow .sec__head, .flow li:nth-child(1) > div, .flow li:nth-child(4) > div { padding-right: 20px; padding-left: 20px; }
  .concerns li:first-child .ph, .sec--clinic > .ph { width: calc(100% + 40px); margin-left: -20px; }
  .sec--about > .ph, .staff__card .ph { margin-left: -20px; }
  .flow li { grid-template-columns: 96px 1fr; padding-right: 20px; padding-left: 20px; }
  .flow__text-only { margin-left: 20px; }
  .sticky > a { min-width: 132px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .shell { max-width: none; padding-bottom: 0; } .sticky { display: none; } }

.portfolio-note { word-break: auto-phrase; text-wrap: balance; }