@charset "utf-8";

/* シルエットアニメーションのスタイル */

div#shadow div#shadow01{
  position: absolute;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shadow01b.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow01;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow01{
    0%{opacity: 0;}
  0.5%{opacity: 1;}
 19.5%{opacity: 1;}
   20%{opacity: 0;}
  100%{opacity: 0;}
}


div#shadow div#shadow02{
  position: absolute;
  top: -100vh;
  right: -100vw;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shadow02b.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow02;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow02{
    0%{top: -100vh;right: -100vw;}
   20%{top: -100vh;right: -100vw;}
 20.5%{top: 0;right: 0;}
 33.5%{top: 0;right: 0;}
   34%{top: 100vh;right: 100vw;}
  100%{top: 100vh;right: 100vw;}
}

div#shadow div#shadow03{
  position: absolute;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shadow03b.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow03;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow03{
    0%{top: -20vh;left: -100vw;}
   34%{top: -20vh;left: -100vw;}
 34.5%{top: 0;left: 0;}
 47.5%{top: 0;left: 0;}
   48%{top: 20vh;left: 100vw;}
  100%{top: 20vh;left: 100vw;}
}

div#shadow div#shadow04{
  position: absolute;
  bottom: 20vh;
  right: 0;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shadow04b.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow04;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow04{
    0%{bottom: -100vh;right: -100vw;}
   48%{bottom: -100vh;right: -100vw;}
 48.5%{bottom: 0;right: 0;}
 61.5%{bottom: 0;right: 0;}
   62%{bottom: 100vh;right: 100vw;}
  100%{bottom: 100vh;right: 100vw;}
}

div#shadow div#shadow05{
  position: absolute;
  width: 100%;
  height: 100vh;
  background-image: url(../images/shadow05b.png);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow05;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow05{
    0%{opacity: 0;}
   62%{opacity: 0;}
 62.5%{opacity: 1;}
 77.5%{opacity: 1;}
   78%{opacity: 0;}
  100%{opacity: 0;}
}

div#shadow div#shadow06{
  position: absolute;
  bottom: -100vh;
  right: -100vw;
  width: 100%;
  height: 100vh;
  transform: scale(3.5);
  background-image: url(../images/shadow06b.png);
  background-size: 110%;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  animation-name: shadow06;
  animation-duration: 60s;
  animation-iteration-count: infinite;
/*  animation-delay: 3s;*/
}
@keyframes shadow06{
    0%{bottom: -250vh;right: -100vw;transform: scale(3.5);background-image: url(../images/shadow06c.png);}
   78%{bottom: -250vh;right: -100vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
 78.5%{bottom: -100vh;right: -100vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
 86.5%{bottom: -100vh;right: -100vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
   87%{bottom: 0;right: 0;transform: scale(1);background-image: url(../images/shadow06c.png);}
 98.5%{bottom: 0;right: 0;transform: scale(1);background-image: url(../images/shadow06c.png);}
   99%{bottom: 100vh;right: 100vw;transform: scale(1);background-image: url(../images/shadow06c.png);}
  100%{bottom: 100vh;right: 100vw;transform: scale(1);background-image: url(../images/shadow06c.png);}
}




/* ########### 599px以下 ########### */
@media (max-width: 599px) {

  div#shadow div#shadow01,
  div#shadow div#shadow02,
  div#shadow div#shadow03,
  div#shadow div#shadow04,
  div#shadow div#shadow05,
  div#shadow div#shadow06{
    background-size: contain;
  }


  @keyframes shadow06{
  /* 0%{bottom: -50vh;right: -120vw;transform: scale(4);background-image: url(../images/shadow06b.png);}
     78%{bottom: -50vh;right: -120vw;transform: scale(4);background-image: url(../images/shadow06b.png);}
  */
      0%{bottom: -250vh;right: -120vw;transform: scale(3.5);background-image: url(../images/shadow06c.png);}
     78%{bottom: -250vh;right: -120vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
   78.5%{bottom: -50vh;right: -120vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
   86.5%{bottom: -50vh;right: -120vw;transform: scale(3.5);background-image: url(../images/shadow06b.png);}
     87%{bottom: 0;right: 0;transform: scale(1);background-image: url(../images/shadow06c.png);}
   98.5%{bottom: 0;right: 0;transform: scale(1);background-image: url(../images/shadow06c.png);}
     99%{bottom: 100vh;right: 100vw;transform: scale(1);background-image: url(../images/shadow06c.png);}
    100%{bottom: 100vh;right: 100vw;transform: scale(1);background-image: url(../images/shadow06c.png);}
  }

}




/* ########### 600px以上～768px以下 ########### */
@media (min-width: 600px) and (max-width: 768px) {}



/* ########### 769px以上 ########### */
@media (min-width: 769px) {}



/* ########### 1000px以上 ########### */
@media (min-width: 1000px) {}