/* =========================================================
   検診クリニックHP v3 「白磁」デザイン
   コンセプト: 上質医療の文法（明朝見出し・セリフ英字・余白・淡藍鼠・写真主役）
   参照: TCD BIRTH(構図・余白) + SERUM(額装) + 自院の実データ表 — 色・コピーは独自
   ブランド確定時は :root の色を差し替えるだけで全体に反映される
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600&family=Cormorant+Garamond:wght@500;600&family=IBM+Plex+Sans+JP:wght@400;500;700&family=IBM+Plex+Mono:wght@500&display=swap");

:root {
  --c-ink: #2B3438;          /* 墨: 見出し・本文の芯 */
  --c-ink-strong: #1D2529;
  --c-accent: #2A8FA5;       /* teal: 差し色（2026-08-26 ご予約ページに合わせ全体を teal 系へ） */
  --c-accent-deep: #1A7288;  /* CTA用の深teal（白文字 5.5:1） */
  --c-accent-pale: #CFE3E8;  /* 淡teal: ラベル帯・罫 */
  --c-wash: #E6F3F6;         /* teal のうす塗り */
  --c-bg: #FAFCFC;           /* 冷白（旧: 白磁 #FBFAF8） */
  --c-bg-alt: #EEF5F7;
  --c-text: #333B3E;
  --c-text-weak: #6B7478;
  --c-line: #D9E6EA;
  --c-teal: #2A8FA5; --c-teal-deep: #1E8296; --c-teal-pale: #E6F3F6; --c-teal-line: #CFE3E8;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-6: 48px; --sp-8: 64px; --sp-12: 96px;

  --fs-body: 18px;   /* 高齢者対応: 本文18px */
  --fs-note: 14px;
  --fs-h1: 40px;
  --fs-h2: 30px;
  --fs-h3: 21px;

  --tap-min: 56px;
  --radius: 12px;    /* 角丸（2026-08-26 teal 化に合わせ 0→12） */

  --font-sans: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-en: "Cormorant Garamond", Georgia, serif;
  --font-mono: var(--font-sans); /* 2026-10-16 数字の書体を本文と統一（旧: IBM Plex Mono） */

  /* v1/v2変数名のエイリアス（inline style等の参照切れ防止） */
  --c-primary: var(--c-accent-deep);
  --c-primary-dark: var(--c-ink-strong);
  --c-red: var(--c-accent-deep);
  --c-red-dark: var(--c-ink-strong);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--c-text);
  background: var(--c-bg);
  letter-spacing: .02em;
}

img, svg { max-width: 100%; display: block; }

a { color: var(--c-accent-deep); }

.num, time { font-family: var(--font-sans); }
/* 数字は高さのそろった字形で統一（2026-10-16） */
body { font-variant-numeric: lining-nums proportional-nums; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--sp-3); }

/* 英字の小見出し（セクションの上に置く） */
.en-eyebrow {
  display: block; text-align: center;
  font-family: var(--font-en); font-weight: 500;
  font-size: 34px; letter-spacing: .18em; color: var(--c-accent);
  line-height: 1.2; margin-bottom: 4px;
}

/* ---------- ヘッダー（静かな一本線） ---------- */
.site-header {
  background: rgba(251, 250, 248, .96);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: blur(4px);
}
.header-inner {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3);
  max-width: 1200px; margin: 0 auto;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 42px; height: 42px; flex: none; }
.brand-logo { height: 52px; width: auto; display: block; } /* ロゴ画像（2026-08-26） */
.footer-logo { height: 64px; width: auto; display: block; margin-bottom: 12px; }
.brand-name {
  font-family: var(--font-serif); font-weight: 600;
  font-size: 21px; color: var(--c-ink); line-height: 1.3; letter-spacing: .06em;
}
.brand-sub {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 11.5px; color: var(--c-text-weak); display: block; letter-spacing: .04em;
}

.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.header-tel {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  text-decoration: none; color: var(--c-text);
  min-height: var(--tap-min); justify-content: center;
}
.header-tel .tel-number { font-size: 19px; font-weight: 500; color: var(--c-ink); font-family: var(--font-mono); letter-spacing: .02em; }
.header-tel .tel-hours { font-size: 11.5px; color: var(--c-text-weak); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--c-ink);
  color: var(--c-ink);
  font-size: 15px; font-weight: 500; padding: 8px 16px; min-height: 48px;
  cursor: pointer; letter-spacing: .1em;
}

.global-nav { width: 100%; }
.global-nav ul { display: flex; gap: var(--sp-4); list-style: none; flex-wrap: wrap; justify-content: center; }
.global-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--c-text);
  font-weight: 500; font-size: 15.5px; letter-spacing: .08em;
  border-bottom: 1px solid transparent;
}
.global-nav a:hover { color: var(--c-accent-deep); border-bottom-color: var(--c-accent-pale); }
.global-nav a[aria-current="page"] { color: var(--c-accent-deep); border-bottom-color: var(--c-accent-deep); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); padding: 14px 40px;
  border-radius: 999px; font-size: 18px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none; text-align: center;
  line-height: 1.4; letter-spacing: .12em;
}
.btn-primary { background: var(--c-accent-deep); color: #fff; }
.btn-primary:hover { background: #12617A; }
.btn-secondary {
  background: rgba(255,255,255,.92); color: var(--c-ink);
  border: 1px solid var(--c-ink);
}
.btn-secondary:hover { background: var(--c-wash); }
.btn-ghost {
  background: rgba(255,255,255,.9); color: var(--c-ink);
  border: 1px solid var(--c-line);
}
.btn-ghost:hover { background: #fff; border-color: var(--c-ink); }
.btn-large { font-size: 19px; padding: 18px 56px; }
.btn-tel { gap: 14px; }
.btn-tel .btn-tel-num { font-family: var(--font-mono); letter-spacing: .04em; font-weight: 600; }
.btn-block { display: flex; width: 100%; }

/* ---------- セクション共通 ---------- */
.section { padding: var(--sp-12) 0; }
.section-alt { background: var(--c-bg-alt); }
.section > .container > h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h2); color: var(--c-ink);
  text-align: center; letter-spacing: .12em;
  margin-bottom: var(--sp-6);
}
.section > .container > h2 .jp-sub,
h2 .jp-sub {
  display: block; font-family: var(--font-sans); font-weight: 400;
  font-size: 14px; color: var(--c-text-weak); letter-spacing: .14em; margin-top: 6px;
}
.section-lead { margin-bottom: var(--sp-6); max-width: 40em; margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- 写真スロット（差し替え前提の上品なプレースホルダ） ---------- */
.ph {
  position: relative; overflow: hidden;
  background: linear-gradient(155deg, #EEF2F1 0%, #F7F6F2 55%, #ECEFEE 100%);
}
.ph > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph .ph-note {
  position: absolute; right: 10px; bottom: 8px;
  font-size: 11px; color: #9AA4A6; letter-spacing: .08em;
}

/* ---------- FV（写真を右72%に大きく敷き、左端を白磁に溶かす。ロックアップは左寄せ・中央乗せはしない／2026-08-25） ---------- */
.hero { padding: 0; border-bottom: 1px solid var(--c-line); background: var(--c-bg); --hero-h: clamp(600px, 84vh, 860px); }
.hero-split { position: relative; display: block; min-height: var(--hero-h); overflow: hidden; background: var(--c-bg); }
.hero-photo { position: absolute; top: 0; bottom: 0; right: 0; width: 72%; z-index: 0; min-height: 0; overflow: hidden; /* 緩ズームのはみ出しをボックスで切る（左端の帯バグ修正 2026-08-26） */ }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 100% 62%; /* 右寄せ: 建物と看板を右に置き、左の空を地色へ溶かす */
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 9%, rgba(0,0,0,.45) 20%, #000 36%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.08) 9%, rgba(0,0,0,.45) 20%, #000 36%);
}
.hero-photo::after { content: none; } /* 白い被せは廃止（地との色差が縦線になる）→ 画像側のマスクで溶かす 2026-08-26 */
.hero-copy {
  position: relative; z-index: 1; min-height: var(--hero-h);
  display: flex; align-items: center; justify-content: flex-start;
  padding: var(--sp-8) var(--sp-6) var(--sp-8) max(var(--sp-3), calc((100vw - 1120px) / 2 + var(--sp-3)));
}
.hero-copy-inner { max-width: 540px; width: 100%; }
.hero-badge {
  font-family: var(--font-en); font-size: 16px; letter-spacing: .26em; font-variant-numeric: lining-nums;
  color: var(--c-accent-deep); text-transform: uppercase;
  margin-bottom: var(--sp-3); display: block;
}
.hero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h1); color: var(--c-ink); line-height: 1.6;
  letter-spacing: .08em; margin-bottom: var(--sp-3);
}
.hero-lockup img { display: block; width: 100%; max-width: 500px; height: auto; } /* キャッチコピー画像（2026-08-25） */
.hero-sub {
  font-size: 16px; color: var(--c-text); max-width: 30em;
  margin-bottom: var(--sp-4);
}
.hero-cta { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hero-sub-lead { display: block; font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: var(--c-ink); margin-bottom: 6px; letter-spacing: .02em; }
.hero-cta-img { flex-direction: column; gap: 6px; align-items: flex-start; }
.img-btn { display: block; width: 100%; max-width: 440px; border-radius: 999px; transition: transform .25s ease, filter .25s ease; }
.img-btn img { width: 100%; height: auto; display: block; }
.img-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.img-btn:active { transform: translateY(0) scale(.99); }
.img-btn:focus-visible { outline: 2px solid var(--c-accent-deep); outline-offset: 4px; }
.cta-note { font-size: var(--fs-note); color: var(--c-text-weak); width: 100%; margin-top: 4px; }

/* FV下: 開院データの静かな帯 */
.fact-strip { border-top: 1px solid var(--c-line); background: #fff; }
.fact-strip-inner {
  display: flex; flex-wrap: wrap; justify-content: center;
  max-width: 1120px; margin: 0 auto;
}
.fact-strip .fact {
  flex: 1 1 200px; text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border-left: 1px solid var(--c-line);
}
.fact-strip .fact:first-child { border-left: none; }
.fact-strip .fact .k { font-size: 12.5px; color: var(--c-text-weak); letter-spacing: .2em; display: block; }
.fact-strip .fact .v { font-family: var(--font-serif); font-weight: 600; font-size: 19px; color: var(--c-ink); letter-spacing: .06em; white-space: nowrap; }
.fact-strip .fact .v .num { font-size: 20px; font-family: var(--font-sans); font-weight: 600; letter-spacing: .04em; }

/* ---------- 写真タイルの導線（3枚） ---------- */
.tile-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2px; }
.tile {
  display: block; text-decoration: none; background: #fff;
  border: 1px solid var(--c-line);
}
.tile .ph { aspect-ratio: 4 / 2.6; }
.tile .tile-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--c-accent-pale); color: #fff;
  min-height: var(--tap-min);
  font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: .16em;
  color: var(--c-ink);
  background: linear-gradient(0deg, var(--c-wash), var(--c-wash));
}
.tile:hover .tile-label { background: var(--c-accent-pale); color: var(--c-ink-strong); }

/* ---------- 約束（中央の静かな3項） ---------- */
.promise-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--sp-6); text-align: center;
}
.promise .p-no {
  font-family: var(--font-en); font-size: 26px; color: var(--c-accent);
  letter-spacing: .1em; display: block; margin-bottom: 6px;
}
.promise h3 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h3); color: var(--c-ink); letter-spacing: .1em;
  margin-bottom: var(--sp-1);
}
.promise h3::after {
  content: ""; display: block; width: 28px; height: 1px;
  background: var(--c-accent-pale); margin: 12px auto 0;
}
.promise p { font-size: 16px; text-align: left; }

/* ---------- 料金・メニュー表 ---------- */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--c-line); }
table.plain { border-collapse: collapse; width: 100%; min-width: 620px; background: #fff; }
.table-scroll-note { display: none; font-size: 13px; color: var(--c-text-weak); margin-top: 8px; }
table.plain th, table.plain td { border-bottom: 1px solid var(--c-line); padding: 18px 20px; text-align: left; vertical-align: top; }
table.plain thead th {
  background: var(--c-wash); color: var(--c-ink); font-weight: 600;
  letter-spacing: .1em; font-size: 15px; border-bottom: 1px solid var(--c-accent-pale);
}
table.plain tbody th { font-family: var(--font-serif); font-weight: 600; color: var(--c-ink); letter-spacing: .04em; }
table.plain tr:last-child th, table.plain tr:last-child td { border-bottom: none; }
table.plain .price-cell { font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
table.plain .price-cell small { font-family: var(--font-sans); font-weight: 400; color: var(--c-text-weak); display: block; white-space: normal; }
table.plain .price-cell .free { color: var(--c-accent-deep); font-weight: 700; }

/* ---------- カード（サブページ互換） ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-3); }
.card {
  background: #fff; border: 1px solid var(--c-line);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-1);
}
.card h3 { font-family: var(--font-serif); font-size: var(--fs-h3); color: var(--c-ink); letter-spacing: .06em; }
.card .price { font-weight: 500; font-family: var(--font-mono); }
.card .price small { font-weight: 400; color: var(--c-text-weak); font-family: var(--font-sans); }
.card-img { overflow: hidden; margin-bottom: var(--sp-1); }

.feature { text-align: center; }
.feature .icon { width: 64px; height: 64px; margin: 0 auto var(--sp-2); }

/* ---------- 全幅写真バンド（ウィザード誘導） ---------- */
.photo-band { position: relative; }
.photo-band .ph { aspect-ratio: 12 / 4; min-height: 360px; width: 100%; }
.photo-band { overflow: hidden; }
.photo-band .band-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  text-align: left; padding: var(--sp-4) var(--sp-4) var(--sp-4) max(var(--sp-4), calc((100% - 1120px) / 2 + 24px));
  background: linear-gradient(90deg, rgba(43,52,56,.62) 0%, rgba(43,52,56,.34) 55%, rgba(43,52,56,.08) 100%);
}
.photo-band h2 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: var(--fs-h2); color: #fff; letter-spacing: .1em;
  margin-bottom: var(--sp-2);
}
.photo-band p { color: #fff; max-width: 30em; margin-bottom: var(--sp-4); font-size: 16px; }

/* 旧クラス互換（サブページの誘導帯） */
.wizard-banner {
  background: #fff; border: 1px solid var(--c-line);
  padding: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.wizard-banner h2 {
  font-family: var(--font-serif); color: var(--c-ink); border: none; padding: 0;
  margin-bottom: var(--sp-1); font-size: 24px; letter-spacing: .08em; text-align: left;
}
.wizard-banner p { margin-bottom: 0; max-width: 36em; }
.wizard-banner .btn { flex: none; }
.wizard-banner > div { flex: 1 1 380px; }

/* ---------- 企業・団体（左右分割） ---------- */
.split { display: flex; gap: var(--sp-8); align-items: center; flex-wrap: wrap; }
.split .split-text { flex: 1 1 400px; }
.split .split-text h2 {
  font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h2);
  color: var(--c-ink); letter-spacing: .1em; margin-bottom: var(--sp-3);
}
.split .split-visual { flex: 1 1 360px; }
.split .ph { aspect-ratio: 4 / 3; }

/* ---------- フッター（白磁の余白） ---------- */
.site-footer {
  background: var(--c-bg-alt); color: var(--c-text);
  border-top: 1px solid var(--c-line);
  padding: var(--sp-8) 0 var(--sp-4); margin-top: var(--sp-12);
}
.site-footer a { color: var(--c-accent-deep); }
.footer-grid { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.footer-col { flex: 1 1 240px; }
.footer-tel { font-size: 24px; font-weight: 500; text-decoration: none; font-family: var(--font-mono); color: var(--c-ink); }
.footer-note { font-size: var(--fs-note); color: var(--c-text-weak); letter-spacing: .04em; }

/* ---------- ご予約ページのヒーロー（2026-08-26） ---------- */
.yoyaku-hero { padding-bottom: var(--sp-6); background: var(--c-bg-alt); }
.yoyaku-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: center; }
.yoyaku-eyebrow { font-family: var(--font-en); font-style: italic; font-size: 22px; letter-spacing: .06em; color: var(--c-teal); display: block; margin-bottom: 4px; }
.yoyaku-title { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h1); letter-spacing: .14em; color: var(--c-ink); line-height: 1.3; margin-bottom: var(--sp-3); }
.yoyaku-lead { font-size: 17px; line-height: 2; color: var(--c-text); border-left: 3px solid var(--c-teal); padding-left: 16px; margin-bottom: var(--sp-4); }
.yoyaku-steps { list-style: none; display: none; gap: 10px; }
.yoyaku-steps li { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 10px 18px 10px 10px; }
.yoyaku-steps .ico, .yoyaku-contact > .ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--c-teal-pale); display: inline-flex; align-items: center; justify-content: center; }
.yoyaku-steps .ico svg, .yoyaku-contact > .ico svg { width: 24px; height: 24px; fill: none; stroke: var(--c-teal); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yoyaku-steps .t b { display: block; font-size: 16px; color: var(--c-ink); }
.yoyaku-steps .t small { display: block; font-size: 13px; color: var(--c-text-weak); line-height: 1.5; }
.yoyaku-hero-visual img { width: 100%; height: auto; display: block; }
.yoyaku-contact { margin-top: var(--sp-4); display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: 999px; padding: 14px 28px 14px 16px; }
.yoyaku-contact-text { flex: 1 1 320px; font-size: 15px; line-height: 1.6; margin: 0; }
.yoyaku-contact-text b { display: block; color: var(--c-ink); }
.yoyaku-contact-text span { color: var(--c-text-weak); font-size: 14px; }
.yoyaku-contact-tel { display: flex; align-items: center; gap: 18px; padding-left: 24px; border-left: 1px solid var(--c-line); }
.yoyaku-tel { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--c-teal); text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.yoyaku-hours { font-size: 14px; color: var(--c-text); white-space: nowrap; }
.yoyaku-hours small { display: block; font-size: 11px; color: var(--c-teal); background: var(--c-teal-pale); padding: 1px 8px; border-radius: 4px; width: max-content; margin-bottom: 2px; }
.yoyaku-tel-note { flex: 1 1 100%; font-size: 13px; color: var(--c-text-weak); margin: 0; padding-left: 60px; }
.yoyaku-wizard { padding-top: var(--sp-4); padding-bottom: var(--sp-12); background: var(--c-bg-alt); }
@media (max-width: 800px) {
  .yoyaku-hero-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .yoyaku-title { font-size: 34px; }
  .yoyaku-lead { font-size: 15.5px; }
  .yoyaku-steps { display: grid; }
  .yoyaku-hero-visual { max-width: 300px; margin: 0 auto; }
  .yoyaku-contact { border-radius: 20px; padding: 16px; }
  .yoyaku-contact-tel { border-left: 0; padding-left: 0; flex-wrap: wrap; gap: 6px 18px; }
  .yoyaku-tel { font-size: 24px; }
  .yoyaku-wizard .wizard-shell { padding: 22px 18px 20px; border-radius: 18px; }
  .yoyaku-tel-note { padding-left: 0; }
}

/* ---------- ご予約ページのウィザード: 画像トーン（teal グラデ・丸ピル・白カード）2026-08-26。他ページの白磁は不変 ---------- */
.yoyaku-wizard .wizard-shell { max-width: 680px; background: #fff; border: 1px solid #D9E9ED; border-radius: 24px; padding: 32px 32px 28px; box-shadow: 0 14px 40px rgba(30,130,150,.10); }
.yoyaku-wizard .wizard-progress .dot { border-radius: 4px; border-color: var(--c-teal-line); }
.yoyaku-wizard .wizard-progress .dot.done { background: var(--c-teal-deep); border-color: var(--c-teal-deep); }
.yoyaku-wizard .wizard-progress-label { color: var(--c-teal); }
.yoyaku-wizard .choice { border: 1.5px solid var(--c-teal-line); border-radius: 18px; transition: background .2s ease, border-color .2s ease, transform .15s ease; }
.yoyaku-wizard .choice::before { border-radius: 50%; border-color: #9CC3CC; }
.yoyaku-wizard .choice:hover { background: var(--c-teal-pale); border-color: var(--c-teal); transform: translateY(-1px); }
.yoyaku-wizard .choice:hover::before { background-color: var(--c-teal-deep); border-color: var(--c-teal-deep); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 10l4.5 5.5L16 4" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>'); }
.yoyaku-wizard .choice-muted { border-color: #E3EDF0; }
.yoyaku-wizard .btn { border-radius: 999px; letter-spacing: .06em; }
.yoyaku-wizard .btn-primary { background: var(--c-accent-deep); box-shadow: none; }
.yoyaku-wizard .btn-primary:hover { background: #12617A; }
.yoyaku-wizard .btn-secondary { border: 1.5px solid var(--c-teal-deep); color: var(--c-teal-deep); background: #fff; }
.yoyaku-wizard .btn-secondary:hover { background: var(--c-teal-pale); }
.yoyaku-wizard .btn-back { border-radius: 999px; border-color: var(--c-teal-line); }
.yoyaku-wizard .wizard-footer { border-top-color: #E3EDF0; }
.yoyaku-wizard .wizard-tel .tel-number { color: var(--c-teal-deep); }
.yoyaku-wizard .result-card { border: 1px solid #D9E9ED; border-radius: 18px; }
.yoyaku-wizard .result-card h3 { border-bottom-color: #D9E9ED; }
.yoyaku-wizard .result-note { background: var(--c-teal-pale); border-color: var(--c-teal-line); border-radius: 12px; }
.yoyaku-wizard .form-field input[type="text"], .yoyaku-wizard .form-field input[type="tel"], .yoyaku-wizard .form-field input[type="email"],
.yoyaku-wizard .form-field select { border: 1.5px solid var(--c-teal-line); border-radius: 12px; }
.yoyaku-wizard .form-field input:focus, .yoyaku-wizard .form-field select:focus { outline-color: var(--c-teal); }
.yoyaku-wizard .cal-day { border-radius: 10px; border-color: #E3EDF0; }
.yoyaku-wizard .cal-day .mark { color: var(--c-teal-deep); }
.yoyaku-wizard .cal-day.selected { border: 2px solid var(--c-teal-deep); background: var(--c-teal-pale); }
.yoyaku-wizard .confirm-row .btn-fix { border-radius: 999px; border-color: var(--c-teal-deep); color: var(--c-teal-deep); }
.yoyaku-wizard .done-number { border-radius: 18px; border-color: #D9E9ED; color: var(--c-teal-deep); }

/* ---------- アクセスページ（2026-08-26 「アクセス.png」採用・teal トーン） ---------- */
.access-hero { padding-bottom: var(--sp-6); background: var(--c-bg-alt); }
.access-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); align-items: center; margin-bottom: var(--sp-6); }
.access-title { margin: 0 0 var(--sp-3); }
.access-title img { display: block; width: 100%; max-width: 380px; height: auto; }
.access-hero-visual img { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.access-pill { display: flex; align-items: center; gap: 16px; background: #fff; border: 1.5px solid var(--c-teal-line); border-radius: 999px; padding: 12px 24px 12px 12px; margin-bottom: 12px; }
.access-pill .ico { flex: none; width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-accent-deep); }
.access-pill .ico svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.access-pill.access-info .ico { background: var(--c-teal-pale); }
.access-pill.access-info .ico svg { stroke: var(--c-teal-deep); }
.access-pill p { margin: 0; font-size: 16px; line-height: 1.7; border-left: 1px solid var(--c-teal-line); padding-left: 16px; }
.access-pill .k { font-size: 13px; color: var(--c-teal-deep); font-weight: 600; margin-right: 8px; }
.access-pill strong { font-size: 19px; color: var(--c-ink); letter-spacing: .02em; }
.access-pill .nw { white-space: nowrap; }
.access-pill .maplink { display: inline-block; margin-left: 12px; font-size: 14px; color: var(--c-teal-deep); white-space: nowrap; }
.access-pill mark { background: linear-gradient(transparent 55%, #CDEEF3 55%); color: var(--c-ink); font-weight: 700; }
.access-pill.access-info { border-radius: 28px; align-items: flex-start; }
.access-pill.access-info .ico { margin-top: 2px; }
.access-map { border: 1px solid var(--c-teal-line); border-radius: 20px; overflow: hidden; box-shadow: 0 14px 40px rgba(30,130,150,.10); background: #fff; }
.access-routes { background: var(--c-bg-alt); }
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.route-card { background: #fff; border: 1px solid #D9E9ED; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(30,130,150,.08); }
.route-card .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--c-teal-pale); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.route-card .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--c-teal-deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.route-card h3 { font-family: var(--font-serif); letter-spacing: .06em; color: var(--c-ink); margin-bottom: 8px; font-size: var(--fs-h3); }
.route-card p { font-size: 15.5px; }
.route-card .video-placeholder { border-radius: 14px; margin-top: 16px; }
.access-contact { margin-top: 0; }
@media (max-width: 800px) {
  .access-hero-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .access-hero-visual { order: -1; }
  .access-hero-visual img { max-width: 200px; }
  .access-title img { max-width: 260px; margin: 0 auto; }
  .access-pill { border-radius: 22px; padding: 12px 16px 12px 12px; gap: 12px; align-items: flex-start; }
  .access-pill .ico { width: 44px; height: 44px; }
  .access-pill p { font-size: 15px; padding-left: 12px; }
  .access-pill strong { font-size: 17px; display: block; }
  .access-pill .k { display: block; margin: 0 0 2px; }
  .access-pill .maplink { margin-left: 0; display: block; margin-top: 4px; }
  .route-grid { grid-template-columns: 1fr; }
  .route-card { padding: 18px; }
}

/* ---------- ウィザード（問診票の文法・白磁トーン） ---------- */
.wizard-shell { max-width: 640px; margin: 0 auto; }
.wizard-progress { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-1); }
.wizard-progress .dot {
  width: 28px; height: 8px;
  background: #fff; border: 1px solid var(--c-line); flex: none;
}
.wizard-progress .dot.done { background: var(--c-accent); border-color: var(--c-accent); }
.wizard-progress-label { font-size: 15px; color: var(--c-text-weak); margin-bottom: var(--sp-3); font-family: var(--font-mono); }

.wizard-q {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 600; margin-bottom: var(--sp-3); line-height: 1.6;
  color: var(--c-ink); letter-spacing: .04em;
}
.wizard-help { font-size: 16px; color: var(--c-text-weak); margin-bottom: var(--sp-3); }

.choice-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.choice {
  display: flex; align-items: center; gap: var(--sp-2);
  background: #fff; border: 1px solid var(--c-ink); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3); min-height: 72px;
  font-size: 20px; font-weight: 600; color: var(--c-text);
  cursor: pointer; text-align: left; width: 100%;
}
.choice::before {
  content: ""; width: 20px; height: 20px; flex: none;
  border: 1.5px solid var(--c-ink); background: #fff;
}
.choice:hover { background: var(--c-wash); border-color: var(--c-accent-deep); }
.choice:hover::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M4 10l4.5 5.5L16 4" fill="none" stroke="%231E8296" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-size: 100% 100%;
}
.choice .choice-sub { display: block; font-size: 15px; font-weight: 400; color: var(--c-text-weak); }
.choice .choice-icon { width: 56px; height: 56px; flex: none; }
.choice-muted { border-color: var(--c-line); font-weight: 500; }
.choice-muted::before { border-color: var(--c-line); }

.wizard-footer {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  border-top: 1px solid var(--c-ink); padding-top: var(--sp-3); margin-top: var(--sp-3);
}
.btn-back { background: #fff; border: 1px solid var(--c-line); color: var(--c-text); font-size: 17px; }
.wizard-tel { margin-left: auto; text-align: right; text-decoration: none; color: var(--c-text); }
.wizard-tel .tel-number { font-size: 21px; font-weight: 500; color: var(--c-ink); display: block; font-family: var(--font-mono); }
.wizard-tel .tel-hours { font-size: 13px; color: var(--c-text-weak); }

.result-card {
  border: 1px solid var(--c-ink);
  padding: var(--sp-4); margin-bottom: var(--sp-2); background: #fff;
}
.result-card h3 {
  font-family: var(--font-serif); color: var(--c-ink); font-size: 22px;
  margin-bottom: var(--sp-1); letter-spacing: .06em;
  border-bottom: 1px solid var(--c-accent-pale); padding-bottom: 8px;
}
.result-card .price { font-size: 20px; font-weight: 500; font-family: var(--font-mono); }
.result-note {
  background: var(--c-wash); border: 1px solid var(--c-accent-pale);
  padding: var(--sp-2); font-size: 16px; margin: var(--sp-2) 0;
}

.form-field { margin-bottom: var(--sp-3); }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--c-ink); }
.form-field .req { color: #A94E3C; font-size: 14px; margin-left: 6px; }
.form-field .opt { color: var(--c-text-weak); font-size: 14px; margin-left: 6px; }
.form-field input[type="text"], .form-field input[type="tel"], .form-field input[type="email"],
.form-field select {
  width: 100%; font-size: 20px; padding: 14px; border: 1px solid var(--c-ink);
  min-height: var(--tap-min); background: #fff; font-family: var(--font-sans);
}
.form-field input:focus, .form-field select:focus { outline: 3px solid var(--c-accent); outline-offset: 1px; }
.field-help { font-size: 15px; color: var(--c-text-weak); margin-top: 4px; }
.dob-row { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.dob-row select { flex: 1; min-width: 100px; }

.calendar { border-collapse: collapse; width: 100%; }
.calendar th { padding: 6px; font-size: 15px; color: var(--c-text-weak); font-family: var(--font-mono); }
.calendar td { padding: 2px; text-align: center; }
.cal-day {
  width: 100%; min-height: 60px; border: 1px solid var(--c-line);
  background: #fff; font-size: 16px; cursor: pointer; line-height: 1.3; padding: 6px 2px;
  font-family: var(--font-mono);
}
.cal-day .mark { display: block; font-size: 18px; font-weight: 700; color: var(--c-accent-deep); }
.cal-day:disabled { background: var(--c-bg-alt); color: #aaa; cursor: not-allowed; }
.cal-day.selected { border: 2px solid var(--c-accent-deep); background: var(--c-wash); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--sp-1); }

.confirm-row {
  display: flex; align-items: center; gap: var(--sp-2);
  border-bottom: 1px solid var(--c-line); padding: var(--sp-2) 0;
}
.confirm-row .k { font-weight: 600; width: 9em; flex: none; color: var(--c-text-weak); }
.confirm-row .v { flex: 1; font-size: 20px; font-weight: 600; color: var(--c-ink); }
.confirm-row .btn-fix {
  background: #fff; border: 1px solid var(--c-ink); color: var(--c-ink);
  font-size: 16px; font-weight: 600; padding: 8px 16px;
  min-height: 48px; cursor: pointer;
}

.done-number {
  font-size: 44px; font-weight: 500; color: var(--c-ink);
  text-align: center; margin: var(--sp-3) 0;
  border: 1px solid var(--c-ink); padding: var(--sp-4);
  font-family: var(--font-mono); background: #fff;
}

/* ---------- アクセス ---------- */
.access-map { border: 1px solid var(--c-line); overflow: hidden; }
.route-block { border-left: 2px solid var(--c-accent-pale); padding-left: var(--sp-3); margin-bottom: var(--sp-4); }
.route-block h3 { font-family: var(--font-serif); letter-spacing: .06em; }
.video-placeholder { position: relative; overflow: hidden; }
.video-placeholder .label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 19px; text-align: center;
  background: rgba(18, 97, 122, .55); padding: var(--sp-2); letter-spacing: .06em;
}

/* ---------- お知らせ ---------- */
.news-list { list-style: none; max-width: 760px; margin: 0 auto; }
.news-list li { border-bottom: 1px solid var(--c-line); padding: var(--sp-3) 0; display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.news-list time { color: var(--c-accent-deep); flex: none; font-weight: 500; letter-spacing: .04em; }

/* ---------- スマホ ---------- */
@media (max-width: 800px) {
  :root { --fs-h1: 26px; --fs-h2: 24px; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .global-nav { display: none; }
  .global-nav.open { display: block; }
  .global-nav ul { flex-direction: column; gap: 0; }
  .global-nav a { min-height: var(--tap-min); font-size: 17px; width: 100%; border-bottom: 1px solid var(--c-line); justify-content: center; }
  .section { padding: var(--sp-8) 0; }
  .en-eyebrow { font-size: 26px; }
  .brand-logo { height: 38px; }
  .footer-logo { height: 52px; }
  .hero-split { display: flex; flex-direction: column; min-height: 0; }
  .hero-photo { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; min-height: 0; order: -1; }
  .hero-photo img { object-position: 85% 50%; }
  .hero-photo img { -webkit-mask-image: none; mask-image: none; }
  .hero-copy { min-height: 0; padding: var(--sp-6) var(--sp-3); justify-content: flex-start; }
  .photo-band .ph { aspect-ratio: auto; min-height: 460px; }
  .photo-band .band-overlay { background: rgba(43,52,56,.5); }
  .btn-large { font-size: 18px; padding: 16px 28px; white-space: nowrap; }
  .btn-tel { flex-direction: column; gap: 2px; padding: 14px 28px; }
  .btn-tel .btn-tel-label { font-size: 15px; letter-spacing: .1em; }
  .btn-tel .btn-tel-num { font-size: 22px; }
  .table-scroll-note { display: block; }
  .fact-strip .fact { flex: 1 1 46%; border-top: 1px solid var(--c-line); }
  .promise p { text-align: left; }
  .wizard-banner { flex-direction: column; align-items: stretch; }
  .confirm-row { flex-wrap: wrap; }
  .confirm-row .k { width: 100%; }
}

/* =========================================================
   v3.1 動きの文法＋個人ページ拡張（2026-08-23）
   参照: docs/research/reference-sites-2026-08-23.md（og-clinic実測値）
   語彙は5つで打ち止め: 出現fadeInUp / ナビ下線scaleX / FV緩ズーム /
   タイル窓抜きズーム / 二重枠オフセット。時間はすべて0.15〜0.9s
   ========================================================= */

/* ---- 本文の呼吸（行間・字間を一段深く） ---- */
body { line-height: 2.05; letter-spacing: .035em; }

/* ---- ① スクロール出現（JS有効時のみ発動。非JSでは常時表示） ---- */
html.js-anim .rv,
html.js-anim .rv-group > * {
  opacity: 0; transform: translateY(20px);
  transition: opacity .9s ease, transform .9s ease;
}
html.js-anim .rv.is-in,
html.js-anim .rv-group.is-in > * { opacity: 1; transform: translateY(0); }
html.js-anim .rv-group.is-in > *:nth-child(2) { transition-delay: .1s; }
html.js-anim .rv-group.is-in > *:nth-child(3) { transition-delay: .2s; }
html.js-anim .rv-group.is-in > *:nth-child(4) { transition-delay: .3s; }
html.js-anim .rv-group.is-in > *:nth-child(5) { transition-delay: .4s; }
html.js-anim .rv-group.is-in > *:nth-child(6) { transition-delay: .5s; }

/* ---- ② ナビ下線（中央からscaleXで伸びる・PCのみ） ---- */
@media (min-width: 801px) {
  .global-nav a { position: relative; }
  .global-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
    background: var(--c-accent-deep);
    transform: scaleX(0); transition: transform .15s ease-out;
  }
  .global-nav a:hover { border-bottom-color: transparent; }
  .global-nav a:hover::after,
  .global-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .global-nav a[aria-current="page"] { border-bottom-color: transparent; }
}

/* ---- ③ FVの緩ズーム（常時動くのはこれだけ。等速・ごく小さく） ---- */
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
.hero-photo img { animation: hero-drift 26s ease-in-out infinite alternate; }

/* ---- ④ 写真の窓抜きズーム（枠は動かず写真だけ寄る） ---- */
.tile .ph img, .card-img img { transition: transform .6s ease; }
.tile:hover .ph img { transform: scale(1.05); }

/* ---- ⑤ 二重枠オフセット（浮いた額がhoverで閉じる） ---- */
.frame-shift { position: relative; background: #fff; border: 1px solid var(--c-line); }
.frame-shift::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--c-accent-pale);
  transform: translate(9px, 9px); transition: transform .2s ease;
}
.frame-shift:hover::after { transform: translate(0, 0); }

@media (prefers-reduced-motion: reduce) {
  html.js-anim .rv, html.js-anim .rv-group > * { opacity: 1; transform: none; transition: none; }
  .hero-photo img { animation: none; }
  .tile .ph img, .frame-shift::after { transition: none; }
}

/* ---- 見出しの透かし英字（ogのロゴ透かしの白磁翻訳: EN字を背後に沈める） ---- */
.en-eyebrow {
  font-size: 64px; opacity: .15; letter-spacing: .1em;
  margin-bottom: -36px; line-height: 1;
  position: relative; z-index: 0;
}
h2 { position: relative; z-index: 1; }

/* ---- 写真の額装（静的な二重枠。リンクでないビジュアル用） ---- */
.framed { position: relative; }
.framed::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid var(--c-accent-pale);
  transform: translate(12px, 12px);
}

/* ---- 番号の大組み（ogの01〜05番号の白磁翻訳） ---- */
.promise .p-no { font-size: 44px; }
.kcard .k-no { font-size: 34px; }

/* ---- 写真バンドの重ねは「箱」で（全面グラデをやめる） ---- */
.photo-band .band-overlay {
  background: linear-gradient(90deg, rgba(29,37,41,.28) 0%, rgba(29,37,41,0) 60%);
}
.band-box {
  background: rgba(29, 37, 41, .62);
  padding: var(--sp-4) var(--sp-6);
  max-width: 640px;
}
.band-box h2 { margin-bottom: var(--sp-2); }
.band-box p { margin-bottom: var(--sp-3); }

/* ---- 3ドア（状況起点の入口） ---- */
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-3); }
a.door {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--sp-4); text-decoration: none; color: var(--c-text);
}
a.door:hover { background: var(--c-wash); }
.door .door-q {
  font-family: var(--font-serif); font-weight: 600; font-size: 20px;
  color: var(--c-ink); letter-spacing: .06em; line-height: 1.7;
}
.door .door-a { font-size: 15px; color: var(--c-text-weak); line-height: 1.8; }
.door .door-go { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--c-accent-deep); letter-spacing: .08em; }

/* ---- 健診カード（4種・同じ型で統一） ---- */
.kcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: var(--sp-4); }
.kcard {
  background: #fff; border: 1px solid var(--c-line);
  padding: var(--sp-4); display: flex; flex-direction: column;
  scroll-margin-top: 110px;
}
.kcard .k-no { font-family: var(--font-sans); font-weight: 600; font-size: 24px; color: var(--c-accent); letter-spacing: .08em; line-height: 1.2; }
.kcard h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); color: var(--c-ink); letter-spacing: .05em; margin: 2px 0 4px; line-height: 1.6; }
.kcard .k-hitokoto { font-size: 15.5px; font-weight: 600; color: var(--c-accent-deep); margin-bottom: var(--sp-2); line-height: 1.8; }
.kcard dl { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px 14px; font-size: 15.5px; margin-bottom: var(--sp-2); }
.kcard dt { color: var(--c-text-weak); font-weight: 600; }
.kcard dd { margin: 0; line-height: 1.9; min-width: 0; overflow-wrap: anywhere; }
.exam-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.exam-chip {
  border: 1px solid var(--c-accent-pale); background: var(--c-wash);
  padding: 2px 10px; font-size: 13.5px; letter-spacing: .02em; line-height: 1.8;
}
.kcard .k-note {
  font-size: 14px; color: var(--c-text-weak);
  border-top: 1px dashed var(--c-line); padding-top: 12px; margin-top: auto; line-height: 1.8;
}
.kcard .k-cta { margin-top: var(--sp-2); font-size: 15.5px; font-weight: 600; }

/* ---- 持ち物（必須/任意の分離） ---- */
.belongings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--sp-3); }
.belong-col { background: #fff; border: 1px solid var(--c-line); padding: var(--sp-4); }
.belong-col h3 {
  font-family: var(--font-serif); font-size: 18px; color: var(--c-ink);
  letter-spacing: .08em; margin-bottom: var(--sp-2);
  border-bottom: 1px solid var(--c-accent-pale); padding-bottom: 8px;
}
.belong-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
.belong-col li { position: relative; padding-left: 1.3em; }
.belong-col li::before { content: "・"; color: var(--c-accent); position: absolute; left: 0; top: 0; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
details.faq { background: #fff; border: 1px solid var(--c-line); border-bottom: none; }
.faq-list details.faq:last-of-type { border-bottom: 1px solid var(--c-line); }
details.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 14px;
  padding: var(--sp-2) var(--sp-3); min-height: var(--tap-min);
  font-weight: 600; font-size: 17px; color: var(--c-ink); line-height: 1.8;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::before { content: "Q"; font-family: var(--font-sans); font-weight: 600; font-size: 21px; color: var(--c-accent); flex: none; }
details.faq summary .faq-toggle { margin-left: auto; color: var(--c-accent-deep); flex: none; font-weight: 400; }
details.faq[open] summary .faq-toggle { transform: rotate(45deg); }
details.faq .faq-a {
  display: flex; gap: 14px; align-items: baseline;
  padding: 0 var(--sp-3) var(--sp-3); font-size: 16px;
}
details.faq .faq-a::before { content: "A"; font-family: var(--font-sans); font-weight: 600; font-size: 21px; color: var(--c-ink); flex: none; }

@media (max-width: 800px) {
  .kcard dl { grid-template-columns: 1fr; gap: 2px; }
  .kcard dt { margin-top: 8px; }
  .band-box { padding: var(--sp-3); }
  /* 長文ラベルのCTA（電話番号入り等）が375pxで溢れないよう折り返し許可 */
  .btn-large { white-space: normal; }
  .en-eyebrow { font-size: 38px; margin-bottom: -20px; }
  .framed::after { transform: translate(8px, 8px); }
  .promise .p-no { font-size: 36px; }
}

/* ---------- 改行・はみ出し対策（2026-08-26 岡田さん指摘: 1〜2文字の行・数字割れ・表のちぎれ・はみ出しNG） ---------- */
p, li, dd, dt, td, th, small, figcaption, .cta-note, .result-note, .field-help, .wizard-help, .choice, .choice-sub, .k-hitokoto, .k-note, .faq-a, .access-pill p, .yoyaku-lead, .yoyaku-contact-text { text-wrap: pretty; }
/* 日本語の文節改行（Chrome 119+。非対応ブラウザは無視） */
body { word-break: auto-phrase; }
/* 中央揃えの段落は文節改行だと行長がガタつくので通常改行（pretty は維持） */
.section-lead, .photo-band p, .band-box p, .promise p, .cta-note, .footer-note, .wizard-help, h2, .tile-label { word-break: normal; }
h1, h2, h3, h4, .wizard-q, .tile-label, .hero-sub-lead, .card h3, .door h3, .route-card h3, .promise h3, .kcard h3 { text-wrap: balance; }
table.plain td:first-child, table.plain tbody th { text-wrap: balance; }
.nw, time, [data-tel], .tel-number, .footer-tel, .yoyaku-tel, .price, .price-cell, .done-number, .num { white-space: nowrap; }
table.plain td { text-wrap: balance; }
.btn { white-space: nowrap; }
.access-pill, .access-pill p, .yoyaku-contact-text { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .btn { letter-spacing: .06em; }
  .btn-large { font-size: 17px; padding: 15px 24px; }
  .wizard-q { font-size: 21px; }
  .choice { font-size: 18px; }
  /* 表はカード積みに（横スクロールさせない） */
  .table-wrap { overflow: visible; border: 0; background: none; }
  table.plain { min-width: 0; display: block; }
  table.plain thead, table.plain tr.t-head { display: none; }
  table.plain tbody, table.plain tr, table.plain th, table.plain td { display: block; }
  table.plain tr { background: #fff; border: 1px solid var(--c-line); border-radius: 14px; padding: 6px 16px 10px; margin-bottom: 12px; }
  table.plain tr:last-child { margin-bottom: 0; }
  table.plain th, table.plain td { padding: 8px 0; border-bottom: 1px dashed var(--c-line); text-align: left; }
  table.plain tr > *:last-child { border-bottom: 0; }
  table.plain tbody th, table.plain td.row-title { font-size: 17px; font-weight: 600; color: var(--c-ink); padding: 10px 0 6px; border-bottom: 1px solid var(--c-line); text-wrap: balance; }
  table.plain td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--c-teal-deep); letter-spacing: .08em; margin-bottom: 2px; font-family: var(--font-sans); font-weight: 600; }
  table.plain .price-cell { white-space: normal; }
  .table-scroll-note { display: none !important; }
}
@media (max-width: 400px) {
  .btn-large { font-size: 16px; padding: 14px 18px; }
  .hero-badge { font-size: 13px; letter-spacing: .16em; }
  .wizard-q { font-size: 20px; }
}

.kcard dd, .kcard dl { min-width: 0; overflow-wrap: anywhere; }
.more-link { text-wrap: balance; }

/* 動画プレースホルダのラベル: 枠内で折り返す（nowrap 無効・スマホは小さく） */
.video-placeholder .label { white-space: normal; text-wrap: balance; }
.video-placeholder .label .nw { white-space: normal; }
@media (max-width: 800px) { .video-placeholder .label { font-size: 15px; padding: 12px; letter-spacing: .02em; } }

/* ---------- ページヒーロー共通（企業・個人・お知らせ 2026-08-26） ---------- */
.page-hero { background: var(--c-bg-alt); }
.section > .container > h2.page-title, .page-title { margin: 0 auto var(--sp-4); text-align: center; letter-spacing: 0; }
.page-title img { display: inline-block; width: 100%; max-width: 760px; height: auto; }
/* 企業 */
.kigyo-lead { text-align: left; background: #fff; border: 1px solid var(--c-teal-line); border-radius: 20px; padding: 20px 28px; max-width: 900px; margin: 0 auto var(--sp-4); }
.kigyo-ways { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.way-card { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; background: #fff; border: 1px solid #D9E9ED; border-radius: 20px; padding: 18px; box-shadow: 0 10px 30px rgba(30,130,150,.08); }
.way-ill { width: 100%; height: auto; border-radius: 12px; display: block; }
.way-tag { display: block; font-size: 12.5px; color: var(--c-teal-deep); letter-spacing: .08em; margin-bottom: 6px; }
.way-tag::before { content: "＼ "; } .way-tag::after { content: " ／"; }
.way-card h3 { margin: 0 0 8px; line-height: 1; }
.way-pill { display: inline-block; color: #fff; border-radius: 999px; padding: 7px 20px; font-size: 19px; font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; line-height: 1.3; }
.way-pill-blue { background: var(--c-ink); }
.way-pill-teal { background: var(--c-accent-deep); }
.way-body p { font-size: 15px; margin: 0; }
.support-strip { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid #D9E9ED; border-radius: 20px; padding: 14px 22px 14px 14px; }
.support-label { flex: none; background: var(--c-accent-deep); color: #fff; font-weight: 700; font-size: 15px; line-height: 1.35; padding: 12px 26px 12px 16px; border-radius: 12px 4px 4px 12px; text-align: center; clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%); }
.support-steps { display: flex; flex: 1; justify-content: space-around; align-items: flex-start; list-style: none; gap: 8px; margin: 0; padding: 0; }
.support-steps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--c-ink); text-align: center; }
.support-steps li + li::before { content: "›"; position: absolute; left: -8px; top: -2px; color: #9CC3CC; font-size: 26px; line-height: 1; }
.support-steps img { width: 64px; height: auto; }
/* 個人 */
.kojin-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); align-items: center; }
.kojin-hero-copy .page-title { text-align: left; margin: 0 0 var(--sp-3); }
.kojin-hero-copy .page-title img { max-width: 520px; }
.kojin-lead { font-size: 17px; line-height: 2; margin-bottom: var(--sp-3); }
.kojin-ok { display: flex; align-items: center; gap: 14px; background: #fff; border: 1.5px solid var(--c-teal-line); border-radius: 999px; padding: 12px 18px 12px 12px; margin-bottom: var(--sp-3); }
.kojin-ok .ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--c-teal-pale); display: inline-flex; align-items: center; justify-content: center; }
.kojin-ok .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--c-teal-deep); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kojin-ok .ico-check { background: var(--c-accent-deep); } .kojin-ok .ico-check svg { stroke: #fff; }
.kojin-ok-body { flex: 1; min-width: 0; }
.kojin-ok-title { font-size: 18px; font-weight: 700; margin: 0; color: var(--c-ink); line-height: 1.6; }
.kojin-ok-title mark { background: linear-gradient(transparent 58%, var(--c-teal-line) 58%); color: inherit; }
.kojin-ok-sub { font-size: 14px; color: var(--c-text-weak); margin: 2px 0 0; }
.kojin-cta { margin: 0; }
.kojin-hero-visual img { width: 100%; max-width: 340px; height: auto; margin: 0 auto; display: block; }
/* お知らせ */
.news-title img { max-width: 620px; }
.news-cards { max-width: 820px; }
.news-cards li { background: #fff; border: 1px solid #D9E9ED; border-radius: 16px; padding: 18px 22px; margin-bottom: 12px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.news-cards li:last-child { margin-bottom: 0; }
.news-cards time { background: var(--c-teal-pale); color: var(--c-teal-deep); border-radius: 999px; padding: 4px 12px; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
@media (max-width: 800px) {
  .page-title img { max-width: 100%; }
  .kigyo-lead { padding: 16px 18px; border-radius: 16px; }
  .kigyo-ways { grid-template-columns: 1fr; }
  .way-card { grid-template-columns: 1fr; }
  .way-ill { max-width: 260px; margin: 0 auto; }
  .support-strip { flex-direction: column; align-items: stretch; padding: 14px; }
  .support-label { clip-path: none; border-radius: 12px; padding: 10px 14px; }
  .support-label br { display: none; }
  .support-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
  .support-steps li + li::before { display: none; }
  .kojin-hero-grid { grid-template-columns: 1fr; gap: var(--sp-3); }
  .kojin-hero-visual { order: -1; } .kojin-hero-visual img { max-width: 190px; }
  .kojin-hero-copy .page-title { text-align: center; } .kojin-hero-copy .page-title img { max-width: 320px; }
  .kojin-lead { font-size: 15.5px; }
  .kojin-ok { border-radius: 20px; flex-wrap: wrap; }
  .kojin-ok .ico-check { display: none; }
  .kojin-cta { text-align: center; }
  .news-title img { max-width: 340px; }
  .news-cards li { grid-template-columns: 1fr; padding: 16px; }
  .news-cards time { width: max-content; }
}

.kojin-ok-title { text-wrap: balance; }

/* ---------- ご予約: ステップ・画像タップで予約へ（2026-08-26） ---------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
#wizard { scroll-margin-top: 150px; }
.yoyaku-steps li { padding: 0; }
.yoyaku-steps .step-link { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px 10px 10px; color: inherit; text-decoration: none; border-radius: 999px; transition: background .2s ease, transform .15s ease; }
.yoyaku-steps .step-link:hover, .yoyaku-steps .step-link:focus-visible { background: var(--c-teal-pale); transform: translateY(-1px); }
.yoyaku-steps .step-go { margin-left: auto; color: var(--c-teal-deep); font-weight: 700; }
.yoyaku-hero-visual .visual-link { display: block; cursor: pointer; transition: transform .2s ease; }
.yoyaku-hero-visual .visual-link:hover { transform: translateY(-2px); }
.visual-go { text-align: center; margin: 8px 0 0; }
.visual-go a { display: inline-block; font-size: 14px; font-weight: 600; color: var(--c-teal-deep); background: #fff; border: 1.5px solid var(--c-teal-line); border-radius: 999px; padding: 6px 16px; text-decoration: none; }
.visual-go a:hover { background: var(--c-teal-pale); }
/* 中央揃えリード: 文節改行＋行長バランス（「選ぶ／と」のような語中割れを防ぐ） */
.section-lead { word-break: auto-phrase; text-wrap: balance; }
@media (max-width: 800px) { #wizard { scroll-margin-top: 140px; } .visual-go { margin-top: 6px; } }

/* ---------- スマホFV: 写真とロックアップを分けず、空の部分に小さく重ねる（2026-08-26 岡田さん指示） ---------- */
@media (max-width: 800px) {
  .hero-split { position: relative; }
  .hero-photo img { object-position: 85% 50%; }
  .hero-lockup { position: absolute; z-index: 2; top: 14px; left: 16px; width: 58%; max-width: 250px; margin: 0;
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px rgba(255,255,255,.95)) drop-shadow(0 2px 14px rgba(255,255,255,.8)); }
  .hero-lockup img { max-width: none; }
  .hero-copy { padding-top: var(--sp-4); position: static; } /* absolute の基準を .hero-split に */
  html.js-anim .hero-copy-inner.rv, html.js-anim .hero-copy-inner.rv.is-in { transform: none; } /* transform は absolute の基準になるので外す（フェードのみ残す） */
}

/* ---------- 個人: それぞれの健診のご案内（B案 2×2＋折りたたみ 2026-08-26） ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.gcard { background: #fff; border: 1px solid #D9E9ED; border-radius: 20px; padding: 22px 24px 16px; box-shadow: 0 10px 30px rgba(30,130,150,.06); display: flex; flex-direction: column; scroll-margin-top: 150px; }
.gcard-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.gcard-head .k-no { font-family: var(--font-sans); font-weight: 600; font-size: 24px; color: var(--c-teal); letter-spacing: .06em; line-height: 1; flex: none; }
.gcard h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-h3); color: var(--c-ink); letter-spacing: .04em; margin: 0; line-height: 1.4; text-wrap: balance; }
.gcard h3 small { display: block; font-family: var(--font-sans); font-weight: 400; font-size: 12.5px; color: var(--c-text-weak); letter-spacing: .04em; margin-top: 2px; }
.gcard-lead { font-size: 15.5px; font-weight: 600; color: var(--c-teal-deep); line-height: 1.8; margin: 0 0 10px; }
.gcard-facts { display: grid; gap: 0; margin: 0 0 12px; }
.gcard-facts > div { display: grid; grid-template-columns: 5.5em 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px dashed var(--c-line); }
.gcard-facts > div:last-child { border-bottom: 1px dashed var(--c-line); }
.gcard-facts dt { font-size: 13px; color: var(--c-teal-deep); font-weight: 700; letter-spacing: .06em; padding-top: 3px; }
.gcard-facts dd { margin: 0; font-size: 15.5px; line-height: 1.7; }
.gcard-xref { font-size: 13.5px; color: var(--c-text); background: var(--c-teal-pale); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; line-height: 1.7; }
.gcard-xref a { color: var(--c-teal-deep); font-weight: 600; }
.gcard-more { margin-top: auto; }
.gcard-more summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 700; color: var(--c-teal-deep); padding: 8px 0 4px; }
.gcard-more summary::-webkit-details-marker { display: none; }
.gcard-more summary::before { content: "＋"; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--c-teal-deep); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; }
.gcard-more[open] summary::before { content: "－"; }
.gcard-more .sum-sub { font-size: 12px; font-weight: 400; color: var(--c-text-weak); }
.gcard-more-body { padding: 4px 0 6px; font-size: 14.5px; line-height: 1.75; }
.gcard-more-body h4 { font-size: 12.5px; color: var(--c-text-weak); font-weight: 700; letter-spacing: .08em; margin: 12px 0 6px; }
.gcard-more-body p { margin: 0 0 6px; }
.gcard-more-body .exam-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.gcard-note { font-size: 13px; color: var(--c-text-weak); }
.guide-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: var(--sp-4) 0 0; text-align: center; }
.guide-cta .cta-note { width: auto; }
@media (max-width: 800px) {
  .guide-grid { grid-template-columns: 1fr; }
  .gcard { padding: 18px 16px 12px; scroll-margin-top: 140px; }
  .gcard h3 { font-size: var(--fs-h3); }
  .gcard-facts > div { grid-template-columns: 5em 1fr; }
}

.gcard-facts dd, .gcard-more-body { min-width: 0; overflow-wrap: anywhere; }

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

.gcard-facts dd { word-break: normal; text-wrap: pretty; }

/* 健診料金の注記・インフルエンザ・検査項目ページ（2026-10-16 追加） */
.kensa-note { font-size: var(--fs-note); color: var(--c-text-weak); margin-top: 12px; }
.flu-box { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 28px 32px; margin-top: 32px; }
.flu-box h3 { font-size: var(--fs-h3); color: var(--c-ink); margin-bottom: 16px; }
.flu-box dl { display: grid; grid-template-columns: 7em 1fr; gap: 12px 16px; }
.flu-box dt { font-weight: 600; color: var(--c-teal-deep); }
.flu-box dd small { display: block; font-size: var(--fs-note); color: var(--c-text-weak); margin-top: 4px; }
.flu-box ol { padding-left: 1.4em; margin-top: 4px; }
.kensa-legend { text-align: center; margin-bottom: var(--sp-4); }
table.kensa { border-collapse: collapse; width: 100%; min-width: 760px; background: #fff; font-size: 16px; }
table.kensa th, table.kensa td { border: 1px solid var(--c-line); padding: 12px 10px; text-align: center; vertical-align: middle; }
table.kensa thead th { background: var(--c-wash); color: var(--c-ink); font-size: 15px; }
table.kensa tbody th { text-align: left; font-weight: 600; color: var(--c-ink); background: #fff; position: sticky; left: 0; min-width: 10em; }
table.kensa tbody tr:nth-child(even) > * { background: var(--c-bg-alt); }
table.kensa small { display: block; font-size: 12px; font-weight: 400; color: var(--c-text-weak); }
table.kensa .kensa-price > * { font-weight: 600; background: var(--c-teal-pale) !important; }
.kensa-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--radius); }
.kensa-notes { margin-top: 16px; font-size: var(--fs-note); color: var(--c-text-weak); line-height: 1.9; }
@media (max-width: 640px) {
  .flu-box { padding: 20px; }
  .flu-box dl { grid-template-columns: 1fr; gap: 2px; }
  .flu-box dd { margin-bottom: 12px; }
}
/* 企業ページ: 施設健診のみ（巡回健診の記載削除 2026-10-16） */
.kigyo-ways-single { grid-template-columns: 1fr; max-width: 640px; margin-left: auto; margin-right: auto; }
/* お知らせ: 日付の幅を固定して文の位置をそろえる（2026-10-17） */
.news-list li { display: grid; grid-template-columns: 7.5em 1fr; gap: 4px var(--sp-3); align-items: baseline; }
.news-cards li { grid-template-columns: 9.5em 1fr; align-items: start; }
.news-cards time { justify-self: start; }
@media (max-width: 640px) {
  .news-list li, .news-cards li { grid-template-columns: 1fr; }
}