/* ===== CONCEPT より下のセクション(ABOUT / PROGRAM / VISUAL / FOOTER)=====
   1280 基準。本文の柱は中央 520px(--col)。横の位置は「中央からのずれ」で指定して、幅が変わっても柱からの関係を保つ */
.about,
.programs,
.visual,
.site-footer {
  --sec-bg: #767676;
  --col-w: min(var(--col), calc(100% - var(--gutter-sp) * 2));
  position: relative;
  z-index: 2;
  overflow-x: clip; /* 背景はページ全体の背景写真(css/base.css の .page-bg)が透けて見える */
}

/* ---- 写真の帯(横に流れるマーキー) ---- */
/* 1280 幅を基準に、それより広い画面では写真・動画を同じ比率で拡大する(文字・赤帯はそのまま。2026-10-26)
   188 / 1280 = 14.6875vw。1280 以下は 188px のまま(SP は css/sp.css で上書き) */
.strip {
  height: max(188px, 14.6875vw); /* Figma 2026-10-22: 221 → 188 */
  overflow: hidden;
}
.strip__track {
  display: flex;
  width: max-content;
  height: 100%;
  list-style: none;
  animation: strip-flow 70s linear infinite;
}
.strip--reverse .strip__track,
.about > .strip:last-child .strip__track {
  animation-direction: reverse;
}
.strip__item {
  flex: none;
  height: 100%;
}
.strip__item--w {
  width: max(251.5px, 19.6484vw); /* 295 → 251.5(1280 基準) */
}
.strip__item--n {
  width: max(140.7px, 10.9922vw); /* 165 → 140.7(1280 基準) */
}
.strip__item img,
.strip__item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes strip-flow {
  to {
    transform: translate3d(var(--strip-shift, -50%), 0, 0); /* 1周ぶん左へ(周回数は js/strips.js が画面幅で決める) */
  }
}

/* ===== ABOUT ===== */
.about {
  padding-top: 209px; /* Figma 2026-10-26: PROGRAM 3 の MORE INFO 下端から赤帯まで 309px(PROGRAM の下余白 100 + 209) */
  padding-bottom: 216px; /* Figma: 下の帯の下端 → VISUAL */
}
.about__heading {
  position: relative;
  height: 36px;
  overflow: hidden;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 30px;
  line-height: 36px;
  text-align: left; /* 2026-10-27 Figma: 中央 → 左寄せ(文字の左端 x384 = 柱の左端 + 4) */
  padding-left: calc(50% - 243px); /* 平体 105%(中心基準)で左へ 13px 広がる分を足す */
  white-space: nowrap;
}
/* 座標は Figma 2026-10-22(about 57:55)。上の帯の下端(y338)基準 */
.about__inner {
  position: relative;
  height: 332px; /* 427 → 296 → 332(帯と帯の間 y338〜670。2026-10-27 Figma: 下の帯と 2026 を 36px 下げ、間に Google MAP) */
}
.about__stamp {
  position: absolute;
  top: -35px; /* y303 */
  left: calc(50% + 189px); /* 2026-10-27 Figma: 右側へ(x829。右端を本文の右端 x900 にそろえる) */
  width: 71px; /* 86 → 71 */
}
.about__year {
  position: absolute;
  font-weight: 600;
  font-size: 30px; /* 40 → 30 */
  line-height: 50px;
}
.about__year--from {
  top: -25px; /* y313 */
  left: calc(50% + 365px);
}
.about__year--to {
  top: 304px; /* y642(2026-10-27: 268 → 304) */
  left: calc(50% + 365px);
  z-index: 1;
}
.about__line {
  position: absolute;
  top: 44px; /* y382 */
  left: calc(50% + 406px);
  width: 1px;
  height: 239px; /* 325 → 210 → 239(2026-10-27 Figma) */
  background: var(--c-white);
  opacity: 0.7; /* 70% の濃さに(2026-10-28 えびな。MORE INFO の罫線と同じ) */
}
.about__eyebrow {
  position: absolute;
  top: 47px; /* y385(2026-10-27 Figma: 左寄せ・3px 下げ) */
  left: calc(50% - 260px);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.05em;
}
/* ===== 細部の表示演出(js/details.js が .is-wait を外すと動く。1回きり) ===== */
/* 赤帯: 帯が左から伸び(FV の罫線と同じ質感)、伸びきる手前から文字が下から立ち上がる */
.about__heading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c-red);
  transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.about__heading-text {
  position: relative;
  top: -1.5px; /* PC: ひらがな・括弧の重みで下がって見えるので、見た目の上下中央へ 1.5px 上げる(2026-10-28。SP は css/sp.css で 0) */
  display: inline-block;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s;
}
.about__heading.is-wait::before {
  transform: scaleX(0);
  transition: none;
}
.about__heading.is-wait .about__heading-text {
  transform: translateY(1.3em);
  transition: none;
}
/* 印鑑: わずかに大きい状態から、ぴたっと収まる(判を押す感触) */
.about__stamp {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.2s linear;
}
.about__inner.is-wait .about__stamp {
  opacity: 0;
  transform: scale(1.14);
  transition: none;
}
/* 年表: 1924 が出る → 縦線が上から引かれる → 2026 が出る。
   数字は下から立ち上がらせず(切れて見えるため。2026-10-28 えびな)、その場でふわっと出しながらカウントアップ(js/details.js) */
.about__year span {
  display: inline-block;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.about__year--to span {
  transition-delay: 1.75s;
}
.about__line {
  transform-origin: center top;
  transition: transform 1.4s cubic-bezier(0.77, 0, 0.175, 1) 0.45s;
}
.about__year.is-wait span {
  opacity: 0;
  transition: none;
}
.about__line.is-wait {
  transform: scaleY(0);
  transition: none;
}
/* 年表は1つずつ、自分が画面に入ったら動き出す(js/details.js が .is-wait を外し、待ち時間を 0 にする。2026-10-28)。
   これまでは ABOUT 全体が見えた時点から 1.75 秒後に 2026 が出ていたので、2026 のところまでスクロールしてもまだ立ち上がりの途中だった */
.about__year.is-go span,
.about__line.is-go {
  transition-delay: 0s;
}
/* フッター(エンディング): ロゴが滲んだ状態から、ゆっくりピントが合って現れる。少し遅れてクレジットが静かに出る */
.site-footer__logos {
  transition:
    opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    filter 2.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-footer.is-wait .site-footer__logos {
  opacity: 0;
  filter: blur(10px);
  transform: scale(0.985);
  transition: none;
}
/* 左の文字ブロック(タイトル・クレジット)と縦の BETWEEN THEN AND NOW. は最初から表示(2026-10-26)。演出はロゴだけ */

/* 日時・場所(Campaign): タイトルが立ち上がった少し後に、ふわっと出る。
   Date: と、その次の項目(Place: / Campaign:)は同時ではなく、少し時間差で順に出す(2026-10-27 えびな) */
.program__meta > * {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.program__meta > :nth-child(n + 3) {
  transition-delay: 0.65s; /* 2つ目の項目は 0.3 秒遅れて */
}
.program__meta.is-wait > * {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}
/* /PROGRAM の印鑑: 見出し・ロックアップが出たあとに判を押す(ABOUT の印鑑と同じ動き) */
.program-intro__stamp {
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) 1.1s,
    opacity 0.2s linear 1.1s;
}
.program-intro.is-wait .program-intro__stamp {
  opacity: 0;
  transform: scale(1.14);
  transition: none;
}

.about__body {
  position: absolute;
  top: 89px; /* Figma 2026-10-22: y427 */
  left: calc(50% - 260px);
  width: 520px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px; /* Figma 2026-10-20 更新: 18 → 16 */
  line-height: 24px; /* 28 → 22 → 24(2026-10-28 えびな: PC は少し行間が詰まって見えるので広げる。7行で +14px) */
}

/* ===== PROGRAM 見出し ===== */
.program-intro {
  position: relative;
  height: 355px; /* Figma: frame 396。次の PROGRAM 01 の見出し(上余白 83)が y438 に来る高さ */
}
.program-intro__lantern {
  position: absolute;
  top: 47px;
  left: calc(50% - 100px);
  width: 200px;
  height: 199px;
}
.program-intro__lamp,
.program-intro__haze,
.program-intro__lamp img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 光のにじみ(Figma 87:83: 同じ提灯を 10.2px ぼかして重ねる)
   1px の線をそのままぼかすと光が弱く見えないので、線を太らせてからぼかす(ネオン管のように周りへ光がもれる) */
.program-intro__glow {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.7)) blur(10.2px); /* 光の強さ 70% */
}
/* 線そのものにも、うっすら光をまとわせる */
.program-intro__circle {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.38)); /* 70% */
}
/* 提灯: 古い街灯の点き方。パッと切り替えず、薄く灯ってはふっと沈むを繰り返して点く(js/details.js)
   光のにじみ(glow)は電球が温まるように少し遅れてじわっと広がり、点いている間はかすかに呼吸する */
.program-intro.is-wait .program-intro__lantern {
  opacity: 0;
}
.program-intro:not(.is-wait) .program-intro__lantern {
  animation: lantern-on 2s linear 0.15s both;
}
.program-intro:not(.is-wait) .program-intro__glow {
  animation:
    glow-warm 2.6s cubic-bezier(0.45, 0, 0.2, 1) 0.6s both,
    glow-breathe 7s ease-in-out 3.2s infinite;
}
@keyframes lantern-on {
  0% { opacity: 0; }
  7% { opacity: 0.45; }
  13% { opacity: 0.08; }
  24% { opacity: 0.12; }
  30% { opacity: 0.7; }
  36% { opacity: 0.28; }
  44% { opacity: 0.35; }
  52% { opacity: 0.9; }
  58% { opacity: 0.62; }
  68% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes glow-warm {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.78; }
}
/* 点灯したあとも、ときどき不規則にちらつく(js/details.js が data-flick に種類を入れて .is-flick を付ける)
   線はすぐ戻り、光のにじみは少し遅れて沈んでゆっくり戻る(余韻)。にじみは外側の枠(haze)で動かす */
/* blink: 一瞬だけ暗くなる */
.program-intro__lamp.is-flick[data-flick="blink"] .program-intro__circle { animation: dip-blink 0.4s linear; }
.program-intro__lamp.is-flick[data-flick="blink"] .program-intro__haze { animation: haze-blink 1.1s ease-out; }
@keyframes dip-blink { 0% { opacity: 1; } 25% { opacity: 0.45; } 100% { opacity: 1; } }
@keyframes haze-blink { 0% { opacity: 1; } 20% { opacity: 0.7; } 100% { opacity: 1; } }
/* stutter: 2回続けてチカチカ */
.program-intro__lamp.is-flick[data-flick="stutter"] .program-intro__circle { animation: dip-stutter 0.9s linear; }
.program-intro__lamp.is-flick[data-flick="stutter"] .program-intro__haze { animation: haze-stutter 1.8s ease-in-out; }
@keyframes dip-stutter {
  0% { opacity: 1; } 6% { opacity: 0.2; } 12% { opacity: 0.95; } 19% { opacity: 0.12; }
  27% { opacity: 0.9; } 34% { opacity: 0.6; } 45% { opacity: 1; } 100% { opacity: 1; }
}
@keyframes haze-stutter { 0% { opacity: 1; } 12% { opacity: 0.5; } 30% { opacity: 0.35; } 100% { opacity: 1; } }
/* waver: ふっと沈んで、揺れながら戻る */
.program-intro__lamp.is-flick[data-flick="waver"] .program-intro__circle { animation: dip-waver 1.2s ease-in-out; }
.program-intro__lamp.is-flick[data-flick="waver"] .program-intro__haze { animation: haze-waver 2s ease-in-out; }
@keyframes dip-waver {
  0% { opacity: 1; } 8% { opacity: 0.35; } 18% { opacity: 0.85; } 26% { opacity: 0.45; }
  45% { opacity: 0.92; } 100% { opacity: 1; }
}
@keyframes haze-waver { 0% { opacity: 1; } 15% { opacity: 0.55; } 35% { opacity: 0.4; } 100% { opacity: 1; } }
/* brownout: 電圧が下がったように、しばらくぼんやり暗くなる */
.program-intro__lamp.is-flick[data-flick="brownout"] .program-intro__circle { animation: dip-brownout 2.4s ease-in-out; }
.program-intro__lamp.is-flick[data-flick="brownout"] .program-intro__haze { animation: haze-brownout 3s ease-in-out; }
@keyframes dip-brownout {
  0% { opacity: 1; } 12% { opacity: 0.5; } 30% { opacity: 0.4; } 42% { opacity: 0.62; }
  50% { opacity: 0.3; } 54% { opacity: 0.8; } 70% { opacity: 0.55; } 88% { opacity: 0.95; } 100% { opacity: 1; }
}
@keyframes haze-brownout { 0% { opacity: 1; } 25% { opacity: 0.35; } 60% { opacity: 0.3; } 100% { opacity: 1; } }


@keyframes lantern-on {
  0% { opacity: 0; }
  6% { opacity: 0.55; }
  9% { opacity: 0; }
  20% { opacity: 0; }
  23% { opacity: 0.8; }
  26% { opacity: 0.15; }
  30% { opacity: 0.9; }
  33% { opacity: 0; }
  52% { opacity: 0; }
  55% { opacity: 1; }
  59% { opacity: 0.35; }
  63% { opacity: 1; }
  100% { opacity: 1; }
}
/* Figma 2026-10-26(program-intro 57:54): 提灯と日付の帯をなくし、「/PROGRAM」+ ロックアップ + 印鑑に。座標は frame 基準 */
.program-intro__heading {
  position: absolute;
  top: 262px;
  left: calc(50% - var(--b) / 2 - 4px); /* 画像の左端 − 4(「/」の見た目の補正。1280 で x376) */
  font-weight: 400;
  font-size: 62px;
  line-height: 60px;
  letter-spacing: -0.03em;
}
.program-intro__lockup {
  position: absolute;
  top: 322px;
  left: calc(50% - var(--b) / 2 - 1px); /* 画像の左端(1280 で x379) */
  width: 169px;
}
.program-intro__stamp {
  position: absolute;
  top: 305px;
  right: calc(50% - var(--b) / 2 + 1px); /* 右端を画像の右端にそろえる(1280 で x846〜899) */
  width: 53px;
}
.marquee {
  position: absolute;
  top: 305px;
  left: 0;
  right: 0;
  overflow: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: strip-flow 30s linear infinite;
}
.marquee__track span {
  flex: none;
  width: 303px; /* Figma: 日付 303px、「渋谷」を挟んで次の日付まで 528px */
  font-weight: 700;
  font-size: 24px;
  line-height: 21px;
  text-align: center;
  white-space: nowrap;
}
.marquee__track .marquee__jp {
  display: flex;
  justify-content: center;
  width: 225px;
}
/* 「渋谷」は Figma のグラフィック(img/logo/marquee-shibuya.svg、150×22.4)。日付の帯の中央に置く */
.marquee__jp img {
  width: 150px;
  height: auto;
  transform: translateY(-1.3px); /* Figma: 日付より 1.3px 上(y303.7 / y305) */
}


/* ===== PROGRAM(各イベント)===== */
/* Figma 2026-10-26: 見出しは「/PROGRAM」と番号だけの小さな1行。画像の上端から 29px 上 */
.program {
  position: relative;
  padding: 83px 0 100px; /* 前の MORE INFO 下端 → 次の見出しまで 183px */
}
.program--ticket {
  padding-top: 80px; /* 同 180px */
}
.program__header {
  position: relative;
  height: 29px;
}
.program__label,
.program__header .program__num {
  position: absolute;
  top: 0;
  font-weight: 600;
  font-size: 16px; /* 12 → 16(2026-10-26 えびな指示。SP は 12 のまま) */
  line-height: 20px;
  letter-spacing: -0.03em;
}
.program__label {
  left: calc(50% - var(--b) / 2); /* 画像の左端 */
}
/* 見出しの中身は画像の上端から 72px 上にそろえる(Figma: 見出し y166 / 画像 y238) */
.program__logo {
  position: absolute;
  top: 134px; /* y170 */
  left: calc(50% - 260px);
  width: 17px; /* 35 → 17 */
}
/* 表示時: 位置はそのまま、上から下へ徐々に見えてくる(読む順に。CONCEPT の縦ロゴと同じ) */
.program__logo-img {
  display: block;
  width: 100%;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.program__header.is-wait .program__logo-img {
  clip-path: inset(0 0 100% 0);
  transition: none;
}
/* 番号: 柱の右端にそろえる(Figma: 右端 x903) */
.program__header .program__num {
  right: calc(50% - var(--b) / 2); /* 画像の右端(1280 で x900) */
  line-height: 20px;
  text-align: right;
}
/* PROGRAM ×3 を横組みで3段(赤・白・緑)。Figma 2026-10-22: 縦組み 26px → 横組み 20px */
.program__vlabel {
  position: absolute;
  top: 130px; /* y166 */
  left: calc(50% - 227px);
  font-weight: 600;
  font-size: 20px;
  line-height: 26px;
  white-space: nowrap;
}
.program__vlabel span {
  display: block;
}
/* 縦の PROGRAM: ときどき1つだけ、ささやかにチカッとする(js/details.js) */
.program__vlabel span.is-flick {
  animation: vlabel-flick 0.4s steps(1, end);
}
@keyframes vlabel-flick {
  0% { opacity: 1; }
  15% { opacity: 0.3; }
  35% { opacity: 1; }
  55% { opacity: 0.55; }
  75% { opacity: 1; }
  100% { opacity: 1; }
}
.is-red {
  color: var(--c-red);
}
.is-green {
  color: var(--c-green);
}

/* 画像: 中央にメイン、左右にカルーセルの前後(今はプレースホルダー) */
/* 画像: 中央にメイン、左右にカルーセルの前後(今はプレースホルダー)
   3つ並びを画面幅に合わせて拡大縮小する(1280で1辺520px = 画面幅の40.625%)
   線は二重にならないよう、上下の横線は .program__images::before で1本、縦線は左右の枠の左右だけで引く */
/* 画像の1辺(--b)は PROGRAM 全体で共有する(見出しの位置も画像の左右の端に合わせるため) */
.programs {
  --b: 40.625vw;
  --b: round(down, 40.625vw, 2px); /* 線がにじまないよう1辺を偶数pxに(非対応ブラウザは上の値) */
}
.program__images {
  position: relative;
  height: var(--b);
}
.program__images::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(50% - var(--b) * 1.5);
  width: calc(var(--b) * 3);
  height: 100%;
  border-top: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  pointer-events: none;
}
.program__main {
  position: absolute;
  top: 0;
  left: calc(50% - var(--b) / 2);
  width: var(--b);
  height: var(--b);
}
/* メイン両脇の縦線は画像の内側に1本ずつ(左右の枠とは共有しない) */
.program__main::after {
  content: "";
  position: absolute;
  inset: 0;
  border-left: 1px solid var(--c-white);
  border-right: 1px solid var(--c-white);
  pointer-events: none;
}
.program__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 画像もイベントページへのリンク(MORE INFO と同じ URL。2026-10-28 えびな指示)。
   ホバーはやんわりズームだけ(表示時のピクセルの演出と重ならないよう、動きは控えめに)。キーボードは MORE INFO で届くので tabindex="-1" */
/* 画像がまだ出ていない(待機中)は、空の四角を押してリンクへ飛ばないように */
.program__main.is-wait .program__link {
  pointer-events: none;
}
.program__link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.program__link img {
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover) {
  .program__link:hover img {
    transform: scale(1.06);
  }
  /* 乗せた瞬間だけ、ネオンが一瞬またたく(VISUAL バナーの visual-flicker を弱くした版。2026-10-28 中間案のテスト)。
     2回だけ・暗くても 60% まで・0.45秒。そのあとズームだけが続く */
  .program__link:hover {
    animation: program-flicker 0.45s steps(1, end);
  }
}
@keyframes program-flicker {
  0% { opacity: 0.6; }
  18% { opacity: 1; }
  36% { opacity: 0.65; }
  54% { opacity: 1; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .program__link img {
    transition: none;
  }
  .program__link:hover {
    animation: none;
  }
}
/* 表示時の演出(js/reveal.js): 演出中だけ canvas を重ね、終わったら画像に戻す */
.program__reveal {
  pointer-events: none; /* 演出中もクリック・ホバーを下のリンクへ通す */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.program__main.is-fx .program__reveal {
  visibility: visible;
}
.program__main.is-fx img,
.program__main.is-wait img {
  visibility: hidden;
}
.program__main.is-swap img {
  visibility: visible; /* 入れ替えの瞬間は canvas の下で画像を先に出しておく */
}
.program__ph {
  position: absolute;
  top: 0;
  width: var(--b);
  height: var(--b);
  box-sizing: border-box;
  overflow: hidden;
}
/* ✕の2本の線。外側の角から内側へ伸びて、中央でクロスする(js/reveal.js が画面に入ったら .is-x-in を付ける)
   線は「角を起点に、対角線の長さ」で置き、回転させて向きを決める。伸びる動きは scaleX */
.program__ph::before,
.program__ph::after {
  content: "";
  position: absolute;
  width: calc(var(--b) * 1.41421);
  height: 1px;
  background: var(--c-white);
  transform: rotate(var(--r)) scaleX(var(--s, 1));
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.program__images.is-x-wait .program__ph {
  --s: 0;
}
.program__images.is-x-instant .program__ph::before,
.program__images.is-x-instant .program__ph::after {
  transition: none;
}
/* 左の枠: 左上 → 右下、左下 → 右上 */
.program__ph--prev::before,
.program__ph--prev::after {
  left: 0;
  transform-origin: 0 50%;
}
.program__ph--prev::before {
  top: 0;
  --r: 45deg;
}
.program__ph--prev::after {
  bottom: 0;
  --r: -45deg;
  transition-delay: 0.08s;
}
/* 右の枠: 右上 → 左下、右下 → 左上(左の枠と鏡写し、少し遅れて) */
.program__ph--next::before,
.program__ph--next::after {
  right: 0;
  transform-origin: 100% 50%;
  transition-delay: 0.12s;
}
.program__ph--next::before {
  top: 0;
  --r: -45deg;
}
.program__ph--next::after {
  bottom: 0;
  --r: 45deg;
  transition-delay: 0.2s;
}
.program__ph--prev {
  left: calc(50% - var(--b) * 1.5);
  border-left: 1px solid var(--c-white);
}
.program__ph--next {
  left: calc(50% + var(--b) / 2);
  border-right: 1px solid var(--c-white);
}

.program__body {
  width: var(--col-w);
  margin: 77px auto 0;
}
.program--ticket .program__body {
  margin-top: 70px;
}
.program__eyebrow {
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 20px;
  line-height: 24px;
  white-space: nowrap;
}
/* 和文の小見出し(PROGRAM 02「渋谷に宿るハードコア」)は本文と同じ明朝で */
.program__eyebrow--jp {
  font-family: var(--font-jp);
  font-weight: 500;
}
.program__title {
  font-weight: 600;
  font-size: 50px;
  line-height: 50px;
}
.program__meta {
  margin-top: 30px;
}
.program__meta dt {
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  color: var(--c-green);
}
.program__meta dd {
  margin-top: 4px;
  font-weight: 600;
  font-size: 30px;
  line-height: 34px;
}
.program__meta dd + dt {
  margin-top: 22px;
}
.program__meta-sub {
  margin-left: 2px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}
.program__meta .program__meta-text {
  line-break: strict; /* 行頭に「ー」「ッ」などが来ないように */
  margin-top: 13px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px; /* 22 → 24(2026-10-28: イベント本文と同じ) */
}
.program__lead {
  margin-top: 30px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 24px;
  line-height: 36px; /* 24 → 36(2026-10-27): 本番の原稿は2〜5行になるので、行が詰まって見えないように */
}
.program__text {
  margin-top: 18px; /* 40 → 18(2026-10-27 えびな: リード → 本文の間を、本文 → 注釈(※)の間と同じ見た目の余白 約27px に。行間の上下の空きも含めて計算) */
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px; /* 22 → 24(2026-10-28 えびな: PC は少し詰まって見えるので広げる。ABOUT 本文と同じ) */
}
.ticket-list {
  margin-top: 22px;
  list-style: none;
  font-family: var(--font-jp); /* Ryo Display M(本文と同じ明朝。キットの1書体だけで済む) */
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}
.ticket-list li + li {
  margin-top: 13px;
}
.ticket-list span {
  display: block;
}
.ticket-list small {
  font-size: 10px;
}
/* 見出しの●は文字の 80% に縮小(縮めると下に寄るので、文字の高さの中央に戻す) */
.ticket-list__dot {
  font-style: normal;
  font-size: 0.8em;
  position: relative;
  top: -0.08em;
}

.more-info {
  display: block;
  width: calc(100% + 4px);
  height: 36px;
  margin: 54px -2px 0;
  border: 1px solid rgb(90 240 15 / 0.7); /* --c-green(#5af00f)を 70% の濃さに(2026-10-28 えびな: 罫線が強く浮いて見えるので弱める。85% → 70%。文字は 100% のまま) */
  font-weight: 600;
  font-size: 16px;
  line-height: 34px;
  color: var(--c-green);
  text-align: center;
  text-decoration: none;
  transition:
    background-color 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* :hover はマウスの環境だけ(スマホでタップした後にホバーの見た目が残らないように)。キーボードの focus-visible はどこでも */
@media (hover: hover) {
  .more-info:hover {
    background: var(--c-green);
    color: var(--sec-bg);
  }
}
.more-info:focus-visible {
  background: var(--c-green);
  color: var(--sec-bg);
}
/* ホバーで文字が1字ずつ上へ抜け、同じ文字が下から上がってくる(js/ui.js で1字ずつ span に分ける)
   各文字は2行分(本体 + text-shadow で下に複製)を持ち、1行分ずらす */
.more-info__roll {
  display: inline-block;
  height: 34px;
  overflow: hidden;
  vertical-align: top;
}
.more-info__ch {
  display: inline-block;
  white-space: pre;
  text-shadow: 0 34px 0 currentColor;
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i) * 0.025s);
}
@media (hover: hover) {
  .more-info:hover .more-info__ch {
    transform: translateY(-34px);
  }
}
.more-info:focus-visible .more-info__ch {
  transform: translateY(-34px);
}
/* 表示前: 文字は1行分下で待機(画面に入ると上がってくる) */
.more-info--wait .more-info__ch {
  transform: translateY(34px);
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .more-info__ch {
    transition: none;
  }
}

/* ===== VISUAL ===== */
.visual {
  --visual-gap: 20px;
  padding: 162px 0 259px;
}
/* 2枚のバナーを並べる枠。パララックスはこの枠ごと動かす(バナー自体は表示演出・ホバーの点滅で animation を使うため) */
.visual__track {
  display: flex;
  justify-content: center;
  gap: var(--visual-gap);
}
/* パララックス(2026-10-28): スクロール量の 18% だけ、ページより遅れて動く。セクションの中心が画面の中心に来たときにずれ 0。
   iPhone Safari で JS で動かすとスクロールに1コマ遅れてカクつくので、対応ブラウザ(Safari 26 以降・Chrome 115 以降)は
   CSS のスクロール連動アニメーションでブラウザに動かしてもらう。非対応ブラウザは js/parallax.js(PC のみ)
   --visual-half(セクションの高さの半分)は js/parallax.js が入れる */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .visual {
      view-timeline: --visual block;
    }
    .visual__track {
      animation: visual-parallax linear both;
      animation-timeline: --visual;
      animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes visual-parallax {
  from {
    translate: 0 calc((50vh + var(--visual-half, 500px)) * 0.18);
  }
  to {
    translate: 0 calc((50vh + var(--visual-half, 500px)) * -0.18);
  }
}
.visual img {
  /* 7周年バナー最終版(公園通り入口シート-B)の比率 1590:2970 で、高さ 709 に合わせる(2026-10-30。旧 250×709)。
     画面が狭いとき(幅 800px 未満)は、2枚が画面に収まるよう比率を保ったまま縮める */
  width: min(380px, calc((100vw - 60px) / 2));
  height: auto;
  aspect-ratio: 380 / 709;
  object-fit: cover;
}
/* 枠は動かさず、中の写真だけが一定間隔でパッと入れ替わる(左右で違う絵柄。右は1枚ずらしてある)
   各枠に3枚重ね、1枚ずつ 1.2 秒ごとに順番に見せる(2026-10-30: 2枚 → 最終版の3枚に) */
.visual__frame {
  position: relative;
  /* 表示時: 上から下へ現れる(見える範囲を上から広げる)。右は少し遅れて */
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.6, 0, 0.2, 1); /* 出だしをもたつかせず、最後はすっと止まる */
}
.visual__frame + .visual__frame {
  transition-delay: 0.18s;
}
.visual.is-wait .visual__frame {
  clip-path: inset(0 0 100% 0);
  transition: none;
}
/* ホバー: ネオン管が点くときのように、パッパッパとチカチカ点滅してから点きっぱなしに戻る(乗せるたびに1回) */
@media (hover: hover) {
  .visual__frame:hover {
    animation: visual-flicker 0.75s steps(1, end);
  }
}
@keyframes visual-flicker {
  0% { opacity: 0.15; }
  10% { opacity: 1; }
  18% { opacity: 0.25; }
  26% { opacity: 1; }
  36% { opacity: 0.1; }
  44% { opacity: 0.9; }
  56% { opacity: 0.35; }
  64% { opacity: 1; }
  100% { opacity: 1; }
}
.visual__frame img + img {
  position: absolute;
  inset: 0;
}
.visual__frame img {
  animation: visual-cut 3.6s steps(1, end) infinite;
}
.visual__frame img:nth-child(2) {
  animation-delay: -2.4s; /* 1.2〜2.4 秒に見える */
}
.visual__frame img:nth-child(3) {
  animation-delay: -1.2s; /* 2.4〜3.6 秒に見える */
}
@keyframes visual-cut {
  0% {
    visibility: visible;
  }
  33.333% {
    visibility: hidden;
  }
}

/* ===== FOOTER ===== */
.site-footer {
  padding: 143px 0 304px; /* 左の文字(タイトル上端 143 〜 クレジット下端 351)と上下をそろえる */
}
/* ロゴ: 渋谷百軒店商店街(右寄せ)→ SUPER DOMMUNE → PARCO(右寄せ)。
   3つの字面の上端・下端を、右の縦コピー「BETWEEN THEN AND NOW.」の上端(y139)・下端にそろえ、
   ロゴとロゴの間は同じ間隔にする(2026-10-26)。数値は各画像の字面(透明でない部分)の実測から。
   2026-10-28: 下端を左のクレジット最終行「© PARCO / DOMMUNE」の欧文のベースライン(y335)にそろえる(206 → 196、間隔 20.6 → 15.55) */
.site-footer__logos {
  position: relative;
  width: 436px;
  height: 196px; /* 字面の上端 → 下端 */
  margin: -4px auto 0; /* 上端 y139(左の文字の上端 143 より 4px 上 = 縦コピーの上端) */
}
/* ロゴは各サイトへのリンク(<a> で包んでいる。<a> は位置を持たないので、画像の位置はこれまでどおりロゴ枠が基準) */
.site-footer__logos img {
  position: absolute;
  transition: opacity 0.3s ease;
}
@media (hover: hover) {
  .site-footer__logos a:hover img {
    opacity: 0.7;
  }
}
.site-footer__logos a:focus-visible img {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
.site-footer__shotengai {
  top: -3.3px; /* 画像の上の余白 3.3px を除いて、字面の上端を 0 に */
  right: 0;
  width: 274px;
}
.site-footer__dommune {
  top: 77.75px; /* 商店街の字面 62.2 + 間隔 15.55 */
  left: 0;
  width: 435.2px;
}
.site-footer__parco {
  top: 148.2px; /* DOMMUNE 77.75 + 54.9 + 間隔 15.55。下端 196 = 縦コピーの下端 = クレジット最終行のベースライン */
  left: 315.8px;
  width: 119px;
}
/* 左上の「BORDER / SHIBUYA ― SHIBUYA PARCO / 百軒店」(Figma 95:892)。クレジットと同じく画面の左端に寄せる */
.site-footer__title {
  position: absolute;
  top: 143px;
  left: 1px;
  width: 226px;
}
.site-footer__credits {
  position: absolute;
  top: 262px;
  left: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
}
/* 「BETWEEN THEN AND NOW.」(Figma 90:468): 縦書きで画面の右端寄り */
.site-footer__copy {
  position: absolute;
  /* 先頭の「B」の字面の上端 = 商店街ロゴの「街」の上端、「W」の字面の下端(後ろのピリオドではなく)= PARCO ロゴの下端。
     上端と字間を、字面の実測から計算して合わせる(2026-10-26) */
  top: 146.7px;
  left: calc(50% + 255px); /* ロゴの右隣(Figma: 中心 x906) */
  letter-spacing: 0.017em; /* 0.051em → 0.017em(2026-10-28): 「W」の下端を 10px 上げてロゴの下端(=クレジットのベースライン)にそろえる */
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  white-space: nowrap;
}
.site-footer__credits p + p {
  margin-top: 19px;
}

/* ===== 1024〜1279: 右側の年号を画面内に収める ===== */
@media (max-width: 1279px) {
  .about__year--from,
  .about__year--to {
    left: auto;
    right: 24px;
  }
  .about__line {
    left: auto;
    right: 57px; /* 年号(30px・幅約75)の中央の少し右(Figma と同じ関係) */
  }
}

/* ===== 768〜1023 ===== */
@media (max-width: 1023px) {
  .about__year,
  .about__line {
    display: none;
  }
}



@media (prefers-reduced-motion: reduce) {
  .strip__track,
  .marquee__track {
    animation: none;
  }
  .visual__frame img {
    animation: none !important;
  }
  .visual__frame img + img {
    visibility: hidden;
  }
  .visual__frame {
    transition: none;
  }
  .visual__frame:hover {
    animation: none;
  }
  .program__ph::before,
  .program__ph::after {
    transition: none;
  }
  .program-intro:not(.is-wait) .program-intro__lantern,
  .program-intro:not(.is-wait) .program-intro__glow,
  .program-intro__lamp.is-flick .program-intro__circle,
  .program-intro__lamp.is-flick .program-intro__haze,
  .program__vlabel span.is-flick {
    animation: none;
  }
}

/* ===== Ryo 明朝の組み(2026-10-20 えびな指示) =====
   1. 平体 105%: 文字を横に 1.05 倍して少し潰す(イラレの水平比率 105% と同じ。行の高さは変えない)
      横に伸ばすぶん、文字の箱を 1/1.05 に狭めて組んでから伸ばす → 右端は元の柱の右端にそろう
      transform ではなく scale プロパティを使う(表示時の動きの transform と重ならないように)
   2. 均等配置(最終行は左揃え): 複数行の文章は、各行の右端を柱の右端にそろえる */
.concept__body,
.about__body,
.program__lead,
.program__text,
.program__meta-text,
.ticket-list,
.site-footer__credits p,
.program__meta-sub {
  scale: 1.05 1;
  transform-origin: 0 0;
}
.about__heading-text {
  scale: 1.05 1; /* 赤帯の中央に置いているので、中心を基準に伸ばす */
}
.program__meta-sub {
  display: inline-block;
}
.concept__body,
.program__lead,
.program__text,
.program__meta-text,
.ticket-list {
  width: calc(100% / 1.05);
}
.about__body {
  width: calc(520px / 1.05);
}
.about__body,
.program__text,
.program__meta-text,
.ticket-list li {
  text-align: justify;
  text-justify: inter-character;
}
/* ABOUT 本文の字間の詰め(-0.02em)は外した(2026-10-28: 他の本文と見え方をそろえる。最終行の短さは palt と text-wrap: pretty で対応) */
/* リード文は改行位置を決めて書いているので均等配置にせず、1行に収まるよう少しだけ詰める */
.program__lead {
  letter-spacing: -0.02em;
}


/* ===== 実験: FV の写真が最初に出るときの分割演出(js/stream.js の OPEN_SLICE / js/reveal.js) ===== */
.ph .program__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.ph.is-fx .program__reveal {
  visibility: visible;
}
.ph.is-fx img,
.ph.is-wait img {
  visibility: hidden;
}
.ph.is-swap img {
  visibility: visible;
}

/* ===== フッター 768〜1139(iPad 縦など): 左のタイトル・クレジットが中央のロゴと重なるので、ロゴの下に並べ替える(2026-10-26) =====
   PC では左の文字ブロック(画面の左端、幅約 320)と中央のロゴ(幅 436)が横に並ぶ。1140 未満では両者がぶつかるため、
   ロゴ(+右の縦コピー)はそのまま、タイトル → クレジットをロゴの下に、ロゴの左端にそろえて置く */
@media (min-width: 768px) and (max-width: 1139px) {
  .site-footer {
    padding-bottom: 200px;
  }
  .site-footer__title,
  .site-footer__credits {
    position: static;
    display: block;
    margin-left: calc(50% - 218px); /* ロゴの左端 */
  }
  .site-footer__title {
    margin-top: 72px;
  }
  .site-footer__credits {
    width: 436px;
    margin-top: 32px;
  }
}

/* 語の途中で改行しない(「レシ/ート」「対象5/店舗」の分かれを防ぐ。index.html の .nb) */
.program__meta-text .nb {
  white-space: nowrap;
}

/* ===== ABOUT の「Google MAP」(Figma 2026-10-27: 3つ → 1つ。本文の下・下の帯の上)=====
   PC: 本文の左端にそろえて左寄せ(1280 幅で x380、上の帯の下端から 263px)。SP は css/sp.css で本文のすぐ下・左寄せ。
   文字は点滅させず、下線だけが1秒ごとに「パッ、パッ」とフェードなしで点滅する(わざとチープに。2026-10-26 えびな)。
   下線は text-decoration ではなく ::after の線で描く(線だけを点滅させるため) */
.about__map {
  position: absolute;
  top: 277px; /* y601 + 14(本文の行間を広げて伸びた分だけ下げ、本文との間を Figma と同じに。2026-10-28) */
  left: calc(50% - 260px);
  font-weight: 600;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: -0.03em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.about__map::before {
  content: "";
  position: absolute;
  inset: -12px -10px;
}
.about__map::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.03em; /* 字間を詰めた分、最後の文字の後ろに出る余りを除く */
  top: 17px; /* 以前の下線(text-decoration、下に 2px 離す)と同じ高さ */
  height: 1px;
  background: currentColor;
  animation: map-blink 1s steps(1, end) infinite;
}
@keyframes map-blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}
/* ホバー中は点滅を速く(1秒 → 0.5秒ごと。2026-10-26 えびな) */
@media (hover: hover) {
  .about__map:hover::after {
    animation-duration: 0.5s;
  }
}
.about__map:focus-visible::after {
  animation-duration: 0.5s;
}
@media (prefers-reduced-motion: reduce) {
  .about__map::after {
    animation: none;
  }
}

/* PROGRAM の注意書き(※〜)。本文より一段小さく(2026-10-27 本番原稿) */
.program__note {
  margin-top: 20px;
  letter-spacing: -0.01em; /* わずかに詰める(2026-10-28: チケットの注釈で「いただけます。」の「す。」だけが次の行に送られないように) */
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
}

/* 日時の下の時刻(OPEN / START / CLOSE)は小見出し(.program__eyebrow)と同じ大きさに(2026-10-27 えびな) */
.program__time {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  line-height: 24px;
}

/* PROGRAM 02 のタイトル「The hardcore dwelling / in Shibuya」: 1行目(約 11em)が柱(520px)に収まるよう少し小さく。
   1文字ずつに分けた見出しは単語の途中でも折り返してしまうので、行の中では折り返さない(2026-10-27) */
.program__title--long {
  font-size: 46px;
  line-height: 54px; /* 50 → 58 → 54(2026-10-28 えびな: 和文の行が入って詰まって見える → 58 は開きすぎ) */
}
.program__title--long .hx__line,
.program__title--fit .hx__line {
  white-space: nowrap;
}

/* PC: Google MAP の下線を少し細く見せる(2026-10-28 えびな)。
   高解像度の画面(Retina など)は 0.5px = 実際の1画素の線に。標準の画面は 1px より細く描けないので、線の色を 70% にして細く見せる */
@media (min-width: 768px) {
  .about__map::after {
    background: rgb(255 255 255 / 0.7); /* 点滅(opacity)と重ならないよう、線の色で薄くする */
  }
}
@media (min-width: 768px) and (min-resolution: 2dppx) {
  .about__map::after {
    height: 0.5px;
    background: currentColor;
  }
}


/* ---- PROGRAM の見出しの和文(「」・百軒店・渋谷に宿るハードコア など): りょうゴシック PlusN M(2026-10-28 えびな) ----
   英字(Be Vietnam Pro SemiBold)と見た目の大きさがそろうよう、和文だけ --jp-scale 倍にする。
   見出しの演出(js/headings.js)で1文字ずつに分けたときは .hx__ch--jp、演出なしのときは .jp に掛かる */
.program__title {
  --jp-scale: 0.88; /* 漢字の字面(0.94em)を英大文字の高さ(0.74em)の約 1.1 倍に。漢字は同じ高さだと小さく見えるため */
  --jp-hang: -0.105em; /* 行頭の「を左へずらす量(「の字面の左端を、上下の行の英字 S・T の字面の左端にそろえる。画素で測って PC・SP とも約 0.1 字ぶん) */
}
.program__title .jp,
.program__title .hx__ch--jp {
  font-family: "ryo-gothic-plusn", var(--font-jp-gothic);
  font-weight: 500;
  font-feature-settings: "palt";
  font-size: calc(var(--jp-scale) * 1em);
  /* 漢字は字面が基準線の下まで出る(下 −0.08em・上 0.75em。英大文字は 0〜0.75em)ので、そのままだと下がって見える。
     見出しの 0.04em(和文の大きさでは 0.045em)持ち上げて、上下のはみ出しを同じにし、英大文字と中心をそろえる(2026-10-28 えびな) */
  vertical-align: 0.045em;
}
.program__title .hx__line--sub .hx__ch--jp,
.program__title .program__title-sub {
  font-size: 1em; /* 小さい1行は行ごと縮めるので、文字は倍率をかけない(下の .hx__line--sub) */
}
.program__title .jp-hang {
  margin-left: var(--jp-hang);
}
/* 「ハードコア｜」の ア と ｜ の間を詰める(2026-10-28 えびな) */
.program__title .jp-bar {
  margin-left: -0.18em;
}
/* 「〜都市の記憶は誰にも解体できない〜」: 小さくして1行に収める(2026-10-28 えびな)。柱の幅(PC 520px)に収まる大きさ */
.program__title .hx__line--sub,
.program__title .program__title-sub {
  font-size: 24px; /* 30 → 24(2026-10-28 えびな: 約 80% に) */
  line-height: 1.5;
}
/* 「in Shibuya」」との間だけ、ほんの少し広げる(PC・SP 共通。2026-10-28 えびな) */
.program__title .hx__line--sub,
.program__title .program__title-sub {
  margin-top: 0.3em;
}
/* 文字の間を少しだけ広げる(2026-10-28 えびな) */
.program__title .hx__line--sub .hx__ch,
.program__title .program__title-sub {
  letter-spacing: 0.06em;
}
.program__title .program__title-sub {
  display: inline-block; /* 演出なし(動きを減らす設定)のときも行の高さを持たせる */
}
@media (max-width: 767px) {
  .program__title .hx__line--sub,
  .program__title .program__title-sub {
    font-size: calc((100vw - 40px) / 22); /* ÷17.5 → ÷22(約 80%。2026-10-28) */
  }
}

/* 縦バナー2枚: 渋谷PARCO 7周年の特設サイトへのリンク(2026-10-30 本橋さん)。中の写真の重なり(position)は .visual__frame 基準のまま */
.visual__link {
  display: block;
}