/* Codex修正：B — 製品ギャラリー、購入設定、料金の順に進むストア型デザイン。
   AのCSSには触れず、Bのインスタンスにのみ適用する。 */
.cdx-simulator[data-design="b"] {
  --sim-paper: #fff;
  --sim-surface: #f5f5f7;
  --sim-ink: #1d1d1f;
  --sim-muted: #86868b;
  --sim-line: #d2d2d7;
  --sim-control-line: #86868b;
  --sim-accent: #0071e3;
  --sim-accent-soft: #f5f5f7;
  --sim-positive: #006638;
  --sim-focus: #0071e3;
  max-width: 1440px;
  margin-block: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.cdx-simulator[data-design="b"] .sim-app { padding: 32px 16px calc(var(--sim-bar-height) + 40px); }

/* Codex追加：選択中の製品名を主見出しにし、価格とキャリアをひとつの導入へまとめる */
.cdx-simulator[data-design="b"] .sim-header { gap: 24px; padding: 0 0 36px; }
.cdx-simulator[data-design="b"] .sim-b-heading { min-width: 0; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-title { font-size: 36px; font-weight: 650; line-height: 1.14; letter-spacing: -.035em; overflow-wrap: normal; }
.cdx-simulator[data-design="b"] .sim-title > span { display: block; color: var(--sim-ink); }
.cdx-simulator[data-design="b"] .sim-title > .sim-b-title-caption { margin-top: 6px; color: var(--sim-muted); font-size: 26px; letter-spacing: -.03em; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-b-device-price { margin-top: 18px; font-size: 12px; color: #6e6e73; }
.cdx-simulator[data-design="b"] .sim-carrier-section { flex: 0 0 auto; padding: 0; border: 0; }
.cdx-simulator[data-design="b"] .sim-carrier-trigger { min-height: 44px; min-width: 220px; max-width: none; padding: 12px 18px; border: 0; border-radius: 24px; background: #f5f5f7; gap: 28px; }
.cdx-simulator[data-design="b"] .sim-carrier-name { font-size: 14px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-carrier-current { gap: 8px; }
.cdx-simulator[data-design="b"] .sim-carrier-current::before { flex-basis: 7px; height: 7px; }
.cdx-simulator[data-design="b"] .sim-carrier-change { color: var(--sim-accent); font-size: 12px; }
.cdx-simulator[data-design="b"] .sim-carrier-option { min-height: 72px; padding-inline: 16px; border-radius: 12px; }
.cdx-simulator[data-design="b"] .sim-carrier-option-name { font-size: 22px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-carrier-option[aria-pressed="true"] { background: #f5f5f7; }

/* Codex追加：写真は固定高の大きいキャンバスへ。機種名の重複を省き、操作は写真内の下辺へ置く */
.cdx-simulator[data-design="b"] .sim-layout { display: block; }
.cdx-simulator[data-design="b"] .sim-b-configurator { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.cdx-simulator[data-design="b"] .sim-b-showcase,
.cdx-simulator[data-design="b"] .sim-b-selection { min-width: 0; }
.cdx-simulator[data-design="b"] .sim-device-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; border-radius: 18px; background: #f5f5f7; }
.cdx-simulator[data-design="b"] .sim-device-copy { display: none; }
.cdx-simulator[data-design="b"] .sim-device-art { grid-column: 1; grid-row: 1; height: 390px; border-radius: 18px; background: transparent; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-device-image { inset: 0; width: 100%; height: 100%; padding: 28px 12px 74px; object-fit: contain; opacity: 1; mix-blend-mode: normal; }
.cdx-simulator[data-design="b"] .sim-device-navigation { position: absolute; inset: auto 20px 20px; display: flex; justify-content: center; gap: 20px; }
.cdx-simulator[data-design="b"] .sim-device-position { min-width: 48px; color: #6e6e73; font-size: 11px; text-align: center; }
.cdx-simulator[data-design="b"] .sim-device-position strong { font-size: 12px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-icon-button:not(.sim-close-button) { width: 36px; height: 36px; border: 0; background: #e8e8ed; color: #6e6e73; }
.cdx-simulator[data-design="b"] .sim-icon-button svg { width: 18px; height: 18px; }

/* Codex追加：モデル・容量だけを写真横で選び、その後の入力は写真の下へ続ける */
.cdx-simulator[data-design="b"] .sim-section--device { gap: 28px; padding: 0; border: 0; }
.cdx-simulator[data-design="b"] .sim-device-picker { position: relative; display: block; }
.cdx-simulator[data-design="b"] .sim-device-picker > label { position: absolute; z-index: 1; top: 14px; left: 17px; color: #6e6e73; font-size: 12px; font-weight: 400; pointer-events: none; }
.cdx-simulator[data-design="b"] .sim-select { min-height: 60px; padding: 16px 38px 16px 16px; border: 1px solid #86868b; border-radius: 12px; background: #fff; font-size: 16px; }
.cdx-simulator[data-design="b"] .sim-device-picker .sim-select { min-height: 80px; padding: 32px 40px 14px 16px; font-size: 19px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-select-label { font-size: 14px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cdx-simulator[data-design="b"] .sim-choice { --sim-choice-color: var(--sim-selection); }
.cdx-simulator[data-design="b"] .sim-choice__body { min-height: 76px; padding: 20px 40px 20px 18px; gap: 5px; border: 1px solid #86868b; border-radius: 12px; background: #fff; box-shadow: none; }
.cdx-simulator[data-design="b"] .sim-choice__title { font-size: 16px; font-weight: 600; line-height: 1.45; letter-spacing: -.015em; }
.cdx-simulator[data-design="b"] .sim-choice__price { font-size: 14px; font-weight: 400; line-height: 1.5; }
.cdx-simulator[data-design="b"] .sim-choice__meta { font-size: 12px; font-weight: 400; color: #6e6e73; line-height: 1.6; }
/* Codex修正：選択枠と右中央のチェックは全入力で引き続きキャリア色に揃える */
.cdx-simulator[data-design="b"] .sim-choice > input:not(:checked) + .sim-choice__body::after { border-color: transparent; background: none; }
.cdx-simulator[data-design="b"] .sim-choice > input:checked + .sim-choice__body { background: #fff; border-color: var(--sim-choice-color); box-shadow: inset 0 0 0 1px var(--sim-choice-color); }
.cdx-simulator[data-design="b"] .sim-choice > input:checked + .sim-choice__body .sim-choice__meta { color: #6e6e73; }
.cdx-simulator[data-design="b"] .sim-choice--carrier .sim-choice__body { padding-left: 18px; }
.cdx-simulator[data-design="b"] .sim-choice--carrier .sim-choice__body::before { content: none; }
.cdx-simulator[data-design="b"] [data-slot="storage"] .sim-choice-grid { grid-template-columns: minmax(0, 1fr); }
.cdx-simulator[data-design="b"] [data-slot="storage"] .sim-choice__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: 88px; column-gap: 12px; }
.cdx-simulator[data-design="b"] [data-slot="storage"] .sim-choice__title { font-size: 18px; }
.cdx-simulator[data-design="b"] [data-slot="storage"] .sim-choice__price { font-size: 12px; text-align: right; white-space: normal; }
.cdx-simulator[data-design="b"] [data-slot="seller"] .sim-choice__body { min-height: 76px; }

/* Codex追加：罫線ではなく、大きい見出しと余白で購入・通信の設定を分ける */
.cdx-simulator[data-design="b"] .sim-inputs { gap: 64px; margin-top: 64px; }
.cdx-simulator[data-design="b"] .sim-inputs > .sim-section { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 0; border: 0; }
.cdx-simulator[data-design="b"] .sim-section--plan { margin-top: 0; border-radius: 0; background: transparent; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-section-heading h3 { font-size: 28px; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; }
.cdx-simulator[data-design="b"] .sim-section-heading h3 > span { display: block; color: var(--sim-muted); }
.cdx-simulator[data-design="b"] .sim-b-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.cdx-simulator[data-design="b"] [data-slot]:empty { display: none; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-fieldset > legend { padding-bottom: 14px; font-size: 17px; font-weight: 600; line-height: 1.45; }
.cdx-simulator[data-design="b"] [data-slot="plan"] .sim-choice-grid,
.cdx-simulator[data-design="b"] [data-slot="return"] .sim-choice-grid { grid-template-columns: minmax(0, 1fr); }
.cdx-simulator[data-design="b"] [data-slot="plan"] .sim-choice__body { min-height: 94px; padding: 22px 42px 22px 20px; gap: 8px; }
.cdx-simulator[data-design="b"] [data-slot="plan"] .sim-choice__title { font-size: 19px; }
.cdx-simulator[data-design="b"] [data-slot="discounts"],
.cdx-simulator[data-design="b"] [data-slot="options"] { gap: 32px; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-check { align-items: center; padding: 20px; border-radius: 12px; background: #f5f5f7; }
.cdx-simulator[data-design="b"] .sim-check__title { font-size: 15px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-check__meta,
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-help { color: #6e6e73; font-size: 12px; line-height: 1.65; }
.cdx-simulator[data-design="b"] .sim-subfields { padding: 16px 0 0; border: 0; }
.cdx-simulator[data-design="b"] .sim-detail > summary { font-size: 14px; font-weight: 500; }

/* Codex追加：料金は独立した淡いグレーの面に置き、要約と詳細の強弱を付ける */
.cdx-simulator[data-design="b"] .sim-result-aside,
.cdx-simulator[data-design="b"] .sim-result-aside.is-sticky { position: static; margin-top: 72px; }
.cdx-simulator[data-design="b"] .sim-result { padding: 32px 20px; border: 0; border-radius: 20px; background: #f5f5f7; box-shadow: none; }
.cdx-simulator[data-design="b"] .sim-result-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cdx-simulator[data-design="b"] .sim-b-summary,
.cdx-simulator[data-design="b"] .sim-b-details { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-result-header h3 { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.cdx-simulator[data-design="b"] .sim-main-price { padding: 0; border-radius: 0; background: none; gap: 8px; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-price-period { color: #6e6e73; font-size: 13px; font-weight: 400; }
.cdx-simulator[data-design="b"] .sim-price-number strong { color: var(--sim-ink); font-size: 56px; font-weight: 600; letter-spacing: -.04em; }
.cdx-simulator[data-design="b"] .sim-price-number > span { font-size: 16px; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-price-note { font-size: 12px; }
.cdx-simulator[data-design="b"] .sim-period { border-radius: 10px; }
.cdx-simulator[data-design="b"] .sim-period[aria-pressed="true"] { background: #fff; border-color: #86868b; }
.cdx-simulator[data-design="b"] .sim-period[aria-pressed="true"]::before { background: var(--sim-ink); box-shadow: 0 0 0 1px var(--sim-ink); }
.cdx-simulator[data-design="b"] .sim-period-amount { font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-total { border-top: 1px solid var(--sim-line); border-bottom: 0; margin-top: 8px; padding: 24px 0 0; }
.cdx-simulator[data-design="b"] .sim-total strong { font-size: 32px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-b-details .sim-detail { margin-top: 0; }
.cdx-simulator[data-design="b"] .sim-button { min-height: 44px; padding: 12px 22px; border-radius: 28px; font-size: 14px; font-weight: 400; }
.cdx-simulator[data-design="b"] .sim-button--secondary { padding-inline: 0; border: 0; background: transparent; color: var(--sim-accent); justify-content: flex-start; }
.cdx-simulator[data-design="b"] .sim-page-footer { margin-top: 32px; padding-top: 24px; }

/* Codex追加：金額バーは薄いガラス面。操作中の製品名と金額を邪魔しない高さに保つ */
.cdx-simulator[data-design="b"].is-active[data-visible="true"] .sim-mobile-bar {
  position: fixed; z-index: 10001; inset: auto 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: none; margin: 0;
  padding: 12px max(20px, calc((100vw - 1200px) / 2)) calc(12px + env(safe-area-inset-bottom, 0px));
  border: 0; border-top: 1px solid rgb(0 0 0 / 12%); border-radius: 0;
  background: rgb(255 255 255 / 88%); backdrop-filter: saturate(180%) blur(20px); box-shadow: none;
}
.cdx-simulator[data-design="b"] .sim-mobile-price { gap: 2px; }
.cdx-simulator[data-design="b"] .sim-mobile-price > span { color: #6e6e73; font-size: 11px; }
.cdx-simulator[data-design="b"] .sim-mobile-price > strong { color: var(--sim-ink); font-size: 25px; font-weight: 600; letter-spacing: -.025em; }
.cdx-simulator[data-design="b"] .sim-mobile-price > small { font-size: 9px; }
.cdx-simulator[data-design="b"] .sim-mobile-bar .sim-button { min-height: 40px; padding: 10px 18px; }
.cdx-simulator[data-design="b"] .sim-sheet { border-radius: 24px 24px 0 0; background: #fff; }
.cdx-simulator[data-design="b"] .sim-sheet-heading { padding-block: 20px; }
:is(#entry, body) .cdx-simulator[data-design="b"] .sim-sheet-heading h3 { font-size: 22px; font-weight: 600; }
.cdx-simulator[data-design="b"] .sim-sheet-body .sim-result-content { display: block; }
.cdx-simulator[data-design="b"] .sim-sheet-body .sim-b-details { margin-top: 28px; }

/* Codex追加：記事幅に応じて、写真と選択欄／見出しと設定本体を別々の比率で組む */
@container simulator (min-width: 600px) {
  .cdx-simulator[data-design="b"] .sim-app { padding: 48px 32px calc(var(--sim-bar-height) + 48px); }
  .cdx-simulator[data-design="b"] .sim-header { padding-bottom: 48px; }
  :is(#entry, body) .cdx-simulator[data-design="b"] .sim-title { font-size: 48px; }
  .cdx-simulator[data-design="b"] .sim-title > .sim-b-title-caption { font-size: 36px; }
  :is(#entry, body) .cdx-simulator[data-design="b"] .sim-b-device-price { font-size: 14px; }
  .cdx-simulator[data-design="b"] .sim-device-art { height: 540px; }
  :is(#entry, body) .cdx-simulator[data-design="b"] .sim-device-image { padding: 40px 36px 86px; }
  .cdx-simulator[data-design="b"] .sim-b-selection .sim-section--device { display: grid; grid-template-columns: 1fr 1fr; }
  .cdx-simulator[data-design="b"] [data-slot="model"] { grid-column: 1 / -1; }
  .cdx-simulator[data-design="b"] .sim-choice-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cdx-simulator[data-design="b"] .sim-result { padding: 48px; }
}
@container simulator (min-width: 960px) {
  .cdx-simulator[data-design="b"] .sim-app { padding: 48px 48px calc(var(--sim-bar-height) + 56px); }
  .cdx-simulator[data-design="b"] .sim-header { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 32px; padding-bottom: 64px; }
  .cdx-simulator[data-design="b"] .sim-carrier-section { padding-top: 10px; }
  .cdx-simulator[data-design="b"] .sim-b-configurator { grid-template-columns: minmax(0, 1fr) 310px; gap: 64px; }
  .cdx-simulator[data-design="b"] .sim-b-showcase.is-sticky { position: sticky; top: var(--sim-sticky-top); }
  .cdx-simulator[data-design="b"] .sim-device-art { height: 560px; }
  .cdx-simulator[data-design="b"] .sim-b-selection { padding-top: 8px; }
  .cdx-simulator[data-design="b"] .sim-b-selection .sim-section--device { display: flex; gap: 28px; }
  .cdx-simulator[data-design="b"] .sim-inputs { margin-top: 104px; gap: 104px; }
  .cdx-simulator[data-design="b"] .sim-inputs > .sim-section { grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 64px; }
  :is(#entry, body) .cdx-simulator[data-design="b"] .sim-section-heading h3 { font-size: 32px; }
  .cdx-simulator[data-design="b"] .sim-b-fields { gap: 36px; }
  .cdx-simulator[data-design="b"] [data-slot="plan"] .sim-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cdx-simulator[data-design="b"] .sim-result-aside { margin-top: 104px; }
  .cdx-simulator[data-design="b"] .sim-result { padding: 64px; }
  .cdx-simulator[data-design="b"] .sim-result > .sim-result-content { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 72px; }
  .cdx-simulator[data-design="b"] .sim-b-details { padding-top: 8px; }
}
@container simulator (min-width: 1280px) {
  .cdx-simulator[data-design="b"] .sim-app { padding-inline: 64px; }
  :is(#entry, body) .cdx-simulator[data-design="b"] .sim-title { font-size: 56px; }
  .cdx-simulator[data-design="b"] .sim-title > .sim-b-title-caption { font-size: 44px; }
  .cdx-simulator[data-design="b"] .sim-b-configurator { grid-template-columns: minmax(0, 1fr) 328px; gap: 80px; }
  .cdx-simulator[data-design="b"] .sim-device-art { height: 600px; }
}
@container simulator (max-width: 359px) {
  .cdx-simulator[data-design="b"] .sim-choice-grid:not(.sim-carriers) { grid-template-columns: minmax(0, 1fr); }
  .cdx-simulator[data-design="b"] .sim-title > .sim-b-title-caption { font-size: 22px; }
  .cdx-simulator[data-design="b"] .sim-result { padding-inline: 16px; }
}
@media (hover: hover) {
  .cdx-simulator[data-design="b"] .sim-choice:hover > input:not(:disabled):not(:checked) + .sim-choice__body { border-color: #1d1d1f; }
  .cdx-simulator[data-design="b"] .sim-icon-button:not(.sim-close-button):hover { background: #dedee3; }
  .cdx-simulator[data-design="b"] .sim-button:hover { background: #0077ed; }
  .cdx-simulator[data-design="b"] .sim-button--secondary:hover { background: transparent; color: var(--sim-accent); text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .cdx-simulator[data-design="b"] * { scroll-behavior: auto !important; }
}
@media print {
  .cdx-simulator[data-design="b"] .sim-b-showcase { position: static !important; }
  .cdx-simulator[data-design="b"].is-active[data-visible="true"] .sim-mobile-bar { display: none !important; }
}