* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
}

.audition-top {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.art-band {
  position: relative;
  margin: 0;
  padding: 0;
}

.art-band picture,
.art-band img {
  display: block;
  width: 100%;
}

.art-band img {
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.hotspot {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  display: block;
  background: transparent;
}

.hotspot:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: -3px;
  background: rgb(255 255 255 / 15%);
}

/* Percentages use the native 1920px-wide desktop band coordinates. */
.map-yokohama {
  --x: 40.625000%; --y: 32.625319%; --w: 14.635417%; --h: 24.893798%;
}

.map-sendai {
  --x: 70.833333%; --y: 29.226848%; --w: 14.895833%; --h: 22.684792%;
}

.official-yokohama {
  --x: 27.604167%; --y: 62.994569%; --w: 18.229167%; --h: 4.034135%;
}

.official-sendai {
  --x: 54.166667%; --y: 62.994569%; --w: 18.281250%; --h: 4.034135%;
}

.apply-yokohama {
  --x: 24.427083%; --y: 37.532808%; --w: 24.531250%; --h: 53.018373%;
}

.apply-sendai {
  --x: 50.989583%; --y: 37.532808%; --w: 24.583333%; --h: 53.018373%;
}

@media (max-width: 767px) {
  /* Mobile uses its separate 780px-wide composition and band heights. */
  .map-yokohama {
    --x: 5.000000%; --y: 25.709516%; --w: 28.461538%; --h: 19.616027%;
  }

  .map-sendai {
    --x: 37.307692%; --y: 25.709516%; --w: 28.461538%; --h: 19.616027%;
  }

  .official-yokohama {
    --x: 10.384615%; --y: 62.772926%; --w: 32.179487%; --h: 4.039301%;
  }

  .official-sendai {
    --x: 57.307692%; --y: 62.772926%; --w: 32.307692%; --h: 4.039301%;
  }

  .apply-yokohama {
    --x: 4.871795%; --y: 36.861314%; --w: 43.205128%; --h: 52.919708%;
  }

  .apply-sendai {
    --x: 51.794872%; --y: 36.861314%; --w: 43.205128%; --h: 52.919708%;
  }
}

@media (forced-colors: active) {
  .hotspot:focus-visible {
    outline-color: Highlight;
  }
}

/* The original artwork stays at its native pixel dimensions. */
.documentary { container-type: inline-size; border-bottom: 1px solid #eee; }
.documentary-heading-art { position: relative; aspect-ratio: 1920 / 225; overflow: hidden; }
.documentary-heading-art picture { position: absolute; inset: 0; }
.documentary-slider { position: relative; padding-bottom: 2.447916667cqw; }
/* Use the live site's Slick library; Slick manages widths, clones and swipes. */
.documentary_slide { overflow: hidden; }
.documentary-card { display: block; height: auto !important; padding: 0 12px; color: inherit; }
.documentary-card > svg { display: block; width: 100%; height: auto; }
.documentary-card svg { pointer-events: none; }
.documentary-card .documentary-card-sp { display: none; }
.documentary-card:focus-visible { outline: 3px solid #005fcc; outline-offset: -3px; }
.documentary_slide:not(.slick-initialized) { display: flex; overflow-x: auto; }
.documentary_slide:not(.slick-initialized) > .documentary-card { flex: 0 0 33.333333%; }
body { padding-bottom: var(--apply-dock-height, calc(min(100vw, 780px) * .1984375 + env(safe-area-inset-bottom))); }
#apply.apply-dock { position: fixed; inset: auto 0 0; z-index: 30; background: #fff; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid #e5e5e5; box-shadow: 0 -2px 10px #0000000d; }
.apply-art { position: relative; width: 100%; max-width: 780px; margin: 0 auto; }
@media (max-width: 767px) {
  .documentary-heading-art { aspect-ratio: 780 / 170; }
  .documentary-slider { padding-bottom: 0; }
  .documentary-card { padding: 0 8px; }
  .documentary-card .documentary-card-pc { display: none; }
  .documentary-card .documentary-card-sp { display: block; }
  body { padding-bottom: var(--apply-dock-height, calc(100vw * .3512820513 + env(safe-area-inset-bottom))); }
}