/* kobo.css — 3D工房のページの土台（2026-09-28 ノア書き起こし）
 * 色と字はページ側の :root で上書きする（--kobo-*）。外部フォントは読まない。 */
:root{
  --kobo-bg:#0b0d12; --kobo-ink:#F2EFE9; --kobo-ink-2:rgba(242,239,233,.78);
  --kobo-accent:#D9C39A; --kobo-line:rgba(242,239,233,.28);
  --kobo-panel:#15130F; --kobo-panel-line:#3B372F;
  --kobo-display:"Yu Mincho","YuMincho","Hiragino Mincho ProN",serif;
  --kobo-ui:"Yu Gothic","YuGothic","Hiragino Sans",system-ui,sans-serif;
  --kobo-gutter:clamp(20px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--kobo-bg);color:var(--kobo-ink);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kobo-bg);font-family:var(--kobo-display);line-height:1.8;overflow-x:hidden}
a{color:inherit}

/* 3Dの舞台（ページ全体の背後に固定） */
.kobo-stage{position:fixed;inset:0;z-index:0;background:var(--kobo-bg) center/cover no-repeat}
.kobo-stage canvas{display:block;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s ease}
.kobo-ready .kobo-stage canvas{opacity:1}
.kobo-no3d .kobo-stage canvas{display:none}

/* 見出し・ボタン（DOM）は3Dの上 */
.kobo-header{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--kobo-gutter);pointer-events:none}
.kobo-header > *{pointer-events:auto}
.kobo-logo{font-family:var(--kobo-ui);font-size:16px;letter-spacing:.08em;text-decoration:none;color:var(--kobo-ink)}
.kobo-header nav{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

main{position:relative;z-index:2}
.kobo-scene{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--kobo-gutter) 64px}
.kobo-scene--end{justify-content:flex-end;padding-bottom:12svh}
.kobo-body{max-width:min(48rem,100%);position:relative}
.kobo-lead{max-width:34em}
.kobo-veil{position:absolute;inset:0;pointer-events:none;z-index:-1}
.kobo-veil--left{background:linear-gradient(90deg,rgba(8,9,12,.62),rgba(8,9,12,.18) 55%,transparent)}
.kobo-veil--bottom{background:linear-gradient(0deg,rgba(8,9,12,.7),rgba(8,9,12,.1) 60%,transparent)}
.kobo-meta{font-family:var(--kobo-ui);font-size:16px;letter-spacing:.12em;opacity:.8;margin:0 0 .6em}
.kobo-display{font-family:var(--kobo-display);font-weight:600;font-size:clamp(34px,5vw,72px);line-height:1.3;margin:0 0 .35em;
  text-shadow:0 2px 24px rgba(0,0,0,.55)}
.kobo-lead{font-size:clamp(17px,1.6vw,21px);color:var(--kobo-ink-2);margin:0;text-shadow:0 1px 14px rgba(0,0,0,.6)}

/* 作品カードが流れる区間。長さ＝カードが通り抜ける時間 */
.kobo-flow{min-height:260svh;padding:0 var(--kobo-gutter)}
.kobo-flow__sticky{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;
  margin:0 calc(-1 * var(--kobo-gutter));padding:0 var(--kobo-gutter) 9svh;background:linear-gradient(0deg,rgba(8,9,12,.72),rgba(8,9,12,0) 36%)}
.kobo-flow__sticky > *{pointer-events:auto}
.kobo-caption{font-size:clamp(18px,2.4vw,30px);margin:0;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.kobo-hint{display:inline-block;margin-top:.5em;font-family:var(--kobo-ui);font-size:16px;opacity:.8}
.kobo-worklist{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 0;padding:0}
.kobo-worklist a{font-family:var(--kobo-ui);font-size:16px;text-underline-offset:4px;opacity:.85}

/* ボタン */
.kobo-links{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0}
.kobo-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 24px;border-radius:999px;border:1px solid var(--kobo-line);
  font-family:var(--kobo-ui);font-size:16px;letter-spacing:.06em;text-decoration:none;color:var(--kobo-ink);background:rgba(10,11,14,.35);
  cursor:pointer;transition:background .25s,border-color .25s,transform .25s}
.kobo-btn:hover{border-color:var(--kobo-accent);transform:translateY(-1px)}
.kobo-btn--solid{background:var(--kobo-ink);color:#16140f;border-color:var(--kobo-ink)}
.kobo-btn--solid:hover{background:#fff}
.kobo-btn[hidden]{display:none}

/* スクロールの合図 */
.kobo-scroll{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;font-family:var(--kobo-ui);font-size:16px;letter-spacing:.2em;
  opacity:.7;transition:opacity .6s}
.kobo-scrolled .kobo-scroll{opacity:0}

footer.kobo-footer{position:relative;z-index:2;padding:28px var(--kobo-gutter);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-family:var(--kobo-ui);font-size:16px;color:var(--kobo-ink-2);border-top:1px solid var(--kobo-line);background:rgba(8,9,12,.6)}
footer.kobo-footer nav{display:flex;gap:18px}

/* 文字の出方 */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.8,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal-delay="1"]{transition-delay:.12s}[data-reveal-delay="2"]{transition-delay:.24s}[data-reveal-delay="3"]{transition-delay:.36s}

/* 作品の額（押した点から広がる。position は足さない＝足すとページが先頭へ飛ぶ） */
/* 指でなぞって見渡す画面（drag）: ページは動かさない・なぞる操作をブラウザに取られない */
html.kobo-drag, html.kobo-drag body{height:100%;overflow:hidden;overscroll-behavior:none}
html.kobo-drag body{touch-action:none}
html.kobo-drag footer.kobo-footer, html.kobo-drag .kobo-scroll{display:none}
/* 画面の外にある的の知らせ（targets の edgeHints） */
.kobo-edge{position:fixed;z-index:24;top:50%;transform:translateY(-50%);pointer-events:none;padding:8px 12px;border-radius:999px;
  font-family:var(--kobo-ui);font-size:16px;color:#1a1408;background:#ffd79a;box-shadow:0 0 18px rgba(255,190,110,.7);opacity:0;transition:opacity .4s}
.kobo-edge.is-on{opacity:1;animation:kobo-edge 1.4s ease-in-out infinite}
.kobo-edge--l{left:8px}.kobo-edge--r{right:8px}
@keyframes kobo-edge{50%{transform:translate(var(--nudge,0),-50%)}}
.kobo-edge--l{--nudge:-4px}.kobo-edge--r{--nudge:4px}
@media (prefers-reduced-motion:reduce){.kobo-edge.is-on{animation:none}}
html.is-card-hover, html.is-card-hover body, html.kobo-hover, html.kobo-hover body{cursor:pointer}
.kobo-dialog{border:0;padding:22px 22px 18px;width:min(92vw,880px);max-height:94vh;overflow:auto;background:var(--kobo-panel);color:var(--kobo-ink);
  border-radius:10px;box-shadow:0 0 0 1px var(--kobo-panel-line),0 24px 80px rgba(0,0,0,.6)}
.kobo-dialog::backdrop{background:rgba(8,8,10,.32);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.kobo-dialog__frame{padding:10px;background:var(--kobo-accent);border-radius:4px;box-shadow:0 0 60px rgba(255,184,102,.25)}
.kobo-dialog__frame img{display:block;width:100%;height:auto;max-height:56vh;object-fit:contain;background:var(--kobo-panel)}
.kobo-dialog h3{font-family:var(--kobo-display);font-size:clamp(20px,2.4vw,28px);margin:16px 0 6px}
.kobo-dialog p{font-size:16px;line-height:1.8;margin:0}
.kobo-dialog .kobo-links{margin-top:14px}
.kobo-dialog__x{position:absolute;top:8px;right:10px;width:40px;height:40px;border-radius:50%;border:0;font-size:24px;line-height:40px;
  text-align:center;color:var(--kobo-ink);background:rgba(255,255,255,.08);cursor:pointer}
.kobo-dialog__x:hover{background:rgba(255,255,255,.18)}
.kobo-dialog__hint{margin-top:10px!important;font-family:var(--kobo-ui);opacity:.65}

@media (max-width:640px){
  .kobo-header{padding-top:14px}
  .kobo-scene{padding-top:84px}
  .kobo-veil--left{background:linear-gradient(0deg,rgba(8,9,12,.66),rgba(8,9,12,.2) 60%,transparent)}
  .kobo-scene:first-of-type{justify-content:flex-end;padding-bottom:14svh}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .kobo-stage canvas{transition:none}
}