.static-line-button { display: none; }
.static-line-mobile .line_box .static-line-qr { display: none; }
.static-line-mobile .line_box .static-line-button { display: inline; }

/* Native horizontal scrolling supplies touch, trackpad and scroll snapping. */
.voice-carousel { position: relative; margin-bottom: 30px; }
.voice-carousel .slider {
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.voice-carousel .slider::-webkit-scrollbar { display: none; }
.voice-carousel .slider > li {
  flex: 0 0 30%;
  min-width: 0;
  scroll-snap-align: center;
}
html[data-slider-mobile="true"] .voice-carousel .slider > li { flex-basis: 84%; }
.voice-arrow {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  font: 24px/1 sans-serif;
  cursor: pointer;
  opacity: .75;
}
.voice-prev { left: 8px; }
.voice-next { right: 8px; }
html[data-slider-mobile="true"] .voice-arrow { display: none; }
.voice-dots {
  position: absolute;
  bottom: -25px;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 20px;
}
.voice-dots button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.voice-dots button::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #000;
  opacity: .25;
}
.voice-dots button[aria-current="true"]::before { opacity: .75; }
.voice-arrow:hover { opacity: 1; }
.voice-carousel button:focus-visible, .voice-carousel .slider:focus-visible {
  outline: 2px solid #222;
  outline-offset: 2px;
}

/* Two original panels, repeated once, loop without a carousel library. */
.illustration-band { background: #45c594; }
.illustration-window { width: 100%; margin: auto; padding: 10px 0; overflow: hidden; }
.illustration-track { display: flex; width: 400%; animation: illustration-flow 45s linear infinite; }
.illustration-card { flex: 0 0 25%; min-width: 0; }
.illustration-card img { display: block; width: 100%; }
.illustration-card .dis-mb { display: none; }
@keyframes illustration-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media only screen and (max-width: 800px) {
  .illustration-window { width: 95%; }
  .illustration-card .dis-pc { display: none; }
  .illustration-card .dis-mb { display: block; }
}
