/*
 * Canvas（がん保険）シミュレーションページ専用スタイル
 * canvas/simulation.html からのみ読み込む。sub.css（11商品共有）は一切触らない。
 * クラス名は canvas-sim- 系で統一し、既存の共有クラスと衝突させない。
 * ブレークポイントは既存に合わせて SP上限768.98px / PC769px。
 */

/* ==== 保険料率カード（パンフレットPOINT5のアイコン＋HTMLテキスト） ==== */
.canvas-rate-cards {
  display: flex;
  flex-direction: row;
  gap: 10px;
  width: 100%;
}
.canvas-rate-card {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  background: #fff;
  border: 2px solid var(--sim-line);
  border-radius: 8px;
  opacity: .85;
  transition: background-color .15s, opacity .15s;
}
/* ラベル帯・強調色はパンフレット図版から実測した色。
   カードの外枠は商品色を当てず、選択状態だけを示す（特約のピルと同じ視覚言語）。
   常に色枠が出ていると、どちらを選んでいるのか枠から読み取れなくなるため。 */
.canvas-rate-card--nonsmoker .canvas-rate-card__label { background: #cce7d4; }
.canvas-rate-card--smoker .canvas-rate-card__label { background: #cfdeef; }
.canvas-rate-card--nonsmoker .canvas-rate-card__text strong { color: #00a550; }
.canvas-rate-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}
.canvas-rate-card__summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.canvas-rate-card__icon {
  display: block;
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.canvas-rate-card__text {
  min-width: 0;
  font-size: 1.4rem;
  line-height: 1.5;
}
.canvas-rate-card__text strong {
  display: block;
  font-weight: 700;
}
.canvas-rate-card__label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.canvas-rate-card:has(input:checked) {
  border-color: var(--sim-control);
  background: var(--sim-tint);
  opacity: 1;
}
.canvas-rate-card input {
  position: static;
  opacity: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #8a98a3;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: border .15s;
}
.canvas-rate-card input:checked {
  border: 6px solid var(--sim-control);
}
.canvas-rate-card input:focus-visible {
  outline: none;
}
.canvas-rate-card:focus-within {
  outline: 2px solid var(--sim-control);
  outline-offset: 2px;
}

/* SPではカードを1列化し、アイコン横に文言とラベルを並べて高さを抑える */
@media (max-width: 768.98px) {
  .canvas-rate-cards {
    flex-direction: column;
    gap: 8px;
  }
  .canvas-rate-card {
    flex: none;
    width: 100%;
    max-width: none;
    padding: 8px 10px;
    gap: 8px;
  }
  .canvas-rate-card__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
  }
  .canvas-rate-card__summary {
    display: contents;
  }
  .canvas-rate-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    flex-basis: auto;
    width: 56px;
    height: 56px;
  }
  .canvas-rate-card__text {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.3rem;
    line-height: 1.35;
    text-align: left;
  }
  .canvas-rate-card__label {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    width: auto;
    padding: 1px 8px;
    font-size: 1.3rem;
    line-height: 1.5;
    border-radius: 4px;
  }
}

/* ==== プラン選択タブ ==== */
.canvas-sim-body {
  --canvas-sticky-offset: 0px;
}
.canvas-plan-select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  text-align: center;
}
/* 色は他商品の sim（sub.css .sim-page .price-info__header-item）と同じ。枠は元の色、選択中は白文字が読める
   一段濃い色（青 #2563b5・桃 #d0365a・緑 #558010＝白文字 4.5:1 以上）で塗る */
.canvas-plan-select__item {
  --canvas-plan-color: #2563b5;
  --canvas-plan-active: #2563b5;
  position: relative;
  display: flex;
  min-width: 0;
}
.canvas-plan-select__item:nth-child(2) { --canvas-plan-color: #ff7f95; --canvas-plan-active: #d0365a; }
.canvas-plan-select__item:nth-child(3) { --canvas-plan-color: #93bf39; --canvas-plan-active: #558010; }
.canvas-plan-select__item input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.canvas-plan-select__label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  min-height: 52px;
  padding: 10px 5px;
  border: 2px solid var(--canvas-plan-color);
  border-radius: 8px;
  background: #fff;
  color: var(--sim-ink);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.canvas-plan-select__item input:checked + .canvas-plan-select__label {
  border-color: var(--canvas-plan-active);
  background: var(--canvas-plan-active);
  color: #fff;
}
.canvas-plan-select__item input:focus-visible + .canvas-plan-select__label {
  outline: 2px solid var(--canvas-plan-active);
  outline-offset: 2px;
}
.canvas-plan-select__name {
  display: block;
  min-width: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 374.98px) {
  .canvas-plan-select__label { padding: 8px 3px; }
  .canvas-plan-select__name { font-size: 1.3rem; }
}
/* ==== 月払保険料（追従） ==== */
.canvas-price-bar {
  position: sticky;
  top: var(--canvas-sticky-offset);
  /* 2026-09-14: 40→1。SPの追従バー（.ctaBtn-box--v2 z-index:2）やページトップFAB（2）より
     後ろにする。枠が固定される前に画面下へ来たとき、追従バーが枠の裏に隠れていた。
     選択肢（ラジオは position:absolute・z-index auto）より前面は 1 で足りる */
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: #fffdf3;
  /* 枠線は選択状態、影は追従レイヤーを示す視覚言語として分離する */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  border-radius: 4px;
  padding: 10px 16px;
  transition: background-color .25s ease;
}
.canvas-price-bar__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 5.1rem;
}
.canvas-price-bar.is-flash {
  background-color: #fff3d6;
}
.canvas-price-bar__label {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-size: 1.3rem;
  white-space: nowrap;
}
@media (max-width: 359.98px) {
  .canvas-price-bar__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}
.canvas-price-bar__value {
  margin: 0;
  white-space: nowrap;
}
.canvas-price-bar__value .num {
  font-size: 3.0rem;
  font-weight: 700;
  color: #e64b4b;
  display: inline-block;
  transition: transform .2s ease;
}
.canvas-price-bar__value .num.is-pulse {
  transform: scale(1.1);
}
@media (prefers-reduced-motion: reduce) {
  .canvas-price-bar__value .num { transition: none; }
  .canvas-price-bar__value .num.is-pulse { transform: none; }
}
@media (min-width: 769px) {
  .canvas-sim-body { --canvas-sticky-offset: var(--hdr-fixed-h, 0px); }
  .canvas-price-bar__label { font-size: 1.6rem; }
  .canvas-price-bar__value .num { font-size: 3.6rem; }
}

/* ==== オプション見出し ==== */
.canvas-opt-divider {
  text-align: center;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 10px;
  margin-top: 16px;
  margin-bottom: 10px;
  background: #007f41;
  color: #fff;
}

/* ==== オプション行リスト（主契約・払込期間・特約7つ・払込免除特則） ==== */
.canvas-opt-row-list {
  border: 0;
}
.canvas-opt-row {
  border: 1px solid #dfe5ea;
}
.canvas-opt-row:not(:last-child) { margin-bottom: 10px; }
.canvas-opt-row__top {
  display: flex;
  flex-wrap: nowrap;
}
.canvas-opt-row.is-disabled .canvas-opt-row__label {
  background: #ececec;
  color: #888;
}
.canvas-opt-row__label {
  position: relative;
  /* SPのラベル列。特約名は1文字も変更できないので広く取りたいが、広げるほど
     選択肢側が痩せて「選択肢名＋差額」が1行に収まらなくなる。
     120px（文字96px）は、選択肢が全て1行に収まる上限として実測で決めた値。 */
  flex: 0 0 120px;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 14px 34px 14px 12px;
  font-weight: 700;
  font-size: 1.3rem;
  background: var(--sim-tint, #eaf5ef);
  border: none;
  border-left: 4px solid var(--sim-accent, #007f41);
  cursor: pointer;
  font-family: inherit;
  color: var(--sim-ink, #1f2a33);
}
.canvas-opt-row__label--plain { cursor: default; }
.canvas-opt-row__label:focus-visible {
  outline: 2px solid var(--sim-accent, #007f41);
  outline-offset: -2px;
}
.canvas-opt-row__label p { margin: 0; }
/* 他商品（cure/simulation.html等）の .simulation-note__mark と同じ見た目：背景なし・fa-circle-questionの単色グレー */
.canvas-opt-row__help {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  line-height: 1;
  color: #8a98a3;
  pointer-events: none;
}
.canvas-opt-row__help i { display: none; }
.canvas-opt-row__help i.active { display: block; }
.canvas-opt-row__choices {
  flex: 1 1 190px;
  /* flex アイテムの既定 min-width:auto だと、長い選択肢名より狭くならず
     320px で横スクロールが出る */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
/* 治療給付型／診断給付型の金額グループは同じセルに重ね、選択中でない方は visibility:hidden。
   枠の高さは常に高い方（治療給付型の4金額）になり、タイプを切り替えても下の行が動かない。
   visibility:hidden の radio は押せず、フォーカス・読み上げの対象にもならない */
#row-course .canvas-opt-row__choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
}
.canvas-main-type-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.canvas-main-type-card {
  position: relative;
  /* ラジオの z-index:1 をカード内に閉じ込める。無いと追従する保険料の帯（z-index:1・DOMでは前）の上にラジオが出る */
  isolation: isolate;
  display: flex;
  min-width: 0;
}
.canvas-main-type-card input {
  position: absolute;
  z-index: 1;
  top: 14px;
  left: 12px;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #8a98a3;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: border .15s;
}
.canvas-main-type-card input:checked {
  border: 6px solid #007f41;
}
.canvas-main-type-card__label {
  display: flex;
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  min-height: 72px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 8px 8px 8px 40px;
  border: 2px solid #dfe5ea;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.canvas-main-type-card input:checked + .canvas-main-type-card__label {
  border-color: #007f41;
  background: #eaf5ef;
}
.canvas-main-type-card input:focus-visible {
  outline: none;
}
.canvas-main-type-card input:focus-visible + .canvas-main-type-card__label {
  outline: 2px solid #007f41;
  outline-offset: 2px;
}
.canvas-main-type-card__image-wrap {
  display: flex;
  box-sizing: border-box;
  flex: 0 1 170px;
  width: 170px;
  min-height: 38px;
  align-items: center;
  justify-content: center;
}
/* 2枚を同じ倍率で縮小するため、共通幅の枠に元画像幅の比率で配置する。 */
.canvas-main-type-card__image-frame {
  display: flex;
  width: 170px;
  max-width: 100%;
  justify-content: center;
}
.canvas-main-type-card__image {
  display: block;
  max-width: 100%;
  height: auto;
}
.canvas-main-type-card__image--treatment { width: 100%; }
.canvas-main-type-card__image--diagnosis { width: 98.529%; }
.canvas-main-type-card__description {
  flex: 1 0 8em;
  min-width: 0;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: normal;
}
.canvas-course-group {
  grid-area: 1 / 1;
  min-width: 0;
}
.canvas-course-group[hidden] {
  display: block;
  visibility: hidden;
}
.canvas-course-group__benefit {
  margin: 0 0 6px;
  color: #5f6f7a;
  font-size: 1.3rem;
  line-height: 1.4;
  word-break: keep-all;
}
.canvas-course-group__choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.canvas-opt-choice {
  position: relative;
  /* 2026-09-14: PC の2列グリッドで隣の選択肢が2行になると、この枠だけ行の高さに伸びて
     ラベル（枠線＝クリック範囲）が短いまま残り、フォーカス枠とずれていた。ラベルを枠いっぱいに伸ばす */
  display: flex;
}
.canvas-opt-choice__pill { flex: 1 1 auto; }
.canvas-opt-choice input {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid #8a98a3;
  border-radius: 50%;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: border .15s;
  cursor: pointer;
}
.canvas-opt-choice input:checked {
  border: 6px solid var(--sim-control);
}
.canvas-opt-choice input:focus-visible {
  outline: none;
}
.canvas-opt-choice:focus-within {
  border-radius: 7px;
  outline: 2px solid var(--sim-control);
  outline-offset: 2px;
}
.canvas-opt-choice__pill {
  display: flex;
  align-items: center;
  /* 差額は保障金額の直後に置く。space-between だと幅が余るほど右端へ離れ、
     金額と差額が別々の情報に見えてしまう（SP/PCとも同じ扱い）。
     狭い幅で差額を次行へ送る flex-wrap は後段でまとめて指定している。 */
  justify-content: flex-start;
  gap: 8px;
  min-height: 42px;
  border: 2px solid #dfe5ea;
  border-radius: 7px;
  padding: 6px 14px 6px 44px;
  font-size: 1.35rem;
  font-weight: 700;
  /* 2026-09-14: 本文の行間(1.7)は2段ピル（選択肢名＋加算額）には広すぎるので詰める。
     1行のピルは min-height で高さが変わらない */
  line-height: 1.4;
  background: #fff;
}
.canvas-opt-choice input:checked + .canvas-opt-choice__pill {
  border-color: #007f41;
  background: #eaf5ef;
}
.canvas-opt-choice input:disabled + .canvas-opt-choice__pill {
  opacity: .5;
}
.canvas-opt-choice input:disabled {
  border-color: #c9d2d9;
  cursor: not-allowed;
}
/* 差額の桁数は料率データ次第で、主契約のコース変更（10万円→30万円）では5桁もあり得る。
   選択肢名と差額は途中で折り返させず、1行に入りきらないときだけ差額を次の行へ落とす。
   これで桁が増えても「100万／円」のような語中改行にはならない。 */
.canvas-opt-choice__pill { flex-wrap: wrap; row-gap: 2px; }
.canvas-opt-choice__pill > span,
.canvas-opt-choice__pill .course-amount { white-space: nowrap; }
.course-amount {
  font-size: 1.5rem;
  font-weight: 700;
}
.canvas-opt-choice__delta {
  font-size: 1.3rem;
  font-weight: 700;
  white-space: nowrap;
  flex: none;
}
/* 2026-09-14: 特約の加算額はブランド色で強調、主契約・払込期間・免除特則の総額はサイズ同じで色だけ控えめ。マイナス表示は廃止 */
.canvas-opt-choice__delta.is-add { color: #007f41; }
.canvas-opt-row__note {
  color: #d00000;
  font-size: 1.3rem;
  padding: 0 10px 10px;
}
.canvas-opt-row__note[hidden] { display: none; }

/* 2026-09-14: 「オプション」帯の中の注記（＋の金額の意味） */
.canvas-opt-divider__note {
  display: block;
  margin-top: 2px;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}
.canvas-opt-divider__note b { font-weight: 700; }

/* 2026-09-14: 選んだプランの内容（主契約＋つけた特約の加算額＋合計） */
.canvas-plan-summary {
  margin: 24px 0 8px;
  border: 2px solid #007f41;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.canvas-plan-summary[hidden] { display: none; }
.canvas-plan-summary__ttl {
  margin: 0;
  padding: 10px 14px;
  background: #007f41;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
}
.canvas-plan-summary__cond {
  margin: 0;
  padding: 8px 14px 0;
  font-size: 1.3rem;
  color: #5b6a61;
}
.canvas-plan-summary__list {
  list-style: none;
  margin: 0;
  padding: 6px 14px 0;
}
.canvas-plan-summary__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #e6ebe7;
  font-size: 1.4rem;
}
.canvas-plan-summary__list li:last-child { border-bottom: 0; }
.canvas-plan-summary__name { color: #26332b; }
.canvas-plan-summary__name small {
  display: block;
  font-size: 1.2rem;
  color: #5b6a61;
}
.canvas-plan-summary__amount {
  white-space: nowrap;
  font-weight: 700;
  color: #26332b;
}
.canvas-plan-summary__amount.is-add { color: #007f41; }
.canvas-plan-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 6px 0 0;
  padding: 12px 14px;
  background: #eaf5ef;
  font-size: 1.5rem;
  font-weight: 700;
  color: #26332b;
}
.canvas-plan-summary__total small {
  margin-left: 6px;
  font-size: 1.2rem;
  font-weight: 400;
  color: #5b6a61;
}
.canvas-plan-summary__total .num {
  font-size: 2.6rem;
  font-weight: 700;
  color: #d00000;
}
.canvas-plan-summary__total .unit {
  font-size: 1.4rem;
  color: #d00000;
}
.canvas-plan-summary__comparisons {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 12px 14px;
  border-top: 1px solid #cbded2;
  box-sizing: border-box;
}
.canvas-plan-summary__comparisons[hidden] { display: none; }
.canvas-plan-summary__comparison {
  flex: 0 1 calc((100% - 8px) / 2);
  min-width: 0;
  margin: 0;
  padding: 8px 6px;
  border-radius: 6px;
  background: #f4f8f5;
  box-sizing: border-box;
  text-align: center;
}
.canvas-plan-summary__comparison-name {
  display: block;
  color: #5b6a61;
  font-size: 1.2rem;
  line-height: 1.4;
  /* ラベルが「基本プランなら」→「基本プラン（治療給付型）なら」と伸びたため nowrap を解除。
     金額側（.canvas-plan-summary__comparison-amount）は途中で折れてほしくないので nowrap のまま。 */
  overflow-wrap: anywhere;
}
/* 「（治療給付型）」は用語なので途中で折らない。折り返しは「基本プラン」との間で起きる */
.canvas-plan-summary__comparison-type { white-space: nowrap; }
.canvas-plan-summary__comparison-amount {
  display: block;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.canvas-plan-summary__comparison-amount .num {
  color: #d00000;
  font-size: 2rem;
  font-weight: 700;
}
.canvas-plan-summary__comparison-amount .unit {
  color: #d00000;
  font-size: 1.2rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  /* PC: 選択肢の行と同じ幅で、特約ピル（1.7rem）に見合う文字サイズにする */
  .canvas-plan-summary { margin: 28px 0 8px; }
  .canvas-plan-summary__ttl { padding: 12px 20px; font-size: 2rem; }
  .canvas-plan-summary__cond { padding: 12px 20px 0; font-size: 1.6rem; }
  .canvas-plan-summary__list { padding: 8px 20px 0; }
  .canvas-plan-summary__list li { padding: 12px 0; font-size: 1.8rem; }
  .canvas-plan-summary__name small { margin-top: 2px; font-size: 1.5rem; }
  .canvas-plan-summary__total { padding: 16px 20px; font-size: 1.9rem; }
  .canvas-plan-summary__total small { font-size: 1.5rem; }
  .canvas-plan-summary__total .num { font-size: 3.6rem; }
  /* 2026-09-14: PC は「項目名｜保障内容｜金額」の3列に並べる（SP は項目名の下に保障内容を置く2段のまま）。
     .canvas-plan-summary__name を display:contents にして、項目名のテキストと small（保障内容）を別々の列に落とす */
  .canvas-plan-summary__list li {
    display: grid;
    /* 金額列は固定幅にして、行ごとに列の開始位置がずれないようにする */
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 150px;
    column-gap: 20px;
    align-items: baseline;
  }
  .canvas-plan-summary__name { display: contents; }
  /* 保障内容の列は項目名と同じ大きさ（色だけ薄く）。SP の「小さな補足」は PC の3列では列そのものになるため */
  .canvas-plan-summary__name small { display: block; margin: 0; font-size: 1.8rem; }
  .canvas-plan-summary__amount { grid-column: 3; text-align: right; }
  .canvas-plan-summary__total .unit { font-size: 1.6rem; }
  .canvas-plan-summary__comparisons { gap: 12px; padding: 14px 20px; }
  .canvas-plan-summary__comparison { flex-basis: calc((100% - 12px) / 2); padding: 10px 12px; }
  .canvas-plan-summary__comparison-name { font-size: 1.5rem; }
  .canvas-plan-summary__comparison-amount .num { font-size: 2.8rem; }
  .canvas-plan-summary__comparison-amount .unit { font-size: 1.5rem; }
}
.canvas-opt-row__detail {
  padding: 10px;
}
.canvas-opt-row__detail[hidden] { display: none; }
.canvas-opt-row__detail .simple-note__cont p { margin: 0 0 8px; }
.canvas-opt-row__detail .simple-note__cont p:last-child { margin-bottom: 0; }

/* SPでは丸を含む選択肢列を親幅まで縮め、コース補足文のはみ出しを防ぐ */
@media (max-width: 768.98px) {
  .canvas-opt-row__label { padding-right: 12px; }
  /* 主契約の金額は選択肢列（320pxで約154px）に2列が入らないので1列 */
  .canvas-course-group__choices { grid-template-columns: minmax(0, 1fr); }
  .canvas-main-type-cards { gap: 6px; }
  .canvas-main-type-card input {
    top: 12px;
    left: 8px;
    width: 18px;
    height: 18px;
  }
  .canvas-main-type-card input:checked { border-width: 5px; }
  .canvas-main-type-card__label {
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
  }
  /* SP: ラジオと重ならない余白を画像の左ではなく上に取り、画像をカード幅いっぱい（最大136px）に使う */
  .canvas-main-type-card__image-wrap {
    flex: none;
    width: 100%;
    min-height: 0;
    padding-top: 22px;
  }
  .canvas-main-type-card__image-frame { width: 136px; }
  .canvas-main-type-card__description {
    flex: none;
    font-size: 1.2rem;
    line-height: 1.45;
    text-align: center;
  }
  /* インライン要素間の改行空白を消し、「？」をラベル末尾に収める */
  .canvas-opt-row__label-inner { min-width: 0; font-size: 0; }
  .canvas-opt-row__label p { display: inline; font-size: 1.3rem; }
  .canvas-opt-row__help {
    position: static;
    display: inline-block;
    /* アイコンだけの改行を避け、右パディング内に最大8px収める */
    margin-right: -8px;
    margin-left: 4px;
    transform: none;
    vertical-align: middle;
  }
  .canvas-opt-row__choices { min-width: 0; padding: 6px; }
  .canvas-opt-choice input { left: 5px; }
  /* 選択肢名と差額を1行に収める。ラジオと左右の余白を詰めて文字領域を稼ぐ。
     ラベル列の幅（120px）とセットで成立する（.canvas-opt-row__label 参照）。 */
  .canvas-opt-choice__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 28px;
    text-align: left;
  }
  /* 2026-09-14: 60〜70代の読みやすさを優先し、下限を11px→13pxに引き上げた。
     320pxで選択肢名と1行に収まらない場合は、文字を縮めずにピルの flex-wrap で
     加算額を次の行へ落とす（2段表示）。実測: 320〜393px=13px / 424px以上=14px。 */
  .canvas-opt-choice__delta { flex: none; font-size: clamp(1.3rem, 3.3vw, 1.4rem); }
}
/* 320px級では「オプション」帯の注記（21文字）が「す。」だけ次行に落ちるので、
   帯の左右余白を詰め、字間を少し狭めて1行に収める。 */
@media (max-width: 359.98px) {
  .canvas-opt-divider { padding-left: 4px; padding-right: 4px; }
  .canvas-opt-divider__note { letter-spacing: -0.02em; }
}
@media (max-width: 768.98px) {
  .canvas-opt-choice__pill > :first-child { min-width: 0; }
  .canvas-opt-choice__delta:empty { display: none; }
}

@media (min-width: 769px) {
  /* 372px は 980px 時の実測値。コンテナが 980px 未満（769〜979px）のときは
     ラベルを縮めて選択肢列を確保する */
  .canvas-opt-row__label { flex: 0 1 372px; width: auto; max-width: 372px; font-size: 1.8rem; padding-left: 16px; }
  .canvas-opt-row__help { font-size: 2rem; right: 12px; }
  /* 2026-09-16: 第一ネオの sim（PC実測）は選択セルの padding 35px 20px・選択肢 57.2px に対し、
     Canvas は padding 8px・52px で選択肢が枠線に密着していた。35px までは行かず 16px に留める
     （35px にすると選択エリアが +500px 以上になる）。 */
  .canvas-opt-row__choices {
    display: grid;
    /* minmax(0,…) が無いとトラックが最小コンテンツ幅より縮まず、769px で横スクロールが出る */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
    align-content: flex-start;
  }
  .canvas-course-group__choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .canvas-opt-choice__pill { min-height: 56px; font-size: 1.7rem; }
  /* 選択肢名(1.7rem)より一段小さくして副次情報であることを示す。
     ⚠️ 旧コメントに「PCはピルの文字領域が184pxあり、4桁でも1行に収まる（実測）」とあったが、
     2026-09-16 の実測では 184px の時点で既に6件が次行に落ちており成立していなかった
     （選択セルの padding を 16px にして 174.9px になった後は5件。悪化はしていない）。 */
  .canvas-opt-choice__delta { font-size: 1.6rem; }
}

/* ==== sim直下CTAのリード（sub.css の .sim-cta__lead を上書き） ====
   sub.css は11商品共有のため編集せず、後読みの当ファイルで Canvas だけ調整する。
   既定はPC15px/SP14pxで、いずれも自分が導くボタン文字(PC18px/SP17px)より小さく
   見出しとして弱かった。PC22px/SP18pxに上げる。SPは折り返す幅なので balance で二分する。 */
.sim-page .sim-cta__lead { font-size: 1.8rem; text-wrap: balance; }
@media (min-width: 769px) {
  .sim-page .sim-cta__lead { font-size: 2.2rem; }
}

/* ==== sim 直下 CTA のキャンペーン見出し ====
   保険料一覧（premium.html）の .premium-age-cta と同じ体裁にそろえる。
   premium-tables.css 側の指定は .premium-all--canvas .premium-age-cta 配下でしか効かないため、
   同等の値をここに持つ（別担当のファイルに依存させない）。
   ピンク＋斜線の装飾自体は .main_area_nav_txt（共有CSS）。ここではサイズだけ CTA 枠に合わせる。 */
.sim-cta__campaign { margin: 0 0 10px; font-size: 2.4rem; line-height: 1.25; }
.sim-cta__campaign span { font-size: 1.6rem; }
@media screen and (max-width: 768.98px) {
  .sim-cta__campaign { margin: 0 0 8px; font-size: 1.8rem; }
  .sim-cta__campaign span { font-size: 1.4rem; }
}
/* 320px では「ハーゲンダッツプレゼント」に 216px 必要だが、p は inline-block で
   左右 23.4px の padding（ピンクの斜線装飾）を持つため文字領域が 200px しかなく、
   「ト」が1文字だけ次行に落ちる。斜線は装飾なので詰めず、文字サイズ側で合わせる（16px＝192px）。 */
@media screen and (max-width: 374.98px) {
  .sim-cta__campaign { font-size: 1.6rem; }
}

/* ==== sim 直下 CTA：申込導線と電話導線を別の枠に分ける ====
   sub.css の .sim-page .sim-cta は薄い地の箱1枚に全部を載せるため、赤枠・白地を自前で持つ
   .cta-tel が入れ子に見えていた。外側の地を外し、申込導線（リード＋2ボタン）だけを箱に入れ直す。
   ページ下部の CTA パネル（cta-panel__head → cta-panel__box → cta-tel）と同じ構造になる。
   sub.css は11商品共有なので触らず、canvas-sim.css 側で上書きする（premium.html は
   canvas-sim.css を読まないので、保険料一覧の .sim-cta には影響しない）。 */
.sim-page .sim-cta { padding: 0; background: none; }
.sim-page .sim-cta__apply {
  padding: 18px 16px;
  background: var(--sim-tint, #f3f7fb);
  border-radius: 6px;
}
@media screen and (max-width: 768.98px) {
  .sim-page .sim-cta { padding: 0; }
  .sim-page .sim-cta__apply { padding: 14px 12px; }
}

/* 上下の間隔。sub.css は .sim-page .sim-cta に margin-top 20px(PC)/16px(SP)、
   common.css は .cta-tel に margin-top 20px(PC)/16px(SP) を当てている。
   どちらも詰まって見えるので canvas だけ広げる（共有CSSは触らない）。 */
.sim-page .sim-cta { margin-top: 32px; }
.sim-page .sim-cta__tel { margin-top: 28px; }
@media screen and (max-width: 768.98px) {
  .sim-page .sim-cta { margin-top: 24px; }
  .sim-page .sim-cta__tel { margin-top: 20px; }
}
/* 320px では「がん保険Canvas[キャンバス]を」に 257px 必要だが使える幅が 250.4px しかなく、
   6.6px 足りずに「キャンバス」の途中で折れて「ャ」が行頭に来ていた（小書き仮名の行頭禁則にも反する）。
   17px なら 242.7px で1行に収まる。 */
@media screen and (max-width: 374.98px) {
  .sim-page .sim-cta__lead { font-size: 1.7rem; }
}

/* 320px では「電話で資料請求・お問い合わせ」に 280px 必要だが使える幅が 246.7px しかなく、
   「お問い合／わせ」と途中で折れていた。16px なら 224px で収まる。
   共有部品を site 全体で変えたくないので、sim 直下の電話ブロックだけに当てる
   （.sim-page .cta-tel__head にするとページ下部CTAも変わり、canvas-sim.css を読まない
   premium.html や他ページの同じ部品と食い違う）。 */
@media screen and (max-width: 374.98px) {
  .sim-page .sim-cta__tel .cta-tel__head { font-size: 1.6rem; }
}

/* PC でもカードの中身を SP と同じ配置にする。
   従来の PC は content が縦並びで、幅いっぱいのラベル帯が画像の下に敷かれるため
   カード高さが 120.6px あった（SP は画像の右にバッジとして置くので 80.2px）。
   配置だけ SP に合わせ、文字サイズは PC の値（本文 1.4rem / ラベル 1.5rem）を保つ。
   769〜979px も同じ配置にするが、そのままだと2枚横並びでカード幅が 183〜236px しかなく
   中身が入らないため、下のブロックで縦積みにしている。 */
@media screen and (min-width: 769px) {
  .canvas-rate-card__content {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    align-items: center;
  }
  .canvas-rate-card__summary { display: contents; }
  .canvas-rate-card__icon { grid-column: 1; grid-row: 1 / span 2; flex-basis: auto; }
  .canvas-rate-card__text { grid-column: 2; grid-row: 1; text-align: left; }
  .canvas-rate-card__label {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    width: auto;
    padding: 2px 10px;
  }
}

/* 769〜979px は2枚を横並びにするとカード幅が 183〜236px しかなく、
   アイコン・文言・ラベルが入りきらない（実測で 900px のカードが 148.6px、769px で 190.6px）。
   SP と同じく縦積みにして、1枚あたりの幅を確保する。 */
@media screen and (min-width: 769px) and (max-width: 979.98px) {
  .canvas-rate-cards { flex-direction: column; gap: 8px; }
  .canvas-rate-card { flex: none; width: 100%; max-width: none; }
}

/* 主契約タイプのカードの見出し。カードには「治療給付型」「診断給付型」と書いてあるが、
   それが主契約のタイプだと分からないという指摘（2026-09-16）。ma_to20 は見出し側へ移した。 */
.canvas-main-type-lead {
  margin: 20px 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sim-ink, #1f2a33);
}
@media screen and (max-width: 768.98px) {
  .canvas-main-type-lead { margin: 16px 0 6px; font-size: 1.4rem; }
}

/* 「プランを選択してください」の上余白。
   共有の .ma_to30 は reset.css で PC `3em !important` / SP `calc(0em * 0.65) !important` と
   定義されており、**SPでは文字どおり 0** になる（実測：PC 48px / SP 0px）。
   !important 付きなので上書きも面倒。よって .ma_to30 への依存をやめ、ここで両方の値を持つ。 */
.canvas-plan-head { margin-top: 48px; }
@media screen and (max-width: 768.98px) {
  .canvas-plan-head { margin-top: 28px; }
}

/* ==== SP の選択肢の当たり判定と間隔（2026-09-16）====
   第一ネオの sim（https://neofirst.eco-hoken.jp/iryo/simulation.html）を390pxで実測すると
   選択肢の高さ 46.6px・選択肢どうしの間隔 10px。Canvas は 42px / 6px で、
   42px は iOS のタップ領域の推奨最小 44px を下回っていた。ここは選択肢を何度も押す画面なので合わせる。
   横方向（padding・font-size）は「選択肢名と差額を1行に収める」設計
   （.canvas-opt-choice__pill のコメント参照）を壊すため触らない。 */
@media screen and (max-width: 768.98px) {
  .canvas-opt-choice__pill { min-height: 46px; }
  .canvas-opt-row__choices { gap: 10px; }
  .canvas-course-group__choices { gap: 10px; }
}

/* ==== 「基本・充実プランは治療給付型」の明示（2026-09-16 レビュー指摘）====
   診断給付型を選んだあとに基本／充実プランへ切り替えると主契約タイプが治療給付型へ戻るが、
   それに気づきにくいという指摘。タブと比較ブロックの両方でタイプを明示する。 */
/* タブを大きくして、基本・充実プランが治療給付型であることを併記する。
   ⚠️ 一度カードと同じ画像（img_maintype_chiryo.png）を入れたが取りやめた。
   あの画像は白いカードに 136x35 で置く前提のロックアップで、
   ① 濃い文字のラスターなので選択中（濃い背景）で沈み、白地チップを敷く回避が要る
      → 青の中に白が抜けたように見える
   ② テキストなら color を継承して2状態とも自動で正しくなる
   ③ ボタンの中の枠付き要素は「別のボタン」に見えて階層を誤らせる
   という理由でテキストに戻した。 */
.canvas-plan-select__label { min-height: 68px; padding: 12px 6px; }
.canvas-plan-select__type {
  display: block;
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  opacity: .9;
}
@media screen and (max-width: 374.98px) {
  .canvas-plan-select__type { font-size: 1.1rem; }
}

/* ==== 「自由に設計」への自動切替を知らせる一時表示 ====
   保険料バー（position:sticky＝配置の基準になる）の中に absolute で置き、バーの真下に出す。
   バーに追従するので画面外へ出ず、金額が変わった直後に目が向いている位置に出せる。
   流し込みの高さを変えないので本文もずれない。pointer-events:none で操作の邪魔をしない。 */
.canvas-plan-toast {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 6px 0 0;
  padding: 8px 12px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #1f2a33;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.canvas-plan-toast[hidden] { display: none; }
.canvas-plan-toast.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .canvas-plan-toast { transition: none; }
}
@media screen and (max-width: 374.98px) {
  .canvas-plan-toast { font-size: 1.2rem; padding: 7px 10px; }
}