* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--body);
  background: var(--bg);
  font-family: var(--jp);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .04em;
}
button, input { font: inherit; }

.simulator {
  width: min(var(--read), calc(100% - var(--pad) * 2));
  margin: 0 auto;
  padding-bottom: 240px;
}
/* Ry 確定: PC 本体幅 max(30vw, 440px) */
@media (min-width: 1024px) {
  .simulator { width: max(30vw, 440px); }
}

/* ホームの eyebrow → 明朝見出し → 説明の順に合わせ、固定ナビ分を空ける */
.rn-page-header {
  padding: 144px 0 52px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.rn-page-header__eyebrow {
  margin: 0;
  color: var(--ink-faint);
  font: italic 11px/1.8 var(--label);
  letter-spacing: .22em;
}
.rn-page-header__title {
  margin: 12px 0 0;
  color: var(--ink);
  font: 400 clamp(21px, 2.4vw, 29px)/1.7 var(--serif);
  letter-spacing: .08em;
}
.rn-page-header__sub {
  margin: 24px 0 0;
  color: var(--body);
  font-size: 17px;
  line-height: 2.2;
}

.rooms-lead { margin: var(--gap) 0 0; text-align: center; color: var(--ink); font: 500 clamp(18px, 2.2vw, 21px)/1.6 var(--jp); letter-spacing: .02em; }
.rooms { margin-top: 36px; }
.room {
  padding: 0 0 20px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--line);
}
.room-head { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.room-kind-button, button.room-kind-button, button.room-kind-button:link, button.room-kind-button:visited, button.room-kind-button:hover, button.room-kind-button:active, button.room-kind-button:focus {
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.size-entry { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--ink-soft); font-size: 13px; white-space: nowrap; }
.tatami-input {
  width: 54px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  font: 400 19px/1.5 var(--jp);
  text-align: right;
}
.tatami-input:focus { outline: 0; border-bottom-color: var(--ink); }
.room-amount {
  display: block;
  margin: 14px 0 0; /* 右端（スイッチの右端）にそろえる（Ry 2026-10-29「もっと右寄せ、今中途半端」） */
  color: var(--ink);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 1.6;
  text-align: right;
  white-space: nowrap;
}
.room-amount .yen { margin-left: .15em; font-size: .78em; }
.room-validation, .room-limit { margin: 8px 0 0; color: var(--ink-soft); font-size: 12px; }

.works-list { margin-top: 12px; }
.work-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 16px;
  color: var(--body);
  font-size: 14px;
  line-height: 1.9;
}
.work-label { flex: 1; min-width: 0; }
/* 天井は壁紙の付け足し。字下げして小さく（金額は壁紙の行に入るので出さない） */
.work-row--sub { min-height: 40px; padding-left: 16px; font-size: 13px; }
.work-price { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.work-row input[role="switch"] {
  appearance: none;
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 26px;
  margin: 0;
  border: 1px solid var(--ink-soft);
  border-radius: 13px;
  background: transparent;
  cursor: pointer;
}
.work-row input[role="switch"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink-soft); transition: none; }
.work-row input[role="switch"]:checked { border-color: var(--ink); background: var(--ink); }
.work-row input[role="switch"]:checked::after { left: 21px; background: var(--bg); }
.work-row input[role="switch"]:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 3px; }
.curtain-note { display: block; margin-top: 2px; color: var(--ink-soft); font-size: 11px; line-height: 1.7; }
.curtain-note::before { content: "→ "; }

.overhead-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
}
.overhead-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.overhead > summary { list-style: none; cursor: pointer; }
.overhead > summary::-webkit-details-marker { display: none; }
/* 開け閉めの印は FAQ と同じ «＋ が 45° 回る» 作法（home.css の .faq-list） */
.overhead-toggle::after { content: '+'; display: inline-block; margin-left: .6em; color: var(--ink-faint); font-size: 14px; transition: transform .3s; }
.overhead[open] .overhead-toggle::after { transform: rotate(45deg); color: var(--ink); }
.overhead-items { margin: 6px 0 0; padding: 0 0 4px; list-style: none; }
.overhead-items li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0 6px 1em; color: var(--ink-soft); font-size: 13px; }
.overhead-item-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.overhead-note { margin: 4px 0 16px; color: var(--ink-soft); font-size: 11px; line-height: 1.9; }
.page-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 4px 0 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
}
.page-total-row small { margin-left: .3em; color: var(--ink-soft); font-size: 11px; }
#page-total { font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.add-room:disabled { opacity: .45; cursor: not-allowed; }

.included-block { margin-top: var(--gap); }
.included-block[hidden] { display: none; }
.included-title { margin: 0 0 4px; color: var(--ink); font: 400 12px/1.8 var(--jp); }
.included-items { margin: 0; color: var(--ink-soft); font: 400 12px/1.9 var(--jp); }
.add-room, button.add-room, button.add-room:link, button.add-room:visited, button.add-room:hover, button.add-room:active, button.add-room:focus {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 12px 20px;
  border: 0;
  color: var(--bg);
  background: var(--ink);
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}
.disclaimer { margin: 22px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.9; text-align: center; }

.contact-cta {
  width: 100vw;
  margin: 52px calc(50% - 50vw) 0;
  padding: 42px max(var(--pad), calc((100vw - var(--read)) / 2));
  background: var(--bg-soft);
  text-align: center;
}
.contact-cta__label { margin: 0; color: var(--ink-faint); font: italic 11px/1.8 var(--label); letter-spacing: .22em; }
.contact-cta h2 { margin: 12px 0 0; color: var(--ink); font: 400 clamp(21px, 2.4vw, 29px)/1.7 var(--serif); letter-spacing: .08em; }
.contact-cta__copy { margin: 24px 0 0; color: var(--body); font-size: 17px; line-height: 2.2; }
.contact-cta__points { display: inline-flex; flex-direction: column; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; text-align: left; }
.contact-cta__points li { color: var(--ink); font-size: 15px; letter-spacing: .04em; line-height: 1.8; }
.contact-cta__num { display: inline-block; width: 2.4em; color: var(--ink-faint); font: italic 12px/1.5 var(--label); letter-spacing: .1em; }
@media (min-width: 768px) {
  .contact-cta__points { display: flex; flex-direction: row; justify-content: center; gap: 56px; text-align: center; }
  .contact-cta__points li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .contact-cta__num { width: auto; }
}
.contact-cta__action { margin: 30px 0 0; }
/* ボタン形状は既存の承認済み形を維持 */
.contact-cta__button, a.contact-cta__button, a.contact-cta__button:link, a.contact-cta__button:visited, a.contact-cta__button:hover, a.contact-cta__button:active, a.contact-cta__button:focus {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  color: var(--bg);
  background: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

.total-bar {
  position: fixed;
  z-index: 100;
  right: 28px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 220px;
  padding: 18px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.total-copy { min-width: 190px; }
.total-label, .room-count { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.total-amount { margin: 1px 0; color: var(--ink); font: 500 23px/1.5 var(--jp); font-variant-numeric: tabular-nums; white-space: nowrap; }
.total-bar .consult-link, .total-bar a.consult-link, .total-bar a.consult-link:link, .total-bar a.consult-link:visited, .total-bar a.consult-link:hover, .total-bar a.consult-link:active, .total-bar a.consult-link:focus {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  color: var(--bg);
  background: var(--ink);
  font-size: 13px;
  text-align: center;
  text-decoration: none;
}
.total-amount.is-loading, #page-total.is-loading { opacity: .45; }
.total-amount.has-error { font-size: 14px; white-space: normal; }
.retry-estimate, button.retry-estimate, button.retry-estimate:link, button.retry-estimate:visited, button.retry-estimate:hover, button.retry-estimate:active, button.retry-estimate:focus { padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 12px; text-decoration: underline; cursor: pointer; }
.remove-room, button.remove-room, button.remove-room:link, button.remove-room:visited, button.remove-room:hover, button.remove-room:active, button.remove-room:focus { min-height: 44px; padding: 0 0 0 4px; border: 0; color: var(--ink-soft); background: transparent; font-size: 12px; text-align: center; cursor: pointer; }
.remove-room span { text-decoration: underline; text-underline-offset: .25em; }

.room-dialog { width: min(440px, calc(100% - 32px)); max-width: none; padding: 0; border: 0; color: var(--ink); background: var(--bg); }
.room-dialog::backdrop { background: rgb(28 28 28 / 30%); }
.dialog-content { padding: 24px; }
.dialog-content h2 { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
.room-choices { display: grid; }
.kind-choice, button.kind-choice, button.kind-choice:link, button.kind-choice:visited, button.kind-choice:hover, button.kind-choice:active, button.kind-choice:focus { min-height: 48px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.dialog-close, button.dialog-close, button.dialog-close:link, button.dialog-close:visited, button.dialog-close:hover, button.dialog-close:active, button.dialog-close:focus { display: block; min-height: 44px; margin: 14px 0 0 auto; padding: 0 4px; border: 0; color: var(--ink-soft); background: transparent; cursor: pointer; }
.dialog-close span { text-decoration: underline; text-underline-offset: .25em; }

@media (max-width: 1279px) {
  .total-bar { right: 0; bottom: 0; left: 0; width: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 10px max(var(--pad), env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
  .simulator { width: calc(100% - var(--pad) * 2); padding-bottom: 190px; }
  .rn-page-header { padding: 124px 0 34px; }
  .rn-page-header__title { font-size: clamp(20px, 5.8vw, 28px); }
  .rn-page-header__sub { margin-top: 12px; font-size: 15px; line-height: 2.1; }
  .rooms-lead { margin-top: var(--gap-sp); }
  .rooms { margin-top: 28px; }
  .room { padding-bottom: 18px; margin-bottom: 20px; }
  .room-head { gap: 8px; }
  .room-kind-button, button.room-kind-button, button.room-kind-button:link, button.room-kind-button:visited, button.room-kind-button:hover, button.room-kind-button:active, button.room-kind-button:focus { font-size: 15px; }
  .room-amount { font-size: 18px; }
  .included-block { margin-top: var(--gap-sp); }
  .total-copy { min-width: 0; }
  .total-amount { font-size: 20px; }
  .contact-cta { margin-top: var(--gap-sp); padding-block: 36px; }
  .contact-cta h2 { font-size: clamp(21px, 6.1vw, 30px); }
  .contact-cta__copy { margin-top: 12px; font-size: 15px; line-height: 2.1; }
}

/* ===== CTA の仕上げ（Ry 2026-10-29「CTAもっと良くなるはず。renovy の web デザイナーの手でもっと見やすく」） =====
   ・締めの帯なので上下を広く（PC 96px・SP 64px）
   ・要点は «3 つの並び» として見せる: PC は同じ幅の 3 列＋細い縦線、SP は細い線で区切った一覧
   ・番号はホームのカルーセルの .n と同じ作法（英字の斜体・薄い色）を大きめにして、目の止まり所にする
   ・ボタンの形（塗りの黒）は変えない（正本の判断待ち） */
.contact-cta { padding-block: 64px; }
.contact-cta__copy { margin-top: 16px; font-size: 15px; line-height: 2; }
.contact-cta__points { display: flex; flex-direction: column; gap: 0; width: min(100%, 320px); margin: 28px auto 0; text-align: left; }
.contact-cta__points li { display: flex; align-items: baseline; gap: 14px; min-height: 52px; padding: 13px 4px; border-top: 1px solid var(--line); font-size: 15px; }
.contact-cta__points li:last-child { border-bottom: 1px solid var(--line); }
.contact-cta__num { width: 2em; flex: none; font-size: 16px; letter-spacing: .06em; }
.contact-cta__action { margin-top: 36px; }
.contact-cta a.contact-cta__button, .contact-cta a.contact-cta__button:link, .contact-cta a.contact-cta__button:visited { width: 90%; max-width: 360px; box-sizing: border-box; }
@media (min-width: 768px) {
  .contact-cta { padding-block: 96px; }
  .contact-cta__points { flex-direction: row; justify-content: center; width: auto; margin-top: 40px; text-align: center; }
  .contact-cta__points li { flex: 0 1 200px; flex-direction: column; align-items: center; gap: 10px; min-height: 0; padding: 4px 24px; border-top: 0; border-bottom: 0; }
  .contact-cta__points li:last-child { border-bottom: 0; }
  .contact-cta__points li + li { border-left: 1px solid var(--line); }
  .contact-cta__num { width: auto; font-size: 22px; }
  .contact-cta__action { margin-top: 48px; }
  .contact-cta a.contact-cta__button, .contact-cta a.contact-cta__button:link, .contact-cta a.contact-cta__button:visited { width: auto; min-width: 280px; }
}

/* 🚨 CTA の帯のすぐ下にフッター（間に余白を作らない・Ry 2026-10-29「ctaブロックとfooterの間の余白は消すこと。これはルールね」）
   固定の合計の帯に最後が隠れないための余白は、本体ではなくページの一番下（フッターの下）に取る */
main.simulator { padding-bottom: 0; }
body { padding-bottom: var(--total-bar-space, 0px); }
@media (min-width: 1280px) { body { --total-bar-space: 200px; } }  /* PC は右下に浮いた帯（高さ約 170px＋下 24px）の分 */
@media (max-width: 1279px) { body { --total-bar-space: 92px; } }

/* OFF にした項目の行は薄いグレーに（Ry 2026-10-29「オフにしたらその一行が薄いグレーになるのは？」）。合計に入っているものだけが濃く残る */
.work-row:has(input[role="switch"]:not(:checked)) .work-label,
.work-row:has(input[role="switch"]:not(:checked)) .curtain-note,
.work-row:has(input[role="switch"]:not(:checked)) .work-price { color: var(--ink-faint); }
/* 名前と金額に打ち消し線（Ry 2026-10-29「数字には横線を入れよう」「文字にも入れておくか」）。«→ 窓» の注記には引かない */
.work-row:has(input[role="switch"]:not(:checked)) .work-name,
.contact-cta .nowrap { display: inline-block; } /* 見出しを «まずは LINE から｜無料相談のご予約を» で折り返す */