@charset "UTF-8";

/* =========================================================
   okayu — Yuki Oka Official Site
   モノトーン + ビビッドオレンジ / 見出しは Arciform
   ========================================================= */

@font-face{
  font-family:"Arciform";
  src:url("/assets/fonts/arciform.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:      #f5f2ec;
  --paper-2:    #ebe7df;
  --ink:        #2c1e15;   /* 濃い茶 */
  --ink-soft:   #6a574a;
  --line:       rgba(44,30,21,.16);
  --line-inv:   rgba(245,242,236,.18);

  --accent:     #ff5a1f;   /* ビビッドオレンジ */
  --accent-2:   #ff8f5a;   /* 暗背景で使う明るめのオレンジ */

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

  --font-display: "Arciform", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --font-body:    "Work Sans", "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-round:   "Zen Maru Gothic", "Hiragino Maru Gothic ProN", 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 58%, rgba(255,90,31,.42) 58%); color:inherit; padding:0 .1em; }
::selection{ background:var(--accent); color:#fff; }

.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(--accent); outline-offset:3px; }

/* ---------- 見出し系は Arciform の小文字で統一 ---------- */
.brand__text, .nav__link, .hero__eyebrow, .hero__title, .btn,
.sec-head__title, .marquee__track span, .chip, .scroll-cue,
.gig__ym, .gig__day, .gig__dow, .gig__title, .gig__members-label,
.show__label, .lesson__unit, .lesson__amount,
.lesson__plus, .lesson__row dt, .sticker, .ph figcaption,
.footer__brand, .footer__nav a{
  font-family:var(--font-display);
  text-transform:lowercase;
  font-weight:400;
}

/* ---------- 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:18px;
}
.brand{
  position:relative; z-index:95;
  display:inline-flex; align-items:center; gap:2px; isolation:isolate;
}
.brand__text{
  position:relative;
  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(--accent); border-radius:4px; z-index:-1;
  transform:rotate(-1.6deg); transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.brand:hover .brand__text::after{ transform:rotate(-1.6deg) scaleY(1.7); }
.brand__dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent); 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(14px,2vw,28px); margin-left:auto; }
.nav__list{ display:flex; align-items:center; gap:clamp(11px,1.5vw,22px); }
.nav__link{
  position:relative; display:block;
  font-size:16px; letter-spacing:.02em; padding:6px 2px;
  /* 下線(::after)を z-index:-1 で敷くため、ヘッダー背景の裏に回らないよう
     リンクごとに重ね合わせコンテキストを作る */
  isolation:isolate;
}
.nav__link span{ position:relative; display:block; }
.nav__link span::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:6px;
  background:var(--accent); 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__list:hover .nav__link.is-active:not(:hover) span::after{ transform:scaleX(0); }
.nav__close{ display:none; }

/* 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,1.6vw,18px); border-left:1px solid var(--line);
}

.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{
  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-size:clamp(13px,1.3vw,15px); letter-spacing:.2em;
  color:var(--accent); margin-bottom:14px;
}
.hero__title{
  font-size:clamp(62px, 10.5vw, 138px);
  line-height:.96; letter-spacing:0; margin-bottom:16px;
}
.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:-.04em; right:-.04em; bottom:.2em; height:.26em;
  background:var(--accent); 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__official{
  margin-top:6px;
  font-family:var(--font-round); font-weight:500;
  font-size:clamp(17px,2vw,24px); letter-spacing:.14em; line-height:1.4;
  color:var(--ink-soft);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  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(--accent); }
.btn--fill:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--accent); }
.btn--fill:hover .btn__icon{ transform:translateX(4px); }
.btn--line:hover{ background:var(--accent); border-color:var(--accent); color:#fff; 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(--accent); }
.btn--fill.btn--inv:hover{ box-shadow:7px 7px 0 var(--accent); }
.btn--line.btn--inv{ color: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(--accent);
  box-shadow:14px 14px 0 var(--accent);
  background:var(--ink);
  animation:float 7s ease-in-out infinite;
}
.hero__frame img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:50% 22%;
  filter:grayscale(.62) sepia(.42) saturate(1.25) contrast(1.06) brightness(1.03);
}
/* 温かみを足すカラーウォッシュ */
.hero__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg, rgba(255,150,70,.28) 0%, rgba(255,90,31,.14) 45%, rgba(70,38,20,.36) 100%);
  mix-blend-mode:soft-light;
}
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("/assets/img/grain.png");
  background-repeat:repeat;
  background-size:128px 128px;
}
@keyframes float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

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

.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-size:12px; letter-spacing:.18em; 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 var(--marquee-dur, 26s) linear infinite; }
.marquee__track span{
  font-size:clamp(19px,2.1vw,25px); letter-spacing:.04em;
  padding-right:.28em; white-space:nowrap;
}
.marquee__track b{ color:var(--accent); font-weight:400; padding:0 6px; }
@keyframes slide{ to{ transform:translateX(-50%) } }

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

.sec-head{ margin-bottom:clamp(38px,5vw,64px); }
.sec-head__title{
  font-size:clamp(46px,7vw,86px); line-height:1; letter-spacing:0; margin:0;
}

/* ---------- profile ---------- */
.profile{
  display:grid; grid-template-columns:minmax(190px,.3fr) minmax(0,.7fr);
  gap:clamp(28px,4vw,64px);
}
.profile__name{
  position:sticky; top:calc(var(--header-h) + 40px); align-self:start;
  width:fit-content;
  /* 姓と名で列を作り、ふりがなを漢字と同じ列に載せて頭を揃える */
  display:grid; grid-template-columns:auto auto; justify-content:start;
  column-gap:clamp(14px,1.8vw,22px);
}
.profile__name-ja,
.profile__name-kana{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:auto auto;  /* subgrid 非対応ブラウザ向け */
  grid-template-columns:subgrid;
}
.profile__name-ja{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(24px,2.9vw,32px); letter-spacing:.1em; line-height:1.4;
}
.profile__name-kana{
  font-family:var(--font-round); font-weight:500;
  font-size:12.5px; letter-spacing:.22em; color:var(--ink-soft); margin-top:2px;
}
.profile__name::after{
  content:""; grid-column:1 / -1; display:block; width:100%; height:4px; border-radius:2px;
  background:var(--accent); margin-top:16px;
}
.profile__main{ max-width:62ch; }
.profile__main p{ margin-bottom:1.15em; font-size:15.5px; line-height:2.15; color:var(--ink-soft); }
.profile__main p:last-child{ margin-bottom:0; }

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

.gig{
  display:grid; grid-template-columns:170px 1fr; gap:clamp(20px,3vw,40px);
  background:var(--paper); border:2px solid var(--ink); border-radius:6px 40px 6px 40px;
  padding:clamp(22px,2.6vw,32px);
  box-shadow:var(--shadow-hard);
  transition:transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
}
/* 公演どうしは少し離す */
.gig + .gig{ margin-top:clamp(22px,3vw,34px); }
.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-size:16px; letter-spacing:.04em; color:var(--ink-soft); }
.gig__day{ display:block; font-size:clamp(54px,6.6vw,78px); line-height:1; letter-spacing:-.01em; }
.gig__dow{
  display:inline-block; margin-top:4px; font-size:14px; letter-spacing:.06em;
  background:var(--accent); color:#fff; padding:3px 14px; border-radius:999px; border:1.6px solid var(--ink);
}
.gig__title{ font-size:clamp(24px,3vw,34px); line-height:1.15; margin-bottom:8px; }
.gig__venue{ font-family:var(--font-round); font-weight:500; font-size:15.5px; margin-bottom:12px; }
.gig__venue a{ border-bottom:2px solid var(--accent); padding-bottom:1px; transition:color .25s; display:inline-flex; align-items:center; gap:5px; }
.gig__venue a:hover{ color:var(--accent); }
.ex{ width:14px; height:14px; transform:rotate(-45deg); }
.gig__time{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip{
  font-size:14px; letter-spacing:.03em;
  padding:5px 15px; 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:14px; }
.gig__members-label{ font-size:13px; letter-spacing:.12em; color:var(--accent); margin-bottom:6px; }
.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); text-transform:lowercase; font-size:13px; color:var(--ink-soft); letter-spacing:.04em; }
.gig__note{ font-size:14px; color:var(--ink-soft); margin-bottom:14px; }
.gig-empty{
  border:2px dashed var(--line); border-radius:8px 44px 8px 44px;
  padding:clamp(32px,5vw,56px); text-align:center;
  font-family:var(--font-round); font-weight:500; font-size:15px; color:var(--ink-soft);
}
.show__more{ margin-top:30px; font-size:14px; color:var(--ink-soft); }
.show__more a{ border-bottom:1.6px solid var(--accent); font-weight:500; }
.show__more a:hover{ color:var(--accent); }

/* ---------- music (coming soon) ---------- */
.soon{
  border:2px dashed var(--line); border-radius:8px 48px 8px 48px;
  padding:clamp(40px,6vw,72px) clamp(24px,4vw,48px);
  text-align:center;
}
.soon__icon{
  display:grid; place-items:center; width:66px; height:66px; margin:0 auto 20px;
  border-radius:50%; background:var(--accent); color:#fff;
  transform:rotate(-6deg);
}
.soon__icon svg{ width:30px; height:30px; }
.soon__when{
  display:inline-block; font-family:var(--font-round); font-weight:700;
  font-size:14px; letter-spacing:.14em; margin-bottom:14px;
  color:#fff; background:var(--accent); border-radius:999px; padding:5px 18px;
  transform:rotate(-1.5deg);
}
.soon__label{
  font-family:var(--font-round); font-weight:700;
  font-size:clamp(22px,3.4vw,32px); line-height:1.45; margin-bottom:14px; letter-spacing:.04em;
}
.soon__text{ font-size:14.5px; color:var(--ink-soft); }

/* ---------- movie ---------- */
.ytlite{
  position:relative; border-radius:6px; overflow:hidden;
  border:2px solid var(--paper); background:var(--ink);
  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(--accent); color:#fff; border-color:var(--accent); }
.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; }

/* ---------- lesson ---------- */
.lesson{
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  background:var(--paper); border:2px solid var(--ink);
  border-radius:8px 48px 8px 48px; overflow:hidden;
  box-shadow:var(--shadow-hard);
}
.lesson__price{
  background:var(--ink); color:var(--paper);
  padding:clamp(32px,4vw,48px) clamp(20px,3vw,34px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
.lesson__unit{ font-size:16px; letter-spacing:.14em; color:rgba(245,242,236,.7); }
.lesson__amount{ display:flex; align-items:baseline; gap:4px; margin:2px 0 10px; }
.lesson__num{ font-family:var(--font-display); font-size:clamp(54px,7.5vw,86px); line-height:1; color:var(--accent-2); }
.lesson__yen{ font-family:var(--font-round); font-weight:500; font-size:20px; }
.lesson__plus{
  font-size:13px; letter-spacing:.08em;
  border:1.6px solid var(--line-inv); border-radius:999px; padding:5px 16px;
  color:rgba(245,242,236,.8);
}
.lesson__notes{ padding:clamp(28px,4vw,46px) clamp(24px,3.4vw,44px); }
.lesson__row{ display:grid; grid-template-columns:78px 1fr; gap:16px; padding:14px 0; border-bottom:1px dashed var(--line); }
.lesson__row:first-child{ padding-top:0; }
.lesson__row dt{ font-size:14px; letter-spacing:.06em; color:var(--accent); padding-top:4px; }
.lesson__row dd{ font-size:15px; line-height:1.95; }
.lesson__cta{ margin-top:24px; font-family:var(--font-round); font-weight:500; text-transform:none; font-size:14px; }

/* ---------- photo ---------- */
.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(44,30,21,.05) 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-size:12px; letter-spacing:.1em;
  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); }
.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(44,30,21,.34);
  font-size:13px;
}
.ph.is-empty::before{
  content:""; position:absolute; inset:auto 14px 14px auto;
  width:36px; height:36px; border-radius:50%; background:var(--accent); opacity:.5;
}
.ph.is-empty:nth-child(3n)::before{ opacity:.25; }
.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{
  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);
}
.br-sp{ display:none; }

/* フォーム */
.cform{
  max-width:660px; margin:clamp(30px,4vw,44px) auto 0;
  text-align:left;
  background:var(--paper); color:var(--ink);
  border:2px solid var(--paper); border-radius:14px 56px 14px 56px;
  padding:clamp(26px,3.6vw,44px);
  box-shadow:8px 8px 0 var(--accent);
}
.cform__grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.cfield{ margin-bottom:18px; }
.cfield__label{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-round); font-weight:700;
  font-size:13px; letter-spacing:.08em; margin-bottom:7px;
}
.cfield__req{
  font-size:10.5px; letter-spacing:.1em; font-weight:700;
  background:var(--accent); color:#fff; border-radius:999px; padding:2px 9px;
}
.cfield__input{
  width:100%; font:inherit; font-size:15px; color:var(--ink);
  background:var(--paper-2);
  border:2px solid transparent; border-radius:14px;
  padding:12px 16px;
  transition:border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cfield__input::placeholder{ color:rgba(44,30,21,.34); }
.cfield__input:hover{ background:#e5e0d6; }
.cfield__input:focus{
  outline:none; background:var(--paper);
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,90,31,.18);
}
.cfield__input--area{ resize:vertical; min-height:130px; line-height:1.9; }
.cfield__input.is-invalid{ border-color:#d33; background:#fdf1ef; }

/* ハニーポット（スパム対策・人には見せない） */
.cform__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.cform__foot{ display:flex; align-items:center; flex-wrap:wrap; gap:14px 18px; margin-top:24px; }
.cform__submit{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display); text-transform:lowercase;
  font-size:16px; letter-spacing:.04em;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--ink); border-radius:999px;
  padding:13px 30px;
  box-shadow:4px 4px 0 var(--accent);
  transition:transform .25s cubic-bezier(.2,.9,.2,1), box-shadow .25s, opacity .25s;
}
.cform__submit svg{ width:17px; height:17px; transition:transform .25s ease; }
.cform__submit:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--accent); }
.cform__submit:hover svg{ transform:translateX(4px); }
.cform__submit[disabled]{ opacity:.55; pointer-events:none; }
.cform__note{ font-size:12.5px; color:var(--ink-soft); line-height:1.8; }

.cform__status{
  margin-top:18px; font-size:14px; line-height:1.9;
  font-family:var(--font-round); font-weight:500;
  border-radius:14px; padding:14px 18px;
  display:none;
}
.cform__status.is-shown{ display:block; }
.cform__status.is-ok{ background:rgba(255,90,31,.12); border:1.6px dashed var(--accent); }
.cform__status.is-ng{ background:#fdf1ef; border:1.6px dashed #d33; color:#8a2b2b; }
.cform__status a{ color:var(--accent); font-weight:700; border-bottom:1.6px solid var(--accent); }

/* ---------- 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-size:24px; }
.footer__nav{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:14.5px; }
.footer__nav a{ color:rgba(245,242,236,.72); transition:color .25s; }
.footer__nav a:hover{ color:var(--accent-2); }
.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; }
  .profile{ grid-template-columns:1fr; gap:24px; }
  .profile__name{ position:static; }
  .profile__name::after{ margin-top:12px; }
  .video-grid{ grid-template-columns:repeat(2,1fr); }
  .lesson{ grid-template-columns: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:2px; text-align:center; }
  .nav__link{ font-size:28px; padding:7px 4px; }
  .nav__link span::after{ height:8px; bottom:3px; }

  /* 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(--accent); 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; }
  /* 年月・日・曜日を1行に並べ、下端で揃える。
     文字は line-height:.5 にして行ボックスの下端＝ベースラインに合わせることで、
     ディセンダ分の余白が入らず、曜日ピルの下辺とぴったり揃う */
  .gig__date time{
    border-right:0; border-bottom:1px solid var(--line); padding:14px 0;
    display:flex; align-items:flex-end; gap:12px;
  }
  .gig__day{ font-size:56px; line-height:.5; }
  .gig__ym{ order:-1; line-height:.5; }
  .gig__dow{ margin-top:0; line-height:1.4; }


  .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; }
  .footer__nav{ justify-content:center; }
}

/* Movie: モバイルは横スワイプのスライダー */
@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(--accent);
    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(38,26,18,.95) 0%, rgba(38,26,18,.88) 34%,
      rgba(38,26,18,.58) 62%, rgba(38,26,18,0) 100%);
    color:var(--paper);
  }
  .hero__eyebrow{ margin-bottom:6px; font-size:11.5px; letter-spacing:.18em; color:var(--accent-2); }
  .hero__title{ font-size:clamp(46px,14vw,62px); margin-bottom:8px; color:var(--paper); }
  .hero__title em{ color:transparent; -webkit-text-stroke:1.8px var(--paper); }
  .hero__title em::before{ height:.24em; bottom:.18em; }
  .hero__ja{ font-size:17px; color:var(--paper); }
  .hero__official{ margin-top:4px; font-size:15px; letter-spacing:.12em; color:rgba(245,242,236,.82); }
  .hero__actions{ margin-top:18px; gap:9px; }
  .hero__actions .btn{ padding:10px 18px; font-size:13.5px; 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(--accent); }
  .hero__actions .btn--line{ color:var(--paper); }
}

@media (max-width:560px){
  .btn{ padding:13px 22px; font-size:14px; }
  .cform__grid{ grid-template-columns:1fr; }
  .cform{ border-radius:12px 40px 12px 40px; box-shadow:6px 6px 0 var(--accent); }
  .br-sp{ display:inline; }
  .lesson__row{ grid-template-columns:1fr; gap:2px; }
  .lesson__row 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:var(--marquee-dur-slow, 70s) !important;
    animation-iteration-count:infinite !important;
    animation-timing-function:linear !important;
  }
}

/* =========================================================
   Top News
   ========================================================= */
.news{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.news .wrap{ padding-block:clamp(20px,2.6vw,30px); }
.newsbox{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,2.4vw,26px); align-items:start;
  background:var(--paper); border:2px solid var(--ink);
  border-radius:6px 30px 6px 30px;
  padding:clamp(14px,2vw,20px) clamp(16px,2.4vw,24px);
  box-shadow:4px 4px 0 var(--accent);
}
.news__label{
  flex:none; padding-top:2px;
  font-family:var(--font-display); text-transform:lowercase;
  font-size:20px; line-height:1.2; color:var(--accent);
}
/* 3件ぶんくらいが見えて、それ以上はスクロール */
.news__scrollwrap{ position:relative; min-width:0; }
/* 下端のフェードで「まだ続きがある」ことを示す（スクロールバーには重ねない） */
.news__scrollwrap::after{
  content:""; position:absolute; left:0; right:12px; bottom:0; height:26px;
  background:linear-gradient(rgba(245,242,236,0), var(--paper));
  pointer-events:none;
}
.news__scroll{
  max-height:200px; padding-right:18px;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none;
}
.news__scroll::-webkit-scrollbar{ display:none; }
/* OS標準のスクロールバーは環境によって消えるので、自前のインジケーターを出す */
.news__bar{
  position:absolute; top:4px; right:0; bottom:4px; width:5px;
  border-radius:3px; background:var(--paper-2);
  opacity:0; transition:opacity .25s ease;
}
.news__bar.is-on{ opacity:1; }
.news__bar > span{
  position:absolute; left:0; right:0; top:0;
  border-radius:3px; background:var(--accent);
  transition:transform .1s linear;
}
.news__list{ display:block; }
.news__item{ border-bottom:1px dashed var(--line); }
.news__item:last-child{ border-bottom:0; }
.news__row{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px;
  align-items:baseline; padding:11px 4px;
}
a.news__row{ border-radius:8px; transition:background-color .2s; }
a.news__row:hover{ background:var(--paper-2); }
a.news__row:hover .news__title{ color:var(--accent); }
.news__date{
  flex:none; font-family:var(--font-display); font-size:13px;
  letter-spacing:.04em; color:var(--ink-soft); white-space:nowrap;
}
.news__main{ min-width:0; }
.news__title{
  display:block; font-family:var(--font-round); font-weight:700;
  font-size:14.5px; line-height:1.7; transition:color .2s;
}
.news__body{
  display:block; font-size:13px; line-height:1.75; color:var(--ink-soft);
  margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* =========================================================
   スケジュール：カレンダー
   ========================================================= */
.schedcal{
  position:relative;
  display:grid; grid-template-columns:minmax(0,410px) minmax(0,1fr);
  grid-template-areas:"cal pop" "list list";
  gap:clamp(20px,3vw,36px); align-items:start;
}
.cal{ grid-area:cal; }
.callist{ grid-area:list; }
.cal{
  background:var(--paper); border:2px solid var(--ink);
  border-radius:6px 40px 6px 40px;
  padding:clamp(16px,2.2vw,26px);
  box-shadow:var(--shadow-hard);
}
.cal__hd{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.cal__title{
  font-family:var(--font-display); text-transform:lowercase;
  font-size:clamp(21px,2.8vw,28px); line-height:1; min-width:5.5em;
}
.cal__nav{
  width:36px; height:36px; flex:none; border-radius:50%;
  border:2px solid var(--ink); background:none;
  display:grid; place-items:center; font-size:16px; line-height:1;
  transition:background-color .2s, color .2s, transform .2s;
}
.cal__nav:hover{ background:var(--ink); color:var(--paper); }
.cal__today{
  margin-left:auto; font-size:13px; font-weight:700;
  border:1.6px solid var(--line); border-radius:999px; padding:6px 15px;
  background:none; transition:border-color .2s, background-color .2s;
}
.cal__today:hover{ border-color:var(--ink); background:var(--paper-2); }

.cal__grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; min-width:0; }
.cal__wd{
  text-align:center; padding-bottom:6px;
  font-family:var(--font-display); text-transform:lowercase;
  font-size:12px; color:var(--ink-soft);
}
.cal__day{
  position:relative; aspect-ratio:1/1; min-height:34px;
  display:grid; place-items:center; gap:0;
  border:0; background:none; border-radius:12px;
  font-family:var(--font-display); font-size:clamp(13px,1.3vw,16px);
  color:var(--ink); cursor:default;
  transition:background-color .2s, color .2s, transform .2s;
}
.cal__day--out{ color:rgba(44,30,21,.22); }
.cal__day--today{ box-shadow:inset 0 0 0 2px var(--line); }
.cal__day--gig{
  background:var(--accent); color:#fff; cursor:pointer;
  box-shadow:none;
}
.cal__day--gig:hover,
.cal__day--gig:focus-visible{ transform:scale(1.08); }
.cal__day--gig.is-open{ background:var(--ink); }
.cal__count{
  position:absolute; top:3px; right:5px;
  font-size:10px; background:var(--ink); color:var(--paper);
  border-radius:999px; padding:0 5px; line-height:1.5;
}

/* 月内の一覧 */
.callist{ display:grid; gap:8px; align-content:start; }
.callist__empty{ font-size:14px; color:var(--ink-soft); padding:6px 2px; }
.calrow{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; align-items:baseline;
  width:100%; text-align:left;
  background:var(--paper); border:1.6px solid var(--line); border-radius:14px;
  padding:12px 16px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.calrow:hover,
.calrow:focus-visible{ border-color:var(--ink); transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--accent); }
.calrow__date{ font-family:var(--font-display); font-size:15px; letter-spacing:.02em; white-space:nowrap; }
.calrow__date em{ font-style:normal; color:var(--accent); font-size:12px; margin-left:5px; text-transform:lowercase; }
.calrow__main{ min-width:0; }
.calrow__title{ font-family:var(--font-round); font-weight:700; font-size:15px; line-height:1.5; overflow-wrap:anywhere; }
.calrow__venue{ font-size:13px; color:var(--ink-soft); }

/* ホバーで出る詳細（マウス環境のみ） */
.gigpop{
  position:absolute; z-index:30;
  background:var(--paper); border:2px solid var(--ink);
  border-radius:6px 24px 6px 24px; box-shadow:6px 6px 0 var(--accent);
  padding:16px 18px;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.gigpop.is-on{ opacity:1; transform:none; }
.gigpop{ overflow:auto; max-height:78vh; }
.gigpop .gigdetail{
  display:grid; grid-template-columns:min(280px,44%) minmax(0,1fr); gap:20px;
  align-items:start;
}
.gigpop .gigdetail--noflyer{ grid-template-columns:minmax(0,1fr); }
/* 枠は画像の実寸に合わせる（余白を作らない） */
.gigpop .gigdetail__flyer{ margin:0; }
.gigpop .gigdetail__flyer img{
  width:100%; height:auto; max-width:none; display:block;
}

/* タップで出る詳細（モーダル） */
.gigmodal{
  position:fixed; left:0; right:0; top:0; z-index:200;
  height:100svh; height:100dvh;
  display:grid; place-items:center; padding:24px;
}
.gigmodal[hidden]{ display:none; }
.gigmodal__bg{ position:absolute; inset:0; background:rgba(38,26,18,.74); animation:fade .2s ease; }
.gigmodal__card{
  position:relative; width:min(660px,100%); max-height:86dvh; overflow:auto;
  background:var(--paper); border:2px solid var(--ink);
  border-radius:14px 44px 14px 44px; box-shadow:8px 8px 0 var(--accent);
  padding:clamp(22px,3vw,32px);
  animation:pop .24s cubic-bezier(.2,.9,.2,1);
}
.gigmodal__close{
  position:absolute; top:12px; right:12px; width:40px; height:40px; z-index:2;
  border-radius:50%; border:2px solid var(--ink); background:var(--paper);
  display:grid; place-items:center;
}
.gigmodal__close svg{ width:18px; height:18px; }
@keyframes fade{ from{ opacity:0 } }
@keyframes pop{ from{ opacity:0; transform:translateY(14px) scale(.98) } }

/* 詳細の中身（ポップオーバー / モーダル共通） */
.gigdetail__date{
  font-family:var(--font-display); font-size:14px; letter-spacing:.03em; color:var(--ink-soft);
}
.gigdetail__date em{ font-style:normal; color:var(--accent); text-transform:lowercase; margin-left:5px; }
.gigdetail__title{
  font-family:var(--font-display); text-transform:lowercase; font-weight:400;
  font-size:clamp(21px,2.6vw,28px); line-height:1.15; margin:3px 0 10px;
}
.gigdetail__flyer{ margin-bottom:16px; }
.gigdetail__flyer img{
  width:100%; max-width:230px; display:block;
  border:2px solid var(--ink); border-radius:4px;
}
.gigmodal .gigdetail__flyer img{ max-width:none; }
.gigmodal .gigdetail{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:26px; align-items:start; }
.gigmodal .gigdetail__flyer{ margin:0; }
.gigmodal .gigdetail--noflyer{ grid-template-columns:minmax(0,1fr); }

/* フォールバック表示のカード内フライヤー */
.gig--flyer{ grid-template-columns:170px 1fr 128px; }
.gig__flyer img{ width:100%; border:2px solid var(--ink); border-radius:4px; display:block; }
.gig__members{ display:flex; align-items:baseline; gap:12px; }
.gig__with{
  flex:none; font-family:var(--font-display); text-transform:lowercase;
  font-size:15px; color:var(--accent);
}
.gigdetail .gig__members{ border-top:1px dashed var(--line); padding-top:12px; margin-top:12px; }
.gigdetail .gig__members ul{ display:flex; flex-wrap:wrap; gap:8px 22px; }
.gigdetail .gig__members li{ display:flex; align-items:baseline; gap:8px; font-size:14.5px; }

@media (max-width:960px){
  /* 縦積み。列の指定と grid-template-areas は必ず対で切り替える
     （食い違うと暗黙の列と gap が増えて、カレンダーがはみ出す） */
  .schedcal{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"cal" "list";
  }
  .cal{ max-width:460px; width:100%; }
  .callist{ margin-top:4px; }
}

@media (max-width:860px){
  .newsbox{ grid-template-columns:minmax(0,1fr); gap:6px; }
  .news__label{ padding-top:0; }
  .cal__day{ min-height:34px; border-radius:10px; }
  .gig--flyer{ grid-template-columns:1fr; }
  .gig__flyer{ max-width:150px; }
  /* スマホは下から出るシート */
  .gigmodal{ place-items:end center; padding:0; }
  .gigmodal__card{
    width:100%; max-height:100%; border-radius:24px 24px 0 0;
    border-width:2px 0 0 0; box-shadow:none;
    padding-bottom:calc(clamp(22px,3vw,32px) + env(safe-area-inset-bottom, 0px));
    animation:sheet .26s cubic-bezier(.2,.9,.2,1);
  }
  .gigmodal .gigdetail{ grid-template-columns:1fr; gap:16px; }
  .gigmodal .gigdetail__flyer img{ max-width:230px; max-height:38svh; width:auto; margin-inline:auto; }
  @keyframes sheet{ from{ transform:translateY(100%) } }
}

/* =========================================================
   フライヤーの拡大表示
   ========================================================= */
.flyerzoom{ position:relative; touch-action:manipulation; }
.flyerzoom img{ cursor:zoom-in; }
/* 拡大できることを控えめに伝えるバッジ */
.flyerhint{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font-size:10.5px; letter-spacing:.02em; line-height:1;
  color:var(--paper); background:rgba(28,19,13,.62);
  border-radius:999px; padding:5px 10px;
  opacity:.72; transition:opacity .25s ease, background-color .25s ease;
  pointer-events:auto; cursor:zoom-in;
}
.flyerhint svg{ width:11px; height:11px; }
.flyerzoom:hover .flyerhint{ opacity:1; background:rgba(28,19,13,.8); }

.lightbox{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  /* 行を親の高さに収める（auto のままだと画像の実寸で伸びてしまう） */
  grid-template-rows:minmax(0,1fr); grid-template-columns:minmax(0,1fr);
  padding:clamp(16px,4vw,48px);
}
.lightbox[hidden]{ display:none; }
.lightbox__bg{ position:absolute; inset:0; background:rgba(28,19,13,.97); animation:fade .2s ease; }
.lightbox img{
  position:relative; max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
  border-radius:4px; cursor:zoom-out;
  animation:pop .24s cubic-bezier(.2,.9,.2,1);
}
.lightbox__close{
  position:absolute; top:max(14px, env(safe-area-inset-top, 0px)); right:14px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  border:2px solid var(--paper); background:transparent; color:var(--paper);
  display:grid; place-items:center;
  transition:background-color .2s, color .2s;
}
.lightbox__close:hover{ background:var(--paper); color:var(--ink); }
.lightbox__close svg{ width:19px; height:19px; }

@media (max-width:860px){
  .flyerhint{ bottom:10px; font-size:11px; padding:6px 12px; }
  /* スマホでは余白を詰めて画面いっぱいに近づける */
  .lightbox{ padding:8px; padding-top:max(56px, env(safe-area-inset-top, 0px)); }
}