@charset "shift_jis";
.scrolldown {
  position: absolute;
  bottom: 30%;
  right: 50%;
  animation: arrowmove 1s ease-in-out infinite;
}
@media screen and (min-width: 951px) {
  /* 951px以上に適用されるCSS */
  @keyframes arrowmove {
    0% {
      bottom: 30%;
    }
    50% {
      bottom: 33%;
    }
    100% {
      bottom: 30%;
    }
  }
  .scrolldown span {
    position: absolute;
    left: -30px;
    bottom: 10px;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
  .scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 2px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
  }
  .scrolldown:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 2px;
    height: 50px;
    background: #fff;
  }
}
@media screen and (max-width: 950px) {
  /* 950px以下に適用されるCSS */
  @keyframes arrowmove {
    0% {
      bottom: 40%;
    }
    50% {
      bottom: 43%;
    }
    100% {
      bottom: 40%;
    }
  }
  .scrolldown span {
    position: absolute;
    left: -30px;
    bottom: 10px;
    color: #fff;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
  }
  .scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #fff;
    transform: skewX(-31deg);
  }
  .scrolldown:after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 50px;
    background: #fff;
  }
}