/* 公開ページ固有のレイアウト。ページ単位の構造はここに足していく */
.bm-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.bm-main { flex: 1; }

/* margin-inline: auto がないと 1120px 以上で左寄りになる（法務ページの
   .bm-legal には margin: 0 auto があるのに、こちらだけ抜けていた） */
.bm-prose { max-width: var(--bm-measure); margin-inline: auto; }

.bm-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bm-space-3);
}

/* 法務ページ。読むための画面なので、装飾を足さない */
.bm-legal {
  max-width: var(--bm-measure);
  margin: 0 auto;
  padding: var(--bm-space-5) var(--bm-space-3) var(--bm-space-6);
}

.bm-legal h1 { margin-bottom: var(--bm-space-4); font-size: 26px; }
.bm-legal h2 { margin: var(--bm-space-4) 0 var(--bm-space-2); font-size: 18px; }
.bm-legal h3 { font-size: 15px; }
.bm-legal p, .bm-legal li { font-size: 14px; }

.bm-legal-dl { margin: 0; font-size: 14px; }

.bm-legal-dl dt {
  padding-top: var(--bm-space-2);
  color: var(--bm-ink);
  font-weight: 700;
}

.bm-legal-dl dd {
  margin: 0 0 var(--bm-space-2);
  padding-bottom: var(--bm-space-2);
  border-bottom: 1px solid var(--bm-line);
}

@media (min-width: 768px) {
  .bm-section { padding: var(--bm-space-6) 0; }
}

@media (min-width: 1120px) {
  /* 左右だけを指定する。ショートハンド（padding: 0 X）で書くと縦 padding も 0 に倒れ、
     .bm-header-bar（.bm-container を併記している）の上下 padding を握り潰す。
     public.css は components.css より後に読まれるため、1120px 以上でだけヘッダーの
     上下余白が消え、CTA がバーの上端と下端に密着していた（2026-08-11 修正）。 */
  .bm-container { padding-left: var(--bm-space-4); padding-right: var(--bm-space-4); }

  /* 読み物ページは本文幅を保つ。1120px いっぱいに伸ばすと1行が長くなりすぎる */
  .bm-prose { max-width: var(--bm-measure); }

  .bm-legal { padding: var(--bm-space-6) var(--bm-space-4); }
  .bm-form { max-width: 560px; }
}

/* HOME の期限付きのお知らせ（App\Service\TopNotice。2027-04-30 を過ぎると帯ごと出ない）。
   ヒーローの直下に1行。ラベルはマゼンタだと淡色の面で文字のコントラストが足りないので、色は左の線だけに使う */
.bm-top-notice-band { padding-bottom: var(--bm-space-3); background: var(--bm-surface); }

.bm-top-notice {
  margin: 0;
  padding: var(--bm-space-2) var(--bm-space-3);
  border: 1px solid var(--bm-line);
  border-left: 3px solid var(--bm-magenta);
  border-radius: var(--bm-radius-sm);
  background: var(--bm-surface-1);
  color: var(--bm-body);
  font-size: 13.5px;
  line-height: 1.7;
}

.bm-top-notice-label { margin-right: .75em; color: var(--bm-ink); font-weight: 700; }

.bm-top-notice a {
  color: var(--bm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.bm-top-notice a:hover { color: var(--bm-purple); }