@charset "UTF-8";
/* =========================================================
   effects.css ｜ 動的演出・インタラクション用スタイル
   SPRINT AUTO SERVICE サンプルサイト

   このファイルが受け持つもの：
   1. スクロールでフワッと出る演出（フェードイン）
   2. ヒーロー（メインビジュアル）の登場アニメ
   3. ヘッダーのスクロール演出（影がつく）
   4. スマホ用ハンバーガーメニュー
   5. TOPへ戻るボタン
   6. ナビの現在地ハイライト
   7. 固定ヘッダー分のアンカー位置補正
   8. アクセシビリティ配慮（視差効果オフ対応）

   ※ style.css の後に読み込んでください。
   ※ 動きの初期状態（最初は隠す等）は .fx-on が付いている時だけ
     効くようにしています。万一 effects.js が読めなくても
     コンテンツが消えたままにならない安全設計です。
   ========================================================= */

/* ---------------------------------------------------------
   1. スクロールフェードイン
      ・通常は見えている（= JSが死んでも安全）
      ・.fx-on の時だけ初期状態を「隠す」にする
      ・JSが画面内を検知して .visible を付けると出てくる
   --------------------------------------------------------- */
.reveal {
 transition:
  opacity 0.8s ease,
  transform 0.8s ease;
}
.fx-on .reveal {
 opacity: 0;
 transform: translateY(30px);
}
.reveal.visible {
 opacity: 1;
 transform: translateY(0);
}
/* 同じ列に並ぶカードを少しずつ遅らせて出す */
.reveal-d1 {
 transition-delay: 0.1s;
}
.reveal-d2 {
 transition-delay: 0.2s;
}
.reveal-d3 {
 transition-delay: 0.3s;
}

/* ---------------------------------------------------------
   2. ヒーローの登場アニメ
      ページ表示直後、見出し→リード文→ボタン…と順番に出てくる
   --------------------------------------------------------- */
.fx-on .hero-content > *,
.fx-on .hero-image {
 opacity: 0;
 transform: translateY(24px);
 transition:
  opacity 0.7s ease,
  transform 0.7s ease;
}
.fx-on .hero-image {
 transform: translateY(0) scale(1.04);
}
/* JSが .fx-ready を付けたら順番に表示 */
.hero.fx-ready .hero-content > *,
.hero.fx-ready .hero-image {
 opacity: 1;
 transform: translateY(0);
}
.hero.fx-ready .hero-image {
 transform: translateY(0) scale(1);
}
.hero.fx-ready .hero-content > *:nth-child(1) {
 transition-delay: 0.1s;
}
.hero.fx-ready .hero-content > *:nth-child(2) {
 transition-delay: 0.2s;
}
.hero.fx-ready .hero-content > *:nth-child(3) {
 transition-delay: 0.3s;
}
.hero.fx-ready .hero-content > *:nth-child(4) {
 transition-delay: 0.4s;
}
.hero.fx-ready .hero-image {
 transition-delay: 0.25s;
}
/* パララックスで動かす画像。描画を滑らかにするヒント */
.hero-image img {
 will-change: transform;
}

/* ---------------------------------------------------------
   3. ヘッダーのスクロール演出
      少し下にスクロールすると影が濃くなり、ほんの少し締まる
   --------------------------------------------------------- */
header {
 transition:
  box-shadow 0.25s ease,
  padding 0.25s ease;
}
header.is-scrolled {
 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
 padding-top: 12px;
 padding-bottom: 12px;
}

/* ---------------------------------------------------------
   4. ナビの現在地ハイライト
      スクロール位置に応じて、今見ているセクションのリンクを赤く
   --------------------------------------------------------- */
nav.main-nav a.is-current {
 color: var(--red);
}
nav.main-nav a.is-current::after {
 transform: scaleX(1);
}

/* ---------------------------------------------------------
   5. ハンバーガーメニュー（スマホ用）
   --------------------------------------------------------- */
/* 開閉ボタン本体（PCでは非表示） */
.nav-toggle {
 display: none;
 width: 48px;
 height: 48px;
 padding: 0;
 margin-left: auto;
 border: none;
 background: var(--red);
 cursor: pointer;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.nav-toggle-bars {
 position: relative;
 width: 24px;
 height: 16px;
}
.nav-toggle-bars span {
 position: absolute;
 left: 0;
 width: 100%;
 height: 2.5px;
 background: #fff;
 border-radius: 2px;
 transition:
  transform 0.3s ease,
  opacity 0.2s ease;
}
.nav-toggle-bars span:nth-child(1) {
 top: 0;
}
.nav-toggle-bars span:nth-child(2) {
 top: 50%;
 transform: translateY(-50%);
}
.nav-toggle-bars span:nth-child(3) {
 bottom: 0;
}
/* 開いている時は3本線が×に変形 */
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1) {
 top: 50%;
 transform: translateY(-50%) rotate(45deg);
}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2) {
 opacity: 0;
}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3) {
 bottom: auto;
 top: 50%;
 transform: translateY(-50%) rotate(-45deg);
}

/* 背景の暗幕（オーバーレイ） */
.nav-overlay {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.5);
 z-index: 190;
 opacity: 0;
 visibility: hidden;
 transition:
  opacity 0.3s ease,
  visibility 0.3s ease;
}
.nav-overlay.is-open {
 opacity: 1;
 visibility: visible;
}

/* 右からスライドインするメニューパネル */
.nav-drawer {
 position: fixed;
 top: 0;
 right: 0;
 width: 84%;
 max-width: 340px;
 height: 100%;
 background: #fff;
 z-index: 200;
 transform: translateX(100%);
 transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
 display: flex;
 flex-direction: column;
 overflow-y: auto;
 -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open {
 transform: translateX(0);
}
/* パネル上部：見出し＋閉じるボタン */
.nav-drawer-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 20px 22px;
 background: var(--dark);
 color: #fff;
}
.nav-drawer-head .ttl {
 font-family: "Barlow Condensed", sans-serif;
 font-style: italic;
 font-weight: 800;
 font-size: 18px;
 letter-spacing: 0.18em;
 color: var(--orange);
}
.nav-drawer-close {
 width: 38px;
 height: 38px;
 border: 1px solid rgba(255, 255, 255, 0.3);
 background: transparent;
 color: #fff;
 font-size: 20px;
 line-height: 1;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 transition:
  background 0.2s,
  color 0.2s;
}
.nav-drawer-close:hover {
 background: #fff;
 color: var(--dark);
}
/* パネル内のナビリンク */
.nav-drawer-links {
 list-style: none;
 margin: 0;
 padding: 8px 0;
 flex: 1;
}
.nav-drawer-links li {
 border-bottom: 1px solid var(--border);
}
.nav-drawer-links a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 18px 24px;
 color: var(--text);
 text-decoration: none;
 font-size: 17px;
 font-weight: 700;
 transition:
  background 0.2s,
  color 0.2s;
}
.nav-drawer-links a::after {
 content: "›";
 color: var(--red);
 font-size: 20px;
 font-weight: 800;
}
.nav-drawer-links a:hover,
.nav-drawer-links a.is-current {
 background: var(--bg-warm);
 color: var(--red);
}
/* パネル下部：電話＋CTA */
.nav-drawer-foot {
 padding: 22px 24px 28px;
 background: var(--bg-warm);
 border-top: 1px solid var(--border);
}
.nav-drawer-tel {
 display: block;
 text-decoration: none;
 text-align: center;
 margin-bottom: 14px;
}
.nav-drawer-tel .lbl {
 font-size: 12px;
 font-weight: 700;
 color: var(--text-sub);
 letter-spacing: 0.05em;
}
.nav-drawer-tel .num {
 display: block;
 font-family: "Barlow Condensed", sans-serif;
 font-size: 32px;
 font-weight: 800;
 color: var(--text);
 line-height: 1.1;
}
.nav-drawer-cta {
 display: block;
 text-align: center;
 background: var(--red);
 color: #fff;
 text-decoration: none;
 font-weight: 700;
 font-size: 16px;
 padding: 16px;
 letter-spacing: 0.05em;
 transition: background 0.2s;
}
.nav-drawer-cta:hover {
 background: var(--red-dark);
}

/* メニュー展開中はページ本体のスクロールを止める */
body.fx-no-scroll {
 overflow: hidden;
}

/* ---------------------------------------------------------
   6. TOPへ戻るボタン（右下固定）
      ・サンプルサイト共通ルール：右下固定の要素はこれだけ
      ・少し下にスクロールしたら出現
   --------------------------------------------------------- */
.back-to-top {
 position: fixed;
 right: 24px;
 bottom: 24px;
 width: 54px;
 height: 54px;
 padding: 0;
 border: none;
 background: var(--red);
 color: #fff;
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 box-shadow: 0 6px 20px rgba(200, 32, 30, 0.4);
 opacity: 0;
 visibility: hidden;
 transform: translateY(16px);
 transition:
  opacity 0.3s ease,
  visibility 0.3s ease,
  transform 0.3s ease,
  background 0.2s ease;
 z-index: 90;
}
.back-to-top.is-visible {
 opacity: 1;
 visibility: visible;
 transform: translateY(0);
}
.back-to-top:hover {
 background: var(--red-dark);
 transform: translateY(-3px);
}
.back-to-top svg {
 width: 22px;
 height: 22px;
}

/* ---------------------------------------------------------
   7. 固定ヘッダー分のアンカー位置補正
      ページ内リンクで飛んだ時、見出しがヘッダーに隠れないように
   --------------------------------------------------------- */
#worries,
#services,
#fleet,
#shop,
#flow,
#access,
#contact {
 scroll-margin-top: 130px;
}

/* ---------------------------------------------------------
   レスポンシブ：900px以下でハンバーガーを表示
   --------------------------------------------------------- */
@media (max-width: 900px) {
 .nav-toggle {
  display: flex;
 }
 .back-to-top {
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
 }
 #worries,
 #services,
 #fleet,
 #shop,
 #flow,
 #access,
 #contact {
  scroll-margin-top: 150px;
 }
}

/* ---------------------------------------------------------
   8. アクセシビリティ配慮
      OS側で「視差効果を減らす」設定の方には演出を無効化
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
 .fx-on .reveal,
 .fx-on .hero-content > *,
 .fx-on .hero-image {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
 }
 .nav-drawer,
 .nav-overlay,
 .back-to-top {
  transition: none !important;
 }
}