@charset "utf-8";

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Yu Gothic", YuGothic, sans-serif;
}

h1 {
  font-size: 26px;
}
p {
  font-size: 16px;
  line-height: 1.75;
}

/* すべての写真を格納するdiv定義 */
#container {
  position: relative;
  width: 100%;
  height: 100%;
}
/* スライドイン */
/* #container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
} */

/* 各スライドdivの背景画像設定 */
#photo1 {
  background-image: url("../images/1.jpg");
}
#photo2 {
  background-image: url("../images/2.jpg");
}
#photo3 {
  background-image: url("../images/3.jpg");
}
#photo4 {
  background-image: url("../images/4.jpg");
}
#photo5 {
  background-image: url("../images/5.jpg");
}

/* 全スライド共通のstyleとanimationの設定 
**************************************************/

/* スライドのFadeIn,FadeOutのanimation設定 */
.frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  opacity: 0;
  animation: imgTrans 30s infinite;
}
.frame img {
  width: 100%;
}
/* スライドイン設定 */
/* .frame {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  background-size: cover;
  animation: imgTrans 30s infinite;
} */

/* 各スライドのanimationに時間的ずれを設定 */
#photo2 {
  animation-delay: 6s;
}
#photo3 {
  animation-delay: 12s;
}
#photo4 {
  animation-delay: 18s;
}
#photo5 {
  animation-delay: 24s;
}

/* メモ表示の共通したstyleとanimationの設定 */
.memo {
  width: 400px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 20px 40px;
  position: absolute;
  bottom: 10%;
  left: 5%;
  opacity: 0;
  animation: txtTrans 30s infinite;
}

/* 各メモのanimationに時間的ずれを設定 */
#photo2 .memo {
  animation-delay: 6s;
}
#photo3 .memo {
  animation-delay: 12s;
}
#photo4 .memo {
  animation-delay: 18s;
}
#photo5 .memo {
  animation-delay: 24s;
}

/* 一時停止ボタンとプレイボタンの表示とanimation制御の定義 */
#pause_btn:checked ~ #container .frame {
  animation-play-state: paused;
}
#pause_btn:checked ~ #container .frame span {
  animation-play-state: paused;
}
#pause_btn:checked ~ #pause img {
  display: none;
}
#pause_btn:checked ~ #play img {
  display: inline-block;
}
#play_btn:checked ~ #container .frame {
  animation-play-state: running;
}
#play_btn:checked ~ #container .frame span {
  animation-play-state: running;
}

/* 一時停止ボタンとプレイボタンのstyleの定義 */
.r_btn {
  display: none;
}
#play img {
  display: none;
}
label {
  position: absolute;
  left: 50%;
  bottom: 5%;
  margin-left: -30px;
}
label img {
  width: 40px;
}
label img:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* スライドのFadeIn,FadeOutのanimation設定 */
@keyframes imgTrans {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  18% {
    opacity: 1;
  }
  22% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* スライドイン設定 */
/* @keyframes imgTrans {
  0% {
    left: 100%;
  }
  5% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  100% {
    left: -100%;
  }
} */

/* メモ表示のanimation設定 */
@keyframes txtTrans {
  0% {
    opacity: 0;
    bottom: 5%;
  }
  5% {
    opacity: 1;
    bottom: 15%;
  }
  18% {
    opacity: 1;
    bottom: 15%;
  }
  22% {
    opacity: 1;
    bottom: 15%;
  }
  100% {
    opacity: 0;
    bottom: 5%;
  }
}

/* 
・写真（img）の非透明度の初期値を０（非表示）に設定する。
・写真（img）にトータル30秒、繰り返しの animation を設定する。
・animationは、最初の5%(1.5秒)でフェイドイン（opacity0->1）、そのまま20%まで表示し、次の1.5秒でフェイドアウト（opacity1->0）し、そのまま100%まで時間待ちとする。
・各写真（スライド）のanimation間隔を6秒ずつずらして取り、写真が順次表示されるようにする。
*/