:root{
  /* 鮮やかなシアン × コーラル。コントラストは実測して決めた（下記の数値は白/本文との比） */
  --mint:#00fff7;      /* 主色。本文 8.93:1 */
  --mint-d:#00c4bd;    /* 枠線・影 */
  --mint-l:#7ffff9;    /* 淡い面 */
  --mint-p:#e4fffe;    /* ページ背景。本文 10.74:1 */
  --pink:#ff66c4;      /* 面としての鮮やかなピンク。この上には濃文字を載せる */
  --pink-ink:#33082a;  /* ピンク面に載せる文字。ピンクに対して 6.58:1 */
  --pink-txt:#c2107f;  /* 文字・線として使う濃ピンク。クリーム 5.49:1 / 淡シアン 5.45:1 */
  --pink-l:#ffc2e6;    /* 淡いピンク。枠線の装飾用 */
  --coral:#ff66c4; --coral-d:#c2107f; --coral-m:#ff8fd4; --coral-l:#ffc2e6;
  --cream:#fdfaf6; --ink:#3d3a3a; --ink-2:#5f5957; --ink-3:#6b6461;
  --line:#cfeeed;
  /* menma由来の寸法系 */
  --frame:.3125rem;--arch:clamp(38px,5.2vw,74px);--corner:clamp(2.9rem,4.4vw,3.9rem);              /* 固定枠の太さ */
  --sp-sec:min(11vw,150px);      /* セクション間 */
  --sp-lg:min(5vw,64px);
  --sp:24px; --sp-s:14px; --sp-xs:8px;
  --r:14px; --r-lg:26px;
  /* menma由来のイージング */
  --pop:cubic-bezier(.22,1,.36,1);
  --overshoot:cubic-bezier(.25,2.5,.69,.45);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);font-size:15px;line-height:1.85;font-weight:500;
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",
    -apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--mint);
  padding:calc(var(--frame) + 6px);
}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--coral-d);outline-offset:3px;border-radius:8px}

/* ========== 固定フレーム（menma .lMain__layout のトレース）========== */
.frameLayout{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.frameLayout .lineY:before{content:"";position:fixed;top:0;left:0;width:100%;
  height:var(--frame);background:var(--coral)}
.frameLayout .lineY:after{content:"";position:fixed;bottom:0;left:0;width:100%;
  height:var(--frame);background:var(--coral)}
.frameLayout .lineX:before{content:"";position:fixed;top:0;left:0;height:100%;
  width:var(--frame);background:var(--coral)}
.frameLayout .lineX:after{content:"";position:fixed;bottom:0;right:0;height:100%;
  width:var(--frame);background:var(--coral)}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* ========== アニメーション（menma の @keyframes をトレース）========== */
/* 動きだけを定義し opacity には触らない。
   可視性は .animationActive の transition が担う（役割を分離しておくと、
   アニメーションが走らない環境でも要素が消えない） */
@keyframes popThenTiltIn{
  0%{transform:translateY(8px) scale(.94) rotate(0)}
  45%{transform:translateY(0) scale(1.06) rotate(0)}
  60%{transform:translateY(0) scale(1) rotate(0)}
  80%{transform:translateY(0) scale(1) rotate(2.5deg)}
  to{transform:translateY(0) scale(1) rotate(0)}
}
@keyframes boundScale{0%{transform:scale(1)}40%{transform:scale(1.025)}to{transform:scale(1)}}
@keyframes afterTilt{0%{transform:rotate(0)}30%{transform:rotate(5deg)}to{transform:rotate(0)}}
@keyframes wiggle{0%,5%,to{transform:rotate(0)}2.5%{transform:rotate(3deg)}}
@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spin{to{transform:rotate(1turn)}}

.aniEffect{opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity .5s var(--pop);will-change:transform,opacity}
.aniEffect.animationActive{opacity:1;transform:none;
  animation:popThenTiltIn .9s var(--pop) forwards;
  animation-delay:var(--anim-delay,0s)}
.aniUp{opacity:0;transform:translateY(22px);
  transition:opacity .55s var(--pop),transform .55s var(--pop)}
.aniUp.animationActive{opacity:1;transform:translateY(0)}
.--d1{transition-delay:.12s;--anim-delay:.06s}
.--d2{transition-delay:.24s;--anim-delay:.12s}
.--d3{transition-delay:.36s;--anim-delay:.18s}
.--d4{transition-delay:.48s;--anim-delay:.24s}

/* ========== ヒーロー ========== */
.hero{position:relative;padding:min(9vw,110px) 0 var(--sp-lg);overflow:hidden;
  background:var(--mint)}
.heroCard{position:relative;background:var(--mint);border-radius:var(--r-lg);
  padding:min(6vw,60px) min(5vw,48px)}
.heroInner{position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.22em;
  color:var(--pink-ink);background:var(--pink);padding:6px 16px;border-radius:999px}
/* ロゴ動画。2400x1000(比率2.4:1)。aspect-ratio で先に場所を確保して
   読み込み中のガタつき(CLS)を防ぐ */
h1{margin:14px 0 0;line-height:0}
h1 .logo{display:block;width:100%;max-width:1044px;aspect-ratio:2.4;
  height:auto;border-radius:10px}
/* 動画が使えない環境向けの文字ロゴ */
h1 .fallback{font-family:"Outfit",sans-serif;font-weight:800;
  font-size:clamp(3rem,10vw,6.4rem);line-height:.92;letter-spacing:-.03em;
  color:var(--ink);
  text-shadow:3px 3px 0 var(--cream), 6px 6px 0 var(--pink), 0 10px 24px rgba(0,0,0,.12)}
.copy{margin:20px 0 0;font-size:clamp(1.05rem,2.6vw,1.6rem);font-weight:700;
  line-height:1.62;color:var(--ink)}
.copy small{display:block;margin-top:4px;font-size:.82em;font-weight:500;color:var(--ink-2)}
.lead{margin:16px 0 0;font-size:.86rem;line-height:1.9;color:var(--ink-2);max-width:52ch}

/* 縦書きの札（粥粥好日の 一汁養生 / 東洋膳食 の位置） */
.vtag{position:absolute;top:min(6vw,54px);writing-mode:vertical-rl;
  font-weight:900;font-size:clamp(.8rem,1.5vw,1.05rem);letter-spacing:.34em;
  color:var(--coral-d);background:var(--cream);padding:16px 9px;border-radius:999px;
  box-shadow:0 0 0 2px var(--coral-l);z-index:2}
.vtag.l{left:min(-3vw,-26px)}.vtag.r{right:min(-3vw,-26px)}
@media (max-width:820px){.vtag{display:none}}

/* 統計 */
.statgrid{display:grid;gap:var(--sp-s);margin:min(5vw,44px) 0 0;
  /* 148px だと 390px 幅でちょうど1列に落ちて間延びする。
     2列を保てる下限にする */
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));position:relative;z-index:1}
.sc{background:var(--cream);border-radius:var(--r);padding:16px 18px;text-align:center;
  box-shadow:0 0 0 2px var(--coral-l)}
.sc b{display:block;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.05;color:var(--coral-d);
  font-variant-numeric:tabular-nums}
.sc span{display:block;margin-top:4px;font-size:.68rem;color:var(--ink-3);line-height:1.5}
.sc.accent{background:var(--pink)}
.sc.accent b{color:var(--pink-ink)}
.sc.accent span{color:rgba(51,8,42,.78)}

.sources{display:flex;gap:var(--sp-xs);flex-wrap:wrap;margin:var(--sp) 0 0;
  align-items:center;position:relative;z-index:1}
.sources .lbl{font-size:.7rem;color:var(--ink-2)}
.src{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  color:var(--ink);background:var(--cream);padding:6px 13px;border-radius:999px;
  box-shadow:0 0 0 2px var(--mint-d)}
.src i{width:7px;height:7px;border-radius:50%;display:block}
.src.offUnused{color:var(--ink-3);box-shadow:0 0 0 2px var(--line)}
.src.off i{opacity:.3}

/* ========== セクション ========== */
section{padding:var(--sp-sec) 0 0;position:relative}
.head{text-align:center;margin:0 0 min(5vw,48px);position:relative}
h2{margin:0;font-size:clamp(1.5rem,4.4vw,2.5rem);font-weight:900;line-height:1.3;
  color:var(--ink);letter-spacing:.02em}
h2 .en{display:block;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:.36em;letter-spacing:.28em;color:var(--coral-d);margin-bottom:6px}
.sub{margin:8px 0 0;color:var(--ink-3);font-size:.78rem}
.head:after{content:"";display:block;width:56px;height:5px;border-radius:999px;
  background:var(--pink);margin:16px auto 0}

/* ========== カード ========== */
.grid{display:grid;gap:var(--sp) var(--sp-s)}
/* 列数は固定にする。auto-fill だと幅によって1列に落ちたり
   6列になったりして、ランキングの10件が中途半端に折り返す。
   PCは5列（10件がちょうど2行）、スマホは2列 */
.grid-hero{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-main{grid-template-columns:repeat(5,minmax(0,1fr))}
.card>a{display:block}
.frame{position:relative;background:var(--cream);border-radius:var(--r);padding:9px;
  box-shadow:0 0 0 2px var(--coral-l);
  transition:transform .3s var(--pop),box-shadow .3s var(--pop)}
.card:hover .frame{transform:translateY(-5px) rotate(-1deg);
  box-shadow:0 0 0 3px var(--pink), 0 12px 24px rgba(255,102,196,.3)}
/* 作品画像は**縦横比を保ったまま**置く。切り抜き・円形・フィルタは
   DLsite/FANZAとも「改変」にあたり使えない（拡大縮小のみ可）。
   丸みや影は画像そのものではなく、外側の枠に付ける */
.frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;
  border-radius:0;background:var(--mint-l)}
/* ランク番号（ランキング枠で使う） */
.rank{position:absolute;left:-6px;top:12px;font-family:"Outfit",sans-serif;
  font-weight:800;font-size:.9rem;background:var(--pink);color:var(--pink-ink);
  min-width:38px;text-align:center;padding:6px 12px;border-radius:999px;
  font-variant-numeric:tabular-nums;box-shadow:0 3px 0 var(--pink-txt)}
.card:hover .rank{animation:afterTilt .5s var(--pop)}
.rank.top{background:var(--mint-d);color:#0b3b39;box-shadow:0 3px 0 #009b95}
/* 新着バッジ */
.new{position:absolute;left:-6px;top:12px;font-size:.68rem;font-weight:800;
  letter-spacing:.1em;background:var(--mint-d);color:#0b3b39;
  padding:6px 13px;border-radius:999px;box-shadow:0 3px 0 #009b95}
/* DL数 */
.dl{position:absolute;right:10px;top:12px;display:inline-flex;align-items:center;gap:4px;
  font-size:.63rem;font-weight:700;color:var(--coral-d);background:var(--cream);
  padding:4px 9px;border-radius:999px;box-shadow:0 0 0 2px var(--coral-l);
  font-variant-numeric:tabular-nums}
.dl svg{width:10px;height:10px}
.shop{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:5px;
  font-size:.62rem;font-weight:700;color:var(--ink-2);background:rgba(253,250,246,.94);
  padding:4px 9px;border-radius:999px}
.shop i{width:6px;height:6px;border-radius:50%;display:block}
.name{margin:10px 4px 6px;font-size:.78rem;font-weight:500;line-height:1.55;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.4em}
.row{margin:0 4px;display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.row .cat{font-size:.64rem;font-weight:700;color:var(--ink-3)}
.row b{font-family:"Outfit",sans-serif;font-weight:800;font-size:1.02rem;
  color:var(--coral-d);font-variant-numeric:tabular-nums}
.meta{margin:5px 4px 0;color:var(--ink-3);font-size:.65rem;display:flex;gap:6px;
  justify-content:flex-end;align-items:center}
.rev{display:inline-flex;align-items:center;gap:3px}
.rev svg{width:9px;height:9px;fill:var(--coral)}
.grid-hero .name{font-size:.9rem;line-height:1.6}
.grid-hero .row b{font-size:1.45rem}
.grid-hero .rank,.grid-hero .new{font-size:1.05rem;padding:8px 16px}

/* ========== フィルタ ========== */
.chips{display:flex;gap:var(--sp-xs);flex-wrap:wrap;justify-content:center;
  margin:0 0 min(5vw,40px)}
.chip{font:inherit;font-size:.76rem;font-weight:700;color:var(--ink-2);cursor:pointer;
  background:var(--cream);border:0;border-radius:999px;padding:10px 18px;min-height:40px;
  box-shadow:0 0 0 2px var(--mint-d);
  transition:transform .2s var(--overshoot),background .2s,color .2s,box-shadow .2s}
.chip:hover{transform:translateY(-2px);color:var(--ink);box-shadow:0 0 0 2px var(--coral)}
.chip[aria-pressed="true"]{background:var(--pink);color:var(--pink-ink);
  box-shadow:0 3px 0 var(--pink-txt)}
/* タグのチップ。件数を添えるので、既存の .chip に一段だけ足す */
.tagChips{max-width:min(980px,92vw);margin-inline:auto}
/* .chips a.chip は inline-grid なので、件数は名前の下に落ちる。
   それでよいので、間隔だけ整える */
.tagChips .chip{padding:8px 16px;line-height:1.25}
.tagChips .chip .c{margin-top:1px;font-size:.66em;font-weight:800;
  color:var(--pink-txt);font-variant-numeric:tabular-nums}
.tagChips .chip.alt .c{color:var(--pink-ink)}

.empty{color:var(--ink-3);padding:var(--sp-sec) 0;text-align:center;font-size:.88rem}

/* ========== フッター ========== */
footer{margin-top:var(--sp-sec);padding:min(6vw,56px) 0;background:var(--mint);
  border-radius:var(--r-lg) var(--r-lg) 0 0;color:var(--ink-2);font-size:.72rem;line-height:1.9}
footer p{margin:.5em 0;max-width:70ch}
footer b{color:var(--ink)}
.fnav{display:flex;gap:18px;flex-wrap:wrap;margin-top:1.6em}
.fnav a{font-size:.76rem;font-weight:700;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}


/* ========== 固定ヘッダー（menma .lHeader のトレース）========== */
.lHeader{position:fixed;top:calc(var(--frame) + 10px);left:0;right:0;z-index:45;
  display:flex;align-items:center;gap:14px;pointer-events:none;
  /* 四隅の装飾に被らないよう、角の大きさぶん内側へ逃がす */
  padding:0 calc(var(--corner) + min(1.6vw,14px));justify-content:flex-end}
.lHeader>*{pointer-events:auto}
.hLogo{width:clamp(60px,6.6vw,96px);height:clamp(60px,6.6vw,96px);border-radius:50%;
  background:var(--mint);display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--coral);
  font-family:"Outfit",sans-serif;font-weight:800;font-size:clamp(1.05rem,1.8vw,1.5rem);
  color:var(--cream);overflow:hidden;letter-spacing:-.02em;animation:floaty 5s ease-in-out infinite}
.hNav{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.hNav a{font-size:.76rem;font-weight:700;color:var(--pink-ink);background:var(--pink);
  padding:9px 18px;border-radius:999px;white-space:nowrap;
  transition:transform .2s var(--overshoot),background .2s}
.hNav a:hover{transform:translateY(-2px) rotate(-1.5deg);background:#ff3fb4}
@media (max-width:900px){.hNav{display:none}}

/* 四隅の漢字バッジ（menma は 好/吃/筍/乾）*/
.corner{position:absolute;width:var(--corner);height:var(--corner);
  z-index:2;display:grid;place-items:center;background:var(--coral)}
/* 画像は膨らみの厚い側（＝画面の角側）へ寄せる。
   中央に置くと、丸めた内角の側に寄って見えて位置がずれる。
   角に置いた正方形は一辺が枠の81%まで内接する。余裕を見て70% */
/* 縦長の文字（i / n）は contain だと枠の中央に寄り、角から離れて見える。
   object-position で角側へ吸着させ、4つの見え方を揃える。
   大きさは内接する上限（枠の81%）の手前まで取る */
.corner img{position:absolute;width:60%;height:60%;object-fit:contain;display:block}
.corner.lt img{left:12%;top:12%}
.corner.rt img{right:12%;top:12%}
.corner.lb img{left:12%;bottom:12%}
.corner.rb img{right:12%;bottom:12%}
.corner.lt{left:0;top:0;border-radius:0 0 62% 0}.corner.rt{right:0;top:0;border-radius:0 0 0 62%}
.corner.lb{left:0;bottom:0;border-radius:0 62% 0 0}.corner.rb{right:0;bottom:0;border-radius:62% 0 0 0}
.corner.spin{animation:wiggle 6s ease-in-out infinite}

/* ========== コンセプト（menma の3カラム構成をトレース）========== */
/* 下は #charm 側の余白と重なるので持たない。
   以前は concept下150 + charm上150 + bigType上150 の**450px**が積み上がっていた */
.concept{padding:var(--sp-sec) 0 0}
.conceptText p:last-child{margin-bottom:0}
/* 大タイポの手前。3段重なっていた余白を1段にした結果、
   他セクション間(150px)より詰まっていたので、そこへ合わせ直す */
#charm{padding-top:min(9vw,110px)}
.conceptGrid{display:grid;gap:min(3vw,34px);align-items:start;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr) minmax(0,.86fr)}
.colImgs{display:flex;flex-direction:column;gap:min(2.4vw,26px)}
.colImgs figure{margin:0;position:relative;overflow:hidden;background:var(--mint-l)}
/* 角丸と円を交互に。menmaの「四角・丸・丸」の並びを再現 */
/* 柱は3枚とも作品画像。切れないよう、枠を画像そのものの比率に合わせる
   （--ar は build.py が実測して差し込む）。丸には抜けない＝規約の「改変」 */
.colImgs figure{border-radius:var(--r-lg);aspect-ratio:var(--ar,4/3);
  padding:6px;background:var(--cream)}
.colImgs img{width:100%;height:100%;object-fit:contain;display:block;
  border-radius:0}
.colImgs figure:nth-child(odd){box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--mint-d)}
.colImgs figure:nth-child(2n){box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--coral-l)}

.conceptText{padding:min(3vw,40px) 0;font-size:clamp(1rem,2vw,1.45rem);line-height:2.15;
  font-weight:700;color:var(--coral-d);text-align:left}
.conceptText p{margin:0 0 1.6em}
/* マーカー効果。menmaは白のハイライトを引いている */
.mk{background:linear-gradient(transparent 62%, var(--cream) 62%);padding:0 .1em}
.mk.mint{background:linear-gradient(transparent 62%, var(--mint) 62%)}


/* コンセプトの大見出し */
.conceptText .big{display:block;font-size:clamp(1.9rem,5.4vw,3.4rem);font-weight:900;
  line-height:1.35;letter-spacing:.01em;color:var(--ink);margin:0 0 .9em}
.conceptText .big em{font-style:normal;color:var(--coral-d)}
/* 「AIアダルト作品だけを集めました。」の右上に吹き出しを出す。
   inline のままだと行末にぶら下がって不自然だった */
.conceptText{text-align:center}
.conceptText .mk,.conceptText .mk.mint{background-position:center}
/* 吹き出しは「AIアダルト作品だけを集めました。」の真上に置く。
   左右に作品画像が来るため、右上だと重なる。中央なら干渉しない */
.conceptText .last{margin-top:3.4em;font-size:1.06em;display:block;
  line-height:1.5}
/* 「AIアダルト作品だけ」がこの文の核。大きくして、ゆっくり揺らす */
.lastBig{display:inline-block;font-size:1.42em;font-weight:900;
  color:var(--pink-txt);letter-spacing:.01em;
  animation:lastSway 4.8s ease-in-out infinite;transform-origin:center bottom}
.lastSub{display:inline-block;font-size:.86em;color:var(--ink-2);
  margin-top:.25em}
@keyframes lastSway{
  0%  {transform:rotate(0)      translateY(0)}
  30% {transform:rotate(-1.6deg) translateY(-3px)}
  60% {transform:rotate(1.6deg)  translateY(-1px)}
  to  {transform:rotate(0)      translateY(0)}
}
@media (prefers-reduced-motion:reduce){ .lastBig{animation:none} }
.conceptText .last .cloud{display:block;margin:0 auto .9em;
  white-space:nowrap;width:fit-content}

/* 雲のような吹き出し。ゆっくり形を変えながら浮く */
.cloud{display:inline-block;position:relative;background:var(--cream);color:var(--coral-d);
  font-weight:900;font-size:.86em;letter-spacing:.06em;padding:9px 21px;margin:0 .15em;
  box-shadow:0 0 0 3px var(--mint-d);
  border-radius:54% 46% 58% 42% / 58% 54% 46% 42%;
  animation:cloudWobble 4.6s ease-in-out infinite}
.cloud:after{content:"";position:absolute;left:22%;bottom:-9px;width:13px;height:13px;
  background:var(--cream);border-radius:50%;
  box-shadow:0 0 0 3px var(--mint-d), -13px 5px 0 -3px var(--cream), -13px 5px 0 0 var(--mint-d)}
@keyframes cloudWobble{
  0%,100%{transform:translateY(0) rotate(-2.2deg);
    border-radius:54% 46% 58% 42% / 58% 54% 46% 42%}
  50%{transform:translateY(-7px) rotate(2.2deg);
    border-radius:44% 56% 43% 57% / 47% 44% 56% 53%}
}

/* 印章（menmaの青い丸印）*/
.stampWrap{position:relative;height:0}
.stamp{position:absolute;right:-14px;bottom:-14px;width:clamp(72px,9vw,116px);
  height:clamp(72px,9vw,116px);border-radius:50%;display:grid;place-items:center;
  border:3px solid var(--coral-d);color:var(--coral-d);background:rgba(253,250,246,.55);
  font-weight:900;font-size:clamp(1.5rem,3.4vw,2.6rem);transform:rotate(-11deg);
  writing-mode:vertical-rl;letter-spacing:.1em;z-index:3}

@media (max-width:900px){
  .conceptGrid{grid-template-columns:1fr}
  .colImgs{flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .colImgs::-webkit-scrollbar{display:none}
  .colImgs figure{flex:0 0 46%}
  .conceptText{font-size:1.02rem;line-height:2}
}

/* 自前素材（static/decor/）がまだ無いときの下敷き。
   作品画像で埋めないための場所取り */
.decorFill{display:block;width:100%;height:100%;
  background:radial-gradient(circle at 32% 28%,var(--cream) 0%,
    var(--mint) 38%,var(--pink-l) 100%)}
.decorFill.k1{background:radial-gradient(circle at 68% 30%,var(--cream) 0%,
  var(--pink-l) 34%,var(--coral-l) 100%)}
.decorFill.k2{background:radial-gradient(circle at 40% 72%,var(--cream) 0%,
  var(--mint) 30%,var(--mint-d) 100%)}
.decorFill.k3{background:conic-gradient(from 210deg,var(--mint),var(--pink-l),
  var(--cream),var(--mint))}

/* ========== 巨大タイポ（menma の UNKNOWN CHARM）========== */
.bigType{text-align:center;padding:0 0 min(5vw,50px);position:relative}

/* ========== 01/02/03（menma の縦罫で区切る3カラム）========== */
.feats{margin-top:min(7vw,90px);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:2px solid var(--coral-l);border-bottom:2px solid var(--coral-l)}
.feat{padding:min(4vw,44px) min(2.4vw,28px);border-left:2px solid var(--coral-l)}
.feat:first-child{border-left:0}
.feat .no{font-family:"Outfit",sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--coral);line-height:1}
.feat figure{margin:min(3vw,30px) 0;aspect-ratio:1;border-radius:50%;overflow:hidden;
  background:var(--mint-l);box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--mint-d)}
.feat figure img{width:100%;height:100%;object-fit:cover}
/* 1行目が主役、2行目が補足。以前は逆で、小さいピンクの行が
   見出しの上に乗っていた */
.feat .lbl{font-size:clamp(1.15rem,2.4vw,1.62rem);font-weight:900;
  line-height:1.45;color:var(--ink);letter-spacing:.01em}
.feat h3{margin:6px 0 12px;font-size:clamp(.82rem,1.4vw,.95rem);
  font-weight:800;line-height:1.7;color:var(--pink-txt)}
.feat p{margin:0;font-size:.8rem;line-height:1.95;color:var(--ink-2)}
@media (max-width:760px){
  .feats{grid-template-columns:1fr}
  .feat{border-left:0;border-top:2px solid var(--coral-l)}
  .feat:first-child{border-top:0}
  .feat figure{max-width:200px}
}

/* ========== 視差 ========== */
.parallax{will-change:transform}

/* ========== 浮遊ボタン（menma の MODE CHANGE）========== */
.floatBtn{position:fixed;right:calc(var(--frame) + 16px);
  bottom:calc(var(--corner) + 14px);
  z-index:46;display:inline-flex;align-items:center;gap:9px;
  background:var(--pink);color:var(--pink-ink);padding:11px 20px 11px 13px;
  border-radius:999px;font-size:.78rem;font-weight:700;
  box-shadow:0 5px 0 var(--pink-txt),0 10px 24px rgba(255,102,196,.38);
  transition:transform .22s var(--overshoot)}
.floatBtn:hover{transform:translateY(-3px)}
.floatBtn .ico{width:24px;height:24px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;flex:none;animation:spin 7s linear infinite}
.floatBtn .ico svg{width:13px;height:13px;stroke:var(--pink-txt);fill:none;stroke-width:2.6}
.floatBtn small{display:block;font-size:.6rem;opacity:.85;letter-spacing:.12em}
@media (max-width:560px){.floatBtn small{display:none}}


/* ========== menma から追加移植したリビール群 ==========
   出典: main.bundle.css の .jsAniMask / .cAniClip* / .cAniScaleBlur / .cAniFadeInUpBig
   発火閾値 top 83% も menma の ScrollTrigger 実測値に合わせている */

/* 斜めにぼやけながら拭き取られるように出る。画像に効く */
.aniMask{--t:.75s;
  filter:blur(5px) brightness(1.4);
  -webkit-mask-image:linear-gradient(135deg,#000 30%,rgba(0,0,0,.4) 45%,transparent 55%,transparent);
  mask-image:linear-gradient(135deg,#000 30%,rgba(0,0,0,.4) 45%,transparent 55%,transparent);
  -webkit-mask-position:130% 130%; mask-position:130% 130%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:300% 300%; mask-size:300% 300%;
  opacity:0;
  transition:-webkit-mask-position var(--t) linear, mask-position var(--t) linear,
             opacity var(--t) .3s, filter var(--t) .5s}
.aniMask.animationActive{filter:blur(0) brightness(1) !important;
  -webkit-mask-position:0 0; mask-position:0 0; opacity:1 !important}

/* clip-path リビール。__inner に0.3s遅れで同じclipをかけ「枠が開く→中身が開く」の二段に */
.aniClipRight{clip-path:inset(0 100% 0 0);width:fit-content;padding-right:10px;
  transition:clip-path .8s var(--pop)}
.aniClipRight.animationActive{clip-path:inset(0)}
.aniClipCircle{clip-path:circle(0 at center);transition:clip-path 1s ease}
.aniClipCircle.animationActive{clip-path:circle(100% at center)}
/* 注意: clip-path を持つ親は中の要素の交差判定を殺す（子が永久に不可視になる）。
   他の要素を含むコンテナには使わないこと。葉のノード限定で使う。 */
.aniClipUp{clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--pop)}
.aniClipUp.animationActive{clip-path:inset(0)}

/* 巨大サイズからピントが合いながら縮む。多用すると酔うので1〜2箇所限定 */
.aniScaleBlur{filter:blur(5px);opacity:0;scale:2.05;transform:translateY(20px);
  transition:opacity .75s ease-in-out,transform .75s ease-in-out,
             filter .75s ease-in-out,scale .75s ease-in-out;
  will-change:opacity,transform,scale}
.aniScaleBlur.animationActive{filter:blur(0) !important;opacity:1 !important;
  scale:1 !important;transform:translateY(0) !important}

/* 縦に潰れた状態から伸び上がる（スクワッシュ&ストレッチ）。巨大タイポ向け */
.aniUpBig{opacity:0;transform:translateY(100%) scaleY(2.2)}
.aniUpBig.animationActive{opacity:1;transform:translate(0) scaleY(1);
  transition:transform 1.1s cubic-bezier(.2,1,.21,1),opacity 1.1s cubic-bezier(.2,1,.21,1)}
/* 保険: 何らかの理由でアニメが走らなくても、この指定で必ず見える */
.animationActive{opacity:1}

/* 複数行に折り返しても全行に背景と余白が付くハイライト（マーカーの上位互換） */
.mk2{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:var(--pink);color:var(--pink-ink);padding:1px 5px;border-radius:4px}

/* ========== モード切替 ==========
   menma の SPICY/MILD トグルを、成人向けサイトの実用機能に転用。
   セーフモードでサムネをぼかす。全画面ワイプで切替の瞬間を隠す。 */
.modeBtn{position:fixed;left:calc(var(--frame) + 16px);
  bottom:calc(var(--corner) + 14px);
  z-index:46;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font:inherit;font-size:.78rem;font-weight:700;border:0;
  background:var(--cream);color:var(--pink-txt);padding:11px 18px 11px 12px;
  border-radius:999px;min-height:44px;
  box-shadow:0 5px 0 var(--mint-d),0 10px 24px rgba(0,196,189,.28);
  transition:transform .22s var(--overshoot)}
.modeBtn:hover{transform:translateY(-3px)}
/* 追従ロゴ。**どこからでもトップへ戻る唯一の道**。
   下層ページにはヒーローが無く、トップへ戻る手段がフッターまで無かった。
   PCはヒーローのロゴと同じ位置・同じ大きさなので、
   ヒーローのロゴがそのまま貼り付いたように見える */
.homeBtn{position:fixed;left:min(5vw,70px);top:min(5vw,70px);z-index:48;
  display:block;width:min(18vw,250px);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s,visibility .25s,transform .25s var(--overshoot)}
.homeBtn.on{opacity:1;visibility:visible;transform:translateY(0)}
.homeBtn img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 4px 16px rgba(0,20,26,.38))
         drop-shadow(0 0 3px rgba(0,20,26,.24));
  animation:logoSway 6.5s ease-in-out infinite}
.homeBtn:hover img{filter:drop-shadow(0 6px 20px rgba(0,20,26,.45))
                          drop-shadow(0 0 3px rgba(0,20,26,.3))}
@media (max-width:896px){
  /* スマホはヒーローと同じ大きさだと画面を占めすぎる。
     ハンバーガーと左右対称の位置に、小さく置く */
  .homeBtn{left:min(3.57vw,50px);top:calc(var(--corner) + 14px);
    width:min(30vw,132px)}
}
@media (prefers-reduced-motion:reduce){ .homeBtn img{animation:none} }

/* ハンバーガー。スマホだけ、右上に追従で出す。
   下層ページにはヒーローのナビが無く、スクロールすると行き先が
   フッターまで無かった。「トップへ戻る」と左右対称の位置に置く */
/* PCでは「MENU」の文字を添える。三本線だけだと、PCでは
   そこにメニューがあると気づかれにくい（スマホほど慣れた記号ではない） */
.menuBtn{display:inline-flex;align-items:center;position:fixed;
  right:min(3.57vw,50px);top:calc(var(--corner) + 14px);z-index:48;
  height:46px;width:auto;padding:0 20px 0 42px;
  border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:.78rem;letter-spacing:.12em;color:var(--pink-txt);
  background:var(--cream);
  box-shadow:0 5px 0 var(--pink-l),0 10px 24px rgba(255,102,196,.28);
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s,visibility .25s,transform .25s var(--overshoot)}
.menuBtn.on{opacity:1;visibility:visible;transform:translateY(0)}
/* **:nth-child ではなく :nth-of-type。**
   ボタンの最初の子は読み上げ用の <span> なので、:nth-child だと
   1つずつずれ、3本目には位置指定が当たらない（実際にそうなっていた）。
   位置は整数で置く。小数だと線の太さが不揃いに見える */
.menuBtn i{position:absolute;left:14px;width:20px;height:2px;border-radius:2px;
  background:var(--pink-txt);transform-origin:center;
  transition:transform .28s var(--pop),opacity .2s}
.menuBtn i:nth-of-type(1){top:16px}
.menuBtn i:nth-of-type(2){top:22px}
.menuBtn i:nth-of-type(3){top:28px}
.menuBtn.x i:nth-of-type(1){transform:translateY(6px) rotate(45deg)}
.menuBtn.x i:nth-of-type(2){opacity:0}
.menuBtn.x i:nth-of-type(3){transform:translateY(-6px) rotate(-45deg)}
.menuBtn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.menuPanel{display:none;position:fixed;inset:0;z-index:47;
  background:rgba(51,8,42,.34);
  opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
.menuPanel.on{opacity:1;visibility:visible}
.menuInner{position:absolute;right:0;top:0;height:100%;width:min(86vw,360px);
  background:var(--pink);overflow-y:auto;
  padding:calc(var(--corner) + 72px) 26px 40px;
  transform:translateX(100%);transition:transform .34s var(--pop);
  box-shadow:-10px 0 30px rgba(51,8,42,.25)}
.menuPanel.on .menuInner{transform:translateX(0)}
/* トップのヒーローと同じロゴ・同じ揺れ。
   アニメWebPは「描かれていく」ループなので、開いた瞬間に欠けて見える */
.menuLogo{display:block;width:min(52vw,190px);height:auto;margin:0 auto 22px;
  filter:drop-shadow(0 3px 10px rgba(51,8,42,.28));
  animation:logoSway 6.5s ease-in-out infinite}
.menuPanel h3{margin:22px 0 10px;font-family:"Outfit",sans-serif;
  font-size:.72rem;letter-spacing:.14em;color:var(--pink-l);font-weight:800}
.menuPanel a{display:block;color:#fff;font-weight:800;font-size:.98rem;
  padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.24)}
.menuPanel a:active{opacity:.6}
.menuPanel{display:block}
@media (max-width:896px){
  /* 開いている間は追従ロゴを隠す。メニューの中にもロゴがあり、
     画面に2つ並んで見えるため（PCは離れているのでそのまま） */
  body.menuOpen .homeBtn{opacity:0;visibility:hidden}
  /* スマホは幅が惜しいので丸のまま。文字は出さない */
  .menuBtn{display:block;width:46px;padding:0}
  .menuBtn i{left:13px}
  .menuBtn .lbl{display:none}
}

/* 最上部へ戻る。MODEボタンと左右対称の位置に置く。
   一覧は数千件あり、下まで行くと戻る手段が無かった */
.topBtn{position:fixed;left:min(3.57vw,50px);bottom:calc(var(--corner) + 14px);
  z-index:46;display:grid;place-items:center;cursor:pointer;border:0;
  width:52px;height:52px;border-radius:999px;padding:0;
  background:var(--cream);color:var(--pink-txt);
  box-shadow:0 5px 0 var(--pink-l),0 10px 24px rgba(255,102,196,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s,visibility .25s,transform .25s var(--overshoot)}
.topBtn.on{opacity:1;visibility:visible;transform:translateY(0)}
.topBtn:hover{transform:translateY(-3px)}
.topBtn svg{width:20px;height:20px;stroke:var(--pink-txt);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.topBtn .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:560px){.topBtn{width:46px;height:46px}}
.modeBtn .ico{width:22px;height:22px;border-radius:50%;background:var(--mint);
  display:grid;place-items:center;flex:none}
.modeBtn .ico svg{width:12px;height:12px;stroke:var(--pink-ink);fill:none;stroke-width:2.4}
.modeBtn small{display:block;font-size:.6rem;opacity:.7;letter-spacing:.1em}
@media (max-width:560px){.modeBtn small{display:none}
  .modeBtn{padding:10px 14px 10px 10px}}

.modeOverlay{position:fixed;inset:0;width:100%;height:100dvh;z-index:98;
  display:grid;place-items:center;opacity:0;visibility:hidden;pointer-events:none;
  background:var(--mint);transition:opacity .5s ease-out,visibility .5s}
.modeOverlay.on{opacity:1;visibility:visible}
.modeOverlay p{margin:0;font-size:clamp(1.5rem,6vw,3.4rem);font-weight:900;
  letter-spacing:.1em;color:var(--pink-ink);opacity:0;transform:translateY(20px) scale(.9);
  transition:opacity .4s var(--overshoot) .2s,transform .4s var(--overshoot) .2s}
.modeOverlay.on p{opacity:1;transform:translateY(0) scale(1)}

/* セーフモードは画像を**ぼかさず、上から覆う**。
   ぼかしは画像そのものを変えることになり、規約の「改変」に触れうる。
   覆うだけなら画像は無加工のまま。ホバーで一時的に外す */
body.safeMode .frame:after,
body.safeMode .colImgs figure:after,
body.safeMode .feat figure:after,
body.safeMode .mq figure:after{content:"";position:absolute;inset:0;
  border-radius:inherit;background:var(--mint-d);z-index:2;pointer-events:none;
  transition:opacity .3s}
body.safeMode .card:hover .frame:after{opacity:0}
body.safeMode .modeBtn{background:var(--pink);color:var(--pink-ink);
  box-shadow:0 5px 0 var(--pink-txt),0 10px 24px rgba(255,102,196,.3)}
body.safeMode .modeBtn .ico{background:var(--cream)}
body.safeMode .modeBtn .ico svg{stroke:var(--pink-txt)}

/* ========== 年齢確認 ========== */
#agegate{position:fixed;inset:0;z-index:99;display:grid;place-items:center;
  background:rgba(0,255,247,.93);backdrop-filter:blur(8px);padding:22px}
.ag-box{max-width:400px;background:var(--cream);border-radius:var(--r-lg);padding:36px 30px;
  text-align:center;box-shadow:0 0 0 4px var(--coral)}
.ag-box h2{font-size:1.2rem;margin:0 0 12px}
.ag-box p{color:var(--ink-2);font-size:.84rem;margin:0 0 24px;line-height:1.85}
.ag-btns{display:flex;flex-direction:column;gap:10px}
.ag-y{font:inherit;font-size:.94rem;font-weight:700;cursor:pointer;border:0;padding:15px;
  border-radius:999px;background:var(--pink);color:var(--pink-ink);min-height:48px;
  box-shadow:0 4px 0 var(--pink-txt);transition:transform .18s var(--overshoot)}
.ag-y:hover{transform:translateY(-2px)}
.ag-n{font-size:.78rem;color:var(--ink-3);padding:10px;min-height:44px;
  display:grid;place-items:center}

@media (max-width:560px){
  .grid-main{grid-template-columns:repeat(5,minmax(0,1fr))}
  .grid-hero{grid-template-columns:repeat(5,minmax(0,1fr))}
  .heroCard{padding:32px 20px}
  
}
@keyframes fadeInOnly{0%{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  /* 動きを消すのではなくフェードだけに落とす。要素が見えなくなる事故を防ぐ */
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  /* 帯は「止める」。0.01ms の無限ループにすると激しく明滅して危険 */
  .mqTrack{animation:none !important}
  .aniEffect,.aniUp,.aniUpBig,.aniScaleBlur,.aniMask{opacity:0;transform:none;
    filter:none;scale:1;-webkit-mask-image:none;mask-image:none}
  .aniEffect.animationActive,.aniUp.animationActive,.aniUpBig.animationActive,
  .aniScaleBlur.animationActive,.aniMask.animationActive{
    animation:fadeInOnly .3s ease-out forwards !important;opacity:1}
  .aniClipUp,.aniClipRight,.aniClipCircle{clip-path:none}
  .card:hover .frame{transform:none}
  .cloud,.hLogo,.floatBtn .ico{animation:none !important}
}

/* カテゴリページ ------------------------------------------------ */
.crumb{display:flex;gap:8px;align-items:center;font-size:.76rem;
  color:var(--ink-3);margin-bottom:14px;flex-wrap:wrap}
.crumb a{color:var(--pink-txt);font-weight:700}
.crumb span[aria-hidden]{opacity:.5}
.catTitle{font-size:clamp(2rem,6.5vw,3.6rem);font-weight:900;line-height:1.2;
  margin:.1em 0 .4em;color:var(--ink)}
.catGrid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.catLink{display:flex;justify-content:space-between;align-items:center;
  gap:10px;background:var(--cream);border-radius:16px;padding:17px 20px;
  box-shadow:0 0 0 2px var(--mint-l),0 3px 0 var(--mint-d);
  transition:transform .2s var(--pop),box-shadow .2s var(--pop)}
.catLink:hover{transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--pink),0 6px 0 var(--pink-txt)}
.catLink .n{font-weight:800;font-size:.94rem;color:var(--ink)}
.catLink .c{font-size:.74rem;color:var(--pink-txt);font-weight:700;
  white-space:nowrap}

/* NOT SAVING THE WORLD ------------------------------------------
   従来は薄いミント(#00c4bd)の文字を #00fff7 の地に載せていたため
   コントラストが 1.2:1 しかなく、沈んで安っぽく見えていた。
   ロゴと同じ「白抜き＋ピンクの縁取り＋硬い落ち影」に変え、
   セクションの主役として立たせる */
.bigType h2{font-family:"Outfit",sans-serif;font-weight:800;
  font-size:clamp(3rem,12vw,9rem);line-height:.9;letter-spacing:-.04em;
  color:var(--cream);margin:0;position:relative;
  -webkit-text-stroke:clamp(4px,.9vw,10px) var(--pink);
  paint-order:stroke fill;
  text-shadow:0 clamp(5px,.9vw,11px) 0 var(--pink-txt)}
.bigType .ja{display:block;margin-top:clamp(14px,2vw,26px);
  font-size:clamp(1.05rem,2.7vw,1.8rem);font-weight:900;color:var(--ink);
  -webkit-text-stroke:0;text-shadow:none;letter-spacing:.02em}

/* 等速で流れ続ける画像の帯（menma.jp の Splide AutoScroll と同じ挙動）------
   ・要素を2組並べて -50% まで動かす。継ぎ目が出ない
   ・easing は linear。加減速すると「スライド」に見えて安っぽくなる
   ・ホバーで止めない（menma も pauseOnHover:false） */
.mq{overflow:hidden;margin:clamp(18px,3vw,40px) 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mqTrack{display:flex;gap:clamp(16px,2vw,24px);width:max-content;
  animation:mqScroll var(--mq-dur,40s) linear infinite;
  animation-direction:var(--mq-dir,normal)}
/* 枠は画像の比率に合わせる。固定比率だと、実写のように比率がまちまちな
   ものを入れたとき白い余白が大きく出る（切って合わせるのは規約上できない） */
.mq figure{position:relative;margin:0;flex:none;height:clamp(99px,12.8vw,174px);
  width:auto;aspect-ratio:var(--ar,4/3);border-radius:18px;overflow:hidden;
  padding:5px;background:var(--cream);
  box-shadow:0 0 0 3px var(--cream),0 5px 0 var(--pink-txt)}
/* 下段は実写作品。見た目は上段とそろえ、影の色だけ変える */
.mq.alt figure{box-shadow:0 0 0 3px var(--cream),0 5px 0 var(--mint-d)}
.mq figure img{width:100%;height:100%;object-fit:contain;border-radius:0}

@keyframes mqScroll{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}}

/* 01/02/03 ------------------------------------------------------
   従来は縦積みで、丸画像が大きすぎて余白ばかりだった。
   menma と同じく「番号・画像・見出し・本文」を罫線で区切った行にする */
@media (max-width:820px){
  .feats{grid-template-columns:1fr;
    border-top:2px solid var(--pink);border-bottom:2px solid var(--pink)}
  .feat{border-left:0;border-top:2px solid var(--pink);
    display:grid;grid-template-columns:auto 1fr;
    gap:4px clamp(14px,4vw,22px);align-items:start;
    padding:clamp(20px,5vw,30px) 4px}
  .feat:first-child{border-top:0}
  .feat .no{grid-column:1;grid-row:1;margin:0}
  /* 画像を2行ぶんに広げる。1行だけだと見出しの下に画像の高さぶん
     空白が残り、右側が間延びする（実際に間延びしていた） */
  .feat figure{grid-column:1;grid-row:2 / span 2;
    width:clamp(120px,34vw,168px);aspect-ratio:1;margin:8px 0 0;
    align-self:start}
  .feat .lbl{grid-column:2;grid-row:1;margin:0}
  .feat h3{grid-column:2;grid-row:2;margin:.2em 0 .4em;align-self:start}
  .feat>p:last-child{grid-column:2;grid-row:3;margin:0}
}

/* ヒーロー ------------------------------------------------------
   説明文を全部消したので、ロゴが主役になる。
   カードの内側余白を食い破って、画面幅いっぱいまで大きくする */
.hero .wrap{max-width:1400px}
h1 .logo{max-width:none;width:calc(100% + 2 * min(5vw,48px));
  margin-inline:calc(-1 * min(5vw,48px))}
.tagline{margin:min(3vw,26px) 0 0;font-size:clamp(1.15rem,3.2vw,2rem);
  font-weight:900;color:var(--ink);letter-spacing:.01em}

/* 統計 ----------------------------------------------------------
   クリーム地のカード4枚は面積を食うわりに情報量が無く、重かった。
   罫線で区切るだけの帯にして、数字そのものを見せる */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin:min(4vw,34px) 0 0;position:relative;z-index:1;
  border-top:2px solid var(--pink);border-bottom:2px solid var(--pink)}
.sc{background:none;box-shadow:none;border-radius:0;text-align:left;
  padding:min(2.2vw,16px) min(2vw,16px);border-left:2px solid var(--pink)}
.sc:first-child{border-left:0}
.sc b{display:block;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:clamp(1.25rem,3vw,2.1rem);line-height:1.1;color:var(--pink-txt);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sc .lbl{display:block;margin-top:3px;font-size:clamp(.6rem,1.05vw,.72rem);
  color:var(--ink-2);line-height:1.45;letter-spacing:.02em}
/* 項目名を SVG に差し替えたときも同じ高さに収まるようにする */
.sc .lbl img{display:block;height:1.45em;width:auto;max-width:100%;margin-top:2px}
.sc.accent b{color:var(--ink)}
.sc.accent{background:var(--pink)}
.sc.accent b,.sc.accent .lbl{color:var(--pink-ink)}

/* スライドの出し分け --------------------------------------------
   スマホ: コンセプト部を1本のスライドにする（左右の柱は隠す）
   PC    : 左右の柱を残し、NOT SAVING THE WORLD の下にスライドを置く */
.mq.spOnly{display:none}
@media (max-width:600px){
  /* 4列だと1枠72pxで項目名が2行に折り返す。2列にして1行に収める */
  .statgrid{grid-template-columns:repeat(2,1fr)}
  .sc:nth-child(3){border-left:0}
  .sc:nth-child(n+3){border-top:2px solid var(--pink)}
}
@media (max-width:820px){
  .mq.pcOnly{display:none}
  .mq.spOnly{display:block;margin-top:min(6vw,30px)}
  /* コンセプト末尾の帯と、その次の帯が続けて並ぶ。
     間に section の余白が丸ごと入って空白になっていた */
  .concept{padding-bottom:0}
  .concept .mq.spOnly{margin-bottom:0}
  #charm{padding-top:0}
  #charm .mq.spOnly{margin-top:min(3vw,14px)}
  /* 帯どうしは近づけたままでよいが、その先は詰まりすぎていた */
  .bigType{padding-top:min(6vw,24px);padding-bottom:min(9vw,36px)}
  /* PC用の幅（最小132px）がそのまま効いて小さすぎた。
     スマホでは画面の半分ほどの大きさにする */
  .mq.spOnly figure{height:clamp(140px,40vw,220px);width:auto}
  .mq.spOnly .mqTrack{gap:14px}
  .conceptGrid .colImgs{display:none}
}

/* ヒーローの縦書き一言 ------------------------------------------
   menma.jp の .pTop__fv--message のトレース。実装を実測した結果:
     ・文字をアウトライン化した inline SVG（1文字＝1つの <path>）
     ・幅だけを vw で指定し、高さは viewBox の比率に任せる
     ・GSAP で path を opacity:0→1、0.1秒ずつずらして出す
   GSAP は使わず、同じ動きを CSS アニメーションで作る。

   PC: ロゴ動画の右にある余白（実測で幅の11%）を通り道にする。
       ロゴを縮めずに済む位置。
   スマホ: 余白が36pxしかなく文字に重なるので、流し込みで
       ロゴの下・右寄せに置く */
.fvMsg{margin:min(5vw,34px) 0 0;text-align:right;position:relative;z-index:2}
.fvMsg svg{display:inline-block;width:min(16vw,88px);height:auto}
/* 「刺」だけ Canva がラスターで書き出しているので image も動かす */
.fvMsg svg path[style*="--i"],.fvMsg svg image[style*="--i"]{opacity:0;
  animation:fvIn .4s cubic-bezier(.37,0,.63,1) forwards;
  animation-delay:calc(var(--i,0) * .1s)}
.fvMsg .tagline{margin:0}
@keyframes fvIn{to{opacity:1}}
/* 「刺」だけフォントが違うので、出たあとに時折ふるえる。
   平行移動はSVGの入れ子倍率で潰れるため、回転と拡大で表現する */
.fvMsg svg image[style*="--i"]{transform-box:fill-box;transform-origin:50% 50%;
  animation:fvIn .4s cubic-bezier(.37,0,.63,1) forwards,
            fvShiver 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .1s),calc(var(--i,0) * .1s + .6s)}
@keyframes fvShiver{
  0%,84%,100%{transform:rotate(0) scale(1)}
  86%{transform:rotate(-1.6deg) scale(1.03)}
  89%{transform:rotate(1.6deg) scale(1.03)}
  92%{transform:rotate(-1deg) scale(1.015)}
  95%{transform:rotate(.8deg) scale(1.01)}}
@media (min-width:821px){
  /* ロゴは左右に min(5vw,48px) はみ出していて、その内側に
     動画自身の余白が幅の11%ある。負の right でその帯の中へ入れる */
  .fvMsg{position:absolute;right:calc(-1 * min(2vw,26px));
    top:min(19vw,250px);margin:0;z-index:2;pointer-events:none}
  .fvMsg svg{width:min(7.4vw,104px)}
}

/* ヒーローを menma.jp の構造に合わせる ---------------------------
   実測した menma の値:
     .pTop__fv            height:103vh（スマホ 104svh）
     .pTop__fv--img img   height:100vh + object-fit:cover
     .pTop__fv--logo      left/top: min(5vw,70px)  width: min(7.14vw,100px)
     .pTop__fv--message   right:min(11.07vw,155px) top:min(7.36vw,103px)
                          width:min(7.29vw,102px)
     スマホ(896px以下)     logo    left:7.5vw top:10.75vw width:17.5vw
                          message right:11.5vw top:31.75vw width:19vw
   位置はそのまま踏襲し、ロゴの大きさだけ変える。
   menma のロゴは縦組み(200x420)だが AinAin は横長なので、
   100px 幅では読めない。丸に収める分も含めて大きく取る */
.hero{position:relative;height:103vh;height:103svh;padding:0}
.fvImg{position:absolute;inset:0;background:var(--mint);z-index:0}
.fvImg:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 42% at 12% 16%, rgba(0,20,26,.34), transparent 70%),
    radial-gradient(ellipse 26% 40% at 88% 22%, rgba(0,20,26,.30), transparent 72%)}
.fvImg picture{position:absolute;inset:0;opacity:0;
  animation:fvCross var(--fv-dur,32s) linear infinite;
  animation-delay:calc(var(--n,0) * var(--fv-dur,32s) / var(--fv-n,4))}
/* アニメーションが走らない環境（読み込み直後・省電力・古い端末）でも
   ヒーローが白くならないよう、1枚目を動かない土台として敷く。
   重ねる4枚は全部 opacity:0 から始まるため、これが無いと真っ白になる */
.fvImg .fvBase{opacity:1;animation:none;z-index:0}
.fvImg picture{z-index:1}
.fvImg img{width:100%;height:100vh;height:100svh;object-fit:cover;display:block}
/* 1枚あたりの表示のうち、前後2秒ずつを重ねて溶かす */
@keyframes fvCross{
  0%{opacity:0} 3%{opacity:1} 25%{opacity:1} 28%{opacity:0} 100%{opacity:0}}
/* 動きを抑える設定では切り替えを止め、1枚だけ出す */
@media (prefers-reduced-motion:reduce){
  .fvImg picture{animation:none;opacity:0}
  /* アニメーションが走らない環境（読み込み直後・省電力・古い端末）でも
   ヒーローが白くならないよう、1枚目を動かない土台として敷く。
   重ねる4枚は全部 opacity:0 から始まるため、これが無いと真っ白になる */
.fvImg .fvBase{opacity:1;animation:none;z-index:0}
.fvImg picture{z-index:1}
}

.fvLogo{position:absolute;left:min(5vw,70px);top:min(5vw,70px);
  width:min(19vw,260px);aspect-ratio:1;margin:0;z-index:3;
  display:grid;place-items:center;border-radius:50%;overflow:hidden;
  /* 動画の地の色に合わせる。mp4 は透過できないので、
     丸の地を同色にしないと中に四角が浮く（実測 rgb(0,255,245)） */
  background:#00fff5;
  box-shadow:0 0 0 max(4px,.5vw) var(--pink),0 10px 0 var(--pink-txt)}
/* 円に内接する上限は動画幅の116%（ロゴ部分の縦横比1.86から算出）。
   124%では左右のAとnが円に切られていた。余裕を見て113% */
.fvLogo img,.fvLogo video{width:113%;height:auto;display:block;
  max-width:none}
/* 透過ロゴを使うときは丸い囲いを外す。
   囲いが無いぶん視認性が上がるので、影で背景から浮かせる */
/* 囲いを外した透過ロゴ。背景から浮かせるために影を重ね、
   ゆっくり揺らして生きている感じを出す */
.fvLogo.bare{width:min(26vw,360px);height:auto;aspect-ratio:auto;
  background:none;box-shadow:none;border-radius:0;overflow:visible;
  display:block;transform-origin:left center}
.fvLogo.bare img{width:100%;height:auto;
  filter:drop-shadow(0 4px 16px rgba(0,20,26,.38))
         drop-shadow(0 0 3px rgba(0,20,26,.24));
  animation:logoSway 6.5s ease-in-out infinite}
@keyframes logoSway{
  0%  {transform:translateY(0)      rotate(0)}
  25% {transform:translateY(-6px)   rotate(-1.1deg)}
  50% {transform:translateY(0)      rotate(0)}
  75% {transform:translateY(-3px)   rotate(1.1deg)}
  to  {transform:translateY(0)      rotate(0)}
}
@media (prefers-reduced-motion:reduce){ .fvLogo.bare img{animation:none} }
@media (max-width:896px){
  /* スマホは画面が狭いので少し小さく、左上へ寄せる */
  .fvLogo.bare{width:min(46vw,250px)}
  .fvLogo{left:5.5vw;top:7.5vw}
}

/* 縦書きは menma と同じ座標。ロゴの余白に寄せていたのをやめる */
/* ヒーローの高さのちょうど中央に置く。top を実寸で指定すると
   画面の高さが変わるたびにずれるので、50% + 打ち消しで取る */
.fvMsg{position:absolute;right:min(19vw,266px);top:50%;
  transform:translateY(-50%);
  width:min(16.5vw,232px);margin:0;z-index:3;text-align:initial;
  pointer-events:none}
.fvMsg svg{width:100%;height:auto;display:block}

/* 統計と取扱いストアはヒーローの外へ。menma もヒーローの中は
   ロゴ・縦書き・ナビだけで、情報は下のセクションに置いている */
.heroInfo{padding:min(7vw,72px) 0 0;background:var(--mint)}

@media (max-width:896px){
  .fvLogo{left:7.5vw;top:10.75vw;width:38vw}
  /* スマホは画面が狭く、右上だとロゴと競り合う。
     中央に置いて主役にする。左右のずれは transform で厳密に取る */
  .fvMsg{left:50%;right:auto;top:50%;
    transform:translate(-50%,-50%);
    width:min(36vw,158px)}
  .heroInfo{padding-top:min(9vw,44px)}
}

/* ヒーローのスクロール視差 -------------------------------------
   menma.jp は GSAP ScrollTrigger で画像を pin し、その上を
   コンテンツが流れていく（.js-fix を .js-unfixTop まで pin:true,
   pinSpacing:false）。同じ見え方を position:fixed で作る。
   画像を画面に固定し、以降のセクションが不透明な地で覆っていく */
.fvImg{position:fixed;inset:0;height:100svh;z-index:0}
/* z-index は付けない。付けると中の固定画像が板より前に出て、
   スクロール時にコンテンツを覆い隠す */
.hero{background:none}
/* 固定した画像を覆う板 ------------------------------------------
   .below は画像の親でもあるので、.below 自体に地の色を塗ると
   画像がその上に乗ってしまい、中のコンテンツが全部隠れる（実際にそうなった）。
   代わりに擬似要素の板をヒーローの下端から敷き、重ね順を
     画像(0) < 板(1) < コンテンツ(2)
   にする。板は左右と下へ body の余白ぶんはみ出させて縁まで塗る */
.below{position:relative;z-index:1}
.below:before{content:"";position:absolute;z-index:1;pointer-events:none;
  top:calc(103svh - 1px);bottom:calc(-1 * (var(--frame) + 6px));
  left:calc(-1 * (var(--frame) + 6px));right:calc(-1 * (var(--frame) + 6px));
  background:var(--mint)}
/* ヒーローだけは重ね順を作らない。作ると中の画像が板より前に出る */
.below > *:not(.hero){position:relative;z-index:2}
.heroInfo{padding-top:0}

/* ヒーロー下の仕切りを弓なりに ----------------------------------
   menma の実測: clip-path path("M 0 0 Q w/2 d w 0 L w h 0 h Z")、
   d は要素高さの数%で、中央が下へたわむ形。
   こちらは高さ固定の帯を1枚挟み、比率指定の clipPath で同じ形にする
   （objectBoundingBox なので画面幅が変わっても崩れない） */
.fvArch{position:relative;z-index:2;height:var(--arch);
  margin-top:calc(-1 * var(--arch));
  /* body の余白ぶん外へ出して画面幅いっぱいにする。
     これをしないと左右で背景が覗く（実測: 左右11pxずつ欠けていた） */
  margin-inline:calc(-1 * (var(--frame) + 6px));
  background-color:var(--mint);
  clip-path:url(#fvArch);-webkit-clip-path:url(#fvArch)}

/* ヒーロー左下のナビ --------------------------------------------
   menma 実測: left:min(5.71vw,80px) bottom:min(6.43vw,90px)、
   縦積み・15px・weight500・白・字間0.9px、項目の間隔24px。
   指示によりボールドにする */
.fvNav{position:absolute;left:min(5.71vw,80px);bottom:min(11.4vw,160px);
  z-index:3;display:flex;flex-direction:column;gap:min(2.3vw,32px)}
.fvNav a{color:#fff;font-weight:800;font-size:min(1.07vw,15px);
  letter-spacing:min(.064vw,.9px);line-height:1.1;width:fit-content;
  text-shadow:0 2px 10px rgba(0,20,26,.55),0 0 3px rgba(0,20,26,.4)}
.fvNav a:hover{text-decoration:underline;text-underline-offset:6px}
@media (max-width:896px){
  .fvNav{left:7.5vw;bottom:min(26vw,120px);gap:20px}
  .fvNav a{font-size:14px}
}

/* MODE ボタンを右下へ。menma 実測: 168x44、右50px・下50px。
   こちらは四隅の飾りが最大60pxあるので、下だけそのぶん逃がす */
.modeBtn{left:auto;right:min(3.57vw,50px);
  bottom:calc(var(--corner) + 14px);
  width:min(12vw,168px);min-height:44px;justify-content:center;
  padding:0 14px;font-size:min(.93vw,13px)}
@media (max-width:896px){
  .modeBtn{width:auto;min-width:140px;font-size:12px}
}

/* 評価の★。SVGから文字に変えたぶんの見た目を整える */
.star{font-style:normal;font-size:1.05em;line-height:1;color:var(--pink-txt);
  margin-right:1px}
.rev{font-variant-numeric:tabular-nums}

/* フッターへ移した取扱いストア */
footer .sources{margin:0 0 min(3vw,22px);justify-content:center}

/* フッター（menma.jp の構造をトレース）--------------------------
   実測した menma の構成:
     左に大きなロゴ＋写真、右に CONTENTS / CONTACT / BUY の3列、
     下端にプライバシーポリシーと著作権表示。
   AinAin は写真の代わりに、掲載作品の帯を流す */
footer{background:var(--pink);color:var(--pink-ink);margin-top:min(12vw,120px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.fWrap{max-width:1180px;margin:0 auto;padding:min(8vw,80px) 20px min(5vw,54px);
  display:grid;gap:min(6vw,56px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);align-items:start}
/* フッターもヒーローと同じ透過ロゴ。動かさない */
.fBrand .fLogo{width:min(24vw,270px);height:auto;display:block;
  filter:drop-shadow(0 3px 10px rgba(51,8,42,.28))}
.fCopy{margin:min(2.4vw,22px) 0 0;font-size:.88rem;font-weight:800;
  color:var(--pink-ink);line-height:1.8}
.fBrand .sources{margin:min(2.6vw,24px) 0 0;justify-content:flex-start}
.fBrand .sources .lbl{color:var(--pink-ink)}

.fCols{display:grid;gap:min(4vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fHead{margin:0 0 min(2vw,18px);font-family:"Outfit",sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.22em;color:var(--pink-ink);opacity:.72}
.fCol a{display:block;color:#fff;font-weight:800;font-size:.85rem;
  padding:7px 0;margin-bottom:2px;letter-spacing:.02em;
  text-shadow:0 1px 6px rgba(51,8,42,.28)}
.fCol a:hover{text-decoration:underline;text-underline-offset:5px}
.fHead{color:#fff;opacity:.78}

.fNote{background:var(--pink-txt);color:var(--cream);
  padding:min(4vw,32px) 0 min(5vw,40px)}
.fNote p{margin:0 0 .7em;font-size:.72rem;line-height:1.9;opacity:.92}
.fNote .fEnd{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  align-items:baseline;margin-top:1.4em;opacity:1}
.fNote .fEnd small{font-family:"Outfit",sans-serif;letter-spacing:.1em}

@media (max-width:820px){
  .fWrap{grid-template-columns:1fr;gap:min(9vw,40px);
    padding:min(12vw,56px) 20px min(8vw,36px)}
  .fBrand .fLogo{width:min(46vw,220px);margin-inline:auto}
  .fCols{grid-template-columns:repeat(2,1fr)}
}

/* 固定ページ（運営者情報 / お問い合わせ / プライバシーポリシー）*/
.doc{padding:min(14vw,150px) 0 min(11vw,120px)}
.doc .wrap{max-width:760px}
.doc h1{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:900;line-height:1.4;
  margin:0 0 8px;color:var(--ink)}
.doc .en{display:block;font-family:"Outfit",sans-serif;font-weight:800;
  font-size:.34em;letter-spacing:.26em;color:var(--pink-txt);margin-bottom:8px}
.doc h2{font-size:1.1rem;font-weight:900;margin:2.4em 0 .7em;color:var(--ink);
  padding-left:12px;border-left:5px solid var(--pink);line-height:1.5}
.doc p,.doc li{font-size:.9rem;line-height:2;color:var(--ink-2)}
.doc ul{padding-left:1.3em}
.doc li{margin:.4em 0}
.doc dt{font-weight:700;color:var(--ink);margin-top:1.3em;font-size:.86rem}
.doc dd{margin:.25em 0 0;font-size:.9rem;line-height:2;color:var(--ink-2)}
.doc a{color:var(--pink-txt);text-decoration:underline;text-underline-offset:3px}
.doc .back{display:inline-block;margin-top:3em;background:var(--pink);
  color:var(--pink-ink);font-weight:700;font-size:.86rem;padding:13px 26px;
  border-radius:999px;box-shadow:0 4px 0 var(--pink-txt);text-decoration:none}
.doc .note{background:var(--cream);border-radius:14px;padding:18px 22px;
  box-shadow:0 0 0 2px var(--pink-l);margin:1.6em 0}
.doc .note p{margin:0}

.moreAll{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  margin:min(7vw,64px) 0 0}
.moreAll a{display:inline-grid;place-items:center;min-height:52px;
  padding:0 30px;border-radius:999px;font-weight:800;font-size:.92rem;
  background:var(--pink);color:var(--pink-ink);
  box-shadow:0 5px 0 var(--pink-txt);transition:transform .18s var(--pop)}
.moreAll a.alt{background:var(--cream);color:var(--pink-txt);
  box-shadow:0 5px 0 var(--mint-d)}
.moreAll a:hover{transform:translateY(-2px)}

/* ページ送り */
.pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  justify-content:center;margin:min(7vw,64px) 0 0}
.pgNums{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pg{display:grid;place-items:center;min-width:44px;min-height:44px;
  padding:0 12px;border-radius:999px;font-weight:800;font-size:.86rem;
  background:var(--cream);color:var(--pink-txt);
  box-shadow:0 0 0 2px var(--pink-l);
  transition:transform .18s var(--pop)}
.pg:hover{transform:translateY(-2px)}
.pg.on{background:var(--pink);color:var(--pink-ink);
  box-shadow:0 0 0 2px var(--pink-txt)}
.pg.gap{background:none;box-shadow:none;min-width:20px;padding:0;
  color:var(--ink-3)}
.pg.nav{padding:0 18px}
.pg.nav.off{opacity:.38;box-shadow:0 0 0 2px var(--pink-l)}
@media (max-width:560px){
  .pg{min-width:40px;min-height:40px;padding:0 9px;font-size:.8rem}
  .pg.nav{padding:0 12px}
}

/* さがす */
.sch{padding:min(9vw,90px) 20px min(12vw,120px)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.schForm{margin:0 0 min(5vw,40px)}
.schBox input{width:100%;font:inherit;font-size:clamp(1rem,2.2vw,1.15rem);
  font-weight:700;color:var(--ink);background:var(--cream);
  border:0;border-radius:999px;padding:16px 24px;
  box-shadow:0 0 0 3px var(--pink),0 5px 0 var(--pink-txt)}
.schBox input::placeholder{color:var(--ink-3);font-weight:500}
.schBox input:focus{outline:3px solid var(--mint-d);outline-offset:3px}
.schRow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end;
  margin:min(3vw,22px) 0 0}
.schRow label{display:grid;gap:5px;font-size:.7rem;font-weight:800;
  color:var(--ink-2);letter-spacing:.04em}
.schRow select{font:inherit;font-size:.84rem;font-weight:700;color:var(--ink);
  background:var(--cream);border:0;border-radius:999px;padding:10px 16px;
  min-height:44px;box-shadow:0 0 0 2px var(--pink-l)}
.schReset{font:inherit;font-size:.78rem;font-weight:800;color:var(--pink-txt);
  background:none;border:0;padding:12px 4px;cursor:pointer;
  text-decoration:underline;text-underline-offset:4px;min-height:44px}
.schCount{margin:0 0 min(3vw,20px);font-weight:900;font-size:1.1rem;
  color:var(--pink-txt)}
.schMore{text-align:center;margin:min(6vw,48px) 0 0}
.schMore button{font:inherit;font-size:.9rem;font-weight:800;
  color:var(--pink-ink);background:var(--pink);border:0;
  padding:15px 34px;border-radius:999px;cursor:pointer;min-height:44px;
  box-shadow:0 5px 0 var(--pink-txt)}
.schMore button:hover{transform:translateY(-2px)}

.hero.catHero{height:auto;min-height:0;
  padding:min(15vw,160px) 0 min(4vw,44px);background:var(--mint)}
/* 下層では追従ロゴが最初から出る。その下に本文が潜らないよう、
   スマホだけ上の余白をロゴの高さぶん増やす */
@media (max-width:896px){
  .hero.catHero{padding-top:min(30vw,124px)}
}

@media (max-width:820px){
  .grid-hero,.grid-main{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 種類チップ。ボタンからリンクに変えたぶんの見た目を揃える */
.chips a.chip{display:inline-grid;place-items:center;min-height:44px;
  text-decoration:none}
.chips a.chip.alt{background:var(--pink);color:var(--pink-ink);
  box-shadow:0 0 0 2px var(--pink-txt)}