@charset "utf-8";
/* ============================================================
   近親相姦ズ｜custom.css

   採用デザイン：S1 家系図型（design/S1_kakeizu.html）
   配色：生成り＋墨＋臙脂。NTR図鑑（白＋ネイビー）と意図的に変えている。
        6軸を同じ見た目で並べると量産サイトに見えるため。

   🔴 WordPress化のとき、Arkhe に負ける箇所が3つある。先に潰しておく：
      1. .l-container が max-width:1296px / margin-left:72px / padding-left:48px を持ち
         ページ全体を120px内側へ押し込む → 全部 unset して幅100%に戻す
      2. :where(thead) :is(td,th){color:#fff} が効いて th が白文字になる
         → 背景色と文字色をセットで !important 指定する
      3. .l-content__top .p-topArea がアイキャッチ無しだと高さ352pxの灰色帯になる
         → 独自のページヘッダーを出すので display:none にする
      ここでは静的版なので該当しないが、CSSの書き方はそのまま移せる形にしてある。
   ============================================================ */

:root{
  --paper:#FAF7F2;
  --paper-2:#F3EDE4;
  --card:#FFFDFA;
  --ink:#1F1C1A;
  --ink-2:#4A443E;
  --ink-3:#7C736A;
  --line:#E2D8C9;
  --line-2:#CFC1AC;
  --accent:#8C2F39;
  --accent-2:#B4444F;
  --accent-wash:#F6EAEA;
  --gold:#A8894C;
  --av:#8C2F39;
  --comic:#3F6B5B;
  --doujin:#5B5AA6;
  --radius:14px;
  --container:1440px;
  --shadow:0 1px 2px rgba(31,28,26,.04), 0 8px 24px rgba(31,28,26,.06);
  --shadow-h:0 2px 4px rgba(31,28,26,.06), 0 16px 40px rgba(31,28,26,.10);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.85; letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{line-height:1.5; letter-spacing:.01em; margin:0}
/* 🔴 本文の最小文字サイズは14px。これを下回らせない */
small{font-size:14px}

.wrap{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px}
@media(max-width:900px){ .wrap{padding-inline:20px} }

/* ── セクション ───────────────────────── */
/* 🔴 88px だとセクション間が実測204〜211pxになる（前の下88＋次の上88＋見出しの余白）。
      規程の目安はセクション間92px前後。64pxに落として実測150px前後にする。 */
.sec{padding:64px 0}
@media(max-width:860px){ .sec{padding:48px 0} }
.sec--tint{background:var(--paper-2)}
.sec__head{margin-bottom:36px}
.sec__en{display:block; font-size:13px; letter-spacing:.28em; font-weight:700; color:var(--gold); margin-bottom:10px}
.sec__ttl{font-size:clamp(21px, 2.4vw, 29px); font-weight:700; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sec__ttl svg{width:24px; height:24px; color:var(--accent); flex:0 0 auto}
/* 🔴 .62em だと SP で見出しが21pxまで縮んだとき 13.02px になる。日本語なので14px床を敷く */
.sec__ttl .num{font-size:max(14px, .62em); color:var(--accent); font-weight:700; letter-spacing:.04em}
.sec__lead{margin:14px 0 0; color:var(--ink-2); font-size:15px; max-width:70ch}
.sec__more{margin-top:34px; text-align:center}

/* ── ボタン ───────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff;
  font-weight:700; font-size:14px; padding:15px 34px; border-radius:8px; letter-spacing:.06em;
  transition:.2s;
}
.btn:hover{background:var(--accent-2); transform:translateY(-1px)}
.btn svg{width:17px; height:17px}
.btn--ghost{background:transparent; color:var(--accent); border:1.5px solid var(--line-2)}
.btn--ghost:hover{background:var(--accent-wash); border-color:var(--accent); transform:none}

/* ── ヘッダー（幅100%） ───────────────── */
.gh{
  position:sticky; top:0; z-index:60; width:100%;
  background:rgba(250,247,242,.95); border-bottom:1px solid var(--line);
  /* 🔴 backdrop-filter は使わない。スタッキングコンテキストを作って
        ドロワーがヘッダーの下に潜り、SPで開くまで露見しない事故になる */
}
.gh__in{display:flex; align-items:center; gap:28px; height:74px}
.logo{display:flex; align-items:center; gap:11px; flex:0 0 auto}
.logo__mark{width:34px; height:34px; flex:0 0 auto}
.logo__tx{display:flex; flex-direction:column; line-height:1.25}
.logo__tx b{font-size:20px; font-weight:700; letter-spacing:.06em}
.logo__tx span{font-size:13px; letter-spacing:.22em; color:var(--ink-3); font-weight:700}
.gnav{display:flex; gap:26px; margin-left:auto; font-size:14px; font-weight:600}
.gnav a{color:var(--ink-2); padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap}
.gnav a:hover,.gnav a.is-current{color:var(--accent); border-bottom-color:var(--accent)}
.gsearch{
  display:flex; align-items:center; gap:8px; background:var(--card);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 16px; width:240px; flex:0 0 auto;
}
.gsearch svg{width:15px; height:15px; color:var(--ink-3); flex:0 0 auto}
.gsearch input{border:0; background:transparent; outline:none; font-size:14px; width:100%; color:var(--ink)}
@media(max-width:1120px){ .gsearch{display:none} }
@media(max-width:900px){ .gnav{display:none} }

/* ハンバーガー */
.hamb{display:none; margin-left:auto; width:44px; height:44px; border:0; background:transparent;
      flex-direction:column; justify-content:center; gap:6px; cursor:pointer; padding:0}
.hamb span{display:block; width:24px; height:2px; background:var(--ink); margin-inline:auto; transition:.25s}
.hamb.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hamb.is-open span:nth-child(2){opacity:0}
.hamb.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media(max-width:900px){ .hamb{display:flex} }

.drawer{
  position:fixed; inset:74px 0 auto 0; z-index:55; background:var(--card);
  border-bottom:1px solid var(--line); padding:12px 20px 24px;
  transform:translateY(-120%); transition:transform .28s; max-height:calc(100vh - 74px); overflow-y:auto;
}
.drawer.is-open{transform:translateY(0)}
.drawer a{display:block; padding:14px 4px; font-size:15px; font-weight:600; border-bottom:1px solid var(--line)}
.drawer a:last-child{border-bottom:0}

/* ── MV ───────────────────────────────── */
.mv{position:relative; background:var(--ink); overflow:hidden}
.mv__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4}
.mv::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(31,28,26,.94) 0%, rgba(31,28,26,.74) 46%, rgba(31,28,26,.34) 100%);
}
/* 🔴 padding のショートハンドを使うと .wrap の左右余白（SP 20px）を0で上書きしてしまう。
      SPで見出しが画面端に張り付いていた。縦だけ指定する。 */
.mv__in{position:relative; z-index:2; padding-block:112px 96px}
.mv__cap{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.24em; font-weight:700;
  color:#E9D9B8; border:1px solid rgba(233,217,184,.5); border-radius:999px; padding:6px 16px;
}
.mv__cap svg{width:13px; height:13px}
.mv__ttl{
  /* 🔴 4.4vw だと1280px以下で「引く。」だけ3行目に落ちる。列幅に追従させる */
  color:#FFF9F0; font-size:clamp(26px, 3.6vw, 52px); font-weight:700;
  margin:24px 0 0; line-height:1.42; text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.mv__ttl em{font-style:normal; color:#E3A0A8}
.mv__lead{color:rgba(255,249,240,.86); font-size:16px; margin:20px 0 0; max-width:56ch}
.mv__stats{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.mv__stat{background:rgba(255,253,250,.09); border:1px solid rgba(255,253,250,.2); border-radius:12px; padding:14px 22px}
.mv__stat b{display:block; color:#FFF9F0; font-size:24px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}
.mv__stat span{display:block; color:rgba(255,249,240,.7); font-size:14px; letter-spacing:.14em; margin-top:4px}

/* ── 下層ページ共通ヘッダー（全幅・薄いグラデ・センター寄せ） ── */
.phead{
  width:100%; text-align:center; padding:56px 0 52px;
  background:linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.phead__icon{
  width:46px; height:46px; margin:0 auto 16px; color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-wash); border-radius:50%;
}
.phead__icon svg{width:23px; height:23px}
.phead__ttl{font-size:clamp(23px, 3vw, 34px); font-weight:700}
.phead__en{display:block; font-size:13px; letter-spacing:.26em; color:var(--gold); font-weight:700; margin-top:11px}
.phead__lead{margin:18px auto 0; max-width:64ch; color:var(--ink-2); font-size:15px; padding-inline:20px}

/* ── パンくず ─────────────────────────── */
.bc{font-size:14px; color:var(--ink-3); padding:16px 0}
.bc ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bc li::after{content:"›"; margin-left:8px; color:var(--line-2)}
.bc li:last-child::after{content:""}
.bc a:hover{color:var(--accent)}

/* ── 媒体バッジ / 件数バー ────────────── */
.mb{display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; letter-spacing:.08em}
.mb::before{content:""; width:7px; height:7px; border-radius:2px}
.mb--av::before{background:var(--av)}
.mb--comic::before{background:var(--comic)}
.mb--doujin::before{background:var(--doujin)}
.bar{display:flex; height:7px; border-radius:99px; overflow:hidden; background:var(--line)}
.bar i{display:block; height:100%}
.bar .av{background:var(--av)}
.bar .comic{background:var(--comic)}
.bar .doujin{background:var(--doujin)}

/* ============================================================
   家系図ハブ（S1）
   ============================================================ */
.tree{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:52px 40px 44px; box-shadow:var(--shadow); position:relative;
}
@media(max-width:760px){ .tree{padding:34px 16px 28px} }

.tree__gen{position:relative; display:flex; justify-content:center; gap:18px; flex-wrap:wrap}
.tree__gen + .tree__gen{margin-top:74px}
.tree__lab{
  position:absolute; left:-4px; top:50%; transform:translateY(-50%);
  font-size:14px; letter-spacing:.2em; font-weight:700; color:var(--gold); writing-mode:vertical-rl;
}
@media(max-width:1180px){ .tree__lab{display:none} }
.tree__gen + .tree__gen::before{
  content:""; position:absolute; left:50%; top:-56px; width:1px; height:38px; background:var(--line-2);
}
.tree__gen + .tree__gen::after{
  content:""; position:absolute; left:12%; right:12%; top:-18px; height:1px; background:var(--line-2);
}
@media(max-width:760px){ .tree__gen + .tree__gen::after{left:6%; right:6%} }

/* 🔴 同世代は7ノード。148px（主役166px）で1行に収まる。
      172pxにすると1つだけ折り返して木に見えなくなる（実測済み） */
.node{
  position:relative; width:148px; background:var(--paper); border:1px solid var(--line-2);
  border-radius:12px; padding:15px 10px 13px; text-align:center; transition:.2s;
}
.node::before{content:""; position:absolute; left:50%; top:-18px; width:1px; height:18px; background:var(--line-2)}
.tree__gen:first-child .node::before{display:none}
.node:hover{border-color:var(--accent); background:var(--accent-wash); transform:translateY(-2px)}
.node__ja{font-size:15px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.node__en{font-size:13px; letter-spacing:.16em; color:var(--ink-3); font-weight:700; margin-top:3px}
.node__n{font-size:19px; font-weight:700; color:var(--accent); margin-top:9px; font-variant-numeric:tabular-nums}
.node__n small{font-size:14px; color:var(--ink-3); font-weight:600; margin-left:2px}
.node .bar{margin-top:10px}
.node--main{width:166px; background:var(--ink); border-color:var(--ink)}
.node--main .node__ja{color:#FFF9F0; font-size:17px}
.node--main .node__en{color:rgba(255,249,240,.6)}
.node--main .node__n{color:#E3A0A8}
.node--main:hover{background:var(--ink); border-color:var(--gold); transform:translateY(-2px)}
.node--thin{opacity:.62}
.node--thin:hover{opacity:1}
@media(max-width:760px){
  .node,.node--main{width:calc(50% - 9px)}
  .tree__gen{gap:12px}
}
.tree__legend{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  margin-top:38px; padding-top:24px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-3);
}

/* ── 続柄カード（画像つき一覧） ─────── */
/* 🔴 枚数固定にしない。イラストが揃っている続柄だけ出すので枚数が変わる */
.rels{display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:18px}
@media(max-width:1080px){ .rels{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .rels{grid-template-columns:repeat(2,1fr)} }
.rel{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
     box-shadow:var(--shadow); transition:.22s}
.rel:hover{transform:translateY(-3px); box-shadow:var(--shadow-h)}
.rel img{aspect-ratio:1/1; object-fit:cover; width:100%}
.rel__bd{padding:14px 14px 16px; text-align:center}
.rel__ja{font-size:16px; font-weight:700}
.rel__n{font-size:15px; font-weight:700; color:var(--accent); margin-top:4px; font-variant-numeric:tabular-nums}

/* ── チップ ───────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{
  display:inline-flex; align-items:baseline; gap:8px; background:var(--card);
  border:1px solid var(--line-2); border-radius:999px; padding:9px 18px;
  font-size:14px; font-weight:600; transition:.18s;
}
.chip:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-wash)}
.chip small{font-size:14px; color:var(--ink-3); font-weight:700}
.chip:hover small{color:var(--accent-2)}

/* ── 記事カード ───────────────────────── */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
@media(max-width:980px){ .posts{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .posts{grid-template-columns:1fr} }
.post{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); transition:.22s; display:flex; flex-direction:column;
}
.post:hover{transform:translateY(-3px); box-shadow:var(--shadow-h); border-color:var(--line-2)}
.post__img{aspect-ratio:16/9; background:var(--paper-2); overflow:hidden}
.post__img img{width:100%; height:100%; object-fit:cover; transition:.4s}
.post:hover .post__img img{transform:scale(1.04)}
.post__bd{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.post__cat{
  font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--accent);
  background:var(--accent-wash); border-radius:4px; padding:4px 9px; align-self:flex-start;
}
.post__ttl{font-size:15px; font-weight:700; margin:12px 0 0; line-height:1.68}
.post__meta{margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:8px;
            font-size:14px; color:var(--ink-3); border-top:1px solid var(--line)}
.post__meta b{color:var(--accent); font-size:14px; font-variant-numeric:tabular-nums}
.post__meta svg{width:14px; height:14px; color:var(--ink-3)}

/* ── 間取り（きっかけページで使う。S3から流用） ── */
.plan-grid{
  display:grid; gap:10px; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,minmax(148px,auto));
  grid-template-areas:
    "furo   washitsu washitsu shinshitsu"
    "daidoko ima     ima      kodomo"
    "genkan  ima     ima      oya";
}
@media(max-width:860px){
  .plan-grid{grid-template-columns:repeat(2,1fr); grid-template-rows:auto;
             grid-template-areas:"furo washitsu" "daidoko shinshitsu" "ima ima" "genkan kodomo" "oya oya"}
}
.room{position:relative; border:1.5px solid var(--line-2); border-radius:8px; background:var(--paper);
      padding:16px 18px; display:flex; flex-direction:column; transition:.2s; overflow:hidden}
.room:hover{border-color:var(--accent); background:var(--accent-wash)}
.room__name{font-size:13px; letter-spacing:.18em; font-weight:700; color:var(--gold)}
.room__ttl{font-size:17px; font-weight:700; margin-top:7px; line-height:1.45}
.room__n{font-size:23px; font-weight:700; color:var(--accent); margin-top:auto; padding-top:12px;
         font-variant-numeric:tabular-nums; line-height:1.2}
.room__n small{font-size:14px; color:var(--ink-3); font-weight:600; margin-left:3px}
.room__sub{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.room__sub span{font-size:14px; background:var(--card); border:1px solid var(--line);
                border-radius:99px; padding:3px 10px; color:var(--ink-2); font-weight:600}
.room--big .room__ttl{font-size:21px}
.room--big .room__n{font-size:31px}
.r-furo{grid-area:furo} .r-washitsu{grid-area:washitsu} .r-shinshitsu{grid-area:shinshitsu}
.r-daidoko{grid-area:daidoko} .r-ima{grid-area:ima} .r-kodomo{grid-area:kodomo}
.r-genkan{grid-area:genkan} .r-oya{grid-area:oya}
.r-ima{background:var(--ink); border-color:var(--ink)}
.r-ima .room__name{color:#E9D9B8}
.r-ima .room__ttl{color:#FFF9F0}
.r-ima .room__n{color:#E3A0A8}
.r-ima .room__sub span{background:rgba(255,253,250,.1); border-color:rgba(255,253,250,.22); color:rgba(255,249,240,.82)}
.r-ima:hover{background:var(--ink); border-color:var(--gold)}

/* ── 表 ───────────────────────────────── */
.mx-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.mx{width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
/* 🔴 th は背景色と文字色をセットで指定する。
      WordPress(Arkhe)では :where(thead) :is(td,th){color:#fff} に負けて白文字になる */
.mx th,.mx td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); line-height:1.7}
.mx thead th{background:var(--paper-2); color:var(--ink); font-weight:700; font-size:14px; letter-spacing:.08em}
.mx td.n,.mx th.n{text-align:right; font-variant-numeric:tabular-nums}
.mx tbody tr:last-child td{border-bottom:0}
.mx tbody tr:hover{background:#FCF8F1}
.mx b{color:var(--accent)}

/* ── 注記 ─────────────────────────────── */
.note{background:var(--card); border:1px solid var(--line); border-left:3px solid var(--gold);
      border-radius:8px; padding:18px 22px; font-size:14px; color:var(--ink-2); line-height:1.85}
.note b{color:var(--ink)}
.note--warn{border-left-color:var(--accent); background:var(--accent-wash)}

/* ── 記事本文 ─────────────────────────── */
.article{max-width:820px; margin-inline:auto; padding:52px 0 80px}
.article h2{
  font-size:clamp(19px,2.2vw,25px); font-weight:700; margin:56px 0 20px; padding:0 0 12px;
  border-bottom:2px solid var(--line-2); position:relative;
}
.article h2::after{content:""; position:absolute; left:0; bottom:-2px; width:76px; height:2px; background:var(--accent)}
.article h3{font-size:clamp(17px,1.9vw,20px); font-weight:700; margin:38px 0 14px; padding-left:13px;
            border-left:4px solid var(--accent)}
.article p{margin:0 0 22px; font-size:16px; line-height:2.0}
.article ul,.article ol{margin:0 0 24px; padding-left:1.4em}
.article li{margin-bottom:9px; line-height:1.95}
.article strong{color:var(--accent); font-weight:700}
.article .mx-scroll{margin:0 0 28px}
.article .note{margin:0 0 28px}
.article__lead{
  font-size:16.5px; line-height:2.0; color:var(--ink-2); background:var(--paper-2);
  border-radius:12px; padding:24px 26px; margin:0 0 40px;
}
.article__eye{border-radius:var(--radius); overflow:hidden; margin:0 0 34px; box-shadow:var(--shadow)}

/* 目次 */
.toc{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:24px 26px; margin:0 0 44px}
.toc__h{display:flex; align-items:center; gap:9px; font-size:14px; font-weight:700; letter-spacing:.1em;
        color:var(--gold); margin-bottom:14px}
.toc__h svg{width:17px; height:17px}
.toc ol{margin:0; padding-left:1.3em}
.toc li{margin-bottom:8px; font-size:14.5px}
.toc a:hover{color:var(--accent)}

/* 関連記事 */
.related{background:var(--paper-2); padding:64px 0}

/* ── 年齢確認 ─────────────────────────── */
.agegate{
  position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; padding:24px; text-align:center;
}
.agegate__box{max-width:520px}
.agegate h1{color:#FFF9F0; font-size:23px; margin-bottom:18px}
.agegate p{color:rgba(255,249,240,.78); font-size:14px; line-height:1.9; margin-bottom:28px}
.agegate__btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.agegate .btn--ghost{color:#E9D9B8; border-color:rgba(233,217,184,.44)}
.agegate .btn--ghost:hover{background:rgba(233,217,184,.14)}

/* ── フッター ─────────────────────────── */
.ft{background:var(--ink); color:rgba(255,249,240,.72)}
.ft__main{padding:64px 0 48px}
.ft__grid{display:grid; grid-template-columns:1.3fr 2.4fr; gap:56px}
@media(max-width:900px){ .ft__grid{grid-template-columns:1fr; gap:36px} }
.ft__logo{display:flex; align-items:center; gap:11px; color:#FFF9F0}
.ft__logo b{font-size:19px; letter-spacing:.06em}
.ft__desc{font-size:14px; margin:18px 0 0; line-height:1.9}
.ft__age{display:flex; gap:11px; margin-top:22px; padding:14px 16px; font-size:14px; line-height:1.8;
         background:rgba(140,47,57,.22); border:1px solid rgba(180,68,79,.4); border-radius:8px; color:#F4DCDC}
.ft__age svg{width:19px; height:19px; flex:0 0 auto; margin-top:2px}
.ft__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
@media(max-width:760px){ .ft__cols{grid-template-columns:repeat(2,1fr)} }
.ftc h2{display:flex; align-items:center; gap:8px; font-size:14px; letter-spacing:.12em; color:#E9D9B8; margin-bottom:14px}
.ftc h2 svg{width:15px; height:15px}
.ftc ul{list-style:none; margin:0; padding:0}
.ftc li{margin-bottom:9px}
.ftc a{display:flex; align-items:center; gap:7px; font-size:14px; color:rgba(255,249,240,.72)}
.ftc a:hover{color:#FFF9F0}
.ftc a svg{width:11px; height:11px; opacity:.5; flex:0 0 auto}
.ftc__n{margin-left:auto; font-size:14px; color:rgba(255,249,240,.44); font-variant-numeric:tabular-nums}
.ft__bottom{border-top:1px solid rgba(255,249,240,.14); padding:20px 0; font-size:14px}
.ft__bottom .wrap{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.ft__bottom p{margin:0}
.r18{display:inline-block; background:var(--accent); color:#fff; font-weight:700;
     font-size:14px; padding:2px 7px; border-radius:3px; letter-spacing:.06em; margin-right:8px}

/* トップへ戻る */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:40; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#FFF9F0; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-h); opacity:0; pointer-events:none; transition:.25s;
}
.totop.is-on{opacity:1; pointer-events:auto}
.totop:hover{background:var(--accent)}
.totop svg{width:19px; height:19px}

/* ============================================================
   Arkhe（親テーマ）の上書き

   🔴 実測で拾った箇所だけを直している。憶測で広く !important を撒かない。
      検査方法：Playwright で
      parseFloat(getComputedStyle(el).fontSize) < 14 の要素を列挙してゼロにする。
   ============================================================ */

/* Arkhe のパンくずは出さない。子テーマ側で .bc を出しており二重になる */
.p-breadcrumb{ display:none !important; }

/* 年齢確認の見出し（h1 から p に変えたので見た目を戻す） */
.agegate__h{ color:#FFF9F0; font-size:23px; font-weight:700; margin:0 0 18px; line-height:1.5; }

/* 一覧カード（アーカイブ）。既定は 12.8px / 11px で規程の14pxを下回る */
.p-postList__excerpt,
.p-postList__excerpt p{ font-size:14px !important; line-height:1.8; }
.p-postList__category,
.p-postList__category span,
.p-postList__times,
.p-postList__times *{ font-size:14px !important; }

/* 投稿のカテゴリ表示・前後ナビ・著者ボックス */
.c-postTerms__item,
.c-postTerms__link{ font-size:14px !important; }
.c-pnNav__title{ font-size:14px !important; line-height:1.7; }
.p-authorBox__archivelink,
.p-authorBox__archivelink a{ font-size:14px !important; }

/* コメント欄 */
.comment-notes, .comment-notes *,
.required-field-message, .required-field-message *,
.comment-form label, .comment-form .comment-form-cookies-consent label,
#cancel-comment-reply-link{ font-size:14px !important; }

/* Arkhe の .l-container は margin-left:72px / padding-left:48px を持ち、ページを内側へ押し込む。
   🔴 ここで max-width を付けると、MVや淡色帯まで箱になってヘッダー（全幅）と食い違う。
   🔴 かといって padding まで unset にすると、アーカイブ・記事の文字が画面端に張り付く（実測2,109件）。
   → **全幅は .l-container で取り、左右余白と最大幅は内側（.wrap / .l-main__body）で持たせる。**
      こうすると背景は端まで伸び、文字は必ず内側に収まる。 */
.l-container{
  width:100%; max-width:none; margin-inline:auto;
  padding-inline:0;
}

/* 内側で最大幅と左右余白を持つ */
.l-container .wrap{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px;
}
@media(max-width:900px){ .l-container .wrap{ padding-inline:20px; } }

/* Arkhe側のコンテンツ（アーカイブ・固定ページ・記事）は .wrap を持たないので、ここで面倒を見る */
.l-main{ width:100%; }
.l-main__body{
  width:100%; max-width:var(--container); margin-inline:auto; padding-inline:32px;
}
@media(max-width:900px){ .l-main__body{ padding-inline:20px; } }

/* 本文の包みは .c-postContent。.post_content で書いても当たらない */
.c-postContent > *{ max-width:none; }

/* ============================================================
   家系図の直し

   🔴 世代ラベルを縦書きで左端に絶対配置していたら、同世代の1枚目（妹）に隠れた。
      7ノード＋主役166pxで行が左端まで届くため、絶対配置では必ずぶつかる。
      各行の上に横書きで置く（flex-wrap の中で width:100% にすると単独行になる）。
   🔴 主役ノードを黒背景にしたら、そこだけ色が浮いた。
      同じ生成りのまま、枠と文字色で「ここが最大」を示す。
   ============================================================ */

.tree__lab{
  position:static; writing-mode:horizontal-tb; transform:none;
  width:100%; text-align:center; margin-bottom:16px;
  font-size:14px; letter-spacing:.18em; font-weight:700; color:var(--gold);
}
@media(max-width:1180px){ .tree__lab{ display:block; } }

.tree__gen + .tree__gen{ margin-top:64px; }
.tree__gen + .tree__gen::before{ top:-46px; height:30px; }
.tree__gen + .tree__gen::after{ top:-16px; }

/* 主役ノード（最大件数）。黒ベタをやめて枠と色で示す */
.node--main{
  width:166px; background:var(--accent-wash); border:2px solid var(--accent);
}
.node--main .node__ja{ color:var(--accent); font-size:17px; }
.node--main .node__en{ color:var(--accent-2); }
.node--main .node__n{ color:var(--accent); font-size:21px; }
.node--main:hover{ background:var(--accent-wash); border-color:var(--accent-2); transform:translateY(-2px); }

/* ============================================================
   記事末尾（出典ブロック ＋ 関連記事）
   ============================================================ */

.sz-source{
  max-width:820px; margin:56px auto 0; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px;
}
.sz-source__h{
  display:flex; align-items:center; gap:9px;
  font-size:15px; font-weight:700; color:var(--ink); margin-bottom:14px;
}
.sz-source__h svg{ width:19px; height:19px; color:var(--accent); }
.sz-source p{ font-size:14px; line-height:1.9; color:var(--ink-2); margin:0 0 12px; }
.sz-source p:last-of-type{ margin-bottom:18px; }
.sz-source a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.sz-source__meta{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:0;
  padding-top:16px; border-top:1px solid var(--line-2);
}
.sz-source__meta > div{ display:flex; align-items:baseline; gap:8px; }
.sz-source__meta dt{
  font-size:14px; color:var(--ink-3); font-weight:700; letter-spacing:.04em; margin:0;
}
.sz-source__meta dd{ font-size:14px; color:var(--ink); margin:0; font-weight:600; }

.sz-related{ margin-top:64px; }
.sz-related__h{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(19px,2.2vw,23px); font-weight:700; margin-bottom:26px;
}
.sz-related__h svg{ width:22px; height:22px; color:var(--accent); }

/* サイドバーを止めたので本文を中央の読みやすい幅に収める */
.l-content{ width:100%; }
.p-entry__foot{ max-width:1000px; margin-inline:auto; }

/* 🔴 サイドバーを外したぶん本文が958pxまで広がった。日本語の長文には広すぎる。
      規程は「長文は900px前後の読みやすい幅」。出典ブロック・関連記事と幅を揃える。 */
.single .c-postContent,
.single .sz-source,
.single .p-entry__foot{ max-width:880px; margin-inline:auto; }
.single .sz-related{ max-width:none; }
.single .sz-related .posts{ max-width:880px; margin-inline:auto; }

/* 🔴 Arkhe のアーカイブ一覧 .p-postList は margin-inline:-12px を持つ。
      基準の左右余白に12pxを「足す」こと。12pxだけを指定すると基準を上書きしてしまい、
      アーカイブの文字だけ画面端12pxに張り付く（実測で再発させた）。 */
.l-main__body.p-archive,
.l-main__body.p-home{ padding-inline:calc(32px + 12px); }
@media(max-width:900px){
  .l-main__body.p-archive,
  .l-main__body.p-home{ padding-inline:calc(20px + 12px); }
}

/* 下層ページ見出し：長いタイトルが画面端に触れる（記事タイトルは35字を超える） */
.phead__ttl{ padding-inline:24px; }
@media(max-width:900px){ .phead__ttl{ padding-inline:20px; } }
.phead__en{ padding-inline:20px; }

/* ── MVの人物写真 ────────────────────────────────
   🔴 透過webpなので絶対に切らない。狭いときは縮めて逃がす。幅が狭くても消さない。
   🔴 絶対配置では重なりを詰め切れなかった（実測 1100pxで7px・900pxで3px 文字に乗った）。
      見出しはブロック要素なので getBoundingClientRect では気付けず、
      Range で文字の実際の右端を測って初めて分かる。
      → 2カラムのグリッドにして、構造的に重ならない形にした。
   🔴 グラデーション(.mv::after)より手前に置く。後ろだと右端でも34%暗くなって沈む。 */
.mv{ overflow:hidden; }
.mv__in{ position:relative; z-index:2; }
.mv__body{ min-width:0; }
.mv__photo{
  display:block; width:100%; height:auto; max-width:100%;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45));
  pointer-events:none; align-self:end;
}

@media(min-width:861px){
  .mv__in{
    display:grid; align-items:end; gap:40px;
    grid-template-columns:minmax(0,1fr) minmax(0,var(--mv-photo, 40%));
    padding-bottom:0;
  }
  .mv__body{ padding-bottom:96px; }
  .mv__photo{ margin-bottom:-1px; }   /* 下端をMVの底に付ける */
}
@media(min-width:1440px){ .mv__in{ --mv-photo:42%; } }
@media(max-width:1279px){ .mv__in{ --mv-photo:36%; } }
@media(max-width:1099px){ .mv__in{ --mv-photo:32%; } }

/* 860px以下：見出しの下へ回す。全体を見せる */
@media(max-width:860px){
  .mv__in{ min-height:0; padding-bottom:36px; }
  .mv__photo{ max-width:min(360px, 84%); margin:28px auto 0;
              filter:drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
}
.mv__in{ min-height:430px; }
@media(max-width:860px){ .mv__in{ min-height:0; } }

/* ── ヘッダーを横幅100%に ──────────────────────
   .l-wrap / .wrap の max-width:1320px が効いてロゴが内側に寄っていた。
   ヘッダーだけ幅いっぱいに広げ、左右は余白で持たせる。 */
.gh__in{ max-width:none; width:100%; padding-inline:40px; }
@media(max-width:1100px){ .gh__in{ padding-inline:24px; } }
@media(max-width:900px){ .gh__in{ padding-inline:20px; } }


/* ── 縦余白の調整（実測で拾ったもの） ─────────────── */

/* 🔴 記事・固定ページの大枠とフッターの間が48pxしかなく詰まって見えた */
.l-main__body{ padding-bottom:72px; }
@media(max-width:860px){ .l-main__body{ padding-bottom:48px; } }

/* 本文の最後から出典ブロックまでが160pxあり空きすぎ */
.sz-source{ margin-top:44px; }

/* 出典ブロックと関連記事の間 */
.sz-related{ margin-top:56px; }
@media(max-width:860px){ .sz-related{ margin-top:44px; } }

/* 下層ページ見出しの下（パンくずとの間が81px空いていた） */
.phead{ padding-block:56px 40px; }
@media(max-width:860px){ .phead{ padding-block:40px 30px; } }
.bc{ padding-block:14px; }

/* 🔴 SPで統計カードが 1個→2個→1個 とバラバラに折り返していた。
      flex-wrap 任せだと文字数で折り返し位置が変わる。2列のグリッドに固定する。 */
@media(max-width:860px){
  .mv__stats{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
  .mv__stat{ padding:12px 16px; }
  .mv__stat b{ font-size:21px; }
}
@media(max-width:400px){
  .mv__stat{ padding:11px 12px; }
  .mv__stat b{ font-size:19px; }
  .mv__stat span{ font-size:14px; letter-spacing:.06em; }
}

/* （二重パディングの回避は不要になった。.l-container 側を0にしてある） */

/* 🔴 Arkhe の .c-postContent は左右に26pxの内側パディングを持つ。
      .l-container 側で既に左右余白を取っているので二重になり、
      記事本文だけ他より26px内側から始まっていた（SPで本文47px・他20px）。 */
.c-postContent{ padding-inline:0; }

/* ============================================================
   40選型の作品カード ＋ CTA（DTI収益レイヤー・2026-08-18）

   🔴 作品画像は catalog/dti_images.py を通したものだけを置く。
      DTIは無修正。刑法175条の縛りは素材の出所と無関係なので、
      公式パッケージ画像であってもそのままは載せない。
   ============================================================ */

.sz-works{ margin:32px 0 0; }

.sz-work{
  display:grid; grid-template-columns:260px 1fr; gap:22px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin:0 0 20px;
}
.sz-work__fig{ margin:0; border-radius:10px; overflow:hidden; background:var(--paper-2); align-self:start; }
.sz-work__fig img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.sz-work__body{ min-width:0; }
.sz-work h3{
  font-size:18px; font-weight:700; margin:0 0 8px; color:var(--ink);
  padding:0; border:0; background:none;
}
.sz-work__meta{
  display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 12px;
  font-size:14px; color:var(--ink-3);
}
.sz-work__meta b{ color:var(--ink-2); font-weight:700; }
.sz-work__tags{ display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0; list-style:none; }
.sz-work__tags li{
  font-size:14px; line-height:1.6; padding:3px 11px; border-radius:99px;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2);
}
.sz-work__tags li.is-axis{ background:var(--accent-wash); border-color:var(--accent-2); color:var(--accent); font-weight:700; }

.sz-cta{
  margin:36px 0 44px; padding:26px 28px; border-radius:var(--radius);
  background:var(--ink); color:#FAF7F2;
}
.sz-cta__h{ font-size:19px; font-weight:700; margin:0 0 10px; color:#FAF7F2; }
.sz-cta p{ font-size:14px; line-height:1.9; margin:0 0 18px; color:rgba(250,247,242,.80); }
.sz-cta__btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff; font-weight:700; font-size:15px;
  padding:13px 26px; border-radius:99px; text-decoration:none;
}
.sz-cta__note{ font-size:14px; color:rgba(250,247,242,.60); margin:14px 0 0; }

.sz-pr{
  font-size:14px; color:var(--ink-3); margin:0 0 20px;
  padding:6px 12px; background:var(--paper-2); border-radius:6px; display:inline-block;
}

@media (max-width:720px){
  .sz-work{ grid-template-columns:1fr; gap:14px; padding:14px; }
  .sz-work h3{ font-size:17px; }
}

/* 🔴 14px規程の積み残し（2026-08-18 本番実測で発見）
      Arkhe の投稿日・カテゴリ・前後ナビが 12px / 12.8px のまま残っていた。
      新規記事だけでなく既存9記事すべてで違反していたので、ここでまとめて床を敷く。 */
.c-postMetas, .c-postMetas *,
.c-postTimes, .c-postTimes *,
.c-postTerms, .c-postTerms *,
.c-pnNav__item, .c-pnNav__link, .c-pnNav__link *{ font-size:14px !important; }

/* 🔴 パンくずが本文カラムと248pxずれていた（2026-08-18 本番実測）
      .bc は .l-wrap（1440px・padding32）直下で左端32pxから始まるのに、
      本文（.l-main）は960px中央寄せで240pxから始まる。サイト全ページで起きていた。 */
.bc{ max-width:960px; margin-inline:auto; padding-inline:0; }

/* ページヘッダーはアイコン上の余白が開きすぎていた */
.phead{ padding-block:40px 30px; }