@charset "UTF-8";
/* トップバナーの寸法予約と矢印・ドットを一括管理する。 */
#top-slider img { display: block; width: 100%; height: auto; }
#top-slider:not(.slick-initialized) { position: relative; margin-bottom: 60px; }
#top-slider:not(.slick-initialized)::before { content: ""; display: block; padding-top: 43.75%; }
#top-slider:not(.slick-initialized) > li:first-child { position: absolute; top: 0; left: 0; width: 100%; }
#top-slider:not(.slick-initialized) > li:not(:first-child) { display: none; }
#top-slider .slick-prev,
#top-slider .slick-next { box-sizing: border-box; width: 44px; min-width: 44px; height: 44px; padding: 0; line-height: 0; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; }
#top-slider .slick-prev:hover,
#top-slider .slick-prev:focus,
#top-slider .slick-next:hover,
#top-slider .slick-next:focus { background: rgba(0,0,0,.78); }
#top-slider .slick-prev::before,
#top-slider .slick-next::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%,-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6 9 12 15 18' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px 24px no-repeat; filter: none; opacity: 1; }
#top-slider .slick-next::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6 15 12 9 18' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
#top-slider .slick-dots li { width: 24px; height: 24px; margin: 0 3px; }
#top-slider .slick-dots li button { width: 24px; height: 24px; padding: 0; min-width: 0; }
#top-slider .slick-dots li button::before { top: 6px; left: 6px; }
#top-slider button:focus-visible { outline: 3px solid #005fcc; outline-offset: 2px; }
#top-slider .slick-prev:focus-visible,
#top-slider .slick-next:focus-visible { outline-color: #fff; box-shadow: 0 0 0 2px #111; }
#top-slider a:focus-visible { outline: 3px solid #005fcc; outline-offset: -4px; }
#top-slider .top-slider-swipe-hint { display: none; }
/* Use the same width as the mobile bottom navigation. */
@media screen and (max-width: 768px) {
  #top-slider .slick-prev,
  #top-slider .slick-next { display: none !important; }
  #top-slider .slick-list { touch-action: pan-y; }
  #top-slider img.is-swipe-following { transform: translateX(var(--top-slider-swipe-offset)); transition: none; will-change: transform; }
  #top-slider img.is-swipe-returning { transform: translateX(0); transition: transform .18s ease-out; }
  #top-slider .top-slider-swipe-hint { display: flex; align-items: center; justify-content: center; box-sizing: border-box; position: absolute; z-index: 5; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%,-50%); border-radius: 50%; background: rgba(17,17,27,.5); color: #fff; pointer-events: none; animation: top-slider-swipe-hint 1.6s ease-out both; }
  #top-slider .top-slider-swipe-hint svg { width: 32px; height: 32px; overflow: visible; }
  #top-slider .top-slider-swipe-hand { animation: top-slider-swipe-hand 1.6s ease-in-out both; }
  #top-slider .top-slider-swipe-hint.is-dismissing { animation: top-slider-swipe-dismiss .25s ease-out both; }
}
@keyframes top-slider-swipe-hint {
  0%, 100% { opacity: 0; }
  15%, 65% { opacity: .8; }
}
@keyframes top-slider-swipe-dismiss {
  from { opacity: var(--hint-opacity, .8); }
  to { opacity: 0; }
}
@keyframes top-slider-swipe-hand {
  0%, 15%, 85%, 100% { transform: translateX(0); }
  40% { transform: translateX(-4px); }
  65% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  #top-slider .top-slider-swipe-hand { animation: none; }
  #top-slider img.is-swipe-following,
  #top-slider img.is-swipe-returning { transform: none; transition: none; }
}
