/*
 * ヘッダー・フッター(header.php / footer.php)専用CSS。
 * 全ページ共通で常時読み込む(functions.phpのwp_enqueue_scriptsで条件分岐なし)。
 * ページ本文側のCSS(shop.css / area.css / front.css)とは別ファイルにして、
 * どのページにも影響するCSSとページ固有CSSを分けている。
 */

.bn-site-header,
.bn-site-header * { box-sizing:border-box; }

/* 広告表記の帯（2026-08-30 れのぼ指示）。ヘッダーの緑の帯の、さらに上。
   ⛔ 目立たせすぎず、隠してもいない状態にする＝
      ・文字は12px（本文15pxより小さい）でグレー(#5A6560)。太字にしない。
      ・地色は白ではなく、ごくうすい緑グレー(#F1F5F2)。何か書いてあると分かるが、
        主張はしない。囲み線・アイコン・色文字は使わない。
      ・ファーストビューの一番上に必ず入るので、スクロールしなくても読める。
   ⛔ ヘッダー本体(.bn-site-header)とは別の要素なので、
      ロゴ・グロナビ・タグラインの配置には一切影響しない。
   左そろえの理由＝この帯の内側の幅(1160px)と左右の余白(24px)を
   ヘッダーの中身(.bn-header-inner)と同じにしてあるので、
   左そろえにするとロゴの左端と1本の線でそろう。 */
.bn-ad-notice { background:#F1F5F2; }
.bn-ad-notice-inner {
  max-width:1160px; margin:0 auto; padding:6px 24px;
  font-family:"Noto Sans JP",system-ui,sans-serif;
  font-size:12px; line-height:1.6; color:#5A6560; font-weight:400;
}
@media (max-width:768px) {
  /* スマホは画面が狭くて2行になるので、文字と余白をわずかに詰める。
     （消したり折りたたんだりはしない＝隠すことになるため） */
  .bn-ad-notice-inner { padding:5px 16px; font-size:11px; line-height:1.55; }
}

.bn-site-header { background:#1F5134; color:#fff; }
.bn-header-inner {
  max-width:1160px; margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}

.bn-logo { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
.bn-logo:hover { color:#fff; text-decoration:none; }
.bn-logo img { width:32px; height:32px; object-fit:contain; display:block; flex:0 0 auto; }
.bn-site-title {
  font-family:"Zen Kaku Gothic New","Noto Sans JP",system-ui,sans-serif;
  font-weight:900; font-size:18px; margin:0; color:#fff; line-height:1;
}

.bn-header-tagline { font-size:12px; opacity:0.8; margin-left:auto; white-space:nowrap; }

.bn-global-nav-list { display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.bn-global-nav-list a {
  color:#fff; text-decoration:none; font-size:14px; font-weight:700; opacity:0.9;
  font-family:"Noto Sans JP",system-ui,sans-serif;
}
.bn-global-nav-list a:hover { opacity:1; text-decoration:underline; }

.bn-nav-toggle { display:none; }
.bn-nav-toggle-btn { display:none; }

@media (max-width:768px) {
  .bn-header-tagline { display:none; }

  /* スマホ幅ではロゴ画像を少し小さくして、サイト名やハンバーガーと
     詰まりすぎないようにする */
  .bn-logo img { width:26px; height:26px; }

  .bn-nav-toggle-btn {
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    width:28px; height:22px; cursor:pointer; margin-left:auto; flex:0 0 auto;
  }
  .bn-nav-toggle-btn span { display:block; width:100%; height:2px; background:#fff; border-radius:1px; }

  .bn-global-nav { display:none; width:100%; order:3; }
  .bn-nav-toggle:checked ~ .bn-global-nav { display:block; }

  .bn-global-nav-list { flex-direction:column; gap:0; padding:8px 0 4px; border-top:1px solid rgba(255,255,255,0.2); margin-top:10px; }
  .bn-global-nav-list li { border-bottom:1px solid rgba(255,255,255,0.12); }
  .bn-global-nav-list a { display:block; padding:12px 4px; }
}

/* フッター */
.bn-site-footer { border-top:1px solid #E3E9E4; margin-top:0; background:#fff; }
.bn-footer-inner { max-width:1160px; margin:0 auto; padding:28px 24px; text-align:center; }
.bn-footer-nav-list {
  display:flex; justify-content:center; gap:20px; list-style:none; margin:0 0 12px; padding:0; flex-wrap:wrap;
}
.bn-footer-nav-list a {
  color:#1F5134; text-decoration:none; font-size:13px; font-weight:700;
  font-family:"Noto Sans JP",system-ui,sans-serif;
}
.bn-footer-nav-list a:hover { text-decoration:underline; }
.bn-copyright { margin:0; color:#8A948E; font-size:12px; }