@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — 調査レポート 個別ページ
 * カテゴリー scam_info の記事だけに当たる（body の .sb-report）。
 * テンプレートは template-parts/single-report.php
 *
 * 地の色と字面はトップページ（home.css）と揃える。
 * 暗いヘッダー画像 → オフホワイトの本文、という流れも同じ。
 *
 * 本文（.post_content）には手を入れない。SWELL 標準のまま出す。
 * このファイルのリセットが本文へ届かないよう、
 * セレクタは必ずヘッダー・サイドバー・関連記事の内側に閉じること。
 *
 * !important 使用禁止
 * ============================================================ */

/* 色・書体・イージングは css/base/common.css の :root で共有している。
   ここではこのページ固有の寸法だけを持つ。 */
.sb-report {
  /* 本文の横幅。読み幅と目次幅をここで一括管理する。 */
  --sb-shell: 1240px;
  /* 目次の桁。1080px で 260px へ落とす段を持っていたが、
     幅に連れて動けば段は要らない。 */
  --sb-side:  clamp(260px, 24vw, 310px);
  --sb-gap:   clamp(2.5rem, 4.5vw, 4.5rem);
}

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

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

/* ====================================================
   ヘッダー — 画像の上にタイトル
   ==================================================== */
/* 寸法と組み方（位置、ロゴの高さ、余白、畳み方）は
   header-sticky.css が全ページ共通で持っている。
   ここが持つのは色だけ。

   ロゴは暗いヒーローに載るので白。ヒーローを抜けたら黒へ入れ替わる。
   入れ替えは header-sticky.css の .is-past-hero が持つ。 */
.sb-report .sb-header { --sb-nav-fg: rgba(255,255,255,.86); }
.sb-report .sb-nav a { color: rgba(255,255,255,.86); }
.sb-report .sb-nav a:hover { color: #fff; }
.sb-report .sb-nav__search { color: rgba(255,255,255,.86); }
.sb-report .sb-nav__search:hover { color: #fff; }

.sb-art__hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(54vh, 490px);
  padding: clamp(5rem, 9vh, 6.5rem) 0 clamp(3.75rem, 7vh, 5rem);
  overflow: hidden;
  background: var(--sb-dark);
  color: #fff;
}

.sb-art__hero-media {
  position: absolute;
  inset: 0;
}
.sb-art__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  display: block;
}
/* 写真の上に暗さを重ねて、白い文字が必ず読めるようにする */
.sb-art__hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(8,11,12,.94) 0%, rgba(8,11,12,.6) 46%, rgba(8,11,12,.3) 100%),
    linear-gradient(to right, rgba(8,11,12,.78) 0%, rgba(8,11,12,.2) 58%);
}

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

.sb-report .sb-art__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 1.75rem);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.sb-art__slash { color: rgba(255,255,255,.4); font-weight: 400; }
.sb-art__eyebrow time { letter-spacing: .1em; }

.sb-report .sb-art__title {
  margin-block-start: clamp(1.6rem, 3.2vw, 2.5rem);
  font-size: clamp(1.6875rem, 4.14vw, 3.15rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .005em;
  text-wrap: balance;
  max-width: 22em;
  color: #fff;
}

.sb-report .sb-art__lead {
  margin-block-start: clamp(1.9rem, 3.4vw, 2.75rem);
  font-size: clamp(.9375rem, 1.15vw, 1.0625rem);
  line-height: 2.05;
  color: rgba(255,255,255,.76);
  max-width: 42em;
}

.sb-art__scroll {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .6rem;
}
.sb-art__scroll-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.sb-art__scroll-rule {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255,255,255,.5), rgba(255,255,255,0));
}

/* ====================================================
   本文まわり
   中身の字面は SWELL 標準のまま。ここでは器だけを組む。
   ==================================================== */
.sb-art__sheet {
  position: relative;
  background: var(--sb-paper);
  padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(4rem, 8vw, 6.5rem);
}

.sb-art__grid {
  display: grid;
  /* サイドバー側に区切り線ぶんの余白を持たせるので、
     トラック幅は目次の実寸 + 内側の余白で確保する。 */
  grid-template-columns: minmax(0, 1fr) calc(var(--sb-side) + var(--sb-gap) / 2);
  column-gap: calc(var(--sb-gap) / 2);
  align-items: start;
  padding-block-start: clamp(1.5rem, 3vw, 2.5rem);
}

.sb-art__main { min-width: 0; }

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

/* ====================================================
   サイドバー
   ==================================================== */
/* 本文と目次の間の細い縦罫。
   align-self を stretch にして、線を記事の丈いっぱいまで伸ばす。
   （親の align-items: start のままだと目次の高さで切れてしまう） */
.sb-art__side {
  min-width: 0;
  align-self: stretch;
  border-inline-start: 1px solid var(--sb-rule);
  padding-inline-start: calc(var(--sb-gap) / 2);
}

.sb-art__side-inner {
  position: sticky;
  top: clamp(1.5rem, 4vh, 2.5rem);
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

.sb-report .sb-side__h {
  padding-block-end: .85em;
  border-block-end: 1px solid var(--sb-rule);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--sb-ink);
}

/* --- 目次 --- */
.sb-report .sb-toc__list {
  margin-block-start: 1.1rem;
  counter-reset: sb-toc;
  display: grid;
  gap: 0;
}
.sb-toc__item--h2 { counter-increment: sb-toc; }

/* セクションの切れ目に細い罫を入れる。
   h3 は直前の h2 と同じセクションなので、そこには挟まない。
   先頭の h2 の上にも引かない（見出しの罫と重なってしまう）。 */
.sb-report .sb-toc__item--h2 ~ .sb-toc__item--h2 {
  border-block-start: 1px solid var(--sb-rule);
  margin-block-start: .45rem;
  padding-block-start: .45rem;
}

.sb-report .sb-toc__item a {
  display: block;
  padding-block: .62rem;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--sb-mute);
  transition: color .2s var(--sb-ease);
}
.sb-report .sb-toc__item a:hover { color: var(--sb-ink); }

.sb-report .sb-toc__item--h2 a::before {
  content: counter(sb-toc) ".";
  margin-inline-end: .5em;
  color: rgba(16,18,20,.34);
}
/* h3 は一段下げて、h2 との親子関係を字面で示す */
.sb-report .sb-toc__item--h3 { padding-inline-start: 1.5rem; }
.sb-report .sb-toc__item--h3 a {
  font-size: .78125rem;
  color: rgba(110,114,116,.85);
}

.sb-report .sb-toc__item.is-current a { color: var(--sb-accent); }
.sb-report .sb-toc__item.is-current a::before { color: var(--sb-accent); }

/* --- シェア --- */
.sb-report .sb-share__list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: 1.1rem;
}
.sb-report .sb-share__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--sb-rule);
  border-radius: 0;
  color: var(--sb-ink);
  cursor: pointer;
  transition: background-color .2s var(--sb-ease), color .2s var(--sb-ease);
}
.sb-report .sb-share__btn:hover {
  background-color: var(--sb-ink);
  color: #fff;
}
.sb-report .sb-share__copy.is-copied {
  background-color: var(--sb-accent);
  border-color: var(--sb-accent);
  color: #fff;
}

/* ====================================================
   レスポンシブ
   ==================================================== */
/* ------------------------------------------------------------
   電話で本文の中へ移した目次と共有（js/article.js が移す）

   目次は最初の h2 の直前、共有は本文の直後。
   サイドバーに置いていたときの体裁のままだと本文に馴染まないので、
   面として囲って本文と切り分ける。
   ------------------------------------------------------------ */
.sb-art.is-inline-side .sb-art__side { display: none; }

.sb-toc--inline {
  margin-block: clamp(2rem, 5vw, 2.75rem);
  padding: clamp(1.1rem, 4vw, 1.5rem) clamp(1.1rem, 4vw, 1.5rem) .35rem;
  background: var(--sb-paper-2);
  border: 1px solid var(--sb-rule);
}
/* 本文の見出しの体裁を引き継がせない。目次の見出しは版面の一部。 */
.sb-report .sb-toc--inline .sb-side__h { margin-block: 0; }

/* ⚠ 本文の中へ移すと、親テーマの .post_content ol / li が当たる。
   サイドバーでは当たらなかった指定が急に効き、
   ブラウザ既定の番号（1. 2. 3.）が h3 にも振られて二重になった。
   実測: 左に太い連番、右に目次自身の番号が並んでいた。
   目次は本文の一部ではないので、リストの体裁を明示的に打ち消す。

   詳細度は .post_content ol (0,1,1) に勝つ必要があるので、
   .sb-report を前置して (0,3,0) にしてある。 */
.sb-report .sb-toc--inline .sb-toc__list {
  list-style: none;
  margin: 0;
  margin-block-start: 1.1rem;
  padding: 0;
  counter-reset: sb-toc;
}
.sb-report .sb-toc--inline .sb-toc__item {
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
}
.sb-report .sb-toc--inline .sb-toc__item::marker { content: none; }
/* h3 の字下げはこのファイルの既定を保つ */
.sb-report .sb-toc--inline .sb-toc__item--h3 { padding-inline-start: 1.5rem; }

.sb-share--inline {
  margin-block-start: clamp(2.5rem, 6vw, 3.5rem);
  padding-block-start: clamp(1.25rem, 4vw, 1.75rem);
  border-block-start: 1px solid var(--sb-rule);
}

/* ------------------------------------------------------------
   目次の折り畳み（電話）

   ボタンは電話でだけ出す。PC は右のサイドバーに全件並べる。
   畳んでいる間は先頭4件だけ見せる。件数ではなく nth-child で切るので、
   1件が2行に折り返しても「4項目」は変わらない。

   ⚠ 既定は開いた状態にしておく（is-folded を JS が付ける）。
     CSS で先に畳むと、JS が動かない環境で開く手段が無くなる。
   ------------------------------------------------------------ */
.sb-toc__more { display: none; }

@media (max-width: 899.98px) {
  .sb-toc--foldable { position: relative; }

  .sb-toc--foldable .sb-toc__more {
    display: block;
    inline-size: 100%;
    padding-block: .85rem;
    border: 0;
    background: none;
    font-family: var(--sb-jp);
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--sb-ink);
    cursor: pointer;
  }

  /* ⚠ 既定を display: none にしない。
     JS が動かない環境では is-folded が付かないので、
     「閉じる」だけが出て「すべて表示」が消える（実測で両方出た）。
     どちらの状態でも必ず片方だけが出るよう、2つとも状態で決める。 */
  .sb-toc--foldable.is-folded .sb-toc__more-open { display: inline; }
  .sb-toc--foldable.is-folded .sb-toc__more-close { display: none; }
  .sb-toc--foldable:not(.is-folded) .sb-toc__more-open { display: none; }
  .sb-toc--foldable:not(.is-folded) .sb-toc__more-close { display: inline; }

  /* --- 畳んでいるとき ---
     5件目まで見せ、5件目は下へ向けて消えていく。
     続きがあることを、切り口ではなく「途中で霞む」ことで示す。

     ⚠ ボタンを霞の上に重ねる案は取りやめた。
     下端に貼り付けると5件目をほぼ覆ってしまい（実測で上の1割しか残らない）、
     余白で押し返すと今度はボタンだけが宙に浮く。
     霞んでいる時点で続きがあることは伝わるので、
     ボタンはその真下に置いて文字を隠さない。 */
  .sb-report .sb-toc--foldable.is-folded .sb-toc__item:nth-child(n+6) { display: none; }

  .sb-report .sb-toc--foldable.is-folded .sb-toc__item:nth-child(5) {
    /* 下へ向かって消える。 */
    -webkit-mask-image: linear-gradient(to bottom, #000 12%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 12%, transparent 100%);

    /* ⚠ 薄くするだけでは「ぼかし」にならない。

       最初はマスクだけで作ったが、実機で見ると
       「薄いがくっきりした文字」が残り、続きがある感じにならなかった。
       文字そのものをぼかす。マスクと合わせて、
       薄くなりながら像が崩れていく見え方になる。

       強くしない。読めないほどぼかすと、
       何の項目が隠れているのか分からなくなる。 */
    filter: blur(1.2px);

    /* 半分消えているものは押させない。 */
    pointer-events: none;
  }

  .sb-toc--foldable.is-folded .sb-toc__more {
    margin: 0;
    /* 枠の下の余白は .35rem しかない（もともとボタン側で持っていたため）。
       下を 0 にすると文字が枠の底に貼り付く。
       .35rem と足して枠の内側の余白（390px で 17.6px）と揃う値にする。 */
    padding-block: .5rem .75rem;
    text-align: center;
  }

  /* --- 開いているとき ---
     位置も体裁も畳んだときと変えない。罫は引かない。 */
  .sb-toc--foldable:not(.is-folded) .sb-toc__more {
    margin-block-start: .5rem;
    padding-block: .5rem .75rem;
    text-align: center;
  }
}

/* ⚠ 899.98px にしてある。900px ちょうどにすると、
   min-width: 900px（page-base.css / contact.css）と同時に成立し、
   「電話向けの1カラム」と「PC向けの2カラム」が両方当たる。 */
@media (max-width: 899.98px) {
  /* 目次を本文の上へ回す。読み幅を優先する。
     1カラムになると縦罫は意味を持たないので外す。 */
  .sb-art__grid {
    grid-template-columns: minmax(0, 1fr);
    /* JS が動かないときの受け皿。
       そのときだけサイドバーが本文の上に積まれるので、行間が要る。
       （動く環境では .is-inline-side でサイドバーごと消える） */
    row-gap: clamp(2rem, 5vw, 3rem);
  }
  .sb-art__side {
    order: -1;
    border-inline-start: none;
    padding-inline-start: 0;
  }
  .sb-art__side-inner {
    position: static;
  }
}

@media (max-width: 768px) {
  /* ヘッダーの畳み方は header-sticky.css が全ページぶん持つ */
  .sb-art__hero { min-height: min(52vh, 420px); }
  .sb-art__scroll { display: none; }
}

/* prefers-reduced-motion の受け口はこのファイルには無い。
   空のブロックを置いておくと「対応済み」に見えるので外した。
   このページで動くのは目次の追従（js/article.js）だけで、
   そちらが matchMedia で判定している。 */