/* 
body {
  margin: 0;
  padding: 30px;
  font-family: Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background: #f5f5f5;
  color: #333;
} */

#cart_mirai_eco {
  max-width: 900px;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
}

.mirai_eco {
  background: #fff;
  border: 2px solid #08bf48;
  border-radius: 18px 18px 18px 18px;
  overflow: hidden;
}

.mirai_eco .mirai_eco-head {
  position: relative;
  padding: 12px 24px;
  background: #08bf48;
  color: #fff;
  text-align: center;
  /* 3-column grid (1fr | title | 1fr) so the title always centers across the
     whole header while area-tags stay flush right, without overlapping when the
     title is long (e.g. マンションドアセレクトプラン). Previously area-tags were
     absolute (out-of-flow), so the title centered full-width and overlapped the
     tags. A long title now wraps. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
}

.mirai_eco .mirai_eco-head .main-title {
  grid-column: 2;
  min-width: 0; /* allow the title to wrap instead of overflowing onto the tags */
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 1px;
}

.mirai_eco .mirai_eco-head .area-tags {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 24px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.mirai_eco .mirai_eco-head .area-tags .tag-area,
.mirai_eco .mirai_eco-head .area-tags .tag-residence {
  position: relative;
}

/* Draw the dot with CSS instead of the "●" glyph. Safari renders "●" very large
   and inconsistently with Chrome; a border-radius circle looks the same in every browser. */
.mirai_eco .area-tags span::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}

.mirai_eco .content {
  padding: 18px 16px 20px;
}

/* Show only the .plan-area of the selected option (JS adds .is-active per option on the item screen);
   hide the others. */
.mirai_eco .plan-area {
  display: none;
  padding: 0 0 14px;
}

.mirai_eco .plan-area.is-active {
  display: block;
}

.mirai_eco .plan-area .plan-row {
  display: flex;
  gap: 95px;
  padding: 0 45px 16px 65px;
  border-bottom: 2px solid #08bf48;
}

.mirai_eco .plan-area .plan-row + .plan-row {
  padding-top: 16px;
}

.mirai_eco .plan-row .plan-photo {
  flex: 0 0 140px;
  text-align: center;
}

.mirai_eco .plan-photo img {
  width: 128px;
  height: 245px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 引戸 (door_3.png — horizontal door) is enlarged separately via the .plan-row--wide-door class
   (added by JS cartDoorRowHtml) — all rules are at the END OF FILE (引戸 wide-door section). */

.mirai_eco .plan-row .plan-desc {
  flex: 1;
}

.mirai_eco .plan-desc .plan-title {
  width: 80%;
  max-width: calc(100% - 120px); /* leave room for the LIXIL logo (120px) at the right corner, no overlap */
  margin: 8px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid #54585A;
  color: #54585A;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 500;
  text-align: right;
}

.mirai_eco .plan-desc .plan-price {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  color: #54585A;
  font-weight: 500;
}

.mirai_eco .plan-price .price-label {
  font-size: 15px;
}

.mirai_eco .plan-price .price-num {
  font-size: 32px;
  letter-spacing: 1px;
  margin-left: 10px;
  font-weight: 600;
}

.mirai_eco .plan-price .price-yen {
  font-size: 32px; /* same as .price-num */
  font-weight: 600;
}

.mirai_eco .plan-desc .plan-note {
  margin: 0 0 7px;
  color: #54585A;
  font-size: 12px;
  line-height: 1.55;
  font-weight: 500;
}

.mirai_eco .plan-desc .plan-note span {
  text-indent: -15px;
  padding-left: 15px;
  display: block;
}

.mirai_eco .plan-desc .door-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  /* C3: full-width green box = card content edge (aligned with .plan-price) */
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 8px;
  padding: 8px 18px;
  background: #CEED82;
  color: #4D4D4D;
  font-weight: 500;
}

/* .door-type — mobile keeps 100% (full-width, see @media ≤767). Desktop/tablet narrows it for tidiness
   (values specified by the client; still wide enough that door name + badge don't wrap). Block box → shrinks from the right, name stays left. */
@media screen and (min-width: 1024px) {
  .mirai_eco .plan-desc .door-type {
    width: 80%;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .mirai_eco .plan-desc .door-type {
    width: 86%;
  }
}

.mirai_eco .plan-desc .door-type .door-type-name {
  font-size: 22px;
}

.mirai_eco .plan-desc .door-type .door-type-badge {
  flex: none;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
}

.mirai_eco .plan-desc .door-sub-price {
  margin-left: 18px;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
}

.mirai_eco .subsidy-area {
  display: flex;
  gap: 14px;
  padding: 14px 36px 0;
}

.mirai_eco .subsidy-area .subsidy-box {
  flex: 1;
  min-width: 0;
}

/* Merged strip (補助金合計額 / メーカー小売価格合計) — hidden by default (mobile uses the values inside each column) */
.mirai_eco .subsidy-merged {
  display: none;
}

/* Desktop/tablet (>=768) + PRINT: merge 補助金合計額 + メーカー小売(合計) into a full-width center strip;
   subsidy-box/subsidy-detail → display:contents so they join the grid directly → the two .total-price sit on the same row
   (borders aligned). Use ", print" so the grid also applies when exporting PDF: window.print() prints the MAIN window,
   and the page box after margins is usually < 768px, so (min-width:768px) alone does NOT match → borders misalign. "print"
   matches every paper size, so the grid layout is always used. */
@media (min-width: 768px), print {
  .mirai_eco .subsidy-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "ghead      bhead"
      "msummary   msummary"
      "gsum       bsum"
      "gcollapse  bcollapse"
      "gtotal     btotal"
      "mretail    mretail"
      "gbreak     gbreak";
    column-gap: 14px;
    row-gap: 4px;
  }

  /* subsidy-box AND subsidy-detail → display:contents so head/summary/detail-collapse/total-price
     join the grid directly. This puts the two-column total-price on the SAME row (gtotal/btotal) → border-top aligns. */
  .mirai_eco .subsidy-area .subsidy-box,
  .mirai_eco .subsidy-area .subsidy-detail {
    display: contents;
  }

  .mirai_eco .subsidy-box.is-green .subsidy-head { grid-area: ghead; }
  .mirai_eco .subsidy-box.is-blue  .subsidy-head { grid-area: bhead; }
  .mirai_eco .subsidy-box.is-green .subsidy-summary { grid-area: gsum; }
  .mirai_eco .subsidy-box.is-blue  .subsidy-summary { grid-area: bsum; }
  .mirai_eco .subsidy-box.is-green .detail-collapse { grid-area: gcollapse; }
  .mirai_eco .subsidy-box.is-blue  .detail-collapse { grid-area: bcollapse; }
  .mirai_eco .subsidy-box.is-green .total-price { grid-area: gtotal; }
  .mirai_eco .subsidy-box.is-blue  .total-price { grid-area: btotal; }
  .mirai_eco .subsidy-box.is-green .total-breakdown { grid-area: gbreak; }
  .mirai_eco .subsidy-merged--summary { grid-area: msummary; }
  .mirai_eco .subsidy-merged--retail  { grid-area: mretail; }

  /* (desktop/tablet): balance the 3 rows (メーカー希望小売価格（合計）+ ＞… + ＞…)
     so the PRICE aligns like on mobile. Both the retail strip and breakdown SHARE a width of 400px,
     both margin auto (centered) + space-between → label left / price right at the same right edge.
     400px = enough for the fixed label メーカー希望小売価格（合計）(~250px @18px) + a large price
     (7~8 digits, e.g. 12,345,600円 ~150px) + spacing, avoiding crowding/overflow that would misalign the price. */
  .mirai_eco .subsidy-box.is-green .total-breakdown {
    width: 400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
  }
  /* ＞… is still slightly indented relative to メーカー希望小売価格（合計） */
  .mirai_eco .subsidy-box.is-green .total-breakdown .total-row > span {
    padding-left: 16px;
  }

  /* merged strip centered full-width */
  .mirai_eco .subsidy-merged {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
  }
  .mirai_eco .subsidy-merged .summary-label,
  .mirai_eco .subsidy-merged .total-label {
    font-size: 18px;
    font-weight: 500;
    color: #000;
  }

  .mirai_eco .subsidy-merged .total-label {
    color: #54585A;
  }

  /* Retail strip shares its width with breakdown + space-between → the price of
     メーカー希望小売価格（合計）aligns with the prices of the two ＞… rows below (like mobile).
     Applies only to --retail; --summary (補助金合計額) still centers the group as before. */
  .mirai_eco .subsidy-merged--retail {
    width: 400px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    gap: 0;
  }

  .mirai_eco .subsidy-merged--summary .summary-price {
    color: #f05a1a;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 1px;
  }
  .mirai_eco .subsidy-merged--retail .total-num {
    color: #555;
    font-size: 21px;
    font-weight: 600;
    color: #54585A;
  }

  /* 補助金合計額 has moved to the center → hide the label+number in the column, keep only the ⊟ button (right-aligned).
     (.subsidy-area … specificity 0,4,0 to override base .subsidy-box .subsidy-summary{justify-content:space-between}) */
  .mirai_eco .subsidy-area .subsidy-box .subsidy-summary {
    justify-content: flex-end;
    padding: 6px 0 0;
  }
  .mirai_eco .subsidy-box .subsidy-summary .summary-label,
  .mirai_eco .subsidy-box .subsidy-summary .box_price .summary-price {
    display: none;
  }

  /* メーカー小売(合計) has moved to the center → hide total-main in the column, keep breakdown (＞玄関/＞窓) as is.
     (higher specificity than the default .total-price .total-main to override display:flex) */
  .mirai_eco .subsidy-detail .total-price .total-main {
    display: none;
  }

  /* Blue column: desktop STILL shows .total-price so it has a blue border-top aligned with the green column
     (total-main hidden above → this cell is just the border line). Same grid row gtotal/btotal, so both borders align.
     min-height so the border shows clearly even when empty. */
  .mirai_eco .subsidy-box.is-blue .total-price {
    min-height: 1px;
  }
}

.mirai_eco .subsidy-box .subsidy-head {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 1px;
}

.mirai_eco .subsidy-box.is-green .subsidy-head {
  background: #08bf48;
}

.mirai_eco .subsidy-box.is-blue .subsidy-head {
  background: #5378f0;
}

.mirai_eco .subsidy-box .subsidy-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0 8px;
}

.mirai_eco .subsidy-summary .summary-label {
  font-size: 18px;
  font-weight: 500;
  color: #000000;
  margin-left: 4%;
  white-space: nowrap; /* "補助金合計額" stays on one line */
}

.mirai_eco .subsidy-summary .summary-price {
  color: #f05a1a;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1px;
  white-space: nowrap; /* keep the amount from splitting "284,000" / "円" across lines (especially on mobile) */
}

.mirai_eco .subsidy-summary .toggle-btn {
  position: relative;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #ffeaa4;
  cursor: pointer;
}

/* The +/− sign is drawn with 2 bars (NOT content text) — adjust size/thickness/color here. */
.mirai_eco .subsidy-summary .toggle-btn::before,
.mirai_eco .subsidy-summary .toggle-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;   /* bar length */
  height: 4px;   /* bar thickness */
  border-radius: 1px;
  background: #FFC000;
  transform: translate(-50%, -50%);
}

/* vertical bar → combines with the horizontal bar into a + (collapsed state = .is-collapsed) */
.mirai_eco .subsidy-summary .toggle-btn::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* open (no .is-collapsed) → hide the vertical bar → leaves the − sign */
.mirai_eco .subsidy-box:not(.is-collapsed) .toggle-btn::after {
  display: none;
}

.mirai_eco .subsidy-box .detail-title {
  margin: 0 0 16px;
  margin-left: 4%;
  font-size: 18px;
  font-weight: 500;
  color: #000000;
}

.mirai_eco .subsidy-box .subsidy-detail {
  /* padding: 0 0px 0 16px; */
}

/* The ⊟ button only collapses/expands .detail-collapse (spec-row + その他) with a slide; total-price always shows. */
.mirai_eco .subsidy-summary .box_price {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.mirai_eco .subsidy-detail .spec-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
  width: 97%;
  margin-left: auto;
}

.mirai_eco .spec-row .spec-img {
  flex: 0 0 68px;
  padding-top: 3px;
  text-align: center;
}

.mirai_eco .spec-img img {
  max-width: 100%;
  height: auto;
}

.mirai_eco .spec-img.is-tall img {
}

/* spec-row for product options (浴室/キッチン/トイレ): each selected item = name (left) + price×qty (right). */
.mirai_eco .spec-img--product img {
  width: 68px;
}

.mirai_eco .spec-content .spec-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 8px;
  font-size: 16px;
  color: #54585A;
}

.mirai_eco .spec-content .spec-item-name {
  flex: 1;
  min-width: 0;
}

.mirai_eco .spec-content .spec-item .price-box {
  white-space: nowrap;
}

.mirai_eco .spec-content .spec-item .price-box .icon-x {
  margin: 0 2px;
}

/* summary-price when the 補助 threshold isn't met (基準に達していません) — smaller than the amount to fit the box. */
.mirai_eco .summary-price .summary-below {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  color: red; /* red as requested */
}

/* When the box does NOT meet the standard → .price-box / .others-item-price-box is replaced with
   基準に達していません (red), instead of the [price]×[qty] part. */
.mirai_eco .price-box .below-inline,
.mirai_eco .others-item-price-box .below-inline {
  color: red;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}

/* Window NOT yet selected → the blue box slides but has NO .spec-sizes/.price-box to replace.
   JS inserts 基準に達していません right under .spec-name — right-aligned (matching the price-box position), red. */
.mirai_eco .spec-content .spec-below {
  margin-top: 8px;
  color: red;
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

/* 注記 (※…必要) when the box doesn't meet the standard — sits on the SAME ROW as toggle-btn (pushed left,
   toggle stays right). Text color #54585A, only the amount (.note-amt) is red. Empty (box qualifies) → hidden.
   white-space:nowrap to prevent wrapping; font-size decreases on tablet/mobile (see media query). */
.mirai_eco .subsidy-summary .criteria-note {
  margin-right: auto;
  color: #54585A;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}
.mirai_eco .subsidy-summary .criteria-note .note-amt {
  color: red;
}
.mirai_eco .subsidy-summary .criteria-note:empty {
  display: none;
}

.mirai_eco .spec-row .spec-content {
  flex: 1;
  min-width: 0;
}

.mirai_eco .spec-content .spec-label {
  margin-bottom: 2px;
  color: #f05a1a;
  font-weight: 500;
  font-size: 18px;
  padding-left: 10px;
}

.mirai_eco .spec-content .spec-name {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  padding: 4px 10px;
  background: #fff5d6;
  color: #333;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  min-height: 45px;
}

.mirai_eco .spec-name small {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  font-weight: 500;
}

.mirai_eco .spec-content .spec-name.is-green {
  background: #d7f48a;
  font-weight: 500;
}

.mirai_eco .spec-content .spec-sizes {
  display: flex;
  justify-content: space-between;
  padding: 0px 8px;
  margin-top: 8px;
}

.mirai_eco .spec-content .spec-sizes .price-box .icon-x {
  margin: 0 2px;
}

.mirai_eco .subsidy-detail .others-box {
  padding-top: 6px;
}

.mirai_eco .subsidy-detail .others-title {
  margin-left: 6%;
  margin-bottom: 6px;
  font-size: 18px;
}

.mirai_eco .subsidy-detail .others-content {}

.mirai_eco .subsidy-detail .others-item {
  display: flex;
  justify-content: space-between;
  /* Align the TEXT left edge with .spec-item (キッチン… items). .spec-item is inside
     .spec-content (starts at 3% + 82px) + padding-left 8px = (3% + 90px). Previously padding-left was
     27% (pure %), so it drifted right as the width grew. */
  padding: 3px 8px 3px calc(3% + 90px); /* left = 3% + icon 68 + gap 14 + 8 (= .spec-item padding) */
  font-size: 16px;
}

.mirai_eco .subsidy-detail .others-item-name {
  width: 68%;
}

.mirai_eco .subsidy-detail .others-item-price-box {}

.mirai_eco .subsidy-detail .others-item-price-box .icon-x {
  margin: 0 2px;
}

.mirai_eco .subsidy-detail .total-price {
  margin-top: 8px;
  padding-top: 9px;
  padding-left: 6%;
  padding-right: 16px;
  border-top: 2px solid #08bf48;
}

.mirai_eco .subsidy-box.is-blue .total-price {
  border-top-color: #5378f0;
}

/* breakdown (玄関+窓) in the blue column is ONLY for mobile → hidden on desktop/tablet. */
.mirai_eco .subsidy-box.is-blue .total-breakdown {
  display: none;
}

.mirai_eco .total-price .total-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-weight: 500;
}

.mirai_eco .total-main .total-label {
  font-size: 16px;
  white-space: nowrap; /* "メーカー小売価格（合計）" stays on one line, balanced with the number on the right */
}

.mirai_eco .total-main .total-num {
  color: #555;
  font-size: 20px;
  white-space: nowrap; /* keep the メーカー小売価格 number from splitting "2,556,500" / "円" */
}

/* breakdown amounts (＞玄関/＞窓) stay on one line */
.mirai_eco .total-breakdown .total-row > div {
  white-space: nowrap;
}

.mirai_eco .subsidy-detail .total-breakdown {
  padding-left: 22px;
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.mirai_eco .total-breakdown .total-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #54585A;
}

/* Narrow tablet (768px~820px) — メーカー希望小売価格 price shrinks to 27px to fit the column. */
@media screen and (min-width: 768px) and (max-width: 912px) {
  .mirai_eco .plan-price .price-num,
  .mirai_eco .plan-price .price-yen {
    font-size: 27px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .mirai_eco .plan-area .plan-row {
    padding: 0px 20px 16px 20px;
    gap: 40px;
  }

  .mirai_eco .plan-desc .plan-title {
    width: 80%;
  }

  .mirai_eco .plan-logo {
    right: -25px !important;
    width: 90px !important;
  }

  .mirai_eco .subsidy-area {
    padding: 14px 0px 0;
  }

  .mirai_eco .subsidy-summary .summary-label {
    font-size: 16px;
  }

  .mirai_eco .subsidy-summary .summary-price {
    font-size: 26px;
  }

  /* 注記 shrinks to fit one line next to the toggle on tablet (the box is narrower than desktop). */
  .mirai_eco .subsidy-summary .criteria-note {
    font-size: 15px;
  }

  .mirai_eco .subsidy-box .detail-title {
    margin: 0 0 16px;
    padding-left: 3%;
  }

  .mirai_eco .subsidy-detail .spec-row {
  }

  .mirai_eco .spec-content .spec-label {
    font-size: 16px;
  }

  .mirai_eco .spec-content .spec-name {
    font-size: 18px;
  }

  .mirai_eco .spec-name small {
    font-size: 14px;
  }

  .mirai_eco .total-main .total-label {
    font-size: 14px;
  }

  .mirai_eco .subsidy-detail .total-breakdown {
  }

  .mirai_eco .total-main .total-num {
    font-size: 18px;
  }
}

@media screen and (max-width: 767px) {
  /* Mobile stacks vertically — drop the grid so title + tags stack, tags centered below the title. */
  .mirai_eco .mirai_eco-head {
    display: block;
    /* Reduce horizontal padding 24→12 so the longest title (マンションドアセレクトプラン, 13 chars) fits on one line. */
    padding: 12px 12px;
  }

  .mirai_eco .mirai_eco-head .main-title {
    /* 22→20 + drop letter-spacing so マンションドアセレクトプラン doesn't wrap on narrow mobile
       (fits down to ~360px; shorter titles 玄関/浴室/キッチン/トイレ still fit one line). */
    font-size: 20px;
    letter-spacing: 0;
  }

  .mirai_eco .mirai_eco-head .area-tags {
    position: static;
    justify-content: center;
    margin-top: 6px;
    transform: none;
  }

  .mirai_eco .plan-area .plan-row {
    flex-direction: column;
    align-items: center;
  }

  .mirai_eco .plan-area .plan-row {
    gap: 20px;
    padding: 0 0px 16px 0px;
  }

  .mirai_eco .plan-photo img {
    width: 115px;
  }

  /* (door_3.png — 引戸: enlarged separately in the 引戸 wide-door section at END OF FILE) */

  .mirai_eco .plan-desc .plan-title {
    width: 100%;
  }

  .mirai_eco .plan-desc .plan-title {
    font-size: 18px;
  }

  .mirai_eco .plan-price .price-label {
    font-size: 14px;
  }

  .mirai_eco .plan-price .price-num,
  .mirai_eco .plan-price .price-yen {
    font-size: 23px;
  }

  .mirai_eco .content {
    padding: 12px 8px 20px;
  }

  .mirai_eco .plan-desc .door-type {
    min-width: 89%;
  }

  .mirai_eco .plan-desc .door-type .door-type-name {
    font-size: 16px;
  }

  .mirai_eco .subsidy-area {
    padding: 14px 0px 0;
    flex-direction: column;
    gap: 35px;
  }

  .mirai_eco .subsidy-summary .summary-label {
    font-size: 16px;
  }

  .mirai_eco .subsidy-summary .summary-price {
    font-size: 24px;
  }

  /* 基準に達していません: allow wrapping + let summary shrink so the toggle button is NOT pushed out/lost */
  .mirai_eco .subsidy-box .subsidy-summary {
    gap: 10px;
    flex-wrap: wrap; /* let 注記 wrap to its own line (mobile is cramped, no room next to label/price/toggle) */
  }
  .mirai_eco .subsidy-summary .box_price {
    min-width: 0;
  }
  .mirai_eco .summary-price .summary-below {
    white-space: nowrap; /* 15px is small enough for 基準に達していません to fit one line (no wrap), toggle still shows */
    font-size: 15px;
  }

  /* Mobile — 注記 goes on its OWN full-width row (order:1 → after label/price/toggle),
     font 15px so the text fits one line (box ~315px, note ~285px). white-space:nowrap (inherited) → no wrap. */
  .mirai_eco .subsidy-summary .criteria-note {
    order: 1;
    flex-basis: 100%;
    margin-right: 0;
    margin-top: 4px;
    font-size: 15px;
  }

  .mirai_eco .subsidy-box .detail-title {
    padding-left: 3%;
    font-size: 16px;
  }

  .mirai_eco .subsidy-box .subsidy-detail {
    /* padding: 0 0px 0 6px; */
  }

  .mirai_eco .subsidy-detail .spec-row {
  }

  /* spec-content: reduce font one step for balance */
  .mirai_eco .spec-content .spec-label {
    font-size: 15px;
  }

  .mirai_eco .spec-content .spec-name {
    font-size: 16px;
    min-height: 38px;
  }

  .mirai_eco .spec-name small {
    font-size: 13px;
  }

  .mirai_eco .spec-content .spec-item {
    font-size: 15px;
  }

  /* total-price: drop side padding so total-main aligns to the right edge = breakdown below */
  .mirai_eco .subsidy-detail .total-price {
    padding-left: 0;
    padding-right: 0;
  }

  .mirai_eco .total-main .total-label {
    font-size: 15px;
  }

  /* drop min-width 45% → the number isn't pushed past the right edge, aligns with breakdown */
  .mirai_eco .total-main .total-num {
    font-size: 19px;
    min-width: 0;
    text-align: right;
  }

  .mirai_eco .subsidy-detail .total-breakdown {
    font-size: 15px;
    padding-left: 12px;
  }

  /* (mobile ONLY): move the total (メーカー小売合計 + ＞玄関 + ＞窓) from the green column to the blue column. */
  .mirai_eco .subsidy-box.is-green .total-price,
  .mirai_eco .subsidy-box.is-green .total-breakdown {
    display: none;
  }
  .mirai_eco .subsidy-box.is-blue .total-breakdown {
    display: block;
  }

  /* (mobile ONLY): hide 補助金合計額 (label + number) of the blue column. */
  .mirai_eco .subsidy-box.is-blue .subsidy-summary .summary-label,
  .mirai_eco .subsidy-box.is-blue .subsidy-summary .summary-price {
    display: none;
  }

  /* (mobile): label hidden → push the blue column's toggle-btn to the right (like the green column). */
  .mirai_eco .subsidy-box.is-blue .subsidy-summary {
    justify-content: flex-end;
  }

  /* (mobile, client request): move 補助金合計額 (total) UP to the merged strip at the TOP of subsidy-area
     (above the みらいエコ住宅 header), like desktop. This strip already exists (JS fills the number via .subsidy-merged--summary,
     mirrored from the green box) — just show + style it for mobile, and hide label+price in the green box. */
  .mirai_eco .subsidy-merged--summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: -20px;
    padding: 0 8px;
  }
  .mirai_eco .subsidy-merged--summary .summary-label {
    font-size: 16px;
    font-weight: 500;
    color: #000;
  }
  .mirai_eco .subsidy-merged--summary .summary-price {
    color: #f05a1a;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  /* hide 補助金合計額 (label + number) in the green box — already on the merged strip; KEEP toggle + 注記 (like the blue box) */
  .mirai_eco .subsidy-box.is-green .subsidy-summary .summary-label,
  .mirai_eco .subsidy-box.is-green .subsidy-summary .box_price .summary-price {
    display: none;
  }
  .mirai_eco .subsidy-box.is-green .subsidy-summary {
    justify-content: flex-end;
  }
}

/* ==============================================================================
   Cart: LIXIL logo + plan-area of new options + その他 green box
============================================================================== */
/* LIXIL logo at the top-right of each plan-row. Entrance: JS inserts it only for 戸建て (house),
   not for マンション. Options 浴室/キッチン/トイレ: pre-inserted in the HTML. */
.mirai_eco .plan-desc {
  position: relative;
}

.mirai_eco .plan-logo {
  position: absolute;
  top: 2px;
  right: -35px;
  width: 95px;
  height: auto;
}

/* Product options (浴室/キッチン/トイレ): layout like entrance, landscape image,
   title left-aligned, NO .door-type / .door-sub-price. Shown/hidden via .is-active (JS). */
.mirai_eco .plan-area--product .plan-row {
  gap: 40px;
  padding: 0 45px 16px 45px;
}

.mirai_eco .plan-area--product .plan-photo {
  flex: 0 0 200px;
  padding-top: 6px;
}

.mirai_eco .plan-area--product .plan-photo img {
  width: 100%;
  height: 150px;
  background: #ededed; /* placeholder when the product image isn't available yet */
  object-fit: cover;
}

.mirai_eco .plan-area--product .plan-title {
  width: auto;
  max-width: calc(100% - 135px); /* leave room for the LIXIL logo */
  text-align: left;
}

/* Entrance .plan-title: 2 lines — title_split_1 (top) + title_split_2 (bottom) centered.
   Full-width box so border-bottom spans the full width (per design); padding-right leaves
   room for the LIXIL logo (120px) so text doesn't overlap the logo. */
/* (client): entrance title — main (「リシェント玄関ドア3」) LEFT-aligned (like other options);
   sub (採風タイプ) flush RIGHT with main. 1-column grid = main width (fit-content, wraps if too long),
   column on the left (justify-content:start); sub justify-self:end → sub's right edge = main's right edge.
   .plan-title STILL keeps width:80% + border-bottom (from base) → the underline is NOT shortened. */
.mirai_eco .plan-area--entrance .plan-desc .plan-title {
  display: grid;
  grid-template-columns: fit-content(100%);
  justify-content: start;
  text-align: left;
}

.mirai_eco .plan-title-main,
.mirai_eco .plan-title-sub {
  display: block;
}

.mirai_eco .plan-title-sub {
  padding-right: 10px;
}

/* sub flush right with main (grid item, no right indent) */
.mirai_eco .plan-area--entrance .plan-desc .plan-title-sub {
  justify-self: end;
  padding-right: 10px;
}

@media screen and (max-width: 767px) {
  .mirai_eco .plan-area--entrance .plan-desc .plan-title {
    
  }
}

/* その他: title becomes a GREEN BOX (like .spec-name.is-green) per subsidy-detail.png */
.mirai_eco .subsidy-detail .others-title {
  box-sizing: border-box;
  display: block;
  /* Align the LEFT edge of the その他 box with the left edge of .spec-content (green bar キッチン…)
     at EVERY width. .spec-row = width:97% margin-left:auto (3% left offset) + icon 68px +
     gap 14px = spec-content starts at (3% + 82px). Uses literal calc (no var). Right edge
     = 100% (matches .spec-name). Previously width:76% + margin-left:auto (pure % offset) drifted
     with width → PDF (wide column) got pushed to the right. */
  width: calc(97% - 82px);          /* = 100% - (3% + 82px) → right edge reaches 100% */
  margin: 0 0 8px calc(3% + 82px);  /* left = spec-row 3% + icon 68 + gap 14 */
  padding: 4px 10px;
  background: #d7f48a;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
}

@media screen and (max-width: 767px) {
  /* その他: reduce font to balance with spec-name (green box) + spec-item.
     Placed AFTER the green-box rule (font 20px) above so it can override. */
  .mirai_eco .subsidy-detail .others-title {
    font-size: 16px;
  }

  .mirai_eco .subsidy-detail .others-item {
    font-size: 15px;
  }

  /* C1 (mobile): LIXIL logo goes to the TOP-RIGHT CORNER of the card (next to the image), not overlapping the desc column.
     plan-desc static → logo absolute anchored to plan-row (position:relative) = top-right corner of the card. */
  .mirai_eco .plan-area .plan-row {
    position: relative;
  }
  .mirai_eco .plan-desc {
    position: static;
  }
  .mirai_eco .plan-logo {
    width: 68px;
    top: 8px;
    right: 8px;
  }

  /* C2 (mobile): logo moved to the card corner → title uses full-width (no room reserved for the logo) */
  .mirai_eco .plan-desc .plan-title {
    max-width: 100%;
  }

  /* (mobile, product 浴室/キッチン/トイレ): per client request — the LIXIL logo sits ABOVE the image, order
     top to bottom: logo → image → title → price, NOT overlapping the image. The logo is inside .plan-desc (AFTER
     .plan-photo in the DOM), so flex order / display:contents (risky on old browsers) can't be used
     to move it before the image → leave an EMPTY STRIP above .plan-row (padding-top) and place the logo absolute
     (top-right) in that strip. This is safe at EVERY image width (the logo is always ABOVE, never overlapping sideways).
     Mobile ONLY + product ONLY (entrance 玄関 unchanged). */
  .mirai_eco .plan-area--product .plan-row {
    gap: 16px;
    padding: 36px 8px 16px; /* top 36 = room for the logo (~24px tall @68px) above the image */
  }

  .mirai_eco .plan-area--product .plan-logo {
    width: 68px;
    top: 8px;   /* sits in the top empty strip, above the image */
    right: 8px;
  }

  /* C2 (mobile): product title is also full-width (logo moved to the card corner) */
  .mirai_eco .plan-area--product .plan-title {
    max-width: 100%;
  }
}


@media screen and (max-width: 375px) {
    .mirai_eco .subsidy-summary .summary-label {
      font-size: 15px;
      margin-left: 3%;
    }
    .mirai_eco .summary-price .summary-below {
      font-size: 14px;
    }
}

/* ==============================================================================
   引戸 ベーシック仕様 (door_3.png, HORIZONTAL door — the other doors are all vertical):
   enlarge the image in the cart. The .plan-row--wide-door class is added by JS (cartDoorRowHtml) when
   the row's image = door_3.png → the 引戸 row ONLY; other doors / product / mansion are unchanged.
   Uses `screen` so it does NOT apply to PDF (print stays as before).
   Placed at END OF FILE to beat same-specificity rules above.
   Principle: KEEP THE TEXT COLUMN IN PLACE (the client's red line): the text's left edge
   = padding-left + photo + gap must NOT CHANGE relative to the other doors.
============================================================================== */
/* Desktop ≥1024: base 65 + 140 + 95 = 300 → wide: 65 + 200 + 35 = 300 (text unchanged).
   Client decision: image ~200px + 35px gap from text (not touching the text; image hugs the left of the old photo area). */
@media screen and (min-width: 1024px) {
  .mirai_eco .plan-area .plan-row.plan-row--wide-door {
    gap: 35px;
  }

  .mirai_eco .plan-row.plan-row--wide-door .plan-photo {
    flex: 0 0 200px;
  }

  .mirai_eco .plan-row--wide-door .plan-photo img {
    width: 100%;   /* = 200px */
    height: auto;  /* horizontal door: keeps the original 133×168 ratio, no crop */
  }
}

/* Tablet 768–1023: base 20 + 140 + 40 = 200 → wide: 20 + 160 + 20 = 200 (same idea: smaller image, 20px gap from text) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .mirai_eco .plan-area .plan-row.plan-row--wide-door {
    gap: 20px;
  }

  .mirai_eco .plan-row.plan-row--wide-door .plan-photo {
    flex: 0 0 160px;
  }

  .mirai_eco .plan-row--wide-door .plan-photo img {
    width: 100%;
    height: auto;
  }
}

/* Mobile ≤767: enlarge the image (full-width, max 340px) + LIXIL logo in the EMPTY STRIP above the image
   — SAME pattern as .plan-area--product .plan-row mobile (padding-top leaves room for the absolute logo
   top:8/right:8). Other doors (vertical 115px image) unchanged, logo at the card corner as before. */
@media screen and (max-width: 767px) {
  .mirai_eco .plan-area .plan-row.plan-row--wide-door {
    padding-top: 42px; /* empty strip for the logo (~24px tall @68px) above the image */
  }

  .mirai_eco .plan-row.plan-row--wide-door .plan-photo {
    width: 100%;
  }

  .mirai_eco .plan-row--wide-door .plan-photo img {
    width: 100%;
    max-width: 225px; /* client decision: shrink on mobile, 225px looks good */
    height: auto;
    margin: 0 auto;
  }
}