@charset "UTF-8";
/* ==========================================================
   奥飛騨冬物語 — page-about.css（02 冬物語とは / ワイヤー nodeId 2:855）
   共通シェル（.l-header / .l-crumb / .l-hero / .l-lead / .cta / .l-next /
   footer）は css/lower.css が持つ。ここは about 固有の中身だけ。

   ワイヤー（1440px設計）→ 実装（1365px設計）への置き換え方針:
     ・本文カラムは 960px（左右202.5px）。ワイヤーの x240–1200 に対応
     ・本文はワイヤーの x270 起点＝カラムより30px内側だが、1365では
       カラムいっぱい（960px）に置いて1行1文の折返し無しを優先した
     ・級数はTOPの語彙へ置き直し（本文はTOPのcta lead 16px / news dummy 17px の間）
   ========================================================== */

/* ==========================================================
   物語セクション（2026-08-15 スクロール固定型へ改稿・市岡さん指示）
   セクションが画面に固定され、スクロールに応じて背景写真がフェードで
   切り替わり、本文も次の段落へ切り替わる。
   ・固定（.is-pinned）は js/lower.js がPC・動きあり環境でだけ付ける。
     position:sticky は #canvas の transform:scale 配下でドリフトする
     実バグのため、TOPの催しと同じJS駆動（毎フレーム translateY）
   ・.is-pinned が付かない姿（SP / no-JS / 動きを減らす設定）＝
     全段落の縦積み＋自動クロスフェード背景。内容は欠けない
   ・白文字の可読性は濃紺ベールで確保／角丸なし・影なし
   ========================================================== */
.p-about__story {
  position: relative;
  width: var(--canvas);
  margin-top: 96px;
  /* clip必須（hiddenのみはスクロールコンテナを作る＝TOP催しで実証済みの事故） */
  overflow: hidden;
  overflow: clip;
  background: #0b2340;
}
.p-about__pin { position: relative; }
.p-about__stage { position: relative; }
.p-about__slides { position: absolute; inset: 0; }
.p-about__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-sig, ease);
}
.p-about__slide.is-active { opacity: 1; }
.p-about__slide img { width: 100%; height: 100%; object-fit: cover; }
/* 表示中の1枚をゆっくり寄せる（止まって見せない）。
   アニメは全スライドに常駐させ再生状態だけ切り替える: is-activeを外した瞬間に
   animationがキャンセルされ倍率が1へスナップ（最大6%の瞬間縮小）する事故を防ぐ。
   退場側は一時停止＝その倍率のままフェードアウトする（2026-08-15レビュー） */
.js .p-about__slide img {
  animation: about-slide-zoom 8s linear both;
  animation-play-state: paused;
}
.js .p-about__slide.is-active img { animation-play-state: running; }
@keyframes about-slide-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
/* 白文字の可読性を確保するベール */
.p-about__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(6, 26, 48, 0.62) 0%, rgba(6, 26, 48, 0.72) 50%, rgba(6, 26, 48, 0.62) 100%);
}
/* 固定中は周辺減光を重ねる＝視線が中央の文字へ集まる（没入・2026-08-15） */
.p-about__story.is-pinned .p-about__veil {
  background:
    radial-gradient(120% 100% at 50% 50%,
      rgba(3, 15, 30, 0) 52%, rgba(3, 15, 30, 0.5) 100%),
    linear-gradient(to bottom,
      rgba(6, 26, 48, 0.62) 0%, rgba(6, 26, 48, 0.72) 50%, rgba(6, 26, 48, 0.62) 100%);
}

/* ---- 本文（フォールバック＝縦積み。SP / no-JS / reduce はこの姿） ---- */
.p-about__steps {
  position: relative;
  z-index: 1;
  /* 実測: 1行に必要な幅は最長文(60字)で1273px・次点1146px。1200pxなら大半が1行に収まり、
     折り返す文は text-wrap:balance で上下均等に割れる（2026-08-12 実測） */
  width: 1200px;
  margin: 0 auto;
  padding: 140px 0 150px;
  text-align: center;
}
.p-about__step + .p-about__step { margin-top: 76px; }
.p-about__line {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 18px;          /* 本文18px（TOPのバランス） */
  line-height: 40px;
  letter-spacing: 0.03em;
  text-indent: 0.03em;
  color: var(--color-white);
  text-wrap: balance;       /* 折り返す文は上下均等に割る＝孤立行を作らない */
}
.p-about__line + .p-about__line { margin-top: 10px; }

/* ---- 固定モード（.is-pinned は js/lower.js が付ける） ----
   .p-about__pin が固定中に消費するスクロール量（--story-pin-h）を確保し、
   .p-about__stage（画面高ぴったり）をJSが translateY で画面に貼り付ける。
   段落は画面センターに重ね置きし、is-active だけ表示。
   通過済み（is-passed）は上へ・未到達は下へ寄せておく＝スクロール方向と
   一致した上昇クロスフェードになる */
.p-about__story.is-pinned .p-about__pin {
  height: var(--story-pin-h, 100vh);
  overflow: hidden;
  overflow: clip;
}
.p-about__story.is-pinned .p-about__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--canvas);
  height: var(--story-h, 100vh);
  overflow: hidden;
  overflow: clip;
  will-change: transform;
  /* 突入時の吸い込み: 接近中はJSが scale 0.96→1.00 を合成（origin=上辺中央）。
     画面を覆いきる瞬間に周囲の紺枠が消える＝没入の合図（2026-08-15） */
  transform-origin: 50% 0;
}
/* 2026-08-29 市岡さん指示: 奥飛騨公式サイトと同じ「文字がスクロールされる」動きへ。
   段落の重ね置き＋blurフェードをやめ、本文を1本の列にする。
   JSが毎フレーム translateY(OFFSET − 消化量) を書き、スクロールと1:1で上へ流れる。
   段落間の空き --story-gap は JS が「画面高 − 行高×4」で書く＝切替の瞬間に
   前段落の最後2行と次段落の最初2行が同時に見える参考サイトの間合い（TRIGGER_LINES=2） */
.p-about__story.is-pinned .p-about__steps {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.p-about__story.is-pinned .p-about__step {
  position: static;
  width: 1200px;
  margin: 0 auto;
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
  pointer-events: auto;
}
.p-about__story.is-pinned .p-about__step + .p-about__step {
  margin-top: var(--story-gap, 0px);
}
/* 段落は js-reveal-group（animation.css）で初期非表示になる。固定モードでは
   スクロール1:1の流れだけを見せる＝リビールは打ち消す（参考サイトも素の移動のみ）。
   クラス3つで .js .js-reveal-group > *（2つ）に勝つ */
.p-about__story.is-pinned .p-about__step > * {
  opacity: 1;
  transform: none;
  transition: none;
}
/* 固定中は1画面に1段落＝少し大きく読ませる（21px はTOPリードの級数） */
.p-about__story.is-pinned .p-about__line {
  font-size: 21px;
  line-height: 46px;
}
/* 折返し許可点を文節境界に限定（「〜いくこ／とで」のような文節割れを防ぐ）。
   PCの固定モード限定: SPは justify なので inline-block 化すると字間が波打つ。
   2026-08-29 SPにも .is-pinned が付くようになったため、幅で明示的に閉じる */
@media (min-width: 768px) {
  .p-about__story.is-pinned .p-about__line .ph { display: inline-block; }
}
/* スクロール駆動の切替は自動再生よりテンポが速い＝フェードも少し速く */
.p-about__story.is-pinned .p-about__slide { transition-duration: 1.5s; }
/* 固定中のズームは時間任せのKen BurnsではなくJSのスクロールスクラブが書く
   （スクロール量に画が追従＝「スクロールしている」が伝わる・2026-08-15） */
.p-about__story.is-pinned .p-about__slide img { animation: none; }

/* ---- 章送りインジケーター（固定モード時のみ表示・装飾） ---- */
.p-about__progress { display: none; }
.p-about__story.is-pinned .p-about__progress {
  position: absolute;
  right: 56px;                /* ページ端 --l-edge と同じ */
  top: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.p-about__progress-cur,
.p-about__progress-total {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: var(--color-white);
}
.p-about__progress-total { color: rgba(255, 255, 255, 0.55); }
.p-about__progress-track {
  position: relative;
  width: 1px;
  height: 140px;
  background: rgba(255, 255, 255, 0.28);
}
.p-about__progress-fill {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  transform: scaleY(0);       /* JSが進捗でscaleYを書く */
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  .js .p-about__slide img { animation: none; }
  .p-about__slide { transition: none; }
}

/* ==========================================================
   SP（設計幅393px）: 固定なし＝縦積み＋自動クロスフェードのまま
   ========================================================== */
@media (max-width: 767px) {
  .p-about__story { margin-top: 52px; }
  /* 背景視差（JSがスクロールに追従して±36px動かす）の逃げしろ。
     動かない環境（no-JS/reduce）でも cover の切り出しが僅かに変わるだけ */
  .p-about__slides { top: -48px; bottom: -48px; }
  .p-about__steps {
    width: var(--l-col);
    padding: 64px 0 70px;
  }
  .p-about__step + .p-about__step { margin-top: 40px; }
  .p-about__line {
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0.04em;
    text-indent: 0.04em;
    /* 2026-08-31 市岡さん指示「文字間隔がおかしい」。原因は justify と
       .p-about__line の text-wrap:balance（96行）の二重掛け。balance が行長を均等割りして
       短い行を作り、justify がその行をカラム幅341pxまで引き伸ばしていた
       （実測「五つの温泉地で紡がれる」11字＝自然183.0px → 描画340.4px ＝ 字間+95%）。
       揃えはPC（.p-about__steps 84行）と同じ中央へ。あわせて about.html 側に
       u-sp-br で意味改行を入れ、全27行を20字＝332.8px以内（カラム341px）に収めた */
    text-align: center;
  }

  /* ---- SPも固定モード（2026-08-29 市岡さん指示「sp版もしっかりアニメーションつけて」）----
     PC側の .p-about__story.is-pinned 〜 はクラス3つぶんの詳細度を持つため、
     SP値は同じ詳細度で書かないと上書きできない（@media は詳細度を上げない） */
  .p-about__story.is-pinned .p-about__slides { top: 0; bottom: 0; }   /* 視差の逃げしろは固定中は不要 */
  .p-about__story.is-pinned .p-about__step { width: var(--l-col); }
  .p-about__story.is-pinned .p-about__line {
    font-size: 16px;
    line-height: 32px;
  }
  /* 右端のゲージは341px幅の本文と重なる＝SPでは出さない（参考サイトにもインジケーターは無い） */
  .p-about__story.is-pinned .p-about__progress { display: none; }
}

/* ==========================================================
   PC: 段落内の文を改行せず続けて流す（2026-09-16）
   9/10定例「PCでは改行せずテキストを続ける（スマホは自動で折り返る）。
   必要なときに改行もできるようにしておく」＝市岡さん確認で「冬物語とは」本文が対象。
   - 段落(.p-about__step)内の複数の .p-about__line を inline にして1本の文章にする
   - 折り返しは文節の区切り（.ph＝inline-block）だけで起こる＝語の途中で割れない
   - 行の均等割りは段落側の text-wrap:balance
   - 手動改行が必要な箇所は <br class="u-pc-br">（sp.css・SPでは非表示）
   - lower.js は段落の実高と先頭 .p-about__line の line-height だけを読む＝inline でも値は同じ
   SPは従来どおり（1文1ブロック＋u-sp-brの意味改行）
   ========================================================== */
/* 【2026-09-22 HEROU定例】河野さん「長すぎる文は2段以上に組み直してほしい」→ 上記の連続表示をやめ、
   9/16以前と同じ「1文1行（長い文は text-wrap:balance で均等に2行）」に戻した。
   さらに「長すぎる文は2段以上に」＝PCで1行が本文幅いっぱい（最長1185px）に伸びないよう、
   1文の行幅を760pxまでにする。超える文は文節（.ph）の切れ目で、text-wrap:balance により上下均等に折れる。
   760pxは2026-09-22実測の短い文（665/549/615/680/747px）を1行のまま残し、長い文（878/1006/1185px ほか）だけを折る値 */
@media (min-width: 768px) {
  .p-about__line { max-width: 760px; margin-left: auto; margin-right: auto; }
  .p-about__line .ph { display: inline-block; }
}