/* 方向 a1「密」: 黒に朱。2 列で画面を埋める。動画が主役・購入ボタンだけが大きい。外部の CSS・書体・画像は読まない。 */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
@font-face{font-family:"Oswald";font-style:normal;font-weight:700;src:url(/assets/fonts/Oswald700.woff2?v=aae665c75af8) format("woff2");font-display:swap}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;src:url(/assets/fonts/Anton.woff2?v=d0fa07ff63dd) format("woff2");font-display:swap}
:root{
  --bg:#0B0B0D;--card:#151518;--card2:#1E1E22;--line:#34343A;
  --red:#FF3700;--red-hi:#FF6A3D;--ink:#0B0B0D;
  --text:#FFFFFF;--muted:#B8B8C0;
  --jp:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",sans-serif;
  --num:"Oswald","Anton","Impact",sans-serif;
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 14px/1.6 var(--jp);-webkit-tap-highlight-color:transparent}
a{color:var(--red-hi)}

/* ===== 頭: 1 行目＝サイト名＋切り替え（48px）・2 行目＝期間（36px） ===== */
/* 1 行目（56px）＝左にサイト名（14px）とその下の h1（11px）・右に「スワイプで見る」／2 行目＝期間（44px）と並べ方 */
body>header,.swipe-end>header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:34px 22px auto;align-items:center;padding:0 8px 0 12px;text-align:left}
header>p:first-child{grid-row:1;grid-column:1;display:flex;align-items:flex-end;height:34px;margin:0;padding-bottom:2px}
/* サイト名: 見た目は変えず、押せる範囲だけ上下へ 15px ずつ広げる（高さ 44px・padding と負の margin が相殺するので文字の位置は同じ） */
header>p:first-child a{display:flex;align-items:center;gap:8px;padding:15px 0;margin:-15px 0;color:var(--text);text-decoration:none;font:700 14px/1 var(--jp);letter-spacing:.02em;white-space:nowrap}
header>p:first-child a::before{content:"";width:11px;height:12px;background:var(--red);clip-path:polygon(0 0,100% 50%,0 100%)}
/* スワイプへ移る大きなボタン: 朱の面・黒い文字・高さ 44px */
.a4-go{grid-row:1/3;grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:4px;background:var(--red);color:var(--ink);text-decoration:none;font:700 15px/1 var(--jp);letter-spacing:.03em;white-space:nowrap;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
.a4-go:hover{background:var(--red-hi)}
.a4-go:active{transform:scale(.96);background:var(--red-hi)}
nav.windows{position:relative;grid-row:3;grid-column:1;display:flex;gap:0;height:44px;margin:0;padding:0}
.window-link{display:flex;align-items:center;padding:0 13px;color:var(--muted);text-decoration:none;font:700 15px/1 var(--jp);letter-spacing:.02em;white-space:nowrap}
.window-link[aria-current="page"]{color:var(--text)}
html:not(.a1-ul-on) .window-link[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--red)}
.a1-ul{position:absolute;left:0;bottom:0;width:1px;height:3px;background:var(--red);transform-origin:0 50%;pointer-events:none}
header>h1{grid-row:2;grid-column:1;align-self:start;min-width:0;margin:0 0 0 19px;overflow:hidden;text-overflow:ellipsis;font:400 11px/1.2 var(--jp);color:var(--muted);text-align:left;white-space:nowrap}

/* ===== 札の一覧（スマホは 2 列・隙間 3px） ===== */
/* 端から端まで: 左右の余白 0・札の間 2px・角 0。並べ方は html の data-cols（既定 2＝2 列／1＝1 列）で切り替える */
main#cards{padding:0}
.cards-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;margin:0;padding:0;min-width:0;background:var(--card);border-radius:0;overflow:hidden}
.card>video{grid-area:1/1;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:linear-gradient(135deg,#1c1c21,#0e0e11);cursor:pointer}
.card.a4-wide>video{aspect-ratio:var(--ar,1.7778)}
html[data-cols="2"] .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-cols="2"] .card>video,html[data-cols="2"] .card.a4-wide>video{aspect-ratio:4/3}
html[data-cols="2"] .card.a1-r1{grid-column:1/-1}
html[data-cols="2"] .card.a1-r1>video{aspect-ratio:16/9}
html[data-cols="2"] .card.a1-r1.a1-tall>video{aspect-ratio:5/4}


/* 検索: 虫めがねのボタン（スワイプで見るの左）・頭の下に開く欄・当たらない札は class で消す（hidden は使わない） */
.a4-search-btn{grid-row:1/3;grid-column:2;justify-self:end;display:grid;place-items:center;width:44px;height:44px;margin:0 4px 0 0;padding:0;border:0;border-radius:4px;background:var(--card2);color:var(--text);cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
.a4-search-btn:active{transform:scale(.94);background:var(--line)}
.a4-search-btn[aria-expanded="true"]{box-shadow:inset 0 -3px 0 var(--red)}
.a4-search{grid-row:4;grid-column:1/-1;display:none;grid-template-columns:minmax(0,1fr) 44px;grid-template-rows:44px auto;gap:0 4px;margin:0 0 2px;padding:0}
html.a4-search-on .a4-search{display:grid}
.a4-search input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--text);font:400 16px/1 var(--jp);-webkit-appearance:none;appearance:none}
.a4-search input::-webkit-search-cancel-button,.a4-search input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.a4-search input:focus{outline:2px solid var(--red);outline-offset:1px}
.a4-search input::placeholder{color:var(--muted);opacity:1}
.a4-search-x{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:4px;background:var(--card2);color:var(--text);cursor:pointer}
.a4-count{grid-column:1/-1;margin:0;padding:6px 2px;font:700 12px/1.5 var(--jp);color:var(--muted)}
.card.a4-nomatch{display:none}
/* 並べ方の切り替え（頭の 2 行目の右端）: 大きい四角 1 つ＝大きく並べる・小さい四角 4 つ＝たくさん並べる。今のほうは明るさと朱の下線 */
.a4-cols{grid-row:3;grid-column:2/4;justify-self:end;display:flex;gap:0;height:44px}
.a4-cols button{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;background:transparent;color:#8E8E96;cursor:pointer;transition:color .14s}
.a4-cols button[aria-pressed="true"]{color:var(--text);box-shadow:inset 0 -3px 0 var(--red)}
.a4-cols button:active{color:var(--red-hi)}
.card::after{content:"";grid-area:1/1;align-self:end;height:64px;z-index:2;pointer-events:none;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6) 45%,rgba(0,0,0,.82))}
/* 順位の小さな札（左上）。1〜3 位は朱・切り欠きの形・大きさ */
.card::before{content:"No." attr(data-rank);grid-area:1/1;justify-self:start;align-self:start;z-index:3;margin:5px 0 0 5px;padding:0 7px;height:20px;display:flex;align-items:center;border-radius:3px;
  background:rgba(0,0,0,.62);color:var(--text);font:700 12px/1 var(--num);letter-spacing:.04em;pointer-events:none}
.card.a1-r1::before,.card.a1-r2::before,.card.a1-r3::before{height:25px;padding:0 10px 0 8px;border-radius:0;background:var(--red);color:var(--ink);font-size:14px;
  clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 7px) 100%,0 100%)}
.card.a1-r1::before{height:30px;padding:0 13px 0 10px;font-size:18px;margin:6px 0 0 6px}
.mf-name{grid-area:1/1;align-self:end;justify-self:start;z-index:3;max-width:calc(100% - 14px);margin:0 0 17px 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 12px/1.3 var(--jp);color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:none}
.card.a1-r1 .mf-name,.card.a1-r2 .mf-name,.card.a1-r3 .mf-name{font-size:13px}
/* 押せる範囲だけ上へ縦 44px 近くへ広げる（文字の位置・見た目は同じ・下は購入ボタンに食い込まない） */
a.x-link{grid-area:1/1;align-self:end;justify-self:start;z-index:3;max-width:calc(100% - 14px);margin:0 0 2px 7px;padding:27px 0 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:400 11px/1.4 var(--jp);color:#E4E4EA;text-decoration:none;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.takedown-open{display:none}

/* 購入ボタン: 動画のすぐ下・札の幅いっぱい・朱の面に黒の文字（黒/朱=5.4） */
a.cta{grid-row:2;grid-column:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;margin:0;padding:0 8px;border-radius:0;
  background:var(--red);color:var(--ink);font:700 15px/1 var(--jp);letter-spacing:.04em;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s ease-out;-webkit-user-select:none;user-select:none}
a.cta{min-height:48px}
html[data-cols="2"] a.cta{min-height:44px}
.card.a1-r1 a.cta{font-size:16px}
a.cta:not([aria-disabled="true"])::after{content:"";width:7px;height:7px;border-top:2.5px solid currentColor;border-right:2.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease-out}
a.cta:not([aria-disabled="true"]):hover{background:var(--red-hi)}
a.cta:not([aria-disabled="true"]):hover::after{transform:translateX(3px) rotate(45deg)}
a.cta:not([aria-disabled="true"]):active{transform:scale(.96);background:var(--red-hi)}
a.cta[aria-disabled="true"]{background:var(--card2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);font-weight:500;font-size:13px;cursor:default}

/* ===== 一覧のあと: 件数・次の頁・説明 ===== */
body>nav.pager{display:flex;margin-top:3px;padding:0 3px}
body>nav.pager a{display:flex;align-items:center;justify-content:center;flex:1;min-height:44px;border-radius:4px;background:var(--card2);color:var(--text);text-decoration:none;font:700 14px/1 var(--jp)}
body>.listing-summary{margin-top:14px;padding:0 12px;font-size:11px;line-height:1.6;color:var(--muted)}
body>.intro{margin-top:6px;padding:0 12px;font-size:11.5px;line-height:1.75;color:var(--muted)}
/* PC: 頁下の説明の 1 行が窓の全幅に伸びない（64 字前後） */
body>.intro,body>.listing-summary{max-width:calc(64em + 24px)}
#load-error{padding:12px;color:var(--text)}

/* ===== フッタ ===== */
body>footer,.swipe-end>footer{margin-top:12px;padding:16px 12px 28px;border-top:1px solid #222227;color:var(--muted);font-size:11px;line-height:1.7}
.site-footer{display:flex;flex-wrap:wrap;gap:0 14px;margin:0 0 6px}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.site-footer a.takedown-entry{min-height:44px;padding:0 12px;border-radius:4px;background:var(--card2);color:var(--text);text-decoration:none;font-weight:700}
footer p{margin:4px 0 0;color:var(--muted)}

/* ===== 年齢の確認 ===== */
#age-gate,#a1-curtain{position:fixed;inset:0;z-index:50;display:grid;grid-template-columns:repeat(2,minmax(0,150px));grid-auto-rows:min-content;align-content:center;justify-content:center;gap:12px;padding:0 24px;
  background:radial-gradient(130% 55% at 50% 112%,rgba(255,55,0,.26),rgba(255,55,0,0) 62%),var(--bg);text-align:center}
#age-gate::before,#a1-curtain::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--red)}
.a1-18{grid-column:1/-1;display:block;font:400 118px/.95 "Anton","Oswald",sans-serif;letter-spacing:.02em;color:var(--red)}
.a1-18 small{font-size:.42em;vertical-align:.7em;margin-left:.05em}
#age-gate p,#a1-curtain p{grid-column:1/-1;margin:0 0 14px;font:700 18px/1.4 var(--jp);letter-spacing:.04em;color:var(--text)}
#age-gate button,#a1-curtain button{min-height:52px;border:0;border-radius:4px;background:var(--card2);color:var(--muted);font:700 16px/1 var(--jp);letter-spacing:.06em;cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
#age-gate #age-yes,#a1-curtain button:first-of-type{background:var(--red);color:var(--ink)}
#age-gate button:active{transform:scale(.96)}
#age-gate #age-yes:active{background:var(--red-hi)}
#a1-curtain{z-index:60}
#a1-curtain::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:var(--red)}

/* ===== 削除依頼の窓（札からは開かない・残してあるだけ） ===== */
dialog{width:min(92vw,440px);padding:20px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--text)}
dialog::backdrop{background:rgba(0,0,0,.8)}
dialog h2{margin:0 0 8px;font-size:16px}
dialog label{display:block;margin:12px 0 4px;font-size:12px;color:var(--muted)}
dialog input:not([type="hidden"]){width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--text);font:inherit}
dialog button{min-height:44px;margin-top:12px;padding:0 1.2rem;border:0;border-radius:4px;background:var(--card2);color:var(--text);font:700 14px/1 var(--jp);cursor:pointer}

/* ===== 案内の頁・削除依頼の頁 ===== */
main.info{max-width:720px;margin-inline:auto;padding:8px 14px 12px}
main.info h2{margin:26px 0 8px;padding-left:9px;border-left:4px solid var(--red);font:700 15px/1.3 var(--jp);color:var(--text)}
main.info p,main.info li{font-size:14px;line-height:1.9;color:#E8E8EE}
main.info ul{padding-left:1.2rem}
main.info a{color:var(--red-hi)}
/* 削除依頼の頁（生成の道具が出す本物のフォーム）: 本文の全体を 1 枚の面にする */
html[data-view="takedown"] main.info{width:min(692px,calc(100% - 28px));max-width:none;margin:8px auto 6px;padding:14px 12px 16px;border-radius:4px;background:var(--card)}
html[data-view="takedown"] main.info h2{margin-top:0}
#takedown-form label{display:block;margin:14px 0 5px;font-size:12px;color:var(--muted)}
#takedown-form input:not([type="hidden"]){display:block;width:100%;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--text);font:400 16px/1 var(--jp)}
#takedown-form input::placeholder{color:var(--muted);opacity:1}
#takedown-form input:focus{outline:2px solid var(--red);outline-offset:1px}
#takedown-form #takedown-url-msg{margin:6px 0 0;font:700 14px/1.5 var(--jp);color:var(--text)}
#takedown-form #takedown-url-msg:empty{display:none}
#takedown-form #takedown-url-msg::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;background:var(--red);transform:rotate(45deg)}
#takedown-form input[aria-invalid="true"]{border-color:var(--red-hi);box-shadow:inset 0 0 0 1px var(--red-hi)}
#takedown-form button[type="submit"]{display:block;width:100%;min-height:46px;margin-top:16px;border:0;border-radius:4px;background:var(--red);color:var(--ink);font:700 16px/1 var(--jp);cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
#takedown-form button[type="submit"]:active{transform:scale(.96);background:var(--red-hi)}
#takedown-form #takedown-msg{margin:10px 0 0;font-size:12px;color:var(--muted)}

/* ===== 入場の準備（動きがあるときだけ） ===== */
html.a1-motion:not(.a1-go) body>header>*{opacity:0}
html.a1-motion:not(.a1-go) main.info>*{opacity:0}
html.a1-motion .card:not(.a1-in){opacity:0}
html.a1-motion:not(.a1-gate-on) #age-gate>*{opacity:0}
.card.a1-r1.a1-pop::before,.card.a1-r2.a1-pop::before,.card.a1-r3.a1-pop::before{animation:a1-badge .3s cubic-bezier(.2,1.5,.4,1) .12s both}
@keyframes a1-badge{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}

/* ===== PC: 列を増やして同じ密度に ===== */
@media (min-width:900px){
  /* PC: どの札も同じ大きさの箱（縦 4：横 3・覆う）・順位は左上から右へ必ず順に並ぶ。大きく並べる＝4 列・たくさん並べる＝6 列 */
  .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:row;align-items:start}
  html[data-cols="2"] .cards-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .card,.card.a4-wide,html[data-cols="2"] .card.a1-r1{grid-column:auto}
  .card>video,.card.a4-wide>video,html[data-cols="2"] .card>video,html[data-cols="2"] .card.a4-wide>video,
  html[data-cols="2"] .card.a1-r1>video,html[data-cols="2"] .card.a1-r1.a1-tall>video{aspect-ratio:4/3}
  body>header{padding:0 12px}
  .window-link{padding:0 14px}
  body>nav.pager{padding:0 4px}
}

/* ===== スワイプの頁 ===== */
html[data-view="swipe"],html[data-view="swipe"] body{height:100%;overflow:hidden;margin:0;padding:0;max-width:none}
html[data-view="swipe"] main#cards{position:fixed;inset:0;z-index:1;max-width:none;margin:0;padding:0;
  overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
html[data-view="swipe"] main#cards::-webkit-scrollbar{display:none}
html[data-view="swipe"] .cards-grid{display:block;padding:0;gap:0}
html[data-view="swipe"] .card{position:relative;isolation:isolate;display:block;height:100vh;height:100dvh;width:100%;margin:0;padding:0;border-radius:0;background:#050506;
  scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden}
html[data-view="swipe"] .card::before{content:none}
html[data-view="swipe"] .card::after{position:absolute;left:0;right:0;bottom:0;top:auto;height:230px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.55) 40%,rgba(0,0,0,.86))}
html[data-view="swipe"] .card video{position:absolute;inset:0;z-index:0;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;background:transparent;cursor:default}
html[data-view="swipe"] .card.sw-cover video{object-fit:cover}
html[data-view="swipe"] .card .mf-name{position:absolute;left:10px;bottom:calc(76px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 76px);margin:0;font-size:13px;z-index:3}
html[data-view="swipe"] .card .x-link{position:absolute;left:10px;bottom:calc(56px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 76px);margin:0;font-size:11px;z-index:3}
html[data-view="swipe"] .card a.cta{position:absolute;left:0;right:0;bottom:0;z-index:3;min-height:calc(52px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-radius:0;font-size:16px}
html[data-view="swipe"] .card.sw-top a.cta{min-height:calc(52px + env(safe-area-inset-bottom,0px))}

/* 順位の小さな札と n / 100（動画の左上） */
.sw-rank{position:absolute;z-index:3;left:8px;top:calc(52px + env(safe-area-inset-top,0px));display:flex;align-items:center;gap:7px;pointer-events:none}
.sw-no{display:flex;align-items:center;height:22px;padding:0 8px;border-radius:3px;background:rgba(0,0,0,.62);color:var(--text);font:700 12px/1 var(--num);letter-spacing:.04em}
.sw-num{margin-left:2px;font:inherit}
.sw-of{font:700 11px/1 var(--num);letter-spacing:.06em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.9)}
.card.sw-top .sw-no{height:26px;padding:0 11px 0 9px;border-radius:0;background:var(--red);color:var(--ink);font-size:14px;clip-path:polygon(0 0,100% 0,100% 62%,calc(100% - 7px) 100%,0 100%)}
html[data-view="swipe"] .card:not(.sw-cover) .sw-rank{top:calc(var(--vm,52px) + 6px)}

/* 文字の出入り: 入場は --e（gsap）・去る札は --sw-o（クラス）で薄くする */
html[data-view="swipe"] .card .sw-rank,html[data-view="swipe"] .card .mf-name,html[data-view="swipe"] .card .x-link,html[data-view="swipe"] .card a.cta{opacity:calc(var(--e,1) * var(--sw-o,1))}
.card.sw-off{--sw-o:0}
.card.sw-off .sw-rank,.card.sw-off .mf-name,.card.sw-off .x-link,.card.sw-off a.cta{transition:opacity .2s ease}
html[data-view="swipe"] .card a.cta{transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s ease-out}

/* 上の細い帯・音・進み具合・合図 */
/* 帯は札の上に重ねる（札は縮めない）。左端に大きな戻るボタン（44px）・右端にサイト名（12px） */
.sw-bar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:flex-start;justify-content:flex-start;height:calc(52px + env(safe-area-inset-top,0px));padding:calc(4px + env(safe-area-inset-top,0px)) 12px 0 8px}
/* 帯の下敷き（明るい動画の上でも白い文字が読める）: 上から下へ消える黒・高さ 64px・上端 0.6 前後。触りを受けない・帯の高さは変えない */
.sw-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(64px + env(safe-area-inset-top,0px));z-index:-1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.66),rgba(0,0,0,.62) 70%,rgba(0,0,0,0))}
.a4-back{display:flex;align-items:center;gap:2px;height:44px;padding:0 16px 0 8px;border-radius:4px;background:rgba(0,0,0,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);color:var(--text);text-decoration:none;font:700 15px/1 var(--jp);letter-spacing:.03em;white-space:nowrap;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
.a4-back:hover{background:rgba(0,0,0,.8)}
.a4-back:active{transform:scale(.96)}
.a4-tabs{display:flex;align-items:flex-start;gap:0;margin-left:6px}
.a4-tabs a{display:flex;align-items:center;height:44px;padding:0 9px;color:#E4E4EA;text-decoration:none;font:500 15px/1 var(--jp);letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7)}
.a4-tabs a[aria-current="page"]{color:#fff;font-weight:800;box-shadow:inset 0 -3px 0 var(--red)}
/* 幅 340px 未満: 戻るボタンは矢印の印だけ（aria-label は残る）・タブが帯からはみ出さない */
@media (max-width:339px){
  .a4-back{justify-content:center;min-width:44px;padding:0 8px}
  .a4-back span{display:none}
  .a4-tabs{margin-left:4px}
  .a4-tabs a{padding:0 7px}
}
.sw-side,.sw-updown{display:none}
.sw-sound{position:fixed;right:10px;bottom:calc(112px + env(safe-area-inset-bottom,0px));z-index:10;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:50%;
  background:rgba(0,0,0,.55);color:var(--text);cursor:pointer;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
.sw-sound:active{transform:scale(.92)}
.sw-sound[data-on="1"]{background:var(--red);border-color:var(--red);color:var(--ink)}
.sw-sound[data-on="0"] .on-only{display:none}
.sw-sound[data-on="1"] .off-only{display:none}
.sw-pause{position:fixed;left:50%;top:50%;z-index:9;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);color:var(--text);opacity:0;pointer-events:none;transition:opacity .15s}
.sw-pause.on{opacity:1}
.sw-prog{position:fixed;left:0;right:0;bottom:0;z-index:11;height:3px;background:rgba(255,255,255,.18);pointer-events:none}
.sw-prog i{display:block;width:100%;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.sw-hint{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:8;margin-left:-12px;color:#fff;opacity:0;pointer-events:none;transition:opacity .2s}
.sw-hint.on{opacity:1}
/* 画面の高さが 760px 未満: 合図（^）が「横にして大きく見る」に接しないよう、名前の上の空きへ下げる */
@media (max-height:760px){.sw-hint{bottom:calc(124px + env(safe-area-inset-bottom,0px))}}
.sw-hint svg{display:block;animation:sw-hint-up 1.2s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes sw-hint-up{0%{transform:translateY(8px);opacity:0}35%{opacity:1}100%{transform:translateY(-10px);opacity:0}}

/* 案内の 1 枚（最後の札の後ろ） */
html[data-view="swipe"] .swipe-end{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;padding:72px 12px 32px;overflow:auto;background:var(--bg)}
html[data-view="swipe"] .swipe-end>*{flex:none;width:100%;max-width:640px;margin-inline:auto}
html[data-view="swipe"] .swipe-end>header{padding:0 0 0 0}
/* 説明の文は頭（header）の中に在る＝格子の 4 行目に置いて、サイト名・期間のタブに重ならないよう縦に積む */
html[data-view="swipe"] .swipe-end>header>.intro{grid-row:4;grid-column:1/-1;margin:12px 0 0;padding:0;font-size:12px;line-height:1.75;color:var(--muted);text-align:left}
/* 札 0 枚の期間: 案内の 1 枚の頭に理由と「今週を見る」 */
.a4-empty-msg{margin:0 0 24px}
.a4-empty-t{margin:0 0 14px;font:700 17px/1.5 var(--jp);color:var(--text)}
.a4-empty-go{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:4px;background:var(--red);color:var(--ink);font:700 16px/1 var(--jp);letter-spacing:.04em;text-decoration:none;transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
.a4-empty-go:hover{background:var(--red-hi)}
.a4-empty-go:active{transform:scale(.96);background:var(--red-hi)}
/* 案内の 1 枚に居る間・札が 0 枚・取得に失敗: 音・進み具合・合図・右の順位は出さない */
html:is(.a4-end,.a4-empty,.a4-load-fail) :is(.sw-sound,.sw-prog,.sw-hint,.sw-pause,.sw-side-r){display:none}
html:is(.a4-empty,.a4-load-fail) .sw-updown{display:none}
/* 除外の一覧の取得に失敗（main が隠れたまま）: 帯・脇を消し、お知らせの文と案内の 1 枚（運営表示・削除依頼の入口）を頁の上から見せる */
html.a4-load-fail[data-view="swipe"],html.a4-load-fail[data-view="swipe"] body{height:auto;min-height:100%;overflow:auto}
html.a4-load-fail :is(.sw-bar,.sw-side,.sw-updown){display:none}
html.a4-load-fail #load-error{margin:0;padding:28px 16px 8px;font:700 16px/1.6 var(--jp);text-align:center}
html.a4-load-fail[data-view="swipe"] .swipe-end{min-height:0;justify-content:flex-start;padding-top:12px;scroll-snap-align:none}
html[data-view="swipe"] .swipe-end>.listing-summary,html[data-view="swipe"] .swipe-end>.intro{padding:0;font-size:11.5px;color:var(--muted)}
html[data-view="swipe"] .swipe-end>nav.pager{padding:0;margin-top:10px}
html[data-view="swipe"] .swipe-end>nav.pager a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:4px;background:var(--card2);color:var(--text);text-decoration:none;font-weight:700}
html[data-view="swipe"] .swipe-end>footer{margin-top:18px}

/* ===== 動画の見せ方（1 つに決まった）: 縦長（比 0.62 以下）は覆う・横長はぼかし埋め＋「大きく見る」ボタン ===== */
.sw-amb,.sw-rotbtn,.a4-nav{display:none}
.sw-amb{display:block;position:absolute;left:-8%;top:-4%;width:116%;height:108%;z-index:-1;pointer-events:none;filter:blur(14px) brightness(1.18) saturate(1.45)}
/* 「大きく見る」: 朱の面・黒い文字・高さ 44px・動画のすぐ下の中央。PC では「大きく見る」（回さず窓いっぱいに広げる） */
.card:not(.sw-vert):not(.sw-cover) .sw-rotbtn{display:inline-flex;position:absolute;z-index:4;left:50%;transform:translateX(-50%);
  top:min(calc(100% - var(--vm,0px) + 12px),calc(100% - 200px));align-items:center;gap:9px;height:52px;padding:0 22px 0 16px;border:0;border-radius:4px;background:var(--red);
  color:var(--ink);font:700 16px/1 var(--jp);letter-spacing:.04em;white-space:nowrap;cursor:pointer;opacity:var(--sw-o,1);transition:background .14s,opacity .2s}
.sw-rotbtn svg{color:var(--ink)}
.sw-rotbtn:hover{background:var(--red-hi)}
.sw-rotbtn:active{background:var(--red-hi);transform:translateX(-50%) scale(.96)}
.sw-rotbtn .rb-pc{display:none}
.sw-rotbtn.a4-bump{animation:a4-bump .5s cubic-bezier(.2,1.4,.4,1) 1}
@keyframes a4-bump{0%{transform:translateX(-50%) scale(1)}40%{transform:translateX(-50%) scale(1.1)}100%{transform:translateX(-50%) scale(1)}}
.sw-rotclose{display:none}
@media (orientation:landscape) and (max-height:500px){.card .sw-rotbtn{display:none!important}}

/* ===== 大きく見ている間（共通） =====
   札＝画面。札の中の元の要素（動画・順位・名前・購入ボタン a.cta）を、複製せずにそのまま動かす。
   位置は left/top と個別の rotate だけで決める（transform は押したとき・gsap・指に付く動きのために空けておく）。 */
html.sw-rotating main#cards{overflow-y:hidden;touch-action:none}
html.sw-rotating :is(.sw-bar,.sw-sound,.sw-hint,.sw-side,.sw-prog){display:none}
html.sw-rotating .card.sw-rot,html.sw-rotating .card.sw-big{--sw-o:1;background:#000}
html[data-view="swipe"] .card.sw-rot::after{display:none}
html[data-view="swipe"] .card.sw-rot>:not(video),html[data-view="swipe"] .card.sw-big>:not(video){visibility:hidden}
html.sw-rotating .card:is(.sw-rot,.sw-big)>:is(.sw-rank,.mf-name,a.cta){visibility:visible}
html[data-view="swipe"] .card.sw-big::after{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;height:230px;z-index:7;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.6) 50%,rgba(0,0,0,.88))}

/* スマホ: 舞台（横 100dvh × 縦 100dvw）を時計回りに 90 度回す。舞台の点 (x, y) は 画面の (100dvw - y, x)。
   見る人から見て、動画が左・右に購入の欄（幅 --pw・最低 132px）。見る人の「上」＝画面の右端。 */
html.sw-rotating{--Sw:100dvh;--Sh:100dvw;--vw:min(calc(var(--Sh) * var(--wh,1.7778)),calc(var(--Sw) - 132px));--pw:calc(var(--Sw) - var(--vw))}
html.sw-rotating.a4-vert{--vw:calc(var(--Sw) - 151px)}
html.sw-rotating.a4-vert .card.sw-rot video{background:transparent}
html.a4-big-phone .card.sw-rot.sw-vert>.sw-amb{visibility:visible;position:fixed;left:var(--Sh);top:0;right:auto;width:var(--vw);height:var(--Sh);transform-origin:0 0;rotate:90deg;z-index:5}
html.sw-rotating.a4-big-phone .sw-pause svg{transform:rotate(90deg)}
html[data-view="swipe"] .card.sw-rot video{position:fixed;inset:auto;left:var(--Sh);top:0;width:var(--vw);height:var(--Sh);transform-origin:0 0;rotate:90deg;object-fit:contain;background:#000;z-index:6}
html.a4-big-phone .card.sw-rot :is(.sw-rank,.mf-name,a.cta){position:fixed;right:auto;bottom:auto;width:max-content;transform-origin:0 0;rotate:90deg;z-index:8}
/* 欄の中身（見る人から見て上から）: 閉じる(8〜56)・順位(62〜)・名前(94〜)・購入ボタン(124〜256)・前へ／次へ(270〜318) */
html.a4-big-phone .card.sw-rot .sw-rank{left:calc(var(--Sh) - 62px);top:calc(var(--vw) + 10px)}
html.a4-big-phone .card.sw-rot .mf-name{left:calc(var(--Sh) - 94px);top:calc(var(--vw) + 10px);max-width:calc(var(--pw) - 20px);margin:0;font-size:13px;line-height:1.3}
html.a4-big-phone .card.sw-rot a.cta{left:calc(var(--Sh) - 124px);top:calc(var(--vw) + 6px);width:min(calc(var(--pw) - 12px),300px);height:132px;min-height:132px;padding:0 6px;font-size:19px;gap:9px}
html.a4-big-phone .card.sw-rot a.cta[aria-disabled="true"]{font-size:14px}
html.a4-big-phone .card.sw-rot a.cta:not([aria-disabled="true"])::after{width:9px;height:9px}
html.sw-rotating.a4-big-phone .sw-rotclose{display:grid;position:fixed;z-index:30;left:calc(var(--Sh) - 8px);top:calc(var(--Sw) - 56px);width:48px;height:48px;transform-origin:0 0;rotate:90deg;place-items:center;padding:0;border:0;border-radius:50%;background:var(--red);color:var(--ink);cursor:pointer}
html.a4-big-phone .a4-nav{display:grid;position:fixed;z-index:31;place-items:center;width:calc((var(--pw) - 18px) / 2);height:48px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--card2);color:var(--text);
  cursor:pointer;transform-origin:0 0;rotate:90deg;left:calc(var(--Sh) - 270px);transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s}
html.a4-big-phone .a4-nav-prev{top:calc(var(--vw) + 6px)}
html.a4-big-phone .a4-nav-next{top:calc(var(--vw) + 12px + (var(--pw) - 18px) / 2)}
html.a4-big-phone .a4-nav:active:not(:disabled){transform:scale(.94);background:var(--red);color:var(--ink)}

/* PC: 回さない。動画が窓いっぱい（黒い地・全体表示）・下端の中央に購入ボタン・その左に名前と順位・左右の端に矢印 */
html.a4-big-pc .card.sw-big video{position:fixed;inset:0;margin:0;z-index:6;width:100vw;height:100vh;object-fit:contain;background:#000}
html.a4-big-pc .card.sw-big :is(.sw-rank,.mf-name,a.cta){position:fixed;z-index:8;top:auto}
html.a4-big-pc .card.sw-big a.cta{left:calc(50% - 200px);right:auto;bottom:30px;width:400px;height:68px;min-height:68px;padding:0 12px;font-size:22px;gap:10px}
html.a4-big-pc .card.sw-big a.cta[aria-disabled="true"]{font-size:15px}
html.a4-big-pc .card.sw-big .mf-name{left:auto;right:calc(50% + 216px);bottom:36px;max-width:calc(50% - 250px);margin:0;font-size:18px;text-align:right}
html.a4-big-pc .card.sw-big .sw-rank{left:auto;right:calc(50% + 216px);bottom:68px}
html.sw-rotating.a4-big-pc .sw-rotclose{display:grid;position:fixed;z-index:30;top:calc(12px + env(safe-area-inset-top,0px));right:12px;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:var(--red);color:var(--ink);cursor:pointer}
html.a4-big-pc .a4-nav{display:grid;position:fixed;z-index:31;top:50%;place-items:center;width:56px;height:56px;margin-top:-28px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(0,0,0,.6);color:var(--text);cursor:pointer;
  transition:transform .12s cubic-bezier(.2,.8,.2,1),background .14s,color .14s}
html.a4-big-pc .a4-nav-prev{left:20px}
html.a4-big-pc .a4-nav-next{right:20px}
html.a4-big-pc .a4-nav:hover:not(:disabled){background:var(--red);border-color:var(--red);color:var(--ink)}
html.a4-big-pc .a4-nav:active:not(:disabled){transform:scale(.94)}
/* 端（1 枚目の「前へ」・最後の「次へ」）では薄くして押せない */
html .a4-nav:disabled{opacity:.3;cursor:default}

/* ===== PC のスワイプ: 中央に縦長の列・左に題字と切り替えと矢印・右に今の順位 ===== */
@media (min-width:900px){
  /* 送りの箱は窓いっぱいの幅（窓のどこでホイールを回しても送れる）・動画の列は中央の 420px */
  html[data-view="swipe"] .card video{left:50%;right:auto;width:420px;margin-left:-210px}
  html[data-view="swipe"] .card .sw-amb{left:calc(50% - 235px);width:470px}
  html[data-view="swipe"] .card::after{left:calc(50% - 210px);right:auto;width:420px}
  html[data-view="swipe"] .card .mf-name,html[data-view="swipe"] .card .x-link{left:calc(50% - 200px)}
  html[data-view="swipe"] .card a.cta{left:calc(50% - 210px);right:auto;width:420px}
  html[data-view="swipe"] .card .sw-rank{left:calc(50% - 202px)}
  .sw-bar{display:none}
  .sw-side{position:fixed;top:0;bottom:0;z-index:5;display:flex;flex-direction:column;justify-content:center;pointer-events:none}
  .sw-side a{pointer-events:auto}
  .sw-side-l{left:0;width:calc(50% - 210px);align-items:flex-end;padding:0 40px 0 24px;gap:18px}
  .sw-side-l .a4-back{position:absolute;left:16px;top:16px}
  .sw-side-l .a4-tabs{position:absolute;left:150px;top:16px;margin:0}
  .sw-side-l .a4-tabs a{text-shadow:none}
  .sw-side-r{left:calc(50% + 210px);right:110px;align-items:flex-start;padding:0 0 0 28px}
  /* 案内の 1 枚の幅は動画の列（420px）に合わせる */
  html[data-view="swipe"] .swipe-end>*{max-width:420px}
  /* 幅 900〜1179px は動画の列の左が窓の中央寄りになる＝期間のタブを戻るボタンの下の左の欄へ（列に重ならない） */
  @media (max-width:1179px){.sw-side-l .a4-tabs{left:16px;top:68px}}
  /* 順位は右の大きな数字が受け持つ＝動画の左上の札（No.・n / 合計）は PC では出さない（大きく見ている間は欄が無いので残す） */
  html:not(.a4-big-pc) .sw-rank{display:none}
  /* 右の大きな数字は欄の幅（窓の幅 − 上下ボタン）に合わせて縮める（3 桁でも上下ボタンに重ならない） */
  /* YouTube ショートの実測どおり: 窓の右端から 24px・縦の中央・56px の丸・間 16px・地は白の薄い半透明。端では出さない */
  .sw-updown{position:fixed;right:24px;top:50%;z-index:12;display:flex;flex-direction:column;gap:16px;transform:translateY(-50%)}
  html.sw-rotating .sw-updown{display:none}
  /* 本人 2026-10-05「右手にあるPC用のスワイプボタンをもう少し大きく・もう少し目立たせる」: YouTube の 56px・薄い地から、80px・「次」は朱の面、「前」は白い線の輪へ（位置＝窓の右端 24px・縦の中央・間 16px は実測のまま） */
  .sw-arrow{display:grid;place-items:center;width:80px;height:80px;margin:0;padding:0;border:2px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(11,11,13,.72);color:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.55);transition:background .14s,transform .12s,border-color .14s}
  .sw-arrow svg{width:58px;height:58px}
  .sw-arrow[aria-label="次の動画"]{border-color:var(--red);background:var(--red);color:var(--ink)}
  .sw-arrow:hover:not(:disabled){transform:scale(1.06)}
  .sw-arrow[aria-label="前の動画"]:hover:not(:disabled){background:rgba(255,255,255,.18)}
  .sw-arrow:active:not(:disabled){transform:scale(.95)}
  .sw-r-no{font:700 16px/1 var(--num);letter-spacing:.12em;color:var(--muted)}
  /* 大きな数字は欄の幅（窓の幅 − 上下ボタン）に合わせて縮める（100 位の 3 桁でも上下ボタンに重ならない）。1100px 以上は 150px のまま */
  .sw-r-num{margin-top:2px;font:400 150px/.95 "Anton","Oswald",sans-serif;font-size:min(150px,calc((50vw - 352px) / 1.35));color:var(--red)}
  .sw-r-name{display:block;max-width:100%;margin-top:14px;font:700 18px/1.3 var(--jp);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sw-r-of{margin-top:6px;font:700 13px/1 var(--num);letter-spacing:.1em;color:var(--muted)}
  .sw-sound{right:calc(50% - 200px)}
  .sw-prog{left:calc(50% - 210px);right:auto;width:420px}
  .sw-rotbtn .rb-sp{display:none}
  .sw-rotbtn .rb-pc{display:inline}
}

/* ===== 6 巡目（B 組） ===== */
/* B0: スワイプの頁の最後の「案内の 1 枚」の期間の切り替えは、上の帯のタブと二重＝見えなくする（要素は消さない・取得に失敗した時は帯が無いので残す） */
html[data-view="swipe"]:not(.a4-load-fail) .swipe-end nav.windows{display:none}

/* B1: 幅 350px 未満は頭が重ならない（「スワイプで見る」は印だけ 44px・期間の左右を詰める）。360・390 は今のまま */
@media (max-width:349px){
  .a4-go{width:44px;padding:0;justify-content:center}
  .a4-go span{display:none}
  .window-link{padding:0 8px}
}

/* B2: 絞り込み中は 1 位の全幅を外して全部同じ大きさで並べる */
html.a4-filtering[data-cols="2"] .card.a1-r1{grid-column:auto}
html.a4-filtering[data-cols="2"] .card.a1-r1>video,html.a4-filtering[data-cols="2"] .card.a1-r1.a1-tall>video{aspect-ratio:4/3}
html.a4-filtering[data-cols="2"] .card.a1-r1 a.cta{font-size:15px}

/* B5: 札が 0 枚の期間の頁 */
main#cards>.a4-empty-msg{margin:0;padding:40px 16px 28px;text-align:center}

/* B6: 焦点の輪（キーボードのときだけ）。3px の白＋外へ 3px・朱の面の上では内側に黒の線も・札の端で切れる物は内側へ */
:focus-visible{outline:3px solid #fff;outline-offset:3px}
a.cta:focus-visible,.a4-go:focus-visible,.sw-rotbtn:focus-visible,.a4-empty-go:focus-visible,#takedown-form button[type="submit"]:focus-visible,.sw-rotclose:focus-visible,.sw-sound[data-on="1"]:focus-visible{box-shadow:inset 0 0 0 2px #000}
.sw-arrow[aria-label="次の動画"]:focus-visible{box-shadow:inset 0 0 0 2px #000,0 4px 18px rgba(0,0,0,.55)}
a.cta:focus-visible,.card>video:focus-visible{outline-offset:-6px}
.a4-search input:focus-visible,#takedown-form input:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* B8: 案内の頁・削除依頼の頁は、期間のタブのどれも「今」の印にしない（下線・明るさ・太字を付けない） */
html.a4-info:not(.a1-ul-on) .window-link[aria-current="page"],html.a4-info .window-link[aria-current="page"]{color:var(--muted);box-shadow:none;font-weight:700}

/* B10: PC（マウスのある端末）だけ hover の反応。札＝動画が少し明るくなる＋朱の細い枠・期間のタブ・並べ方の印・サイト名 */
@media (hover:hover) and (pointer:fine){
  html:not([data-view="swipe"]) .card>video{transition:filter .14s}
  /* 朱の枠は動画に付ける（札に付けると動画の下に隠れる）。下の購入ボタンは同じ朱なので、枠は札ぜんぶを囲んで見える */
  html:not([data-view="swipe"]) .card:hover>video{filter:brightness(1.14);outline:2px solid var(--red);outline-offset:-2px}
  .window-link:not([aria-current="page"]):hover,.a4-tabs a:hover{color:#fff}
  .a4-cols button:not([aria-pressed="true"]):hover{color:#fff;background:rgba(255,255,255,.08)}
  .a4-search-btn:hover{background:var(--line)}
  header>p:first-child a:hover{color:var(--red-hi)}
  .site-footer a:not(.takedown-entry):hover{color:var(--text)}
}

/* B11: 幅 900〜1099px は札が小さくなりすぎない（たくさん並べる＝4 列・大きく並べる＝3 列）。1100px 以上は 6 列・4 列のまま */
@media (min-width:900px) and (max-width:1099px){
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-cols="2"] .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ===== 動きを減らす設定 ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}