/* =========================================================
   5ページ共通 ファストビュー アニメーション
   video / study / book / chiiki / column
   ========================================================= */

/* --- キーフレーム --- */
@keyframes fvFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fvSketchIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fvBrushReveal {
  0%   { opacity: 0; transform: translateY(28px) scale(0.96); filter: blur(5px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}
@keyframes mascotJump {
  0%   { transform: translateY(0) rotate(0); }
  30%  { transform: translateY(-22px) rotate(-8deg); }
  60%  { transform: translateY(-12px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* --- キャッチコピー：フェードアップ --- */
.video-catch, .study-catch, .book-catch, .chiiki-catch, .column-catch {
  opacity: 0;
  transform: translateY(12px);
  animation: fvFadeUp 0.9s ease-out 0.2s forwards;
}

/* --- マスコット：浮かぶ動き --- */
.video-mascot, .study-mascot, .book-mascot, .chiiki-mascot, .column-mascot {
  animation: mascotBob 3.4s ease-in-out infinite;
  transform-origin: bottom center;
  cursor: pointer;
}
.video-mascot:hover, .study-mascot:hover, .book-mascot:hover,
.chiiki-mascot:hover, .column-mascot:hover {
  animation: mascotJump 0.7s ease forwards;
}

/* --- コピーテキスト：フェードアップ（遅延） --- */
.video-copy, .study-copy, .book-copy, .chiiki-copy, .column-copy {
  opacity: 0;
  animation: fvFadeUp 0.9s ease-out 0.5s forwards;
}

/* --- ポートレート：右からスライドイン --- */
.video-portrait img, .study-portrait img, .book-portrait img,
.chiiki-portrait img, .column-portrait img {
  opacity: 0;
  animation: fvSketchIn 1.4s ease-out 0.4s forwards;
}

/* --- タイトル文字：ブラシで現れる --- */
.video-title img, .study-title img, .book-title img,
.chiiki-title img, .column-title img {
  opacity: 0;
  animation: fvBrushReveal 1.2s cubic-bezier(.6, .05, .3, 1) 0.9s forwards;
}

/* --- アニメーション軽減モード対応 --- */
@media (prefers-reduced-motion: reduce) {
  .video-hero *, .study-hero *, .book-hero *,
  .chiiki-hero *, .column-hero * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   スマホ用ヒーローレイアウト（1024px以下）
   ========================================================= */
@media (max-width: 1024px) {

  /* --- hero-inner: 縦並びflexコンテナ --- */
  .about-hero-inner,
  .service-hero-inner,
  .video-hero-inner,
  .study-hero-inner,
  .book-hero-inner,
  .chiiki-hero-inner,
  .column-hero-inner {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: auto !important;
    padding: 16px 16px 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* --- catch: 上部にフル幅 --- */
  .about-catch,
  .service-catch,
  .video-catch,
  .study-catch,
  .book-catch,
  .chiiki-catch,
  .column-catch {
    position: relative !important;
    order: 1 !important;
    max-width: 100% !important;
    width: 100% !important;
    font-family: 'Shippori Mincho', 'Yu Mincho', serif !important;
    font-weight: 700 !important;
    color: #e8703a !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1.6 !important;
    letter-spacing: 0.03em !important;
    margin: 0 0 10px !important;
    text-align: center !important;
    z-index: 2 !important;
  }

  /* --- portrait: 写真エリア --- */
  .about-portrait,
  .service-portrait,
  .video-portrait,
  .study-portrait,
  .book-portrait,
  .chiiki-portrait,
  .column-portrait {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    order: 2 !important;
    width: 100% !important;
    height: clamp(180px, 48vw, 270px) !important;
    overflow: hidden !important;
    margin-bottom: 10px !important;
    z-index: 1 !important;
  }
  .about-portrait img,
  .service-portrait img,
  .video-portrait img,
  .study-portrait img,
  .book-portrait img,
  .chiiki-portrait img,
  .column-portrait img {
    position: absolute !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  /* --- マスコット＋コピーの横並びラッパー（JSが生成） --- */
  .sp-mascot-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    order: 3 !important;
    width: 100% !important;
    padding: 0 4px !important;
    margin-bottom: 8px !important;
  }

  /* --- mascot --- */
  .about-mascot,
  .service-mascot,
  .video-mascot,
  .study-mascot,
  .book-mascot,
  .chiiki-mascot,
  .column-mascot {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    flex: 0 0 72px !important;
    width: 72px !important;
    z-index: 3 !important;
  }

  /* --- copy --- */
  .about-copy,
  .service-copy,
  .video-copy,
  .study-copy,
  .book-copy,
  .chiiki-copy,
  .column-copy {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    flex: 1 !important;
    font-family: 'Shippori Mincho', 'Yu Mincho', serif !important;
    color: #2a2a2a !important;
    font-size: 13px !important;
    line-height: 1.75 !important;
    letter-spacing: 0.02em !important;
    padding-top: 4px !important;
  }
  .about-copy p,
  .service-copy p,
  .video-copy p,
  .study-copy p,
  .book-copy p,
  .chiiki-copy p,
  .column-copy p {
    margin: 0 0 3px !important;
  }

  /* --- title: 筆文字（センター・小さめ） --- */
  .about-title,
  .service-title,
  .video-title,
  .study-title,
  .chiiki-title,
  .column-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    order: 4 !important;
    width: 55% !important;
    max-width: 220px !important;
    margin: 0 auto !important;
    padding: 6px 0 16px !important;
    pointer-events: none !important;
  }
  /* 著書ページは文字が大きめなので小さく */
  .book-title {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    order: 4 !important;
    width: 45% !important;
    max-width: 160px !important;
    margin: 0 auto !important;
    padding: 6px 0 16px !important;
    pointer-events: none !important;
  }
  .about-title img,
  .service-title img,
  .video-title img,
  .study-title img,
  .book-title img,
  .chiiki-title img,
  .column-title img {
    width: 100% !important;
    height: auto !important;
  }

  /* --- about-hero の side-badge （あれば）--- */
  .about-side-badge,
  .service-side-badge {
    display: none !important;
  }

  /* --- 本文の行間を詰める --- */
  .page-body p {
    line-height: 1.75 !important;
    margin-bottom: 0.8em !important;
  }
}