[data-js=scroll] {
  position: relative;
  width: 100%;
  max-width: 100%;
}
[data-js=scroll].is_scrollable {
  overflow-x: scroll;
  white-space: nowrap;
  max-width: 100%;
}

[data-scroll=icon_wrap] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
  display: none;
}
[data-scroll=icon_wrap]:is(.is_active) {
  display: block;
}
[data-scroll=icon_wrap]:is(.is_active) [data-scroll=icon]:after {
  opacity: 1;
}
[data-scroll=icon_wrap]:is(.is_active) [data-scroll=icon]:before {
  animation: scroll-hint 1.2s linear;
  animation-iteration-count: 2;
}
[data-scroll=icon_wrap] [data-scroll=icon] {
  display: grid;
  place-items: center;
  place-content: center;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 60px);
  box-sizing: border-box;
  width: 115px;
  aspect-ratio: 1;
  border-radius: 150%;
  transition: opacity 0.3s;
  opacity: 1;
  background: rgba(255, 195, 26, 0.4);
  text-align: center;
  padding: 20px;
  z-index: 45;
}
[data-scroll=icon_wrap] [data-scroll=icon]:before {
  display: inline-block;
  aspect-ratio: 24/32;
  width: 36px;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2276.643%22%20height%3D%22118.422%22%20viewBox%3D%220%200%2076.643%20118.422%22%3E%3Cg%20transform%3D%22translate%28-2488.241%20-6344.427%29%22%3E%3Cpath%20d%3D%22M2505.578%2C6404.568a2.213%2C2.213%2C0%2C0%2C1-2.117-2.857l15.5-50.623a9.408%2C9.408%2C0%2C0%2C1%2C8.975-6.661%2C9.429%2C9.429%2C0%2C0%2C1%2C2.747.411%2C9.395%2C9.395%2C0%2C0%2C1%2C6.252%2C11.721l-11.124%2C36.256a2.2%2C2.2%2C0%2C0%2C1-2.115%2C1.567h0a2.212%2C2.212%2C0%2C0%2C1-2.117-2.856l11.123-36.255a4.97%2C4.97%2C0%2C1%2C0-9.509-2.894l-15.5%2C50.623A2.2%2C2.2%2C0%2C0%2C1%2C2505.578%2C6404.568Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M2538.534%2C6462.849a2.207%2C2.207%2C0%2C0%2C1-.55-.069%2C2.237%2C2.237%2C0%2C0%2C1-.649-.282%2C2.211%2C2.211%2C0%2C0%2C1-.945-2.41c.839-3.277%2C3.587-5.981%2C6.5-8.843%2C2.405-2.367%2C4.89-4.811%2C5.7-7.191%2C1.873-5.515%2C11.164-36.643%2C11.682-38.38l.022-.074a4%2C4%2C0%2C0%2C0-3.822-5.153%2C2.212%2C2.212%2C0%2C1%2C1-.038-4.424%2C8.418%2C8.418%2C0%2C0%2C1%2C8.1%2C10.85c-1.007%2C3.378-9.853%2C33.013-11.751%2C38.6-1.146%2C3.374-4.011%2C6.193-6.782%2C8.92-2.352%2C2.314-4.781%2C4.705-5.315%2C6.79a2.211%2C2.211%2C0%2C0%2C1-2.141%2C1.663Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M2499.8%2C6460.219a2.2%2C2.2%2C0%2C0%2C1-.687-.11%2C2.2%2C2.2%2C0%2C0%2C1-1.415-2.79%2C47.764%2C47.764%2C0%2C0%2C0%2C2.271-8.985c.135-1.379-.381-3.671-1.574-7.008-1-2.779-2.313-5.88-3.71-9.162-3.34-7.852-6.792-15.969-6.415-21.329l1.421-19.63a2.243%2C2.243%2C0%2C0%2C1%2C.1-.506%2C9.382%2C9.382%2C0%2C0%2C1%2C9.252-7.914%2C9.427%2C9.427%2C0%2C0%2C1%2C6.855%2C2.952%2C2.212%2C2.212%2C0%2C0%2C1-3.221%2C3.033%2C5.008%2C5.008%2C0%2C0%2C0-3.627-1.561%2C4.971%2C4.971%2C0%2C0%2C0-4.928%2C4.412%2C2.028%2C2.028%2C0%2C0%2C1-.051.282l-1.386%2C19.245c-.3%2C4.3%2C3.085%2C12.256%2C6.071%2C19.278%2C1.423%2C3.345%2C2.766%2C6.5%2C3.807%2C9.41%2C1.458%2C4.074%2C2.017%2C6.827%2C1.812%2C8.927a51.553%2C51.553%2C0%2C0%2C1-2.47%2C9.93%2C2.207%2C2.207%2C0%2C0%2C1-2.1%2C1.526Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M2550.769%2C6404.088a2.213%2C2.213%2C0%2C0%2C1-2.118-2.857l.673-2.209a4.977%2C4.977%2C0%2C0%2C0-4.755-6.42c-.161%2C0-.321.008-.483.024-.073.007-.146.011-.218.011a2.212%2C2.212%2C0%2C0%2C1-.214-4.413%2C9.042%2C9.042%2C0%2C0%2C1%2C.918-.046%2C9.4%2C9.4%2C0%2C0%2C1%2C8.984%2C12.132l-.672%2C2.21a2.2%2C2.2%2C0%2C0%2C1-2.115%2C1.568Z%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M2537.434%2C6398.565a2.209%2C2.209%2C0%2C0%2C1-.644-.1%2C2.211%2C2.211%2C0%2C0%2C1-1.472-2.76l.912-3a4.976%2C4.976%2C0%2C0%2C0-3.307-6.2%2C5.061%2C5.061%2C0%2C0%2C0-.99-.2%2C2.212%2C2.212%2C0%2C0%2C1%2C.2-4.414c.069%2C0%2C.138%2C0%2C.209.01a9.575%2C9.575%2C0%2C0%2C1%2C1.864.368%2C9.4%2C9.4%2C0%2C0%2C1%2C6.251%2C11.723l-.912%2C3a2.2%2C2.2%2C0%2C0%2C1-2.116%2C1.568Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
[data-scroll=icon_wrap] [data-scroll=icon]:after {
  content: "";
  aspect-ratio: 93/26;
  width: 46px;
  display: block;
  position: absolute;
  top: 36px;
  left: 50%;
  margin-left: -23px;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2293%22%20height%3D%2226.685%22%20viewBox%3D%220%200%2093%2026.685%22%3E%3Cg%20transform%3D%22translate%286469.5%204283.586%29%22%3E%3Cg%20transform%3D%22translate%28-8954%20-10627%29%22%3E%3Cpath%20d%3D%22M2556.079%2C6370.1a2.213%2C2.213%2C0%2C0%2C1-2.212-2.212v-4.058a2.212%2C2.212%2C0%2C0%2C1%2C4.424%2C0v.22l12.585-7.293-12.585-7.292v7.292a2.214%2C2.214%2C0%2C0%2C1-2.212%2C2.212c-.068%2C0-.135%2C0-.2-.009s-.133.009-.2.009h-10.35a2.212%2C2.212%2C0%2C0%2C1%2C0-4.424h8.541v-8.918a2.212%2C2.212%2C0%2C0%2C1%2C3.321-1.914l19.209%2C11.131a2.211%2C2.211%2C0%2C0%2C1%2C0%2C3.827l-19.209%2C11.131A2.213%2C2.213%2C0%2C0%2C1%2C2556.079%2C6370.1Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%28-8954%20-10627%29%22%3E%3Cpath%20d%3D%22M2486.712%2C6358.968a2.212%2C2.212%2C0%2C0%2C1%2C0-4.424h20.069a2.212%2C2.212%2C0%2C0%2C1%2C0%2C4.424Z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  opacity: 0;
  transition-delay: 2.4s;
}
[data-scroll=icon_wrap] [data-scroll=text] {
  font-size: 10px;
  color: #fff;
  margin-top: 5px;
  display: none;
}

@keyframes scroll-hint {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%, 100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}