/* Codex修正：元の青緑とキャリア色を残し、商品・選択肢・料金に異なる表情を持たせる */
/* Codex修正：シミュレーターを置く画面では共通テーマの360px固定を解除し、320pxでも右端を切らない */
body:has(.cdx-simulator) { min-width: 320px; }

.cdx-simulator {
  --sim-paper: #fff;
  --sim-surface: #f3f6f6;
  --sim-ink: #233337;
  --sim-muted: #637174;
  --sim-line: #dce5e5;
  --sim-control-line: #a9b8bb;
  --sim-accent: #007c95;
  --sim-accent-soft: #e8f6fa;
  --sim-selection: #0f96b3;
  --sim-selection-ink: #111;
  --sim-positive: #00758b;
  --sim-focus: #175cc2;
  /* Codex修正：料金調整CTAの虹色の配色を定義する。 */
  --sim-rainbow-stops: #8d63ff 0deg, #4285f4 18deg, #34a853 120deg, #fbbc05 240deg, #f28b32 300deg, #ea4335 336deg, #cf4f83 348deg, #8d63ff 360deg;
  --sim-sticky-top: 96px;
  --sim-bar-height: 110px;
  container: simulator / inline-size;
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin: 40px auto;
  color: var(--sim-ink);
  background: var(--sim-paper);
  border: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  isolation: isolate;
  /* Codex追加：動的な入力・結果をブラウザーのスクロール補正の基点にしない */
  overflow-anchor: none;
  -webkit-text-size-adjust: 100%;
}

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

/* Codex追加：テーマの記事見出し装飾を当コンポーネント内だけ解除 */
:is(#entry, body) .cdx-simulator :is(h1, h2, h3, h4, p, dl, dt, dd, fieldset, legend, label) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: inherit;
  text-indent: 0;
  box-shadow: none;
  letter-spacing: normal;
}

:is(#entry, body) .cdx-simulator :is(h1, h2, h3, h4)::before,
:is(#entry, body) .cdx-simulator :is(h1, h2, h3, h4)::after {
  display: none;
  content: none;
}

.cdx-simulator [hidden] { display: none !important; }
.cdx-simulator :is(button, select, input) { font: inherit; }
.cdx-simulator :is(button, select, input, summary) { -webkit-tap-highlight-color: transparent; }
.cdx-simulator :is(button, select, input, summary, a):focus-visible {
  outline: 3px solid var(--sim-focus);
  outline-offset: 3px;
}
.cdx-simulator button { cursor: pointer; }
.cdx-simulator button:disabled { cursor: not-allowed; opacity: .5; }
/* Codex修正：テーマ共通の通常カーソル指定を上書きし、文字・アイコンにもボタンや選択項目のカーソルを引き継ぐ。 */
.cdx-simulator :is(button, .sim-choice, .sim-check) * { cursor: inherit; }
.cdx-simulator :is(button, select) { touch-action: manipulation; }
.cdx-simulator :is(img, svg) { max-width: 100%; }
.cdx-simulator .sim-app { padding: 16px 12px 24px; }

/* Codex追加：合算額を先に読み、端末・通信の詳しい条件は必要なときに開く */
.cdx-simulator .sim-total { margin-top: 24px; padding: 20px 0; border-top: 2px solid var(--sim-selection); border-bottom: 1px solid var(--sim-line); }
.cdx-simulator .sim-total > span { display: block; font-size: 15px; }
.cdx-simulator .sim-total > strong { display: block; font-size: clamp(26px, 6vw, 34px); font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-total > strong > small { margin-left: 5px; font-size: 15px; font-weight: 400; }
.cdx-simulator .sim-detail { margin-top: 20px; border-top: 1px solid var(--sim-line); }
.cdx-simulator .sim-detail > summary { padding: 16px 0; cursor: pointer; font-weight: 700; }
.cdx-simulator .sim-subfields .sim-select-label { margin-top: 14px; }

/* Codex修正：導入は短い問いかけだけにし、料金確認より先に商品へ視線をつなぐ */
.cdx-simulator .sim-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0 4px 22px;
}
:is(#entry, body) .cdx-simulator .sim-title {
  font-size: clamp(30px, 7.8cqi, 52px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.cdx-simulator .sim-title > span { color: var(--sim-accent); }
/* Codex修正：ログイン用の保存操作は末尾の補足の下にまとめ、狭い画面では自然に折り返す。 */
.cdx-simulator .sim-saved-plan { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; }
/* Codex追加：ログイン権限は維持したまま、保存・コピー関連の項目をまとめて隠す。 */
.cdx-simulator[data-login-items-visible="false"] [data-simulator-login-item] { display: none !important; }
.cdx-simulator .sim-saved-plan-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cdx-simulator .sim-saved-plan-actions > .sim-button { min-width: 0; min-height: 40px; padding: 8px 14px; font-size: 13px; }
:is(#entry, body) .cdx-simulator :is(.sim-saved-plan-help, .sim-saved-plan-info, .sim-saved-plan-status) { margin: 0; color: var(--sim-muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
:is(#entry, body) .cdx-simulator .sim-saved-plan-status { color: var(--sim-ink); }
.cdx-simulator .sim-saved-plan-status:empty { display: none; }
:is(#entry, body) .cdx-simulator .sim-intro {
  color: var(--sim-muted);
  font-size: 15px;
  line-height: 1.8;
}
.cdx-simulator .sim-carrier-section {
  padding: 0 4px 24px;
  border: 0;
}
/* Codex追加：買い方で移動するキャリア欄は、空の配置枠や旧見出し用の余白を残さない */
.cdx-simulator [data-slot]:is([data-slot="purchase-carrier"], [data-slot="service-carrier"]):empty { display: none; }
.cdx-simulator [data-slot] > .sim-carrier-section { padding: 0; }
.cdx-simulator .sim-fieldset {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 12px;
}
:is(#entry, body) .cdx-simulator .sim-fieldset > legend {
  float: none;
  width: 100%;
  padding-bottom: 12px;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.5;
}
.cdx-simulator .sim-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
/* Codex追加：項目名と説明ボタンを横並びにし、長い名前はスマホ幅に合わせて折り返す。 */
.cdx-simulator .sim-field-label { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; }
.cdx-simulator .sim-field-label > span { min-width: 0; }
.cdx-simulator .sim-choice-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Codex追加：ボタン増減時の表示専用コピーを欄内に収める */
.cdx-simulator [data-slot] { position: relative; }
.cdx-simulator [data-slot].is-choice-transitioning { overflow: clip; }
.cdx-simulator .sim-carriers { gap: 8px; }
.cdx-simulator .sim-choice {
  /* Codex修正：選択中の枠・チェックは引き続きキャリア色に統一する */
  --sim-choice-color: var(--sim-selection);
  --sim-choice-edge: color-mix(in srgb, var(--sim-choice-color) 55%, #111);
  position: relative;
  display: flex;
  min-width: 0;
  cursor: pointer;
}
.cdx-simulator .sim-choice > input {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  margin: 0;
  opacity: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.cdx-simulator .sim-choice__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 14px 38px 14px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--sim-surface);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.cdx-simulator .sim-choice__body::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--sim-control-line);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}
/* Codex修正：英単語は途中で分断せず、長い説明だけ必要に応じて折り返す */
.cdx-simulator .sim-choice__title { font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: break-word; text-wrap: balance; }
.cdx-simulator .sim-choice__meta { color: var(--sim-muted); font-size: 13px; line-height: 1.5; overflow-wrap: break-word; }
/* Codex追加：料金は説明文と分け、数字と単位をひとかたまりで読めるようにする */
.cdx-simulator .sim-choice__price,
.cdx-simulator .sim-check__price { font-size: 15px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Codex修正：期間の切替ボタンにも、入力選択肢と同じ選択枠・チェックを使う */
.cdx-simulator .sim-choice > input:checked + .sim-choice__body,
.cdx-simulator button.sim-summary-period-choice[aria-pressed="true"] > .sim-choice__body {
  border-color: var(--sim-choice-color);
  background: color-mix(in srgb, var(--sim-choice-color) 10%, #fff);
  color: var(--sim-ink);
  box-shadow: 0 0 0 1px var(--sim-choice-color);
}
.cdx-simulator .sim-choice > input:checked + .sim-choice__body .sim-choice__meta { color: inherit; }
.cdx-simulator .sim-choice > input:checked + .sim-choice__body::after,
.cdx-simulator button.sim-summary-period-choice[aria-pressed="true"] > .sim-choice__body::after {
  content: "";
  border-color: var(--sim-choice-color);
  background: var(--sim-choice-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6 2 2 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  color: #fff;
  font: 750 11px/13px sans-serif;
  text-align: center;
}
.cdx-simulator .sim-choice > input:focus-visible + .sim-choice__body {
  outline: 3px solid var(--sim-focus);
  outline-offset: 3px;
}
.cdx-simulator .sim-choice > input:disabled + .sim-choice__body { opacity: .55; cursor: not-allowed; }
.cdx-simulator .sim-choice--carrier { --sim-choice-color: var(--carrier-color); }
.cdx-simulator .sim-choice--carrier .sim-choice__body {
  min-height: 58px;
  padding-left: 30px;
}
.cdx-simulator .sim-choice--carrier .sim-choice__body::before {
  content: "";
  position: absolute;
  top: calc(50% - 3px);
  left: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--carrier-color, var(--sim-accent));
}

/* Codex修正：キャリア選択は横長の入力欄ではなく、押せるブランド名としてまとめる */
.cdx-simulator .sim-carrier-section {
  display: grid;
  align-items: center;
  /* Codex修正：狭い本文ではラベルを上段へ逃がし、キャリア名を途中で切らない */
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}
:is(#entry, body) .cdx-simulator .sim-carrier-heading h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}
.cdx-simulator .sim-carrier-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--sim-line);
  border-radius: 28px;
  color: var(--sim-ink);
  background: #fff;
  box-shadow: none;
  text-align: left;
  transition: color 140ms ease;
}
/* Codex修正：名前側に余白を配分し、変更ボタンやブランド名を縮めて分断しない */
.cdx-simulator .sim-carrier-current { display: flex; flex: 1 1 auto; align-items: center; gap: 10px; min-width: 0; }
.cdx-simulator .sim-carrier-current::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 50%; background: var(--carrier-color); }
.cdx-simulator .sim-carrier-name { font-size: 19px; font-weight: 750; line-height: 1.4; letter-spacing: -.015em; white-space: nowrap; }
.cdx-simulator .sim-carrier-change {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 2px 0 2px 4px;
  color: var(--sim-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
}
.cdx-simulator .sim-carrier-change svg { flex: 0 0 auto; width: 15px; height: 15px; }

/* Codex追加：通常の入力ボタンと区別したキャリア専用の選択ディレクトリ */
.cdx-simulator .sim-sheet.sim-carrier-dialog {
  width: min(100%, 680px);
  padding-inline: 22px;
  box-shadow: 0 8px 28px rgb(0 0 0 / 16%);
}
.cdx-simulator .sim-carrier-directory {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border-top: 1px solid var(--sim-line);
}
.cdx-simulator .sim-carrier-option {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  min-width: 0;
  min-height: 66px;
  margin: 0;
  padding: 15px 8px;
  border: 0;
  border-bottom: 1px solid var(--sim-line);
  border-radius: 0;
  background: #fff;
  color: var(--sim-ink);
  text-align: left;
  box-shadow: none;
  transition: background 120ms ease;
}
.cdx-simulator .sim-carrier-option-mark {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 1px;
  background: var(--carrier-color);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 8%);
}
.cdx-simulator .sim-carrier-option-name { min-width: 0; font-size: 19px; font-weight: 700; line-height: 1.45; letter-spacing: -.025em; overflow-wrap: anywhere; }
.cdx-simulator .sim-carrier-option-state { display: flex; align-items: center; gap: 5px; color: #777; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.cdx-simulator .sim-carrier-option-state svg { width: 15px; height: 15px; }
.cdx-simulator .sim-carrier-option[aria-pressed="true"] { background: #f4f4f4; }
.cdx-simulator .sim-carrier-option[aria-pressed="true"] .sim-carrier-option-state { color: #333; font-weight: 700; }
:is(#entry, body) .cdx-simulator .sim-carrier-dialog-note { margin-top: 20px; color: var(--sim-muted); font-size: 11px; line-height: 1.8; }

/* Codex追加：入力セクションと大判の端末ステージ */
.cdx-simulator .sim-layout,
.cdx-simulator .sim-inputs { display: grid; min-width: 0; }
.cdx-simulator .sim-layout { gap: 32px; align-items: start; }
.cdx-simulator .sim-section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  padding: 40px 4px;
  border-bottom: 1px solid var(--sim-line);
}
.cdx-simulator .sim-section:last-child { border-bottom: 0; }
.cdx-simulator .sim-section--device { padding-top: 0; padding-bottom: 36px; }
/* Codex追加：プランを選ぶ場面は淡い青緑の紙面へ切り替え、長いフォームの連続感を和らげる */
.cdx-simulator .sim-section--plan { margin-top: 24px; padding: 28px 18px; border-radius: 24px; background: #f0f7f8; --sim-surface: #fff; }
.cdx-simulator .sim-section--payment { border-bottom: 0; padding-bottom: 16px; }
.cdx-simulator .sim-section-heading {
  display: block;
}
:is(#entry, body) .cdx-simulator .sim-section-heading h3 { font-size: 27px; font-weight: 800; line-height: 1.4; letter-spacing: -.025em; }
.cdx-simulator .sim-device-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
  padding: 26px 16px 18px;
  border-radius: 28px;
  background: #f6f6f8;
}
.cdx-simulator .sim-device-copy { position: relative; z-index: 1; display: grid; gap: 8px; align-content: center; text-align: center; }
:is(#entry, body) .cdx-simulator .sim-model-name {
  font-size: clamp(34px, 8.6cqi, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  overflow-wrap: normal;
}
.cdx-simulator .sim-device-art {
  position: relative;
  min-width: 0;
  width: 100%;
  /* Codex修正：元画像の縦横比や読み込み状態に左右されない高さを確保する */
  height: 390px;
  /* Codex追加：横方向は独自操作、縦スクロールとピンチ拡大はブラウザへ任せる */
  touch-action: pan-y pinch-zoom;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
/* Codex追加：ドラッグ中だけ追従し、短い操作や中断時は元の位置へ戻す */
.cdx-simulator .sim-device-art > :is(img, p) { translate: var(--sim-device-drag, 0px) 0; transition: translate 180ms ease-out; }
.cdx-simulator .sim-device-art.is-dragging { cursor: grabbing; }
.cdx-simulator .sim-device-art.is-dragging > :is(img, p) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cdx-simulator .sim-device-art > :is(img, p) { transition: none; }
}
:is(#entry, body) .cdx-simulator .sim-device-image {
  /* Codex修正：画像の実寸をレイアウトから切り離し、固定枠内に全体を収める */
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  /* Codex修正：写真を背景と合成せず、端末本体の色と不透明度を維持 */
  mix-blend-mode: normal;
  opacity: 1;
}
:is(#entry, body) .cdx-simulator .sim-image-fallback { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 32px; color: var(--sim-muted); font-size: 14px; line-height: 1.7; text-align: center; }
.cdx-simulator .sim-device-navigation { display: flex; align-items: center; justify-content: center; gap: 22px; }
.cdx-simulator .sim-device-position { color: var(--sim-muted); font-size: 12px; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.cdx-simulator .sim-device-position strong { color: var(--sim-ink); font-size: 16px; }
.cdx-simulator .sim-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--sim-line);
  border-radius: 50%;
  background: #fff;
  color: var(--sim-ink);
  font-size: 25px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}
.cdx-simulator .sim-icon-button svg { width: 20px; height: 20px; }
/* Codex追加：右上の閉じる操作は全ダイアログで同じ大きさ・配色・字形にする。 */
.cdx-simulator .sim-icon-button.sim-close-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 50%;
  background: #e9edf0;
  color: var(--sim-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
}
.cdx-simulator .sim-device-picker,
.cdx-simulator .sim-control-row { display: grid; min-width: 0; gap: 10px; }
.cdx-simulator .sim-device-picker > label,
.cdx-simulator .sim-control-row > label { font-size: 15px; font-weight: 700; }
.cdx-simulator .sim-select-label { display: block; font-size: 15px; font-weight: 700; line-height: 1.5; }
.cdx-simulator .sim-select {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 38px 12px 14px;
  border: 1px solid var(--sim-line);
  border-radius: 12px;
  color: var(--sim-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-overflow: ellipsis;
}
/* Codex追加：機種リストは控えめな補助操作、容量は価格を読みやすい大きさにする */
.cdx-simulator .sim-device-picker { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.cdx-simulator .sim-device-picker > label { font-size: 12px; color: var(--sim-muted); font-weight: 500; }
.cdx-simulator .sim-device-picker .sim-select { min-height: 44px; padding-block: 8px; font-size: 14px; }
.cdx-simulator [data-slot="storage"] .sim-choice__body { gap: 6px; min-height: 84px; }
.cdx-simulator [data-slot="storage"] .sim-choice__price { font-size: 19px; letter-spacing: -.035em; }
.cdx-simulator [data-slot="plan"] .sim-choice-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cdx-simulator [data-slot="plan"] .sim-choice__body { min-height: 86px; padding: 18px 40px 18px 18px; border-radius: 16px; gap: 7px; }
.cdx-simulator [data-slot="plan"] .sim-choice__title { font-size: 18px; font-weight: 750; }
.cdx-simulator [data-slot="plan"] .sim-choice__meta { font-size: 13px; }
/* Codex修正：複数の選択グループを連結する欄では、各ラベルが直前のボタンへ詰まらないよう共通の段間を設ける */
.cdx-simulator :is([data-slot="discounts"], [data-slot="options"]) { display: grid; gap: 26px; }
:is(#entry, body) .cdx-simulator .sim-help,
:is(#entry, body) .cdx-simulator .sim-notice { color: var(--sim-muted); font-size: 14px; line-height: 1.7; }
:is(#entry, body) .cdx-simulator .sim-notice { padding: 12px 14px; background: #f4f4f4; }
/* Codex追加：補償の継続期間と合計額を一組で示し、狭い画面では自然に折り返す。 */
.cdx-simulator .sim-care-total { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 15px; }
.cdx-simulator .sim-care-total > strong { font-size: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdx-simulator .sim-care-total small { margin-left: 4px; font-size: 14px; }
/* Codex追加：対象外の理由は読める濃さを保ち、選択ボタンと区別した非操作の表示にする。 */
:is(#entry, body) .cdx-simulator .sim-discount-unavailable { margin: 0; padding: 12px 14px; border: 1px solid var(--sim-line); border-radius: 12px; background: var(--sim-control-bg, #f4f4f4); }
/* Codex追加：原因そのものを押せる導線にし、長文を省略せず関連する入力欄を示す */
.cdx-simulator .sim-issue-link { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0; min-height: 40px; padding: 2px 0; border: 0; border-radius: 4px; background: none; color: var(--sim-accent); font-size: 14px; font-weight: 500; line-height: 1.65; letter-spacing: normal; text-align: left; text-decoration: underline; text-underline-offset: 3px; white-space: normal; box-shadow: none; }
.cdx-simulator .sim-issue-link > span { min-width: 0; overflow-wrap: break-word; }
.cdx-simulator .sim-issue-link > svg { flex: 0 0 18px; width: 18px; height: 18px; }
.cdx-simulator .sim-mobile-price:has(.sim-issue-link) { flex: 1 1 240px; }
.cdx-simulator .sim-issue-target { outline: 2px solid var(--sim-accent); outline-offset: 6px; border-radius: 8px; scroll-margin-block: calc(var(--sim-sticky-top) + 16px) 24px; }
.cdx-simulator .sim-subfields { display: grid; gap: 16px; padding: 16px; border-left: 2px solid var(--sim-line); }
.cdx-simulator [data-slot="return"] > .sim-return-story,
.cdx-simulator [data-slot="tradeIn"] > .sim-subfields { margin-top: 20px; }
.cdx-simulator .sim-auto-discount { display: grid; gap: 6px; margin-top: 24px; padding: 16px 0; border-top: 1px solid var(--sim-line); border-bottom: 1px solid var(--sim-line); }
.cdx-simulator .sim-auto-discount > span { color: var(--sim-positive); font-size: 12px; font-weight: 650; }
.cdx-simulator .sim-auto-discount > strong { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-positive { color: var(--sim-positive); font-weight: 700; }
.cdx-simulator .sim-check { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; cursor: pointer; }
/* Codex修正：チェックボックスも選択枠と同じキャリア色を使う */
.cdx-simulator .sim-check > input {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  margin: 3px 0 0;
  accent-color: var(--sim-selection);
}
.cdx-simulator .sim-check > span { display: grid; min-width: 0; gap: 3px; }
.cdx-simulator .sim-check__title { font-size: 15px; font-weight: 700; line-height: 1.6; }
.cdx-simulator .sim-check__meta { color: var(--sim-muted); font-size: 14px; line-height: 1.6; }
/* Codex追加：端末の返却時点を表す離散イベント */
.cdx-simulator .sim-return-story { display: grid; gap: 16px; background: #f4f4f4; padding: 18px 14px; }
.cdx-simulator .sim-return-stops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cdx-simulator .sim-return-stop { position: relative; display: grid; gap: 5px; padding-top: 22px; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.cdx-simulator .sim-return-stop::before { content: ""; position: absolute; top: 0; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--sim-accent); }
.cdx-simulator .sim-return-stop:not(:last-child)::after { content: ""; position: absolute; top: 5px; left: 15px; width: calc(100% - 11px); height: 1px; background: #bbb; }
.cdx-simulator .sim-return-stop strong { display: block; font-size: 14px; font-weight: 750; }
.cdx-simulator .sim-return-stop span { color: var(--sim-muted); }

/* Codex修正：結果は一枚の見積もりとしてまとめ、月額と総額に明確な強弱を付ける */
.cdx-simulator .sim-result-aside { min-width: 0; align-self: start; }
.cdx-simulator .sim-result {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 24px 20px;
  border: 1px solid var(--sim-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 36px rgb(35 64 70 / 5%);
}
.cdx-simulator .sim-result-header { display: grid; gap: 6px; }
.cdx-simulator .sim-result-content { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:is(#entry, body) .cdx-simulator .sim-result-header h3 { font-size: 20px; line-height: 1.5; font-weight: 700; letter-spacing: 0; }
.cdx-simulator .sim-result-sample { display: inline; margin-left: 4px; color: var(--sim-muted); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: 0; vertical-align: middle; }
:is(#entry, body) .cdx-simulator .sim-result-selection { padding-bottom: 18px; border-bottom: 1px solid var(--sim-line); color: var(--sim-muted); font-size: 13px; line-height: 1.8; }
.cdx-simulator .sim-main-price { display: grid; gap: 10px; }
/* Codex追加：主要な月額だけに色面を与え、詳細内の金額とは区別する */
.cdx-simulator .sim-result-content > .sim-main-price { padding: 22px 20px; border-radius: 18px; background: var(--sim-accent-soft); }
/* Codex追加：数字が動く間も桁ごとの横幅を揃え、単位との改行を防ぐ */
.cdx-simulator [data-count-key] { font-variant-numeric: tabular-nums; white-space: nowrap; }
:is(#entry, body) .cdx-simulator .sim-price-period { color: var(--sim-accent); font-size: 14px; font-weight: 750; }
.cdx-simulator .sim-price-period > span { margin-left: 6px; color: var(--sim-muted); font-size: 11px; font-weight: 400; }
.cdx-simulator .sim-price-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-price-number strong { color: var(--sim-accent); font-size: clamp(44px, 10cqi, 58px); font-weight: 800; line-height: 1.1; letter-spacing: -.045em; }
.cdx-simulator .sim-price-number > span { font-size: 16px; white-space: nowrap; }
.cdx-simulator .sim-price-number > span > span { font-size: 16px; }
/* Codex追加：上限の補足は金額より小さく表示し、数字の演出と分離する。 */
.cdx-simulator .sim-maximum { font-size: 12px; font-weight: 500; letter-spacing: normal; white-space: nowrap; margin-right: 3px; }
:is(#entry, body) .cdx-simulator .sim-price-note { color: var(--sim-muted); font-size: 13px; line-height: 1.7; }
.cdx-simulator .sim-periods { display: grid; position: relative; gap: 8px; }
.cdx-simulator .sim-periods::before { content: ""; position: absolute; top: 20px; bottom: 20px; left: 13px; width: 1px; background: #ccc; }
.cdx-simulator .sim-period {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 11px 10px 11px 30px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--sim-ink);
  background: transparent;
  text-align: left;
  box-shadow: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.cdx-simulator .sim-period::before { content: ""; position: absolute; top: calc(50% - 4px); left: 9px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #888; box-shadow: 0 0 0 1px #888; }
.cdx-simulator .sim-period[aria-pressed="true"] { border-color: #8bc6d2; background: var(--sim-accent-soft); }
.cdx-simulator .sim-period[aria-pressed="true"]::before { background: var(--sim-accent); box-shadow: 0 0 0 1px var(--sim-accent); }
.cdx-simulator .sim-period-label { font-size: 12px; line-height: 1.5; }
.cdx-simulator .sim-period-amount { flex-shrink: 0; font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdx-simulator .sim-period-amount small { margin-left: 3px; font-size: 10px; font-weight: 400; }
.cdx-simulator .sim-breakdown { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--sim-line); }
:is(#entry, body) .cdx-simulator .sim-breakdown h4 { font-size: 14px; line-height: 1.5; font-weight: 750; }
.cdx-simulator .sim-line-items { display: grid; gap: 10px; }
.cdx-simulator .sim-line-items > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; font-size: 13px; line-height: 1.7; }
:is(#entry, body) .cdx-simulator .sim-line-items dt { min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
:is(#entry, body) .cdx-simulator .sim-line-items dd { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Codex修正：アニメーション用の金額要素は本文の大きさを保ち、単位だけ小さくする */
.cdx-simulator .sim-line-items dd > span:not([data-count-key]) { margin-left: 3px; font-size: 11px; font-weight: 400; }
.cdx-simulator .sim-line-items dd > [data-count-key] { margin-left: 0; font-size: inherit; font-weight: inherit; }
.cdx-simulator .sim-line-items dt > small { display: block; color: var(--sim-muted); font-size: 11px; line-height: 1.7; }
.cdx-simulator .sim-line-item--discount { color: var(--sim-positive); }
.cdx-simulator .sim-line-items > div.is-updated { animation: sim-row-update 240ms ease-out; }
.cdx-simulator .sim-one-time,
.cdx-simulator .sim-benefits { display: grid; gap: 10px; border-top: 1px solid var(--sim-line); padding-top: 18px; font-size: 13px; line-height: 1.7; }
:is(#entry, body) .cdx-simulator :is(.sim-one-time, .sim-benefits) h4 { font-size: 14px; font-weight: 750; line-height: 1.5; }
.cdx-simulator .sim-benefits > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.cdx-simulator .sim-benefits > div > strong { color: var(--sim-positive); font-size: 20px; font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-benefits strong > small { margin-left: 3px; font-size: 12px; font-weight: 400; }
:is(#entry, body) .cdx-simulator .sim-benefits > p { color: var(--sim-muted); font-size: 12px; line-height: 1.7; }
.cdx-simulator .sim-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px; border-top: 1px dashed var(--sim-control-line); padding-top: 20px; font-size: 13px; }
.cdx-simulator .sim-total > span { display: grid; gap: 3px; }
.cdx-simulator .sim-total > span > small { color: var(--sim-muted); font-size: 11px; line-height: 1.7; }
.cdx-simulator .sim-total strong { font-size: 28px; font-weight: 750; font-variant-numeric: tabular-nums; letter-spacing: -.025em; white-space: nowrap; }
.cdx-simulator .sim-total strong > small { margin-left: 4px; font-size: 13px; font-weight: 400; }
.cdx-simulator .sim-result-footer { display: grid; gap: 12px; padding-top: 4px; }

/* Codex追加：確認画面は商品・主要金額・区分内訳の順に読み、説明は共通の折りたたみへ集約する */
.cdx-simulator .sim-review-period { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
:is(#entry, body) .cdx-simulator .sim-review-period > label { margin: 0; font-size: 13px; font-weight: 500; }
.cdx-simulator .sim-review-period > select { width: 132px; min-height: 44px; font-size: 14px; }
.cdx-simulator .sim-result-product { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cdx-simulator .sim-result-product > img { flex: 0 0 56px; width: 56px; height: 64px; object-fit: contain; }
.cdx-simulator .sim-result-product > div { min-width: 0; }
:is(#entry, body) .cdx-simulator .sim-result-product h4 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.cdx-simulator .sim-result-product h4 > span { display: inline-block; color: var(--sim-muted); font-size: 13px; font-weight: 400; }
:is(#entry, body) .cdx-simulator .sim-result-product p { margin-top: 3px; color: var(--sim-muted); font-size: 12px; line-height: 1.6; }
.cdx-simulator .sim-summary-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.cdx-simulator :is(.sim-summary-monthly, .sim-summary-total) { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 14px; min-width: 0; padding: 22px; border-radius: 18px; }
.cdx-simulator .sim-summary-monthly { background: var(--sim-accent-soft); }
.cdx-simulator .sim-summary-total { border: 1px solid var(--sim-line); }
/* Codex修正：月額・総額の注意書きは見出し横のヘルプへまとめ、金額を読みやすくする。 */
.cdx-simulator :is(.sim-summary-monthly-heading, .sim-summary-total-heading) { display: flex; align-items: center; gap: 2px; max-width: 100%; font-size: 13px; line-height: 1.5; }
.cdx-simulator .sim-help-button { display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -10px 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--sim-muted); box-shadow: none; }
.cdx-simulator .sim-help-button > span { display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 650; line-height: 1; }
.cdx-simulator .sim-help-button:hover { color: var(--sim-accent); }
/* Codex追加：月額カードのヘルプも、カード内の文字と同じ配色に揃える。 */
.cdx-simulator .sim-summary-monthly .sim-help-button { color: inherit; }
.cdx-simulator .sim-summary-total > strong { font-size: clamp(30px, 5cqi, 38px); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; white-space: nowrap; }
.cdx-simulator .sim-summary-total > strong > small { margin-left: 4px; font-size: 13px; font-weight: 400; }
:is(#entry, body) .cdx-simulator .sim-summary-total > p { color: var(--sim-muted); font-size: 11px; line-height: 1.5; }
/* Codex追加：総額の対象期間は金額のそばで変更し、月額の推移と明細を一続きに読む */
:is(#entry, body) .cdx-simulator .sim-summary-duration { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; max-width: 100%; font-size: 13px; font-weight: 400; }
.cdx-simulator .sim-summary-duration > select { width: auto; max-width: 100%; min-height: 38px; margin: 0; padding: 6px 26px 6px 9px; border: 1px solid var(--sim-control-line); border-radius: 8px; background-color: var(--sim-paper); color: var(--sim-ink); font-size: 13px; line-height: 1.5; }
.cdx-simulator .sim-payment-timeline { container: sim-payment / inline-size; display: grid; gap: 14px; min-width: 0; }
.cdx-simulator .sim-payment-timeline-header,
.cdx-simulator .sim-monthly-detail-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
:is(#entry, body) .cdx-simulator :is(.sim-payment-timeline-header, .sim-monthly-detail-heading) > h4 { font-size: 14px; font-weight: 650; line-height: 1.5; }
.cdx-simulator .sim-payment-legend { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--sim-muted); font-size: 11px; line-height: 1.5; }
.cdx-simulator .sim-payment-legend > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cdx-simulator .sim-payment-legend i { width: 8px; height: 8px; border-radius: 2px; }
.cdx-simulator :is(.sim-payment-swatch--device, .sim-payment-device) { background: var(--sim-accent); }
.cdx-simulator :is(.sim-payment-swatch--service, .sim-payment-service) { background: color-mix(in srgb, var(--sim-muted) 28%, var(--sim-paper)); }
.cdx-simulator :is(.sim-payment-swatch--care, .sim-payment-care) { background: color-mix(in srgb, var(--sim-accent) 42%, var(--sim-paper)); }
/* Codex修正：区間の面を隙間なく接続し、料金の変化を一続きの階段状グラフで示す */
.cdx-simulator .sim-payment-periods {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(110px, 1fr);
  gap: 0;
  min-width: 0;
  max-width: 100%;
  padding: 0 0 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--sim-control-line) transparent;
}
.cdx-simulator .sim-payment-period { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--sim-ink); box-shadow: none; text-align: center; }
.cdx-simulator .sim-payment-period:focus-visible { outline-offset: -3px; }
/* Codex追加：選択状態は文字と時間軸の下線で示し、グラフの色面を分断しない */
.cdx-simulator .sim-payment-period[aria-pressed="true"] :is(.sim-payment-value, .sim-payment-period-label) { color: var(--sim-accent); }
.cdx-simulator .sim-payment-graph { position: relative; display: block; flex: 0 0 200px; width: 100%; height: 200px; }
/* Codex追加：合計の輪郭を隣の区間まで垂直につなぎ、値上がり・値下がりの境界を示す */
.cdx-simulator .sim-payment-graph::before,
.cdx-simulator .sim-payment-graph::after { content: ""; position: absolute; z-index: 1; background: var(--sim-accent); pointer-events: none; }
.cdx-simulator .sim-payment-graph::before { left: 0; right: 0; bottom: var(--sim-bar-height); height: 2px; }
.cdx-simulator .sim-payment-graph::after { left: 0; bottom: min(var(--sim-bar-height), var(--sim-previous-bar-height)); width: 2px; height: calc(max(var(--sim-bar-height), var(--sim-previous-bar-height)) - min(var(--sim-bar-height), var(--sim-previous-bar-height))); }
.cdx-simulator .sim-payment-value { position: absolute; right: 6px; bottom: calc(var(--sim-bar-height) + 10px); left: 6px; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 1px 3px; font-size: 20px; font-weight: 650; line-height: 1.25; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.cdx-simulator .sim-payment-value > small { flex-basis: 100%; font-size: 10px; font-weight: 400; letter-spacing: normal; white-space: nowrap; }
.cdx-simulator .sim-payment-stack { position: absolute; bottom: 0; left: 0; display: flex; flex-direction: column; width: 100%; height: var(--sim-bar-height, 0px); overflow: hidden; border-radius: 0; }
.cdx-simulator .sim-payment-device { flex: 0 0 var(--sim-device-share, 0%); }
.cdx-simulator .sim-payment-service { flex: 1 1 auto; }
.cdx-simulator .sim-payment-care { flex: 0 0 var(--sim-care-share, 0%); }
.cdx-simulator .sim-payment-period-label { position: relative; display: flex; justify-content: center; align-items: center; min-height: 42px; margin: 0; padding: 10px 6px 8px; border-top: 1px solid var(--sim-line); font-size: 12px; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.cdx-simulator .sim-payment-period-label::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: transparent; }
.cdx-simulator .sim-payment-period[aria-pressed="true"] .sim-payment-period-label::after { background: var(--sim-accent); }
.cdx-simulator .sim-payment-count { min-height: 1.5em; padding: 0 6px; color: var(--sim-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
/* Codex修正：返却イベントは時間軸の下へ注記し、独立したカードの装飾を付けない */
.cdx-simulator .sim-payment-return { display: block; margin-top: 8px; padding: 0 6px; color: var(--sim-accent); font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.cdx-simulator .sim-monthly-detail { display: grid; gap: 16px; min-width: 0; padding-top: 20px; border-top: 1px solid var(--sim-line); }
.cdx-simulator .sim-monthly-detail-heading > span { color: var(--sim-muted); font-size: 12px; line-height: 1.5; }
/* Codex修正：B案の旧2列レイアウトでも、推移の直下に同じ月額の明細を保つ */
.cdx-simulator[data-design="b"] :is(.sim-result, .sim-sheet-body) > .sim-result-content:has(.sim-payment-timeline) { display: flex; flex-direction: column; gap: 24px; }
@container sim-payment (max-width: 380px) {
  .cdx-simulator .sim-payment-value { font-size: 18px; }
  .cdx-simulator .sim-payment-period-label { font-size: 11px; }
}
@media (hover: hover) {
  .cdx-simulator .sim-payment-period[aria-pressed="false"]:hover .sim-payment-period-label { color: var(--sim-accent); text-decoration: underline; text-underline-offset: 4px; }
}
/* Codex修正：未選択にも明確な白い面と枠を付け、選択できる期間を同じ大きさで並べる */
.cdx-simulator .sim-summary-period-picker { display: grid; gap: 8px; width: 100%; }
:is(#entry, body) .cdx-simulator .sim-summary-period-picker > p { color: var(--sim-muted); font-size: 12px; }
.cdx-simulator .sim-summary-periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); gap: 8px; }
.cdx-simulator .sim-summary-periods > button { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; text-align: left; }
.cdx-simulator .sim-summary-periods button[data-summary-period] > .sim-choice__body { min-height: 48px; padding: 12px 38px 12px 12px; border-radius: 10px; }
.cdx-simulator .sim-summary-periods button[aria-pressed="false"] > .sim-choice__body { border-color: var(--sim-control-line); background: var(--sim-paper); }
.cdx-simulator .sim-summary-periods button[data-summary-period] .sim-choice__title { font-size: 12px; }
.cdx-simulator .sim-cost-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); padding-block: 4px; }
.cdx-simulator .sim-cost-categories > div { min-width: 0; padding: 4px 12px; border-left: 1px solid var(--sim-line); }
.cdx-simulator .sim-cost-categories > div:first-child { border-left: 0; padding-left: 0; }
:is(#entry, body) .cdx-simulator .sim-cost-categories dt { color: var(--sim-muted); font-size: 12px; font-weight: 400; }
:is(#entry, body) .cdx-simulator .sim-cost-categories dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; margin-top: 6px; font-size: 21px; font-weight: 650; line-height: 1.4; font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-cost-categories dd > small { color: var(--sim-muted); font-size: 10px; font-weight: 400; white-space: nowrap; }
.cdx-simulator .sim-one-time h4 > small { margin-left: 5px; color: var(--sim-muted); font-size: 11px; font-weight: 400; }
.cdx-simulator .sim-remaining-device { padding-top: 18px; border-top: 1px solid var(--sim-line); }
.cdx-simulator .sim-trade-in-result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border: 1px solid var(--sim-line); border-radius: 16px; }
:is(#entry, body) .cdx-simulator .sim-trade-in-result h4 { font-size: 13px; font-weight: 650; }
:is(#entry, body) .cdx-simulator .sim-trade-in-result p { margin-top: 5px; font-size: 13px; }
.cdx-simulator .sim-trade-in-result > div > span { color: var(--sim-muted); font-size: 11px; }
.cdx-simulator .sim-trade-in-result > strong { color: var(--sim-positive); font-size: 26px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdx-simulator .sim-trade-in-result strong > small { margin-left: 4px; font-size: 11px; font-weight: 400; }
.cdx-simulator .sim-result-details { display: grid; }
.cdx-simulator .sim-result-details > .sim-detail { margin-top: 0; }
.cdx-simulator .sim-result-details > .sim-detail > summary { font-size: 13px; }
:is(#entry, body) .cdx-simulator .sim-result-details > .sim-detail > :not(summary) { margin-bottom: 14px; }
.cdx-simulator .sim-result-conditions { display: grid; gap: 10px; }

.cdx-simulator .sim-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 18px;
  border: 1px solid var(--sim-accent);
  border-radius: 24px;
  background: var(--sim-accent);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
  text-align: center;
  box-shadow: none;
}
.cdx-simulator .sim-button--secondary { background: transparent; color: var(--sim-accent); }
.cdx-simulator .sim-button:active,
.cdx-simulator .sim-icon-button:active { transform: translateY(1px); }
:is(#entry, body) .cdx-simulator .sim-result-note { color: var(--sim-muted); font-size: 12px; line-height: 1.8; }
.cdx-simulator .sim-page-footer { display: grid; gap: 12px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--sim-line); }
:is(#entry, body) .cdx-simulator .sim-page-footer > p { max-width: 700px; color: var(--sim-muted); font-size: 12px; line-height: 1.8; }

/* Codex追加：可視インスタンスだけが持つ下部サマリーとネイティブ詳細シート */
.cdx-simulator .sim-mobile-bar { display: none; }
.cdx-simulator.is-active[data-wide="false"][data-visible="true"] .sim-mobile-bar {
  position: fixed;
  z-index: 10001;
  inset: auto 10px 10px;
  display: flex;
  /* Codex修正：大きい金額と購入ボタンが収まらない場合は、単位ではなく操作列を折り返す */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--sim-line);
  border-radius: 22px;
  background: #fff;
  color: var(--sim-ink);
  box-shadow: 0 6px 28px rgb(27 63 72 / 15%);
}
.cdx-simulator[data-wide="false"] .sim-app { padding-bottom: calc(var(--sim-bar-height) + 30px); }
.cdx-simulator .sim-mobile-price { display: grid; flex: 0 0 auto; gap: 2px; min-width: 0; max-width: 100%; }
.cdx-simulator .sim-mobile-price > span { font-size: 11px; line-height: 1.5; }
.cdx-simulator .sim-mobile-price > small { color: var(--sim-muted); font-size: 10px; line-height: 1.5; }
.cdx-simulator .sim-mobile-price > strong { color: var(--sim-accent); font-size: 29px; font-weight: 800; line-height: 1.25; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cdx-simulator .sim-mobile-price strong small { font-size: 14px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.cdx-simulator .sim-mobile-bar .sim-button { flex: 0 0 auto; min-height: 46px; padding: 10px 16px; }
/* Codex追加：購入を主導線とし、料金内訳は金額の下に小さなテキスト操作として残す */
.cdx-simulator .sim-mobile-details { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--sim-accent); font-size: 11px; line-height: 1.6; cursor: pointer; }
.cdx-simulator a.sim-purchase-link { color: #fff; text-decoration: none; }
/* Codex修正：左端の小さなアイコンにまとめ、下部の操作バーがある時はその上へ退避する。 */
.cdx-simulator .sim-hand-control { position: fixed; inset: auto auto max(var(--sim-hand-bottom, 12px), env(safe-area-inset-bottom)) env(safe-area-inset-left, 0px); width: max-content; max-width: calc(100vw - 12px); margin: 0; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--sim-ink); }
.cdx-simulator .sim-hand-control::backdrop { background: transparent; pointer-events: none; }
/* Codex追加：表示切替を左手モードの直上へ並べ、popoverが閉じている時は標準の非表示を保つ。 */
.cdx-simulator .sim-hand-control:popover-open { display: flex; flex-direction: column; gap: 8px; }
.cdx-simulator .sim-hand-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 44px; padding: 5px; border: 1px solid var(--sim-line); border-radius: 0 22px 22px 0; background: #fff; color: var(--sim-ink); box-shadow: 0 2px 8px rgb(20 30 40 / 14%); font: inherit; line-height: 1; cursor: pointer; }
.cdx-simulator .sim-hand-toggle svg { flex: 0 0 auto; width: 24px; height: 24px; }
.cdx-simulator .sim-hand-toggle[aria-pressed="true"] { border-color: #111; background: #111; color: #fff; }
.cdx-simulator .sim-hand-toggle:focus-visible { outline: 2px solid var(--sim-focus); outline-offset: 3px; }
@media (min-width: 760px) { .cdx-simulator .sim-hand-control [data-hand-toggle] { display: none; } }
@media print { .cdx-simulator .sim-hand-control { display: none !important; } }
/* Codex追加：スマホの操作位置だけを左右交換し、文章・表・矢印の意味は保つ。 */
@media (max-width: 759px) {
  .cdx-simulator[data-hand][data-design] .sim-c-dialog-header { justify-content: space-between; }
  .cdx-simulator[data-hand="left"] :is(.sim-c-dialog-header, .sim-comparison-header, .sim-sheet-heading, .sim-mobile-bar) { flex-direction: row-reverse; }
  .cdx-simulator[data-hand="left"][data-design] .sim-c-dialog-header .sim-close-button { margin-left: 0; margin-right: auto; }
  .cdx-simulator[data-hand="left"][data-design] .sim-c-footer { flex-direction: row-reverse; }
  .cdx-simulator[data-hand="left"][data-design] .sim-c-actions { flex-direction: row-reverse; margin-left: 0; margin-right: auto; }
  .cdx-simulator[data-hand="left"] .sim-comparison-footer { flex-direction: row-reverse; }
  /* Codex追加：ログイン時のコピー操作は次の行に置き、左手切替・見出し・閉じるを画面内に収める。 */
  .cdx-simulator[data-hand] .sim-comparison-header { flex-wrap: wrap; gap: 8px; }
  .cdx-simulator[data-hand] .sim-comparison-copy-actions { order: 3; flex: 1 0 100%; margin-left: 0; }
  .cdx-simulator[data-hand="right"] .sim-comparison-copy-actions { text-align: right; }
}
/* Codex追加：トップの注文・比較は実際に横並びになる幅だけ左右を交換する。 */
@container simulator (min-width: 600px) {
  @media (max-width: 759px) {
    .cdx-simulator[data-hand="left"][data-design] .sim-c-menu-actions > :first-child { order: 1; }
  }
}
.cdx-simulator .sim-purchase-tracking { position: absolute; width: 1px; height: 1px; }
.cdx-simulator .sim-sheet {
  position: fixed;
  inset: auto 0 0;
  width: min(100%, 600px);
  max-width: 100%;
  max-height: 85vh;
  max-height: 85dvh;
  margin: 0 auto;
  padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: var(--sim-ink);
  box-shadow: 0 -4px 24px rgb(0 0 0 / 14%);
}
.cdx-simulator .sim-sheet:not([open]) { display: none; }
.cdx-simulator .sim-sheet[open] { animation: sim-sheet-enter 180ms ease-out; }
.cdx-simulator .sim-sheet::backdrop { background: rgb(0 0 0 / 40%); }
.cdx-simulator .sim-sheet-heading { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; background: #fff; }
/* Codex修正：キャリア見出しの非表示後も、閉じるボタンを右端に保つ */
.cdx-simulator .sim-carrier-dialog .sim-sheet-heading { justify-content: flex-end; }
:is(#entry, body) .cdx-simulator .sim-sheet-heading h3 { font-size: 21px; font-weight: 750; line-height: 1.5; }
.cdx-simulator .sim-sheet-body { display: flex; flex-direction: column; gap: 20px; }
.cdx-simulator .sim-sheet-body .sim-result-header { display: none; }
.cdx-simulator .sim-sheet-body .sim-result { border: 0; padding: 0; background: #fff; box-shadow: none; }
/* Codex修正：総額・入力項目の説明は共通の「？」につながる吹き出しにし、背景を覆わない。 */
.cdx-simulator .sim-help-popover { position: fixed; inset: auto; width: min(360px, calc(100vw - 24px)); max-width: none; margin: 0; padding: 0; overflow: visible; border: 1px solid var(--sim-line); border-radius: 14px; background: #fff; color: var(--sim-ink); box-shadow: 0 6px 28px rgb(25 45 55 / 18%); }
.cdx-simulator .sim-help-popover::backdrop { background: transparent; pointer-events: none; }
.cdx-simulator .sim-help-popover::before { content: ""; position: absolute; left: var(--sim-help-arrow-left); top: -6px; width: 11px; height: 11px; border-top: 1px solid var(--sim-line); border-left: 1px solid var(--sim-line); background: #fff; transform: translateX(-50%) rotate(45deg); }
.cdx-simulator .sim-help-popover[data-placement="above"]::before { top: auto; bottom: -6px; transform: translateX(-50%) rotate(225deg); }
.cdx-simulator .sim-help-body { display: grid; gap: 12px; max-height: var(--sim-help-max-height, calc(100dvh - 48px)); padding: 16px 18px; overflow-y: auto; overscroll-behavior: contain; }
:is(#entry, body) .cdx-simulator .sim-help-body > p { font-size: 12px; line-height: 1.8; }
@media print { .cdx-simulator .sim-help-popover { display: none !important; } }
.cdx-simulator .sim-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Codex追加：画面幅ではなく記事内の実幅で段組みを変更 */
@container simulator (min-width: 600px) {
  .cdx-simulator .sim-app { padding: 24px 24px 28px; }
  .cdx-simulator .sim-header { padding-bottom: 24px; }
  .cdx-simulator .sim-carriers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cdx-simulator .sim-carrier-section { grid-template-columns: minmax(0, 1fr); padding-bottom: 28px; }
  .cdx-simulator .sim-carrier-trigger { max-width: 300px; gap: 24px; }
  .cdx-simulator .sim-carrier-name { font-size: 20px; }
  .cdx-simulator .sim-choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cdx-simulator .sim-choice__body { padding: 16px 40px 16px 18px; }
  .cdx-simulator .sim-choice--carrier .sim-choice__body { padding-left: 30px; }
  .cdx-simulator .sim-choice__title { font-size: 15px; }
  .cdx-simulator .sim-device-stage { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 16px; padding: 28px; border-radius: 32px; }
  .cdx-simulator .sim-device-copy { padding-bottom: 16px; text-align: left; }
  .cdx-simulator .sim-device-art { grid-column: 2; grid-row: 1 / 3; height: 380px; }
  .cdx-simulator .sim-device-navigation { grid-column: 1; align-self: end; justify-content: flex-start; gap: 14px; }
  :is(#entry, body) .cdx-simulator .sim-model-name { font-size: 48px; }
  .cdx-simulator .sim-section--plan { padding: 32px 24px; }
  .cdx-simulator .sim-result { padding: 28px; }
  .cdx-simulator .sim-mobile-bar { max-width: 580px; margin-inline: auto; }
}

@container simulator (min-width: 960px) {
  .cdx-simulator .sim-app { padding: 28px 32px 32px; }
  .cdx-simulator .sim-carriers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cdx-simulator .sim-layout { grid-template-columns: minmax(0, 1fr) 336px; gap: 32px; }
  .cdx-simulator .sim-result-aside { margin-top: 0; }
  .cdx-simulator .sim-result-aside.is-sticky { position: sticky; top: var(--sim-sticky-top); }
  .cdx-simulator .sim-result { padding: 24px 18px; }
  .cdx-simulator .sim-section { gap: 28px; }
  /* Codex修正：結果を横へ置く幅では、商品欄を縦組みに戻して画像と機種名を窮屈にしない */
  .cdx-simulator .sim-device-stage { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cdx-simulator .sim-device-art { grid-column: 1; grid-row: auto; }
  .cdx-simulator .sim-device-copy { padding-bottom: 0; text-align: center; }
  .cdx-simulator .sim-device-navigation { justify-content: center; gap: 22px; }
  .cdx-simulator .sim-price-number strong { font-size: 48px; }
}

@container simulator (min-width: 480px) {
  .cdx-simulator [data-slot="duration"] .sim-choice-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cdx-simulator [data-slot="duration"] .sim-choice__body { padding: 12px 36px 12px 10px; }
  .cdx-simulator [data-slot="duration"] .sim-choice__title { font-size: 13px; }
}

@container simulator (max-width: 359px) {
  .cdx-simulator .sim-carrier-section { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cdx-simulator .sim-carrier-trigger { gap: 10px; }
  .cdx-simulator .sim-carrier-name { font-size: 18px; }
  .cdx-simulator .sim-carrier-change { gap: 3px; font-size: 11px; }
  .cdx-simulator .sim-choice-grid:not(.sim-carriers) { grid-template-columns: minmax(0, 1fr); }
  .cdx-simulator .sim-choice--carrier .sim-choice__title { font-size: 13px; }
  .cdx-simulator .sim-device-picker { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cdx-simulator .sim-section--plan { padding-inline: 14px; }
  .cdx-simulator .sim-return-stops { gap: 5px; }
  .cdx-simulator .sim-return-stop { font-size: 12px; }
  .cdx-simulator .sim-result { padding-inline: 14px; }
  .cdx-simulator .sim-price-number strong { font-size: 40px; }
}

@media (hover: hover) {
  .cdx-simulator .sim-carrier-trigger:hover .sim-carrier-change { color: var(--sim-ink); text-decoration: underline; }
  .cdx-simulator .sim-carrier-option:hover { background: #f6f6f6; }
  .cdx-simulator .sim-choice:hover > input:not(:disabled):not(:checked) + .sim-choice__body { border-color: var(--sim-control-line); background: #edf2f2; }
  .cdx-simulator .sim-icon-button:hover { background: var(--sim-accent-soft); border-color: var(--sim-accent); }
  .cdx-simulator .sim-icon-button.sim-close-button:hover { border-color: transparent; background: #dfe4e8; color: var(--sim-ink); }
  .cdx-simulator .sim-button:hover { background: #004c5d; color: #fff; }
  .cdx-simulator .sim-button--secondary:hover { background: var(--sim-accent-soft); color: var(--sim-accent); }
  .cdx-simulator .sim-period:hover { background: #f0f7f9; }
}

/* Codex追加：選択ダイアログは記事幅から独立し、広い画面では中央に表示 */
@media (min-width: 560px) {
  .cdx-simulator .sim-sheet.sim-carrier-dialog { inset: 0; width: min(calc(100% - 48px), 680px); max-height: min(85dvh, 740px); margin: auto; padding-inline: 28px; border-radius: 24px; }
  .cdx-simulator .sim-carrier-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}

@keyframes sim-row-update { from { background: #e8f6fa; } to { background: transparent; } }
@keyframes sim-sheet-enter { from { opacity: .6; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .cdx-simulator *, .cdx-simulator *::before, .cdx-simulator *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .cdx-simulator { max-width: none; border-color: #bbb; }
  .cdx-simulator .sim-mobile-bar, .cdx-simulator .sim-sheet { display: none !important; }
  .cdx-simulator .sim-app { padding-bottom: 24px !important; }
  .cdx-simulator .sim-result-aside { position: static !important; }
}

/* Codex修正：確認日時とGoogle登録導線を整え、Googleの案内エリアは背景・枠線なしで表示する。 */
.cdx-simulator .sim-page-footer .sim-data-verified { font-size: 12px; font-variant-numeric: tabular-nums; }
.cdx-simulator .sim-footer-follow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px; border: 0; background: none; }
:is(#entry, body) .cdx-simulator .sim-footer-follow h3 { margin: 0 0 6px; padding: 0; border: 0; background: none; color: var(--sim-ink); font-size: 16px; font-weight: 650; line-height: 1.6; }
:is(#entry, body) .cdx-simulator .sim-footer-follow p { margin: 0; color: var(--sim-muted); font-size: 13px; line-height: 1.8; }
/* Codex修正：料金シミュレーター内のGoogle登録ボタンは枠線を黒で固定する。 */
.cdx-simulator .sim-footer-follow .sim-google-source-button { flex-shrink: 0; margin: 0; min-height: 46px; border-color: #111; }
@media (max-width: 640px) { .cdx-simulator .sim-footer-follow { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; } .cdx-simulator .sim-footer-follow .sim-google-source-button { align-self: center; } }