/*-------------------------------------小森めと*/
#komori {
  background: url(../images/komori/background.png) repeat top left ;
}

#komori .background-grad {
  background: rgba(0, 0, 0, 0.7);
}

.komori-top-text,
.komori-profile,
.komori-tag,
.komori-movie {
  color: #fff;
  background: transparent;
  border: 5px solid #fff;
  border-radius: 3rem;
  box-shadow: 0 0 30px 0 #fba03f, inset -10px -10px 20px 0 #fba03f, inset 10px 10px 20px 0 #fba03f;
  border: 2px solid #fff;
  border-radius: 1rem;
  -webkit-box-shadow: 0 0 1px #fff,
                     inset 0 0 1px #fff,
                     0 0 10px #fba03f,
                     inset 0 0 10px #fba03f,
                     0 0 20px #fba03f,
                     inset 0 0 10px #fba03f;
  -moz-box-shadow: 0 0 1px #fff,
                   inset 0 0 1px #fff,
                   0 0 10px #fba03f,
                   inset 0 0 10px #fba03f,
                   0 0 20px #fba03f,
                   inset 0 0 10px #fba03f;
  box-shadow: 0 0 1px #fff,
      inset 0 0 1px #fff,
      0 0 10px #fba03f,
      inset 0 0 10px #fba03f,
      0 0 20px #fba03f,
      inset 0 0 10px #fba03f;
  text-shadow:
            0 0 1px #fff,
            0 0 20px #faae5d,
            0 0 10px #faae5d,
            0 0 10px #fda74a,
            0 0 60px #fba03f,
            0 10px 3px #000;
  background: #282020;
}

#komori span.neon1 {
  -webkit-animation: neon linear infinite 1.4s;
  -moz-animation: neon linear infinite 1.4s;
  animation: neon  linear infinite 1.4s;
}

#komori span.neon2 {
  -webkit-animation: neon linear infinite 2s;
  -moz-animation: neon linear infinite 2s;
  animation: neon linear infinite 2s;
}

#komori span.neon3 {
  -webkit-animation: neon linear infinite 2.5s;
  -moz-animation: neon linear infinite 2.5s;
  animation: neon  linear infinite 2.5s;
}


.komori-wrapper {
  justify-content: center;
  gap: 5rem;
}

.komori-wrapper .traffic-light {
  width: 20vw;
  font-size: 6vw;
  background: #666666;
  text-align: center;
  border-radius: 1rem;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg);
  position: relative;
  z-index: 0;
}

.komori-wrapper .traffic-light::after {
  content: "";
  position: absolute;
  width: 20vw;
  height: 9vw;
  border-radius: 1rem;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
}

.komori-wrapper .traffic-light span.blue {
  color: blue;
  position: relative;
  z-index: 1;
}

.komori-wrapper .traffic-light span.blue::after {
  position: absolute;
  content: "";
  width: 6vw;
  height: 6vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  opacity: 1;
}

.komori-wrapper .traffic-light span.yellow {
  color: yellow;
  position: relative;
  z-index: 1;
}

.komori-wrapper .traffic-light span.yellow::after {
  position: absolute;
  content: "";
  width: 6vw;
  height: 6vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  opacity: 1;
  -webkit-animation: traffic-light 7s linear 0s infinite;
  -moz-animation: traffic-light 7s linear 0s infinite;
  animation: traffic-light 7s linear 0s infinite;
}

.komori-wrapper .traffic-light span.red {
  color: red;
  position: relative;
  z-index: 1;
}

.komori-wrapper .traffic-light span.red::after {
  position: absolute;
  content: "";
  width: 6vw;
  height: 6vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  opacity: 1;
}

.komori-tag span {
  opacity: 1;
}

@keyframes neon {
  70% {
      color: inherit;
      text-shadow: inherit;
  }
  72% {
      color: #333;
  }
  83% {
      text-shadow: none;
  }
  84% {
      color: inherit;
      text-shadow: inherit;
  }
  85% {
      color: #333;
      text-shadow: none;
  }
  86% {
      color: inherit;
      text-shadow: inherit;
  }
  95% {
      color: #333;
      text-shadow: none;
  }
  95.5% {
      color: inherit;
      text-shadow: inherit;
  }
}

@keyframes traffic-light {
  0% {
    opacity: 1;
  }


  80% {
    opacity: 0;
  }

  85% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}