/* ============================================================
   tokens ─ 無彩色のみ / 冷たみのあるグレー
   ============================================================ */
:root{
  --ground:#FFFFFF;
  --surface:#F4F5F6;
  --ink:#000000;
  --ink-2:#4E545B;
  --ink-3:#8B9198;
  --rule:#E2E4E7;
  --rule-soft:#EEEFF1;
  --solid:#000000;          /* 帯・塗り */
  --on-solid:#FFFFFF;
  --on-solid-2:#9AA0A8;     /* 黒地の上の補助テキスト */

  --f-sans:Montserrat,"Avenir Next","Avenir","Century Gothic","Helvetica Neue",
           "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic",
           "Noto Sans JP","Meiryo",system-ui,sans-serif;

  /* セクション末尾のアクション（View all news / YouTubeチャンネルを見る）の上余白 */
  --gap-action:clamp(30px,4.5vh,44px);

  --rail:clamp(72px,7.5vw,120px);
  --pad:clamp(22px,4.5vw,64px);
  --hd:76px;

  /* 白地・黒文字で固定します。OS のダークモードでも反転させません */
  color-scheme:light;

  /* ざらざらの粒子です。TOPと仕切り帯で共用します（粗さ → baseFrequency） */
  --grain:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.62'%20numOctaves='3'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   base
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;padding-left:var(--rail);
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{max-width:100%;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* 繰り返しも1回で止めます。これがないと無限ループのアニメが高速で明滅してしまいます */
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .hero__grad::before,.hero__grad::after,
  .band__grad::before,.band__grad::after{animation:none!important}
}

/* ============================================================
   左端の黒い帯（縦組みロゴ）
   ============================================================ */
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:120;
  background:var(--solid);color:var(--on-solid);
  display:flex;flex-direction:column;align-items:center;
  padding:26px 0 22px;
}
.rail__logo{
  /* 文字は横書きのまま、行だけを縦に流します（text-orientation は指定しません） */
  writing-mode:vertical-rl;
  font-weight:700;font-size:clamp(11px,1.1vw,14px);letter-spacing:.22em;
  white-space:nowrap;text-transform:uppercase;
  text-decoration:none;color:inherit;margin-top:16px;
}
.rail__spacer{flex:1}
.rail__scroll{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:9px;letter-spacing:.24em;font-weight:600;opacity:.85;
}
.rail__scroll i{display:block;width:1px;height:44px;background:var(--on-solid);transform-origin:top;animation:drop 2.6s ease-in-out infinite}
@keyframes drop{0%,100%{transform:scaleY(.2)}55%{transform:scaleY(1)}}

/* ============================================================
   header
   ============================================================ */
.hd{
  position:fixed;top:0;left:var(--rail);right:0;z-index:100;
  height:var(--hd);padding:0 var(--pad);
  display:flex;align-items:center;justify-content:flex-end;gap:16px;
  background:color-mix(in srgb,var(--ground) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(12px);
}
.hd__nav{display:flex;gap:clamp(20px,3.2vw,44px)}
.hd__nav a{
  position:relative;text-decoration:none;padding:6px 0;
  font-size:13.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);transition:opacity .2s;
}
.hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);transition:right .3s ease}
.hd__nav a:hover::after{right:0}

.burger{
  display:none;width:44px;height:44px;margin-right:-8px;padding:0;
  background:none;border:0;cursor:pointer;color:var(--ink);
  align-items:center;justify-content:center;flex-direction:column;gap:6px;
}
.burger span{display:block;width:24px;height:2px;background:currentColor;transition:transform .34s cubic-bezier(.2,.7,.3,1),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0 0 0 var(--rail);z-index:90;background:var(--ground);
  padding:calc(var(--hd) + 24px) var(--pad) 36px;
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1),visibility .32s;
}
.drawer.is-open{opacity:1;visibility:visible;transform:none}
.drawer[hidden]{display:none}
.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  text-decoration:none;padding:22px 0;border-bottom:1px solid var(--rule-soft);
}
.drawer__nav a b{font-size:28px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.drawer__nav a i{font-style:normal;font-size:11.5px;letter-spacing:.14em;color:var(--ink-3);font-weight:600}
.drawer__sns{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.drawer__sns a{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  text-decoration:none;border:1px solid var(--rule);padding:10px 15px;color:var(--ink-2);
}

/* ============================================================
   hero
   ============================================================ */
.hero{
  position:relative;min-height:100svh;
  padding:calc(var(--hd) + clamp(24px,5vh,56px)) var(--pad) clamp(64px,11vh,120px);
  display:flex;flex-direction:column;justify-content:center;
  /* 後ろにずらす黒（.hero__offset）が右・下にはみ出す量。.hero__figure と共有するためここに置きます */
  --off:clamp(14px,2vw,28px);
}
.hero__stack{position:relative;z-index:1;width:100%}

/* ---- TOPの背景：白→濃いグレーのグラデーション＋やわらかい隆起＋粒子 ----
   光を消す場合   → .hero__grad::before / ::after の opacity を 0 にしてください
   粒子を消す場合 → .hero__bg::after  の opacity を 0 にしてください
   濃さを調整する場合 → .hero__bg の背景の最後の色（#8A9099）を明るく/暗くしてください */
.hero__bg{
  position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  /* 左端の抜きは浅めで問題ありません。文字の読みやすさは .hero__veil が担保します */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 14%);
}
/* 暗い下地です。この上を白い光の塊が動きます */
.hero__grad{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 110% at 64% 88%,#2B3037 0%,#15181C 58%,#0E1013 100%),
    #0E1013;
}
/* 光の塊 1 */
.hero__grad::before{
  content:"";position:absolute;
  left:6%;top:-28%;width:70%;aspect-ratio:1.1;
  background:radial-gradient(closest-side,#FFFFFF 0%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 72%);
  will-change:transform;
  animation:bloomA 15s ease-in-out infinite alternate;
}
/* 光の塊 2 */
.hero__grad::after{
  content:"";position:absolute;
  right:-10%;top:-34%;width:56%;aspect-ratio:1;
  background:radial-gradient(closest-side,#FFFFFF 0%,rgba(255,255,255,.6) 30%,rgba(255,255,255,0) 70%);
  will-change:transform;
  animation:bloomB 19s ease-in-out infinite alternate;
}
@keyframes bloomA{
  0%  {transform:translate3d(-12%,-6%,0) scale(.92)}
  50% {transform:translate3d(10%,14%,0)  scale(1.22)}
  100%{transform:translate3d(22%,4%,0)   scale(1.02)}
}
@keyframes bloomB{
  0%  {transform:translate3d(8%,10%,0)   scale(1.1)}
  50% {transform:translate3d(-16%,-4%,0) scale(.86)}
  100%{transform:translate3d(-4%,18%,0)  scale(1.18)}
}
/* スマホ幅だけ、背景の光の動きを大きく・速くします（PC・タブレット幅は変更しません） */
@media (max-width:680px){
  @keyframes bloomA-mobile{
    0%  {transform:translate3d(-30%,-18%,0) scale(.78)}
    50% {transform:translate3d(24%,26%,0)   scale(1.42)}
    100%{transform:translate3d(38%,6%,0)    scale(1.05)}
  }
  @keyframes bloomB-mobile{
    0%  {transform:translate3d(18%,22%,0)   scale(1.25)}
    50% {transform:translate3d(-34%,-12%,0) scale(.7)}
    100%{transform:translate3d(-10%,34%,0)  scale(1.32)}
  }
  .hero__grad::before{animation:bloomA-mobile 8s ease-in-out infinite alternate}
  .hero__grad::after{animation:bloomB-mobile 10s ease-in-out infinite alternate}
}
/* 文字が乗る側に敷く白いベールです。暗い面が文字まで来ても読める状態を保ちます */
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    #FFFFFF 0%,rgba(255,255,255,.96) 20%,rgba(255,255,255,.72) 34%,rgba(255,255,255,0) 56%);
}
/* ざらざらの粒子です。暗い下地のため multiply ではなく overlay で乗せます。
   粗さ → baseFrequency（小さいほど粗い）と background-size
   強さ → opacity */
.hero__bg::after{
  content:"";position:absolute;inset:-10%;
  background-image:var(--grain);
  background-size:200px 200px;
  opacity:.55;
  mix-blend-mode:overlay;
}
/* 上下に積む配置の場合は、背景も縦方向の構成に切り替えます */
@media (max-width:1239px){
  .hero__bg{
    -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%);
    mask-image:linear-gradient(180deg,transparent 2%,#000 16%);
  }
  .hero__grad{
    background:
      radial-gradient(130% 90% at 52% 92%,#2B3037 0%,#15181C 58%,#0E1013 100%),
      #0E1013;
  }
  /* 上部はマスクで抜けるため、光は見える下半分に置きます */
  .hero__grad::before{left:-16%;top:26%;width:108%}
  .hero__grad::after{right:-22%;top:52%;width:88%}
  .hero__veil{
    background:linear-gradient(180deg,
      #FFFFFF 0%,rgba(255,255,255,.96) 22%,rgba(255,255,255,.7) 36%,rgba(255,255,255,0) 58%);
  }
  /* 画像の下の余白を、タグ列（TikTok等）から画像までの余白と同じ値に揃えます。
     タグ→画像の余白は .hero__card の padding-bottom と .hero__figure の margin-top の合計。
     さらに、後ろの黒（.hero__offset）が --off 分だけ下にはみ出す（見た目の一番下は黒の下端になる）ため、
     その分も足して、黒込みの見た目の下端を上の余白と揃えます */
  .hero{padding-bottom:calc(clamp(30px,5vw,52px) + clamp(28px,7vw,52px) + var(--off))}
}

/* アーティスト写真（正方形）と、その後ろにずらした黒 */
.hero__figure{
  position:relative;z-index:3;
  /* スマホでは名前ブロックに重ねず、横位置は中央に置きます。
     後ろの黒が右下にずれる分、写真＋黒のかたまりとして中央に見えるよう半分だけ左へ寄せます */
  width:min(88%,380px);
  margin:clamp(28px,7vw,52px) auto 0;
  transform:translateX(calc(var(--off) * -0.5));
}
/* 後ろにずらす面です。ベタ塗りだと重いため、透かして背景を活かします */
.hero__offset{
  position:absolute;inset:0;z-index:-1;
  transform:translate(var(--off),var(--off));
  background:rgba(18,21,25,.6);
  mix-blend-mode:multiply;
}
/* 写真が入るまでのプレースホルダーです。<img> を入れれば自動で置き換わります */
.hero__photo{
  position:relative;aspect-ratio:1;overflow:hidden;
  background-color:var(--surface);
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.055) 0 1px,transparent 1px 9px);
  outline:1px solid var(--rule);outline-offset:-1px;
}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* 名前からタグまでのブロックです。
   白い箱に戻す場合は background を var(--ground) にしてください */
.hero__card{
  position:relative;z-index:2;background:transparent;
  padding:0 clamp(24px,5vw,52px) clamp(30px,5vw,52px) 0;
  /* 名前（佐藤圭一）の実際の描画幅。下のJS（ResizeObserverでの実測）が上書きします。
     JSが動かない場合のフォールバックとして概算値を入れておきます */
  --name-w:calc(clamp(44px,9.6vw,106px) * 3.86);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:14px;
  width:var(--name-w);
  margin:0;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);
}
.hero__eyebrow::after{content:"";flex:1;height:1px;background:var(--rule)}
.hero__eyebrow span{flex:none;white-space:nowrap}
.hero__name{
  margin:clamp(18px,2.6vh,30px) 0 0;
  font-size:clamp(44px,9.6vw,106px);font-weight:800;line-height:.94;letter-spacing:.02em;
  font-feature-settings:"palt" 1;
}
.hero__romaji{
  display:flex;align-items:center;gap:14px;
  width:var(--name-w);
  margin:clamp(12px,1.8vh,20px) 0 0;
  font-size:clamp(12px,1.4vw,16px);font-weight:600;letter-spacing:.58em;color:var(--ink-2);
  text-transform:uppercase;
}
.hero__romaji::before{content:"";flex:1;height:1px;background:var(--rule)}
.hero__romaji span{flex:none;white-space:nowrap}
/* モバイルのみ、KEIICHI SATOHの左側の線を消します（PC・タブレットでは表示） */
@media (max-width:680px){.hero__romaji::before{display:none}}
.hero__meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:clamp(26px,4vh,40px)}
.tag{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  border:1px solid var(--rule);padding:7px 12px;color:var(--ink-2);
}
a.tag{
  text-decoration:none;
  transition:color .22s ease,border-color .22s ease,background .22s ease;
}
a.tag:hover{color:var(--ground);background:var(--ink);border-color:var(--ink)}

/* 横並び（写真を右に重ねる）は 1240px 以上でのみ行います。
   これより狭いと写真が文字に食い込むため、上下に積む配置のままにします */
@media (min-width:1240px){
  .hero__card{
    width:min(100%,64%);
    /* 文字のまわりに余白を持たせ、写真が近づいても文字に触れないようにします。
       左の余白は、右側の写真の余白（.hero__figure の right）と同じ var(--pad) に揃えます */
    padding:clamp(26px,3.2vw,46px) clamp(40px,4.6vw,72px) clamp(34px,4.4vw,64px) var(--pad);
  }
  /* 写真は右寄りに絶対配置します。右の余白は名前側の左余白と同じ var(--pad) に揃えます。
     後ろにずらした黒（.hero__offset）が右に --off 分はみ出すため、
     その分だけ余分に内側へ寄せて、黒込みの見た目の右端を var(--pad) に合わせます */
  .hero__figure{
    position:absolute;margin:0;
    top:50%;right:calc(var(--pad) + var(--off));transform:translateY(-50%);
    width:min(48%,600px);
  }
}

/* ============================================================
   丸いメールボタン（全ページ固定）
   ============================================================ */
.mail{
  position:fixed;z-index:110;
  right:clamp(18px,2.6vw,40px);bottom:clamp(18px,2.6vw,40px);
  width:clamp(54px,4.6vw,64px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--solid);color:var(--on-solid);
  border:1px solid var(--solid);text-decoration:none;
  transition:background .28s ease,color .28s ease,opacity .28s ease,
             transform .28s cubic-bezier(.2,.7,.3,1);
}
.mail:hover{background:var(--ground);color:var(--ink);transform:translateY(-3px)}
.mail svg{width:22px;height:22px;display:block}
.mail__label{
  position:absolute;right:calc(100% + 12px);top:50%;transform:translate(6px,-50%);
  background:var(--solid);color:var(--on-solid);
  padding:7px 12px;white-space:nowrap;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease;
}
.mail:hover .mail__label,.mail:focus-visible .mail__label{opacity:1;transform:translate(0,-50%)}
@media (max-width:820px){
  .mail__label{display:none}
}

/* ============================================================
   section frame
   ============================================================ */
.sec{padding:clamp(78px,12vh,148px) var(--pad);border-top:1px solid var(--rule)}
@media (min-width:900px){
  /* 横幅の広いPC画面で中身が伸びきらないよう、左右に余白を作って詰めます。
     セクション内の要素ごとに個別指定すると、button/aタグ（インライン系）だけ揃わなくなるため、
     必ず .sec__inner 1つに対してだけ効かせてください。
     TOPの名前（.hero__stack）も同じ幅・同じ左端に揃えます */
  .sec__inner,.hero__stack{max-width:1280px;margin-left:auto;margin-right:auto}
}
[id]{scroll-margin-top:calc(var(--hd) + 16px)}
.sec__head{margin:0 0 clamp(38px,6vh,66px)}
.sec__en{
  display:block;margin:0;
  font-size:clamp(34px,5.6vw,56px);font-weight:800;line-height:1;letter-spacing:.01em;
  text-transform:uppercase;
}
.sec__ja{
  display:flex;align-items:center;gap:14px;margin:14px 0 0;
  font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--ink-3);
}
.sec__ja::after{content:"";flex:1;height:1px;background:var(--rule)}

/* ============================================================
   profile
   ============================================================ */
.pf{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,64px)}
/* Data（DL一覧）は幅を持たせすぎると罫線だけが不自然に伸びるため、常に狭い列（minmax(250px,.6fr)）に
   収まるようにします。今は Data が1つ目、本文（pf__body）が2つ目なので、列の並びもそれに合わせます */
@media (min-width:900px){.pf{grid-template-columns:minmax(250px,.6fr) minmax(0,1.4fr)}}
.pf__body p{font-size:15.5px;line-height:2.15;margin:0 0 1.4em;max-width:58ch;color:var(--ink-2);text-wrap:pretty}
.pf__body p:last-child{margin-bottom:0}
/*
  ■ 非表示項目
  ・項目名：キャッチコピー用スタイル（.pf__lead）
  ・状態：HTML側もコメントアウト済みのため現在は未使用
  ・復元方法：HTML側のコメントを解除すれば再度適用される
*/
.pf__lead{
  font-size:clamp(19px,2.3vw,25px)!important;font-weight:800;line-height:1.65!important;
  color:var(--ink)!important;margin-bottom:1.15em!important;letter-spacing:.01em;
}
.spec__cat{margin:0 0 2px;padding-bottom:7px;border-bottom:1px solid var(--ink)}
.spec{margin:0}
.spec div{display:grid;grid-template-columns:6em 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule-soft)}
.spec dt{font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);text-transform:uppercase;font-weight:700;padding-top:5px}
.spec dd{margin:0;font-size:14.5px;line-height:1.75}
.spec dd a{text-decoration:none;border-bottom:1px solid var(--rule)}
.spec dd a:hover{border-color:var(--ink)}

/* ============================================================
   equipment ─ 機材リスト
   ============================================================ */
.eq__lead{
  margin:0 0 clamp(24px,3.5vh,34px);
  font-size:14.5px;line-height:1.95;color:var(--ink-2);
  /* 48chだと1文が収まらず「ください」の途中で改行されていたため、
     このリード文だけは幅を制限せず1行に収まるようにします（狭い画面では通常通り折り返します） */
  text-wrap:pretty;
}
/* モバイルのみ、2文の間で強制的に改行します（PC・タブレットでは1行のまま） */
.eq__lead-break{display:none}
@media (max-width:680px){.eq__lead-break{display:inline}}
.eq__open{
  display:inline-flex;align-items:center;gap:12px;
  font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  background:var(--solid);color:var(--on-solid);border:1px solid var(--solid);
  padding:14px 24px;cursor:pointer;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.eq__open:hover{background:var(--ground);color:var(--ink);transform:translateY(-2px)}

/* ---- モーダル：背景をグレーでぼかし、白い面にリストを載せます ---- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(14px,4vw,40px)}
.modal[hidden]{display:none}
.modal__backdrop{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:rgba(58,62,68,.55);
  backdrop-filter:blur(10px) saturate(.85);
  -webkit-backdrop-filter:blur(10px) saturate(.85);
  opacity:0;transition:opacity .3s ease;
}
.modal__panel{
  position:relative;z-index:1;
  width:min(100%,860px);max-height:min(86vh,760px);overflow-y:auto;
  background:var(--ground);padding:clamp(24px,3.6vw,42px);
  opacity:0;transform:translateY(14px);
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.7,.3,1);
}
.modal.is-open .modal__backdrop{opacity:1}
.modal.is-open .modal__panel{opacity:1;transform:none}
.modal__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  margin:0 0 clamp(20px,3vw,30px);padding-bottom:14px;border-bottom:2px solid var(--ink);
}
.modal__title{margin:0;font-size:clamp(18px,2.4vw,24px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.modal__sub{margin:7px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.2em;color:var(--ink-3)}
.modal__tools{display:flex;align-items:flex-start;gap:10px;flex:none;margin:-6px -6px 0 0}
.modal__pdf{
  font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:0 14px;height:38px;cursor:pointer;white-space:nowrap;
  background:none;border:1px solid var(--rule);color:var(--ink-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.modal__pdf:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.modal__close{
  flex:none;width:38px;height:38px;padding:0;
  background:none;border:1px solid var(--rule);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;font-size:17px;line-height:1;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.modal__close:hover{background:var(--ink);color:var(--ground);border-color:var(--ink)}

/* ---- お知らせ詳細モーダルの中身 ---- */
.article__meta{display:flex;align-items:center;gap:14px;padding-top:5px}
.article__date{
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.article__cat{
  font-size:9.5px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;
  padding:5px 10px;white-space:nowrap;border:1px solid var(--ink);
}
.article__cat[data-c="fill"]{background:var(--ink);color:var(--ground)}
.article__cat[data-c="line"]{color:var(--ink)}
.article__cat[data-c="mute"]{color:var(--ink-3);border-color:var(--rule)}
.article__title{
  margin:clamp(20px,3vw,28px) 0 0;font-size:clamp(20px,2.8vw,28px);font-weight:800;
  line-height:1.5;letter-spacing:.01em;text-wrap:balance;
}
.article__body{margin-top:clamp(22px,3.4vw,32px)}
/* CDジャケットやフライヤーなど、記事に添える画像です。1枚〜複数枚を横並びで、控えめなサイズに収めます。
   角丸なしでサイト全体の直線基調に合わせます */
.article__gallery{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:0 0 clamp(22px,3.4vw,32px);
}
.article__gallery img{
  width:200px;max-width:100%;height:auto;display:block;
  outline:1px solid var(--rule);outline-offset:-1px;
}
.article__body p{margin:0 0 1.2em;font-size:14.5px;line-height:2;color:var(--ink-2);text-wrap:pretty}
.article__body p:last-child{margin-bottom:0}
.article__body a{color:var(--ink);text-underline-offset:3px}
.article__body a:hover{color:var(--ink-2)}

/* ---- リスト本体：わかる人向けに詰めた組み ---- */
.eq{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.6vw,26px)}
@media (min-width:620px){.eq{grid-template-columns:repeat(2,minmax(0,1fr))}}
.eq__cat,.spec__cat{
  margin:0 0 2px;padding-bottom:7px;border-bottom:1px solid var(--ink);
  font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.eq__list{margin:0}
.eq__list div{
  display:grid;grid-template-columns:6.2em 1fr;gap:1px 12px;
  padding:7px 0;border-bottom:1px solid var(--rule-soft);
}
.eq__list dt{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--ink-3);padding-top:3px;
}
.eq__list dd{margin:0;font-size:12.5px;line-height:1.55}
.eq__list dd small{display:block;margin-top:1px;font-size:10.5px;line-height:1.5;color:var(--ink-3)}
/* 見出しで種類が分かるグループは、項目ごとのラベルを省いた素の一覧にします */
.eq__items{margin:0;padding:0;list-style:none}
.eq__items li{padding:7px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px;line-height:1.55}
.modal__note{margin:clamp(20px,3vw,28px) 0 0;font-size:10.5px;line-height:1.8;color:var(--ink-3)}

/* ============================================================
   information
   ============================================================ */
/* カテゴリのタブ */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(22px,3.5vh,32px)}
.filter__btn{
  font-family:inherit;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:10px 18px;cursor:pointer;
  background:none;color:var(--ink-2);border:1px solid var(--rule);
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.filter__btn:hover{color:var(--ink);border-color:var(--ink)}
.filter__btn.is-on{background:var(--ink);color:var(--ground);border-color:var(--ink)}

.info{border-top:2px solid var(--ink)}
.info__row[hidden]{display:none}
.info__empty{
  margin:0;padding:34px 4px;border-bottom:1px solid var(--rule-soft);
  color:var(--ink-3);font-size:13.5px;
}
.info__row{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:start;gap:10px 22px;
  /* <button> 化にともなうリセットです。border は先に全消しして border-bottom だけ後で復活させます */
  width:100%;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer;
  /* 右は矢印分の余白を確保します。左は4pxのままで、ホバー時にだけ広がります */
  padding:22px clamp(20px,3vw,32px) 22px 4px;border-bottom:1px solid var(--rule-soft);
  text-decoration:none;transition:background .22s ease,padding-left .22s ease;
}
.info__row:hover{background:var(--surface);padding-left:14px}
/* 日付とタブは行の高さに対して天地中央にします。タブは幅を揃えて文字も中央にします */
.info__date{
  font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  align-self:center;
}
.info__cat{
  font-size:9.5px;letter-spacing:.18em;font-weight:700;text-transform:uppercase;
  padding:5px 10px;white-space:nowrap;border:1px solid var(--ink);
  align-self:center;
  min-width:8.4em;text-align:center;   /* 一番長い RELEASE に合わせて全タブを同じ幅に */
}
.info__cat[data-c="fill"]{background:var(--ink);color:var(--ground)}
.info__cat[data-c="line"]{color:var(--ink)}
.info__cat[data-c="mute"]{color:var(--ink-3);border-color:var(--rule)}
.info__t{margin:0;font-size:16px;font-weight:800;line-height:1.65}
.info__d{margin:5px 0 0;font-size:13.5px;line-height:1.9;color:var(--ink-2);text-wrap:pretty}
.info__arrow{color:var(--ink);opacity:0;transform:translateX(-8px);transition:.24s ease;align-self:center}
.info__row:hover .info__arrow{opacity:1;transform:none}
@media (max-width:680px){
  .info__row{grid-template-columns:auto 1fr}
  .info__main{grid-column:1/-1}
  .info__arrow{display:none}
  /* 2カラムになると余った幅までタブが伸びるため、左寄せで本来の幅に戻します */
  .info__cat{justify-self:start}
}
.info__more{
  display:inline-flex;align-items:center;gap:12px;margin-top:var(--gap-action);
  /* <button> 化にともなうリセットです。border は先に全消しして border-bottom だけ後で復活させます */
  background:none;border:0;font-family:inherit;cursor:pointer;padding:0 0 7px;
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1px solid var(--rule);
  transition:color .2s,border-color .2s;
}
.info__more:hover{color:var(--ink);border-color:var(--ink)}
.info__more-arrow{display:inline-block;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.info__more[aria-expanded="true"] .info__more-arrow{transform:rotate(90deg)}

/* ============================================================
   video
   ============================================================ */
.vid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(22px,3vw,44px)}
@media (min-width:760px){.vid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vid__card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
.vid__thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;display:block;
  background:
    repeating-linear-gradient(var(--pa,112deg),rgba(255,255,255,.1) 0 1px,transparent 1px var(--pg,7px)),
    var(--solid);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
/* update-videos.php が差し込む実サムネイルです。画像が無いカードは上のCSS縞模様のままになります */
.vid__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vid__card:hover .vid__thumb{transform:translateY(-6px)}
.vid__play{
  position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;
  border:1px solid var(--on-solid);display:grid;place-items:center;transition:background .3s ease;
}
.vid__play::before{
  content:"";border-style:solid;border-width:8px 0 8px 13px;
  border-color:transparent transparent transparent var(--on-solid);margin-left:3px;transition:border-color .3s;
}
.vid__card:hover .vid__play{background:var(--on-solid)}
.vid__card:hover .vid__play::before{border-left-color:var(--solid)}
.vid__len{
  position:absolute;right:9px;bottom:9px;color:var(--on-solid);
  font-size:11px;font-weight:600;letter-spacing:.06em;font-variant-numeric:tabular-nums;
  border:1px solid rgba(255,255,255,.45);padding:2px 7px;
}
.vid__kind{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ink-3);margin-top:18px}
.vid__t{margin:8px 0 0;font-size:16px;font-weight:800;line-height:1.6}
.vid__m{margin:6px 0 0;font-size:12.5px;line-height:1.85;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vid__cta{
  display:inline-flex;align-items:center;gap:14px;margin-top:var(--gap-action);
  text-decoration:none;background:var(--solid);color:var(--on-solid);
  border:1px solid var(--solid);          /* 通常時は黒地に黒のため見えません */
  padding:16px 29px;font-weight:800;letter-spacing:.1em;font-size:13.5px;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
/* ホバーで白黒反転します。枠線だけ黒のまま残るため黒ふちになります */
.vid__cta:hover{transform:translateY(-3px);background:var(--ground);color:var(--ink)}

/* ============================================================
   footer
   ============================================================ */
/* 下端はメールボタンの分だけ余白を確保します（ボタン径＋余白＋34px） */
/* ============================================================
   Video とフッターの間の仕切り帯です。TOPと同じ光と粒子を薄く通します。
   本文は左に帯の分の余白があるため、その分だけ左へはみ出させて画面両端まで届かせます
   ============================================================ */
.band{
  position:relative;overflow:hidden;
  height:clamp(76px,11vh,132px);
  margin-left:calc(-1 * var(--rail));
  width:calc(100% + var(--rail));
}
.band__grad{
  position:absolute;inset:0;
  background:
    radial-gradient(140% 260% at 60% 130%,#2B3037 0%,#15181C 58%,#0E1013 100%),
    #0E1013;
}
.band__grad::before,.band__grad::after{
  content:"";position:absolute;will-change:transform;
}
.band__grad::before{
  left:2%;top:-160%;width:38%;height:420%;
  background:radial-gradient(closest-side,#FFFFFF 0%,rgba(255,255,255,.66) 36%,rgba(255,255,255,0) 74%);
  animation:bandA 17s ease-in-out infinite alternate;
}
.band__grad::after{
  right:6%;top:-180%;width:30%;height:460%;
  background:radial-gradient(closest-side,#FFFFFF 0%,rgba(255,255,255,.55) 32%,rgba(255,255,255,0) 72%);
  animation:bandB 23s ease-in-out infinite alternate;
}
@keyframes bandA{
  0%  {transform:translateX(-34%) scale(.9)}
  100%{transform:translateX(74%)  scale(1.16)}
}
@keyframes bandB{
  0%  {transform:translateX(28%)  scale(1.12)}
  100%{transform:translateX(-58%) scale(.88)}
}
.band::after{
  content:"";position:absolute;inset:-10%;
  background-image:var(--grain);
  background-size:200px 200px;
  opacity:.55;
  mix-blend-mode:overlay;
}

/* SNSリンクはTOPへ移したため、フッターは著作権表記の一行だけです。
   下だけ広いのは、右下の丸いボタンに文字が重ならないよう高さを確保しているためです */
.ft{
  padding:clamp(24px,4vh,40px) var(--pad)
          calc(34px + clamp(54px,4.6vw,64px) + clamp(18px,2.6vw,40px));
}
.ft__bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;color:var(--ink-3);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.ft__bot a{color:var(--ink-3);text-decoration:none}
.ft__bot a:hover{color:var(--ink)}

/* ============================================================
   motion
   ============================================================ */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* 読み込み直後は背景だけを見せ、1.3秒ほど置いてから中身をゆっくり出します。
   出だしを早めたい場合は各 animation-delay をまとめて小さくしてください */
.hero__figure{animation:slab 3.4s cubic-bezier(.16,.84,.24,1) 1.75s both}
.hero__card>*{animation:rise 2.4s cubic-bezier(.16,.84,.24,1) both}
.hero__card>*:nth-child(1){animation-delay:1.3s}
.hero__card>*:nth-child(2){animation-delay:1.55s;animation-duration:3.2s}  /* 名前 */
.hero__card>*:nth-child(3){animation-delay:2s}
.hero__card>*:nth-child(4){animation-delay:2.3s}
.hero__card>*:nth-child(5){animation-delay:2.55s}
.hero__card>*:nth-child(6){animation-delay:2.8s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* transform ではなく translate プロパティを使います。
   PC では .hero__figure が transform:translateY(-50%) で縦中央に置かれているため、
   transform を animate すると中央寄せが打ち消されてしまいます */
@keyframes slab{from{opacity:0;translate:0 16px}to{opacity:1;translate:0 0}}

/* ============================================================
   mobile ─ 帯は数px、ナビはハンバーガー
   ============================================================ */
@media (max-width:820px){
  /* 左の縦帯をやめ、画面上端の横帯に切り替えます。
     --rail を 0 にして本文の左余白を解除し、帯の高さは --hd と揃えます */
  :root{--rail:0px;--hd:54px}

  .rail{
    left:0;right:0;top:0;bottom:auto;
    width:auto;height:var(--hd);
    flex-direction:row;align-items:center;justify-content:flex-start;
    padding:0 var(--pad);
  }
  .rail__logo{
    writing-mode:horizontal-tb;margin:0;
    font-size:10px;letter-spacing:.16em;
  }
  .rail__spacer,.rail__scroll{display:none}

  /* ヘッダーは黒帯の上に重ねます。背景を消して黒帯を透かし、ボタンだけ白にします */
  .hd{
    top:0;left:0;right:0;height:var(--hd);z-index:130;
    background:none;backdrop-filter:none;
    justify-content:flex-end;
  }
  .hd__nav{display:none}
  .burger{display:flex;color:var(--on-solid)}

  /* メニューは黒帯の下に敷きます（帯は z-index 120のため、開いても隠れません） */
  .drawer{inset:0}
  /* メニューを開いているあいだは丸ボタンを引っ込めます */
  body.is-locked .mail{opacity:0;pointer-events:none}
}
@media (min-width:821px){
  .drawer{display:none}
}

/* ============================================================
   印刷（ブラウザの「PDFに保存」で機材リストだけを書き出します）
   ============================================================ */
@media print{
  @page{margin:16mm}
  body{padding-left:0;background:#fff}
  /* 機材リスト以外は出力しません */
  .rail,.hd,.drawer,.band,.mail,.hero,.sec,.ft,.modal__backdrop{display:none!important}
  .modal{position:static;display:block;padding:0;z-index:auto}
  .modal[hidden]{display:none!important}
  .modal__panel{
    width:100%;max-height:none;overflow:visible;padding:0;
    opacity:1!important;transform:none!important;
  }
  .modal__tools{display:none}
  .eq{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
  .eq__group{break-inside:avoid}
  .modal__note{margin-top:22px}
}