@charset "UTF-8";
/* ======================================================================
   INDEX / 目次（番号で検索すると目的の設定へ移動できます）
   01. アニメーション共通設定：速度・移動量
   02. 初回表示：見出し・斜め装飾・スクロール表示
   03. 操作への反応：写真・矢印・バナー・メニュー
   04. スマートフォン・動きを減らす設定
   読み込み順：style.css → animation.css。配置や配色はstyle.cssで管理します。
   表示演出の対象はanimation.jsの02、メニュー開閉は同ファイルの03を参照します。
   ====================================================================== */
/* 01. 共通設定：速度を変える場合はここを調整します。 */
:root {
  --motion-duration: .9s;
  --motion-slide-distance: 36px;
  --motion-blur-duration: 1s;
  --motion-distance: 14px;
  --motion-easing: cubic-bezier(.22, 1, .36, 1);
}
/* 02. 初回表示：JSが対象にクラスを付けた時だけ、一度再生します。
   JS無効・読み込み失敗時も本文は表示されます。終了後に位置は変わりません。 */
.motion-enter {
  animation: motion-enter var(--motion-duration) var(--motion-easing) var(--motion-delay, 0s) both;
}
@keyframes motion-enter {
  from {
    opacity: 0;
    translate: 0 var(--motion-distance);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* 事業カードは6割以上が画面に入ってから、左から定位置へ移動します。
   待機中は透明度のみ変更し、監視するカードの位置・サイズを保ちます。 */
.motion-pending {
  opacity: 0;
}
.motion-slide {
  animation: motion-slide var(--motion-duration) var(--motion-easing) var(--motion-delay, 0s) both;
}
@keyframes motion-slide {
  from {
    opacity: 0;
    translate: calc(-1 * var(--motion-slide-distance)) 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* 長い本文全体にフィルターを掛けず、見出し・行・段落単位で鮮明にします。 */
.motion-blur {
  animation: motion-blur var(--motion-blur-duration) ease-out both;
}
@keyframes motion-blur {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}
/* skewはstyle.cssに残し、clip-pathで水色の帯だけを下から表示します。 */
.hero-accent.motion-accent {
  animation: motion-accent .8s var(--motion-easing) both;
}
@keyframes motion-accent {
  from {
    clip-path: inset(100% 0 0);
  }
  to {
    clip-path: inset(-100% -100%);
  }
}
/* フォーカス先は遅延中も読めるように即時表示します。 */
.motion-enter:focus-within, .motion-slide:focus-within, .motion-blur:focus-within {
  animation: none;
}
.motion-pending:focus-within {
  opacity: 1;
}
/* 03. 操作への反応：translateはスマホ矢印の既存transformを保ちます。 */
.nav-link {
  transition: scale .25s ease, translate .25s ease;
  transform-origin: center;
}
.card-image {
  transition: scale .35s var(--motion-easing);
}
.arrow {
  transition: translate .2s ease;
}
.button, .feature-card, .feature-card--photo::before {
  transition: background-color .25s ease;
}
.service-card {
  transition: box-shadow .25s ease;
}
.menu-toggle span {
  transition: transform .2s ease, opacity .2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
/* 現在ページの色付き下線と重ならないよう、ホバー下線は表示しません。 */
  .nav-link:hover {
    text-decoration: none;
    scale: 1.04;
    translate: 0 -2px;
  }
  .service-card:hover .card-image {
    scale: 1.025;
  }
  :is(.service-card, .feature-card, .button, .text-link):hover .arrow {
    translate: 4px 0;
  }
  .feature-card--dark:hover {
    background-color: #164362;
  }
  .feature-card--photo:hover::before {
    background-color: #edf5f9;
  }
}
/* 04. スマートフォン：移動距離を小さくし、カードの時間差はJSで共通管理します。 */
@media (max-width: 600px) {
  :root {
    --motion-duration: .75s;
    --motion-distance: 8px;
    --motion-slide-distance: 20px;
  }
}
/* 利用者が動きを減らす設定を選んだ場合は、JSとCSSの両方で停止します。 */
@media (prefers-reduced-motion: reduce) {
  .motion-enter, .motion-slide, .motion-blur, .hero-accent.motion-accent {
    animation: none;
  }
  .motion-pending {
    opacity: 1;
  }
  .nav-link:hover {
    scale: 1;
    translate: none;
  }
  .card-image, .arrow, .button, .feature-card, .feature-card--photo::before,
  .service-card, .menu-toggle span, .nav-link {
    transition: none;
  }
  .service-card:hover .card-image {
    scale: 1;
  }
  :is(.service-card, .feature-card, .button, .text-link):hover .arrow {
    translate: none;
  }
}