@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — ヘッダーの追従
 *
 * 状態は js/header.js が .sb-header に付ける。
 *   .is-hidden      隠している（下へ読んでいる間）
 *   .is-past-hero   ヒーローを抜けた（地を明るい側へ）
 *
 * 位置は JS では触らない。全ページ position: fixed。
 * 以前は「素は absolute、越えたら .is-fixed で fixed」と切り替えていたが、
 * 記事ページの素の位置は文書の先頭なので、ヒーローへ戻った瞬間に
 * ヘッダーが画面外へ飛んで消えた。位置を動かさなければ起きない。
 *
 * ------------------------------------------------------------------
 * 役割の分け方
 *
 *   .sb-header        全幅。帯の地・ぼかし・追従のフェードを持つ
 *   .sb-header__main  中身の桁。1560px で中央に寄せるだけ
 *
 * 地とフェードを同じ要素に置くのが要点。
 * 曇りガラス（backdrop-filter）を持つ要素の「祖先」に opacity が乗ると、
 * 透過グループができてぼかしの採取元が切り替わり、
 * Chrome / Safari では遷移の入り口と出口で描画が飛ぶ。
 *
 * 地を __main に置くと、今度は帯が 1560px で切れて全幅にならない。
 * 帯は外側、桁は内側。
 *
 * will-change は付けない。常時レイヤ化されると、
 * 上の採取元の切り替えを固定してしまう。
 * ------------------------------------------------------------------
 *
 * !important 使用禁止
 * ============================================================ */

/* ============================================================
   帯

   画面の上端に全幅で敷く。枠線は引かない。

   浮遊バー（上下左右に余白を取り、枠線で囲む）も試したが、
   輪郭が出ると「別の面が乗っている」ように読めて浮く。
   罫線と余白で組んできたサイトの中では、境界を作らないほうが収まる。

   地は曇りガラス。下に写真が来ても文字が来ても、
   一定の明るさに均されてメニューが読める。
   ぼかしと彩度だけを使う。屈折（SVG フィルタ）は
   Chrome で描画されず、ブラウザによって見え方が割れるため使わない。

   transition はここで一括して持つ。
   ショートハンドはプロパティごと上書きされるので、
   ページ側では .sb-header の transition を書かないこと。
   ============================================================ */
.sb-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  border: 0;
  margin: 0;
  border-radius: 0;

  background-color: rgba(241, 238, 231, .72);
  backdrop-filter: saturate(1.25) blur(20px);
  -webkit-backdrop-filter: saturate(1.25) blur(20px);
  transition:
    background-color .45s var(--sb-ease),
    backdrop-filter .45s var(--sb-ease),
    -webkit-backdrop-filter .45s var(--sb-ease),
    transform .32s var(--sb-ease),
    opacity .32s var(--sb-ease);
}

/* 管理バーのぶんだけ下げる。ログイン中だけ body に .admin-bar が付く。

   以前は素の位置が absolute で、WordPress が html に入れる
   margin-top ぶん一緒に下がっていた。fixed は margin-top を見ないので、
   ここで自前に下げないとロゴが管理バーの下へ潜る。

   高さは幅で変わり、600px 以下では管理バー自体が固定をやめる。
   WordPress 本体と同じ3段で合わせる。 */
body.admin-bar .sb-header { inset-block-start: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .sb-header { inset-block-start: 46px; }
}
/* ⚠ 600px 以下は 0 では足りない。

   ここで管理バーは固定をやめ、文書と一緒に流れて上へ抜けていく。
   ヘッダーは固定のままなので、天にいる間だけ管理バーと重なる。
   実測: ログイン中に一覧の先頭を開くと、ロゴが管理バーに食われる。

   「天からどれだけ下げるか」は巻き量で変わるので CSS では決められない。
   header.js が --sb-adminbar-shift に max(0, 管理バーの高さ - 巻き量) を入れる。
   JS が動かない環境では 0 に落ちる（＝いまと同じ挙動）。 */
@media screen and (max-width: 600px) {
  body.admin-bar .sb-header { inset-block-start: var(--sb-adminbar-shift, 0px); }
}

/* 下へ読んでいる間は隠す。薄れながら少し上へ引く。

   visibility は使わない。ショートハンドで遅延を書いても、
   別の場所の transition-delay に上書きされて即座に切り替わり、
   opacity が薄れる前に消えてしまう。

   opacity: 0 の要素はクリックを拾うので、透明なあいだは触れなくする。 */
html .sb-header.is-hidden {
  transform: translateY(-.75rem);
  opacity: 0;
  pointer-events: none;
}

/* ヒーローの上では帯を敷かない。完全に透明にする。

   ヒーローは写真だけで見せる場所で、そこに半透明の帯を重ねると
   写真の上端が濁る。

   ぼかしは none ではなく blur(0) にする。
   none との間は補間できないので、ヒーローへ戻る瞬間に
   ぼかしだけが段で切り替わる。同じ関数の並びにしておけば、
   地の色と一緒に滑らかに抜ける。

   対象は3つ。いずれもページ先頭に写真のヒーローがある。
     .home:not(.is-lit)  トップ（抜けると明るくなる）
     .sb-report   詐欺サイト情報の記事（暗いヒーロー）
     .sb-editorial     コラム・ニュース（明るいヒーロー）

   固定ページと記事一覧はヒーローが無く、本文が上端まで来るので
   既定の曇りガラスのままにする。 */
.home:not(.is-lit) .sb-header,
.sb-report .sb-header:not(.is-past-hero),
.sb-editorial .sb-header:not(.is-past-hero) {
  background-color: transparent;
  backdrop-filter: saturate(1) blur(0px);
  -webkit-backdrop-filter: saturate(1) blur(0px);
}

/* 曇りガラスが使えない環境では、単に地を敷く */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sb-header { background-color: var(--sb-paper-2); }
  .home:not(.is-lit) .sb-header,
  .sb-report .sb-header:not(.is-past-hero),
  .sb-editorial .sb-header:not(.is-past-hero) {
    background-color: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sb-header,
  .sb-hsearch,
  .sb-hsearch__input { transition: none; }
}

/* ============================================================
   骨格

   寸法・組み方は全ページ共通。トップの値に揃えてある。
   以前は home.css / scam-single.css / editorial-single.css /
   overlay-header.css の4つに同じ組みが複製されていて、
   ロゴの高さが 46px と 40px、メニューの文字が .8125rem と .875rem、
   畳む幅が 900px と 768px に割れていた。

   ここが持つのは寸法だけ。色は地の明るさで変わるので各ページが持つ。
   ============================================================ */

/* 中身の桁。帯は全幅のまま、ロゴとメニューだけを本文の幅に合わせる。

   左右の余白は全ページ共通のトークン（common.css の --sb-gutter）。
   ここだけ 3.4vw / 3.5rem だったため、1288px 幅で
   ロゴが本文の罫線より 33px 外へ出ていた。
   数値を直接書かず、必ずトークンを見ること。 */
.sb-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.15rem var(--sb-gutter);
}

/* ロゴは白と黒の2枚を重ね、透過で入れ替える。
   display の切り替えでは transition が効かず、
   地が薄れていく横でロゴだけ瞬時に切り替わって段が見える。 */
.sb-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.sb-logo__img {
  height: 46px;
  width: auto;
  display: block;
  transition: opacity .45s var(--sb-ease);
}
.sb-logo__img--black {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
}

/* 既定は白。暗いヒーローに載るページ（トップ・詐欺サイト情報）はこのまま。 */
.sb-logo__img--white { opacity: 1; }
.sb-logo__img--black { opacity: 0; }

/* 明るい地のページは最初から黒。入れ替えは起きない。 */
.sb-overlay-header .sb-logo__img--white,
.sb-editorial .sb-logo__img--white { opacity: 0; }
.sb-overlay-header .sb-logo__img--black,
.sb-editorial .sb-logo__img--black { opacity: 1; }

.sb-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
}
.sb-nav a {
  /* 当たり判定を 44px に立てる。見た目は変えない。

     ナビが出るのは 768px 以上。そこには iPad が含まれるので、
     マウス専用と思って字の高さ（21px）のまま置かない。
     WCAG 2.2 の AA（24px）は間隔の例外で通っているが、
     指で押す端末で余裕がないことは基準とは別の話。

     ヘッダーの中身の高さはロゴ（46px）が決めているので、
     44px を立ててもヘッダーは高くならない（実測 83px のまま）。 */
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: none;
  transition: color .45s var(--sb-ease), background-color .45s var(--sb-ease), border-color .45s var(--sb-ease);
}
.sb-nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 虫眼鏡そのものは 17px。押せる範囲だけ 44px に広げる。
     内側の余白で広げると右端が内へ寄るので、
     同じぶんを負のマージンで戻して見た目の位置を保つ。 */
  min-inline-size: 44px;
  min-block-size: 44px;
  margin-inline-end: -.85rem;
  padding: .25rem;
  /* ボタンとしても使うので、button の既定を消しておく */
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ------------------------------------------------------------
   ヘッダーの検索

   虫眼鏡に触れると左へ入力欄が開き、その幅ぶんメニューが左へずれる。

   開く条件は :hover と :focus-within の両方。
   hover だけだと、タッチ端末（hover が無い）とキーボード操作で開けない。
   キーボードでは Tab で入力欄に入った時点で開く。

   文字色は --sb-nav-fg を見る。
   ナビの色は「暗いヒーローの上＝白 / 明るい地＝黒」で6状態あり、
   その指定は .sb-nav a と .sb-nav__search にしか当たっていない。
   input はどちらの要素でもないので、状態ごとにセレクタを足す方式だと
   1つ忘れただけで文字が地に沈む（白地に白）。
   各ページは .sb-nav に変数を1行置くだけにして、参照側はここ1箇所にする。
   ------------------------------------------------------------ */

/* 既定は暗い文字。明るい地のページのほうが多いので、
   万一どこかで変数を置き忘れても読める側へ倒しておく。 */
/* ⚠ 変数は .sb-header に置く。.sb-nav ではない。
   ハンバーガー（.sb-burger）は .sb-nav の兄弟なので、
   .sb-nav に置くと受け取れない。
   実測: 暗いヒーローで .sb-nav は白を持つのにハンバーガーは未定義になり、
   黒い線が黒い地に沈んで見えなくなっていた（トップ・詐欺サイト情報）。
   ページ側の上書きも .sb-header に当てること。 */
.sb-header { --sb-nav-fg: rgba(16, 18, 20, .72); }

.sb-hsearch {
  display: flex;
  align-items: center;
  gap: .35rem;
  /* 下線は開いたときだけ出す */
  border-block-end: 1px solid transparent;
  transition: border-color .32s var(--sb-ease);
}

.sb-hsearch__input {
  /* 幅を動かすのでレイアウトが動く。
     transform では隣が詰まらず「開いたぶん他が左へずれる」が成立しない。
     ヘッダーは要素数が少なく、動くのは開閉の一瞬だけなので、
     ここは意図した例外として width を動かす。 */
  width: 0;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sb-jp);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--sb-nav-fg);
  opacity: 0;
  /* Safari は検索欄に丸みと内側の影を付ける */
  -webkit-appearance: none;
  appearance: none;
  transition:
    width .32s var(--sb-ease),
    padding-block .32s var(--sb-ease),
    opacity .24s var(--sb-ease);
}
.sb-hsearch__input::placeholder { color: var(--sb-nav-fg); opacity: .5; }
.sb-hsearch__input:focus { outline: none; }
/* Safari の × ボタン。閉じているときに幅を持って居座る。 */
.sb-hsearch__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sb-hsearch:hover,
.sb-hsearch:focus-within { border-block-end-color: var(--sb-nav-fg); }

/* 語が空のあいだは送信しない（js/header.js）ので、その旨を色で示す。
   閉じているときは既定の見た目のまま。虫眼鏡が最初から薄いと、
   押せる場所だと分からなくなる。

   :has() は使わず隣接兄弟で受ける。ボタンは入力欄の直後にある。 */
.sb-hsearch:is(:hover, :focus-within) .sb-hsearch__input:placeholder-shown ~ .sb-hsearch__btn {
  opacity: .45;
  cursor: default;
}

.sb-hsearch:hover .sb-hsearch__input,
.sb-hsearch:focus-within .sb-hsearch__input,
/* 検索結果ページでは語が入っているので、開いたままにする */
.sb-hsearch__input:not(:placeholder-shown) {
  width: clamp(7rem, 14vw, 11rem);
  padding-block: .35rem;
  opacity: 1;
}

/* ------------------------------------------------------------
   ハンバーガーと引き出し（768px 以下）

   ⚠ 畳む幅は 768px。以前は 900px だった。
     本文のレイアウトが 768px で切り替わるのにヘッダーだけ 900px だったため、
     769〜899px が「メニューは電話・中身は PC」という中途半端な帯になっていた。
     さらに、その幅で残る操作はロゴと虫眼鏡の2つだけで、
     記事一覧への導線がフッターまで無かった（実測: .sb-nav a が3本とも display:none）。

     768px で足りることは実測で確かめてある。
     375px でも ロゴ103 + リンク3本200 + 虫眼鏡24 = 327px（使える幅 330px）。
     ただし余裕が 3px しかないので、ここでは畳んで引き出しへ入れる。

   検索は引き出しの中に置く。ヘッダーに虫眼鏡を別立てすると
   開くものが2つになり、状態の管理が増える。
   ------------------------------------------------------------ */

/* 既定（769px 以上）では出さない */
.sb-burger { display: none; }
.sb-drawer { display: none; }

@media (max-width: 768px) {
  .sb-logo__img { height: 38px; }

  /* 横並びのナビは丸ごと引き出しへ移す */
  .sb-nav { display: none; }

  .sb-burger {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 6px;
    /* タップ領域。指で押す前提の大きさを確保する。 */
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--sb-nav-fg);
  }
  .sb-burger__bar {
    display: block;
    block-size: 1px;
    background: currentColor;
    transition: inline-size .28s var(--sb-ease), transform .28s var(--sb-ease);
  }
  /* 2本の長さを変えて、記号ではなく線として見せる */
  .sb-burger__bar:nth-child(1) { inline-size: 22px; }
  .sb-burger__bar:nth-child(2) { inline-size: 14px; }
  .sb-burger[aria-expanded="true"] .sb-burger__bar:nth-child(1) {
    inline-size: 22px;
    transform: translateY(3.5px) rotate(45deg);
  }
  .sb-burger[aria-expanded="true"] .sb-burger__bar:nth-child(2) {
    inline-size: 22px;
    transform: translateY(-3.5px) rotate(-45deg);
  }

  /* 引き出し本体。帯の下に垂れる。
     位置は .sb-header が fixed なので、その中で絶対配置すれば追従する。 */
  .sb-drawer {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--sb-paper);
    border-block-start: 1px solid var(--sb-rule);
    box-shadow: 0 18px 40px rgba(8, 11, 12, .16);
    /* 開閉は高さではなく clip-path で切る。
       height を animate すると中身の折り返しが動いて字が踊る。 */
    clip-path: inset(0 0 100% 0);
    transition: clip-path .32s var(--sb-ease);
  }
  .sb-drawer[hidden] { display: none; }
  .sb-header.is-drawer-open .sb-drawer { clip-path: inset(0 0 0 0); }

  /* 引き出しの下に敷く覆い。
     これが無いと、開いている最中に背後の中身（一覧のタブなど）が
     すぐ下に見えていて、引き出しがページに載っているのか
     ページの一部なのか読めない。実機で確認して足した。

     ⚠ 引き出しの ::after では作れない。
       引き出しは clip-path で開閉しており、切り取りは疑似要素にも及ぶ。
       開いた瞬間に覆いごと消える（実測: opacity は 1 にならず 0 のまま）。
       ヘッダー直下の別要素にしてある。

     position は absolute。ヘッダーが fixed なので画面に貼り付く。
     fixed にすると inset-block-start: 100% が画面の高さを指してしまう。

     覆いを押しても閉じる（外側タップの判定は js/header.js）。 */
  /* ⚠ ヘッダーの外に置く要素。中に入れないこと。

     .sb-header は自身が backdrop-filter を持つ。
     backdrop-filter を持つ要素は、その中の要素にとって「採取の起点」になり、
     内側の要素はヘッダーの中しか拾えなくなる。
     実測: iOS 17.2 では効いたが、iPhone 17 Pro の Safari では
     背後が暗くなるだけでぼけなかった。新しい実装ほど仕様に忠実。

     position は fixed。ヘッダーの子ではなくなったので、
     画面に貼り付けるには自前で fixed にする必要がある。 */
  .sb-veil {
    position: fixed;
    inset: 0;
    /* 追従広告(80)より上、ヘッダー(トップは90 / 他は100)より下。
       引き出しはヘッダーの中にあるので、覆いの上に出る。 */
    z-index: 85;

    /* ⚠ opacity では出し入れしない。
       この要素は backdrop-filter を持つ。要素に opacity を掛けると
       透過グループができ、ぼかしの採取元が切り替わって描画が飛ぶ
       （4-9-2 に記録した、ヘッダーの帯で踏んだのと同じ型）。
       地の色の不透明度とぼかしの量、2つを動かして出し入れする。

       ⚠ 閉じたときのぼかしは none ではなく blur(0px)。
       none との間は補間できず、ぼかしだけが段で切り替わる。 */
    background-color: rgba(8, 11, 12, 0);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    pointer-events: none;
    transition:
      background-color .32s var(--sb-ease),
      backdrop-filter .32s var(--sb-ease),
      -webkit-backdrop-filter .32s var(--sb-ease);
  }
  .sb-header.is-drawer-open + .sb-veil {
    /* 暗さは控えめにして、ぼかしで背後を退かせる。
       ヘッダーの帯と同じ語彙。 */
    background-color: rgba(8, 11, 12, .22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    pointer-events: auto;
  }

  /* 曇りガラスが使えない環境では、地の暗さだけで背後を退かせる */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sb-header.is-drawer-open + .sb-veil { background-color: rgba(8, 11, 12, .45); }
  }

  /* 左右はヘッダーの中身と同じ位置に揃える。
     引き出しはヘッダーから降りてくるので、ここがずれると
     ロゴとメニューの左端が段違いになる。 */
  .sb-drawer__inner {
    padding: clamp(1.25rem, 5vw, 2rem) var(--sb-gutter) clamp(1.75rem, 6vw, 2.5rem);
  }

  /* --- 引き出しの中の検索 --- */
  .sb-drawer__search-label {
    display: block;
    margin-block-end: .6rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--sb-mute);
  }
  .sb-drawer__search-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block-end: .5rem;
    border-block-end: 1px solid var(--sb-rule);
  }
  .sb-drawer__search-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    /* iOS Safari は 16px 未満の入力欄で画面を拡大する */
    font-size: max(1rem, 16px);
    font-family: var(--sb-jp);
    line-height: 1.6;
    color: var(--sb-ink);
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
  }
  .sb-drawer__search-input:focus { outline: none; }
  .sb-drawer__search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }
  .sb-drawer__search-btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sb-ink);
    cursor: pointer;
  }

  /* --- 引き出しの中のリンク --- */
  .sb-drawer__nav {
    display: grid;
    /* 検索欄の下罫を列の始まりの線として使うので、間隔は詰める。
       離すと罫が宙に浮いて、どちらに属する線か読めない。 */
    margin-block-start: 0;
  }
  .sb-drawer__nav a {
    padding-block: 1rem;
    border-block-end: 1px solid var(--sb-rule);
    font-size: 1rem;
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--sb-ink);
  }
  /* 1本目の上罫は引かない。
     すぐ上に検索欄の下罫があり、間隔が近いと線が2本走って見える。
     実機で確認して外した。検索欄の罫が、そのまま列の始まりの線になる。 */
}

@media (prefers-reduced-motion: reduce) {
  .sb-drawer { transition: none; }
  .sb-burger__bar { transition: none; }
}

/* ============================================================
   ヒーローを抜けたときの入れ替え

   判定は js/header.js が付ける .is-past-hero。
   ヘッダーの高さで判定すると、まだヒーローが見えているうちに
   明るい帯へ変わってちらつく。

   隠す位置（ヘッダーの高さ）とは離してある。
   下へ読むときは先に隠れてから地が変わるので、切り替えは見えない。

   コラムはロゴが元から黒なので、色の入れ替えは要らない。
   ============================================================ */
.sb-report .sb-header.is-past-hero,
.sb-editorial .sb-header.is-past-hero {
  background-color: rgba(241, 238, 231, .72);
  backdrop-filter: saturate(1.25) blur(20px);
  -webkit-backdrop-filter: saturate(1.25) blur(20px);
}

.sb-report .sb-header.is-past-hero .sb-logo__img--white { opacity: 0; }
.sb-report .sb-header.is-past-hero .sb-logo__img--black { opacity: 1; }
.sb-report .sb-header.is-past-hero { --sb-nav-fg: rgba(16, 18, 20, .72); }
.sb-report .sb-header.is-past-hero .sb-nav a { color: rgba(16, 18, 20, .72); }
.sb-report .sb-header.is-past-hero .sb-nav a:hover { color: var(--sb-ink); }
.sb-report .sb-header.is-past-hero .sb-nav__search { color: rgba(16, 18, 20, .72); }

/* ------------------------------------------------------------
   帯のぶんの逃げ

   帯は本文の上に重なる。ページ側の上余白が足りないと、
   パンくずや見出しが帯の下へ潜る。
   帯の高さぶんを、ヘッダーが重なるページの先頭へ渡す。
   ------------------------------------------------------------ */
.sb-overlay-header .sb-pg__head,
.sb-overlay-header .sb-arc__head {
  padding-block-start: clamp(6.5rem, 13vh, 9.5rem);
}

/* ⚠ 電話ぶんもここで持つ。ページ側に書いても効かない。

   以前は page-base.css と archive-editorial.css の @media に
   `.sb-pg__head { padding-block-start: … }` (0,1,0) を書いていたが、
   上の (0,2,0) に負けて**一度も効いていなかった**。
   @media は詳細度を上げないので、読み込み順に関係なく負ける。
   実測: 375×812 で意図した 97px ではなく 105.56px が出ていた。

   ページ側の基底 `padding-block` の上半分も同じ理由で死んでいたので、
   両ファイルとも padding-block-end の longhand に書き換えてある。 */
@media (max-width: 768px) {
  .sb-overlay-header .sb-pg__head,
  .sb-overlay-header .sb-arc__head {
    padding-block-start: clamp(5.5rem, 12vh, 7rem);
  }
}

/* パンくずの天からの距離を、記事一覧と固定ページで揃える。

   記事一覧はパンくずを見出し帯（.sb-arc__head）の中に置き、
   固定ページは帯の外に独立したシェルで置いている。
   置き場所は違うが、画面に現れる高さは同じでなければ、
   ページを移った瞬間にパンくずが上下に跳ぶ。

   → 帯と同じ値をこのシェルにも渡す。 */
.sb-overlay-header .sb-pg > .sb-pg__shell:first-child {
  padding-block-start: clamp(6.5rem, 13vh, 9.5rem);
}
@media (max-width: 768px) {
  .sb-overlay-header .sb-pg > .sb-pg__shell:first-child {
    padding-block-start: clamp(5.5rem, 12vh, 7rem);
  }
}

/* パンくずの下の間隔は、パンくず自身の margin だけで取る。
   ここに余白を足すと、記事一覧より一段深くなって
   キッカーとタイトルが揃わない。 */
.sb-overlay-header .sb-pg__shell:first-child + .sb-pg__head {
  padding-block-start: 0;
}

/* ⚠ 404 だけ見出しがシェルの「中」にある。

   固定ページ4枚は パンくずのシェル → 見出し帯 の兄弟並びなので
   上の隣接セレクタで見出し側が 0 になる。
   404 はパンくずを持たず、シェルが中身をまるごと包むため、
   シェル (88px) と見出し帯 (88px) が二重にかかっていた。
   実測: 614px 幅で本文の頭が天から 222px（ヘッダー 81 + 176）。

   逃げを受け取るのは先頭の一つだけでよい。
   子孫として入っている見出し帯も 0 にする。 */
.sb-overlay-header .sb-pg > .sb-pg__shell:first-child .sb-pg__head {
  padding-block-start: 0;
}

/* パンくず自身の上下。両方のページで同じにする。
   breadcrumb.css が持つ上余白を落とし、下は同じ値で開ける。 */
.sb-overlay-header .sb-arc__shell > .sb-crumb,
.sb-overlay-header .sb-pg__shell > .sb-crumb {
  padding-block-start: 0;
  margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}