@charset "UTF-8";
/* ==========================================================================
   JOMONÖW — Statement Section Styles
   ファイル: statement.css
   役割: Statement セクション (ヘッダーパート + 動画パート)
   ---
   構造:
   <section class="statement site-section">
     .statement__header  — ヘッダーパート (pttn-big-2.svg + STATEMENT)
     .statement__video-area — 動画パート (動画 + 縦書きコピー10セット)
   ---
   コピー: 2行ワンセット×10、縦書き。各セット4秒(イン1/表示2/アウト1)、
   43秒で1ループ (10セット40秒 + 間3秒)。
   ========================================================================== */

/* --------------------------------------------------------------------------
   v9.7: .statement / .statement__header / __header-bg / __title /
         .statement__video-area / .statement__video を削除
   ---
   理由: Statement ヘッダーと動画パートは Hero下の site-home__pattern と
         site-home__video が兼ねる構造に変更。
         このファイルでは縦書きコピー (.statement__copy / __set / __line) と
         そのアニメーションだけを定義する。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   縦書きコピー (動画の上に重ねる)
   2行ワンセット×10。全セットを画面中央に重ね置き、時間差で表示。
   ---
   親要素 (.site-home__video) は position: relative + overflow: hidden。
   コピーは absolute inset:0 でその上に被さる。
   -------------------------------------------------------------------------- */
.statement__copy {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  /* 全セットをこの中央基準に重ねる */
}

/* 1セット (2行) — 画面中央に配置 */
.statement__set {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 2行を横並び (縦書きなので右→左) */
  display: flex;
  flex-direction: row-reverse;
  /* 縦書きの上下中央揃え (行の長さが違っても重心が合う) */
  align-items: center;
  justify-content: center;
  /* 初期は非表示。アニメで出現 */
  opacity: 0;
  /* reveal の is-visible で動き出すまで停止 */
  animation-play-state: paused;
}
/* .statement__copy が画面に入ったらアニメ開始 */
.statement__copy.is-visible .statement__set {
  animation-play-state: running;
}

/* コピー1行 (縦書き)
   ---
   v9.4: font-feature-settings: "palt" 1 を削除。
   palt は横書き用のプロポーショナル詰め。text-orientation: upright の
   縦書きで効かせると、ひらがな・カナ・約物が字面の左に寄って配置され、
   漢字とのセンター揃いが崩れる (Illustrator の縦組みと不一致になる)。
   ※ 横書きで palt を使う他箇所には一切影響しない。 */
.statement__line {
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* v25.6: .tsuku-bold標準装備の palt/halt/-0.05em から保護 (v8.9確定組版の維持) */
  letter-spacing: 0;
  font-feature-settings: normal;
  font-family: var(--font-tsuku-old);
  font-weight: 400;
  /* 52pt = 52px (W1440アートボード基準) */
  font-size: 52px;
  /* 行送り 91pt ÷ 52pt = 1.75 */
  line-height: 1.75;
  color: var(--color-yellow);
  margin: 0;
}

/* --------------------------------------------------------------------------
   各セットの出現アニメーション
   32秒で1ループ。各セット3秒の出番 (イン0.75/表示1.5/アウト0.75)。
   10セット×3秒=30秒 + ループ前の間2秒 = 32秒。
   animation を全セット共通 32s・infinite で回し、
   keyframes 側で自分の出番だけ opacity を上げる。
   -------------------------------------------------------------------------- */
.statement__set {
  animation-duration: 32s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.statement__set--1  { animation-name: statementSet1; }
.statement__set--2  { animation-name: statementSet2; }
.statement__set--3  { animation-name: statementSet3; }
.statement__set--4  { animation-name: statementSet4; }
.statement__set--5  { animation-name: statementSet5; }
.statement__set--6  { animation-name: statementSet6; }
.statement__set--7  { animation-name: statementSet7; }
.statement__set--8  { animation-name: statementSet8; }
.statement__set--9  { animation-name: statementSet9; }
.statement__set--10 { animation-name: statementSet10; }

/* 32秒周期。各セットは自分の3秒の出番だけ opacity 1。
   イン0.75秒 / 表示1.5秒 / アウト0.75秒。 */
@keyframes statementSet1 {
  0% { opacity: 0; }
  2.344% { opacity: 1; }
  7.031% { opacity: 1; }
  9.375%, 100% { opacity: 0; }
}
@keyframes statementSet2 {
  0%, 9.375% { opacity: 0; }
  11.719% { opacity: 1; }
  16.406% { opacity: 1; }
  18.750%, 100% { opacity: 0; }
}
@keyframes statementSet3 {
  0%, 18.750% { opacity: 0; }
  21.094% { opacity: 1; }
  25.781% { opacity: 1; }
  28.125%, 100% { opacity: 0; }
}
@keyframes statementSet4 {
  0%, 28.125% { opacity: 0; }
  30.469% { opacity: 1; }
  35.156% { opacity: 1; }
  37.500%, 100% { opacity: 0; }
}
@keyframes statementSet5 {
  0%, 37.500% { opacity: 0; }
  39.844% { opacity: 1; }
  44.531% { opacity: 1; }
  46.875%, 100% { opacity: 0; }
}
@keyframes statementSet6 {
  0%, 46.875% { opacity: 0; }
  49.219% { opacity: 1; }
  53.906% { opacity: 1; }
  56.250%, 100% { opacity: 0; }
}
@keyframes statementSet7 {
  0%, 56.250% { opacity: 0; }
  58.594% { opacity: 1; }
  63.281% { opacity: 1; }
  65.625%, 100% { opacity: 0; }
}
@keyframes statementSet8 {
  0%, 65.625% { opacity: 0; }
  67.969% { opacity: 1; }
  72.656% { opacity: 1; }
  75.000%, 100% { opacity: 0; }
}
@keyframes statementSet9 {
  0%, 75.000% { opacity: 0; }
  77.344% { opacity: 1; }
  82.031% { opacity: 1; }
  84.375%, 100% { opacity: 0; }
}
@keyframes statementSet10 {
  0%, 84.375% { opacity: 0; }
  86.719% { opacity: 1; }
  91.406% { opacity: 1; }
  93.750%, 100% { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Reduced Motion: コピーの点滅を避け、最初のセットを静的表示
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .statement__set {
    animation: none;
  }
  .statement__set--1 { opacity: 1; }
}

/* ==========================================================================
   SP (≤481px) — 縦書きコピー
   ========================================================================== */
@media (max-width: 481px) {
  .statement__line {
    /* tsuku-bold 40pt / 行送り 70pt (= 1.75) */
    font-size: 40px;
    line-height: 1.75;
  }
}

/* ==========================================================================
   v37.0 ①: 横向きスマホ — 縦書きコピーの折返し防止(Statement縮小)
   横向きは画面高が低く52pxのままだと長セット(最長8字≒416px)が画面高を超えて折返す。
   フォントを下げ最長カラムも画面高内(≒288px)に収め折返しを解消。
   判定は max-height:500px(横向きスマホ高さ390-440は500から十分遠く安定/章ページと同方式)。
   コピーは position:absolute ゆえセクション高さ非干渉=揺れには影響しない想定(要Brave確認)。
   ========================================================================== */
@media (orientation: landscape) and (max-height: 500px) {
  .statement__line {
    font-size: 36px;
  }
}