@charset "UTF-8";
/* ==========================================================================
   下層ページ共通（全下層ページで読み込む）
   共通の値・部品は preview/top/style.css をそのまま使い、このファイルは
   下層ページの型（FV・見出し・セクション・CTA など）と共通部品を持つ。
   各ページ固有の追加は preview/pages/<ページ>/page.css に書く。色・書体はTOPのCSS変数のみを使う。
   1) SP（〜767px） 2) Tablet（768〜1023px） 3) PC（1024px〜、--u＝1400pxカンプ基準）
   ========================================================================== */

:root {
  /* 見出しまわりのリズム（DESIGN_SYSTEM 13章） */
  --sec-top: 64px;
  --sec-bottom: 64px;
  --label-to-title: 10px;
  --title-to-content: 32px;

  /* 丸パーツ（TOPのFV丸ボタンと同じ考え方。塗りは不透明度88%） */
  --circle-blue: rgba(0, 90, 167, .88);
  --circle-teal: rgba(0, 106, 160, .88);
  --circle-ring: #8fd0f5;
}

/* ---------- Section rhythm ---------- */
.o-section { padding-block: var(--sec-top) var(--sec-bottom); background: var(--color-bg); }
.o-section.l-section--blue { background: var(--color-bg-light); }
.o-head { margin-bottom: var(--title-to-content); }
.o-head .c-h2 { margin-top: var(--label-to-title); }

/* ---------- FV ---------- */
.o-fv {
  position: relative;
  padding: 122px 0 48px;
  background: var(--color-bg-light);
}
.o-fv__inner { position: relative; padding-inline: var(--gutter); }
.o-fv__address {
  position: absolute;
  top: -110px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--color-text);
}
.o-fv__address svg { width: 9px; height: 12px; color: var(--color-label); flex: none; }
.o-fv__label { font-weight: 600; }
.o-fv__title {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: calc(9 * var(--vw));
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
  color: var(--color-heading);
}
.o-fv__copy {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: calc(4.9 * var(--vw));
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .06em;
  color: var(--color-heading);
}
.o-fv__text { margin-top: 14px; font-weight: 300; line-height: 1.85; }
.o-fv__visual { position: relative; margin-top: 28px; }
.o-fv__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--radius-md);
}
.o-fv__circle { display: none; }

/* ---------- Breadcrumb ---------- */
.o-breadcrumb { padding-block: 14px; overflow-x: auto; }
.o-breadcrumb ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 12px; white-space: nowrap; color: var(--color-text-sub); }
.o-breadcrumb li + li::before { content: "／"; margin-right: 8px; color: var(--color-line-gray); }
.o-breadcrumb a { color: var(--color-primary); }
.o-breadcrumb [aria-current] { color: var(--color-text); }

/* ---------- 痛む場所から探す ---------- */
.o-parts { padding-block: 24px 8px; }
.o-parts__label { margin-bottom: 12px; font-size: 14px; font-weight: 700; letter-spacing: .08em; color: var(--color-heading-accent); text-align: center; }
.o-parts__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.o-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 20px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--color-primary);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.o-pill svg { width: 13px; height: 13px; }
.o-pill:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* ---------- SYMPTOMS ---------- */
.o-symptoms { max-width: 920px; margin: 0 auto; }
.o-textlink { margin-left: .6em; font-size: .86em; color: var(--color-heading-accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- FLOW ---------- */
.o-flow { display: grid; row-gap: 88px; margin-top: 76px; padding: 0; list-style: none; } /* ol の初期左余白（40px）を消して左右センターに */
.o-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 108px 22px 28px;
  background: #fff;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
}
.o-step__circle {
  position: absolute;
  top: -46px;
  left: 50%;
  width: 124px;
  height: 124px;
  margin-left: -62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
  border-radius: 50%;
  color: #fff;
}
.o-step__circle::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid var(--circle-ring);
  border-radius: 50%;
}
.o-step__circle--blue { background: var(--circle-blue); }
.o-step__circle--teal { background: var(--circle-teal); }
.o-step__circle svg { width: 44px; height: 44px; }
.o-step__circle span { font-family: var(--font-en); font-size: 13px; font-weight: 300; line-height: 1; letter-spacing: .14em; }
.o-step__title {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
  text-align: center;
  color: var(--color-text);
}
.o-step__text { font-weight: 300; line-height: 1.8; }
.o-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.o-chips li { padding: 6px 14px; border-radius: 999px; background: var(--color-bg-info); font-size: 13px; letter-spacing: .06em; color: var(--color-heading-accent); }

/* ---------- DISEASE ---------- */
.o-disease { display: grid; gap: 16px; }
.o-dcard {
  display: flex;
  flex-direction: column;
  padding: 20px 18px 8px;
  background: var(--color-bg-soft);
  border: 2px solid var(--color-line-light);
  border-radius: var(--radius-md);
}
.o-dcard__head { display: flex; align-items: center; gap: 16px; padding-bottom: 14px; }
.o-dcard__thumb { flex: none; padding: 5px; border: 1px solid var(--circle-ring); border-radius: 50%; line-height: 0; }
.o-dcard__thumb img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.o-dcard__title { font-family: var(--font-heading); font-size: 20px; font-weight: 400; line-height: 1.4; letter-spacing: .06em; color: var(--color-text); }
.o-dcard__en { margin-top: 4px; font-family: var(--font-en); font-size: 12px; font-weight: 300; letter-spacing: .16em; color: var(--color-label); }

.o-acc { border-top: 1px solid var(--color-line); }
.o-acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: left;
  color: var(--color-text);
}
.o-acc__btn:hover span { color: var(--color-primary); }
.o-acc__btn i {
  position: relative;
  flex: none;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  background: #fff;
  transition: background-color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.22, .7, .2, 1);
}
@media (hover: hover) {
  .o-acc__btn[aria-expanded="false"]:hover i { transform: rotate(-90deg); } /* オンマウス：＋が左へ90度回転 */
}
.o-acc__btn i::before,
.o-acc__btn i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform .3s ease, background-color .3s ease;
}
.o-acc__btn i::after { transform: rotate(90deg); }
.o-acc__btn[aria-expanded="true"] i { background: var(--circle-blue); border-color: transparent; }
.o-acc__btn[aria-expanded="true"] i::before,
.o-acc__btn[aria-expanded="true"] i::after { background: #fff; }
.o-acc__btn[aria-expanded="true"] i::after { transform: rotate(0deg); }

/* 開閉：1) 枠が下へゆっくり伸びる 2) 文字がフェードイン */
.o-acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.4, 0, .2, 1); }
.o-acc__panel > div { min-height: 0; overflow: hidden; }
.o-acc__panel p { padding: 0 44px 16px 0; font-weight: 300; line-height: 1.8; opacity: 0; transition: opacity .2s ease; }
.o-acc__btn[aria-expanded="true"] + .o-acc__panel { grid-template-rows: 1fr; }
.o-acc__btn[aria-expanded="true"] + .o-acc__panel p { opacity: 1; transition: opacity .5s ease .5s; }

.o-dcard--guide {
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px 20px;
  background: var(--color-bg-info);
  border: 0;
  text-align: center;
}
.o-dcard__guide-title { font-family: var(--font-heading); font-size: 20px; line-height: 1.5; letter-spacing: .06em; color: var(--color-text); }
.o-dcard__guide-text { font-weight: 300; line-height: 1.8; }

/* ---------- RELATED ---------- */
.o-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 11px; }
.o-rcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 16px 12px 18px;
  background: #fff;
  border: 2px solid var(--color-line);
  border-radius: var(--radius-md);
  text-align: center;
}
.o-rcard img { width: auto; height: 82px; }
.o-rcard__title { font-family: var(--font-heading); font-size: 15px; line-height: 1.45; letter-spacing: .04em; color: var(--color-text); }
.o-rcard__text { font-size: 12px; line-height: 1.7; text-align: left; }
.o-rcard__more {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* c-btn と同じルール：文字は左から22px、矢印は右から16px */
  width: 100%;
  max-width: 180px;
  min-height: 40px;
  margin-top: auto;
  padding-left: 22px;
  padding-bottom: 1.5px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .06em;
  transition: background-color .2s ease;
}
.o-rcard__more svg { position: absolute; right: 16px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; transition: transform .2s ease; }
.o-rcard:hover .o-rcard__more { background: var(--color-primary-dark); }
.o-rcard:hover .o-rcard__more svg { transform: translateX(4px); }

/* ---------- 受診の案内 ---------- */
.o-urgent { max-width: 920px; margin: 0 auto; padding-bottom: 14px; } /* 字面基準で上下の余白をそろえる（上25 / 下25） */
.o-urgent .c-info-box__title { margin-bottom: 8px; } /* 見出し→チェック 18 */
.o-urgent .c-checklist { display: grid; gap: 4px; }
.o-urgent__note { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--color-line); font-size: 14px; line-height: 1.8; }
.o-urgent__tel { margin-left: .6em; font-family: var(--font-tel); font-size: 18px; font-weight: 700; letter-spacing: .04em; color: var(--color-text-sub); white-space: nowrap; }
.o-cta { padding-bottom: 8px; }
.o-cta__body { margin-top: 56px; text-align: center; }
.o-cta__title { font-family: var(--font-heading); font-size: calc(5.6 * var(--vw)); line-height: 1.55; letter-spacing: .06em; color: var(--color-heading); }
.o-cta__text { margin-top: 14px; font-size: 14px; line-height: 1.8; }
.o-cta__time { margin: 0 .3em; font-family: var(--font-tel); font-size: 1.4em; font-weight: 700; color: var(--color-primary); }
.o-cta__btns { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 22px; }

/* ---------- 表示エフェクト ---------- */
/* FV：①文字ブロック → ②画像 → ③丸 の順に読み込み時フェードイン */
@keyframes oUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes oFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes oPop { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
.o-in-1 { animation: oUp .9s cubic-bezier(.22, .7, .2, 1) .2s both; }
.o-in-2 { animation: oFade 1s ease .8s both; }
.o-in-3 { animation: oPop .8s cubic-bezier(.22, .7, .2, 1) 1.5s both; }

/* スクロール：JSが有効なときだけ初期状態を隠す（.js は <head> で付与） */
.js [data-reveal="head"] > .c-label-en { opacity: 0; filter: blur(10px); transition: opacity .9s ease, filter .9s ease; }
.js [data-reveal="head"] > .c-h2,
.js [data-reveal="head"] > .c-section-head__lead { opacity: 0; transition: opacity .9s ease .55s; }
.js [data-reveal="head"].is-in > * { opacity: 1; filter: none; }

.js [data-reveal="flow"] > .o-step { opacity: 0; transform: translateX(-40px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .7, .2, 1); }
.js [data-reveal="flow"].is-in > .o-step { opacity: 1; transform: none; }
.js [data-reveal="flow"].is-in > .o-step:nth-child(2) { transition-delay: .3s; }
.js [data-reveal="flow"].is-in > .o-step:nth-child(3) { transition-delay: .6s; }

.js [data-reveal="related"] > li { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .7, .2, 1); }
.js [data-reveal="related"].is-in > li { opacity: 1; transform: none; }
.js [data-reveal="related"].is-in > li:nth-child(2) { transition-delay: .25s; }
.js [data-reveal="related"].is-in > li:nth-child(3) { transition-delay: .5s; }
.js [data-reveal="related"].is-in > li:nth-child(4) { transition-delay: .75s; }

.js [data-reveal="cta"] > .o-cta__title { opacity: 0; filter: blur(10px); transition: opacity .9s ease, filter .9s ease; }
.js [data-reveal="cta"] > .o-cta__text,
.js [data-reveal="cta"] > .o-cta__btns { opacity: 0; transition: opacity .9s ease .6s; }
.js [data-reveal="cta"].is-in > * { opacity: 1; filter: none; }

/* 痛む場所ボタン：表示時に1→5の順で1回だけ反転 */
@keyframes oPillFlash {
  0%, 100% { background: #fff; color: var(--color-primary); border-color: var(--color-line); }
  35%, 60% { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
}
[data-reveal="parts"].is-in .o-pill { animation: oPillFlash .7s ease both; }
[data-reveal="parts"].is-in li:nth-child(1) .o-pill { animation-delay: .2s; }
[data-reveal="parts"].is-in li:nth-child(2) .o-pill { animation-delay: .45s; }
[data-reveal="parts"].is-in li:nth-child(3) .o-pill { animation-delay: .7s; }
[data-reveal="parts"].is-in li:nth-child(4) .o-pill { animation-delay: .95s; }
[data-reveal="parts"].is-in li:nth-child(5) .o-pill { animation-delay: 1.2s; }

/* 文字詰め：このページ固有の見出し・ボタンもフォント内蔵のプロポーショナル詰め（palt） */
.o-fv__title, .o-fv__copy, .o-dcard__title, .o-step__title, .o-rcard__title, .o-rcard__more,
.o-cta__title, .o-pill, .o-acc__btn {
  font-feature-settings: "palt";
  font-kerning: normal;
}
.o-dcard__en { font-kerning: normal; }

/* 主な疾患の丸写真：同じ行の①②の順にブラーフェードイン（遅延 --d は page.js が設定） */
.js .o-dcard__thumb { opacity: 0; filter: blur(10px); transition: opacity 1.2s ease var(--d, 0s), filter 1.2s ease var(--d, 0s); }
.js .o-dcard__thumb.is-in { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .js .o-dcard__thumb { opacity: 1 !important; filter: none !important; }
  .o-in-1, .o-in-2, .o-in-3, [data-reveal="parts"].is-in .o-pill { animation: none !important; }
  .js [data-reveal] > *, .js [data-reveal] > li { opacity: 1 !important; filter: none !important; transform: none !important; }
  .o-acc__panel, .o-acc__panel p { transition: none !important; }
}

/* ---------- 小さい端末（〜359px） ---------- */
@media (max-width: 359px) {
  .o-pill { padding: 0 12px 0 16px; font-size: 14px; }
  .o-related { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Tablet 768px〜1023px
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  :root { --sec-top: 84px; --sec-bottom: 84px; --label-to-title: 12px; --title-to-content: 40px; }
  .o-fv { padding: 140px 0 64px; }
  .o-fv__inner { padding-inline: var(--gutter); }
  .o-fv__address { top: -126px; right: 26px; font-size: 12px; }
  .o-fv__title { font-size: 44px; }
  .o-fv__copy { font-size: 22px; }
  .o-fv__photo { aspect-ratio: 16 / 9; }
  .o-symptoms .c-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .o-symptoms .c-checklist li + li { margin-top: 0; }
  .o-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .o-disease { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .o-related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .o-cta__title { font-size: 26px; }
  .o-cta__btns { flex-direction: row; justify-content: center; }
}

/* ==========================================================================
   PC 1024px〜（calc(N * var(--u)) = 1400pxカンプ上の N px）
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --sec-top: calc(96 * var(--u));
    --sec-bottom: calc(96 * var(--u));
    --label-to-title: calc(14 * var(--u));
    --title-to-content: calc(52 * var(--u));
  }
  .o-head .c-section-head__lead { margin-top: calc(18 * var(--u)); }

  /* FV */
  .o-fv { padding: calc(190 * var(--u)) 0 calc(72 * var(--u)); }
  .o-fv__inner { width: calc(1200 * var(--u)); margin-inline: auto; padding: 0; }
  .o-fv__address { top: calc(-176 * var(--u)); right: 0; gap: calc(6 * var(--u)); font-size: max(12px, calc(14 * var(--u))); letter-spacing: .08em; }
  .o-fv__address svg { width: calc(11 * var(--u)); height: calc(15 * var(--u)); }
  .o-fv__cols { display: grid; grid-template-columns: minmax(0, 1fr) calc(600 * var(--u)); gap: calc(72 * var(--u)); align-items: center; }
  .o-fv__label { font-size: calc(20 * var(--u)); letter-spacing: .1em; }
  .o-fv__title { margin-top: calc(14 * var(--u)); font-size: calc(56 * var(--u)); letter-spacing: .08em; }
  .o-fv__copy { margin-top: calc(14 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.5; }
  .o-fv__text { margin-top: calc(18 * var(--u)); font-size: max(12px, calc(15 * var(--u))); line-height: 1.8; }
  .o-fv__visual { margin-top: 0; }
  .o-fv__photo { aspect-ratio: 600 / 414; border-radius: calc(20 * var(--u)); }
  .o-fv__circle {
    position: absolute;
    top: 50%;
    left: calc(-82 * var(--u));
    display: flex;
    width: calc(164 * var(--u));
    margin-top: calc(-82 * var(--u));
    gap: calc(8 * var(--u));
    padding-bottom: calc(4 * var(--u));
    background: var(--circle-blue);
  }
  .o-fv__circle::before { inset: calc(-9 * var(--u)); border-color: var(--circle-ring); }
  .o-fv__circle .c-circle__title { font-size: calc(17 * var(--u)); }
  .o-fv__circle .c-circle__icon { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  .o-fv__circle .c-circle__en { margin-top: calc(2 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 300; }

  /* Breadcrumb / parts */
  .o-breadcrumb { padding-block: calc(22 * var(--u)) 0; overflow: visible; }
  .o-breadcrumb ol { font-size: max(12px, calc(13 * var(--u))); }
  .o-parts { display: flex; align-items: center; justify-content: center; gap: calc(28 * var(--u)); padding-block: calc(56 * var(--u)) 0; }
  .o-parts__label { margin: 0; font-size: max(12px, calc(15 * var(--u))); }
  .o-parts__list { gap: calc(16 * var(--u)); }
  .o-pill { gap: calc(10 * var(--u)); min-height: calc(46 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(26 * var(--u)); font-size: max(12px, calc(16 * var(--u))); }
  .o-pill svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

  /* SYMPTOMS */
  .o-symptoms { max-width: none; width: calc(920 * var(--u)); padding: calc(32 * var(--u)) calc(48 * var(--u)); }
  .o-symptoms .c-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(48 * var(--u)); }
  .o-symptoms .c-checklist li { white-space: normal; padding-right: 0; }

  /* FLOW */
  .o-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(40 * var(--u)); margin-top: calc(96 * var(--u)); }
  .o-step { gap: calc(14 * var(--u)); padding: calc(112 * var(--u)) calc(32 * var(--u)) calc(36 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-step__circle { top: calc(-46 * var(--u)); width: calc(124 * var(--u)); height: calc(124 * var(--u)); margin-left: calc(-62 * var(--u)); gap: calc(8 * var(--u)); padding-top: calc(4 * var(--u)); }
  .o-step__circle::before { inset: calc(-9 * var(--u)); }
  .o-step__circle svg { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
  .o-step__circle span { font-size: max(11px, calc(14 * var(--u))); }
  .o-step + .o-step::before { /* カード間の矢印 */
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-36 * var(--u));
    width: calc(32 * var(--u));
    height: calc(32 * var(--u));
    margin-top: calc(-16 * var(--u));
    border-radius: 50%;
    background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 44% no-repeat;
    box-shadow: 0 0 0 calc(4 * var(--u)) var(--color-bg-light);
  }
  .o-step__title { padding-bottom: calc(14 * var(--u)); font-size: calc(24 * var(--u)); }
  .o-step__text { font-size: max(12px, calc(15 * var(--u))); }
  .o-chips { gap: calc(8 * var(--u)); }
  .o-chips li { padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }

  /* DISEASE */
  .o-disease { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
  .o-dcard { padding: calc(28 * var(--u)) calc(32 * var(--u)) calc(14 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-dcard__head { gap: calc(20 * var(--u)); padding-bottom: calc(16 * var(--u)); }
  .o-dcard__thumb { padding: calc(6 * var(--u)); }
  .o-dcard__thumb img { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
  .o-dcard__title { font-size: calc(26 * var(--u)); }
  .o-dcard__en { margin-top: calc(8 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
  .o-acc__btn { gap: calc(20 * var(--u)); min-height: calc(72 * var(--u)); padding: calc(18 * var(--u)) 0; font-size: calc(19 * var(--u)); }
  .o-acc__btn i { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .o-acc__panel p { padding: 0 calc(56 * var(--u)) calc(18 * var(--u)) 0; font-size: max(12px, calc(15 * var(--u))); }
  .o-dcard--guide { gap: calc(16 * var(--u)); padding: calc(40 * var(--u)) calc(36 * var(--u)); }
  .o-dcard__guide-title { font-size: calc(24 * var(--u)); }
  .o-dcard__guide-text { font-size: max(12px, calc(15 * var(--u))); }
  .o-dcard--guide .c-btn { margin-top: calc(6 * var(--u)); }

  /* RELATED */
  .o-related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
  .o-rcard { gap: calc(12 * var(--u)); padding: calc(28 * var(--u)) calc(24 * var(--u)); border-width: 2px; border-radius: calc(20 * var(--u)); }
  .o-rcard img { height: calc(130 * var(--u)); }
  .o-rcard__title { font-size: calc(22 * var(--u)); letter-spacing: .06em; }
  .o-rcard__text { font-size: max(12px, calc(14 * var(--u))); line-height: 1.75; }
  .o-rcard__more { width: calc(180 * var(--u)); max-width: none; min-height: calc(40 * var(--u)); padding-left: calc(20 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
  .o-rcard__more svg { right: calc(14 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-top: calc(-9 * var(--u)); }
  .o-rcard:hover .o-rcard__more svg { transform: translateX(calc(4 * var(--u))); }

  /* 受診の案内 */
  .o-urgent { max-width: none; width: calc(920 * var(--u)); padding: calc(32 * var(--u)) calc(48 * var(--u)) calc(27.5 * var(--u)); }
  .o-urgent .c-info-box__title { margin-bottom: calc(3 * var(--u)); }
  .o-urgent .c-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 calc(48 * var(--u)); }
  .o-urgent__note { margin-top: calc(13 * var(--u)); padding-top: calc(12.5 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
  .o-urgent__tel { font-size: calc(18 * var(--u)); }
  .o-cta { padding-bottom: calc(24 * var(--u)); }
  .o-cta__body { margin-top: calc(88 * var(--u)); }
  .o-cta__title { font-size: calc(32 * var(--u)); line-height: 1.5; }
  .o-cta__text { margin-top: calc(18 * var(--u)); font-size: max(12px, calc(15 * var(--u))); }
  .o-cta__btns { flex-direction: row; justify-content: center; gap: calc(16 * var(--u)); margin-top: calc(28 * var(--u)); }
}

/* ==========================================================================
   診療ページ共通の追加部品（骨粗しょう症・ハイドロリリース以降で共通）
   ========================================================================== */
.u-pc { display: none; }
/* 未確定の項目（【確認事項】）：推測で埋めず「確認中」と表示 */
.o-pending { display: inline-block; padding: 2px 10px; border: 1px dashed var(--color-line-gray); border-radius: 999px; font-size: 12px; letter-spacing: .06em; color: var(--color-text-sub); white-space: nowrap; background: #fff; }
.o-flow--5 .o-step__title { font-size: 19px; }
.o-faq { max-width: 920px; margin: 0 auto; padding: 4px 20px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-faq .o-acc:first-child { border-top: 0; }
.o-faq .o-acc__btn span { display: flex; align-items: baseline; gap: .7em; }
.o-faq__q, .o-faq__a { flex: none; font-family: var(--font-en); font-size: 1.15em; font-weight: 500; line-height: 1; color: var(--color-primary); }
.o-faq .o-acc__panel p { display: flex; align-items: baseline; gap: .8em; }
.o-faq__a { color: var(--color-secondary); }
@media (min-width: 768px) {
  .o-related--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .u-pc { display: inline; }
  .o-pending { padding: calc(3 * var(--u)) calc(14 * var(--u)); font-size: max(11px, calc(13 * var(--u))); }
  .o-flow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: calc(32 * var(--u)); }
  .o-flow--5 .o-step { padding: calc(108 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u)); }
  .o-flow--5 .o-step__circle { top: calc(-42 * var(--u)); width: calc(112 * var(--u)); height: calc(112 * var(--u)); margin-left: calc(-56 * var(--u)); }
  .o-flow--5 .o-step__circle svg { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .o-flow--5 .o-step__title { font-size: calc(20 * var(--u)); letter-spacing: .02em; }
  .o-flow--5 .o-step + .o-step::before { left: calc(-32 * var(--u)); width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(-14 * var(--u)); }
  .o-faq { max-width: none; width: calc(920 * var(--u)); padding: calc(8 * var(--u)) calc(48 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-related--3 { width: calc(900 * var(--u)); margin-inline: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.js [data-reveal="flow"].is-in > .o-step:nth-child(4) { transition-delay: .9s; }
.js [data-reveal="flow"].is-in > .o-step:nth-child(5) { transition-delay: 1.2s; }

/* 共通：基本情報の表（o-spec）・メッセージカード（o-message） */
/* 基本情報の表 */
.o-spec { max-width: 920px; margin: 0 auto; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.o-spec > div { display: grid; grid-template-columns: 7.5em 1fr; align-items: center; }
.o-spec > div + div { border-top: 1px solid var(--color-line); }
.o-spec dt { align-self: stretch; display: flex; align-items: center; padding: 14px 16px; background: var(--color-bg-info); font-family: var(--font-heading); font-weight: 400; letter-spacing: .06em; color: var(--color-heading-accent); font-feature-settings: "palt"; }
.o-spec dd { margin: 0; padding: 14px 16px; }

/* メッセージカード */
.o-message { max-width: 920px; margin: 0 auto; padding: 26px 22px 28px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); text-align: center; }
.o-message__title { font-family: var(--font-heading); font-size: 20px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--color-heading-accent); font-feature-settings: "palt"; }
.o-message__text { margin-top: 12px; font-weight: 300; line-height: 1.85; text-align: left; }

@media (min-width: 1024px) {
  .o-spec { max-width: none; width: calc(920 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-spec > div { grid-template-columns: calc(220 * var(--u)) 1fr; }
  .o-spec dt { padding: calc(20 * var(--u)) calc(32 * var(--u)); font-size: calc(18 * var(--u)); }
  .o-spec dd { padding: calc(20 * var(--u)) calc(32 * var(--u)); font-size: max(12px, calc(16 * var(--u))); }

  .o-message { max-width: none; width: calc(920 * var(--u)); padding: calc(40 * var(--u)) calc(64 * var(--u)) calc(44 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-message__title { font-size: calc(26 * var(--u)); }
  .o-message__text { margin-top: calc(16 * var(--u)); font-size: max(12px, calc(16 * var(--u))); text-align: center; }
}

.o-message--left .o-message__text { text-align: left !important; }
.o-message__text + .o-message__text { margin-top: 1em; }

/* 共通：ボックス内の注記（o-boxnote）・FLOW下の補足（o-flownote） */
/* ---------- SYMPTOMS：ボックス内の注記 ---------- */
.o-boxnote { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-line); font-size: 13px; line-height: 1.8; color: var(--color-text-sub); }

/* ---------- FLOW：処置時間・通院間隔 ---------- */
.o-flownote { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 28px; font-size: 13px; }
.o-flownote > div { display: flex; align-items: center; gap: 10px; }
.o-flownote dt { font-weight: 500; color: var(--color-heading-accent); }
.o-flownote dd { margin: 0; }

@media (min-width: 1024px) {
  .o-boxnote { margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
  .o-flownote { margin-top: calc(40 * var(--u)); gap: calc(10 * var(--u)) calc(40 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
}

/* 共通：小見出し（o-subhead）・受診サインの強調ボックス（o-signs） */
.o-subhead { margin: 8px 0 -20px; font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: .06em; text-align: center; color: var(--color-heading-accent); font-feature-settings: "palt"; }
.o-signs { background: #fff; border: 2px solid var(--color-secondary); }
.o-message .o-message__text:first-child { margin-top: 0; }
@media (min-width: 1024px) {
  .o-subhead { margin: calc(8 * var(--u)) 0 calc(-24 * var(--u)); font-size: calc(22 * var(--u)); }
}

/* 共通：長いページ名のFVタイトル（リハビリテーション・子どものケガ・成長期） */
@media (min-width: 768px) { .o-fv__title--long { font-size: 38px; } }
@media (min-width: 1024px) { .o-fv__title--long { font-size: calc(48 * var(--u)); letter-spacing: .04em; } }

/* CTA：直前に急患ボックスが無いページは、水色セクション下端→見出しの余白を「カード下端→水色下端」と同じ（セクション余白）にそろえる */
.o-cta .l-inner > .o-cta__body:first-child { margin-top: 0; }

/* ==========================================================================
   診療ページ以外の下層ページ共通部品（当院について／特徴／初めての方へ／症状から探す／設備／料金／コラム／アクセス）
   ========================================================================== */
/* 当院について：大切にしていること（3枚のカード） */
.o-values { display: grid; gap: 14px; max-width: 920px; margin: 0 auto; counter-reset: val; }
.o-val { position: relative; padding: 26px 22px 24px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-val::before { counter-increment: val; content: "0" counter(val); display: block; margin-bottom: 8px; font-family: var(--font-tel); font-size: 22px; font-weight: 700; letter-spacing: .04em; color: var(--color-primary); }
.o-val p { font-weight: 300; line-height: 1.85; }
.o-sign { margin-top: 18px; text-align: right; font-family: var(--font-heading); font-size: 16px; letter-spacing: .08em; color: var(--color-heading-accent); }
.o-sign small { margin-right: .8em; font-size: 12px; color: var(--color-text-sub); }

/* 当院の特徴：番号つきの項目 */
.o-feats { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.o-feat { scroll-margin-top: 96px; display: grid; grid-template-columns: 64px 1fr; gap: 6px 16px; align-items: start; padding: 22px 20px 22px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-feat__icon { grid-row: 1 / span 3; width: 64px; height: 64px; object-fit: contain; }
.o-feat__num { font-family: var(--font-tel); font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--color-primary); }
.o-feat__title { font-family: var(--font-heading); font-size: 19px; font-weight: 400; line-height: 1.5; letter-spacing: .04em; color: var(--color-heading); font-feature-settings: "palt"; }
.o-feat__text { font-weight: 300; line-height: 1.85; }
.o-feat__text .o-pending { margin-left: .4em; }
.o-feat__link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--color-primary); }
.o-feat__link svg { width: 18px; height: 18px; transition: transform .3s ease; }
.o-feat__link:hover svg { transform: translateX(4px); }

/* 症状から探す：部位ごとのリンク一覧 */
.o-symgroups { display: grid; gap: 22px; max-width: 920px; margin: 0 auto; }
.o-symgroup__title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-family: var(--font-heading); font-size: 18px; font-weight: 400; line-height: 1.4; letter-spacing: .06em; color: var(--color-heading-accent); font-feature-settings: "palt"; }
.o-symgroup__title::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color-secondary); box-shadow: 0 0 0 4px rgba(2, 90, 165, .14); }
.o-symgroup__title::after { content: ""; flex: 1; height: 1px; background: var(--color-line); }
.o-symlist { background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.o-symlist li + li { border-top: 1px solid var(--color-line); }
.o-symlist a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 16px; line-height: 1.6; transition: background-color .25s ease; }
.o-symlist a:hover { background: var(--color-bg-info); }
.o-symlist__to { grid-column: 1; font-size: 12px; color: var(--color-text-sub); }
.o-symlist svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--color-primary); transition: transform .3s ease; }
.o-symlist a:hover svg { transform: translateX(4px); }

/* 検査・医療設備 */
.o-equips { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.o-equip { padding: 24px 22px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-equip__icon { display: block; width: 72px; height: 72px; margin-bottom: 10px; object-fit: contain; }
.o-equip__title { margin-bottom: 8px; font-family: var(--font-heading); font-size: 19px; font-weight: 400; letter-spacing: .04em; color: var(--color-heading); font-feature-settings: "palt"; }
.o-equip p { font-weight: 300; line-height: 1.85; }
.o-equip .o-feat__link { margin-top: 10px; }

/* 診療内容・料金 */
.o-fee-note { max-width: 920px; margin: 14px auto 0; font-size: 13px; line-height: 1.8; color: var(--color-text-sub); }
.o-spec dd .o-pending { margin-left: .4em; }

/* 医療コラム */
.o-cols { display: grid; gap: 16px; max-width: 980px; margin: 0 auto; }
.o-col { display: block; overflow: hidden; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-col img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7.2; object-fit: cover; }
.o-col__body { padding: 16px 18px 20px; }
.o-col__tag { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: var(--color-bg-info); font-size: 12px; color: var(--color-heading-accent); }
.o-col__title { font-weight: 500; line-height: 1.65; }
.o-collist { max-width: 980px; margin: 22px auto 0; background: #fff; border-radius: var(--radius-md); overflow: hidden; }
.o-collist li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 18px; line-height: 1.65; }
.o-collist li + li { border-top: 1px solid var(--color-line); }
.o-collist small { font-size: 12px; color: var(--color-text-sub); }

/* 初めての方へ：急なケガの案内 */
.o-first-urgent { max-width: 920px; margin: 0 auto; }

@media (min-width: 768px) {
  .o-values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .o-equips, .o-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-symlist a { grid-template-columns: 1fr 15em 18px; }
  .o-symlist__to { grid-column: 2; grid-row: 1; text-align: right; }
  .o-symlist svg { grid-column: 3; grid-row: 1; }
  .o-collist li { grid-template-columns: 1fr 14em; align-items: center; }
}
@media (min-width: 1024px) {
  .o-values { width: calc(1000 * var(--u)); max-width: none; gap: calc(20 * var(--u)); }
  .o-val { padding: calc(32 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-val::before { font-size: calc(26 * var(--u)); }
  .o-val p { font-size: max(13px, calc(15 * var(--u))); }
  .o-sign { margin-top: calc(24 * var(--u)); font-size: calc(18 * var(--u)); }
  .o-feats { width: calc(1000 * var(--u)); max-width: none; gap: calc(20 * var(--u)); }
  .o-feat { grid-template-columns: calc(88 * var(--u)) 1fr auto; gap: calc(4 * var(--u)) calc(28 * var(--u)); align-items: center; padding: calc(30 * var(--u)) calc(36 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-feat__icon { grid-row: 1 / span 2; width: calc(88 * var(--u)); height: calc(88 * var(--u)); }
  .o-feat__num { font-size: calc(14 * var(--u)); }
  .o-feat__title { font-size: calc(24 * var(--u)); }
  .o-feat__text { grid-column: 2; font-size: max(13px, calc(15 * var(--u))); }
  .o-feat__link { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; font-size: max(13px, calc(15 * var(--u))); white-space: nowrap; }
  .o-symgroups { width: calc(920 * var(--u)); max-width: none; gap: calc(32 * var(--u)); }
  .o-symgroups + .o-fee-note { width: calc(920 * var(--u)); max-width: none; margin-top: calc(18 * var(--u)); font-size: max(12px, calc(13 * var(--u))); }
  .o-symgroup__title { gap: calc(16 * var(--u)); margin-bottom: calc(14 * var(--u)); font-size: calc(21 * var(--u)); }
  .o-symgroup__title::before { width: calc(12 * var(--u)); height: calc(12 * var(--u)); box-shadow: 0 0 0 calc(5 * var(--u)) rgba(2, 90, 165, .14); }
  .o-symlist { border-radius: calc(20 * var(--u)); }
  .o-symlist a { padding: calc(18 * var(--u)) calc(28 * var(--u)); font-size: max(13px, calc(16 * var(--u))); }
  .o-symlist__to { font-size: max(11px, calc(13 * var(--u))); }
  .o-equips { width: calc(1000 * var(--u)); max-width: none; gap: calc(24 * var(--u)); }
  .o-equip { padding: calc(36 * var(--u)) calc(34 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-equip__icon { width: calc(84 * var(--u)); height: calc(84 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .o-equip__title { font-size: calc(24 * var(--u)); }
  .o-equip p { font-size: max(13px, calc(15 * var(--u))); }
  .o-cols { width: calc(1100 * var(--u)); max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(24 * var(--u)); }
  .o-col { border-radius: calc(20 * var(--u)); }
  .o-col__body { padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)); }
  .o-col__title { font-size: max(13px, calc(16 * var(--u))); }
  .o-collist { width: calc(1100 * var(--u)); max-width: none; border-radius: calc(20 * var(--u)); }
  .o-collist li { padding: calc(16 * var(--u)) calc(28 * var(--u)); font-size: max(13px, calc(15 * var(--u))); }
}
.o-symlist { border: 2px solid var(--color-line); }
@media (min-width: 1024px) { .o-symlist { border-width: 2px; } }

/* 「あわせてご覧ください」セクションの背景（全診療ページ共通） */
.o-section.l-section--blue#related { background: #f7f7f7; }

/* 「このページの内容」のピル：文字（カナ・漢字）の見た目の中心を、矢印アイコンと同じ天地中央にそろえる */
.o-pill { padding-top: .2em; }
.o-pill svg { margin-top: -.2em; }

/* 文の単位でまとまりを保つ（強制改行なし）：途中で折り返す場合は行の長さをそろえ、1文字だけ残るのを防ぐ */
.u-nb { display: inline-block; text-wrap: balance; word-break: auto-phrase; }
.o-fv__copy { word-break: auto-phrase; }
/* 1行で収めたい長い見出し（スマホは画面幅に合わせて縮める） */
@media (max-width: 767.98px) { .o-fv__title--one { font-size: 7.6vw; white-space: nowrap; } }

/* CTA下の余白：直後に「アクセス・診療情報」が続かず、フッターに直接つながるページ（診療時間・アクセス）は、セクションの下余白にそろえる */
.o-cta:last-child { padding-bottom: var(--sec-bottom); }
@media (min-width: 1024px) { .o-cta:last-child { padding-bottom: var(--sec-bottom); } }

/* 「確認中」を含む表は、背景を#f7f7f7にする */
.o-spec:has(.o-pending) { background: #f7f7f7; }

/* 文節単位で折り返す（文節の途中では改行しない） */
.u-ph { white-space: nowrap; }
.u-phs { word-break: normal; line-break: strict; }

/* 公開済み記事カード（リンク） */
.o-col--link { color: inherit; text-decoration: none; transition: border-color .25s ease; }
.o-col--link img { transition: transform .5s ease; }
.o-col--link:hover { border-color: var(--color-primary); }
.o-col--link:hover img { transform: scale(1.04); }
.o-col--link:hover .o-col__title { color: var(--color-primary); }

/* CTA背景：院内写真（リハビリ室）を淡く敷く
   （外観イラスト版は assets/images/cta-scene.svg に保管） */
.o-section.o-cta {
  background:
    linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.75) 55%, rgba(230,240,246,.78) 100%),
    url(../../../assets/images/mv-main.webp) center 62% / cover no-repeat;
  padding-bottom: var(--sec-bottom);
}