:root{--navy:#1b1e2b;--orange:#ff9f1c;--bg:#f6f7f9;--ink:#1b1e2b;--sub:#5b6070}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,"Hiragino Sans",sans-serif}
header{position:sticky;top:0;z-index:5;background:var(--navy);display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px}
.logo{color:#fff;font-weight:700;text-decoration:none}
nav a{color:#c9cde0;text-decoration:none;margin-left:16px;padding:14px 0;font-size:14px}nav a.on{color:var(--orange);border-bottom:2px solid var(--orange)}
.band{background:var(--orange);color:var(--navy);font-size:12px;font-weight:700;text-align:center;padding:4px}
/* ページ1: 縦に1本ずつ */
.more{display:block;text-align:center;background:var(--orange);color:var(--navy);font-weight:700;text-decoration:none;border-radius:999px;padding:14px}
.pr{font-size:11px;opacity:.7;margin-top:8px;text-align:center}
/* ページ2: サムネ一覧 */
.grid{display:grid;grid-template-columns:1fr;gap:20px;padding:16px;max-width:1100px;margin:0 auto}
@media(min-width:700px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.thumb{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(160deg,#2a2f45,#0f111a);background-size:cover;position:relative}
.thumb::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:28px;opacity:.85}
.card h3{margin:8px 0 0;font-size:15px}.card .meta{font-size:12px;color:#b45309}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal.open{display:flex}.box{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:16px}
.player{aspect-ratio:16/9;background:#000;border-radius:10px;margin-bottom:12px;color:#fff;display:grid;place-items:center;font-size:13px;text-align:center;padding:8px}
.close{float:right;background:none;border:0;font-size:22px}
footer{padding:16px;font-size:11px;color:var(--sub);text-align:center}
.card:nth-child(3n+2) .thumb{background-image:linear-gradient(160deg,#3a2a45,#1a0f1a)}.card:nth-child(3n) .thumb{background-image:linear-gradient(160deg,#2a4540,#0f1a18)}
/* サムネは中央から切り出す(縦長・黒帯つきの画像でも映像の部分が出る)。カードは上揃え */
.thumb{background-position:center;background-repeat:no-repeat}
.card{align-self:start}
/* 再生モーダル: 縦長動画でも画面に収め、ボタンを必ず押せるようにする */
.box{max-height:calc(100svh - 32px);overflow-y:auto}
.player{aspect-ratio:auto;min-height:180px;max-height:68svh;overflow:hidden;padding:0}
.player video{display:block;width:100%;height:auto;max-height:68svh;object-fit:contain;background:#000}
/* 再生時間(サムネの右下) */
.dur{position:absolute;right:8px;bottom:8px;z-index:1;background:rgba(0,0,0,.8);color:#fff;font-size:12px;font-weight:700;line-height:1;padding:3px 5px;border-radius:4px}
/* 投稿者アイコン(YouTube風: タイトルの左) */
.row{display:flex;gap:10px;margin-top:10px;align-items:flex-start}.row .txt{min-width:0}.row h3{margin:0}
.av{flex:none;width:36px;height:36px;border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:700;font-size:16px;margin-top:2px}
/* カード: サムネ+タイトルは押すとポップアップ。その下の「続きを見る」は直接リンク */
.card{display:flex;flex-direction:column}
.card .open{display:block;width:100%;background:none;border:0;padding:0;text-align:left;cursor:pointer;font:inherit;color:inherit}   /* .modal.open(ポップアップ)には当てない */
.thumb{overflow:hidden}
.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s;border-radius:inherit}
.thumb.live video{opacity:1}.thumb::after{transition:opacity .2s}.thumb.live::after{opacity:0}
.cta-row{display:flex;align-items:center;gap:10px;margin:10px 0 0}
.cta{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#ff9f1c,#ffb84d);color:#1b1e2b;font-weight:700;font-size:14px;line-height:1;text-decoration:none;border-radius:999px;padding:10px 16px;box-shadow:0 2px 6px rgba(255,159,28,.35);transition:transform .15s,box-shadow .15s}
.cta span{transition:transform .15s}.cta:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(255,159,28,.45)}.cta:hover span{transform:translateX(3px)}
.cta:active{transform:none}.cta:focus-visible{outline:3px solid #1b1e2b;outline-offset:2px}
.prl{font-size:11px;color:#8a8f9f}
@media(max-width:699px){.cta{flex:1;justify-content:center;padding:12px 16px}.prl{flex:none}}
/* タイトルは最大2行(3行目以降は「…」)。投稿者名はタイトルの真下。PCは文字ブロック全体を「2行+投稿者名」の高さにそろえ、空きは下側に出す(カードの高さとボタンの位置が揃う) */
.row h3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;line-height:1.45;max-height:2.9em;word-break:break-all}
/* 行と行の間(カードの上下の余白)を少し広げる */
.grid{row-gap:36px}
/* ロゴ: マーク(Xのアイコン)+サイト名 */
.logo{display:inline-flex;align-items:center;gap:9px;font-size:17px;font-weight:700;letter-spacing:.02em}
.logo .mark{display:block;width:30px;height:30px;flex:none;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9),0 1px 3px rgba(0,0,0,.4)}.logo .mark img{display:block;width:100%;height:100%;border-radius:50%}
@media(max-width:420px){header{padding:0 12px}.logo{font-size:14px;gap:6px;letter-spacing:0}.logo .mark{width:24px;height:24px}nav a{font-size:13px;margin-left:12px}}
/* 小さい画面(320px前後)でも折り返さない */
header .logo,header nav a{white-space:nowrap}
@media(max-width:350px){header{padding:0 10px}.logo{font-size:12px;gap:5px}.logo .mark{width:20px;height:20px}.logo .wm b{padding:1px 4px 2px;margin-left:3px}nav a{font-size:12px;margin-left:9px}}
/* 検索バー(ヘッダーの下・サムネ一覧の上) */
.searchwrap{max-width:1100px;margin:0 auto;padding:14px 16px 0}
.search{position:relative;display:block;max-width:560px;margin:0 auto}
.search svg{position:absolute;left:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--sub);pointer-events:none}
.search input{width:100%;height:46px;padding:0 18px 0 46px;border:1px solid #d5d9e4;border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:16px;box-shadow:0 1px 3px rgba(27,30,43,.06);transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:#8a8f9f}
.search input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,159,28,.25)}
.card[hidden]{display:none}
.empty{text-align:center;color:var(--sub);padding:40px 16px}
/* スマホ(1列): タイトルは実際の行数ぶんの高さ(最大2行)。作品と作品の間は広めに */
@media(max-width:699px){.grid{row-gap:56px}}
/* 閉じるボタン: 画面の右上に固定した大きな丸いボタン(48px。スクロールしても見える) */
.close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:20;float:none;width:48px;height:48px;padding:0;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.85);-webkit-tap-highlight-color:transparent}
.close:hover{background:rgba(0,0,0,.85)}.close:active{transform:scale(.94)}.close:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(min-width:700px){.row .txt{min-height:64px}}
/* スマホ: 画面の下のタブバー(ピックアップ/トレンド)。上のナビはPCだけ */
.tabbar{display:none}
@media(max-width:699px){
 :root{--bar:calc(58px + env(safe-area-inset-bottom))}
 header nav{display:none}
 body{padding-bottom:var(--bar)}
 .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:8;display:flex;height:var(--bar);padding-bottom:env(safe-area-inset-bottom);background:var(--navy);border-top:1px solid rgba(255,255,255,.1)}
 .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#aab0c4;text-decoration:none;font-size:11px;font-weight:700;position:relative;-webkit-tap-highlight-color:transparent}
 .tabbar svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .tabbar a.on{color:var(--orange)}.tabbar a.on svg{fill:rgba(255,159,28,.25)}
 .tabbar a.on::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
 .tabbar a:active{background:rgba(255,255,255,.06)}
}
/* タブバーには、上のナビ(header nav)用の余白・下線を当てない。アイコンは縮めない */
@media(max-width:699px){
 nav.tabbar a{margin:0;padding:0;border:0;font-size:11px}
 nav.tabbar a.on{border:0}
 .tabbar svg{flex:none}
}
/* PCの上のナビ: アイコン+文字。開いているページはオレンジの丸い背景 */
header nav{display:flex;align-items:center;gap:6px}
header nav a{display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 14px;border:0;border-radius:999px;font-size:14px;font-weight:700;color:#c9cde0;transition:background .15s,color .15s}
header nav a .ni{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
header nav a:hover{background:rgba(255,255,255,.09);color:#fff}
header nav a.on{background:rgba(255,159,28,.17);color:var(--orange);border:0}
header nav a.on .ni{fill:rgba(255,159,28,.3)}
/* スマホでは上のナビを出さない(下のタブバーを使う)。上の PC 用ルールより後に置く */
@media(max-width:699px){header nav{display:none}}
/* オレンジの帯: ヘッダーのすぐ下に固定(ヘッダーの高さ 52px の分だけ下げる)。文字が長いので、狭い画面では2行になってもよい */
.band{position:sticky;top:52px;z-index:5;line-height:1.45;padding:6px 12px}
/* 年齢確認(全画面。サイトの上に重ねる) */
.agegate{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,16,26,.97)}
.agegate-box{width:100%;max-width:420px;text-align:center;background:var(--navy);border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:28px 22px;color:#fff;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.agegate-name{font-weight:700;font-size:15px;color:var(--orange);margin-bottom:14px;letter-spacing:.04em}
.agegate-box h2{margin:0 0 12px;font-size:19px;line-height:1.5}.agegate-box p{margin:0 0 22px;color:#c9cde0;font-size:14px}
.agegate-btns{display:flex;flex-direction:column;gap:12px}
.agegate-btns button{height:52px;border:0;border-radius:999px;background:linear-gradient(135deg,#ff9f1c,#ffb84d);color:var(--navy);font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.agegate-btns button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.agegate-btns .no{display:flex;align-items:center;justify-content:center;height:46px;border-radius:999px;border:1px solid rgba(255,255,255,.3);color:#c9cde0;text-decoration:none;font-size:14px}
/* フッター(お問い合わせ・プライバシー・免責) */
footer.site{max-width:1100px;margin:32px auto 0;padding:20px 16px 28px;border-top:1px solid #dde0ea;font-size:12px;color:var(--sub);text-align:center}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-bottom:10px}footer.site nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:13px}footer.site nav a:hover{text-decoration:underline}
footer.site p{margin:4px 0}
/* 法的ページ */
.doc{max-width:760px;margin:0 auto;padding:24px 16px 8px}.doc h1{font-size:24px;margin:0 0 18px}
.doc section{margin:0 0 22px}.doc h2{font-size:17px;border-left:5px solid var(--orange);padding-left:9px;margin:0 0 8px}
.doc p,.doc li{font-size:15px;line-height:1.85}.doc ul{padding-left:1.3em}
.doc .more{display:inline-block;background:linear-gradient(135deg,#ff9f1c,#ffb84d);color:var(--navy);font-weight:700;text-decoration:none;border-radius:999px;padding:13px 26px}
/* 年齢確認ボックスが画面の幅からはみ出さないように(padding を幅に含める) */
.agegate,.agegate *{box-sizing:border-box}.agegate-box{min-width:0}.agegate-box h2{overflow-wrap:anywhere;word-break:keep-all}