.\33 0th :where(a,button,[tabindex]):focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.\33 0th [data-name="ScrollBar"] { pointer-events:none; }
.\33 0th [data-name="BackNumberCover"] { overflow:hidden; }
.\33 0th [data-js-scroll]::-webkit-scrollbar { display:none; }
.\33 0th .skip-link { position:absolute; transform:translateY(-200%); }
.\33 0th .skip-link:focus { transform:none; background:var(--background-bg-base); color:var(--font-font-primary); z-index:var(--z-content); }

.\33 0th .page-section:not(#hero) [data-name="edge fade"] {
  pointer-events: none;
}

.\33 0th .js-view-image-reveal {
  opacity: 0;
  translate: var(--view-image-enter-x, 100vw) var(--view-image-enter-y, 0px);
  will-change: opacity, translate;
}

.\33 0th .js-view-image-reveal.is-view-image-ready {
  transition:
    opacity 1105ms cubic-bezier(.22, .61, .36, 1) var(--view-image-delay, 0ms),
    translate 1365ms cubic-bezier(.16, 1, .3, 1) var(--view-image-delay, 0ms);
}

.\33 0th .js-view-image-reveal.is-view-image-visible {
  opacity: 1;
  translate: 0 0;
}

@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .\33 0th [data-js-track] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 270ms ease;
  }

  .\33 0th [data-js-track].is-scrollbar-visible {
    opacity: 1;
  }

}

@media (hover: hover) and (pointer: fine) {
  .\33 0th [data-js-scroll] {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
  }

  .\33 0th [data-js-scroll].is-content-dragging {
    cursor: grabbing;
  }

  .\33 0th [data-js-scroll] img {
    -webkit-user-drag: none;
  }
}

.\33 0th .js-side-cover-hover,
.\33 0th .js-cover-lift-hover {
  pointer-events: none;
}

.\33 0th .js-side-cover-hover [data-name="cover"],
.\33 0th .js-cover-lift-hover [data-name="cover"] {
  pointer-events: auto;
}

@media (hover: hover) and (pointer: fine) {
  .\33 0th .js-side-cover-hover {
    --side-hover-x: 0px;
    --side-hover-y: 0px;
    translate:
      calc(var(--side-hover-x) + var(--cover-avoid-x, 0px))
      calc(var(--side-hover-y) + var(--cover-avoid-y, 0px));
    transition: translate 975ms cubic-bezier(.16, 1, .3, 1);
  }

  .\33 0th .js-side-cover-hover:hover {
    --side-hover-x: var(--side-inward-x, 0px);
    --side-hover-y: var(--side-inward-y, 0px);
  }

  .\33 0th .js-cover-lift-hover {
    translate: var(--cover-avoid-x, 0px) var(--cover-avoid-y, 0px);
    transition: translate 975ms cubic-bezier(.16, 1, .3, 1);
  }

  .\33 0th .js-cover-lift-hover:hover {
    translate:
      calc(var(--side-inward-x, 0px) + var(--cover-avoid-x, 0px))
      calc(var(--side-inward-y, -28px) + var(--cover-avoid-y, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .\33 0th .js-view-image-reveal {
    opacity: 1;
    translate: none;
    transition-duration: 1ms;
  }

  .\33 0th .js-side-cover-hover,
  .\33 0th .js-cover-lift-hover {
    translate: none;
    transition-duration: 1ms;
  }
}

/* Interactive media, links and viewport motion */
.\33 0th .js-media-hover-card,
.\33 0th #contents [data-contents-popup],
.\33 0th #news [data-name="Article"],
.\33 0th #news [data-name="Link"],
.\33 0th #awards [data-name="CTA / 特設サイトを見る"] {
  cursor: pointer;
}

.\33 0th .js-media-hover-frame {
  overflow: hidden;
}

.\33 0th .js-media-hover-image {
  transform: scale(1) rotate(0deg);
  transform-origin: center;
  transition: transform 750ms cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .\33 0th .js-media-hover-card:hover .js-media-hover-image {
    transform: scale(1.14) rotate(var(--media-hover-angle, 0deg));
  }

  .\33 0th #news [data-name="Link"] > div:last-child,
  .\33 0th #awards [data-name="CTA / 特設サイトを見る"] > div:last-child {
    transition: translate 750ms cubic-bezier(.16, 1, .3, 1);
  }

  .\33 0th #news [data-name="Link"]:hover > div:last-child,
  .\33 0th #awards [data-name="CTA / 特設サイトを見る"]:hover > div:last-child {
    translate: 3px 0;
  }
}

.\33 0th .js-basic-fade-reveal {
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(.16, 1, .3, 1) var(--basic-fade-delay, 0ms);
  will-change: opacity;
}

.\33 0th .js-basic-fade-reveal.is-basic-fade-visible {
  opacity: 1;
}

.\33 0th .js-shadow-parallax {
  transform: translate3d(0, var(--shadow-parallax-y, 0px), 0);
  will-change: transform;
}

.\33 0th .js-shadow-parallax-composed {
  translate: 0 var(--shadow-parallax-y, 0px);
  will-change: translate, transform;
}

@media (prefers-reduced-motion: reduce) {
  .\33 0th .js-media-hover-image,
  .\33 0th .js-basic-fade-reveal,
  .\33 0th .js-shadow-parallax,
  .\33 0th .js-shadow-parallax-composed {
    transition-duration: 1ms;
  }

  .\33 0th .js-basic-fade-reveal {
    opacity: 1;
  }

  .\33 0th .js-shadow-parallax {
    transform: none;
  }

  .\33 0th .js-shadow-parallax-composed {
    translate: none;
  }
}

@media (min-width: 1441px) {
  .\33 0th .page-section:not(#hero) .js-wide-side-stage {
    overflow: visible;
  }

  .\33 0th .page-section:not(#hero) [data-name="scattered covers"] {
    left: calc((1440px - 100vw) / 2);
    width: 100vw;
  }

  .\33 0th .page-section:not(#hero) [data-name="scattered covers"] > .js-side-cover-hover {
    margin-left: calc((100vw - 1440px) / 2);
  }

  .\33 0th .page-section:not(#hero) [data-name="scattered covers"] > [data-name="edge fade"] {
    width: 100vw;
  }
}

/* Contentsはスライダー付きの項目全体を共通の操作先にする。 */
.\33 0th #contents [data-name^="Item 0"]:not([data-contents-popup]) {
  cursor: default;
}
.\33 0th #contents [data-contents-popup][data-js-scroll] {
  cursor: pointer;
}
.\33 0th #contents [data-contents-popup].is-content-dragging,
.\33 0th #contents [data-contents-popup].is-content-dragging * {
  cursor: grabbing;
}