/* Codex追加：D — Cの構造を共用し、操作面だけを浮かぶガラスにする。料金と画像は透過させない。 */
.cdx-simulator[data-design="d"] {
  --sim-paper: #f5f5f7;
  --sim-surface: #eff1f3;
  --sim-ink: #182c38;
  --sim-muted: #516673;
  --sim-line: #d1dfe6;
  --sim-control-line: #a4bac6;
  --sim-accent: #006e88;
  --sim-accent-soft: #e5f3f7;
  --sim-focus: #006e88;
  --sim-glass: rgb(250 250 252 / 82%);
  --sim-glass-shadow: 0 4px 20px rgb(0 0 0 / 7%);
  /* Codex修正：波形の装飾背景を外し、ガラスと製品が引き立つ無地にする */
  background: var(--sim-paper);
  border-radius: 36px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
.cdx-simulator[data-design="d"] .sim-app { padding: 36px 24px calc(var(--sim-bar-height) + 28px); }
.cdx-simulator[data-design="d"] .sim-header { padding: 0 0 24px; }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-title { font-size: clamp(28px, 4.8cqi, 46px); font-weight: 700; letter-spacing: -.055em; }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-title > span { color: inherit; }
.cdx-simulator[data-design="d"] .sim-comparison-bar { border: 0; padding: 0; margin-bottom: 32px; }
/* Codex修正：左右カラムの下端を揃え、トップ画面の3つの操作ボタンを同じY位置に置く。 */
.cdx-simulator[data-design="d"] .sim-c-overview { gap: 28px; align-items: end; }
.cdx-simulator[data-design="d"] .sim-c-product { background: transparent; padding: 20px 12px 0; border: 0; border-radius: 32px; }
.cdx-simulator[data-design="d"] .sim-c-product [data-c-image] { height: 320px; max-height: 320px; }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-c-product [data-c-model] { font-size: 32px; font-weight: 700; letter-spacing: -.04em; }
/* Codex修正：枠線幅が異なる主CTAと右側ボタンを同じ高さにし、中心線まで一致させる。 */
.cdx-simulator[data-design="d"] .sim-c-product > [data-cta-experiment],
.cdx-simulator[data-design="d"] .sim-c-menu-actions > .sim-button { height: 50px; min-height: 50px; }
.cdx-simulator[data-design="d"] .sim-c-edit-list { padding: 12px 22px; border: 1px solid #e5e7eb; border-radius: 30px; background: #fff; box-shadow: none; }
/* Codex修正：下部ボタンのY位置は保ち、各ステップを上へ広げて一覧だけを元の高さへ戻す。 */
.cdx-simulator[data-design="d"] .sim-c-edit-list > button { min-height: 91px; padding: 15px 0; border-color: rgb(103 139 158 / 17%); }
.cdx-simulator[data-design="d"] .sim-c-edit-list > button:last-child { border-bottom: 0; }
.cdx-simulator[data-design="d"] .sim-c-edit-list > button > span { background: #e4eef3; color: #406075; }
.cdx-simulator[data-design="d"] .sim-c-edit-list > button > strong { font-weight: 650; }
.cdx-simulator[data-design="d"] .sim-result { background: #fff; border: 1px solid #e5e7eb; border-radius: 28px; box-shadow: none; }

/* Codex修正：ガラスはナビと料金ドックの外面だけ。内部の選択・ボタンには重ねない。 */
.cdx-simulator[data-design="d"] :is(.sim-c-steps, .sim-c-footer),
.cdx-simulator[data-design="d"].is-active[data-wide="false"][data-visible="true"] .sim-mobile-bar {
  border: 1px solid rgb(0 0 0 / 7%);
  background: var(--sim-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  backdrop-filter: blur(20px) saturate(1.1);
  box-shadow: var(--sim-glass-shadow);
}
.cdx-simulator[data-design="d"] .sim-button {
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--sim-accent);
  box-shadow: none;
  font-weight: 600;
  transition: background-color 240ms ease;
}
.cdx-simulator[data-design="d"] .sim-button--secondary {
  background: #e9edf0; color: var(--sim-accent); border-color: transparent;
  box-shadow: none;
}
.cdx-simulator[data-design="d"] .sim-icon-button:not(.sim-close-button) { border: 0; border-radius: 50%; background: #e9edf0; color: var(--sim-ink); box-shadow: none; }
.cdx-simulator[data-design="d"] .sim-mobile-bar { border-radius: 28px; }

/* Codex追加：内容が上部ナビと下部ドックの下を通る。スクロール・フォーカスは既存Cの本文に集約する。 */
.cdx-simulator[data-design="d"] .sim-c-dialog {
  /* Codex修正：縦サイズはC共通の画面高に連動させ、D独自の上限を設けない */
  width: min(1000px, calc(100vw - 48px));
  border: 1px solid rgb(0 0 0 / 8%); border-radius: 36px;
  background: var(--sim-paper);
  box-shadow: 0 24px 80px rgb(0 0 0 / 18%);
}
.cdx-simulator[data-design="d"] .sim-c-dialog[open] { display: block; animation: sim-d-appear 380ms cubic-bezier(.22, 1, .36, 1); }
.cdx-simulator[data-design="d"] :is(.sim-c-dialog, .sim-comparison-dialog, .sim-sheet)::backdrop { background: rgb(0 0 0 / 18%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Codex修正：重ねたヘッダーの背景にも外枠の上側の角丸を継承し、四角い背景が角へはみ出すのを防ぐ。 */
.cdx-simulator[data-design="d"] .sim-c-dialog-header { position: absolute; z-index: 4; inset: 0 0 auto; min-height: 64px; padding: 14px 24px 10px; border-bottom: 0; border-top-left-radius: inherit; border-top-right-radius: inherit; background: linear-gradient(#f5f5f7, rgb(245 245 247 / 0%)); }
.cdx-simulator[data-design="d"] .sim-c-steps { position: relative; padding: 5px; gap: 0; border-radius: 999px; isolation: isolate; }
/* Codex修正：選択状態はフラットな塗りと文字だけで示し、レンズの縁・影・ぼかしを重ねない */
.cdx-simulator[data-design="d"] .sim-c-steps > button { min-height: 48px; padding: 7px 5px; border: 0; border-radius: 999px; color: #506777; background: transparent; }
.cdx-simulator[data-design="d"] .sim-c-steps > button > span { width: 23px; height: 23px; border: 0; background: transparent; color: inherit; }
/* Codex修正：現在位置のキャリア色はC共通の指定を使い、ガラス上の枠線だけを省く。 */
.cdx-simulator[data-design="d"] .sim-c-steps > button[aria-current="step"] { border: 0; }
.cdx-simulator[data-design="d"] .sim-c-steps > button[aria-current="step"] > :is(span, strong) { background: transparent; color: inherit; font-weight: 700; }
/* Codex修正：横並びのヘッダーに合わせて本文上部を詰め、ドックは実測した高さ分だけ避ける。 */
.cdx-simulator[data-design="d"] .sim-c-body { height: 100%; padding: 108px 40px var(--sim-c-footer-clearance, 132px); scroll-padding-block: 108px var(--sim-c-footer-clearance, 132px); }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-c-step-title { font-size: 30px; font-weight: 700; letter-spacing: -.045em; }
.cdx-simulator[data-design="d"] .sim-c-step-panel:not([hidden]) { animation: sim-d-step 300ms ease-out; }
.cdx-simulator[data-design="d"] .sim-c-footer { position: absolute; z-index: 3; inset: auto 24px 18px; gap: 16px; min-height: 88px; padding: 15px 20px; border-radius: 28px; }
.cdx-simulator[data-design="d"] .sim-c-live-price > strong { color: #143e51; font-weight: 700; }
.cdx-simulator[data-design="d"] .sim-c-actions > [data-c-prev] { color: #405f72; }
/* Codex修正：注文リンクも既存の右下アクションと同じ寸法に揃える */
.cdx-simulator[data-design="d"] .sim-c-actions > :is([data-c-next], [data-c-purchase]) { min-width: 116px; }

/* Codex追加：フォーム本文は薄い通常素材。キャリア色の選択枠・チェック位置・画像の固定高は維持する。 */
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-device-stage { padding: 22px 14px; border: 1px solid #e5e7eb; border-radius: 28px; background: #fff; }
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-device-art { height: 300px; }
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-device-image { object-fit: contain; opacity: 1; mix-blend-mode: normal; }
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-carrier-trigger { border-radius: 22px; background: #fff; box-shadow: none; }
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-choice__body { border: 1px solid #d0dfe7; border-radius: 20px; background: #fff; box-shadow: none; }
.cdx-simulator[data-design="d"] .sim-c-dialog .sim-choice > input:checked + .sim-choice__body { border-color: var(--sim-choice-color); background: color-mix(in srgb, var(--sim-choice-color) 5%, #fff); box-shadow: 0 0 0 1px var(--sim-choice-color); }
.cdx-simulator[data-design="d"] .sim-select { border-color: #b9cdd8; border-radius: 16px; background-color: #fbfdff; }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-check { padding: 16px; border: 1px solid #d0dfe7; border-radius: 20px; background: #f9fcfe; }
:is(#entry, body) .cdx-simulator[data-design="d"] .sim-check:has(> input:checked) { border-color: var(--sim-selection); }
.cdx-simulator[data-design="d"] .sim-check > input { flex-shrink: 0; }
.cdx-simulator[data-design="d"] .sim-sheet { border: 1px solid #fff; border-radius: 30px; background: #f4f8fb; box-shadow: 0 24px 80px rgb(25 64 87 / 22%); }
.cdx-simulator[data-design="d"] .sim-sheet-heading { background: #f4f8fb; }
.cdx-simulator[data-design="d"] .sim-carrier-option { border-radius: 20px; background: #fbfdfe; }

/* Codex追加：比較表のセルは不透明のままにし、横スクロールする数字を透過で重ねない */
.cdx-simulator[data-design="d"] .sim-comparison-dialog { border: 1px solid #fff; border-radius: 32px; background: var(--sim-paper); box-shadow: 0 28px 110px rgb(24 51 69 / 22%); }
.cdx-simulator[data-design="d"] .sim-comparison-header { background: var(--sim-paper); }
.cdx-simulator[data-design="d"] .sim-comparison-controls { background: var(--sim-paper); }
.cdx-simulator[data-design="d"] .sim-comparison-controls select { border-radius: 14px; border-color: #c4d5df; }
.cdx-simulator[data-design="d"] .sim-comparison-footer { background: var(--sim-paper); }
.cdx-simulator[data-design="d"] .sim-comparison-footer > button { background: #e9edf0; box-shadow: none; border-color: transparent; }

@container simulator (min-width: 720px) {
  .cdx-simulator[data-design="d"] .sim-app { padding: 44px 40px calc(var(--sim-bar-height) + 32px); }
  .cdx-simulator[data-design="d"] .sim-c-product [data-c-image] { height: 350px; max-height: 350px; }
}
@media (max-width: 599px) {
  .cdx-simulator[data-design="d"] { border-radius: 26px; }
  /* Codex修正：スマホの開始CTAを初期画面へ収めるため、導入と料金まわりの余白を詰める。 */
  .cdx-simulator[data-design="d"] .sim-app { padding-top: 16px; padding-inline: 18px; }
  .cdx-simulator[data-design="d"] .sim-header { padding-bottom: 14px; }
  .cdx-simulator[data-design="d"] .sim-comparison-bar { margin-bottom: 16px; }
  .cdx-simulator[data-design="d"] .sim-c-product { gap: 8px; padding-top: 4px; }
  /* Codex修正：操作バー表示時の画面高からナビ・見出し・料金・CTA用の450pxを確保し、スクロール中の画像伸縮を防ぐ。 */
  .cdx-simulator[data-design="d"] .sim-c-product [data-c-image] { height: clamp(120px, calc(100svh - 450px), 210px); max-height: 210px; }
  .cdx-simulator[data-design="d"] .sim-c-cta-price,
  .cdx-simulator[data-design="d"] .sim-c-product > [data-cta-experiment] { margin-top: 4px; }
  .cdx-simulator[data-design="d"] .sim-c-edit-list { padding-inline: 18px; border-radius: 26px; }
  .cdx-simulator[data-design="d"] .sim-c-dialog { inset: 8px; width: calc(100% - 16px); height: calc(100dvh - 16px); margin: 0; border-radius: 28px; }
  .cdx-simulator[data-design="d"] .sim-c-dialog-header { min-height: 58px; padding: 10px; }
  .cdx-simulator[data-design="d"] .sim-c-steps { padding: 4px; border-radius: 24px; }
  .cdx-simulator[data-design="d"] .sim-c-steps > button { flex-direction: column; min-height: 58px; gap: 3px; padding: 4px 0; border-radius: 20px; font-size: 10px; }
  .cdx-simulator[data-design="d"] .sim-c-body { padding: 108px 18px var(--sim-c-footer-clearance, 144px); scroll-padding-block: 108px var(--sim-c-footer-clearance, 144px); scrollbar-gutter: auto; }
  :is(#entry, body) .cdx-simulator[data-design="d"] .sim-c-step-title { font-size: 25px; margin-bottom: 22px; }
  .cdx-simulator[data-design="d"] .sim-c-dialog .sim-device-art { height: 230px; }
  .cdx-simulator[data-design="d"] .sim-c-dialog .sim-choice__body { border-radius: 16px; padding-left: 12px; }
  .cdx-simulator[data-design="d"] .sim-c-footer { inset: auto 10px max(10px, env(safe-area-inset-bottom, 0px)); min-height: 82px; padding: 12px; gap: 8px; border-radius: 24px; }
  .cdx-simulator[data-design="d"] .sim-c-live-price > strong { font-size: 22px; }
  .cdx-simulator[data-design="d"] .sim-c-actions { gap: 2px; }
  /* Codex修正：比較にも同じ小さい最小幅を適用し、月額と最終ステップの操作を1行に収める。 */
  .cdx-simulator[data-design="d"] .sim-c-actions > :is([data-c-next], [data-c-final-compare], [data-c-purchase]) { min-width: 74px; padding-inline: 14px; }
  .cdx-simulator[data-design="d"] .sim-comparison-dialog { width: calc(100% - 16px); height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); inset: 8px; border-radius: 28px; }
}
@media (hover: hover) {
  .cdx-simulator[data-design="d"] .sim-button:hover { background: #005a70; }
  .cdx-simulator[data-design="d"] .sim-button--secondary:hover { background: #fff; color: var(--sim-accent); }
  .cdx-simulator[data-design="d"] .sim-c-edit-list > button:hover { background: rgb(255 255 255 / 50%); }
  .cdx-simulator[data-design="d"] .sim-c-steps > button:not([aria-current="step"]):hover { background: rgb(255 255 255 / 35%); }
  .cdx-simulator[data-design="d"] .sim-choice:hover > input:not(:disabled):not(:checked) + .sim-choice__body { background: #fff; }
}
@keyframes sim-d-appear { from { opacity: 0; transform: translateY(18px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes sim-d-step { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Codex追加：透明度・動きを減らす設定と非対応環境では、不透明な読みやすい操作面に退避する */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cdx-simulator[data-design="d"] { --sim-glass: #f8fcff; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cdx-simulator[data-design="d"] { --sim-glass: #fff; --sim-glass-shadow: 0 0 0 1px #96afbe; }
  .cdx-simulator[data-design="d"] :is(.sim-c-dialog, .sim-c-edit-list) { background: #f4f8fb; }
}
@media (prefers-reduced-motion: reduce) {
  .cdx-simulator[data-design="d"] :is(.sim-c-dialog[open], .sim-c-step-panel:not([hidden])) { animation: none; }
  .cdx-simulator[data-design="d"] .sim-button { transition: none; }
}
@media print {
  .cdx-simulator[data-design="d"] { background: #fff; }
}