@charset "UTF-8";

/* ===========================================
   共通設定・リセット
   =========================================== */

/* -------------------------------------------
   デザイントークン

   詐欺バスターズ本体（トップ・調査レポート・
   コラム・ニュース・固定ページ）で共有する。
   このファイルは全ページで読まれるので、
   ページ固有の値はここに置かず各ページCSSへ。

   ※ 詐欺サイトDB側（single.css / archive.css /
     search.css）は --sb-* を一切使っていないため、
     ここへの追加は DB 側に影響しない。
   ------------------------------------------- */
/* ============================================================
   文字サイズの起点

   親テーマ SWELL は html の font-size をこう決めている。
     600px 未満  --swl-fz--root: 3.6vw
     600px 以上  --swl-fz--root: 16px

   これを子テーマで上書きする。理由は3つ。

   1. 画面幅で本文が伸び縮みする。実測で 320px=11.52px、
      430px=15.48px。**画面が小さい端末ほど文字が小さくなる**。
      いちばん読みにくい人に、いちばん小さい文字を見せていた。
   2. 599px=21.56px → 600px=16px と 5.5px の段差ができる。
   3. どちらも数値固定なので、**利用者がブラウザの標準文字サイズを
      変えていても一切反映されない**。

   100% は「親（＝ブラウザの標準文字サイズ）をそのまま使う」の意味。
   既定のままの人には 16px。大きくしている人にはその値が届く。
   デジタル庁デザインシステムの本文16px以上という基準にも合う。

   ⚠ 全幅に当てている。モバイルだけに当てると
     「利用者の設定を尊重する」という理由が半分しか通らない。

   ⚠ 文字だけが拡大される経路（ブラウザの標準文字サイズ、
     Firefox の文字のみズーム）では、行数で切る指定と衝突する。
     実測で root 24px にすると関連記事の題名が切れた。
     そのため題名とリード文の -webkit-line-clamp は外してある。
     ページズームは箱ごと拡大されるので衝突しない（実測）。
   ============================================================ */
:root { --swl-fz--root: 100%; }

/* ============================================================
 * 版面の左右の余白（片側）
 *
 * 全ページ・全セクションがこの1つを見る。
 * 以前は3種類が7箇所に散っていて、390px 幅で
 * コラム 12px / 詐欺サイト情報 16px / トップ 24px と割れていた。
 *
 * ⚠ 下限は px。rem にしない。
 *   --swl-fz--root: 100% にしてあるので rem は読者の文字設定に直結する。
 *   文字を大きくした読者ほど余白が広がり、本文の幅が狭くなる。逆効果になる。
 *   余白は組版の寸法であって、文字の寸法ではない。
 *
 * 20px は Material Design の 16dp、Apple HIG の 16〜20pt を踏まえた値。
 * ============================================================ */
:root { --sb-gutter: clamp(20px, 3vw, 2.5rem); }

/* 押せるものはダブルタップで拡大させない。

   iOS Safari は既定でダブルタップを拡大に割り当てている。
   ボタンを2回続けて押しただけで画面が拡大され、戻すのに操作が要る。
   実機のハンバーガーで踏んだ。

   manipulation はダブルタップ拡大と長押しの遅延だけを外す。
   **つまみでの拡大（ピンチ）は残る**ので、
   文字を大きくして読む手段は失われない。 */
a, button, input, select, textarea, summary, [role="button"] {
  touch-action: manipulation;
}

:root {
  --sb-dark:    #080B0C;   /* 暗い地。ヒーローの背景 */
  --sb-char:    #14181A;   /* 暗部の中の面 */
  --sb-paper:   #F1EEE7;   /* 明るい地。サイト共通のオフホワイト */
  --sb-paper-2: #F8F6F1;   /* 紙より一段明るい面。カード地 */
  --sb-ink:     #101214;   /* 本文の文字 */
  --sb-mute:    #63676A;   /* 補助の文字。写真の上でもコントラスト基準を満たす濃さ */
  --sb-rule:    rgba(16,18,20,.22);  /* 罫線 */
  /* 差し色。地の #F1EEE7 が黄み寄りなので、同系の暖色で揃える。
     寒色（旧 teal #1D6F68）は色相が反対側にあり、地から浮いていた。

     役割で3つに分ける。1色で全部はまかなえない。
     明度が中間の色は「地の上の文字」と「白文字を乗せる面」の
     どちらかで必ずコントラストが足りなくなるため。 */
  --sb-accent:      #B8642A;   /* 線・記号。地の上に置く小さな要素 */
  --sb-accent-deep: #96501F;   /* 面。白文字を乗せる（地の上 5.2:1 / 白文字 6.1:1） */
  --sb-accent-l:    #D9A066;   /* 暗い地の上で使う明るい方 */

  --sb-jp: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium",
           "Yu Gothic", "Noto Sans JP", "Meiryo", sans-serif;

  --sb-ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------
   SWELL へ渡す色

   SWELL のブロックは、アクセントを var(--color_main) で塗る。
   既定はカスタマイザーのメインカラーで、旧サイトの #a04141 のまま残っていた。
   キャプションボックスの見出し、FAQ の Q アイコン、アコーディオン、
   ボックスメニューなどが一斉にその色になる。

   白文字が乗る面に使われるので、--sb-accent（#B8642A）では
   コントラストが 4.29:1 で足りない。面用の --sb-accent-deep を渡す。

   SWELL は本文まわりの一部を var(--color_content_bg) で塗る。
   その値はカスタマイザーの背景色（既定 #ffffff）から来るので、
   こちらで body をオフホワイトにしただけでは食い違う。

   実例: ブログカードのキャプションは、枠線を隠すために
   地と同じ色で塗る作り。白のままだと帯だけ白く浮く。

   地の色は common.css で決めているので、SWELL へ渡す値もここで揃える。
   カスタマイザー側を変えると設定が2箇所に分かれるため、上書きで通す。
   ------------------------------------------------------------ */
.sb-app {
  --color_main:       var(--sb-accent-deep);
  --color_content_bg: var(--sb-paper);
}

/* リセット */
.sb-app * {
  box-sizing: border-box;
}

/* ここには swell_child（詐欺サイトDB）から複製された3ブロックがあった。
   2026-08-19 に削除。退避先は wp_BackUp/_removed_20260819/。

   ・body { user-select: none } と許可リスト
     許可リストに li が無く、利用規約とプライバシーポリシーの条文が
     iOS の長押しで選択・コピーできなかった。
     許可リストの後半3クラス（.sb-card__title / .sb-card__category /
     .sb-keywords__tag）はこのテーマに存在しない。
     このサイトに選択を止める理由のある要素が無いのでブロックごと外した。

   ・.sp-only（768px の @media 付き）
   ・.sb-ad-image
     どちらも *.php / *.js に一致 0件。電話の設計を読む人が
     .sp-only の 768px を「生きている改行制御」と誤読する。 */
.sb-logo { text-decoration: none; display: inline-flex; align-items: center; }
/* ⚠ 高さはここでは決めない。header-sticky.css の .sb-logo__img (0,1,0) が
   後から読まれて勝つため、ここに書いた値は全ページで死ぬ（実測 46px）。
   ヘッダーのロゴの寸法は header-sticky.css が一括で持つ。 */
.sb-logo__img { width: auto; display: block; }

/* ===========================================
   フッター（全ページ共通）
   =========================================== */
.sb-footer {
  position: relative;
  z-index: 1;
  background: #0A0C0D;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
}

.sb-footer .sb-footer__inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 5.5rem 3.5rem 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3.1fr);
  gap: 4rem;
  align-items: start;
}

.sb-footer__brand {
  max-width: 320px;
}

/* ⚠ フッターのロゴは class="sb-logo__img sb-footer__logo-img" の2枚重ね。
   高さを .sb-footer__logo-img (0,1,0) で書くと、後から読まれる
   header-sticky.css の .sb-logo__img (0,1,0) に負けて 46px になっていた。
   さらに 900px 以下では同ファイルの 38px まで巻き込まれ、
   ヘッダーの畳み幅を変えるとフッターのロゴまで動く状態だった。
   .sb-footer を前置して (0,2,0) にし、ヘッダー側と切り離す。 */
.sb-footer .sb-footer__logo-img {
  height: 48px;
  width: auto;
  margin-bottom: 1.25rem;
}

.sb-footer__desc {
  font-size: 0.8125rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

.sb-footer__nav {
  display: grid;
  /* ニュースレターの列を外したので3列（記事 / 詐欺データベース / サイトについて）。
     幅は中身に任せ、余りは左側へ寄せる。 */
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  /* メニューは右端へ。ロゴと説明文は左のまま、間を空けて対にする。
     各列の中の文字は左揃えのまま（項目が複数あるので、
     右揃えにすると行頭が揃わず読みにくい）。 */
  justify-content: end;
}

.sb-footer__nav-group {
  min-width: 110px;
}

.sb-footer__nav-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0 1rem;
}

.sb-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* 押せる高さを確保する。実測 17px。
   行間で稼ぐのではなく padding で広げ、リスト側の間隔を詰めて相殺する。 */
.sb-footer__nav-list a {
  /* 当たり判定を 44px に立てる。
     行の高さ（20px）に上下 12px ずつ足して 44px。
     inline-block のままだと高さを立てられないので flex にする。 */
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-block: .35rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s;
}

.sb-footer__nav-list a:hover {
  color: #fff;
}

/* ニュースレター */

/* ボトムバー */
.sb-footer .sb-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.5rem 3.5rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sb-footer__sns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.1rem;
}

.sb-footer__sns a {
  color: rgba(255, 255, 255, 0.35);
  display: block;
  transition: color 0.25s;
}

.sb-footer__sns a:hover { color: #fff; }

.sb-footer__copy { margin-left: auto; }

@media (max-width: 1100px) {
  .sb-footer .sb-footer__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 2rem 3rem;
  }
  .sb-footer .sb-footer__nav {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-content: start;
  }
}

@media (max-width: 768px) {
  .sb-footer .sb-footer__inner {
    gap: 2.25rem;
    padding: 3rem 1.5rem 2rem;
  }

  .sb-footer .sb-footer__brand {
    max-width: none;
  }

  .sb-footer .sb-footer__nav {
    gap: 2rem;
  }

  .sb-footer .sb-footer__bottom {
    padding: 1.25rem 1.5rem;
  }

  .sb-footer__copy { margin-left: 0; }
}