@charset "UTF-8";
/* ============================================================
 * 詐欺バスターズ — フロントページ
 * 「見えているものと、真実は違う。」
 * 暗闇 → 光 → 調査 → 理解 → 明るい部屋
 * !important 使用禁止
 * ============================================================ */

/* 色・書体・イージングは css/base/common.css の :root で共有している。
   ここではトップページ固有の値だけを持つ。 */

/* ヒーローのドア位置（画像内の割合）— ズーム基点とフレアはこの値に紐づく */
:root {
  --door-x: 62.8%;
  --door-y: 53.7%;
  --door-l: 59.1%;
  --door-t: 33.7%;
  --door-w: 7.4%;
  --door-h: 40%;
}

body.home {
  background: var(--sb-paper);
  color: var(--sb-ink);
  font-family: var(--sb-jp);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* SWELL 側のリセット・余白を front-page 内で無効化 */
.home .sb-hero-pin *,
.home .sb-light * { box-sizing: border-box; }

.home .sb-light h1,
.home .sb-light h2,
.home .sb-light h3,
.home .sb-light p,
.home .sb-light figure,
.home .sb-light ul {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
}
.home .sb-light h2::before,
.home .sb-light h2::after,
.home .sb-light h3::before,
.home .sb-light h3::after { content: none; }

.home .sb-light { display: block; }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 共通シェル */
.sb-shell {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  /* 左右の余白は全ページ共通のトークン（common.css の --sb-gutter）。
     ここだけ広く取っていたため、トップと記事で端の位置が揃っていなかった。 */
  padding-inline: var(--sb-gutter);
}

/* ============================================================
 * HEADER — Hero上は透明・白文字、光に入ったら白背景・黒文字
 *
 * 寸法と組み方（ロゴの高さ、余白、メニューの畳み方）は
 * header-sticky.css が全ページ共通で持っている。
 * ここが持つのは色だけ。
 * ============================================================ */
.home .sb-header {
  /* ヒーローの pin より下、本文より上。 */
  z-index: 90;
}

/* ナビの文字色。--sb-nav-fg は検索の入力欄とその下線が見る。
   色を足すときは a / __search / 変数の3つを揃えること。 */
.home .sb-header { --sb-nav-fg: rgba(255,255,255,.72); }
.home .sb-nav a {
  color: rgba(255,255,255,.78);
}
.home .sb-nav a:hover { color: #fff; }


/* 光の中へ入った後。
   帯の地（曇りガラス）は header-sticky.css が .sb-header に持っている。
   ここで .sb-header__main に地を敷かないこと。
   桁は 1560px で中央に寄せているので、帯が全幅にならず途中で切れる。 */
.home.is-lit .sb-logo__img--white { opacity: 0; }
.home.is-lit .sb-logo__img--black { opacity: 1; }
.home.is-lit .sb-header { --sb-nav-fg: rgba(16,18,20,.68); }
.home.is-lit .sb-nav a { color: rgba(16,18,20,.68); }
.home.is-lit .sb-nav a:hover { color: var(--sb-ink); }

/* 検索アイコン */
.home .sb-nav__search { color: rgba(255,255,255,.72); }
.home .sb-nav__search:hover { color: #fff; }
.home.is-lit .sb-nav__search { color: rgba(16,18,20,.68); }
.home.is-lit .sb-nav__search:hover { color: var(--sb-ink); }

/* キーボードフォーカスは常に見える状態を保つ */
.home a:focus-visible,
.home button:focus-visible,
.home input:focus-visible {
  outline: 2px solid var(--sb-accent-l);
  outline-offset: 3px;
}

/* 狭い画面でメニューを畳む指定は header-sticky.css が全ページぶん持つ */

/* ============================================================
 * HERO
 * ============================================================ */
/* pin / スクロール距離は ScrollTrigger が管理する。CSS は 100vh の見た目だけ持つ */
.sb-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--sb-dark);
  z-index: 3;
}

/* Hero の最後の半画面に Pick Up を重ね、白いだけの間を半分に詰める。
   pin 中は Hero が上（z-index は GSAP が .pin-spacer にコピーする）。
   光が抜けきったところで JS がスペーサーを下げ、Pick Up が前面に出る。 */
/* 着地時に Pick Up の頭が画面上端へ来る条件:
     画面高 − マージン − 行き過ぎ量 = 0
   JS 側の landingY() の係数（0.05）と対で決まる値なので、
   どちらか一方だけ変えると位置がずれる。 */
.has-hero-pin .sb-light {
  margin-block-start: -95vh;
  margin-block-start: -95svh;
}

/* --- 写真ステージ --- */
.sb-hero__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* 3:2 の画像を cover 相当で配置（寸法が既知なのでドア座標が常に一致する） */
.sb-hero__frame {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: max(100vw, 150vh);
  height: max(100vh, 66.6667vw);
  transform: translate(-50%, -50%);
}
.sb-hero__zoom {
  position: absolute;
  inset: 0;
  transform-origin: var(--door-x) var(--door-y);
  will-change: transform;
}
.sb-hero__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 周辺の沈み込み — ズームしないので、壁やドア枠がグレーのまま残らない。
   前進するほど部屋が闇に沈み、見えるのは光だけになる */
.sb-hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 78% 78% at var(--door-x) var(--door-y),
      rgba(8,11,12,0) 32%,
      rgba(8,11,12,.82) 100%);
  opacity: 0;
  pointer-events: none;
}

/* 開口部からあふれる光のにじみ。ズームの内側にあるのでドアと同じ倍率で育つ。
   単体で先に膨らませないこと（ドアに入る前に光が広がって見える） */
.sb-hero__flare {
  position: absolute;
  inset-block-start: var(--door-t);
  inset-inline-start: var(--door-l);
  width: var(--door-w);
  height: var(--door-h);
  transform-origin: 50% 50%;
  /* closest-side にしないと要素の矩形で切れて縁が出る */
  background: radial-gradient(ellipse closest-side at center,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.7) 55%, rgba(255,255,255,0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* 最後に紙の色へ着地させる層。画面はすでに白なので視覚的には無音 */
.sb-hero__wash {
  position: absolute;
  inset: 0;
  background: var(--sb-paper);
  opacity: 0;
  pointer-events: none;
}

/* --- コピー --- */
.sb-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  will-change: transform, opacity;
}
.sb-hero__title {
  font-size: clamp(2.115rem, 4.5vw, 4.14rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: .01em;
  color: #fff;
  margin: 0 0 clamp(1.5rem, 2.4vw, 2.2rem);
  text-shadow: 0 2px 40px rgba(0,0,0,.4);
}
.sb-hero__lead {
  font-size: clamp(.8125rem, 1.02vw, .9375rem);
  line-height: 2.05;
  color: rgba(255,255,255,.72);
  /* 背景写真の右側（ドアの光）に重なると読めなくなる。
     実機の iPhone で「あなたの…」以降が消えていた。
     幅の狭い画面ほど文字が明るい部分まで伸びるので起きる。

     ⚠ タイトルと同じ `0 2px 40px rgba(0,0,0,.4)` では効かない。
       40px のぼかしは光を薄く広げるだけで、白に近い地には負ける。
       実機で確認したが2行目が読めないままだった。
       リード文は字が細いので、**ぼかしを絞って濃く**する。
       近距離の影で字の輪郭を起こし、遠距離の影で地を沈める2枚重ね。 */
  text-shadow:
    0 1px 2px rgba(0,0,0,.85),
    0 2px 18px rgba(0,0,0,.6);
  margin: 0 0 clamp(2rem, 3.2vw, 3rem);
  max-width: 34rem;
}
.sb-hero__actions {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  flex-wrap: wrap;
}

/* 細い枠のボタン */
.sb-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.75rem;
  margin-block-start: 1rem;
  padding: .95em 1.6em;
  border: 1px solid rgba(255,255,255,.42);
  color: #fff;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-decoration: none;
  transition: border-color .4s var(--sb-ease), background-color .4s var(--sb-ease);
}
.sb-btn:hover { border-color: #fff; background: rgba(255,255,255,.07); }
.sb-btn__arrow { transition: transform .4s var(--sb-ease); }
.sb-btn:hover .sb-btn__arrow { transform: translateX(5px); }

.sb-btn--dark {
  border-color: rgba(16,18,20,.28);
  color: var(--sb-ink);
}
.sb-btn--dark:hover { border-color: var(--sb-ink); background: rgba(16,18,20,.04); }


/* ============================================================
   ENTER — ドアをくぐる入口

   押すと自動スクロールが始まる。文字は常に出したままにして、
   円は触れたときだけ現れる。静かな画面に輪郭を常設すると
   写真の中に別の面ができて、ドアより先に目が行ってしまう。

   円は2本重ねてある。細い線が本体で、
   ぼかした太い線を後ろに敷いて光彩にしている。
   ============================================================ */
.sb-hero__enter {
  position: absolute;
  /* 画面の底に貼り付けず、少し持ち上げる。
     ドアの光と文字のあいだに間を置いて、押せるものだと見せる。 */
  /* 矢印は画面の下端近くまで落とす。円はそこから間を置いて上に浮く。 */
  inset-block-end: clamp(1.5rem, 4vh, 3rem);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 4.5vh, 3.25rem);

  /* 押せるのは円だけ。この箱は矢印まで含めて縦に長いので、
     ここで拾うと、下から近づいただけで円が反応する。 */
  pointer-events: none;
}

/* 枠。押せるのはここ。 */
.sb-hero__enter-disc {
  position: relative;
  display: grid;
  place-items: center;
  /* ヒーローのコピーとぶつからない範囲でいちばん大きく取る。
     矢印の長さと下の余白と合わせて決めた値なので、
     どれか一つだけ動かすとコピーに重なる。 */
  width: clamp(7.5rem, 10vw, 9.5rem);
  height: clamp(7.5rem, 10vw, 9.5rem);
  padding: 0;
  border: 0;
  /* 角は落とさない。サイト全体が直角で組んである。 */
  border-radius: 0;
  background: none;
  /* button は書体を継承しない。指定しないと OS 既定の字面になる。 */
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  pointer-events: auto;
}

/* 枠線だけの箱。触れていないあいだも、ごく薄く出しておく。
   完全に消すと、押せる場所がどこまでか分からない。

   ボタンより一回り大きく取る。光が外へ広がる余地がないと、
   Safari は SVG のビューポート端で断ち切ってしまう。
   viewBox（150）と合わせて、枠そのものの実寸は変わらない。

   はみ出したぶんが当たり判定を広げないよう、ここは触れなくする。
   広がったままだと、枠の外にカーソルを置いただけで線が走り出す。 */
.sb-hero__enter-ring {
  position: absolute;
  inset: -25%;
  display: block;
  pointer-events: none;
}
.sb-hero__enter-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  /* 回転させないこと。描き始めはパス側（上辺の中央）で決めてある。
     円だった頃の名残で rotate を残すと、箱が 90 度傾く。 */
  /* ぼかした光彩が矩形で切れないようにする */
  overflow: visible;
}

.sb-hero__enter-ring path {
  fill: none;
  stroke-width: 1;
  /* vector-effect: non-scaling-stroke は使わないこと。
     線の太さだけでなく破線の長さまで画面の px で数えるようになり、
     stroke-dasharray（パスの座標系で 388）と単位が食い違う。
     枠は 100 の viewBox を 152px で描くので実長は 590px になり、
     388 だけ隠しても 202px ぶんが出たまま残る。 */
}

/* 常に出ている輪郭。写真より前へ出ない濃さに留める。 */
.sb-hero__enter-base {
  stroke: rgba(255,255,255,.18);
  transition: stroke .4s var(--sb-ease);
}

/* 触れたときに一周する線と、その光。
   パスの全長は 48.5 + 97×3 + 48.5 = 388。
   一周ぶんずらして隠しておき、触れたら 0 まで戻して描かせる。
   薄い輪郭の上を明るい線がなぞる形になる。 */
.sb-hero__enter-line,
.sb-hero__enter-glow {
  stroke-dasharray: 388;
  stroke-dashoffset: 388;
  /* ここで --sb-ease は使わない。
     あれは強いイーズアウトで、0.13 秒で 4割、0.25 秒で 7割まで描いてしまう。
     入りは「パッと光った」ようにしか見えず、
     戻りだけ（カーブが反転するので）ちゃんと動いて見える。
     線が一定の速さで伸びるよう、立ち上がりを寝かせたカーブにする。 */
  transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1);
}
/* 光は枠ではなく、この線そのものに付ける。
   外側の span に掛けると、常に出ている薄い輪郭まで光ってしまい、
   触れた瞬間に四辺が一斉に光る。
   線に掛ければ、描かれたところにしか出ない＝光が線と一緒に走る。

   光の作り方は front-page.php の #sb-enter-bloom。
   CSS の drop-shadow は使わない。Safari では描画領域が狭く、
   外へ広がるぶんが切られてほとんど見えなくなる。 */
.sb-hero__enter-line {
  stroke: #fff;
  filter: url(#sb-enter-bloom);
}

/* 芯のにじみ。同じ形をもう一枚、太くして重ねる。
   これも破線なので、描かれたところにしか出ない。
   opacity は最初から乗せておく。ホバーで足すと、
   走っている線の後ろで面がふわっと明るくなって二重に見える。 */
/* .sb-hero__enter-ring path が (0,1,1) で太さを持っているので、
   クラス単独 (0,1,0) では負けて効かない。
   .sb-hero__enter-ring を前に置いて (0,2,0) にする。
   ここを 1 より大きくすると、芯が太って光全体が重くなる。 */
.sb-hero__enter-ring .sb-hero__enter-glow {
  stroke: #fff;
  stroke-width: 1;
  filter: url(#sb-enter-bloom);
  opacity: .4;
}

.sb-hero__enter-label {
  position: relative;
  font-size: 1rem;
  letter-spacing: .32em;
  /* 字送りは最後の文字の右にも付く。そのぶん左へずれて見えるので戻す。 */
  text-indent: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  transition: color .4s var(--sb-ease);
}

/* 進む向きの目印。枠の外、下に置く。
   枠と違って常に出しておく。薄い輪郭だけのときは、
   これが「押せる」いちばんの手がかりになる。

   折れ目は miter で尖らせ、端も切り落とす。
   丸めると鈍って、線というより記号に見える。 */
.sb-hero__enter-arrow {
  display: block;
  width: 20px;
  height: 74px;
  stroke: rgba(255,255,255,.5);
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  transition: stroke .4s var(--sb-ease), transform .2s var(--sb-ease);
}

/* 塗りは path に直接切る。
   svg 側に fill: none と書いても、親テーマが svg path へ
   直接 fill を当てていると継承より強く、そちらが勝つ。
   縦線と跳ね上げを1本の path にしたので、
   囲まれた三角形がそのまま塗られて塊に見えていた。 */
.sb-hero__enter-arrow path {
  fill: none;
}

/* 触れたら、光をまとった線が上辺の中央から一周する。
   右上 → 右下 → 左下 → 左上 → 上辺の中央、の順で戻ってくる。
   順路はパスの書き順で決まっている（front-page.php）。 */
.sb-hero__enter-disc:hover .sb-hero__enter-line,
.sb-hero__enter-disc:hover .sb-hero__enter-glow,
.sb-hero__enter-disc:focus-visible .sb-hero__enter-line,
.sb-hero__enter-disc:focus-visible .sb-hero__enter-glow { stroke-dashoffset: 0; }

/* 薄い輪郭は消さずに残す。
   明るい線がまだ届いていない側を、そのまま見せておくため。
   消すと、描いている途中だけ枠が欠けて見える。 */

/* 描き終わってから息をつかせる。
   待ちは線を描き終える時間（.9s）と揃える。
   ずれると、まだ走っている途中で明滅が始まる。 */
.sb-hero__enter-disc:hover .sb-hero__enter-glow,
.sb-hero__enter-disc:focus-visible .sb-hero__enter-glow {
  animation: sb-enter-glow 2.6s ease-in-out .9s infinite;
}

.sb-hero__enter-disc:hover .sb-hero__enter-label,
.sb-hero__enter-disc:focus-visible .sb-hero__enter-label { color: #fff; }

/* 矢印はわずかに下へ。押した先で何が起きるかを、動きで示す。 */
.sb-hero__enter-disc:hover + .sb-hero__enter-arrow,
.sb-hero__enter-disc:focus-visible + .sb-hero__enter-arrow {
  stroke: #fff;
  transform: translateY(3px);
}

/* 0% は静止値と同じにしておく。
   ずれていると、待ち時間が明けた瞬間に光の強さが跳ねる。 */
@keyframes sb-enter-glow {
  0%, 100% { opacity: .4; }
  50%      { opacity: .8; }
}

/* 動きを減らす設定では、線を引かず明滅もさせない。光は出したままにする。 */
@media (prefers-reduced-motion: reduce) {
  .sb-hero__enter-ring path { transition: none; }
  .sb-hero__enter-disc:hover .sb-hero__enter-glow,
  .sb-hero__enter-disc:focus-visible .sb-hero__enter-glow { animation: none; }
  .sb-hero__enter-disc:hover + .sb-hero__enter-arrow,
  .sb-hero__enter-disc:focus-visible + .sb-hero__enter-arrow { transform: none; }
}

@media (max-width: 768px) {
  .sb-hero__content { align-items: flex-end; padding-bottom: 22vh; }
  .sb-hero__title { font-size: clamp(1.8rem, 7.56vw, 2.61rem); }
}

/* ============================================================
   丈の足りない画面（電話の横向き）

   ⚠ 幅ではなく高さで切る。原因は高さだから。

   横向きの iPhone 15 は 758×393。幅は 768px 以下なので
   上の指定（下寄せ + 22vh の下余白）が当たるが、
   丈が足りず中身が上へあふれ、見出しがヘッダーへ潜ってロゴにぶつかる。
   実測: 見出し「真実は違う。」がロゴと重なって両方読めない。

   中身の丈:  見出し2行 107px + 余白 24 + リード2行 53 + ボタン 96 = 280px
   使える丈:  ヒーロー 340px − 下余白 86px = 254px    → 26px 足りない

   下余白を削り、見出しを丈に対する比（vh）で決める。
   横向きは幅に余裕があるので、vw で決めると大きくなりすぎる。
   ============================================================ */
@media (max-height: 500px) {
  .sb-hero__content { padding-bottom: 8vh; }
  .sb-hero__title {
    font-size: clamp(1.5rem, 6.2vh, 2.2rem);
    margin-block-end: .8rem;
  }
  .sb-hero__lead { line-height: 1.75; }
}

/* ============================================================
   タッチ端末のヒーロー

   ENTER の円盤を出さない。理由は2つ。

   1. **重なる。** 円盤は position: absolute で画面中央に置いてあり、
      CTA ボタンの上に乗っていた。
      実測（390×844）: CTA x24〜296・y448〜514 に対し
      円盤 x100〜220・y434〜554。押すと記事一覧ではなく自動スクロールが始まる。
      768px の padding-bottom: 22vh は逃がすつもりの指定だが、
      円盤の寸法と連動していないので足りていない。

   2. **光らない。** 枠線が描かれる演出は :hover と :focus-visible に
      しか紐づいていない（450-465行）。タッチ端末では一度も発火せず、
      18% の薄い輪郭が出たままになる。押せるものだと読めない。

   矢印は残す。下へ続くことを示す役目は、触れなくても働く。
   自動スクロールも電話では要らない（指でスクロールするため）。
   ============================================================ */
@media (hover: none) {
  .sb-hero__enter-disc { display: none; }
}

/* ============================================================
 * ライトセクション共通
 * ============================================================ */
.sb-light {
  position: relative;
  z-index: 2;
  background: var(--sb-paper);
}

.home .sb-light .sb-eyebrow {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(16,18,20,.55);
  margin: 0 0 clamp(1.25rem, 2vw, 2rem);
}

/* スクロールリビール — 静かに、わずかに遅れて */
.sb-r {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1.05s var(--sb-ease),
    transform 1.05s var(--sb-ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.sb-r.is-in { opacity: 1; transform: none; }

.sb-r--mask {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--sb-ease);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.sb-r--mask.is-in { clip-path: inset(0 0 0 0); }

/* 光の中から滲み出てくる要素。CSS では隠さない（JS 未実行でも読める）。
   状態は Hero の timeline が scrub で直接書き込む。 */
.sb-em { will-change: opacity, transform, filter; }

/* 画像プレースホルダー（素材未配置時） */
.sb-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #23282a, #3a4144);
}
.sb-ph__name {
  font-size: .625rem;
  letter-spacing: .14em;
  color: rgba(255,255,255,.42);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding: .4em .8em;
  border: 1px solid rgba(255,255,255,.18);
}

/* ============================================================
 * PICK UP
 * ============================================================ */
.sb-pickup {
  padding-block: clamp(4.5rem, 9vw, 8.5rem) 0;
}
.sb-pickup__grid {
  display: grid;
  grid-template-columns: minmax(0, 37fr) minmax(0, 63fr);
  gap: clamp(2rem, 4.5vw, 5rem);
  align-items: start;
}
/* 画像の上端と同じ線から始める。
   ここに余白を入れると、左右で始まりの位置がずれて紙面が散る。
   Case 行と写真の縁が一本の線で揃うのが、この段組の骨。 */
.sb-pickup__text { padding-block-start: 0; }

.home .sb-light .sb-caseno {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(16,18,20,.5);
  /* CASE 行と見出しの間を広げる */
  margin: 0 0 clamp(2.5rem, 4.5vw, 4rem);
}
.sb-caseno__rule {
  flex: 1;
  height: 1px;
  background: var(--sb-rule);
  max-width: 8rem;
}

/* SWELL リセット（.home .sb-light h2 = 0,2,1）に勝たせて下余白を効かせる。
   クラス単独 (0,1,0) では負けるので、margin だけが無効になっていた。
   リード側と同じ対策。片方だけ直すと、また同じ所で止まる。 */
.home .sb-light .sb-pickup__title {
  font-size: clamp(1.62rem, 3.32vw, 2.3rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: .005em;
  margin: 0 0 clamp(1.25rem, 2vw, 1.75rem);
}
.sb-pickup__title a {
  color: var(--sb-ink);
  text-decoration: none;
  transition: color .4s var(--sb-ease);
}
.sb-pickup__title a:hover { color: var(--sb-accent); }

/* SWELL リセット（.home .sb-light p = 0,2,1）に勝たせて下余白を効かせる */
.home .sb-light .sb-pickup__lead {
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  font-weight: 700;
  line-height: 2.1;
  color: rgba(16,18,20,.66);
  margin: 0 0 clamp(2.5rem, 4vw, 3.5rem);
  max-width: 28rem;
}

/* 下線つきテキストリンク */
.sb-more {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-size: .8125rem;
  letter-spacing: .06em;
  color: var(--sb-ink);
  text-decoration: none;
  padding-block-end: .7rem;
  border-bottom: 1px solid var(--sb-rule);
  transition: border-color .4s var(--sb-ease);
}
.sb-more:hover { border-bottom-color: var(--sb-ink); }
.sb-more__arrow { transition: transform .4s var(--sb-ease); }
.sb-more:hover .sb-more__arrow { transform: translateX(5px); }

.sb-pickup__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sb-char);
}
.sb-pickup__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 860px) {
  .sb-pickup__grid { grid-template-columns: 1fr; }
  .sb-pickup__media { aspect-ratio: 4 / 3; }
}

/* ============================================================
 * NEW ARTICLES — 罫線で仕切った番号付きの一覧。写真は使わない
 * ============================================================ */
.sb-editorial {
  padding-block: clamp(1.75rem, 3vw, 3rem) clamp(2.5rem, 4.5vw, 4.5rem);
}

/* 見出しの下に余白をとる（横罫線は使わない） */
.home .sb-light .sb-eyebrow--rule { margin-block-end: clamp(2.25rem, 3.6vw, 3.25rem); }

/* 塗りは持たせず、各セルの 1px リングだけで罫線を描く。
   隣り合うリングは 1px の隙間で重なるので線は太らない。 */
.sb-editorial__grid {
  display: grid;
  /* 01:02 を 7:3 にするため 30 分割。3列の段は 10 ずつ */
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 1px;
}

/* 01 と 02 は 6:4。03〜05 は3等分。06 は全幅 */
.sb-ed:nth-child(1) { grid-column: span 18; }
.sb-ed:nth-child(2) { grid-column: span 12; }
.sb-ed:nth-child(3),
.sb-ed:nth-child(4),
.sb-ed:nth-child(5) { grid-column: span 10; }
.sb-ed:nth-child(6) { grid-column: span 30; }

/* 03〜05 の段はもう少し高さがほしい */
.sb-ed:nth-child(3),
.sb-ed:nth-child(4),
.sb-ed:nth-child(5) { min-height: clamp(17rem, 24vw, 21rem); }
.sb-ed:nth-child(1),
.sb-ed:nth-child(2) { min-height: clamp(15rem, 21vw, 18.5rem); }

.sb-ed {
  position: relative;
  margin: 0;
  box-shadow: 0 0 0 1px var(--sb-rule);
  padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.25rem, 2vw, 1.9rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: start;
}

/* 通し番号 — 和文ゴシックに対して細い欧文セリフを当てて対比をつける */
.sb-ed__num {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(16,18,20,.72);
  font-variant-numeric: tabular-nums;
}
.sb-ed:nth-child(1) .sb-ed__num { font-size: clamp(2.5rem, 4vw, 3.75rem); }

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

.sb-ed__meta {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(16,18,20,.45);
  margin: 0;
}
.sb-ed__kicker {
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--sb-ink);
}

.home .sb-light .sb-ed__title {
  font-size: clamp(1rem, 1.2vw, 1.1875rem);
  font-weight: 700;
  line-height: 1.65;
  text-wrap: pretty;
  margin: .9rem 0 0;
}
.sb-ed:nth-child(1) .sb-ed__title {
  font-size: clamp(1.25rem, 1.75vw, 1.75rem);
  line-height: 1.5;
}
.sb-ed__title a {
  color: var(--sb-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--sb-ink), var(--sb-ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .55s var(--sb-ease);
}
.sb-ed__title a:hover { background-size: 100% 1px; }

.home .sb-light .sb-ed__desc {
  font-size: .8125rem;
  line-height: 1.95;
  color: rgba(16,18,20,.5);
  margin: 1rem 0 0;
  max-width: 34rem;
}
.sb-ed:nth-child(1) .sb-ed__desc { font-size: .875rem; }

.sb-ed__arrow {
  display: inline-block;
  margin-block-start: 1.4rem;
  font-size: 1.25rem;
  line-height: 1;
  color: rgba(16,18,20,.45);
  text-decoration: none;
  transition: transform .4s var(--sb-ease), color .4s var(--sb-ease);
}
.sb-ed:hover .sb-ed__arrow { color: var(--sb-ink); transform: translateX(5px); }

/* --- フォーカス時に白黒を反転させる --------------------------- */
.sb-ed {
  transition: background-color .32s var(--sb-ease);
}
.sb-ed__num,
.sb-ed__meta,
.sb-ed__kicker,
.sb-ed__desc,
.sb-ed__arrow,
.sb-ed__title a {
  transition: color .32s var(--sb-ease);
}

.sb-ed:hover,
.sb-ed:focus-within { background-color: var(--sb-ink); }

.sb-ed:hover .sb-ed__num,
.sb-ed:focus-within .sb-ed__num { color: rgba(255,255,255,.82); }

.sb-ed:hover .sb-ed__meta,
.sb-ed:focus-within .sb-ed__meta { color: rgba(255,255,255,.5); }

.sb-ed:hover .sb-ed__kicker,
.sb-ed:focus-within .sb-ed__kicker { color: #fff; }

.sb-ed:hover .sb-ed__arrow,
.sb-ed:focus-within .sb-ed__arrow { color: #fff; }

/* タイトルと本文は基底が .home .sb-light 付きなので前置きを揃える */
.home .sb-light .sb-ed:hover .sb-ed__title a,
.home .sb-light .sb-ed:focus-within .sb-ed__title a {
  color: #fff;
  background-image: linear-gradient(#fff, #fff);
}
.home .sb-light .sb-ed:hover .sb-ed__desc,
.home .sb-light .sb-ed:focus-within .sb-ed__desc {
  color: rgba(255,255,255,.55);
}

.sb-editorial__more {
  margin: clamp(2rem, 3.2vw, 3rem) 0 0;
  text-align: center;
}

@media (max-width: 1000px) {
  .sb-ed:nth-child(n) { grid-column: span 15; min-height: 0; }
  .sb-ed:nth-child(1) { grid-column: span 30; }
  .sb-ed:nth-child(6) { grid-column: span 30; }
}
/* 電話は1列。線は 768px（サイト共通の電話の線）に揃えてある。
   以前は 640px だった。641〜768px ではカードが2枚並ぶが、
   その幅の端末は縦向きの電話で、2枚並ぶと1枚 300px を切る。 */
@media (max-width: 768px) {
  .sb-ed:nth-child(n) { grid-column: span 30; }
  .sb-ed { gap: .9rem; }
}

/* ============================================================
 * ABOUT / MISSION — ここが一番明るい
 * ============================================================ */
.sb-about {
  display: grid;
  grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
  align-items: stretch;
  /* 画像が右カラムいっぱいに伸びるので、下はフッターに接してしまう。
     ここで余白を作る。上は .sb-about__text の padding が担っている。 */
  padding-block-end: clamp(4.5rem, 9vw, 8.5rem);
  /* 他のセクションと同じオフホワイトに揃える */
  background: var(--sb-paper);
}
.sb-about__text {
  display: flex;
  align-items: center;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(1.5rem, 3.4vw, 3.5rem);
}
.sb-about__inner { max-width: 30rem; margin-inline-start: auto; }

.sb-about__title {
  font-size: clamp(1.75rem, 3.1vw, 2.85rem);
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 clamp(1.5rem, 2.4vw, 2rem);
}
.sb-about__lead {
  font-size: .8125rem;
  line-height: 2.15;
  color: rgba(16,18,20,.64);
  margin: 0 0 clamp(2rem, 3.2vw, 2.75rem);
}

.sb-about__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #E8E4DC;
  /* 写真は縦位置。このセクションは画像を大きく見せるのが狙いなので、
     枠は右カラムいっぱいに取る。
     元画像は 933x1400（2:3）。3:4 にすると上下から 11% だけ落ち、
     天井のガラスが減って通路の奥行きが前に出る。 */
  aspect-ratio: 3 / 4;
  min-height: clamp(26rem, 52vw, 44rem);
}
.sb-about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 元は天井のガラスが青い。モノクロにすると
     ヒーロー（暗い部屋と光）と同じ階調になり、サイトの色から浮かない。
     元画像は触っていないので、戻すならこの1行を消す。 */
  filter: grayscale(1) contrast(1.04);
}
.sb-about__media .sb-ph {
  background: linear-gradient(150deg, #EFEBE3, #DCD6CA);
}
.sb-about__media .sb-ph__name {
  color: rgba(16,18,20,.4);
  border-color: rgba(16,18,20,.18);
}

@media (max-width: 860px) {
  .sb-about { grid-template-columns: 1fr; }
  .sb-about__inner { margin-inline-start: 0; }
  .sb-about__media { min-height: 80vw; }
}

/* ============================================================
 * MOTION — 気付いたら動いている程度に
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sb-hero__zoom,
  .sb-hero__content { transform: none; }
  .sb-hero__flare,
  .sb-hero__vignette { opacity: 0; }
  .sb-r,
  .sb-r--mask {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .sb-btn__arrow,
  .sb-more__arrow,
  .sb-ed__arrow,
  .sb-ed__num,
  .sb-ed__title a { transition: none; }
}