@charset "UTF-8";
/* ==========================================================
   飛騨ほおのき平スキー場 TOP — animation.css
   参考: matsushitahome.com（フェードアップ・控えめパララックス・
   ループマーキー・ヒーローロード演出）× animationスキル数値規範
   初期非表示は .js 配下限定（no-JSフォールバック）
   ========================================================== */

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ---- スムーススクロール ---- */
html { scroll-behavior: smooth; }

/* ==========================================================
   1. スクロールリビール（fadeup 28px / 1.1s / stagger 0.1s）
   ========================================================== */
.js .js-reveal,
.js .js-reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.1s var(--ease-out-quint),
    transform 1.1s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}
.js .js-reveal.is-inview,
.js .js-reveal-group.is-inview > * {
  opacity: 1;
  transform: none;
}
/* パララックス対象はJSがtransformを書くため、リビールはフェードのみ
   【2026-09-29】transform のトランジションも外す（JSがスクロールのたびに transform を書き換えるたび
   1.1秒のトランジションが作り直され、写真が遅れて揺れ・スクロールが重くなっていた） */
.js .js-reveal--fade {
  transform: none;
  transition: opacity 1.1s var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0s);
}

/* ==========================================================
   2. ヒーローロード演出（LCP保護: IOを待たないCSS自動再生）
   クリーン写真（文字なし）なのでコピーは上昇＋フェードで登場
   ========================================================== */
/* ヒーロー写真のアニメーションは指示によりオフ（即時表示） */
.js .hero__en-copy { animation: hero-copy-in 1.1s var(--ease-out-expo) 1.0s both; }
.js .hero__cta     { animation: hero-copy-in 1.0s var(--ease-out-quint) 1.15s both; }
.js .header__logo,
.js .header__nav,
.js .header__en    { animation: hero-fade-in 0.9s var(--ease-out-quint) 0.65s both; }

@keyframes hero-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* --intro-tx: SPのセンタリング(translateX)をアニメ終点でも保持するための変数。
   終点を transform:none にすると fill-mode:both が基底のtranslateXを恒久上書きし
   SPでコピーが右へ半幅ズレる（2026-07-30実機で発覚） */
@keyframes hero-copy-in {
  from { opacity: 0; transform: translateX(var(--intro-tx, 0px)) translateY(24px); }
  to   { opacity: 1; transform: translateX(var(--intro-tx, 0px)); }
}
/* ヒーローコピー: 全体ライズ（文字分割はメトリクスが崩れるため不使用） */
.hero { overflow: hidden; }
.js .hero__copy { animation: hero-copy-in 1.2s var(--ease-out-expo) 0.5s both; }

/* ---- タイプイン（見出し: 親またはself の is-inview で発火） ---- */
.js .js-split:not(.hero__copy) .split-text__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.15em); /* 控えめ */
}
.js .concept__vtext .split-text__char { transform: none; } /* 縦書きはフェードのみ */
.js .is-inview .split-text__char,
.js .js-split.is-inview .split-text__char {
  animation: char-in 0.85s var(--ease-out-quint) both;
  animation-delay: calc(0.06s + var(--ci) * 0.022s);
}
.js .concept__vtext.is-inview .split-text__char {
  animation-duration: 1.05s;
  animation-delay: calc(0.06s + var(--ci) * 0.028s);
}
@keyframes char-in { to { opacity: 1; transform: none; } }

/* ---- howtoカードタイトル: 行マスクリビール ---- */
.js .js-lines .line { display: block; overflow: hidden; }
.js .js-lines .line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out-expo);
  transition-delay: calc(0.15s + var(--li) * 0.12s);
}
.js .is-inview .js-lines .line__inner,
.js .js-lines.is-inview .line__inner { transform: none; }

/* ---- ステータス帯: コラージュ写真とパネルのカスケード ---- */
.js .status__photo--chairlift.js-reveal { transition-delay: 0.05s; }
.js .status__photo--family.js-reveal    { transition-delay: 0.18s; }
.js .status__photo--skier.js-reveal     { transition-delay: 0.3s; }
.js .status__panel.js-reveal            { transition-delay: 0.12s; }

/* ==========================================================
   3. マーキー（HOW TO ENJOY帯・約50px/秒・linear必須）
   静的位相合わせ: 1周期665px×3=1995px、開始オフセット-27px
   ========================================================== */
.howto__marquee-track {
  display: flex;
  width: max-content;
  margin-left: -82px;  /* 静的版と同位相（実測合わせ） */
  padding-top: 8px;    /* flex化での行ボックス差の補正（実測） */
}
.howto__marquee-track .howto__marquee-text {
  transform: none; /* 旧・静的位相の-82pxはtrackのmargin-leftに置換 */
  flex: none;
}
.js .howto__marquee-track { animation: marquee-scroll 40s linear infinite; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.howto__head.is-paused .howto__marquee-track { animation-play-state: paused; }

.howto__marquee-toggle {
  position: absolute;
  right: 14px;
  top: 118px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(31, 37, 33, 0.25);
  color: rgba(31, 37, 33, 0.55);
  background: rgba(255, 255, 255, 0.55);
  transition: color 0.35s var(--ease-out-quint), border-color 0.35s var(--ease-out-quint);
}
@media (hover: hover) {
  .howto__marquee-toggle:hover { color: var(--color-text); border-color: rgba(31,37,33,0.6); }
}

/* ==========================================================
   4. ヘッダー追従（全幅・上部は透明=デザイン準拠／下スクロールで隠す）
      ロゴ・ナビ・ENボタン・ハンバーガーがそのまま付いてくる
   ========================================================== */
.js .header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60; /* ドロワー(50)より上：開閉ボタンを押し続けられる */
  transition: transform 0.5s var(--ease-out-quint), background-color 0.35s ease,
              padding 0.35s ease;
}
/* 【2026-08-01】ネイビーをやめてサイトの青系メインカラーへ（市岡さん・横山さん指示）。
   【2026-09-01 A-1/C-1】カンプのアクセント #165CE2（白文字 5.73:1）に統一したため、
   旧 #0D62A3 の暫定対処は不要になった。rgba(22,92,226,.92) = #165CE2 の92%。 */
.js .header.is-fixed.is-scrolled {
  background: rgba(22, 92, 226, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.js .header.is-fixed.is-hidden { transform: translateY(-100%); }

/* PC（1440px以上）: 1440pxキャンバスの中央に載せる（既存の見た目を維持） */
@media (min-width: 1440px) {
  .js .header.is-fixed {
    left: 50%;
    max-width: 1440px;
    transform: translateX(-50%);
  }
  .js .header.is-fixed.is-scrolled { padding-bottom: 14px; }
  .js .header.is-fixed.is-scrolled .header__logo { margin-top: 14px; }
  .js .header.is-fixed.is-scrolled .header__logo img { width: 150px; }
  /* ナビは absolute(top:38px) のため margin-top だと下へ加算される。
     top を直接指定し、ロゴ・ENと縦中心を揃える（実測: ロゴ中心38.1） */
  .js .header.is-fixed.is-scrolled .header__nav { top: 29px; margin-top: 0; }
  .js .header.is-fixed.is-scrolled .header__en { margin-top: 19px; }
  .js .header.is-fixed.is-hidden { transform: translate(-50%, -100%); }
}

/* 中間幅（769〜1439px）: 1440pxキャンバスをzoomで縮小しているため、
   fixed幅もzoom後の実寸に合わせる（left/width指定のみで成立） */
@media (min-width: 769px) and (max-width: 1439px) {
  .js .header.is-fixed.is-scrolled { padding-bottom: 14px; }
  .js .header.is-fixed.is-scrolled .header__logo { margin-top: 14px; }
  .js .header.is-fixed.is-scrolled .header__logo img { width: 150px; }
  /* ナビは absolute(top:38px) のため margin-top だと下へ加算される。
     top を直接指定し、ロゴ・ENと縦中心を揃える（実測: ロゴ中心38.1） */
  .js .header.is-fixed.is-scrolled .header__nav { top: 29px; margin-top: 0; }
  .js .header.is-fixed.is-scrolled .header__en { margin-top: 19px; }
}

/* SP（768px以下）: ロゴとハンバーガーが付いてくる。帯は薄めに詰める */
@media (max-width: 768px) {
  .js .header.is-fixed.is-scrolled { padding-top: 11px; padding-bottom: 11px; }
  .js .header.is-fixed.is-scrolled .header__logo img { width: 96px; }
  .js .header.is-fixed.is-scrolled .nav-toggle { margin-top: -2px; }
}

/* ==========================================================
   5. ホバーマイクロインタラクション
   ========================================================== */
/* 青ボタン（一覧を見る・リフト運行状況・WEB購入CTA）: 矢印スライド＋わずかな明度 */
.hero__cta,
.status__btn,
.news__more-btn,
.experience__allbtn {
  transition: filter 0.35s var(--ease-out-quint);
}
.hero__cta-arrow svg,
.status__btn-arrow svg,
.news__more-icon svg,
.experience__allbtn-icon svg,
.experience__more-icon svg {
  transition: transform 0.35s var(--ease-out-quint);
}
@media (hover: hover) {
  .hero__cta:hover,
  .status__btn:hover,
  .news__more-btn:hover,
  .experience__allbtn:hover { filter: brightness(1.08); }
  .hero__cta:hover .hero__cta-arrow svg,
  .status__btn:hover .status__btn-arrow svg,
  .news__more-btn:hover .news__more-icon svg,
  .experience__allbtn:hover .experience__allbtn-icon svg { transform: translateX(4px); }
}

/* カード内 詳しく見る（白ボタン） */
.experience__more { transition: filter 0.35s var(--ease-out-quint); }
@media (hover: hover) {
  .experience__more:hover { filter: brightness(0.96); }
  .experience__more:hover .experience__more-icon svg { transform: translateX(4px); }
}

/* newsカード: 写真ズーム1.06（親はoverflow:hidden済み） */
.news__thumb img { transition: transform 0.6s var(--ease-out-quint); }
@media (hover: hover) {
  .news__card-link:hover .news__thumb img { transform: scale(1.06); }
}

/* experienceカード写真ズーム */
.experience__card { overflow: hidden; }
.experience__card > img,
.experience__card figure img { transition: transform 0.6s var(--ease-out-quint); }
@media (hover: hover) {
  .experience__card:hover > img,
  .experience__card:hover figure img { transform: scale(1.05); }
}

/* ナビ・ENボタン・SNSアイコン */
.header__nav a { transition: opacity 0.3s var(--ease-out-quart); }
.header__en { transition: background-color 0.35s var(--ease-out-quint), color 0.35s var(--ease-out-quint); }
.footer a { transition: opacity 0.3s var(--ease-out-quart); }

/* 【2026-08-07】ホバーが不透明度だけで分かりにくいという定例指摘を受け、下線を足す。
   色は変えない（「色はこの水色でいい」）。左から伸びる1pxの下線。 */
.header__nav a { position: relative; }
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out-quart);
}
@media (hover: hover) {
  .header__nav a:hover { opacity: 0.65; }
  .header__nav a:hover::after { transform: scaleX(1); }
  .header__en:hover { background: rgba(255,255,255,0.92); color: #165ce2; }
  .footer a:hover { opacity: 0.65; }
}
@media (prefers-reduced-motion: reduce) {
  .header__nav a::after { transition: none; }
}

/* ---- NEWSスライダー ---- */
.news__nav {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.news__nav-btn {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: #fff;
  transition: background-color 0.3s var(--ease-out-quint), color 0.3s var(--ease-out-quint), opacity 0.3s ease;
}
.news__nav-btn svg { width: 20px; height: 20px; }
.news__nav-btn:disabled { opacity: 0.3; pointer-events: none; }
@media (hover: hover) {
  .news__nav-btn:hover { background: var(--color-primary); color: #fff; }
}
.news__carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 84px;
  scrollbar-width: none;
  cursor: grab;
}
.news__carousel::-webkit-scrollbar { display: none; }
.news__carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.news__carousel .news__card { scroll-snap-align: start; }
.news__list::after { content: ""; flex: none; width: 44px; } /* 末尾スナップ余白 */
@media (max-width: 768px) {
  .news__nav { display: none; } /* SPはスワイプ */
}

/* ==========================================================
   6. reduced-motion（既定=即時表示・全アニメ停止）
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .js .js-reveal,
  .js .js-reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js .hero__photo--left,
  .js .hero__photo--right,
  .js .hero__copy,
  .js .hero__en-copy,
  .js .hero__cta,
  .js .header__logo,
  .js .header__nav,
  .js .header__en { animation: none !important; }
  .js .split-text__char,
  .js .js-lines .line__inner {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .howto__marquee-track { animation-play-state: paused !important; }
  .js .header.is-fixed { transition: none !important; }
  html { scroll-behavior: auto !important; }
}