:root{--accent:#e0614a;--fg:#22252b;--muted:#6b7280;--line:#dcdcd6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif;line-height:1.8;color:var(--fg)}
a{color:inherit}
img{max-width:100%}

/* ---- header / menu ---- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;justify-content:space-between;align-items:center;
  padding:14px 22px;pointer-events:none}
.top>*{pointer-events:auto}
.logo{text-decoration:none;font-family:Orbitron,sans-serif;font-size:1.3rem;display:block}
.logo img{height:52px;display:block}
.menu-btn{display:flex;align-items:center;gap:14px;background:none;border:0;cursor:pointer;
  font:700 1.4rem Orbitron,sans-serif;color:inherit;position:relative;padding:6px 0}
.menu-btn i{display:none}
.menu-btn::after{content:"";width:36px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
.menu{position:fixed;inset:0;z-index:20;background:rgba(10,10,14,.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px}
.menu[hidden]{display:none}
.menu a{color:#fff;text-decoration:none;font:700 2rem Orbitron,sans-serif}
.menu a:hover{color:var(--accent)}
body.menu-open .top{color:#fff!important}

/* ---- home ---- */
body.home{background:#f5f5f5;
  background-image:linear-gradient(#ececec 1px,transparent 1px),linear-gradient(90deg,#ececec 1px,transparent 1px);
  background-size:36px 36px}
body.detail .top,body.home .top{color:var(--fg)}
.hero{min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:100px 20px 40px}
.hero h1{font:700 clamp(2.4rem,8vw,5rem)/1.1 Orbitron,sans-serif;margin:0}
.hero .tag{font-family:Orbitron,sans-serif;color:var(--accent);margin:.6em 0 0;letter-spacing:.1em}
section{padding:60px 0 20px;scroll-margin-top:20px}
section[hidden]{display:none}
h2{font:700 clamp(1.8rem,5vw,2.6rem) Orbitron,sans-serif;text-align:center;margin:0 0 36px}
h3{font-family:Orbitron,sans-serif;margin:30px 0 12px}
h3.center{text-align:center;margin-top:50px}
main>section:not(.hero){max-width:none}

/* 横スライド */
.rows{display:flex;flex-direction:column;gap:50px;overflow:hidden}
.row{overflow:hidden}
.track{display:flex;width:max-content;animation:slide var(--dur,30s) linear infinite}
.track.rev{animation-direction:reverse}
.row:hover .track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(calc(-1 * var(--shift)))}}
.row-label{margin:0 0 12px;padding:0 22px;font:700 .95rem Orbitron,sans-serif;color:var(--muted);letter-spacing:.08em}
.slide{position:relative;flex:none;width:330px;aspect-ratio:5/7;margin-right:50px;border-radius:24px;overflow:hidden;
  background:#fff;display:block;transition:transform .25s,box-shadow .25s}
.slide.wide{width:520px;aspect-ratio:16/9}
.slide:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.ph{width:100%;height:100%;display:grid;place-items:center;color:#fff;text-align:center;padding:16px;
  background:linear-gradient(150deg,hsl(var(--h) 70% 65%),hsl(calc(var(--h) + 50) 70% 55%));font:700 1.2rem Orbitron,sans-serif}
.cap{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;color:#fff;font-style:normal;font-weight:700;
  background:linear-gradient(transparent,rgba(0,0,0,.65));opacity:0;transition:opacity .25s}
.slide:hover .cap{opacity:1}
@media (prefers-reduced-motion:reduce){
  .track{animation:none}.row{overflow-x:auto}
}
@media (max-width:640px){.slide{width:220px;margin-right:28px;border-radius:18px}.slide.wide{width:300px}.rows{gap:20px}}

/* More ボタン / 一覧ページ */
.more{display:block;width:max-content;margin:36px auto 0;padding:8px 34px;border:2px solid #36b4c8;border-radius:99px;
  font:700 1rem Orbitron,sans-serif;text-decoration:none;color:var(--fg);background:#fff;transition:.15s}
.more:hover{background:linear-gradient(90deg,#3b8cf0,#2fc9a0);border-color:transparent;color:#fff}
.center{text-align:center}
.list-head{padding-top:110px}
.filters{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;padding:0 20px;margin-bottom:10px}
.filters button{cursor:pointer;font:700 1.05rem "Noto Sans JP",sans-serif;color:var(--fg);background:#fff;
  border:2px solid #36b4c8;border-radius:99px;padding:8px 22px;transition:.15s}
.filters button:hover{background:#e3f6f8}
.filters button.on{background:linear-gradient(90deg,#3b8cf0,#2fc9a0);border-color:transparent;color:#fff}
.list-body{padding:30px 24px 10px}
.lgrid{max-width:1240px;margin:0 auto;display:grid;gap:36px 40px;grid-auto-flow:dense;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lcard{position:relative;display:block;border-radius:20px;overflow:hidden;background:#fff;transition:transform .25s,box-shadow .25s}
.lcard:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(0,0,0,.18)}
.lcard.tall{aspect-ratio:5/7}
.lcard.wide{aspect-ratio:16/9;grid-column:span 2}
.lcard img{width:100%;height:100%;object-fit:cover;display:block}
.lcard:hover .cap{opacity:1}
.none{text-align:center;color:var(--muted)}
@media (max-width:640px){.lgrid{grid-template-columns:repeat(2,1fr);gap:16px}.lcard.wide{grid-column:span 2}.filters button{padding:6px 14px;font-size:.9rem}}

/* music */
.tracks{display:grid;gap:12px;max-width:760px;margin:0 auto;padding:0 20px}
.track-row{display:flex;align-items:center;gap:14px;background:#fff;border-radius:16px;padding:12px 18px;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.play{width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;font-size:1.1rem;cursor:pointer;flex:none}
.play:disabled{background:#ccc;cursor:not-allowed}
.info{flex:1;min-width:0}.info b{display:block}.info span{color:var(--muted);font-size:.85rem}
.bar{height:6px;background:var(--line);border-radius:3px;margin-top:8px;cursor:pointer;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent)}
.time{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* about */
.about-text,.cols{max-width:760px;margin-left:auto;margin-right:auto;padding:0 20px}
.about-text{text-align:center}
.cols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.chips li{font-size:.78rem;background:#fff;border:1px solid var(--line);padding:2px 12px;border-radius:99px}
.tool-row{margin-bottom:10px}.tool-row small{color:var(--muted);display:block}
.links{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:0 20px}
.links a{display:flex;align-items:center;gap:.6em;min-width:170px;padding:12px 26px 12px 18px;background:#fff;
  border:1px solid var(--line);border-radius:18px;text-decoration:none;color:var(--fg);
  font:700 1rem Orbitron,"Noto Sans JP",sans-serif;box-shadow:0 2px 10px rgba(0,0,0,.06);transition:transform .2s,box-shadow .2s}
.links a:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.links .lk-img{flex:none;width:1.6em;height:1.6em;object-fit:contain;display:grid;place-items:center;font-size:1em}
@media (max-width:640px){.links a{min-width:100%}}
footer{text-align:center;color:var(--muted);padding:70px 0 30px}

/* ---- detail (明るい方眼・落ち着いた色調) ---- */
body.detail{min-height:100vh;color:#1f2933;background-color:#efede8;
  /* 製図風: 24px の細かい線 + 5マス(120px)ごとの太めの線 */
  background-image:
    linear-gradient(#e0ddd5 1.5px,transparent 1.5px),linear-gradient(90deg,#e0ddd5 1.5px,transparent 1.5px),
    linear-gradient(#eae8e1 1px,transparent 1px),linear-gradient(90deg,#eae8e1 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
#detail{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:110px 24px 80px}
.d-top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,5fr);gap:48px;align-items:start}
.d-media{min-width:0}
.d-stage{display:flex;align-items:center;gap:10px}
.d-stage .d-cover{flex:1;min-width:0}
.d-arrow{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid #1f2933;background:#fff;color:#1f2933;
  font-size:.8rem;cursor:pointer;transition:.15s}
.d-arrow:hover{background:linear-gradient(90deg,#3b8cf0,#2fc9a0);border-color:transparent;color:#fff}
.d-count{text-align:center;margin:16px 0 0;font:700 .95rem Orbitron,sans-serif;letter-spacing:.12em}
.d-cover{margin:0;padding:10px;background:#fff;border:1px solid #d8d4cb;border-radius:4px;
  box-shadow:0 18px 40px rgba(31,41,51,.14)}
.d-cover img{width:100%;display:block}
.d-cover .ph{aspect-ratio:16/9}
.d-cover.tall .ph{aspect-ratio:5/7}
.d-info{font-family:"Noto Serif JP",serif}
.d-info h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 22px;line-height:1.3;letter-spacing:.06em}
.d-info h1::after{content:"";display:block;width:64px;height:2px;margin-top:14px;background:linear-gradient(90deg,#3b8cf0,#2fc9a0)}
.tags{list-style:none;padding:0;margin:0 0 14px;display:flex;gap:8px;flex-wrap:wrap}
.tags li{border:1px solid #1f2933;padding:0 8px;font:.78rem/1.7 system-ui,sans-serif}
.date{color:var(--muted);font-family:system-ui,sans-serif}
.d-info p{margin:.5em 0}
.d-info a{color:#1b8f87}
.d-info h3{font-family:inherit;margin:34px 0 8px}
.back{display:inline-block;margin-top:56px;padding:6px 14px 4px;border-bottom:1px solid #1f2933;text-decoration:none;
  font-family:system-ui,sans-serif}
.back:hover{color:#2fc9a0;border-color:#2fc9a0}
.d-missing{padding-top:20vh;text-align:center}
.d-demo{margin-top:90px;display:grid;gap:60px}
.d-demo h2{font-size:1.3rem;text-align:left;margin-bottom:16px}
.viewer{background:rgba(255,255,255,.75);border:1px solid #d8d4cb;border-radius:6px;overflow:hidden;
  box-shadow:0 18px 40px rgba(31,41,51,.1)}
model-viewer{width:100%;height:min(70vh,560px);background:transparent;--poster-color:transparent}
.l2d-stage{height:min(75vh,620px);cursor:pointer}
.l2d-stage canvas{width:100%;height:100%;display:block}
.cap-bar{padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #e3e0d9}
.hint{color:var(--muted);font-size:.85rem}
.pose{cursor:pointer;background:none;color:#1f2933;border:1px solid rgba(31,41,51,.35);border-radius:8px;
  padding:5px 14px;font:inherit;font-size:.85rem}
.pose.on{background:linear-gradient(90deg,#3b8cf0,#2fc9a0);border-color:transparent;color:#fff}
.g-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.g-grid img{width:100%;border-radius:8px;display:block}
@media (max-width:820px){.d-top{grid-template-columns:1fr;gap:28px}#detail{padding-top:90px}}
/* 縦長の作品は大きくなりすぎないよう高さを抑える */
.d-cover.tall img,.d-cover.tall .ph{max-height:78vh;object-fit:contain}
.d-cover.tall .ph{aspect-ratio:5/7}

/* 言語切替 */
.top-right{display:flex;align-items:center;gap:22px}
.lang-btn{background:none;border:0;cursor:pointer;color:inherit;font:500 .95rem Orbitron,sans-serif;opacity:.95;padding:6px 0}
.lang-btn b{font-weight:500;opacity:.45}
.lang-btn b.on{font-weight:700;opacity:1;border-bottom:2px solid #2fc9a0}
body.menu-open .top-right{color:#fff}

/* フッター: Hosted on Cloudflare */
footer .cf{display:block;max-width:calc(100% - 32px);margin:0 auto 14px;text-decoration:none;color:var(--fg);text-align:center;line-height:1.4}
footer .cf span{display:flex;flex-direction:column;align-items:center}
footer .cf b{font:700 .85rem Orbitron,sans-serif}
footer .cf small{font-size:.75rem;color:var(--muted)}
footer .cf:hover b{color:#f38020}

/* 狭い画面でヘッダーが重ならないように */
.logo,.menu-btn,.lang-btn{white-space:nowrap}
@media (max-width:480px){
  .top{padding:10px 14px}
  .logo{font-size:1rem}
  .menu-btn{font-size:1.05rem;gap:8px}
  .menu-btn::after{width:26px}
  .top-right{gap:12px}
  .lang-btn{font-size:.8rem}
}

/* ---- 年齢確認（いたずら）: ページをモザイク状にぼかす ---- */
body.gate-open{overflow:hidden}
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  background-color:rgba(255,255,255,.3);
  background-image:conic-gradient(rgba(0,0,0,.045) 25%,rgba(255,255,255,.2) 0 50%,rgba(0,0,0,.045) 0 75%,rgba(255,255,255,.2) 0);
  background-size:18px 18px}
.gate-box{width:min(600px,100%);background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 14px 48px rgba(0,0,0,.38);color:#111}
.gate-head{background:#4a6392;color:#fff;font-weight:700;text-align:center;padding:12px 20px;font-size:1.6rem;letter-spacing:.12em}
.gate-body{padding:40px 32px 44px;text-align:center}
.gate-q{margin:0 0 14px;color:#ff4d94;font-size:1.7rem;font-weight:700;line-height:1.4}
.gate-warn{margin:0 0 40px;font-weight:700;font-size:.95rem;line-height:1.7}
.gate-excl{display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin-right:.45em;vertical-align:-.19em;
  border:2px solid currentColor;border-radius:50%;font:900 .85em/1 Arial,"Helvetica Neue",sans-serif;padding-bottom:.04em}
.gate-btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.gate-btns button{border:0;border-radius:6px;padding:17px 32px;color:#fff;font:700 1.1rem "Noto Sans JP",sans-serif;
  cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.gate-yes{background:#ff3d88}
.gate-no{background:#a6a6a6}
.gate-btns button:hover{filter:brightness(1.07)}
@media (max-width:480px){
  .gate-head{font-size:1.35rem;padding:10px 16px}
  .gate-body{padding:30px 18px 34px}
  .gate-q{font-size:1.4rem}
  .gate-btns button{padding:15px 22px;font-size:1rem}
}

/* ---- いたずらの行き先ページ ---- */
body.gone{background:#12100f;color:#fff;min-height:100vh}
body.gone .top{color:#fff}
.gone-main{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:90px 20px 50px;text-align:center}
.gone-main img{width:min(220px,62vw);height:auto;display:block}
.gone-title{margin:6px 0 0;font:700 1.5rem/1.3 "Helvetica Neue",Arial,system-ui,sans-serif;color:#fff}
.gone-sub{margin:-12px 0 0;font:400 1rem/1.4 "Helvetica Neue",Arial,system-ui,sans-serif;color:#aaa}
.gone-back{color:#fff;text-decoration:none;border-bottom:1px solid #fff;padding:4px 14px;font-size:.9rem}
.gone-back:hover{color:#2fc9a0;border-color:#2fc9a0}