@charset "UTF-8";
/* Prom Medical Artmake
   淡色・余白・上品。医療情報は可読性が最優先なので、本文は明朝にしない。
   コントラストは WCAG AA（本文4.5:1）を満たす値だけを使う。 */

:root {
  /* 配色は hbl.salon の実測値から。寒色のブルーグレー＋ベージュの差し色。
     ただしベージュをそのまま文字にすると 1.86:1 で読めないため、
     面＝HBLの色／文字＝濃度を上げた同系色、と使い分ける。
     本文はすべて WCAG AA（4.5:1）以上を実測で確認済み。 */

  /* 面 */
  --paper:     #FFFFFF;   /* HBL 実測 */
  --bg:        #F3F4F7;   /* HBL 実測。ごく淡い寒色 */
  --bg-2:      #E5EAF0;   /* HBL 実測 */
  --bg-3:      #D2D8E0;   /* HBL 実測。罫・面の切り替え */

  /* 文字（全背景で 4.5:1 以上） */
  --ink:       #1F2937;   /* HBL 実測。対 --bg-3 でも 10.23:1 */
  --ink-2:     #4B5563;   /* 補助。最小 5.27:1 */
  --ink-3:     #555B66;   /* 注記。最小 4.76:1 */

  /* 差し色。HBL のベージュ */
  --accent:    #CEBBA3;   /* HBL 実測。面・ボタン用 */
  --accent-tx: #8A6E4E;   /* 文字用に濃くしたもの。白地で 4.75:1 */
  --on-accent: #1F2937;   /* ベージュ上の文字。7.87:1（白文字は 1.86:1 で不可） */
  --soft:      #E9E1D6;

  --danger-bg: #F7F5F2;
  --danger-br: #DDD3C6;

  --line:      #DDE2E9;
  --radius:    2px;
  --wrap:      1120px;
  --wrap-n:    760px;

  /* 書体も HBL に合わせる。見出し＝明朝、本文＝ゴシック。
     HBL は本文 32px/行間48px と大きめだが、医療情報は分量が多いので
     16px/行間2.0 とし、行間で読みやすさを確保する。 */
  --f-serif:   "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --f-sans:    "Zen Kaku Gothic New", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;

  --step:      clamp(64px, 9vw, 128px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 2;             /* 医療情報。行間は広めに取る */
  letter-spacing: .04em;
  font-feature-settings: "palt";
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; text-decoration: none;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--accent-tx); outline-offset: 3px; }

/* ---------- レイアウト ---------- */

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 40px, var(--wrap-n)); }

.sec { padding-block: var(--step); }
.sec:nth-of-type(even) { background: var(--bg-2); }

.eyebrow {
  margin: 0 0 14px;
  font-size: 11px; letter-spacing: .22em; font-weight: 500;
  color: var(--accent-tx);
}
.sec__title {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.5;
  letter-spacing: .05em;
  margin: 0 0 20px;
}
.sec__lead {
  margin: 0 0 44px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 68ch;
}
.sec__more { margin-top: 36px; }
.sec__more a {
  color: var(--accent-tx); text-decoration: none;
  border-bottom: 1px solid var(--soft); padding-bottom: 3px;
  font-size: 14px; letter-spacing: .08em;
}
.sec__more a:hover { border-color: var(--accent-tx); }

.note {
  margin-top: 24px;
  font-size: 13px; line-height: 1.9; color: var(--ink-3);
}
.disclaimer {
  margin-top: 36px; padding: 20px 22px;
  background: var(--paper); border: 1px solid var(--line);
  font-size: 13px; line-height: 1.9; color: var(--ink-2);
}

/* ---------- ボタン ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 34px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px; letter-spacing: .1em; text-decoration: none;
  transition: background .25s, color .25s, border-color .25s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-tx); color: #fff; }
.btn--ghost { border-color: var(--line); color: var(--ink); background: var(--paper); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--sm { padding: 11px 18px; font-size: 12.5px; white-space: nowrap; }
.btn--lg { padding: 19px 48px; }

/* ---------- ヘッダー ---------- */

.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(243,244,247,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd__inner { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.hd__brand { text-decoration: none; margin-right: auto; }
.hd__name {
  display: block; font-family: var(--f-serif); font-size: 16px;
  letter-spacing: .1em; white-space: nowrap;
}
.hd__sub { display: block; font-size: 10px; letter-spacing: .14em; color: var(--ink-3); margin-top: 2px; }

.hd__toggle {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
}
.hd__bars, .hd__bars::before, .hd__bars::after {
  display: block; width: 18px; height: 1px; background: var(--ink);
  margin-inline: auto; transition: transform .25s, opacity .2s;
}
.hd__bars { position: relative; }
.hd__bars::before, .hd__bars::after { content: ""; position: absolute; left: 0; }
.hd__bars::before { top: -6px; }
.hd__bars::after  { top: 6px; }
[aria-expanded="true"] .hd__bars { background: transparent; }
[aria-expanded="true"] .hd__bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .hd__bars::after  { transform: translateY(-6px) rotate(-45deg); }

.gnav { display: flex; align-items: center; gap: 22px; }
.gnav__list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.gnav__list a {
  text-decoration: none; font-size: 13px; letter-spacing: .02em;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.gnav__list a:hover { border-color: var(--accent); }

@media (max-width: 1120px) {
  .hd__toggle { display: block; }
  .gnav {
    position: fixed; inset: 76px 0 auto 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 12px 20px 28px;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .gnav.is-open { display: flex; }
  .gnav__list { flex-direction: column; gap: 0; }
  .gnav__list a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); }
  .gnav__cta { margin-top: 20px; }
}

/* ---------- ヒーロー ---------- */
/* 注意: .rv（出現アニメーション）を掛けない。LCP が遅れる。 */

.hero { padding-block: clamp(72px, 13vw, 156px) var(--step); }
.hero__eyebrow {
  margin: 0 0 26px; font-size: 11px; letter-spacing: .26em; color: var(--accent-tx);
}
.hero__title {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(38px, 8.4vw, 82px);
  line-height: 1.28; letter-spacing: .04em;
  margin: 0 0 34px;
}
.hero__lead {
  margin: 0 0 18px; max-width: 60ch;
  font-size: clamp(15px, 1.5vw, 17px); color: var(--ink-2);
}
.hero__note { margin: 0 0 44px; font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* 下層ヒーロー */
.phero { padding-block: clamp(56px, 9vw, 108px) clamp(36px, 5vw, 60px); background: var(--bg-2); }
.phero__title {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(28px, 5.4vw, 52px); line-height: 1.4; letter-spacing: .05em;
  margin: 0 0 20px;
}
.phero__lead { margin: 0; color: var(--ink-2); max-width: 64ch; font-size: 15px; }

/* ---------- Before / After ---------- */

.ba__list { display: grid; gap: 56px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ba { margin: 0; }
.ba__stage {
  position: relative; overflow: hidden; background: var(--bg-3);
  border: 1px solid var(--line); aspect-ratio: 4 / 3;
  touch-action: pan-y; user-select: none; cursor: ew-resize;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba__clip .ba__img { max-width: none; } /* 幅は JS がステージ実寸を与える */

/* 写真が未設定の間のプレースホルダ */
.ba__ph {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg-3) 0 12px, var(--bg-2) 12px 24px);
  color: var(--ink-3); font-size: 12px; letter-spacing: .2em;
}
.ba__clip .ba__ph { width: 100%; }

.ba__label {
  position: absolute; top: 14px; z-index: 2;
  padding: 5px 12px; background: rgba(255,255,255,.86);
  font-size: 11px; letter-spacing: .14em; color: var(--ink-2);
}
.ba__label--b { left: 14px; }
.ba__label--a { right: 14px; }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
  width: 2px; margin-left: -1px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,.16);
}
.ba__handle::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 1;
  width: 14px; height: 8px; margin: -4px 0 0 -7px;
  background:
    linear-gradient(to right, var(--ink-2) 0 2px, transparent 2px 4px, var(--ink-2) 4px 6px) no-repeat left center / 6px 8px,
    linear-gradient(to right, var(--ink-2) 0 2px, transparent 2px 4px, var(--ink-2) 4px 6px) no-repeat right center / 6px 8px;
}

.ba__cap { margin-top: 20px; }
.ba__caption { margin: 0 0 14px; font-size: 14.5px; }
.ba__meta { margin: 0; display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.ba__meta > div { display: flex; gap: 12px; }
.ba__meta dt {
  flex: 0 0 52px; color: var(--ink-3); letter-spacing: .08em;
}
.ba__meta dd { margin: 0; }

/* ---------- 3つの特徴 ---------- */

.feat { display: grid; gap: 44px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feat__num {
  margin: 0 0 14px; font-family: var(--f-serif);
  font-size: 13px; letter-spacing: .2em; color: var(--accent-tx);
}
.feat__title { margin: 0 0 12px; font-size: 18px; font-weight: 500; letter-spacing: .04em; }
.feat__body { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- メイク相談 / 役割分担 ---------- */

.sec--artist { background: var(--bg-2); }
.artist { display: grid; gap: 40px; }
.artist__body { max-width: 68ch; }
.artist__body p { margin: 0 0 22px; font-size: 15px; color: var(--ink-2); }
.artist__body strong { color: var(--ink); font-weight: 500; }

.roles { margin-top: 8px; }
.roles__title {
  margin: 0 0 20px; font-size: 13px; letter-spacing: .16em; color: var(--accent-tx); font-weight: 500;
}
.roles__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.role { padding: 26px 26px 28px; background: var(--paper); border: 1px solid var(--line); }
.role--med { border-color: var(--accent); }
.role__tag {
  display: inline-block; margin: 0 0 12px; padding: 4px 11px;
  font-size: 11px; letter-spacing: .14em;
  background: var(--bg-3); color: var(--ink-2);
}
.role--med .role__tag { background: var(--accent); color: var(--on-accent); }
.role__who { margin: 0 0 12px; font-size: 16px; font-weight: 500; letter-spacing: .04em; }
.role__body { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.95; }

.artist__points {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.artist__points h3 {
  margin: 0 0 10px; font-size: 14.5px; font-weight: 500;
  padding-left: 14px; border-left: 2px solid var(--accent);
}
.artist__points p { margin: 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------- brow-design 誘導 ---------- */

.sec--browlink { text-align: center; }
.browlink .sec__lead { margin-inline: auto; }

/* ---------- できないこと ---------- */

.sec--limits { background: var(--bg-2); }
.limits {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2px; background: var(--line);
  border: 1px solid var(--line);
}
.limits__item { background: var(--paper); padding: 26px 28px; }
.limits__item h3 {
  margin: 0 0 10px; font-size: 15.5px; font-weight: 500; letter-spacing: .04em;
  position: relative; padding-left: 22px;
}
.limits__item h3::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 1px; background: var(--accent);
}
.limits__item p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- 本文 ---------- */

.sec--prose p { margin: 0 0 24px; font-size: 15.5px; }
.sec--prose strong { font-weight: 500; }

/* ---------- 表 ---------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp, .price, .info {
  width: 100%; border-collapse: collapse; background: var(--paper);
  font-size: 14px; min-width: 560px;
}
.cmp th, .cmp td, .price th, .price td, .info th, .info td {
  padding: 16px 18px; border: 1px solid var(--line); text-align: left; vertical-align: top;
  line-height: 1.85;
}
.cmp thead th, .price thead th {
  background: var(--bg-3); font-weight: 500; font-size: 13px; letter-spacing: .06em;
}
.cmp tbody th, .price tbody th, .info th {
  background: var(--bg-2); font-weight: 500; width: 26%;
}
.cmp--3 tbody th { width: 30%; }
.price__num { font-family: var(--f-serif); font-size: 16px; white-space: nowrap; }
.price__group {
  margin: 44px 0 16px; font-size: 15px; font-weight: 500; letter-spacing: .06em;
  padding-left: 12px; border-left: 2px solid var(--accent);
}
.price__group:first-of-type { margin-top: 0; }
.info { min-width: 0; }
.info th { width: 32%; }

/* ---------- 診断 A/B/C ---------- */

.diag { display: grid; gap: 20px; }
.diag__item {
  padding: 28px 30px; background: var(--paper); border: 1px solid var(--line);
  display: grid; grid-template-columns: 44px 1fr; gap: 6px 20px; align-items: start;
}
.diag__item--accent { border-color: var(--accent); background: #fff; }
.diag__label {
  grid-row: 1 / span 2;
  display: grid; place-items: center; width: 44px; height: 44px;
  font-family: var(--f-serif); font-size: 17px;
  background: var(--bg-3); color: var(--ink-2);
}
.diag__item--accent .diag__label { background: var(--accent); color: var(--on-accent); }
.diag__title { margin: 0; font-size: 17px; font-weight: 500; letter-spacing: .04em; align-self: center; }
.diag__body { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.diag__body strong { color: var(--ink); font-weight: 500; }

/* ---------- メンテナンス / 提携 ---------- */

.sec--maintain { background: var(--bg-2); }
.sec--maintain p, .sec--partner p { margin: 0 0 22px; font-size: 15.5px; }

/* ---------- 流れ ---------- */

.flowlite {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.flowlite__num {
  display: block; margin-bottom: 12px;
  font-family: var(--f-serif); font-size: 13px; letter-spacing: .2em; color: var(--accent-tx);
}
.flowlite h3 { margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.flowlite p { margin: 0; font-size: 14px; color: var(--ink-2); }

.steps { list-style: none; margin: 0; padding: 0; }
.steps__item {
  display: grid; grid-template-columns: 64px 1fr; gap: 24px;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.steps__item:last-child { border-bottom: 1px solid var(--line); }
.steps__num {
  font-family: var(--f-serif); font-size: 20px; color: var(--accent-tx); letter-spacing: .06em;
}
.steps h3 { margin: 0 0 10px; font-size: 17px; font-weight: 500; letter-spacing: .04em; }
.steps p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- リスク ---------- */

.sec--risk { background: var(--danger-bg); }
.risk {
  margin: 0; padding: 28px 30px 28px 48px;
  background: var(--paper); border: 1px solid var(--danger-br);
}
.risk li { margin-bottom: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.95; }
.risk li:last-child { margin-bottom: 0; }

/* ---------- 院 ---------- */

.clinics { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.clinic {
  display: block; padding: 32px 32px 34px; text-decoration: none;
  background: var(--paper); border: 1px solid var(--line);
  transition: border-color .25s;
}
.clinic:hover { border-color: var(--accent); }
.clinic__name { margin: 0 0 8px; font-family: var(--f-serif); font-size: 22px; font-weight: 500; }
.clinic__official { margin: 0 0 16px; font-size: 12.5px; color: var(--accent-tx); letter-spacing: .04em; }
.clinic__addr, .clinic__access { margin: 0 0 4px; font-size: 13.5px; color: var(--ink-2); }

.sec--monitor { background: var(--bg-2); }
.sec--monitor p { margin: 0 0 20px; font-size: 15px; }

/* ---------- 施術者 ---------- */

.artists { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.artistcard { background: var(--paper); border: 1px solid var(--line); padding: 30px; }
.artistcard__ph {
  aspect-ratio: 1; margin: -30px -30px 24px;
  background: repeating-linear-gradient(45deg, var(--bg-3) 0 12px, var(--bg-2) 12px 24px);
  display: grid; place-items: center; color: var(--ink-3); font-size: 12px; letter-spacing: .16em;
}
.artistcard__clinic {
  display: inline-block; margin: 0 0 10px; padding: 4px 11px;
  background: var(--bg-3); font-size: 11px; letter-spacing: .12em; color: var(--ink-2);
}
.artistcard__name { margin: 0 0 6px; font-family: var(--f-serif); font-size: 21px; font-weight: 500; }
.artistcard__license { margin: 0 0 18px; font-size: 12.5px; color: var(--accent-tx); letter-spacing: .06em; }
.artistcard h4 {
  margin: 18px 0 8px; font-size: 12px; letter-spacing: .14em; color: var(--ink-3); font-weight: 500;
}
.artistcard ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ink-2); }
.artistcard ul li { margin-bottom: 5px; }
.artistcard__msg { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }
.faq__group { margin: 52px 0 18px; font-size: 15px; font-weight: 500; letter-spacing: .06em; }
.faq__group:first-child { margin-top: 0; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: 15px; letter-spacing: .03em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 11px; height: 11px; margin-top: -8px;
  border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2);
  transform: rotate(45deg); transition: transform .25s;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__a { padding: 0 0 24px; }
.faq__a p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- フォーム ---------- */

.form { background: var(--paper); border: 1px solid var(--line); padding: 36px 32px 40px; }
.form__row { margin-bottom: 26px; }
.form__label { display: block; margin-bottom: 9px; font-size: 13.5px; letter-spacing: .04em; }
.req {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  background: var(--accent-tx); color: #fff; font-size: 10px; letter-spacing: .1em;
}
.form__input {
  width: 100%; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink);
  font-family: inherit; font-size: 15px; line-height: 1.7;
}
.form__input:focus { border-color: var(--accent); outline: none; background: #fff; }
.form__input--area { resize: vertical; }
.form__row--check { font-size: 13.5px; color: var(--ink-2); }
.form__row--check a { color: var(--accent-tx); }
.hp { position: absolute; left: -9999px; }

.alert { padding: 18px 22px; margin-bottom: 28px; border: 1px solid; font-size: 14px; }
.alert--ok { background: #F2F6F2; border-color: #CBDCCB; }
.alert--ng { background: var(--danger-bg); border-color: var(--danger-br); }
.alert p { margin: 0; }

/* ---------- CTA ---------- */

.sec--cta { background: var(--soft); text-align: center; }
.cta__title {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(22px, 3.2vw, 34px); line-height: 1.5; margin: 0 0 16px;
}
.cta__lead { margin: 0 0 34px; color: var(--ink-2); font-size: 15px; }

/* ---------- 注記だけの節 ---------- */
.sec--note { padding-block: clamp(36px, 5vw, 56px); }

/* ---------- フッター ---------- */

.ft { background: var(--ink); color: #EDE9E5; padding-block: clamp(56px, 7vw, 80px) 40px; }
.ft__top {
  display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between;
  padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.ft__name { margin: 0 0 6px; font-family: var(--f-serif); font-size: 18px; letter-spacing: .1em; }
.ft__sub { margin: 0; font-size: 11px; letter-spacing: .12em; color: rgba(237,233,229,.66); }
.ft__nav ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px 40px; grid-template-columns: repeat(2, auto);
}
.ft__nav a { font-size: 13px; text-decoration: none; color: rgba(237,233,229,.86); }
.ft__nav a:hover { color: #fff; }
.ft__note {
  margin: 32px 0 0; font-size: 12px; line-height: 1.95;
  color: rgba(237,233,229,.66); max-width: 76ch;
}
.ft__copy { margin: 24px 0 0; font-size: 11px; letter-spacing: .1em; color: rgba(237,233,229,.5); }

/* ---------- 出現アニメーション ---------- */
/* JS が有効なときだけ。ヒーローには掛けない（LCP のため） */

.js .rv { opacity: 0; transform: translateY(18px); }
.js .rv.is-in { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s ease; }
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; }
}

/* ---------- 印刷 ---------- */

@media print {
  .hd, .ft__nav, .hero__cta, .btn, .skip { display: none !important; }
  body { background: #fff; font-size: 11pt; line-height: 1.7; }
  .sec { padding-block: 16pt; break-inside: auto; }
  .js .rv { opacity: 1 !important; transform: none !important; }
}

/* ---------- コンセプト ---------- */

.sec--concept { background: var(--paper); }
.concept { display: grid; gap: 44px; }
.concept__body { max-width: 70ch; }
.concept__body p { margin: 0 0 24px; font-size: 15.5px; color: var(--ink-2); }
.concept__body strong { color: var(--ink); font-weight: 500; }

.pillars { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); background: var(--line); border: 1px solid var(--line); }
.pillar { background: var(--bg); padding: 32px 30px 34px; }
.pillar--med { background: var(--bg-2); }
.pillar__tag {
  display: inline-block; margin: 0 0 14px; padding: 4px 11px;
  font-size: 11px; letter-spacing: .14em;
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--line);
}
.pillar--med .pillar__tag { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.pillar__label { margin: 0 0 12px; font-family: var(--f-serif); font-size: 22px; font-weight: 400; letter-spacing: .06em; }
.pillar__body { margin: 0; font-size: 14px; color: var(--ink-2); }

/* ---------- お支払いについて ---------- */

.payment {
  margin-top: 40px; padding: 28px 30px;
  background: var(--paper); border: 1px solid var(--accent);
}
.payment__title {
  margin: 0 0 16px; font-size: 15px; font-weight: 500; letter-spacing: .06em;
}
.payment ul { margin: 0; padding-left: 20px; }
.payment li { margin-bottom: 12px; font-size: 14px; color: var(--ink-2); line-height: 1.95; }
.payment li:last-child { margin-bottom: 0; }
.payment strong { color: var(--ink); font-weight: 500; }

/* ---------- ヒーロー（画像あり） ---------- */

.hero--visual .hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__media img, .hero__media .ba__ph { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 860px) {
  .hero--visual .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .hero__media img { aspect-ratio: 16/10; }
}

/* ---------- メニューカード ---------- */

.mcards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mcard {
  display: block; text-decoration: none; background: var(--paper);
  border: 1px solid var(--line); transition: border-color .25s;
}
.mcard:hover { border-color: var(--accent); }
.mcard__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.mcard__ph {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, var(--bg-3) 0 12px, var(--bg-2) 12px 24px);
  color: var(--ink-3); font-size: 11px; letter-spacing: .2em;
}
.mcard__body { padding: 22px 24px 26px; }
.mcard__title { margin: 0 0 10px; font-family: var(--f-serif); font-size: 19px; font-weight: 400; }
.mcard__text { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.9; }
.mcard__price { margin: 0; font-size: 13px; color: var(--accent-tx); letter-spacing: .04em; }

/* 画像ありヒーローでは見出しを絞る（2カラムで82pxだと4行に折れる） */
.hero--visual .hero__title { font-size: clamp(30px, 4.1vw, 52px); line-height: 1.45; }
.hero--visual .hero__lead { font-size: 15px; }
.hero--visual { padding-block: clamp(48px, 8vw, 96px) clamp(48px, 7vw, 88px); }

/* ---------- アイコン ---------- */

.icon { width: 100%; height: 100%; display: block; }
.feat__icon, .limits__icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 16px;
  color: var(--accent-tx); background: var(--bg-2); border-radius: 50%;
  padding: 11px;
}
.limits__icon { background: var(--bg); }
.flowlite__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 12px;
  color: var(--accent-tx); background: var(--paper);
  border: 1px solid var(--line); border-radius: 50%; padding: 10px;
}
.steps__num { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.steps__icon {
  display: grid; place-items: center;
  width: 42px; height: 42px; padding: 10px;
  color: var(--accent-tx); background: var(--bg-2); border-radius: 50%;
}

/* ---------- 3ステップ図解 ---------- */

.sec--story { background: var(--bg-2); }
.story {
  list-style: none; margin: 0; padding: 0; counter-reset: story;
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.story__step {
  position: relative; background: var(--paper); border: 1px solid var(--line);
  padding: 34px 30px 36px;
}
/* 次のステップへの矢印（横並び時のみ） */
@media (min-width: 900px) {
  .story__step:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -14px; z-index: 2;
    width: 9px; height: 9px; margin-top: -5px;
    border-top: 1.5px solid var(--accent-tx); border-right: 1.5px solid var(--accent-tx);
    transform: rotate(45deg); background: transparent;
  }
}
.story__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; padding: 13px; margin-bottom: 18px;
  color: var(--accent-tx); background: var(--bg); border-radius: 50%;
}
.story__num { margin: 0 0 6px; font-family: var(--f-serif); font-size: 12px; letter-spacing: .2em; color: var(--ink-3); }
.story__title { margin: 0 0 12px; font-family: var(--f-serif); font-size: 20px; font-weight: 400; letter-spacing: .04em; }
.story__body { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.95; }
.story__body strong { color: var(--ink); font-weight: 500; }
.story__close {
  margin: 36px 0 0; text-align: center;
  font-family: var(--f-serif); font-size: clamp(16px, 2vw, 20px); letter-spacing: .06em;
}

/* ---------- 柱の画像 ---------- */

.pillar { padding: 0 0 34px; overflow: hidden; }
.pillar__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; margin-bottom: 24px; }
.pillar__tag { margin-left: 30px; }
.pillar__label, .pillar__body { margin-left: 30px; margin-right: 30px; }
.pillar:not(:has(.pillar__img)) { padding-top: 32px; }

/* ============================================================
   HBL 参照のデザイン強化（2026-08-13）
   大きな英字見出し / ピル型UI / 全幅メディア / ティッカー
   ============================================================ */

/* ---------- 英字ディスプレイ見出し ---------- */
/* HBL の h2（56px・#818A95）に倣う。大型装飾文字は WCAG の
   大文字基準(3:1)で判定し、#818A95 は白地 3.5:1 で適合。 */

.sec .eyebrow, .phero .eyebrow {
  font-family: var(--f-serif);
  font-size: clamp(40px, 7vw, 68px);
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: none;
  color: #818A95;
  margin: 0 0 18px;
}
.sec__title, .phero__title { font-size: clamp(20px, 2.6vw, 30px); }

/* ---------- ピル化 ---------- */

:root { --radius-lg: 20px; }
.btn { border-radius: 999px; }
.mcard, .story__step, .pillar, .role, .diag__item, .clinic,
.artistcard, .form, .payment, .risk, .disclaimer, .alert {
  border-radius: var(--radius-lg); overflow: hidden;
}
.ba__stage, .mcard__img, .pillar__img { border-radius: var(--radius-lg); }
.limits { border-radius: var(--radius-lg); }
.tablewrap { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.tablewrap table { min-width: 560px; border: 0; }
.info { min-width: 0; }

/* ---------- 浮遊ピル型ヘッダー ---------- */

.hd {
  position: sticky; top: 10px; z-index: 50;
  width: min(100% - 20px, 1240px);
  margin-inline: auto;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(31,41,55,.08);
}
.hd__inner { min-height: 64px; padding-inline: 26px; width: 100%; }
.gnav__cta { border-radius: 999px; }
@media (max-width: 1120px) {
  .gnav {
    inset: auto 10px auto 10px; top: 84px;
    border: 1px solid var(--line); border-radius: 24px;
    box-shadow: 0 16px 40px rgba(31,41,55,.12);
  }
}

/* ---------- ティッカー ---------- */

.ticker {
  overflow: hidden; background: var(--bg-3);
  font-size: 12px; letter-spacing: .06em; color: var(--ink-2);
}
.ticker__track {
  display: inline-flex; gap: 2.2em; padding: 9px 0;
  white-space: nowrap; animation: ticker 36s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ---------- 全幅アンビエント（動画風） ---------- */

.ambient {
  position: relative; overflow: hidden;
  width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: clamp(420px, 68vh, 640px);
  display: grid; align-items: end;
  color: #fff;
}
.ambient__bg { position: absolute; inset: 0; }
.ambient__bg img, .ambient__bg video {
  width: 100%; height: 100%; object-fit: cover;
}
/* 実写動画が入るまでの動画風演出 */
.ambient__bg img { animation: kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -2%); }
}
@media (prefers-reduced-motion: reduce) { .ambient__bg img { animation: none; } }
.ambient::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,28,36,.72) 0%, rgba(23,28,36,.28) 45%, rgba(23,28,36,.18) 100%);
}
.ambient__inner { position: relative; z-index: 1; padding-block: clamp(44px, 7vw, 88px); }
.ambient__word {
  margin: 0 0 10px; font-family: var(--f-serif);
  font-size: clamp(44px, 8vw, 84px); line-height: 1; letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.ambient__title {
  margin: 0 0 12px; font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(22px, 3.4vw, 34px); line-height: 1.5; letter-spacing: .06em;
}
.ambient__lead { margin: 0 0 26px; font-size: 14.5px; color: rgba(255,255,255,.85); }
.btn--light {
  background: rgba(255,255,255,.94); color: var(--ink);
  border-radius: 999px;
}
.btn--light:hover { background: #fff; }

/* ---------- 特徴の数字を HBL 風に大きく ---------- */

.feat__num {
  font-size: 34px; letter-spacing: .08em; color: #818A95;
  margin: 0 0 10px;
}

/* ---------- モバイル固定CTA ---------- */

.mobilecta { display: none; }
@media (max-width: 860px) {
  .mobilecta {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 14px; right: 14px; bottom: 14px; z-index: 60;
    padding: 17px 20px;
    background: var(--accent); color: var(--on-accent);
    border-radius: 999px; text-decoration: none;
    font-size: 15px; letter-spacing: .08em; font-weight: 500;
    box-shadow: 0 10px 30px rgba(31,41,55,.22);
  }
  body { padding-bottom: 84px; }
}
@media print { .mobilecta, .ticker { display: none !important; } }

/* ---------- ヘッダー修正（2026-08-13） ----------
   浮遊ピル型は「ずっとついてくるのが気持ち悪い」との評価だったため、
   追従しない通常の全幅バーに戻す。ティッカーの下に静置される。 */

.hd {
  position: static;
  width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hd__inner { width: min(100% - 40px, var(--wrap)); margin-inline: auto; padding-inline: 0; min-height: 72px; }
@media (max-width: 1120px) {
  /* ヘッダーが画面外に消えるため、メニューは画面上部からの固定表示にする */
  .gnav { top: 10px; }
}

.ambient__note {
  position: absolute; top: 14px; right: 18px; z-index: 2; margin: 0;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(23,28,36,.45); color: rgba(255,255,255,.85);
  font-size: 11px; letter-spacing: .08em;
}

/* ---------- 施術の流れ（トップ）をカード化（2026-08-13） ----------
   素のリストは読みにくいとの評価。story と同じカード＋矢印の形に。 */

.flowlite {
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.flowlite li {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 26px 32px;
}
@media (min-width: 1000px) {
  .flowlite li:not(:last-child)::after {
    content: ""; position: absolute; top: 50%; right: -14px; z-index: 2;
    width: 9px; height: 9px; margin-top: -5px;
    border-top: 1.5px solid var(--accent-tx); border-right: 1.5px solid var(--accent-tx);
    transform: rotate(45deg);
  }
}
.flowlite__icon { background: var(--bg-2); border: 0; }
.flowlite__num {
  font-family: var(--f-serif); font-size: 26px; color: #818A95;
  margin-bottom: 6px; letter-spacing: .08em;
}
.flowlite h3 { font-size: 16.5px; }
.flowlite p { font-size: 13.5px; line-height: 1.95; }

/* ---------- ヒーロー全幅化（2026-08-13） ----------
   hotels.golder.co.jp と同様、画像を画面いっぱいに使う。
   文字の可読性は左からの白ベールで確保（ink は淡背景で 13:1 前後）。 */

.hero--visual {
  position: relative;
  width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: clamp(540px, 82vh, 780px);
  display: grid; align-items: center;
  padding-block: 0;
  overflow: hidden;
}
.hero--visual .hero__inner { display: block; position: relative; z-index: 2; }
.hero--visual .hero__text { max-width: 640px; }
.hero--visual .hero__media { position: absolute; inset: 0; z-index: 0; }
.hero--visual .hero__media img {
  width: 100%; height: 100%; aspect-ratio: auto;
  object-fit: cover; object-position: 72% 30%;
}
.hero--visual::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    rgba(243,244,247,.92) 0%, rgba(243,244,247,.72) 34%,
    rgba(243,244,247,.18) 58%, rgba(243,244,247,0) 78%);
}
@media (max-width: 860px) {
  .hero--visual { min-height: clamp(560px, 88vh, 760px); align-items: end; }
  .hero--visual .hero__media { order: 0; }
  .hero--visual .hero__media img { object-position: 70% 18%; }
  .hero--visual::before {
    background: linear-gradient(to top,
      rgba(243,244,247,.95) 0%, rgba(243,244,247,.82) 38%,
      rgba(243,244,247,.15) 68%, rgba(243,244,247,0) 100%);
  }
  .hero--visual .hero__inner { padding-bottom: 40px; }
}

/* 描画順の確定（画像が本文の上に乗る事象への対処）。
   isolation でセクションを積層文脈にし、メディアと帯を負の層へ置く。 */
.hero--visual { isolation: isolate; }
.hero--visual .hero__media { z-index: -2; }
.hero--visual::before { z-index: -1; }
.hero--visual .hero__inner { z-index: auto; }

/* メディアの位置基準の修正。inner に relative を与えたことで
   絶対配置の基準が inner になり、画像が wrap 幅に縮んでいた。
   基準はセクション自身に。inner は静的でも isolation＋負のzで前面に出る。 */
.hero--visual .hero__inner { position: static; }

/* ---------- ヒーロー再構成（2026-08-13）----------
   画像に載せるのは見出しだけ。本文・院名・CTAは画像の下に置く。 */

.hero--visual {
  width: 100%; margin-inline: 0; min-height: 0;
  display: block; overflow: visible; padding-block: 0 0;
  isolation: auto;
}
.hero__stage {
  position: relative; isolation: isolate;
  width: 100vw; margin-inline: calc(50% - 50vw);
  min-height: clamp(420px, 64vh, 620px);
  display: grid; align-items: end;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 72% 30%;
}
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to right,
    rgba(243,244,247,.88) 0%, rgba(243,244,247,.55) 34%,
    rgba(243,244,247,.10) 60%, rgba(243,244,247,0) 80%);
}
.hero__stagetext { padding-block: 0 clamp(36px, 6vw, 64px); }
.hero__stagetext .hero__title { margin-bottom: 0; }
.hero__below { padding-block: clamp(30px, 4vw, 44px) clamp(44px, 6vw, 64px); }
.hero__below .hero__lead { margin-bottom: 14px; max-width: 62ch; }
.hero__below .hero__note { margin-bottom: 30px; }

@media (max-width: 860px) {
  .hero__stage { min-height: clamp(360px, 52vh, 520px); }
  .hero__bg { object-position: 70% 18%; }
  .hero__stage::before {
    background: linear-gradient(to top,
      rgba(243,244,247,.9) 0%, rgba(243,244,247,.45) 40%,
      rgba(243,244,247,0) 72%);
  }
}

/* 対称構図のヒーロー画像用に切り取りを中央へ */
.hero__bg { object-position: 50% 28%; }
@media (max-width: 860px) { .hero__bg { object-position: 50% 20%; } }

/* ---------- ヒーロー刷新（2026-08-13）----------
   ・白ベールは「画像が見にくい」ため全廃。文字は画像下部の明るい領域（胸元・淡背景）に置く
   ・モバイルは画面いっぱいの高さに（svh でiOSのバー変動に追従）
   ・画像 → 見出しの順で現れ、本文はスクロールで手紙のように流れる */

.hero__stage::before { display: none; }

.hero__stage { min-height: clamp(480px, 74vh, 720px); }
@media (max-width: 860px) {
  /* ティッカー＋ヘッダー分を引いた残りで、初回表示の画面を画像が満たす */
  .hero__stage { min-height: max(520px, calc(100svh - 128px)); }
  .hero__bg { object-position: 50% 22%; }
}

/* 見出し：画像表示の後にふわりと出る（LCPは画像なので影響なし） */
.js .hero__stagetext { opacity: 0; transform: translateY(16px); }
.js .hero__stagetext.is-ready {
  animation: heroTitleIn .9s ease .25s forwards;
}
@keyframes heroTitleIn { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .hero__stagetext { opacity: 1; transform: none; animation: none; }
}

/* 手紙：一行ずつ、便箋のように */
.letter { max-width: 34em; margin-inline: auto; padding-block: 8px; }
.letter p {
  margin: 0 0 20px;
  font-family: var(--f-serif);
  font-size: 16.5px; line-height: 2.3; letter-spacing: .06em;
  color: var(--ink);
}
.letter p strong { font-weight: 600; }
.js .letter p { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s ease; }
.js .letter.is-in p { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .letter p { opacity: 1; transform: none; transition: none; }
}
.hero__below { text-align: center; padding-block: clamp(44px, 6vw, 72px) clamp(48px, 6vw, 72px); }
.hero__below .hero__note { margin: 6px 0 34px; }
.hero__below .hero__cta { justify-content: center; }

/* 見出しの可読性：全面ベールの代わりに、文字の背後だけの小さなすりガラス。
   画像はほぼ隠れず、黒髪の上でも文字が立つ。 */
.hero__stagetext {
  width: fit-content;
  margin-bottom: clamp(22px, 4vw, 40px);
  padding: 18px 24px 20px;
  background: rgba(243, 244, 247, .62);
  -webkit-backdrop-filter: blur(12px) saturate(1.05);
  backdrop-filter: blur(12px) saturate(1.05);
  border-radius: 18px;
}
@supports not (backdrop-filter: blur(1px)) {
  .hero__stagetext { background: rgba(243, 244, 247, .88); }
}
@media (max-width: 860px) {
  .hero__stagetext { margin-inline: 4px; padding: 14px 18px 16px; border-radius: 14px; }
}

/* モバイルの固定CTAピルと見出しプレートが重ならないよう、初期表示ぶんを持ち上げる */
@media (max-width: 860px) {
  .hero__stagetext { margin-bottom: 96px; }
}

/* モバイル：頭上の余白を詰め、口元がプレートに隠れない位置まで顔を引き上げる */
@media (max-width: 860px) {
  .hero__bg { object-position: 50% 42%; }
}

/* モバイル：プレートを少しコンパクトにして口元を完全に見せる */
@media (max-width: 860px) {
  .hero__stagetext { padding-top: 10px; }
  .hero__eyebrow { font-size: 11px; margin-bottom: 6px; }
  .hero__title { font-size: 28px; }
}

/* モバイル専用9:16画像の出し分け。picture はレイアウトに関与させない */
.hero__stage picture { display: contents; }
/* 9:16ネイティブ画像は縦横比がほぼ画面と同じなので中央でよい */
@media (max-width: 860px) {
  .hero__bg { object-position: 50% 50%; }
}

/* ============================================================
   リテーマ 2026-08-18：first-artmake.jp を参考にした
   「白＋ダスティローズ＋ゴシック」のクリーン系へ転換。
   変数の再定義と末尾優先の上書きで実現し、既存構造は変えない。
   コントラスト実測：本文4.5:1以上／大型装飾3:1以上を確認済み。
   ============================================================ */
:root {
  --paper: #FFFFFF;
  --bg:    #FDFAF9;   /* ごく淡い暖色白 */
  --bg-2:  #F8F2F2;   /* 参考サイトの薄ピンク */
  --bg-3:  #F2E4E2;
  --ink:   #333333;   /* 対 --bg-2 で 11.4:1 */
  --ink-2: #5A5A5A;   /* 6.9:1 */
  --ink-3: #5F6368;   /* 対 --bg-3 でも 4.89:1 */
  --accent:    #B25A58;  /* ボタン面。白文字 4.67:1 */
  --accent-tx: #A14E4C;  /* 文字用。白地 5.66:1 */
  --on-accent: #FFFFFF;
  --soft:      #F6EAE8;
  --danger-bg: #FBF6F5;
  --danger-br: #EBD8D5;
  --line:      #EBDCDA;
  --radius:    10px;
  --f-en:     "Jost", sans-serif;
  --f-mincho: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  /* 見出しもゴシックに（--f-serif を参照している既存見出しを一括転換） */
  --f-serif:  "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
  --f-sans:   "Noto Sans JP", -apple-system, "Hiragino Sans", sans-serif;
}

/* 見出し：太ゴシックではっきりと */
.sec__title, .phero__title, .pillar__label, .clinic__name,
.artistcard__name, .story__title, .mcard__title, .ft__name { font-weight: 700; }
.hero__title { font-weight: 700; letter-spacing: .05em; }

/* 英字ディスプレイ：Jost×ローズ（装飾大型 3.25:1 で基準内） */
.sec .eyebrow, .phero .eyebrow {
  font-family: var(--f-en); font-weight: 500;
  font-size: clamp(30px, 5vw, 50px); letter-spacing: .08em;
  color: #C97472;
}
.ambient__word { font-family: var(--f-en); letter-spacing: .06em; }
.hero__eyebrow { font-family: var(--f-en); letter-spacing: .22em; }

/* 手紙だけは明朝の情感を残す */
.letter p { font-family: var(--f-mincho); }

/* ボタン：ピル型・太字（参考サイトの丸ボタン） */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .08em; }
.btn--primary:hover { background: #9A4644; }

/* カード：白面・角丸・ローズの淡い影で浮かせる */
.mcard, .story__step, .artistcard, .flowlite li, .pillar {
  border-radius: 14px;
  box-shadow: 0 2px 16px rgba(178, 90, 88, .07);
}
.mcard { overflow: hidden; }           /* 角丸から画像がはみ出さない */
.faq__item { background: var(--paper); }

/* 番号：ローズの丸バッジ（参考サイトのステップ表現） */
.flowlite__num, .story__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--f-en); font-size: 15px; font-weight: 500;
  letter-spacing: .02em; margin-bottom: 12px;
}
.story__icon { background: var(--bg-2); color: var(--accent-tx); }

/* ティッカー：薄ピンク地にローズ文字 */
.ticker { background: var(--bg-2); color: var(--accent-tx); }

/* ヒーローのプレートと予約ボタンはそのまま（白系で調和） */

/* ============================================================
   ヒーロー刷新 2026-08-18（承認モックアップ準拠）
   文字なし素材（ワイド／縦）に、文字入り見本のレイアウトを
   HTML/CSSで再現して重ねる。すりガラスのプレートは廃止し、
   文字は画像下部の白い胸元・首元に直接置く。
   ============================================================ */

/* プレート廃止・中央揃えの素のテキストへ */
.hero__stagetext {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: none; border-radius: 0;
  width: 100%; max-width: none; margin: 0 auto; padding: 0 20px;
  text-align: center;
}
.hero__eyebrow {
  font-family: var(--f-en); font-size: 13px; font-weight: 500;
  letter-spacing: .3em; color: #B98A84; margin: 0 0 14px;
}
.hero__title {
  font-family: var(--f-mincho); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px); line-height: 1.6;
  letter-spacing: .12em; color: #4A4A4A;
}
.hero__rule { width: 44px; height: 2px; background: #C99A93; margin: 18px auto 16px; }
.hero__sublead { margin: 0; font-size: 14px; line-height: 2.1; letter-spacing: .06em; color: var(--ink-2); }
.hero__brand {
  margin: 22px 0 0; font-family: var(--f-mincho);
  font-size: 17px; letter-spacing: .18em; color: #6E6E6E;
}
.hero__brand span { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: .22em; color: #8f8f8f; }

/* サイドラベル（デスクトップのみ・見本の DESIGN / MEDICAL ARTMAKE） */
.hero__side { position: absolute; top: 21%; z-index: 2; max-width: 300px; }
.hero__side--l { left: clamp(20px, 5.5vw, 90px); text-align: left; }
.hero__side--r { right: clamp(20px, 5.5vw, 90px); text-align: right; }
.hero__sidelabel {
  margin: 0 0 12px; font-family: var(--f-mincho);
  font-size: clamp(18px, 1.8vw, 26px); letter-spacing: .12em; color: #A8625E;
}
.hero__sidetext { margin: 0; font-size: 12.5px; line-height: 2; letter-spacing: .04em; color: var(--ink-2); }

/* デスクトップ：ワイド素材をカバー表示、文字は胸元へ */
.hero__stage { min-height: clamp(520px, 78vh, 760px); }
.hero__bg { object-position: 50% 30%; }
.hero__stagetext { margin-bottom: clamp(28px, 4vh, 52px); }
@media (max-width: 860px) {
  /* モバイル：縦素材を切り取らず原寸比で見せ、文字は胸元に重ねる */
  .hero__stage { min-height: 0; display: block; overflow: visible; }
  .hero__bg { position: static; width: 100%; height: auto; object-position: initial; }
  .hero__stagetext { position: relative; margin: -44% auto 0; padding: 0 22px; }
  .hero__side { display: none; }
  .hero__brand { display: none; }   /* 見本どおりモバイルはブランド行なし */
  .hero__title { font-size: 27px; }
}
@media (min-width: 861px) {
  .hero__rule, .hero__sublead { display: none; }  /* デスクトップはサイドラベルが担う */
}

/* 3ポイント（見本の丸アイコン列） */
.heropoints {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; justify-content: center; gap: clamp(22px, 6vw, 64px);
}
.heropoints li { text-align: center; }
.heropoints__icon {
  display: grid; place-items: center;
  width: 92px; height: 92px; margin: 0 auto 12px; border-radius: 50%;
  background: #FBF4F3; color: #A8625E;
}
.heropoints__icon svg { width: 34px; height: 34px; }
.heropoints__label { font-size: 13px; line-height: 1.8; letter-spacing: .04em; color: var(--ink); }
@media (max-width: 400px) {
  .heropoints__icon { width: 78px; height: 78px; }
}

/* 見出し出現アニメーションはそのまま（.is-ready）。プレート前提の
   持ち上げ余白は不要になったため上書き */
.hero__below { padding-top: 34px; }

/* モバイル見出しの折り返し調整（<br>指定どおり2行で収める） */
@media (max-width: 860px) {
  .hero__title { font-size: 23px; letter-spacing: .09em; white-space: nowrap; }
}

/* デスクトップ：ワイド素材(16:9)を極力切り取らずに見せ、
   見本どおり文字が胸元に乗るようにする */
@media (min-width: 861px) {
  .hero__stage {
    aspect-ratio: 1672 / 941;
    min-height: 520px;
    max-height: calc(100svh - 96px);
  }
  .hero__bg { object-position: 50% 42%; }
}