:root {
  --bg: #edf0fb;
  --fg: #14183a;
  --muted: #5a5f85;
  --main: #3d4bff;
  --sub: #ffdd33;
  --dark: #1a1a1a;
  --white: #ffffff;
  --radius: 12px;
  --head: "Montserrat", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.8;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

/* トップ: 左に名前とメニュー、右に Works の文字リスト */
.stage {
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(320px, 520px);
  gap: 72px; justify-content: center; align-items: center; min-height: 100vh; padding: 48px 16px;
}
.logo { width: fit-content; margin: 0 0 20px; font: 700 clamp(30px, 4vw, 40px)/1.15 var(--head); letter-spacing: -.01em; }
.logo img { max-height: 48px; width: auto; }
.menu { text-shadow: 0 0 10px var(--bg), 0 0 3px var(--bg); } /* レンズで映像がクリアになっても文字が読めるように */
.tagline { width: fit-content; margin: -8px 0 20px; font-size: 13px; color: var(--muted); }
.nav { display: flex; flex-direction: column; gap: 8px; }
.nav a { font: 600 24px/1.3 var(--head); text-decoration: none; width: fit-content; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--main); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.sns { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; }
.sns a { font: 600 13px/1.6 var(--head); color: var(--muted); text-decoration: none; }
.sns a:hover { color: var(--fg); }
.sns + .sns { margin-top: 8px; }

/* Works: 日付・タイトル・種類の文字リスト。行にカーソルを乗せるとジャケットが出る(.peek は fx.js が生成) */
/* 右側のパネル(Works / Events / Contact)。メニューの項目で開閉し、1つ開くとほかは閉じる(fx.js)。
   開いているパネルをもう一度押すと全部閉じて、映像だけになる。JS がないときは全部ふつうに並べて表示する */
.rpanels { display: grid; align-items: start; }
.rpanel { max-height: min(72vh, 560px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; margin-bottom: 28px; }
.js .rpanel { grid-area: 1 / 1; margin-bottom: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s; }
.js .rpanel.open { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-toggle { display: none; }
.nav a.pn.pn-on::after { content: "+"; margin-left: .4em; opacity: .55; }
.nav a.pn.is-open::after { content: "\2212"; }
.ptitle { margin: 0 0 10px; font: 700 18px/1.3 var(--head); }
.sub { margin: 22px 0 4px; font: 700 12px/1.3 var(--head); letter-spacing: .1em; opacity: .7; }
/* Events の1行 */
.ev { display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(20, 24, 58, .25); }
.ev time { font: 600 12px/1.5 var(--head); color: var(--muted); }
.ev .evt { display: flex; flex-direction: column; }
.ev .t { font-size: 15px; line-height: 1.5; font-weight: 600; }
.ev .v { font-size: 12px; color: var(--muted); }
.ev .k { font: 600 11px/1.5 var(--head); color: var(--muted); text-decoration: none; }
.ev .k:hover { text-decoration: underline; }
.ev.past { opacity: .6; }
/* URL のあるイベントは、行全体がリンク */
a.ev { color: inherit; text-decoration: none; transition: transform .15s ease; }
a.ev:hover { transform: translateX(6px); }
a.ev:hover .t { text-decoration: underline; text-decoration-color: var(--main); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a.ev:hover .k { color: var(--fg); }
body.bg-on a.ev:hover .t { text-decoration-color: #fff; }
body.bg-on a.ev:hover .k { color: #fff; }
.note { margin: 0 0 8px; font-size: 13px; opacity: .85; }
/* 依頼受付フォーム */
.req label { display: block; margin: 12px 0 0; font: 600 12px/1.4 var(--head); }
.req input, .req select, .req textarea {
  display: block; width: 100%; margin-top: 5px; padding: 10px 12px; border-radius: 8px;
  border: 1.5px solid rgba(20, 24, 58, .35); background: rgba(255, 255, 255, .7); color: var(--fg); font-family: inherit; font-size: 14px; line-height: 1.5;
}
.req textarea { resize: vertical; }
.req button {
  margin-top: 16px; padding: 12px 20px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--main); color: var(--white); font: 600 14px/1 var(--head);
}
.req button:hover { filter: brightness(1.1); }
.req .fine { margin: 10px 0 0; font-size: 11px; opacity: .75; }
.req .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.req .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.req .actions button { margin-top: 0; }
.req .draft { padding: 11px 16px; border-radius: 10px; cursor: pointer; background: transparent; color: inherit; border: 1.5px solid currentColor; font: 600 13px/1 var(--head); opacity: .85; }
.req .draft:hover { opacity: 1; }
.req button:disabled { opacity: .55; cursor: default; }
.status { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.6; background: rgba(61, 75, 255, .1); }
.status.ok { background: rgba(30, 170, 90, .22); }
.status.err { background: rgba(230, 60, 60, .22); }
.req [hidden], .mixbox [hidden] { display: none !important; }
.req input[type="date"] { min-height: 42px; }
body.bg-on .req input[type="date"] { color-scheme: dark; }
/* 納期の「年/月/日」(空のとき・「未定」で無効のときも)と、入力欄の例文を、ブラウザの灰色にせず白にする */
body.bg-on .req input[type="date"], body.bg-on .req input[type="date"]:disabled,
body.bg-on .req input[type="date"]::-webkit-datetime-edit, body.bg-on .req input[type="date"]::-webkit-datetime-edit-text,
body.bg-on .req input[type="date"]::-webkit-datetime-edit-year-field, body.bg-on .req input[type="date"]::-webkit-datetime-edit-month-field,
body.bg-on .req input[type="date"]::-webkit-datetime-edit-day-field { color: #fff; -webkit-text-fill-color: #fff; opacity: 1; }
body.bg-on .req input[type="date"]:disabled { background: rgba(255, 255, 255, .08); }
body.bg-on .req input::placeholder, body.bg-on .req textarea::placeholder { color: rgba(255, 255, 255, .75); opacity: 1; }
.mixbox { margin: 4px 0 0; padding: 4px 0 2px 12px; border-left: 3px solid rgba(61, 75, 255, .5); }
.mixbox[hidden] { display: none; }
body.bg-on .mixbox { border-left-color: rgba(255, 255, 255, .5); }
.req input[type="checkbox"] { display: inline-block; width: auto; margin: 0 8px 0 0; vertical-align: -2px; }
.req select optgroup { font-style: normal; }
.opts { margin: 14px 0 0; padding: 8px 12px 10px; border: 1.5px solid rgba(20, 24, 58, .25); border-radius: 8px; }
.opts legend { padding: 0 6px; font: 600 12px/1.4 var(--head); }
.chk { margin: 6px 0 0 !important; font-weight: 400 !important; font-size: 14px !important; line-height: 1.6 !important; }
.chk .pc { font: 600 12px var(--head); opacity: .75; }
.chk small, .pr small { font-size: 11px; opacity: .75; }
.est { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(61, 75, 255, .1); font-size: 13px; font-weight: 600; line-height: 1.6; }
.est .sub { margin-left: .6em; font-weight: 400; font-size: 12px; opacity: .85; }
/* 入力の進み具合 */
.prog { margin: 10px 0 4px; }
.prog .bar { height: 3px; border-radius: 2px; background: rgba(20, 24, 58, .18); overflow: hidden; }
.prog .bar i { display: block; width: 0; height: 100%; background: var(--main); transition: width .35s ease; }
.prog .pt { margin: 6px 0 0; font: 600 11px/1.4 var(--head); opacity: .8; }
.prog.done .pt { opacity: 1; }
/* 送信完了 */
.req .fields { transition: opacity .45s ease; }
.req .fields.out { opacity: 0; pointer-events: none; }
.thanks { padding: 28px 0 18px; text-align: center; animation: thanksIn .9s ease both; }
.thanks .big { margin: 0; font: 700 clamp(22px, 5.5vw, 32px)/1.2 var(--head); letter-spacing: .03em; }
.thanks .done { margin: 12px 0 0; font: 600 15px/1.6 var(--head); }
.thanks .recap { margin: 22px auto 0; max-width: 520px; text-align: left; }
.thanks .rl { margin: 0 0 4px; font: 700 11px/1.4 var(--head); opacity: .7; }
.thanks pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(61, 75, 255, .1); font-family: inherit; font-size: 12px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; opacity: .9; }
.thanks .cp { margin: 20px 0 0; }
.thanks .copy { display: inline-block; padding: 11px 18px; border-radius: 10px; background: var(--main); color: var(--white); font: 600 13px/1 var(--head); text-decoration: none; }
.thanks .copy:hover { filter: brightness(1.1); }
.thanks .cn { margin: 8px auto 0; max-width: 420px; font-size: 11px; line-height: 1.7; opacity: .8; }
.req .thanks .again { margin-top: 20px; padding: 11px 16px; background: transparent; color: inherit; border: 1.5px solid currentColor; font-size: 13px; opacity: .85; }
.req .thanks .again:hover { opacity: 1; filter: none; }
@keyframes thanksIn { from { opacity: 0; transform: translateY(10px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
/* 料金表(折りたたみ) */
.prices { margin: 6px 0 4px; font-size: 13px; }
.prices summary { cursor: pointer; font: 600 13px/1.6 var(--head); }
.gl-link { margin: 0 0 8px; }
.gdate { margin: 16px 0 0; font-size: 10px; line-height: 1.6; opacity: .7; }
.gl { margin: 4px 0 0; padding-left: 1.2em; font-size: 13px; line-height: 1.8; }
.gl li { margin: 3px 0; }
.prices h4 { margin: 14px 0 4px; font: 700 12px/1.4 var(--head); opacity: .75; }
.prices ul { margin: 4px 0 0; padding-left: 1.2em; }
.prices li { margin: 2px 0; }
.pr { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(20, 24, 58, .18); }
.pr span:last-child { text-align: right; font-weight: 600; }
.form-embed { width: 100%; height: 640px; border: 0; border-radius: 10px; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.chip {
  font: 600 12px/1 var(--head); padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid currentColor; background: transparent; color: var(--fg); opacity: .55;
}
.chip[aria-pressed="true"] { background: var(--fg); color: var(--white); opacity: 1; }
.row {
  display: grid; grid-template-columns: 82px 1fr auto; gap: 14px; align-items: baseline;
  padding: 12px 0; text-decoration: none; border-bottom: 1px solid rgba(20, 24, 58, .25);
  transition: transform .18s ease-out;
}
.row[hidden] { display: none; }
/* Works: 年ごとの折りたたみ */
.yr { margin: 0 0 4px; }
.yr[hidden] { display: none; }
.yr summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 10px 0 6px; font: 700 13px/1.4 var(--head); letter-spacing: .1em; }
.yr summary::-webkit-details-marker { display: none; }
.yr summary::after { content: "+"; margin-left: auto; font-weight: 600; opacity: .7; }
.yr[open] > summary::after { content: "−"; }
.yr summary small { font: 600 11px/1 var(--head); opacity: .7; }
.yr summary:hover .y { text-decoration: underline; text-decoration-color: var(--main); text-decoration-thickness: 2px; text-underline-offset: 4px; }
body.bg-on .yr summary:hover .y { text-decoration-color: #fff; }
/* JavaScript が使えるときは、年のタブ(横に並べ、はみ出す分は横スワイプ)。選んだ年の作品だけを出す */
.ytabs { display: flex; gap: 4px; margin: 0 0 10px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.ytab {
  flex: none; display: inline-flex; align-items: baseline; gap: 6px; min-height: 40px; padding: 8px 10px; cursor: pointer;
  border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; opacity: .55;
  font: 700 13px/1.4 var(--head); letter-spacing: .1em; text-shadow: inherit;
}
.ytab small { font: 600 11px/1 var(--head); opacity: .7; }
.ytab[aria-selected="true"] { opacity: 1; border-bottom-color: var(--main); }
.ytab[hidden] { display: none; }
.ytab:hover { opacity: 1; }
body.bg-on .ytab[aria-selected="true"] { border-bottom-color: #fff; }
.yrs.tabbed .yr { display: none; margin: 0; }
.yrs.tabbed .yr.cur:not([hidden]) { display: block; }
.yrs.tabbed .yr summary { display: none; }
.row:hover { transform: translateX(6px); }
.row time { font: 600 12px/1.5 var(--head); color: var(--muted); }
.row .t { font-size: 15px; line-height: 1.5; font-weight: 600; }
.row:hover .t { text-decoration: underline; text-decoration-color: var(--main); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.row .k { font: 600 11px/1.5 var(--head); color: var(--muted); }
.empty { margin: 0; color: var(--muted); font-size: 13px; }
.peek {
  position: fixed; top: 0; left: 0; z-index: 70; width: 150px; padding: 5px; background: var(--white);
  border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  box-shadow: 0 6px 18px rgba(20, 24, 58, .25);
}
.peek.on { opacity: 1; }
.peek img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; }

/* 表紙がないときの代替 */
.ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(135deg, hsl(var(--h) 55% 72%), hsl(calc(var(--h) + 40) 55% 58%));
}
.ph span { font: 700 44px/1 var(--head); color: rgba(255, 255, 255, .88); }

/* About */
.about { padding-top: 72px; max-width: 720px; }
.about h2 { font: 700 14px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* 作品ページ */
.top { padding: 22px 0 8px; }
.top a { text-decoration: none; font: 600 14px/1 var(--head); color: var(--muted); }
.top a:hover { color: var(--fg); }
.work { padding-top: 12px; }
.work-head { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 36px; align-items: start; }
.work-cover { aspect-ratio: 1 / 1; padding: 8px; background: var(--white); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .1); transition: transform .18s ease-out; }
.work-cover img, .work-cover .ph { border-radius: 6px; }
.work-cover img { width: 100%; height: 100%; object-fit: cover; }
.work-info h1 { margin: 10px 0 0; font-size: clamp(24px, 4vw, 34px); line-height: 1.4; }
.meta { margin: 0; display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--head); color: var(--muted); }
.badge { padding: 5px 11px; border-radius: 999px; background: var(--main); color: var(--white); }
.lead { margin: 12px 0 0; color: var(--muted); }
.orig { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.orig span { opacity: .8; }
.tracks, .related { max-width: 720px; margin-top: 36px; }
.work-head > * { min-width: 0; } /* 中身(収録曲の横長のリストなど)が広くても、枠が画面幅より広がらないように */
.work-info .tracks { margin-top: 22px; max-width: none; }
.work-info .tracks li { padding: 2px 0; font-size: 14px; }
.tracks h2, .related h2 { margin: 0 0 8px; font: 700 13px/1 var(--head); letter-spacing: .12em; color: var(--muted); }
/* 収録曲: 6曲ごとに右の列へ改行する(--rows で変えられる)。入りきらない幅では、横にスクロールする */
.tracks ol { --rows: 6; margin: 0; padding: 0 0 6px; list-style: none; counter-reset: trk; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--rows), auto); grid-auto-columns: max-content; column-gap: 32px; overflow-x: auto; scrollbar-width: thin; }
.tracks li { counter-increment: trk; display: flex; gap: .5em; padding: 3px 0; white-space: nowrap; }
.tracks li::before { content: counter(trk) "."; min-width: 1.9em; text-align: right; }
.links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-block; text-decoration: none; font: 600 15px/1 var(--head);
  padding: 13px 20px; border-radius: var(--radius); background: var(--white); border: 2px solid var(--white);
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--dark); }
.btn.primary { background: var(--main); border-color: var(--main); color: var(--white); }
.btn.primary:hover { border-color: var(--dark); }
/* サービスごとのイメージカラー */
.btn[data-svc] { color: #fff; border-color: transparent; }
.btn[data-svc]:hover { border-color: var(--dark); }
.btn[data-svc="apple"] { background: #fa243c; }
.btn[data-svc="spotify"] { background: #1db954; color: #08210f; }
.btn[data-svc="youtube"] { background: #ff0000; }
.btn[data-svc="niconico"] { background: #252525; }
.btn[data-svc="booth"] { background: #fc4d50; }
.btn[data-svc="soundcloud"] { background: #ff5500; }
.btn[data-svc="bandcamp"] { background: #1da0c3; }
.booth { max-width: 720px; margin-top: 36px; }
.booth h2 { margin: 0 0 8px; font: 700 13px/1 var(--head); letter-spacing: .12em; color: var(--muted); }
.booth .row .p { font: 600 12px/1.5 var(--head); color: var(--muted); }
.more-link { margin: 10px 0 0; font-size: 13px; }
.embed { margin-top: 28px; }
.embed.video { aspect-ratio: 16 / 9; }
.embed iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.embed.audio iframe { height: auto; }
.body { max-width: 720px; margin-top: 32px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 32px; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: var(--white); }

/* フッター */
.foot { margin-top: 72px; padding: 28px 0 40px; text-align: center; color: var(--muted); font: 600 12px/1.6 var(--head); }
.foot p { margin: 0; }

@media (max-width: 760px) {
  .stage { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .nav a { font-size: 22px; }
  .rpanel { max-height: none; overflow: visible; }
  .js .rpanels { display: block; }
  .js .rpanel { display: none; }
  .js .rpanel.open { display: block; }
  .ev { grid-template-columns: 74px 1fr auto; }
  .row { grid-template-columns: 74px 1fr auto; }
  .work-head { grid-template-columns: 1fr; gap: 20px; }

  /* スマホ: メニューは開閉式(閉じているときは、名前と「MENU」ボタンだけ) */
  .stage { gap: 22px; padding-top: 36px; }
  .js .menu-toggle {
    display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 12px 18px; min-height: 46px;
    border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer;
    font: 600 14px/1 var(--head); letter-spacing: .12em; text-shadow: inherit;
  }
  .js .menu-toggle .mt-mark::after { content: "+"; font-size: 18px; line-height: 1; }
  .js .menu.open .menu-toggle .mt-mark::after { content: "\2212"; }
  .js .menu .nav, .js .menu .sns { display: none; }
  .js .menu.open .nav { display: flex; margin-top: 18px; }
  .js .menu.open .sns { display: flex; }
  .nav a { padding: 4px 0; }

  /* スマホ: 依頼フォームを、指で入力しやすく(文字は16px以上にして、入力時の自動拡大も防ぐ) */
  .req label { margin-top: 20px; font-size: 13px; }
  .req input, .req select, .req textarea { font-size: 16px; padding: 14px; min-height: 52px; border-radius: 10px; }
  .req textarea { min-height: 170px; }
  .req input[type="checkbox"] { width: 24px; height: 24px; min-height: 0; margin: 0 12px 0 0; padding: 0; vertical-align: -6px; }
  .chk { padding: 8px 0; font-size: 15px !important; line-height: 1.7 !important; }
  .opts { padding: 8px 14px 12px; }
  .mixbox { padding-left: 10px; }
  .prices summary { display: flex; align-items: center; min-height: 44px; }
  .req .actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 22px; }
  .req .actions button, .req .actions .draft { width: 100%; min-height: 54px; padding: 16px; font-size: 16px; }
  .req .fine { font-size: 12px; }
  .thanks .copy, .req .thanks .again { min-height: 48px; display: inline-flex; align-items: center; }
}
/* 背景動画のレンズの縁(fx.js が生成。背景動画が出ていて、マウスのある環境だけ) */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid #fff; mix-blend-mode: difference;
  opacity: 0; transition: opacity .2s ease, width .2s ease, height .2s ease, margin .2s ease, background-color .2s ease;
}
.cursor.on { opacity: 1; }
.cursor.lens { transition: opacity .2s ease; border-width: 1.5px; }

/* 背景の動画(ぼかし + タイルの格子 + 背景色のかぶせで、文字を読みやすいモザイク風に) */
.bgvideo {
  --dim: .62;  /* かぶせの濃さ(小さいほど動画がはっきり見える) */
  --tone: #0f1330;  /* かぶせと格子の色(白い文字が読める暗い紺)。明るい文字色に戻すなら color-mix(in srgb, var(--bg) 80%, #14183a) と --dim: .66 */
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.6s ease;
}
.bgvideo.on { opacity: 1; }
.bgvideo iframe {
  position: absolute; top: 50%; left: 50%; border: 0;
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
  /* 少し拡大して上にずらし、動画の下端(自動字幕やロゴの出る位置)を画面の外に出す */
  transform: translate(-50%, -55%) scale(1.2);
  filter: saturate(1.25) brightness(.9);  /* 動画そのものの明るさ */
}
.bgvideo video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0;
  filter: saturate(1.25) brightness(.9);
  opacity: 0; transition: opacity 1s linear;  /* 2本の video を重ねて、次のクリップにクロスフェードする */
}
.bgvideo video.front { opacity: 1; }
/* タイルとかぶせは、次の「穴」の内側だけ抜けて、元の映像が見える(fx.js が変数を更新する)。
   ・レンズ: カーソルの周り(--mx / --my / --lr)
   ・クリックの波紋: クリックした場所から広がる円(--p0x〜 --p2x / --pNy / --pNo(半径)/ --pNs(穴の濃さ。終わり際に 1→0 にして、円全体をいっせいに元のモザイクへ戻す))、同時に3つまで
   穴どうしは intersect(マスクどうしの共通部分)で重ねるので、どれか1つでも穴ならそこは抜ける */
.bgvideo::before, .bgvideo::after, .bgvideo canvas.mosaic {
  content: ""; position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(circle at var(--mx, -999px) var(--my, -999px), transparent calc(var(--lr, 0px) - 28px), #000 var(--lr, 0px)),
    radial-gradient(circle at var(--p0x, -9999px) var(--p0y, -9999px), rgba(0, 0, 0, calc(1 - var(--p0s, 1))) calc(var(--p0o, 0px) - 30px), #000 var(--p0o, 0px)),
    radial-gradient(circle at var(--p1x, -9999px) var(--p1y, -9999px), rgba(0, 0, 0, calc(1 - var(--p1s, 1))) calc(var(--p1o, 0px) - 30px), #000 var(--p1o, 0px)),
    radial-gradient(circle at var(--p2x, -9999px) var(--p2y, -9999px), rgba(0, 0, 0, calc(1 - var(--p2s, 1))) calc(var(--p2o, 0px) - 30px), #000 var(--p2o, 0px));
  mask-image: radial-gradient(circle at var(--mx, -999px) var(--my, -999px), transparent calc(var(--lr, 0px) - 28px), #000 var(--lr, 0px)),
    radial-gradient(circle at var(--p0x, -9999px) var(--p0y, -9999px), rgba(0, 0, 0, calc(1 - var(--p0s, 1))) calc(var(--p0o, 0px) - 30px), #000 var(--p0o, 0px)),
    radial-gradient(circle at var(--p1x, -9999px) var(--p1y, -9999px), rgba(0, 0, 0, calc(1 - var(--p1s, 1))) calc(var(--p1o, 0px) - 30px), #000 var(--p1o, 0px)),
    radial-gradient(circle at var(--p2x, -9999px) var(--p2y, -9999px), rgba(0, 0, 0, calc(1 - var(--p2s, 1))) calc(var(--p2o, 0px) - 30px), #000 var(--p2o, 0px));
  -webkit-mask-composite: source-in, source-in, source-in, source-in;
  mask-composite: intersect, intersect, intersect, intersect;
}
/* クリックの波紋の先端の光の輪(fx.js が作る) */
.bgvideo .ripple {
  position: absolute; z-index: 3; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 26px rgba(150, 185, 255, .5), inset 0 0 26px rgba(150, 185, 255, .3);
}
/* 実際のモザイク(mosaic-style: pixel): 動画を小さな canvas に縮小して描き、拡大して四角いブロックにする(fx.js) */
.bgvideo canvas.mosaic { z-index: 1; width: 100%; height: 100%; image-rendering: pixelated; filter: saturate(1.25) brightness(.9); }
.bgvideo.px::before { display: none; }
.bgvideo::before {
  z-index: 1;
  background-image: linear-gradient(var(--tone) 0 2px, transparent 2px), linear-gradient(90deg, var(--tone) 0 2px, transparent 2px);
  background-size: var(--cell) var(--cell);
}
.bgvideo::after { z-index: 2; background: var(--tone); opacity: var(--dim); }

/* 紙のようなざらつき(静止したノイズを全体に薄く重ねる) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .14;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* 開いたときのフェードイン(順番にふわっと現れる) */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.logo, .tagline, .nav a, .sns, .works-list, .about,
.top, .work-head, .embed, .body, .gallery {
  animation: rise .8s cubic-bezier(.2, .7, .2, 1) backwards;
}
.logo { animation-delay: .1s; }
.tagline { animation-delay: .2s; }
.nav a:nth-child(1) { animation-delay: .3s; }
.nav a:nth-child(2) { animation-delay: .37s; }
.nav a:nth-child(3) { animation-delay: .44s; }
.nav a:nth-child(4) { animation-delay: .51s; }
.nav a:nth-child(n+5) { animation-delay: .58s; }
.sns { animation-delay: .7s; }
.works-list { animation-delay: .45s; }
.about { animation-delay: .8s; }
.work-head { animation-delay: .15s; }
.embed { animation-delay: .3s; }
.body { animation-delay: .4s; }
.gallery { animation-delay: .5s; }
body { transition: opacity .25s ease; }
body.leaving { opacity: 0; }


/* 背景動画が出ているときだけ、暗いかぶせの上に白い文字を置く。
   (以前の「背景に合わせて反転する文字色」は mix-blend-mode: difference で、color: #fff の
   ブロックに mix-blend-mode: difference; text-shadow: none; を足し、かぶせを明るい色に戻すと復活する) */
body.bg-on .menu, body.bg-on .rpanel, body.bg-on .foot { color: #fff; text-shadow: 0 1px 10px rgba(6, 8, 28, .7); }
body.bg-on .tagline, body.bg-on .sns a, body.bg-on .row time, body.bg-on .row .k, body.bg-on .ev time, body.bg-on .ev .v, body.bg-on .ev .k, body.bg-on .foot { color: rgba(255, 255, 255, .78); }
body.bg-on .sns a:hover { color: #fff; }
body.bg-on .chip { color: #fff; opacity: .85; }
body.bg-on .chip[aria-pressed="true"] { background: #fff; color: #0f1330; text-shadow: none; }
body.bg-on .row, body.bg-on .ev { border-bottom-color: rgba(255, 255, 255, .3); }
body.bg-on .req input, body.bg-on .req select, body.bg-on .req textarea { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); color: #fff; }
body.bg-on .req select option { color: #14183a; }
body.bg-on .req button { background: #fff; color: #0f1330; }
body.bg-on .opts { border-color: rgba(255, 255, 255, .45); }
body.bg-on .pr { border-bottom-color: rgba(255, 255, 255, .22); }
body.bg-on .est { background: rgba(255, 255, 255, .14); }
body.bg-on .prog .bar { background: rgba(255, 255, 255, .25); }
body.bg-on .prog .bar i { background: #fff; }
body.bg-on .req .thanks .again { background: transparent; color: #fff; }
body.bg-on .empty { color: #fff; }
body.bg-on .thanks .copy { background: #fff; color: #0f1330; text-shadow: none; }
body.bg-on .thanks pre { background: rgba(255, 255, 255, .14); }
body.bg-on .nav a:hover, body.bg-on .row:hover .t { text-decoration-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .logo, .tagline, .nav a, .sns, .works-list, .about,
  .top, .work-head, .embed, .body, .gallery { animation: none; }
  body { transition: none; }
  .row, .btn, a.ev { transition: none; }
  .thanks { animation: none; }
  .req .fields, .prog .bar i { transition: none; }
}