@charset "utf-8";

/* =========================================================
   メロい同人ランキング — custom.css
   デザイン言語：design/D_neon-pop.html のトーンを継承（ネオンポップ）
   🔴 コピー・見出しはデザイン案から流用しない（同人誌ズカンと自社競合するため）
   ========================================================= */

:root{
  --pink:#ff2e88;
  --purple:#7b3ff2;
  --cyan:#00e0d5;
  --yellow:#ffd93d;

  --ink:#160d24;
  --ink2:#5b4f6e;
  --ink3:#9c92ab;
  --bg:#fdf7fb;
  --panel:#fff;
  --line:#f0e4ee;

  --round:"Zen Maru Gothic",sans-serif;
  --sans:"Noto Sans JP",sans-serif;
  --en:"Outfit",sans-serif;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* =========================================================
   ヘッダー（Arkhe .l-header を上書き）
   🔴 同人誌ズカンの教訓：.l-header に backdrop-filter / filter / transform を当てると
      position:fixed の子孫（ドロワー）の包含ブロックがヘッダーになり、ドロワーが
      閉じ込められて開かなくなる。ここでは sticky + 背景色のみにして安全側に倒す。
   ========================================================= */
.l-header{
  background:var(--bg);
  border-bottom:2px solid var(--ink);
}
.l-header__inner,.l-headerInner{max-width:1180px}
/* ロゴ */
.c-headLogo,.c-headLogo__link,.l-header .site-title a{
  font-family:var(--round);font-weight:900;letter-spacing:.02em;color:var(--ink);
}
/* ロゴのワンポイント（本＋ハートのSVG）。
   Arkheのロゴは blogname の素テキストで差し込めるフィルタが無いため、CSSの::beforeで付ける。 */
.c-headLogo{display:inline-flex;align-items:center;gap:.42em}
/* マークは常にサイト名と同じ行頭に（テキストだけ折り返す） */
.c-headLogo::before{
  content:"";flex:none;align-self:flex-start;width:1.18em;height:1.18em;
  background:url(images/logo-mark.svg) center/contain no-repeat;
  transform:rotate(-6deg);
}
/* ロゴサイズはArkheの CSS変数 --ark-logo_size で決まる（.l-header__logo に効く）。
   子要素へ font-size を当てても勝てないので、変数ごと上書きする。 */
.l-header__logo{--ark-logo_size--pc:26px;--ark-logo_size--sp:18px}
/* タイトルが「…ランキン／グ」と変な位置で折れるのを防ぐ（改行させない） */
.c-headLogo,.c-headLogo__link,.l-header .site-title a{white-space:nowrap}
@media(max-width:600px){.c-headLogo::before{align-self:center}}
@media(max-width:430px){.l-header__logo{--ark-logo_size--sp:16px}}
@media(max-width:360px){.l-header__logo{--ark-logo_size--sp:15px}}
/* グロナビ */
.l-header a{font-family:var(--round);font-weight:500}
.l-header .p-gnav__item > a:hover,
.l-header a:hover{color:var(--pink)}
/* PCグローバルナビのブラッシュアップ（ホバーで下線がスライド・現在地にアクセント）2026-07-24 */
@media(min-width:901px){
  /* 下端にネオンのグラデアクセントバー（常時表示・素っ気ない黒線を置き換え） */
  .l-header{border-bottom:0!important;box-shadow:0 4px 14px rgba(22,13,36,.06);position:relative}
  /* ヘッダーに天地の余白を持たせてピル/ナビに呼吸を作る（実測：内部は .l-header__body が45pxでピルが天地いっぱい） */
  .l-header__body{min-height:64px}
  .l-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));z-index:2}
  .c-gnav{gap:4px;align-items:center}
  .c-gnav__a{position:relative;font-family:var(--round);font-weight:700;font-size:.92rem;letter-spacing:.03em;padding:.55em .9em!important;transition:color .18s ease}
  .c-gnav__a::after{content:"";position:absolute;left:.9em;right:.9em;bottom:.42em;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--purple));transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.4,0,.2,1)}
  .c-gnav__a:hover::after,.c-gnav__li.current-menu-item > .c-gnav__a::after{transform:scaleX(1)}
  .c-gnav__li.current-menu-item > .c-gnav__a{color:var(--pink)}
  /* 診断2つ（3・4番目＝関係性診断/性癖診断）はピル状ボタンに＝常時見えるCTA差別化 */
  /* ピルは全高に引き伸ばさず中央に（Arkheは c-gnav__a を全高にするので上書き） */
  .c-gnav__li:nth-child(3),.c-gnav__li:nth-child(4){display:flex;align-items:center}
  .c-gnav__li:nth-child(3) > .c-gnav__a,.c-gnav__li:nth-child(4) > .c-gnav__a{
    color:#fff!important;border:2px solid var(--ink);border-radius:99px;padding:.5em 1.1em!important;margin:0 3px;
    box-shadow:2px 2px 0 var(--ink);transition:.16s;line-height:1;height:auto!important;align-self:center;
  }
  .c-gnav__li:nth-child(3) > .c-gnav__a{background:var(--pink)}
  .c-gnav__li:nth-child(4) > .c-gnav__a{background:linear-gradient(135deg,#7b3ff2,#c0398f)}
  .c-gnav__li:nth-child(3) > .c-gnav__a::after,.c-gnav__li:nth-child(4) > .c-gnav__a::after{display:none}
  .c-gnav__li:nth-child(3) > .c-gnav__a:hover,.c-gnav__li:nth-child(4) > .c-gnav__a:hover{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);color:#fff!important}
  .l-header .c-iconBtn:hover{color:var(--pink)}
}
/* ドロワー＝スマホメニューをネオンポップに（Arkhe既定の素っ気ない白リストを作り替え）2026-07-24 */
.p-drawer__inner,.p-drawer__body{background:linear-gradient(165deg,#fff6fb 0%,#f1ecff 100%)!important;color:var(--ink)}
.p-drawer__inner,.p-drawer__body,.p-drawer__nav,.c-drawerNav{border:none!important;box-shadow:none!important}
.p-drawer__nav{padding:6px 0 4px}
.p-drawer__nav::before{content:"MENU";display:block;text-align:center;font-family:var(--en);font-weight:800;letter-spacing:.24em;font-size:.72rem;color:var(--purple);margin:4px 0 16px}
.c-drawerNav{list-style:none;margin:0;padding:0}
.c-drawerNav__li{border:none!important;margin:0}
.c-drawerNav__a{display:flex!important;align-items:center;gap:13px;margin:12px 20px;padding:17px 20px;background:#fff;border:2px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);font-family:var(--round);font-weight:800;font-size:1.06rem;color:var(--ink)!important;text-decoration:none;transition:.15s}
.c-drawerNav__a::before{content:"";flex:0 0 auto;width:13px;height:13px;border-radius:50%;background:var(--pink);border:2px solid var(--ink)}
.c-drawerNav__li:nth-child(3n+2) .c-drawerNav__a{box-shadow:4px 4px 0 var(--purple)}
.c-drawerNav__li:nth-child(3n+2) .c-drawerNav__a::before{background:var(--purple)}
.c-drawerNav__li:nth-child(3n) .c-drawerNav__a{box-shadow:4px 4px 0 var(--cyan)}
.c-drawerNav__li:nth-child(3n) .c-drawerNav__a::before{background:var(--cyan)}
.c-drawerNav__a:hover,.c-drawerNav__a:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)!important;color:var(--ink)!important}
.c-drawerNav__li.current-menu-item .c-drawerNav__a{background:var(--pink);color:#fff!important}
.c-drawerNav__li.current-menu-item .c-drawerNav__a::before{background:#fff}
.c-drawerNav__a .__mainText{font-family:var(--round);font-weight:800}
.p-drawer__close{margin:20px auto 26px!important;padding:14px 38px!important;background:var(--ink)!important;color:#fff!important;border:2px solid var(--ink)!important;border-radius:99px!important;font-family:var(--round);font-weight:800;font-size:.98rem;box-shadow:4px 4px 0 var(--pink)!important;transition:.15s}
.p-drawer__close svg{color:#fff;fill:currentColor}
.p-drawer__close:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--pink)!important}

/* =========================================================
   フロントページ
   ========================================================= */
/* 🔴 overflow:hidden にすると全幅MV（負マージンで .l-container の外へ出す）が
   .mr-front の幅（コンテナpadding内）でクリップされ、左右に隙間が残る。
   ブロブは .mr-hero 自身の overflow:hidden で、横スクロールは .l-content の overflow:clip で担保するので visible にする。 */
.mr-front{overflow:visible}

/* ── ヒーロー ── */
.mr-hero{position:relative;padding:clamp(52px,7vw,92px) 40px clamp(24px,5vw,72px);overflow:hidden}
.mr-hero::before,.mr-hero::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);z-index:0}
.mr-hero::before{width:420px;height:420px;background:rgba(255,46,136,.22);top:-120px;right:-80px}
.mr-hero::after{width:380px;height:380px;background:rgba(123,63,242,.18);bottom:-140px;left:-100px}

/* PC：テキスト（左カラム）とスライド（右カラムを縦に貫く）の2カラム。
   子要素はフラット（bub/h1/slides/l/btns/ai）。SPではこの順で縦積みになる。 */
.mr-hero__in{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1fr min(44%,500px);column-gap:clamp(28px,4vw,56px);align-items:center;
}
.mr-hero__bub,.mr-hero__t,.mr-hero__l,.mr-hero__btns,.mr-hero__ai{grid-column:1;justify-self:start}
.mr-hero__slides{
  grid-column:2;grid-row:1 / span 5;align-self:center;
  position:relative;width:100%;aspect-ratio:3/2;
  border:3px solid var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:8px 8px 0 var(--ink);background:var(--bg);
}
.mr-hero__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease-in-out}
.mr-hero__slide.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.mr-hero__slide{transition:none}}

.mr-hero__bub{
  display:inline-block;background:var(--yellow);border:2px solid var(--ink);border-radius:99px;
  padding:7px 18px;font-family:var(--round);font-weight:700;font-size:.82rem;
  transform:rotate(-2deg);box-shadow:3px 3px 0 var(--ink);margin-bottom:24px;
}
.mr-hero__t{font-family:var(--round);font-weight:900;font-size:clamp(1.9rem,1rem+4vw,4.4rem);line-height:1.42;letter-spacing:-.01em;margin-bottom:24px;word-break:keep-all}
.mr-hero__t1,.mr-hero__t2{display:block}
.mr-hero__t i{font-style:normal;background:linear-gradient(transparent 58%,var(--cyan) 58%);padding:0 .05em}
.mr-hero__t b{color:var(--pink)}
.mr-hero__l{font-size:.94rem;line-height:2;color:var(--ink2);max-width:560px;margin-bottom:32px}
.mr-hero__btns{display:flex;gap:12px;flex-wrap:wrap}
.mr-hero__ai{font-size:.72rem;line-height:1.7;color:var(--ink2);opacity:.72;margin:18px 0 0;max-width:520px}

/* SP：MVを全幅バンドに（.l-container の左右paddingを打ち消す）。スライドは背景にせずブロックで縦積み。 */
@media(max-width:860px){
  .mr-hero{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;max-width:100vw;
    padding:clamp(28px,7vw,48px) 22px clamp(30px,7vw,44px);
  }
  .mr-hero__in{display:flex;flex-direction:column;align-items:stretch;max-width:520px}
  .mr-hero__slides{
    grid-column:auto;grid-row:auto;width:100%;aspect-ratio:16/10;
    box-shadow:6px 6px 0 var(--ink);margin:20px 0 26px;
  }
  .mr-hero__t{font-size:clamp(1.7rem,7vw,2.3rem);line-height:1.45}
  .mr-hero__l{margin-bottom:26px;color:var(--ink2)}
  .mr-hero__btns .mr-btn{flex:1 1 100%;justify-content:center}
}

/* ── ボタン ── */
.mr-btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--round);font-weight:700;
  font-size:.92rem;padding:16px 30px;border-radius:99px;text-decoration:none;border:2px solid var(--ink);transition:.16s;
}
.mr-btn--p{background:var(--pink);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.mr-btn--p:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);color:#fff}
.mr-btn--w{background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.mr-btn--w:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);color:var(--ink)}
.mr-btn--s{background:linear-gradient(135deg,#4a2f8f,#c0398f);color:#fff;box-shadow:4px 4px 0 var(--ink)}
.mr-btn--s:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);color:#fff}

/* ── 関係性チップ（視覚の主役） ── */
.mr-tags{max-width:1180px;margin:clamp(28px,5vw,60px) auto 0;padding:0 20px clamp(48px,6vw,72px)}
.mr-tags__h{font-family:var(--round);font-weight:700;font-size:.86rem;color:var(--ink2);margin-bottom:16px}
.mr-tags__l{display:flex;gap:9px;flex-wrap:wrap}
.mr-tg{
  font-family:var(--round);font-weight:700;font-size:.86rem;padding:9px 17px;border-radius:99px;
  border:2px solid var(--ink);background:#fff;text-decoration:none;color:var(--ink);transition:.15s;
}
.mr-tg:hover{transform:translateY(-3px);color:var(--ink)}
.mr-tg:nth-child(3n+1):hover{background:var(--pink);color:#fff}
.mr-tg:nth-child(3n+2):hover{background:var(--cyan)}
.mr-tg:nth-child(3n):hover{background:var(--yellow)}

/* ── 診断（Phase 1で表示） ── */
.mr-qz{max-width:1180px;margin:0 auto clamp(56px,7vw,90px);padding:0 20px}
/* 2分割（関係性診断＋性癖診断）カード：テキスト＋イラストの2カラム */
.mr-qz--duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mr-qz__b{
  display:grid;grid-template-columns:1fr 40%;align-items:stretch;overflow:hidden;
  border:3px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--ink);
  color:#fff;text-decoration:none;transition:.16s;min-height:280px;
}
.mr-qz__b:hover{transform:translate(4px,4px);box-shadow:4px 4px 0 var(--ink);color:#fff}
.mr-qz__txt{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,40px)}
.mr-qz__img{margin:0;position:relative;overflow:hidden;background:rgba(0,0,0,.15)}
.mr-qz__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.mr-qz__b--kankei{background:linear-gradient(125deg,var(--purple),var(--pink))}
.mr-qz__b--seiheki{background:linear-gradient(135deg,#4a2f8f 0%,#8b2fb0 55%,#c0398f 100%)}
.mr-qz__lock{font-style:normal}
@media(max-width:760px){
  .mr-qz--duo{grid-template-columns:1fr}
  .mr-qz__b{grid-template-columns:1fr 38%;min-height:220px}
}
@media(max-width:440px){
  .mr-qz__b{grid-template-columns:1fr;min-height:0}
  .mr-qz__img{height:180px}
  .mr-qz__img img{position:relative}
}
.mr-qz__n{font-family:var(--en);font-weight:800;font-size:.66rem;letter-spacing:.24em;opacity:.85;margin-bottom:12px}
.mr-qz__t{font-family:var(--round);font-weight:900;font-size:clamp(1.4rem,1rem+1.9vw,2.3rem);line-height:1.45;margin-bottom:14px}
.mr-qz__d{font-size:.86rem;line-height:1.95;opacity:.92;max-width:520px;margin-bottom:26px}
.mr-qz__a{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);margin-top:auto;
  font-family:var(--round);font-weight:900;font-size:1rem;padding:16px 30px;border-radius:99px;
  text-decoration:none;border:2px solid var(--ink);white-space:nowrap;transition:.16s;box-shadow:3px 3px 0 rgba(0,0,0,.25);
}
.mr-qz__b:hover .mr-qz__a{background:var(--yellow);color:var(--ink)}
.mr-qz__b--seiheki .mr-qz__n{opacity:1}
.mr-qz__b--seiheki .mr-qz__a{background:var(--pink);color:#fff;border-color:#fff}

/* ── 記事タイル ── */
.mr-sec{max-width:1180px;margin:0 auto;padding:0 20px clamp(52px,6vw,84px)}
.mr-sec__h{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.mr-sec__t{font-family:var(--round);font-weight:900;font-size:clamp(1.2rem,1rem+.9vw,1.65rem)}
.mr-sec__t i{font-style:normal;color:var(--pink)}
.mr-sec__b{font-family:var(--en);font-weight:800;font-size:.6rem;letter-spacing:.18em;color:#fff;background:var(--ink);padding:4px 10px;border-radius:99px}
.mr-sec__all{margin-left:auto;font-family:var(--round);font-weight:700;font-size:.78rem;color:var(--ink2);text-decoration:none}
.mr-sec__all:hover{color:var(--pink)}
.mr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:940px){.mr-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mr-grid{grid-template-columns:1fr}}
.mr-cd{
  background:var(--panel);border:2px solid var(--ink);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;transition:.16s;box-shadow:4px 4px 0 var(--ink);
  display:flex;flex-direction:column;
}
.mr-cd:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.mr-cd__im{
  aspect-ratio:4/3;background:linear-gradient(135deg,#ffe3f1,#e8ddff 50%,#d9fbf8);
  display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink);position:relative;overflow:hidden;
}
.mr-cd__ph{font-family:var(--en);font-weight:800;font-size:.7rem;letter-spacing:.2em;color:var(--ink3)}
.mr-cd__im img{width:100%;height:100%;object-fit:cover;display:block}
.mr-cd__tag{position:absolute;top:9px;left:9px;font-family:var(--round);font-weight:700;font-size:.62rem;background:var(--ink);color:#fff;padding:4px 10px;border-radius:99px}
.mr-cd__b{padding:16px 15px 18px;flex:1;display:flex;flex-direction:column}
.mr-cd__t{font-family:var(--round);font-weight:700;font-size:.95rem;line-height:1.62}
.mr-cd:hover .mr-cd__t{color:var(--pink)}

/* =========================================================
   CSS合成アイキャッチ（.mr-catch）— 画像を焼かずに他記事のアイキャッチと同じ体裁を再現
   ランキング記事など、featured画像を持たない投稿の本文冒頭に出る（functions.php）
   ========================================================= */
.mr-catch-wrap{
  position:relative;aspect-ratio:16/9;margin:0 0 1.9em;
  border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:4px 4px 0 var(--ink);
}
/* コンテナ幅基準(cqi)で組む＝単一記事の大ヘッダーでも一覧の小カードでも同じ比率で決まる */
.mr-catch{
  position:absolute;inset:0;margin:0;padding:0;container-type:inline-size;
  display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;
}
/* 🔴 カテゴリ別配色は焼き込みJPG（blog/gen_eyecatch_v2.py の SCHEME）と完全一致させる。
   ranking=淡ピンク(CSS専用・焼き込みなし) ／ 他3つは gradient(125deg,c1,c2)＋ハイライトバー=marker。
   kankeisei: ピンク→紫 / bar=シアン｜hajimete: シアン→紫 / bar=黄｜yougo: 黄→ピンク / bar=紫 */
.mr-catch--ranking{background:linear-gradient(150deg,#ffe6f2 0%,#ffbcdd 55%,#ff9dca 100%)}
.mr-catch--kankeisei{background:linear-gradient(125deg,#ff2e88,#7b3ff2)}
.mr-catch--hajimete{background:linear-gradient(125deg,#00e0d5,#7b3ff2)}
.mr-catch--yougo{background:linear-gradient(125deg,#ffd93d,#ff2e88)}
/* ハイライトバー（marker）をカテゴリごとに（焼き込みJPGと一致・既定はranking=ピンク） */
.mr-catch--kankeisei .mr-catch__word b{background:linear-gradient(transparent 62%,#00e0d5 62%)}
.mr-catch--hajimete .mr-catch__word b{background:linear-gradient(transparent 62%,#ffd93d 62%)}
.mr-catch--yougo .mr-catch__word b{background:linear-gradient(transparent 62%,#7b3ff2 62%)}
/* 鮮やかグラデ上のEN/サブは白抜き（焼き込みJPGと一致）。ranking(淡色)は既定の濃色のまま。 */
.mr-catch--kankeisei .mr-catch__en,.mr-catch--hajimete .mr-catch__en,.mr-catch--yougo .mr-catch__en{color:rgba(255,255,255,.9)}
.mr-catch--kankeisei .mr-catch__sub,.mr-catch--hajimete .mr-catch__sub,.mr-catch--yougo .mr-catch__sub{color:#fff;opacity:.92}
.mr-catch__bokeh{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 84% 20%, rgba(255,255,255,.55) 0 8.5%, transparent 9.5%),
    radial-gradient(circle at 93% 58%, rgba(255,255,255,.34) 0 5%, transparent 6%),
    radial-gradient(circle at 72% 80%, rgba(255,255,255,.28) 0 4%, transparent 5%);
}
.mr-catch::after{content:"";position:absolute;right:5cqi;bottom:5cqi;width:clamp(6px,1.6cqi,11px);aspect-ratio:1;border-radius:50%;background:rgba(22,13,36,.30)}
.mr-catch__chip{
  position:absolute;top:5cqi;left:5cqi;z-index:2;
  font-family:var(--round);font-weight:700;font-size:clamp(.6rem,3.2cqi,.82rem);
  background:var(--ink);color:#fff;padding:.5em 1.1em;border-radius:99px;white-space:nowrap;
}
.mr-catch__inner{position:relative;z-index:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:2.4cqi;padding:0 7cqi}
.mr-catch__en{
  font-family:var(--en);font-weight:800;font-size:clamp(.62rem,3.6cqi,1.05rem);letter-spacing:.26em;
  color:rgba(22,13,36,.5);text-transform:uppercase;line-height:1.1;
}
/* 語が長い記事でも溢れないよう2行でクリップ（本来は簡潔語1〜2行の想定） */
.mr-catch__word{line-height:1.02;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.mr-catch__word b{
  font-family:var(--round);font-weight:900;color:var(--ink);
  font-size:clamp(1.7rem,15cqi,4.6rem);
  background:linear-gradient(transparent 62%,var(--pink) 62%);padding:0 .14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-shadow:2px 3px 0 rgba(255,255,255,.6);
}
.mr-catch__sub{
  font-family:var(--round);font-weight:700;font-size:clamp(.8rem,4.4cqi,1.18rem);color:var(--ink);opacity:.75;
}
/* 一覧カード内(.p-postList__thumb)に注入されるとき＝枠/角丸/影はカード側が持つので二重にしない */
.p-postList__thumb .mr-catch-wrap,
.mr-cd__im .mr-catch-wrap{position:absolute;inset:0;aspect-ratio:auto;margin:0;border:0;border-radius:0;box-shadow:none}
/* TOPカード(.mr-cd)は既に .mr-cd__tag でカテゴリ名を出すので、アイキャッチ内の重複チップは隠す */
.mr-cd__im .mr-catch__chip{display:none}
/* noimg.png はJS注入前に隠してチラつき防止（no-thumb投稿のみ） */
.p-postList__thumb[data-has-thumb="0"] .c-postThumb__img{opacity:0}

/* ランキング記事：導入文直後の作品チラ見せ（詳細でないサムネ3枚・センター寄せ） */
/* 情景リード（.mr-scene）＝記事冒頭の官能的ワンシーン。買う直前の"気分"を作る短い描写。
   本文(ゴシック)と区別して明朝＋淡いカードで"読ませる"トーンに。特定作品/人物/価格は書かない。 */
.mr-scene{
  position:relative;margin:0 0 1.8em;padding:1.4em 1.5em 1.4em 1.7em;
  font-family:"Noto Serif JP",serif;font-weight:500;font-size:1.02rem;line-height:2;
  color:#3a2740;letter-spacing:.02em;
  background:linear-gradient(160deg,#fff6fb 0%,#fdeff6 100%);
  border:1.5px solid #f4cfe2;border-radius:14px;box-shadow:3px 3px 0 rgba(255,46,136,.10);
}
.mr-scene::before{
  content:"";position:absolute;left:0;top:1.2em;bottom:1.2em;width:4px;border-radius:99px;
  background:linear-gradient(180deg,var(--pink),var(--purple));
}
.mr-scene p{margin:0}
.mr-scene p + p{margin-top:.7em}
.mr-scene__mk{background:linear-gradient(transparent 60%,#ffd6ea 60%);padding:0 .1em;font-weight:700}
@media(max-width:720px){.mr-scene{font-size:.96rem;line-height:1.95;padding:1.2em 1.2em 1.2em 1.4em}}

/* 冒頭の注目作＝リッチな詳細カード1枚（mr-work・下部ランキングと役割を分ける） */
.mr-rank-teaser{margin:0 0 2.4em}
.mr-rank-teaser .mr-work{margin:0}

/* TOPの注目作カルーセル（[doujin_spotlight]・5枚を横スライド） */
.mr-spot{position:relative}
/* 横スライドのクリップはviewportだけに掛ける（ドットは外＝影が欠けない） */
.mr-spot__viewport{overflow:hidden;transition:height .5s cubic-bezier(.4,0,.2,1)}
/* 上揃え＝短いカードで中央寄せの空きを作らない。高さはJSが表示中カードに合わせる */
.mr-spot__track{display:flex;align-items:flex-start;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.mr-spot__slide{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:6px 8px 10px}
.mr-spot__label{display:inline-block;font-family:var(--round);font-weight:800;font-size:.8rem;background:var(--ink);color:#fff;padding:5px 14px;border-radius:99px;margin:0 0 12px;box-shadow:3px 3px 0 var(--pink)}
.mr-spot .mr-work{margin:0}
.mr-spot__dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
.mr-spot__dot{width:12px;height:12px;padding:0;border-radius:50%;background:#fff;border:2px solid var(--ink);cursor:pointer;transition:.16s;box-shadow:2px 2px 0 var(--ink)}
.mr-spot__dot.is-active{background:var(--pink);transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.mr-sec--spot{margin-top:8px}

/* 統合したランキングハブ（カテゴリ:ランキングのアーカイブ下部） */
.mr-rank-hub{max-width:820px;margin:56px auto 0;padding:0 20px}

/* =========================================================
   記事本文（faq-article）にトーンを適用
   ========================================================= */
/* 記事(.faq-article)と固定ページ(.page .l-article)の本文に同じトーンを当てる。
   固定ページは .faq-article ラッパーが無く .l-article 直下に h2.bd 等が並ぶため、両方を対象にする。 */
.faq-article h1,
.p-entry__title{
  font-family:var(--round);font-weight:900;
  font-size:clamp(1.5rem,1.15rem+1.4vw,2.1rem);line-height:1.5;letter-spacing:-.01em;
  margin:0 0 1.2em;
}
.faq-article h2.bd,
.page .l-article h2{
  font-family:var(--round);font-weight:900;
  font-size:clamp(1.16rem,1rem+.7vw,1.44rem);line-height:1.6;
  margin:2.8em 0 1em;padding:0 0 .5em;position:relative;
  border-bottom:3px solid var(--ink);
}
.faq-article h2.bd::after,
.page .l-article h2::after{
  content:"";position:absolute;left:0;bottom:-3px;width:64px;height:3px;background:var(--pink);
}
.faq-article h3,
.page .l-article h3{
  font-family:var(--round);font-weight:700;font-size:1.02rem;line-height:1.7;
  margin:2em 0 .8em;color:var(--purple);
}
.faq-article p,
.page .l-article p{line-height:2.05;margin:0 0 1.5em;font-size:1rem;color:#2a2233}
.faq-article section > p:first-of-type{margin-top:0}
/* strongは基本「太字のみ」（p内などマーカーを付けない） */
.faq-article strong,
.page .l-article strong{
  font-weight:700;color:var(--ink);
}
/* マーカーはリスト（ul/ol）内のstrongだけに付与 */
.faq-article li strong,
.page .l-article li strong{
  background:linear-gradient(transparent 60%,rgba(255,217,61,.6) 60%);padding:0 .1em;
}
.faq-article ul,.faq-article ol,
.page .l-article ul,.page .l-article ol{margin:0 0 1.5em 1.4em}
.faq-article ul,.faq-article ol{margin:0 0 1.5em 0}
.faq-article li,
.page .l-article li{font-size:.92rem;line-height:1.95;margin-bottom:.4em;color:#2a2233}

/* リード文（記事・固定ページとも、本文冒頭の最初のp） */
.faq-article > p:first-of-type,
.page .l-article > p:first-of-type{
  font-size:.96rem;line-height:2;color:var(--ink);
  padding:1.4em 1.5em;background:#fff;border:2px solid var(--ink);border-radius:14px;
  box-shadow:4px 4px 0 var(--ink);margin-bottom:2.4em;
}

/* 記事末尾の md-outro */
.md-outro{
  margin-top:2.6em;padding:1.5em 1.6em;
  background:linear-gradient(115deg,rgba(123,63,242,.08),rgba(255,46,136,.08));
  border:2px solid var(--ink);border-radius:14px;
}
.md-outro p{margin:0;font-size:.92rem;line-height:1.95;color:var(--ink)}

/* 表 */
.faq-article table,
.page .l-article table{
  width:100%;border-collapse:separate;border-spacing:0;margin:0 0 1.8em;font-size:.86rem;
  background:#fff;border:2px solid var(--ink);border-radius:12px;overflow:hidden;
  display:block;overflow-x:auto;white-space:nowrap;
}
@media(min-width:720px){.faq-article table,.page .l-article table{display:table;white-space:normal}}
.faq-article th,.faq-article td,
.page .l-article th,.page .l-article td{border-bottom:1px solid var(--line);padding:.9em 1.1em;text-align:left;line-height:1.8;vertical-align:top}
.faq-article th,
.page .l-article th{background:#fbeefc;font-weight:700;white-space:nowrap;font-family:var(--round)}

/* =========================================================
   カテゴリ一覧・記事リスト（Arkheの投稿リストにトーン付与）
   ========================================================= */
.p-postList.-type-card .p-postList__thumb,
.p-postList__thumb{aspect-ratio:4/3;position:relative;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#ffe3f1,#d9fbf8)}
/* 🔴 Arkheの内側figureはpadding-topで16:9になり4/3枠に足りず下に白余白が出る→絶対配置でサムネ枠に充填 */
.p-postList__thumb .c-postThumb__figure{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0}
.p-postList__thumb img{width:100%;height:100%;object-fit:cover}
.p-postList__title{font-family:var(--round);font-weight:700}
.p-postList__link:hover .p-postList__title{color:var(--pink)}

/* =========================================================
   著者ボックス（この記事を書いた人）
   ========================================================= */
.p-entry__author .c-bottomSection__title,
.c-bottomSection__title{
  font-family:var(--round);font-weight:900;font-size:1.1rem;margin-bottom:16px;
}
.p-authorBox{
  background:#fff;border:2px solid var(--ink);border-radius:16px;
  box-shadow:4px 4px 0 var(--ink);padding:22px 24px;
  display:flex;gap:20px;align-items:center;flex-wrap:wrap;
}
.p-authorBox__avatar{flex:none;margin:0}
.p-authorBox__avatar img{
  width:76px;height:76px;border-radius:50%;border:2px solid var(--ink);
  object-fit:cover;background:linear-gradient(135deg,#ffe3f1,#d9fbf8);
}
.p-authorBox__body{flex:1;min-width:180px}
.p-authorBox__name,.p-authorBox__name a{
  font-family:var(--round);font-weight:900;font-size:1.02rem;color:var(--ink);text-decoration:none;
}
.p-authorBox__desc{font-size:.86rem;line-height:1.85;color:var(--ink2);margin-top:6px}
.p-authorBox a[href]{color:var(--purple)}
.p-authorBox a[href]:hover{color:var(--pink)}
/* 「記事一覧へ」ボタン */
.p-authorBox__btn,.p-authorBox .c-btn{
  font-family:var(--round);font-weight:700;font-size:.82rem;
  border:2px solid var(--ink)!important;border-radius:99px!important;
  background:var(--yellow)!important;color:var(--ink)!important;box-shadow:3px 3px 0 var(--ink);
  padding:10px 20px!important;transition:.15s;
}
.p-authorBox__btn:hover,.p-authorBox .c-btn:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* =========================================================
   下層ページ・アーカイブの見出し帯（Arkhe既定の #555 ダーク帯を刷新）
   ========================================================= */

/* 🔴 Arkheは固定ページ帯に #555 ダークを敷き白文字を載せる。ネオンポップに合わないので、
   淡いグラデ＋黒フチ＋丸ゴシックの見出しに置き換える。カテゴリ帯も同じ型に揃える。 */
.l-content__top.p-topArea,
.l-content__top.p-topArea.c-filterLayer{
  background:linear-gradient(120deg,#ffe3f1,#e8ddff 55%,#d9fbf8);
  min-height:0;
  padding:clamp(40px,5vw,64px) 20px clamp(28px,3vw,40px);
  border-bottom:3px solid var(--ink);
}
.l-content__top.p-topArea.c-filterLayer::before,
.l-content__top.p-topArea.c-filterLayer::after{background:none;opacity:0}

.p-topArea__title,.p-archive__title{text-align:center;position:relative}
.p-topArea .c-pageTitle__main,
.p-archive__title .c-pageTitle__main,
.p-archive__title{
  font-family:var(--round);font-weight:900;color:var(--ink);
  font-size:clamp(1.35rem,1.1rem+1.1vw,2rem);line-height:1.5;letter-spacing:-.01em;
}
.p-topArea .c-pageTitle__sub,.p-archive__desc{color:var(--ink2);font-size:.85rem}
/* 見出し下のピンクの短い線 */
.p-topArea__title::after,.p-archive__title::after{
  content:"";display:block;width:60px;height:4px;border-radius:99px;background:var(--pink);margin:16px auto 0;
}

/* アーカイブ帯（カテゴリ）にも同じグラデを敷く */
.archive .l-main__body.p-archive .p-archive__title,
.p-archive__title{
  background:linear-gradient(120deg,#ffe3f1,#e8ddff 55%,#d9fbf8);
  border-bottom:3px solid var(--ink);
  padding:clamp(40px,5vw,64px) 20px clamp(28px,3vw,40px);margin:0;
}

/* パンくず：固定ページはタイトルの下に出るので、カテゴリと同じくタイトルの前へ回す */
.page .l-content{display:flex;flex-direction:column}
.page .l-content > .p-breadcrumb{order:-1}
.p-breadcrumb{font-family:var(--round);font-size:.76rem}
.p-breadcrumb a{color:var(--ink2)}
.p-breadcrumb a:hover{color:var(--pink)}

/* =========================================================
   お問い合わせ（Contact Form 7）
   ========================================================= */
.wpcf7{max-width:none}
.wpcf7 label{display:block;font-family:var(--round);font-weight:700;font-size:.9rem;margin:0 0 6px}
.wpcf7-form p{margin:0 0 20px}
.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 input[type=tel],
.wpcf7 input[type=url],
.wpcf7 textarea,
.wpcf7 select{
  width:100%;font-size:16px;/* iOS自動ズーム防止 */
  font-family:var(--sans);color:var(--ink);background:#fff;
  border:2px solid var(--ink);border-radius:12px;padding:12px 14px;transition:.15s;
}
.wpcf7 textarea{min-height:160px;resize:vertical}
.wpcf7 input:focus,.wpcf7 textarea:focus,.wpcf7 select:focus{
  outline:none;border-color:var(--pink);box-shadow:3px 3px 0 var(--pink)
}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:var(--ink3)}
/* 送信ボタン */
.wpcf7 input[type=submit],
.wpcf7 .wpcf7-submit{
  appearance:none;cursor:pointer;
  font-family:var(--round);font-weight:900;font-size:.98rem;color:#fff;
  background:var(--pink);border:2px solid var(--ink);border-radius:99px;
  padding:14px 40px;box-shadow:4px 4px 0 var(--ink);transition:.16s;width:auto;
}
.wpcf7 input[type=submit]:hover,.wpcf7 .wpcf7-submit:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.wpcf7 .wpcf7-not-valid-tip{color:var(--pink);font-size:.8rem;font-weight:700}
.wpcf7-response-output{border-radius:12px!important;border-width:2px!important;font-size:.85rem}

/* =========================================================
   年齢確認モーダル
   ⚠️ 見た目だけの制限。HTMLは常に配信（DMM規約第2条対策）
   ========================================================= */
.mr-age-gate{
  position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:1.5rem;background:rgba(22,13,36,.9);
}
.mr-age-gate[hidden]{display:none}
.mr-age-gate__panel{
  width:min(100%,30rem);background:var(--bg);border:3px solid var(--ink);border-radius:22px;
  box-shadow:8px 8px 0 var(--ink);padding:2.6rem 2rem 2.2rem;text-align:center;
}
.mr-age-gate__brand{font-family:var(--round);font-weight:900;font-size:1rem;color:var(--pink);margin:0 0 1.6rem}
.mr-age-gate__title{font-family:var(--round);font-weight:900;font-size:1.2rem;margin:0 0 1.2rem}
.mr-age-gate__lead{font-size:.82rem;line-height:1.9;color:var(--ink2);margin:0 0 1.6rem;text-align:left}
.mr-age-gate__q{font-family:var(--round);font-weight:700;font-size:.9rem;margin:0 0 1.4rem}
.mr-age-gate__actions{display:flex;flex-direction:column;gap:.8rem;align-items:stretch}
.mr-age-gate__yes{
  appearance:none;border:2px solid var(--ink);background:var(--pink);color:#fff;
  font-family:var(--round);font-weight:900;font-size:.92rem;padding:1em;border-radius:99px;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);transition:.16s;
}
.mr-age-gate__yes:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.mr-age-gate__no{font-size:.78rem;color:var(--ink3);text-decoration:underline;padding:.4em}
body.mr-age-locked{overflow:hidden}

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

/* ── ブランドブロック（arkhe_before_footer で差し込み）── */
.mr-foot{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;
  padding:clamp(44px,6vw,72px) 20px clamp(40px,5vw,60px);
}
/* ネオンのグラデ帯を上端に */
.mr-foot::before{
  content:"";position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--pink),var(--purple) 40%,var(--cyan) 75%,var(--yellow));
}
/* 装飾ブロブ */
.mr-foot::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:rgba(255,46,136,.16);filter:blur(70px);bottom:-140px;right:-60px;pointer-events:none;
}
.mr-foot__in{
  position:relative;z-index:1;max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,60px);align-items:start;
}
@media(max-width:760px){.mr-foot__in{grid-template-columns:1fr;gap:32px}}
.mr-foot__logo{
  display:flex;align-items:center;gap:.5em;
  font-family:var(--round);font-weight:900;font-size:1.35rem;margin:0 0 16px;
}
.mr-foot__logo img{width:1.5em;height:1.5em;transform:rotate(-6deg)}
.mr-foot__catch{font-size:.9rem;line-height:1.95;color:rgba(255,255,255,.72);margin:0 0 18px;max-width:34em}
.mr-foot__age{
  display:inline-block;font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.92);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 14px;margin:0;
}
.mr-foot__ai{font-size:.74rem;line-height:1.75;color:rgba(255,255,255,.5);margin:12px 0 0;max-width:36em}
.mr-foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mr-foot__h{
  font-family:var(--round);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  color:var(--cyan);margin:0 0 14px;
}
.mr-foot__col a{
  display:block;font-family:var(--round);font-weight:500;font-size:.9rem;
  color:rgba(255,255,255,.8);text-decoration:none;padding:6px 0;transition:.15s;
}
.mr-foot__col a:hover{color:var(--pink);transform:translateX(3px)}

/* ── 既存フッター（コピーライト帯）── */
.l-footer{border-top:0;background:var(--ink)}
.l-footer__foot{padding-top:0!important}
.l-footer a{color:rgba(255,255,255,.75);font-family:var(--round);font-weight:500}
.l-footer a:hover{color:var(--pink)}
.l-footer__nav{gap:8px 22px;padding-top:28px;padding-bottom:14px}
.l-footer__nav a{font-size:.78rem}
.l-footer .c-copyright,.l-footer__copyright,.l-footer small{
  color:rgba(255,255,255,.5);font-family:var(--en);font-size:.72rem;letter-spacing:.04em;
}

/* 記事詳細アイキャッチ直下のAI生成注記（Arkhe figcaption に注入） */
.p-entry__thumb__figcaption{
  font-family:var(--round);font-size:.72rem;line-height:1.7;
  color:var(--ink2);opacity:.7;text-align:center;margin:8px auto 0;max-width:40em;
}

/* =========================================================
   DMM(FANZA)作品パーツ（Phase 1・ネオンポップ／ハードシャドウ）
   .mr-picks ランキング / .mr-pick カード / .mr-single 横型
   .mr-work 詳細 / .mr-tabs タブ / .mr-credit クレジット
   ========================================================= */
.mr-picks{margin:34px 0}
.mr-picks__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 18px}
.mr-picks__lead{display:flex;flex-direction:column;gap:4px;min-width:0}
.mr-picks__en{display:block;font-family:var(--en);font-weight:800;font-size:.72rem;letter-spacing:.14em;color:var(--purple);text-transform:uppercase;line-height:1.2}
.mr-picks__ttl{font-family:var(--round);font-weight:900;font-size:1.28rem;color:var(--ink);margin:0;line-height:1.3}
.mr-picks__pr{flex:0 0 auto;margin-top:2px;font-family:var(--round);font-weight:700;font-size:.64rem;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:3px 10px;border-radius:99px;white-space:nowrap}
.mr-picks__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
.mr-picks--compact .mr-picks__grid{grid-template-columns:repeat(2,1fr)}
.mr-pick{margin:0}
.mr-pick__a{position:relative;display:flex;flex-direction:column;height:100%;background:var(--panel);border:2px solid var(--ink);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:4px 4px 0 var(--ink);transition:.16s}
.mr-pick__a:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.mr-pick__rank{position:absolute;top:-2px;left:-2px;z-index:2;font-family:var(--en);font-weight:800;font-size:1rem;min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;border-radius:14px 0 14px 0;padding:0 8px}
.mr-pick:nth-child(1) .mr-pick__rank{background:var(--pink)}
.mr-pick:nth-child(2) .mr-pick__rank{background:var(--purple)}
.mr-pick:nth-child(3) .mr-pick__rank{background:var(--cyan);color:var(--ink)}
/* FANZA同人のlarge画像は560×420＝4:3固定。枠も4:3にすれば表紙がピタリ収まる（切れ・余白ゼロ・CLSなし） */
.mr-pick__thumb{display:block;aspect-ratio:4/3;background:#f4ecf5;overflow:hidden}
.mr-pick__thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mr-pick__a:hover .mr-pick__thumb img{transform:scale(1.05)}
.mr-pick__body{padding:12px 13px 14px;flex:1;display:flex;flex-direction:column;gap:7px}
.mr-pick__title{font-family:var(--round);font-weight:700;font-size:.86rem;line-height:1.55;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* PCはカードが大きい（2列）のでタイトルも大きく */
@media(min-width:721px){.mr-pick__title{font-size:1.02rem;line-height:1.62}}
.mr-pick__a:hover .mr-pick__title{color:var(--pink)}
.mr-pick__meta{margin-top:auto;display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:.76rem}
.mr-pick__star{font-family:var(--round);font-weight:700;color:#e8a400}
.mr-pick__cnt{color:var(--ink3);font-size:.7rem}
.mr-pick__price{font-family:var(--round);font-weight:700;color:var(--pink)}
.mr-picks__foot{font-size:.68rem;color:var(--ink3);margin:12px 0 0;line-height:1.7}

/* single：本文中の1枚横型カード */
.mr-single{margin:22px 0}
.mr-single__a{display:flex;gap:14px;align-items:stretch;background:var(--panel);border:2px solid var(--ink);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:4px 4px 0 var(--ink);transition:.16s}
.mr-single__a:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.mr-single__thumb{flex:0 0 33%;max-width:150px;background:var(--line);overflow:hidden}
.mr-single__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mr-single__body{flex:1;padding:14px 16px 14px 4px;display:flex;flex-direction:column;gap:6px;min-width:0}
.mr-single__pr{display:inline-flex;align-items:center;gap:7px;font-family:var(--round);font-weight:700;font-size:.72rem;color:var(--purple)}
.mr-single__prtag{font-size:.6rem;background:var(--yellow);color:var(--ink);border:1.5px solid var(--ink);padding:1px 7px;border-radius:99px}
.mr-single__title{font-family:var(--round);font-weight:700;font-size:.96rem;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mr-single__meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;font-size:.8rem}
.mr-single__star{font-family:var(--round);font-weight:700;color:#e8a400}
.mr-single__cnt{color:var(--ink3);font-size:.72rem}
.mr-single__price{font-family:var(--round);font-weight:700;color:var(--pink)}
.mr-single__cta{margin-top:auto;font-family:var(--round);font-weight:700;font-size:.82rem;color:var(--purple)}

/* work：作品詳細カード＋サンプル帯 */
.mr-work{position:relative;margin:28px 0;background:linear-gradient(160deg,#fff 0%,#fff2f8 100%);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);padding:18px}
.mr-work__pr{position:absolute;top:12px;right:12px;font-family:var(--round);font-weight:700;font-size:.62rem;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:3px 10px;border-radius:99px}
.mr-work__top{display:flex;gap:16px}
.mr-work__cover{flex:0 0 34%;max-width:200px;border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:var(--line)}
.mr-work__cover img{width:100%;height:100%;object-fit:cover;display:block}
.mr-work__meta{flex:1;min-width:0}
.mr-work__title{font-family:var(--round);font-weight:900;font-size:1.05rem;line-height:1.45;margin:0 0 10px}
.mr-work__title a{color:var(--ink);text-decoration:none}
.mr-work__title a:hover{color:var(--pink)}
.mr-work__facts{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.82rem;color:var(--ink2)}
.mr-work__star{font-family:var(--round);font-weight:700;color:#e8a400}
.mr-work__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.mr-work__tag{font-family:var(--round);font-weight:700;font-size:.7rem;background:#fbeef6;color:var(--purple);border:1.5px solid var(--purple);padding:3px 10px;border-radius:99px}
.mr-work__btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--round);font-weight:700;font-size:.86rem;background:var(--pink);color:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:11px 20px;border-radius:99px;text-decoration:none;transition:.16s}
.mr-work__btn:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);color:#fff}
.mr-work__samples{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}
.mr-work__sample{border:2px solid var(--ink);border-radius:9px;overflow:hidden;background:var(--line);aspect-ratio:3/2}
.mr-work__sample img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.mr-work__sample:hover img{transform:scale(1.08)}

/* tabs：人気/売れ筋などの切替ランキング */
.mr-tabs{margin:30px 0}
.mr-tabs__head{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.mr-tabs__pr{order:2;margin-left:auto;font-family:var(--round);font-weight:700;font-size:.64rem;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);padding:3px 10px;border-radius:99px}
.mr-tabs__btns{display:flex;flex-wrap:wrap;gap:8px}
.mr-tabs__btn{font-family:var(--round);font-weight:700;font-size:.84rem;background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:8px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.14s}
.mr-tabs__btn:hover{color:var(--pink)}
.mr-tabs__btn.is-active{background:var(--ink);color:#fff;box-shadow:0 0 0 var(--ink);transform:translate(3px,3px)}
.mr-tabs__panel{display:none}
.mr-tabs__panel.is-active{display:block}

/* credit（フッター） */
.mr-credit{font-family:var(--sans);font-size:.72rem;color:var(--ink3);margin:8px 0 0;text-align:center}
.mr-credit a{color:var(--purple);text-decoration:none}
.mr-credit a:hover{text-decoration:underline}

@media(max-width:720px){
	.mr-picks__grid{grid-template-columns:repeat(2,1fr);gap:12px}
	.mr-work__top{flex-direction:column}
	.mr-work__cover{max-width:none;flex:none}
	.mr-work__samples{grid-template-columns:repeat(3,1fr)}
	.mr-single__thumb{flex-basis:38%}
}

/* 関係性記事末の自動ランキング（mr-article-picks.php）ラッパ */
.mr-article-picks{margin:40px 0 0;padding:26px 0 0;border-top:3px dashed var(--line)}
.mr-article-picks .mr-picks{margin-top:8px}
.mr-article-picks h2.bd{font-family:var(--round);font-weight:900;font-size:1.2rem;color:var(--ink);margin:26px 0 24px;text-align:center}
.mr-article-picks h2.bd:first-child{margin-top:0}
.mr-article-picks h2.bd::before{content:"\f06d";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--pink);margin-right:.5em}
.mr-kankeisei-cta{margin:24px 0 0;text-align:center}
.mr-kankeisei-cta a{display:inline-block;font-family:var(--round);font-weight:700;font-size:.9rem;color:var(--purple);text-decoration:none;background:#f6effc;border:2px solid var(--purple);border-radius:99px;padding:11px 24px;box-shadow:3px 3px 0 var(--purple);transition:.16s}
.mr-kankeisei-cta a:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--purple)}

/* カテゴリアーカイブ：タイトルと説明文の間に余白（ケイ指摘 2026-07-24） */
.archive .l-main__body.p-archive .p-archive__title,.p-archive__title{margin-bottom:40px}

/* ============================================================
   関係性診断 [mr_diagnosis]（/shindan/）— 汎用エンジンをネオンポップに上書き
   app.js の生成クラス（.engine-hero/.choice/.result…）を .mr-diag スコープで再装飾。
   予算・配分・コピーは同人診断で使わないので隠す。
   ============================================================ */
.mr-diag{width:min(100%,860px);margin:8px auto 0}
.mr-diag .diagnosis-app{width:100%;margin:0;padding:0}

/* 導入ヒーロー（フォーム上） */
.mr-diag .engine-hero{padding:34px 28px;color:#fff;background:var(--ink);border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--purple)}
.mr-diag .engine-hero p,.mr-diag .result-kicker{margin:0 0 12px;font-family:var(--en);font-weight:800;letter-spacing:.16em;font-size:.72rem;color:var(--cyan)}
.mr-diag .engine-hero h1{margin:0;font-family:var(--round);font-weight:900;font-size:clamp(1.5rem,5vw,2.3rem);line-height:1.3}
.mr-diag .engine-hero div{max-width:640px;margin-top:16px;font-size:.92rem;line-height:1.9;color:#f3e9f7}

/* 質問フォーム */
.mr-diag .engine-form{margin-top:26px}
.mr-diag .question-list{display:grid;gap:16px}
.mr-diag fieldset{margin:0;padding:22px 20px;border:2px solid var(--ink);border-radius:18px;background:var(--panel);box-shadow:4px 4px 0 var(--ink)}
.mr-diag legend{display:flex;align-items:center;gap:11px;padding:0 6px;font-family:var(--round);font-weight:900;font-size:1.02rem;color:var(--ink)}
.mr-diag legend span{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;border-radius:99px;background:var(--yellow);border:2px solid var(--ink);font-family:var(--en);font-size:.82rem;font-weight:800}
.mr-diag .choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.mr-diag .choice{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:12px 15px;border:2px solid var(--ink);border-radius:12px;background:#fff;font-family:var(--round);font-weight:700;font-size:.9rem;color:var(--ink);transition:.15s}
.mr-diag .choice:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pink)}
.mr-diag .choice.selected{color:#fff;background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.mr-diag .choice input{position:absolute;opacity:0;pointer-events:none}
.mr-diag .choice i{opacity:0;font-style:normal;font-weight:900}
.mr-diag .choice.selected i{opacity:1}
.mr-diag .primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:24px;padding:19px 24px;color:#fff;border:2px solid var(--ink);border-radius:99px;background:var(--purple);font-family:var(--round);font-weight:900;font-size:1.02rem;box-shadow:5px 5px 0 var(--ink);transition:.16s}
.mr-diag .primary:hover{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
.mr-diag .primary span{font-family:var(--en)}

/* 結果ビュー */
.mr-diag .result{padding:30px 26px;border:2px solid var(--ink);border-radius:22px;background:var(--panel);box-shadow:8px 8px 0 var(--cyan)}
.mr-diag .result-kicker{color:var(--pink)}
.mr-diag .result h1{margin:0;font-family:var(--round);font-weight:900;font-size:clamp(1.6rem,5.5vw,2.4rem);line-height:1.3;color:var(--ink)}
.mr-diag .result h1::after{content:"";display:block;width:64px;height:6px;margin-top:14px;background:var(--yellow);border-radius:99px}
.mr-diag .result-lead{max-width:100%;margin:20px 0 0;color:var(--ink2);font-size:1rem;line-height:1.95}
.mr-diag .result aside{margin:24px 0 0;padding:16px 18px;border:2px solid var(--purple);border-left-width:6px;border-radius:12px;background:#f6effc;font-size:.9rem;line-height:1.85;color:var(--ink)}

/* 汎用エンジンの予算・配分・コピーは同人診断で意味を持たないので隠す */
.mr-diag .budget,.mr-diag .allocation-list,.mr-diag #copy-result{display:none!important}

/* アクション（回答を変更のみ残す） */
.mr-diag .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.mr-diag .text-button{padding:13px 20px;border:2px solid var(--ink);border-radius:99px;background:#fff;font-family:var(--round);font-weight:700;font-size:.86rem;color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:.16s}
.mr-diag .text-button:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

/* 診断結果に差し込むランキングプール */
.mr-diag-pool{margin-top:26px}
.mr-diag-rank .mr-picks{margin-top:0}
.mr-diag-more{margin:6px 0 0;text-align:center}
.mr-diag-more a{display:inline-block;font-family:var(--round);font-weight:700;font-size:.9rem;color:var(--purple);text-decoration:none;background:#f6effc;border:2px solid var(--purple);border-radius:99px;padding:11px 24px;box-shadow:3px 3px 0 var(--purple);transition:.16s}
.mr-diag-more a:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--purple)}

@media(max-width:640px){
	.mr-diag .engine-hero{padding:26px 20px;box-shadow:6px 6px 0 var(--purple)}
	.mr-diag .result{padding:24px 18px;box-shadow:6px 6px 0 var(--cyan)}
	.mr-diag fieldset{padding:18px 15px}
	.mr-diag .choices{grid-template-columns:1fr}
}

/* 診断への導線バナー（関係性記事の冒頭・カテゴリ上部）2026-07-24 */
.mr-diag-cta{margin:0 0 30px;padding:22px 24px;border:2px solid var(--ink);border-radius:18px;background:linear-gradient(135deg,#fff6fb,#f1ecff);box-shadow:5px 5px 0 var(--pink);text-align:center}
.mr-diag-cta__t{margin:0 0 14px;font-family:var(--round);font-weight:900;font-size:1.02rem;line-height:1.5;color:var(--ink)}
.mr-diag-cta__b{display:inline-block;font-family:var(--round);font-weight:900;font-size:.98rem;color:#fff;background:var(--purple);border:2px solid var(--ink);border-radius:99px;padding:14px 30px;text-decoration:none;box-shadow:4px 4px 0 var(--ink);transition:.16s}
.mr-diag-cta__b:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink);color:#fff}
.p-archive .mr-diag-cta{margin:8px 0 34px}
/* 2診断を並べたduo CTA */
.mr-diag-cta__row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.mr-diag-cta--duo .mr-diag-cta__b{margin:0}
.mr-diag-cta__b--seiheki{background:linear-gradient(135deg,#4a2f8f,#c0398f)}
.mr-diag-cta__b--seiheki:hover{color:#fff}

/* ============================================================
   診断ステップUI（ステップ式＋決選質問）2026-07-24
   app.js が生成する .mr-diag-* を .mr-diag スコープで装飾。結果ビュー(.result)は上の定義を流用。
   ============================================================ */
.mr-diag-step{background:var(--panel);border:2px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--purple);padding:28px 26px}
.mr-diag-shead{margin:0 0 22px}
.mr-diag-eyebrow{margin:0 0 12px;font-family:var(--en);font-weight:800;letter-spacing:.16em;font-size:.7rem;color:var(--purple)}
/* プログレスバー */
.mr-diag-prog{position:relative;height:12px;background:#efe6f7;border:2px solid var(--ink);border-radius:99px;overflow:hidden}
.mr-diag-prog__bar{height:100%;background:linear-gradient(90deg,var(--pink),var(--purple));border-radius:99px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.mr-diag-prog__n{position:absolute;top:-30px;right:0;font-family:var(--en);font-weight:800;font-size:.86rem;color:var(--ink)}
.mr-diag-prog__n i{color:var(--ink3);font-style:normal;margin:0 2px}
/* 前回答チップ */
.mr-diag-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 20px}
.mr-diag-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--round);font-weight:700;font-size:.72rem;color:var(--ink2);background:#f7f1fc;border:1.5px solid var(--line);border-radius:99px;padding:5px 12px;cursor:pointer;transition:.14s;max-width:100%}
.mr-diag-chip span{font-family:var(--en);font-size:.66rem;color:var(--purple)}
.mr-diag-chip:hover{border-color:var(--purple);color:var(--ink);transform:translateY(-1px)}
/* 設問 */
.mr-diag-q{text-align:center}
.mr-diag-q__n{display:inline-block;margin:0 0 14px!important;font-family:var(--en);font-weight:800;font-size:1.5rem;letter-spacing:.06em;color:#fff;background:var(--pink);border:2px solid var(--ink);border-radius:99px;padding:5px 26px;box-shadow:3px 3px 0 var(--ink)}
.mr-diag-q__t{margin:0 auto 26px!important;font-family:var(--round);font-weight:900;font-size:clamp(1.4rem,4.2vw,1.85rem);line-height:1.5;color:var(--ink);text-align:center}
/* テーマの .l-article p がQバッジのfont-sizeを食うので、より高い詳細度で上書き（ケイ指定 2026-07-24） */
.page .l-article p.mr-diag-q__n{font-size:1.6rem;color:#fff}
.mr-diag-opts{text-align:left}
/* 選択肢 */
.mr-diag-opts{display:grid;gap:11px}
.mr-diag-opt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;min-height:58px;padding:15px 18px;border:2px solid var(--ink);border-radius:14px;background:#fff;font-family:var(--round);font-weight:700;font-size:.98rem;color:var(--ink);cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.14s}
.mr-diag-opt:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);background:#fff6fb}
.mr-diag-opt.is-sel{color:#fff;background:var(--pink);box-shadow:3px 3px 0 var(--ink)}
.mr-diag-opt i{opacity:0;font-style:normal;font-weight:900;font-size:1.1rem}
.mr-diag-opt.is-sel i{opacity:1}
.mr-diag-opts--tie .mr-diag-opt{min-height:74px;line-height:1.5}
/* ナビ */
.mr-diag-nav{display:flex;justify-content:flex-start;margin-top:22px;min-height:24px}
.mr-diag-back{font-family:var(--round);font-weight:700;font-size:.86rem;color:var(--ink2);background:none;border:none;cursor:pointer;padding:6px 4px;transition:.14s}
.mr-diag-back:hover{color:var(--pink)}
/* 決選 */
.mr-diag-tie{box-shadow:8px 8px 0 var(--yellow)}
.mr-diag-tie .mr-diag-q__n{color:var(--ink);background:var(--yellow);-webkit-text-stroke:0;font-size:1.5rem;padding:5px 24px}
@media(max-width:640px){
	.mr-diag-step{padding:22px 17px;box-shadow:6px 6px 0 var(--purple)}
	.mr-diag-tie{box-shadow:6px 6px 0 var(--yellow)}
}

/* 診断の導入ギャラリー：関係性イラストを丸くり抜きで流すマーキー 2026-07-24 */
.mr-diag-gallery{position:relative;margin:0 0 24px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mr-diag-gallery__track{display:flex;gap:26px;width:max-content;padding:18px 0 36px;animation:mr-diag-marquee 52s linear infinite}
.mr-diag-gallery:hover .mr-diag-gallery__track{animation-play-state:paused}
.mr-diag-circle{flex:0 0 auto;width:132px;height:132px;border-radius:50%;border:3px solid var(--ink);overflow:hidden;background:var(--line)}
.mr-diag-circle img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
.mr-diag-circle:nth-child(3n+1){box-shadow:5px 5px 0 var(--pink)}
.mr-diag-circle:nth-child(3n+2){box-shadow:5px 5px 0 var(--purple)}
.mr-diag-circle:nth-child(3n+3){box-shadow:5px 5px 0 var(--cyan)}
.mr-diag-circle:nth-child(2n){transform:translateY(14px)}
@keyframes mr-diag-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){
	.mr-diag-gallery__track{gap:15px;padding:12px 0 24px}
	.mr-diag-circle{width:82px;height:82px;border-width:2px;box-shadow:none!important}
	.mr-diag-circle:nth-child(3n+1){box-shadow:4px 4px 0 var(--pink)!important}
	.mr-diag-circle:nth-child(3n+2){box-shadow:4px 4px 0 var(--purple)!important}
	.mr-diag-circle:nth-child(3n+3){box-shadow:4px 4px 0 var(--cyan)!important}
	.mr-diag-circle:nth-child(2n){transform:translateY(9px)}
}
@media(prefers-reduced-motion:reduce){.mr-diag-gallery__track{animation:none}}

/* ============================================================
   本音で「性癖」診断（本音→願望→結果の2タップ吹き出し）2026-07-24
   .sk-* を .mr-seiheki スコープで。吹き出し(fukidashi)＋ネオンポップ。
   ============================================================ */
.mr-seiheki{width:min(100%,880px);margin:34px auto 0}
.seiheki-app{width:100%}
/* 冒頭のイラスト（1枚・丸角・そのまま／中央） */
.sk-topimg{margin:0 auto;max-width:330px;padding:0}
.sk-topimg img{display:block;width:100%;height:auto;border-radius:20px;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--pink)}
/* ヒーロー（明るく・読みやすく。此処だけのヒミツの空気は鍵アイコンとバッジで） */
.sk-hero{position:relative;padding:28px 28px;color:var(--ink);background:linear-gradient(160deg,#fff6fb,#f1ecff);border:2px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--purple);overflow:hidden}
.sk-hero::before{content:"\f023";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:2px;top:-6px;font-size:5rem;color:rgba(123,63,242,.08)}
.sk-hero__e{margin:0 0 14px;display:inline-block;font-family:var(--round);font-weight:800;font-size:.82rem;letter-spacing:.04em;color:var(--ink);background:var(--yellow);border:2px solid var(--ink);border-radius:99px;padding:5px 18px;box-shadow:2px 2px 0 var(--ink)}
.sk-hero__t{margin:0;font-family:var(--round);font-weight:900;font-size:clamp(1.7rem,5.5vw,2.4rem);line-height:1.32;color:var(--ink)}
.sk-hero__l{margin:16px 0 0;font-size:.96rem;line-height:1.95;color:var(--ink2)}
/* ステップ見出し＝保健室の先生が語りかける一言（吹き出し形状は使わず、口調で見せる）
   🔴 テーマの .l-article p が text-align/margin を食うので詳細度を上げて上書き */
.mr-seiheki .sk-step,.page .l-article p.sk-step{text-align:center!important;font-family:var(--round);font-weight:900;font-size:clamp(1.15rem,3.4vw,1.4rem);line-height:1.6;color:var(--ink);margin:36px auto 28px!important;max-width:26em}
/* パンくず＋戻る */
.sk-crumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:30px}
.sk-back{font-family:var(--round);font-weight:800;font-size:.86rem;color:#fff;background:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:9px 18px;cursor:pointer;box-shadow:3px 3px 0 var(--pink);transition:.14s}
.sk-back:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--pink)}
.sk-crumb__now{font-family:var(--round);font-weight:900;font-size:1rem;color:var(--purple)}
/* 吹き出しコンテナ */
.sk-bubbles--genre{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.sk-bubbles--sub{display:flex;flex-wrap:wrap;gap:16px 18px;justify-content:center}
/* 吹き出し 共通 */
.sk-bubble{position:relative;cursor:pointer;background:#fff;border:2px solid var(--ink);border-radius:18px;font-family:var(--round);color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:.15s;text-align:center}
.sk-bubble::after{content:"";position:absolute;left:28px;bottom:-11px;width:18px;height:18px;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.sk-bubble:hover{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
/* 本音（大ジャンル）吹き出し */
.sk-bubble--genre{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 18px 26px}
.sk-bubble--genre .sk-bubble__en{font-family:var(--en);font-weight:800;font-size:.68rem;letter-spacing:.12em;color:var(--purple)}
.sk-bubble--genre .sk-bubble__t{font-family:var(--round);font-weight:900;font-size:1.16rem;line-height:1.35}
.sk-bubble--genre:nth-child(4n+1){box-shadow:4px 4px 0 var(--pink)}.sk-bubble--genre:nth-child(4n+1)::after{border-color:var(--ink)}
.sk-bubble--genre:nth-child(4n+2){box-shadow:4px 4px 0 var(--purple)}
.sk-bubble--genre:nth-child(4n+3){box-shadow:4px 4px 0 var(--cyan)}
.sk-bubble--genre:nth-child(4n+4){box-shadow:4px 4px 0 var(--yellow)}
/* 願望（心の叫び）吹き出し */
.sk-bubble--sub{padding:15px 22px;font-weight:800;font-size:1rem;line-height:1.5;border-radius:99px;max-width:100%}
.sk-bubble--sub::after{left:24px}
.sk-bubble--sub:nth-child(3n+1){box-shadow:4px 4px 0 var(--pink)}
.sk-bubble--sub:nth-child(3n+2){box-shadow:4px 4px 0 var(--purple)}
.sk-bubble--sub:nth-child(3n+3){box-shadow:4px 4px 0 var(--cyan)}
/* 結果 */
.sk-result{margin-top:30px;padding:30px 26px;border:2px solid var(--ink);border-radius:22px;background:var(--panel);box-shadow:8px 8px 0 var(--pink)}
.sk-result__k{margin:0 0 10px;font-family:var(--round);font-weight:800;font-size:1rem;color:var(--purple)}
.sk-result__t{margin:0;font-family:var(--round);font-weight:900;font-size:clamp(1.6rem,5vw,2.3rem);line-height:1.3;color:var(--ink)}
.sk-result__t::after{content:"";display:block;width:64px;height:6px;margin-top:14px;background:var(--yellow);border-radius:99px}
.sk-result__d{margin:20px 0 0;font-size:1rem;line-height:1.95;color:var(--ink2)}
.sk-rank{margin-top:26px}
.sk-rank__load{text-align:center;font-family:var(--round);font-weight:700;color:var(--ink3);padding:24px 0}
.sk-rank__err{text-align:center;font-family:var(--round);font-weight:700;color:var(--ink3);padding:18px;border:2px dashed var(--line);border-radius:14px}
.sk-actions{margin-top:26px}
.sk-textbtn{font-family:var(--round);font-weight:800;font-size:.9rem;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:99px;padding:13px 24px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:.14s}
.sk-textbtn:hover{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
@media(max-width:640px){
	.sk-hero{padding:24px 18px;box-shadow:6px 6px 0 var(--pink)}
	.sk-bubbles--genre{grid-template-columns:1fr;gap:16px}
	.sk-bubble--genre .sk-bubble__t{font-size:1.08rem}
	.sk-bubbles--sub{gap:14px}
	.sk-bubble--sub{font-size:.94rem;padding:14px 18px}
	.sk-result{padding:24px 18px;box-shadow:6px 6px 0 var(--pink)}
}

/* --- ランキングの集計基準（景表法・優良誤認の防止）。全ランキングブロックの直下に出る --- */
.mr-basis{margin:1.1em 0 0;padding:.95em 1.1em;background:var(--bg,#fdf7fb);
 border:1px dashed var(--line,#f0e4ee);border-radius:12px}
.mr-basis__ttl{margin:0 0 .5em;font-family:var(--round,sans-serif);font-weight:800;
 font-size:.86rem;color:var(--ink,#160d24)}
.mr-basis__ttl::before{content:"\2713\0020";color:var(--pink,#ff2e88)}
.mr-basis__list{margin:0 0 .6em;padding:0 0 0 1.1em;list-style:none}
.mr-basis__list li{position:relative;margin:.3em 0;font-size:.82rem;line-height:1.75;color:var(--ink2,#5b4f6e)}
.mr-basis__list li::before{content:"";position:absolute;left:-1.1em;top:.62em;
 width:5px;height:5px;border-radius:50%;background:var(--pink,#ff2e88)}
.mr-basis__list strong{color:var(--ink,#160d24)}
.mr-basis .mr-picks__foot{margin:0;font-size:.76rem;line-height:1.7;color:var(--ink3,#9c92ab)}
@media(max-width:600px){.mr-basis{padding:.85em .95em}.mr-basis__list li{font-size:.79rem}}


/* --- ハブのジャンル索引（dl/dt/dd） --- */
.mr-hubidx{margin:1.2em 0 2em;padding:0;display:grid;gap:.9em}
.mr-hubidx dt{margin:0;font-family:var(--round,sans-serif);font-weight:800;font-size:1rem;line-height:1.5}
.mr-hubidx dt a{color:var(--ink,#160d24);text-decoration:none;
 border-bottom:2px solid var(--pink,#ff2e88);padding-bottom:1px}
.mr-hubidx dt a:hover{color:var(--pink,#ff2e88)}
.mr-hubidx dt::before{content:"\25B8\0020";color:var(--pink,#ff2e88)}
.mr-hubidx dd{margin:.3em 0 0 1.1em;font-size:.88rem;line-height:1.85;color:var(--ink2,#5b4f6e)}
@media(min-width:900px){.mr-hubidx{grid-template-columns:1fr 1fr;gap:1.1em 2em}}
@media(max-width:600px){.mr-hubidx dd{font-size:.84rem;margin-left:.9em}}