/* ===== 変数 ===== */
:root {
  --c-white: #ffffff;
  --c-red: #f83c21;
  --c-green: #5af00f; /* 2026-10-30 えびな: 黄緑寄りに決定(HSL 100°・88%・50%。design/green-compare の J)。その前は #0ff078(148°)・#0ff08e(154°)、元は #00ff00 */
  --c-bg: #2b2b2b;
  /* 欧文見出しに混ざる和文(「GATE TO 百軒店」など)は、Windows でも字形がそろうよう後ろにゴシックを明示 */
  --font-en: "Be Vietnam Pro", Helvetica, Arial, "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-jp: "ryo-display-plusn", "Hiragino Mincho ProN", "Yu Mincho", serif;
  /* ゴシックは端末のフォント(Adobe Fonts のキットは Ryo Display M の1書体だけにして軽くした) */
  --font-jp-gothic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  --container: 1280px;
  --col: 520px; /* 本文の柱(グリッド4〜9列) */
  --gutter-sp: 24px;
}

/* ===== reset ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
body {
  background: var(--c-bg);
  color: var(--c-white);
  font-family: var(--font-en);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
h1,
h2,
h3 {
  font-weight: inherit;
}

/* フォント読み込み中のチラつき防止(キットが落ちても wf-inactive で表示される)
   FV タイトルの「百軒店」は SVG なのでフォント待ち不要 */
.wf-loading .concept__body {
  opacity: 0;
}
.concept__body {
  transition: opacity 0.4s;
}

/* 制作中のつなぎ(後でセクションに置き換え) */
.wip {
  position: relative;
  z-index: 2;
  padding: 160px 24px;
  background: #111;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

/* 読み上げ専用(画面には出さない) */
/* ===== ページ全体の背景写真 =====
   画面に固定した1枚を、ページ全体のスクロールに合わせてゆっくり上へ送る(パララックス。js/bg.js)
   上に黒50%を乗算して、文字を読みやすくする */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.page-bg__img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 135vh;
  will-change: transform;
}
/* 写真は <img>(画面幅で 768 / 1280 / 1920 を出し分け)。見え方は以前の背景画像と同じ(全面・上寄せ) */
.page-bg__photo,
.page-bg__img .program__reveal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* 実験: 開いた直後だけ、イベント画像と同じ分割演出で現れる(js/bg.js の BG_SLICE / js/reveal.js) */
.page-bg__img .program__reveal {
  visibility: hidden;
}
/* 背景写真の切り替え(js/bg.js): 上に重ねた2枚目をフェードで出し入れする */
.page-bg__photo {
  transition: opacity 1.6s cubic-bezier(0.45, 0, 0.55, 1);
}
/* じんわり縮小(js/bg.js が .is-zoom を付け直す): 1枚を見せている間(8秒 + 切替 1.6秒 + 消えていく間)、
   少し寄った状態(1.08 倍・やや上)からゆっくり引いていく。FV の写真が中央へ集まっていく動きと揃えて、拡大 → 縮小に(2026-10-26 えびな)。
   止まって見えないよう一定の速さ(linear)。写真の「引く前」の状態を基本にしておき、
   開いた直後の分割演出(canvas)も同じ大きさで描く → 演出が終わって写真に替わった瞬間に大きさが跳ねない */
.page-bg__photo,
.page-bg__img .program__reveal {
  transform-origin: 50% 40%;
  transform: translate3d(0, -1.2%, 0) scale(1.08);
}
.page-bg__photo.is-zoom {
  animation: bg-zoom 12s linear forwards;
}
@keyframes bg-zoom {
  from {
    transform: translate3d(0, -1.2%, 0) scale(1.08);
  }
  to {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-bg__photo,
  .page-bg__img .program__reveal {
    transform: none;
  }
}
.page-bg__photo.is-off {
  opacity: 0;
}
.page-bg__img.is-fx .program__reveal {
  visibility: visible;
}
.page-bg__img.is-fx .page-bg__photo,
.page-bg__img.is-wait .page-bg__photo {
  visibility: hidden;
}
.page-bg__img.is-swap .page-bg__photo {
  visibility: visible;
}
.page-bg__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.65; /* 0.55 → 0.65(2026-10-28 背景をもう少し暗く)。0.5 → 0.55(2026-10-22): FV で全面に重ねていた黒10%の分をここで足し、ページ全体を FV と同じ暗さにそろえる(0.5 + 0.5×0.1)。
     黒の乗算は通常の重ねと同じ見た目なので mix-blend-mode は使わない(Safari の負荷対策) */
}

/* ===== 見出しの表示演出(js/headings.js) =====
   FV タイトルと同じ動き: 1文字ずつ下から出て、すっと減速して止まる。行ごとに切り抜く */
.hx__line {
  display: block;
  clip-path: inset(-0.2em -0.5em -0.25em -0.5em);
}
.hx__ch {
  display: inline-block;
  white-space: pre;
  transform: translate3d(0, 0, 0);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.hx--wait .hx__ch {
  transform: translate3d(0, 1.34em, 0);
  transition: none;
}
/* 「/」は位置を動かさず、上から下へ描かれる(FV タイトルの .texty__ch--slash と同じ) */
.hx__ch--slash,
.hx--wait .hx__ch--slash {
  transform: none;
}
.hx__ch--slash {
  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(--d, 0s);
}
.hx--wait .hx__ch--slash {
  clip-path: inset(-0.3em -0.2em calc(100% + 0.3em) -0.2em);
  transition: none;
}

/* ===== SVG ロゴの中の「/」と文字(js/slash.js) =====
   「/」は上から下へ線が引かれる。rise のロゴは文字が1字ずつ下から出る(見出しと同じ動き) */
.sv-ch {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s);
}
.sv--wait .sv-ch {
  transform: translate(0, var(--rise));
  transition: none;
}
.sv-slash {
  stroke-dasharray: var(--len);
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1) var(--d, 0s);
}
.sv--wait .sv-slash {
  stroke-dashoffset: var(--len);
  transition: none;
}

/* ===== 印鑑: わずかに大きい状態から、ぴたっと収まる(判を押す感触。ABOUT の印鑑と同じ動き) ===== */
@keyframes stamp-in {
  from {
    opacity: 0;
    transform: scale(1.14);
  }
}

/* ===== スムーススクロール(Lenis 公式の CSS。js/smooth.js) ===== */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 日本語はフォントが持っている詰め情報(palt: プロポーショナル字幅)で組む(2026-10-28 えびな: ?palt=1 で比較して決定)。
   ベタ組だとカタカナ・約物の前後が間延びするため。フォントデータに元から入っている情報なので、読み込みは増えない。
   欧文(Be Vietnam Pro)には影響しない */
body {
  font-feature-settings: "palt" 1;
}
/* 本文: 行頭に「っ」「ー」などを置かない(strict)。段落の最後の行が数文字だけにならないよう、ブラウザに改行を整えさせる(pretty。対応ブラウザのみ) */
.concept__body,
.about__body,
.program__lead,
.program__text,
.program__note,
.program__meta-text,
.ticket-list li {
  line-break: strict;
  text-wrap: pretty;
}
/* Safari(iOS 26 / macOS 26 以降)は pretty で段落全体の行の長さをそろえようとし、行を短めに折り返す。
   両端揃えの本文ではその余りが字間に配られて間延びするので、Safari だけ通常の折り返しに戻す(2026-10-28 端末チェックで発見)。
   font: -apple-system-body は Safari だけが対応している値なので、Safari の判定に使う */
@supports (font: -apple-system-body) {
  .concept__body,
  .about__body,
  .program__lead,
  .program__text,
  .program__note,
  .program__meta-text,
  .ticket-list li {
    text-wrap: wrap;
  }
}

/* 語の途中で改行しない(固有名詞など) */
.nb {
  white-space: nowrap;
}
/* PC だけ途中で改行しない(SP は柱が細いので折り返しを許す。例: CONCEPT の「BORDER/SHIBUYA」) */
@media (min-width: 768px) {
  .nb-pc {
    white-space: nowrap;
  }
}