@charset "utf-8";

/* =========================================================
   同人誌ズカン — custom.css
   デザイン言語：DESIGN_STANDARD 01（elegant-mincho-rose）のトーン継承
   パレット：焦茶（2026-07-17 選定）
   本文まで明朝・字間を広く・余白を大きく。
   ========================================================= */

:root{
  /* ── 焦茶パレット ── */
  --acc:#9c6b56;
  --acc-d:#7a5242;
  --acc-p:#eee6e0;
  --acc-pp:#f8f4f0;
  --mv1:#8e8078;
  --mv2:#c0b3aa;
  --mv3:#6e625b;

  --ink:#332c2c;
  --ink2:#6b6060;
  --ink3:#a09694;
  --paper:#faf8f6;
  --white:#fff;
  --rule:#e5dedb;

  --se:"Noto Serif JP","Hiragino Mincho ProN",serif;
  --en:"Cormorant Garamond",serif;
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--se);
  font-weight:300;
  letter-spacing:1.2px;
  line-height:2.1;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   記事本文
   ========================================================= */

.faq-article h1,
.p-entry__title{
  font-family:var(--se);
  font-weight:400;
  font-size:clamp(1.5rem,1.15rem+1.5vw,2.15rem);
  line-height:1.66;
  letter-spacing:.1em;
  margin:0 0 1.5em;
  padding-bottom:.8em;
  border-bottom:1px solid var(--rule);
}

.faq-article h2.bd{
  font-family:var(--se);
  font-weight:400;
  font-size:clamp(1.18rem,1rem+.8vw,1.5rem);
  line-height:1.75;
  letter-spacing:.12em;
  margin:3.4em 0 1.3em;
  padding:0 0 .6em;
  border-bottom:1px solid var(--rule);
  position:relative;
}
.faq-article h2.bd::after{
  content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--acc);
}

.faq-article h3{
  font-family:var(--se);
  font-weight:500;
  font-size:1.04rem;
  line-height:1.8;
  letter-spacing:.08em;
  margin:2.6em 0 1em;
  color:var(--acc-d);
}

.faq-article p{
  line-height:2.25;
  margin:0 0 1.7em;
  font-size:.95rem;
  font-weight:400;
  letter-spacing:.03em;
  color:var(--ink);
}
.faq-article section > p:first-of-type{margin-top:0}

.faq-article strong{
  font-weight:500;
  color:var(--ink);
  background:linear-gradient(transparent 64%,var(--acc-p) 64%);
  padding:0 .12em;
}

.faq-article ul:not([class*="dz-"]),.faq-article ol:not([class*="dz-"]){margin:0 0 1.7em 1.4em}
.faq-article li{font-size:.92rem;line-height:2.15;color:var(--ink);font-weight:400;margin-bottom:.4em;letter-spacing:.03em}

/* リード文（H1直後・section の外） */
.faq-article > p:first-of-type{
  font-size:.96rem;
  line-height:2.35;
  color:var(--ink2);
  padding:1.6em 1.7em;
  background:var(--acc-pp);
  border:0;
  border-left:2px solid var(--acc);
  border-radius:0;
  margin-bottom:3em;
}

/* =========================================================
   表
   ========================================================= */

.faq-article table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 2.2em;
  font-size:.85rem;
  background:var(--white);
  display:block;
  overflow-x:auto;
  white-space:nowrap;
  letter-spacing:.04em;
}
@media (min-width:720px){
  .faq-article table{display:table;white-space:normal}
}
.faq-article th,
.faq-article td{
  border:1px solid var(--rule);
  padding:1em 1.2em;
  text-align:left;
  line-height:2;
  vertical-align:top;
  font-weight:300;
}
.faq-article th{
  background:var(--acc-pp);
  font-weight:400;
  white-space:nowrap;
  color:var(--ink);
}

/* =========================================================
   年齢確認モーダル
   ⚠️ 見た目だけの制限。HTML自体は常に配信される（DMM規約第2条対策）
   ========================================================= */

.dz-age-gate{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  background:rgba(51,44,44,.93);
  backdrop-filter:blur(5px);
}
.dz-age-gate[hidden]{display:none}

.dz-age-gate__panel{
  width:min(100%,30rem);
  background:var(--paper);
  padding:3rem 2rem 2.4rem;
  text-align:center;
}
.dz-age-gate__brand{
  font-size:.9rem;letter-spacing:.24em;color:var(--acc);margin:0 0 2rem;font-weight:400;
}
.dz-age-gate__title{
  font-family:var(--se);font-weight:400;font-size:1.2rem;letter-spacing:.18em;margin:0 0 1.4rem;
}
.dz-age-gate__lead{
  font-size:.8rem;line-height:2.1;color:var(--ink2);margin:0 0 1.8rem;text-align:left;letter-spacing:.04em;
}
.dz-age-gate__q{font-size:.88rem;font-weight:400;margin:0 0 1.6rem;letter-spacing:.1em}
.dz-age-gate__actions{display:flex;flex-direction:column;gap:.9rem;align-items:stretch}
.dz-age-gate__yes{
  appearance:none;border:0;background:var(--acc);color:#fff;
  font-family:var(--se);font-size:.88rem;font-weight:400;letter-spacing:.16em;
  padding:1.1em 1em;cursor:pointer;transition:.25s;
}
.dz-age-gate__yes:hover{background:var(--acc-d)}
.dz-age-gate__no{font-size:.78rem;color:var(--ink3);text-decoration:underline;padding:.5em;letter-spacing:.06em}
body.dz-age-locked{overflow:hidden}

/* =========================================================
   フロントページ
   ========================================================= */

/* ── MV ── */
.dz-mv{
  position:relative;
  min-height:min(82vh,680px);
  display:flex;align-items:center;
  background:linear-gradient(128deg,var(--mv1),var(--mv2) 46%,var(--mv3));
  overflow:hidden;
}
.dz-mv__im{
  position:absolute;right:0;top:0;bottom:0;width:46%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);
}
.dz-mv__im span{font-family:var(--en);font-size:.66rem;letter-spacing:.42em;color:rgba(255,255,255,.45)}
/* 二人が写っているのは画像の左寄りなので、そこを見せる（右端を切ると一人になる） */
.dz-mv__im img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
/* MVの左側（文字が載る側）を暗く落として可読性を確保 */
.dz-mv::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(51,44,44,.62) 0%,rgba(51,44,44,.34) 42%,rgba(51,44,44,.06) 62%,transparent 78%)}
@media(max-width:900px){.dz-mv::after{background:rgba(51,44,44,.3)}}
@media(max-width:900px){.dz-mv__im{width:100%;opacity:.26}}
.dz-mv__in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:60px 30px;width:100%}
.dz-mv__en{
  font-family:var(--en);font-style:italic;
  font-size:clamp(1.3rem,1rem+1.6vw,2.1rem);
  color:rgba(255,255,255,.82);margin:0 0 22px;letter-spacing:.02em;
}
.dz-mv__t{
  font-size:clamp(1.9rem,1.1rem+3.4vw,3.5rem);
  font-weight:300;line-height:1.68;letter-spacing:.1em;color:#fff;margin:0 0 32px;
  text-shadow:0 2px 24px rgba(0,0,0,.16);
}
.dz-mv__t b{font-weight:500;position:relative}
.dz-mv__t b::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:rgba(255,255,255,.6)}
.dz-mv__l{
  font-size:.86rem;line-height:2.35;color:rgba(255,255,255,.88);max-width:440px;letter-spacing:.08em;margin:0;
}

/* ── 共通セクション見出し（01の型） ── */
.dz-sec{padding:clamp(66px,8vw,120px) 30px}
@media(max-width:600px){.dz-sec{padding-left:20px;padding-right:20px}}
.dz-sec__in{max-width:1240px;margin:0 auto}
.dz-sh{text-align:center;margin-bottom:clamp(40px,5vw,66px)}
.dz-sh__en{font-family:var(--en);font-size:.72rem;letter-spacing:.4em;color:var(--acc);margin:0 0 20px}
.dz-sh__t{font-size:clamp(1.3rem,1.05rem+1.1vw,1.85rem);font-weight:400;letter-spacing:.14em;line-height:1.7;margin:0}
.dz-sh__ln{width:56px;height:1px;background:var(--acc);margin:26px auto 22px;opacity:.5}
.dz-sh__l{font-size:.83rem;line-height:2.3;color:var(--ink2);letter-spacing:.06em;margin:0}

/* ── ABOUT ── */
.dz-about{background:var(--acc-pp);position:relative;overflow:hidden}

/* 線画（触れるか触れないかの二つの手）。右端・上寄せ。
   透過PNGなので背景色を変えても壊れない。
   本文と重なっても読めるよう薄く敷き、テキストは前面に置く。 */
.dz-about__deco{
  position:absolute;
  top:0;
  right:0;
  width:clamp(240px,28vw,420px);
  height:auto;
  opacity:.5;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.dz-about .dz-sec__in{position:relative;z-index:1}

@media(max-width:1100px){
  .dz-about__deco{width:clamp(180px,26vw,280px);opacity:.34}
}
@media(max-width:700px){
  /* SPは本文と重なって読めなくなるので、上部に置いて逃がす */
  .dz-about__deco{width:200px;opacity:.28;right:-10px}
}
.dz-about__body{max-width:720px;margin:0 auto;text-align:center}
.dz-about__body p{
  font-size:.9rem;line-height:2.5;color:var(--ink2);letter-spacing:.06em;margin:0 0 1.5em;
}
.dz-about__lead{
  font-size:clamp(1rem,.92rem+.4vw,1.16rem)!important;
  color:var(--ink)!important;line-height:2.2!important;margin-bottom:2em!important;letter-spacing:.1em!important;
}
.dz-about__body strong{
  font-weight:400;color:var(--ink);
  background:linear-gradient(transparent 66%,rgba(156,107,86,.16) 66%);padding:0 .1em;
}
.dz-about__more{margin-top:2.6em!important}

/* ── コラム：ポラロイド風カルーセル ──────────────────
   「これBLっぽい？」から入る、キャッチーな読み物。
   明朝＋余白の静けさの中で、ここだけ少し手触りを出す。
   ───────────────────────────────────────── */

.dz-col{background:var(--white);padding-left:0;padding-right:0}
.dz-col .dz-sec__in{padding-left:30px;padding-right:30px}

/* 横スクロール本体。端で切れず、余韻を残して流す */
.dz-col__scroller{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
  padding:14px 0 30px;
}
.dz-col__scroller::-webkit-scrollbar{height:3px}
.dz-col__scroller::-webkit-scrollbar-track{background:transparent}
.dz-col__scroller::-webkit-scrollbar-thumb{background:var(--rule)}
.dz-col__scroller:hover::-webkit-scrollbar-thumb{background:var(--acc)}

.dz-col__track{
  display:flex;
  gap:30px;
  list-style:none;
  margin:0;
  /* 最初と最後にセクションと同じ余白を作る（端で切れて見えないように） */
  padding:0 max(30px,calc((100vw - 1240px) / 2 + 30px));
  width:max-content;
}
.dz-col__item{margin:0;scroll-snap-align:center;flex:none}

/* ポラロイド：白フチ・下だけ厚い・軽い傾き */
.dz-col__card{
  display:block;
  width:clamp(224px,25vw,272px);
  background:#fff;
  padding:13px 13px 0;
  border:1px solid var(--rule);
  box-shadow:0 6px 22px rgba(51,44,44,.07);
  text-decoration:none;
  transform:rotate(-1.1deg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}
.dz-col__item:nth-child(even) .dz-col__card{transform:rotate(1deg)}
.dz-col__item:nth-child(3n) .dz-col__card{transform:rotate(-.4deg)}
.dz-col__card:hover{
  transform:rotate(0) translateY(-8px);
  box-shadow:0 16px 38px rgba(51,44,44,.15);
}

.dz-col__photo{
  display:block;
  aspect-ratio:1/1;
  background:var(--acc-pp);
  overflow:hidden;
}
.dz-col__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* キャプション部（ポラロイドの下の余白） */
.dz-col__cap{
  display:block;
  padding:16px 4px 20px;
  min-height:104px;
}
.dz-col__ttl{
  display:block;
  font-family:var(--se);
  font-weight:400;
  font-size:.88rem;
  line-height:1.85;
  letter-spacing:.05em;
  color:var(--ink);
}
.dz-col__card:hover .dz-col__ttl{color:var(--acc)}
.dz-col__more{
  display:inline-flex;align-items:center;gap:.5em;
  margin-top:12px;
  font-family:var(--en);font-size:.62rem;letter-spacing:.2em;color:var(--acc);
}
.dz-col__more i{font-size:.85em;transition:transform .3s}
.dz-col__card:hover .dz-col__more i{transform:translateX(4px)}

.dz-col__all{text-align:center;margin:8px 0 0}

@media(max-width:700px){
  .dz-col .dz-sec__in{padding-left:20px;padding-right:20px}
  .dz-col__track{gap:20px;padding:0 20px}
  .dz-col__card{width:min(70vw,240px)}
  .dz-col__cap{min-height:92px}
}

/* ── カテゴリ（01のshop 左右反転パターン） ── */
.dz-cat__i{display:grid;grid-template-columns:1fr 1fr;min-height:min(56vh,440px)}
@media(max-width:880px){.dz-cat__i{grid-template-columns:1fr}}
.dz-cat__im{
  background:var(--acc-pp);display:flex;align-items:center;justify-content:center;min-height:220px;
}
.dz-cat__im span{font-family:var(--en);font-size:.62rem;letter-spacing:.4em;color:var(--ink3)}
.dz-cat__im img{width:100%;height:100%;object-fit:cover;display:block}
.dz-cat__b{
  padding:clamp(36px,5vw,68px) clamp(26px,4vw,58px);
  display:flex;flex-direction:column;justify-content:center;background:var(--white);
}
.dz-cat__i:nth-child(even) .dz-cat__im{order:2}
@media(max-width:880px){.dz-cat__i:nth-child(even) .dz-cat__im{order:0}}
.dz-cat__en{font-family:var(--en);font-size:.6rem;letter-spacing:.32em;color:var(--acc);margin:0 0 16px}
.dz-cat__t{font-size:clamp(1.15rem,.95rem+.9vw,1.55rem);font-weight:400;line-height:1.78;letter-spacing:.1em;margin:0 0 18px}
.dz-cat__d{font-size:.81rem;line-height:2.3;color:var(--ink2);margin:0 0 26px;letter-spacing:.05em}
.dz-cat__ls{list-style:none;margin:0 0 26px;padding:0}
.dz-cat__ls li{margin:0;border-top:1px solid var(--rule)}
.dz-cat__ls li:last-child{border-bottom:1px solid var(--rule)}
.dz-cat__ls a{
  display:block;text-decoration:none;color:var(--ink);
  font-size:.85rem;line-height:1.8;letter-spacing:.05em;padding:13px 4px;transition:.25s;
}
.dz-cat__ls a:hover{color:var(--acc);padding-left:12px;background:var(--acc-pp)}
.dz-cat__a{
  font-family:var(--en);font-size:.72rem;letter-spacing:.24em;color:var(--acc);
  text-decoration:none;padding-bottom:8px;border-bottom:1px solid var(--acc);align-self:flex-start;transition:.3s;
}
.dz-cat__a:hover{letter-spacing:.34em}

/* =========================================================
   記事末尾の「静かな一文」
   煽らない。囲みを強くしない。本文の続きとして自然に読める強さに留める。
   🔴 Phase 0ではここにリンクを置かない（審査に触れる）。承認後にこの直後へ置く。
   ========================================================= */

.dz-outro{
  margin:4em 0 0;
  padding:2em 2.2em;
  background:var(--acc-pp);
  border-left:2px solid var(--acc);
}
.dz-outro p{
  margin:0;
  font-size:.92rem;
  line-height:2.4;
  letter-spacing:.06em;
  color:var(--ink2);
}
@media(max-width:600px){
  .dz-outro{padding:1.6em 1.4em;margin-top:3em}
  .dz-outro p{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
}

/* =========================================================
   Contact Form 7
   ⚠️ CF7のinputは既定で size=40 が付き、実測664pxになってSPからはみ出す
      （WebKit 390px で確認）。幅を必ず100%に殺すこと。
   ========================================================= */

.wpcf7{margin-top:1.8rem}
.wpcf7 label{
  display:block;margin-bottom:1.6rem;font-size:.88rem;font-weight:400;line-height:2;letter-spacing:.06em;
}
.wpcf7-form-control-wrap{display:block;margin-top:.6rem}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  font-family:inherit;
  font-size:1rem;          /* 16px未満だとiOSでフォーカス時に自動ズームする */
  font-weight:300;
  line-height:1.8;
  padding:.85em 1em;
  border:1px solid var(--rule);
  border-radius:0;
  background:var(--white);
  color:var(--ink);
  letter-spacing:.04em;
}
.wpcf7 textarea{min-height:13rem;resize:vertical}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:1px solid var(--acc);outline-offset:1px;border-color:var(--acc);
}

.dz-req{
  display:inline-block;margin-left:.6em;padding:.2em .7em;
  font-size:.66rem;font-weight:400;letter-spacing:.1em;
  color:#fff;background:var(--acc);vertical-align:middle;
}

.dz-form-note{
  font-size:.8rem;line-height:2.1;color:var(--ink2);
  padding:1.2em 1.3em;background:var(--acc-pp);border-left:2px solid var(--acc);
  margin:0 0 1.8rem;letter-spacing:.03em;
}

.wpcf7 input[type="submit"]{
  appearance:none;width:100%;border:0;
  background:var(--acc);color:#fff;
  font-family:inherit;font-size:.95rem;font-weight:400;letter-spacing:.2em;
  padding:1.2em;cursor:pointer;transition:.25s;
}
.wpcf7 input[type="submit"]:hover{background:var(--acc-d)}

/* =========================================================
   Font Awesome
   ⚠️ 独自クラスに fa- 接頭辞を使わない（FAと衝突して□になる）。
      このサイトの独自クラスは dz- で統一。
   トーンを壊さないよう、アイコンは「意味のある最小限」に留める。
   ========================================================= */

.faq-article i[class^="fa-"],
.dz-front i[class^="fa-"],
.l-footer i[class^="fa-"]{
  font-style:normal;
}

/* See Detail の矢印：hoverで伸びる */
.dz-cat__a i{
  margin-left:.7em;font-size:.85em;transition:transform .3s;display:inline-block;
}
.dz-cat__a:hover i{transform:translateX(5px)}

/* 記事リストの印 */
.dz-cat__ls a{
  display:grid;grid-template-columns:auto 1fr;gap:.75em;align-items:baseline;
}
.dz-cat__ls a i{
  font-size:.72em;color:var(--acc);opacity:.55;transition:opacity .25s;
}
.dz-cat__ls a:hover i{opacity:1}

/* 記事本文：H3 の ■ をアイコンへ置き換えない（既存記事が ■ 前提で書かれているため） */

/* 前後ナビ */
.c-pnNav__link .c-pnNav__arrow,
.c-pnNav__link::before{color:var(--acc)}

/* =========================================================
   カテゴリ一覧（アーカイブ）
   ※クラス名はArkheの出力を実測して特定（p-archive__ / p-postList__）
   ========================================================= */

.p-archive__title,
.c-pageTitle__main{
  font-family:var(--se);font-weight:400;
  font-size:clamp(1.4rem,1.1rem+1.2vw,2rem);
  letter-spacing:.14em;line-height:1.7;color:var(--ink);
}

/* ページ見出しの型（カテゴリも固定ページも同じ見た目にする）
   🔴 Arkheはカテゴリを .p-archive__title、固定ページを .p-topArea__title で出す別構造。
      放っておくと装飾線の有無で高さが 110px / 54px と食い違い、見出しの位置もズレる
      （実測：文字の上端がカテゴリ176px・固定ページ154px）。両方をこの型に揃える。
   アイコンは下の body クラス別ルールで差し込む（Font Awesome 6 Free・solid=900）。 */
.p-archive__title,
.p-topArea__title{
  text-align:center;padding:clamp(44px,5vw,72px) 0 0;position:relative;
}
.p-archive__title::before,
.p-topArea__title::before{
  font-family:"Font Awesome 6 Free";font-weight:900;
  content:"\f02d"; /* 既定：本 */
  display:block;font-size:1.05rem;line-height:1;color:var(--acc);opacity:.85;margin:0 0 16px;
}
.p-archive__title::after,
.p-topArea__title::after{
  content:"";display:block;width:56px;height:1px;background:var(--acc);opacity:.6;margin:24px auto 0;
}
.p-archive__desc{
  max-width:640px;margin:22px auto 0;text-align:center;
  font-size:.83rem;line-height:2.3;color:var(--ink2);letter-spacing:.05em;
}

/* 記事リスト：1本の罫線で区切る（カード型にしない＝読み物の佇まい）
   ⚠️ Arkheは .p-postList に -type-card を付けて display:flex のカード型にする。
      特異度で負けるので .p-postList.-type-card まで書いて上書きする（実測で判明）。 */
.p-postList,
.p-postList.-type-card{
  max-width:900px;margin:clamp(40px,5vw,64px) auto 0;
  display:block;border-top:1px solid var(--rule);
  gap:0;
}
.p-postList.-type-card .p-postList__item,
.p-postList__item{
  border-bottom:1px solid var(--rule);margin:0;padding:0;width:auto;
  background:transparent;box-shadow:none;border-radius:0;
}
.p-postList.-type-card .p-postList__link,
.p-postList__link{
  display:grid;grid-template-columns:150px 1fr;gap:26px;align-items:center;
  padding:24px 6px;text-decoration:none;transition:.25s;
  flex-direction:row;
}
@media(max-width:640px){
  .p-postList.-type-card .p-postList__link,
  .p-postList__link{grid-template-columns:unset;gap:16px}
}
.p-postList__link:hover{background:var(--acc-pp);padding-left:16px}
.p-archive__title, .c-pageTitle__main {
	font-size: 20px;
}
/* サムネの箱はアイキャッチの実比率（1200×800＝3:2）に合わせる。
   🔴 4/3 にすると箱だけ高くなり、画像の下に空白が残る（一覧で28px・関連記事で77pxを実測）。
   🔴 Arkheは thumb の中に .c-postThumb__figure を挟み、そこへ padding で 16:9 の高さを作る。
      img は figure に対して absolute なので、figure を箱いっぱいに伸ばさないと余白が残る。 */
.p-postList.-type-card .p-postList__thumb,
.p-postList__thumb{
  margin:0;border-radius:0;overflow:hidden;aspect-ratio:3/2;background:var(--acc-pp);width:auto;
}
.c-postThumb__figure{border-radius:0;background:var(--acc-pp);height:100%;padding:0}
.c-postThumb__img,
.p-postList__thumb img{width:100%;height:100%;object-fit:cover;border-radius:0}

.p-postList.-type-card .p-postList__body,
.p-postList__body{padding:0}
/* 関連記事
   🔴 Arkheは .p-postList.-related.-type-card .p-postList__item に width:33.33% を持つ（クラス3つ）。
      こちらの .p-entry__related .p-postList__item（クラス2つ）では特異度で勝てず、
      gridに変えると 232px セルの33.33% = 77px にテキストが潰れる（実測で特定）。
      → Arkheのflex 3カラムに逆らわず、そのまま乗る。一覧用の指定だけを打ち消す。 */
.p-entry__related .p-postList,
.p-entry__related .p-postList.-type-card{
  display:flex;
  flex-wrap:wrap;
  border-top:0;
  max-width:none;
  margin-top:0;
  gap:0;
}
.p-entry__related .p-postList__item{border-bottom:0;padding:0 10px 24px}
.p-entry__related .p-postList__link,
.p-entry__related .p-postList.-type-card .p-postList__link{
  display:block;
  grid-template-columns:none;
  padding:0;
}
.p-entry__related .p-postList__link:hover{background:transparent;padding-left:0}
.p-entry__related .p-postList__link:hover .p-postList__title{color:var(--acc)}
/* 比率とfigureの高さは上の共通ルールで担保済み。ここは間隔だけ。 */
.p-entry__related .p-postList.-type-card .p-postList__thumb,
.p-entry__related .p-postList__thumb{margin-bottom:12px;width:100%}
.p-entry__related .p-postList__title{font-size:.84rem;line-height:1.8;margin:0}
.p-entry__related .p-postList__excerpt{display:none}
.p-entry__related .p-postList__meta{margin-top:8px}

/* ページ送り */
.c-pagination__item{
  font-family:var(--en);border-radius:0;border:1px solid var(--rule);
  background:var(--white);color:var(--ink2);
}
.c-pagination__item.current,
.c-pagination__item:hover{background:var(--acc);border-color:var(--acc);color:#fff}


/* =========================================================
   サイドバーを出さない（1カラム）
   ⚠️ WordPress既定ウィジェット（検索/Recent Posts/Archives）が出ると
      トーンが完全に壊れる。読み物メディアなので本文1本に絞る。
   ========================================================= */

.l-sidebar{display:none}
.l-content{display:block}
.l-content__main,
.l-main{width:100%;max-width:100%;margin-left:auto;margin-right:auto}

/* =========================================================
   記事詳細の周辺（本文は .faq-article 側で指定済み）
   ========================================================= */

.p-entry__head{margin-bottom:clamp(30px,4vw,48px)}

.p-entry__title{
  text-align:left;
}

/* 日付・カテゴリ */
.c-postMetas{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-top:18px;padding-bottom:0;border:0;
}
.c-postTimes__item{font-family:var(--en);font-size:.68rem;letter-spacing:.1em;color:var(--ink3)}
.c-postTerms__link{
  font-family:var(--se);font-size:.72rem;letter-spacing:.08em;
  color:var(--acc);border:1px solid var(--acc);border-radius:0;
  padding:.3em .9em;background:transparent;text-decoration:none;transition:.25s;
}
.c-postTerms__link:hover{background:var(--acc);color:#fff}

/* パンくず */
.c-breadcrumb,
.p-breadcrumb{font-family:var(--se);font-size:.68rem;letter-spacing:.04em;color:var(--ink3)}
.c-breadcrumb a,.p-breadcrumb a{color:var(--ink2);text-decoration:none}
.c-breadcrumb a:hover,.p-breadcrumb a:hover{color:var(--acc)}

/* 前後の記事ナビ */
.p-entry__foot{margin-top:clamp(48px,6vw,80px)}
.c-pnNav{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.c-pnNav__link{text-decoration:none;padding:22px 8px;transition:.25s}
.c-pnNav__link:hover{background:var(--acc-pp)}
.c-pnNav__title{
  font-family:var(--se);font-weight:400;font-size:.86rem;line-height:1.8;letter-spacing:.05em;color:var(--ink);
}
.c-pnNav__link:hover .c-pnNav__title{color:var(--acc)}

/* 著者ボックス */
.c-bottomSection__title{
  font-family:var(--en);font-size:.66rem;letter-spacing:.28em;color:var(--acc);
  font-weight:400;text-align:center;
}
.p-authorBox{
  background:var(--acc-pp);border:1px solid var(--rule);border-radius:0;padding:clamp(24px,3vw,36px);
}
.p-authorBox__name{
  font-family:var(--se);font-weight:400;font-size:1rem;letter-spacing:.1em;color:var(--ink);
}
.p-authorBox__avatar img{border-radius:50%}
.p-authorBox__links a,
.p-authorBox__weblink,
.p-authorBox__archivelink{
  font-family:var(--en);font-size:.66rem;letter-spacing:.16em;color:var(--acc);text-decoration:none;
}
.p-authorBox__links a:hover{color:var(--acc-d)}

/* 記事本文コンテナの幅（読みやすさ優先で .l-article を残している） */
.single .l-main__body,
.page .l-main__body{padding-top:clamp(30px,4vw,52px)}

/* =========================================================
   日本語の改行整形（jp-linebreak）

   文節の区切りは BudouX で HTML に <wbr> を埋め込み済み。
   keep-all で「文節の途中では折り返さない」を全ブラウザで担保する。
   （word-break: auto-phrase は Chrome/Edge 専用。Safari(iOS)・Firefox は未対応なので使わない）

   ※WordPressの「追加CSS」に貼る場合、子セレクタ > は &gt; にエスケープされて
     ルールごと破棄される。> を含むセレクタを書かないこと。
   ========================================================= */
@media (max-width: 600px) {
  .faq-article h1,
  .faq-article h2,
  .faq-article h3,
  .faq-article p,
  .faq-article li,
  .faq-article th,
  .faq-article td,
  .dz-mv__t,
  .dz-mv__l,
  .dz-sh__t,
  .dz-sh__l,
  .dz-cat__t,
  .dz-cat__d,
  .dz-age-gate__title,
  .dz-age-gate__lead,
  .dz-age-gate__q,
  .p-entry__title,
  .dz-form-note {
    /* ⚠️ jp-linebreak の生成CSSは text-align: justify を出すが、
       このサイトでは使わない。keep-all で改行機会が減るため、justify が
       行を埋めようとして字間が極端に開く（WebKit 390px で実測・「な ぜ 同 人 は」状態）。
       カード主体の案件では機能するが、長文の読み物では破綻する。 */
    text-align: left;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-break: strict;
  }
}

/* =========================================================
   Arkhe 対策（AI_FRAMEWORK/skills/arkhe.md の恒久対処＋実測での補足）

   ⚠️ arkhe.md は .l-article を挙げているが、Arkhe 3.13 のフロントページで
      実際に幅を縛っていたのは .l-content__body.l-container だった
      （max-width:1296px / padding:48px / margin-inline:72px を実測）。
      推測せず、DOMを遡って計測して特定すること。
   ========================================================= */

/* ⚠️ .l-container はヘッダー/フッターでも使われるので、フロント本文の中だけに限定する。
   広く当てるとヘッダーのロゴが画面端に貼り付く（実測で発覚）。 */
.home .l-content__body{
  max-width:none;
  padding-left:0;
  padding-right:0;
  margin-left:0;
  margin-right:0;
  width:100%;
}
.home .l-main{padding-top:0}

/* =========================================================
   ヘッダー（Arkheの既定を上書き）
   ロゴは明朝・字間広め。直下にタグライン「関係性に沼る」を EN イタリックで敷く。
   ========================================================= */

/* 🔴 .l-header に backdrop-filter / filter / transform を当ててはいけない。
   position:fixed の子孫（.p-drawer）の包含ブロックがヘッダーの箱になり、
   ドロワーが高さ78pxに閉じ込められて開かなくなる（実測で特定）。
   半透明にしたい場合も、擬似要素側に逃がすこと。 */
.l-header{background:var(--paper);border-bottom:1px solid var(--rule)}

.c-headLogo__link,
.l-header a.c-headLogo__link{text-decoration:none}

.dz-logo{display:inline-block;line-height:1.3}
.dz-logo__ja{
  display:block;font-family:var(--se);font-weight:500;
  font-size:clamp(1.05rem,.95rem+.4vw,1.3rem);letter-spacing:.14em;color:var(--ink);
  /* SPはハンバーガーと検索に挟まれて幅が足りず「同人誌ズカ／ン」と折れる（実測）。
     字間を詰めて折り返しを禁止する。 */
  white-space:nowrap;
}
.dz-logo__en{
  display:block;font-family:var(--en);font-style:italic;
  font-size:.74rem;letter-spacing:.06em;color:var(--acc);margin-top:3px;
  white-space:nowrap;
}

@media(max-width:600px){
  .dz-logo__ja{font-size:1rem;letter-spacing:.08em}
  .dz-logo__en{font-size:.64rem}
}
@media(max-width:380px){
  .dz-logo__ja{font-size:.92rem;letter-spacing:.04em}
}

/* グローバルナビ */
.c-gnav > li > a{
  font-family:var(--se);font-weight:400;font-size:.78rem;letter-spacing:.1em;color:var(--ink);
  padding-top:.9em;padding-bottom:.9em;
}
.c-gnav > li > a:hover{color:var(--acc)}
.c-gnav .sub-menu a{font-family:var(--se);font-size:.76rem;letter-spacing:.06em}

/* ドロワー（SP）
   🔴 Arkheの既定はダーク背景前提で文字が白。背景だけ明るくすると
      白地に白文字になって完全に読めなくなる（実測で発覚）。背景と文字は必ずセットで指定する。 */
/* 🔴 Arkheの既定はダーク背景前提で文字が白。背景と文字は必ずセットで指定する（白地に白文字事故を防ぐ）。
   図鑑のトーン＝明朝×アースカラーの上品な編集レイアウトに作り替え（2026-07-24）。 */
.p-drawer__inner,.p-drawer__body{background:linear-gradient(180deg,var(--acc-pp),var(--paper))!important;color:var(--ink)}
.p-drawer__inner,.p-drawer__body,.p-drawer__nav,.c-drawerNav{border:0!important;box-shadow:none!important}
/* MENU 見出し＋アクセント罫線（ロゴのタグライン風・EN斜体） */
.p-drawer__nav{padding:10px 0 4px}
.p-drawer__nav::before{content:"MENU";display:block;font-family:var(--en);font-style:italic;font-size:.72rem;letter-spacing:.26em;color:var(--acc);text-align:center;margin:6px 0 6px}
.p-drawer__nav::after{content:"";display:block;width:40px;height:1px;background:var(--acc);opacity:.55;margin:0 auto 6px}
.c-drawerNav{list-style:none;margin:0;padding:0}
.c-drawerNav__li{margin:0;border:0!important}
.c-drawerNav__a{
  display:flex!important;align-items:center;justify-content:space-between;
  padding:1.15em 1.5em!important;
  font-family:var(--se)!important;font-weight:500;font-size:.98rem;letter-spacing:.1em;
  color:var(--ink)!important;text-decoration:none;
  border-bottom:1px solid var(--rule);transition:.2s ease;
}
.c-drawerNav__a::after{content:"\203a";font-family:var(--se);color:var(--acc);font-size:1.15rem;opacity:.45;transition:.2s ease}
.c-drawerNav__a:hover{background:var(--acc-pp);color:var(--acc)!important;padding-left:1.85em!important}
.c-drawerNav__a:hover::after{opacity:1;transform:translateX(3px)}
.c-drawerNav__li.current-menu-item .c-drawerNav__a{color:var(--acc)!important;background:var(--acc-p)}
.c-drawerNav__a .__mainText{font-family:var(--se)}
/* 閉じるボタン＝細い枠線の上品なピル（明朝・字間広め） */
.p-drawer__close{
  margin:24px auto 28px!important;padding:.85em 2.6em!important;
  font-family:var(--se)!important;font-weight:500;font-size:.82rem;letter-spacing:.16em;color:var(--ink2)!important;
  background:transparent!important;border:1px solid var(--acc)!important;border-radius:2px!important;transition:.2s ease;
}
.p-drawer__close:hover{background:var(--acc)!important;color:#fff!important}
.p-drawer__close svg{color:currentColor;fill:currentColor}
.p-drawerUnderlayer{background:rgba(51,44,44,.55)}

/* フッター */
.l-footer{background:#2f2b2b;color:rgba(255,255,255,.72)}
.l-footer a{color:rgba(255,255,255,.7);text-decoration:none}
.l-footer a:hover{color:#fff}
.l-footer .c-copyright{font-family:var(--en);font-size:.62rem;letter-spacing:.2em;color:rgba(255,255,255,.36)}
.l-footer .dz-credit{font-family:var(--en);font-size:.6rem;letter-spacing:.16em;color:rgba(255,255,255,.3);margin:6px 0 0}
.l-footer .dz-credit a{color:rgba(255,255,255,.42);text-decoration:underline;text-underline-offset:2px}
.l-footer .dz-credit a:hover{color:rgba(255,255,255,.72)}

/* リード文の <br> はPCの意図した改行。SPでは幅が足りず
   「『これBLっぽい？』／と思った瞬間から」のように語の途中で行が始まって不自然になるため、
   SPでは <br> を殺して自然な折り返し（keep-all + <wbr>）に任せる。 */
@media (max-width: 700px) {
  .dz-br-pc { display: none; }
}

/* =========================================================
   固定ページ・アーカイブの見出し帯
   ========================================================= */

/* 🔴 Arkheは「アイキャッチの無い固定ページ」の見出し帯に #555 のダークを敷き、
   .p-topArea__title に color:#fff を当てる。ところがこのサイトは本文見出しを
   ink(#332c2c) に指定しているため、内側の .c-pageTitle__main が ink を拾って
   「暗い帯に暗い文字」になり、タイトルがほぼ読めなくなる（運営者情報で実測）。
   ダーク帯自体が紙基調のトーンから浮くので、帯を紙色に戻して ink で読ませる。 */
/* 🔴 Arkheはこの帯に min-height:288px を持つ（アイキャッチを敷く前提の高さ）。
   画像を敷かないこのサイトでは、ほぼ空白の帯が288px居座って間延びする。 */
/* padding-top は .p-topArea__title 側が持つ（カテゴリと型を共有するため）。
   ここにも入れると二重になり、固定ページだけ見出しが25px下がる（実測）。 */
.l-content__top.p-topArea,
.l-content__top.p-topArea.c-filterLayer{
  background:var(--paper);
  min-height:0;
  padding-top:0;
  padding-bottom:clamp(24px,2.6vw,40px);
}
.l-content__top.p-topArea.c-filterLayer::before,
.l-content__top.p-topArea.c-filterLayer::after{background:none;opacity:0}
.p-topArea__title,
.p-topArea__body{color:var(--ink)}
.p-topArea .c-pageTitle__main{color:var(--ink)}
.p-topArea .c-pageTitle__sub{color:var(--ink2)}

/* カテゴリ側は .l-content__body の margin-top:48px が上に乗るぶん、
   固定ページ（帯が .l-content__top にある）より下がる。ここで相殺して起点を揃える。 */
.archive .l-content__body,
.category .l-content__body{margin-top:0}

/* ── ページ見出しのアイコン（body クラスで出し分け）──
   Font Awesome 6 Free の solid。functions.php で全ページに読み込み済み。 */
.category-column .p-archive__title::before{content:"\f52d"}   /* feather：読み物 */
.category-circle .p-archive__title::before{content:"\f0c0"}   /* users：サークル */
.category-economy .p-archive__title::before{content:"\f51e"}  /* coins：経済 */
.category-guide .p-archive__title::before{content:"\f002"}    /* magnifying-glass：読み解き */
.category-culture .p-archive__title::before{content:"\f66f"}  /* landmark：文化・歴史・法 */

.page-id-28 .p-topArea__title::before{content:"\f05a"}  /* circle-info：運営者情報 */
.page-id-31 .p-topArea__title::before{content:"\f0e0"}  /* envelope：お問い合わせ */
.page-id-85 .p-topArea__title::before{content:"\f15c"}  /* file-lines：利用規約 */
.page-id-3  .p-topArea__title::before{content:"\f3ed"}  /* shield-halved：プライバシーポリシー */
.page-id-29 .p-topArea__title::before{content:"\f071"}  /* triangle-exclamation：免責事項 */
.page-id-30 .p-topArea__title::before{content:"\f0a1"}  /* bullhorn：広告について */

/* 🔴 パンくずの位置がテンプレートで食い違う。
   カテゴリ（.p-archive）は「パンくず → タイトル」、
   固定ページ（.p-topArea）は「タイトル → パンくず」で Arkhe が出す。
   並びが違うと同じサイトの中でページタイトルの位置がズレて見える（黒瀬さん指摘）。
   どちらも .l-content の直下なので、固定ページ側だけ order でパンくずを先頭へ回して揃える。 */
.page .l-content{display:flex;flex-direction:column}
.page .l-content > .p-breadcrumb{order:-1}

/* =========================================================
   DMM(FANZA)同人 表示パーツ（dmm-parts.php）
   焦茶トーン継承。作品カード＝ランキング/オススメ/売れ筋 共通。
   ========================================================= */
.dz-picks{margin:2.4em 0;padding:1.4em 1.5em 1.2em;background:var(--acc-pp);border:1px solid var(--rule);border-radius:6px}
.dz-picks__head{display:flex;align-items:baseline;gap:.7em;flex-wrap:wrap;margin-bottom:1.1em;padding-bottom:.7em;border-bottom:1px solid var(--rule)}
.dz-picks__ttl{font-family:var(--se);font-weight:600;font-size:1.12rem;color:var(--ink);margin:0;letter-spacing:.02em}
.dz-picks__en{font-family:var(--en);font-size:.72rem;letter-spacing:.18em;color:var(--acc);text-transform:uppercase}
.dz-picks__pr{margin-left:auto;font-family:var(--en);font-size:.62rem;letter-spacing:.12em;color:var(--ink3);border:1px solid var(--ink3);border-radius:3px;padding:.1em .5em;line-height:1.5}
.dz-picks__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1.1em}
.dz-pick{margin:0}
.dz-pick__a{display:flex;flex-direction:column;gap:.55em;text-decoration:none;color:inherit;height:100%;position:relative}
.dz-pick__rank{position:absolute;top:-4px;left:-4px;z-index:2;min-width:1.7em;height:1.7em;display:flex;align-items:center;justify-content:center;font-family:var(--en);font-size:.86rem;font-weight:600;color:#fff;background:var(--acc-d);border-radius:50%;box-shadow:0 1px 4px rgba(51,44,44,.25)}
.dz-pick__thumb{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:4px;background:var(--acc-p);border:1px solid var(--rule)}
.dz-pick__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dz-pick__a:hover .dz-pick__thumb img{transform:scale(1.05)}
.dz-pick__body{display:flex;flex-direction:column;gap:.3em}
.dz-pick__title{font-family:var(--se);font-weight:600;font-size:.94rem;line-height:1.5;letter-spacing:.01em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dz-pick__a:hover .dz-pick__title{color:var(--acc-d)}
.dz-pick__meta{display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;font-family:var(--en)}
.dz-pick__star{color:#c9962f;font-size:.8rem;font-weight:600}
.dz-pick__cnt{color:var(--ink3);font-size:.7rem}
.dz-pick__price{margin-left:auto;color:var(--acc-d);font-size:.82rem;font-weight:600}
.dz-picks__foot{margin:1em 0 0;font-size:.68rem;color:var(--ink3);line-height:1.6}
/* 図鑑・考察の見出し（①②③④）＝単調さ回避のサブ見出し */
.faq-article .dz-point{font-size:1.16rem;font-weight:700;line-height:1.65;margin:2em 0 .55em;padding-left:.7em;border-left:4px solid var(--acc);color:var(--ink);letter-spacing:.01em}
@media(max-width:600px){.faq-article .dz-point{font-size:1.08rem}}
/* 本文セクション下の単品カード（single）＝中央寄せ */
.dz-single{margin:1.6em auto;max-width:520px}
.dz-single__a{display:flex;gap:14px;align-items:stretch;background:#fff;border:1px solid var(--rule);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(90,66,52,.08);transition:box-shadow .2s ease,transform .2s ease}
.dz-single__a:hover{box-shadow:0 8px 22px rgba(90,66,52,.16);transform:translateY(-2px)}
.dz-single__thumb{flex:0 0 108px;background:var(--acc-p);display:block}
.dz-single__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dz-single__body{display:flex;flex-direction:column;gap:.35em;padding:12px 14px 12px 4px;min-width:0}
.dz-single__pr{display:flex;align-items:center;gap:.5em;font-size:.72rem;letter-spacing:.06em;color:var(--acc-d);font-weight:600}
.dz-single__prtag{font-family:var(--en);font-size:.58rem;letter-spacing:.1em;color:var(--ink3);border:1px solid var(--ink3);border-radius:3px;padding:.05em .45em;line-height:1.4}
.dz-single__title{font-family:var(--se);font-weight:600;font-size:.92rem;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dz-single__meta{display:flex;align-items:baseline;gap:.6em;font-family:var(--en);font-size:.78rem}
.dz-single__star{color:#c9962f;font-weight:600}
.dz-single__cnt{color:var(--ink3);font-size:.72rem}
.dz-single__price{color:var(--acc-d);font-weight:600}
.dz-single__cta{margin-top:auto;font-size:.8rem;color:var(--acc-d);font-weight:600}
@media(max-width:600px){.dz-single__thumb{flex-basis:88px}}
/* ヘッダーメニューのアイコン（Font Awesome 6 Free / Solid） */
[class*="dz-nav-"] > a::before{font-family:"Font Awesome 6 Free";font-weight:900;display:block;text-align:center;margin:0 auto .55em;font-size:1.15em;line-height:1;color:var(--acc);opacity:.9}
@media(max-width:900px){[class*="dz-nav-"] > a::before{display:inline-block;margin:0 .5em 0 0;font-size:.9em}}
.dz-nav-zukan > a::before{content:"\f02d"}    /* book */
.dz-nav-novel > a::before{content:"\f56b"}    /* feather-pointed */
.dz-nav-rank > a::before{content:"\f521"}     /* crown */
.dz-nav-column > a::before{content:"\f1ea"}   /* newspaper */
.dz-nav-pillar > a::before{content:"\f06d"}   /* fire */
.dz-nav-basics > a::before{content:"\f19d"}   /* graduation-cap */
.dz-nav-about > a::before{content:"\f05a"}    /* circle-info */
.dz-nav-contact > a::before{content:"\f0e0"}  /* envelope */
/* 本文中のプレーンなリンク（クラス無し）＝ブランド色。カード等クラス付きリンクは除外 */
.faq-article a:not([class]){color:var(--acc-d);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:#d9c8bd;transition:color .15s ease,text-decoration-color .15s ease}
.faq-article a:not([class]):hover{color:var(--acc);text-decoration-color:var(--acc)}
/* 記事末→ジャンル図鑑への回遊リンク */
.dz-zukan-cta{margin:1.4em 0 0;font-size:.95rem}
.dz-zukan-cta a{color:var(--acc-d);font-weight:600;text-decoration:none;letter-spacing:.02em}
.dz-zukan-cta a:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){
  .dz-picks{padding:1.1em 1em 1em}
  .dz-picks__grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.9em}
  .dz-pick__body{padding:0 10px}
}

/* ── コンパクト表示（新着の横スクロール帯）── */
.dz-picks--compact{padding:1.1em 1.2em}
.dz-picks--compact .dz-picks__grid{display:flex;gap:.9em;overflow-x:auto;grid-template-columns:none;padding-bottom:.5em;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dz-picks--compact .dz-pick{flex:0 0 128px;scroll-snap-align:start}
.dz-picks--compact .dz-pick__rank{width:1.5em;min-width:1.5em;height:1.5em;font-size:.76rem}
.dz-picks--compact .dz-pick__title{font-size:.8rem;font-weight:500;-webkit-line-clamp:2}
.dz-picks--compact .dz-pick__meta{font-size:.72rem}
.dz-picks--compact .dz-picks__grid::-webkit-scrollbar{height:6px}
.dz-picks--compact .dz-picks__grid::-webkit-scrollbar-thumb{background:var(--acc-p);border-radius:3px}

/* ── タブ切り替えランキング（[doujin_rank_tabs]）── */
.dz-tabs{margin:2.4em 0}
.dz-tabs__head{display:flex;align-items:center;gap:1em;flex-wrap:wrap;margin-bottom:1.2em}
.dz-tabs__pr{order:2;margin-left:auto;font-family:var(--en);font-size:.62rem;letter-spacing:.12em;color:var(--ink3);border:1px solid var(--ink3);border-radius:3px;padding:.1em .5em}
.dz-tabs__btns{order:1;display:flex;gap:.4em;flex-wrap:wrap}
.dz-tabs__btn{
  appearance:none;cursor:pointer;font-family:var(--se);font-weight:500;font-size:.92rem;letter-spacing:.04em;
  color:var(--ink2);background:transparent;border:1px solid var(--rule);border-radius:99px;padding:.55em 1.3em;transition:.2s;
}
.dz-tabs__btn:hover{color:var(--acc-d);border-color:var(--acc)}
.dz-tabs__btn.is-active{color:#fff;background:var(--acc-d);border-color:var(--acc-d);font-weight:600}
.dz-tabs__panel{animation:dzFade .35s ease}
.dz-tabs__panel[hidden]{display:none}
@keyframes dzFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* タブ内は大きめグリッド（ランキングページ相当） */
.dz-tabs .dz-picks{margin:0;padding:0;background:none;border:0}
.dz-tabs .dz-picks__grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
@media(min-width:601px){.dz-tabs .dz-picks__grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}

/* ── フロントのランキングセクション枠 ── */
.dz-home-rank{background:var(--acc-pp);padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(44px,5vw,72px)}
.dz-home-rank .dz-sh{margin-bottom:clamp(22px,2.6vw,34px)}
.dz-home-rank .dz-sh__en{margin-bottom:12px}
.dz-home-rank .dz-sh__ln{margin:16px auto 14px}
.dz-home-rank .dz-picks{background:var(--white)}

/* ── 看板ピラーへの固定CTA（全記事冒頭）── */
.dz-pillar-cta{margin:0 0 2.4em}
.dz-pillar-cta__a{
  display:flex;align-items:center;gap:1em;text-decoration:none;
  background:linear-gradient(100deg,var(--acc-d),var(--acc));color:#fff;
  border-radius:6px;padding:1em 1.3em;box-shadow:0 6px 20px rgba(122,82,66,.22);transition:.25s;
}
.dz-pillar-cta__a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(122,82,66,.3);color:#fff}
.dz-pillar-cta__tag{
  flex:none;font-family:var(--en);font-size:.62rem;letter-spacing:.16em;
  border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:.3em .7em;line-height:1;
}
.dz-pillar-cta__body{display:flex;flex-direction:column;gap:.25em;min-width:0}
.dz-pillar-cta__t{font-family:var(--se);font-weight:600;font-size:.98rem;line-height:1.5;letter-spacing:.02em}
.dz-pillar-cta__s{font-size:.74rem;line-height:1.55;color:rgba(255,255,255,.85);letter-spacing:.02em}
.dz-pillar-cta__arrow{flex:none;margin-left:auto;font-size:1.1rem;opacity:.85}
.dz-pillar-cta__cta{flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:.3em;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.5em 1.1em;font-size:.82rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.dz-pillar-cta__a:hover .dz-pillar-cta__cta{background:rgba(255,255,255,.28)}
@media(max-width:600px){.dz-pillar-cta__cta{padding:.45em .9em;font-size:.76rem}}
@media(max-width:600px){
  .dz-pillar-cta__a{gap:.75em;padding:.9em 1em}
  .dz-pillar-cta__t{font-size:.9rem}
  .dz-pillar-cta__s{font-size:.7rem}
  .dz-pillar-cta__arrow{display:none}
}

/* ── 作品詳細カード（[doujin_work]）── */
.dz-work{position:relative;margin:2.4em 0;padding:1.5em;background:var(--acc-pp);border:1px solid var(--rule);border-radius:6px}
.dz-work__pr{position:absolute;top:1em;right:1em;font-family:var(--en);font-size:.62rem;letter-spacing:.12em;color:var(--ink3);border:1px solid var(--ink3);border-radius:3px;padding:.1em .5em}
.dz-work__top{display:flex;gap:1.4em;align-items:flex-start}
.dz-work__cover{flex:0 0 150px;display:block;border-radius:4px;overflow:hidden;border:1px solid var(--rule);background:var(--acc-p)}
.dz-work__cover img{width:100%;height:auto;display:block;transition:transform .5s}
.dz-work__cover:hover img{transform:scale(1.04)}
.dz-work__meta{flex:1;min-width:0}
.dz-work__title{margin:0 0 .7em;font-family:var(--se);font-weight:600;font-size:1.06rem;line-height:1.55;letter-spacing:.02em}
.dz-work__title a{color:var(--ink);text-decoration:none}
.dz-work__title a:hover{color:var(--acc-d)}
.dz-work__facts{list-style:none;margin:0 0 .8em;padding:0;display:flex;flex-wrap:wrap;gap:.4em 1.1em;font-size:.82rem;color:var(--ink2);letter-spacing:.02em}
.dz-work__facts li{margin:0}
.dz-work__facts b{color:var(--acc-d);font-weight:600}
.dz-work__star{color:#c9962f;font-weight:600;font-family:var(--en)}
.dz-work__rc{color:var(--ink3);font-size:.76rem}
.dz-work__tags{display:flex;flex-wrap:wrap;gap:.4em;margin:0 0 1em}
.dz-work__tag{font-size:.72rem;line-height:1;color:var(--acc-d);background:var(--white);border:1px solid var(--rule);border-radius:99px;padding:.45em .8em;letter-spacing:.02em}
.dz-work__btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--se);font-weight:600;font-size:.86rem;color:#fff;background:var(--acc-d);border-radius:4px;padding:.7em 1.4em;text-decoration:none;transition:.2s}
.dz-work__btn:hover{background:var(--acc);color:#fff}
.dz-work__samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.5em;margin-top:1.3em}
.dz-work__sample{display:block;border-radius:3px;overflow:hidden;border:1px solid var(--rule);aspect-ratio:3/4;background:var(--acc-p)}
.dz-work__sample img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dz-work__sample:hover img{transform:scale(1.06)}
.dz-work .dz-picks__foot{margin-top:1em}
@media(max-width:600px){
  .dz-work{padding:1.1em}
  .dz-work__top{gap:1em}
  .dz-work__cover{flex-basis:112px}
  .dz-work__title{font-size:.96rem}
  .dz-work__samples{grid-template-columns:repeat(auto-fill,minmax(72px,1fr))}
}

/* --- internal-links: Related / Must Read（ズカンのアースカラー・明朝に合わせた版・2026-08-04） --- */
.jcg-related{
  margin:2.4em 0; padding:1.1em 1.3em 1.2em;
  background:var(--acc-pp,#f8f4f0);
  border:1px solid var(--rule,#e5dedb);
  border-left:3px solid var(--acc,#9c6b56);
  border-radius:2px;
}
.jcg-related__lead{
  margin:0 0 .5em; font-size:.9rem; line-height:1.75;
  font-family:var(--se,serif); color:var(--ink,#332c2c); opacity:.8;
}
.jcg-related__link{
  display:inline-block; margin-top:.15em;
  font-family:var(--se,serif); font-weight:600; font-size:.95rem; line-height:1.7;
  color:var(--acc-d,#7a5242); text-decoration:none;
  border-bottom:1px solid var(--acc,#9c6b56);
}
.jcg-related__link::before{ content:"\2014\00a0"; opacity:.55; }
.jcg-related__link:hover{ color:var(--acc,#9c6b56); }
.jcg-related__link + .jcg-related__link{ margin-left:0; display:block; }

.jcg-mustread{
  margin:2.4em 0; padding:1.25em 1.4em 1.35em;
  background:var(--acc-p,#eee6e0);
  border:1px solid var(--acc,#9c6b56);
  border-radius:2px;
}
.jcg-mustread__label{
  display:inline-block; margin-bottom:.6em; padding:.2em .8em;
  font-family:var(--en,serif); font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--white,#fff); background:var(--acc,#9c6b56); border-radius:2px;
}
.jcg-mustread__lead{
  margin:0 0 .55em; font-size:.9rem; line-height:1.75;
  font-family:var(--se,serif); color:var(--ink,#332c2c);
}
.jcg-mustread__link{
  display:block; font-family:var(--se,serif); font-weight:700; font-size:1rem; line-height:1.7;
  color:var(--acc-d,#7a5242); text-decoration:none; border-bottom:1px solid var(--acc,#9c6b56);
}
.jcg-mustread__link::before{ content:"\25B8\00a0"; }