@charset "UTF-8";
/* フォント関連
------------------------------ */
/* 配色
------------------------------ */
/* コンテンツ関連
------------------------------ */
/* 便利
------------------------------ */
/* --------------------------------------------------
  共通
-------------------------------------------------- */
/* 変数
------------------------------ */
/* --------------------------------------------------
  ドット背景のアニメーション(トップ・ビジュアル)
-------------------------------------------------- */
/* keyframes
------------------------------ */
@keyframes visualStarLtoR {
  0% {
    left: 0;
    width: 2px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
    opacity: 1;
  }
  50% {
    width: 200px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
    opacity: .2;
  }
  80% {
    width: 2px;
    background: linear-gradient(to right, white 0%, white 100%);
    opacity: 0;
  }
  100% {
    left: 100%;
    width: 2px;
    opacity: 0;
  }
}
@keyframes visualStarRtoL {
  0% {
    right: 0;
    width: 2px;
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
  }
  50% {
    width: 200px;
    background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
    opacity: .2;
  }
  80% {
    width: 2px;
    background: linear-gradient(to right, white 0%, white 100%);
    opacity: 0;
  }
  100% {
    right: 100%;
    width: 2px;
    opacity: 0;
  }
}
@keyframes visualStarTtoB {
  0% {
    top: 0;
    height: 2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
    opacity: 1;
  }
  50% {
    height: 200px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
    opacity: .2;
  }
  80% {
    height: 2px;
    background: linear-gradient(to bottom, white 0%, white 100%);
    opacity: 0;
  }
  100% {
    top: 100%;
    height: 2px;
    opacity: 0;
  }
}
@keyframes visualStarBtoT {
  0% {
    bottom: 0;
    height: 2px;
    background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 1;
  }
  50% {
    height: 200px;
    background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
    opacity: .2;
  }
  80% {
    height: 2px;
    background: linear-gradient(to bottom, white 0%, white 100%);
    opacity: 0;
  }
  100% {
    bottom: 100%;
    height: 2px;
    opacity: 0;
  }
}
@keyframes dotFlash {
  0% {
    opacity: .8;
  }
  25% {
    opacity: .6;
  }
  50% {
    opacity: .8;
  }
  75% {
    opacity: .6;
  }
  100% {
    opacity: .8;
  }
}
@media screen and (max-width: 600px) {
  @keyframes visualStarLtoR {
    0% {
      left: 0;
      width: 2px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
      opacity: 1;
    }
    50% {
      width: 100px;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
      opacity: .2;
    }
    80% {
      width: 2px;
      background: linear-gradient(to right, white 0%, white 100%);
      opacity: 0;
    }
    100% {
      left: 100%;
      width: 2px;
      opacity: 0;
    }
  }
  @keyframes visualStarRtoL {
    0% {
      right: 0;
      width: 2px;
      background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 1;
    }
    50% {
      width: 100px;
      background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
      opacity: .2;
    }
    80% {
      width: 2px;
      background: linear-gradient(to right, white 0%, white 100%);
      opacity: 0;
    }
    100% {
      right: 100%;
      width: 2px;
      opacity: 0;
    }
  }
  @keyframes visualStarTtoB {
    0% {
      top: 0;
      height: 2px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
      opacity: 1;
    }
    50% {
      height: 100px;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
      opacity: .2;
    }
    80% {
      height: 2px;
      background: linear-gradient(to bottom, white 0%, white 100%);
      opacity: 0;
    }
    100% {
      top: 100%;
      height: 2px;
      opacity: 0;
    }
  }
  @keyframes visualStarBtoT {
    0% {
      bottom: 0;
      height: 2px;
      background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 1;
    }
    50% {
      height: 100px;
      background: linear-gradient(to bottom, white 0%, rgba(255, 255, 255, 0) 100%);
      opacity: .2;
    }
    80% {
      height: 2px;
      background: linear-gradient(to bottom, white 0%, white 100%);
      opacity: 0;
    }
    100% {
      bottom: 100%;
      height: 2px;
      opacity: 0;
    }
  }
}
#visualDots {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  margin: auto;
}
#visualDots #visualStars {
  overflow: hidden;
  position: absolute;
  margin: 100px 75px 50px 100px;
  width: calc(100% - 200px);
  height: calc(100% - 150px);
  opacity: 0;
}
#visualDots #visualStars .star {
  position: absolute;
  width: 1px;
  height: 1px;
  background: white;
}
#visualDots #visualStars .star.LtoR {
  left: 0;
}
#visualDots #visualStars .star.LtoR.i-01 {
  top: calc(45px * 2);
  animation: visualStarLtoR 5s   0s infinite;
}
#visualDots #visualStars .star.LtoR.i-02 {
  top: calc(45px * 5);
  animation: visualStarLtoR 2s   1s infinite;
}
#visualDots #visualStars .star.LtoR.i-03 {
  top: calc(45px * 9);
  animation: visualStarLtoR 5s   2s infinite;
}
#visualDots #visualStars .star.LtoR.i-04 {
  top: calc(45px * 12);
  animation: visualStarLtoR 3s   5s infinite;
}
#visualDots #visualStars .star.LtoR.i-05 {
  top: calc(45px * 14);
  animation: visualStarLtoR 4s   4s infinite;
}
#visualDots #visualStars .star.LtoR.i-06 {
  top: calc(45px * 17);
  animation: visualStarLtoR 2.5s 3s infinite;
}
#visualDots #visualStars .star.LtoR.i-07 {
  top: calc(45px * 18);
  animation: visualStarLtoR 3.5s 2s infinite;
}
#visualDots #visualStars .star.RtoL {
  right: 0;
}
#visualDots #visualStars .star.RtoL.i-01 {
  top: calc(45px * 3);
  animation: visualStarRtoL 2s   4s infinite;
}
#visualDots #visualStars .star.RtoL.i-02 {
  top: calc(45px * 6);
  animation: visualStarRtoL 3.5s 2s infinite;
}
#visualDots #visualStars .star.RtoL.i-03 {
  top: calc(45px * 7);
  animation: visualStarRtoL 3s   0s infinite;
}
#visualDots #visualStars .star.RtoL.i-04 {
  top: calc(45px * 10);
  animation: visualStarRtoL 4s   4s infinite;
}
#visualDots #visualStars .star.RtoL.i-05 {
  top: calc(45px * 11);
  animation: visualStarRtoL 2s   5s infinite;
}
#visualDots #visualStars .star.RtoL.i-06 {
  top: calc(45px * 13);
  animation: visualStarRtoL 4s   3s infinite;
}
#visualDots #visualStars .star.RtoL.i-07 {
  top: calc(45px * 16);
  animation: visualStarRtoL 6s   2s infinite;
}
#visualDots #visualStars .star.TtoB {
  top: 0;
}
#visualDots #visualStars .star.TtoB.i-01 {
  left: calc(45px * 2);
  animation: visualStarTtoB 2s   3s infinite;
}
#visualDots #visualStars .star.TtoB.i-02 {
  left: calc(45px * 6);
  animation: visualStarTtoB 3.5s 2s infinite;
}
#visualDots #visualStars .star.TtoB.i-03 {
  left: calc(45px * 12);
  animation: visualStarTtoB 3s   1s infinite;
}
#visualDots #visualStars .star.TtoB.i-04 {
  left: calc(45px * 18);
  animation: visualStarTtoB 4s   0s infinite;
}
#visualDots #visualStars .star.TtoB.i-05 {
  left: calc(45px * 23);
  animation: visualStarTtoB 3.5s 3s infinite;
}
#visualDots #visualStars .star.TtoB.i-06 {
  left: calc(45px * 27);
  animation: visualStarTtoB 2.5s 4s infinite;
}
#visualDots #visualStars .star.TtoB.i-07 {
  left: calc(45px * 29);
  animation: visualStarTtoB 1s   6s infinite;
}
#visualDots #visualStars .star.TtoB.i-08 {
  left: calc(45px * 34);
  animation: visualStarTtoB 5s   2s infinite;
}
#visualDots #visualStars .star.TtoB.i-09 {
  left: calc(45px * 36);
  animation: visualStarTtoB 2s   6s infinite;
}
#visualDots #visualStars .star.TtoB.i-10 {
  left: calc(45px * 38);
  animation: visualStarTtoB 2.5s 3s infinite;
}
#visualDots #visualStars .star.BtoT {
  bottom: 0;
}
#visualDots #visualStars .star.BtoT.i-01 {
  left: calc(45px * 3);
  animation: visualStarBtoT 2s   3s infinite;
}
#visualDots #visualStars .star.BtoT.i-02 {
  left: calc(45px * 9);
  animation: visualStarBtoT 3s   0s infinite;
}
#visualDots #visualStars .star.BtoT.i-03 {
  left: calc(45px * 13);
  animation: visualStarBtoT 5s   2s infinite;
}
#visualDots #visualStars .star.BtoT.i-04 {
  left: calc(45px * 17);
  animation: visualStarBtoT 1.5s 1s infinite;
}
#visualDots #visualStars .star.BtoT.i-05 {
  left: calc(45px * 20);
  animation: visualStarBtoT 4s   2s infinite;
}
#visualDots #visualStars .star.BtoT.i-06 {
  left: calc(45px * 24);
  animation: visualStarBtoT 2s   5s infinite;
}
#visualDots #visualStars .star.BtoT.i-07 {
  left: calc(45px * 25);
  animation: visualStarBtoT 3.5s 3s infinite;
}
#visualDots #visualStars .star.BtoT.i-08 {
  left: calc(45px * 33);
  animation: visualStarBtoT 4s   5s infinite;
}
#visualDots #visualStars .star.BtoT.i-09 {
  left: calc(45px * 35);
  animation: visualStarBtoT 1.5s 6s infinite;
}
#visualDots #visualStars .star.BtoT.i-10 {
  left: calc(45px * 37);
  animation: visualStarBtoT 3s   2s infinite;
}
#visualDots #visualCanvas {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.2);
  padding: 100px 75px 50px 100px;
  transition: 0.4s;
  opacity: 0;
}
#visualDots #visualCanvas.anim {
  animation: dotFlash 2s infinite;
}

@media screen and (max-width: 600px) {
  #visualDots #visualStars {
    overflow: hidden;
    position: absolute;
    margin: 100px 25px 50px 50px;
    opacity: 0;
  }
  #visualDots #visualStars .star.LtoR {
    left: 0;
  }
  #visualDots #visualStars .star.RtoL {
    right: 0;
  }
  #visualDots #visualStars .star.TtoB {
    top: 0;
  }
  #visualDots #visualStars .star.BtoT {
    bottom: 0;
  }
  #visualDots #visualCanvas {
    position: absolute;
    top: 0;
    left: 0;
    padding: 100px 25px 50px 50px;
    opacity: 0;
  }
}
/* --------------------------------------------------
  ドット背景のアニメーション(共通)
-------------------------------------------------- */
/* keyframes
------------------------------ */
@keyframes starLtoR {
  0% {
    left: 0;
    width: 2px;
    background: linear-gradient(to right, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
    opacity: 1;
  }
  50% {
    width: 200px;
    background: linear-gradient(to right, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
    opacity: .2;
  }
  80% {
    width: 2px;
    background: linear-gradient(to right, #d5d5d5 0%, #d5d5d5 100%);
    opacity: 0;
  }
  100% {
    left: 100%;
    width: 2px;
    opacity: 0;
  }
}
@keyframes starRtoL {
  0% {
    right: 0;
    width: 2px;
    background: linear-gradient(to right, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
    opacity: 1;
  }
  50% {
    width: 200px;
    background: linear-gradient(to right, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
    opacity: .2;
  }
  80% {
    width: 2px;
    background: linear-gradient(to right, #d5d5d5 0%, #d5d5d5 100%);
    opacity: 0;
  }
  100% {
    right: 100%;
    width: 2px;
    opacity: 0;
  }
}
@keyframes starTtoB {
  0% {
    top: 0;
    height: 2px;
    background: linear-gradient(to bottom, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
    opacity: 1;
  }
  50% {
    height: 200px;
    background: linear-gradient(to bottom, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
    opacity: .2;
  }
  80% {
    height: 2px;
    background: linear-gradient(to bottom, #d5d5d5 0%, #d5d5d5 100%);
    opacity: 0;
  }
  100% {
    top: 100%;
    height: 2px;
    opacity: 0;
  }
}
@keyframes starBtoT {
  0% {
    bottom: 0;
    height: 2px;
    background: linear-gradient(to bottom, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
    opacity: 1;
  }
  50% {
    height: 200px;
    background: linear-gradient(to bottom, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
    opacity: .2;
  }
  80% {
    height: 2px;
    background: linear-gradient(to bottom, #d5d5d5 0%, #d5d5d5 100%);
    opacity: 0;
  }
  100% {
    bottom: 100%;
    height: 2px;
    opacity: 0;
  }
}
@keyframes dotFlash {
  0% {
    opacity: .8;
  }
  25% {
    opacity: .6;
  }
  50% {
    opacity: .8;
  }
  75% {
    opacity: .6;
  }
  100% {
    opacity: .8;
  }
}
@media screen and (max-width: 600px) {
  @keyframes starLtoR {
    0% {
      left: 0;
      width: 2px;
      background: linear-gradient(to right, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
      opacity: 1;
    }
    50% {
      width: 100px;
      background: linear-gradient(to right, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
      opacity: .2;
    }
    80% {
      width: 2px;
      background: linear-gradient(to right, #d5d5d5 0%, #d5d5d5 100%);
      opacity: 0;
    }
    100% {
      left: 100%;
      width: 2px;
      opacity: 0;
    }
  }
  @keyframes starRtoL {
    0% {
      right: 0;
      width: 2px;
      background: linear-gradient(to right, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
      opacity: 1;
    }
    50% {
      width: 100px;
      background: linear-gradient(to right, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
      opacity: .2;
    }
    80% {
      width: 2px;
      background: linear-gradient(to right, #d5d5d5 0%, #d5d5d5 100%);
      opacity: 0;
    }
    100% {
      right: 100%;
      width: 2px;
      opacity: 0;
    }
  }
  @keyframes starTtoB {
    0% {
      top: 0;
      height: 2px;
      background: linear-gradient(to bottom, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
      opacity: 1;
    }
    50% {
      height: 100px;
      background: linear-gradient(to bottom, rgba(213, 213, 213, 0) 0%, #d5d5d5 100%);
      opacity: .2;
    }
    80% {
      height: 2px;
      background: linear-gradient(to bottom, #d5d5d5 0%, #d5d5d5 100%);
      opacity: 0;
    }
    100% {
      top: 100%;
      height: 2px;
      opacity: 0;
    }
  }
  @keyframes starBtoT {
    0% {
      bottom: 0;
      height: 2px;
      background: linear-gradient(to bottom, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
      opacity: 1;
    }
    50% {
      height: 100px;
      background: linear-gradient(to bottom, #d5d5d5 0%, rgba(213, 213, 213, 0) 100%);
      opacity: .2;
    }
    80% {
      height: 2px;
      background: linear-gradient(to bottom, #d5d5d5 0%, #d5d5d5 100%);
      opacity: 0;
    }
    100% {
      bottom: 100%;
      height: 2px;
      opacity: 0;
    }
  }
}
#dots {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  margin: auto;
}
#dots #stars {
  overflow: hidden;
  position: absolute;
  margin: 100px 75px 50px 100px;
  width: calc(100% - 200px);
  height: calc(100% - 150px);
  opacity: 0;
}
#dots #stars .star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d5d5d5;
}
#dots #stars .star.LtoR {
  left: 0;
}
#dots #stars .star.LtoR.i-01 {
  top: calc(45px * 2);
  animation: starLtoR 5s   0s infinite;
}
#dots #stars .star.LtoR.i-02 {
  top: calc(45px * 5);
  animation: starLtoR 2s   1s infinite;
}
#dots #stars .star.LtoR.i-03 {
  top: calc(45px * 9);
  animation: starLtoR 5s   2s infinite;
}
#dots #stars .star.LtoR.i-04 {
  top: calc(45px * 12);
  animation: starLtoR 3s   5s infinite;
}
#dots #stars .star.LtoR.i-05 {
  top: calc(45px * 14);
  animation: starLtoR 4s   4s infinite;
}
#dots #stars .star.LtoR.i-06 {
  top: calc(45px * 17);
  animation: starLtoR 2.5s 3s infinite;
}
#dots #stars .star.LtoR.i-07 {
  top: calc(45px * 18);
  animation: starLtoR 3.5s 2s infinite;
}
#dots #stars .star.RtoL {
  right: 0;
}
#dots #stars .star.RtoL.i-01 {
  top: calc(45px * 3);
  animation: starRtoL 2s   4s infinite;
}
#dots #stars .star.RtoL.i-02 {
  top: calc(45px * 6);
  animation: starRtoL 3.5s 2s infinite;
}
#dots #stars .star.RtoL.i-03 {
  top: calc(45px * 7);
  animation: starRtoL 3s   0s infinite;
}
#dots #stars .star.RtoL.i-04 {
  top: calc(45px * 10);
  animation: starRtoL 4s   4s infinite;
}
#dots #stars .star.RtoL.i-05 {
  top: calc(45px * 11);
  animation: starRtoL 2s   5s infinite;
}
#dots #stars .star.RtoL.i-06 {
  top: calc(45px * 13);
  animation: starRtoL 4s   3s infinite;
}
#dots #stars .star.RtoL.i-07 {
  top: calc(45px * 16);
  animation: starRtoL 6s   2s infinite;
}
#dots #stars .star.TtoB {
  top: 0;
}
#dots #stars .star.TtoB.i-01 {
  left: calc(45px * 2);
  animation: starTtoB 2s   3s infinite;
}
#dots #stars .star.TtoB.i-02 {
  left: calc(45px * 6);
  animation: starTtoB 3.5s 2s infinite;
}
#dots #stars .star.TtoB.i-03 {
  left: calc(45px * 12);
  animation: starTtoB 3s   1s infinite;
}
#dots #stars .star.TtoB.i-04 {
  left: calc(45px * 18);
  animation: starTtoB 4s   0s infinite;
}
#dots #stars .star.TtoB.i-05 {
  left: calc(45px * 23);
  animation: starTtoB 3.5s 3s infinite;
}
#dots #stars .star.TtoB.i-06 {
  left: calc(45px * 27);
  animation: starTtoB 2.5s 4s infinite;
}
#dots #stars .star.TtoB.i-07 {
  left: calc(45px * 29);
  animation: starTtoB 1s   6s infinite;
}
#dots #stars .star.TtoB.i-08 {
  left: calc(45px * 34);
  animation: starTtoB 5s   2s infinite;
}
#dots #stars .star.TtoB.i-09 {
  left: calc(45px * 36);
  animation: starTtoB 2s   6s infinite;
}
#dots #stars .star.TtoB.i-10 {
  left: calc(45px * 38);
  animation: starTtoB 2.5s 3s infinite;
}
#dots #stars .star.BtoT {
  bottom: 0;
}
#dots #stars .star.BtoT.i-01 {
  left: calc(45px * 3);
  animation: starBtoT 2s   3s infinite;
}
#dots #stars .star.BtoT.i-02 {
  left: calc(45px * 9);
  animation: starBtoT 3s   0s infinite;
}
#dots #stars .star.BtoT.i-03 {
  left: calc(45px * 13);
  animation: starBtoT 5s   2s infinite;
}
#dots #stars .star.BtoT.i-04 {
  left: calc(45px * 17);
  animation: starBtoT 1.5s 1s infinite;
}
#dots #stars .star.BtoT.i-05 {
  left: calc(45px * 20);
  animation: starBtoT 4s   2s infinite;
}
#dots #stars .star.BtoT.i-06 {
  left: calc(45px * 24);
  animation: starBtoT 2s   5s infinite;
}
#dots #stars .star.BtoT.i-07 {
  left: calc(45px * 25);
  animation: starBtoT 3.5s 3s infinite;
}
#dots #stars .star.BtoT.i-08 {
  left: calc(45px * 33);
  animation: starBtoT 4s   5s infinite;
}
#dots #stars .star.BtoT.i-09 {
  left: calc(45px * 35);
  animation: starBtoT 1.5s 6s infinite;
}
#dots #stars .star.BtoT.i-10 {
  left: calc(45px * 37);
  animation: starBtoT 3s   2s infinite;
}
#dots #canvas {
  position: absolute;
  top: 0;
  left: 0;
  padding: 100px 75px 50px 100px;
  transition: 0.4s;
  opacity: 0;
}
#dots #canvas.anim {
  animation: dotFlash 2s infinite;
}

@media screen and (max-width: 600px) {
  #dots #stars {
    overflow: hidden;
    position: absolute;
    margin: 100px 25px 50px 50px;
    opacity: 0;
  }
  #dots #stars .star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
  }
  #dots #stars .star.LtoR {
    left: 0;
  }
  #dots #stars .star.RtoL {
    right: 0;
  }
  #dots #stars .star.TtoB {
    top: 0;
  }
  #dots #stars .star.BtoT {
    bottom: 0;
  }
  #dots #canvas {
    position: absolute;
    top: 0;
    left: 0;
    padding: 100px 25px 50px 50px;
    opacity: 0;
  }
}