/* 2026-09-06：アイコンをWebPでも配れるようにした。
   ⛔ PNGの行は消さない。image-set() を読めない古いブラウザは、上のPNGがそのまま効く。
   画像は「表示される大きさの2倍」（80px表示なら160px）で作り直してあり、見た目は変えていない。 */
/* =============================================================
   外構費用かんたん診断 ／ デザイン案B「イラスト主体・親しみやすい」
   2026-09-06 本番反映。デザイン案の 案B.css がもと。
   ・画像は同じフォルダの img/ を見る（assets/img/）。
   ・選択肢のイラストは data-key（工事の種類）と data-icon（追加設問）で当てる。
   ・設問の本数は答えによって変わる（フェンスだけ1問多い）。
     区切りの本数は JS が --gm-steps に入れる。
   ⛔ 左線（border-left）は使わない。状態は背景色で表す。
   ============================================================= */

.gm-wrap [hidden] { display: none !important; }

.gm-wrap {
  position: relative;
  background: linear-gradient(180deg, #f4faf5 0%, #ffffff 42%);
  border: 1px solid #dfeadf;
  border-radius: 16px;
  padding: 26px 26px 24px;
  margin: 0 0 36px;
  box-shadow: 0 6px 20px rgba(36, 96, 60, .07);
}

/* ---- 見出し（左に文字・右にイラスト） ---- */
.gm-head {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "title illust"
    "sub   illust"
    "bar   illust"
    "step  illust";
  align-items: start;
  column-gap: 20px;
  margin: 0 0 22px;
  position: relative;
  min-height: 176px;
}
.gm-head::after {
  content: "";
  grid-area: illust;
  align-self: center;
  width: 100%;
  height: 168px;
  background: url("img/illust-house.png") center / contain no-repeat;
  background-image: image-set(url("img/illust-house.webp") type("image/webp"), url("img/illust-house.png") type("image/png"));
}
.gm-title {
  grid-area: title;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.42;
  margin: 6px 0 8px;
  color: var(--accent, #2f7d4f);
}
.gm-sub {
  grid-area: sub;
  font-size: 14.5px;
  color: var(--muted, #777);
  margin: 0 0 16px;
}
.gm-sub strong { color: var(--accent-dark, #24603c); }

/* 6問ぶんの区切りが見えるバー */
.gm-progress {
  --gm-steps: 6;   /* 設問の本数。JS が書き換える（フェンスを選ぶと 7 になる） */
  grid-area: bar;
  align-self: center;
  height: 12px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, #dfeadf 0 calc(100% / var(--gm-steps) - 4px), transparent calc(100% / var(--gm-steps) - 4px) calc(100% / var(--gm-steps)));
  overflow: hidden;
}
.gm-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #7bc687, #2f7d4f);
  transition: width .3s ease;
}
/* 「ぜんぶで6問　いまは1問目」。数字は JS が入れ替える。 */
.gm-stepno {
  grid-area: step;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted, #777);
  text-align: left;
}
.gm-cur,
.gm-total {
  font-weight: 800;
  color: var(--accent, #2f7d4f);
  font-size: 16px;
  margin: 0 1px;
}

.gm-noscript { background: #fdf3e3; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 0 0 16px; }

/* ---- 設問 ---- */
.gm-q-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.6;
  margin: 0 0 6px;
  color: var(--text, #333);
}
.gm-q-note {
  font-size: 13px;
  color: var(--muted, #777);
  background: #f6f8f6;
  border-radius: 10px;
  padding: 8px 12px;
  display: inline-block;
  margin: 0 0 14px;
}

.gm-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin: 16px 0 0;
}

.gm-choice {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px 14px;
  border: 2px solid #e6ece7;
  border-radius: 14px;
  background: #fff;
  color: var(--text, #333);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.55;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.gm-choice:hover { border-color: var(--accent-light, #7bc687); transform: translateY(-2px); }
.gm-choice.is-on {
  background: var(--accent-pale, #eaf3ec);
  border-color: var(--accent, #2f7d4f);
}
.gm-choice-label { display: block; font-weight: 800; font-size: 15.5px; }
.gm-choice-note { display: block; font-size: 12px; color: var(--muted, #777); margin-top: 4px; }
.gm-choice.is-on .gm-choice-note { color: var(--accent-dark, #24603c); }

/* イラストは上に大きく（data-key で当てる＝JSは触っていない） */
.gm-choice[data-key="newbuild"],
.gm-choice[data-key="reform"],
.gm-choice[data-key="undecided"],
.gm-choice[data-key="carport"],
.gm-choice[data-key="doma"],
.gm-choice[data-key="fence"],
.gm-choice[data-key="gate"],
.gm-choice[data-key="deck"],
.gm-choice[data-key="garden"],
.gm-choice[data-key="shed"],
.gm-choice[data-key="demolish"],
.gm-choice[data-key="approach"],
.gm-choice[data-key="light"],
.gm-choice[data-key="none"],
.gm-choice[data-icon] {
  padding-top: 104px;
  background-repeat: no-repeat;
  background-position: center 14px;
  background-size: 80px 80px;
}
.gm-choice[data-key="newbuild"]  { background-image: url("img/icon-newbuild.png");
 background-image: image-set(url("img/icon-newbuild.webp") type("image/webp"), url("img/icon-newbuild.png") type("image/png")); }
.gm-choice[data-key="reform"]    { background-image: url("img/icon-reform.png");
 background-image: image-set(url("img/icon-reform.webp") type("image/webp"), url("img/icon-reform.png") type("image/png")); }
.gm-choice[data-key="undecided"] { background-image: url("img/icon-consult.png");
 background-image: image-set(url("img/icon-consult.webp") type("image/webp"), url("img/icon-consult.png") type("image/png")); }
.gm-choice[data-key="carport"]   { background-image: url("img/icon-carport.png");
 background-image: image-set(url("img/icon-carport.webp") type("image/webp"), url("img/icon-carport.png") type("image/png")); }
.gm-choice[data-key="doma"]      { background-image: url("img/icon-doma.png");
 background-image: image-set(url("img/icon-doma.webp") type("image/webp"), url("img/icon-doma.png") type("image/png")); }
.gm-choice[data-key="fence"]     { background-image: url("img/icon-fence.png");
 background-image: image-set(url("img/icon-fence.webp") type("image/webp"), url("img/icon-fence.png") type("image/png")); }
.gm-choice[data-key="gate"]      { background-image: url("img/icon-gate.png");
 background-image: image-set(url("img/icon-gate.webp") type("image/webp"), url("img/icon-gate.png") type("image/png")); }
.gm-choice[data-key="deck"]      { background-image: url("img/icon-deck.png");
 background-image: image-set(url("img/icon-deck.webp") type("image/webp"), url("img/icon-deck.png") type("image/png")); }
.gm-choice[data-key="garden"]    { background-image: url("img/icon-garden.png");
 background-image: image-set(url("img/icon-garden.webp") type("image/webp"), url("img/icon-garden.png") type("image/png")); }
.gm-choice[data-key="shed"]      { background-image: url("img/icon-shed.png");
 background-image: image-set(url("img/icon-shed.webp") type("image/webp"), url("img/icon-shed.png") type("image/png")); }
.gm-choice[data-key="demolish"]  { background-image: url("img/icon-demolish.png");
 background-image: image-set(url("img/icon-demolish.webp") type("image/webp"), url("img/icon-demolish.png") type("image/png")); }
.gm-choice[data-key="approach"]  { background-image: url("img/icon-approach.png");
 background-image: image-set(url("img/icon-approach.webp") type("image/webp"), url("img/icon-approach.png") type("image/png")); }
.gm-choice[data-key="light"]     { background-image: url("img/icon-light.png");
 background-image: image-set(url("img/icon-light.webp") type("image/webp"), url("img/icon-light.png") type("image/png")); }
.gm-choice[data-key="none"]      { background-image: url("img/icon-none.png");
 background-image: image-set(url("img/icon-none.webp") type("image/webp"), url("img/icon-none.png") type("image/png")); }

/* 追加設問（フェンスの種類）。工事ごとに絵が違うので data-icon で当てる。 */
.gm-choice[data-icon="fence-standard"] { background-image: url("img/icon-fence-standard.png");
 background-image: image-set(url("img/icon-fence-standard.webp") type("image/webp"), url("img/icon-fence-standard.png") type("image/png")); }
.gm-choice[data-icon="fence-privacy"]  { background-image: url("img/icon-fence-privacy.png");
 background-image: image-set(url("img/icon-fence-privacy.webp") type("image/webp"), url("img/icon-fence-privacy.png") type("image/png")); }
.gm-choice[data-icon="fence-unknown"]  { background-image: url("img/icon-consult.png");
 background-image: image-set(url("img/icon-consult.webp") type("image/webp"), url("img/icon-consult.png") type("image/png")); }

/* 選んだ印（丸いチェック） */
.gm-choice.is-on::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  background: url("img/icon-check.png") center / contain no-repeat;
  background-image: image-set(url("img/icon-check.webp") type("image/webp"), url("img/icon-check.png") type("image/png"));
}
.gm-choices.is-multi .gm-choice.is-on .gm-choice-label::before { content: none; }

/* ---- ボタン ---- */
.gm-next,
.gm-go-form,
.gm-submit {
  display: block;
  width: 100%;
  margin: 20px 0 0;
  padding: 17px 20px;
  border: 0;
  border-radius: 999px;
  background: #e8590c;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(232, 89, 12, .3);
  transition: background .15s ease, transform .1s ease;
}
.gm-next:hover, .gm-go-form:hover, .gm-submit:hover { background: #d24f06; }
.gm-next:active, .gm-go-form:active, .gm-submit:active { transform: translateY(1px); }
.gm-submit:disabled { background: #b9bfc7; box-shadow: none; cursor: default; }

/* 「戻る」は設問を答えている間だけ。結果の画面には出さない（2026-09-06 れのぼ指示）。
   出し入れは JS が .gm-nav ごと hidden にする＝消えたときに余白も残らない。 */
.gm-nav { margin: 16px 0 0; }
.gm-back {
  display: inline-block;
  margin: 12px 0 0;
  padding: 9px 18px;
  border: 1px solid #dfeadf;
  border-radius: 999px;
  background: #f6faf7;
  color: var(--accent-dark, #24603c);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.gm-back:hover { background: var(--accent-pale, #eaf3ec); }

/* ---- 結果（左に金額・右に内訳の2列） ---- */
.gm-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  align-items: start;
}
/* 見出しと金額は「1枚の箱」。⛔ 背景色の同じ箱を2つ縦に並べない。
   継ぎ目が .25px などの半端な位置に来ると、その1行だけ端がアンチエイリアスで薄まり、
   線を引いていないのに横線が見える（2026-09-06 本番で発生）。 */
.gm-amountbox {
  grid-column: 1;
  background: var(--accent-pale, #eaf3ec);
  border-radius: 16px;
}
.gm-result-lead {
  background: none;
  border-radius: 0;
  margin: 0;
  padding: 22px 22px 0;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-dark, #24603c);
}
/* 工事期間の目安（見出しと金額のあいだ）。同じ .gm-amountbox の中なので継ぎ目は出ない。 */
.gm-period {
  margin: 0;
  padding: 9px 22px 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--accent-dark, #24603c);
}
.gm-period-label {
  display: inline-block;
  margin-right: 9px;
  padding: 1px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 12.5px;
  font-weight: 700;
}
.gm-period-text { font-size: 15px; font-weight: 800; }
.gm-amount {
  background: none;
  border-radius: 0;
  margin: 0;
  padding: 2px 22px 24px;
  text-align: center;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--accent, #2f7d4f);
  word-break: keep-all;
}
.gm-amount-text.gm-amount-none { font-size: 20px; font-weight: 700; line-height: 1.7; }

.gm-breakdown {
  grid-column: 2;
  grid-row: 1;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14.5px;
}
.gm-breakdown li {
  background: #f6f8f6;
  border-radius: 12px;
  padding: 11px 14px 11px 40px;
  margin: 0 0 8px;
  background-image: url("img/icon-check.png");
  background-image: image-set(url("img/icon-check.webp") type("image/webp"), url("img/icon-check.png") type("image/png"));
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 18px 18px;
}
.gm-breakdown li:last-child { margin-bottom: 0; }

.gm-disclaimer {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.85;
  color: var(--muted, #777);
  background: #fdf3e3;
  border-radius: 12px;
  padding: 13px 16px;
  margin: 18px 0 0;
}
.gm-disclaimer-sub { background: #f6f8f6; margin-top: 8px; }
.gm-go-form { grid-column: 1 / -1; }

/* ---- フォーム ---- */
.gm-formbox-title { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--accent, #2f7d4f); }
.gm-formbox-lead { font-size: 14px; color: var(--muted, #777); margin: 0 0 18px; }
.gm-summary {
  background: var(--accent-pale, #eaf3ec);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 22px;
  font-size: 14px;
}
.gm-summary-amount { font-weight: 800; font-size: 18px; margin: 0 0 8px; color: var(--accent-dark, #24603c); }
.gm-summary ul { list-style: none; margin: 0; padding: 0; }
.gm-summary li { margin: 0 0 3px; }

.gm-field { margin: 0 0 18px; }
.gm-field label { display: block; font-weight: 800; font-size: 15px; margin: 0 0 7px; }
.gm-field input[type="text"],
.gm-field input[type="tel"],
.gm-field input[type="email"],
.gm-field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e6ece7;
  border-radius: 12px;
  background: #fbfdfb;
  font-family: inherit;
  font-size: 16px;   /* 16px 未満だと iPhone で勝手に拡大するので下げない */
  line-height: 1.6;
  color: var(--text, #333);
}
.gm-field input:focus, .gm-field textarea:focus {
  outline: none;
  border-color: var(--accent-light, #7bc687);
  background: #fff;
}
.gm-req { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #e8590c; color: #fff; font-size: 11px; font-weight: 700; vertical-align: 2px; }
.gm-any { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #eef2f7; color: var(--muted, #777); font-size: 11px; font-weight: 700; vertical-align: 2px; }
.gm-hint { font-size: 12px; color: var(--muted, #777); margin: 6px 0 0; }
.gm-hint-center { text-align: center; }

.gm-agree label { font-weight: 400; font-size: 15px; }
.gm-agree input { margin-right: 8px; transform: scale(1.2); }

.gm-error { background: #fdecea; color: #a1261a; border-radius: 12px; padding: 13px 16px; font-size: 14px; margin: 0 0 14px; }

.gm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.gm-flash { border-radius: 16px; padding: 20px 22px; margin: 0 0 28px; font-size: 16px; line-height: 1.9; }
.gm-flash-ok    { background: #e8f4ec; }
.gm-flash-error { background: #fdecea; }
.gm-flash-title { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.gm-flash p:last-child { margin-bottom: 0; }

/* ---- スマホ ---- */
@media (max-width: 700px) {
  .gm-wrap { padding: 18px 14px; border-radius: 14px; }

  .gm-head {
    grid-template-columns: 1fr;
    grid-template-areas: "illust" "title" "sub" "bar" "step";
    min-height: 0;
    row-gap: 0;
  }
  .gm-head::after { height: 130px; margin: 0 0 6px; }
  .gm-title { font-size: 21px; margin: 0 0 6px; }
  .gm-sub { font-size: 13.5px; margin-bottom: 14px; }
  .gm-progress { height: 10px; }
  .gm-stepno { margin-top: 8px; }

  /* スマホは1列。イラストを左・文字を右に置いて、タップ範囲を大きくする。 */
  .gm-q-title { font-size: 17.5px; }
  .gm-choices { grid-template-columns: 1fr; gap: 10px; }
  .gm-choice {
    padding: 14px 46px 14px 84px;
    border-radius: 12px;
    text-align: left;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .gm-choice-label { font-size: 16px; }
  .gm-choice[data-key],
  .gm-choice[data-icon] { padding-top: 14px; background-size: 58px 58px; background-position: 12px center; }
  /* 選ぶ前は空のまる、選ぶとチェック（右端・上下まんなか） */
  .gm-choice::before {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #dfe4e0;
    background: #fff;
  }
  .gm-choice.is-on::after { width: 24px; height: 24px; top: 50%; right: 12px; transform: translateY(-50%); }
  .gm-choice.is-on::before { border-color: transparent; background: transparent; }

  .gm-result { grid-template-columns: 1fr; }
  .gm-amountbox, .gm-breakdown, .gm-disclaimer, .gm-go-form { grid-column: 1; }
  .gm-breakdown { grid-row: auto; margin: 14px 0 0; }
  .gm-amount { font-size: 29px; padding-bottom: 20px; }
  .gm-period { padding-top: 8px; }
  .gm-period-label { display: block; margin: 0 auto 4px; width: fit-content; }
  .gm-amount-text.gm-amount-none { font-size: 18px; }
  .gm-go-form, .gm-submit { font-size: 16px; padding: 15px 14px; }

  /* サイト側の追従バー（.sticky-mobile-cta）ぶんの余白 */
  .gm-result, .gm-formbox { padding-bottom: 72px; }
}