/*!
 * 入院費シミュレーション ― カマチグループのテーマ向け
 *
 * テーマのクラス（page-sec / blks-N / heading / txt）に乗せる版。
 * 新宇都宮の pages.css にあった実装を、全院で使えるように取り出したもの。
 * 変えたのは3点だけ。
 *   1. .su-sim-page → .sim-page（新宇都宮の接頭辞を外した）
 *   2. .page-sec--guide-1 に依存しない（あれは新宇都宮にしか無いため）
 *   3. キーカラーを --key-color から拾い、明るい色でも読めるように落とす
 */

.sim-page {
  /* テーマの base.css が :root で --key-color を定義していれば拾う。
     無い院では既定色になるので、ショートコードの key 属性で渡す。 */
  --sim-key: var(--key-color, #1f4e5f);

  --blue: var(--sim-key);        /* 線・枠・選択中の丸 */
  --blue-text: var(--sim-key);   /* 文字。下で読める濃さに落とす */
  --pale-blue: #eff7ff;
  --line: #d6d6d6;
  --gray: #7e7e7e;
}

/* キーカラーは院ごとに明るさが大きく違う（濃紺からピンクまで）。
   淡色は薄めて、文字は暗くして、どの色でも読める範囲に収める。 */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .sim-page {
    --pale-blue: color-mix(in srgb, var(--sim-key) 8%, #fff);
    --blue-text: color-mix(in srgb, var(--sim-key) 70%, #000);
  }
}

.sim-page * {
  box-sizing:border-box;
}

.sim-page button, .sim-page input {
  font:inherit;
}

.sim-page .sim-heading {
  margin:0 0 25px;
  padding:10px 15px;
  font-size:18px;
  font-weight:700;
  line-height:1.45;
  background:var(--pale-blue);
  border-left:5px solid var(--blue);
}

.sim-page form > section {
  margin-top:60px;
}

.sim-page form > section:first-of-type {
  margin-top:70px;
}

.sim-page .question-block {
  padding:0 15px;
}

.sim-page .radio-list {
  display:grid;
  gap:16px;
}

.sim-page .radio-list label {
  width:fit-content;
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  line-height:1.8;
}

.sim-page .radio-list.priced-options label {
  width:min(520px,100%);
}

.sim-page .radio-list input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.sim-page .radio-list label::before {
  content:"";
  width:20px;
  height:20px;
  flex:0 0 auto;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 0 0 4px #fff;
}

.sim-page .radio-list label:has(input:checked)::before {
  border-color:var(--blue);
  background:var(--blue);
}

.sim-page .radio-list label:has(input:focus-visible)::before {
  outline:3px solid rgba(0,78,150,.25);
  outline-offset:2px;
}

.sim-page .radio-list span strong:not(.option-price) {
  margin-right:10px;
}

.sim-page .option-line {
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  align-items:baseline;
  column-gap:24px;
}

.sim-page .radio-list.priced-options .option-line {
  flex:1;
  min-width:0;
}

.sim-page .option-name {
  min-width:0;
}

.sim-page .option-price {
  justify-self:end;
  white-space:nowrap;
  text-align:right;
}

.sim-page .option-price strong {
  margin-right:0;
}

.sim-page .option-block.is-disabled .radio-list {
  color:#a3a3a3;
}

.sim-page .option-block.is-disabled label {
  cursor:not-allowed;
}

.sim-page .option-block.is-disabled .radio-list label::before {
  border-color:var(--line);
  background:#f0f0f0;
  box-shadow:none;
}

.sim-page .option-block.is-disabled .radio-list label:has(input:checked)::before {
  background:#c4c4c4;
}

.sim-page .included-message {
  margin:0 0 25px;
  padding:14px 15px;
  color:#000;
  background:var(--pale-blue);
  border:1px solid #c9dff2;
  font-size:14px;
  font-weight:600;
  line-height:1.8;
}

.sim-page .included-message::before {
  content:"※";
  margin-right:6px;
  color:var(--blue-text);
  font-weight:700;
}

.sim-page .result-panel {
  margin-top:70px;
  padding:40px 40px 30px;
  background:var(--pale-blue);
}

.sim-page .result-kicker {
  margin:0;
  font-size:16px;
  font-weight:700;
}

.sim-page .result-total {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:8px 0 35px;
  padding-bottom:20px;
  border-bottom:1px solid #c9dff2;
}

.sim-page .result-total strong {
  color:var(--blue-text);
  font-size:40px;
  line-height:1.2;
  letter-spacing:1px;
  font-weight: bold;
}

.sim-page .result-total span {
  font-size:20px;
  font-weight:700;
}

.sim-page .result-panel .sim-heading {
  background:#fff;
}

.sim-page .breakdown-table {
  border-top:2px solid var(--blue);
  background:#fff;
}

.sim-page .breakdown-row {
  min-height:64px;
  display:grid;
  grid-template-columns:200px 1fr 150px;
  align-items:center;
  gap:16px;
  padding:12px 20px;
  border-bottom:1px solid var(--line);
}

.sim-page .breakdown-row strong {
  font-size:16px;
}

.sim-page .breakdown-row span {
  font-size:13px;
  color:var(--gray);
  line-height:1.7;
  white-space:normal;
}

.sim-page .breakdown-row b {
  text-align:right;
  font-size:16px;
}

.sim-page .reset-button {
  display:block;
  margin:25px 0 0 auto;
  padding:6px 0;
  border:0;
  color:var(--gray);
  background:transparent;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:14px;
  cursor:pointer;
}

.sim-page .reset-button:hover {
  color:var(--blue-text);
}

.sim-page .notes {
  margin-top:60px;
  padding-top:25px;
  border-top:1px solid var(--line);
}

.sim-page .notes p {
  margin:0;
  font-size:14px;
  font-weight:600;
  line-height:2;
  color:var(--gray);
}

@media (max-width:767px) {
  .sim-page form > section {
    margin-top:45px;
  }
  .sim-page form > section:first-of-type {
    margin-top:50px;
  }
  .sim-page .sim-heading {
    margin-bottom:20px;
    font-size:16px;
  }
  .sim-page .question-block {
    padding:0 5px;
  }
  .sim-page .radio-list {
    gap:14px;
  }
  .sim-page .radio-list label {
    align-items:flex-start;
    font-size:14px;
  }
  .sim-page .radio-list label::before {
    margin-top:3px;
  }
  .sim-page .radio-list.priced-options label {
    width:100%;
  }
  .sim-page .radio-list.priced-options .option-line {
    grid-template-columns:1fr;
    row-gap:2px;
  }
  .sim-page .radio-list.priced-options .option-price {
    justify-self:end;
  }
  .sim-page .result-panel {
    margin-top:50px;
    padding:25px 20px 20px;
  }
  .sim-page .result-total strong {
    font-size:32px;
  }
  .sim-page .breakdown-row {
    grid-template-columns:1fr auto;
    gap:2px 14px;
    padding:12px 12px;
    min-height:0;
  }
  .sim-page .breakdown-row strong {
    grid-column:1;
    font-size:14px;
  }
  .sim-page .breakdown-row span {
    grid-column:1;
    font-size:12px;
  }
  .sim-page .breakdown-row b {
    grid-column:2;
    grid-row:1/3;
    font-size:14px;
  }
  .sim-page .notes {
    margin-top:45px;
  }
  .sim-page .notes p {
    font-size:12px;
  }
}

/* ---- 問い合わせ（結果の下） ---- */
.sim-page .sim-contact {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:.5em 1.2em;
  margin:40px 0 0; padding:20px; border:1px solid var(--line);
}
.sim-page .sim-contact__lead { margin:0; font-weight:700; font-size:15px; }
.sim-page .sim-contact__tel {
  font-size:22px; font-weight:700; letter-spacing:.02em; text-decoration:none;
  color:var(--blue-text); font-variant-numeric:tabular-nums;
}
.sim-page .sim-contact__tel:hover { text-decoration:underline; }
.sim-page .sim-contact__link { font-size:14px; color:var(--blue-text); }
@media (max-width:767px) {
  .sim-page .sim-contact { margin-top:30px; padding:16px; gap:.4em .9em; }
  .sim-page .sim-contact__tel { font-size:20px; }
}