@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — 記事一覧 /articles/
 *
 * 詐欺サイト情報・コラム・ニュースを1つの一覧にまとめる。
 * 投稿タイプごとの一覧は作らない。
 * タブは js/archive.js が遷移なしで差し替える。
 *
 * !important 使用禁止
 * ============================================================ */

/* 桁は .sb-arc 自身に持たせる。
   この組みは記事一覧と検索結果の2箇所で使うので、
   body のクラスに紐づけると片方で値が落ちる。 */
.sb-arc {
  --sb-arc-shell: 1080px;
  font-family: var(--sb-jp);
}

body.post-type-archive-article,
body.search {
  background: var(--sb-paper);
  color: var(--sb-ink);
}

.sb-arc :where(p, ul, ol, li, h1) {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.sb-arc :where(ul, ol) { list-style: none; }
.sb-arc a { text-decoration: none; color: inherit; }

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

/* ----------------------------------------------------
   左の縦罫

   本文の桁の外側に一本だけ引く。
   罫線と余白で組んできた紙面に、綴じ側の基準線を足す役。
   ページを縦に貫くので、見出し・タブ・一覧が
   同じ柱にぶら下がって見える。

   位置はシェルの左端から 5rem 外。
   シェルは中央寄せなので、左端は「画面の半分 − シェルの半分」。

   出すのは 1240px 以上に限る。
   シェル 1080px + 左右 80px ぶんの余地が要る。
   これより狭いと罫が画面の外へ出る。

   上端は帯の下から。天まで伸ばすとヘッダーの曇りガラスに透ける。
   ---------------------------------------------------- */
@media (min-width: 1240px) {
  .sb-arc { position: relative; }

  .sb-arc::before {
    content: "";
    position: absolute;
    inset-block-start: clamp(6rem, 12vh, 8.5rem);
    inset-block-end: 0;
    inset-inline-start: calc(50% - var(--sb-arc-shell) / 2 - 5rem);
    width: 1px;
    background: var(--sb-rule);
    pointer-events: none;
  }
}

/* ヘッダー（透明・黒ロゴ・黒文字）は css/components/overlay-header.css にある。
   body の .sb-overlay-header を見るので、固定ページ4枚と同じものが当たる。
   このページにクラスを付けているのは functions.php の body_class。 */

/* ====================================================
   見出し
   ==================================================== */
/* 上余白はここでは決めない。header-sticky.css が
   .sb-overlay-header 側 (0,2,0) で持っている（電話ぶんも含めて）。 */
.sb-arc__head {
  padding-block-end: clamp(2rem, 4vw, 3rem);
}

.sb-arc .sb-arc__kicker {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sb-mute);
}

.sb-arc .sb-arc__title {
  margin-block-start: clamp(.9rem, 1.8vw, 1.4rem);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #2A2E30;
}

.sb-arc .sb-arc__lead {
  margin-block-start: clamp(1.1rem, 2vw, 1.6rem);
  max-width: 44em;
  font-size: .9375rem;
  line-height: 2;
  color: rgba(16,18,20,.72);
}

/* ====================================================
   タブ
   ==================================================== */
.sb-arc__tabs {
  border-block-end: 1px solid var(--sb-rule);
}

/* ⚠ 折り返さない。カテゴリーが増えたら横に流す。

   折り返すと、1行目にいる現在のタブの下線が
   枠の罫から離れて宙に浮く（実測: 342px 幅・5タブで 75px 上）。
   罫は「タブの列の底」を示す線なので、
   列が2行になった時点で意味を失う。

   カテゴリーは管理画面から増やせる。増えるたびに崩れる作りにはしない。 */
.sb-arc__tabs .sb-arc__shell {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 横に流れることは、切れた次のタブが見えることで伝わる。
     細い横棒を出すと罫と紛らわしいので消す。 */
  scrollbar-width: none;
}
.sb-arc__tabs .sb-arc__shell::-webkit-scrollbar { display: none; }

.sb-arc .sb-arc__tablist {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.sb-arc .sb-arc__tab {
  display: block;
  padding-block: 1rem;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--sb-mute);
  border-block-end: 2px solid transparent;
  /* ⚠ margin-block-end: -1px を外した。
     スクロール枠の外へ 1px はみ出す指定で、枠に刈られるうえ
     縦方向のはみ出しを生む。下線は罫の上に重ねず、直上に置く。 */
  transition: color .2s var(--sb-ease), border-color .2s var(--sb-ease);
}
.sb-arc .sb-arc__tab:hover { color: var(--sb-ink); }
.sb-arc .sb-arc__tab.is-current {
  color: var(--sb-ink);
  border-block-end-color: var(--sb-ink);
}

/* タブの件数。数字は控えめに添える。 */
.sb-arc .sb-arc__count {
  margin-inline-start: .45em;
  font-size: .75em;
  font-weight: 400;
  color: rgba(16,18,20,.38);
  font-variant-numeric: tabular-nums;
}
.sb-arc .sb-arc__tab.is-current .sb-arc__count { color: var(--sb-mute); }

/* 差し替え中。中身が入れ替わるまでの短い間だけ薄くする。 */
.sb-arc [data-swap] {
  transition: opacity .18s var(--sb-ease);
}
.sb-arc.is-loading [data-swap] {
  opacity: .45;
  pointer-events: none;
}

/* ====================================================
   一覧
   ==================================================== */
.sb-arc__body {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}

.sb-arc .sb-arc__list {
  display: grid;
}

/* 行の区切りは li が持つ。
   リンク側に付けると、下の塗りを左右へはみ出させたときに
   罫線まで一緒に伸びて、見出しやタブとの縦の揃いが崩れる。 */
.sb-arc .sb-arc__item {
  border-block-end: 1px solid var(--sb-rule);
}

.sb-arc .sb-arc__link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(1.75rem, 3.2vw, 2.5rem);
  /* 塗りが文字の際で切れないよう、左右へ少しはみ出させる。
     同じ量を負のマージンで戻すので、文字の位置は動かない。
     最小値はシェルの左右余白の半分（12px）に合わせてある。
     これより大きくすると、狭い画面で横スクロールが出る。 */
  padding-inline: clamp(.75rem, 1.6vw, 1.25rem);
  margin-inline: calc(-1 * clamp(.75rem, 1.6vw, 1.25rem));
  transition: background-color .25s var(--sb-ease);
}

/* 番号の字面は、本文の見出しに振る番号（post-content.css）と揃える。
   一覧と記事とで数字の顔が変わると、別の指標に見える。 */
.sb-arc .sb-arc__num {
  font-family: "Helvetica Neue", Arial, var(--sb-jp), sans-serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: rgba(16,18,20,.28);
  font-variant-numeric: tabular-nums;
}

.sb-arc .sb-arc__text {
  display: grid;
  gap: .55rem;
  min-width: 0;
}

.sb-arc .sb-arc__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .9rem;
  font-size: .6875rem;
  color: var(--sb-mute);
}
.sb-arc .sb-arc__type {
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--sb-ink);
}

/* ⚠ h2。span から変えた（骨格に入れるため）。

   親テーマは見出しに余白と ::before の装飾を持たせている。
   消すのではなく、反対の値を明示して打ち消す（実装ルール 4-11）。
   見た目は span のときと同じままにする。 */
.sb-arc .sb-arc__item-title {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.6;
  color: #2A2E30;
}
.sb-arc .sb-arc__item-title::before,
.sb-arc .sb-arc__item-title::after { content: none; }

.sb-arc .sb-arc__excerpt {
  font-size: .8125rem;
  line-height: 1.9;
  color: var(--sb-mute);
  /* 行数では切らない。文字だけ拡大されたときに読めなくなる（F69 相当）。
     長さは PHP 側で決まっている（archive-editorial.php が
     wp_trim_words で60字）。HTML に出す時点で短くしてあるので、
     CSS で二重に切る必要がない。 */
}

.sb-arc .sb-arc__arrow {
  align-self: center;
  font-size: 1rem;
  color: var(--sb-mute);
  transition: transform .24s var(--sb-ease), color .24s var(--sb-ease);
}
.sb-arc .sb-arc__link:hover .sb-arc__arrow {
  transform: translateX(5px);
}

/* ----------------------------------------------------
   ホバー / フォーカスで白黒を反転する

   トップの New Articles（home.css の .sb-ed）と同じ扱い。
   一覧の見え方が2箇所で違うと、別の部品に見える。

   色を持つ要素は個別に transition を掛ける。
   親へまとめて掛けても、子の color は継承ではなく
   それぞれの指定で決まっているので追従しない。
   ---------------------------------------------------- */
.sb-arc .sb-arc__num,
.sb-arc .sb-arc__meta,
.sb-arc .sb-arc__type,
.sb-arc .sb-arc__item-title,
.sb-arc .sb-arc__excerpt,
.sb-arc .sb-arc__arrow {
  transition: color .25s var(--sb-ease);
}
.sb-arc .sb-arc__arrow {
  transition: transform .24s var(--sb-ease), color .25s var(--sb-ease);
}

.sb-arc .sb-arc__link:hover,
.sb-arc .sb-arc__link:focus-visible { background-color: var(--sb-ink); }

.sb-arc .sb-arc__link:hover .sb-arc__num,
.sb-arc .sb-arc__link:focus-visible .sb-arc__num { color: rgba(255,255,255,.82); }

.sb-arc .sb-arc__link:hover .sb-arc__meta,
.sb-arc .sb-arc__link:focus-visible .sb-arc__meta { color: rgba(255,255,255,.5); }

.sb-arc .sb-arc__link:hover .sb-arc__type,
.sb-arc .sb-arc__link:focus-visible .sb-arc__type { color: #fff; }

.sb-arc .sb-arc__link:hover .sb-arc__item-title,
.sb-arc .sb-arc__link:focus-visible .sb-arc__item-title { color: #fff; }

.sb-arc .sb-arc__link:hover .sb-arc__excerpt,
.sb-arc .sb-arc__link:focus-visible .sb-arc__excerpt { color: rgba(255,255,255,.55); }

.sb-arc .sb-arc__link:hover .sb-arc__arrow,
.sb-arc .sb-arc__link:focus-visible .sb-arc__arrow { color: #fff; }

.sb-arc .sb-arc__empty {
  padding-block: 4rem;
  text-align: center;
  color: var(--sb-mute);
}

/* ====================================================
   検索フォーム（検索結果ページ）

   枠で囲まず、下罫一本で受ける。
   サイト全体が罫線で組んであるので、入力欄もその流儀に乗せる。
   ==================================================== */
.sb-arc .sb-srch {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 34rem;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  border-block-end: 1px solid var(--sb-ink);
  transition: border-color .2s var(--sb-ease);
}

.sb-arc .sb-srch__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .55rem 0;
  border: 0;
  background: none;
  color: var(--sb-ink);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  /* Safari が検索欄に付ける内側の丸みと影を外す */
  -webkit-appearance: none;
  appearance: none;
}
.sb-arc .sb-srch__input::placeholder { color: rgba(16,18,20,.38); }
.sb-arc .sb-srch__input:focus { outline: none; }
.sb-arc .sb-srch:focus-within { border-block-end-color: var(--sb-accent); }

.sb-arc .sb-srch__btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 0 .55rem .5rem;
  border: 0;
  background: none;
  color: var(--sb-mute);
  font-family: inherit;
  font-size: .8125rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .2s var(--sb-ease);
}
.sb-arc .sb-srch__btn:hover { color: var(--sb-ink); }

/* 見つからなかったとき。謝るより先に、次の手を出す。 */
.sb-arc .sb-arc__empty-note {
  margin-block-start: 1rem;
  font-size: .875rem;
  line-height: 2;
  color: var(--sb-mute);
}

/* ====================================================
   ページ送り

   枠で囲んだボタンは使わない。
   このサイトは罫線と余白だけで組んであり、面を持つのは CTA だけ。
   四角を並べると、そこだけ既製のブログの体裁になる。

   一覧の下に余白を取り、数字を並べる。
   現在地は塗りではなく、数字の下の短い罫で示す。

   ここに横罫は引かない。一覧の各行がすでに罫で区切られていて、
   その直後にもう一本足すと線が二重に見える。
   区切りは余白だけで足りる。
   ==================================================== */
.sb-arc .navigation.pagination {
  margin-block-start: clamp(3.5rem, 7vw, 6rem);
}

.sb-arc .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* 箱が 2.75rem あるので、隙間はその分詰める。
     詰めないと数字どうしが離れすぎて一続きに見えない。

     ⚠ gap を1つで書かない。折り返したとき行間にも同じ値が効く。
       電話では7項目が収まらず2行になり、行間が列の隙間と同じだけ空いて
       ページ送りが2つの塊に割れて見えた（実機で確認）。
       行間は 0 にして、箱の高さ（2.75rem）だけで間を取る。 */
  column-gap: clamp(.25rem, 1vw, .75rem);
  row-gap: 0;
}

/* 親テーマが .page-numbers に枠と箱の寸法を当てているので、それを外す。

   ⚠ ここは「親テーマの打ち消し」だけを持つこと。
     字面（書体・太さ・色）まで同じルールに書くと (0,5,0) になり、
     下の「前へ / 次へ」「…」「ホバー」の指定が全部これに負ける。
     実測で「前へ」が 15px/700 で出ていた（意図は 13px/400）。
     字面は下の (0,3,0) 前後のルールに任せ、ここでは触らない。

   ⚠ 当たり判定は残す。min-width: 0 まで落としたら数字が 7.6×36px になり、
     電話で押せなくなっていた（実測）。WCAG 2.5.8 の 24×24 を最低線とし、
     指で押す前提で 44px を確保する。
     下線は text-decoration なので、箱を広げても位置はずれない。 */
.sb-arc .navigation.pagination .nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  height: auto;
  padding: 0 .25rem;
  /* ⚠ margin も打ち消す。親テーマが各項目に 6px を当てている。
     打ち消さないと項目7つで 84px が余分に要り、
     390px の画面で「次へ」だけ2行目へ落ちていた（実機で確認）。
     間隔は親の gap で取る。 */
  margin: 0;
  border: 0;
  background: none;
}

/* 数字の字面。一覧の番号・本文の見出し番号と揃える。
   詳細度は (0,2,0)。下の「前へ / 次へ」(0,3,0) に譲る。 */
.sb-arc .page-numbers {
  font-family: "Helvetica Neue", Arial, var(--sb-jp), sans-serif;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: rgba(16,18,20,.38);
  transition: color .2s var(--sb-ease);
}
.sb-arc .nav-links a.page-numbers:hover { color: var(--sb-ink); }

/* 現在地。数字の下に短い罫を引く。

   ::after の絶対配置ではなく text-decoration を使う。
   下線が箱ではなく「文字そのもの」に付くので、
   親テーマが箱へ min-width や padding を足しても幅がずれない。 */
.sb-arc .navigation.pagination .nav-links .page-numbers.current {
  color: var(--sb-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .55em;
}

/* 省略記号。数字より一段引いて、間を示すだけにする。 */
.sb-arc .nav-links .page-numbers.dots {
  font-weight: 400;
  letter-spacing: .1em;
  color: rgba(16,18,20,.26);
}

/* 前へ / 次へ。数字と役割が違うので、字面も文章側へ寄せる。 */
.sb-arc .nav-links .prev,
.sb-arc .nav-links .next {
  gap: .55rem;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--sb-mute);
}
.sb-arc .nav-links .prev::before,
.sb-arc .nav-links .next::after {
  transition: transform .24s var(--sb-ease);
}
.sb-arc .nav-links .prev::before { content: "\2190"; }
.sb-arc .nav-links .next::after  { content: "\2192"; }
.sb-arc .nav-links .prev:hover::before { transform: translateX(-4px); }
.sb-arc .nav-links .next:hover::after  { transform: translateX(4px); }

/* 見出し「投稿のページ送り」は nav 直下にあり、.nav-links の外。
   セレクタを .nav-links に閉じると当たらない。 */
.sb-arc .navigation .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* 検索結果 0件のときの導線。
   実体は page-base.css の .sb-pg__link だが、検索結果のルートは
   .sb-arc なので .sb-pg が無く、そのファイル自体も読まれない。
   さらに .sb-arc a { text-decoration: none; color: inherit } が当たり、
   本文と見分けが付かなくなっていた（実測: 下線なし・枠なし・同色）。 */
.sb-arc .sb-pg__link {
  display: inline-block;
  padding-block-end: .35rem;
  border-block-end: 1px solid var(--sb-rule);
  color: var(--sb-ink);
  transition: border-color .2s var(--sb-ease);
}
.sb-arc .sb-pg__link:hover { border-block-end-color: var(--sb-ink); }

/* ====================================================
   レスポンシブ
   ==================================================== */
@media (max-width: 768px) {
  /* ヘッダーを畳む指定は header-sticky.css が持つ。
     overlay-header.css には @media が1つも無い（色だけのファイル）。 */
  .sb-arc .sb-arc__link {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
  }
  .sb-arc .sb-arc__arrow { display: none; }

  /* ページ送りは1行に収める。

     ⚠ 折り返させてはいけない。「前へ」と「次へ」が別々の行の端に散り、
       どこを押せば進むのか読めなくなる（実機で確認）。

     収めるために2つ効かせる。
       ・「前へ / 次へ」の文字を折り返させない
         （44px の最小幅に対して文字がはみ出し、2行になって丈が72pxあった）
       ・当たり判定の最小幅を 44 → 40px に緩める
         WCAG 2.2 の AA は 24×24 なので基準は満たす。
         44px は AAA の値で、ここは1行に収めることを優先する。 */
  .sb-arc .navigation.pagination .nav-links .page-numbers {
    min-width: 2.5rem;
    white-space: nowrap;
  }
}