/* ===== SP(〜767px) =====
   Figma `sp(390)`(node 1:951)を正とする。仕様の詳細は build/SP_IMPLEMENTATION_SPEC.md
   - 原稿は PC と共通(1ソース)。ここでは配置・大きさだけを変える
   - 横は画面幅 375〜430 で伸縮(柱 = 100% − 40px)、縦の余白と文字サイズは px 固定
   - PC 用の指定のあとに読み込む(同じ詳細度なら、こちらが勝つ) */
@media (max-width: 767px) {
  :root {
    --gutter-sp: 20px;
  }

  /* ---------- 固定ヘッダー・SCROLL ---------- */
  .fixed-header {
    height: 26px;
  }
  .fixed-header__line {
    top: 25px;
  }
  .fixed-header__date,
  .fixed-header__place {
    /* 1行目の字面の上端が画面に収まり(上から 0.5px)、2行目の字面の下端(ベースライン)が赤線にちょうど重なる位置 */
    top: -1px;
    font-size: 14px;
    line-height: 14px;
  }
  .fixed-header__logo {
    width: 25px;
    height: 25px;
    margin-left: -12.5px;
  }
  /* 緑線を画面の下から 25px(上の赤線と同じ距離)。SCROLL の文字は線のすぐ下 */
  .scroll-indicator {
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .scroll-indicator__label {
    font-size: 12px;
  }
  /* フッターに入ったら(js/ui.js の .is-foot)、緑線が少し上へ上がり、線の下の帯全体が PAGE TOP の押せる範囲になる(2026-10-30 えびな)。
     枠の下端は動かさず高さだけ 20 → 56px にするので、線(枠の上から 4px)が 36px 上がる。文字は線のすぐ下にくっついたまま一緒に上がる */
  .scroll-indicator {
    transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .scroll-indicator.is-foot[data-state="pagetop"] {
    height: 56px;
  }
  .scroll-indicator[data-state="pagetop"] .scroll-indicator__label {
    transition: padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .scroll-indicator.is-foot[data-state="pagetop"] .scroll-indicator__label {
    width: 100%;
    padding: 0 0 36px; /* 文字は線のすぐ下のまま、その下を押せる帯として広げる */
  }
  .scroll-indicator.is-foot[data-state="pagetop"] .scroll-indicator__label::before {
    inset: 0; /* 押せる範囲 = 線の下の帯(画面幅いっぱい・高さ 56px) */
  }

  /* ---------- FV ---------- */
  .intro {
    --t: min(11.53vw, 12vh); /* ロゴ幅 6.63em = 390 幅で 298px */
  }
  .fv__label {
    left: -4px;
    font-size: 10px;
    line-height: 16px;
  }
  /* SUPER DOMMUNE / PARCO: 上下の外側の余白をそろえる(2026-10-26 Fable と検討した B 案)。
     「赤線(下端 26px)〜印鑑と時刻のブロックの上端」の距離 = 「緑線(下から 26px)〜このロゴの下端」の距離。
     FV はタイトルを軸に上下対称(赤線〜タイトル上端 = タイトル下端〜緑線)なので、外側の余白を鏡に写すと全体が締まる。
     結果として、どの画面でも縦ラベルの下端と緑線のほぼ中間に来る(ラベル / ロゴ / 緑線が等間隔に見える)。
     計算: 余白 d = 25svh − 0.58t − 68px、ロゴ下端 = 100svh − 26px − d、ロゴの高さ 25px、
     .fv__title-wrap の上端 = 50svh − 0.12t を引いて top = 25svh + 0.70em + 17px(以前は −18px = 35px 下げた) */
  .fv__logos {
    width: 206px;
    margin-left: -103px;
    top: calc(0.7em + 25vh + 17px);
    top: calc(0.7em + 25svh + 17px);
    /* 横向き(高さが低い)では下の緑線・SCROLL に重なるので、緑線の上に 16px 空けた位置より下には行かせない(2026-10-26)
       ロゴの上端(画面基準)= 50svh − 0.12em + top。緑線の上端 = 100svh − 26px、ロゴの高さ 25px */
    top: min(calc(0.7em + 25svh + 17px), calc(50svh + 0.12em - 67px));
  }

  /* 百軒店の現在時刻と緯度経度: 右上に、下から上へ読む縦組み(Figma 145:947: 右から 36px、上から 129px) */
  .fv__geo {
    /* 上下の位置: ヘッダーの赤線(下端 26px)とタイトルロゴの上端のちょうど中間に、ブロックの中心を置く(2026-10-26)。
       .fv__title-wrap の上端 = 画面の中央 − t×0.12、ロゴの上端 = 画面の中央 − t×1.16(t = タイトル基準)。
       中間 = (26 + 50svh − 1.16t) / 2 → wrap 基準では 13px − 25svh − 0.46t。そこから自分の高さの半分だけ上へ */
    top: calc(13px - 25vh - var(--t) * 0.46);
    top: calc(13px - 25svh - var(--t) * 0.46);
    translate: 0 -50%;
    right: 36px;
    writing-mode: vertical-rl; /* 上から下へ読む(1行目の時刻が右、2行目の緯度経度が左)。2026-10-26 Figma 修正 */
    font-size: 9px; /* PC は 10/13 */
    line-height: 12px;
  }
  /* 白い印鑑(Figma 145:949): 時刻の右隣(間 3px)、画面の右端ぴったり。上端は時刻より 2px 下 */
  .fv__geo-stamp {
    top: 2px;
    bottom: auto;
    left: calc(100% + 3px);
    width: 33px;
    height: 33px;
  }

  /* ---------- CONCEPT ---------- */
  .concept {
    min-height: 0;
    padding: 32px 0 88px; /* 下 135 → 88(2026-10-27: ロゴ → /PROGRAM の間 235px を約2割詰めて 188px に。PC と同じ割合) */
  }
  .concept__inner {
    width: calc(100% - 40px);
  }
  /* 縦ロックアップ: 回転前 160×51 */
  .concept__lockup {
    width: 160px;
    height: 51px;
    transform: translateX(51px) rotate(90deg);
  }
  /* 見出しと本文は、右端の縦ロゴの列(44 + 間 49)を避けた幅 */
  .concept__eyebrow {
    width: calc(100% - 73px);
    margin-top: 140px;
    font-size: 18px;
    line-height: 24px;
  }
  .concept__body {
    width: calc((100% - 73px) / 1.05);
    margin-top: 24px;
    font-size: 15px;
    line-height: 28px;
  }
  .concept__body + .concept__body {
    margin-top: 16px; /* 見た目の空き 41 → 29px(30% 詰め。2026-10-28) */
  }
  .concept__logos {
    align-items: center;
    margin-top: 62px;
  }
  .concept__logos-shotengai {
    width: 123px;
  }
  /* 3つを均等な間隔で並べる(両端は柱の端。間は space-between で同じになる) */
  .concept__logos-dommune {
    width: 117.3px;
    margin: 0;
  }
  .concept__logos-parco {
    width: 61.1px;
    margin: 0;
  }
  .concept__vertical {
    top: 177px;
    gap: 14px;
    transform: none;
  }
  .concept__vertical-logo {
    width: 44px;
  }
  .concept__vertical-label {
    left: 1px; /* SP も縦ロゴの字面の中心にそろえる */
    font-size: 10px;
    line-height: 13px;
  }

  /* ---------- PROGRAM 導入 ---------- */
  .program-intro {
    height: 228px; /* ロックアップ下端 183 + 45 → 01 の見出し */
  }
  .program-intro__heading {
    top: 100px;
    left: 17px;
    font-size: 44px;
    line-height: 44px;
  }
  .program-intro__lockup {
    top: 152px;
    left: 20px;
    width: 130px;
  }
  .program-intro__stamp {
    top: 137px;
    left: auto;
    right: 20px;
    width: 44px;
  }

  /* ---------- PROGRAM(各イベント) ---------- */
  .program,
  .program--ticket {
    padding: 0 0 128px; /* MORE INFO 下端 → 次の見出し */
  }
  .program__header {
    height: 24px;
  }
  .program__label,
  .program__header .program__num {
    font-size: 12px;
  }
  .program__label {
    left: 20px;
    line-height: 18px;
  }
  .program__header .program__num {
    right: 20px;
  }
  /* 画像の1辺 = 柱の幅。前後の枠(✕)は左右に 20px ずつ見切れる位置に自動で来る */
  .programs {
    --b: calc(100vw - 40px);
    --b: round(down, calc(100vw - 40px), 2px);
  }
  .program__body,
  .program--ticket .program__body {
    width: calc(100% - 40px);
    margin-top: 48px;
  }
  .program__eyebrow {
    font-size: 13px;
    line-height: 18px;
    white-space: normal;
  }
  .program__title {
    font-size: 32px;
    line-height: 34px;
  }
  .program__meta {
    margin-top: 22px;
  }
  .program__meta dt {
    font-size: 11px;
    line-height: 12px;
  }
  .program__meta dd {
    font-size: 22px;
    line-height: 26px;
  }
  .program__meta dd + dt {
    margin-top: 16px;
  }
  .program__meta-sub {
    margin-left: 2px;
    font-size: 13px;
    line-height: 16px;
  }
  .program__meta .program__meta-text {
    margin-top: 6px;
    font-size: 14px;
    line-height: 24px;
  }
  .program__lead {
    margin-top: 24px;
    font-size: 18px;
    line-height: 26px;
  }
  .program__lead br {
    display: none; /* PC の改行位置は使わず、柱の幅で折り返す */
  }
  /* SP は柱の幅で折り返すので、本文と同じ両端揃えに(2026-10-28 えびな: 右端がそろっていない)。
     PC 用の「途中で改行しない」(.nb)も外す(細い柱だと前の行が短く残り、右端のガタつきが大きくなる) */
  .program__lead {
    text-align: justify;
    text-justify: inter-character;
  }
  .program__lead .nb {
    white-space: normal;
  }
  .program__text {
    margin-top: 16px; /* 32 → 16(リード → 本文を、本文 → 注釈と同じ見た目の余白に) */
    font-size: 14px;
    line-height: 24px;
  }
  .ticket-list {
    margin-top: 20px;
    font-size: 13px;
    line-height: 21px;
  }
  .ticket-list li + li {
    margin-top: 14px;
  }
  .more-info {
    width: 100%;
    height: 44px;
    margin: 44px 0 0;
    font-size: 14px;
    line-height: 42px;
  }
  .program--ticket .more-info {
    margin-top: 34px;
  }

  /* ---------- ABOUT ---------- */
  .about {
    padding: 0 0 154px; /* 上: PROGRAM の下余白 128 がそのまま赤帯まで / 下: 下の帯 → ポスター */
  }
  .about__heading-text {
    top: 0;
  }
  .about__heading {
    padding-left: 0; /* PC は左寄せ。SP は中央のまま */
    text-align: center;
    height: 32px;
    font-size: min(18px, 4.6vw); /* 375 幅でも帯からはみ出さない */
    line-height: 32px;
  }
  .strip {
    height: 140px;
  }
  .strip__track {
    animation-duration: 52s; /* 帯を 0.745 倍にした分、PC と同じ速さに見えるよう短く */
  }
  .strip__item--w {
    width: 187.3px;
  }
  .strip__item--n {
    width: 104.8px;
  }
  /* 帯と帯の間: 本文の長さに合わせて伸びる(印鑑・年号・線は帯の端を基準に置く) */
  .about__inner {
    height: auto;
    padding: 59px 0 28px; /* 下: Google MAP → 下の帯 28px(2026-10-27) */
  }
  .about__stamp {
    top: -16px; /* Figma sp 2026-10-27: 右側へ。右端を本文ブロックの右端にそろえる */
    left: auto;
    right: 91px;
    width: 56px;
  }
  .about__eyebrow {
    top: 20px; /* Figma sp 2026-10-27: 左寄せ(本文の左端にそろえる) */
    left: 20px;
    right: auto;
    text-align: left;
    font-size: 16px;
    line-height: 20px;
  }
  .about__body {
    position: static;
    width: calc((100% - 111px) / 1.05); /* 右の年表を避けた幅 */
    margin-left: 20px;
    font-size: 14px;
    line-height: 24px;
  }
  .about__year,
  .about__line {
    display: block;
  }
  .about__year {
    font-size: 24px;
    line-height: 24px;
  }
  .about__year--from {
    top: -12px;
    left: auto;
    right: 0;
  }
  .about__year--to {
    top: auto;
    bottom: -12px;
    left: auto;
    right: 0;
  }
  .about__line {
    top: 42px;
    bottom: 42px;
    left: auto;
    right: 29px;
    height: auto;
  }

  /* ---------- VISUAL ---------- */
  .visual {
    padding: 0 0 165px;
  }
  .visual__frame {
    width: calc((100% - 60px) / 2);
  }
  .visual img {
    width: 100%;
    height: auto;
    aspect-ratio: 380 / 709; /* 7周年バナー最終版の比率(2026-10-30。旧 250 / 709) */
  }

  /* ---------- FOOTER ---------- */
  .site-footer {
    height: 583px; /* クレジット下端 378 + 205(緑線を含む) */
    padding: 0;
  }
  .site-footer__title {
    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    margin: 0;
  }
  /* ロゴ: 縦コピーの上端(y121)・下端(y256)に字面をそろえ、間隔は同じ 9.35px */
  .site-footer__logos {
    position: absolute;
    top: 121px;
    left: calc(50% - 156px);
    width: 300px;
    height: 135px;
    margin: 0;
  }
  .site-footer__shotengai {
    top: -2.4px;
    right: 0; /* 右端を DOMMUNE / PARCO の字面の右端にそろえる */
    width: 201.5px;
  }
  .site-footer__dommune {
    top: 55.1px;
    width: 300px;
  }
  .site-footer__parco {
    top: 102.2px;
    left: 217.7px;
    width: 82px;
  }
  .site-footer__credits {
    position: absolute;
    top: 286px;
    left: 20px;
    width: calc(100% - 40px);
    font-size: 11px;
    line-height: 16px;
  }
  /* 平体 105% で伸ばす分、箱を 1/1.05 にして柱の右端からはみ出さないように */
  .site-footer__credits p {
    width: calc(100% / 1.05);
  }
  .site-footer__credits p + p {
    margin-top: 12px;
  }
  .site-footer__copy {
    top: 126.7px; /* 「B」の上端 = 「街」の上端、「W」の下端 = PARCO の下端(PC と同じ考え方。2026-10-26) */
    left: auto;
    right: 18px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -0.0136em;
  }
  /* ロゴの出現: SP はぼかしを使わず、透明度と大きさだけ(iOS でスクロールが重くならないように) */
  .site-footer.is-wait .site-footer__logos {
    filter: none;
  }
  .site-footer__logos {
    transition:
      opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1),
      transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ===== 幅が狭い SP(iPhone SE 第1世代など 320px 幅)=====
     CONCEPT のロゴ3つ(計 301px)が柱(幅 − 40px)に入らず右端が切れるので、比率を保って縮める(365px 以上では元の大きさ) */
  .concept__logos-shotengai {
    width: min(123px, calc((100vw - 64px) * 123 / 301));
  }
  .concept__logos-dommune {
    width: min(117.3px, calc((100vw - 64px) * 117.3 / 301));
  }
  .concept__logos-parco {
    width: min(61.1px, calc((100vw - 64px) * 61.1 / 301));
  }
}

@media (max-width: 374px) {
  /* フッターのロゴ(幅 300px)が右の縦コピーに重なるので、左上を基準に 0.88 倍に縮める */
  .site-footer__logos {
    left: calc(50% - 144px);
    scale: 0.88;
    transform-origin: left top;
  }
}

/* ABOUT の「Google MAP」: SP は本文のすぐ下・左寄せ(Figma sp 2026-10-27: 本文の下端から 21px、下の帯まで 28px) */
@media (max-width: 767px) {
  .about__map {
    position: relative;
    top: auto;
    left: auto;
    display: inline-block;
    margin: 21px 0 0 20px;
  }
}

@media (max-width: 767px) {
  .program__note {
    letter-spacing: 0; /* SP は詰めない */
    margin-top: 16px;
    font-size: 11px;
    line-height: 18px;
  }
}

/* SP: イベント本文は柱が細く、英語のまとまり(The hardcore dwelling in Shibuya 等)で行が切れると
   両端揃えで字間が大きく開くので、左揃えにする(2026-10-27) */
@media (max-width: 767px) {
  .program__text {
    text-align: left;
  }
}

@media (max-width: 767px) {
  .program__time {
    margin-top: 2px;
    font-size: 13px; /* SP の小見出しと同じ 13/18 */
    line-height: 18px;
  }
}

@media (max-width: 767px) {
  /* SP: 1行目(実測 約 11.1em)が柱の幅に収まる大きさ(390 幅で約 30.7px) */
  .program__title--long {
    font-size: min(32px, (100vw - 40px) / 11.4);
    line-height: 1.24; /* 1.06 → 1.24(2026-10-28: PC と同じ割合で広げる) */
  }
}

/* 幅 359px 以下(iPhone SE 第1世代・小型 Android など): CONCEPT 本文の柱が 267px と狭く、
   語の途中で切らない語(.nb・「BORDER/SHIBUYA」など)が次の行へ送られると、前の行が両端揃えで大きく間延びする。
   この幅だけ左揃えにする(2026-10-28 端末チェックで発見) */
@media (max-width: 359px) {
  .concept__body {
    text-align: left;
  }
}

/* ---- SP: FV タイトルロゴを 90% に縮小(2026-10-28 えびな指示)。中心は画面の上下中央のまま ----
   .fv__title-wrap の 1em を t とすると、ロゴの中心は t×0.12、高さは t×2.32×0.9(上端 −0.924t、下端 1.164t)。
   ロゴの中の em は 0.9t なので、上端 = −0.924 / 0.9 = −1.0267em
   縦ラベル・時刻と緯度経度・DOMMUNE/PARCO ロゴは、これまでと同じ考え方で縮めたロゴに合わせて置き直す */
@media (max-width: 767px) {
  .texty--logo .texty__state--logo {
    font-size: 0.9em;
    --logo-c: 0.1333em; /* 0.12 / 0.9。BORDER は上端 0.1333 − 1.16 = −1.0267em(これまでと同じ) */
  }
  /* 縦ラベル: 上端を縮めたロゴの下端にそろえる */
  .fv__label {
    top: calc(var(--t) * 1.164);
  }
  /* 時刻と緯度経度: 赤線(下端 26px)と縮めたロゴの上端(中央 − 1.044t)の中間。wrap 基準で 13px − 25svh − 0.402t */
  .fv__geo {
    top: calc(13px - 25vh - var(--t) * 0.402);
    top: calc(13px - 25svh - var(--t) * 0.402);
  }
  /* DOMMUNE / PARCO: 外側の余白を上と鏡に(余白 d = 25svh − 0.522t − 68px)→ top = 25svh + 0.642em + 17px */
  .fv__logos {
    top: calc(0.642em + 25vh + 17px);
    top: min(calc(0.642em + 25svh + 17px), calc(50svh + 0.12em - 67px));
  }
}

/* SP: FV タイトル一式を持ち上げた分(css/intro.css の --fv-lift)の補正。
   時刻は赤線とロゴ上端の中間なので半分だけ戻す。DOMMUNE / PARCO は外側の余白を上と鏡にする考え方のまま(1.5 倍戻す) */
@media (max-width: 767px) {
  .fv__geo {
    top: calc(13px - 25vh - var(--t) * 0.402 + var(--fv-lift) * 0.5);
    top: calc(13px - 25svh - var(--t) * 0.402 + var(--fv-lift) * 0.5);
  }
  .fv__logos {
    top: calc(0.642em + 25vh + 17px + var(--fv-lift) * 1.5);
    top: min(calc(0.642em + 25svh + 17px + var(--fv-lift) * 1.5), calc(50svh + 0.12em - 67px + var(--fv-lift)));
  }
}

/* PROGRAM 01 のタイトル「SPECIAL LIVE / 「BORDER/SHIBUYA」」(2026-10-28 本橋さん修正): 2行目(約 10.4em)を語の途中で折らない。
   画面が狭いとき(幅 375px 未満)だけ、柱の幅に収まるよう小さくする */
@media (max-width: 767px) {
  .program__title--fit {
    font-size: min(32px, (100vw - 40px) / 10.6);
    line-height: 1.06;
  }
}