/* パーティクルアニメーション - オーバーレイ方式（CLSゼロ） */

.particle-title {
  position: relative;
  display: inline-block;
}

/* パーティクルオーバーレイ（テキストDOMに影響なし） */
.particle-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* 個々のパーティクル */
.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate3d(var(--start-x), var(--start-y), 0);
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* パーティクルが集結するアニメーション */
.particle.gathering {
  animation: particleGather 2.5s var(--easing-standard) var(--delay) forwards;
}

@keyframes particleGather {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
    transform: translate3d(calc(var(--start-x) * 0.3), calc(var(--start-y) * 0.3), 0);
  }
  100% {
    transform: translate3d(0px, 0px, 0);
    opacity: 0;
  }
}

/* 下部のアクセントライン */
.particle-title.animated::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: lineExpand 1.5s ease-out 0.5s forwards;
}

@keyframes lineExpand {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0.7;
  }
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .particle {
    display: none;
  }

  .particle-title.animated::after {
    display: none;
  }
}

/* アクセシビリティ */
@media (prefers-reduced-motion: reduce) {
  .particle {
    display: none !important;
  }

  .particle-title::after {
    display: none;
  }
}
/* 音声波形アニメーションセクション
 * v3: ダーク帯 (録音→認識→「声」のメッセージ) → ライト帯 (生成 SOAP カード)
 * のフェード構成。背景色ブロックの島が解消され、視覚的に
 * 「声 (dark) → カルテ (light)」の物語が成立する。
 */
/* nav ダークグラス判定用センチネル: 背景 gradient の dark 帯 (0〜52%) を表す。
   描画はせず、nav 帯 (上端 80px) との交差判定にのみ使う。 */
.nav-dark-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52%;
  pointer-events: none;
  z-index: 0;
}

.voice-animation-section {
  /* KG-5: 80/96 → 既定トークン 96/96 に正規化。横は共通の --gutter を参照する
     (.container を持たない section なので直接引く)。 */
  padding: var(--space-4xl, 96px) var(--gutter, 2rem);
  /* v3: transition zone を 18% → 8% に圧縮し、dark/light の境界をシャープに */
  background: linear-gradient(
    180deg,
    var(--surface-dark) 0%,
    var(--surface-dark-900) 35%,
    var(--surface-dark-900) 50%,
    var(--canvas-soft) 58%,
    var(--canvas-soft) 100%
  );
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--on-dark);
}

/* radial アクセント光は dark 帯 (上 52%) にだけ表示 */
.voice-animation-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 52%;
  background:
    radial-gradient(circle at 20% 70%, rgba(216, 168, 73, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.14) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* ダーク帯のコンテナ (status / viz / h3 / p) */
.voice-animation-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  position: relative;
  z-index: 1;
  width: 100%;
}

/* ダーク帯の section-header — 上書きで白系に */
.voice-animation-section .section-header {
  text-align: center;
  /* flex の gap を唯一の縦間隔にし、余白の二重加算を避ける */
  margin-bottom: 0;
  opacity: 1;       /* common.css の opacity:0 + fadeIn を保険で打ち消し */
  animation: none;
}

.voice-animation-section .conversion-title {
  /* section heading は critical.css の global h2 トークンに統一 (44px@desktop) */
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.25;
  /* 標準 h2 の -0.01em に統一 (design-review 2026-07-05 typography minor) */
  letter-spacing: -0.01em;
  color: var(--on-dark);
  margin: 0 0 1rem;
  display: block;
  position: relative;
  /* 日本語は文節単位で折り返す (mid-word break 防止) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.voice-animation-section .conversion-title span {
  display: inline;
}

.conversion-copy__line {
  display: block;
  text-wrap: balance;
}

/* common.css 由来の青下線をダーク帯では消す */
.voice-animation-section .section-header h2::after {
  display: none;
}

.voice-animation-section .section-subtitle--on-dark {
  color: rgba(241, 245, 249, 0.78);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 580px;
  margin: 0.5rem auto 0;
}

/* ライト帯: 生成 SOAP カードのゾーン
 * 背景は section の linear-gradient に任せる。
 * 上 margin は .medical-record-animation 側の 50px に集約。 */
.voice-animation-record-zone {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* 録音ステータス (v2: dark 帯に住む frosted glass pill。
   旧 白ピル + shimmer は dark 帯で過剰だったため撤去) */
.recording-status {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1.125rem;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* 録音ドット */
.recording-dot {
  width: 10px;
  height: 10px;
  background: #ff4444;
  border-radius: 50%;
  box-shadow: 
    0 0 0 0 rgba(255, 68, 68, 0.7),
    0 2px 4px rgba(255, 68, 68, 0.3);
  animation: pulseRing 2s infinite;
  position: relative;
}

.recording-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
}

.recording-text {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

/* 音声ビジュアライザー */
.voice-visualizer {
  width: 100%;
  max-width: var(--max-width-text);
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1.5rem 3rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-xl);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

/* 音声バー (dark 帯前提: brand gold で発光し、Navy + Gold の 2 色軸を純化) */
.voice-bar {
  width: 5px;
  /* v4: champagne の照り → リッチ金 → 深い金 で縦バーにも金属の輝きを。
     末端は KG-10 で最近傍トークン --accent-gold-deep (#a87f2c) に集約 (旧 #b8862f) */
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 55%, var(--accent-gold-deep) 100%);
  border-radius: 50px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0.95;
  height: var(--voice-bar-height, 60px);
  transform-origin: center;
  animation: voiceWave 1.5s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(216, 168, 73, 0.45);
}

/* バーごとの高さは voice-visualizer.js が viewport に応じて設定する。 */

/* 旧 .conversion-text 系は section-header パターン (.conversion-title / .section-subtitle--on-dark)
 * に移行済み。レスポンシブは下記 @media に集約。 */

/* レスポンシブデザイン */
@media (max-width: 768px) {
  /* KG-5: クラスセレクタが section 既定より強く mobile 縮小が効かないため
     2:1 (96→48) を明示 */
  .voice-animation-section {
    /* 横は --gutter が breakpoint ごとに追従するので縦だけ指定する */
    padding: 3rem var(--gutter, 1.5rem);
  }
}

@media (max-width: 1024px) {
  .voice-animation-container {
    padding: 1rem 1.5rem 4rem;
  }

  .voice-visualizer {
    max-width: 100%;
    padding: 2rem 2rem;
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .voice-animation-container {
    gap: 1.75rem;
    padding: 0.75rem 1rem 2.5rem;
  }

  .recording-status {
    padding: 0.75rem 1.5rem;
  }

  .recording-text {
    font-size: 0.875rem;
  }

  .voice-visualizer {
    height: 120px;
    padding: 1rem 1.5rem;
    gap: 4px;
    border-radius: var(--radius-lg);
  }

  .voice-bar {
    width: 4px;
  }

  .voice-animation-section .section-subtitle--on-dark {
    font-size: 1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .voice-animation-container {
    gap: 1.5rem;
    padding: 0.5rem 0 2rem;
  }

  .recording-status {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
  }

  .recording-dot {
    width: 8px;
    height: 8px;
  }

  .voice-visualizer {
    height: 90px;
    padding: 1rem;
    gap: 3px;
  }

  .voice-bar {
    width: 3px;
  }

  .voice-animation-section .conversion-title span {
    display: block;
  }

  .voice-animation-section .section-subtitle--on-dark {
    font-size: 0.9375rem;
    line-height: 1.6;
  }
}

@media (max-width: 360px) {
  .voice-animation-section .conversion-title {
    font-size: 1.875rem;
  }

  .voice-animation-section .section-subtitle--on-dark {
    padding: 0;
  }
}

/* アニメーションのパフォーマンス最適化 */
@media (prefers-reduced-motion: reduce) {
  .voice-bar {
    animation: none;
  }
  
  .recording-status::before {
    animation: none;
  }
  
  .recording-dot {
    animation: none;
  }
}

/* アニメーション定義（animations.cssにない場合のフォールバック） */
@keyframes voiceWave {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}
/* 使い方 — 記録が流れる線
 *
 * 4 station を 1 本の hairline が貫き、その上を「記録」という素材が形を変えながら進む。
 * 押下の波紋 → 声の波形 → SOAP の構造 → カルテの書面。段の間の線は区切りではなく経路。
 *
 * 医師が手を触れる段 (01/02/04) は線の上に節を打ち、自動の段 (03) には節を置かない。
 * ただし節の有無だけでは弱いことが実機で分かったので (#351)、自動の合図は
 * 「破線 + 金 + ラベル脇の自動表記」の 3 チャネルで持たせている。色だけに依存させない。
 *
 * 罫の連続性について (#351): 溝を .usage-step の padding で作ると罫がそこで途切れる。
 * 罫はセル幅いっぱいに引き、溝は内容要素 (.usage-step__body) 側に持たせること。
 *
 * ブレークポイントは 900px の 1 段だけにしてある。横 4 列と縦リストの 2 状態で、
 * 中間の 2 カラムは廃止した (行をまたぐと線の連続性が失われ、骨格が壊れるため)。
 */
.usage {
  position: relative;
  overflow: hidden;
  /* 縦余白は共通 token。隣接セクションと同じ尺度に揃える */
  padding: var(--space-4xl, 96px) 3rem;
  background: var(--canvas-soft, #f8fafc);
}

.usage .container {
  position: relative;
  z-index: 1;
}

.usage-header {
  width: min(100%, var(--max-width-content, 1120px));
  margin: 0 auto 3.25rem;
}

.usage-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: min(100%, var(--max-width-content, 1120px));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* 罫を分断しないため、step 自体には溝を持たせない */
.usage-step {
  position: relative;
  min-width: 0;
}

/* 図版の footprint は全段そろえる。揃えないと 03 だけ巨大になり、段のリズムが壊れる */
.usage-step__stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 92px;
  height: 92px;
}

/* rail = 4 station を貫く線。セル幅いっぱいに引くので、隣の段と隙間なく continuous になる */
.usage-rail {
  position: relative;
  display: block;
  height: 1px;
  background: rgba(30, 58, 138, 0.28);
}

/* 自動の段は破線。色 (金) だけでなく線の質感でも区別する。
   真上の SOAP 図版も金なので、色だけでは埋没して合図にならない (#351)。 */
.usage-step--auto .usage-rail {
  background: repeating-linear-gradient(
    90deg,
    var(--accent-gold, #d8a849) 0 5px,
    rgba(216, 168, 73, 0.12) 5px 10px
  );
}

/* 医師が手を触れる段に打つ節。自動の段には出さない */
.usage-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary, #1e3a8a);
  box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.1);
  transform: translate(-1px, -50%);
}

.usage-step--auto .usage-rail::after {
  display: none;
}

/* 溝は本文側に持たせる (罫には掛けない) */
.usage-step__body {
  padding: 1.15rem 1.5rem 0 0;
}

.usage-step:last-child .usage-step__body {
  padding-right: 0;
}

.usage-step__no {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ink-faint, #94a3b8);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.usage-step--auto .usage-step__no {
  color: var(--accent-gold-deep, #a87f2c);
}

.usage-step__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--ink, #1e293b);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 視覚合図だけに頼らず、文字でも自動であることを示す */
.usage-step__auto {
  color: var(--accent-gold-deep, #a87f2c);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.usage-step__desc {
  margin: 0.3rem 0 0;
  color: var(--ink-mute, #64748b);
  font-size: 0.8125rem;
  line-height: 1.75;
}

/* ── 01 押す — 押下の波紋
   rail の節と重ねない。重ねると節と波紋が一体化して汚れに見え、
   リングが版面の外へはみ出す (#351)。線の少し上に浮かせる。 ── */
.usage-press {
  position: relative;
  width: 13px;
  height: 13px;
  margin: 0 0 15px 14px;
  border-radius: 50%;
  background: var(--primary, #1e3a8a);
  box-shadow:
    0 0 0 6px rgba(30, 58, 138, 0.12),
    0 0 0 13px rgba(30, 58, 138, 0.05);
}

/* ── 02 話す — voice.css の .voice-bar と同じ金の縦バー ── */
.usage-wave {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  height: 100%;
}

.usage-wave i {
  width: 4px;
  height: var(--usage-wave-h, 50%);
  border-radius: 50px;
  background: linear-gradient(
    180deg,
    var(--accent-gold-hi, #f6e6b4) 0%,
    var(--accent-gold, #d8a849) 55%,
    var(--accent-gold-deep, #a87f2c) 100%
  );
}

/* ── 03 SOAP — バーが 4 行の構造に解ける ── */
.usage-soap {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
  width: 100%;
  height: 100%;
  padding-bottom: 6px;
}

.usage-soap__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.usage-soap__row em {
  flex: 0 0 auto;
  width: 9px;
  color: var(--accent-gold-deep, #a87f2c);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.5625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.usage-soap__row i {
  width: var(--usage-soap-w, 80%);
  height: 3px;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--accent-gold, #d8a849), rgba(216, 168, 73, 0.35));
}

/* ── 04 貼る — 構造がカルテの枠に収まる ── */
.usage-doc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 72px;
  padding: 9px 9px 0;
  border: 1px solid rgba(30, 58, 138, 0.32);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.6);
}

.usage-doc i {
  height: 3px;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--accent-gold, #d8a849), rgba(216, 168, 73, 0.3));
}

.usage-doc i:nth-child(1) { width: 80%; }
.usage-doc i:nth-child(2) { width: 100%; }
.usage-doc i:nth-child(3) { width: 65%; }
.usage-doc i:nth-child(4) { width: 88%; }

@media (forced-colors: active) {
  .usage-rail,
  .usage-press,
  .usage-wave i,
  .usage-soap__row i,
  .usage-doc i {
    background: CanvasText;
  }

  .usage-doc {
    border-color: CanvasText;
  }

  .usage-step__no,
  .usage-step__label,
  .usage-step__auto,
  .usage-step__desc {
    color: CanvasText;
  }
}

/* ── 900px 以下: 縦リスト ──
 * 横 4 列は広い画面でしか成立しないので、それ以下は罫を縦に倒した 1 本の列にする。
 * 図版を本文の左に置くことで「図版が前の段の説明文にぶら下がって見える」誤読も消える
 * (縦積みだと、段 N の図版が段 N-1 の説明の直下に来てしまう / #351)。 */
@media (max-width: 900px) {
  .usage {
    padding: 5.5rem 1.75rem;
  }

  .usage-header {
    margin-bottom: 2.75rem;
  }

  /* 縦リストは横幅を使い切らない。タブレット幅で右が大きく空いて左に寄って見えるため、
     読み幅で止めて中央に置き、中央寄せの見出しと釣り合わせる。 */
  .usage-steps {
    grid-template-columns: 1fr;
    max-width: 34rem;
  }

  .usage-step {
    display: grid;
    grid-template-columns: 1.5rem 72px minmax(0, 1fr);
    column-gap: 0.9rem;
    align-items: start;
  }

  /* 罫は行の高さいっぱいに伸ばす。次の段の罫と接するので縦一本に繋がる */
  .usage-rail {
    grid-row: 1;
    grid-column: 1;
    justify-self: center;
    width: 1px;
    height: 100%;
  }

  .usage-step--auto .usage-rail {
    background: repeating-linear-gradient(
      180deg,
      var(--accent-gold, #d8a849) 0 5px,
      rgba(216, 168, 73, 0.12) 5px 10px
    );
  }

  /* 節は縦罫の上端付近へ。図版の中心と高さを揃える */
  .usage-rail::after {
    top: 34px;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .usage-step__stage {
    grid-row: 1;
    grid-column: 2;
    align-items: center;
    width: 72px;
    height: 72px;
  }

  .usage-step__body,
  .usage-step:last-child .usage-step__body {
    grid-row: 1;
    grid-column: 3;
    padding: 0 0 2rem;
  }

  .usage-step:last-child .usage-step__body {
    padding-bottom: 0;
  }

  .usage-wave {
    gap: 3px;
  }

  .usage-wave i {
    width: 3px;
  }

  .usage-doc {
    height: 58px;
  }

  .usage-press {
    margin: 0 0 0 12px;
  }
}

@media (max-width: 375px) {
  .usage {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .usage-step {
    grid-template-columns: 1.25rem 60px minmax(0, 1fr);
    column-gap: 0.7rem;
  }

  .usage-step__stage {
    width: 60px;
    height: 60px;
  }

  .usage-rail::after {
    top: 28px;
  }

  .usage-doc {
    height: 50px;
    padding: 7px 7px 0;
    gap: 5px;
  }

  .usage-soap {
    gap: 5px;
  }
}
/* ========================================
   音声 → SOAP フォーカス UI モック
   Hero の端末全景ではなく、AI生成案の確認体験を拡大して見せる。
   ======================================== */

.medical-record-animation {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 980px;
  margin: 5.25rem auto 0;
  padding: 0 1.5rem;
  box-sizing: border-box;
  gap: 1.75rem;
}

/* gold の音声から navy の記録へ変わる接続線 */
.voice-flow {
  position: absolute;
  bottom: calc(100% - 5px);
  left: 50%;
  z-index: 2;
  width: 2px;
  height: 4.75rem;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    rgba(216, 168, 73, 0.15) 0%,
    rgba(216, 168, 73, 0.72) 42%,
    rgba(30, 64, 175, 0.78) 100%
  );
  pointer-events: none;
}

.voice-flow-label {
  position: absolute;
  top: -1.7rem;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.3rem 0.7rem;
  transform: translateX(-50%);
  border: 1px solid rgba(30, 58, 138, 0.12);
  border-radius: var(--radius-pill, 9999px);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.45);
  color: var(--primary-dark, #1e40af);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.voice-flow::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(30, 64, 175, 0.25), transparent 70%);
  filter: blur(3px);
}

.voice-flow-pulse {
  position: absolute;
  top: 0;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--gold-hi, #f6e6b4) 45%, var(--gold, #d8a849) 100%);
  box-shadow: 0 0 8px rgba(216, 168, 73, 0.7);
  opacity: 0;
}

.medical-record-animation.is-flowing .voice-flow-pulse {
  animation: voiceFlowDown 0.9s var(--easing-standard) 0.1s 1 forwards;
}

.voice-mock-stage {
  position: relative;
  width: min(100%, 980px);
  height: clamp(340px, 40vw, 500px);
}

.voice-mock-stage .devices-stage {
  max-width: min(880px, 100%);
}

/* 再利用モックは製品ショーケースとして静止させ、Macを主役、iPhoneを右下の前景に置く。
   ヒーロー用のfloat/3D transformが座標を上書きしないよう明示的に分離する。 */
.devices-stage--showcase .device-wrapper {
  animation: none !important;
}

.voice-mock-stage .mac-wrapper {
  --mw: min(68vw, 600px);
  left: 45%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.voice-mock-stage .iphone-wrapper {
  right: 8%;
  bottom: 5%;
  transform: translateZ(70px);
}

.voice-mock-stage .iphone-mock {
  --iw: min(15vw, 148px);
}

@keyframes voiceFlowDown {
  0% { top: 0; opacity: 0; }
  15% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 製品画面。デバイス枠を付けず、実務で触れる面だけを見せる。 */
.record-card {
  position: relative;
  width: min(100%, 880px);
  overflow: hidden;
  border: 1px solid var(--hairline-navy-strong, rgba(30, 58, 138, 0.2));
  border-radius: var(--radius-xl, 20px);
  background: var(--canvas, #fff);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.85),
    0 28px 72px -38px rgba(15, 23, 42, 0.42);
}

.record-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  background: linear-gradient(180deg, #fff, var(--canvas-soft, #fafbfc));
}

.record-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary, #1e3a8a);
  font-size: 0.8125rem;
  font-weight: 700;
}

.record-brand picture,
.record-brand img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.record-screen-note {
  color: var(--ink-mute, #64748b);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.record-patientbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  background: #fff;
}

.record-patient {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  min-width: 0;
}

.record-patient__name {
  color: var(--ink, #1e293b);
  font-size: 1rem;
  font-weight: 700;
}

.record-patient__meta {
  color: var(--ink-mute, #64748b);
  font-size: 0.75rem;
}

.record-ai-status,
.record-complete,
.record-generated-time {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  width: max-content;
  border-radius: var(--radius-pill, 9999px);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.record-ai-status {
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(216, 168, 73, 0.38);
  background: rgba(246, 230, 180, 0.25);
  color: #76531d;
}

.record-ai-status i,
.record-complete i {
  display: block;
  flex: 0 0 auto;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
}

.record-ai-status i {
  background: var(--gold-deep, #a87f2c);
}

.record-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.28fr);
  align-items: stretch;
}

.record-transcript-panel,
.record-soap-panel {
  min-width: 0;
  padding: 1.5rem;
}

.record-transcript-panel {
  border-right: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  background: var(--canvas-soft, #fafbfc);
}

.record-soap-panel {
  background: #fff;
}

.record-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  margin-bottom: 1rem;
}

.record-panel-eyebrow {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink-mute, #64748b);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.record-panel-header h3 {
  margin: 0;
  color: var(--ink, #1e293b);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.record-complete {
  padding: 0.3rem 0.5rem;
  border: 1px solid rgba(16, 185, 129, 0.2);
  background: rgba(16, 185, 129, 0.08);
  color: #047857;
  font-size: 0.625rem;
}

.record-complete i {
  background: var(--success, #10b981);
}

.record-generated-time {
  padding: 0.3rem 0.5rem;
  background: var(--primary-light, #eff6ff);
  color: var(--primary-dark, #1e40af);
  font-size: 0.625rem;
}

.transcript-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.transcript-line {
  padding: 0.75rem;
  border: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  border-radius: var(--radius-md, 12px);
  background: #fff;
}

.transcript-line--doctor {
  margin-left: 1rem;
  background: var(--primary-light, #eff6ff);
}

.transcript-speaker {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--primary-dark, #1e40af);
  font-size: 0.625rem;
  font-weight: 700;
}

.transcript-line p {
  margin: 0;
  color: var(--ink-mid, #475569);
  font-size: 0.75rem;
  line-height: 1.65;
}

.transcript-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0;
  color: var(--ink-mute, #64748b);
  font-size: 0.6875rem;
  font-weight: 600;
}

.transcript-note svg {
  color: var(--primary-dark, #1e40af);
}

.record-content {
  display: flex;
  flex-direction: column;
}

.record-section {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-top: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  opacity: 1;
  transform: none;
}

.record-section:first-child {
  border-top: 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary, #1e3a8a);
  color: #fff;
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 5px 12px -8px rgba(30, 58, 138, 0.75);
}

.record-field {
  min-width: 0;
}

.record-field-label {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--ink-mute, #64748b);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.record-text {
  margin: 0;
  color: var(--ink-mid, #475569);
  font-size: 0.8125rem;
  line-height: 1.65;
  text-wrap: pretty;
}

.record-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 1.5rem;
  border-top: 1px solid var(--hairline, rgba(148, 163, 184, 0.2));
  background: var(--canvas-soft, #fafbfc);
}

.record-review-note {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: var(--ink-mute, #64748b);
  font-size: 0.6875rem;
  font-weight: 600;
}

.record-review-note svg {
  flex: 0 0 auto;
  color: var(--primary-dark, #1e40af);
}

.record-action-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.record-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-sm, 8px);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.record-action--secondary {
  border: 1px solid var(--outline-strong, #cbd5e1);
  background: #fff;
  color: var(--ink-mid, #475569);
}

.record-action--primary {
  border: 1px solid var(--primary, #1e3a8a);
  background: var(--primary, #1e3a8a);
  color: #fff;
  box-shadow: 0 6px 14px -10px rgba(30, 58, 138, 0.8);
}

/* JSが利用できる場合だけ、SOAP案を一度だけ順番に表示する。 */
@media (prefers-reduced-motion: no-preference) {
  .record-reveal-ready .record-section {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.45s ease-out, transform 0.45s ease-out;
  }

  .record-card.is-revealed .record-section {
    opacity: 1;
    transform: translateY(0);
  }

  .record-card.is-revealed .record-content .record-section:nth-child(1) { transition-delay: 0.08s; }
  .record-card.is-revealed .record-content .record-section:nth-child(2) { transition-delay: 0.18s; }
  .record-card.is-revealed .record-content .record-section:nth-child(3) { transition-delay: 0.28s; }
  .record-card.is-revealed .record-content .record-section:nth-child(4) { transition-delay: 0.38s; }
}

@media (max-width: 900px) {
  .medical-record-animation {
    max-width: 760px;
  }

  .voice-mock-stage {
    height: clamp(300px, 52vw, 420px);
  }

  .voice-mock-stage .devices-stage {
    max-width: min(760px, 100%);
  }

  .voice-mock-stage .mac-wrapper {
    --mw: min(68vw, 520px);
  }

  .voice-mock-stage .iphone-wrapper {
    right: 4%;
    bottom: 6%;
  }

  .voice-mock-stage .iphone-mock {
    --iw: min(15vw, 124px);
  }
}

@media (max-width: 600px) {
  .medical-record-animation {
    max-width: none;
    margin-top: 4.75rem;
    padding: 0;
    gap: 1rem;
  }

  .voice-flow {
    height: 4.25rem;
  }

  .voice-flow-label {
    top: -1.55rem;
    font-size: 0.625rem;
  }

  .voice-mock-stage {
    width: 100%;
    height: clamp(260px, 78vw, 360px);
  }

  .voice-mock-stage .devices-stage {
    max-width: 100%;
  }

  .voice-mock-stage .mac-wrapper {
    --mw: min(76vw, 280px);
    left: 47%;
    top: 45%;
    transform: translate(-50%, -50%) !important;
  }

  .voice-mock-stage .iphone-wrapper {
    right: -4% !important;
    bottom: 18% !important;
    transform: none !important;
  }

  .voice-mock-stage .iphone-mock {
    --iw: min(17vw, 62px);
  }

  .record-card {
    width: 100%;
    border-radius: var(--radius-lg, 16px);
  }
}

@media (max-width: 360px) {
  .voice-mock-stage {
    height: clamp(240px, 84vw, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-flow-pulse {
    display: none;
  }

  .record-section {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* 課題セクション — 「記録に追われる一日」トリプティク */
.problem {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl, 96px) var(--space-md, 24px);
  background:
    radial-gradient(ellipse 48% 24% at 8% 0%, rgba(30, 64, 175, 0.08), transparent 74%),
    linear-gradient(180deg, var(--canvas-soft, #fafbfc) 0%, var(--canvas-sunken, #f1f5f9) 100%);
}

.problem::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(var(--max-width-content, 1120px), calc(100% - 48px));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.16), transparent);
}

.problem > .container {
  position: relative;
  z-index: 1;
}

/* === 導入：左に物語、右に負担の数値 === */
.problem-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(3rem, 8vw, 6rem);
  align-items: end;
  max-width: var(--max-width-content, 1120px);
  /* 直後の .problem-note は数値の脚注なので intro 側に寄せる。カードまでの
     48px は .problem-note の margin-bottom が持つ (合計は従来と同じ)。 */
  margin: 0 auto 1rem;
}

.problem-intro__copy {
  min-width: 0;
}

.problem-eyebrow {
  margin: 0 0 var(--space-sm, 16px);
  color: var(--primary-dark, #1e40af);
}

.problem-intro h2 {
  max-width: 13ch;
  margin: 0;
  color: var(--ink, #1e293b);
  /* 上限は hero h1 と同じ 3rem に留める。4.25rem (68px) だと本セクションの h2 が
     ページ全体の版面の頂点になり、h1 (48px・critical.css の版面制約で上限固定) を
     42% 上回っていた。ヒーローは weight 800 + メタリックグラデで、同級数でも上位に
     読める (2026-08-18 版面監査 01)。下限 2.75rem は他セクション h2 と同値。 */
  font-size: clamp(2.75rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.problem-intro h2 span {
  display: block;
}

.problem-intro__lead {
  max-width: 36rem;
  margin: var(--space-md, 24px) 0 0;
  color: var(--ink-mid, #475569);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.85;
  text-wrap: pretty;
  word-break: auto-phrase; /* 文節折返し (critical.css の表示コピー規律と同宣言) */
}

.problem-main-stat {
  position: relative;
  margin: 0;
  padding: 0 0 0 clamp(2rem, 4vw, 3rem);
  border-left: 1px solid rgba(30, 58, 138, 0.2);
}

.problem-main-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2px;
  width: 3px;
  height: 2.5rem;
  border-radius: 2px;
  background: var(--primary-dark, #1e40af);
}

.problem-stat-label {
  margin: 0 0 0.625rem;
  color: var(--ink-mute, #64748b);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.problem-stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0;
  white-space: nowrap;
}

.main-stat-number {
  color: var(--ink, #1e293b);
  font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
  font-size: clamp(4.5rem, 8vw, 6.5rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.stat-unit {
  color: var(--ink-mid, #475569);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* 「2.3 時間/日」の単位換算。年間 600 時間は導入効果の 420h (600 × 70%) の
   前提値なので残すが、説明文ではなく数値の言い換えとして最小限に留める
   (旧「年間600時間以上をカルテ記載に費やす現実」は 21 字 + 感想語だった)。 */
.main-stat-subtext {
  margin: 1.125rem 0 0;
  color: var(--ink-mid, #475569);
  font-size: 0.9375rem;
  line-height: 1.65;
  word-break: auto-phrase; /* 文節折返し (critical.css の表示コピー規律と同宣言) */
}

/* 数値に添える脚注記号。導入効果の .metric-footnote-mark と同役だが、
   あちらは巨大数値に対する 0.2em。こちらは 16px の行に乗るため実寸で指定する。 */
.main-stat-mark {
  margin-left: 0.15em;
  color: var(--ink-mute, #64748b);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: super;
}

/* セクション脚注 (出典)。導入効果の .value-note と同じ形。 */
.problem-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto var(--space-xl, 48px);
  color: var(--ink-mute, #64748b);
  font-size: 0.6875rem;
  line-height: 1.7;
  text-align: left;
}

.problem-note__star {
  flex: 0 0 auto;
}

/* === 診察中 → 合間 → 閉院後の3場面 === */
.problems-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md, 24px);
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.problem-item {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 48px -38px rgba(15, 23, 42, 0.52);
  opacity: 1;
  transform: none;
}

.problem-item-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--canvas-sunken, #f1f5f9);
}

.problem-item-image::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 19, 34, 0.04), rgba(11, 19, 34, 0.16));
}

.problem-item-image picture,
.problem-item-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.problem-item-image img {
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04);
  transform: scale(1.01);
}

.problem-item:nth-child(1) .problem-item-image img {
  object-position: center 45%;
}

.problem-item:nth-child(2) .problem-item-image img {
  object-position: center 52%;
}

.problem-item:nth-child(3) .problem-item-image img {
  object-position: center 42%;
}

.problem-index {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 1.75rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill, 9999px);
  background: rgba(11, 19, 34, 0.72);
  color: #fff;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.problem-item-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.5rem 1.5rem 1.625rem;
}

.problem-moment {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: max-content;
  margin: 0 0 0.75rem;
  color: var(--primary-dark, #1e40af);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.problem-moment::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.08);
}

.problem-title {
  min-height: 2.8em;
  margin: 0;
  color: var(--ink, #1e293b);
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.problem-description {
  margin: 0.875rem 0 0;
  color: var(--ink-mid, #475569);
  font-size: 0.9375rem;
  line-height: 1.75;
  text-wrap: pretty;
  word-break: auto-phrase; /* 文節折返し (critical.css の表示コピー規律と同宣言) */
}

/* === 次の「声 → SOAP」セクションへの接続 === */
.problem-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: var(--max-width-content, 1120px);
  margin: var(--space-xl, 48px) auto 0;
  padding-top: var(--space-lg, 32px);
  border-top: 1px solid rgba(148, 163, 184, 0.24);
}

.problem-bridge__line {
  width: 3rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(30, 58, 138, 0.45));
}

.problem-bridge p {
  margin: 0;
  color: var(--ink, #1e293b);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-wrap: balance;
  word-break: auto-phrase; /* 折返し時は文節境界で (「診察中の声から」を割らない) */
}

.cta-arrow {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--primary-dark, #1e40af);
}

/* JSが動いた時だけ reveal の初期状態を作る。JSなしでは常に読める。 */
@media (prefers-reduced-motion: no-preference) {
  .problem-reveal-ready .problem-item {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .problem-reveal-ready .problem-item:nth-child(2) {
    transition-delay: 0.06s;
  }

  .problem-reveal-ready .problem-item:nth-child(3) {
    transition-delay: 0.12s;
  }

  .problem-reveal-ready .problem-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* === タブレット === */
@media (max-width: 1024px) {
  .problem {
    padding-right: 20px;
    padding-left: 20px;
  }

  .problem-intro {
    grid-template-columns: minmax(0, 1.2fr) minmax(250px, 0.8fr);
    gap: var(--space-xl, 48px);
  }

  .problems-list {
    gap: var(--space-sm, 16px);
  }

  .problem-item-content {
    padding: 1.25rem;
  }
}

/* === モバイル：写真＋コピーのコンパクトな3段リスト === */
@media (max-width: 768px) {
  .problem {
    padding: var(--space-2xl, 64px) 20px;
  }

  .problem-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg, 32px);
    margin-bottom: 0.875rem;
  }

  .problem-intro h2 {
    max-width: none;
    font-size: clamp(2.25rem, 9vw, 3rem);
    line-height: 1.16;
  }

  .problem-intro__lead {
    margin-top: 1.125rem;
    font-size: 1rem;
    line-height: 1.75;
  }

  /* 狭い版面で数字と補足を横並びにする必然性がない。2 カラムだと補足が
     右へ押し込まれて不格好に折れるため縦積みにする。
     出典は 2026-08-18 にセクション脚注 (.problem-note) へ移設したので area から外した。 */
  .problem-main-stat {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "subtext";
    row-gap: 0.375rem;
    align-items: start;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(30, 58, 138, 0.2);
    border-left: 0;
  }

  .problem-main-stat::before {
    top: -2px;
    left: 0;
    width: 2.5rem;
    height: 3px;
  }

  .problem-stat-label {
    grid-area: label;
    margin-bottom: 0.5rem;
  }

  .problem-stat-value {
    grid-area: value;
  }

  .main-stat-number {
    font-size: clamp(3.75rem, 17vw, 5rem);
  }

  .stat-unit {
    font-size: 0.8125rem;
  }

  .main-stat-subtext {
    grid-area: subtext;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    word-break: auto-phrase;
  }

  .problem-note {
    margin-bottom: 2.5rem;
    /* 括弧の途中で折らせない。出典は 1 かたまりとして読ませる */
    word-break: auto-phrase;
  }

  .problems-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
    /* 電話幅 (~480px) では効かず、タブレット幅でのみ効く上限。
       画像だけが巨大化するのと、本文が 1 行に伸びすぎるのを同時に抑える。 */
    max-width: 30rem;
  }

  /* 3枚とも被写体が右寄りの横位置構図のため、縦長サムネイルに cover すると
     主題 (医師・待つ患者) が枠外に落ちる。モバイルでも横長バンドを保ち、
     画像の幅を 100% 見せる。トリミングは上下のみ (3:2 → 16:9)。 */
  .problem-item {
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    border-radius: var(--radius-md, 12px);
  }

  /* 比率を固定することで切り落とし量が幅に依存せず 15% 一定になる。
     max-height で頭打ちにすると広い幅ほど横長化して頭が切れるため使わない。 */
  .problem-item-image {
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }

  /* 16:9 は 16:10 より上下の切り落としが大きい (6% → 15%) ため、
     デスクトップの焦点のままだと頭頂が切れる。頭が上端に近い 01 / 03 は上へ寄せる。 */
  .problem-item:nth-child(1) .problem-item-image img {
    object-position: center 35%;
  }

  .problem-item:nth-child(3) .problem-item-image img {
    object-position: center 20%;
  }

  .problem-index {
    top: 0.75rem;
    left: 0.75rem;
    min-width: 2.25rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    font-size: 0.625rem;
  }

  .problem-item-content {
    justify-content: center;
    padding: 1rem 1.125rem;
  }

  .problem-moment {
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
  }

  .problem-title {
    min-height: 0;
    font-size: 1.0625rem;
    line-height: 1.45;
  }

  .problem-description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .problem-bridge {
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }

  .problem-bridge__line {
    width: 1.5rem;
  }
}

@media (max-width: 480px) {
  .problem {
    padding: 3.5rem 16px;
  }

  .problem-intro h2 {
    font-size: clamp(2.125rem, 10vw, 2.5rem);
  }

  .problem-intro__lead {
    font-size: 0.9375rem;
  }

  .problem-main-stat {
    column-gap: 1rem;
  }

  .problem-item-content {
    padding: 1rem 1rem 1.125rem;
  }

  .problem-title {
    font-size: 1rem;
  }

  .problem-bridge p {
    font-size: 0.9375rem;
  }
}

@media (max-width: 360px) {
  .problem-intro h2 {
    font-size: 2rem;
  }

  .problem-main-stat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "subtext";
  }

  .main-stat-subtext {
    margin-top: 0.625rem;
  }

  .problem-item-content {
    padding: 0.875rem 0.875rem 1rem;
  }
}
/* 既存電子カルテとの併用 — 「3 ステップ + 4 つの安心」で導入障壁を外す。
 * 実在製品の UI は描かず、SOAP の抽象行だけで同じ記録が渡ることを示す。
 */

.emr {
  position: relative;
  padding: var(--space-4xl, 96px) 0;
  background: linear-gradient(180deg, var(--canvas-sunken, #f1f5f9) 0%, var(--canvas, #fff) 50%);
  border-top: 1px solid var(--hairline-navy, rgba(30, 58, 138, 0.08));
}

.emr .section-header {
  margin-bottom: var(--space-2xl, 64px);
}

.emr .section-subtitle {
  max-width: 48rem;
}

/* ───────── 3 ステップ ───────── */
.emr-flow {
  --emr-flow-gap: clamp(1rem, 2vw, 1.75rem);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11.75rem, auto) minmax(0, 1.08fr);
  gap: var(--emr-flow-gap);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem) clamp(2.25rem, 3.5vw, 3rem);
  border: 1px solid rgba(30, 58, 138, 0.12);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 80% 46%, rgba(219, 234, 254, 0.7) 0%, rgba(239, 246, 255, 0) 34%),
    linear-gradient(rgba(30, 58, 138, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.028) 1px, transparent 1px),
    rgba(255, 255, 255, 0.94);
  background-size: auto, 2rem 2rem, 2rem 2rem, auto;
  box-shadow:
    0 32px 72px -54px rgba(15, 23, 42, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 左から右へ抜ける光の帯で、3 要素をひとつの処理として束ねる */
.emr-flow::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 13%;
  width: 74%;
  height: 5.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(239, 246, 255, 0) 0%, rgba(219, 234, 254, 0.5) 50%, rgba(239, 246, 255, 0) 100%);
  filter: blur(1.5rem);
  content: "";
  transform: translateY(-50%);
}

.emr-step {
  position: relative;
  min-width: 0;
}

.emr-step--source,
.emr-step--target {
  z-index: 1;
}

.emr-step--target {
  padding-bottom: 0.5rem;
}

.emr-step__heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.emr-step__number {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(30, 58, 138, 0.18);
  border-radius: 50%;
  background: var(--primary-light, #eff6ff);
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}

.emr-step__kicker {
  margin: 0 0 0.125rem;
  color: var(--ink-mute, #64748b);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.emr-step h3 {
  margin: 0;
  color: var(--ink, #0f172a);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* ───────── SOAP の抽象ウィンドウ ───────── */
.emr-window {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--outline, #e2e8f0);
  border-radius: 0.875rem;
  background: #fff;
  box-shadow:
    0 22px 44px -32px rgba(15, 23, 42, 0.68),
    0 1px 2px rgba(15, 23, 42, 0.03);
}

.emr-step--target .emr-window {
  border-color: rgba(30, 58, 138, 0.22);
  box-shadow:
    0 26px 52px -34px rgba(30, 58, 138, 0.45),
    0 0 0 4px rgba(30, 58, 138, 0.035);
}

.emr-window__bar {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 1.875rem;
  padding: 0 0.75rem;
  border-bottom: 1px solid var(--outline, #e2e8f0);
  background: var(--canvas-sunken, #f1f5f9);
}

.emr-window__bar i {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--outline-strong, #cbd5e1);
}

.emr-window__bar::after {
  margin-left: auto;
  color: rgba(71, 85, 105, 0.62);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  content: "SOAP NOTE";
}

.emr-window__bar--wave {
  gap: 0.1875rem;
}

.emr-window__bar--wave i {
  width: 0.125rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(30, 58, 138, 0.52);
}

.emr-window__bar--wave i:nth-child(2) { height: 0.8125rem; }
.emr-window__bar--wave i:nth-child(3) { height: 0.375rem; }
.emr-window__bar--wave i:nth-child(4) { height: 0.6875rem; }
.emr-window__bar--wave i:nth-child(5) { height: 0.4375rem; }

.emr-window__body {
  display: grid;
  gap: 0.625rem;
  padding: 1.125rem 1rem;
}

.emr-doc__row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.emr-doc__row i {
  flex: 0 0 auto;
  width: 1rem;
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
}

.emr-doc__row b {
  width: var(--w, 80%);
  height: 0.4375rem;
  border-radius: 999px;
  background: rgba(30, 58, 138, 0.14);
}

.emr-step--target .emr-doc__row b {
  background: rgba(30, 64, 175, 0.26);
}

/* 電子カルテ側は背後の無銘ウィンドウで「特定製品に依存しない」を示す */
.emr-stack {
  position: relative;
  z-index: 0;
  margin-right: 0.625rem;
}

.emr-stack__ghost {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid var(--outline, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  background: #fff;
}

.emr-stack__ghost--near {
  transform: translate(0.375rem, -0.3125rem);
  opacity: 0.72;
}

.emr-stack__ghost--far {
  z-index: -2;
  transform: translate(0.75rem, -0.625rem);
  opacity: 0.42;
}

.emr-step__compat {
  position: absolute;
  z-index: 3;
  right: -0.25rem;
  bottom: -0.875rem;
  width: fit-content;
  margin: 0;
  padding: 0.25rem 0.625rem;
  border: 1px solid rgba(30, 58, 138, 0.18);
  border-radius: var(--radius-pill, 9999px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.72);
  color: var(--primary-dark, #1e40af);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ───────── 中央のコピー操作 ───────── */
.emr-step--action {
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6.75rem;
  padding: 0;
  color: var(--primary-dark, #1e40af);
}

.emr-step--action::before,
.emr-step--action::after {
  position: absolute;
  top: 2rem;
  width: var(--emr-flow-gap);
  height: 1px;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.06), rgba(30, 58, 138, 0.3));
  content: "";
}

.emr-step--action::before {
  right: 100%;
}

.emr-step--action::after {
  left: 100%;
  background: linear-gradient(90deg, rgba(30, 58, 138, 0.3), rgba(30, 58, 138, 0.08));
}

.emr-step--action .emr-step__number {
  position: absolute;
  z-index: 2;
  top: -0.0625rem;
  left: calc(50% - 2.625rem);
  width: 1.5rem;
  height: 1.5rem;
  background: #fff;
  border-color: rgba(30, 58, 138, 0.22);
  box-shadow: 0 6px 14px -10px rgba(15, 23, 42, 0.7);
  color: var(--primary-dark, #1e40af);
  font-size: 0.5625rem;
}

.emr-step__action-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: linear-gradient(145deg, #3157c8 0%, var(--primary-dark, #1e40af) 62%, #172e75 100%);
  box-shadow:
    0 16px 28px -18px rgba(30, 58, 138, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    0 0 0 6px rgba(239, 246, 255, 0.9);
  color: #fff;
}

.emr-step__action-copy {
  min-width: 0;
  text-align: center;
}

.emr-step--action .emr-step__kicker {
  color: var(--ink-mute, #64748b);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.emr-step--action h3 {
  color: var(--primary-dark, #1e40af);
  font-size: 0.8125rem;
  white-space: nowrap;
}

.emr-step__direction {
  position: absolute;
  top: 1.5rem;
  right: -0.125rem;
  flex: 0 0 auto;
}

/* ───────── 導入時に変えなくてよい 4 項目 ───────── */
.emr-assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  position: relative;
  z-index: 3;
  max-width: 940px;
  margin: -1rem auto 0;
  padding: 0.75rem 0;
  border: 1px solid rgba(30, 58, 138, 0.1);
  border-radius: var(--radius-lg, 16px);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 40px -32px rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(10px);
  list-style: none;
}

.emr-assurances li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  color: var(--ink-mid, #475569);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}

.emr-assurances li + li {
  border-left: 1px solid rgba(30, 58, 138, 0.1);
}

.emr-assurances svg {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0.1875rem;
  border-radius: 50%;
  background: var(--primary-light, #eff6ff);
  color: var(--primary, #1e3a8a);
}

@media (max-width: 900px) {
  .emr-flow {
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto) minmax(0, 1.05fr);
    max-width: 720px;
    padding: 1.75rem 1.25rem 2.5rem;
  }

  .emr-step--source,
  .emr-step--target {
    padding: 0;
  }

  .emr-step--target {
    padding-bottom: 0.5rem;
  }

  .emr-step__heading {
    gap: 0.5rem;
  }

  .emr-step h3 {
    font-size: 0.9375rem;
  }

  .emr-assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
    padding: 0;
  }

  .emr-assurances li {
    justify-content: flex-start;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    white-space: normal;
  }

  .emr-assurances li + li {
    border-left: 0;
  }

  .emr-assurances li:nth-child(even) {
    border-left: 1px solid rgba(30, 58, 138, 0.1);
  }

  .emr-assurances li:nth-child(n + 3) {
    border-top: 1px solid rgba(30, 58, 138, 0.1);
  }
}

@media (max-width: 640px) {
  .emr {
    padding: var(--space-xl, 48px) 0;
  }

  .emr .section-header {
    margin-bottom: 2.5rem;
  }

  .emr-flow {
    --emr-flow-gap: 2.25rem;

    grid-template-columns: minmax(0, 1fr);
    gap: var(--emr-flow-gap);
    max-width: 22rem;
    padding: 1.5rem 1rem 2.25rem;
    border-radius: 1.25rem;
    background-size: auto, 1.5rem 1.5rem, 1.5rem 1.5rem, auto;
  }

  .emr-flow::before {
    top: 18%;
    left: 50%;
    width: 5rem;
    height: 66%;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0) 0%, rgba(219, 234, 254, 0.56) 50%, rgba(239, 246, 255, 0) 100%);
    transform: translateX(-50%);
  }

  .emr-step--source,
  .emr-step--target {
    width: 100%;
    padding: 0;
  }

  .emr-step--target {
    padding-bottom: 0.5rem;
  }

  .emr-step__heading {
    margin-bottom: 0.75rem;
  }

  .emr-window__body {
    gap: 0.5rem;
    padding: 0.875rem;
  }

  .emr-step--action {
    width: 9rem;
    justify-self: center;
    padding: 0;
  }

  .emr-step--action::before,
  .emr-step--action::after {
    left: 50%;
    width: 1px;
    height: var(--emr-flow-gap);
  }

  .emr-step--action::before {
    top: auto;
    right: auto;
    bottom: 100%;
  }

  .emr-step--action::after {
    top: 100%;
    right: auto;
  }

  .emr-step__action-icon {
    display: inline-flex;
  }

  .emr-step__direction {
    top: auto;
    right: auto;
    bottom: -1.625rem;
    left: calc(50% - 0.5rem);
    transform: rotate(90deg);
  }

  .emr-step--action h3 {
    font-size: 0.875rem;
  }

  .emr-step__compat {
    right: 0;
    bottom: -0.875rem;
    font-size: 0.6875rem;
  }

  .emr-assurances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 20.5rem;
    margin-top: -0.75rem;
  }

  .emr-assurances li {
    align-items: flex-start;
    min-height: 3.75rem;
    padding: 0.75rem;
    font-size: 0.75rem;
  }

  .emr-assurances svg {
    width: 0.875rem;
    height: 0.875rem;
    margin-top: 0.0625rem;
  }
}

@media (prefers-contrast: high) {
  .emr-stack__ghost {
    opacity: 1;
  }

  .emr-assurances,
  .emr-step--source,
  .emr-step--target,
  .emr-step--action {
    border-color: currentColor;
  }
}
/* 導入ロードマップ
 * 専任担当の写真と 4 工程を 1 枚の導入ボードに統合し、
 * 「早く始められる」「導入後も伴走する」を同時に伝える。
 */

#solution.roadmap {
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl, 96px) 0;
  background: linear-gradient(180deg, var(--canvas, #fff) 0%, var(--canvas-soft, #fafbfc) 100%);
  border-top: 1px solid var(--hairline-navy, rgba(30, 58, 138, 0.08));
}

.roadmap .section-header {
  margin-bottom: var(--space-2xl, 64px);
  text-align: center;
  opacity: 1;
}

.roadmap .section-header .section-eyebrow {
  margin-bottom: 0.875rem;
}

.roadmap .section-header h2 {
  position: relative;
  display: block;
  margin: 0 0 1.25rem;
  color: var(--text, #1e293b);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.roadmap-title__accent {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin: 0 0.08em;
  color: var(--primary-dark, #1e40af);
}

.roadmap-title__accent::before {
  position: absolute;
  z-index: -1;
  right: -0.08em;
  bottom: 0.08em;
  left: -0.08em;
  height: 0.34em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(219, 234, 254, 0) 0%, rgba(147, 197, 253, 0.38) 18%, rgba(147, 197, 253, 0.38) 82%, rgba(219, 234, 254, 0) 100%);
  content: "";
}

.roadmap .section-header h2::after {
  position: absolute;
  bottom: -0.625rem;
  left: 50%;
  width: 2.5rem;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--primary, #1e3a8a), transparent);
  content: "";
  opacity: 0.55;
  transform: translateX(-50%);
}

.roadmap .section-header .section-subtitle {
  max-width: 42rem;
  margin-top: 1.5rem;
  color: var(--text-light, #64748b);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ───────── 写真と工程を束ねる導入ボード ───────── */
.roadmap-layout {
  display: grid;
  grid-template-columns: minmax(270px, 310px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid rgba(30, 58, 138, 0.11);
  border-radius: 1.5rem;
  background:
    radial-gradient(circle at 96% 0%, rgba(219, 234, 254, 0.72) 0%, rgba(239, 246, 255, 0) 34%),
    rgba(255, 255, 255, 0.94);
  box-shadow:
    0 34px 76px -58px rgba(15, 23, 42, 0.74),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ───────── 専任担当カード ───────── */
.roadmap-companion {
  min-width: 0;
}

.roadmap-companion__figure {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  min-height: 28rem;
  margin: 0;
  border-radius: 1.125rem;
  background: var(--canvas-sunken, #f1f5f9);
  box-shadow: 0 24px 48px -34px rgba(15, 23, 42, 0.62);
}

.roadmap-companion__figure::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0) 45%, rgba(15, 23, 42, 0.18) 64%, rgba(15, 23, 42, 0.9) 100%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.08), transparent 44%);
  content: "";
  pointer-events: none;
}

.roadmap-companion__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.roadmap-companion__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.roadmap-companion__caption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 4rem 1.25rem 1.25rem;
}

.roadmap-companion__role {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
  color: var(--gold-soft, #e6c789);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.roadmap-companion__role svg {
  flex: 0 0 auto;
}

.roadmap-companion__message {
  max-width: 29ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.875rem;
  line-height: 1.75;
}

/* ───────── 工程ボード ───────── */
.roadmap-board {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.roadmap-board__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0.25rem 1.125rem;
}

.roadmap-board__eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.roadmap-board__title {
  margin: 0;
  color: var(--text, #1e293b);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.5;
}

.roadmap-board__fast {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.75rem;
  border: 1px solid rgba(30, 58, 138, 0.16);
  border-radius: var(--radius-pill, 9999px);
  background: rgba(239, 246, 255, 0.9);
  color: var(--primary-dark, #1e40af);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.roadmap-board__fast svg {
  flex: 0 0 auto;
}

.roadmap-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "step-1 step-2"
    "step-4 step-3";
  gap: 1rem;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap-step:nth-child(1) { grid-area: step-1; }
.roadmap-step:nth-child(2) { grid-area: step-2; }
.roadmap-step:nth-child(3) { grid-area: step-3; }
.roadmap-step:nth-child(4) { grid-area: step-4; }

.roadmap-step {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 11.25rem;
  flex-direction: column;
  padding: 1.125rem;
  border: 1px solid rgba(30, 58, 138, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 18px 40px -36px rgba(15, 23, 42, 0.6);
}

.roadmap-step:first-child {
  border-color: rgba(30, 58, 138, 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgba(191, 219, 254, 0.55) 0%, rgba(239, 246, 255, 0) 46%),
    linear-gradient(180deg, rgba(239, 246, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.roadmap-step:last-child {
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(255, 255, 255, 0.94) 100%);
}

.roadmap-step__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.roadmap-step__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.875rem;
  height: 1.875rem;
  border: 1px solid rgba(30, 58, 138, 0.16);
  border-radius: 50%;
  background: var(--primary-light, #eff6ff);
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}

.roadmap-step:first-child .roadmap-step__index {
  border-color: var(--primary-dark, #1e40af);
  background: var(--primary-dark, #1e40af);
  color: #fff;
  box-shadow: 0 8px 18px -12px rgba(30, 58, 138, 0.8);
}

.roadmap-step__when {
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.roadmap-step__title {
  margin: 0 0 0.5rem;
  color: var(--text, #1e293b);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.45;
}

.roadmap-step__text {
  margin: 0;
  color: var(--text-light, #64748b);
  font-size: 0.8125rem;
  line-height: 1.72;
}

/* 2 × 2 では 1 → 2 → 3 → 4 と蛇行させ、視線の移動量を抑える */
@media (min-width: 641px) {
  .roadmap-step:nth-child(-n + 3)::after {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(30, 58, 138, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.72);
    color: var(--primary-dark, #1e40af);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }

  .roadmap-step:nth-child(1)::after {
    top: 50%;
    right: -1.3125rem;
    content: "→";
    transform: translateY(-50%);
  }

  .roadmap-step:nth-child(2)::after {
    bottom: -1.3125rem;
    left: 50%;
    content: "↓";
    transform: translateX(-50%);
  }

  .roadmap-step:nth-child(3)::after {
    top: 50%;
    left: -1.3125rem;
    content: "←";
    transform: translateY(-50%);
  }
}

@media (max-width: 900px) {
  .roadmap-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 720px;
    padding: 1.25rem;
  }

  .roadmap-companion__figure {
    min-height: 0;
    aspect-ratio: 16 / 7;
  }

  .roadmap-companion__figure img {
    object-position: 50% 32%;
  }

  .roadmap-companion__caption {
    padding: 4rem 1.5rem 1.25rem;
  }

  .roadmap-companion__message {
    max-width: 40ch;
  }
}

@media (max-width: 768px) {
  #solution.roadmap {
    padding: 3rem 0;
  }

  .roadmap .section-header {
    margin-bottom: var(--space-xl, 48px);
  }
}

@media (max-width: 640px) {
  .roadmap-layout {
    gap: 1rem;
    padding: 0.75rem;
    border-radius: 1.25rem;
  }

  .roadmap-companion__figure {
    aspect-ratio: 16 / 10;
    border-radius: 0.875rem;
  }

  .roadmap-companion__figure img {
    object-position: 50% 27%;
  }

  .roadmap-companion__caption {
    padding: 3.5rem 1rem 1rem;
  }

  .roadmap-companion__role {
    margin-bottom: 0.375rem;
    font-size: 0.625rem;
  }

  .roadmap-companion__message {
    max-width: 34ch;
    font-size: 0.75rem;
    line-height: 1.65;
  }

  .roadmap-board__header {
    align-items: flex-start;
    padding: 0.375rem 0.25rem 0.875rem;
  }

  .roadmap-board__eyebrow {
    font-size: 0.5625rem;
  }

  .roadmap-board__title {
    font-size: 0.9375rem;
  }

  .roadmap-board__fast {
    padding: 0.375rem 0.5625rem;
    font-size: 0.625rem;
  }

  .roadmap-steps {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "step-1"
      "step-2"
      "step-3"
      "step-4";
    gap: 1.25rem;
  }

  .roadmap-step {
    min-height: 0;
    padding: 1rem;
  }

  .roadmap-step:nth-child(-n + 3)::after {
    position: absolute;
    z-index: 3;
    bottom: -1.375rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid rgba(30, 58, 138, 0.14);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 16px -12px rgba(15, 23, 42, 0.72);
    color: var(--primary-dark, #1e40af);
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    content: "↓";
    transform: translateX(-50%);
  }

  .roadmap-step__meta {
    margin-bottom: 0.75rem;
  }

  .roadmap-step__title {
    font-size: 0.9375rem;
  }

  .roadmap-step__text {
    font-size: 0.8125rem;
  }
}

@media (max-width: 360px) {
  .roadmap-board__header {
    flex-direction: column;
    gap: 0.625rem;
  }
}

@media (prefers-contrast: high) {
  .roadmap-layout,
  .roadmap-companion__figure,
  .roadmap-step,
  .roadmap-board__fast {
    border-color: currentColor;
  }
}
/* 導入効果 — 実測値と一日の変化
 * 数字を一つに絞り、主成果と日々の変化を左右で対比して読み取れるようにする。 */
.value {
  position: relative;
  overflow: hidden;
  /* 縦余白は共通 token。画面幅で隣接セクションとの大小が反転しないよう固定し、
     狭幅だけ value-responsive.css で段階的に詰める。 */
  padding: var(--space-4xl, 96px) 3rem;
  background:
    radial-gradient(circle at 8% 12%, rgba(59, 130, 246, 0.08), transparent 28rem),
    radial-gradient(circle at 92% 88%, rgba(216, 168, 73, 0.07), transparent 24rem),
    var(--canvas-soft, #f8fafc);
}

.value::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}

.value .container {
  position: relative;
  z-index: 1;
}

.value-header {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.value-header h2 {
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  text-wrap: balance;
}

/* 主成果を少し絞り、説明量の多い一日の流れへ横幅を渡す。
   脚注も同じ版面幅にして、左右の端を揃える。 */
.value-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  width: min(100%, var(--max-width-content, 1120px));
  margin: 0 auto;
}

.metric-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-xl, 20px);
}

.metric-card--primary {
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: #fff;
  background:
    radial-gradient(90% 80% at 0% 0%, rgba(59, 130, 246, 0.38), transparent 58%),
    radial-gradient(70% 70% at 100% 100%, rgba(216, 168, 73, 0.12), transparent 60%),
    linear-gradient(145deg, #183a83 0%, var(--surface-dark-900, #101d3d) 58%, var(--surface-dark-950, #0b1322) 100%);
  box-shadow:
    0 32px 72px -34px rgba(15, 23, 42, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.metric-card--primary::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -14%;
  width: 19rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow:
    0 0 0 3.75rem rgba(255, 255, 255, 0.018),
    0 0 0 7.5rem rgba(255, 255, 255, 0.012);
  pointer-events: none;
}

.metric-card__top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.metric-kicker {
  color: rgba(255, 255, 255, 0.64);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
}

.metric-card__body {
  position: relative;
  z-index: 1;
  margin: auto 0;
}

.metric-value {
  margin: 1rem 0 0;
  color: #fff;
  font-family: var(--font-num, "Space Grotesk", "Inter", sans-serif);
  font-size: clamp(4.5rem, 7vw, 6.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 0.88;
  letter-spacing: -0.055em;
  text-shadow: 0 12px 36px rgba(2, 6, 23, 0.18);
  white-space: nowrap;
}

.metric-unit {
  margin-left: 0.07em;
  font-size: 0.38em;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.metric-footnote-mark {
  margin-left: 0.2em;
  font-size: 0.2em;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: super;
  opacity: 0.72;
}

.metric-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.45;
}

.metric-progress {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.metric-progress span {
  display: block;
  width: var(--metric-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-gold, #d8a849), var(--accent-gold-hi, #f6e6b4));
  box-shadow: 0 0 14px rgba(216, 168, 73, 0.4);
}

/* 白カードの質感は従来のライトカードから引き継ぎ、
   装飾より時系列の読み順が前に出るよう内部は単純な二列にする。 */
.value-shift {
  min-width: 0;
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid rgba(30, 58, 138, 0.1);
  border-radius: var(--radius-xl, 20px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 18px 48px -36px rgba(15, 23, 42, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.value-shift__title {
  margin: 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(30, 58, 138, 0.1);
  color: var(--primary-950, #172554);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.value-shift__list {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 0 0;
  list-style: none;
}

.value-shift__item {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.value-shift__seq {
  padding-top: 0.2rem;
  color: var(--accent-gold, #d8a849);
  font-family: var(--font-num, "Space Grotesk", sans-serif);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

.value-shift__body {
  min-width: 0;
}

.value-shift__label {
  margin: 0;
  color: var(--ink, #1e293b);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
}

.value-shift__desc {
  margin: 0.35rem 0 0;
  color: var(--ink-mute, #64748b);
  font-size: 0.875rem;
  line-height: 1.75;
}

.value-note {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  width: min(100%, var(--max-width-content, 1120px));
  margin: 1.5rem auto 0;
  color: var(--text-mid, #475569);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: left;
}

.value-note__star {
  flex: 0 0 auto;
  color: var(--primary, #1e3a8a);
  font-weight: 700;
}

@media (forced-colors: active) {
  .metric-card,
  .value-shift {
    border: 1px solid CanvasText;
  }

  .metric-kicker,
  .metric-value,
  .metric-unit,
  .metric-footnote-mark,
  .metric-label,
  .value-shift__title,
  .value-shift__seq,
  .value-shift__label,
  .value-shift__desc {
    color: CanvasText;
  }

  .metric-progress span {
    background: Highlight;
  }
}
/* 導入効果 — レスポンシブ */
@media (max-width: 900px) {
  .value {
    padding: 5.5rem 1.75rem;
  }

  /* 二つの内容をそれぞれ十分な幅で読めるよう、タブレットでは縦に積む。 */
  .value-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .value {
    padding: 4.5rem 1.25rem;
  }

  .value-header {
    margin-bottom: 2.5rem;
  }

  .value-grid {
    gap: 0.75rem;
  }

  .metric-card,
  .value-shift {
    border-radius: var(--radius-lg, 16px);
  }

  .metric-card--primary {
    padding: 1.75rem;
  }

  .metric-value {
    font-size: clamp(4rem, 13vw, 4.5rem);
  }

  .value-shift {
    padding: 1.5rem;
  }

  .value-shift__title {
    padding-bottom: 1rem;
  }

  .value-shift__list {
    gap: 0.75rem;
    padding-top: 1rem;
  }

  .value-shift__item {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
  }

  .value-note {
    margin-top: 1.25rem;
    font-size: 0.6875rem;
  }
}

@media (max-width: 375px) {
  .value {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  /* 小さな画面では余白と数字を一段落とし、本文の折り返し幅を確保する。 */
  .metric-card--primary {
    padding: 1.5rem;
  }

  .metric-value {
    font-size: 3.75rem;
  }

  .value-shift {
    padding: 1.25rem;
  }

  .value-shift__item {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0.625rem;
  }

  .value-shift__desc {
    font-size: 0.75rem;
  }
}
/* 中間 CTA — 導入効果と比較の境目に置く「途中の出口」。
 * クロージング CTA (dark / 中央寄せ / 主副 2 ボタン) とは別レジスタで組む:
 * light 拍 + 非対称の帯 + 主 CTA 1 つ。design.md L321「ダーク拍を連続させない」に従う。 */

/* 背景スクリム。写真の上に重ねて文字の地を作る 2 枚組:
   1 枚目 = 左 (コピー) の上に置く光だまり。右 (部屋) へ向けて開く
   2 枚目 = 全体を軽く起こすだけの薄いスクリム
   custom property にしてあるのは、積み上がるモバイルで「左だけ伏せる」形が
   成立しなくなるため、ブレークポイントごとに差し替えるのが目的。 */
.mid-cta {
  /* 濃度は「文字の直下の最暗ピクセル」を実測して決めている (勘で一律に伏せない)。
     必要最小値 (1440px 実測): eyebrow 0.27 / h2 0.25 (44px bold = 大きな文字なので
     閾値 3:1) / リンク 0.00 (直下が明るい壁) / 副題 0.78。
     副題だけ突出して高いのは直下に机・椅子の暗部があるためで、
     背景の縦位置を変えても 0.69 までしか下がらない = 構造的な下限。
     よって全面を伏せるのではなく、コピーの上にだけ光だまりを置き、
     文字が無い領域は開けて写真を見せる。 */
  --mid-cta-scrim:
    /* 1. コピーの上の光だまり。x 51% 付近まで 0.80 の平坦部を保ち (副題の右端が 52%)、
          そこから長く落として楕円の縁を感じさせない */
    radial-gradient(
      ellipse 78% 170% at 8% 50%,
      rgba(250, 251, 252, 0.82) 0%,
      rgba(250, 251, 252, 0.8) 55%,
      rgba(250, 251, 252, 0.3) 80%,
      rgba(250, 251, 252, 0) 100%
    ),
    /* 2. 全体を軽く起こすだけの薄いスクリム。写真を見せるのが目的なので最小限 */
    linear-gradient(
      90deg,
      rgba(250, 251, 252, 0.18) 0%,
      rgba(250, 251, 252, 0.12) 60%,
      rgba(250, 251, 252, 0.1) 100%
    );
  /* 旧 3 枚目「暖色の写真と navy の UI を橋渡しする navy ティント」は 2026-08-18 に撤去。
     写真をクールトーンへ差し替えて橋渡しの対象が無くなり、重ねると青が過剰になるため。 */

  position: relative;
  /* KG-5: light セクションの縦 padding は --space-4xl (96) に統一 (dark 拍のみ 128) */
  padding: var(--space-4xl, 96px) 0;
  /* 画像の読込前・失敗時の地。これが無いと一瞬 or 恒久的に透明になる */
  background-color: var(--canvas-sunken, #f1f5f9);
  /* 装飾目的の写真なので CSS 背景で持つ (意味は見出しが担うため alt 不要)。
     写真の構図 (左 40% が無地の壁 / 右に机・診察ベッド・窓) と
     レイアウト (左コピー / 右ボタン) が一致しており、
     文字は壁の上に、ボタンは部屋の上に乗る。 */
  background-image: var(--mid-cta-scrim), url("/image/mid-cta-room.c6ac29e6.webp");
  /* image-set 対応ブラウザは webp/jpeg を自前選択する。非対応は上の宣言 (webp) が残る */
  background-image: var(--mid-cta-scrim),
    image-set(
      url("/image/mid-cta-room.c6ac29e6.webp") type("image/webp"),
      url("/image/mid-cta-room.0f42ac1c.jpg") type("image/jpeg")
    );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border-top: 1px solid var(--hairline-navy-strong, rgba(30, 58, 138, 0.2));
  border-bottom: 1px solid var(--hairline-navy-strong, rgba(30, 58, 138, 0.2));
}

/* 2 カラムのまま幅が縮むと、コピー列は viewport に対して「相対的に」広くなる
   (副題の右端: 1440px で 52% → 1024px で 58% → 901px で 66%)。
   光だまりは背景 = viewport 基準の % なので狭い側では平坦部が届かず、
   1024px 実測で副題が 3.13:1 と AA を割った。この帯域だけ平坦部を広げる。 */
@media (min-width: 901px) and (max-width: 1199px) {
  .mid-cta {
    --mid-cta-scrim:
      radial-gradient(
        ellipse 95% 170% at 8% 50%,
        rgba(250, 251, 252, 0.82) 0%,
        rgba(250, 251, 252, 0.8) 62%,
        rgba(250, 251, 252, 0.3) 85%,
        rgba(250, 251, 252, 0) 100%
      ),
      linear-gradient(
        90deg,
        rgba(250, 251, 252, 0.18) 0%,
        rgba(250, 251, 252, 0.12) 60%,
        rgba(250, 251, 252, 0.1) 100%
      );
  }
}

.mid-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

/* .section-header の既定は中央寄せ + 下 64px。帯の中では左寄せ・詰めて使う */
.mid-cta .section-header {
  margin-bottom: 0;
  text-align: left;
}

/* h2 下線 (common.css: left 50% + translateX) を左端基準へ寄せ直す */
.mid-cta .section-header h2::after {
  left: 0;
  transform: none;
}

.mid-cta .section-eyebrow {
  margin: 0;
  color: var(--primary-dark, #1e40af);
}

.mid-cta h2 {
  margin: 0.75rem 0 0;
  color: var(--ink, #1e293b);
  text-wrap: balance;
  word-break: auto-phrase; /* 文節折返し (表示コピー規律) */
}

.mid-cta .section-subtitle {
  /* h2 下線が bottom -12px に出るので、その下をくぐらない位置から始める */
  margin: 1.75rem 0 0;
  /* responsive.css が中央寄せ用に .section-subtitle へ padding: 0 1rem を当てる
     (bundle 後段なので後勝ちする)。左寄せの帯では h2 と 16px ずれるため打ち消す */
  padding: 0;
  color: var(--ink-mid, #475569);
  font-size: 1.0625rem;
  line-height: 1.75;
  word-break: auto-phrase;
}

.mid-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

/* 副導線は「2 つ目のボタン」にしない。主 CTA との主従を形 (箱 vs 線) で分ける。
   色は --ink-mid ではなく --ink: このリンクだけスクリムが最も薄い右側 (実測 75.6-82.9%)
   に載るため、--ink-mid だと写真の暗部に対して最悪 3.76:1 で AA (4.5:1) を割る。
   --ink なら同条件で約 7.3:1。主従はグレーの濃さではなく「箱 vs 線」の形で担保する。 */
.mid-cta__link {
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(30, 58, 138, 0.35);
  color: var(--ink, #1e293b);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    color var(--duration-fast, 150ms) var(--easing-standard, ease),
    border-color var(--duration-fast, 150ms) var(--easing-standard, ease);
}

.mid-cta__link:hover {
  color: var(--primary-dark, #1e40af);
  border-bottom-color: currentColor;
}

.mid-cta__link:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--primary-dark, #1e40af);
  outline-offset: 3px;
}

/* 2 カラムだとコピーが窮屈になる幅で積む (768 まで待つとボタンが痩せる) */
@media (max-width: 900px) {
  /* 積み上がるとコピーが全幅に載るため、「左だけ伏せる」水平スクリムが成立しない。
     全面を均一に伏せ、下へ向かってわずかに濃くする (下に行くほど文字が増えるため) */
  .mid-cta {
    /* 積み上がるとコピーが全幅に載るため水平の光だまりは成立しない。代わりに
       「高さ方向」で必要濃度が大きく違うことを使う (375px 実測の下限):
         eyebrow (y15%) 0.36 / h2 (y30%) 0.00 / 副題 (y52%) 0.77 / リンク (y85%) 0.54
       h2 の背後はほぼ濃度不要なので、上半分は開けて部屋を見せ、
       小さい文字が並ぶ中盤だけ伏せる。一律 0.88 で全面を潰さない。 */
    /* 平坦部は 68% まで伸ばす: 320px では副題が 3 行になり、62% 止まりだと
       末尾が薄い側へ落ちて 4.43:1 と AA を僅かに割ったため。 */
    --mid-cta-scrim:
      linear-gradient(
        180deg,
        rgba(250, 251, 252, 0.42) 0%,
        rgba(250, 251, 252, 0.42) 36%,
        rgba(250, 251, 252, 0.8) 46%,
        rgba(250, 251, 252, 0.8) 68%,
        rgba(250, 251, 252, 0.62) 78%,
        rgba(250, 251, 252, 0.62) 100%
      );
  }

  .mid-cta__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* 主 CTA だけ全幅にする。align-items: stretch にすると副導線のテキストリンクまで
     伸びて下線が区切り線に見えるため、中央揃えのまま width だけ指定する */
  .mid-cta__actions .cta-btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mid-cta {
    /* KG-5: mobile は light 48 / dark 64 */
    padding: var(--space-xl, 48px) 0;
    /* 縦長の帯になると cover は横を大きく捨てる (375x432 では画像幅の 48.8% のみ可視)。
       left だと無地の壁だけが残って「診察室」と読めないため、
       机・椅子・棚が入る 40% へ寄せる (可視域 = 画像の 20.4%-69.3%) */
    background-position: 40% center;
  }

  .mid-cta .section-subtitle {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mid-cta__link {
    transition: none;
  }
}
/* 社会的証明（導入実績）セクション */
.social-proof {
  padding: var(--space-4xl, 96px) var(--space-md, 24px);
  background: var(--canvas);
  position: relative;
  overflow: hidden;
}

.social-proof .section-header {
  text-align: center;
  max-width: 720px;
  /* KG-9: 標準 --space-2xl(64) に集約 */
  margin: 0 auto var(--space-2xl, 64px);
}

.social-proof h2 {
  /* section heading は critical.css の global h2 トークンに統一 (44px@desktop) */
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

/* 推薦コメントグリッド */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 課題 / 機能と同じ 3 列カードの型。gap を --space-md に揃える
     (旧 1rem では 3 セクションの gap が 24/16/20px と全部違った。版面監査 04) */
  gap: var(--space-md, 24px);
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto 2.5rem;
}

.testimonial-card {
  background: var(--canvas);
  border-radius: var(--radius-sm);
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--hairline-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-card:hover {
  transform: translateY(-2px);
  border-color: rgba(30, 58, 138, 0.24);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.08);
}

.testimonial-card:hover .testimonial-photo img {
  transform: scale(1.02);
}

.testimonial-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: var(--canvas-soft);
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  transition: transform 0.6s var(--easing-standard);
}

.testimonial-photo::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.18) 100%);
  pointer-events: none;
}

.testimonial-content {
  padding: 1.35rem 1.35rem 0;
  flex: 1;
  position: relative;
}

/* signature: 大きく淡い引用符モチーフ (装飾、本文の背後) */
.testimonial-content::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  right: 0.85rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(30, 58, 138, 0.08);
  pointer-events: none;
  z-index: 0;
}

.testimonial-type {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  /* v2: 薄青背景 → white + navy outline でパレット純化 */
  background: var(--canvas);
  border: 1px solid rgba(30, 58, 138, 0.2);
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.testimonial-content blockquote {
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* v4: 「声」の主役は引用文。サイズ・コントラストを上げて写真より前に出す */
.testimonial-content p {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--text);
  margin: 0;
}

/* キーフレーズ強調 (スキャンで便益が刺さるように navy 太字) */
.t-emph {
  font-weight: 700;
  color: var(--primary-dark);
}

.testimonial-author {
  padding: 1.25rem 1.35rem 1.35rem;
  margin-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  background: var(--canvas-soft);
}

.author-name {
  font-weight: 700;
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.author-detail {
  font-size: 0.8125rem;
  color: var(--text-light);
}

/* 導入事例リンク — 社会的証明の「続き」へ送る副 CTA。
   旧: 白地 + 1px ヘアラインで、白の版面に対して figure/ground が立たず
   チップ (押せない要素) に見えていた。radius も --radius-sm(8px) で
   ボタントークン (--radius-md) からドリフトしていた。
   新: 淡い navy ティント面 + navy 矢印チップで「押せる」形を明示しつつ、
   面全体を navy 塗りにはしない (主 CTA との主従を壊さないため)。 */
.case-studies-link {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.case-studies-link__button {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
  /* 右は矢印チップぶん詰める (光学的な左右バランス) */
  padding: 0.75rem 0.75rem 0.75rem 1.75rem;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--primary-light) 100%);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid var(--hairline-navy-strong);
  border-radius: var(--radius-md);
  /* 接地影 + navy ティントの浮き。hover の translateY を受け止める土台になる
     (旧 box-shadow:none では -2px の移動だけが起きて浮遊感が出ていた) */
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 24px -14px rgba(30, 58, 138, 0.45);
  transition:
    background var(--duration-base) var(--easing-standard),
    border-color var(--duration-base) var(--easing-standard),
    box-shadow var(--duration-base) var(--easing-standard),
    transform var(--duration-base) var(--easing-standard);
}

.case-studies-link__button:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 16px 32px -16px rgba(30, 58, 138, 0.55);
}

/* 押した瞬間に沈める。クリックの手応え (press feedback) を返す */
.case-studies-link__button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.case-studies-link__button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* 矢印チップ。主 CTA と同じ navy グラデを借りて「これは CTA 語彙の要素」だと
   示しつつ、面積を小さく保って主 CTA との主従は保つ */
.case-studies-link__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-pill);
  background: var(--gradient-cta);
  color: var(--on-primary);
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.28);
  transition: box-shadow var(--duration-base) var(--easing-standard);
}

.case-studies-link__icon svg {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--duration-base) var(--easing-standard);
}

.case-studies-link__button:hover .case-studies-link__icon {
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.38);
}

.case-studies-link__button:hover .case-studies-link__icon svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .case-studies-link__button,
  .case-studies-link__icon,
  .case-studies-link__icon svg {
    transition: none;
  }

  .case-studies-link__button:hover {
    transform: none;
  }

  .case-studies-link__button:hover .case-studies-link__icon svg {
    transform: none;
  }
}

/* 数値注釈スタイル */
.metric-asterisk {
  font-size: 0.5em;
  vertical-align: super;
  color: var(--text-light);
  margin-left: 0.125rem;
}

.metrics-note {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--text-light); /* Issue #22: 出典注記。--text-lighter は白背景で AA 未達 */
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-card:last-child {
    grid-column: 1 / -1;
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .social-proof {
    /* KG-5: mobile 標準 48 */
    padding: 3rem 1.5rem;
  }

  .social-proof .section-header {
    /* KG-9: mobile 標準 --space-xl(48) に整合 */
    margin-bottom: var(--space-xl, 48px);
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .testimonial-card:last-child {
    max-width: none;
  }

  /* モバイルは写真高さを抑え、主役の引用文を前に出す */
  .testimonial-photo {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 480px) {
  .social-proof {
    padding: 3rem 1rem;
  }

  .social-proof h2 {
    font-size: 1.5rem;
  }

  .testimonial-content,
  .testimonial-author {
    padding-left: 1.125rem;
    padding-right: 1.125rem;
  }

  .testimonial-content p {
    font-size: 0.9375rem;
  }

  /* 親指で押せる面にする。幅を取って矢印チップを右端に寄せ、
     カード列と同じ「面」として読ませる */
  .case-studies-link__button {
    width: 100%;
    max-width: 22rem;
    justify-content: space-between;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    font-size: 1rem;
  }
}
/* 医療監修セクション */
.supervisor {
  /* 声 (1,074px) → 監修 (658px) → 機能 (966px) が全て純白で、1440x900 で約 3 画面ぶん
     地色が変わらなかった。面積が最小で主張も控えめな監修を「沈んだ帯」に落として
     1 拍入れる (2026-08-18 版面監査 09)。 */
  background: var(--canvas-sunken, #f1f5f9);
}

/* subtitle の「監修」泣き別れ防止 (comparison.css KG-11 と同じ house 対処:
 * keep-all で読点でのみ折り返し、balance で 2 行を均す) */
.supervisor .section-header .section-subtitle {
  text-wrap: balance;
  word-break: keep-all;
}

.supervisor-content {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 写真 */
.supervisor-photo {
  position: relative;
  width: 152px;
  height: 152px;
}

/* gold 細リング: design.md が明示許容する数少ない gold 使用箇所
 * (「証言・監修のポートレートは円形 (gold リング細線を許容)」)。
 * 監修 = 品質保証の合図として champagne の細線を一本だけ灯す */
.supervisor-photo::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-soft, #e6c789);
}

.supervisor-photo img {
  width: 152px;
  height: 152px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* プロフィール */
.supervisor-profile {
  margin-top: 1.25rem;
}

.supervisor-name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.02em;
}

.supervisor-title {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--text-light);
  margin-left: 0.5rem;
}

.supervisor-position {
  font-size: 0.8125rem;
  color: var(--text-light);
  line-height: 1.8;
  margin-top: 0.25rem;
}

.supervisor-position strong {
  font-weight: 600;
  color: var(--text);
}

/* コメント（引用） */
.supervisor-comment {
  margin: 2rem 0 0;
  padding: 0;
  border: none;
  position: relative;
  /* モバイルでは .supervisor-content の中央揃えを継承すると 6-7 行の centered
     長文になり両端が不規則で読みにくい。引用本文だけは常に左組にする
     (ポートレート+肩書の centered 構図と、::before の中央 divider は維持)。 */
  text-align: left;
}

/* ───────── desktop: 編集的 2 カラム (design-review 2026-07-13-v3 追補) ─────────
 * 顧客写真 339px > 監修医 152px と権威の序列が逆転していたため、
 * 監修医を「誌面のプロフィール」の格で扱う: 左に角丸矩形の大判写真
 * (白衣・聴診器まで見せる = 医療的権威の視覚シグナル)、右に名前・肩書・引用。
 * design.md の監修ポートレート規定は円形 → 角丸矩形に改訂済み。 */
@media (min-width: 901px) {
  .supervisor-content {
    max-width: 780px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "photo profile"
      "photo comment";
    align-items: center;
    column-gap: 3.5rem;
    row-gap: 0;
    text-align: left;
  }

  .supervisor-photo {
    grid-area: photo;
    width: 280px;
    height: 280px;
  }

  .supervisor-photo::before {
    border-radius: calc(var(--radius-lg, 16px) + 5px);
  }

  .supervisor-photo img {
    width: 280px;
    height: 280px;
    border-radius: var(--radius-lg, 16px);
    /* 正方形原画を正方形表示 = ノークロップで白衣・聴診器まで見せる */
    object-position: center;
  }

  .supervisor-profile {
    grid-area: profile;
    align-self: end;
    margin-top: 0;
  }

  .supervisor-comment {
    grid-area: comment;
    margin-top: 1.5rem;
  }

  /* base の margin:0 auto がファイル後方にあるため specificity で上書きする */
  .supervisor .supervisor-comment::before {
    margin: 0 0 1.25rem;
  }
}

.supervisor-comment::before {
  content: '';
  display: block;
  width: 32px;
  height: 2px;
  /* Issue #25: cyan(--accent) → navy。見出し直下の navy フェード divider と系統を統一 */
  background: rgba(30, 58, 138, 0.4);
  margin: 0 auto 1.5rem;
}

.supervisor-comment::after {
  display: none;
}

/* 証言はこのセクションの感情的な核。caption の声量 (ink-mute 15px) から
 * 本文の声量 (ink 17px) へ格上げする (design-review 2026-07-13-v3 #1)。
 * キーフレーズ強調は Testimonials と同じ .t-emph (navy 太字) を再利用 */
.supervisor-comment p {
  font-size: 1.0625rem;
  color: var(--text);
  line-height: 1.9;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .supervisor-photo,
  .supervisor-photo img {
    width: 136px;
    height: 136px;
  }
}

@media (max-width: 480px) {
  .supervisor-photo,
  .supervisor-photo img {
    width: 120px;
    height: 120px;
  }

  .supervisor-name {
    font-size: 1rem;
  }

  .supervisor-comment p {
    font-size: 0.9375rem;
    line-height: 1.85;
  }
}

/* ───────── スクロール reveal (content 1 ブロック — house パターン) ─────────
 * JS (js/supervisor-reveal.js) が生きている時だけ初期非表示にする。 */
@media (prefers-reduced-motion: no-preference) {
  .supervisor-reveal-ready .supervisor-content {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .supervisor-reveal-ready .supervisor-content.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .supervisor-content {
    opacity: 1;
    transform: none;
  }
}
/* 主な機能 — Editorial Capability Index
 * 反復する Bento カードを使わず、左に「基盤」、右に「処理順」を置く。
 * 4 機能を同格に並べるのではなく、セキュリティが全機能を支える関係を示す。
 */

#features {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 80px;
  background: linear-gradient(180deg, var(--canvas, #fff) 0%, var(--canvas-soft, #fafbfc) 100%);
}

#security {
  scroll-margin-top: 80px;
}

#features .section-subtitle {
  max-width: 46rem;
}

.features-system {
  display: grid;
  grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 3.5rem);
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto;
}

.feature-item {
  min-width: 0;
}

/* ───────── 左: 全機能を支えるセキュリティ基盤 ───────── */
.feature-foundation {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  min-height: 35rem;
  flex-direction: column;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    #101c34;
  background-size: 2rem 2rem, 2rem 2rem, auto;
  box-shadow: 0 30px 64px -48px rgba(15, 23, 42, 0.92);
  color: #fff;
}

.feature-foundation::before {
  position: absolute;
  z-index: -1;
  top: -7rem;
  right: -8rem;
  width: 22rem;
  height: 22rem;
  border: 1px solid rgba(230, 199, 137, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 3.5rem rgba(230, 199, 137, 0.025),
    0 0 0 7rem rgba(230, 199, 137, 0.018);
  content: "";
}

.feature-foundation__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.feature-foundation__number {
  color: rgba(226, 232, 240, 0.64);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.feature-foundation__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-soft, #e6c789);
}

.feature-foundation__body {
  margin-top: 4rem;
}

.feature-foundation__eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--gold-soft, #e6c789);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.feature-foundation h3 {
  margin: 0 0 1.25rem;
  color: #fff;
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.28;
}

.feature-foundation__body p {
  max-width: 32ch;
  margin: 0;
  color: rgba(226, 232, 240, 0.76);
  font-size: 0.875rem;
  line-height: 1.85;
}

.feature-foundation__assurance {
  margin-top: auto;
}

.feature-compliance {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.875rem 0;
  border-top: 1px solid rgba(230, 199, 137, 0.32);
  border-bottom: 1px solid rgba(230, 199, 137, 0.2);
}

.feature-compliance__index {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.1875rem;
  align-self: stretch;
  padding-right: 1rem;
  border-right: 1px solid rgba(230, 199, 137, 0.22);
  color: var(--gold-soft, #e6c789);
}

.feature-compliance__index b {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1;
}

.feature-compliance__index small {
  margin: 0;
  color: rgba(230, 199, 137, 0.72);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.4375rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.feature-compliance__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.feature-compliance__eyebrow {
  margin-bottom: 0.1875rem;
  color: rgba(230, 199, 137, 0.78);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.46875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.feature-compliance strong {
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

.feature-compliance small {
  margin-top: 0.1875rem;
  color: rgba(226, 232, 240, 0.58);
  font-size: 0.59375rem;
  line-height: 1.45;
}

.feature-foundation__proofs {
  margin: 0.75rem 0 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}

.feature-foundation__proofs li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 249, 0.9);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}

.feature-foundation__proofs svg {
  flex: 0 0 auto;
  color: var(--gold-soft, #e6c789);
}

/* ───────── 右: 診療記録の処理順 ───────── */
.feature-capability {
  grid-column: 2;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 9rem;
  gap: 1.25rem;
  align-items: center;
  min-height: 0;
  padding: 1.625rem 0;
  border-top: 1px solid rgba(30, 58, 138, 0.12);
}

.feature-capability:last-child {
  border-bottom: 1px solid rgba(30, 58, 138, 0.12);
}

.feature-capability__number {
  align-self: start;
  padding-top: 0.25rem;
  color: rgba(30, 58, 138, 0.46);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.feature-capability__content {
  min-width: 0;
}

.feature-capability__eyebrow {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.feature-capability h3 {
  margin: 0 0 0.5rem;
  color: var(--text, #1e293b);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.45;
}

.feature-capability p {
  max-width: 46ch;
  margin: 0;
  color: var(--text-light, #64748b);
  font-size: 0.8125rem;
  line-height: 1.75;
}

.feature-more {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.75rem;
  color: var(--primary-dark, #1e40af);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.feature-more svg {
  transition: transform var(--duration-fast, 150ms) var(--easing-standard, ease);
}

.feature-more:hover svg {
  transform: translateX(0.1875rem);
}

.feature-more:focus-visible {
  border-radius: 0.25rem;
  outline: 2px solid var(--primary, #1e3a8a);
  outline-offset: 0.25rem;
}

/* ───────── 機能固有のマイクロ図版 ───────── */
.feature-visual {
  position: relative;
  overflow: hidden;
  width: 9rem;
  height: 6.25rem;
  border: 1px solid rgba(30, 58, 138, 0.1);
  border-radius: 0.75rem;
  background:
    linear-gradient(rgba(30, 58, 138, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.025) 1px, transparent 1px),
    rgba(248, 250, 252, 0.82);
  background-size: 1rem 1rem, 1rem 1rem, auto;
}

/* 音声認識: ライブ状態 + 波形 */
.feature-visual--voice {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.75rem;
}

.feature-visual__status {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  color: rgba(71, 85, 105, 0.72);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.46875rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.feature-visual__status i {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--primary-dark, #1e40af);
  box-shadow: 0 0 0 0.1875rem rgba(30, 64, 175, 0.1);
}

.feature-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 3.25rem;
}

.feature-wave i {
  width: 0.125rem;
  height: var(--h, 50%);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.34), var(--primary-dark, #1e40af));
}

/* SOAP: S/O/A/P の抽象行 */
.feature-visual--soap {
  display: grid;
  align-content: center;
  gap: 0.625rem;
  padding: 0.875rem;
}

.feature-visual--soap span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-visual--soap i {
  width: 0.75rem;
  color: var(--primary-dark, #1e40af);
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 0.5625rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
}

.feature-visual--soap b {
  width: var(--w, 80%);
  height: 0.3125rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.2);
}

/* 転記: 2 つの無銘文書を 1 本の矢印でつなぐ */
.feature-visual--transfer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.75rem;
}

.feature-transfer__page {
  display: grid;
  align-content: center;
  gap: 0.3125rem;
  width: 2.625rem;
  height: 3.25rem;
  padding: 0.4375rem;
  border: 1px solid rgba(30, 58, 138, 0.14);
  border-radius: 0.375rem;
  background: #fff;
  box-shadow: 0 8px 18px -16px rgba(15, 23, 42, 0.7);
}

.feature-transfer__page i {
  display: block;
  height: 0.1875rem;
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.18);
}

.feature-transfer__page i:nth-child(2) { width: 76%; }
.feature-transfer__page i:nth-child(3) { width: 88%; }

.feature-transfer__page--target {
  border-color: rgba(30, 58, 138, 0.24);
}

.feature-transfer__page--target i {
  background: rgba(30, 64, 175, 0.3);
}

.feature-transfer__arrow {
  display: inline-flex;
  color: var(--primary-dark, #1e40af);
}

/* ───────── スクロール reveal ───────── */
@media (prefers-reduced-motion: no-preference) {
  .features-reveal-ready .feature-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .features-reveal-ready .feature-item:nth-child(2) { transition-delay: 0.06s; }
  .features-reveal-ready .feature-item:nth-child(3) { transition-delay: 0.12s; }
  .features-reveal-ready .feature-item:nth-child(4) { transition-delay: 0.18s; }

  .features-reveal-ready .feature-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-item {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 960px) {
  .features-system {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    column-gap: 2rem;
  }

  .feature-capability {
    grid-template-columns: 1.75rem minmax(0, 1fr) 7.5rem;
    gap: 1rem;
  }

  .feature-visual {
    width: 7.5rem;
  }
}

@media (max-width: 820px) {
  .features-system {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    max-width: 720px;
  }

  .feature-foundation {
    grid-column: 1;
    grid-row: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(240px, 0.92fr);
    gap: 0 2rem;
    min-height: 0;
    padding: 2rem;
  }

  .feature-foundation__top {
    grid-column: 1 / -1;
  }

  .feature-foundation__body {
    margin-top: 2.5rem;
  }

  .feature-foundation__assurance {
    align-self: end;
    margin-top: 2.5rem;
  }

  .feature-capability {
    grid-column: 1;
    grid-template-columns: 2rem minmax(0, 1fr) 9rem;
    min-height: 11rem;
    padding: 1.625rem 0.5rem;
  }

  .feature-foundation + .feature-capability {
    margin-top: 1.75rem;
  }

  .feature-visual {
    width: 9rem;
  }
}

@media (max-width: 640px) {
  .feature-foundation {
    display: flex;
    min-height: 0;
    padding: 1.5rem;
  }

  .feature-foundation__body {
    margin-top: 2.75rem;
  }

  .feature-foundation h3 {
    font-size: 1.75rem;
  }

  .feature-foundation__body p {
    max-width: none;
    font-size: 0.8125rem;
  }

  .feature-foundation__assurance {
    margin-top: 2rem;
  }

  .feature-compliance {
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0;
  }

  .feature-compliance__index {
    padding-right: 0.75rem;
  }

  .feature-compliance__index b {
    font-size: 0.9375rem;
  }

  .feature-compliance__index small {
    font-size: 0.40625rem;
  }

  .feature-capability {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    grid-template-areas:
      "number content"
      ". visual";
    gap: 0.875rem 0.75rem;
    min-height: 0;
    padding: 1.5rem 0;
  }

  .feature-capability__number {
    grid-area: number;
  }

  .feature-capability__content {
    grid-area: content;
  }

  .feature-capability h3 {
    font-size: 1rem;
  }

  .feature-visual {
    grid-area: visual;
    width: 100%;
    height: 4.75rem;
  }

  .feature-wave {
    height: 2.25rem;
  }

  .feature-visual--soap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 0.875rem;
  }

  .feature-visual--transfer {
    justify-content: flex-start;
    padding-left: 1rem;
  }
}

@media (prefers-contrast: high) {
  .feature-foundation,
  .feature-capability,
  .feature-visual {
    border-color: currentColor;
  }
}
/* 比較セクション - 他社音声 AI vs コエカル マトリクス
 * 旧 .compare-fullwidth / .compare-side / .compare-list は廃止し、
 * .compare-matrix（3列・行ヘッダー左固定）に刷新。
 */

.comparison {
  position: relative;
  overflow: hidden;
}

.comparison .section-header {
  text-align: center;
  /* KG-9: 標準 --space-2xl(64) に集約 */
  margin-bottom: var(--space-2xl, 64px);
}

@media (max-width: 768px) {
  /* KG-9: mobile 標準 48 (このセレクタは 0,2,0 で common の mobile 段に勝つため明示) */
  .comparison .section-header {
    margin-bottom: var(--space-xl, 48px);
  }
}

/* KG-11: 375px で「他社音声 AI との違い」の「い」が孤立改行する問題。
   keep-all で「との違い」を分割不可にし、balance で 2 行を均す。
   subtitle も同様に balance して「のか」孤立を防ぐ (overflow 回避のため keep-all は付けない)。 */
.comparison .section-header h2 {
  text-wrap: balance;
  word-break: keep-all;
}

.comparison .section-header .section-subtitle {
  text-wrap: balance;
}

.compare-matrix {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline-card);
  background: var(--canvas);
}

.compare-matrix__head,
.compare-matrix__body {
  display: contents;
}

.compare-matrix__row {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) 1fr 1.1fr;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
}

.compare-matrix__row:first-child {
  border-top: none;
}

.compare-matrix__cell {
  padding: 1.125rem 1.25rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--neutral-700);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-matrix__row--head .compare-matrix__cell {
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--canvas-soft);
  text-align: left;
  color: var(--ink);
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.compare-matrix__cell--label {
  background: var(--canvas-soft);
  color: var(--ink-mid);
  font-weight: 600;
  font-size: 0.875rem;
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

.compare-matrix__cell--other {
  color: var(--ink-mute);
  border-right: 1px solid rgba(148, 163, 184, 0.16);
}

/* 勝者列の強調: 淡い navy ティント地 + ring 0.2。ヘッダーが画面外でも
 * 「右列が答え」を 1 秒で判読できる状態にする (design-review 2026-07-13-v2 #2)。
 * ink on この淡地は ~12:1 で AAA を維持 */
.compare-matrix__cell--coekar {
  color: var(--ink);
  font-weight: 500;
  background: rgba(30, 58, 138, 0.04);
  box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.2);
}

.compare-matrix__row--head .compare-matrix__cell--coekar {
  background: linear-gradient(180deg, var(--primary, #1e3a8a) 0%, var(--primary-dark, #1e40af) 100%);
  color: var(--on-primary);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.4);
}

.compare-matrix__row--head .compare-matrix__cell--coekar .compare-matrix__brand {
  color: var(--on-primary);
}

.compare-matrix__row--head .compare-matrix__cell--coekar .compare-matrix__sub {
  color: rgba(255, 255, 255, 0.7);
}

/* other 列見出し (汎用音声 AI): 生テキスト+<br>+<span> が display:flex の
   直下で別々の flex item (row 方向) に分割され、nowrap で互いを圧迫して
   内部折り返しする実装バグがあった (幅が狭い端末で「音声」が「音/声」に
   分断)。coekar 側と同じ column 構成に揃えて解消する。 */
.compare-matrix__row--head .compare-matrix__cell--other {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.compare-matrix__brand {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--primary-dark, #1e40af);
  letter-spacing: -0.01em;
}

/* 汎用音声 AI 側の見出しテキスト: coekar の brand と同じ構造だが、
   navy (成果/ブランド色) を競合表記に使わないよう別トーンにする */
.compare-matrix__brand--other {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}

.compare-matrix__sub {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

.compare-mark {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.875rem;
  line-height: 1;
}

.compare-mark--yes {
  background: rgba(30, 58, 138, 0.12);
  color: var(--primary-dark, #1e40af);
}

/* △ (一部対応): 従来 rgba(148,163,184,.2) は ×/◎ に比べ存在感が弱く、
   スキャン時に「印なし」と誤読されやすかったため濃度を上げる */
.compare-mark--partial {
  background: rgba(100, 116, 139, 0.22);
  color: var(--ink-mid);
}

.compare-mark--no {
  background: var(--danger-soft);
  color: var(--danger-strong);
}

/* 列名タグ: ≤600px の縦積みでのみ表示。desktop/tablet はヘッダー行 1 回の
   表示で列を判別できるため非表示に保つ (KG 系デザイン規範の gold/navy 割当
   とは無関係の中立トーン) */
.compare-matrix__col-tag {
  display: none;
}

.compare-matrix__value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* レスポンシブ ── 中型タブレット (601-768px) は 2 列、
 * スマートフォン (≤600px) は 1 列に積み上げて読みやすく */
@media (max-width: 768px) and (min-width: 601px) {
  .compare-matrix__row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "label  label"
      "other  coekar";
  }

  .compare-matrix__cell--label {
    grid-area: label;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--canvas-sunken);
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
  }

  .compare-matrix__cell--other {
    grid-area: other;
  }

  .compare-matrix__cell--coekar {
    grid-area: coekar;
  }

  .compare-matrix__row--head {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "other coekar";
  }

  .compare-matrix__row--head .compare-matrix__cell--label {
    display: none;
  }
}

@media (max-width: 600px) {
  .compare-matrix {
    border-radius: var(--radius-md);
  }

  /* 全 cell を縦積み: label → other → coekar の順 */
  .compare-matrix__row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "other"
      "coekar";
    border-top: 1px solid rgba(148, 163, 184, 0.18);
  }

  .compare-matrix__row:first-child {
    border-top: none;
  }

  .compare-matrix__cell {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  .compare-matrix__cell--label {
    grid-area: label;
    background: var(--canvas-sunken);
    color: var(--ink-mid);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding: 0.625rem 1rem;
  }

  .compare-matrix__cell--other {
    grid-area: other;
    border-right: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
    background: var(--canvas-soft);
  }

  .compare-matrix__cell--coekar {
    grid-area: coekar;
    /* 1px リングは縦積みでほぼ視認できず「今どちらの列か」がアイコン色だけに
       依存していたため、mobile では左の太いアクセント帯に差し替えて強化する
       (淡い navy ティント地は base 定義を継承し desktop と共通) */
    box-shadow: none;
    border-left: 3px solid var(--primary, #1e3a8a);
  }

  /* body 行: label → other → coekar の縦積み内で、各値セルにも
     「汎用音声 AI / コエカル」を示す列名タグを表示し、スクロール中も
     列の対応をアイコン色だけに頼らず判別できるようにする */
  .compare-matrix__body .compare-matrix__cell--other,
  .compare-matrix__body .compare-matrix__cell--coekar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }

  .compare-matrix__col-tag {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--ink-mute);
  }

  .compare-matrix__cell--coekar .compare-matrix__col-tag {
    color: var(--primary-dark, #1e40af);
  }

  /* ヘッダ行は非表示: 縦積みでは各値セルの列名タグ (col-tag) が列を判別しており、
   * 「汎用/コエカル」の 2 バンドは完全に冗長 (縦 160px 消費 + カード 2 枚の誤読を招く)。
   * design-review 2026-07-13-v2 #1 */
  .compare-matrix__row--head {
    display: none;
  }

  /* ヘッダ非表示により先頭 body 行の border-top がカード枠と二重線になるのを防ぐ */
  .compare-matrix__body .compare-matrix__row:first-child {
    border-top: none;
  }
}

/* ───────── スクロール reveal (matrix 1 ブロック — 行 stagger は表のスキャン性を
 * 損なうため不採用)。problem-minimal.css と同型の house パターン。
 * JS (js/comparison-reveal.js) が生きている時だけ初期非表示にする。 */
@media (prefers-reduced-motion: no-preference) {
  .comparison-reveal-ready .compare-matrix {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
  }

  .comparison-reveal-ready .compare-matrix.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-matrix {
    opacity: 1;
    transform: none;
  }
}
/* 比較セクション - レスポンシブ
 * 旧 .compare-card / .compare-list 系の指定はマトリクス刷新 (Comparison.astro v2)
 * に伴い廃止。レスポンシブは comparison.css 側で完結。
 */
/* 導入実績セクション
 * 深い navy 帯に metallic gold の主役数字。Comparison(light) と Testimonials(light)
 * の間に置く dark beat。gold-sheen が最も映える背景。 */
.track-record {
  position: relative;
  overflow: hidden;
  /* KG-5: fluid clamp → 強調 (dark 拍) トークン 128 に固定 */
  padding: var(--space-5xl, 128px) 2rem;
  background: radial-gradient(
    ellipse 90% 70% at 50% 38%,
    var(--surface-dark) 0%,
    var(--surface-dark-900) 58%,
    var(--surface-dark-950) 100%
  );
  text-align: center;
  color: var(--on-dark);
}

/* 数字の背後にだけ仕込む控えめな gold グロー */
.track-record::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(216, 168, 73, 0.16) 0%,
    transparent 52%
  );
  pointer-events: none;
}

.track-record__inner {
  position: relative;
  z-index: 1;
}

.track-record__eyebrow {
  color: var(--accent-gold, #d8a849);
  margin-bottom: 1.25rem;
}

.track-record__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.12em;
  margin: 0;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.track-record__num {
  font-family: "Space Grotesk", "Inter", -apple-system, sans-serif;
  font-weight: 800;
  font-size: clamp(5.5rem, 16vw, 12rem);
  /* metallic sheen — dark 地で最も金属的に光る。
     トークンは inline critical.css で常時定義されるため fallback グラデは持たない (KG-10) */
  background: var(--gold-sheen);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* 金属を dark bg から浮かせる暖色のソフトシャドウ */
  filter: drop-shadow(var(--gold-glow));
}

/* 強制カラーモードでは background-clip:text + text-fill-color:transparent が効かず、
   継承色 #1e293b のまま navy〜黒の地に沈んで「300」が読めなくなる。hero-title /
   hero-badge__num と同じ保険 (critical.css)。高齢の開業医ターゲットでは OS 高コントラスト
   利用を無視できない (2026-08-18 版面監査 11)。 */
@media (forced-colors: active) {
  .track-record__num {
    background: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
    filter: none;
  }
}

.track-record__unit {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  color: var(--on-dark);
  letter-spacing: 0;
}

.track-record__label {
  margin: 1rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
}

.track-record__lead {
  margin: 1.75rem auto 0;
  max-width: 32rem;
  font-size: clamp(1rem, 2.2vw, 1.1875rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.82);
  /* モバイルで 3 行に折れ「…稼働してい／ます。」と句が泣き別れるのを防ぐ。
     文節折返し + balance で 2 行均等・「稼働しています。」を 1 かたまりに保つ
     (desktop は 1 行のため no-op)。 */
  text-wrap: balance;
  word-break: auto-phrase;
}

.track-record__note {
  margin: 1rem auto 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.55);
}

/* gold hairline の区切り (lead の上に) */
.track-record__lead::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  margin: 0 auto 1.75rem;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--accent-gold, #d8a849),
    transparent
  );
}

/* ───────── 日本地図ドットマトリクス (背景装飾 / JapanDotsMap.astro) ─────────
 * 地図は __inner (z-index:1) の背後に敷く。中央 = gold 数字の裏は mask で減光し
 * 可読性を確保しつつ、床値 0.16 を残して東京 (第一波の seed) が消えないようにする。
 * グローは共有 radialGradient の塗り 1 発 (filter 不使用 — 170 個の drop-shadow は jank 源)。 */
.track-record__map {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 48% at 50% 42%,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    #000 78%
  );
  mask-image: radial-gradient(
    ellipse 60% 48% at 50% 42%,
    rgba(0, 0, 0, 0.16) 0%,
    rgba(0, 0, 0, 0.45) 50%,
    #000 78%
  );
}

.jp-map {
  display: block;
  height: 100%;
  width: auto;
}

.jp-map__base circle {
  r: 4.2px;
  fill: rgba(59, 130, 246, 0.28);
}

.jp-map__inset-rule {
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 1;
}

/* lit ドットのデフォルト = 静的点灯 (JS 無効 / reduced-motion でも地図は成立する) */
.jp-map__lit circle {
  r: 9px;
  fill: url(#jp-dot-glow);
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  /* JS が生きている時 (html.track-record-reveal-ready) だけ初期消灯にする */
  .track-record-reveal-ready .jp-map__lit circle {
    opacity: 0;
  }

  /* IntersectionObserver が .is-live を付けたらスプレッド開始。
   * bloom は per-dot の --d (seed 都市からの距離ベース) で全国へ波及し、
   * その後 twinkle が明滅ループを引き継ぐ (どちらも opacity/transform のみ)。 */
  .track-record-reveal-ready .track-record.is-live .jp-map__lit circle {
    animation:
      tr-dot-bloom 0.9s var(--easing-entrance, cubic-bezier(0.16, 1, 0.3, 1)) var(--d, 0ms) both,
      tr-dot-twinkle 6.5s ease-in-out calc(var(--d, 0ms) + 3.2s) infinite;
  }

  @keyframes tr-dot-bloom {
    from {
      opacity: 0;
      transform: scale(0.3);
    }
    60% {
      opacity: 1;
      transform: scale(1.15);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  /* 1 で始まり 1 で終わる → bloom 後の引き継ぎで飛びが出ない */
  @keyframes tr-dot-twinkle {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.72;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .jp-map__lit circle {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 768px) {
  .track-record {
    /* KG-5: 128 の 2:1 = 64 */
    padding: var(--space-2xl, 64px) 1.5rem;
  }

  /* mobile はセクションが縦長・幅が細いので、地図は幅基準でフィットさせ
   * 淡ドットを少し持ち上げる (小画面では 0.28 が沈む) */
  .jp-map {
    width: 100%;
    height: auto;
    max-height: 100%;
  }

  .jp-map__base circle {
    fill: rgba(59, 130, 246, 0.34);
  }

  .track-record__map {
    -webkit-mask-image: radial-gradient(
      ellipse 70% 42% at 50% 45%,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.5) 52%,
      #000 80%
    );
    mask-image: radial-gradient(
      ellipse 70% 42% at 50% 45%,
      rgba(0, 0, 0, 0.16) 0%,
      rgba(0, 0, 0, 0.5) 52%,
      #000 80%
    );
  }
}
/* CTA セクション (クロージング) — v2
 * 旧実装の複数同時アニメ (回転 / pulse / particles / textGlow / titleBackGlow)
 * は撤去。動的演出は背景の静的ラジアル光 1 つだけ残す。
 * フォント太さで重みを出し、紺基調 × 1 点ゴールド (eyebrow) で締める。 */

.cta {
  position: relative;
  text-align: center;
  padding: var(--space-5xl, 128px) var(--space-md, 24px);
  /* ダーク拍 canonical 最深色に統一 (design.md L3 / KG-2): #08111f → #0b1322 */
  background: radial-gradient(ellipse at top, var(--surface-dark) 0%, var(--surface-dark-900) 65%, var(--surface-dark-950) 100%);
  overflow: hidden;
  isolation: isolate;
  cursor: default;
}

.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 75%, rgba(59, 130, 246, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 80% 25%, rgba(147, 197, 253, 0.10) 0%, transparent 40%);
  z-index: 0;
  pointer-events: none;
}

.cta .container {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
}

/* メインタイトル — グロー / アニメーションを撤去し、weight で重みを出す */
.cta h2 {
  /* section heading は critical.css の global h2 トークンに統一 (44px@desktop) */
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--on-dark);
  margin-bottom: 1.25rem;
  letter-spacing: -0.025em;
  /* 日本語の末尾 1 文字折り返し防止 (「ゼロ / に」「最大 / に」回避) */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.cta h2 br {
  display: block;
  content: "";
  margin-top: 0.25em;
}

/* デフォルトサブテキスト */
.cta p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: rgba(241, 245, 249, 0.85);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 400;
}

/* エピローグ用ブランドコピー (ゴールドはここに集中) */
.cta p.cta-eyebrow {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent-gold, #d8a849); /* Issue #25: fallback を token 実値に統一 (#d4a960 表記ゆれ解消) */
  margin: 0 0 1.5rem;
}

/* サブテキスト (h2 直下) */
.cta p.cta-sub {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: rgba(241, 245, 249, 0.85);
  margin: 0 auto 2.5rem;
  max-width: 600px;
  font-weight: 500;
  word-break: auto-phrase; /* 文節折返し (critical.css の表示コピー規律と同宣言) */
}

/* CTAボタンコンテナ — ボタン本体 (色 / 立体 / 状態) は共有コンポーネント
   src/shared/CtaButton.astro が担当し、ここはレイアウトのみ */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* レスポンシブ */
@media (max-width: 768px) {
  /* KG-5: 128 の 2:1 = 64 */
  .cta {
    padding: var(--space-2xl, 64px) 1.5rem;
  }

  .cta h2 {
    /* 9 文字 (「記録の時間をゼロに」「対話の時間を最大に」) が 375px viewport で
     * 1 行に収まる font-size を確保。1.625rem ≈ 26px → 9*26 ≈ 234px で余裕 */
    font-size: clamp(1.625rem, 5.6vw, 2.25rem);
    letter-spacing: -0.03em;
  }

  .cta p,
  .cta p.cta-sub {
    font-size: 1rem;
    margin-bottom: 2rem;
  }

  .cta-buttons {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* ボタンは CtaButton の scope なので要素セレクタで幅だけ当てる */
  .cta-buttons a {
    width: 100%;
    max-width: 360px;
  }
}

@media (max-width: 480px) {
  .cta {
    padding: 4rem 1.25rem;
  }

  .cta p.cta-eyebrow {
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
  }
}

/* ハイコントラストモード (ボタン側の対応は CtaButton.astro が持つ) */
@media (prefers-contrast: high) {
  .cta {
    background: #000033;
  }
}
/* よくある質問 */
.pre-contact-faq {
  /* KG-5: 80 → 既定トークン 96 */
  padding: var(--space-4xl, 96px) var(--space-md, 24px);
  background: #ffffff;
}

.pre-contact-faq .section-header {
  /* KG-9: compact 値はトークン参照で --space-xl(48) に固定 */
  margin-bottom: var(--space-xl, 48px);
}

.pre-contact-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  border-top: 1px solid var(--hairline-card);
}

/* アコーディオン。設問だけを一覧できる状態を既定にし、回答は必要な人が開く。
   回答は閉じていても DOM に残す(FAQPage 構造化データとの整合のため)。 */
.pre-contact-faq-item {
  border-bottom: 1px solid var(--hairline-card);
  background: transparent;
}

.pre-contact-faq-summary {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 0;
  cursor: pointer;
  list-style: none; /* Firefox の三角マーカー */
}

.pre-contact-faq-summary::-webkit-details-marker {
  display: none; /* 旧 Safari */
}

.pre-contact-faq-summary:hover h3 {
  color: var(--primary);
}

.pre-contact-faq-summary:focus-visible {
  outline: 2px solid transparent;
  border-radius: 8px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.13);
}

/* 開閉シェブロン(閉=下向き / 開=上向き)。設問の1行目に視覚的に揃える */
.pre-contact-faq-chevron {
  flex: none;
  margin-top: 0.3rem;
  color: var(--ink-mute);
  transition: transform 0.18s ease;
}

.pre-contact-faq-item[open] .pre-contact-faq-chevron {
  transform: rotate(180deg);
}

/* 回答は Q バッジ幅ぶん字下げし、設問テキストの先頭に揃える */
.pre-contact-faq-answer {
  padding: 0 0 1.35rem calc(1.75rem + 0.75rem);
}

@media (prefers-reduced-motion: reduce) {
  .pre-contact-faq-chevron {
    transition: none;
  }
}

.pre-contact-faq-item h3 {
  flex: 1;
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  transition: color 0.18s ease;
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}

.pre-contact-faq-item h3::before {
  content: "Q";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #eef2ff;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
}

.pre-contact-faq-item p {
  margin: 0;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.8;
}

/* お問い合わせフォームセクション */
.contact-section {
  position: relative;
  /* KG-5: 80 → 既定トークン 96 */
  padding: var(--space-4xl, 96px) var(--space-md, 24px);
  /* 白カードを白背景に埋もれさせず浮かせるため、淡いクールグラデの帯に */
  background:
    radial-gradient(70% 55% at 50% 0%, #eef3fb 0%, transparent 62%),
    linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  /* Issue #25: 固定ナビ(80px)分のアンカーオフセット。
     「無料デモを予約」等で #contact-form へ遷移時に見出しがナビ下に隠れないようにする */
  scroll-margin-top: 80px;
  overflow: hidden;
}

.contact-form-wrapper {
  max-width: 700px;
  margin: 0 auto;
}

/* TimeRexカレンダー（サンクスセクション用） */
#timerex_calendar {
  min-height: 600px;
  margin-top: 1.5rem;
}

.calendar-fallback {
  font-size: 0.8rem;
  color: var(--text-light);
  text-align: center;
  margin-top: 0.75rem;
}

.calendar-fallback a {
  text-decoration: underline;
}

/* フォーム本体 — 浮遊する白カード */
.contact-form {
  position: relative;
  background: #ffffff;
  padding: clamp(2.25rem, 4vw, 3.25rem);
  border-radius: var(--radius-xl, 20px);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 28px 56px -28px rgba(15, 30, 70, 0.2);
  overflow: hidden;
}

/* 上端の navy→blue→gold グラデアクセント (現代的なブランドサイン) */
.contact-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary, #1e3a8a) 0%, var(--accent) 48%, var(--accent-gold, #d8a849) 100%);
}

/* Meta アプリ内ブラウザで入力できない場合の、外部ブラウザへの控えめな案内 */
.form-iab-note {
  margin: 0 0 1.5rem;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(30, 58, 138, 0.14);
  border-radius: var(--radius-md, 12px);
  background: #f7f9fc;
  color: var(--text-light);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.form-iab-note p {
  margin: 0;
}

.form-iab-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 0.625rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--outline, #cbd5e1);
  border-radius: var(--radius-sm, 8px);
  background: #ffffff;
  color: var(--primary, #1e3a8a);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.form-iab-copy:hover {
  border-color: var(--primary, #1e3a8a);
  background: #f1f5f9;
}

.form-iab-copy:focus-visible {
  outline: 2px solid var(--primary, #1e3a8a);
  outline-offset: 2px;
}

/* フォームグループ */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

/* 入力欄は全幅の単一カラム（.form-row の2カラムは廃止）。
   見た目の長さは短くなるが、視線が1本の直線にならず「次にどこへ」の判断が
   毎行入るため。モバイル（流入の大半）は元から単一カラムで、
   デスクトップだけ別レイアウトを持つ状態も解消する。 */

/* ラベル */
.form-group label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

/* v4: bare red 連発の圧を低減。.optional と対になる控えめなピルに。 */
.required {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: 4px;
  background: rgba(220, 38, 38, 0.08);
  color: var(--danger-strong);
  font-size: 0.6875rem; /* Issue #24: 10px→11px。必須/任意バッジの可読下限を底上げ */
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.optional {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: 4px;
  background: rgba(148, 163, 184, 0.16);
  color: var(--ink-mute);
  font-size: 0.6875rem;
  font-weight: 600;
}

.form-hint {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-mute); /* Issue #22: #94a3b8 は白背景で 2.56:1 と AA 未達 */
  line-height: 1.5;
}

/* 入力フィールド共通 */
.form-group input,
.form-group select,
.form-group textarea {
  padding: 0.95rem 1.1rem;
  font-size: 1rem;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--canvas-soft);
  color: var(--text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  font-family: inherit;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #6b7280;  /* WCAG AA準拠: コントラスト比 4.6:1 */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.13);
  background: #ffffff;
}

/* セレクトボックス */
.form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* テキストエリア（任意項目。圧を下げるため初期高さは控えめに） */
.form-group textarea {
  resize: vertical;
  min-height: 76px;
}

/* 任意項目(その他ご要望)は既定で畳む。
   前段の対応（textarea を視覚的に弱める .form-group--subtle）では摩擦が残り、
   form_abandon の last_field は依然 message が最多（2026-06-28〜07-23 で離脱の
   67%）。フォーム内で最大のクリック標的が任意項目である状態自体を解消する。
   畳むことで送信ボタンが約 120px 上がり、必須項目だけの短いフォームに見える。 */
.form-optional {
  margin-bottom: 1.5rem;
}

.form-optional__toggle {
  display: flex; /* summary の既定マーカー(display: list-item)を外す */
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.375rem 0.125rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-mute);
  cursor: pointer;
  list-style: none; /* Firefox の三角マーカー */
  transition: color 0.18s ease;
}

.form-optional__toggle::-webkit-details-marker {
  display: none; /* 旧 Safari */
}

.form-optional__toggle:hover {
  color: var(--text);
}

/* フォーム入力欄と同じフォーカスリング（キーボード操作で開閉位置を見失わせない） */
.form-optional__toggle:focus-visible {
  outline: 2px solid transparent;
  border-radius: 6px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.13);
  color: var(--text);
}

/* 開閉シェブロン（閉=右向き / 開=下向き）。currentColor でラベル色に追従 */
.form-optional__toggle::before {
  content: '';
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
}

.form-optional[open] .form-optional__toggle {
  color: var(--text);
  margin-bottom: 0.25rem;
}

.form-optional[open] .form-optional__toggle::before {
  transform: rotate(45deg);
}

/* 展開後の入力欄は下マージンを親(.form-optional)に委ねる */
.form-optional .form-group {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .form-optional__toggle,
  .form-optional__toggle::before {
    transition: none;
  }
}

/* ラジオボタン */
.radio-group {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* お問い合わせ種別を選択チップ化 */
.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 500;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  border: 1.5px solid var(--outline);
  border-radius: var(--radius-md);
  background: var(--canvas-soft);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

/* 選択中チップのハイライト (:has 非対応ブラウザは radio-mark の塗りで担保) */
.radio-label:has(input[type="radio"]:checked) {
  border-color: var(--primary);
  background: #eff4ff;
  box-shadow: inset 0 0 0 1px var(--primary);
}

.radio-label:has(input[type="radio"]:focus-visible) {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18);
}

.radio-label input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.radio-mark {
  width: 20px;
  height: 20px;
  border: 2px solid var(--outline-strong);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.radio-label input[type="radio"]:checked + .radio-mark {
  border-color: var(--primary);
}

.radio-label input[type="radio"]:checked + .radio-mark::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
}

.radio-label input[type="radio"]:focus + .radio-mark {
  box-shadow: var(--focus-glow);
}

/* チェックボックス */
/* 送信＝同意モデルの同意文言（チェックボックス廃止）。補足情報なので控えめに。
   リンクは地の文と同じグレーだが、リンクと分かるよう下線は維持する */
.form-consent-note {
  margin: 0.75rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-light);
  text-align: center;
  /* モバイルで「…とみなし／ます。」と句が泣き別れるのを防ぐ (文節折返し + balance)。
     desktop は 1 行のため no-op。 */
  text-wrap: balance;
  word-break: auto-phrase;
}

.form-consent-note a {
  color: inherit;
  text-decoration: underline;
}

.form-consent-note a:hover {
  text-decoration: none;
}

/* 送信ボタン */
.form-submit {
  margin-top: 2rem;
}

/* .form-reassurance (即日デモ / 営業電話の約束) は 2026-08-18 に撤去。
   2026-08-10 にボタン直上 → カード上部へ移設して以降、効果が確認できなかったため。 */

/* サイズ/weight/radius は base .btn-primary (KG-7 spec 値) を継承。全幅のみ担当 */
.btn-submit {
  width: 100%;
}
/* レスポンシブ: タブレット */
@media (max-width: 768px) {
  .pre-contact-faq {
    padding: 3rem 1.25rem;
  }

  .pre-contact-faq-grid {
    grid-template-columns: 1fr;
  }

  .pre-contact-faq-summary {
    gap: 0.75rem;
    padding: 1.25rem 0;
  }

  .pre-contact-faq-answer {
    padding-bottom: 1.25rem;
  }

  .contact-section {
    padding: 3rem 0;
  }

  .contact-section > .container {
    padding: 0;
  }

  .contact-form {
    padding: 2rem 1.25rem;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-optional {
    margin-bottom: 1rem;
  }

  /* モバイルはタップ標的を約 40px 確保（既定 padding では約 32px） */
  .form-optional__toggle {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .radio-group {
    flex-direction: column;
    gap: 0.625rem;
  }

  .btn-submit {
    width: 100%;
  }

  .form-success {
    padding: 2.5rem 1.25rem;
    border-radius: 0;
    box-shadow: none;
  }

  #timerex_calendar {
    min-height: 500px;
  }
}

/* レスポンシブ: スマートフォン */
@media (max-width: 480px) {
  .pre-contact-faq {
    /* KG-5: mobile 標準 48 */
    padding: 3rem 1rem;
  }

  .pre-contact-faq-item {
    padding: 1.125rem 0;
  }

  .pre-contact-faq-item h3 {
    grid-template-columns: 1.625rem 1fr;
    gap: 0.625rem;
    font-size: 1rem;
  }

  .pre-contact-faq-item h3::before {
    width: 1.625rem;
    height: 1.625rem;
  }

  .contact-section {
    /* KG-5: mobile 標準 48 */
    padding: 3rem 0;
  }

  .contact-form {
    padding: 1.5rem 1rem;
  }

  .form-success {
    padding: 2rem 1rem;
  }

  #timerex_calendar {
    min-height: 450px;
  }
}

/* 送信完了メッセージ */
.form-success {
  text-align: center;
  padding: 4rem 2rem;
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.success-icon {
  width: 64px;
  height: 64px;
  background: var(--gradient-cta);
  color: white;
  font-size: 2rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.form-success h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}

.form-success p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.8;
}

/* 送信中ボタン */
.btn-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 次のステップ（予約誘導） */
.next-step {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-light);
}

.next-step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.next-step-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1.5rem;
}

.booking-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.booking-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

/* Timerex埋め込み */
.timerex-embed {
  margin-top: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.timerex-iframe {
  width: 100%;
  height: 600px;
  border: none;
}

@media (max-width: 768px) {
  .timerex-iframe {
    height: 500px;
  }
}

/* フォームエラー状態 */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-light);
}

.form-group input.is-invalid,
.form-group textarea.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-light);
}

.form-group input:invalid:not(:placeholder-shown):focus,
.form-group textarea:invalid:not(:placeholder-shown):focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-light);
}

.form-error-message {
  color: var(--error);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-error-message::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: var(--error);
  color: white;
  border-radius: 50%;
  font-size: 0.6875rem; /* Issue #24: 10px→11px。必須/任意バッジの可読下限を底上げ */
  font-weight: 700;
}

/* フォーム成功状態 */
.form-group input:valid:not(:placeholder-shown) {
  border-color: var(--success);
}

/* インラインエラーバナー */
.form-error-banner {
  padding: 0.875rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  color: var(--danger-strong);
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
/* フッター */
footer {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(249, 250, 251, 1) 100%
  );
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  /* 横は共通の --gutter を参照(セクション間で版面左右を揃える) */
  padding: 4rem var(--gutter, 2rem) 2rem;
  position: relative;
  overflow: hidden;
}

footer:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.02) 0%,
    transparent 70%
  );
  pointer-events: none;
}

.footer-content {
  /* 他セクションと版面左右を揃える (旧 1000px は独自値で 60px ずれていた) */
  max-width: var(--max-width-content, 1120px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto auto;
  gap: 4rem;
  align-items: start;
  padding-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-brand h3 {
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--primary, #1e3a8a) 0%, var(--primary-dark, #1e40af) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.footer-brand h3 img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.06));
}

.footer-brand p {
  color: var(--ink-mute);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 400;
  max-width: 320px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-links h4 {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--neutral-400);
  margin: 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin: 0;
}

.footer-links a {
  color: var(--ink-mid);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 450;
  transition: all 0.2s var(--easing-standard);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0;
}

.footer-links a:hover {
  color: var(--primary, #1e3a8a);
  transform: translateX(4px);
}

.footer-links a::before {
  content: "→";
  font-size: 0.875rem;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.2s var(--easing-standard);
}

.footer-links a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-bottom {
  max-width: 1000px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(226, 232, 240, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom p {
  color: var(--neutral-400);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  footer {
    padding: 3rem var(--gutter, 1.5rem) 1.5rem;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-bottom: 2rem;
  }

  .footer-brand p {
    max-width: 100%;
  }

  .footer-links h4 {
    font-size: 0.7rem;
    padding-bottom: 0.5rem;
  }

  .footer-links a::before {
    display: none;
  }

  .footer-links a:hover {
    transform: none;
    color: var(--primary, #1e3a8a);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    padding-top: 1.5rem;
  }

  .footer-bottom p {
    font-size: 0.8125rem;
  }
}
/* モバイル対応 */
@media (max-width: 768px) {
  .voice-visualizer {
    height: 150px;
    gap: 4px;
    padding: 1.5rem;
  }

  .voice-bar {
    width: 3px;
  }

  .recording-status {
    padding: 0.75rem 1.5rem;
  }

  .recording-text {
    font-size: 0.9rem;
  }
}

/* タブレット対応 */
@media (max-width: 1024px) {
  .timeline-container {
    max-width: 800px;
  }

  .timeline-content {
    width: calc(50% - 3rem);
  }

  .timeline-item:nth-child(odd) .timeline-time {
    right: -4.5rem;
  }

  .timeline-item:nth-child(even) .timeline-time {
    left: -4.5rem;
  }
}

/* スマホ対応 */
@media (max-width: 768px) {
  /* .problem の padding は problem-minimal.css に一本化 (KG-5。旧 5rem 上書きは
     bundle 後段のこのファイルが常に勝ってしまうため撤去) */

  .timeline-container {
    padding: 2rem 0;
  }

  .timeline-line {
    left: 2.5rem;
    width: 2px;
  }

  .timeline-item {
    margin-bottom: 3rem;
  }

  .timeline-item,
  .timeline-item:nth-child(even) {
    flex-direction: row;
    margin-left: 0;
    padding-left: 4.5rem;
  }

  .timeline-content {
    width: 100%;
    padding: 2rem;
  }

  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    margin: 0;
  }

  .timeline-dot {
    left: 2.5rem;
    top: 2rem;
    width: 20px;
    height: 20px;
    border-width: 3px;
  }

  .timeline-time {
    position: static;
    display: block;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: #ef4444;
    opacity: 0.9;
  }

  .timeline-content h3 {
    font-size: 1.25rem;
    flex-wrap: wrap;
  }

  .timeline-icon {
    width: 40px;
    height: 40px;
  }

  .timeline-problems li {
    font-size: 0.95rem;
    padding: 0.75rem 0;
  }

  .timeline-stat {
    font-size: 0.85rem;
    padding: 0.4rem 0.875rem;
    margin-top: 1.25rem;
  }
}

/* 小型スマホ対応 */
@media (max-width: 480px) {
  /* .problem の padding は problem-minimal.css に一本化 (KG-5) */

  .timeline-line {
    left: 1.75rem;
  }

  .timeline-item {
    padding-left: 3.5rem;
  }

  .timeline-content {
    padding: 1.75rem;
    border-radius: var(--radius-lg);
  }

  .timeline-dot {
    left: 1.75rem;
    width: 18px;
    height: 18px;
  }

  .timeline-content h3 {
    font-size: 1.125rem;
    gap: 0.75rem;
  }

  .timeline-icon {
    width: 36px;
    height: 36px;
  }

  .timeline-problems {
    margin-top: 1rem;
  }

  .timeline-problems li {
    font-size: 0.9rem;
    padding-left: 1.5rem;
    line-height: 1.6;
  }

  .timeline-stat {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
  }
}

/* 機能セクション: 旧 cross-grid レイアウト (.features-layout / .feature-card 系) の
 * レスポンシブ規則は v2 Bento 化で dead になったため削除 (2026-07-13 design-review)。
 * #features の padding per-section override も撤去 — common.css の 480px 規則
 * (3rem 1.5rem) が規範 (section-x 24px) と一致する。 */

/* モバイル対応 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 1.5rem;
  }

  .btn-primary:not(.hero-cta),
  .btn-secondary:not(.hero-cta-secondary) {
    width: 100%;
    text-align: center;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .compare-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .arrow-container {
    display: none;
  }

  /* h2 サイズは critical.css の clamp に委譲 (Issue #20)。間隔のみ調整 */
  h2 {
    margin-bottom: 1.25rem;
  }

  /* .section-header の mobile margin は common.css (標準 --space-xl 48) に一本化 (KG-9。
     旧 3.5rem 上書きは bundle 後段のこのファイルが常に勝ってしまうため撤去) */

  .section-subtitle {
    font-size: 1.05rem;
    padding: 0 1rem;
  }

  .cta h2 {
    font-size: 2rem;
    line-height: 1.3;
  }

  .cta p {
    font-size: 1.05rem;
  }

  /* Value (.metric-*) のレスポンシブは value-responsive.css に一本化 (旧 circle 用上書きを撤去) */

  .compare-card {
    padding: 2rem;
  }
}

/* 小型デバイス向け追加調整 */
@media (max-width: 480px) {
  /* h2 サイズは critical.css の clamp に委譲 (Issue #20) */

  .section-subtitle {
    font-size: 1rem;
  }

  /* KG-5: mobile 標準 48 (96 の 2:1)。sections.bundle は inline critical より
     後に読まれるため、この値が ≤480 の最終勝者になる */
  section {
    padding: 3rem 1rem;
  }

  .btn-primary,
  .btn-secondary {
    padding: 0.875rem 2rem;
    font-size: 0.95rem;
  }

  .nav-container {
    padding: 0 1rem;
  }

  .logo {
    font-size: 1.25rem;
    gap: 0.5rem;
  }

  .logo-icon {
    width: 26px;
    height: 26px;
  }

  .footer-brand h3 {
    font-size: 1.25rem;
    gap: 0.5rem;
  }

  .footer-brand h3 img {
    width: 24px;
    height: 24px;
  }

  /* Value (.metric-*) のレスポンシブは value-responsive.css に一本化 */

  .compare-card h3 {
    font-size: 1.25rem;
  }
}
/* パフォーマンス最適化CSS */
/* backdrop-filterとfilterを削除/軽量化し、代替デザインを提供 */

/* Nav の backdrop-filter / 半透明背景は critical.css でデザイン確定済み。
 * ここで !important で潰すと dark セクション直上で硬い白塊になるため除去。
 * 旧パフォーマンスハック (backdrop-filter: none !important) は撤去。 */

/* 旧 .voice-animation-container / .crystallization-stage の白背景 !important は撤去。
 * Voice セクションは v3 で dark → light のフェード構成に変更されており、
 * コンテナが白背景になるとダーク帯の中に白矩形が浮いてしまうため。 */

/* カード最適化 */
.feature-card,
.comparison-card,
.solution-card {
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05) !important;
}

/* フィーチャーセクション最適化 */
.features-gradient-orb,
.features-accent-orb,
.feature-glow {
  /* blurを削除またはopacityで代替 */
  filter: none !important;
  opacity: 0.15 !important;
}

/* 価値セクション最適化 */
.value-gradient-bg {
  filter: none !important;
  opacity: 0.2 !important;
}

/* ユーティリティ最適化 */
.gradient-orb,
.gradient-blob {
  filter: none !important;
  opacity: 0.15 !important;
}

/* アニメーション最適化 - GPU加速を活用 */
* {
  /* will-changeを削除（過度の使用はメモリを消費） */
  will-change: auto !important;
}

/* 特定の要素のみGPU加速 */
.hero-title,
.hero-visual,
.device-wrapper {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* reduced-motion の universal リセットは css/animations.css に一本化 (重複排除)。 */

/* 重いアニメーションを無効化 */
.shimmer-effect::before,
.shimmer-slow::before,
.gloss-sweep::before {
  display: none !important;
}

/* トランジションを高速化 */
* {
  transition-duration: 0.2s !important;
}

/* box-shadowを軽量化 (.nav-cta は共有 CtaButton の立体シャドウが正になったため除外 —
   ここで !important 平坦化すると新デザインが打ち消される) */
.btn-primary,
.btn-secondary {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.btn-primary:hover,
.btn-secondary:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08) !important;
}

/* スクロールパフォーマンス改善 */
html {
  scroll-behavior: smooth;
  /* スクロール時のレンダリング最適化 */
  -webkit-overflow-scrolling: touch;
}

/* 画像最適化 */
img {
  /* 画像のレンダリング品質を調整 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* フォント最適化 */
body {
  /* フォントレンダリング最適化 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* レイアウトシフト防止 */
.device-image,
.logo-icon {
  aspect-ratio: attr(width) / attr(height);
}

/* 不要な再描画を防ぐ */
.static-content {
  contain: layout style paint;
}