/*
 * エリア/都道府県ページ(taxonomy-area.php)専用CSS。
 * is_tax('area')のときだけfunctions.phpのwp_enqueue_scriptsで読み込む。
 * デザインはarea.html/pref.html(Claude Designの見本)を再現したもの。
 */
.bn-area-standalone { background:#ffffff; }
.bn-area-standalone,
.bn-area-standalone * { box-sizing:border-box; }
.bn-area-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-area-standalone a」ではなく素の「a」にしている。
   スコープを付けると詳細度が上がり、.bn-cta-btn/.bn-rank-ctaなど
   単一クラスのボタン系セレクタ(詳細度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-breadcrumb { padding-top:16px; font-size:12px; color:#6B7673; }
.bn-section { padding:36px 0 0; }

.bn-h2 { font-size:22px; font-weight:900; margin:0 0 6px; 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:0 0 18px; color:#6B7673; font-size:13px; padding-left:16px; }

/* ページ見出し(エリアヒーロー) */
.bn-hero {
  display:flex; align-items:center; gap:28px; background:#F2F7F3; border-radius:20px; padding:28px 30px;
}
.bn-h1 { font-size:34px; font-weight:900; margin:0 0 12px; line-height:1.4; }
.bn-hero-lead { margin:0 0 16px; color:#3C4741; font-size:15px; line-height:1.9; }
.bn-hero-badges { display:flex; gap:10px; flex-wrap:wrap; font-size:13px; }
.bn-hero-badge { background:#fff; color:#1F5134; font-weight:700; padding:7px 14px; border-radius:999px; }

/* 市区町村タイル一覧(都道府県ページ) */
.bn-city-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.bn-city-tile {
  border:1px solid #E3E9E4; border-radius:14px; padding:16px 18px; display:flex;
  align-items:center; justify-content:space-between; gap:8px; background:#fff;
}
.bn-city-tile:hover { border-color:#1F5134; text-decoration:none; background:#F8FBF9; }
.bn-city-tile-name { font-weight:700; font-size:15px; color:#202723; margin:0; }
.bn-city-tile-count { font-size:12px; color:#6B7673; white-space:nowrap; }

/* ランキングカード（.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-grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
/* 角丸6px＝2026-08-29れのぼ指示。16pxだと丸すぎて野暮ったかったため。
   ※このカードはエリアページと作業内容ページ(/service/)で使う。 */
.bn-shop-card { border:1px solid #E3E9E4; border-radius:6px; padding:20px; display:flex; flex-direction:column; gap:14px; }
.bn-shop-card-name { font-size:18px; font-weight:900; margin:0; }
.bn-shop-card-price { display:flex; flex-direction:column; gap:2px; }
.bn-shop-card-price-label { font-size:12px; color:#6B7673; }
.bn-shop-card-price-num { font-size:15px; font-weight:700; color:#1F5134; line-height:1.5; overflow-wrap:break-word; }
.bn-shop-card-price-unit { font-size:12px; color:#6B7673; }
.bn-shop-card-btn {
  margin-top:auto; text-align:center; border:2px solid #1F5134; color:#1F5134;
  padding:11px; border-radius:11px; font-weight:900; font-size:14px;
}
.bn-shop-card-btn:hover { text-decoration:none; background:#F2F7F3; }
/* 公式サイトへのリンク（有料掲載の店舗だけ・2026-08-30）。
   「詳しく見る」の下。出ない店舗では要素ごと出力していないので余白は生まれない。 */
.bn-shop-card-official {
  text-align:center; border:1px solid #1F5134; color:#1F5134;
  padding:10px; border-radius:6px; font-weight:700; font-size:13px;
}
.bn-shop-card-official:hover { text-decoration:none; background:#F2F7F3; color:#1F5134; }
/* ボタン2つを横に並べる箱（2026-08-30 れのぼ指示）。
   ランキングカードと同じ「詳しく見る」→「公式サイトを見る」の並び。
   ・このカードの中身の幅は323px（カード365px − 内側余白20px×2 − 枠線1px×2）。
     2つを等分すると1つ157.5px。文字が入るように、この箱の中だけ左右の余白と
     文字サイズを詰めている（縦の余白は触らない＝ボタンとカードの高さを変えないため）。
   ・flex-wrap:wrap は保険。将来もっと長い文言になって157.5pxに入らなくなったら、
     潰れて読めなくなるのではなく2段に折り返す。
   ・margin-top:auto はボタン本体からこの箱へ移した。カードの高さがふぞろいでも
     ボタンの位置が下端でそろう、という今までの挙動をそのまま引き継ぐため。
   ・公式サイトのリンクが無い店舗では中身が1つだけになり、flex:1で横いっぱいに
     広がる＝横並びにする前とまったく同じ見え方になる。 */
.bn-shop-card-btns {
  margin-top:auto; display:flex; flex-direction:row; align-items:stretch; gap:8px; flex-wrap:wrap;
}
.bn-shop-card-btns > a {
  flex:1 1 0; margin-top:0;
  display:flex; align-items:center; justify-content:center;
}
.bn-shop-card-btns > .bn-shop-card-btn { padding-left:6px; padding-right:6px; font-size:13.5px; }
/* 2つ並んだときに形が食い違わないよう、角丸だけ「詳しく見る」に合わせる(6px -> 11px)。
   枠線は1pxのまま＝主(2px)と従(1px)の差でどちらが主役かが分かるようにしている。 */
.bn-shop-card-btns > .bn-shop-card-official { padding-left:6px; padding-right:6px; font-size:12.5px; border-radius:11px; }

/* 最終CTA */
.bn-cta-box { border:2px solid #1F5134; border-radius:20px; padding:34px 28px; text-align:center; }
.bn-cta-title { font-size:25px; 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:18px 52px; border-radius:14px;
  font-weight:900; font-size:19px; 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) {
  /* 2026-08-30 スマホ整備：ここも実測して横並びにそろえた。
     カードの中身の幅は幅375pxで277px（343 − 枠線1px×2 − 内側余白20px×2 − 余白）。
     2つに割ると1つ133px。「公式サイトを見る」は左右の余白を6pxにすると
     必要な幅が124pxで収まる。ランキングカードと同じ見え方になる。
     ⛔ 公式サイトのリンクが無い店舗は中身が1つだけ＝今までどおり横いっぱい。 */
  .bn-shop-card-btns { flex-direction:row !important; gap:8px !important; }
  .bn-shop-card-btns > .bn-shop-card-btn { padding-left:6px !important; padding-right:6px !important; font-size:14px !important; white-space:nowrap !important; }
  .bn-shop-card-btns > .bn-shop-card-official { padding-left:6px !important; padding-right:6px !important; font-size:13px !important; white-space:nowrap !important; }
  .bn-city-grid { grid-template-columns:repeat(2,1fr) !important; }
  .bn-grid3 { grid-template-columns:1fr !important; }
  .bn-container { padding-left:16px !important; padding-right:16px !important; }
  .bn-hero { flex-direction:column !important; align-items:flex-start !important; }
  .bn-h1 { font-size:26px !important; }
}