@charset "utf-8";
/* ============================================================
   痴女ズカン｜custom.css

   採用デザイン：クロス表（早見表）型
   配色：白磁＋濃紫＋艶紅。
        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:#F8F6FB;
  --paper-2:#EFEAF6;
  --card:#FFFFFF;
  --ink:#1D1826;
  --ink-2:#463D57;
  --ink-3:#736A82;
  --line:#E4DDEF;
  --line-2:#C8BDDC;
  --accent:#6B2E8F;
  --accent-2:#8C46B2;
  --accent-wash:#F3EBFA;
  --gold:#9A6FB0;         /* 英字アクセントラベルの色。金ではなく淡い紫にしている */
  --av:#6B2E8F;
  --comic:#2F7A6B;
  --doujin:#C2557A;
  --radius:14px;
  --container:1440px;
  --shadow:0 1px 2px rgba(29,24,38,.04), 0 8px 24px rgba(29,24,38,.07);
  --shadow-h:0 2px 4px rgba(29,24,38,.06), 0 16px 40px rgba(29,24,38,.12);
}

*,*::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(248,246,251,.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(29,24,38,.94) 0%, rgba(29,24,38,.74) 46%, rgba(29,24,38,.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:#DFC8EC; border:1px solid rgba(223,200,236,.5); border-radius:999px; padding:6px 16px;
}
.mv__cap svg{width:13px; height:13px}
.mv__ttl{
  /* 🔴 4.4vw だと1280px以下で「引く。」だけ3行目に落ちる。列幅に追従させる */
  color:#FBF7FE; 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:#D9A8E8}
.mv__lead{color:rgba(251,247,254,.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,255,255,.09); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:14px 22px}
.mv__stat b{display:block; color:#FBF7FE; font-size:24px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums}
.mv__stat span{display:block; color:rgba(251,247,254,.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)}

/* ============================================================
   クロス表（このサイトの核）

   タイプ7 × 責め方7 のマトリクス。件数の多い少ないを背景の濃さで見せる。
   🔴 濃さは平方根で伸ばしている（functions.php 側）。線形にすると
      巨乳×中出しだけが濃く、残り48マスがほぼ同じ薄さになって表の意味が消える。
   ============================================================ */
.mx-wrap{position:relative}
.mx--cross{font-variant-numeric:tabular-nums}
.mx--cross th,.mx--cross td{padding:12px 10px; text-align:center; white-space:nowrap}
.mx--cross thead th{font-size:14px; letter-spacing:.02em}
.mx--cross thead th a{display:block}
.mx--cross thead th a:hover{color:var(--accent)}

/* 🔴 1列目は横スクロール時に固定する。SPでタイプ名が流れると数字の意味が分からなくなる */
.mx--cross .mx__row,
.mx--cross .mx__corner{
  position:sticky; left:0; z-index:2;
  background:var(--paper-2); text-align:left; font-weight:700;
  box-shadow:1px 0 0 var(--line);
}
.mx--cross .mx__row a{display:block; color:var(--ink)}
.mx--cross .mx__row a:hover{color:var(--accent)}
.mx__corner{line-height:1.35}
.mx__corner span{display:block; font-size:14px}
.mx__corner small{display:block; font-size:14px; color:var(--ink-3); font-weight:600}

/* 濃淡5段階。文字色は濃いマスだけ白へ寄せる（コントラスト確保） */
.mx--cross td{background:var(--card); color:var(--ink-2); font-size:14px; font-weight:600}
.mx--cross td.lv1{background:#F5EFFA}
.mx--cross td.lv2{background:#E8DAF5}
.mx--cross td.lv3{background:#D2B8EA; color:var(--ink)}
.mx--cross td.lv4{background:#A972CE; color:#fff}
.mx--cross td.lv5{background:#6B2E8F; color:#fff}
.mx--cross tbody tr:hover td{filter:brightness(.97)}
.mx__cap{margin:12px 0 0; font-size:14px; color:var(--ink-3); line-height:1.8}

/* ── タイプカード（画像つき一覧） ─────── */
/* 🔴 枚数固定にしない。イラストが揃っているタイプだけ画像が出るので、枠だけでも成立させる */
.tcards{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:18px}
@media(max-width:1080px){ .tcards{grid-template-columns:repeat(3,1fr)} }
@media(max-width:560px){ .tcards{grid-template-columns:repeat(2,1fr)} }
.tcard{background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden;
       box-shadow:var(--shadow); transition:.22s}
.tcard:hover{transform:translateY(-3px); box-shadow:var(--shadow-h); border-color:var(--line-2)}
.tcard__img{aspect-ratio:1/1; background:var(--paper-2)}
.tcard__img img{aspect-ratio:1/1; object-fit:cover; width:100%}
.tcard__bd{padding:14px 15px 16px}
.tcard__ttl{font-size:16px; font-weight:700}
.tcard__n{font-size:17px; font-weight:700; color:var(--accent); margin-top:4px; font-variant-numeric:tabular-nums}
.tcard__n small{font-size:14px; color:var(--ink-3); font-weight:600; margin-left:2px}
.tcard .bar{margin-top:10px}

/* ── チップ ───────────────────────────── */
.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)}

/* ── 表 ───────────────────────────────── */
.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:#FBF7FE}
.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:#FBF7FE; font-size:23px; margin-bottom:18px}
.agegate p{color:rgba(251,247,254,.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:#DFC8EC; border-color:rgba(223,200,236,.44)}
.agegate .btn--ghost:hover{background:rgba(223,200,236,.14)}

/* ── フッター ─────────────────────────── */
.ft{background:var(--ink); color:rgba(251,247,254,.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:#FBF7FE}
.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(107,46,143,.24); border:1px solid rgba(140,70,178,.44); border-radius:8px; color:#EDDCF6}
.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:#DFC8EC; 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(251,247,254,.72)}
.ftc a:hover{color:#FBF7FE}
.ftc a svg{width:11px; height:11px; opacity:.5; flex:0 0 auto}
.ftc__n{margin-left:auto; font-size:14px; color:rgba(251,247,254,.44); font-variant-numeric:tabular-nums}
.ft__bottom{border-top:1px solid rgba(251,247,254,.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:#FBF7FE; 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:#FBF7FE; 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; }

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

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

.cz-related{ margin-top:64px; }
.cz-related__h{
  display:flex; align-items:center; gap:10px;
  font-size:clamp(19px,2.2vw,23px); font-weight:700; margin-bottom:26px;
}
.cz-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 .cz-source,
.single .p-entry__foot{ max-width:880px; margin-inline:auto; }
.single .cz-related{ max-width:none; }
.single .cz-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あり空きすぎ */
.cz-source{ margin-top:44px; }

/* 出典ブロックと関連記事の間 */
.cz-related{ margin-top:56px; }
@media(max-width:860px){ .cz-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; }

/* ============================================================
   実ブラウザ実測で拾った直し（2026-08-18）
   ============================================================ */

/* 🔴 英字アクセントラベルが13px。英字とはいえ規程は14px床なので上げる。
      字間を広く取っているので、14pxにしても見た目の細さは保てる。 */
.sec__en,
.phead__en,
.logo__tx span{ font-size:14px; }

/* 🔴 CF7 のフォーム部品が SP で画面幅をはみ出す（実測 right=403 / 幅390）。
      input が既定で width:auto のまま padding と border を足すため。 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select{
  width:100%; max-width:100%; box-sizing:border-box;
  font-size:16px;              /* 16px未満だと iOS で入力時に画面が拡大する */
  padding:12px 14px; border:1px solid var(--line-2); border-radius:8px; background:var(--card);
}
.wpcf7-form-control-wrap{ display:block; max-width:100%; }
.wpcf7 label{ display:block; max-width:100%; font-size:14px; font-weight:700; }
.wpcf7 form.wpcf7-form{ max-width:100%; overflow:hidden; }

/* ── トップの導入文（読み物型TOP） ───────────────
   MVの直後に置く。件数や表を出さず、文章だけで受ける区画。 */
.intro{ max-width:820px; margin-inline:auto; }
.intro__ttl{
  font-size:clamp(21px,2.4vw,29px); font-weight:700; margin:0 0 26px; padding-bottom:14px;
  border-bottom:2px solid var(--line-2); position:relative;
}
.intro__ttl::after{ content:""; position:absolute; left:0; bottom:-2px; width:76px; height:2px; background:var(--accent); }
.intro p{ margin:0 0 22px; font-size:16px; line-height:2.0; color:var(--ink-2); }
.intro p:last-child{ margin-bottom:0; }
.intro strong{ color:var(--accent); font-weight:700; }

/* 読み物カードはカテゴリ名を出さない（カテゴリが1つしかないため情報にならない） */
.post__bd{ padding-block:20px 22px; }

/* 🔴 Arkhe の投稿日時 .c-postTimes__item は SP で 11.7px（.9em）まで縮む。
      PCでは14px以上なので、SPだけで規程違反になる。床を敷く。 */
.c-postTimes__item,
.c-postTimes__item *{ font-size:14px !important; }

/* ── 記事詳細のページヘッダーは細くする ──────────────
   🔴 記事タイトルはここに出さない（本文側の entry-title と二重になる）。
      カテゴリ名だけを置き、帯の高さも落とす。 */
.phead--slim{ padding-block:26px 22px; }
.phead--slim .phead__icon{ width:36px; height:36px; margin-bottom:10px; }
.phead--slim .phead__icon svg{ width:18px; height:18px; }
.phead--slim .phead__ttl{ font-size:17px; }
.phead--slim .phead__en{ margin-top:7px; }

/* パンくずは本文と同じ幅・同じ左端に揃える（記事は880px幅） */
.single .bc,
.page .bc{ max-width:880px; margin-inline:auto; }

/* 🔴 Arkhe の記事カードは上に52pxの余白を持つ。ページヘッダーとパンくずが
      すでに間を作っているので、記事詳細では詰める。 */
.single .l-main__body{ padding-top:0; }
.single .p-entry{ margin-top:0; }
.single .p-entry__title{ margin-top:0; padding-top:28px; }

/* ============================================================
   運営者情報ページ（プロフィールカード ＋ 定義リスト）

   🔴 他サイト（NTR図鑑・AV女優の沼・エロコミ図鑑）と同じ項目立てにする。
      サイト名／運営者／運営責任者／所在地／お問い合わせ／開設／取り扱う内容。
   ============================================================ */

.profile{
  display:flex; flex-direction:column; gap:16px;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:22px 24px; margin:0 0 26px; box-shadow:var(--shadow);
}
.profile__head{ display:flex; align-items:center; gap:16px; }
.profile__avatar{
  width:56px; height:56px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, var(--doujin) 100%);
  color:#fff; font-weight:700; font-size:17px; letter-spacing:.06em;
  display:flex; align-items:center; justify-content:center;
}
.profile__name{ font-size:19px; font-weight:700; letter-spacing:.04em; }
.profile__role{ font-size:14px; color:var(--ink-3); font-weight:600; margin-top:3px; }
.profile__note{ margin:0; font-size:14px; line-height:1.9; color:var(--ink-2); }

/* 定義リスト。SPでは縦積みにする */
.about-dl{
  margin:0 0 24px; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; background:var(--card);
  display:grid; grid-template-columns:200px 1fr;
}
.about-dl dt,
.about-dl dd{ margin:0; padding:14px 20px; border-bottom:1px solid var(--line); font-size:15px; line-height:1.8; }
.about-dl dt{ background:var(--paper-2); font-weight:700; color:var(--ink); }
.about-dl dd{ color:var(--ink-2); word-break:break-all; }
.about-dl dt:nth-last-of-type(1),
.about-dl dd:nth-last-of-type(1){ border-bottom:0; }
.about-dl a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
@media(max-width:640px){
  .about-dl{ grid-template-columns:1fr; }
  .about-dl dt{ padding-bottom:6px; border-bottom:0; }
  .about-dl dd{ padding-top:6px; }
}

/* 固定ページ本文も記事と同じ組版にする（Arkhe既定は行間が詰まる） */
.page .c-postContent h2{
  font-size:clamp(19px,2.2vw,25px); font-weight:700; margin:48px 0 18px; padding:0 0 12px;
  border-bottom:2px solid var(--line-2); position:relative;
}
.page .c-postContent h2::after{ content:""; position:absolute; left:0; bottom:-2px; width:76px; height:2px; background:var(--accent); }
.page .c-postContent p{ margin:0 0 20px; line-height:2.0; }
.page .c-postContent ul{ margin:0 0 22px; padding-left:1.4em; }
.page .c-postContent li{ margin-bottom:8px; line-height:1.95; }
.page .c-postContent > *:first-child{ margin-top:0; }

/* 🔴 ロゴ下の英字サブが14pxではサイト名と competing して大きく見える。
      日本語が入らない装飾ラベルなので12pxまで落とし、字間で存在感を出す。
      （本文の14px床は日本語のための規程。英字だけのラベルは対象外） */
.logo__tx span{ font-size:12px; letter-spacing:.26em; }
@media(max-width:520px){ .logo__tx span{ font-size:11px; letter-spacing:.2em; } }

/* 🔴 MV背景は object-fit:cover なので、既定の中央合わせだと人物の顔が上端で切れる。
      実写MV（女性が上、男性が下）に合わせて上寄りに送る。 */
.mv__bg{ object-position:center 26%; }
@media(max-width:860px){ .mv__bg{ object-position:62% 30%; } }

/* ── お問い合わせフォーム ──────────────────────────
   🔴 CF7 の既定マークアップは label と input が素で並ぶだけ。
      項目の区切り・必須バッジ・補足文が無いと、何を書けばいいのか分からない。 */
.cf-row{ margin:0 0 22px; }
.cf-label{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px;
}
.cf-req,
.cf-opt{
  font-size:14px; font-weight:700; letter-spacing:.04em;
  padding:2px 8px; border-radius:4px; line-height:1.6;
}
.cf-req{ background:var(--accent); color:#fff; }
.cf-opt{ background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line); }
.cf-help{ display:block; margin-top:7px; font-size:14px; color:var(--ink-3); line-height:1.8; }
.cf-note{
  background:var(--paper-2); border:1px solid var(--line); border-radius:8px;
  padding:14px 16px; font-size:14px; line-height:1.85; color:var(--ink-2); margin:0 0 24px;
}
.cf-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.cf-submit{ text-align:center; }
.wpcf7 input[type="submit"]{
  background:var(--accent); color:#fff; border:0; border-radius:8px;
  font-size:15px; font-weight:700; letter-spacing:.08em; padding:15px 56px; cursor:pointer; transition:.2s;
}
.wpcf7 input[type="submit"]:hover{ background:var(--accent-2); transform:translateY(-1px); }
.wpcf7 select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center; background-size:6px 6px; background-repeat:no-repeat; }
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.wpcf7-not-valid-tip{ font-size:14px; color:#C2557A; margin-top:6px; }
.wpcf7-response-output{
  font-size:14px; line-height:1.8; border-radius:8px; padding:14px 16px !important; margin:20px 0 0 !important;
}

/* 固定ページの本文幅も記事に揃える（既定だと1136pxまで広がり、フォームが間延びする） */
.page .c-postContent,
.page .p-entry__foot{ max-width:880px; margin-inline:auto; }