@charset "utf-8";
/*
 * トップページの3枚スライド：1枚あたり5秒、3枚で15秒。
 * 1枚目 0～5秒 / 2枚目 5～10秒 / 3枚目 10～15秒。
 * 切り替え直前の0.6秒間で自然にクロスフェードします。
 * 画像の配置やスマートフォンのヘッダー余白は従来どおり。
 */
.mainimg {
  clear: left;
  width: 100%;
  margin: 0 auto;
  position: relative;
  box-shadow: 0 20px 30px rgba(0,0,0,.1);
}
.mainimg .slide0 {
  position: relative;
  width: 100%;
  height: auto;
}
.mainimg .slide1,
.mainimg .slide2,
.mainimg .slide3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-delay: 0s;
}
.mainimg .slide1 {z-index:1; animation-name: iikaigo-slide1;}
.mainimg .slide2 {z-index:2; animation-name: iikaigo-slide2;}
.mainimg .slide3 {z-index:3; animation-name: iikaigo-slide3;}

/* 最初の画像は開始直後から表示。4.4～5秒で2枚目へ。 */
@keyframes iikaigo-slide1 {
  0%, 29.333% {opacity:1}
  33.333%, 96% {opacity:0}
  100% {opacity:1}
}
/* 2枚目は5秒時点で全面表示、9.4～10秒で3枚目へ。 */
@keyframes iikaigo-slide2 {
  0%, 29.333% {opacity:0}
  33.333%, 62.667% {opacity:1}
  66.667%, 100% {opacity:0}
}
/* 3枚目は10秒時点で全面表示、14.4～15秒で1枚目へ。 */
@keyframes iikaigo-slide3 {
  0%, 62.667% {opacity:0}
  66.667%, 96% {opacity:1}
  100% {opacity:0}
}

/* 動きを減らす設定では最初の写真を静止表示する。 */
@media (prefers-reduced-motion: reduce) {
  .mainimg .slide1,.mainimg .slide2,.mainimg .slide3 {
    animation: none !important;
    opacity:0 !important;
  }
}