@charset "UTF-8";
/* ============================================================
   lp-motion.css ― ページ内の動きの加減速（イージング）をそろえるファイル
   このLPのページ内の動きをまとめたファイルです。

   ・加減速は、遠征パーツ（ensei-cards.js の enseiEase）と
     ホテルパーツ（widget.css の --ltk-motion）がすでに使っている
     「0.35秒・イーズアウト cubic-bezier(.33,1,.68,1)」に合わせています。
     最初はすっと動き、最後はゆっくり止まる動きです。
   ・共通パーツのCSS/JSそのものは1バイトも変えていません。
     このファイルは「このLPの中だけ」で、加減速の指定を上書きします。
   ・端末で「視差効果を減らす／アニメーションを減らす」にしている方には動かしません。
   ============================================================ */
:root {
  --lp-ease: cubic-bezier(.33, 1, .68, 1);   /* 共通パーツと同じカーブ */
  --lp-dur: .35s;                             /* 動き（移動・開閉） */
  --lp-dur-fast: .22s;                        /* 色や影の変化（ホバー） */
}

/* ---------- 1. ページのボタン・リンク（色・背景・枠・影の変化） ----------
   :where() で強さを0にしているので、個別に指定がある要素はそちらが勝ちます */
:where(.lp-hero, .lp-anchor, .ensoku-lp, #scroll-top) :where(a, summary, button) {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity, outline-offset;
  transition-duration: var(--lp-dur-fast);
  transition-timing-function: var(--lp-ease);
}

/* ---------- 2. もともと動きがある部品は、カーブと長さだけ差し替え ---------- */
.hero-chips a,
.lp-anchor a,
.other > summary,
.faq-list > details,
.lp-subnav a {
  transition-duration: var(--lp-dur-fast);
  transition-timing-function: var(--lp-ease);
}
.lp-anchor a::after,
.other > summary::after,
.faq-list > details > summary::after {
  transition-duration: var(--lp-dur);
  transition-timing-function: var(--lp-ease);
}
.ensoku-lp .ltkRecoCard,
.ensoku-lp .enseiCard {
  transition-duration: var(--lp-dur-fast);
  transition-timing-function: var(--lp-ease);
}

/* 会場エリアで出る2段目ナビ */
.lp-subnav {
  transition: opacity var(--lp-dur) var(--lp-ease),
              transform var(--lp-dur) var(--lp-ease),
              visibility 0s linear var(--lp-dur);
}

/* ジャンプボタン（ヒーローの会場ボタン）：押した感触を少しだけ */
.hero-chips a:active { transform: scale(.98); }

/* ---------- 3. 共通パーツの中の変化（カーブだけ合わせる） ---------- */
#ensei-widget .ensei-venue-tab,
#ensei-widget .ensei-link-row,
#ensei-widget .ensei-area-filter-btn,
#ensei-widget .ensei-hotel-dot,
#ensei-widget .ensei-design-pop .ensei-travel-card { transition-timing-function: var(--lp-ease); }
#ensei-widget .ensei-nav-btn,
#ensei-widget .ensei-tabnav-btn {
  transition: background-color var(--lp-dur-fast) var(--lp-ease),
              border-color var(--lp-dur-fast) var(--lp-ease),
              box-shadow var(--lp-dur-fast) var(--lp-ease);
}
.ltkRecoWidget__card {
  transition: box-shadow var(--lp-dur-fast) var(--lp-ease), transform var(--lp-dur-fast) var(--lp-ease);
}
.ltkRecoWidget__navBtn,
.ltkRecoWidget__moreArrow,
.ltkRecoWidget__retryBtn,
a.ltkRecoStay__row {
  transition: background-color var(--lp-dur-fast) var(--lp-ease),
              border-color var(--lp-dur-fast) var(--lp-ease),
              box-shadow var(--lp-dur-fast) var(--lp-ease);
}
.ltkRecoTabs .ltkRecoArea__opt { transition: border-color var(--lp-dur-fast) var(--lp-ease), background-color var(--lp-dur-fast) var(--lp-ease); }
.ltkRecoArea__dot,
.ltkRecoArea__time { transition: background-color var(--lp-dur-fast) var(--lp-ease), border-color var(--lp-dur-fast) var(--lp-ease), color var(--lp-dur-fast) var(--lp-ease); }

/* エリアを選び直したとき、ホテル一覧がふわっと入れ替わる（押したあとだけ。読み込み時は動かさない） */
@keyframes lp-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ltkRecoTabs.lp-touched > [role="tabpanel"]:not([hidden]) {
  animation: lp-panel-in var(--lp-dur) var(--lp-ease) both;
}

/* ---------- 4. ジャンプで着いた場所をそっと知らせる ----------
   会場ボタンなどで移動したとき、着いた会場ブロックの外側に青い輪が広がって消えます */
@keyframes lp-arrive {
  0%   { box-shadow: 0 0 0 0 rgba(8, 120, 201, .38); }
  100% { box-shadow: 0 0 0 14px rgba(8, 120, 201, 0); }
}
.lp-arrived { animation: lp-arrive 1.1s var(--lp-ease) both; }

/* ジャンプ先にフォーカスを移す（読み上げ用）。見た目の枠は出しません */
[data-lp-focus]:focus { outline: none; }

/* ---------- 5. PAGE TOP ボタンの出入り ----------
   jQuery の fadeIn/fadeOut にも同じカーブ（lpEaseOut）を渡しています（lp-motion.js） */

/* ---------- 6. 動きを減らす設定の方 ---------- */
@media (prefers-reduced-motion: reduce) {
  :where(.lp-hero, .lp-anchor, .ensoku-lp, #scroll-top) :where(a, summary, button),
  .lp-subnav, .lp-anchor a::after, .lp-arrived,
  .ltkRecoTabs.lp-touched > [role="tabpanel"] {
    transition-duration: .01ms !important;
    animation: none !important;
  }
}