/* ==============================
   Main Container
============================== */

.item_mirai_eco {
  max-width: 900px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  font-weight: 500;
}

/* (A5): 3-column grid [label | select | price] for window-row / osc-row / spec-row.
   The "green line" (left edge of the select column) = a shared reference → consistent alignment for window/その他/spec across all 4 options.
   ⚠️ USE CONCRETE VALUES, NOT var() (old-browser support). Change width per breakpoint in @media.
   Desktop/tablet: select 72 · gap 12 · price 120 → badge/bar = 72+12+120 = 204; wrap padding = 72+120+2*12 = 216.
   Mobile (@media ≤767): select 68 · gap 6 · price 86 → badge 160; wrap padding 166.
   All 3 selects share box-sizing:border-box + width + height 28 + vertically centered value (fixes the window value sitting low/smaller). */
.item_mirai_eco .w-select,
.item_mirai_eco .osc-select,
.item_mirai_eco .spec-qty {
  box-sizing: border-box;
}

.item_mirai_eco .top-space {
  height: 56px;
  background: #fff;
}

/* ==============================
   Hero
============================== */

.item_mirai_eco .hero {
  background: #CEED82;
  text-align: center;
  padding: 36px 20px 28px;
}

.item_mirai_eco .hero-title {
  margin: 0;
  font-size: 40px;
  line-height: 1.35;
  letter-spacing: 1px;
  color: #000000;
}

/* ==============================
   Common Bar
============================== */

.item_mirai_eco .green-bar {
  background: #00C144;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px 10px;
}

.item_mirai_eco .green-bar.is-required {
  color: #ffff00;
}

/* ==============================
   Door Selection Area
============================== */

.item_mirai_eco .plan-area {
  background: #fff;
  padding: 8px 24px 14px;
}

.item_mirai_eco .door-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4%;
}

.item_mirai_eco .front-door {
  width: 74%;
}

.item_mirai_eco .back-door {
  width: 22%;
}

.item_mirai_eco .door-title {
  background: #CEED82;
  text-align: center;
  font-size: 17px;
  padding: 6px 0;
  margin-bottom: 8px;
  color: #000000;
}

.item_mirai_eco .door-title .size-badge {
  display: block;
  font-size: 13px;
}

.item_mirai_eco .door-list {
  display: flex;
  align-items: flex-start;
}

.item_mirai_eco .front-door .door-list {
  justify-content: space-between;
  gap: 7%;
}

.item_mirai_eco .front-door .door-card {
  width: 22%;
}

.item_mirai_eco .front-door .door-card.door2 {
  margin-left: -40px;
}

.item_mirai_eco .front-door .door-card.is-sliding {
  width: 36%;
}

.item_mirai_eco .back-door .door-list {
  justify-content: center;
}

.item_mirai_eco .back-door .door-card {
  width: 100%;
}

.item_mirai_eco .door-card {
  text-align: left;
}

.item_mirai_eco .door-img {
  display: block;
  width: 100%;
  max-width: 110px;
  height: 245px !important;
  object-fit: cover;
  margin: 0 auto 6px;
}

.item_mirai_eco .door-img.is-wide {
  max-width: 188px;
}

.item_mirai_eco .back-door .door-img {
  max-width: 108px;
}

/* ==============================
   Radio
============================== */

.item_mirai_eco .radio-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.item_mirai_eco .door-card.is-sliding .radio-list {
  margin-left: 18px;
}

.item_mirai_eco .radio-item {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}

.item_mirai_eco .radio-item input {
  display: none;
}

.item_mirai_eco .radio-mark {
  width: 18px;
  height: 18px;
  border: 2px solid #77b82a;
  border-radius: 50%;
  background: #fff;
  flex: 0 0 auto;
  position: relative;
}

.item_mirai_eco .radio-item input:checked + .radio-mark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #77b82a;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item_mirai_eco .main-text {
  font-size: 17px;
}

.item_mirai_eco .small-text {
  display: inline-block;
  font-size: 11px;
  line-height: 1.25;
  color: #333;
  text-align: left;
}

/* ==============================
   Door variant by お住いのタイプ (house ⇄ mansion)
   Default = house; JS adds .is-mansion to .item_mirai_eco when residence = マンション.
============================== */
.item_mirai_eco .hero-title--mansion,
.item_mirai_eco .door-variant--mansion {
  display: none;
}

.item_mirai_eco.is-mansion .hero-title--house,
.item_mirai_eco.is-mansion .door-variant--house,
.item_mirai_eco.is-mansion .size-note--house {
  display: none;
}

.item_mirai_eco.is-mansion .hero-title--mansion {
  display: block;
}

.item_mirai_eco.is-mansion .door-variant--mansion {
  display: flex;
}

/* Mansion door: image left + (title + radio + size-note) right */
.item_mirai_eco .mansion-door {
  align-items: flex-start;
  gap: 24px;
}

.item_mirai_eco .mansion-img {
  flex: 0 0 110px;
  width: 110px;
  max-width: 110px;
  margin: 0;
}

.item_mirai_eco .mansion-info {
  flex: 1 1 auto;
  max-width: 360px;
}

.item_mirai_eco .mansion-info .door-title {
  margin-bottom: 12px;
}

.item_mirai_eco .mansion-info .size-note {
  margin-top: 10px;
  flex: none;
}

/* Mansion mode: plan-area = [mansion-door] (left) + みらいエコ補助額 (right, next to the door).
   Applies ONLY to plan-area--entrance (the bathroom/kitchen/toilet spec area doesn't use this layout). */
.item_mirai_eco.is-mansion .plan-area--entrance {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 24px;
}

.item_mirai_eco.is-mansion .mansion-door {
  flex: 1 1 440px;
}

.item_mirai_eco.is-mansion .eco-summary {
  flex: 0 1 300px;
  margin-top: 56px;
}

/* (client): mansion みらいエコ補助額 = 204px (= 先進的窓リノベ badge), flush right within eco-summary
   → left edge = red line = badge (aligned). Previously flex:1 1 auto (fill 300px) → drifted left.
   (Tablet 768–1023 + mobile ≤767 have their own overrides; this rule handles desktop ≥1024.) */
.item_mirai_eco.is-mansion .eco-subsidy {
  flex: 0 0 204px;
  max-width: 204px;
  margin-left: auto;
}

/* ==============================
   Eco summary (窓+ドア): size note + みらいエコ補助額
============================== */

.item_mirai_eco .eco-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-top: 10px;
}

.item_mirai_eco .size-note {
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
}

/* みらいエコ補助額 (entrance) = 204px (= 先進的窓リノベ badge), flush right → left edge = green line.
   .is-mansion (next-to-door layout) + mobile have their own overrides below. */
.item_mirai_eco .eco-subsidy {
  flex: 0 0 204px;
  max-width: 204px;
}

.item_mirai_eco .eco-subsidy-bar {
  background: #00C144;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 5px 6px;
  border-radius: 2px;
}

.item_mirai_eco .eco-subsidy-price {
  margin-top: 4px;
  text-align: right;
  color: #6FBA2C;
  font-size: 20px;
  font-weight: 700;
}

/* ==============================
   Window Selection Area
============================== */

.item_mirai_eco .window-area {
  background: #EFEFEF;
  padding: 14px 25px 14px 25px;
}

/* --- 必須 row + 居室/非居室 toggle --- */
.item_mirai_eco .window-required-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.item_mirai_eco .req-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
}

.item_mirai_eco .req-badge {
  flex: 0 0 auto;
  background: #E75400;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  white-space: nowrap;
  border: 2px solid #ffffff;
}

.item_mirai_eco .req-text {
  font-size: 19px;
  color: #666666;
  line-height: 1.35;
}

.item_mirai_eco .place-toggle {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.item_mirai_eco .place-btn {
  min-width: 74px;
  height: 36px;
  padding: 0 14px;
  border: 2px solid #E75400;
  border-radius: 4px;
  background: #fff;
  color: #666666;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.item_mirai_eco .place-btn.is-active {
  background: #FFC000;
  color: #fff;
}

/* --- sub notes --- */
.item_mirai_eco .window-subnotes {
  margin: 4px 0 4px;
  font-size: 16px;
  line-height: 1.3;
  color: #666666;
  padding-left: 70px;
}

.item_mirai_eco .window-subnotes p {
  margin: 0;
}

/* --- main: pattern button + window table --- */
.item_mirai_eco .window-main {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 8px;
}

.item_mirai_eco .pattern-btn {
  flex: 0 0 auto;
  width: 124px;
  align-self: center;
  background: #00C144;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  padding: 20px 6px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.item_mirai_eco .window-table {
  flex: 1 1 auto;
  min-width: 0;
}

.item_mirai_eco .window-table-head {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}

.item_mirai_eco .subsidy-badge {
  background: #537AFC;
  color: #fff;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 5px;
  /* A1: badge left edge = green line (select left edge) → covers exactly the [select | price] group.
     window-table-head has justify-content:flex-end, so the badge sticks to the right edge. box-sizing:border-box
     so width includes padding/border = matches the select+gap+price span. */
  box-sizing: border-box;
  width: 204px; /* A1: = select 72 + gap 12 + price 120 → badge left edge = green line */
  text-align: center;
  border: 2px solid #ffffff;
}

.item_mirai_eco .window-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}

.item_mirai_eco .w-label {
  flex: 1 1 0;      /* A3: flexes + wraps within the label column (right edge = green line), doesn't push the select off */
  min-width: 0;
  font-size: 19px;
  color: #666666;
  white-space: nowrap;
}

.item_mirai_eco .w-select {
  flex: 0 0 72px;
  width: 72px;
  line-height: 19px;   /* matches .osc-select/.spec-qty (dropped the old height:27 → all 3 selects are 28px tall) */
  border: 2px solid #3C3B38;
  border-radius: 6px;
  background: #fff;
  position: relative;
}

.item_mirai_eco .w-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-align-last: center;
  padding-right: 4px;
  cursor: pointer;
  outline: none;
  color: #626262;
  font-size: 20px;       /* B3: matches osc/spec (was 21px → window looked bigger/off) */
  font-weight: 600;
  border-radius: 6px;
  padding-bottom: 2px;   /* B3: matches osc/spec → value vertically centered, not sitting low */
}

.item_mirai_eco .w-select::after {
  content: "▼";
  position: absolute;
  right: 7px;
  top: 51%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #000000;
  pointer-events: none;
}

/* window-row select by 居室/非居室.
   Default / 非居室 → disabled: keeps the original .w-select style (white bg, #3C3B38 border, #999999 text),
   only blocks selection (cursor not-allowed). Selecting 居室 (.is-place-active) → enabled + recolored like .spec-qty
   (green #00C144 border, #4d4d4d text). */
.item_mirai_eco .window-main:not(.is-place-active) .w-select select {
  cursor: not-allowed;
}

.item_mirai_eco .window-main.is-place-active .w-select {
  border-color: #00C144;
}

.item_mirai_eco .window-main.is-place-active .w-select select {
  color: #4d4d4d;
  cursor: pointer;
}

.item_mirai_eco .w-price {
  flex: 0 0 120px;
  width: 120px;
  text-align: right; /* A4: price right-aligned */
  font-size: 20px;
  font-weight: 600;
  color: #537AFC;
  white-space: nowrap; /* keep the amount from splitting "104,000" / "円" across lines */
}

/* --- + 補助金の条件について (left) + 元にもどす (right) --- */
.item_mirai_eco .condition-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.item_mirai_eco .condition-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: #000000;
  cursor: pointer;
  user-select: none;
}

.item_mirai_eco .condition-toggle .plus {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00C144;
  flex: 0 0 auto;
}

/* The +/− sign is drawn with 2 bars (NOT content text) — adjust size/thickness/color here.
   --bar-len = bar length, --bar-thick = bar thickness. */
.item_mirai_eco .condition-toggle .plus::before,
.item_mirai_eco .condition-toggle .plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;   /* bar length */
  height: 2px;   /* bar thickness */
  border-radius: 1px;
  background: #fff;
  transform: translate(-50%, -50%);
}

/* vertical bar → combines with the horizontal bar into a + */
.item_mirai_eco .condition-toggle .plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* open → hide the vertical bar → leaves the − sign */
.item_mirai_eco .condition-toggle.open .plus::after {
  display: none;
}

/* --- その他の補助金項目 --- */
.item_mirai_eco .other-subsidy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.item_mirai_eco .other-subsidy input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  cursor: pointer;
}

.item_mirai_eco .other-subsidy label {
  font-size: 19px;
  color: #666666;
  cursor: pointer;
}

/* --- その他の補助金項目 content (shown when the checkbox is ticked) --- */
.item_mirai_eco .other-subsidy-content {
  display: none;
  margin-top: 6px;
}

.item_mirai_eco .osc-actions {
  display: flex;
  justify-content: flex-end;
}

.item_mirai_eco .osc-actions-bottom {
  margin-top: 10px;
}

/* Reset/restore button (元にもどす / リセット) — shared style */
.item_mirai_eco .reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #00C144;
  color: #fff;
  font-size: 14px;
  border: none;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  font-weight: 500;
}

/* Reset button (元にもどす / リセット) uses the back.png image (like .btn_back_origin of the water area) */
.item_mirai_eco .reset-btn .img_back {
  width: 13px;
  display: block;
}

.item_mirai_eco .osc-list {
  padding-left: 45px;
}

/* The red note shows only on the 玄関 (entrance) option — window-block is shared, gated by .option_entrance */
.item_mirai_eco .osc-entrance-note {
  display: none;
  padding-left: 10px;
  margin-top: 12px;
  font-size: 19px;
  line-height: 1.3;
}

.item_mirai_eco .option_entrance .osc-entrance-note {
  display: block;
}

.item_mirai_eco .osc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
}

.item_mirai_eco .osc-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 20px;
  color: #666666;
}

.item_mirai_eco .osc-row.osc-sub .osc-name {
  padding-left: 20px;
}

.item_mirai_eco .osc-group-title {
  /* B2: a long group title (空気清浄機能…) wraps at the green line, not encroaching on the select/price columns.
     padding-right = 72 + 120 + 2*12 = 216 → text right edge = label column right edge. */
  padding: 5px 216px 5px 0;
  font-size: 20px;
  color: #666666;
}

.item_mirai_eco .osc-select {
  flex: 0 0 72px;
  width: 72px;
  line-height: 19px;
  border: 2px solid #00C144;
  border-radius: 6px;
  background: #fff;
  position: relative;
}

.item_mirai_eco .osc-select select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-align-last: center;
  padding-right: 4px;
  cursor: pointer;
  font-size: 20px;
  outline: none;
  color: #434343;
  padding-bottom: 2px;
  font-weight: 600;
}

.item_mirai_eco .osc-select::after {
  content: "▼";
  position: absolute;
  right: 9px;
  top: 51%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #000000;
  pointer-events: none;
}

.item_mirai_eco .osc-price {
  flex: 0 0 120px;
  width: 120px;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  color: #4D4D4D;
  white-space: nowrap; /* B1: price stays on one line (e.g. 126,000円 doesn't drop the 円) */
}

/* ※ note under an item (note column in other.csv). --sub: indented for child items. */
.item_mirai_eco .osc-note {
  /* B2: ※ note wraps at the green line (right edge = label column right edge). Keeps 24px left indent. */
  padding: 0 216px 0 21px;
  margin-top: -2px;
  font-size: 16px;
  line-height: 1.4;
  color: #666;
}

.item_mirai_eco .osc-note--sub {
  padding-left: 20px;
}

/* ==============================
   Note (条件) — hidden by default, shown via 補助金の条件について
============================== */

.item_mirai_eco .note {
  display: none;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: #000;
  padding-left: 28px;
}

/* clearfix to contain the floated .note-trigger-qr — overflow:hidden can't be used because the QR is
   lifted with a negative margin-top (that would clip the lifted part). */
.item_mirai_eco .note::after {
  content: "";
  display: block;
  clear: both;
}

.item_mirai_eco .note-red {
  color: #FF0000;
}

/* トリガールーム QR — floats to the RIGHT of the note text (label on top, QR below), links to the
   trigger-room PDF in a new tab. Lives inside .note so it shows only while 補助金の条件について is open.
   margin-top pulls it up into the empty space beside 元にもどす. width is LOCKED to the QR image so the
   footprint stays small (the note's long line ※居室とは… still fits beside it without wrapping, panel is
   capped at 900px); the 13px label is wider than the image and simply overflows to the right into the panel
   gutter — intended (per request). On mobile the width lock is dropped so the label is not clipped off-screen. */
.item_mirai_eco .note-trigger-qr {
  float: right;
  display: block;
  width: 84px; /* = QR image width — locks the footprint; a wider label overflows instead of widening it */
  margin: -24px 14px 6px 6px;
  text-align: center;
  text-decoration: none;
}

.item_mirai_eco .note-trigger-qr__label {
  display: block;
  width: max-content;          /* size to the text so it can be CENTERED over the narrower 84px QR block */
  position: relative;
  left: 50%;                   /* center the wider label over the block: out 50% of the block… */
  transform: translateX(-50%); /* …then back 50% of the label's own width → overflow is symmetric (both sides) */
  margin-bottom: 8px;
  color: #000;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap; /* exactly 2 lines (break only at the <br>); at 13px the label is wider than the block and overflows evenly on both sides — intended */
  background: #fff;
  padding: 5px 8px;
}

.item_mirai_eco .note-trigger-qr__img {
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto;
}

/* その他 open → the osc-list (with the リセット button on the right) fills the space above the note, so drop
   the lift and keep the QR at the note top to avoid overlapping it. JS toggles .osc-open on .window-area. */
.item_mirai_eco .window-area.osc-open .note-trigger-qr {
  margin-top: 0;
}

/* ==============================
   btn_simulation
============================== */
/* シミュレーション開始 button — SHARED (outside the options, below the 4 options). Auto-centered via
   .btn_simulation's margin:auto. Hidden until an option is selected (.has-option-selected). */
.item_mirai_eco .bl_btn_simulation {
  margin-top: 24px;
  display: none;
}

.item_mirai_eco.has-option-selected .bl_btn_simulation {
  display: block;
}

/* Override item.css `.btn_simulation { background:#FF9900 !important }` — needs
   !important + higher specificity (scoped to .item_mirai_eco) to make the button green
   per the new design, WITHOUT affecting the #item flow's button. */
.item_mirai_eco .btn_simulation {
  width: 65%;
  background: #00C144 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff;
}

/* 居室 not yet selected → the button has NO .active → disabled. Keeps the green color but
   dims it with opacity (like how the #item flow disables via opacity:0.5), not
   turning gray. common.js only navigates when .active is present, so it won't advance either. */
.item_mirai_eco .btn_simulation:not(.active) {
  opacity: 0.5;
  cursor: not-allowed;
}
.item_mirai_eco .btn_simulation.active {
  opacity: 1;
  cursor: pointer;
}

/* ==============================
   Pattern popup (補助金対象パターン図)
============================== */
.item_mirai_eco .mirai_eco-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.item_mirai_eco .mirai_eco-popup.is-open {
  display: flex;
}

.item_mirai_eco .mirai_eco-popup .popup-box {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  max-width: 90vw;
  max-height: 90vh; /* box doesn't exceed the screen → the close button always stays in the viewport */
  box-sizing: border-box;
}

/* scroll area for the image: if the image is too tall it scrolls here, the box stays ≤ 90vh */
.item_mirai_eco .mirai_eco-popup .popup-scroll {
  flex: 1 1 auto;
  min-height: 0; /* allow shrinking within flex so overflow works */
  overflow: auto;
}

.item_mirai_eco .mirai_eco-popup .popup-img {
  display: block;
  max-width: 100%;
  margin: 0 auto;
}

.item_mirai_eco .mirai_eco-popup .popup-close {
  position: absolute;
  top: -12px;          /* nudge to the top-right corner */
  right: -12px;
  width: 34px;
  height: 34px;
  display: flex;        /* center the × both horizontally and vertically */
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #E75400;  /* red-orange for visibility */
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  padding-bottom: 4px;
  padding-left: 8px;
}

/* ==============================
   Responsive — Tablet (768–1023px)
============================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .item_mirai_eco .hero-title {
    font-size: 33px;
  }

  .item_mirai_eco .green-bar {
    font-size: 15px;
  }

  /* tablet: keep 居室/非居室 (.place-toggle) on the SAME line as the 必須 text — no wrapping to a 2nd line.
     nowrap + req-left min-width:0 → req-text wraps inside req-left, toggle on the right. */
  .item_mirai_eco .window-required-row {
    flex-wrap: nowrap;
  }
  .item_mirai_eco .req-left {
    min-width: 0;
  }

  .item_mirai_eco .door-title {
    font-size: 15px;
  }

  .item_mirai_eco .door-title .size-badge {
    font-size: 12px;
  }

  .item_mirai_eco .front-door .door-card.door2 {
    margin-left: -26px;
  }

  .item_mirai_eco .door-card.is-sliding .radio-list {
    margin-left: 25px;
  }

  .item_mirai_eco .radio-item {
    gap: 2px;
  }

  .item_mirai_eco .radio-mark {
    width: 14px;
    height: 14px;
  }

  .item_mirai_eco .radio-item input:checked + .radio-mark::after {
    width: 9px;
    height: 9px;
  }

  .item_mirai_eco .main-text {
    font-size: 15px;
  }

  .item_mirai_eco .small-text {
    font-size: 10px;
  }

  .item_mirai_eco .eco-subsidy-bar {
    font-size: 12px;
  }

  .item_mirai_eco .eco-subsidy-price {
    font-size: 17px;
  }

  .item_mirai_eco .req-text {
    font-size: 16px;
  }

  .item_mirai_eco .place-btn {
    font-size: 16px;
    min-width: 64px;
    height: 32px;
    padding: 0 10px;
  }

  .item_mirai_eco .pattern-btn {
    width: 108px;
    font-size: 18px;
  }

  .item_mirai_eco .window-subnotes {
    font-size: 14px;
    padding-left: 50px;
  }

  .item_mirai_eco .w-label {
    font-size: 16px;
  }

  .item_mirai_eco .w-select select {
    font-size: 18px;
  }

  .item_mirai_eco .w-price {
    font-size: 17px;
  }

  .item_mirai_eco .osc-list {
    padding-left: 30px;
  }

  .item_mirai_eco .osc-entrance-note {
    padding-left: 30px;
  }

  .item_mirai_eco .osc-name,
  .item_mirai_eco .osc-group-title {
    font-size: 17px;
  }

  .item_mirai_eco .osc-select select {
    font-size: 17px;
  }

  .item_mirai_eco .osc-price {
    font-size: 17px;
  }

  .item_mirai_eco .osc-note {
    font-size: 14px;
  }

  .item_mirai_eco .note {
    font-size: 12px;
  }

  .item_mirai_eco .note-trigger-qr {
    margin: -24px 14px 6px 15px;
  }
}

/* ==============================
   Responsive — Mobile (<=767px)
============================== */

@media screen and (max-width: 767px) {
  .item_mirai_eco {
    padding-left: 0;
    padding-right: 0;
    max-width: 540px;
  }

  /* (A5, mobile): CONCRETE VALUES (no var). Versus desktop: gap 12→6 + price 120→86
     → select sits CLOSER to price, the label column is ~18px WIDER (fewer 3-line note wraps). price 86 still fits
     「364,000円」@16px (~74px) nowrap (B1). 375/390/430 align identically (all right-anchored).
     NOTE: spec (.spec-qty/.spec-price/.spec-row) is NOT set here — base spec is declared AFTER this block
     so it would override; the spec override 68/86/6 is in the @media ≤767 block BELOW (after base spec). */
  .item_mirai_eco .w-select,
  .item_mirai_eco .osc-select {
    width: 68px;
    flex-basis: 68px;
  }
  .item_mirai_eco .w-price,
  .item_mirai_eco .osc-price {
    width: 86px;
    flex-basis: 86px;
  }
  .item_mirai_eco .window-row,
  .item_mirai_eco .osc-row {
    gap: 6px;
  }
  .item_mirai_eco .subsidy-badge {
    width: 160px; /* 68 + 6 + 86 */
  }
  .item_mirai_eco .osc-group-title {
    padding-right: 166px; /* 68 + 86 + 2*6 */
  }
  .item_mirai_eco .osc-note {
    padding-right: 166px;
  }

  .item_mirai_eco .hero-title {
    font-size: 19px;
  }

  .item_mirai_eco .plan-area {
    padding: 8px 12px 14px;
  }

  .item_mirai_eco .door-row {
    flex-direction: column;
  }

  .item_mirai_eco .front-door,
  .item_mirai_eco .back-door {
    width: 100%;
  }

  .item_mirai_eco .back-door {
    margin-top: 20px;
  }

  /* 2 doors per row; an odd door centers via justify-content:center */
  .item_mirai_eco .front-door .door-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 18px 4%;
  }

  .item_mirai_eco .front-door .door-card,
  .item_mirai_eco .front-door .door-card.is-sliding {
    width: 48%;
    margin: 0;
  }

  .item_mirai_eco .front-door .door-card.door2 {
    margin-left: 0;
  }

  .item_mirai_eco .door-img.is-wide {
    max-width: 100%;
  }

  .item_mirai_eco .door-card.is-sliding .radio-list {
    margin-left: 0;
  }

  /* 勝手口 has only 1 door → centered */
  .item_mirai_eco .back-door .door-list {
    justify-content: center;
  }

  .item_mirai_eco .back-door .door-card {
    width: 48%;
  }

  .item_mirai_eco .radio-list {
    margin-top: 10px;
  }

  .item_mirai_eco .main-text {
    font-size: 14px;
  }

  .item_mirai_eco .small-text {
    font-size: 10px;
  }

  /* eco-summary: stack size note + みらいエコ補助額 vertically */
  .item_mirai_eco .eco-summary {
    flex-direction: column;
    align-items: stretch;
  }

  /* (mobile): みらいエコ補助額 (entrance) = 160px (= 先進的窓リノベ badge on mobile: 68+6+86),
     flush right → left edge = red line, aligned with the badge + select column. */
  .item_mirai_eco .eco-subsidy {
    flex: none;
    width: 160px;
    max-width: 160px;
    margin-left: auto;
    margin-top: 8px;
  }

  /* mansion mobile — move みらいエコ補助額 to the right, flush with the content edge like other options.
     (1) eco-summary full-width: desktop constrains it to 300px next to the door (flex:0 1 300px) → on mobile it stacks and must be full-width
         for the child to right-align to the edge. (2) eco-subsidy constrained 280px (overrides .is-mansion .eco-subsidy
         flex:1 1 auto / max-width:none, which made it full-width → looked left-shifted). margin-left:auto is inherited. */
  .item_mirai_eco.is-mansion .eco-summary {
    flex-basis: 100%;
  }

  .item_mirai_eco.is-mansion .eco-subsidy {
    flex: none;
    width: 160px;
    max-width: 160px;
    margin-left: auto;
  }

  /* window area */
  .item_mirai_eco .window-area {
    padding: 12px 12px;
  }

  .item_mirai_eco .window-required-row {
    flex-direction: column;
    align-items: stretch;
  }

  .item_mirai_eco .place-toggle {
    justify-content: flex-end;
  }

  .item_mirai_eco .place-btn {
    flex: 1 1 0;
  }

  .item_mirai_eco .window-main {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .item_mirai_eco .pattern-btn {
    width: 45%;
    align-self: stretch;
    padding: 6px 6px;
  }

  /* A1: badge width = the [select|price] span (calculated from the base values) → badge left edge = green line.
     No longer overrides width on mobile (so the shared calc applies, aligning tight to the select column). */

  /* A2 (mobile): 補助金の条件について (moved by JS into .window-table-head) on the left + badge on the right */
  .item_mirai_eco .window-table-head {
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  /* condition-row now has only 元にもどす → pushed right (as in image 1) */
  .item_mirai_eco .condition-row {
    justify-content: flex-end;
  }

  .item_mirai_eco .req-text {
    font-size: 15px;
  }

  .item_mirai_eco .window-subnotes {
    font-size: 13px;
    padding-left: 0;
  }

  .item_mirai_eco .pattern-btn {
    font-size: 18px;
  }

  .item_mirai_eco .window-row {
    margin: 3px 0;
  }

  .item_mirai_eco .w-label {
    white-space: normal;
    font-size: 15px;
    /* (mobile): a window label wrapping to 2 lines → the wrapped line uses a hanging indent to ~the red line,
       not flush against the left edge. padding-left = |text-indent| → line 1 stays at the edge, line 2+ indents 1.6em. */
    padding-left: 3.1em;
    text-indent: -3.1em;
  }

  .item_mirai_eco .w-select select {
    font-size: 17px;
  }

  .item_mirai_eco .w-price {
    font-size: 16px;
  }

  .item_mirai_eco .note {
    margin: 12px 0 0;
    font-size: 11.5px;
    padding-left: 8px;
  }

  /* narrow screen → do NOT lock the width: let the block shrink-to-fit the 13px label so it stays inside the
     viewport (a fixed 74px block would push the wider label off-screen and clip it). The 74px image is centered
     under the label. The note text already wraps on mobile, so the wider footprint is harmless here. */
  .item_mirai_eco .note-trigger-qr {
    width: auto;
    margin: 0 0 6px 5px;
  }

  .item_mirai_eco .note-trigger-qr__label {
    font-size: 11.5px;
  }

  .item_mirai_eco .note-trigger-qr__img {
    width: 74px;
  }

  /* その他の補助金項目 list on mobile */
  .item_mirai_eco .osc-list {
    padding-left: 10px;
  }

  .item_mirai_eco .osc-entrance-note {
    padding-left: 10px;
    font-size: 15px;
  }

  .item_mirai_eco .osc-name,
  .item_mirai_eco .osc-group-title {
    font-size: 16px;
  }

  .item_mirai_eco .osc-row.osc-sub .osc-name {
    padding-left: 14px;
  }

  .item_mirai_eco .osc-select select {
    font-size: 16px;
  }

  .item_mirai_eco .osc-price {
    font-size: 16px;
  }

  .item_mirai_eco .osc-note {
    font-size: 13px;
  }

  .item_mirai_eco .btn_simulation {
    width: 95%;
  }
}

/* ==============================================================================
   (option selector) — select 改修する工事
   Overrides global .wrap_option (item_water_area.css) → green みらいエコ theme.
   Accordion behavior (.box_option_content hidden → .selected shown) uses global CSS.
============================================================================== */
.item_mirai_eco .wrap_option .option_item {
  background: #00C144;
  border: none;
  margin-top: 12px;
  overflow: hidden;
}

.item_mirai_eco .wrap_option .option_item:first-child {
  margin-top: 12px;
}

.item_mirai_eco .wrap_option .option_item.selected {
  padding-bottom: 0;
}

/* header row (radio + option name) */
.item_mirai_eco .wrap_option .option_item .box_item {
  padding: 8px 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* radio: white circle; selected → border + yellow dot */
.item_mirai_eco .wrap_option .box_item input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #fff;
  flex: 0 0 auto;
  cursor: pointer;
  position: relative;
}

.item_mirai_eco .wrap_option .box_item input[type="radio"]:checked {
  border-color: #89BD28;
}

.item_mirai_eco .wrap_option .box_item input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #FFFF00;
}

.item_mirai_eco .wrap_option .box_item label.name {
  width: auto;
  margin-left: 16px;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
}

.item_mirai_eco .wrap_option .box_item label .text_note {
  margin-left: 16px;
  font-size: 19px;
  color: #fff;
}

/* white content below the green header */
.item_mirai_eco .wrap_option .option_item .box_option_content {
  background: #fff;
}

/* option entrance — separate #mirai_option_entrance (header) from .box_option_content
   with an 18px WHITE gap above the content (padding within the white background, not margin, to
   avoid exposing the green background of .option_item). */
.item_mirai_eco .wrap_option .option_entrance .box_option_content {
  padding-top: 12px;
}

/* green-bar 「ドアのタイプを選択…」 is inside the entrance content → round the corner below the header */
.item_mirai_eco .wrap_option .door-select-bar {
  border-radius: 0;
}

/* window-block (必須 bar + window-area + button) = UI shared by every option.
   JS moves it into the .box_option_content of the selected option → shown only when it's INSIDE
   the selected option. When nothing is selected (the block sits outside all options) → hidden. */
.item_mirai_eco .window-block {
  display: none;
}

.item_mirai_eco .option_item.selected .window-block {
  display: block;
}

/* ==============================================================================
   Spec area (浴室 / キッチン / トイレ) : plan-area--spec
   2-column layout; EACH column contains its own header + content (header in the SAME column as content)
   → mobile stacks in the right order: product header → image → recommend header → spec list.
============================================================================== */
.item_mirai_eco .plan-area--spec {
  padding: 18px 24px 18px;
}

.item_mirai_eco .spec-cols {
  display: flex;
  gap: 4%;
  align-items: flex-start;
}

.item_mirai_eco .spec-col--product {
  flex: 0 0 36%;
}

.item_mirai_eco .spec-col--recommend {
  flex: 1 1 auto;
  min-width: 0;
}

/* header per column: product name (left column) | おススメ仕様 (right column) */
.item_mirai_eco .spec-head {
  background: #CEED82;
  color: #000;
  text-align: center;
  font-size: 19px;
  padding: 8px 6px;
  margin-bottom: 14px;
  font-weight: 700;
}

.item_mirai_eco .spec-head--recommend {
  
}

.item_mirai_eco .spec-photo img {
  display: block;
  width: 100%;
  min-height: 220px;
  background: #ededed; /* placeholder when the product image isn't available yet */
  object-fit: cover;
}

/* thumbnails (換気乾燥暖房機, ビルトイン食洗器, …) */
.item_mirai_eco .spec-thumbs {
  display: flex;
  flex-wrap: wrap;          /* avoid horizontal overflow when a caption is long (especially on mobile) */
  justify-content: flex-start;
  gap: 20px;
  margin-bottom: 12px;
}

.item_mirai_eco .spec-thumb {
  margin: 0;
  flex: 0 0 auto;           /* figure sizes to its widest content (image or caption) */
  text-align: center;       /* center BOTH image and caption on the same axis → balanced */
}

.item_mirai_eco .spec-thumb img {
  display: block;
  margin: 0 auto 4px;       /* image centered in the figure */
  height: 110px;
  background: #ededed;      /* placeholder */
  object-fit: cover;
  width: 165px;             /* DEFAULT width for all images; the per-image rules below override it */
}

/* ─── PER-IMAGE WIDTH — uncomment the matching line & fill in the desired value ───
   (the selector intentionally includes "img." to override the default width above) ───
*/
.item_mirai_eco .spec-thumb img.spec-thumb-img--bathroom-bathtub   { width: 165px; }
.item_mirai_eco .spec-thumb img.spec-thumb-img--bathroom-dryer     { width: 165px; }
.item_mirai_eco .spec-thumb img.spec-thumb-img--kitchen-dishwasher { width: 150px; }
.item_mirai_eco .spec-thumb img.spec-thumb-img--kitchen-faucet     { width: 130px; }


/* caption: 1 line, centered under the image (inherits text-align:center from .spec-thumb) */
.item_mirai_eco .spec-thumb figcaption {
  font-size: 15px;
  color: #666666;
  white-space: nowrap;      /* no wrapping */
}

/* spec list: name + quantity select + price */
.item_mirai_eco .spec-list.spec-list--no-thumb {
  min-height: 240px;
}

.item_mirai_eco .spec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0;
}

.item_mirai_eco .spec-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 20px;
  color: #4d4d4d;
}

.item_mirai_eco .spec-qty {
  flex: 0 0 72px;
  width: 72px;
  line-height: 19px;
  border: 2px solid #00C144;
  border-radius: 6px;
  background: #fff;
  position: relative;
}

.item_mirai_eco .spec-qty select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  text-align: center;
  text-align-last: center;
  padding-right: 4px;
  cursor: pointer;
  outline: none;
  font-weight: 600;
  font-size: 20px;
  color: #4d4d4d;
  padding-bottom: 2px;
}

.item_mirai_eco .spec-qty::after {
  content: "▼";
  position: absolute;
  right: 8px;
  top: 51%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #000000;
  pointer-events: none;
}

.item_mirai_eco .spec-price {
  flex: 0 0 120px;
  width: 120px;
  text-align: right;
  font-size: 20px;
  font-weight: 600;
  color: #6FBA2C;
  white-space: nowrap; /* keep the amount from splitting the number / 円 */
}

/* みらいエコ補助額 (end of the spec area, right-aligned) */
.item_mirai_eco .spec-eco {
  /* desktop/tablet: みらいエコ補助額 = 204px (= 先進的窓リノベ badge), flush right → left edge = green line.
     mobile overrides to 70% in @media. */
  margin: 14px 0 0 auto;
  width: 204px;
}

.item_mirai_eco .spec-eco-bar {
  background: #00C144;
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 5px 6px;
  border-radius: 2px;
}

.item_mirai_eco .spec-eco-price {
  margin-top: 4px;
  text-align: right;
  color: #6FBA2C;
  font-size: 20px;
  font-weight: 600;
}

/* Red note 対面キッチン (kitchen spec area) — like 玄関改修, red text ONLY, NO background. */
.item_mirai_eco .spec-mutex-note {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.4;
}

@media screen and (max-width: 767px) {
  .item_mirai_eco .spec-mutex-note {
    font-size: 13px;
  }
}

/* (kitchen): spec-foot = footer row holding みらいエコ補助額 (spec-eco) + red note (spec-mutex-note).
   - Mobile (≤767): default block (NO rule below) → spec-eco (flush right, 160px) then note underneath — UNCHANGED.
   - Desktop/tablet (≥768): flex row-reverse → moves the red note into the empty space on the LEFT next to the bar (right, 204).
     DOM is deliberately [spec-eco, note] so mobile keeps the bar→note order; row-reverse flips it to [note | bar] on desktop. */
@media screen and (min-width: 768px) {
  .item_mirai_eco .plan-area--kitchen .spec-foot {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 16px;
    margin-top: 14px; /* separates from spec-cols (replaces spec-eco's margin-top:14 which is cancelled below) */
  }

  .item_mirai_eco .plan-area--kitchen .spec-foot .spec-eco {
    flex: 0 0 204px;
    margin: 0; /* cancels margin:14px 0 0 auto (the auto is redundant in flex) */
  }

  .item_mirai_eco .plan-area--kitchen .spec-foot .spec-mutex-note {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0; /* vertically centered with the bar via align-items:center */
  }
}

/* ==============================================================================
   Responsive option selector + spec area
============================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .item_mirai_eco .wrap_option .box_item label.name {
    font-size: 19px;
  }

  .item_mirai_eco .wrap_option .box_item label .text_note {
    font-size: 16px;
  }

  .item_mirai_eco .spec-head {
    font-size: 17px;
  }

  .item_mirai_eco .spec-name {
    font-size: 17px;
  }

  .item_mirai_eco .spec-qty select {
    font-size: 17px;
  }

  .item_mirai_eco .spec-price {
    font-size: 17px;
  }

  /* (request 2): みらいエコ補助額 (spec-eco) KEEPS 204 (= 先進的窓リノベ badge) across the WHOLE tablet range
     → always aligned, even when iPad Mini narrows the select below. spec-eco base is already 204 → no override. */

  /* (request 3): mansion on tablet (iPad Mini/Air) — .plan-area--entrance is flex-wrap; since
     mansion-door 440 + eco-summary 300 > available width, eco-summary WRAPS to the next line and shifts LEFT.
     Force eco-summary full-width + eco-subsidy 204 flush right (like mobile) → みらいエコ補助額 sits on the RIGHT,
     aligned with 先進的窓リノベ like the other layouts. */
  .item_mirai_eco.is-mansion .eco-summary {
    flex-basis: 100%;
  }
  .item_mirai_eco.is-mansion .eco-subsidy {
    flex: none;
    width: 204px;
    max-width: 204px;
    margin-left: auto;
  }

  .item_mirai_eco .spec-thumb img {
    height: 96px;
  }
}

/* ==============================================================================
   (request 1 & 2) — iPad Mini (768–819): the spec area is too narrow → spec names (節水トイレ…,
   ビルトイン自動調理コンロ) wrap. Move the select closer to the price (gap 12→8, price 120→96) for .spec-row ONLY → name column
   +32px, 1 line. Trade-off: the spec select shifts right off the 204 line (client ACCEPTED this for iPad Mini).
   iPad Air (≥820) is wider, so NO shrink (uses the standard 120/12) → the select stays exactly on the 204 red line.
   spec-eco KEEPS 204 (aligned with 先進的窓リノベ). Doesn't touch window/osc → the 2/3 area keeps the 204 line.
============================================================================== */
@media screen and (min-width: 768px) and (max-width: 819px) {
  .item_mirai_eco .spec-row {
    gap: 8px;
  }

  .item_mirai_eco .spec-price {
    flex-basis: 96px;
    width: 96px;
  }
}

@media screen and (max-width: 767px) {
  .item_mirai_eco .wrap_option .option_item .box_item {
    padding: 10px 14px;
  }

  .item_mirai_eco .wrap_option .box_item label.name {
    margin-left: 12px;
    font-size: 17px;
  }

  .item_mirai_eco .wrap_option .box_item label .text_note {
    display: block;
    margin-left: 0;
    margin-top: 2px;
    font-size: 14px;
  }

  .item_mirai_eco .plan-area--spec {
    padding: 12px 12px 16px;
  }

  /* stack vertically: product column (header + image) on top, recommend column (header + spec) below
     → product header → image → recommend header → thumbnail/spec list. */
  .item_mirai_eco .spec-cols {
    flex-direction: column;
  }

  .item_mirai_eco .spec-col--product,
  .item_mirai_eco .spec-col--recommend {
    flex: none;
    width: 100%;
  }

  .item_mirai_eco .spec-col--recommend {
    margin-top: 12px;
  }

  .item_mirai_eco .spec-head {
    font-size: 16px;
  }

  .item_mirai_eco .spec-photo {
    max-width: 320px;
    margin: 0 auto;
  }

  /* mobile: center the おススメ仕様 thumbnails in the column for balance (instead of left-aligned) */
  .item_mirai_eco .spec-thumbs {
    justify-content: center;
  }

  .item_mirai_eco .spec-name {
    font-size: 16px;
  }

  .item_mirai_eco .spec-qty select {
    font-size: 16px;
  }

  /* FIX: base .spec-qty/.spec-price/.spec-row (72/120/12) is declared AFTER the first @media ≤767 block
     → the mobile override there gets overridden by base. Must re-set it HERE (after base spec) so spec aligns to the SAME green line
     as window/その他 (68/86/gap6). */
  .item_mirai_eco .spec-qty {
    width: 68px;
    flex-basis: 68px;
  }

  .item_mirai_eco .spec-price {
    font-size: 16px;
    width: 86px;
    flex-basis: 86px;
  }

  .item_mirai_eco .spec-row {
    gap: 6px;
  }

  .item_mirai_eco .spec-eco {
    /* (mobile): みらいエコ補助額 (spec) = 160px (= badge) flush right → aligned with the red line. */
    width: 160px;
  }

  /* mobile — the おススメ仕様 column without a thumbnail (toilet) doesn't need to be as tall as the column with an image
     like on desktop (stacked columns) → reduce min-height to avoid extra empty space. */
  .item_mirai_eco .spec-list.spec-list--no-thumb {
    min-height: 130px;
  }
}

/* iPhone SE (≤375px) — hero-title one step smaller to keep 2 lines */
@media screen and (max-width: 375px) {
  .item_mirai_eco .hero-title {
    font-size: 18px;
  }
}