/* 外壁塗装 見積シミュレーター
   フォントはサイトのものを継承。色は --lgs-accent で調整（管理画面から設定） */
.lgs {
  --lgs-accent: #1f6f5c;
  --lgs-ink: #23292b;
  --lgs-muted: #5f6b6e;
  --lgs-line: #d9dedc;
  --lgs-bg: #f5f7f6;
  --lgs-card: #ffffff;
  --lgs-danger: #b42318;
  color: var(--lgs-ink);
  max-width: 960px;
  margin: 0 auto;
  line-height: 1.7;
}
.lgs *, .lgs *::before, .lgs *::after { box-sizing: border-box; }

.lgs-form {
  background: var(--lgs-bg);
  border: 1px solid var(--lgs-line);
  border-radius: 12px;
  padding: 20px 16px;
}
.lgs-fields { display: grid; gap: 16px; }
.lgs-label {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; margin: 0 0 6px;
}
.lgs-step {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--lgs-accent); color: #fff;
  font-size: 13px; line-height: 1;
}
.lgs-select-wrap { position: relative; }
.lgs-select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--lgs-muted); border-bottom: 2px solid var(--lgs-muted);
  transform: rotate(45deg); pointer-events: none;
}
.lgs-select {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-height: 52px;
  padding: 12px 40px 12px 14px;
  font: inherit; font-size: 16px; color: var(--lgs-ink);
  background: #fff; border: 1px solid #b9c2bf; border-radius: 8px;
}
.lgs-select:focus { outline: 3px solid color-mix(in srgb, var(--lgs-accent) 35%, transparent); border-color: var(--lgs-accent); }
.lgs-field.is-invalid .lgs-select { border-color: var(--lgs-danger); background: #fff6f5; }
.lgs-error { color: var(--lgs-danger); font-size: 14px; font-weight: 700; margin: 12px 0 0; min-height: 0; }
.lgs-error:empty { display: none; }

.lgs-btn, .lgs-cta {
  display: block; width: 100%;
  margin: 18px 0 0; padding: 16px 20px;
  font: inherit; font-size: 17px; font-weight: 700; text-align: center; text-decoration: none;
  color: #fff; background: var(--lgs-accent);
  border: 0; border-radius: 999px; cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--lgs-accent) 70%, #000);
  transition: transform .15s, box-shadow .15s;
}
/* テーマ側のリンク色・下線に負けないよう .lgs で詳細度を上げる */
.lgs .lgs-cta, .lgs .lgs-cta:link, .lgs .lgs-cta:visited { color: #fff; text-decoration: none; }
.lgs-btn:hover, .lgs .lgs-cta:hover { transform: translateY(1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--lgs-accent) 70%, #000); color: #fff; opacity: 1; }
.lgs-btn:focus-visible, .lgs-cta:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }

.lgs-result { margin-top: 28px; outline: none; }
.lgs-cond {
  border-left: 4px solid var(--lgs-accent);
  padding: 4px 0 4px 12px; margin: 0 0 16px;
}
.lgs-cond-title { margin: 0; font-size: 13px; color: var(--lgs-muted); }
.lgs-cond-body { margin: 0; font-weight: 700; }

.lgs-plans { display: grid; gap: 14px; }
.lgs-plan {
  position: relative;
  background: var(--lgs-card);
  border: 1px solid var(--lgs-line);
  border-radius: 12px;
  padding: 18px 16px 16px;
}
.lgs-plan.is-featured { border: 2px solid var(--lgs-accent); }
.lgs-badge {
  position: absolute; top: -11px; left: 14px;
  background: var(--lgs-accent); color: #fff;
  font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}
.lgs-plan-name { margin: 0; font-size: 18px; line-height: 1.4; }
.lgs-plan-sub { margin: 2px 0 0; font-size: 13px; color: var(--lgs-muted); }
.lgs-total {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  margin: 12px 0; padding: 10px 12px;
  background: var(--lgs-bg); border-radius: 8px;
}
.lgs-total-label { font-size: 13px; color: var(--lgs-muted); width: 100%; }
.lgs-total-num { font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--lgs-accent); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.lgs-total-unit { font-size: 14px; font-weight: 700; }
.lgs-items-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--lgs-muted); }
.lgs-items { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.lgs-items li { position: relative; padding: 3px 0 3px 22px; border-bottom: 1px dashed var(--lgs-line); }
.lgs-items li:last-child { border-bottom: 0; }
.lgs-items li::before {
  content: ""; position: absolute; left: 4px; top: 10px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--lgs-accent); border-bottom: 2px solid var(--lgs-accent);
  transform: rotate(-45deg);
}
.lgs-note { margin: 18px 0 0; padding: 0 0 0 1.2em; font-size: 13px; color: var(--lgs-muted); }
.lgs-cta-wrap { margin-top: 8px; }

@media (min-width: 720px) {
  .lgs-form { padding: 28px; }
  .lgs-fields { grid-template-columns: repeat(3, 1fr); }
  .lgs-btn { max-width: 420px; margin: 22px auto 0; }
  .lgs-plans { grid-template-columns: repeat(2, 1fr); }
  .lgs-cta { max-width: 460px; margin: 18px auto 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lgs-btn, .lgs-cta { transition: none; }
}