@charset "UTF-8";
/* ============================================================
   フェチ図鑑（fechi-zukan.com）／ Arkhe 子テーマ

   トーン：黒檀の標本箱に真鍮のプレート。
   近親相姦ズ（生成り＋臙脂＋金）とも NTR図鑑（白＋ネイビー）とも意図的に変える。

   🔴 Arkhe の main.css は `td, th { padding: .5em .75em }` のように
      要素セレクタで基礎スタイルを当ててくる。同じ詳細度で書くと後勝ちになるが、
      読み込み順に依存させると事故るので、**このファイルは常に body.fz を前置して
      詳細度で勝つ**。実測で「効いているルール」を確認してから書くこと。

   🔴 文字サイズ：14px 床（rule-typography-min-14px）。
      13px が許されるのは字間を広く取った英字アクセントラベルだけ。
   🔴 clamp()/calc() の + は前後に半角スペースを入れる。
   ============================================================ */

:root {
  /* ── 地 ──
     🔴 2026-08-19 調整。競合実測は明るい5社／暗い2社だが、同ジャンルで結果を
        出しているのは暗い2社（fechi-ism #1a1a1a・av.zetsubou）。ダークを維持する。
        ただし fechi-ism の平坦な #1a1a1a と差をつけるため、面を1段持ち上げて
        「重い・見づらい」を解消する。地は黒のまま、カードとの明度差を広げる。 */
  --bg:      #101218;   /* 黒檀。わずかに青を残して沈み込みを防ぐ */
  --bg2:     #161922;
  --surface: #1e222c;   /* カードの面。地との差を +6 → +14 に広げた */
  --raise:   #252a36;
  --line:    #333a49;   /* 罫線を1段明るく。境界が見えないと「のっぺり」する */
  --line2:   #454d61;

  /* ── 文字 ── */
  --ink:   #f0ece5;   /* 生成り。暗い地では白に寄せたほうが軽く見える */
  --ink2:  #cbc7bf;
  --muted: #a1a8b5;   /* 本文の補助色。#939aa6 はコントラスト不足だった */

  /* ── 真鍮（唯一のアクセント）──
     旧 #c0326e / #e0578f のローズは、紫寄りの黒地の上で濁って安っぽく出ていた。
     色相を一本に絞り、明度差だけで階層を作る。 */
  --brass:  #c8873c;
  --brass2: #e0a85e;
  --brass3: #f0cf9a;
  --onBrass:#17120a;   /* 真鍮の上に置く文字。白より黒のほうがコントラストが出る */

  --gutter: clamp(20px, 4vw, 56px);
  --wrap:   1200px;
  --read:   860px;
  --radius: 3px;
  --shadow: 0 14px 40px rgba(0,0,0,.5);
}

/* ============================================================
   基本
   ============================================================ */

html { scroll-behavior: smooth; }

body.fz {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               "Yu Gothic Medium", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 2.05;
  letter-spacing: .02em;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
}

body.fz a { color: var(--brass2); text-decoration: none; transition: color .15s; }
body.fz a:hover { color: var(--brass3); }
body.fz img { max-width: 100%; height: auto; }
body.fz ::selection { background: var(--brass); color: var(--onBrass); }

.wrap, body.fz .l-wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

/* Arkhe の既定パーツを止める */
/* 🔴 .p-postListWrap は**カテゴリ一覧の中身そのもの**。ここで消すと記事一覧が出ない。
   消してよいのは TOPのアイキャッチ帯とサイドバーだけ。 */
body.fz .l-content__top,
body.fz .p-topArea,
body.fz .l-sidebar { display: none; }

body.fz .l-content,
body.fz .l-main { background: transparent; max-width: none; padding-inline: 0; }

/* 🔴 スクロールバーも地に合わせる（明るいままだと縁が白く光る） */
body.fz { scrollbar-color: var(--line2) var(--bg); }

/* ============================================================
   ヘッダー（🔴 横幅100%）
   ============================================================ */

/* Arkhe は .l-header__body に .l-container（max-width）を付けてくる。
   全幅にするので max-width を解いて、左右は padding で取る。 */
body.fz .l-header {
  background: linear-gradient(180deg, #121419, #0e0f12);
  border-bottom: 1px solid var(--line);
}
/* 🔴 .l-header に backdrop-filter を付けない。
   スタッキングコンテキストが生まれ、SPのドロワーが暗転オーバーレイの下へ潜る
   （gotcha-header-backdrop-filter-hides-drawer）。 */

body.fz .l-header__body.l-container,
body.fz .l-header__barInner.l-container {
  max-width: none;
  width: 100%;
  padding-inline: var(--gutter);
}

body.fz .c-headLogo__img { width: clamp(180px, 20vw, 260px); height: auto; }

body.fz .c-gnav > li > a {
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink);
  position: relative;
}
body.fz .c-gnav > li > a::after {
  content: "";
  position: absolute; left: 50%; right: 50%; bottom: 14px; height: 1px;
  background: var(--brass);
  transition: left .2s, right .2s;
}
body.fz .c-gnav > li > a:hover { color: var(--brass3); }
body.fz .c-gnav > li > a:hover::after { left: 18%; right: 18%; }

body.fz .c-iconBtn { color: var(--ink); }
body.fz .c-iconBtn:hover { color: var(--brass2); }

/* ============================================================
   ドロワー（SP）
   🔴 Arkhe はドロワーの地色をテーマ変数で塗る。子テーマで暗くしないと
      背景が透明のままページが透けて、文字が二重に見える（実測で発覚）。
   ============================================================ */

body.fz .p-drawer__inner {
  background: linear-gradient(160deg, #171a21 0%, #0e0f12 60%);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
}
body.fz .p-drawer__body { padding: 26px 24px 40px; }
body.fz .p-drawerUnderlayer { background: rgba(6,7,9,.82); }

body.fz .c-drawerNav > li { border-bottom: 1px solid var(--line); }
body.fz .c-drawerNav > li > a {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 4px;
  font-size: 16px; font-weight: 700; color: var(--ink);
}
/* メニュー項目の頭に真鍮の細い印 */
body.fz .c-drawerNav > li > a::before {
  content: ""; width: 3px; height: 18px; background: var(--brass);
  flex: 0 0 auto; opacity: .65; transition: opacity .15s, height .15s;
}
body.fz .c-drawerNav > li > a:hover { color: var(--brass3); }
body.fz .c-drawerNav > li > a:hover::before { opacity: 1; height: 24px; }

body.fz .p-drawer__close {
  margin-top: 34px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 12px 26px;
  color: var(--muted);
  font-size: 14px; letter-spacing: .12em;
  background: transparent;
}
body.fz .p-drawer__close:hover { border-color: var(--brass); color: var(--brass2); }

/* ハンバーガーボタン。3本線を真鍮に */
body.fz .-menuBtn .c-iconBtn__icon,
body.fz .-menuBtn svg { color: var(--ink); }

/* ============================================================
   年齢確認
   ============================================================ */

.agegate {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(200,135,60,.12), transparent 60%),
    var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.agegate[hidden] { display: none; }
.agegate__box {
  max-width: 520px; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brass);
  padding: 40px 28px 36px;
  text-align: center;
  box-shadow: var(--shadow);
}
.agegate__h { font-size: 19px; font-weight: 700; margin-bottom: 14px; letter-spacing: .04em; }
.agegate p { font-size: 14px; color: var(--muted); line-height: 1.95; }
.agegate__btns { display: flex; gap: 12px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* 🔴 `body.fz a { color: ... }` は詳細度 (0,0,1,1)。`.btn`(0,0,1,0) では負けて
   ボタンの文字色が効かない（実測：地が真鍮なのに文字も真鍮で読めなかった）。
   リンクとして使うボタンは必ず `body.fz a.xxx` の形で書く。 */
body.fz a.btn,
body.fz a.duga-cta__btn,
body.fz .sec__more--btn a { color: var(--onBrass); }
body.fz a.btn:hover,
body.fz a.duga-cta__btn:hover,
body.fz .sec__more--btn a:hover { color: var(--onBrass); }
body.fz a.btn--ghost { color: var(--muted); }
body.fz a.btn--ghost:hover { color: var(--ink); }
body.fz a.duga-card__btn { color: var(--brass2); }
body.fz a.duga-card__btn:hover { color: var(--onBrass); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  color: var(--onBrass);
  border: 1px solid var(--brass);
  font-size: 15px; font-weight: 700;
  cursor: pointer; border-radius: var(--radius);
  font-family: inherit;
  transition: filter .15s, transform .15s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--onBrass); }
.btn--ghost {
  background: transparent; color: var(--muted); border-color: var(--line2);
}
.btn--ghost:hover { background: transparent; color: var(--ink); border-color: var(--muted); filter: none; }

/* ============================================================
   Arkhe のページタイトル・パンくず
   🔴 `arkhe_before_main_content` は存在しないフック。自前のページヘッダーは
      一度も描画されていなかった（gotcha-arkhe-invented-hook-silent）。
      出ないものを足すより、出ているものを整える。
   ============================================================ */

/* 🔴 帯（background）にすると Arkhe の 1200px カラムの中で切れて「箱」に見える。
   全幅へ破り出すと 100vw とスクロールバーの差で横スクロールが出るので、
   帯をやめて「真鍮の罫＋余白」で見出しを立てる。 */
body.fz .c-pageTitle {
  padding: clamp(30px, 4vw, 48px) 0 clamp(18px, 2.5vw, 26px);
  position: relative;
}
body.fz .c-pageTitle::before {
  content: ""; display: block; width: 46px; height: 3px;
  background: linear-gradient(90deg, var(--brass2), var(--brass));
  margin-bottom: 20px;
}
body.fz .c-pageTitle__main {
  font-size: clamp(23px, 3.6vw, 34px);
  font-weight: 700; line-height: 1.5; color: var(--ink);
  letter-spacing: .01em;
}

body.fz .p-breadcrumb { padding: 16px 0 0; }
body.fz .p-breadcrumb__text,
body.fz .p-breadcrumb span,
body.fz .p-breadcrumb a { font-size: 14px; color: var(--muted); }
body.fz .p-breadcrumb a:hover { color: var(--brass2); }

/* ============================================================
   本文
   ============================================================ */

body.fz .c-postContent,
body.fz .p-entry__body,
body.fz .entry-content {
  width: min(100% - 40px, var(--read));
  margin-inline: auto;
  padding: 40px 0 64px;
  font-size: 16px;
}

body.fz .c-postContent h2 {
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 700;
  margin: 66px 0 24px;
  padding: 0 0 14px 18px;
  border-left: 3px solid var(--brass);
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
body.fz .c-postContent h3 {
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 700;
  margin: 44px 0 16px;
  color: var(--brass3);
  line-height: 1.6;
}
body.fz .c-postContent h3::before {
  content: "\f0da";                       /* Font Awesome: caret-right */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--brass); margin-right: 10px; font-size: .85em;
}
body.fz .c-postContent p { margin: 0 0 1.6em; }
body.fz .c-postContent ul,
body.fz .c-postContent ol { margin: 0 0 1.7em 1.4em; }
body.fz .c-postContent li { margin-bottom: .55em; }
body.fz .c-postContent strong { color: var(--brass3); }

.duga-pr {
  width: min(100% - 40px, var(--read));
  margin: 18px auto 0;
  font-size: 14px; color: var(--muted);
}

/* ============================================================
   🔴 表（Arkhe の `td, th { padding: .5em .75em }` に負けていた）
      body.fz を前置して詳細度で勝つ。読み込み順に頼らない。
   ============================================================ */

body.fz .fz-lb,
body.fz .duga-idx {
  overflow-x: auto; margin: 26px 0 44px;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  background: var(--surface);
}
body.fz .fz-lb table,
body.fz .duga-idx table {
  width: 100%; border-collapse: collapse; font-size: 14px; margin: 0;
}
body.fz .fz-lb table { min-width: 620px; }
body.fz .duga-idx table { min-width: 640px; }

body.fz .fz-lb th,
body.fz .duga-idx th {
  background: var(--raise);
  color: var(--brass3);
  font-size: 14px; letter-spacing: .06em; font-weight: 700;
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}
body.fz .fz-lb td,
body.fz .duga-idx td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 14px;
}
body.fz .fz-lb tr:last-child td,
body.fz .duga-idx tr:last-child td { border-bottom: 0; }
body.fz .fz-lb tbody tr:hover td,
body.fz .duga-idx tbody tr:hover td { background: rgba(200,135,60,.06); }

body.fz .fz-lb__n a { font-weight: 700; }
body.fz .fz-lb__num,
body.fz .duga-idx__n { text-align: right; white-space: nowrap; color: var(--ink2); font-variant-numeric: tabular-nums; }
body.fz .duga-idx__t { min-width: 280px; }

/* ============================================================
   対象タイル（標本箱）
   ============================================================ */

.fz-axes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 12px;
  margin: 30px 0 42px;
}
.fz-axis {
  display: block; position: relative;
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line);
  padding: 18px 16px 15px;
  color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.fz-axis::after {
  content: "\f054";                        /* Font Awesome: chevron-right */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; top: 16px; right: 14px;
  font-size: 12px; color: var(--line2); transition: color .18s, transform .18s;
}
.fz-axis:hover {
  border-color: var(--brass); transform: translateY(-3px);
  box-shadow: var(--shadow); color: var(--ink);
}
.fz-axis:hover::after { color: var(--brass2); transform: translateX(3px); }
.fz-axis__ja { display: block; font-size: 17px; font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; }
.fz-axis__n { display: block; font-size: 14px; color: var(--muted); margin-top: 9px; font-variant-numeric: tabular-nums; }

.fz-bar { display: block; height: 3px; background: var(--line); overflow: hidden; }
.fz-bar i {
  display: block; height: 100%;
  min-width: 8px;                       /* 🔴 小さい値が「-」に見えないよう下限を持たせる */
  background: linear-gradient(90deg, var(--brass), var(--brass2));
}

/* ============================================================
   作品カード
   ============================================================ */

.duga-h {
  font-size: 19px; font-weight: 700; margin: 50px 0 18px;
  color: var(--brass3); display: flex; align-items: center; gap: 10px;
}
.duga-h::before {
  content: "\f03a";                        /* Font Awesome: list */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--brass); font-size: .8em;
}

.duga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 20px;
  margin: 26px 0 44px;
}

.duga-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0 0 16px;
  display: flex; flex-direction: column;
  transition: border-color .18s, box-shadow .18s;
}
.duga-card:hover { border-color: var(--line2); box-shadow: var(--shadow); }
.duga-card__no {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  color: var(--onBrass);
  font-size: 14px; font-weight: 700;
  min-width: 34px; height: 28px;
  display: grid; place-items: center; padding: 0 9px;
  font-variant-numeric: tabular-nums;
}
.duga-card__link { display: block; color: var(--ink); }
.duga-card__link:hover { color: var(--brass3); }

/* 🔴 画像は加工禁止（DUGA規約§1）。縦横比を保った縮小だけ。
   object-fit:cover はトリミングにあたるので使わない。 */
.duga-card__img { display: block; width: 100%; height: auto; background: var(--bg2); }

.duga-card__title { font-size: 15px; font-weight: 700; line-height: 1.6; margin: 0; padding: 13px 15px 0; }
.duga-card__meta, .duga-card__stats, .duga-card__cast, .duga-card__cap { padding: 0 15px; margin: 0; }
.duga-card__meta { font-size: 14px; color: var(--muted); margin-top: 9px; }
.duga-card__stats { font-size: 14px; margin-top: 7px; display: flex; gap: 12px; flex-wrap: wrap; }
.duga-card__score { color: var(--brass2); font-size: 14px; }
.duga-card__score small { color: var(--muted); font-size: 14px; }
.duga-card__ml { color: var(--muted); font-size: 14px; }
.duga-card__cast { font-size: 14px; color: var(--muted); margin-top: 5px; display: block; }
.duga-card__cap { font-size: 14px; color: var(--ink2); line-height: 1.85; margin-top: 11px; }
.duga-card__btn {
  margin: 16px 15px 0; padding: 11px;
  text-align: center;
  border: 1px solid var(--brass);
  color: var(--brass2);
  font-size: 14px; font-weight: 700;
  border-radius: var(--radius);
  margin-top: auto;
  transition: background .15s, color .15s;
}
.duga-card__btn::after {
  content: "\f35d";                        /* Font Awesome: up-right-from-square */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: 8px; font-size: .82em;
}
.duga-card__btn:hover { background: var(--brass); color: var(--onBrass); }

/* ============================================================
   在庫サマリ
   ============================================================ */

.duga-stock {
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  padding: 18px 20px;
  font-size: 15px; color: var(--ink2);
  margin: 26px 0 34px;
}
.duga-stock b { color: var(--brass3); font-variant-numeric: tabular-nums; }

/* ============================================================
   CTA
   ============================================================ */

.duga-cta {
  background:
    radial-gradient(90% 160% at 50% 0%, rgba(200,135,60,.18), transparent 65%),
    var(--surface);
  border: 1px solid var(--brass);
  padding: 34px 26px;
  text-align: center;
  margin: 52px 0;
}
.duga-cta__title { font-size: 20px; font-weight: 700; margin: 0 0 12px; letter-spacing: .02em; }
.duga-cta__lead { font-size: 15px; color: var(--ink2); margin: 0 auto 22px; max-width: 40em; }
.duga-cta__btn {
  display: inline-block; padding: 15px 44px;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  color: var(--onBrass);
  font-size: 16px; font-weight: 700;
  border-radius: var(--radius);
  transition: filter .15s, transform .15s;
}
.duga-cta__btn::after {
  content: "\f054";                        /* Font Awesome: chevron-right */
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: 12px; font-size: .8em;
}
.duga-cta__btn:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--onBrass); }

/* ============================================================
   クレジット表示（第12条・義務。HTMLは1文字も改変しない）
   ============================================================ */

.duga-credit { text-align: center; margin: 0; padding: 22px 0; font-size: 14px; }
.duga-credit--auto { border-top: 1px solid var(--line); background: var(--bg2); }

/* ============================================================
   記事カード
   ============================================================ */

.fz-posts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 20px;
  margin: 26px 0 42px;
}
.fz-post {
  display: block; background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink); padding-bottom: 18px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.fz-post:hover { border-color: var(--brass); color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow); }
.fz-post__img { display: block; background: var(--bg2); }
.fz-post__img img { display: block; width: 100%; height: auto; }
.fz-post__cat {
  display: inline-block; margin: 15px 17px 0;
  font-size: 14px; letter-spacing: .06em; color: var(--brass2);
}
.fz-post__ttl { display: block; margin: 9px 17px 0; font-size: 16px; font-weight: 700; line-height: 1.6; }

/* ============================================================
   記事末尾・関連
   ============================================================ */

.fz-foot { width: min(100% - 40px, var(--read)); margin: 0 auto; }
.fz-foot__note {
  font-size: 14px; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 20px;
}

.fz-rel { width: min(100% - 40px, 1000px); margin: 60px auto 0; }
.fz-rel__h {
  font-size: 19px; font-weight: 700; margin-bottom: 22px;
  padding-left: 16px; border-left: 3px solid var(--brass);
}

body.fz .c-postTerms__link { font-size: 14px; color: var(--brass2); }
body.fz .c-pnNav__title { font-size: 14px; color: var(--ink); }
body.fz .c-pnNav a { background: var(--surface); border: 1px solid var(--line); }
body.fz .c-pnNav a:hover { border-color: var(--brass); }

/* ============================================================
   フッター
   ============================================================ */

body.fz .l-footer {
  background: var(--bg2);
  border-top: 1px solid var(--line);
  color: var(--muted);
}
body.fz .l-footer a,
body.fz .l-footer li a { color: var(--muted); font-size: 14px; }
body.fz .l-footer a:hover { color: var(--brass2); }
body.fz .c-copyright { font-size: 14px; }

/* 🔴 ページ先頭へ戻るは Arkhe の .p-fixBtnWrap が既にある。自前で足さない。 */
body.fz .c-fixBtn {
  background: var(--surface);
  border: 1px solid var(--line2);
  color: var(--muted);
}
body.fz .c-fixBtn:hover { border-color: var(--brass); color: var(--brass2); }

/* ============================================================
   TOP
   ============================================================ */

/* 🔴 TOPは Arkhe の `.l-content__body.l-container`（max-width 1200px + padding）の
   中に <main> が入るため、`.mv` を全幅にしても **1200px までしか広がらない**
   （実測：MV w=1200 x=120）。100vw で破り出すとスクロールバー幅ぶん横スクロールが出るので、
   TOPだけコンテナ自体を解放する。セクション側は .wrap で1200pxに戻す。 */
body.home .l-content__body.l-container {
  max-width: none;
  padding-inline: 0;
}
body.home .l-main,
body.home .l-main__body { max-width: none; }

/* MVは横幅100%。内側だけ padding で逃がす（wrap で1200pxに絞らない） */
/* 🔴 背景は全幅、中身はセクションと同じ 1200px の基準線へ揃える。
   MVだけ左端がずれていると「はみ出した」ようにしか見えない（実測で判断）。 */
/* 🔴 ヒーローは「人物写真を全面に敷き、左から暗く落として文字を載せる」構成。
   写真が無い状態でもグラデーションだけで成立するようにしてある（画像は上に重ねる）。
   画像は images/hero.jpg を置くだけで有効になる。 */
.mv {
  position: relative;
  padding: clamp(64px, 10vw, 128px) var(--gutter) clamp(52px, 8vw, 92px);
  min-height: min(82vh, 800px);
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, #16181e, var(--bg));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

/* 写真レイヤー。右寄せで人物を置き、左を暗く落として文字の可読性を確保する */
.mv__bg {
  position: absolute; inset: 0; z-index: -2;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}
/* 🔴 幕の濃さは「写真の実際の明るさ」に合わせて決める。
   仕様どおり左40%が真っ黒（実測 輝度4）の写真が来たので、左を .96 で覆うと
   写真が完全に消える。左は軽く、右（被写体側）は文字が載らないので更に軽くする。 */
.mv__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(16,18,24,.74) 0%,
      rgba(16,18,24,.58) 30%,
      rgba(16,18,24,.30) 58%,
      rgba(16,18,24,.10) 80%,
      rgba(16,18,24,.34) 100%),
    linear-gradient(180deg, rgba(16,18,24,.42) 0%, transparent 24%, rgba(16,18,24,.62) 100%);
}
/* 真鍮の光。写真が無いときはこれが主役になる */
.mv::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 88% at 10% 10%, rgba(200,135,60,.13), transparent 62%),
    radial-gradient(46% 70% at 88% 80%, rgba(200,135,60,.07), transparent 66%);
}
/* 標本箱の格子 */
.mv::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 60% at 14% 8%, #000, transparent 72%);
          mask-image: radial-gradient(70% 60% at 14% 8%, #000, transparent 72%);
}

.mv__en { font-size: 13px; letter-spacing: .3em; color: var(--brass2); font-weight: 700; margin-bottom: 18px; }
.mv__ttl {
  font-size: clamp(28px, 5.6vw, 54px);
  font-weight: 700; line-height: 1.42; margin: 0 0 24px;
  letter-spacing: .01em;
}
.mv__ttl em { font-style: normal; color: var(--brass3); }
.mv__lead { font-size: clamp(15px, 1.5vw, 17px); color: var(--ink2); line-height: 2.05; max-width: 46em; margin: 0; }



/* ============================================================
   セクション見出し
   ============================================================ */

.sec__en { display: inline-flex; align-items: center; gap: 11px; }
.sec__en::before {
  content: ""; width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--brass2), transparent);
}
.sec--cta .sec__en { justify-content: center; }
.sec__h { display: flex; align-items: center; gap: 14px; }
.sec--cta .sec__h { justify-content: center; }

/* ============================================================
   対象タイル（アイコン入り・標本カード）
   ============================================================ */

.fz-axes { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }

.fz-axis {
  position: relative; overflow: hidden;
  padding: 20px 18px 16px;
  border-top-width: 1px;
}
.fz-axis::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brass2), var(--brass));
  transition: width .28s ease;
}
.fz-axis:hover::before { width: 100%; }
.fz-axis::after { top: 18px; right: 16px; }

.fz-axis__ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; margin-bottom: 14px;
  border: 1px solid var(--line2); border-radius: 50%;
  color: var(--brass2); font-size: 17px;
  transition: border-color .18s, background .18s, color .18s;
}
.fz-axis:hover .fz-axis__ic { border-color: var(--brass); background: rgba(200,135,60,.12); color: var(--brass3); }
.fz-axis__ja { font-size: 18px; margin-bottom: 16px; }
.fz-axis__n { display: flex; align-items: baseline; gap: 3px; }
.fz-axis__n b { color: var(--ink); font-size: 17px; font-weight: 700; }

.fz-bar { height: 4px; border-radius: 2px; }
.fz-bar i { border-radius: 2px; }

/* ============================================================
   レーベルカード
   ============================================================ */

.fz-lbs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px; margin: 30px 0 44px;
}
.fz-lb {
  position: relative; display: block;
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line);
  padding: 18px 20px 17px;
  color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.fz-lb::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: 18px; bottom: 18px;
  font-size: 12px; color: var(--line2); transition: color .18s, transform .18s;
}
.fz-lb:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.fz-lb:hover::after { color: var(--brass2); transform: translateX(3px); }

.fz-lb__side {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; letter-spacing: .02em;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line2); color: var(--muted);
  margin-bottom: 14px;
}
.fz-lb.is-m .fz-lb__side { color: #8fb4d9; border-color: rgba(143,180,217,.36); }
.fz-lb.is-f .fz-lb__side { color: #d98fae; border-color: rgba(217,143,174,.36); }
.fz-lb.is-x .fz-lb__side { color: var(--brass2); border-color: rgba(224,168,94,.4); }

.fz-lb__name { display: block; font-size: 18px; font-weight: 700; line-height: 1.45; margin-bottom: 14px; }
.fz-lb__meter { display: block; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-bottom: 12px; }
.fz-lb__meter i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--brass), var(--brass2)); }
.fz-lb__nums { display: flex; align-items: baseline; gap: 14px; font-size: 14px; color: var(--muted); }
.fz-lb__nums b { color: var(--ink); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fz-lb__nums em { font-style: normal; }
.fz-lb__nums em::before {
  content: "\f51e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-right: 6px; color: var(--brass); font-size: .88em;
}

/* ============================================================
   フッター
   ============================================================ */

body.fz .l-footer { background: linear-gradient(180deg, #101218, var(--bg)); }

.fzf { border-top: 1px solid var(--line); padding: clamp(44px, 6vw, 72px) 0 clamp(28px, 4vw, 44px); }
.fzf__in {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.fzf__logo { width: 210px; height: auto; margin-bottom: 16px; }
.fzf__tag { font-size: 14px; color: var(--ink2); line-height: 1.9; margin: 0 0 18px; }
.fzf__note, .fzf__age {
  display: flex; gap: 10px; font-size: 14px; color: var(--muted);
  line-height: 1.75; margin: 0 0 9px;
}
.fzf__note i, .fzf__age i { color: var(--brass); margin-top: .28em; }
.fzf__age i { color: #d98fae; }

.fzf__h {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--brass3);
  letter-spacing: .06em; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.fzf__h i { color: var(--brass); }
.fzf__col ul { list-style: none; margin: 0; padding: 0; }
.fzf__col li { margin-bottom: 11px; }
.fzf__col li a {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; color: var(--ink2);
}
.fzf__col li a i { color: var(--line2); width: 15px; text-align: center; transition: color .15s; }
.fzf__col li a:hover { color: var(--brass2); }
.fzf__col li a:hover i { color: var(--brass); }
.fzf__more { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.fzf__more a { color: var(--brass2) !important; font-weight: 700; }
.fzf__more a::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: 7px; font-size: .74em;
}

body.fz .l-footer__foot { border-top: 1px solid var(--line); padding-block: 22px; }
body.fz .l-footer__nav { gap: 8px 22px; flex-wrap: wrap; }

/* ============================================================
   診断
   ============================================================ */

.sh-steps {
  display: flex; gap: 0; list-style: none; margin: 0 0 44px; padding: 0;
  border: 1px solid var(--line); background: var(--surface);
}
.sh-steps li {
  flex: 1; display: flex; align-items: center; gap: 11px;
  padding: 15px 18px; font-size: 14px; color: var(--muted);
  border-right: 1px solid var(--line); position: relative;
}
.sh-steps li:last-child { border-right: 0; }
.sh-steps li b {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line2); font-size: 14px; flex: 0 0 auto;
}
.sh-steps li.is-on { color: var(--ink); background: rgba(200,135,60,.09); }
.sh-steps li.is-on b { border-color: var(--brass); background: var(--brass); color: var(--onBrass); }
.sh-steps li.is-done b { border-color: var(--brass); color: var(--brass2); }

.sh-step__h { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.sh-step__h i { color: var(--brass); font-size: .82em; }
.sh-step__lead { font-size: 14px; color: var(--muted); margin: 0 0 26px; }

.sh-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 14px;
}
.sh-card {
  position: relative; display: block; width: 100%; text-align: left;
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line);
  padding: 22px 20px 20px;
  color: var(--ink); cursor: pointer; font-family: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.sh-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--brass2), var(--brass));
  transition: width .28s ease;
}
.sh-card:hover { border-color: var(--brass); transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.sh-card:hover::before { width: 100%; }
.sh-card__ic {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 16px;
  border: 1px solid var(--line2); border-radius: 50%;
  color: var(--brass2); font-size: 19px;
  transition: border-color .18s, background .18s, color .18s;
}
.sh-card:hover .sh-card__ic { border-color: var(--brass); background: rgba(200,135,60,.13); color: var(--brass3); }
.sh-card__ja { display: block; font-size: 21px; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.sh-card__sub { display: block; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sh-card__go {
  position: absolute; right: 18px; bottom: 20px;
  color: var(--line2); font-size: 12px; transition: color .18s, transform .18s;
}
.sh-card:hover .sh-card__go { color: var(--brass2); transform: translateX(3px); }

.sh-q2__lead {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; color: var(--muted); margin: 0 0 18px;
  padding: 12px 16px; background: var(--bg2); border-left: 3px solid var(--brass);
}
.sh-q2__lead i { color: var(--brass2); }
.sh-q2__lead b { color: var(--ink); }

.sh-back button { display: inline-flex; align-items: center; }

.sh-index__h { display: flex; align-items: center; gap: 12px; }
.sh-index__h i { color: var(--brass); font-size: .82em; }
.sh-index__list li { align-items: center; }
.sh-index__list li a { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.sh-index__list li a i { color: var(--line2); width: 16px; text-align: center; }
.sh-index__list li a:hover { color: var(--brass2); }
.sh-index__list li a:hover i { color: var(--brass); }
.sh-index__list li a em { font-style: normal; color: var(--muted); margin: 0 5px; }
.sh-index__list li b { color: var(--muted); font-size: 14px; font-weight: 400; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* 結果ヒーロー */
.sh-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 150% at 50% 0%, rgba(200,135,60,.20), transparent 62%),
    linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--brass);
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
  text-align: center; margin: 0 0 40px;
}
.sh-hero__en { font-size: 13px; letter-spacing: .3em; color: var(--brass2); font-weight: 700; margin-bottom: 20px; }
.sh-hero__pair {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 3vw, 30px); flex-wrap: wrap; margin: 0 0 26px;
}
.sh-hero__pair span {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(22px, 3.4vw, 32px); font-weight: 700; color: var(--ink);
}
.sh-hero__pair span i {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--brass); background: rgba(200,135,60,.14);
  color: var(--brass3); font-size: 19px;
}
.sh-hero__pair em { font-style: normal; color: var(--brass2); font-size: clamp(20px, 3vw, 28px); font-weight: 700; }
.sh-hero__stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0 40px;
  padding: 18px 0; margin-bottom: 20px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sh-hero__stats span { font-size: 14px; color: var(--muted); }
.sh-hero__stats b {
  display: block; font-size: clamp(24px, 3.4vw, 32px); color: var(--brass3);
  font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.sh-hero__lead { font-size: 15px; color: var(--ink2); margin: 0 auto; max-width: 44em; }

.sh-sib__h { display: flex; align-items: center; gap: 12px; }
.sh-sib__h i { color: var(--brass); font-size: .82em; }
.sh-sib__list li a { display: inline-flex; align-items: center; gap: 9px; }
.sh-sib__list li a i { color: var(--line2); font-size: .9em; }
.sh-sib__list li a:hover i { color: var(--brass); }
.sh-res__again a { display: inline-flex; align-items: center; gap: 9px; }

/* ============================================================
   レスポンシブ（追加分）
   ============================================================ */

@media (max-width: 900px) {
  .fzf__in { grid-template-columns: 1fr 1fr; gap: 34px; }
  .fzf__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .mv { min-height: 0; padding-block: 56px 44px; }
  .mv::after { right: -140px; opacity: .05; }
  .mv__stats { gap: 0; }
  .mv__stat { padding: 15px 20px 15px 0; margin-right: 20px; }
  .fz-axes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .fz-axis { padding: 15px 13px 13px; }
  .fz-axis__ic { width: 34px; height: 34px; font-size: 14px; margin-bottom: 11px; }
  .fz-axis__ja { font-size: 16px; }
  .fz-lbs { grid-template-columns: 1fr; }
  .sh-cards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .sh-card { padding: 17px 15px 16px; }
  .sh-card__ic { width: 38px; height: 38px; font-size: 15px; margin-bottom: 12px; }
  .sh-card__ja { font-size: 17px; }
  .sh-steps li { flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 11px; font-size: 14px; }
  .fzf__in { grid-template-columns: 1fr; }
}

/* ── フッター調整 ─────────────────────────────
   🔴 上のカラムと下段の l-footer__nav が同じリンクで二重になっていた。
      下段はコピーライトだけにする。 */
body.fz .l-footer__nav { display: none; }
body.fz .l-footer__foot { padding-block: 20px; }
body.fz .c-copyright { color: var(--muted); letter-spacing: .02em; }

.fzf__cta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 24px; padding: 15px 17px;
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line); border-left: 3px solid var(--brass);
  color: var(--ink);
  transition: border-color .18s, transform .18s;
}
.fzf__cta:hover { border-color: var(--brass); transform: translateX(3px); color: var(--ink); }
.fzf__cta__ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line2); color: var(--brass2); font-size: 16px;
}
.fzf__cta:hover .fzf__cta__ic { border-color: var(--brass); background: rgba(200,135,60,.13); }
.fzf__cta__tx { display: block; line-height: 1.5; }
.fzf__cta__tx b { display: block; font-size: 15px; font-weight: 700; }
.fzf__cta__tx small { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.fzf__cta__go { margin-left: auto; color: var(--line2); font-size: 12px; }
.fzf__cta:hover .fzf__cta__go { color: var(--brass2); }

/* ── 診断カードの矢印が説明文と重なっていた。右上へ ── */
.sh-card { padding-right: 46px; }
.sh-card__go { top: 24px; right: 20px; bottom: auto; }

/* 診断ページは本文より広く使う（カードが3列で窮屈だった）。
   🔴 :has() は Safari 15系で効かないので body クラスで当てる */
body.fz.fz-wide .c-postContent { width: min(100% - 40px, 1100px); }
body.fz .sh { width: 100%; }

/* ============================================================
   抜け感チューニング（2026-08-19）
   競合の平坦なダークと差をつける。地は黒のまま、面と余白で軽くする。
   ============================================================ */

/* 本文の余白を増やす。ダーク地は行が詰まると一気に読みづらくなる */
body.fz .c-postContent p { margin-bottom: 1.85em; }
body.fz .c-postContent h2 { margin-top: 74px; }
body.fz .c-postContent h3 { margin-top: 48px; }

/* カードに内側のハイライト。面が浮いて見える */
.duga-card, .fz-axis, .fz-lb, .sh-card, .fz-post {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
.duga-card:hover, .fz-post:hover { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07); }

/* 🔴 作品ジャケットは白地の表紙が多い。暗い面に直接置くと切り抜きが浮くので、
   画像の下に一段明るい台を敷いて「額装」する。 */
.duga-card__link { background: #222732; }
.duga-card__img { mix-blend-mode: normal; }

/* セクションの区切りを罫ではなく余白で作る（線が多いと重く見える） */
.sec { padding-block: clamp(64px, 8.5vw, 112px); }


/* 表の行間も広げる */
body.fz .fz-lb td, body.fz .duga-idx td { padding-block: 17px; }

/* アイキャッチが暗いので、記事カードの画像下に薄い境界を入れて塊にしない */
.fz-post__img { position: relative; }
.fz-post__img::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: rgba(255,255,255,.07);
}

/* ── MV の中身（写真の上に載る）─────────────── */

.mv__in { position: relative; z-index: 1; max-width: 100%; }

.mv__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; margin: 0 0 24px;
  border: 1px solid rgba(200,135,60,.5); border-radius: 999px;
  background: rgba(200,135,60,.12);
  color: var(--brass3); font-size: 14px; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(4px);
}
.mv__badge i { font-size: .92em; }

/* 🔴 文字は写真の「暗い側」に収める。要素の幅が被写体やランプに掛かると、
   そこだけコントラストが落ちる（実測：見出しの右端がランプに掛かり 3.03:1 だった）。
   幅を絞るのが正解で、幕を濃くして写真を潰すのは筋が悪い。 */
.mv__ttl {
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 700; line-height: 1.42; margin: 0 0 26px;
  letter-spacing: .005em;
  /* 🔴 width:fit-content にして、箱を文字幅に合わせる。
     ブロック要素のままだと箱だけが被写体側へ伸び、そこに写真の明るい部分が来る。
     見た目にも影響しないうえ、コントラスト検査の値も実態と一致するようになる。 */
  width: fit-content; max-width: 15.5em;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.mv__ttl em {
  font-style: normal; color: var(--brass3);
  background: linear-gradient(180deg, var(--brass3), var(--brass2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mv__lead {
  font-size: clamp(15px, 1.55vw, 18px); color: var(--ink2);
  line-height: 2.05; width: fit-content; max-width: 31em; margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.55);
}
.mv__cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; width: fit-content; max-width: 34em; }
.mv__cta .btn { padding: 16px 34px; font-size: 16px; }
body.fz a.btn--ghost {
  background: rgba(16,18,24,.55); border-color: rgba(255,255,255,.22); color: var(--ink);
  backdrop-filter: blur(4px);
}
body.fz a.btn--ghost:hover { border-color: var(--brass); color: var(--brass3); }

.mv__marks {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  width: fit-content; max-width: 40em;
}
.mv__marks li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink2);
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.mv__marks li i { color: var(--brass2); font-size: .95em; }

/* ── 最終CTA帯にも背景画像を敷けるようにする ── */
/* 🔴 背景を ::before/::after で敷くと、番号（.sec--num::before）と取り合いになって
   どちらかが消える（実測：02の番号が消え、CTAの背景画像も消えた）。
   背景は background に直接積み、疑似要素は装飾専用にする。 */
.sec--cta {
  position: relative; overflow: hidden;
  background:
    radial-gradient(52% 120% at 50% 50%, rgba(16,18,24,.94) 0%, rgba(16,18,24,.86) 46%, rgba(16,18,24,.55) 100%),
    linear-gradient(180deg, rgba(16,18,24,.80) 0%, rgba(16,18,24,.42) 40%, rgba(16,18,24,.88) 100%),
    url("images/cta.jpg") center 32% / cover no-repeat,
    var(--bg2);
  border-block: 1px solid var(--line);
  text-align: center;
}

/* ── フッターにも薄く敷く ── */
.fzf { position: relative; isolation: isolate; }
.fzf::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: url("images/footer.jpg");
  background-size: cover; background-position: center 40%;
  opacity: .62;
}
.fzf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(16,18,24,.86), rgba(16,18,24,.96));
}

@media (max-width: 600px) {
  .mv { min-height: 0; padding-block: 52px 44px; }
  .mv__bg { background-position: 78% center; }
  .mv__bg::after {
    background:
      linear-gradient(180deg, rgba(16,18,24,.72) 0%, rgba(16,18,24,.88) 46%, rgba(16,18,24,.97) 100%);
  }
  .mv__lead { max-width: none; }
  .mv__cta .btn { flex: 1 1 100%; justify-content: center; }
  .mv__marks { gap: 8px 16px; }
}

/* ============================================================
   診断CTA帯（背景 cta.jpg の中央の抜けに合わせて中央寄せで組む）
   ============================================================ */

.sec--cta { padding-block: clamp(72px, 9vw, 128px); }

.sec--cta .sec__h {
  font-size: clamp(23px, 3.6vw, 34px);
  margin-bottom: 20px;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.sec--cta .sec__lead {
  font-size: clamp(15px, 1.5vw, 17px);
  max-width: 42em; margin: 0 auto;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
}

/* 3ステップ。診断の中身を先に見せて、押す前の不安を消す */
.fz-steps {
  list-style: none; margin: 40px auto 38px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  max-width: 860px; text-align: left;
}
.fz-steps li {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 17px;
  background: rgba(30,34,44,.72);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brass);
  backdrop-filter: blur(6px);
}
/* 手順の流れを矢印で示す */
.fz-steps li:not(:last-child)::after {
  content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--line2); z-index: 1;
}
.fz-steps__n {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  color: var(--onBrass); font-size: 15px; font-weight: 700;
}
.fz-steps__tx { display: block; line-height: 1.55; }
.fz-steps__tx b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); }
.fz-steps__tx small { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; }

.btn--lg { padding: 18px 48px !important; font-size: 17px !important; }
.btn--lg i { margin-right: 4px; }

.fz-cta__note {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 20px 0 0; font-size: 14px; color: var(--muted);
}
.fz-cta__note i { color: var(--brass2); }

@media (max-width: 780px) {
  .fz-steps { grid-template-columns: 1fr; gap: 10px; max-width: 460px; }
  .fz-steps li:not(:last-child)::after {
    right: 50%; top: auto; bottom: -12px; transform: translateX(50%) rotate(90deg);
  }
}

/* ============================================================
   セクションの作り込み（2026-08-19）
   🔴 MV以外が素通しで「デザインが無い」ように見えていた。
      地に構造を入れ、セクションごとに番号・罫・テクスチャで階層を作る。
   ============================================================ */

/* ── 1. ページ全体の地に標本箱の格子を薄く敷く ── */
body.fz::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.016) 1px, transparent 1px);
  background-size: 96px 96px;
}
body.fz .l-wrapper { position: relative; z-index: 1; }

/* ── 2. セクション見出しに通し番号を置く ──
   🔴 `data-n` は section 側にある。`.wrap::before` で attr(data-n) を読むと
      wrap には属性が無いので**空文字になり、何も出ない**（実際にそうなっていた）。
      属性を持っている要素自身の擬似要素で読む。 */
.sec--num { position: relative; }
.sec--num::before {
  content: attr(data-n);
  position: absolute; z-index: 2;
  left: max(20px, calc(50% - 660px));
  top: clamp(30px, 4.2vw, 52px);
  font-size: 14px; font-weight: 700; letter-spacing: .2em;
  color: var(--brass2); opacity: .55;
  font-variant-numeric: tabular-nums;
}
/* 番号から下へ伸びる縦罫。セクションの長さが見える */
.sec--num::after {
  content: ""; position: absolute; z-index: 2;
  left: max(27px, calc(50% - 653px));
  top: clamp(56px, 6vw, 82px); bottom: clamp(30px, 4vw, 52px); width: 1px;
  background: linear-gradient(180deg, rgba(200,135,60,.5), transparent 78%);
}
/* 番号を置く余白が無い幅では畳む */
@media (max-width: 1330px) {
  .sec--num::before, .sec--num::after { display: none; }
}
/* CTA帯は中央寄せなので番号を出さない */
.sec--cta::before, .sec--cta::after { }

/* ── 3. セクションの境目に「引き出しの取っ手」 ── */
/* 区切りは .sec--num::before を番号に使ったので、専用の要素で描く */
.sec--div { position: relative; }
.sec--div > .wrap { position: relative; }
.sec--div > .wrap > .fz-div {
  position: absolute; left: 50%; top: calc(-1 * clamp(30px, 4vw, 52px));
  transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(200,135,60,.55), transparent);
}
.sec { position: relative; }

/* ── 4. 帯セクションにテクスチャを敷く（DEEP CUTS）──
   🔴 ここも background に直接積む。疑似要素は番号に使っている。 */
.sec--alt {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(16,18,24,.90) 0%, rgba(22,25,34,.60) 42%, rgba(16,18,24,.92) 100%),
    radial-gradient(66% 100% at 18% 0%, rgba(200,135,60,.16), transparent 62%),
    url("images/footer.jpg") center 30% / cover no-repeat,
    var(--bg2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05);
}

/* ── 5. カードグリッドの下に「棚板」を敷いて面を作る ── */
.fz-axes, .fz-lbs, .fz-posts, .duga-grid {
  position: relative;
  padding: 22px;
  margin-inline: -22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,0) 42%),
    rgba(22,25,34,.42);
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 2px;
}
/* 棚板の四隅に真鍮の留め具 */
.fz-axes::before, .fz-axes::after,
.fz-lbs::before, .fz-lbs::after {
  content: ""; position: absolute; width: 7px; height: 7px;
  border: 1px solid rgba(200,135,60,.42); border-radius: 50%;
}
.fz-axes::before, .fz-lbs::before { left: 8px; top: 8px; }
.fz-axes::after,  .fz-lbs::after  { right: 8px; bottom: 8px; }

/* ── 6. セクション見出しの左に真鍮の縦罫 ── */
.sec__h {
  position: relative; padding-left: 18px;
}
.sec__h::before {
  content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 3px;
  background: linear-gradient(180deg, var(--brass2), var(--brass));
  border-radius: 2px;
}
.sec--cta .sec__h { padding-left: 0; }
.sec--cta .sec__h::before { content: none; }

/* ── 7. 「もっと見る」を面のあるボタンに ── */
.sec__more:not(.sec__more--btn) a {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  border: 1px solid var(--line2);
  color: var(--brass2);
  transition: border-color .18s, background .18s, transform .18s;
}
.sec__more:not(.sec__more--btn) a:hover {
  border-color: var(--brass); background: rgba(200,135,60,.10); transform: translateX(3px);
}

@media (max-width: 600px) {
  .fz-axes, .fz-lbs, .fz-posts, .duga-grid { padding: 13px; margin-inline: -13px; }
  body.fz::before { background-size: 64px 64px; }
}

/* ============================================================
   サムネイル帯（記事の早い位置に置いて作品まで運ぶ）
   ============================================================ */

/* 🔴 DUGAの画像は縦横比がばらつく（メイン240×180の横長／ジャケット240×340の縦長）。
   固定の箱に contain で入れると、上下に大きな余白が出て小さく見える（実測で発覚）。
   規約で許されているのは「縦横比を保った拡大縮小」だけなので、cover で切り抜けない。
   → **高さを揃えて幅は成り行き**にする。これなら余白が出ず、加工にもならない。 */
.duga-peek {
  display: grid;
  /* 🔴 サムネイルと文字を横に並べると、文字に幅を取られてサムネイルが3枚しか見えない。
     サムネイルを1段目に全幅で置き、文字と矢印を2段目にする。 */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "row row" "tx  go";
  align-items: center; gap: 16px 18px;
  margin: 34px 0 44px; padding: 18px 22px 18px 18px;
  background: linear-gradient(180deg, var(--raise), var(--surface));
  border: 1px solid var(--line2);
  border-left: 3px solid var(--brass);
  color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.duga-peek:hover {
  border-color: var(--brass); color: var(--ink);
  transform: translateY(-2px); box-shadow: var(--shadow);
}

.duga-peek__row {
  grid-area: row;
  display: flex; gap: 8px; align-items: stretch;
  min-width: 0; overflow: hidden;
  /* 入りきらない分は右端でフェードさせる。中途半端に切れて見えないように */
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 82%, transparent 100%);
}
.duga-peek__i {
  display: block; flex: 0 0 auto;
  border: 1px solid var(--line2);
  background: var(--bg2);
  line-height: 0;
}
/* 🔴 高さは img に直接指定する。親に height を置いて img を height:100% にしても、
   フレックス配下では百分率が解決されず原寸のまま出る。
   🔴 さらに `body.fz img { height:auto }`(0,1,2) が `.duga-peek__i img`(0,1,1) に勝つ。
      自分で書いた基本ルールに component が負けるので、body.fz を前置して詳細度を上げる。
      （gotcha-arkhe-child-css-loses-to-main と同じ形。相手はArkheでなく自分のCSS） */
body.fz .duga-peek__i img {
  display: block; height: 132px; width: auto;   /* 🔴 縦横比を保った縮小のみ */
}

.duga-peek__tx { grid-area: tx; display: block; line-height: 1.6; }
.duga-peek__tx b {
  display: block; font-size: 17px; font-weight: 700; color: var(--brass3);
  letter-spacing: .01em;
}
.duga-peek__tx small { display: block; font-size: 14px; color: var(--muted); margin-top: 5px; }
.duga-peek__go {
  grid-area: go;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--brass); border-radius: 50%;
  background: rgba(200,135,60,.12);
  color: var(--brass2); font-size: 15px;
  transition: background .18s, transform .18s;
}
.duga-peek:hover .duga-peek__go { background: var(--brass); color: var(--onBrass); transform: translateY(3px); }

@media (max-width: 860px) {
  .duga-peek { gap: 12px 14px; padding: 14px; }
  body.fz .duga-peek__i img { height: 104px; }
  .duga-peek__tx b { font-size: 16px; }
}

/* 記事の見出しへ飛ぶアンカーが固定ヘッダーに潜らないようにする */
body.fz #works { scroll-margin-top: 92px; }

/* ============================================================
   アーカイブ（カテゴリ・検索）の記事一覧
   🔴 Arkhe 既定のままだと面も罫も無く、サイトのカード（.fz-post）と揃わない。
      同じ見た目に寄せる。
   ============================================================ */

body.fz .p-postListWrap { display: block; }   /* 冒頭で display:none にしていたのを戻す */

body.fz .p-postList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin: 0;
}
body.fz .p-postList__item {
  width: auto !important; margin: 0 !important; padding: 0 !important;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  transition: border-color .18s, transform .18s, box-shadow .18s;
  overflow: hidden;
}
body.fz .p-postList__item:hover {
  border-color: var(--brass); transform: translateY(-3px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
}
body.fz .p-postList__link { display: block; height: 100%; }
body.fz .p-postList__thumb { margin: 0; border-radius: 0; position: relative; }
body.fz .p-postList__thumb::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: rgba(255,255,255,.07);
}
body.fz .p-postList__body { padding: 16px 18px 18px; }
body.fz .p-postList__title {
  font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--ink);
  margin: 0 0 10px;
}
body.fz .p-postList__item:hover .p-postList__title { color: var(--brass3); }
body.fz .p-postList__excerpt { font-size: 14px; color: var(--muted); line-height: 1.85; }
body.fz .p-postList__meta,
body.fz .p-postList__times,
body.fz .p-postList__cats { font-size: 14px; color: var(--muted); }
body.fz .p-postList__cats a { color: var(--brass2); }

/* ページャ */
body.fz .c-pageNation a,
body.fz .c-pageNation span {
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
body.fz .c-pageNation .current { background: var(--brass); color: var(--onBrass); border-color: var(--brass); }

@media (max-width: 600px) {
  body.fz .p-postList { grid-template-columns: 1fr; gap: 13px; }
}

/* ============================================================
   N選型：入れ子目次 と 軸ごとのTOP10ブロック
   ------------------------------------------------------------
   規程 article-nsen-template.md 4.（長文で離脱させない実装）
   🔴 body.fz を前置しないと Arkhe の main.css に負ける
   ============================================================ */

body.fz .fz-toc {
	margin: 40px 0;
	padding: 24px clamp(18px, 3vw, 32px);
	background: var(--bg2);
	border: 1px solid var(--line);
	border-radius: 10px;
}
body.fz .fz-toc__h {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--brass2);
}
body.fz .fz-toc__list {
	margin: 0;
	padding-left: 1.4em;
	font-size: 15px;
	line-height: 1.9;
}
body.fz .fz-toc__list > li { margin-bottom: 8px; }
body.fz .fz-toc__list > li > a { color: var(--ink); font-weight: 600; }
body.fz .fz-toc__sub {
	margin: 6px 0 0;
	padding-left: 1.1em;
	list-style: disc;
	font-size: 14px;
}
body.fz .fz-toc__sub a { color: var(--ink2); font-weight: 400; }
body.fz .fz-toc__more { list-style: none; margin-left: -1.1em; }
body.fz .fz-toc__more summary {
	cursor: pointer;
	color: var(--brass2);
	font-size: 14px;
	padding: 4px 0;
}
body.fz .fz-toc__more ul { margin: 6px 0 0; padding-left: 1.1em; list-style: disc; }

/* 🔴 sticky にしない。
   章×3件の入れ子目次は縦に長く、追従させると画面を占有して本文が読めなくなる。
   規程 4-⑦ の「PCのみ追従」は項目数の少ない目次を前提にした記述で、
   この型（10選×N章）では成立しない。実測して外した。 */

/* --- 並びの根拠（リストの直上に毎回出す。景表法） --- */
body.fz .duga-rank__note {
	margin: 0 0 22px;
	padding: 12px 16px;
	background: var(--surface);
	border-left: 3px solid var(--brass);
	border-radius: 0 6px 6px 0;
	font-size: 14px;
	line-height: 1.8;
	color: var(--ink2);
}

/* --- 1作品ぶんのブロック --- */
body.fz .duga-rank { margin: 0 0 48px; }
body.fz .duga-blk {
	margin: 0 0 28px;
	padding: 0 0 28px;
	border-bottom: 1px solid var(--line);
}
body.fz .duga-blk:last-child { border-bottom: 0; }
body.fz .duga-blk__h {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
	font-size: clamp(16px, 2.2vw, 19px);
	line-height: 1.55;
	font-weight: 700;
}
body.fz .duga-blk__no {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	background: var(--brass);
	color: var(--onBrass);
	border-radius: 6px;
	font-size: 15px;
	font-weight: 800;
}
body.fz .duga-blk__h a { color: var(--ink); }
body.fz .duga-blk__h a:hover { color: var(--brass2); }

body.fz .duga-blk__body { display: grid; grid-template-columns: 240px 1fr; gap: 20px; }
body.fz .duga-blk__thumb { display: block; }
body.fz .duga-blk__thumb img {
	display: block;
	width: 100%;
	height: auto;      /* 🔴 縦横比を保つ。トリミング禁止（DUGA規約） */
	border-radius: 6px;
	background: var(--surface);
}
body.fz .duga-blk__meta,
body.fz .duga-blk__stat {
	margin: 0 0 6px;
	font-size: 14px;   /* 🔴 14px未満にしない（規程 6. #7・実ブラウザで測って落ちた） */
	color: var(--muted);
}
body.fz .duga-blk__note {
	margin: 10px 0;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ink);
}
body.fz .duga-blk__cap {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink2);
}
body.fz .duga-blk__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	background: var(--brass);
	color: var(--onBrass);
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
}
body.fz a.duga-blk__btn { color: var(--onBrass); }   /* body.fz a に負けないため */
body.fz .duga-blk__btn:hover { background: var(--brass2); }

@media (max-width: 700px) {
	body.fz .duga-blk__body { grid-template-columns: 1fr; gap: 14px; }
	body.fz .duga-blk__thumb { max-width: 280px; }
}


/* 🔴 Arkhe の投稿日（.c-postTimes__item）が 12px で出る。
   規程「計算後のfont-sizeは14px以上」に落ちるので上書きする。
   main.css の指定に勝つため body.fz を前置する。 */
body.fz .c-postTimes__item,
body.fz .c-postTimes__item time,
body.fz time.c-postTimes__item { font-size: 14px; }