/* ===== INTRO(FV + CONCEPT)=====
   .stage は .stage-track の間だけ画面に固定(sticky)。写真ストリームとタイトルはここ。
   .stage-track は intro の上に重ねて置き(流れの外)、.intro__content がその上に重なる。
   2026-10-28: 以前は intro の最後まで固定し、CONCEPT 上の写真の束は JS でスクロールと同じ量だけ動かしていた。
   iPhone Safari では JS の動きがスクロールに1コマ遅れてカクついたので、束がページと同じ速さで流れはじめる位置
   (js/stream.js の liftB)で固定を外し、そこから先はブラウザのスクロールそのもので動かす。
   .stage-track の高さは JS が入れる(JS が動かないときは intro と同じ高さ = 従来どおり最後まで固定) */
.intro {
  --runway: 2; /* FVタイトル固定中のスクロール量(画面の高さ × この値) */
  /* タイトル基準サイズ。1280 幅で 100px を起点に、ブラウザの幅に合わせて拡大・縮小(タイトル一式 = ロゴ・縦のラベル・DOMMUNE/PARCO ロゴが一緒に拡縮)。
     ただし横長で背の低い画面ではロゴが上下の線に迫るので、画面の高さの 14% を上限にする(1280×720 でも 100px のまま) */
  --t: min(7.8125vw, 14vh);
  position: relative;
}

.stage-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 0;
}
.stage {
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  contain: strict;
}
.stage__photos {
  position: absolute;
  z-index: 1;
  inset: 0;
}
/* 写真には1枚ずつ黒10%を重ねる(タイトルとロゴを少し読みやすくする)。
   以前は FV 全面に重ねていたが、背景にも掛かり、FV〜CONCEPT の区間の終わりで背景の明るさに段差が出ていた(2026-10-22)。
   背景の暗さはページ全体の背景(css/base.css の .page-bg__img::after)で同じ分だけ足している */
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ph {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
/* 表示中の写真だけ描画を最適化(全部に付けると Safari で非表示の写真までメモリを使う) */
.ph.is-on {
  will-change: transform, opacity;
  backface-visibility: hidden;
}
/* モザイク(実験): 小さい画像をピクセルのまま拡大して、ブロック状に見せる(js/stream.js の MOSAIC) */
.ph img.is-mosaic {
  image-rendering: pixelated;
}
.ph img,
.ph video {
  display: block;
  width: 100%;
  height: auto;
}

.intro__content {
  position: relative;
  z-index: 1;
}

/* ===== FV ===== */
.fv-pin {
  position: relative;
  height: calc(100vh * (1 + var(--runway)));
  height: calc(100svh * (1 + var(--runway)));
}
/* タイトル層: 舞台(.stage)の中で背景と写真の間に置く。上へ流す動きは JS */
.fv {
  position: absolute;
  inset: 0;
  z-index: 2; /* ロゴタイトルは写真より前(最前面) */
  pointer-events: none;
}
/* タイトルは1行・画面中央(Figma: y370 / 880、100px)。狭い画面ではタイトル一式を縮小 */
.fv__title-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  font-size: var(--t);
  height: 0.7em;
  will-change: transform;
}
/* 「(SHIBUYA PARCO) 7th ANNIVERSARY」(Figma 1:1041 / 21:168)
   縦書きで画面の左端に吸着。タイトルのすぐ下から始まり、スクロールでタイトルと一緒に上へ抜ける(.fv__title-wrap の中) */
.fv__label {
  position: absolute;
  top: calc(var(--t) * 0.73); /* Figma: タイトル上端 370 → ラベル上端 443 */
  left: -5px; /* Figma: 1行目の中心が x22、2行目が x4(字面が画面の左端にそろう) */
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  animation: intro-fade 1s cubic-bezier(0.22, 1, 0.36, 1) 1.7s both; /* タイトルの文字と一緒に出る */
}
@media (prefers-reduced-motion: reduce) {
  .fv__label {
    animation: none;
  }
}
.fv__title {
  font-size: 1em;
  line-height: 0.7;
  font-weight: 400;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* タイトルの文字アニメーション(js/title.js が .texty の中身を生成)
   各行を「行の高さ .7em + 上下のはみ出し分」で切り抜き、1文字ずつ下から出して上へ抜く */
.texty {
  position: relative;
  display: block;
  height: 0.7em;
}
.texty__state {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
.texty__line {
  display: block;
  height: 0.7em;
  clip-path: inset(-0.32em -4em -0.32em -1em);
}
.texty__ch {
  display: inline-block;
  white-space: pre;
  transform: translate3d(0, 1.34em, 0);
}
/* 出る: すっと動いてゆっくり減速(expo out) */
.texty__state.is-in .texty__ch {
  transform: translate3d(0, 0, 0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--di, 0s);
}
/* 消える: ためてから加速して上へ抜ける */
.texty__state.is-out .texty__ch {
  transform: translate3d(0, -1.34em, 0);
  transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1) var(--do, 0s);
}
/* 「/」は位置を動かさず、上から下へ描かれる(見える範囲を上から下へ広げる)。消えるときも上から消えていく
   上下左右に少し余白を足して、字形のはみ出しが切れないようにしている */
.texty__ch--slash {
  transform: none;
  clip-path: inset(-0.3em -0.2em calc(100% + 0.3em) -0.2em); /* 待機: まだ何も描かれていない */
}
.texty__state.is-in .texty__ch--slash {
  transform: none;
  clip-path: inset(-0.3em -0.2em -0.3em -0.2em);
  transition: clip-path 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--di, 0s);
}
.texty__state.is-out .texty__ch--slash {
  transform: none;
  clip-path: inset(calc(100% + 0.3em) -0.2em -0.3em -0.2em);
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1) var(--do, 0s);
}
.texty__state.is-reset .texty__ch {
  transition: none;
}
/* 百軒店は文字サイズ .85 なので、移動量を em 換算で補正(1.34 / .85) */
.fv__title-jp .texty__ch {
  transform: translate3d(0, 1.58em, 0);
}
.texty__state.is-in .fv__title-jp .texty__ch {
  transform: translate3d(0, 0, 0);
}
.texty__state.is-out .fv__title-jp .texty__ch {
  transform: translate3d(0, -1.58em, 0);
}
/* 「百軒店」の SVG 字形(js/title.js)。文字と同じ大きさ・ベースラインに置く */
.texty__ch--glyph {
  width: 1em; /* 幅を明示しないと、タイトル全体の幅を測るときに SVG が 0 扱いになり、中央からずれる */
  height: 1em;
  margin-right: 0.05em; /* letter-spacing の代わり(SVG には効かないため) */
  vertical-align: -0.12em; /* SVG の下端は字面の下(-120)なので、ベースラインに合わせる */
}
.texty__ch--glyph svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.fv__title-jp {
  display: inline-block;
  margin-left: 0.22em; /* Figma: 「PARCO /」の右端から約19px(1280時) */
  font-family: var(--font-jp-gothic);
  font-weight: 500;
  font-size: 0.85em;
  line-height: 0.82;
  letter-spacing: 0.05em;
}
/* ロゴはタイトルの下・中央(Figma: y709 → タイトル上端から 3.39t) */
.fv__logos {
  position: absolute;
  left: 50%;
  top: 3.39em;
  width: 2.31em;
  margin-left: -1.155em;
}
/* 表示時: タイトルの文字が出はじめた後に、ロゴがふわっと出る */
.fv__logos {
  animation: intro-fade 1.1s cubic-bezier(0.22, 1, 0.36, 1) 2.2s both; /* タイトルの文字が出そろう頃 */
}
@media (prefers-reduced-motion: reduce) {
  .fv__logos {
    animation: none;
  }
}

/* ===== CONCEPT ===== */
.concept {
  position: relative;
  min-height: 942px;
  padding: 15px 0 140px; /* Figma 2026-10-20 更新: 縦組みのロゴ(上端 y15)から始まる。下 240 → 140(2026-10-27 えびな: ロゴ → /PROGRAM の間 502px を約2割詰めて 402px に) */
}
.concept__inner {
  position: relative;
  display: flow-root; /* 中の CONCEPT の上余白が外へ抜けて、枠ごと下がらないように */
  width: min(var(--col), calc(100% - var(--gutter-sp) * 2));
  margin: 0 auto;
}
/* 柱の左上に、フッターと同じ「BORDER / SHIBUYA ― SHIBUYA PARCO / 百軒店」を 90° 回して縦に置く(Figma 97:1479)
   回すと幅72×高さ226。表示時は読む順に上から下へ現れる(js/details.js) */
.concept__lockup {
  position: absolute;
  top: 0;
  left: 0;
  width: 226px;
  height: 72px;
  transform-origin: 0 0;
  transform: translateX(72px) rotate(90deg);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.concept__inner.is-wait .concept__lockup {
  clip-path: inset(0 100% 0 0); /* 回転前の右側 = 画面では下側を隠す */
  transition: none;
}
.concept__eyebrow {
  margin-top: 202px; /* Figma: 縦組みロゴの上端 15 → CONCEPT 217 */
  font-weight: 600;
  font-size: 22px; /* Figma 2026-10-20 更新: 20 → 22、柱の右端にそろえる */
  line-height: 30px;
  text-align: right;
}
.concept__body {
  margin-top: 45px; /* Figma: CONCEPT 下端 247 → 本文 292 */
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 22px; /* 原稿が長いので 24 → 22 */
  line-height: 40px; /* Figma 2026-10-20 更新 */
  /* 均等配置(最終行は左揃え): 各行の右端を柱の右端=「CONCEPT」の T の右端にそろえる(イラレの文字 BOX 組みと同じ) */
  text-align: justify;
  text-justify: inter-character;
  /* 字間をわずかに詰める(2026-10-26): 1・2段落目の最後の「る。」「た。」が1文字だけ次の行に溢れるのを防ぐ。
     -0.025em でちょうど収まるので、Safari との描画差を見込んで -0.03em(22px で 0.66px) */
  letter-spacing: -0.03em;
  /* 小さい「ァ」「ッ」などを行頭に置かない(「フ/ァッション」のように分かれないよう、前の文字ごと次の行へ送る) */
  line-break: strict;
}
/* 段落の間: 1行分(40px)→ 見た目の空きを 30% 詰める(2026-10-28 えびな)。
   見た目の空き = margin + 行間の上下の空き(40 − 22 = 18)。58px → 41px */
.concept__body + .concept__body {
  margin-top: 23px;
}
/* ロゴ(Figma 2026-10-26 Group 72): 柱の左端に渋谷百軒店商店街、右端に SUPER DOMMUNE / PARCO */
.concept__logos {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  margin: 62px auto 0;
}
.concept__logos-shotengai {
  width: 184px;
}
/* SUPER DOMMUNE と PARCO は別々の画像(SP で 3 つを均等に並べるため)。PC は右端に寄せ、間は Figma の 36px */
.concept__logos-dommune {
  width: 173.3px;
  margin: 3.9px 0 0 auto; /* Figma: PARCO より 3.9px 下から */
}
.concept__logos-parco {
  width: 90.2px;
  margin-left: 36.2px;
}
.concept__vertical {
  position: absolute;
  top: 203px;
  right: 0; /* 画面の右端に吸着(どの画面幅でも) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 27px;
}
.concept__vertical-logo {
  width: 61px;
}
/* 表示時: 位置はそのまま、上から下へ描かれる(タイトルの「/」と同じ。js/details.js) */
.concept__vertical {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.concept__vertical.is-wait {
  clip-path: inset(0 0 100% 0);
  transition: none;
}
.concept__vertical-label {
  position: relative;
  left: 1px; /* 上の縦ロゴの字面と左右の中心をそろえる(実測で約 1px 左に寄っていた。2026-10-28) */
  writing-mode: vertical-rl;
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}

/* ===== 1024〜1279 ===== */


/* ===== 768〜1023 ===== */
@media (max-width: 1023px) {
  .concept__body {
    font-size: 20px;
    line-height: 34px;
  }
  .concept__body + .concept__body {
    margin-top: 20px; /* 見た目の空き 48 → 34px(30% 詰め) */
  }
  .concept__vertical {
    transform: scale(0.85);
    transform-origin: top right;
  }
}



/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .intro {
    --runway: 0.6;
  }
}

/* ---- 支給ロゴ版タイトル(js/title.js の LOGOS)。1em = 100px(1280 幅のとき) ----
   幅・高さは js がロゴごとに入れる(BORDER / SHIBUYA 6.63×2.32em、SHIBUYA PARCO / 百軒店 6.13×3.13em)。
   上下は、ロゴの中心(--half = 高さの半分)を「.fv__title-wrap の上端から 0.12 × W」の位置に置く(W = .fv__title-wrap の 1em)。
   --logo-c はその位置をロゴの中の em で表したもの(縮小しないとき 0.12em。下の PC / SP で縮小率に合わせて変える) */
.texty--logo .texty__state--logo {
  --logo-c: 0.12em;
  top: calc(var(--logo-c) - var(--half, 1.16em));
  width: 6.63em;
  height: 2.32em;
}
.texty__line--logo {
  position: absolute;
  left: 0;
  right: 0;
  clip-path: inset(-0.1em -1em -0.1em -1em); /* 行の外(上下)に出た文字は見せない */
}
.texty__ch--logo {
  position: absolute;
  top: 0;
  height: 100%;
  transform: translate3d(0, 1.3em, 0);
}
.texty__ch--logo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.texty__state.is-in .texty__ch--logo {
  transform: translate3d(0, 0, 0);
}
.texty__state.is-in .texty__ch--logo.texty__ch--slash,
.texty__ch--logo.texty__ch--slash {
  transform: none;
}

/* ---- 支給ロゴ版の上下位置(2026-10-22 えびな指示): ロゴ(BORDER / SHIBUYA)が画面の高さの中央に来るように ----
   ロゴの中心は .fv__title-wrap の上端から 0.12em 下(上端 -1.04em、高さ 2.32em)。
   上の赤線(36px)と下の緑線(下から約40px)はほぼ同じ距離なので、画面の中央 = 見た目の中央 */
.fv__title-wrap {
  top: calc(50% - 0.12em);
}
/* 下の DOMMUNE / PARCO ロゴは、ロゴタイトルの下端〜下の緑線の間の 2/3 くらいの位置(Figma の比率)。画面の高さで動く */
.fv__logos {
  top: calc(1.28em + (50vh - 42px - 1.16em - 0.28em) * 0.67);
}
/* 左端の縦ラベル「(SHIBUYA PARCO) 7th ANNIVERSARY」: 上端をロゴタイトルの下端(.fv__title-wrap 上端から 1.28em)にそろえる。
   タイトルと同じ単位(--t)で決めているので、画面サイズが変わっても常に一致する */
.fv__label {
  top: calc(var(--t) * 1.28);
}

/* ---- PC: FV タイトルロゴを 81% に縮小(2026-10-26 に 90%、2026-10-28 えびな指示でさらに 90% → 0.81)。SP は css/sp.css ----
   ロゴだけを縮め(縦ラベル・DOMMUNE/PARCO ロゴの大きさは変えない)、中心は画面の上下中央に保つ。
   .fv__title-wrap の 1em を W とすると、ロゴの中心は W×0.12、高さは W×2.32×0.81。
   ロゴの中の em は 0.81W なので、上端 = (0.12 − 1.16×0.81)W = −0.8196W = −1.0119em */
@media (min-width: 768px) {
  .texty--logo .texty__state--logo {
    font-size: 0.81em;
    --logo-c: 0.1481em; /* 0.12 / 0.81。BORDER は上端 0.1481 − 1.16 = −1.0119em(これまでと同じ) */
  }
  /* 左端の縦ラベル: 上端を縮めたロゴの下端(W×(0.12 + 0.9396) = W×1.0596)にそろえる */
  .fv__label {
    top: calc(var(--t) * 1.0596);
  }
  /* DOMMUNE / PARCO ロゴ: 縮めたロゴの下端 〜 下の緑線の間の 2/3 の位置(これまでと同じ考え方) */
  .fv__logos {
    top: calc(1.0596em + (50vh - 42px - 0.9396em - 0.28em) * 0.67);
  }
}

/* ---- 百軒店の現在時刻と緯度経度(Figma 145:944 / SP 145:947。2026-10-26) ----
   PC: 画面の右端に寄せ、下端を左端の縦ラベルの下端にそろえる。タイトルと一緒にスクロールで上へ抜ける */
.fv__geo {
  position: absolute;
  right: 0;
  top: calc(var(--t) * 1.0596 + var(--label-h, 109.5px) - 26px); /* 縦ラベルの上端(ロゴ 81% の下端)に合わせる */
  font-weight: 500;
  font-size: 10px;
  line-height: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* 秒が進んでも文字幅が揺れないように */
  animation: intro-fade 1s cubic-bezier(0.22, 1, 0.36, 1) 1.7s both; /* 縦ラベルと一緒に出る */
}
@media (prefers-reduced-motion: reduce) {
  .fv__geo {
    animation: none;
  }
}
/* 時刻の数字: 1文字ずつ同じ幅の枠に入れる(幅 --dw は js/clock.js が一番広い数字から測る)。
   inline-size なので、SP の縦組みでも文字の進む向きの幅がそろう */
.fv__clock .fv__d {
  display: inline-block;
  inline-size: var(--dw, 0.72em);
  text-align: center;
}
/* 時刻の上の白い印鑑(Figma 145:951): 左端を時刻の左端にそろえ、時刻の上端から 10px 上に置く */
.fv__geo-stamp {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  width: 54px;
  height: 54px;
  max-width: none; /* 時刻の箱より大きくても縮めない(SP の縦組みで箱の幅は 26px) */
  /* 開いたとき: タイトルが出たあとに判を押す(ABOUT の印鑑と同じ動き。css/base.css の stamp-in) */
  animation: stamp-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 2.3s both;
}

@media (prefers-reduced-motion: reduce) {
  .fv__geo-stamp {
    animation: none;
  }
}

/* スクロールで消すための入れ物(js/stream.js が opacity を掛ける)。.fv__title-wrap と同じ箱なので、中の位置は変わらない */
.fv__fo {
  position: absolute;
  inset: 0;
}

/* ---- 百軒店の印鑑(時刻の上 / SP は右): 目立ちすぎないよう 92% の濃さに(2026-10-28 えびな指示)。
   開いたときの stamp-in は from だけなので、出たあとはこの濃さで止まる ---- */
.fv__geo-stamp {
  opacity: 0.92;
}

/* ---- FV タイトル一式を少しだけ上へ(2026-10-28 えびな: 数値では上下中央だが、下に下がって見える) ----
   下側に DOMMUNE / PARCO ロゴ・縦ラベルなどが集まっていて重心が下にあるのと、
   上下中央ちょうどに置いた物は下がって見える(視覚的な中心は少し上)ため、画面の高さの 1.2% 持ち上げる。
   ロゴ・縦ラベル・時刻はタイトルと一緒に動く。DOMMUNE / PARCO ロゴの位置は下の緑線との関係を保つよう補正(PC: 下の式) */
.intro {
  --fv-lift: 1.2vh;
}
.fv__title-wrap {
  translate: 0 calc(-1 * var(--fv-lift));
}
@media (min-width: 768px) {
  .fv__logos {
    top: calc(1.0596em + (50vh - 42px - 0.9396em - 0.28em) * 0.67 + var(--fv-lift) * 0.67);
  }
}

/* ---- CONCEPT 本文: 上の行から1行ずつ現れる(js/lines.js。2026-10-30 えびな) ----
   動きは見出し(.hx__ch)と同じカーブ・長さ。行は両端揃えのまま(段落の最後の行と <br> の前の行だけ左揃え) */
.concept__body.ln--wait {
  opacity: 0; /* 行を測るまで(フォントの読み込み後)隠す */
}
.ln__line {
  display: block;
  text-align: justify;
  text-align-last: justify;
}
.ln__line--last {
  text-align-last: auto;
}
.ln .ln__line {
  opacity: 0;
  transform: translate3d(0, 0.6em, 0);
}
.ln.ln--in .ln__line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}