/* 説明文エリアの追従広告（画面幅1100px以上のみ）
   手順は /doc/広告挿入方法.md を参照。ユニットIDは rail-ad.js に記載。

   A) .bk-guide を使うページ:
      <div class="bk-guide has-rail">
        <nav class="bk-nav">…</nav>
        <div class="bk-main">…説明文…</div>
        <aside class="bk-rail" aria-label="広告"></aside>
      </div>

   B) それ以外のページ:
      <div class="rail-layout has-rail">
        <div class="bk-main">…説明文のセクション群…</div>
        <aside class="bk-rail" aria-label="広告"></aside>
      </div>
      親要素の幅が狭く本文が740px未満になるときは class に rail-breakout を足す。
*/
.bk-rail { display: none; }
/* 親がグリッドのページでも全幅を使う */
.rail-layout { grid-column: 1 / -1; }

@media (min-width: 1100px) {
  .bk-guide.has-rail,
  .rail-layout.has-rail {
    max-width: 1300px; /* 本文は画面幅に合わせて約740〜940pxに伸びる */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 20px;
  }
  /* B) 用: 中央寄せと左右の余白（.bk-guide は benri-kit.css が持っている） */
  .rail-layout.has-rail { margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px; }
  /* B') 親要素（.container など）の幅が狭いページ用: <div class="rail-layout has-rail rail-breakout">
     親の中央を基準に、画面幅（最大1300px）まで親の外へ広げる。--rail-vw は rail-ad.js がスクロールバーを除いた幅を入れる */
  .rail-layout.has-rail.rail-breakout {
    --rail-w: min(1300px, var(--rail-vw, 100vw));
    box-sizing: border-box;
    width: var(--rail-w);
    max-width: none;
    margin-left: calc(50% - var(--rail-w) / 2);
    margin-right: calc(50% - var(--rail-w) / 2);
  }

  /* ページ内ナビは2カラムにまたがらせる */
  .has-rail > .bk-nav { grid-column: 1 / -1; }
  .has-rail > .bk-main { grid-column: 1; min-width: 0; }
  /* 広告の上の余白。ページごとに変えるときは aside に style="--rail-top: 80px" */
  .has-rail > .bk-rail { grid-column: 2; display: block; padding-top: var(--rail-top, 38px); }

  /* メニューバー80px＋余白20px の位置で止まる */
  .bk-rail-sticky { position: sticky; top: 100px; width: 300px; }
  /* 既存広告の「スポンサーリンク」表記（menu.js / footer.js）と同じ見た目 */
  .has-rail .bk-rail .bk-rail-label { font-size: 0.7rem; font-weight: 400; line-height: 1.6; color: #ccc; text-align: center; margin: 0 0 5px; }
  .bk-rail-ad { display: block; width: 300px; height: 600px; }
  /* 広告が配信されなかったときは枠ごと消す */
  .bk-rail-ad[data-ad-status="unfilled"] { display: none; }
}

/* 画面が低いPCでは 300×250 にする（下部の自動広告と重ねない） */
@media (min-width: 1100px) and (max-height: 820px) {
  .bk-rail-ad { height: 250px; }
}