:root {
  /* ブランドカラー */
  --color-main: #00a23f;
  --color-pickup-text: #ff4081;
  --color-au: #eb5505;
  --color-docomo: #cc0033;
  --color-softbank: #828ea4;
  /* テキストカラー */
  --color-text: #212121;
  --color-text-dark: #333;
  --color-text-secondary: #555;
  --color-text-muted: #666;
  --color-link-text: #007daa;
  /* 背景 */
  --color-bg-white: #ffffff;
  --color-bg-card: #fafafa;
  --color-bg-card-head: #f2f2f2;
  --color-bg-card-title: #d9dddf;
  --color-bg-result-title: #dce0e4;
  --color-bg-light: #f5f5f5;
  --color-bg-section: #f8f8f8;
  --backgroundcolor-yellow1: #fafaaf;
  --backgroundcolor-yellow2: #F9E427;
  --backgroundcolor-white: #ffffff;
  --backgroundcolor-closebtn: #888888;
  /* ボーダー */
  --color-border: #e0e0e0;
  --color-border-table: #e4e5e7;
  --color-breadcrumb-separator: #d3d3d3;
  --color-separator: #cccccc;
  --color-error: #ed1e79;
  --bordercolor-line1: #fafaf3;
  --bordercolor-line2: #B2B2B2;
  --bordercolor-table-line: #e2e8ea;
}

html {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック", "Hiragino Sans", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}

.hidden {
  display: none !important;
}

.no-underline {
  text-decoration: none !important;
}

.page-top-directory {
    border-bottom: 1px solid #ccc;
    padding: 10px 10px 10px 20px;
    font-size: 0.8rem;
}

.page-top-directory > ul {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: start;
    gap: 10px;
}

.page-top-directory > ul > li > a {
    text-decoration: none;
    color: #333;   /* パンくずリンクは黒系（common.css a:link の緑を上書き） */
}
.page-top-directory > ul > li:first-child > a {
    color: var(--color-main, #00a23f);   /* 「TOP」のみ緑 */
}

.page-breadcrumb-separator {
    color: var(--color-breadcrumb-separator);
}


.page-title-container {
    width: 100%;
    background-color: #f0f6ec;
    border-bottom: 4px solid var(--color-main);
}

.page-title {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: start;
}

.page-title > span {
    width: 100%;
    padding: 16px 0;
}

.page-title > span > h1 {
    font-size: 2.2rem;
    margin-left: 12px;
    font-style: italic;
}

.page-content-container {
    position: relative;
    width: 100%;
    margin-top: 56px;
    display: flex;
    justify-content: center;
}

.page-content {
    max-width: 1000px;
    width: 100%;
    text-align: left;
}

.page-content-title {
    width: 100%;
    text-align: center;
    padding-bottom: 24px;
}

.page-content-title > h2 {
    font-weight: bold;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.page-content-title > h2 .line1 {
    display: inline-block;
    font-size: 2.2rem;
}

.page-content-title > h2 .line-small {
  font-size: 1.75rem;
}

.page-content-title > h2 .line-small-2 {
  font-size: 2.3rem;
}

.page-content-title > h2 .line-small-3 {
  font-size: 2.2rem;
}

.page-content-title > h2 .line2 {
    display: inline-block;
    font-size: 3rem;
    margin-bottom: 8px;
}

.page-content-title > h2 .line3 {
    display: inline-block;
    font-size: 1.9rem;   /* 「初期費用〜ダウンロード！」を1行に収める(#2)。line2(最短1分)を最大に保つ */
    font-style: italic;
    letter-spacing: -0.05em;
}

.page-content-title > h2 .txt-green {
    color: var(--color-main);
}

.page-content-title > h2 .gradation-text {
  background: linear-gradient(to bottom, var(--color-main) 0%, var(--color-main) 20%, #004319 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-top: 12px;
  padding-right: 6px;
}

.italic {
    font-style: italic;
}

.page-content-title > h2 .num {
    font-size: 4.5rem;
    font-style: italic;
    line-height: 1;
    padding: 0 5px;
}

@media (max-width: 767px) {
    .page-content-title > h2 .line1 {
        font-size: 1.25rem;
        margin-left: 20px;
        margin-right: 20px;
    }
    .page-content-title > h2 .line-small {
      font-size: 1.05rem;
    }
    .page-content-title > h2 .line-small-2 {
      font-size: 1.5rem;
    }
    .page-content-title > h2 .line-small-3 {
      font-size: 1.25rem;
    }
    .page-content-title > h2 .line2 {
        font-size: 2.4rem;
    }
    .page-content-title > h2 .line3 {
        font-size: 1.6rem;
    }
    .page-content-title > h2 .num {
        font-size: 4.2rem;
    }
}


/* PC/SP テキスト出し分けユーティリティ */
.show-sp-only { display: none; }
.show-pc-only { display: inline; }

/* icon */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
  position: relative;
  display: inline-block;
}
.icon.icon-exlink {
  background-image: url(/business/cr-assets/img/ico_ex_green.svg);
  background-size: contain;
  margin-left: 3px;
  margin-right: 2px;
  margin-bottom: 2px;
}

/* 選択リストカード */

.line-card-select {
  padding: 42px 0;
}

.line-card-select__frame {
  position: relative;
  margin: 0 auto;
  padding: 0 0 30px;
  background: var(--color-bg-white);
  border: 1px solid #e3e3e3;
}

.line-card-select__frame > .line-card-select__list,
.line-card-select__frame > .line-card-select__inner-title,
.line-card-select__frame > .line-card-select__note,
.line-card-select__frame > .select-card-other-option-container,
.line-card-select__frame > .line-count-card__body,
.line-card-select__frame > #select-card-device-model-display {
  margin-left: 40px;
  margin-right: 40px;
}

.line-card-select__title {
  width: 100%;
  padding: 15px 20px;
  margin: 0 0 20px;
  background: var(--color-bg-card-title);
  color: var(--color-text-dark);
  font-size: 1.1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 0;
  box-sizing: border-box;
}

.line-card-select__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 設計015840: ボタン幅は2パターン（同じ高さ・幅比3:2）。
   基本選択（ご利用タイプ〜端末の種類）＝3個/行の固定幅。オプション群＝2個/行の固定幅。 */
.line-card-select__item {
  flex: 0 0 calc((100% - 24px) / 3);   /* 3個/行（gap12px×2を差引） */
  min-width: 0;
  max-width: 100%;
}
/* オプション（通話オプション＋チェックボックス群）＝2個/行の固定幅（基本の3:2の幅） */
#select-card-call-option-list > .line-card-select__item,
.line-card-select__checkboxlist > .line-card-select__item {
  flex: 0 0 calc((100% - 12px) / 2);   /* 2個/行（gap12px×1を差引） */
}

.line-card-select__item.disable {
  cursor: auto;
}

.line-card-select__item.disable > button {
  opacity: 0.6;
  cursor: auto;
  background: #eaeaea;
}

.line-card-select__item.grayout > button {
  opacity: 0.6;
  background: #eaeaea;
}

/* 設計015840: 低い1行の箱＝丸(左)＋テキスト(横並び・左寄せ・濃色・通常太さ)。選択中=緑枠+緑丸。 */
.line-card-select__option {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;   /* 選択肢ボタンの高さを少し高く（旧46px） */
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg-card);
  color: #333;
  padding: 8px 14px 8px 40px;   /* 左40px＝ラジオ丸の分 */
  text-align: left;
  font: inherit;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* ラジオ見た目（左・上下中央） */
.line-card-select__option::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-bg-white);
}

.line-card-select__option::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--color-main);
  opacity: 0;
}

.line-card-select__option.is-selected {
  border-color: var(--color-main);
  box-shadow: 0 0 0 1px var(--color-main);
  background: var(--color-bg-white);
}

.line-card-select__option.is-selected::after {
  opacity: 1;
}

.line-card-select__checkboxlist .line-card-select__option::before {
  border-radius: 3px;
}
/* 横並び1行の箱ではテキスト(p)の下マージンを消して上下中央に（設計015840） */
.line-card-select__option .line-card-select__plan,
.line-card-select__option .line-card-select__description { margin: 0; }

/* チェックは枠(::before)と完全に同じ位置・サイズ(18×18・縦中央)に置き、その中央にSVGのチェックを描く。
   ＝枠内中央に必ず収まり、ボタン高さが変わっても位置がずれない（旧: border傾き＋固定top方式はずれた）。 */
.line-card-select__checkboxlist .line-card-select__option::after {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4 10-11' fill='none' stroke='%2300a23f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.line-card-select__option img {
  width: 30px;
  height: 38px;
  margin: 20px auto 15px;
  display: block;
}

.line-card-select__plan,
.line-card-select__description {
  margin: 0 0 5px;
  font-weight: 400;   /* 選択肢ボタンのテキストは太字にしない */
  font-size: 1rem;
}

.line-card-select__plan[data-price-id],
.line-card-select__description[data-price-id],
.line-card-select__plan[is-price],
.line-card-select__description[is-price] {
  font-size: 1rem;
}

/* 価格表記を全角括弧で囲む（設計015840「10分かけ放題（800円/月）」／無料は「（無料）」） */
[data-price-id]::before,
[is-price]::before {
  content: "（";
}
[data-price-id]::after,
[is-price]::after {
  content: "）";
}


[data-price-id] {
  display: none;
}

.text-small {
  font-size: 0.8rem;
  margin-left: 2px;
  font-weight: normal;
}

.line-card-select__carrier {
  display: inline-block;
  margin-right: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8rem;
  line-height: 20px;
  text-align: center;
}

.line-card-select__carrier--au { background: #eb5505; }
.line-card-select__carrier--dcm { background: #cc0033; }
.line-card-select__carrier--sb { background: #828ea4; }

.line-card-select__description--au { color: #eb5505; font-size: 0.8rem !important; }
.line-card-select__description--dcm { color: #cc0033; font-size: 0.8rem !important; }
.line-card-select__description--sb { color: #828ea4; font-size: 0.8rem !important; }

.line-card-select__option:focus-visible {
  outline: 2px solid var(--color-link-text);
  outline-offset: 2px;
}

.line-card-select__inner-title {
    font-size: 1.2rem;
    font-weight: bold;
    border-left: 4px solid var(--color-main);
    padding-left: 10px;
    margin-bottom: 20px;
}

.line-card-select__inner-title--mt {
    margin-top: 36px;
}

/* コースの流用幅(140px=5個/行)は除去。基本の3個/行に統一(#基本ボタン幅) */

/* コース数値は強調しない（設計133427＝緑/大/太字なし・単位と同じ見た目） */
#select-card-course-list > .line-card-select__item > .line-card-select__option > p > strong {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
}

.select-card-is-device-list {
    justify-content: flex-start;   /* 端末の有無も左揃え（他の基本選択と同じグリッド） */
}

.select-card-modal-display-icon {
    position: absolute;
    top: 8px;
    right: 8px;
}

.select-card-modal-display-icon > span {
    width: 24px;
    height: 24px;
    font-size: 1rem;
    line-height: 24px;
    text-align: center;
    color: var(--color-bg-white);
    border-radius: 50%;
    background-color: var(--color-main);
    cursor: pointer;
    display: inline-block;
}

.select-card-other-option-title {
    font-size: 1.2rem;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 10px 20px;
    justify-content: space-between;
    margin-top: 36px;
    cursor: pointer;
}

.select-card-other-option-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #636363;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    position: relative;
    line-height: 1;
    transition: color 0.2s ease;
}

.select-card-other-option-toggle::before,
.select-card-other-option-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.select-card-other-option-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.select-card-other-option-toggle:focus-visible {
    outline: 2px solid var(--color-link-text);
    outline-offset: 2px;
}

.select-card-call-other-option-list {
    margin-top: 40px;
    display: none;
}

.select-card-other-option-container.active .select-card-other-option-toggle::after,
.select-card-other-option-toggle[aria-expanded="true"]::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
}

/* is-device/call-other/usage-type/sim-type の流用幅(0 1 220px)は除去＝2パターン(基本3個/オプション2個)に統一 */
.select-card-usage-type-list,
.select-card-sim-type-list {
    justify-content: flex-start;
}

.select-card-device-model-list {
    justify-content: space-between;
    gap: 14px;
}

.select-card-device-model-list .line-card-select__item {
    flex: 0 1 calc(50% - 7px);
    min-width: calc(50% - 7px);
}


/* ============================================================
   選択中の端末カード（current-device-card）・端末変更ボタン
   ============================================================ */

/* 選択中の端末（設計164438）: ラベル｜端末名＋カラー(1行)｜緑ボタン を横1列に */
#select-card-device-model-container .estimate-field__options {
    display: flex;
    align-items: center;
    gap: 16px;
}
#select-card-device-model-display {
    flex: 1 1 auto;
    min-width: 0;
}

.current-device-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 16px;
    background: var(--color-bg-white);
}

.current-device-card__image {
    flex: 0 0 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.current-device-card__image img {
    width: 150px;
    height: 235px;
    object-fit: contain;
}

.current-device-card__info {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.current-device-card__name {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.6;
}

.current-device-card__meta {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.75;
}

.current-device-card__price {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.75;
}

.current-device-card__price strong {
    font-size: 16px;
    font-weight: bold;
}

.current-device-card__detail {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    color: var(--color-main);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.current-device-card__detail .icon {
    width: 12px;
    height: 12px;
}

.current-device-card__empty {
    margin: 0;
    padding: 12px 0;
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

.device-change-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 24px) / 3);   /* 端末の種類の選択肢（モバイルルーター）と同じ1/3幅 */
    min-height: 54px;                  /* 選択肢ボタンと同じ高さ（右端col3・flex:1のdisplayで右寄せ＝モバイルルーター位置） */
    margin: 0;                 /* 大きな上下余白を除去＝行の高さを抑える（旧12px auto 30px） */
    background: var(--color-main);
    color: var(--color-bg-white);
    font-size: 0.85rem;        /* テキストをもう少し小さく */
    font-weight: 700;
    text-align: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.device-change-btn:hover {
    opacity: 0.8;
}

.line-card-select__note {
    margin: 18px 0 0;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-dark);
    padding-left: 1.2em;
    text-indent: -1.2em;
}

.line-card-select__note a {
    color: var(--color-main);
    font-weight: 700;
    text-decoration: underline;
}

.line-card-select__note a .icon {
    width: 0.8em;
    height: 0.8em;
    margin-left: 3px;
}

.line-count-card__content {
    max-width: 380px;
    margin: 0;                 /* 中央寄せ解除＝左揃え */
}

.line-count-card__field {
    display: flex;
    justify-content: flex-start;   /* 左揃え */
    align-items: center;
    gap: 12px;
}

.line-count-card__input-wrap {
    position: relative;
    width: 220px;
}

.line-count-card__input {
    width: 100%;
    height: 54px;
    border: 1px solid var(--color-breadcrumb-separator);
    border-radius: 2px;
    background: var(--color-bg-white);
    padding: 0 34px 0 12px;
    text-align: right;
    font-size: 1rem;
    line-height: 1;
}

.line-count-card__spin-buttons {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 24px;
    display: flex;
    flex-direction: column;
}

.line-count-card__spin-button {
    position: relative;
    flex: 1;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.line-count-card__spin-button::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform: translate(-50%, -50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.line-count-card__spin-button--up::before {
    border-bottom: 7px solid var(--color-text-secondary);
    top: 60%;
}

.line-count-card__spin-button--down::before {
    border-top: 7px solid var(--color-text-secondary);
    top: 40%;
}

.line-count-card__unit {
    font-size: 1rem;
    color: var(--color-text-dark);
    line-height: 1;
}

.line-count-card__note,
.line-count-card__error {
    margin: 14px 0 0;
    font-size: 0.95rem;
    line-height: 1.4;
    margin-left: 60px;
}

.line-count-card__note {
    color: var(--color-text-secondary);
}

.line-count-card__error {
    display: none;
    color: var(--color-error);
    font-weight: 700;
}

.line-count-card__input.is-error {
    border-color: var(--color-error);
    outline: none;
}

.simulation-result {
    padding: 12px 0 24px;
}

.simulation-result__toggle-wrap {
    margin: 10px 0 36px;
    display: flex;
    justify-content: center;
}

.simulation-result__toggle {
    width: 620px;
    min-height: 80px;
    padding: 18px 70px 18px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--color-main);
    color: var(--color-bg-white);
    font-size: 1.2rem;
    line-height: 1.3;
    text-align: center;
    position: relative;
    cursor: pointer;
}

.simulation-result__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 28px;
    width: 14px;
    height: 14px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    transform: translateY(-50%) rotate(135deg);
}

.simulation-result__panel {
    max-width: 856px;
    margin: 0 auto;
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
}

.simulation-result__panel-title {
    margin: 0;
    padding: 16px 18px;
    font-size: 1.05rem;
    font-weight: normal;
    text-align: center;
    color: var(--color-text-dark);
    background: var(--color-bg-result-title);
    line-height: 1.3;
}

.simulation-result__block {
    border-top: 1px solid var(--color-border);
}

.simulation-result__block + .simulation-result__block {
    margin-top: 40px;
    padding-top: 40px;
}

.simulation-result__price-head {
    padding: 24px 18px 24px;
    display: flex;
    justify-content: center;
}

.simulation-result__price-total {
    display: inline-flex;
    align-items: flex-end;
    gap: 15px;
    padding-bottom: 5px;
    border-bottom: 1px solid #a0a0a0;
}

.simulation-result__price-title {
    margin: 0;
    color: var(--color-text-dark);
    font-size: 1.2rem;
    font-weight: normal;
    line-height: 1.2;
    padding-bottom: 5px;
}

.simulation-result__price-amount {
    margin: 0;
    color: var(--color-text-dark);
    font-size: 1rem;
    line-height: 1.15;
    white-space: nowrap;
}

.simulation-result__price-amount strong {
    font-size: 2.4rem;
    font-weight: 500;
    margin-right: 4px;
}

.simulation-result__table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    border: 1px solid var(--color-border-table);
}

.simulation-result__table-wrap {
    padding: 0 24px;
    overflow-x: auto;
}

.simulation-result__table th,
.simulation-result__table td {
    padding: 16px 14px;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    line-height: 1.4;
    border-right: 1px solid var(--color-border-table);
}

.simulation-result__table th:first-child,
.simulation-result__table td:first-child {
    padding-left: 24px;
}

.simulation-result__table th:last-child,
.simulation-result__table td:last-child {
    border-right: 0;
    padding-right: 24px;
}

.simulation-result__table thead th {
    background: var(--color-bg-light);
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid var(--color-border);
}

.simulation-result__table tbody td {
    border-bottom: 1px solid var(--color-border);
}

.simulation-result__table tbody td:nth-child(2),
.simulation-result__table thead th:nth-child(2) {
    width: 11%;
    text-align: center;
}

.simulation-result__table tbody td:nth-child(3),
.simulation-result__table tbody td:nth-child(4),
.simulation-result__table thead th:nth-child(3),
.simulation-result__table thead th:nth-child(4) {
    width: 19%;
    text-align: right;
    white-space: nowrap;
}

.simulation-result__subtotal {
    padding: 24px 0 0px;
    margin: 0 24px 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 48px;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    line-height: 1.4;
}

.simulation-result__subtotal--container {
  display: inline-block;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  padding-left: 4px;
  padding-right: 4px;
}

.simulation-result__subtotal span {
    font-weight: normal;
}

.simulation-result__subtotal strong {
    font-size: 1.4rem;
    font-weight: 500;
    margin-right: 2px;
}

.pc-only {
  display: inline-block;
}

.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: block;
  }

  .pc-only {
    display: none;
  }

  .simulation-result__table-wrap {
    padding: 0;
    overflow-x: auto;
  }

  .line-card-select__frame {
    padding: 0 0 20px;
    margin-right: 20px;
    margin-left: 20px;
  }

  .line-card-select {
    padding: 20px 0;
  }

  .line-card-select__frame > .line-card-select__list,
  .line-card-select__frame > .line-card-select__inner-title,
  .line-card-select__frame > .line-card-select__note,
  .line-card-select__frame > .select-card-other-option-container,
  .line-card-select__frame > .line-count-card__body,
  .line-card-select__frame > #select-card-device-model-display {
    margin-left: 20px;
    margin-right: 20px;
  }

  .line-card-select__frame > .device-change-btn {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  #select-card-device-type-list {
    justify-content: flex-start;
  }

  .line-card-select__title {
    width: 100%;
    height: auto;
    font-size: 1rem;
    padding: 10px 15px;
    margin-bottom: 15px;
  }

  .line-card-select__list {
    gap: 8px;
  }

  /* SP: 選択肢は estimate 設計の"低い左ラジオ行"に統一（設計7-1/7-2）。
     旧実装は simulator 名残で height固定80/102/108/140px＋利用タイプ中央カード、
     左pad4pxが印(左12〜30px)と重なり短文が巨大空箱になっていた（B-1/B-2/B-3の是正）。
     基底 .line-card-select__option（min-height:54px・flex中央・左pad40px・印top:50%自動中央）に戻す。 */
  .line-card-select__option,
  .select-card-usage-type-list .line-card-select__option,
  .select-card-carrier-list .line-card-select__option,
  #select-card-call-option-list .line-card-select__option,
  #select-card-option-service-list .line-card-select__option,
  .select-card-call-other-option-list .line-card-select__option {
    min-height: 54px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 12px 8px 40px;
  }

  /* SP/PCテキスト出し分けユーティリティ */
  .show-pc-only { display: none; }
  .show-sp-only { display: inline; }

  .line-card-select__option img {
    width: 18px;
    height: 24px;
    margin: 5px auto;
  }

  .line-card-select__plan {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .line-card-select__description {
    font-size: 1rem;
    margin-top: 1rem;
  }

  .line-card-select__item {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }

  /* SP: SIM種別は2列（PC版220px固定を継承させずフル幅50%）。※ご利用タイプは設計で1列＝下の1列群へ移動。 */
  .select-card-sim-type-list .line-card-select__item {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }

  /* SP列数を設計7-1/7-2に合わせる: ご利用タイプ/プラン/端末の種類/通話オプション/オプション各群＝1列全幅、端末の有無/SIM種別/コース＝2列。 */
  .select-card-usage-type-list .line-card-select__item,
  .select-card-carrier-list .line-card-select__item,
  .select-card-device-type-list .line-card-select__item,
  #select-card-call-option-list .line-card-select__item,
  .line-card-select__checkboxlist .line-card-select__item {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .select-card-is-device-list .line-card-select__item {
    flex: 0 0 calc(50% - 4px);
    min-width: calc(50% - 4px);
  }

  .select-card-device-model-list .line-card-select__item {
    flex: 1 1 100%;
    min-width: 100%;
  }

  .device-select-card.line-card-select__option {
    min-height: 0;
    height: 100%;
    padding: 0;
  }

  .device-select-card__head {
    padding: 12px 10px 8px 40px;
  }

  .device-select-card__name {
    font-size: 0.8rem;
  }

  .device-select-card__brand {
    font-size: 0.7rem;
  }

  .device-select-card__image {
    min-height: 170px;
  }

  .device-select-card__image img {
    width: 178px;
    height: 160px;
    margin: 0;
  }

  .device-select-card__foot {
    padding: 12px;
  }

  .device-select-card__price {
    font-size: 0.85rem;
  }

  .device-select-card__price strong {
    font-size: 1.5rem;
  }

  .device-select-card__detail {
    font-size: 0.8rem;
  }

  /* 選択中の端末カード SP */
  .current-device-card {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .current-device-card__image {
    flex: none;
    width: 100%;
  }

  .current-device-card__info {
    width: 100%;
  }

  .line-card-select__note {
    margin-top: 14px;
    font-size: 0.8rem;
  }

  .line-count-card__body {
    padding: 0 14px 24px;   /* ラベルと入力欄の縦の隙間を詰める（旧 top 32px が空きすぎ。ラベル〜入力の間隔は estimate-field の gap 10px で確保） */
  }

  .line-count-card__content {
    max-width: 100%;
  }

  .line-count-card__input-wrap {
    width: 100%;
  }

  .line-count-card__input {
    height: 48px;
    font-size: 1.4rem;
  }

  .line-count-card__unit {
    font-size: 1.5rem;
    width: 64px;
  }

  .line-count-card__note,
  .line-count-card__error {
    margin-top: 10px;
    font-size: 0.82rem;
    margin-left: 0px;
  }

  .simulation-result {
    padding: 8px 20px 12px;
  }

  .simulation-result__toggle-wrap {
    margin: 0 0 24px;
  }

  .simulation-result__toggle {
    min-height: 56px;
    padding: 14px 52px 14px 12px;
    font-size: 16px;
  }

  .simulation-result__toggle::after {
    right: 18px;
    width: 11px;
    height: 11px;
    border-top-width: 2px;
    border-right-width: 2px;
  }

  .simulation-result__panel-title {
    padding: 16px 12px;
    font-size: 1.2rem;
  }

  .simulation-result__block + .simulation-result__block {
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid var(--color-border);
  }

  .simulation-result__price-head {
    padding: 30px 12px 24px;
  }

  .simulation-result__price-total {
    padding-bottom: 5px;
  }

  .simulation-result__price-title {
    font-size: 1.2rem;
    padding-bottom: 5px;
    font-weight: bold;
  }

  .simulation-result__price-amount {
    font-size: 1.2rem;
    line-height: 1.15;
  }

  .simulation-result__price-amount strong {
    font-size: 2.4rem;
  }

  .simulation-result__table {
    width: 100%;
    min-width: 500px;
  }

  .simulation-result__table-wrap {
    padding: 0 12px;
    overflow-x: auto;
  }

  .simulation-result__table th,
  .simulation-result__table td {
    padding: 10px 8px;
    font-size: 1rem;
  }

  .simulation-result__table th:first-child,
  .simulation-result__table td:first-child {
    padding-left: 12px;
  }

  .simulation-result__table th:last-child,
  .simulation-result__table td:last-child {
    padding-right: 12px;
    border-right: 0;
  }

  .simulation-result__table thead th:nth-child(2),
  .simulation-result__table tbody td:nth-child(2) {
    width: 14%;
  }

  .simulation-result__table thead th:nth-child(3),
  .simulation-result__table thead th:nth-child(4),
  .simulation-result__table tbody td:nth-child(3),
  .simulation-result__table tbody td:nth-child(4) {
    width: 24%;
  }

  .simulation-result__subtotal {
    padding: 24px 0 8px;
    margin: 0 12px 24px;
    font-size: 1.1rem;
    justify-content: space-between;
    gap: 12px;
  }

  .simulation-result__subtotal--container {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    align-items: end;
  }

  .simulation-result__subtotal strong {
    font-size: 1.8rem;
  }

  .select-card-other-option-title {
    padding: 10px 14px;
    font-size: 1rem;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .select-card-call-other-option-list {
    margin-top: 20px;
  }

  .select-card-other-option-toggle {
    width: 28px;
    height: 28px;
  }
}

/* シミュレーション結果注釈 */
.simulation-note-wrapper {
    max-width: 960px;
    margin: 20px 20px 0;
    box-sizing: border-box;
}

.simulation-note-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: var(--color-text-dark);
    font-size: 14px;
    line-height: 1.6;
}

.simulation-note-list li {
    padding-left: 1.2em;
    text-indent: -1.2em;
    margin-bottom: 8px;
}

.simulation-note-list a {
    color: var(--color-main);
    text-decoration: underline;
    font-weight: bold;
}

.simulation-note-list a:hover {
    text-decoration: none;
}

.simulation-note-list a .icon {
    width: 1rem;
    height: 1rem;
    margin-left: 4px;
}

@media (max-width: 767px) {
    .simulation-note-wrapper {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .simulation-note-list {
        font-size: 0.85rem;
    }
}

/* お申し込み・お問い合わせエリア */
.contact-action-wrapper {
    width: 100%;
    background-color: var(--color-bg-section);
    padding: 60px 0;
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.contact-action-inner {
    max-width: 1000px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.contact-action-title {
    text-align: center;
    color: var(--color-error);
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    margin-bottom: 40px;
}

.contact-action-main {
    margin-bottom: 16px;
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-bg-white) !important;
    border-radius: 4px;
    padding: 20px 30px;
    position: relative;
    transition: opacity 0.2s;
    box-sizing: border-box;
}

.contact-btn:hover {
    opacity: 0.8;
    text-decoration: none;
}

.contact-btn--primary {
    background-color: var(--color-error);
    min-height: 120px;
}

.contact-btn--secondary {
    background-color: var(--color-main);
    flex: 1;
    min-height: 90px;
    padding: 15px 30px 15px 20px;
}

.contact-action-sub {
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.contact-btn__icon {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.contact-btn__icon img {
    width: 40px;
    height: auto;
}

.contact-btn__text {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.contact-btn__main-text {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.2;
}

.contact-btn--secondary .contact-btn__main-text {
    font-size: 1.2rem;
}

.contact-btn__sub-text {
    font-size: 0.9rem;
    line-height: 1.2;
}

.contact-btn--secondary .contact-btn__sub-text {
    font-size: 0.85rem;
}

.contact-btn__ex {
    position: absolute;
    right: 20px;
    display: flex;
    align-items: center;
}

.contact-btn__ex img {
    width: 16px;
    height: auto;
}

@media (max-width: 767px) {
    .contact-action-wrapper {
        padding: 40px 0;
        margin-top: 40px;
    }
    
    .contact-action-title {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 30px;
    }
    
    .contact-action-sub {
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-btn--primary {
        min-height: 100px;
        padding: 15px 40px;
    }
    
    .contact-btn__icon {
        margin-right: 12px;
    }
    
    .contact-btn__icon img {
        width: 30px;
    }
    
    .contact-btn__main-text {
        font-size: 16px;
    }

    .contact-btn--secondary .contact-btn__main-text {
        font-size: 16px;
    }
    
    .contact-btn__sub-text {
        font-size: 0.8rem;
    }
    
    .contact-btn__ex {
        right: 15px;
    }
    
    .contact-btn__ex img {
        width: 12px;
    }
}

/* エラー画面 */
.error-message-container {
    text-align: center;
    margin: 100px 0 60px;
}

.error-message-text {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--color-text-dark);
}

.error-button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 120px;
}

.error-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-main);
    color: var(--color-bg-white) !important;
    text-decoration: none !important;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 4px;
    padding: 16px 20px;
    width: 320px;
    box-sizing: border-box;
    position: relative;
    transition: opacity 0.2s;
}

.error-btn:hover {
    opacity: 0.8;
    text-decoration: none !important;
}

.error-btn-icon-right {
    position: absolute;
    right: 20px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-1px) rotate(45deg);
}

.error-btn-icon-ex {
    position: absolute;
    right: 20px;
    width: 16px;
    display: flex;
    align-items: center;
}

.error-btn-icon-ex img {
    width: 100%;
    height: auto;
}

@media (max-width: 767px) {
    .error-message-container {
        margin: 60px 0 40px;
    }
    
    .error-message-text {
        font-size: 1.2rem;
    }
    
    .error-button-container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-bottom: 80px;
        padding: 0 16px;
    }
    
    .error-btn {
        width: 100%;
        padding: 14px 20px;
        font-size: 1rem;
    }
}

/* 見積書ダウンロードボタン */
button.contact-btn {
    -webkit-appearance: none;
    appearance: none;
    border: none;
    cursor: pointer;
    font: inherit;
    width: 100%;
}

.simulation-result__estimate-wrap {
    padding: 0 18px 24px;
}

.simulation-result__estimate-wrap form {
    max-width: 620px;
    margin: 0 auto;
}

.simulation-result__estimate-wrap .contact-btn {
    min-height: 80px;
}

/* 共通ユーティリティ */
.noDisplay {
  display: none !important;
}

/* PC用追従シミュレーション結果パネル */
.simulator-result-modal,
.simulator-result-modal-fixed {
  right: 20px;
  width: 240px;
  height: auto;
  z-index: 1;
  overflow: auto;
  max-height: 80%;
  -ms-overflow-style: none;
}

.simulator-result-modal::-webkit-scrollbar,
.simulator-result-modal-fixed::-webkit-scrollbar {
  display: none;
}

.simulator-result-modal {
  position: fixed;
  top: 300px;
}

.simulator-result-modal-fixed {
  position: absolute;
}

/* モーダルタイトル（PC用） */
.modal-title {
  background-color: var(--color-main);
  color: var(--color-bg-white);
  text-align: center;
  padding: 12px 0;
  font-size: 1rem;
  font-weight: bold;
}

.modal-title p {
  margin: 0;
}

/* モーダルコンテンツ */
.modal-result {
  border: 2px solid var(--color-main);
  background-color: var(--color-bg-white);
}

.modal-result > p.breakdown-title {
  width: 100%;
  padding: 6px 0 6px 10px;
  margin: 0;
  background-color: var(--color-main);
  color: var(--color-bg-white);
  font-weight: bold;
  font-size: 0.9rem;
  box-sizing: border-box;
}

/* 金額部分 */
.modal-price {
  padding: 15px 0 10px;
  background-color: var(--color-bg-white);
  text-align: center;
}

.modal-price-monthly {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin: 5px 0 0px;
}

.monthly-label {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: bold;
}

.select-service-result {
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1;
}

.monthly-yen {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: bold;
}

.modal-price-initial {
  color: var(--color-text-dark);
  font-size: 0.9rem;
  margin: 0;
}

.initial-cost {
  font-size: 1.2rem;
  font-family: inherit;
  font-weight: bold;
}

/* 内訳詳細部分 */
.modal-price-detail {
  background-color: var(--color-bg-white);
}

.modal-price-detail > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 0.8rem;
  border-bottom: 1px dashed var(--color-separator);
}

.modal-price-detail > div:last-child {
  border-bottom: none;
}

.modal-price-detail > div > p:first-of-type {
  flex-basis: 70%;
  text-align: left;
  margin: 0;
  line-height: 1.4;
  color: var(--color-text-dark);
}

.modal-price-detail > div > p:last-of-type {
  flex-basis: 30%;
  text-align: right;
  margin: 0;
  font-weight: bold;
  color: var(--color-text-dark);
}

/* 注釈部分 */
.modal-price-note {
  margin-left: 10px;
  padding: 10px 0;
  border-top: 1px dashed var(--color-main);
}

.modal-price-note p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* SP専用要素の初期非表示（PC用） */
.modal-title-sp,
.detail-btn-sp {
  display: none;
}

/* SP用メディアクエリ (767px以下) */
@media (max-width: 767px) {
  /* スマホ画面下の固定バーへ変化 */
  .simulator-result-modal-sp {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      z-index: 10;
      border-top: 1px solid var(--color-bg-white);
  }

  .modal-title, .close-elia {
      display: none;
  }

  .modal-title-sp {
      display: block;
      padding: 7px 7px 7px 15px;
      position: relative;
      background-color: var(--color-main);
      color: var(--color-bg-white);
      font-size: 1rem;
      font-weight: bold;
  }

  .modal-title-sp > p > span {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 0 10px 5px 0;
      font-size: 1.0rem;
  }

  .modal-price {
      padding: 5px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
  }

  .modal-price > p {
      padding-bottom: 0;
  }

  .modal-price > p:nth-child(2) {
      font-size: 1rem;
  }

  .modal-price > p:nth-child(2) > span {
      font-size: 1.2rem;
  }

  /* 内訳開閉ボタン */
  .detail-btn-sp {
      display: block;
  }

  .detail-btn-box-sp {
      display: flex;
      align-items: center;
      width: 85px;
      height: 35px;
      border-radius: 5px;
      color: var(--color-bg-white);
      cursor: pointer;
  }

  .detail-btn-box-sp > span {
      font-size: 1rem;
      font-weight: bold;
  }

  .detail-btn-box-sp > span:first-of-type {
      margin-left: 8px;
      width: 17px;
      height: 17px;
      border-radius: 50%;
      background-color: var(--color-bg-white);
      text-align: center;
      line-height: 14px;
  }

  .detail-btn-box-sp > span:last-of-type {
      margin-left: 5px;
      padding-bottom: 2px;
  }

  .detail-btn-open-bk-color {
      background-color: var(--color-pickup-text);
  }
  .detail-btn-close-bk-color {
      background-color: var(--backgroundcolor-closebtn);
  }
  .detail-btn-open-color {
      color: var(--color-pickup-text);
      font-weight: bold;
      padding-top: 1px;
  }
  .detail-btn-close-color {
      color: var(--color-text-dark);
      font-weight: bold;
      padding-top: 1px;
  }

  /* SP用 内訳詳細リスト調整 */
  .modal-price-detail > div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 15px;
      font-size: 1rem;
      border: 1px solid var(--bordercolor-line1);
      border-bottom: 1px dashed var(--color-separator);
  }

  .modal-price-detail > div > p:first-of-type {
      padding-bottom: 0;
      flex-basis: 80%;
  }
  .modal-price-detail > div > p:last-of-type {
      flex-basis: 20%;
  }

  .modal-result > p.breakdown-title {
      padding: 8px 0 8px 15px;
      font-size: 1rem;
  }

  .modal-price-detail:last-child {
      font-size: 1.2rem;
  }

  .modal-price-note p {
      font-size: 1rem;
  }
}

/* ============================================================
   オプション説明モーダル（info-modal）ベーススタイル
   ============================================================ */

.info-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.info-modal[aria-hidden="true"] {
  display: none;
}

.info-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.info-modal__dialog {
  position: relative;
  background-color: var(--color-bg-white);
  border-radius: 4px;
  width: 100%;
  max-width: 920px;
  max-height: 90vh;
  overflow: visible;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
}

.info-modal__dialog-inner {
  overflow-y: auto;
  padding: 40px 32px 32px;
  border-radius: 4px;
}

.info-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-main);
  color: var(--color-bg-white);
  font-size: 1.2rem;
  line-height: 36px;
  text-align: center;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.info-modal__close:hover {
  opacity: 0.8;
}

.info-modal__title {
  font-size: 1.8rem;              /* 想定: 見出しを大きく（#4） */
  color: var(--color-main);
  font-weight: 700;
  padding-bottom: 16px;          /* 想定: 下線との間隔を広く（#5） */
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-main);
}

/* タイトル＋価格を同一行に並べるラッパー（価格あり用） */
.info-modal__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--color-main);
}

.info-modal__title-price-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* title-row 内では個別のボーダーを打ち消す */
.info-modal__title-row .info-modal__title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  flex-shrink: 1;
  min-width: 0;
}

.info-modal__title-price {
  font-size: 1.2rem;
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.info-modal__body {
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.7;
}

.info-modal__text {
  margin-bottom: 8px;
}

.info-modal__table {
  width: 55%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 0.85rem;
}

.info-modal__table td {
  padding: 8px 12px;
  border: 1px solid var(--color-border-table);
}

.info-modal__table td:first-child {
  background-color: var(--color-bg-light);
}

.info-modal__table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.info-modal__note {
  font-size: 0.9rem;
  color: var(--color-text-dark);
  line-height: 1.6;
}

body.info-modal-is-open {
  overflow: hidden;
}

/* ============================================================
   端末選択モーダル内スタイル
   ============================================================ */

/* フィルター行（端末種別 + ソート） */
.modal-device-filters {
  display: flex;
  gap: 12px;
  padding-top: 20px;             /* 想定: 見出し下線とフィルタの間に余白（#10）。marginは title-row の margin-bottom と相殺し効かないため padding で確実に空ける */
  margin-bottom: 16px;
}

.modal-device-filters__select-wrap {
  position: relative;
  flex: 0 1 220px;               /* 想定: プルダウンを左寄せ・狭め（現状の flex:1 全幅→220px基準・狭画面は縮小可） */
  min-width: 0;
}

.modal-device-filters__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  padding: 12px 36px 12px 14px;   /* 想定: 箱を縦に大きく（#2） */
  border: 1px solid #ccc;
  border-radius: 6px;             /* 想定: 角丸をやや大きく（#2） */
  /* 想定: 塗り三角▼→細いシェブロン⌄（緑 #00a23f＝見出し・下線と同色）（#1・S-2） */
  background: var(--color-bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300a23f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  font-size: 0.9rem;
  cursor: pointer;
}

.modal-device-filters__select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 端末一覧グリッド（PC:2列 SP:1列） */
.modal-device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* 端末カード */
.modal-device-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;              /* 想定: ヘッダ帯の角をカード角丸にクリップ（#3） */
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--color-bg-white);
}

.modal-device-card:hover {
  border-color: var(--color-main);
}

.modal-device-card.is-selected {
  border-color: var(--color-main);
  box-shadow: 0 0 0 1px var(--color-main);
}

.modal-device-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-device-card__image img {
  width: 100%;
  max-width: 160px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
}

/* 想定: 商品名＋by を薄グレー帯に。カード padding(12px) を打ち消し左右上端まで張り出し（full-bleed）（#3） */
.modal-device-card__header {
  margin: -12px -12px 0;
  padding: 10px 12px;
  background: #f2f2f2;
}

.modal-device-card__name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #000;
  line-height: 1.4;
}

.modal-device-card__meta {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-dark);
}

.modal-device-card__footer {
  display: flex;
  align-items: center;           /* 想定: 金額と詳細リンクを上下中央揃え（#8） */
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  margin-left: -12px;            /* 想定: 区切り線をカード枠まで届かせる（左右のpadding打ち消し＝full-bleed） */
  margin-right: -12px;
  padding: 10px 12px 0;          /* 上=区切り線の内側余白／左右=中身を元の位置へ戻す */
  border-top: 1px solid #e0e0e0; /* 想定: 金額・詳細の上に区切り線（#7） */
}

.modal-device-card__price {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-dark);
}

.modal-device-card__price strong {
  font-size: 1.5rem;             /* 想定: 金額の数値のみを大きく（#6・「一括：」「円（税抜）」は0.8remのまま） */
  font-weight: 700;
}

/* 想定: 詳細リンクは流用クラスの margin-top:8px を打ち消し、金額と上下中央に揃える（#8） */
.modal-device-card__footer .current-device-card__detail {
  margin-top: 0;
}

/* カラーグリッド（PC:4列 SP:2列） */
.modal-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* カラーカード */
.modal-color-card {
  text-align: center;
  padding: 10px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--color-bg-white);
}

.modal-color-card:hover:not(.disable) {
  border-color: var(--color-main);
}

.modal-color-card.is-selected {
  border-color: var(--color-main);
  box-shadow: 0 0 0 1px var(--color-main);
}

.modal-color-card.disable {
  opacity: 0.6;
  background: #eaeaea;
  cursor: not-allowed;
  pointer-events: none;
}

.modal-color-card__image {
  margin-bottom: 6px;
}

.modal-color-card__image img {
  width: 100%;
  max-width: 80px;
  height: auto;
  max-height: 100px;
  object-fit: contain;
}

.modal-color-card__name {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-dark);
  word-break: break-all;
}

/* ============================================================
   カラー画面（PC限定＝想定150857）。SP(max-width:767)には一切効かない。
   C-1 カラー名を下部のグレー帯 / C-2 端末名サブ見出し非表示 / C-3 画像を大きくカードをコンパクトに。
   ※C-4見出しサイズ(共通クラスのため据置)・C-5緑枠(選択状態)・C-6グレーアウト(在庫状態)は変更しない。
   ============================================================ */
@media (min-width: 768px) {
  /* 端末選択モーダル(端末一覧・カラー共通)：カード高を上げるため幅を820pxに拡大（端末一覧も同幅で統一）。高さは両画面統一(720px)。 */
  #modal-device-select .info-modal__dialog { max-width: 820px; height: 720px; }

  /* C-3(幅・列数): 想定は1行4個で折り返し（最大4列）。1fr(1/4)は広いモーダルで間延びするため、
     4列固定＋各カード最大150pxで左詰め（5個目以降は次の行へ）。 */
  .modal-color-grid {
    grid-template-columns: repeat(4, 1fr);   /* 4個で幅いっぱい＝モーダル幅を広げるとカードも大きくなる */
  }

  /* C-3(高さ・余白): 外周余白を詰め、画像の高さを抑える。角をクリップ */
  .modal-color-card { padding: 0; overflow: hidden; }
  .modal-color-card__image { margin: 0; padding: 12px 2px 8px; }         /* 左右余白を最小化し画像を最大幅に＝縦に伸びられるように */
  .modal-color-card__image img { max-width: 100%; max-height: 400px; }   /* カード幅拡大(約180px)に合わせ高さ上限も拡大 */

  /* C-1: カラー名を下部の薄グレー帯に（カード幅いっぱい） */
  .modal-color-card__name {
    padding: 8px 6px;
    background: #f2f2f2;
    font-size: 0.85rem;
  }
}

/* 端末なし・カラーなしメッセージ */
.modal-device-empty {
  grid-column: 1 / -1;
  padding: 16px 0;
  font-size: 0.9rem;
  color: var(--color-text-dark);
}

@media (max-width: 767px) {

  .info-modal__table {
    width: 100%;
  }

  /* 端末一覧: SP は1列 */
  .modal-device-grid {
    grid-template-columns: 1fr;
  }

  /* カラー一覧: SP は2列 */
  .modal-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* カラーカード(SP・想定162434): S-2 カラー名グレー帯 / S-3 画像を大きく。PC限定だった改善をSPにも反映。
     ※S-1「端末名サブ見出し非表示」は、要素自体を削除したため不要になった（2026-08-07）。 */
  .modal-color-card { padding: 0; overflow: hidden; }                      /* S-3: 外周余白を詰め角クリップ */
  .modal-color-card__image { margin: 0; padding: 12px 8px 8px; }
  .modal-color-card__image img { max-width: 100%; max-height: 250px; }     /* S-3: 画像を大きく（SP 2列・もう少し高く 200→250px） */
  .modal-color-card__name { padding: 8px 6px; background: #f2f2f2; font-size: 0.85rem; }  /* S-2: 下部グレー帯 */

  /* フィルター行: SP も横並び（想定S-1）＝プルダウンを左右に半分ずつ */
  .modal-device-filters {
    flex-direction: row;
  }

  /* SP: 各プルダウンを等幅（半分ずつ）。PCの flex:0 1 220px を打ち消す */
  .modal-device-filters__select-wrap {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }

  .info-modal__title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    /* タイトル下の緑下線をモーダルの端まで伸ばす（dialog-innerの左右padding32pxを打ち消す。文字位置はpaddingで元に戻す） */
    margin-left: -32px;
    margin-right: -32px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .info-modal__title-price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }

  .info-modal__title-price {
    text-align: left;
  }

  .info-modal__title {
    font-size: 1.5rem;
  }

  .info-modal__dialog-inner {
    padding: 24px 32px 32px;
  }
}


/* （旧516pxのコース2列!important規則は、767pxで全item2列になり冗長＝デッドのため削除。コース=2列は767ブロックで担保） */

/* ============================================================
   見積書DL 共通コンポーネント（R1 共通基盤・デザイン20260727）
   ステップ表示 / 緑帯タイトル / 緑帯セクション見出し / ボタン意匠
   ※各画面(R2以降)がこれらのクラス・部品を利用する
   ============================================================ */
:root {
  --estimate-green:   #009944;
  --estimate-green-d: #007a36;
  --estimate-pink:    #e4007f;
  --estimate-gray:    #9fa0a0;
  --estimate-border:  #d5d5d5;
}

/* --- 緑帯タイトル（見積書ダウンロードフォーム）--- */
/* 01-1: 緑の下線は外側 .page-title-container の border-bottom(全幅)を使う。 */
.estimate-page-title {
  background: transparent;
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 0;
  text-align: left;
}
/* ★文字の太さ・色は指定しない（共通CSSのbody指定を継承）。 */
.estimate-page-title h1 {
  font-style: italic;
  font-size: 2.2rem;
  margin: 0 0 0 12px;
}

/* --- ステップ表示（入力→確認→完了）--- */
/* 01-1: ステップは全幅3等分ではなく 中央寄せ・固定幅の箱。入力(緑・右に緑矢じり)→▶→確認(白)→▶→完了(白)。 */
.estimate-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;   /* 画面中央 */
  gap: 4px;                  /* ステップ間の距離を狭める */
  /* 表の直上のまま、本文列(1000px)の外へ全幅ブレイクアウトし、元の390px×3を画面中央に配置 */
  margin: 32px calc(-50vw + 50%);
}
.estimate-step {
  flex: 0 0 auto;            /* 元の固定幅（390px） */
  min-width: 390px;
  position: relative;
  display: flex;             /* テキストを上下左右中央に */
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 14px 8px;
  border: 1px solid var(--estimate-border);
  background: #fff;
  color: #333;               /* 非アクティブ（確認/完了）の文字は黒（旧#888グレー） */
  font-weight: 400;          /* 設計095218は通常ウェイト（旧700=太字が実装差分） */
  font-size: 1.05rem;
}
.estimate-step.is-active {
  background: var(--estimate-green);
  border-color: var(--estimate-green);
  color: #fff;
}
/* （旧）アクティブの大きい緑の矢じりは削除。代わりに区切り三角（小）をアクティブ背景色で表示する。 */
/* ステップ間のグレー三角＝左のステップの右端に密着させる（負のmarginで左側の隙間を打ち消す） */
.estimate-step-sep {
  align-self: center;
  margin-left: -4px;
  width: 0; height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #666;
}
/* アクティブステップ直後の三角は、そのステップの背景色に合わせて緑にする（小さい緑三角。旧＝大きい緑矢じりの置換） */
.estimate-step.is-active + .estimate-step-sep {
  border-left-color: var(--estimate-green);
}
/* SP（〜767px）: 3ステップ(入力→確認→完了)は画面幅に収まらないため横スクロールにする。
   原因＝min-width:390px が未解除＋.estimate-steps に overflow-x が無く、はみ出すだけでスクロールできなかった。 */
@media (max-width: 767px) {
  .estimate-steps {
    justify-content: flex-start;        /* 左端(入力画面)から開始 */
    overflow-x: auto;                   /* 横スクロール */
    -webkit-overflow-scrolling: touch;  /* iOS 慣性スクロール */
  }
  .estimate-step {
    min-width: 150px;   /* 390→150。3つで画面幅を超えるためスクロールが効く */
    font-size: .9rem;
    padding: 10px 6px;
  }
  .estimate-step-sep { flex: 0 0 auto; }   /* スクロール時に三角がつぶれない */
}

/* --- 緑帯セクション見出し（お見積もり内容 等）--- */
.estimate-section-heading {
  background: var(--estimate-green);
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  padding: 12px 20px;
  margin: 28px 0 0;
}
/* 緑の左縦バーの大見出し（諸注意事項 等・01-1。バナーではない） */
.estimate-bar-heading {
  font-size: 1.4rem; font-weight: 700; color: #333;
  margin: 28px 0 16px; padding-left: 14px;
  border-left: 6px solid var(--estimate-green, #009944);
}

/* --- ボタン意匠（緑=前進/ピンク=DL/グレー=戻る）--- */
.estimate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;        /* アイコンをボタン右端に絶対配置するため */
  gap: 8px;
  min-width: 320px;   /* 「料金シミュレーションページへ」等の長文でも中央テキストと右アイコンが重ならない幅（全ボタン共通） */
  padding: 16px 28px;
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
/* common.css の a:link/a:visited{color:#00a23f} が .estimate-btn の白文字を上書きするため、
   詳細度で勝つルールで白文字・下線なしを担保（ボタンは<a>要素）。 */
a.estimate-btn,
a.estimate-btn:link,
a.estimate-btn:visited,
a.estimate-btn:hover,
a.estimate-btn:active { color: #fff; text-decoration: none; }
.estimate-btn--green { background: var(--estimate-green); }
.estimate-btn--green:hover { background: var(--estimate-green-d); }
.estimate-btn--pink  { background: var(--estimate-pink); }
.estimate-btn--gray  { background: var(--estimate-gray); }
/* アイコンはボタン右端に配置（設計121529）。緑=細いchevron／戻る=戻る矢印。 */
.estimate-btn--green::after,
.estimate-btn--pink::after,
.estimate-btn--gray::after {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
}
/* アイコンは見積書DL自身の img を参照（他サイトapply配下は参照しない）。緑=white_arrow.png／戻る=white_back.png。 */
.estimate-btn--green::after { content: url("../img/white_arrow.png"); }
.estimate-btn--pink::after  { content: url("../img/download-white.png"); }   /* DLアイコンは指定画像(estimate自身のimgへコピー済) */
.estimate-btn--gray::after  { content: url("../img/white_back.png"); }
.estimate-btn:disabled,
.estimate-btn.is-disabled { background: #cfcfcf; cursor: not-allowed; }

/* ===== 完了画面（設計 完了画面 5-1/5-2） ===== */
.complete-message { margin: 24px 0 8px; text-align: center; }   /* 設計06/image22/5-1: 完了メッセージは中央揃え */
.complete-message__title { font-size: 1.4rem; font-weight: 700; color: var(--estimate-green, #009944); margin: 0 0 12px; }   /* タイトルは緑 */
.complete-message__lead { line-height: 1.5; }   /* 行間を少し狭める（お客様指定 2026-08-05・1.8→1.5） */
.estimate-complete-heading { font-size: 1.5rem; font-weight: 700; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--estimate-green); }
.estimate-complete-subhead { font-size: 1.15rem; font-weight: 700; margin: 24px 0 8px; padding-left: 12px; border-left: 5px solid var(--estimate-green); }
.complete-next__desc { margin: 0 0 20px; line-height: 1.8; }
.complete-actions { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; }   /* 下32px＝ボタンとページTOPへの間隔（完了/再DL） */
.complete-actions .estimate-btn--pink { width: 380px; min-width: 0; margin: 0 0 24px; }   /* 見積書DLボタンも緑2ボタンと同幅380px（完了/再DL共通） */
.complete-actions__sub { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.complete-actions__sub .estimate-btn { flex: 0 0 380px; min-width: 0; }   /* 2ボタン同幅・固定380px（完了/再DL共通ルール＝常に一致）。ピンク見積書DLボタンとも同幅 */

/* 〔お客様ご指摘 2026-08-19〕PC表示では下段の2ボタンを必ず横並びにする（完了画面・再ダウンロード画面）。
   上の .complete-actions__sub には幅の指定が無く、折り返し可の入れ物の幅を
   「中身の合計(380+16+380=776px)」と見るか「1つ分(380px)」と見るかがブラウザで異なるため、
   Firefox や Mac では1つ分と解釈され、置き場に余裕があっても縦に折り返していた
   （2026-08-20 実測：置き場996pxに対し Chromium は横並び／Firefox は折り返し）。
   入れ物の幅を明示し、折り返しを止める。狭いPC幅では折り返す代わりにボタンが縮む。
   SP（767px以下）は対象外＝従来どおり全幅で縦並び。 */
@media (min-width: 768px) {
  .complete-actions__sub { flex-wrap: nowrap; width: 776px; max-width: 100%; }
  .complete-actions__sub .estimate-btn { flex: 0 1 380px; }
}

/* ===== エラー画面（error.tpl・6-1/6-2） ===== */
.estimate-error { max-width: 720px; margin: 0 auto; padding: 20px 0 40px; }
.estimate-error__message { text-align: center; margin: 48px 0; font-size: 1rem; line-height: 1.9; color: #333; }
.estimate-error__message p { margin: 4px 0; }
.estimate-error .complete-actions { margin: 32px 0 0; }   /* エラー画面は自前のpadding-bottom:40pxで間隔を確保＝下marginは0に戻す（二重回避） */
.estimate-error .complete-actions .estimate-btn { min-width: 480px; }   /* エラー画面のボタンのみ1.5倍幅（320→480px） */

/* --- モーダル閉じ（×・緑丸）--- */
.estimate-modal-close {
  position: absolute; top: -16px; right: -16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--estimate-green);
  color: #fff; border: none;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}

@media (max-width: 767px) {
  /* SP: 画面幅が狭いためタイトルは縮小したまま維持する（左右18pxの余白で端に寄りすぎないようにする）。
     〔2026-08-17〕料金シミュレーターと揃える案を検討したが、**お客様からのご指示が無いため対応しない**
     （開発者判断で元に戻した）。揃えるとSPではタイトルが2行になることを実測済み。 */
  .estimate-page-title { padding: 16px 18px; }
  .estimate-page-title h1 { font-size: 1.4rem; margin-left: 0; }
  .estimate-btn { min-width: 0; width: 100%; }   /* SP: 入力画面ボタン等は全幅（.estimate-step のSP調整は専用ブロックで実施） */
  /* エラー画面のボタンは PC意匠として最小幅480pxを指定している（上記 .estimate-error の規則）。
     SPでは画面幅（375〜430px）より広く、中央寄せのため左右へはみ出して横スクロールが出ていた
     （お客様ご指摘 2026-08-21。実測＝画面幅390pxでページ幅435px＝左余白16＋本文の半分179＋ボタンの半分240）。
     SPでは最小幅を解除し、直上の width:100% で本文の左右余白（.page-content の16px）の内側に収める。
     PC幅（768px以上）は変更しない。 */
  .estimate-error .complete-actions .estimate-btn { min-width: 0; }
}

/* ============================================================
   R2-②a お見積り内容 アコーディオン（設計 入力画面 吹き出し・仕様抽出L279-281）
   見出し右端トグル: 開=「−」／閉=「＋」。初期状態は script.js が hasSimulatorData で設定。
   ============================================================ */
/* 01-1: アコーディオン見出しは 緑バナーではなく ダーク文字＋緑下線＋右に⊖枠。外枠ボックスは無し。 */
.estimate-accordion {
  margin: 0 0 32px;
}
.estimate-accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  color: #333;
  padding: 0 0 10px;
  border-bottom: 2px solid var(--estimate-green, #009944);
}
.estimate-accordion__heading {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #333;
}
.estimate-accordion__toggle {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #ccc;
  background: #fff;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
}
.estimate-accordion__toggle::before,
.estimate-accordion__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: #333;
  transform: translate(-50%, -50%);
}
.estimate-accordion__toggle::after {                          /* 縦線: 閉(＝＋)のときだけ表示 */
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
  transition: opacity .15s;
}
.estimate-accordion.is-collapsed .estimate-accordion__toggle::after { opacity: 1; }   /* 閉=「＋」 開=「−」 */
.estimate-accordion__body { padding: 16px 0; }
.estimate-accordion.is-collapsed .estimate-accordion__body { display: none; }
.estimate-accordion__subheading {
  margin: 16px 0 28px;   /* ご選択内容の上下に余白を追加 */
  font-size: 18px;
  font-weight: bold;
  border-left: 4px solid var(--estimate-green, #009944);
  padding-left: 10px;
}

/* ============================================================
   R2-②b お見積もり内容（見積書形式プレビュー・設計 仕様抽出L236-249）
   見積書PDF(Pdf.pm)と同一の表構成。合計金額内訳表(3列)＋明細表(7列)。
   ★【デザイン同一の申し送り】この表(.estimate-preview__total/__detail)の見た目は
     見積書PDF(share/ts_programs/business/estimate/Pdf.pm の (3)合計金額表/(4)明細表)と
     常に同一デザインとする。ただし画面=HTML/CSS・PDF=Perl手動描画の別エンジンで自動反映
     されないため、色/罫線/セル結合/余白行/改行 等を変更する場合は【必ず両方】を直すこと。
     現行の統一仕様(2026-08-05確定)：合計金額表ヘッダ=#636363(白文字)/明細ヘッダ=#F5F5F5(濃文字)/
     合計行は商品名〜数量を3列結合/余白行の先頭=「以下余白」他セル=「-」/最低利用期間は2行表示。
   ============================================================ */
/* D-3a: お見積り内容をカンプ01-3のカード（角丸・緑枠・緑帯ヘッダー）に合わせる */
.estimate-preview { margin: 0 0 32px; }   /* 緑の外枠は設計に無いため除去 */
.estimate-preview .estimate-section-heading { margin: 0; }   /* タイトルと枠線を密着（#5・隙間除去） */
.estimate-preview__table-wrap { overflow-x: auto; margin: 0 16px 20px; }
/* 設計133823: お見積もり内容は「タイトル(緑帯)の左端〜右端」の1枠で、
   合計金額表(ヘッダ部)と明細表(詳細部)をまとめて囲う。枠は全幅（タイトルと左右端を揃える）＋内側余白。 */
.estimate-preview__frame {
  border: 1px solid #cfcfcf;
  border-top: none;          /* 上辺はタイトル(緑帯)が担う＝タイトルと密着 */
  margin: 0 0 20px;          /* 上0＝タイトルと接する */
  padding: 16px;
  /* お見積り内容の枠は「明細7行の高さ」で固定し、明細が7行を超えたら枠線内全体でスクロール（確定仕様2026-08-07）。
     高さ＝枠padding + 合計金額内訳表 + 間隔 + 明細表(2段ヘッダ+本文7行+合計行)。※明細7行以下は以下余白で常に7行に満たす。
     ★正確な値は行高依存のため実画面で目視調整（デザイン目視ゲート）。7行目・合計行が切れるなら増やす／8行目で
       スクロールが出ないなら減らす。 */
  max-height: 640px;
  overflow: auto;            /* スクロール対象は枠線内全体（お客様仕様・位置は変更しない） */
}
/* 枠内では個別の外側余白をリセット（スクロールは親frameが担う）。合計金額表と明細表の間隔だけ確保。 */
.estimate-preview__frame .estimate-preview__table-wrap { margin: 0; overflow: visible; }
.estimate-preview__frame .estimate-preview__table-wrap + .estimate-preview__table-wrap { margin-top: 16px; }
.estimate-preview__total,
.estimate-preview__detail {
  width: 100%;
  min-width: 560px;   /* 画面が狭い時は縮めず min-width で横スクロール（合計金額表も明細表と同様に潰さない・お客様指定 2026-08-05） */
  border-collapse: collapse;
  font-size: 14px;
  background: #fff;
}
.estimate-preview__total th,
.estimate-preview__total td,
.estimate-preview__detail th,
.estimate-preview__detail td {
  border: 1px solid #000;   /* 黒枠線（お客様指定 2026-08-05・見積書PDFと同様） */
  padding: 8px 10px;
  text-align: right;
  white-space: nowrap;
}
/* 見積書PDF(Pdf.pm)と共通レイアウト。ヘッダ色は2系統（お客様指定 2026-08-03・設計133823）:
   合計金額表(ヘッダ/行ラベル/まとめセル)＝濃グレー#636363・白文字／明細表ヘッダ＝淡グレー#F5F5F5・濃文字。 */
.estimate-preview__total thead th,
.estimate-preview__detail thead th {
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.estimate-preview__total thead th {
  background: #636363;
  color: #fff;
}
.estimate-preview__detail thead th {
  background: #F5F5F5;
  color: #333;
}
/* 合計金額表 左上の空セル2つ（合計金額・初期費用の上）は白地＋枠線なし（設計133823・133447） */
.estimate-preview__total thead th:first-child,
.estimate-preview__total thead th:nth-child(2) {
  background: #fff;
  border: none;
}
/* 行ラベル（初期費用/月額費用）＝グレー網掛け・白文字 */
.estimate-preview__total tbody th[scope="row"] {
  text-align: center;
  font-weight: bold;
  background: #636363;
  color: #fff;
}
/* 明細 商品名＝本文セル（白地・黒字・左寄せ・通常） */
.estimate-preview__detail td.is-name {
  text-align: left;
  font-weight: normal;
  background: #fff;
}
/* D-3b: 合計金額 まとめ列（初期費用/月額費用を束ねる縦結合セル）＝グレー網掛け・白文字。
   詳細度を上げて汎用の text-align:right に勝たせる（中央揃え・#6）。 */
.estimate-preview__total .estimate-preview__total-group {
  background: #636363;
  color: #fff;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  vertical-align: middle;
}
/* 合計金額表の列幅（#7・設計133823）: 合計金額列を狭め（従来比2/3程度）、税抜/消費税/税込は均等。 */
.estimate-preview__total { table-layout: fixed; }
.estimate-preview__total thead th:first-child { width: 14%; }    /* 合計金額列 */
.estimate-preview__total thead th:nth-child(2) { width: 14%; }   /* 初期費用/月額費用ラベル列 */
.estimate-preview__total thead th:nth-child(3),
.estimate-preview__total thead th:nth-child(4),
.estimate-preview__total thead th:nth-child(5) { width: 24%; }   /* 税抜/消費税/税込＝均等 */
.estimate-preview__detail tbody td:nth-child(2),   /* 最低利用期間 */
.estimate-preview__detail tbody td:nth-child(3) {  /* 数量 */
  text-align: center;
}
/* 最低利用期間の列を狭め、ヘッダを「最低利/用期間」で2行に（tpl側<br>で確定）。狭めた分だけ商品名列が広がる（設計133823）。 */
.estimate-preview__detail thead tr:first-child th:nth-child(2) { width: 52px; }
.estimate-preview__detail thead tr:first-child th:nth-child(3) { width: 48px; }
/* 「合計」行の一つ上は太線（設計133823） */
.estimate-preview__detail tr.estimate-preview__detail-total td {
  font-weight: bold;
  background: #fff;
  border-top: 2px solid #000;   /* 合計行の上＝黒太線（お客様指定 2026-08-05） */
}
.estimate-preview__detail tr.estimate-preview__detail-total td:first-child { text-align: center; }
.estimate-preview__detail tr.estimate-preview__spacer td { height: 1.6em; }

/* ===== R2-③a お客様情報セクション（旧 display:none 結果パネルから昇格・常時表示） ===== */
.estimate-customer-section { margin: 0 0 32px; }

/* ===== R2-③d 諸注意事項（設計 仕様抽出L259-278） ===== */
/* 諸注意事項（設計165238）: セクション全体（タイトル含む）が淡緑背景。タイトルは緑左バーのまま。 */
.estimate-notice {
  margin: 32px 0;        /* 上部テキスト(別導線)との間を空ける */
  background: #F0F6EC;   /* 設計165238: セクション全体を淡緑#F0F6ECに（お客様指定） */
  border-radius: 4px;
  padding: 20px 94px 20px 24px;   /* 右を約5文字分(70px)広げて本文の折り返しを左へ */
}
.estimate-notice .estimate-bar-heading { margin-top: 0; }   /* 淡緑背景の先頭＝タイトル上の余白を詰める */
.estimate-notice__body {
  background: transparent;
  padding: 0;
}
.estimate-notice__subhead { font-size: 15px; font-weight: bold; color: var(--estimate-green, #009944); margin: 18px 0 6px; }
.estimate-notice__subhead:first-child { margin-top: 0; }
.estimate-notice__body p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
/* 金額についての箇条書きは先頭に「・」（設計165238）。折返しは本文にぶら下げ揃え。 */
.estimate-notice__list { margin: 0; padding-left: 0; list-style: none; }
.estimate-notice__list li { font-size: 14px; line-height: 1.4; margin: 0 0 2px; padding-left: 1.2em; text-indent: -1.2em; }
.estimate-notice__list li::before { content: "・"; }

/* 別導線（設計D-2・諸注意事項の後） */
/* 注記ブロック（ステップ表示の上に置く）。 */
.estimate-guide-links { margin: 24px 0 32px; }
/* 折返し時、2行目以降を「〇 」(全角〇＋半角空白≒1.4em)より右へぶら下げてリスト状に揃える。 */
.estimate-guide-links .note-text { margin: 0 0 2px; font-size: 14px; line-height: 1.4; padding-left: 1.4em; text-indent: -1.4em; }

/* 入力画面ボタン: 確認画面へ(緑)のみ（お客様ご指摘 で「シミュレーションに戻る」を削除）。
   1ボタンでも中央揃え・幅上限400px・上余白32pxを保つ（並びの指定はそのまま流用する） */
.estimate-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 32px 0 0; }
.estimate-actions .estimate-btn { width: 100%; max-width: 400px; }

/* ============================================================
   ④ ご選択内容: 1項目=1ラベル行（設計2-3/カンプ01-3）
   line-card-select のオプション(ul/li/button)は保持し、外側をラベル行に。
   ============================================================ */
/* ご選択内容の行は お客様情報(.customer-info .form-row)と同じグリッドに揃える
   （ラベル列220px＋必須右揃え＋列gap20px＝両セクションで入力開始位置・幅・区切り罫線を一致させる）。 */
.estimate-field { display: flex; align-items: flex-start; column-gap: 20px; padding: 18px 0; border-bottom: 1px solid #e5e5e5; }
/* 先頭フィールド（ご利用タイプ）のみ上余白0。コンテナで囲われた通話オプション等が
   :first-of-type 扱いで上余白0になり“上線に密着”したため、本体直下の子に限定（issue1・133415） */
.estimate-accordion__body > .estimate-field:first-of-type { padding-top: 0; }
.estimate-field__label {
  flex: 0 0 220px; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  font-weight: bold; font-size: 13px; color: #333; padding-top: 12px; line-height: 1.5;
}
.estimate-field__label .req {
  display: inline-block; background: var(--estimate-pink, #e4007f); color: #fff;
  font-size: 11px; font-weight: bold; line-height: 1; padding: 4px 7px;
  border-radius: 3px; margin-left: 8px; vertical-align: middle;
}
.estimate-field__options { flex: 1 1 auto; min-width: 0; }
/* ④' その他の通話/オプションを独立ラベル行で常時表示（旧トグルの display:none を上書き） */
.estimate-field__options .select-card-call-other-option-list { display: flex; margin-top: 0; }

@media screen and (max-width: 767px) {
  /* 縦積み時は align-items:flex-start（基底）だと子が内容幅のまま＝狭い。stretch で全幅に伸ばす（オプション切れの根本原因）。 */
  .estimate-field { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0; }
  .estimate-field__label { flex: none; flex-basis: auto; padding-top: 0; align-self: flex-start; }
  .estimate-field__options { width: 100%; flex: none; }
  .estimate-field__options .line-card-select__list { width: 100%; }
}

/* ============================================================
   R3 確認画面（confirm.tpl・設計 確認画面シートL1818-1897）
   見積書テーブルは .estimate-preview（入力画面と共通）を再利用。
   ============================================================ */
.estimate-preview__note { font-size: 13px; color: #555; margin: 0 16px 16px; }

/* お客様情報の確認（項目ごと・値のみ） */
.confirm-info { margin: 0 0 32px; }
.confirm-info__list { margin: 0; border-top: 1px solid #e0e0e0; }
.confirm-info__row { display: flex; border-bottom: 1px solid #e0e0e0; }
.confirm-info__row dt {
  flex: 0 0 220px; font-weight: bold;   /* ラベル背景は設計/入力画面に合わせて無し（旧: 淡緑#f4faf6） */
  padding: 12px 16px; margin: 0; font-size: 13px; box-sizing: border-box;   /* 入力画面ラベルと同じ13px */
}
.confirm-info__row dd { flex: 1 1 auto; padding: 12px 16px; margin: 0; font-size: 14px; word-break: break-all; }

/* 操作ボタン（各種同意事項を確認＝緑／前の画面に戻る＝グレー） */
.confirm-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 32px 0 32px; }   /* 下32px＝ボタンとページTOPへの間隔（入力画面のcustomer-section margin-bottomと同等） */
.confirm-actions__back { margin: 0; }

@media screen and (max-width: 767px) {
  .confirm-info__row { flex-direction: column; }
  /* ラベル(dt)と入力内容(dd)を近づける＝dt下余白/dd上余白を詰める（従来 12+12=約24px→約2px）。 */
  .confirm-info__row dt { flex-basis: auto; padding: 12px 16px 0; }
  .confirm-info__row dd { padding: 2px 16px 12px; }
  /* 「前の画面に戻る」はformで包まれ、formが内容幅に縮むためボタンが全幅にならない→formを全幅にして「各種同意事項を確認」と同幅に。 */
  .confirm-actions__back { width: 100%; }
}

/* ===== R3-⑤ 同意事項モーダル（設計 同意事項モーダルシートL1900-1947） ===== */
.consent-modal { position: fixed; inset: 0; z-index: 1000; }
.consent-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
/* 〔2026-08-08〕×ボタンを枠の角へ出すための外枠。__inner は overflow-y:auto でスクロールするため、
   その中に置くとはみ出せない。位置の基準を __frame に移し、__inner は中身のスクロールだけを担う。
   PC/SP 共通（@media で上書きしない＝両画面幅で同じ見た目）。 */
.consent-modal__frame {
  position: relative; z-index: 1; max-width: 640px; width: 92%; margin: 5vh auto;
}
.consent-modal__inner {
  position: relative; background: #fff; max-height: 90vh; overflow-y: auto;
  border-radius: 6px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}
/* 端末選択モーダル(.info-modal__close)と同じ角の位置・大きさに揃える（枠外へ16pxはみ出す） */
.consent-modal__close {
  position: absolute; top: -16px; right: -16px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--estimate-green, #009944); color: #fff; border: none;
  font-size: 1.2rem; line-height: 36px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center; padding: 0;   /* ×を円の中央に */
}
.consent-modal__title { font-size: 20px; font-weight: bold; color: var(--estimate-green, #009944); text-align: left; margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid var(--estimate-green, #009944); }   /* 設計05/4.png: 緑文字・左寄せ＋緑下線 */
.consent-block { margin: 0 0 20px; border: 1px solid #d5d5d5; border-radius: 4px; overflow: hidden; }
.consent-block__head {
  background: var(--estimate-green, #009944); color: #fff; font-size: 15px; font-weight: bold;
  margin: 0; padding: 10px 14px; text-align: center;   /* 設計4.png/image21: 帯見出しは中央 */
}
.consent-block__body { padding: 14px 16px; }
.consent-block__body p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.consent-block__caution { color: #ED1E79; }   /* 設計05: 料金シミュレータの--color-error(#ed1e79)と同色 */
.consent-block .quote-conditions {
  white-space: pre-wrap; font-family: inherit; font-size: 13px; line-height: 1.7;
  background: #fafafa; border: 1px solid #eee; padding: 12px; margin: 0 0 12px;
  max-height: 240px; overflow-y: auto;
}
.consent-check-label { display: block; text-align: center; font-weight: bold; font-size: 15px; cursor: pointer; }   /* 設計05: チェックは中央揃え */
.consent-check-label input { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; }   /* チェックボックスを少し大きく（お客様指定 2026-08-05・PC/SP共通） */
.consent-modal__dl { margin: 20px 0 0; text-align: center; }
.consent-modal__dl .estimate-btn { max-width: 360px; width: 100%; }

/* ============================================================
   R2-③c お客様情報フォーム整形（設計 仕様抽出L329-362）
   ============================================================ */
.customer-info { margin: 0; }
/* 01-1: セクション見出し「お客様情報の入力」＝ダーク文字＋緑の下線（バナーではない） */
.customer-info__title {
  font-size: 1.5rem; font-weight: 700; color: #333;
  margin: 28px 0 8px; padding-bottom: 10px;
  border-bottom: 2px solid var(--estimate-green, #009944);
}
/* 01-1: 小見出し「お客様情報」＝緑の左縦バー */
.customer-info__subhead {
  font-size: 1.15rem; font-weight: 700; color: #333;
  margin: 16px 0 28px; padding-left: 12px;   /* ご選択内容と同じ上下余白 */
  border-left: 5px solid var(--estimate-green, #009944);
}
/* エラーメッセージ（文字色 #ff4081）。
   お客様ご指摘（2026-08-14）＝「背景も同様に」により背景を白へ。
   枠線も同じ見本に合わせ、エラー文字と同じ #ff4081 とする。
   ※共通の色変数（--estimate-pink）は必須バッジ・ピンクボタンでも使うため、定義は書き換えずここだけ指定する。 */
.customer-info__errors {
  border: 1px solid #ff4081;
  background: #fff; color: #ff4081;
  padding: 12px 16px; margin: 0 0 24px; border-radius: 4px;
}
.customer-info__errors p { margin: 0; font-weight: bold; }
.customer-info__errors ul { margin: 8px 0 0; padding-left: 1.2em; }

/* 01-1準拠: お客様情報は 表組み風の横並び（ラベル左固定幅／入力右幅広・各行に下罫線）。旧実装は縦積みだった。 */
.customer-info .form-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; margin: 0; padding: 18px 0; border-bottom: 1px solid #e5e5e5; }
.customer-info .form-label {
  flex: 0 0 220px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-weight: bold; font-size: 13px; color: #333; margin: 0; padding-top: 0; line-height: 1.5;
}
.customer-info .form-row__body { flex: 1 1 320px; min-width: 0; }
.customer-info .otp-inline { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; width: 100%; }
.customer-info .usage-purpose-options { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.customer-info .req {
  flex: 0 0 auto; align-self: center;   /* 必須ラベルを項目の上下中央に */
  display: inline-block; background: var(--estimate-pink, #e4007f); color: #fff;
  font-size: 11px; font-weight: bold; line-height: 1;
  padding: 4px 7px; border-radius: 3px; margin-left: 8px;
}
.customer-info input[type="text"],
.customer-info input[type="tel"],
.customer-info input[type="email"],
.customer-info select {
  width: 100%; max-width: none; box-sizing: border-box;
  padding: 11px 12px; font-size: 15px; color: #333;
  border: 1px solid #b5b5b5; border-radius: 4px; background: #fff;
}
.customer-info select {
  max-width: 300px;   /* ワンタイムキー入力欄(#otp-key)と同じ幅 */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;   /* 既定の矢印を消し緑chevronを表示 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%2300a23f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 38px;   /* 矢印の分の余白 */
}
.customer-info input::placeholder { color: #aaa; }
.customer-info input:focus,
.customer-info select:focus {
  outline: none; border-color: var(--estimate-green, #009944);
  box-shadow: 0 0 0 2px rgba(0,153,68,.15);
}
.customer-info input:disabled { background: #eee; color: #999; cursor: not-allowed; }
/* 入力欄直下のエラー文字色。エラー一覧と同じ #ff4081 */
.customer-info .field-error { color: #ff4081; font-size: 13px; margin: 6px 0 0; }

/* 姓名・セイメイ 横並び（入力列いっぱい） */
.customer-info .name-cols { display: flex; gap: 12px; max-width: none; }
.customer-info .name-cols input { flex: 1 1 0; max-width: none; }

/* ワンタイムキー認証ブロック（メール欄＋送信 / キー欄＋変更 は各行の .otp-inline で横並び。
   メール行/キー行は 01-1 どおり別々の .form-row otp-block に分割済み） */
/* メール欄は電話番号入力と同じ右端まで伸ばす（fill）／キー欄は狭め。ボタンは右端に寄せる(#11) */
.customer-info #otp-email { flex: 1 1 auto; width: auto; max-width: none; }
.customer-info #otp-key { flex: 0 0 auto; width: 300px; max-width: none; }   /* 元の幅に戻す（200→300px） */
.customer-info .otp-send-btn,
.customer-info .otp-change-btn {
  flex: 0 0 auto; white-space: nowrap;   /* 右寄せ(margin-left:auto)を解除＝入力欄のすぐ右に配置 */
  padding: 11px 18px; font-size: 14px; font-weight: bold; text-align: center;   /* テキスト中央揃え（お客様指定 2026-08-05） */
  border: none; border-radius: 4px; cursor: pointer; color: #fff;
}
.customer-info .otp-send-btn { background: var(--estimate-green, #009944); }
.customer-info .otp-change-btn { background: #888; min-width: 190px; }   /* 幅をもう少し大きく */
.customer-info .otp-send-btn:disabled,
.customer-info .otp-change-btn:disabled { background: #ccc; cursor: not-allowed; }
.customer-info .otp-message { margin: 8px 0 0; font-weight: bold; }
.customer-info .otp-block .note-text { font-size: 13px; color: #555; margin: 12px 0 0; }
/* メール行とキー行は 01-1 で1グループ表示＝間の罫線を消す（キー行の下罫線は残す） */
/* メール行とキー行の間にも他項目と同じ下線を入れる（旧: border-bottom:none で消していた） */
/* OTP行は入力欄の下に注意書きがあり縦に長い。ラベル/必須は「行全体の中央」ではなく
   「入力欄に上下中央」に合わせる＝行は上揃え、ラベルを入力欄と同じ高さ(46px)で中央化。 */
.customer-info .otp-block { align-items: flex-start; }
.customer-info .otp-block .form-label { min-height: 46px; }

/* ご利用用途 ＝ 枠付きボタン型ラジオ（01-1。選択中=緑枠+緑丸）。ネイティブradioを隠しCSSでカード化。
   ドット＝input:checked ~ mark（兄弟セレクタ・堅牢）、枠の緑化＝:has(:checked)（対応ブラウザ）。 */
.customer-info .radio-card {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-width: 140px; padding: 12px 16px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 14px; font-weight: normal; color: #333; cursor: pointer; background: #fff;
}
.customer-info .radio-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.customer-info .radio-card__mark {
  position: relative; flex: 0 0 auto; width: 16px; height: 16px;
  border: 1px solid #bbb; border-radius: 50%; background: #fff; box-sizing: border-box;
}
.customer-info .radio-card input:checked ~ .radio-card__mark { border-color: var(--estimate-green, #009944); }
.customer-info .radio-card input:checked ~ .radio-card__mark::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%; background: var(--estimate-green, #009944);
}
.customer-info .radio-card:has(input:checked) { border-color: var(--estimate-green, #009944); }
.customer-info .radio-card:focus-within { box-shadow: 0 0 0 2px rgba(0,153,68,.15); }

/* 確認ボタン（入力内容を確認する） */
.estimate-customer-section button[type="submit"].contact-btn {
  display: block; width: 100%; max-width: 400px; margin: 32px auto 0;
}

@media screen and (max-width: 767px) {
  /* SP幅では縦積みに戻す（ラベル上/入力下）＝設計7-3 */
  .customer-info .form-row { display: block; }
  .customer-info .form-label { flex: none; padding-top: 0; margin: 0 0 8px; }
  .customer-info .form-row__body { flex: none; }
  /* テキスト入力は全幅。ただし企業所在地/従業員数プルダウンは設計7-3どおり狭幅を維持（全幅にしない）。 */
  .customer-info input[type="text"],
  .customer-info input[type="tel"],
  .customer-info input[type="email"] { max-width: 100%; }
  .customer-info select { max-width: 60%; }
  /* 姓・名は縦積み（各行全幅） */
  .customer-info .name-cols { flex-direction: column; max-width: 100%; }
  .customer-info .name-cols input { max-width: 100%; }
  /* ワンタイムキー/メール: 入力欄とボタンを縦積み・全幅（設計7-3） */
  .customer-info .otp-inline { flex-direction: column; align-items: stretch; }
  .customer-info #otp-email,
  .customer-info #otp-key { width: 100%; max-width: 100%; }
  .customer-info .otp-send-btn,
  .customer-info .otp-change-btn { width: 100%; min-width: 0; }
}

/* SP残差修正（レビューC 2026-08-05）: 必須バッジをラベル左へ／全幅行の料金浮き解消 */
@media (max-width: 767px) {
  /* H-1: 必須バッジをラベルの左に（設計7-1/7-2/7-3）。DOMはラベル→バッジ順なので order:-1 で前出し。 */
  .estimate-field__label { justify-content: flex-start; }
  .estimate-field__label .req { order: -1; margin: 0 6px 0 0; }
  .customer-info .form-label { justify-content: flex-start; }
  .customer-info .req { order: -1; margin: 0 6px 0 0; }
  /* M-2: 全幅1列の選択肢行では強制改行(br.sp-only)不要＝料金が浮く崩れを回避し、ラベル＋料金を自然折返し。 */
  .line-card-select__option br.sp-only { display: none; }
  .line-card-select__option { flex-wrap: wrap; column-gap: 6px; }
  /* 諸注意事項: PC用の右94px paddingはSPで過大＝右に大きな余白。SPは対称paddingに。 */
  .estimate-notice { padding: 20px 16px; }
  /* SP本文の左右余白（設計7-x＝端に密着させない）。従来 .page-content に左右paddingが無く画面端まで詰まっていた。
     フルブリードのステップ(margin:calc(-50vw+50%))はこのpaddingを相殺して画面端まで届くので影響なし。 */
  .page-content { padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
  /* 合計金額表と明細表の外幅を一致させる。従来: 明細=table-layout:auto で内容次第560px超、合計金額表=fixed 560px固定 → 不一致。
     両表を同一幅(560px)・table-layout:fixed に固定し、横スクロール時も左右端を揃える。 */
  .estimate-preview__total,
  .estimate-preview__detail { width: 606px; table-layout: fixed; }
  /* 明細表の列幅（合計606px＝商品名200+最低利用期間66+数量48+初期費用146+月額費用146）。商品名は長い時折返し可。
     最低利用期間は「最低利/用期間」2行が入りきる幅に（52→66px。基底52pxはSPのfixedで切れるため上書き）。 */
  .estimate-preview__detail thead tr:first-child th:nth-child(1) { width: 200px; }
  .estimate-preview__detail thead tr:first-child th:nth-child(2) { width: 66px; }
  .estimate-preview__detail thead tr:first-child th:nth-child(4) { width: 146px; }
  .estimate-preview__detail thead tr:first-child th:nth-child(5) { width: 146px; }
  .estimate-preview__detail td.is-name { white-space: normal; }
  /* 別の端末ボタン: SP用全幅ルールがセレクタ不一致(.line-card-select__frame>)で効かず1/3幅のままだった→全幅に（設計7-2）。 */
  .device-change-btn { width: 100%; margin: 0; }
  /* 選択中の端末(SP専用): 端末名(上・全幅1行)→ボタン(下) の縦積み。PCは横並びのまま(基底)＝PCは触らない。 */
  #select-card-device-model-container .estimate-field__options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  /* 回線数(SP): オプションサービスの選択肢ボタン(SPは全幅・高さ54px)と同じ高さ・横幅に。「回線」テキスト込みで全幅。 */
  .line-count-card__field { width: 100%; }
  .line-count-card__input-wrap { flex: 1 1 auto; width: auto; min-width: 0; }
  .line-count-card__input { height: 54px; font-size: 0.95rem; }
  .line-count-card__unit { font-size: 0.95rem; }
}