/* ===================================================================
KBJDFAN Design System v1.0 — shared stylesheet (production)
tg/ vip/ preview/ articles/ join/ がこの1枚を で読み込む。
index.html は自己完結インラインCSS（このファイルは読まない）。
フォントは各ページ の Google Fonts で供給。
=================================================================== */
:root{
--flag-red:#CD2E3A; --flag-blue:#1E50B4;
--brand-coral:#FF2E73; --teal:#1FC5B6; --pink:#FF4D9D; --gold:#FFD166;
--ink:#1A1A28; --night:#0f0f17; --night-2:#1a1a28;
--paper-pink:#FFEAF2; --paper:#fff; --canvas:#ECEAE4; --surface:#FBF8F3;
--text-muted:#6F6F86; --text-subtle:#9A94A6; --label:#B6B0A4;
--card-radius:20px; --inner-radius:14px; --pill:999px;
--font-logo:'Fredoka',sans-serif;
--font-head:'Fredoka','M PLUS Rounded 1c',sans-serif;
--font-body:'M PLUS Rounded 1c','Jua','ZCOOL KuaiLe','Noto Sans TC',sans-serif;
}
/* 言語別 見出しフォント整合（繁体は暫定 Noto Sans TC） */
html[lang^="ja"] { --font-head:'M PLUS Rounded 1c',sans-serif; }
html[lang^="ko"] { --font-head:'Jua',sans-serif; }
html[lang="zh-Hans"]{ --font-head:'ZCOOL KuaiLe',sans-serif; }
html[lang="zh-Hant"]{ --font-head:'Noto Sans TC',sans-serif; }
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-x:clip;}
body{background:var(--surface); color:var(--ink); font-family:var(--font-body); line-height:1.7; overflow-x:clip;}
a{color:inherit;}
.brand{font-family:var(--font-logo)!important; font-weight:700; letter-spacing:-.02em;}
h1,h2,h3{font-family:var(--font-head); letter-spacing:-.01em;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:860px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--brand-coral); margin-bottom:6px;}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:32px;}
.sec-title{font-family:var(--font-head); font-weight:600; font-size:34px; color:var(--ink);}
.see-all{font-weight:700; font-size:14px; color:var(--flag-blue); text-decoration:none;}
section.pad{padding:64px 0 0;}
/* buttons */
.btn-coral{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:700; font-size:16px;
color:#fff; background:var(--brand-coral); padding:15px 30px; border-radius:var(--pill); text-decoration:none;
box-shadow:0 8px 20px rgba(255,46,115,.4); border:0; cursor:pointer;}
.btn-white{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:700; font-size:16px;
color:var(--night); background:#fff; padding:15px 28px; border-radius:var(--pill); text-decoration:none;}
.btn-tg{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:700; font-size:16px;
color:#fff; background:#229ED9; padding:15px 28px; border-radius:var(--pill); text-decoration:none;
box-shadow:0 8px 20px rgba(34,158,217,.4); transition:transform .15s ease, box-shadow .15s ease;}
.btn-tg:hover{transform:translateY(-2px); box-shadow:0 12px 26px rgba(34,158,217,.5);}
.btn-ghost{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:700; font-size:15px;
color:var(--flag-blue); background:#fff; border:2px solid var(--flag-blue); padding:12px 22px; border-radius:var(--pill); text-decoration:none;}
/* ---- NAV ---- */
header.nav{position:sticky; top:0; z-index:50; background:rgba(15,15,23,.86);
backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08);}
.nav-in{display:flex; align-items:center; gap:24px; padding:14px 24px; max-width:1200px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:2px; text-decoration:none;}
.logo span{color:#fff; font-size:24px;}
.nav-links{display:flex; gap:6px; margin-left:18px;}
.nav-links a{font-weight:700; font-size:14px; color:#b9b9c7; text-decoration:none; padding:8px 14px; border-radius:var(--pill);}
.nav-links a.active{color:#fff; background:rgba(255,255,255,.08);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:14px;}
.langs{display:flex; gap:2px; font-size:12px; font-weight:700;}
.langs button{font:inherit; cursor:pointer; border:0; background:none; color:#7f7f90; padding:5px 9px; border-radius:8px;}
.langs button.active{color:#fff; background:rgba(255,255,255,.12);}
.tg-btn{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:14px; color:#fff;
background:#229ED9; padding:9px 18px; border-radius:var(--pill); text-decoration:none; box-shadow:0 6px 14px rgba(34,158,217,.35);}
/* ---- page header band (dark) ---- */
.phead{position:relative; background:var(--night); overflow:hidden; padding:64px 24px 56px; text-align:center;}
.phead .stripe{position:absolute; inset:0; opacity:.35;
background:repeating-linear-gradient(45deg,#16161f,#16161f 14px,#191922 14px,#191922 28px);}
.phead .glow{position:absolute; inset:0;
background:radial-gradient(120% 90% at 50% 0%,rgba(255,46,115,.20),transparent 55%),
radial-gradient(80% 70% at 80% 30%,rgba(30,80,180,.26),transparent 60%);}
.phead .ghost{position:absolute; top:-50px; right:-30px; opacity:.1;}
.phead-in{position:relative; z-index:2; max-width:760px; margin:0 auto;}
.phead h1{font-family:var(--font-head); font-weight:700; font-size:40px; color:#fff; margin-bottom:12px;}
.phead p{font-size:16px; line-height:1.7; color:#cfcfdb; max-width:600px; margin:0 auto;}
.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12); border-radius:var(--pill); padding:7px 16px;
font-size:12px; font-weight:700; letter-spacing:.08em; color:#fff; margin-bottom:20px;}
.badge i{width:7px; height:7px; border-radius:var(--pill); background:var(--teal); box-shadow:0 0 0 4px rgba(31,197,182,.25);}
/* ---- generic cards ---- */
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.card{background:var(--paper); border:1px solid #efece6; border-radius:18px; overflow:hidden;
box-shadow:0 8px 22px rgba(40,30,50,.08); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(40,30,50,.14);}
.thumb{position:relative; aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; overflow:hidden;
background:repeating-linear-gradient(45deg,#E9E4DC,#E9E4DC 9px,#E2DCD2 9px,#E2DCD2 18px);}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.thumb .ph{font-family:var(--font-logo); font-size:11px; letter-spacing:.12em; color:#a89f90;}
.thumb .play{position:absolute; width:54px; height:54px; border-radius:var(--pill); background:rgba(255,255,255,.92);
display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(0,0,0,.25); z-index:2;}
.sym-chip{position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:var(--pill); z-index:2;
background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;}
/* ---- footer ---- */
footer.foot{background:var(--night); padding:48px 24px 32px; margin-top:72px;}
.foot-in{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.foot-logo span{color:#fff; font-size:22px;}
.socials{display:flex; gap:10px;}
.socials a{width:38px; height:38px; border-radius:var(--pill); background:rgba(255,255,255,.08); text-decoration:none;
display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#cfcfdb;}
.foot-bottom{max-width:1100px; margin:24px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.08);
display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#6f6f86; font-size:13px;}
.foot-bottom .fl{display:flex; gap:14px; font-weight:700;}
.foot-bottom .fl span{cursor:pointer;}
/* ---- language tabs (i18n.js は .lang-tab.active をトグル) ---- */
.lang-tabs{display:flex; justify-content:center; gap:8px; flex-wrap:wrap;}
.lang-tab{padding:6px 14px; background:rgba(255,255,255,.08); border:0; border-radius:var(--pill);
color:#b9b9c7; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:.2s;}
.lang-tab:hover{background:rgba(255,255,255,.16); color:#fff;}
.lang-tab.active{background:var(--brand-coral); color:#fff;}
/* ---- age gate ---- */
.age-gate{position:fixed; inset:0; z-index:1000; background:rgba(10,10,20,.92); backdrop-filter:blur(24px);
display:flex; align-items:center; justify-content:center; padding:20px;}
.age-gate.hidden{display:none;}
.age-gate__box{background:var(--paper); border-radius:var(--card-radius); padding:44px 34px; text-align:center;
max-width:420px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.4);}
.age-gate__icon{width:62px; height:62px; margin:0 auto 16px; border-radius:var(--pill); background:var(--paper-pink);
display:flex; align-items:center; justify-content:center;}
.age-gate__badge{display:inline-block; font-family:var(--font-logo); font-weight:700; font-size:15px; color:#fff;
background:var(--brand-coral); border-radius:var(--pill); padding:3px 12px; margin-bottom:14px;}
.age-gate__title{font-family:var(--font-head); font-size:24px; font-weight:700; color:var(--ink); margin-bottom:10px;}
.age-gate__text{color:var(--text-muted); margin-bottom:22px; font-size:14px; line-height:1.7;}
.age-gate__buttons{display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.age-gate__btn-yes{padding:15px; background:var(--brand-coral); color:#fff; border:0; border-radius:var(--pill);
font:inherit; font-weight:700; font-size:15px; cursor:pointer; box-shadow:0 8px 20px rgba(255,46,115,.35); transition:.2s;}
.age-gate__btn-yes:hover{transform:translateY(-2px);}
.age-gate__btn-no{padding:13px; background:#F1EFEA; color:#6f6f86; border:0; border-radius:var(--pill);
font:inherit; font-weight:700; font-size:14px; cursor:pointer;}
.age-gate .lang-tab{background:#F1EFEA; color:#6f6f86;}
.age-gate .lang-tab.active{background:var(--brand-coral); color:#fff;}
/* ---- toast ---- */
.toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff;
font-weight:700; font-size:13px; padding:11px 22px; border-radius:var(--pill); box-shadow:0 10px 30px rgba(0,0,0,.3);
z-index:1100; display:none;}
/* ---- video modal ---- */
.video-modal{display:none; position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.92);
align-items:center; justify-content:center; padding:20px;}
.video-modal.active{display:flex;}
.video-modal__inner{position:relative; max-width:520px; width:100%;}
.video-modal__video{width:100%; border-radius:14px;}
.video-modal__close{position:absolute; top:-40px; right:0; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; padding:8px;}
.langs button{white-space:nowrap;}
.lang-select{display:none; font:inherit; font-weight:700; font-size:13px; color:#fff; background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.22); border-radius:var(--pill); padding:7px 12px; cursor:pointer;}
.lang-select option{color:#1a1a28;}
/* ---- mobile hamburger nav (burger + scrim + drawer-extra are injected by i18n.js initHamburger; hidden on desktop) ---- */
.nav-burger{display:none; margin-left:6px; width:42px; height:42px; border:0; border-radius:12px; background:rgba(255,255,255,.1); color:#fff; font-size:20px; cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto;}
.nav-burger:active{background:rgba(255,255,255,.2);}
.nav-scrim{position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.45); opacity:0; visibility:hidden; transition:opacity .2s;}
.nav-drawer-extra{display:none;}
.nav-drawer-brand{display:none;}
.nav-search{display:none;}
@media(max-width:900px){
.grid4,.grid3{grid-template-columns:repeat(2,1fr);}
.grid2{grid-template-columns:1fr;}
/* nav: top bar = logo + burger のみ。7項目＋言語＋TGは右からのスライドドロワーへ収納 */
.nav-in{flex-wrap:nowrap; gap:10px; padding:12px 16px;}
/* backdrop-filter on header.nav would make it the containing block for the fixed drawer
(spec: filter/backdrop-filter ancestors capture position:fixed) -> drawer collapses to a
header-sized clipped box. Kill the blur on mobile; bg is 86% opaque so視覚差はほぼ無い */
header.nav{-webkit-backdrop-filter:none; backdrop-filter:none;}
.nav-burger{display:inline-flex;}
.nav-right{display:none;}
.nav-links{position:fixed; top:0; right:0; bottom:0; width:min(84vw,320px); margin:0; z-index:120;
flex-direction:column; align-items:stretch; gap:4px; padding:14px 16px 24px;
background:#16161f; box-shadow:-14px 0 40px rgba(0,0,0,.4);
transform:translateX(100%); transition:transform .24s ease; overflow-y:auto;}
body.navopen .nav-links{transform:translateX(0);}
body.navopen .nav-scrim{opacity:1; visibility:visible;}
/* raise the nav (and its fixed drawer child) above the scrim; header.nav is its own stacking context (sticky+z-index) so the drawer would otherwise render behind the scrim */
body.navopen header.nav{z-index:130;}
.nav-drawer-brand{display:flex; align-items:center; padding:10px 4px 14px; margin-bottom:6px; border-bottom:1px solid rgba(255,255,255,.12);}
.nav-drawer-brand .logo span{font-size:20px;}
/* inline BJ search pill: fills the space between logo and the right-aligned burger */
.nav-search{display:flex; flex:1 1 auto; min-width:0; align-items:center; gap:8px;
background:rgba(255,255,255,.1); border-radius:var(--pill); padding:9px 13px;}
.nav-search i{color:#8d8da0; font-size:13px; flex:0 0 auto;}
.nav-search input{flex:1; min-width:0; width:100%; background:none; border:0; outline:none; font:inherit; font-size:14px; color:#fff;}
.nav-search input::placeholder{color:#7f7f90;}
.nav-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.nav-links a{padding:13px 14px; font-size:15px; border-radius:12px; white-space:nowrap;}
.nav-links a.active{background:rgba(255,255,255,.1);}
.nav-drawer-extra{display:flex; flex-direction:column; gap:10px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.12);}
.nav-drawer-extra .langrow{display:flex; flex-wrap:wrap; gap:6px;}
.nav-drawer-extra .langrow .lang-tab{flex:1 1 40%;}
.nav-drawer-extra .tg-btn{justify-content:center;}
.tg-btn{padding:9px 16px; font-size:13px;}
.phead h1{font-size:30px;}
.sec-title{font-size:26px;}
}