@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .scroll-hint-icon {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: auto;
    border-radius: 2px;
    transition: opacity 0.3s;
    opacity: 0;
    /* background: rgba(0, 0, 0, 0.7); */
    text-align: center;
    padding: 20px 10px 10px 10px;
  }

  .scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
  }

  .scroll-hint-text {
    font-size: 10px;
    color: #fff;
    margin-top: 5px;
  }

  .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: 0.9;
  }

  .scroll-hint-icon:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #fff;
    vertical-align: middle;
    text-align: center;
    content: "";
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../img/home/white_hand.svg);
  }

  .scroll-hint-icon:after {
    content: "";
    width: 34px;
    height: 14px;
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
    opacity: 0;
    transition-delay: 2.4s;
  }

  .scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
    opacity: 1;
  }

  .scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
    animation: scroll-hint-appear 1.2s linear;
    animation-iteration-count: 2;
  }

  .scroll-hint-icon-white {
    background-color: #2e8fc0;
    /* box-shadow: 4px 4px 0px 0 rgb(193, 193, 193); */
  }

  .scroll-hint-icon-white:before {
    background-image: url(../img/common/white_hand.svg);
  }

  .scroll-hint-icon-white:after {
    background-image: url(../img/common/white_arrow.svg);
  }

  .scroll-hint-icon-white .scroll-hint-text {
    color: #fff;
  }

  .scroll-hint-shadow-wrap {
    position: relative;
  }

  .scroll-hint-shadow-wrap::after {
    content: "";
    width: 20px;
    height: 100%;
    background: linear-gradient(
      270deg,
      rgba(0, 0, 0, 0.15) 0,
      rgba(0, 0, 0, 0) 16px,
      rgba(0, 0, 0, 0)
    );
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
  }

  .scroll-hint-shadow-wrap::before {
    content: "";
    width: 20px;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.15) 0,
      rgba(0, 0, 0, 0) 16px,
      rgba(0, 0, 0, 0)
    );
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
  }

  .scroll-hint-shadow-wrap:has(.scroll-hint.is-right-scrollable)::after,
  .scroll-hint-shadow-wrap.is-right-scrollable::after {
    opacity: 1;
    visibility: visible;
  }

  .scroll-hint-shadow-wrap:has(.scroll-hint.is-left-scrollable)::before,
  .scroll-hint-shadow-wrap.is-left-scrollable::before {
    opacity: 1;
    visibility: visible;
  }
}