@charset 'UTF-8';

/* add-top.css — TOPページ専用スタイル。
 * jQuery/slick 依存を廃止し、CSS-only のクロスフェードヒーローへ移行。
 * モダンブレイクポイント（768px）を採用。 */

/* ============================================
 * ヒーロー: CSS-only クロスフェード
 * ============================================ */

.mv-crossfade {
  position: relative;
  overflow: hidden;
  display: grid;
}

.mv-crossfade .mv-slide {
  display: block;
  margin: 0;
  grid-area: 1 / 1; /* 両スライドを同一セルへ重ねる */
}

.mv-crossfade .mainvisual {
  width: 100%;
  height: auto;
  display: block;
}

/* 2枚のスライドを交互にフェード（8秒周期、各4秒表示）。
 * prefers-reduced-motion では停止して両方見える状態に。 */
.mv-crossfade .mv-slide {
  animation: mvCrossfade 8s infinite;
}

.mv-crossfade .mv-slide--1 {
  animation-name: mvCrossfadeFirst;
}

.mv-crossfade .mv-slide--2 {
  opacity: 0;
  animation-name: mvCrossfadeSecond;
}

@keyframes mvCrossfadeFirst {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@keyframes mvCrossfadeSecond {
  0%, 45% { opacity: 0; }
  55%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mv-crossfade .mv-slide {
    animation: none;
  }
  .mv-crossfade .mv-slide--1 { opacity: 1; }
  .mv-crossfade .mv-slide--2 { opacity: 0; }
}