@charset "UTF-8";
/*
 * TOP「PRICE」料金表（案1：工事別カード＋区内の実例）
 * template-parts/front/price.php 用。inc/enqueue-assets.php でフロントページのみ読み込む。
 * 2026-10-01 磯崎決定（デモ: 01_あおい住建/02_施策/_mock/2026-10-01_料金表デモ）。アクセント線は使わない。
 *
 * 色・書体は既存テーマの CSS 変数（--customize_*）と明朝／ゴシックの指定に合わせる。
 * ブレークポイントは既存と同じ 768px / 1024px。角丸は使わない。
 */

/* ---------- 共通トークン ---------- */
.bl_priceGuide {
  --pr-main: var(--customize_main_color, #0048a6);
  --pr-main-rgb: var(--customize_main_color_rgb, 0, 72, 166);
  --pr-base: var(--customize_base_color, #e5f3ff);
  --pr-accent: var(--customize_accent_color1, #ffb427);
  --pr-line: #ccc;
  --pr-line-light: #e3e3e3;
  --pr-muted: #6b6b6b;
  --pr-mincho: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --pr-gothic: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

.bl_priceGuide * {
  box-sizing: border-box;
}

.bl_priceGuide_lead {
  margin: 0 0 24px;
  font-size: .875rem;
  line-height: 1.8;
}

.bl_priceGuide_groupTtl {
  display: flex;
  align-items: center;
  margin: 0 0 14px;
  font-family: var(--pr-mincho);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--pr-main);
}

/* 主力3工事：カード */
.bl_priceGuide_main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.bl_priceGuide_card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background-color: #fff;
  border: 1px solid var(--pr-line);
}

.bl_priceGuide_cardHead {
  padding: 18px 18px 16px;
  background-color: var(--pr-base);
}

.bl_priceGuide_name {
  margin: 0 0 6px;
  font-family: var(--pr-mincho);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.bl_priceGuide_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  font-family: var(--pr-mincho);
  line-height: 1.1;
  color: var(--pr-main);
}

.bl_priceGuide_num {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.bl_priceGuide_unit {
  margin-left: 2px;
  font-size: 1.125rem;
  font-weight: 600;
}

.bl_priceGuide_tax {
  margin-left: 4px;
  font-family: var(--pr-gothic);
  font-size: .75rem;
  color: var(--pr-muted);
}

.bl_priceGuide_cases {
  flex: 1 1 auto;
  padding: 14px 18px 4px;
}

.bl_priceGuide_casesTtl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 6px;
  font-size: .8125rem;
  font-weight: 700;
}

.bl_priceGuide_casesTtl span {
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
  color: #fff;
  background-color: var(--pr-main);
}

.bl_priceGuide_caseList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bl_priceGuide_caseList li + li {
  border-top: 1px dashed var(--pr-line);
}

.bl_priceGuide_case {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  color: inherit;
  text-decoration: none;
}

.bl_priceGuide_caseImg {
  display: block;
  width: 64px;
  height: 48px;
  object-fit: cover;
  background-color: #eee;
}

.bl_priceGuide_caseName {
  min-width: 0;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.35;
}

.bl_priceGuide_caseName small {
  display: block;
  margin-top: 2px;
  font-size: .6875rem;
  font-weight: 400;
  color: var(--pr-muted);
}

.bl_priceGuide_caseCost {
  font-size: .75rem;
  line-height: 1.35;
  text-align: right;
  white-space: nowrap;
  color: var(--pr-muted);
}

.bl_priceGuide_caseCost b {
  display: block;
  font-family: var(--pr-mincho);
  font-size: 1rem;
  font-weight: 600;
  color: var(--pr-main);
}

.bl_priceGuide_case:hover .bl_priceGuide_caseName,
.bl_priceGuide_case:focus-visible .bl_priceGuide_caseName {
  color: var(--pr-main);
  text-decoration: underline;
}

/* そのほかの工事：タイル */
.bl_priceGuide_sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.bl_priceGuide_subItem {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 12px;
  background-color: #fff;
  border: 1px solid var(--pr-line);
}

.bl_priceGuide_subName {
  margin: 0 0 6px;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.35;
}

.bl_priceGuide_subPrice {
  margin: 0;
  font-family: var(--pr-mincho);
  line-height: 1.15;
  color: var(--pr-main);
}

.bl_priceGuide_subPrice .bl_priceGuide_num {
  font-size: 1.375rem;
}

.bl_priceGuide_subPrice .bl_priceGuide_unit {
  font-size: .875rem;
}

.bl_priceGuide_subPrice .bl_priceGuide_tax {
  display: block;
  margin: 2px 0 0;
}

.bl_priceGuide_note {
  margin: 0 0 30px;
  font-size: .75rem;
  line-height: 1.7;
  color: var(--pr-muted);
}

/* CTA（既存 .bl_cta のボタンを流用し、箱だけ足す） */
.bl_priceGuide_cta.bl_cta {
  padding: 26px 15px 22px;
  background-color: var(--pr-base);
}

.bl_priceGuide_cta .bl_cta_ttl {
  margin-bottom: 18px;
  font-size: 1.125rem;
  line-height: 1.4;
}

@media screen and (min-width: 768px) {
  .bl_priceGuide_cta .bl_cta_ttl {
    font-size: 1.5rem;
  }
}

.bl_priceGuide_cta .bl_cta_lead {
  margin: -8px 0 18px;
  font-size: .8125rem;
  line-height: 1.7;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .bl_priceGuide_lead {
    font-size: .9375rem;
  }

  .bl_priceGuide_sub {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .bl_priceGuide_subItem {
    padding: 16px;
  }

  .bl_priceGuide_subName {
    font-size: .875rem;
  }

  .bl_priceGuide_subPrice .bl_priceGuide_num {
    font-size: 1.625rem;
  }
}

@media screen and (min-width: 1024px) {
  .bl_priceGuide_main {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-bottom: 44px;
  }

  .bl_priceGuide_cardHead {
    padding: 22px 22px 18px;
  }

  .bl_priceGuide_cases {
    padding: 16px 22px 4px;
  }

  .bl_priceGuide_num {
    font-size: 2.5rem;
  }

  .bl_priceGuide_cta.bl_cta {
    padding: 36px 40px 34px;
  }

  .bl_priceGuide_cta .bl_cta_lead {
    font-size: .9375rem;
  }
}