/*
 * 簡単見積りページ専用上書き
 * - estimate.styles の副作用で崩れるサイト共通 UI を他ページ相当に戻す
 * - BS4 排除後、テーマ BS5 ＋ estimate.styles で足りない見積り本体レイアウトを補う
 * 本ファイルは見積りページでのみ読込。
 *
 * 注意: estimate.styles は html { font-size: 62.5% } 前提（1rem ≒ 10px）。
 * 見積り本体の rem を壊さないよう、html の font-size は上書きしない。
 * 代わりにヘッダー／フッターの rem を 17px 基準相当に直す。
 * 見積り本体の余白は px で補い、html rem 縮小の影響を受けにくくする。
 */

/* ---------- 見積りボタン: テーマ BS の薄い青枠を抑止 ---------- */
.btn.btn-estimate:hover,
.btn.btn-estimate:focus,
.btn.btn-estimate:focus-visible,
.btn.btn-estimate:active {
  border-color: #ccc;
  box-shadow: none;
  outline: none;
}

.btn.btn-estimate.btn-estimate-selected:hover,
.btn.btn-estimate.btn-estimate-selected:focus,
.btn.btn-estimate.btn-estimate-selected:focus-visible,
.btn.btn-estimate.btn-estimate-selected:active {
  border-color: #1e87e7;
  color: #1e87e7;
  box-shadow: none;
  outline: none;
}

/* ヘッダーとパンくずのあいだの余白 */
.fluid-container:has(.pankuzu-container) {
  padding-top: 16px;
}

/*
 * サイト共通 UI（ヘッダー／フッター）を他ページ相当に戻す
 */
body {
  display: block !important;
  background: #f6f6f6 !important;
  background-image: none !important;
  color: #525263;
}

.jt-site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
}

/* rem 基準が 62.5% のため、共通 UI の rem 指定を 17px 基準相当に直す */
.jt-phone-block__tel {
  font-size: calc(1.75 * 17px);
}
.jt-phone-block__mail {
  font-size: calc(0.7 * 17px);
}
.jt-footer-cta__text {
  font-size: calc(1.4 * 17px);
}
.jt-footer-cta__text span {
  font-size: 17px;
}
.jt-footer-links__heading {
  font-size: calc(1.1 * 17px) !important;
}
.jt-footer-links__col a {
  font-size: 17px;
}
.jt-footer-brand__logo {
  font-size: calc(2.75 * 17px);
}
.jt-footer-brand__free-label {
  font-size: calc(0.875 * 17px);
}
.jt-footer-brand__tel {
  font-size: calc(2.4 * 17px) !important;
}
.jt-footer-brand__time,
.jt-footer-brand__contact {
  font-size: 17px !important;
}
.jt-footer-bottom__copy {
  font-size: calc(0.75 * 17px);
}
.jt-footer-cta .jt-cta-btn,
.jt-header .jt-cta-btn {
  font-size: 17px;
}
.jt-footer-cta .jt-cta-btn__num,
.jt-header .jt-cta-btn__num {
  font-size: calc(1.2 * 17px);
}
.jt-btn__num,
.jt-cta-btn__num {
  font-size: calc(1.2 * 17px);
}

/* ロゴ「日本テント」（他ページの 1.5rem＝17px 基準に合わせる） */
.jt-logo__text {
  font-size: calc(1.5 * 17px) !important; /* 25.5px */
}
.jt-mobile-header__logo {
  font-size: 20px !important;
}
.jt-mobile-menu__logo {
  font-size: 18px !important;
}

/* ヒーロー（.jt-hero）— _components.scss の rem 指定を 17px 基準相当に直す
   h1: clamp(1.75rem, 5vw, 2.5rem) → 29.75px / 42.5px
   subtitle: 1rem → 17px
   padding / margin は元から px 指定のため補正不要 */
.jt-hero h1 {
  font-size: clamp(calc(1.75 * 17px), 5vw, calc(2.5 * 17px));
}
.jt-hero__subtitle {
  font-size: 17px;
}

/* PC: 見積り「選択中」パネルはメガメニューより背面・ヘッダー直下 */
@media (min-width: 961px) {
  .fixed-estimate {
    z-index: 100;
    top: 110px; /* info棒40px + ヘッダー本体70px */
    background: #1e87e7 !important;
    border: none;
    border-radius: 0;
  }

  .fixed-estimate--pc {
    display: block !important;
  }
  .fixed-estimate--sp {
    display: none !important;
  }

  /* 比較リストへのアンカー時、選択中パネルに隠れない余白 */
  #compare {
    scroll-margin-top: 280px;
  }

  /* PC 表内ボタンは列幅いっぱい */
  .fixed-estimate--pc #js-tocart .btn,
  .fixed-estimate--pc #js-tolist .btn,
  .fixed-estimate--pc #js-todele .btn {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    white-space: nowrap;
  }

  .fixed-estimate--pc .btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff !important;
  }
  .fixed-estimate--pc .btn-success {
    background: #28a745;
    border-color: #28a745;
    color: #fff !important;
  }
  .fixed-estimate--pc .btn-light {
    background: #f8f9fa;
    color: #212529;
  }
}

@media (max-width: 960px) {
  /* SP: 選択中パネルは sticky ヘッダー（info36 + モバイルバー54）の下に置く */
  .fixed-estimate {
    z-index: 100 !important;
    top: 90px !important;
    background: transparent !important;
    border: none;
  }

  .fixed-estimate--pc {
    display: none !important;
  }
  .fixed-estimate--sp {
    display: block !important;
    background: #fff !important;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  #compare {
    scroll-margin-top: 260px;
  }

  .fixed-estimate__actions .btn {
    padding: 8px 10px;
    font-size: 13px !important;
    white-space: nowrap;
  }

  .jt-mobile-floating {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    z-index: 998 !important;
    padding: 8px 10px;
    gap: 8px;
  }

  .jt-mobile-floating .jt-cta-btn {
    flex: 1;
    padding: 12px 8px;
    border-radius: 6px;
    font-size: 13.5px;
  }

  .jt-footer-info {
    padding-bottom: 90px;
  }

  .jt-pagetop {
    bottom: 76px;
  }

  /* 横幕タイプ図: 枠内に収める（列幅を超えない） */
  a.btn.btn-estimate img[src*="houmaku"],
  button.btn.btn-estimate img[src*="houmaku"] {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 80px !important;
  }
}

/* =========================================================
 * 見積り本体: BS4 排除後のレイアウト補正（テーマ BS5 前提）
 * ========================================================= */

/* パンくず行は固定幅にしない */
.fluid-container > .row {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1199px) {
  .fluid-container > .row {
    width: 100% !important;
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 背景・余白（旧 _bg-lightgray / container 周り） */
._bg-lightgray {
  background: #f5f5f5 !important;
}

.container-fluid._bg-lightgray {
  padding-left: 0;
  padding-right: 0;
}

/* 旧サイト同様、本文は最大 1200px */
.container-fluid._bg-lightgray > .container {
  max-width: 1200px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.container-fluid .container.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.container-fluid .container.py-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

@media (max-width: 767px) {
  .container-fluid .container.py-5 {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .container-fluid .container.px-0 {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* グリッド（選択ボタン群） */
.section-estimate .row,
#assemblyBody .row,
#simpleBody .row,
#easyupBody .row,
#quickBody .row {
  display: flex !important;
  flex-wrap: wrap !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section-estimate .row > [class*="col-"],
#assemblyBody .row > [class*="col-"],
#simpleBody .row > [class*="col-"],
#easyupBody .row > [class*="col-"],
#quickBody .row > [class*="col-"] {
  box-sizing: border-box;
  padding: 4px !important; /* p-1 相当（px 固定） */
}

.section-estimate .row.g-0,
#assemblyBody .row.g-0,
#simpleBody .row.g-0,
#easyupBody .row.g-0,
#quickBody .row.g-0 {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* 見積り選択ボタン（旧 BS4 btn-block 相当 + 画像付きカード） */
a.btn.btn-estimate,
button.btn.btn-estimate {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  height: 100%;
  white-space: normal !important;
  text-align: center;
  background-color: #fff;
  color: #454545;
  border: 2px solid #ccc;
  border-radius: 4px;
  box-shadow: none;
  padding: 12px 8px !important;
  line-height: 1.25;
  font-size: 15px;
  font-weight: bold;
  text-decoration: none;
  box-sizing: border-box;
  overflow: hidden;
}

@media (min-width: 768px) {
  a.btn.btn-estimate.py-md-3,
  button.btn.btn-estimate.py-md-3 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
}

/* 選択ボタン内の画像（既定は実寸・中央。商品写真のみ全幅） */
a.btn.btn-estimate img,
button.btn.btn-estimate img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  opacity: 1 !important;
  margin: 0 auto 8px !important;
}

/* 商品写真（img-fluid）は列幅いっぱい */
a.btn.btn-estimate img.img-fluid,
button.btn.btn-estimate img.img-fluid {
  width: 100%;
  max-width: 100%;
}

/* 天幕・横幕カラー見本（color_*.gif は 42x42） */
a.btn.btn-estimate img[src*="color_"],
button.btn.btn-estimate img[src*="color_"] {
  width: 42px !important;
  height: 42px !important;
  max-width: 42px !important;
}

/* 横幕タイプ図（一方幕・三方幕・四方幕）は枠内に収める */
a.btn.btn-estimate img[src*="houmaku"],
button.btn.btn-estimate img[src*="houmaku"] {
  width: auto !important;
  max-width: min(170px, 100%) !important;
  height: auto !important;
  max-height: 100px !important;
  object-fit: contain;
}

a.btn.btn-estimate:hover img,
button.btn.btn-estimate:hover img {
  opacity: 1 !important;
}

a.btn.btn-estimate.btn-estimate-selected,
button.btn.btn-estimate.btn-estimate-selected {
  color: #1e87e7;
  border-color: #1e87e7;
  background-color: #fff;
}

/* 無効な種類ボタン（枠ごとグレーアウト） */
a.btn.btn-estimate[disabled],
a.btn.btn-estimate.is-disabled,
#quickTitle {
  pointer-events: none !important;
  opacity: 0.4 !important;
  border-color: #bbb !important;
  background-color: #f0f0f0 !important;
  color: #888 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

a.btn.btn-estimate[disabled]:hover,
a.btn.btn-estimate.is-disabled:hover,
#quickTitle:hover {
  border-color: #bbb !important;
  background-color: #f0f0f0 !important;
  color: #888 !important;
}

/* 説明文中の小さな色付きボタン（カートへ／比較リスト） */
p .btn.btn-danger,
p .btn.btn-success {
  display: inline-block;
  width: auto !important;
  padding: 2px 8px !important;
  font-size: 14px !important;
  font-weight: bold;
  line-height: 1.4;
  vertical-align: baseline;
  border-radius: 3px;
  border: none;
  white-space: nowrap;
}

p .btn.btn-danger {
  background: #dc3545;
  color: #fff !important;
}

p .btn.btn-success {
  background: #28a745;
  color: #fff !important;
}

/*
 * BS4 の .btn-block 相当（見積り JS がまだ btn-block を出力するため）
 */
.btn-block {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* 既定は両方非表示（メディアクエリで出し分け） */
.fixed-estimate--pc,
.fixed-estimate--sp {
  display: none;
}

/*
 * 選択中のテント（SP: 旧ページ準拠 3列表＋下部アクション）
 */
.fixed-estimate--sp .fixed-estimate__title {
  color: #222 !important;
  font-weight: 700;
  background: #fff;
}

.fixed-estimate__table {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  vertical-align: middle;
  font-size: 12px;
}

.fixed-estimate__table th,
.fixed-estimate__table td {
  vertical-align: middle;
  border: 1px solid #dee2e6;
  padding: 4px 6px;
}

.fixed-estimate__table .table-light,
.fixed-estimate__table th.table-light {
  background-color: #f8f9fa !important;
}

.fixed-estimate__table .text-end {
  text-align: right !important;
}

.fixed-estimate__table .fw-bold {
  font-weight: 700 !important;
}

.fixed-estimate__table #code1_sp a,
.fixed-estimate__table #code2_sp a,
.fixed-estimate__table #name1_sp a,
.fixed-estimate__table #name2_sp a {
  color: #222;
  text-decoration: underline;
}

.fixed-estimate__actions {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
}

.fixed-estimate__actions .me-1 {
  margin-right: 4px !important;
}

.fixed-estimate__actions .ms-auto {
  margin-left: auto !important;
}

.fixed-estimate__actions .btn-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff !important;
}

.fixed-estimate__actions .btn-success {
  background: #28a745;
  border-color: #28a745;
  color: #fff !important;
}

.fixed-estimate__actions .btn {
  display: inline-block;
  width: auto !important;
  box-sizing: border-box;
  white-space: nowrap;
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.fixed-estimate__actions .btn.btn-block {
  width: auto !important;
  display: inline-block !important;
}

.fixed-estimate__delete {
  cursor: pointer;
  color: #222;
  text-decoration: none;
  white-space: nowrap;
}

.fixed-estimate__delete:hover {
  color: #d64000;
  text-decoration: underline;
}

.fixed-estimate__delete .icon-close {
  font-family: fontello;
  font-style: normal;
  speak: never;
  margin-right: 4px;
}

.fixed-estimate__delete .icon-close::before {
  content: "\e80e";
}

/* PC 表 */
.fixed-estimate__table-pc {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
}

.fixed-estimate__table-pc th,
.fixed-estimate__table-pc td {
  vertical-align: middle;
  border: 1px solid #dee2e6;
  padding: 4px 6px;
}

/* テーブル（比較リストなど） */
.section-estimate .table,
.table.table-sm {
  width: 100%;
  margin-bottom: 0;
  border-collapse: collapse;
  vertical-align: middle;
}

/*
 * 比較リスト: PC / SP のボタン出し分け
 */
@media (min-width: 961px) {
  .estimate-compare-sp {
    display: none !important;
  }
  .estimate-compare-pc {
    display: block !important;
  }

  .estimate-compare-table .btn-danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff !important;
  }
  .estimate-compare-table .btn-light {
    background: #f8f9fa;
    color: #212529;
  }
}

@media (max-width: 960px) {
  .estimate-compare-pc {
    display: none !important;
  }
  .estimate-compare-sp {
    display: inline !important;
  }
  .estimate-compare-cart.estimate-compare-sp,
  .estimate-compare-del.estimate-compare-sp {
    display: inline-flex !important;
  }

  .estimate-compare-table {
    font-size: 12px !important;
    table-layout: fixed;
  }

  .estimate-compare-table th,
  .estimate-compare-table td {
    padding: 4px 3px;
    vertical-align: middle;
    word-break: break-all;
  }

  /* 金額は途中改行しない（141,900円） */
  .estimate-compare-table td.estimate-compare-price {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    font-size: 13px !important;
    letter-spacing: 0;
    width: 5.8em;
  }

  .estimate-compare-table td.estimate-compare-price ._fs-12px {
    font-size: 11px !important;
  }

  .estimate-compare-table a {
    color: #d64000;
  }

  /* ラベル縦書き */
  .estimate-compare-th {
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.15em;
    width: 1.6em !important;
    max-width: 1.6em;
    padding: 6px 2px !important;
    text-align: center;
    white-space: nowrap;
    background: #f8f9fa;
    font-weight: 700;
  }

  .estimate-compare-col-label {
    width: 1.6em !important;
  }

  /* 縦書き「カート」ボタン（セル全体は伸ばさない） */
  .estimate-compare-cart-cell {
    width: 40px;
    padding: 4px !important;
  }

  .estimate-compare-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0.05em;
    width: 32px;
    height: auto;
    min-height: 0;
    padding: 10px 4px !important;
    background: #dc3545 !important;
    border: none !important;
    border-radius: 4px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    box-sizing: border-box;
    line-height: 1.15;
  }

  /* 四角い ✕ 削除ボタン */
  .estimate-compare-del-cell {
    width: 44px;
    padding: 4px !important;
  }

  .estimate-compare-del {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #343a40 !important;
    border-radius: 4px;
    color: #222 !important;
    text-decoration: none !important;
    box-sizing: border-box;
  }

  .estimate-compare-del .icon-close {
    font-family: fontello;
    font-style: normal;
    speak: never;
    font-size: 14px;
    line-height: 1;
  }

  .estimate-compare-del .icon-close::before {
    content: "\e80e";
  }
}

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
  border: 1px solid #dee2e6;
}

.table.table-sm th,
.table.table-sm td {
  padding: 4px 6px;
  font-size: 14px;
}

.bg-white {
  background-color: #fff !important;
}

.text-white {
  color: #fff !important;
}

.text-danger {
  color: #dc3545 !important;
}

.text-center {
  text-align: center !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.rounded {
  border-radius: 4px !important;
}

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

.border {
  border: 1px solid #dee2e6 !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.align-middle {
  vertical-align: middle !important;
}

/* 余白ユーティリティ（px 固定で rem 縮小の影響を回避） */
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-2 {
  margin-bottom: 8px !important;
}
.mb-3 {
  margin-bottom: 16px !important;
}
.mb-4 {
  margin-bottom: 24px !important;
}
.me-1 {
  margin-right: 4px !important;
}
.px-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
.p-1 {
  padding: 4px !important;
}