/**
 * assets/css/search.css
 *
 * /search/ セクション全ページの共通スタイル
 * デザインシステム v1.0 準拠
 *
 * 構成：
 *   1. 共通レイアウト（container, section heading）
 *   2. ダークヒーロー（画面1・2・3共通）
 *   3. 3つの探し方カード（画面1: /search/）
 *   4. メーカーカード（画面1 / 画面2上部）
 *   5. タイプグリッド（画面1）
 *   6. シリーズカード（画面2）
 *   7. フィルター・ソート
 *   8. 商品詳細ヒーロー（画面3）
 *   9. タイプ並列表示（画面3）
 *  10. サイズ入力ブロック（画面3）
 *  11. サイズの測り方アコーディオン
 *  12. 詳細セクション（説明・仕様・カラー）
 *  13. ドアSVG共通
 *
 * @since 5.8.0
 */

/* ============================================================
   1. 共通
   ============================================================ */

.search-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 56px var(--content-side-padding);
}
@media (max-width: 720px) {
  .search-container { padding: 32px var(--content-side-padding); }
}

.search-section {
  margin-bottom: 60px;
}
.search-section:last-child { margin-bottom: 0; }


/* ============================================================
   2. ダークヒーロー（画面1・2・3共通パーツ）
   ============================================================ */

.search-hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #2A2218 100%);
  color: #fff;
  padding: 48px 0 64px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .search-hero { padding: 32px 0 44px; }
}
.search-hero::before {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(208,180,140,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.search-hero::after {
  content: '';
  position: absolute;
  right: 8%; bottom: -60px;
  width: 200px; height: 200px;
  background: rgba(208,180,140,0.08);
  border-radius: 50%;
  pointer-events: none;
}
.search-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-side-padding);
  position: relative;
  z-index: 1;
}
/* ヒーロー内のパンくず：ベージュ背景を消してヒーローに溶け込ませる */
.search-hero-inner .breadcrumb {
  max-width: none;
  padding: 0;
  margin-bottom: 24px;
  background: transparent;
  color: rgba(255,255,255,0.7);
}
.search-hero-inner .breadcrumb a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-hero-inner .breadcrumb a:hover {
  color: #fff;
}
.search-hero-inner .breadcrumb span {
  color: rgba(255,255,255,0.4);
}
.search-hero-eyebrow {
  font-family: "Noto Serif JP", serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.3em;
  color: #D4A453;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.search-hero-eyebrow-ja {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;
  color: #D4A453;
  font-weight: 400;
  letter-spacing: 0.15em;
  margin-bottom: 10px;
}
.search-hero-eyebrow-en {
  font-size: 13px;
  color: rgba(212,164,83,0.9);
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.search-hero-title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: var(--fw-heading);
  color: #fff;
  line-height: 1.3;
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.search-hero-title em {
  color: #D4A453;
  font-style: normal;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.05em;
}
.search-hero-sub {
  font-size: var(--fs-body);      /* 18px（/estimate/ hero-sub と統一） */
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-body);    /* 2.0 */
  font-weight: var(--fw-body);    /* 500 */
  margin-bottom: 36px;
  /* max-width は指定しない：コンテナ幅いっぱいまで使い、右端で自然折返し */
}

/* CTAグループ */
.search-hero-cta-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.search-hero-cta-primary {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--color-ink);
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: all 0.2s;
}
.search-hero-cta-primary:hover {
  transform: translateY(-2px);
  background: #F5F2EC;
  color: var(--color-ink);
  box-shadow: 0 6px 22px rgba(0,0,0,0.35);
}
.search-hero-cta-secondary {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  background: var(--brand-red);
  color: #fff;
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: 0.08em;
  padding: 14px 28px;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(231,0,18,0.35);
  transition: all 0.2s;
}
.search-hero-cta-secondary:hover {
  background: var(--brand-red-hv);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(231,0,18,0.45);
}

/* 統計バー */
.search-hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.15);
  max-width: 720px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .search-hero-stats { gap: 24px; margin-top: 36px; }
}
.search-hero-stat-num {
  font-size: 32px;
  font-weight: 700;
  color: #D4A453;
  line-height: 1;
  font-family: "Noto Serif JP", serif;
}
.search-hero-stat-num small {
  font-size: 16px;
  margin-left: 2px;
}
.search-hero-stat-label {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  margin-top: 8px;
}


/* ============================================================
   3. 3つの探し方カード（/search/ トップ）
   ============================================================ */

.search-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
@media (max-width: 900px) {
  .search-paths { grid-template-columns: 1fr; }
}
.search-path-card {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.search-path-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.search-path-number {
  position: absolute;
  top: 8px; right: 24px;
  font-family: "Noto Serif JP", serif;
  font-size: 120px;
  font-weight: 900;
  color: var(--bg-soft);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}
.search-path-label {
  display: inline-block;
  color: var(--brand-red);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-top: 16px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.search-path-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}
.search-path-desc {
  font-size: 14px;
  color: var(--color-sub);
  line-height: 1.8;
  margin-bottom: 20px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.search-path-desc strong {
  color: var(--brand-red);
  font-weight: 700;
}
.search-path-btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: 0.08em;
  padding: 14px 22px;
  border-radius: 10px;
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.search-path-btn.is-primary {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 4px 14px rgba(231,0,18,0.25);
}
.search-path-btn.is-primary:hover {
  background: var(--brand-red-hv);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(231,0,18,0.35);
}
.search-path-btn.is-secondary {
  background: var(--color-ink);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.search-path-btn.is-secondary:hover {
  background: #2a2a2a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}


/* ============================================================
   4. メーカーカード（/search/ トップ）
   ============================================================ */

.search-maker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* margin-bottom はセクション間隔を container の padding で統一管理するため 0 */
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .search-maker-grid { grid-template-columns: 1fr; }
}
.search-maker-card {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}
.search-maker-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.search-maker-visual {
  height: 150px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;  /* <a>化に伴い下線抑制 */
  transition: background 0.2s ease;
}
.search-maker-visual:hover {
  background: #FAF8F3;
}
.search-maker-visual-img {
  position: relative;
  width: 220px;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  z-index: 1;
  transition: transform 0.2s ease;
}
.search-maker-visual:hover .search-maker-visual-img {
  transform: scale(1.03);
}
.search-maker-body {
  padding: 22px 24px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-maker-series-name {
  font-size: 13px;
  color: var(--brand-red);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.search-maker-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.search-maker-desc {
  font-size: var(--fs-body-sm);  /* 16px（/estimate/ 基準と統一） */
  color: var(--color-ink);
  line-height: var(--lh-body-sm); /* 1.9 */
  font-weight: var(--fw-body);    /* 500 */
  margin-bottom: 20px;
  flex: 1;
}

/* メーカーCTAボタン（「○○のドアを探す →」黒背景） */
.search-maker-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--color-ink);
  color: #fff;
  font-size: 15px;              /* var(--fs-btn)=17px → 15px（少し控えめに） */
  font-weight: var(--fw-btn);
  letter-spacing: 0.05em;       /* 0.08em → 0.05em（詰めて見やすく） */
  padding: 14px 22px;
  border-radius: 10px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
.search-maker-cta-btn:hover {
  background: #2a2a2a;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}


/* ============================================================
   5. タイプグリッド（/search/ トップ）
   ============================================================ */

.search-types-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 920px) {
  .search-types-grid { grid-template-columns: repeat(2, 1fr); }
}

.search-type-card {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 24px 20px;
  text-align: center;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  text-decoration: none;
}
.search-type-card:hover {
  border-color: var(--brand-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.search-type-card:hover .search-type-cta-btn {
  background: #2a2a2a;
}
/* タイプ名（イラスト上） */
.search-type-name-top {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}
.search-type-svg-wrap {
  width: 158px; height: 180px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
}
.search-type-svg { width: 100%; height: 100%; }
.search-type-name {
  /* 旧：イラスト下のタイプ名（非表示） */
  display: none;
}
.search-type-sub {
  font-size: var(--fs-body-sm);   /* 12px → 16px（黒で大きめに、アクセシビリティ） */
  color: var(--color-ink);         /* #555 → #1A1A1A */
  line-height: var(--lh-body-sm); /* 1.9 */
  font-weight: var(--fw-body);
  margin-bottom: 18px;
  flex: 1;  /* CTAを下に押し付ける */
}
.search-type-count {
  /* 商品数は削除（非表示） */
  display: none;
}
/* CTAボタン（メーカーカードと揃えた黒背景） */
.search-type-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--color-ink);
  color: #fff;
  font-size: 15px;              /* var(--fs-btn)=17px → 15px（少し控えめに） */
  font-weight: var(--fw-btn);
  letter-spacing: 0.05em;       /* 0.08em → 0.05em */
  padding: 14px 18px;
  border-radius: 10px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}


/* ============================================================
   13. ドアSVG 共通（全画面で使用）
   ============================================================ */

.door-svg-shape { stroke: #333; stroke-width: 1.0; fill: #fff; }
.door-svg-panel { fill: #EEE6D6; }
.door-svg-fixed { fill: #D8D8D8; }  /* 子ドア・FIX部・引き戸固定側 */
.door-svg-handle { fill: #B08A58; }
.door-svg-glass { fill: #CEE4EA; opacity: 0.8; }
.door-svg-slit { fill: #CEE4EA; opacity: 0.65; }


/* ============================================================
   一覧ページ共通：メーカー・タイプ
   ============================================================ */

/* メーカー紹介ブロック（画面2上部） */
.search-maker-intro {
  background: #fff;
  border-radius: 10px;
  padding: 36px;
  margin-bottom: 40px;
  border: 1px solid var(--color-border);
}
@media (max-width: 720px) {
  .search-maker-intro { padding: 22px; }
}
.search-maker-intro-logo {
  text-align: center;
  padding: 10px 0 28px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 28px;
}
.search-maker-intro-logo img {
  display: inline-block;
  width: 260px;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: contain;
}
.search-maker-intro-lead {
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-heading);
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  color: var(--color-ink);
  padding-left: 18px;
  border-left: 6px solid var(--brand-red);
}
.search-maker-intro p {
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  margin-bottom: 16px;
  line-height: var(--lh-body);
  color: var(--color-ink);
}
.search-maker-intro-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}
@media (max-width: 720px) {
  .search-maker-intro-features { grid-template-columns: 1fr; }
}
.search-feature-chip {
  background: #F0F0F0;
  padding: 18px 20px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.8;
}
.search-feature-chip strong {
  display: block;
  color: var(--brand-red);
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
}

/* フィルター・並び順 */
.search-filter-bar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.search-filter-label {
  font-size: 13px;
  color: var(--color-sub);
  margin-right: 6px;
}
.search-filter-chip {
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 13px;
  background: var(--bg-soft);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
}
.search-filter-chip.is-active,
.search-filter-chip:hover {
  background: var(--color-ink);
  color: #fff;
  border-color: var(--color-ink);
}
.search-filter-sort {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-sub);
}
.search-filter-sort select {
  border: 1px solid var(--color-border);
  padding: 5px 10px;
  border-radius: 4px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
}

/* カウント */
.search-listing-count {
  font-size: 13px;
  color: var(--color-sub);
  margin-bottom: 20px;
}
.search-listing-count strong {
  color: var(--color-ink);
  font-size: 16px;
  font-weight: 700;
  margin-right: 2px;
}

/* シリーズカードグリッド */
.search-series-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 980px) {
  .search-series-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .search-series-grid { grid-template-columns: 1fr; }
}
.search-series-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s;
}
.search-series-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border-color: var(--brand-red);
}
.search-series-card-badges {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  gap: 4px;
  flex-direction: column;
  z-index: 2;
}
.search-s-badge {
  background: var(--color-ink);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: 0.1em;
}
.search-s-badge.is-sale {
  background: var(--brand-red);
}
.search-series-image {
  aspect-ratio: 4/5;
  background: linear-gradient(180deg, #FDFCFB 0%, #F9F7F4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.search-series-image svg {
  width: 50%;
  height: 85%;
}
.search-series-types-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  padding: 4px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-ink);
}
.search-series-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-series-maker-line {
  font-size: 11px;
  color: var(--color-sub);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.search-series-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 8px;
  line-height: 1.4;
}
.search-series-features {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.search-series-feature {
  background: var(--bg-soft);
  color: var(--color-sub);
  padding: 3px 9px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}
.search-series-types {
  font-size: 12px;
  color: var(--color-sub);
  margin-bottom: 12px;
  line-height: 1.6;
}
.search-series-colors {
  display: flex;
  gap: 3px;
  margin-bottom: 14px;
  align-items: center;
}
.search-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.search-color-more-text {
  margin-left: 4px;
  font-size: 11px;
  color: var(--color-sub);
}
.search-series-price-area {
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.search-series-price-label {
  font-size: 11px;
  color: var(--color-sub);
  margin-bottom: 2px;
}
.search-series-price-low {
  font-size: 22px;
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1;
  font-family: "Noto Serif JP", serif;
}
.search-series-price-low small {
  font-size: 13px;
  margin-left: 2px;
}
.search-series-price-range {
  font-size: 12px;
  color: var(--color-sub);
  margin-top: 4px;
}
.search-series-price-sub {
  font-size: 11px;
  color: var(--brand-red);
  font-weight: 500;
  margin-top: 4px;
}


/* ============================================================
   商品詳細（/search/product/xxx/）
   ============================================================ */

/* 商品ヒーロー（ダーク背景、左:画像 / 右:情報） */
.search-product-hero {
  background: linear-gradient(135deg, #1A1A1A 0%, #2A2218 100%);
  color: #fff;
  padding: 56px 24px 64px;
  position: relative;
  overflow: hidden;
}
.search-product-hero::before {
  content: '';
  position: absolute;
  left: -120px; top: -120px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(208,180,140,0.12) 0%, transparent 70%);
}
.search-product-hero-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) {
  .search-product-hero-inner { grid-template-columns: 1fr; gap: 28px; }
}
.search-product-hero-image {
  aspect-ratio: 4/5;
  max-width: 420px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.search-product-hero-image svg { width: 60%; height: 80%; }
.search-product-hero-info .maker-line {
  font-family: "Noto Serif JP", serif;
  font-size: 14px;                 /* 12px → 14px（スマホ視認性向上） */
  color: #D4A453;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
}
.search-product-hero-title {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: var(--fw-heading);
  line-height: 1.2;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
  color: #fff;
}
.search-product-hero-tagline {
  font-size: var(--fs-body);      /* 16px → 18px（/estimate/ hero-sub 基準） */
  color: rgba(255,255,255,0.85);
  line-height: var(--lh-body);    /* 2.0 */
  font-weight: var(--fw-body);    /* 500 */
  margin-bottom: 28px;
}
.search-product-hero-price-block {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.search-product-hero-price-label {
  font-size: 14px;                 /* 12px → 14px */
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}
.search-product-hero-price {
  font-family: "Noto Serif JP", serif;
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
}
.search-product-hero-price small {
  font-size: 16px;
  margin-left: 4px;
  color: rgba(255,255,255,0.85);
}
.search-product-hero-price-sub {
  font-size: 14px;                 /* 12px → 14px */
  color: #D4A453;
  margin-top: 6px;
  font-weight: 500;
}


/* タイプ並列表示（画面3） */
.search-types-section-intro {
  text-align: center;
  margin-bottom: 36px;
}
.search-types-section-intro .h2 {
  padding-left: 0;
  border-left: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.search-types-section-intro .h2::before,
.search-types-section-intro .h2::after {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--brand-red);
  display: inline-block;
}
.search-types-section-intro p {
  color: var(--color-ink);
  font-size: var(--fs-body-sm);   /* 15px → 16px */
  line-height: var(--lh-body-sm); /* 1.8 → 1.9 */
  font-weight: var(--fw-body);    /* 500 */
}

.search-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 50px;
}
@media (max-width: 980px) {
  .search-type-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .search-type-grid { grid-template-columns: 1fr; }
}

.search-type-detail-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.2s;
}
.search-type-detail-card.is-active {
  border-color: var(--brand-red);
  border-width: 2px;
  box-shadow: 0 4px 18px rgba(231,0,18,0.12);
}
.search-type-detail-card.is-grayed {
  opacity: 0.45;
}
.search-type-detail-card.is-grayed:hover {
  opacity: 0.7;
}
.search-type-active-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: var(--brand-red);
  color: #fff;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
}
.search-type-image {
  height: 280px;
  aspect-ratio: auto;  /* 高さ固定にするため aspect-ratio は無効化 */
  background: linear-gradient(180deg, #FDFCFB 0%, #F9F7F4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.search-type-image svg {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 180px;
}
.search-type-image img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;  /* 中央揃え */
}

/* ランマ付きカードは高さを10px上乗せ（ランマ分の縦伸び） */
.search-type-ranma-grid .search-type-image {
  height: 290px;
}
.search-type-body {
  padding: 18px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.search-type-body-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 4px;
}
.search-type-body-kodenum {
  font-size: 11px;
  color: var(--color-sub);
  margin-bottom: 12px;
}
/* 未登録（設定なし・取り扱いなし）時の見た目：濃いめ・少し大きめで視認性UP */
.search-type-body-unavailable {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  line-height: 1.65;
  padding: 24px 10px;
  text-align: center;
}
.search-type-spec-list {
  font-size: 12px;
  color: var(--color-sub);
  line-height: 1.6;
  margin-bottom: 14px;
}
.search-type-spec-list > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 4px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.search-type-spec-list > div:last-child {
  border-bottom: none;
}
.search-type-spec-list dt {
  color: var(--color-sub);
  font-weight: 500;
}
.search-type-spec-list dd {
  color: var(--color-ink);
  font-weight: 500;
}
.search-type-price-area {
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}
.search-type-price-label {
  font-size: 11px;
  color: var(--color-sub);
}
.search-type-price-from {
  font-size: 20px;
  font-weight: 700;
  color: var(--brand-red);
  font-family: "Noto Serif JP", serif;
  line-height: 1.2;
  margin-top: 2px;
}
.search-type-price-from small {
  font-size: 12px;
  margin-left: 2px;
}
.search-type-price-sub {
  font-size: 10px;
  color: var(--color-sub);
  margin-top: 4px;
}


/* ============================================================
   サイズ入力ブロック
   ============================================================ */

.search-size-input-section {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 40px 36px;
  margin-bottom: 20px;
}
@media (max-width: 720px) {
  .search-size-input-section { padding: 28px 20px; }
}
.search-size-input-section .h2 { margin-bottom: 10px; }
.search-size-input-section .lead {
  font-size: 15px;
  margin-bottom: 24px;
  color: var(--color-ink);
  line-height: 1.9;
}
.search-size-input-form {
  background: var(--bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px;
}
@media (max-width: 720px) {
  .search-size-input-form { padding: 20px 18px; }
}
.search-size-input-form-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-ink);
}
.search-size-input-form-subtitle {
  font-size: 14px;
  color: var(--color-ink);
  line-height: 1.8;
  margin-bottom: 20px;
}
.search-size-input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 16px;
}
.search-size-input-field label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.search-size-input-field-wrap { position: relative; }
.search-size-input-field-wrap input {
  width: 100%;
  height: 56px;
  padding: 0 46px 0 16px;
  font-size: 20px;
  font-weight: 700;
  border: 1.5px solid var(--color-border-strong, #C9C3B5);
  border-radius: 8px;
  font-family: inherit;
  color: var(--color-ink);
}
.search-size-input-field-wrap input::placeholder {
  color: #aaa;
  font-weight: 500;
  font-size: 15px;
}
.search-size-input-field-wrap input:focus {
  outline: none;
  border-color: var(--brand-red);
}
.search-size-input-field-unit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-ink);
  pointer-events: none;
}
.search-size-input-submit {
  width: 100%;
  min-height: 60px;
  padding: 14px 28px;
  background: var(--brand-red);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--fs-btn);
  font-weight: var(--fw-btn);
  letter-spacing: 0.08em;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, transform 0.1s;
}
.search-size-input-submit:hover {
  background: var(--brand-red-hv);
  transform: translateY(-1px);
}
.search-size-input-help {
  font-size: 13px;
  color: var(--color-ink);
  line-height: 1.8;
  margin-top: 14px;
}
.search-size-input-error {
  background: #FFF0F0;
  border: 1px solid var(--brand-red);
  color: var(--brand-red);
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

/* サイズの測り方アコーディオン */
.search-size-measure-accordion {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.search-size-measure-accordion summary {
  padding: 18px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.search-size-measure-accordion summary::-webkit-details-marker { display: none; }
.search-size-measure-accordion summary::after {
  content: '＋';
  font-size: 22px;
  color: var(--brand-red);
  font-weight: 400;
}
.search-size-measure-accordion[open] summary::after { content: '−'; }
.search-size-measure-body {
  padding: 0 24px 28px;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}
.search-size-measure-lead {
  font-size: 14px;
  line-height: 1.9;
  margin-bottom: 20px;
  color: var(--color-ink);
}
.search-size-measure-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 720px) {
  .search-size-measure-types { grid-template-columns: 1fr; gap: 16px; }
}
.search-size-measure-type {
  background: var(--bg-soft);
  border-radius: 8px;
  padding: 18px;
}
.search-size-measure-type h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--brand-red);
  display: inline-block;
}
.search-size-measure-type-figure {
  background: #fff;
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;  /* 旧140px → 2倍 */
}
.search-size-measure-type-figure svg {
  max-width: 100%;
  width: 100%;       /* 親幅いっぱいに拡大 */
  height: auto;
  max-height: 320px; /* 上限設定（巨大化防止） */
}
.search-size-measure-type-body {
  font-size: var(--fs-body-sm);   /* 15px → 16px */
  line-height: var(--lh-body-sm); /* 1.9 */
  font-weight: var(--fw-body);    /* 500 */
  color: var(--color-ink);
}


/* ============================================================
   詳細セクション（仕様テーブル・カラー等）
   ============================================================ */

.search-detail-section {
  background: #fff;
  border-radius: 10px;
  padding: 36px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border);
}
@media (max-width: 720px) {
  .search-detail-section { padding: 24px 20px; }
}
.search-detail-section .h2 { margin-bottom: 22px; }
.search-product-description {
  font-size: 15px;
  line-height: 1.95;
}
.search-product-description p { margin-bottom: 16px; }
.search-product-description p:last-child { margin-bottom: 0; }

.search-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);   /* 14px → 16px */
  line-height: var(--lh-body-sm); /* 1.9 */
}
.search-spec-table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--bg-page);
  font-weight: 700;
  color: var(--color-ink);
  width: 160px;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.search-spec-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.8;
  vertical-align: top;
}
.search-spec-table tr:last-child th,
.search-spec-table tr:last-child td {
  border-bottom: none;
}

.search-color-variants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px;
}
.search-color-variants-note {
  font-size: 15px;
  color: var(--color-ink, #1A1A1A);
  margin: 6px 0 24px;
  line-height: 1.8;
}
.search-color-variant {
  text-align: center;
}
.search-color-variant-swatch {
  aspect-ratio: 1/1;
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.1);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  /* カラー見本画像がある場合 inline style で上書きされる */
  background-size: cover;
  background-position: center;
}
.search-color-variant-name {
  font-size: 14px;
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.4;
}
.search-color-variant-code {
  font-size: 14px;
  color: var(--color-ink);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.06em;
}
@media (max-width: 720px) {
  .search-color-variants-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
  }
  .search-color-variants-note { font-size: 14px; }
  .search-color-variant-name { font-size: 13px; }
  .search-color-variant-code { font-size: 13px; }
}


/* ============================================================
   SEO本文ブロック
   ============================================================ */

.search-seo-block {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 40px 36px;
  line-height: 1.9;
  border: 1px solid var(--color-border);
}
@media (max-width: 720px) {
  .search-seo-block { padding: 28px 20px; }
}
.search-seo-block p {
  margin-bottom: 14px;
  font-size: 15px;
}


/* ============================================================
   商品詳細ヒーロー：実写画像＋色玉対応（v5.8.7）
   ============================================================ */

.search-product-hero-image-wrap {
  position: relative;       /* ハロー疑似要素の基準 */
  display: flex;
  flex-direction: column;
  background: transparent;  /* 白箱を撤廃 */
  border-radius: 0;
  overflow: visible;        /* ハローがはみ出てOK */
  box-shadow: none;
  max-width: 460px;
  margin: 0 auto;
}
/* ハロー：ドア背後のゴールド円光 */
.search-product-hero-image-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 580px;
  height: 580px;
  transform: translate(-50%, -58%);   /* 画像中心よりやや上に配置 */
  background: radial-gradient(
    circle,
    rgba(228, 196, 140, 0.22) 0%,
    rgba(228, 196, 140, 0.12) 30%,
    rgba(228, 196, 140, 0.04) 55%,
    transparent 75%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
/* 画像コンテナ：透明、枠なし、ドアに落とし影だけ付ける */
.search-product-hero-image {
  position: relative;        /* バッジ等の基準 */
  z-index: 1;                /* ハローより手前 */
  aspect-ratio: auto;
  max-width: none;
  background: transparent;   /* 白背景撤廃 */
  box-shadow: none;
  border-radius: 0;
  height: 440px;             /* 400→440 少し大きく */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-product-hero-image img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.2s, filter 0.2s;
  /* ドア自体の落とし影（地面に着地しているような奥行き） */
  filter:
    drop-shadow(0 20px 30px rgba(0, 0, 0, 0.45))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
}

/* 色玉：白背景帯、上ボーダーなし */
.search-product-hero-colors {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: #fff;
  border: none;
  margin-top: 18px;
  border-radius: 6px;
}
.search-product-hero-colors .color-chip {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.search-product-hero-colors .color-chip.is-active {
  border-color: #B8925A;
  box-shadow: 0 0 0 2px rgba(184, 146, 90, 0.3);
}
.search-product-hero-colors .door-card-color-count {
  color: var(--color-ink);
  font-size: 13px;
  font-weight: 500;
  margin-left: auto;
  letter-spacing: 0.05em;
}

/* ヒーロー内パンくず（product-hero 用） */
.search-product-hero .breadcrumb {
  max-width: none;
  padding: 0;
  margin: 0 0 24px 0;  /* base の margin: 0 auto を完全に打ち消して左寄せ */
  background: transparent;
  color: rgba(255,255,255,0.7);
}
.search-product-hero .breadcrumb a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-product-hero .breadcrumb a:hover { color: #fff; }
.search-product-hero .breadcrumb span { color: rgba(255,255,255,0.4); }

/* 商品ヒーロー全体の paddingとinner調整（estimate準拠） */
.search-product-hero {
  padding: 48px 0 64px;
}
@media (max-width: 720px) {
  .search-product-hero { padding: 32px 0 44px; }
  .search-product-hero-image { height: 340px; }
  .search-product-hero-image-wrap { max-width: 100%; margin: 0 auto; }
  .search-product-hero-image-wrap::before {
    width: 440px;
    height: 440px;
  }
}
.search-product-hero-inner {
  padding: 0 var(--content-side-padding);
  max-width: var(--content-max-width);
  margin: 0 auto;
}
.search-product-hero-inner > .breadcrumb {
  grid-column: 1 / -1;
}


/* ============================================================
   商品ヒーロー：バッジ（カテゴリ・仕様）（v5.8.16）
   ============================================================ */

/* 画像コンテナ内の左上にバッジを重ねる */
.search-product-hero-image {
  position: relative;  /* バッジの絶対配置基準 */
}
.search-product-hero-badges {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
}
.search-product-hero-badge {
  display: inline-block;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  color: #E4C48C;                    /* ゴールド文字 */
  border: 1px solid rgba(228, 196, 140, 0.5);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 3px;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
/* 特殊仕様（防火・高断熱など2つ目以降）は控えめな赤アウトライン */
.search-product-hero-badge:nth-child(n+2) {
  background: rgba(231, 0, 18, 0.15);
  border-color: rgba(231, 0, 18, 0.55);
  color: #FF8A8A;
}


/* ヒーロータイトル内：選択中タイプの（...）表示 (v5.8.23) */
.search-product-hero-title-type {
  display: inline-block;
  font-size: 0.58em;
  font-weight: 500;
  color: #C8BFA8;
  margin-left: 8px;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .search-product-hero-title-type {
    font-size: 0.52em;
    display: block;
    margin-left: 0;
    margin-top: 6px;
  }
}


/* ============================================================
   商品詳細ヒーロー v2（v5.8.49）
   - ヒーローは「メーカー・商品名」のみ（黒背景＋右ハロー）
   - 情報ブロック（アイボリー）にその他を配置
   ============================================================ */

/* v2 ヒーロー：/search/door-maker/ と同じ黒背景＋右ハロー */
.search-product-hero-v2 {
  position: relative;
  background: var(--color-ink);
  color: #fff;
  padding: 48px 0 56px;
  overflow: hidden;
}
/* 右ハロー：/search/door-maker/ と同じゴールド円光 */
.search-product-hero-v2::before {
  content: '';
  position: absolute;
  right: -100px;
  top: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(208,180,140,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.search-product-hero-v2::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: -60px;
  width: 200px;
  height: 200px;
  background: rgba(208,180,140,0.08);
  border-radius: 50%;
  pointer-events: none;
}
.search-product-hero-v2-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-side-padding);
  position: relative;
  z-index: 1;
}
.search-product-hero-v2 .breadcrumb {
  max-width: none;
  padding: 0;
  margin: 0 0 24px 0;
  background: transparent;
  color: rgba(255,255,255,0.7);
}
.search-product-hero-v2 .breadcrumb a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.search-product-hero-v2 .breadcrumb a:hover { color: #fff; }
.search-product-hero-v2 .breadcrumb span { color: rgba(255,255,255,0.4); }

.search-product-hero-v2-text {
  /* max-widthは付けない：コンテナ幅いっぱいまで使い、右端で自然折返し */
}
.search-product-hero-v2-eyebrow {
  font-size: 13px;
  color: #D4A453;
  letter-spacing: 0.2em;
  margin-bottom: 14px;
  font-weight: 500;
}
.search-product-hero-v2-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: var(--fw-heading);
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0.02em;
  color: #fff;
}

@media (max-width: 720px) {
  .search-product-hero-v2 {
    padding: 28px 0 36px;
  }
  .search-product-hero-v2::before {
    width: 350px;
    height: 350px;
    right: -80px;
    top: -80px;
  }
  .search-product-hero-v2::after {
    width: 120px;
    height: 120px;
    right: 4%;
    bottom: -40px;
  }
  .search-product-hero-v2-title {
    font-size: 22px;
  }
}

/* ============================================================
   情報ブロック：白背景、2カラム（左画像＋色玉 / 右情報）
   フラットデザイン（各要素の白カード囲いなし）
   ============================================================ */

.search-product-info-block {
  background: #fff;
  padding: 56px 0;
}
.search-product-info-inner {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-side-padding);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

/* --- 左：画像＋色玉（囲いなし、背景透明、ドア中央に揃える） --- */
.search-product-info-left {
  display: flex;
  flex-direction: column;
  align-items: center;   /* 色玉をドアと中央揃え */
  gap: 20px;             /* ドアと色玉の間にスペース */
}
.search-product-info-image {
  width: 100%;
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
.search-product-info-image img {
  max-width: 100%;
  max-height: 420px;
  object-fit: contain;
  transition: opacity 0.2s;
}
.search-product-info-image svg {
  width: 60%;
  height: auto;
  max-height: 420px;
}

/* カラー名見出し（色玉の上） */
.search-product-info-color-heading {
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--color-ink);
  font-weight: 500;
  margin-bottom: 2px;
  letter-spacing: 0.05em;
}
.search-product-info-color-heading .search-product-info-color-count {
  color: var(--color-sub);
  font-size: 13px;
  margin-left: 6px;
  font-weight: 500;
}

/* 色玉帯：中央揃え */
.search-product-info-colors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  max-width: 520px;
}
.search-product-info-colors .color-chip {
  width: 32px;
  height: 32px;
  border: 2px solid rgba(0,0,0,0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  /* カラー見本画像がある場合 inline style で上書きされる */
  background-size: cover;
  background-position: center;
}
.search-product-info-colors .color-chip.is-active {
  border-color: #B8925A;
  box-shadow: 0 0 0 2px rgba(184, 146, 90, 0.3);
}

/* --- 右：バッジ → 説明 → スペック → 価格 --- */
.search-product-info-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.search-product-info-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-product-info-badge {
  display: inline-block;
  background: var(--color-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 3px;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.search-product-info-badges .search-product-info-badge:nth-child(n+2) {
  background: var(--brand-red);
}
.search-product-info-desc {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  font-weight: var(--fw-body);
  margin: 0;
}

/* スペック（ガラスサイズ・採風機能など：縦積み、ラベル上・値下・左揃え） */
.search-product-info-specs {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.search-product-info-spec-row {
  display: block;
  font-size: var(--fs-body);
  line-height: var(--lh-body-sm);
}
.search-product-info-spec-row dt {
  color: var(--color-sub);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0 0 4px 0;
  display: block;
}
.search-product-info-spec-row dd {
  color: var(--color-ink);
  font-weight: 500;
  margin: 0;
  display: block;
  text-align: left;
}
/* ガラスサイズなど：途中で改行しない */
.search-product-info-spec-glass {
  line-height: 1.55;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 価格ブロック：上に細いボーダー1本で区切り */
.search-product-info-price-block {
  background: transparent;
  border-radius: 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--color-border);
  box-shadow: none;
}

/* 適応する玄関のサイズ（緑） */
.search-product-info-fit {
  margin-bottom: 32px;      /* 18 → 32px：価格ブロックとの間にしっかりスペース */
}
.search-product-info-fit-label {
  font-size: var(--fs-body-sm);
  color: var(--color-success);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 6px;       /* 8 → 6px */
}
.search-product-info-fit-sizes {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;                 /* 6 → 2px：行間を詰める */
}
.search-product-info-fit-sizes > div {
  display: flex;
  align-items: baseline;
  gap: 4px;                 /* 10 → 4px：ラベルと数値を近く */
  white-space: nowrap;
  line-height: 1.15;        /* 行自体の高さも抑える */
}
.search-product-info-fit-sizes dt {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--color-success);
  min-width: 40px;          /* 50 → 40 */
  margin: 0;
}
.search-product-info-fit-sizes dd {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.15;        /* 1.2 → 1.15：行間さらに詰め */
  letter-spacing: 0.01em;
  font-feature-settings: "tnum";
}
.search-product-info-fit-sizes .unit {
  font-size: 15px;
  margin-left: 3px;
  font-weight: 500;
}

.search-product-info-price-label {
  font-size: var(--fs-body);         /* 14 → 18px（本文と同じ） */
  color: var(--color-ink);           /* サブグレー → 黒 */
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  font-weight: 600;
}
/* 価格本体：見積もり詳細(.details-price-special .price-num)と同じフォント体系、赤 */
.search-product-info-price {
  font-family: inherit;
  font-size: 42px;                    /* 34 → 42px（もう少し大きく） */
  font-weight: 700;
  color: var(--brand-red);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.search-product-info-price small {
  font-size: 22px;                    /* 20 → 22px */
  margin-left: 4px;
  color: var(--brand-red);
  font-weight: 500;
  font-family: inherit;
}
/* 1回目の現地調査時 割引案内 */
.search-product-info-price-inspection {
  margin-top: 14px;
  font-size: var(--fs-body-sm);
  color: var(--brand-red);            /* 全体を赤に */
  font-weight: 600;
  line-height: 1.6;
}
/* 注釈リスト（2行、黒で大きめ） */
.search-product-info-price-notes {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.search-product-info-price-notes li {
  font-size: var(--fs-body-sm);      /* 13 → 16px（大きく） */
  color: var(--color-ink);           /* サブグレー → 黒 */
  line-height: 1.7;
  padding-left: 1em;
  text-indent: -1em;
  font-weight: 500;
}

/* --- タイトル改行防止 --- */
.search-product-hero-v2-title-name {
  display: inline;
}
.search-product-hero-v2-title-type {
  display: inline-block;
  font-size: 0.58em;
  font-weight: 500;
  color: #C8BFA8;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* スマホ：1カラム縦積み */
@media (max-width: 860px) {
  .search-product-info-block {
    padding: 36px 0;
  }
  .search-product-info-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 720px) {
  .search-product-info-image {
    min-height: 320px;
  }
  .search-product-info-image img {
    max-height: 320px;
  }
  .search-product-info-price {
    font-size: 32px;           /* 28 → 32px */
  }
  .search-product-info-price small {
    font-size: 18px;           /* 16 → 18px */
  }
  .search-product-info-fit-sizes dd {
    font-size: 22px;
  }
  /* スマホでもタイトル＋（タイプ）は改行しない（行内で折り返しOK） */
  .search-product-hero-v2-title-type {
    font-size: 0.52em;
  }
}


/* ============================================================
   /search/ ヒーロー：リード文改行制御・特典（stats位置・白系）(v5.8.25)
   ============================================================ */

/* PCは改行あり、スマホは改行なし */
.search-hero-br-pc { display: inline; }
@media (max-width: 720px) {
  .search-hero-br-pc { display: none; }
}

/* 特典ブロック（旧statsの位置・スタイルに合わせた白系） */
.search-hero-stats-benefits {
  gap: 14px;
  flex-direction: column;
  max-width: 720px;
}
.search-hero-benefit-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-hero-benefit-item::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D4A453;
  flex-shrink: 0;
}
.search-hero-benefit-text {
  color: rgba(255,255,255,0.9);
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.search-hero-benefit-text strong {
  color: #D4A453;
  font-weight: 700;
}
@media (max-width: 720px) {
  .search-hero-benefit-text { font-size: 15px; }
}


/* ============================================================
   商品詳細：サイズバリエーションUI（v5.8.26）
   ============================================================ */

/* ラッパー */
.size-variants-wrapper {
  position: relative;
  background: #F5F5F3;                    /* 薄いグレー（元: グリーン背景） */
  border: 1px solid #E5E5E0;
  border-radius: 10px;
  padding: 16px 14px 14px;
  margin-bottom: 12px;
}

/* スイッチャーインジケーター（上部の「1/4」＋矢印） */
.size-variants-indicator {
  display: flex;
  align-items: center;                    /* 縦方向完全中央揃え */
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--color-success);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;                         /* 親のline-heightも固定 */
}
.size-variants-indicator button {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--color-success);
  background: #fff;
  color: var(--color-success);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  font-family: inherit;
  font-size: 0;                           /* 子SVG以外のテキストメトリクスを無効化 */
  line-height: 1;
  flex-shrink: 0;
}
.size-variants-indicator button svg {
  display: block;                         /* ベースライン問題を排除 */
  width: 14px;
  height: 14px;
}
.size-variants-indicator button:hover {
  background: var(--color-success);
  color: #fff;
}
.size-variants-indicator button:hover svg {
  stroke: #fff;
}
.size-variants-current,
.size-variants-total {
  font-size: 14px;
  color: var(--color-success);
  font-weight: 700;
  display: inline-block;
  line-height: 1;
  min-width: 1.4em;
}
.size-variants-current { text-align: right; }
.size-variants-total   { text-align: left; }
.size-variants-indicator .slash {
  color: var(--color-success);
  font-weight: 500;
  opacity: 0.7;
}

/* バリエーション1件 */
.size-variants-track {
  touch-action: pan-y;  /* スマホで水平スワイプを取れるように */
}
.size-variant[hidden] { display: none; }

/* 適応する玄関サイズ */
.size-variant-fit-label {
  font-size: 12px;
  color: var(--color-success);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  text-align: center;
}
.size-variant-fit-sizes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 14px;
  padding: 0;
}
.size-variant-fit-sizes > div {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;   /* 幅/高さラベルと数値のスペースを詰める */
  white-space: nowrap;  /* 折り返し禁止 */
}
.size-variant-fit-sizes dt {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-success);
  min-width: 26px;   /* 32px → 26px に縮めて余白削減 */
  text-align: right;
}
.size-variant-fit-sizes dd {
  margin: 0;
  font-size: 20px;             /* 16px → 20px（アクセシビリティ：コアターゲット40〜60歳向けに） */
  font-weight: 700;
  color: var(--color-success);
  line-height: 1.3;
  font-feature-settings: "tnum";  /* 等幅数字 */
  letter-spacing: 0.01em;
}
.size-variant-fit-sizes .unit {
  font-size: 13px;
  margin-left: 2px;
  font-weight: 500;
}

/* 価格エリア（/estimate/list/ の door-card-price と同じフォントに統一） */
.size-variant-price-area {
  background: #fff;
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
  margin-bottom: 12px;
}
.size-variant-price-label {
  font-size: 13px;                 /* 11px → 13px（「工事費込み」を読みやすく） */
  color: var(--color-sub);
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.size-variant-price-amount {
  font-size: 28px;                       /* list側 price-num と同じ */
  font-weight: 700;
  color: var(--brand-red);
  font-family: inherit;                  /* 見積もり一覧と同じシステムフォント（Zen Kaku等） */
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.size-variant-price-amount small {
  font-size: 14px;                 /* 12px → 14px */
  font-weight: 500;
  color: var(--color-ink);
  margin-left: 2px;
  font-family: inherit;
}
.size-variant-price-sub {
  font-size: 13px;                 /* 11px → 13px（コアターゲット視認性） */
  color: var(--color-sub);
  margin-top: 4px;
}

/* スマホ：さらに数値を大きく、コアターゲット（40〜60歳）視認性優先 */
@media (max-width: 720px) {
  .size-variant-fit-sizes dt {
    font-size: 14px;
    min-width: 28px;
  }
  .size-variant-fit-sizes dd {
    font-size: 22px;          /* スマホでは PC より少しさらに大きく */
  }
  .size-variant-fit-sizes .unit {
    font-size: 14px;
  }
  .size-variant-fit-sizes > div {
    gap: 6px;                 /* スマホも余白詰め */
  }
  .size-variant-price-amount {
    font-size: 30px;          /* スマホは少し大きめ */
  }
}

/* 「お見積もり詳細 / 現地調査依頼」CTA */
.size-variant-cta {
  display: flex;
  flex-direction: column;   /* 2行に */
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--brand-red);  /* 赤背景 */
  color: #fff;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
  letter-spacing: 0.02em;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(195, 26, 35, 0.25);
}
.size-variant-cta:hover {
  background: #a71e25;   /* ホバー時は少し暗く */
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(195, 26, 35, 0.35);
}
.size-variant-cta-line1 {
  font-size: 13px;
  opacity: 0.92;
}
.size-variant-cta-line2 {
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.size-variant-cta .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.size-variant-cta:hover .arrow {
  transform: translateX(3px);
}

/* ============================================================
   商品詳細：玄関のサイズの測り方セクション（v5.8.26）
   ============================================================ */
.search-size-measure-section {
  margin-top: 60px;
  margin-bottom: 100px;   /* 次の「このシリーズの特徴」セクションと100px空ける */
  padding-top: 50px;
  border-top: 1px solid var(--color-border);
}
.search-size-measure-section .lead {
  color: var(--color-ink);
  font-size: var(--fs-body-sm);   /* 15px → 16px */
  line-height: var(--lh-body-sm); /* 1.9 */
  font-weight: var(--fw-body);    /* 500 */
  margin-bottom: 28px;
}
.search-size-measure-section .text-red {
  color: var(--brand-red);
  font-weight: 700;
}
.search-size-measure-section .search-size-measure-types {
  margin-bottom: 0;   /* 末尾はセクション自体のmargin-bottomに任せる */
}
.search-size-measure-note {
  font-size: 13px;
  color: var(--color-sub);
  line-height: 1.8;
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-card);
  border-radius: 8px;
}


/* ============================================================
   キーワード検索フォーム（v5.9.0）
   ============================================================ */

.keyword-search-form {
  /* セクション間隔は container の padding で統一管理するため margin-bottom は 0 */
  margin-bottom: 0;
}
.keyword-search-input-wrap {
  display: flex;
  gap: 10px;
  max-width: 720px;
}
.keyword-search-input {
  flex: 1;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 16px;
  font-size: var(--fs-input, 16px);
  border: 2px solid #E0DDD6;
  border-radius: 8px;
  background: #fff;
  color: var(--color-ink);
  outline: none;
  transition: border-color 0.15s;
  /* iOS Safari/Chrome は input[type="search"] にブラウザ独自の高さ・
     パディングを強制するため appearance を解除 */
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1.4;
}
.keyword-search-input:focus {
  border-color: #B8925A;
}
.keyword-search-input::placeholder {
  color: #B5B0A8;
}
.keyword-search-submit {
  height: 52px;
  box-sizing: border-box;
  padding: 0 28px;
  font-size: var(--fs-btn, 16px);
  font-weight: 600;
  letter-spacing: 0.05em;
  background: #1A1A1A;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  line-height: 1;
}
.keyword-search-submit:hover {
  background: #333;
}
.keyword-search-submit:active {
  transform: translateY(1px);
}

@media (max-width: 720px) {
  .keyword-search-input-wrap {
    flex-direction: column;
    gap: 12px;
  }
  /* 入力欄とボタンを同じ高さで揃える ＆ ブラウザ独自スタイルを完全に上書き */
  .keyword-search-form .keyword-search-input,
  .keyword-search-form .keyword-search-submit {
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    box-sizing: border-box !important;
    border-radius: 14px !important;
    font-size: 18px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }
  .keyword-search-form .keyword-search-input {
    padding: 0 22px !important;
    line-height: 1.4 !important;
  }
  .keyword-search-form .keyword-search-input::placeholder {
    font-size: 16px;
  }
  .keyword-search-form .keyword-search-submit {
    padding: 0 32px !important;
    line-height: 1 !important;
  }
}

/* 検索結果ページのヒット件数・キーワード表示 */
.keyword-search-result-meta {
  margin: 8px 0 24px;
  color: var(--color-sub);
  font-size: 15px;
  line-height: 1.7;
}
.keyword-search-result-meta strong {
  color: var(--color-ink);
  font-weight: 600;
}
.keyword-search-no-result {
  background: #FAF8F4;
  border: 1px solid #EAE5DA;
  border-radius: 10px;
  padding: 32px 24px;
  text-align: center;
  margin: 8px 0 32px;
}
.keyword-search-no-result-text {
  font-size: var(--fs-body, 16px);
  color: var(--color-ink);
  margin: 0 0 8px;
  line-height: 1.7;
}
.keyword-search-no-result-sub {
  font-size: 14px;
  color: var(--color-sub);
  margin: 0;
}


/* ============================================================
   保証について（v5.9.3）
   商品詳細ページ：3カラムの保証カード
   ============================================================ */

.search-warranty-lead {
  font-size: var(--fs-body, 16px);
  line-height: 1.8;
  color: var(--color-ink);
  margin: 0 0 24px;
}

.search-warranty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 18px;
}

.search-warranty-card {
  background: var(--bg-card, #FAF8F4);
  border: 1px solid #EAE5DA;
  border-radius: 12px;
  padding: 28px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* 五樹ハウステック施工保証はアクセントを付ける */
.search-warranty-card-highlight {
  background: #fff;
  border-color: #B8925A;
  box-shadow: 0 2px 12px rgba(184, 146, 90, 0.12);
}

.search-warranty-card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.6;
  letter-spacing: 0.02em;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-warranty-card-period {
  font-size: 48px;
  font-weight: 700;
  color: var(--brand-red, #C8102E);
  line-height: 1;
  letter-spacing: 0.02em;
}
.search-warranty-card-period .unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-ink);
  margin-left: 4px;
  letter-spacing: 0.05em;
}

.search-warranty-card-note {
  font-size: 13px;
  color: var(--color-sub, #666);
  line-height: 1.6;
}

.search-warranty-footnote {
  font-size: 13px;
  color: var(--color-sub, #666);
  line-height: 1.8;
  margin: 14px 0 0;
}

@media (max-width: 720px) {
  .search-warranty-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .search-warranty-card {
    padding: 22px 18px;
  }
  .search-warranty-card-label {
    font-size: 15px;
    min-height: 0;
  }
  .search-warranty-card-period {
    font-size: 42px;
  }
  .search-warranty-card-period .unit {
    font-size: 17px;
  }
  .search-warranty-footnote {
    font-size: 13px;
  }
}


/* ============================================================
   /search/ セクション見出し・イントロのマージン統一（v5.9.5）
   - .h2 はブラウザデフォルト依存だったので明示
   - 説明文は .search-section-intro クラスで統一管理
   ============================================================ */

/* セクション直下の .h2 は上余白0（containerのpaddingで管理） */
.search-container > .h2,
.search-container > section > .h2,
.search-container > .estimate-list-filter-section + .h2 {
  margin-top: 0;
}

/* .h2 の見出し→説明文の間隔＋赤い縦線（汎用h2と統一感） */
.search-container .h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading, 700);
  line-height: 1.4;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  padding-left: 18px;
  border-left: 6px solid var(--brand-red);
}

/* セクション内 イントロ説明文の共通スタイル */
.search-section-intro {
  color: var(--color-sub);
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 32px;
}

@media (max-width: 720px) {
  .search-container .h2 {
    margin-bottom: 10px;
    padding-left: 14px;
    border-left-width: 5px;
  }
  .search-section-intro {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 24px;
  }
}


/* ============================================================
   施工対応エリア（製品詳細・v6.1.52〜）
   ============================================================ */
.search-area-lead {
  font-size: 16px;
  line-height: 1.9;
  margin: 0 0 20px;
}
.search-area-block {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}
.search-area-group {
  flex: 1 1 280px;
  background: var(--bg-soft, #F5F2EC);
  border-radius: 10px;
  padding: 18px 20px;
}
.search-area-group-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-red, #E70012);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border, #E0DACE);
}
.search-area-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.search-area-pref {
  display: inline-block;
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-border, #E0DACE);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 15px;
  font-weight: 500;
}
.search-area-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text, #555);
  margin: 0;
}
@media (max-width: 720px) {
  .search-area-block { gap: 14px; }
  .search-area-group { flex: 1 1 100%; padding: 14px 16px; }
  .search-area-pref { font-size: 14px; padding: 5px 10px; }
}


/* ============================================================
   施工対応エリア（商品詳細メイン最下部・v6.1.57〜）
   ============================================================ */
.search-product-area {
  background: var(--bg-card, #fff);
  padding: 0 var(--content-side-padding, 24px) 76px;
}
.search-product-area-inner {
  max-width: var(--content-max-width, 1200px);
  margin: 0 auto;
  background: var(--bg-soft, #F5F2EC);
  border: 1px solid var(--color-border, #E0DACE);
  border-radius: 12px;
  padding: 24px 28px;
}
.search-product-area-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--brand-red, #E70012);
  margin-bottom: 14px;
}
.search-product-area-prefs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.search-product-area-pref {
  display: inline-block;
  background: var(--bg-card, #fff);
  border: 1px solid var(--color-border, #E0DACE);
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 15px;
  font-weight: 500;
}
.search-product-area-note {
  font-size: 13px;
  line-height: 1.8;
  color: var(--color-text, #555);
  margin: 0;
}

/* サイズ変更ヒントのミニチュアボタン（現地調査依頼セクションの説明文内・v6.1.61〜） */
.size-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
  margin: 0 3px;
}
.size-hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--color-success);
  background: #fff;
  color: var(--color-success);
  border-radius: 50%;
  flex-shrink: 0;
}
.size-hint-btn svg {
  display: block;
  width: 12px;
  height: 12px;
}
@media (max-width: 720px) {
  .search-product-area { padding-bottom: 60px; }
  .search-product-area-inner { padding: 18px; }
  .search-product-area-label { font-size: 16px; }
  .search-product-area-pref { font-size: 14px; padding: 5px 11px; }
}


/* ============================================================
   鉄骨系住宅への施工可否（検索トップ・商品詳細・v6.1.62〜）
   ============================================================ */
.search-steel-note {
  color: var(--brand-red, #E70012);
  font-weight: 700;
  font-size: 15px;
  margin: -22px 0 32px;
}
.search-product-steel {
  font-size: 15px;
  font-weight: 600;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 8px;
  line-height: 1.7;
}
.search-product-steel.is-ok {
  background: #eef7f0;
  color: #1d7a3a;
  border: 1px solid #bfe3ca;
}
.search-product-steel.is-ng {
  background: #fdeff0;
  color: var(--brand-red, #E70012);
  border: 1px solid #f3c9cd;
}