/*
 * トップページ(front-page.php)専用CSS。
 * is_front_page()のときだけfunctions.phpのwp_enqueue_scriptsで読み込む。
 * デザインはtop.html(Claude Designの見本)を再現したもの。
 * ヘッダー・フッターのCSSはsite-chrome.css側にあるので、ここには持たない。
 */
.bn-front-standalone { background:#ffffff; }
.bn-front-standalone,
.bn-front-standalone * { box-sizing:border-box; }
.bn-front-standalone {
  color:#202723; font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
/* ※ここは意図的に「.bn-front-standalone a」ではなく素の「a」にしている。
   スコープを付けると詳細度が上がり、.bn-cta-btn/.bn-rank-cta/.bn-pref-tileなど
   単一クラスのボタン・タイル系セレクタ(詳細度0,1,0)より強くなってしまい、
   ボタンの文字色(白)がこの緑色で上書きされて見えなくなる不具合が出るため。 */
a { color:#1F5134; text-decoration:none; }
a:hover { color:#2E7A4D; text-decoration:underline; }

.bn-container { max-width:1160px; margin:0 auto; padding:0 24px; }
.bn-section { padding:44px 0 0; }

.bn-h2 { font-size:22px; font-weight:900; margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.bn-h2-bar { width:6px; height:22px; background:#1F5134; border-radius:3px; display:inline-block; }
.bn-section-note { margin:-10px 0 18px; color:#6B7673; font-size:13px; }

/* ヒーロー */
.bn-hero-inner {
  display:flex; align-items:center; gap:32px; background:#F2F7F3; border-radius:22px; padding:32px 34px; flex-wrap:wrap;
}
.bn-hero-badge {
  display:inline-block; background:#fff; color:#1F5134; font-weight:700; font-size:12px;
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
/* このアイコンはスマホ専用の小さい木のイラスト。PCでは右側の大きいbn-hero-imgのみ表示する */
.bn-hero-title-icon { display:none; }
.hero-catch-sub-row { }
.hero-catch { font-size:38px; font-weight:900; margin:0 0 14px; line-height:1.45; }
/* スマホ専用の改行。PCでは非表示(=改行なし)にし、mobile用メディアクエリ側でinlineにする */
.hero-catch-sp-br { display:none; }
.bn-hero-lead { margin:0 0 22px; color:#3C4741; font-size:15px; line-height:1.9; }
.bn-search-box { background:#fff; border-radius:16px; padding:18px; box-shadow:0 4px 18px rgba(31,81,52,0.08); }
.bn-search-title { font-weight:700; font-size:14px; margin-bottom:12px; }
.bn-search-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bn-search-row select {
  flex:1 1 180px; min-width:0; padding:14px; border:1px solid #CFDED4; border-radius:11px;
  font-size:15px; color:#202723; background:#fff; font-family:inherit;
}
.bn-search-btn {
  flex:0 0 auto; text-align:center; background:#1F5134; color:#fff; padding:15px 30px;
  border-radius:11px; font-weight:900; font-size:16px; border:none; cursor:pointer; font-family:inherit;
}
.bn-search-btn:hover { background:#26653F; }
.bn-hero-img { width:260px; height:auto; max-height:220px; object-fit:contain; flex:0 0 auto; margin:0 auto; }

/* 使い方3ステップ */
.bn-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bn-step { border:1px solid #E3E9E4; border-radius:16px; padding:24px; text-align:center; }
.bn-step-num { font-size:13px; font-weight:900; color:#1F5134; letter-spacing:0.1em; margin-bottom:10px; }
.bn-step-icon { width:64px; height:64px; object-fit:contain; margin:0 auto 12px; }
.bn-step-title { font-weight:900; font-size:17px; margin-bottom:8px; }
.bn-step-text { margin:0; font-size:14px; line-height:1.9; color:#54605A; }

/* 人気のエリア */
.bn-area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bn-area-card { border:1px solid #E3E9E4; border-radius:16px; overflow:hidden; display:block; }
.bn-area-card:hover { text-decoration:none; border-color:#1F5134; }
.bn-area-card-photo { width:100%; height:100px; object-fit:cover; background:#F2F7F3; }
.bn-area-card-body { padding:14px 16px; }
.bn-area-card-name { font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:17px; color:#202723; margin:0 0 4px; }
.bn-area-card-count { font-size:12px; color:#6B7673; }

/* ランキングカード（.bn-rank-*）のCSSは parts.css に移した（2026-08-29）。
   トップページ(front.css)とエリアページ(area.css)に同じ塊が二重にあり、
   片方だけ直したせいで見た目がズレる不具合が起きたため。
   ⛔ ランキングカードを直すときは parts.css を見ること。
   .bn-pills / .bn-pill は他ページ(shop.css)にも別定義があるのでここに残す。 */
.bn-pills { display:flex; flex-wrap:wrap; gap:8px; }
.bn-pill { border:1px solid #CFDED4; color:#1F5134; font-size:13px; padding:6px 12px; border-radius:999px; }

/* 都道府県から探す */
.bn-pref-region { margin-bottom:22px; }
.bn-pref-region:last-child { margin-bottom:0; }
.bn-pref-region-title {
  font-weight:900; font-size:14px; color:#1F5134; margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #E3E9E4;
}
.bn-pref-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.bn-pref-tile {
  border:1px solid #E3E9E4; border-radius:10px; padding:11px 8px; text-align:center; font-size:14px;
  font-weight:500; color:#202723;
}
.bn-pref-tile:hover { text-decoration:none; border-color:#1F5134; background:#F8FBF9; }

/* 選ばれる理由 */
.bn-reasons { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.bn-reason { background:#F2F7F3; border-radius:16px; padding:24px; }
.bn-reason-icon { width:44px; height:44px; object-fit:contain; margin-bottom:12px; }
.bn-reason-title { font-weight:900; font-size:17px; margin-bottom:8px; }
.bn-reason-text { margin:0; font-size:14px; line-height:1.9; color:#3C4741; }

/* 最終CTA */
.bn-cta-box { border:2px solid #1F5134; border-radius:20px; padding:36px 28px; text-align:center; }
.bn-cta-title { font-size:27px; font-weight:900; margin:0 0 8px; }
.bn-cta-lead { margin:0 0 24px; color:#54605A; font-size:14px; line-height:1.9; }
.bn-cta-btn {
  display:inline-block; background:#1F5134; color:#fff; padding:19px 54px; border-radius:14px;
  font-weight:900; font-size:20px; box-shadow:0 8px 22px rgba(31,81,52,0.25);
}
.bn-cta-btn:hover { color:#fff; text-decoration:none; background:#26653F; }

.bn-empty { border:1px solid #E3E9E4; border-radius:16px; padding:40px 24px; text-align:center; color:#6B7673; }

@media (max-width:860px) {
  .bn-steps { grid-template-columns:1fr !important; }
  .bn-area-grid { grid-template-columns:repeat(2,1fr) !important; }
  .bn-pref-grid { grid-template-columns:repeat(3,1fr) !important; }
  .bn-reasons { grid-template-columns:1fr !important; }
  .bn-container { padding-left:16px !important; padding-right:16px !important; }
  /* 見出しの存在感を優先。文字は大きめ(24px)のまま3行区切りにし、
     1行目は満幅、2〜3行目は文字が短く空く分にアイコンを差し込む */
  .hero-catch { font-size:24px !important; }
  .bn-hero-inner { flex-direction:column !important; align-items:stretch !important; }
  .bn-hero-img { display:none !important; }
  .hero-catch-sub-row { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:10px !important; }
  .bn-hero-title-icon {
    display:block !important; width:40px !important; height:40px !important; flex:0 0 40px !important;
    object-fit:contain !important;
  }
  .hero-catch-sp-br { display:inline; }
  /* 「まとめて見積りをくらべる」(12文字)を1行に収める */
  .bn-cta-title { font-size:20px !important; }
  .bn-search-row { flex-direction:column !important; align-items:stretch !important; }
  /* flex:1 1 180pxのまま縦並びにすると180pxが「高さ」として効いて激太りするため上書き */
  .bn-search-row select { flex:0 0 auto !important; width:100% !important; padding:12px 14px !important; }
}

/* トップページの「エリアから探す」の選択欄も16pxにする（2026-08-30 れのぼ指示）。
   理由＝お問い合わせ・見積りの入力欄と同じ。iOS は16px未満の入力欄をタップすると
   画面を自動で拡大し、元に戻らない。ここはサイトに入って最初に触る場所なので、
   ここで拡大されると以降ずっとはみ出した画面のままになる。
   ⛔ セレクトは width:100%（スマホ）なので、文字を1px大きくしても
      幅は変わらない＝折り返しやレイアウトの崩れは起きない。
   ⛔ PC（マウス・861px以上）には当てない＝PCの見た目は変えない。 */
@media (max-width:860px), (pointer: coarse) {
  .bn-search-row select { font-size:16px !important; }
}