@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — 記事の標準レイアウト
 * 詐欺サイト情報以外のカテゴリーに当たる（body の .sb-editorial）。
 * コラム・ニュース・以後追加するカテゴリーが対象。違いはラベルだけ。
 * テンプレートは template-parts/single-editorial.php
 *
 * 構成:
 *   オフホワイトの地 + 透明ヘッダー
 *   → ヒーロー（種別 / 日付 → 罫 → タイトル → 罫）
 *   → 本文（センター1カラム。字面は SWELL 標準のまま）
 *   → 関連記事（css/components/related-posts.css）
 *
 * 本文（.post_content）には手を入れない。
 * このファイルのリセットが本文へ届かないよう、
 * セレクタはヒーローの内側に閉じること。
 *
 * !important 使用禁止
 * ============================================================ */

.sb-editorial {
  --sb-ed-shell: 760px;    /* 本文の読み幅 */
  --sb-ed-wide:  1240px;   /* ヒーローの幅。読み幅より広く取る */
  /* ヒーローの背景写真。差し替えはここだけ。 */
  --sb-ed-bg:    url('../../images/column-hero.jpg');
  /* 写真をどれだけ上へ伸ばすか。大きいほどランプが上がり、
     傘がヘッダーの外へ抜けて文字と重ならなくなる。 */
  --sb-ed-bg-rise: 260px;
  /* 写真の上に重ねるオフホワイトの濃さ。
     写真は無彩色（#B1B1AF）なので、紙の色を重ねて
     サイトの色味へ寄せつつ、黒文字のコントラストを上げる。 */
  --sb-ed-bg-veil: .06;
  /* 罫線の下に残す写真の裾。ランプの支柱がここへ抜ける。
     パンくずはこの裾に重ねるので、両方がこの値を見る。 */
  --sb-ed-hero-tail: clamp(2.5rem, 5vh, 4rem);
  /* ヒーローの版面の内側の余白。縦罫から文字までの距離。
     横罫の突き出し量を組み立てるのに使うので、変数にしてある。 */
  --sb-ed-hero-pad: clamp(1.25rem, 3vw, 2.5rem);
  /* 横罫が縦罫を越えて外へ出る長さ。交差の見え方はここで決まる。
     版面の外側に残る余白（狭い画面で 23px ほど）を超えないこと。
     .sb-ed-hero は overflow: hidden なので、超えると切り落とされる。 */
  --sb-ed-cross: clamp(.75rem, 1.5vw, 1.5rem);
  /* 横罫を左右へ伸ばす量。縦罫（1px）ぶんも越える。 */
  --sb-ed-rule-out: calc(var(--sb-ed-hero-pad) + 1px + var(--sb-ed-cross));
}

body.sb-editorial {
  background: var(--sb-paper);
  color: var(--sb-ink);
}

.sb-ed-shell {
  width: min(100% - var(--sb-gutter) * 2, var(--sb-ed-shell));
  margin-inline: auto;
}

/* ====================================================
   ヘッダー — 透明。明るい地に載るので黒ロゴ・黒文字
   ==================================================== */
/* 寸法と組み方（位置、ロゴの高さ、余白、畳み方）は
   header-sticky.css が全ページ共通で持っている。
   黒ロゴを出す指定もそちら。ここが持つのは文字の色だけ。 */
.sb-editorial .sb-header{ --sb-nav-fg: rgba(16,18,20,.72); }
.sb-editorial .sb-nav a{ color: rgba(16,18,20,.72); }
.sb-editorial .sb-nav a:hover{ color: var(--sb-ink); }
.sb-editorial .sb-nav__search{ color: rgba(16,18,20,.72); }
.sb-editorial .sb-nav__search:hover{ color: var(--sb-ink); }

/* CTA だけは黒地に白抜き。
   上の .sb-nav a と同じ詳細度だと後勝ちで文字色を奪われるので、
   .sb-nav を挟んで一段高くしておく。 */

/* ====================================================
   ヒーロー
   画面いっぱい。上下を細い罫で挟み、タイトルを中央に大きく置く。
   ==================================================== */
.sb-ed-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* 下の余白は空きではなく、写真の裾を見せる場所。
     一度 0 にしたらランプの支柱が罫線でぶつ切りになった。 */
  padding-block: clamp(6rem, 12vh, 8.5rem) var(--sb-ed-hero-tail);
  font-family: var(--sb-jp);
}

/* 背景写真とその上のオフホワイト。
   文字より奥に置き、版面の罫は写真の上に乗る。
   上へ伸ばしてヘッダーの裏まで写真を続け、
   その中で画像を上げてランプの傘をタイトルより上に置く。 */
.sb-ed-hero__bg {
  position: absolute;
  inset: calc(var(--sb-ed-bg-rise) * -1) 0 0 0;
  z-index: -1;
  background-image: var(--sb-ed-bg);
  /* 繰り返しを止める。指定しないと既定の repeat が効き、
     位置をずらしたときに下端が上へ回り込む。 */
  background-repeat: no-repeat;
  background-size: cover;
  /* 写真の上端を見せる。ランプの支柱がヘッダー側へ抜ける。

     ⚠ 横は center ではなく left。

     cover は「幅と高さの両方を覆う」ほうの倍率を選ぶ。
     広い画面では幅が決め手になり、写真は枠の幅ちょうどに収まるので
     center でも left でも同じ位置に出る。

     ところが 1185px を下回ると高さが決め手に変わり、
     写真が枠より横に広くなって左右が切り落とされる。
     center だと切り落としが両側に効き、ランプが左へ寄って
     ロゴに食い込む（実測: 1024px で傘が 169〜329px、ロゴは 40〜215px）。

     left にすると写真の左端が枠の左端に揃うので、
     どの幅でもランプは同じ相対位置に出る。
     広い画面での見え方は変わらない（切り落としが無いため）。 */
  background-position: left top;
}
/* 紙の色を全体に薄く重ねたうえで、
   下端は完全に紙へ落とす。写真と本文の境目を消し、
   下段の行が椅子に沈まないようにする。 */
.sb-ed-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sb-paper);
  opacity: var(--sb-ed-bg-veil);
}
.sb-ed-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 補助テキスト（パンくず・リード文）は写真の上だとコントラストが
     足りないため、下半分は紙の色へ落としきる。 */
  background: linear-gradient(
    to bottom,
    rgba(241,238,231,0) 62%,
    rgba(241,238,231,.66) 80%,
    var(--sb-paper) 100%
  );
}

.sb-ed-hero__inner {
  position: relative;
  width: min(100% - var(--sb-gutter) * 2, var(--sb-ed-wide));
  margin-inline: auto;
  /* 左右にも罫を立て、上下の罫と合わせて版面を囲う */
  padding-inline: var(--sb-ed-hero-pad);
  border-inline: 1px solid var(--sb-rule);
  /* 下の横罫より縦罫を伸ばして交差させる。
     これが無いと縦罫が横罫で止まり、T 字になる。
     （上は種別の行のぶん縦罫が先に伸びているので、そのままで交差する） */
  padding-block-end: var(--sb-ed-cross);
}

/* --- 種別 / 日付 --- */
.sb-editorial .sb-ed-hero__meta{
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.6rem);
  /* 横罫を縦罫の外へ突き抜けさせて交差させる。
     負のマージンで箱を広げ、同じ量の内側余白で文字の位置を戻す。
     （padding を足さないと、種別と日付が縦罫の外へ出てしまう） */
  margin-block: 0;
  margin-inline: calc(var(--sb-ed-rule-out) * -1);
  padding-block: 0 clamp(1rem, 1.8vw, 1.4rem);
  padding-inline: var(--sb-ed-rule-out);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-mute);
  border-block-end: 1px solid var(--sb-rule);
}
.sb-ed-hero__slash { color: rgba(16,18,20,.28); font-weight: 400; }
.sb-ed-hero__meta time { letter-spacing: .1em; }

/* --- タイトル。中央・大きく --- */
.sb-editorial .sb-ed-hero__title{
  margin: 0;
  position: relative;
  /* 1行でも2行でもヒーローの高さを変えない。
     行数で伸縮すると、記事ごとに版面の丈が変わってしまう。
     固定の枠を用意し、その中で上下中央に置く。 */
  min-height: clamp(13rem, 26vw, 19.25rem);
  display: grid;
  align-content: center;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  text-align: center;
  font-size: clamp(1.5rem, 3.4vw, 3rem);
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: .01em;
  text-wrap: balance;
  /* 真っ黒だと写真の上で硬いので、一段落とした濃いグレー */
  color: #2A2E30;
  background: none;
  border: none;
}

/* --- 下段。リード文を右下に置く ---
   もとは左に執筆者、右にリード文の2段組だった。
   執筆者と読了時間を外したので、空の列を作らず
   リード文ひとつを右へ寄せる形にしている（見え方は元のまま）。 */
.sb-ed-hero__foot {
  position: relative;
  /* リード文の行数でも高さが変わらないよう、下段も丈を決めておく。
     タイトルと合わせて、記事によらずヒーローの高さが一定になる。
     リード文3行ぶん（.875rem × 2.05 × 3 ≒ 5.4rem）を収める丈。 */
  min-height: 7.35rem;
  display: grid;
  justify-items: end;
  align-items: end;
  /* 上の罫と同じ組み方。縦罫の外へ突き抜けさせる。 */
  margin-inline: calc(var(--sb-ed-rule-out) * -1);
  padding-block-end: clamp(1.5rem, 3vh, 2.25rem);
  padding-inline: var(--sb-ed-rule-out);
  border-block-end: 1px solid var(--sb-rule);
}

/* リード文。左に細い縦罫を立てて、本文とは別の階層だと示す */
.sb-editorial .sb-ed-hero__lead{
  margin: 0;
  /* 2段組だった頃の右カラムと同じ幅。組み方を変えても見え方を保つ。 */
  max-width: 22rem;
  padding: 0 0 0 clamp(1.25rem, 2.4vw, 1.75rem);
  border-inline-start: 1px solid var(--sb-rule);
  font-size: .875rem;
  line-height: 2.05;
  color: rgba(16,18,20,.72);
  /* 行数では切らない。文字だけ拡大されたときに読めなくなる。

     長さは PHP 側で決まっている（single-editorial.php が
     wp_trim_words で60字）。HTML に出す時点で短くしてあるので、
     CSS で二重に切る必要がない。
     下段は min-height を持っているので、短い記事でも丈は縮まない。 */
}


/* ====================================================
   パンくず
   ==================================================== */
/* ヒーローの直下に置く。横は本文と同じ位置。

   本文の先頭に置いていたときは、最初の見出しと 50px ほどしか離れず、
   記事の一部のように見えた。ヒーローから離して、上下の余白で独立させる。

   横幅はこのルールでは決めない。中に .sb-ed-shell を敷いて本文と共有する。
   式を書き写すと、読み幅を変えたときにここだけ取り残される。
   ここが持つのは上下の余白だけ。 */
.sb-ed-crumb {
  /* 罫線のすぐ下に置きたいが、そこにはまだ写真の裾がある。
     裾を削ると支柱が切れるので、削らずに上へ重ねる。
     地は透けたままなので、パンくずの後ろにも写真が続く。 */
  position: relative;
  /* ヒーロー下端は「横罫 + 縦罫の突き出し + 写真の裾」。
     罫線からの距離を保つため、両方ぶん引き上げる。 */
  margin-block-start: calc((var(--sb-ed-hero-tail) + var(--sb-ed-cross)) * -1);
  /* 罫線からの間隔はここだけで決まる。 */
  padding-block: clamp(.75rem, 1.5vw, 1rem) 0;
}

/* ====================================================
   本文
   中身の字面は SWELL 標準のまま。ここでは器だけを組む。
   ==================================================== */
.sb-ed-body {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 7vw, 5.5rem);
}

/* SWELL の内側幅制限を外し、こちらの読み幅に任せる */
.sb-editorial .l-mainContent__inner{
  max-width: none;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 横に長い要素だけは、ページ全体を横スクロールさせないよう受け止める */
.sb-editorial .sb-ed-body .wp-block-table,
.sb-editorial .sb-ed-body pre{ overflow-x: auto; }

/* SWELLデフォルト目次を非表示 */
.sb-editorial .p-toc{ display: none; }

/* ====================================================
   レスポンシブ
   ==================================================== */
@media (max-width: 768px) {
  /* ヘッダーの畳み方は header-sticky.css が全ページぶん持つ */
  /* ヘッダーの畳み方は header-sticky.css が全ページぶん持つ */
  .sb-ed-hero { padding-block-start: clamp(5.5rem, 12vh, 7rem); }
  .sb-ed-hero__inner { padding-inline: 1rem; }
  /* 幅が狭いと写真が拡大され、持ち上げすぎると被写体が画面外へ出る。
     持ち上げ量を減らしてランプを画面内に残す。 */
  /* ⚠ 持ち上げ量は 120px では足りない。

     枠が縦長になると cover は高さ基準で拡大するので、
     写真は 2.5 倍ほどになり、傘は実寸で 131px（画面の3分の1）になる。
     120px では傘の底が種別・日付の行まで降りてきて、
     日付が傘の上に乗って読めなくなる。

     傘の上では文字色をどう変えてもコントラストが作れない。
     veiled 後の傘は中間の灰（#656565 付近）になり、
     濃くしても薄くしても 4.5:1 に届かない。位置で外すしかない。

     計算: 枠の高さ = ヒーロー 527px + 持ち上げ量。
     傘は元画像の y 450〜780px。
     傘の底 = 780 × (527 + R) / 1600 − R が、種別の行（天から 148px）より上。
     → R > 212 で外れるが、そこまで上げると傘の頭が画面の外へ出る。
     R = 200 は傘が全部見えたまま、底が 154px。行にわずかに触れる程度で収まる。 */
  .sb-editorial, .sb-editorial { --sb-ed-bg-rise: 200px; }

  /* ⚠ 縦の持ち上げだけでは足りない。横も寄せる。

     枠が縦長になると cover は高さ基準で拡大するので、
     横は中央のひと切れしか残らない。
     ランプは写真の左（横 20〜35%）にいるため、
     center のままだと枠の外へ出て、傘の右端だけが左辺に貼り付く。
     実測: iPhone 15 で見えていたのは元画像の 714〜1686px。傘は 504〜828px。

     左へ寄せて、ランプ全体を枠に入れる。
     傘はタイトルより上（ヒーロー座標で 35〜139px）に収まる。 */
  /* ランプの居場所は px で決める。% にすると、
     枠の幅が変わるたびに寄り方が変わってしまう。

     x: 負の値で写真を左へ送る＝ランプが左へ動く。
     y: 正の値で写真を下へ送る＝ランプが下へ動く。
        写真は cover で枠の高さぴったりに拡大されているので、
        下へ送ったぶん上端に隙間ができるが、
        そこは持ち上げ量（200px）の内側で画面の外にある。 */
  .sb-ed-hero__bg { background-position: -135px 10px; }
}