@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — 関連記事
 *
 * 記事の個別ページ共通。調査レポート / コラム / ニュースで使う。
 *
 * セレクタは全て .sb-rel を起点にした2クラス（詳細度 0,2,0）で書く。
 * SWELL の既定余白に勝つために必要な高さで、かつページ側の
 * クラスを前置しなくても済むので、そのまま持ち回せる。
 *
 * !important 使用禁止
 * ============================================================ */

.sb-rel {
  background: var(--sb-paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem);
  border-block-start: 1px solid var(--sb-rule);
  font-family: var(--sb-jp);
}

/* 台紙。記事の読み幅ではなく、この節だけの幅を持つ。
   調査レポート（1240px）とコラム（760px）で本文の幅が違うので、
   ここを各ページの器に任せるとカードの寸法が変わってしまう。
   左右の余白は .sb-art__shell と同じ式。 */
.sb-rel .sb-rel__shell {
  width: min(100% - var(--sb-gutter) * 2, 1240px);
  margin-inline: auto;
}

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

.sb-rel .sb-rel__h {
  margin: 0;
  padding-block-end: 1.1em;
  border-block-end: 1px solid var(--sb-rule);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--sb-ink);
}


/* カード3枚を横並び。縦長（クレジットカードを縦にした比率）。

   上半分は図版。記事にアイキャッチが入っていないことが多く、
   写真を敷く前提に立てない。代わりに罫の交差を図像として使う。
   ヒーローの版面（editorial-single.css）で縦罫と横罫を
   突き抜けさせて交差させた、その語彙をそのまま持ってきている。
   交差の位置はカードごとにずらすので、3枚が同じ絵にならない。

   下半分は日付と題名。数字は振らない。
   記事一覧の 01/02/03 は並び順に意味があるから付けているもので、
   関連記事の3件に順位は無い。 */
.sb-rel .sb-rel__list {
  display: grid;
  /* 列数は段で切らない。入るだけ入れる。
     カード1枚の下限を 16rem にしてあるので、
     1240px→4列 / 900px→3列 / 620px→2列 / 390px→1列 と自然に落ちる。
     項目は4件なので、広い画面でも4列を超えない。

     以前は 1080 / 900 / 620 の3つの段で列数を切っていた。
     記事ページには目次の段(900)とヒーローの段(768)もあり、
     1枚の画面に段が5本立っていた。 */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 1.6vw, 1.5rem);
  margin: 0;
  margin-block-start: clamp(1.75rem, 3vw, 2.5rem);
  padding: 0;
}

.sb-rel .sb-rel__link {
  display: grid;
  /* 丈は決めない。図版（下の aspect-ratio）と文字の量で決まる。
     カードは横並びの行の中で背の高いものに合わせて伸びるので、
     4枚の丈は自然に揃う。

     ⚠ grid-template-rows: 1fr 1fr で上下半分にはできない。
       1fr は中身の最小の高さより小さくなれないので、
       題名が長いカードほど下段が伸びて図版が潰れる。
       実測で 115〜141px とカードごとにばらついていた。 */
  grid-template-rows: auto 1fr;
  /* 行の中でいちばん背の高いカードに合わせて伸ばす。
     li は伸びるが、その中の a は中身の丈で止まるので、
     題名が短いカードだけ低くなっていた。 */
  height: 100%;
  border: 1px solid var(--sb-rule);
  background: var(--sb-paper);
  overflow: hidden;
  transition: background-color .25s var(--sb-ease), border-color .25s var(--sb-ease);
}

/* --- 上半分（図版） --- */
.sb-rel .sb-rel__figure {
  position: relative;
  overflow: hidden;
  /* 紙より一段明るい面。黒く塗ると4枚が重い塊になり、
     記事の締めくくりに置くには強すぎた。
     暗い面はホバーのときだけ出す。 */
  background: var(--sb-paper-2);
  border-block-end: 1px solid var(--sb-rule);
  transition: background-color .25s var(--sb-ease), border-color .25s var(--sb-ease);
  /* 図版の丈は幅から決める。カードの幅が変われば一緒に動く。
     文字の分量に引きずられないので、4枚とも同じ丈になる。 */
  aspect-ratio: 1 / .4;
  display: grid;
  align-content: end;
  padding: clamp(1rem, 1.6vw, 1.35rem);
}

/* 罫の交差。位置は --i（カードの並び順）でずらす。 */
.sb-rel .sb-rel__figure::before,
.sb-rel .sb-rel__figure::after {
  content: "";
  position: absolute;
  background: var(--sb-rule);
  transition: background-color .25s var(--sb-ease);
}
.sb-rel .sb-rel__figure::before {
  left: 0;
  right: 0;
  height: 1px;
  top: calc(30% + var(--i, 0) * 11%);
}
.sb-rel .sb-rel__figure::after {
  top: 0;
  bottom: 0;
  width: 1px;
  left: calc(24% + var(--i, 0) * 18%);
}

.sb-rel .sb-rel__kicker {
  position: relative;   /* 罫より前に出す */
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-ink);
  transition: color .25s var(--sb-ease);
}

/* --- 下半分（文字） --- */
/* 下半分。日付・題名・矢印。
   抜粋は置かない。カード幅 292px では1行 14 文字ほどにしかならず、
   読めるまとまりにならないうえ、題名を削ることになる。 */
.sb-rel .sb-rel__body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .55rem;
  padding: clamp(1rem, 1.6vw, 1.35rem);
  min-width: 0;
  overflow: hidden;
}

.sb-rel .sb-rel__date {
  font-size: .6875rem;
  color: var(--sb-mute);
  transition: color .25s var(--sb-ease);
}

.sb-rel .sb-rel__title {
  font-size: clamp(.875rem, 1.15vw, .9375rem);
  font-weight: 700;
  line-height: 1.75;
  color: #2A2E30;
  /* 行数では切らない。題名は「どの記事へ行くか」を決める主要情報で、
     途中で切れると判断できない。

     文字だけを拡大されると（ブラウザの標準文字サイズ、
     Firefox の文字のみズーム）3行に収まらず切れていた。
     実測: root 24px で中身184px に対し箱110px。

     丈は揃ったままになる。カードは grid-template-rows: auto 1fr auto で
     題名の行が余りを吸う作りなので、行数固定に頼っていない。
     実測: 1280px で外す前後とも 293px で4枚揃い、矢印も下端のまま。 */
  transition: color .25s var(--sb-ease);
}

.sb-rel .sb-rel__arrow {
  justify-self: end;
  align-self: end;
  font-size: 1rem;
  color: var(--sb-mute);
  transition: transform .24s var(--sb-ease), color .25s var(--sb-ease);
}

/* ----------------------------------------------------
   ホバー / フォーカス
   カード全体を黒へ反転する。
   記事一覧・トップの NEW ARTICLES と同じ振る舞い。
   ---------------------------------------------------- */
.sb-rel .sb-rel__link:hover,
.sb-rel .sb-rel__link:focus-visible {
  background-color: var(--sb-dark);
  border-color: var(--sb-dark);
}

.sb-rel .sb-rel__link:hover .sb-rel__figure,
.sb-rel .sb-rel__link:focus-visible .sb-rel__figure {
  background-color: var(--sb-dark);
  border-block-end-color: rgba(255,255,255,.22);
}
.sb-rel .sb-rel__link:hover .sb-rel__figure::before,
.sb-rel .sb-rel__link:hover .sb-rel__figure::after,
.sb-rel .sb-rel__link:focus-visible .sb-rel__figure::before,
.sb-rel .sb-rel__link:focus-visible .sb-rel__figure::after {
  background: rgba(255,255,255,.22);
}
.sb-rel .sb-rel__link:hover .sb-rel__kicker,
.sb-rel .sb-rel__link:focus-visible .sb-rel__kicker { color: #fff; }
.sb-rel .sb-rel__link:hover .sb-rel__title,
.sb-rel .sb-rel__link:focus-visible .sb-rel__title { color: #fff; }

.sb-rel .sb-rel__link:hover .sb-rel__date,
.sb-rel .sb-rel__link:focus-visible .sb-rel__date { color: rgba(255,255,255,.5); }


.sb-rel .sb-rel__link:hover .sb-rel__arrow,
.sb-rel .sb-rel__link:focus-visible .sb-rel__arrow {
  color: #fff;
  transform: translateX(5px);
}

/* 出現アニメーション。JS が is-in を付けるまでは伏せておく。 */
.sb-rel .sb-rel__item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--sb-ease), transform .7s var(--sb-ease);
  transition-delay: calc(var(--i, 0) * .1s);
}
.sb-rel .sb-rel__item.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .sb-rel .sb-rel__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}