@charset "UTF-8";

/* =========================================================
   okayu — Yuki Oka Official Site
   Monotone base + pop accents
   ========================================================= */

:root{
  --paper:      #f5f2ec;
  --paper-2:    #ebe7df;
  --ink:        #0e0e0e;
  --ink-2:      #1b1b1b;
  --ink-soft:   #55514c;
  --line:       rgba(14,14,14,.14);
  --line-inv:   rgba(245,242,236,.18);

  --pink:       #d2419e;
  --yellow:     #fbd91c;

  --shadow-hard: 6px 6px 0 var(--ink);

  --font-display: "Chelsea Market", "Zen Maru Gothic", cursive;
  --font-body:    "Work Sans", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-round:   "Zen Maru Gothic", "Chelsea Market", sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 64px);
  --header-h: 76px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--header-h); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
mark{ background:linear-gradient(transparent 62%, var(--yellow) 62%); color:inherit; padding:0 .1em; }
::selection{ background:var(--yellow); color:var(--ink); }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ink); color:var(--paper); padding:12px 18px;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; }

/* ---------- header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  transition:background .35s ease, box-shadow .35s ease, height .35s ease;
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:var(--paper);
  opacity:0; transition:opacity .35s ease;
  border-bottom:1px solid var(--line);
}
.site-header.is-stuck::before{ opacity:1; }
.site-header__inner{
  position:relative; height:100%;
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.brand{ position:relative; z-index:95; display:inline-flex; align-items:center; gap:2px; isolation:isolate; }
.brand__text{
  position:relative;
  font-family:var(--font-display);
  font-size:27px; line-height:1; letter-spacing:.01em;
  padding:0 5px 4px;
}
.brand__text::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:7px;
  background:var(--yellow); border-radius:4px; z-index:-1;
  transform:rotate(-1.6deg); transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.9,.2,1), background-color .3s;
}
.brand:hover .brand__text::after{ transform:rotate(-1.6deg) scaleY(1.7); background:var(--pink); }
.brand__dot{
  width:6px; height:6px; border-radius:50%; background:var(--pink); flex:none;
  margin:-10px 0 0 2px;
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.brand:hover .brand__dot{ transform:translateY(-3px) scale(1.25); }

.nav{ display:flex; align-items:center; gap:clamp(18px,3vw,40px); margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav__link{
  position:relative; display:block;
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.02em; padding:6px 2px;
}
.nav__link span{ position:relative; display:block; }
.nav__link span::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:6px;
  background:var(--yellow); border-radius:3px;
  transform:scaleX(0); transform-origin:left; z-index:-1;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.nav__link:hover span::after,
.nav__link.is-active span::after{ transform:scaleX(1); }
.nav__link.is-active{ color:var(--ink); }

/* social */
.social{ display:flex; align-items:center; gap:14px; }
.social a{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--ink);
  transition:transform .28s cubic-bezier(.2,.9,.2,1), background-color .28s ease, color .28s ease;
}
.social svg{ width:19px; height:19px; }
.social a:hover{ background:var(--ink); color:var(--paper); transform:translateY(-3px) rotate(-6deg); }
.social--nav{ position:relative; z-index:95; padding-left:clamp(10px,2vw,22px); border-left:1px solid var(--line); }
.nav{ margin-right:0; }

.nav__close{ display:none; }
.burger{ display:none; width:44px; height:44px; margin-right:-10px; position:relative; }
.burger span{
  position:absolute; left:11px; right:11px; height:2.4px; background:var(--ink); border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.9,.2,1), opacity .2s;
}
.burger span:nth-child(1){ top:17px; }
.burger span:nth-child(2){ bottom:17px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-6.5px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  padding:calc(var(--header-h) + 30px) 0 90px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero::after{  /* paper texture */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(var(--line) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 40%, #000 20%, transparent 75%);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:center; gap:clamp(28px,4vw,56px);
}
.hero__eyebrow{
  font-family:var(--font-display);
  font-size:clamp(13px,1.3vw,15px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--pink); margin-bottom:14px;
}
.hero__eyebrow::before{
  content:""; display:inline-block; width:34px; height:2px; background:var(--pink);
  vertical-align:middle; margin-right:12px; transform:translateY(-3px);
}
.hero__title{
  font-family:var(--font-display);
  font-size:clamp(60px, 10vw, 132px);
  line-height:.92; letter-spacing:.005em; margin-bottom:18px;
}
.hero__title .line{ display:block; }
.hero__title em{
  font-style:normal; position:relative; display:inline-block;
  color:var(--paper);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
}
.hero__title em::before{
  content:""; position:absolute; left:-.05em; right:-.05em; bottom:.07em; height:.22em;
  background:var(--yellow); z-index:-1; transform:rotate(-1.2deg); border-radius:4px;
}
.hero__ja{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(19px,2.2vw,26px); letter-spacing:.08em; line-height:1.4;
}
.hero__ja span{ font-size:.62em; font-weight:500; color:var(--ink-soft); letter-spacing:.06em; }
.hero__lead{
  margin-top:20px; font-size:clamp(14px,1.5vw,16px); line-height:2.05; color:var(--ink-soft);
  font-weight:400;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-size:15px; letter-spacing:.03em;
  padding:14px 26px; border-radius:999px;
  border:2px solid var(--ink);
  transition:transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s, background-color .25s, color .25s;
}
.btn__icon{ width:17px; height:17px; transition:transform .25s ease; }
.btn__icon--lead{ margin-right:-2px; }
.btn--fill{ background:var(--ink); color:var(--paper); box-shadow:4px 4px 0 var(--pink); }
.btn--fill:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--pink); }
.btn--fill:hover .btn__icon{ transform:translateX(4px); }
.btn--line:hover{ background:var(--yellow); transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.btn--inv{ border-color:var(--paper); }
.btn--fill.btn--inv{ background:var(--paper); color:var(--ink); box-shadow:4px 4px 0 var(--yellow); }
.btn--fill.btn--inv:hover{ box-shadow:7px 7px 0 var(--yellow); }
.btn--line.btn--inv{ color:var(--paper); }
.btn--line.btn--inv:hover{ background:var(--pink); border-color:var(--pink); color:#fff; box-shadow:5px 5px 0 var(--paper); }

/* hero visual */
.hero__visual{ position:relative; justify-self:end; width:100%; max-width:640px; }
.hero__frame{
  position:relative; overflow:hidden;
  border-radius:8px 96px 8px 96px;
  border:2px solid var(--ink);
  box-shadow:14px 14px 0 var(--ink);
  background:var(--ink);
  animation:float 7s ease-in-out infinite;
}
.hero__frame img{ width:100%; aspect-ratio:1/1; object-fit:cover; filter:grayscale(1) contrast(1.06); }
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.sticker{
  position:absolute; z-index:3;
  font-family:var(--font-display); font-size:15px; letter-spacing:.06em;
  padding:9px 18px; border-radius:999px; border:2px solid var(--ink);
  white-space:nowrap;
}
.sticker--yellow{ background:var(--yellow); top:-16px; left:-18px; transform:rotate(-9deg); }
.sticker--pink{ background:var(--pink); color:#fff; border-color:var(--ink); bottom:26px; right:-14px; transform:rotate(7deg); }
.hero__blob{ position:absolute; border-radius:50%; z-index:-1; }
.hero__blob--1{ width:150px; height:150px; background:var(--pink); opacity:.16; top:-46px; right:36px; filter:blur(6px); }
.hero__blob--2{ width:210px; height:210px; background:var(--yellow); opacity:.4; bottom:-58px; left:-56px; filter:blur(8px); }

.scroll-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.2em; color:var(--ink-soft);
}
.scroll-cue span{ display:block; width:1.6px; height:44px; background:var(--line); position:relative; overflow:hidden; }
.scroll-cue span::after{
  content:""; position:absolute; inset:0; background:var(--ink);
  animation:cue 1.9s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 55%,100%{ transform:translateY(100%) } }

/* ---------- marquee ---------- */
.marquee{
  background:var(--ink); color:var(--paper);
  border-block:2px solid var(--ink);
  padding:13px 0; overflow:hidden;
}
.marquee__track{ display:flex; width:max-content; animation:slide 26s linear infinite; }
.marquee__track span{
  font-family:var(--font-display); font-size:clamp(17px,2vw,23px); letter-spacing:.05em;
  padding-right:.28em; white-space:nowrap;
}
.marquee__track b{ color:var(--yellow); font-weight:400; padding:0 6px; }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ---------- sections ---------- */
.section{ padding:clamp(84px,11vw,150px) 0; position:relative; }
.section--listen,
.section--contact{ background:var(--ink); color:var(--paper); }
.section--show{ background:var(--paper-2); }

.sec-head{ margin-bottom:clamp(38px,5vw,64px); }
.sec-head__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(46px,7.5vw,92px); line-height:1; letter-spacing:.01em;
  margin:0;
}

/* ---------- about ---------- */
.about{ display:grid; grid-template-columns:1.25fr .85fr; gap:clamp(34px,5vw,72px); }
.about__body p{ margin-bottom:1.5em; font-size:15.5px; line-height:2.15; color:var(--ink-soft); }
.about__body p:last-child{ margin-bottom:0; }
.about__body em{ font-style:italic; font-weight:500; color:var(--ink); }

.facts{ border-top:2px solid var(--ink); }
.facts__row{ display:grid; grid-template-columns:104px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.facts dt{ font-family:var(--font-display); font-size:13px; letter-spacing:.06em; color:var(--pink); padding-top:5px; }
.facts dd{ font-size:14.5px; line-height:1.85; }
.facts__note{ font-size:12.5px; color:var(--ink-soft); }


/* ---------- show ---------- */
.show__label{
  font-family:var(--font-display); font-size:14px; letter-spacing:.12em;
  display:inline-flex; align-items:center; gap:10px; margin-bottom:20px;
}
.show__label::before{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--pink);
  box-shadow:0 0 0 0 rgba(210,65,158,.6); animation:pulse 2.2s infinite;
}
@keyframes pulse{ 70%{ box-shadow:0 0 0 12px rgba(210,65,158,0) } 100%{ box-shadow:0 0 0 0 rgba(210,65,158,0) } }

.gig{
  display:grid; grid-template-columns:190px 1fr; gap:clamp(24px,4vw,50px);
  background:var(--paper); border:2px solid var(--ink); border-radius:6px 44px 6px 44px;
  padding:clamp(26px,3.6vw,44px);
  box-shadow:var(--shadow-hard);
  transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
}
.gig:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--ink); }
.gig__date time{ display:block; border-right:1px solid var(--line); padding-right:20px; }
.gig__ym{ display:block; font-family:var(--font-display); font-size:16px; letter-spacing:.06em; color:var(--ink-soft); }
.gig__day{
  display:block; font-family:var(--font-display); font-size:clamp(62px,9vw,96px); line-height:.9;
  letter-spacing:-.01em;
}
.gig__dow{
  display:inline-block; margin-top:6px; font-family:var(--font-display); font-size:13px; letter-spacing:.1em;
  background:var(--yellow); padding:3px 12px; border-radius:999px; border:1.6px solid var(--ink);
}
.gig__title{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(25px,3.4vw,38px); line-height:1.2; margin-bottom:12px;
}
.gig__venue{ font-family:var(--font-round); font-weight:500; font-size:16px; margin-bottom:16px; }
.gig__venue a{ border-bottom:2px solid var(--pink); padding-bottom:1px; transition:color .25s; display:inline-flex; align-items:center; gap:5px; }
.gig__venue a:hover{ color:var(--pink); }
.ex{ width:14px; height:14px; transform:rotate(-45deg); }
.gig__time{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.chip{
  font-family:var(--font-display); font-size:12.5px; letter-spacing:.05em;
  padding:6px 14px; border-radius:999px; border:1.6px solid var(--ink);
}
.chip--fill{ background:var(--ink); color:var(--paper); }
.gig__members{ border-top:1px dashed var(--line); padding-top:20px; }
.gig__members-label{ font-family:var(--font-display); font-size:12px; letter-spacing:.16em; color:var(--pink); margin-bottom:10px; }
.gig__members ul{ display:flex; flex-wrap:wrap; gap:10px 34px; }
.gig__members li{ display:flex; align-items:baseline; gap:9px; font-size:15px; }
.mem__name{ font-family:var(--font-round); font-weight:500; letter-spacing:.04em; }
.mem__inst{ font-family:var(--font-display); font-size:12px; color:var(--ink-soft); letter-spacing:.05em; }
.show__more{ margin-top:30px; font-size:14px; color:var(--ink-soft); }
.show__more a{ border-bottom:1.6px solid var(--pink); font-weight:500; }
.show__more a:hover{ color:var(--pink); }

/* ---------- listen ---------- */
.ytlite{
  position:relative; border-radius:6px; overflow:hidden;
  border:2px solid var(--paper); background:#000;
  aspect-ratio:16/9;
}
.ytlite__btn{ display:block; width:100%; height:100%; position:relative; }
.ytlite img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(1.04); transition:filter .45s ease, transform .6s cubic-bezier(.2,.9,.2,1); }
.ytlite:hover img{ filter:grayscale(0) brightness(1.1); transform:scale(1.035); }
.ytlite__play{
  position:absolute; left:16px; bottom:16px; width:58px; height:58px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--paper); color:var(--ink); border:2px solid var(--ink);
  transition:transform .3s cubic-bezier(.2,.9,.2,1), background-color .3s, color .3s;
}
.ytlite__play svg{ width:22px; height:22px; margin-left:3px; }
.ytlite:hover .ytlite__play{ transform:scale(1.12); background:var(--yellow); }
.ytlite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__caption{
  margin-top:12px; font-family:var(--font-round); font-weight:500;
  font-size:14.5px; letter-spacing:.03em; color:rgba(245,242,236,.9);
}
.video__caption em{ font-style:normal; color:rgba(245,242,236,.5); font-size:.9em; }
.video-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.video-grid > li{ display:flex; flex-direction:column; }
.slide-bar{ display:none; }
.listen__more{ margin-top:clamp(36px,5vw,56px); text-align:center; }


/* ---------- gallery ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.8vw,22px);
  grid-auto-flow:dense;
}
.ph{
  position:relative; overflow:hidden;
  border:2px solid var(--ink); border-radius:4px;
  background:
    repeating-linear-gradient(45deg, transparent 0 9px, rgba(14,14,14,.045) 9px 18px),
    var(--paper-2);
  transition:transform .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s;
}
.ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:filter .5s ease, transform .7s cubic-bezier(.2,.9,.2,1); }
.ph:hover img{ filter:grayscale(0); transform:scale(1.05); }
.ph:hover{ transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink); z-index:2; }
.ph figcaption{
  position:absolute; left:0; bottom:0; z-index:2;
  font-family:var(--font-display); font-size:11px; letter-spacing:.12em;
  background:var(--ink); color:var(--paper); padding:5px 12px;
  opacity:0; transform:translateY(100%); transition:transform .3s, opacity .3s;
}
.ph:hover figcaption{ opacity:1; transform:translateY(0); }
/* empty-state (画像未設置のときの枠) */
.ph.is-empty img{ display:none; }
.ph.is-empty:hover{ transform:none; box-shadow:none; }
.ph.is-empty figcaption{
  position:absolute; inset:0; opacity:1; transform:none;
  display:grid; place-items:center;
  background:transparent; color:rgba(14,14,14,.34);
  font-size:12px;
}
.ph.is-empty::before{
  content:""; position:absolute; inset:auto 14px 14px auto;
  width:36px; height:36px; border-radius:50%; background:var(--yellow); opacity:.6;
}
.ph.is-empty:nth-child(3n)::before{ background:var(--pink); opacity:.35; }
.ph.is-empty:nth-child(3n+1)::before{ background:var(--ink); opacity:.1; }

.ph--1{ grid-column:span 2; aspect-ratio:16/11; }
.ph--2{ grid-column:span 1; aspect-ratio:3/4; }
.ph--3{ grid-column:span 1; aspect-ratio:3/4; }
.ph--4{ grid-column:span 1; aspect-ratio:1/1; }
.ph--5{ grid-column:span 2; aspect-ratio:16/10; }
.ph--6{ grid-column:span 1; aspect-ratio:1/1; }
.ph--7{ grid-column:span 1; aspect-ratio:4/5; }
.ph--8{ grid-column:span 3; aspect-ratio:24/9; }

/* ---------- contact ---------- */
.contact{ text-align:center; }
.contact__lead strong{ font-weight:700; color:var(--paper); }
.contact__lead{
  font-family:var(--font-round); font-weight:500;
  font-size:clamp(16px,2.1vw,21px); line-height:2; letter-spacing:.05em;
  color:rgba(245,242,236,.9);
}
.contact__actions{ display:flex; justify-content:center; margin-top:40px; }
.x-btn{
  display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--paper);
  box-shadow:4px 4px 0 var(--yellow);
  transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s;
}
.x-btn svg{ width:21px; height:21px; }
.x-btn:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--yellow); }
.br-sp{ display:none; }

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:var(--paper); border-top:1px solid var(--line-inv); padding:34px 0; }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px; }
.footer__brand{ font-family:var(--font-display); font-size:22px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:20px; font-family:var(--font-display); font-size:13.5px; }
.footer__nav a{ color:rgba(245,242,236,.72); transition:color .25s; }
.footer__nav a:hover{ color:var(--yellow); }
.footer__copy{ font-size:12px; letter-spacing:.06em; color:rgba(245,242,236,.5); }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.9,.2,1), transform .8s cubic-bezier(.2,.9,.2,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width:1020px){
  .hero__inner{ grid-template-columns:1fr; gap:44px; }
  .hero__visual{ justify-self:center; max-width:430px; }
  .hero{ padding-bottom:110px; }
  .about{ grid-template-columns:1fr; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  :root{ --header-h:64px; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:90;
    flex-direction:column; justify-content:center; gap:34px;
    background:var(--paper);
    padding:var(--header-h) var(--gut) 40px;
    clip-path:circle(0% at calc(100% - 34px) 32px);
    transition:clip-path .55s cubic-bezier(.7,0,.2,1);
    pointer-events:none;
  }
  .nav.is-open{ clip-path:circle(150% at calc(100% - 34px) 32px); pointer-events:auto; }
  .nav__list{ flex-direction:column; gap:6px; text-align:center; }
  .nav__link{ font-size:31px; padding:9px 4px; }
  .nav__link span::after{ height:9px; bottom:2px; }
  /* SNSアイコンはヘッダーに小さく常時表示 */
  .social--nav{ border-left:0; padding-left:0; gap:0; margin-left:auto; margin-right:6px; }
  .social--nav a{ width:32px; height:32px; border:0; }
  .social--nav svg{ width:17px; height:17px; }
  .social--nav a:hover{ background:none; color:var(--pink); transform:none; }

  /* メニューを閉じる × ボタン（バーガーと同じ位置に差し替え） */
  .nav__close{
    display:grid; place-items:center;
    position:absolute; top:10px; right:calc(var(--gut) - 10px);
    width:44px; height:44px; color:var(--ink);
  }
  .nav__close svg{ width:22px; height:22px; }
  body.is-locked .burger{ opacity:0; pointer-events:none; }
  body.is-locked{ overflow:hidden; }

  .gig{ grid-template-columns:1fr; }
  .gig__date time{ border-right:0; border-bottom:1px solid var(--line); padding:0 0 14px; display:flex; align-items:baseline; gap:12px; }
  .gig__day{ font-size:56px; }
  .gig__ym{ order:-1; }

  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-flow:row; }
  .ph--1{ grid-column:span 2; aspect-ratio:16/10; }
  .ph--8{ grid-column:span 2; aspect-ratio:16/9; }
  .ph--2,.ph--3,.ph--4,.ph--5,.ph--6,.ph--7{ grid-column:span 1; aspect-ratio:3/4; }

  .footer__inner{ flex-direction:column; text-align:center; }
}

/* Listen: モバイルは横スワイプのスライダー */
@media (max-width:700px){
  .video-grid{
    display:flex; grid-template-columns:none;
    overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    gap:14px; padding-bottom:6px;
    margin-inline:calc(var(--gut) * -1);
    padding-inline:var(--gut);
    scrollbar-width:none;
  }
  .video-grid::-webkit-scrollbar{ display:none; }
  .video-grid > li{ flex:0 0 76%; scroll-snap-align:center; }
  .slide-bar{
    display:block; position:relative; height:3px; border-radius:3px;
    background:rgba(245,242,236,.16); margin:20px auto 0; width:112px;
  }
  .slide-bar span{
    position:absolute; top:0; bottom:0; left:0; width:32px;
    border-radius:3px; background:var(--yellow);
    transition:transform .12s linear;
  }
}

/* ===== モバイルのファーストビュー：写真を主役に ===== */
@media (max-width:700px){
  /* 最上部では写真の上にヘッダーを透過で重ね、ロゴを白抜きにする */
  .site-header:not(.is-stuck) .brand__text{ color:var(--paper); }
  .site-header:not(.is-stuck) .burger span{ background:var(--paper); }
  /* メニューを開いている間は地色の上なのでインクに戻す */
  .site-header:not(.is-stuck) .social--nav a{ color:var(--paper); }
  body.is-locked .site-header:not(.is-stuck) .brand__text{ color:var(--ink); }
  body.is-locked .site-header:not(.is-stuck) .burger span{ background:var(--ink); }
  body.is-locked .site-header:not(.is-stuck) .social--nav a{ color:var(--ink); }

  .hero{ min-height:100svh; padding:0; align-items:stretch; }
  .hero::after{ display:none; }
  .hero__inner{
    display:block; position:relative;
    height:100svh; max-width:none; padding:0;
  }

  .hero__visual{
    position:absolute; inset:0;
    width:auto; max-width:none; justify-self:auto;
  }
  .hero__frame{
    height:100%; border:0; border-radius:0; box-shadow:none; animation:none;
  }
  .hero__frame img{
    width:100%; height:100%; aspect-ratio:auto;
    object-fit:cover; object-position:54% 16%;
  }
  .hero__blob{ display:none; }
  .sticker{ display:none; }
  .scroll-cue{ display:none; }

  /* 写真の上に直接のせる。下から暗いスクリムをかけて可読性を確保 */
  .hero__copy{
    position:absolute; left:0; right:0; bottom:0; z-index:3;
    padding:150px var(--gut) 34px;
    background:linear-gradient(to top,
      rgba(10,10,10,.94) 0%, rgba(10,10,10,.86) 34%,
      rgba(10,10,10,.55) 62%, rgba(10,10,10,0) 100%);
    color:var(--paper);
  }
  .hero__eyebrow{ margin-bottom:6px; font-size:11px; letter-spacing:.2em; color:#ff7ac6; }
  .hero__eyebrow::before{ width:22px; margin-right:8px; background:#ff7ac6; }
  .hero__title{ font-size:clamp(44px,13.5vw,58px); margin-bottom:8px; color:var(--paper); }
  .hero__title em{ color:transparent; -webkit-text-stroke:1.8px var(--paper); }
  .hero__title em::before{ height:.2em; bottom:.06em; }
  .hero__ja{ font-size:17px; color:var(--paper); }
  .hero__lead{ margin-top:8px; font-size:12.5px; line-height:1.8; color:rgba(245,242,236,.82); }
  .hero__actions{ margin-top:18px; gap:9px; }
  .hero__actions .btn{ padding:10px 18px; font-size:13px; gap:7px; border-color:var(--paper); }
  .hero__actions .btn__icon{ width:15px; height:15px; }
  .hero__actions .btn--fill{ background:var(--paper); color:var(--ink); box-shadow:4px 4px 0 var(--pink); }
  .hero__actions .btn--line{ color:var(--paper); }
}

@media (max-width:560px){
  .btn{ padding:13px 22px; font-size:14px; }
  .br-sp{ display:inline; }
  .facts__row{ grid-template-columns:1fr; gap:4px; }
  .facts dt{ padding-top:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  /* 横に流れるバーは止めず、速度を落として動かし続ける */
  .marquee__track{
    animation-name:slide !important;
    animation-duration:70s !important;
    animation-iteration-count:infinite !important;
    animation-timing-function:linear !important;
  }
}