/* ============================================================
   CrossMake — 見積もりシミュレーター CSS  (680円/㎡版)
============================================================ */

/* ── ページ ── */
.estimate-page { padding-top: 70px; }

/* ── ヒーロー ── */
.estimate-hero {
  background: linear-gradient(145deg, var(--blue) 0%, #1a7fc4 100%);
  padding: 52px 48px; text-align: center; position: relative; overflow: hidden;
}
.estimate-hero::before {
  content: ''; position: absolute;
  top: -80px; right: -80px; width: 360px; height: 360px;
  background: rgba(255,255,255,.07); border-radius: 50%; pointer-events: none;
}
.estimate-hero-inner { position: relative; z-index: 1; }
.estimate-hero-label {
  display: inline-block;
  background: rgba(255,255,255,.18); color: white;
  font-size: 13px; font-weight: 700;
  padding: 5px 18px; border-radius: 50px;
  letter-spacing: .08em; margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.3);
}
.estimate-hero-title {
  font-size: 38px; font-weight: 900;
  color: white; line-height: 1.3;
  letter-spacing: -.02em; margin-bottom: 12px;
}
.estimate-hero-title span { text-decoration: underline; text-underline-offset: 4px; }
.estimate-hero-sub {
  font-size: 15px; color: rgba(255,255,255,.9);
  line-height: 1.8; margin-bottom: 20px;
}
.estimate-hero-sub strong { color: white; }
/* 単価バッジ */
.estimate-hero-price-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: white; color: var(--blue);
  font-size: 15px; font-weight: 900;
  padding: 10px 24px; border-radius: 50px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  margin-bottom: 16px; letter-spacing: .02em;
}
.estimate-hero-price-badge .price-num {
  font-size: 26px; font-weight: 900; color: var(--blue);
  letter-spacing: -.02em; line-height: 1;
}
.estimate-hero-badges {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.e-badge {
  background: rgba(255,255,255,.15); color: white;
  font-size: 12px; font-weight: 700;
  padding: 5px 14px; border-radius: 50px;
  border: 1px solid rgba(255,255,255,.25); white-space: nowrap;
}

/* ── ボディ ── */
.estimate-body { background: var(--bg-lt); padding: 40px 48px 100px; }
.estimate-container { max-width: 860px; margin: 0 auto; }

/* ── モードタブ ── */
.est-mode-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px; margin-bottom: 28px;
}
.est-mode-tab {
  background: white; border: 2px solid var(--border);
  border-radius: var(--r); padding: 16px 22px;
  font-size: 15px; font-weight: 700; color: var(--text-lt);
  cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px; transition: all .25s;
}
.est-mode-tab:hover { border-color: rgba(52,152,219,.4); color: var(--blue); }
.est-mode-tab.active {
  border-color: var(--blue); background: var(--blue-lt);
  color: var(--blue); box-shadow: 0 0 0 3px rgba(52,152,219,.12);
}
.est-mode-tab-sub { font-size: 12px; font-weight: 500; color: var(--text-mu); }
.est-mode-tab.active .est-mode-tab-sub { color: var(--blue-dk); }

/* ── 単価バナー ── */
.est-unit-banner {
  background: var(--blue-lt); border-left: 3px solid var(--blue);
  padding: 10px 16px; font-size: 13px; color: var(--text-lt);
  display: flex; align-items: center; gap: 8px;
  margin: 0; border-radius: 0;
}
.est-unit-banner--sqm {
  margin: 16px 20px; border-radius: var(--r-sm); border-left-width: 4px;
  font-size: 15px;
}
.est-unit-banner strong { color: var(--blue); }

/* ── 物件ブロック ── */
.est-prop {
  background: white; border-radius: var(--r);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden;
}
.est-prop-hd {
  background: var(--blue); padding: 11px 18px;
  display: flex; align-items: center; justify-content: space-between;
}
.est-prop-num { font-size: 13px; font-weight: 700; color: white; letter-spacing: .04em; }
.est-prop-del {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,.8);
  background: none; border: 1px solid rgba(255,255,255,.4);
  border-radius: 50px; padding: 3px 12px; cursor: pointer; transition: all .2s;
}
.est-prop-del:hover { background: rgba(255,255,255,.15); color: white; }

/* ── 間取り ── */
.est-layout-wrap { padding: 16px 20px 0; background: #f8fafc; border-bottom: 1px solid var(--border); }
.est-section-label { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.est-layout-grid { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 14px; }
.est-lay-btn { cursor: pointer; }
.est-lay-btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.est-lay-btn span {
  display: block; padding: 7px 14px;
  border: 1.5px solid var(--border); border-radius: 8px;
  background: white; font-size: 13px; font-weight: 700;
  color: var(--text-lt); cursor: pointer; transition: all .2s;
}
.est-lay-btn input:checked + span { background: var(--blue); color: white; border-color: var(--blue); }
.est-lay-btn span:hover { border-color: var(--blue); color: var(--blue); }
.est-lay-btn input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ── 各エリア行 ── */
.est-rooms-wrap { padding: 0; }
.est-room-row {
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-rows: auto auto; gap: 0;
}
.est-room-row:last-child { border-bottom: none; }
.est-room-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.est-room-label { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.est-room-note { font-size: 11px; color: var(--text-mu); }
.est-room-opts { display: flex; flex-wrap: wrap; gap: 6px; }

/* 選択肢ラベル */
.est-ropt { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.est-ropt input { position: absolute; opacity: 0; width: 0; height: 0; }
.est-ropt-label {
  display: block; padding: 6px 12px;
  border: 1.5px dashed #d1d5db;
  border-radius: 8px; background: var(--bg-lt);
  font-size: 12px; font-weight: 600; color: var(--text-mu);
  cursor: pointer; transition: all .2s; white-space: nowrap;
  text-align: center;
}
.est-ropt.has-price .est-ropt-label {
  border-style: solid; border-color: var(--border);
  background: white; color: var(--text);
}
.est-ropt input:checked + .est-ropt-label {
  background: var(--blue); color: white; border-color: var(--blue); border-style: solid;
}
.est-ropt-label:hover { border-color: var(--blue); color: var(--blue); }
.est-ropt input:checked + .est-ropt-label:hover { color: white; }
.est-ropt-price {
  font-size: 11px; color: var(--blue); font-weight: 700;
}
.est-ropt input:checked ~ .est-ropt-price { color: var(--blue-dk); }
.est-ropt input:focus-visible + .est-ropt-label { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ── 小計 ── */
.est-subtotal {
  padding: 14px 20px;
  background: linear-gradient(to right, var(--blue-lt), white);
  border-top: 1.5px solid var(--blue-mid);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: space-between;
}
.sub-wall { font-size: 12px; color: var(--text-lt); }
.sub-wall strong { color: var(--blue); font-size: 14px; }
.sub-amount { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-excl  { font-size: 13px; color: var(--text-lt); }
.sub-tax   { font-size: 11px; color: var(--text-mu); }
.sub-incl  { font-size: 18px; font-weight: 900; color: var(--blue); }

/* ── 備考 ── */
.est-note-row {
  padding: 12px 20px;
  background: var(--bg-lt); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.est-note-lbl { font-size: 12px; font-weight: 700; color: var(--text-mu); white-space: nowrap; }
.est-note-inp {
  flex: 1; border: 1.5px solid var(--border); border-radius: 8px;
  padding: 7px 12px; font-size: 13px; font-family: inherit;
  transition: border-color .2s;
}
.est-note-inp:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px rgba(52,152,219,.15); }

/* ── 平米モード ── */
.est-sqm-section { padding: 0; }
.est-sqm-body { padding: 20px 20px 16px; }
.est-sqm-label { font-size: 14px; font-weight: 700; color: var(--text); display: block; margin-bottom: 12px; }
.est-sqm-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.est-sqm-inp {
  width: 160px; border: 2px solid var(--border); border-radius: var(--r-sm);
  padding: 12px 16px; font-size: 28px; font-weight: 700;
  font-family: inherit; color: var(--text); text-align: right; transition: border-color .2s;
}
.est-sqm-inp:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(52,152,219,.15); }
.est-sqm-unit { font-size: 18px; font-weight: 700; color: var(--text-lt); }
.est-sqm-note { font-size: 12px; color: var(--text-mu); line-height: 1.6; }

/* ── 追加ボタン ── */
.est-add-property {
  width: 100%; padding: 16px;
  border: 2px dashed var(--blue-mid); border-radius: var(--r);
  background: white; color: var(--blue);
  font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .25s; margin-bottom: 20px;
}
.est-add-property:hover { border-color: var(--blue); background: var(--blue-lt); transform: translateY(-1px); }

/* ── 注意事項 ── */
.est-notice {
  background: #fffbf0; border: 1.5px solid #f6e58d;
  border-radius: var(--r-sm); padding: 14px 18px; margin-bottom: 32px;
}
.est-notice-title { font-size: 13px; font-weight: 700; color: #c0392b; margin-bottom: 8px; }
.est-notice ul { padding-left: 1.2em; }
.est-notice li { font-size: 12px; color: var(--text-lt); line-height: 1.8; }

/* ── エンプティ ── */
.est-empty {
  background: white; border: 2px dashed var(--border); border-radius: var(--r);
  padding: 48px; text-align: center; color: var(--text-mu);
  font-size: 15px; margin-bottom: 20px;
}

/* ── スティッキー合計バー ── */
.est-total-bar {
  position: sticky; bottom: 0; z-index: 80;
  background: white; border-top: 2px solid var(--border);
  box-shadow: 0 -4px 20px rgba(52,152,219,.12); padding: 12px 0;
}
.est-total-bar-inner {
  max-width: 860px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.est-total-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.est-total-count { font-size: 13px; font-weight: 700; color: var(--text-mu); }
.est-total-sep { width: 1px; height: 24px; background: var(--border); }
.est-total-label-wrap { display: flex; flex-direction: column; gap: 1px; }
.est-total-lbl { font-size: 11px; color: var(--text-mu); }
.est-total-price { font-size: 26px; font-weight: 900; color: var(--blue); letter-spacing: -.02em; line-height: 1; }
.est-confirm-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue); color: white;
  padding: 13px 26px; border-radius: 50px;
  font-size: 14px; font-weight: 700; border: none; cursor: pointer;
  box-shadow: 0 6px 18px rgba(52,152,219,.35); transition: all .25s; white-space: nowrap;
}
.est-confirm-btn:hover:not(:disabled) { background: var(--blue-dk); transform: translateY(-2px); }
.est-confirm-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── モーダル ── */
.est-modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.est-modal-overlay[hidden] { display: none; }
.est-modal {
  background: white; border-radius: var(--r-lg);
  padding: 32px 36px; max-width: 580px; width: 100%;
  max-height: 88vh; overflow-y: auto; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.est-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: white;
  font-size: 13px; color: var(--text-lt); cursor: pointer;
  display: grid; place-items: center; transition: all .2s;
}
.est-modal-close:hover { background: var(--bg-lt); color: var(--text); }
.est-modal-title { font-size: 20px; font-weight: 900; margin-bottom: 20px; }
.est-modal-prop {
  border: 1.5px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: 14px; overflow: hidden;
}
.est-modal-ptitle {
  background: var(--bg-lt); padding: 9px 14px;
  font-size: 13px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.est-modal-row {
  display: flex; justify-content: space-between;
  padding: 8px 14px; font-size: 12px; gap: 12px;
  border-bottom: 1px solid var(--border); align-items: center;
}
.est-modal-row:last-of-type { border-bottom: none; }
.est-modal-row--note { color: var(--text-mu); font-size: 12px; }
/* 小計の内訳 */
.est-modal-subtotal { background: #fafbff; border-top: 1.5px solid var(--border); }
.est-modal-sub-row {
  display: flex; justify-content: space-between;
  padding: 6px 14px; font-size: 12px; color: var(--text-lt);
  border-bottom: 1px solid var(--border);
}
.est-modal-sub-row:last-child { border-bottom: none; }
.est-modal-sub-incl { font-weight: 700; color: var(--blue); font-size: 13px; }
/* 合計 */
.est-modal-grand {
  border: 1.5px solid var(--blue); border-radius: var(--r-sm);
  overflow: hidden; margin: 16px 0 12px;
}
.est-gt-row {
  display: flex; justify-content: space-between;
  padding: 8px 16px; font-size: 13px; color: var(--text-lt);
  background: var(--bg-lt); border-bottom: 1px solid var(--border);
}
.est-gt-row:last-child { border-bottom: none; }
.est-gt-total {
  background: var(--blue); color: white; font-weight: 700;
  padding: 14px 16px;
}
.est-gt-total span:first-child { color: rgba(255,255,255,.9); font-size: 14px; }
.est-gt-price { font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.est-modal-caution { font-size: 11px; color: var(--text-mu); margin-bottom: 18px; line-height: 1.7; }
.est-modal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.est-modal-back {
  flex: 1; padding: 13px;
  border: 1.5px solid var(--border); border-radius: 50px;
  background: white; color: var(--text-lt);
  font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; transition: all .2s;
}
.est-modal-back:hover { border-color: var(--blue); color: var(--blue); }
.est-modal-contact {
  flex: 2; padding: 13px 18px;
  background: var(--blue); color: white;
  border-radius: 50px; font-size: 14px; font-weight: 700;
  text-decoration: none; text-align: center;
  box-shadow: 0 6px 18px rgba(52,152,219,.35); transition: all .25s;
}
.est-modal-contact:hover { background: var(--blue-dk); transform: translateY(-1px); }

/* ── フォームサマリー ── */
.est-form-summary {
  background: var(--blue-lt); border: 1.5px solid var(--blue-mid);
  border-radius: var(--r); padding: 16px 20px; margin-bottom: 24px;
}
.est-form-summary-title { font-size: 13px; font-weight: 700; color: var(--blue); margin-bottom: 10px; }
.est-summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.est-summary-table td { padding: 5px 8px; }
.est-summary-table td:last-child { text-align: right; font-weight: 600; }
.est-summary-sep td { padding: 4px 0; border-top: 1px solid var(--blue-mid); }
.est-summary-tax td { color: var(--text-lt); font-size: 12px; padding: 4px 8px; }
.est-summary-total td { font-weight: 900; color: var(--blue); font-size: 15px; padding: 8px 8px 4px; border-top: 1.5px solid var(--blue-mid); }

/* ── コンタクトセクション ── */
.estimate-contact-section { background: white; padding: 72px 48px; }
.est-tel-block {
  text-align: center; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--border); font-size: 14px; color: var(--text-lt);
}
.est-tel-link {
  display: inline-block; font-size: 26px; font-weight: 900;
  color: var(--blue); text-decoration: none; margin: 6px 0 4px;
}
.est-tel-link:hover { text-decoration: underline; }
.est-tel-hours { font-size: 12px; color: var(--text-mu); }

/* ── レスポンシブ ── */
@media (max-width: 767px) {
  .estimate-hero       { padding: 36px 16px; }
  .estimate-hero-title { font-size: 24px; }
  .estimate-hero-sub   { font-size: 13px; }
  .estimate-hero-price-badge .price-num { font-size: 22px; }
  .estimate-body       { padding: 20px 16px 80px; }
  .est-mode-tabs       { grid-template-columns: 1fr; gap: 8px; }
  .est-total-bar-inner { padding: 0 16px; flex-direction: column; gap: 8px; align-items: stretch; }
  .est-total-left      { justify-content: space-between; }
  .est-total-price     { font-size: 22px; }
  .est-confirm-btn     { justify-content: center; }
  .est-modal           { padding: 24px 18px; }
  .est-modal-actions   { flex-direction: column; }
  .est-sqm-inp         { width: 120px; font-size: 22px; }
  .estimate-contact-section { padding: 48px 16px; }
  .sub-amount          { flex-direction: column; gap: 2px; align-items: flex-end; }
}