@charset "utf-8";

/*opa1のキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes opa1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide2 {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes slide3 {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/*スライドショー（cssでのbackground使用）
ここでは、16:9の画像比率（9÷16=0.5625）を読み込む指定を行なっています。
異なる画像比率にしたい場合、.mainimgのpadding-topの数字を変更します。2:1にするなら50%です。
---------------------------------------------------------------------------*/
/*3枚の画像を囲むブロック*/
.mainimg-css-bg {
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
}

/*３枚の画像の共通設定*/
.mainimg-css-bg .slide1,
.mainimg-css-bg .slide2,
.mainimg-css-bg .slide3 {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: -1;
  text-indent: -9999px;
}

/*１枚目画像*/
.mainimg-css-bg .slide1 {
  animation: slide1 15s linear infinite, opa1 1s linear;
  background: url(../images/1.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.mainimg-css-bg .slide2 {
  animation: slide2 15s linear infinite;
  background: url(../images/2.jpg) no-repeat center center/cover;
}

/*３枚目画像*/
.mainimg-css-bg .slide3 {
  animation: slide3 15s linear infinite;
  background: url(../images/3.jpg) no-repeat center center/cover;
}