main {
  position: relative;
}

.modal {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0;
  overflow: auto;
  overscroll-behavior: contain;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal::-webkit-scrollbar {
  display: none;
}

.modal[data-visible=false] {
  display: none !important;
}

.modal .modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(from var(--color-navy) r g b/80%);
  cursor: default;
}

.modal .modal-content {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
}

.modal .modal-content .ytplayer {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
}

.modal .modal-content .ytplayer iframe {
  width: 100%;
  height: 100%;
}

.modal .modal-close {
  position: fixed;
  top: 2.4vw;
  right: 1.8666666667vw;
  width: 11.7333333333vw;
  height: 11.7333333333vw;
}

.modal .modal-close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/close.webp") center/contain no-repeat;
}

html:has(body > .modal[data-visible=true]) {
  overflow: hidden;
}

.scrollbar_track {
  position: absolute;
  box-sizing: border-box;
  display: none;
  top: 0;
  right: 0;
  padding: 3px;
  height: 100%;
  opacity: 0;
  transition: opacity 300ms ease;
}

.scrollbar_track[data-active=true] {
  display: block;
}

.scrollbar_track[data-visible=true] {
  opacity: 1;
}

.scrollbar_track[data-visible=false] {
  opacity: 0 !important;
}

body > .scrollbar_track {
  position: fixed;
  z-index: 9999;
}

.scrollbar_thumb {
  position: relative;
  width: 5px;
  opacity: 1;
  border-radius: 10px;
  background: var(--color-yellow);
  cursor: pointer;
  transition: opacity 200ms;
}

.scrollbar_thumb[data-dragging=true] {
  opacity: 0.9 !important;
}

#toppage {
  --scroll: 0;
  --visual-height: 100lvh;
  --content-width: 100vw;
}

.visual {
  position: fixed;
  top: 0;
  width: 100vw;
  height: var(--visual-height);
}

.visual .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000 url("../img/visual@sp.webp") 50% 50%/cover no-repeat;
  opacity: 0;
}

.visual .wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 100svh;
}

.visual .logo-content,
.visual .logo-animation {
  width: 84.5333333333vw;
}

.visual .logo {
  position: relative;
  opacity: 0;
}

.visual .logo img {
  width: 117.4834437086%;
  max-width: initial;
  height: auto;
  margin-top: -8.0132450331%;
  margin-left: -8.7417218543%;
}

.visual .logo-content {
  position: absolute;
  top: 13.7333333333vw;
  opacity: calc(1 - var(--scroll));
  --color-shadow: #0e0f12;
}

.visual .logo-content .text {
  width: 100%;
  color: var(--color-white);
  font-size: 5.7333333333vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: 4.5333333333vw;
  opacity: 0;
}

.visual .logo-content .text span {
  position: relative;
}

.visual .logo-content .text span[class^=color] {
  position: absolute;
  inset: 0;
  transition: transform 200ms;
  --radius: 0.1666666667vw;
}

.visual .logo-content .text .color-cyan {
  color: #0ff;
  transform: translate3d(calc(var(--radius) * 0.5 + var(--radius) * cos(var(--rad))), calc(var(--radius) * sin(var(--rad))), 0);
}

.visual .logo-content .text .color-blue {
  color: #00f;
  transform: translate3d(calc(var(--radius) * -0.5 + var(--radius) * cos(var(--rad))), calc(var(--radius) * sin(var(--rad))), 0);
}

.visual .logo-content .text .color-pink {
  color: #f0f;
  transform: translate3d(calc(var(--radius) * cos(var(--rad))), calc(var(--radius) * 0.5 + var(--radius) * sin(var(--rad))), 0);
}

.visual .logo-animation {
  position: absolute;
}

.visual .logo-animation video {
  position: absolute;
  width: 127.1523178808%;
  aspect-ratio: 16/9;
  margin-top: -12.119205298%;
  margin-left: -13.5761589404%;
  opacity: 0;
  --edge: 1.3333333333vw;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
  mask-composite: intersect;
}

.visual .logo-animation video[data-visible=true] {
  --edge: 3.4722222222vw;
  opacity: 1;
  transition: opacity 300ms ease;
}

.visual[data-phase="1"] .logo-animation video {
  opacity: 0;
  transition: opacity 300ms linear 150ms;
}

.visual[data-phase="1"] .logo-animation .logo {
  opacity: 1;
  transition: opacity 300ms linear;
}

.visual[data-phase="2"] .background {
  opacity: 1;
  transition: opacity 1000ms ease;
}

.visual[data-phase="2"] .logo-animation {
  display: none;
}

.visual[data-phase="2"] .logo-content .logo {
  opacity: 1;
}

.visual[data-phase="2"] .logo-content .text {
  opacity: 1;
  transition: opacity 1000ms ease;
}

body > .scrollbar_track {
  transform: translate3d(100%, 0, 0);
}

html.scrollable body > .scrollbar_track {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease, transform 300ms ease-out;
}

.content {
  position: relative;
  display: flex;
  justify-content: center;
}

.content .panel {
  position: relative;
  width: var(--content-width);
}

.content .background {
  --pattern-width: 112px;
}

.content .background {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: rgb(from var(--color-navy) r g b/80%);
  will-change: transform, opacity;
  transform: translate3d(calc((1 - var(--scroll)) * 100%), 0, 0);
  opacity: var(--scroll);
  width: var(--content-width);
}

.content .background::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: var(--pattern-width);
  height: 100%;
  background: url("../img/back@sp.webp") top left/100% auto repeat-y;
}

.content .inner {
  box-sizing: content-box;
  position: relative;
  width: 100%;
  padding-top: 100vh;
  margin-top: 80vh;
}

.content .inner > * {
  position: relative;
  padding: 0 2.6666666667vw;
}

.content .inner section h2 {
  position: relative;
  margin-bottom: 8vw;
}

.content .inner section h2::before {
  position: absolute;
  content: "";
  background: center/100% auto no-repeat;
}

.content .inner section h2 .text {
  position: relative;
  color: var(--color-yellow);
  font-size: 6.4vw;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

#movie {
  margin-bottom: 43.8666666667vw;
}

#movie h2::before {
  top: -28vw;
  left: -4.6666666667vw;
  width: 100.6666666667vw;
  height: 49.6vw;
  background-image: url("../img/movie.svg");
}

#movie .movie {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 712/441;
}

#movie .movie::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/movie_bg.webp") center/contain no-repeat;
}

#movie .movie .thumbnail {
  position: relative;
  width: 84.5333333333vw;
  aspect-ratio: 16/9;
  background: #000;
}

#movie .movie .thumbnail img {
  width: 100%;
}

#movie .movie .thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17.2vw;
  aspect-ratio: 263/264;
  background: url("../img/play.webp") center/contain no-repeat;
}

#staff {
  margin-bottom: 52.5333333333vw;
}

#staff h2::before {
  top: -31.2vw;
  left: -8vw;
  width: 105.2vw;
  height: 52.4vw;
  background-image: url("../img/staff.svg");
}

#staff .table {
  position: relative;
  color: var(--color-white);
  display: grid;
  grid-template-columns: auto auto;
  font-size: 3.7333333333vw;
  font-weight: 600;
  letter-spacing: 0.05em;
}

#staff .table dl {
  position: relative;
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
  padding: 0 12vw;
}

#staff .table dl dt {
  word-break: keep-all;
}

#staff .table dl dd::before {
  content: ":";
  margin-right: 1em;
}

#staff .table hr {
  grid-column: 1/-1;
  aspect-ratio: 733/20;
  background: url("../img/line.svg") center/contain no-repeat;
  border: 0;
  margin-left: -1.6vw;
  margin-right: -1.6vw;
  margin-block: 4.2666666667vw;
}

#staff .table hr:last-child {
  margin-bottom: 0 !important;
}

#sns {
  margin-bottom: 52.2666666667vw;
}

#sns h2::before {
  top: -43.4666666667vw;
  left: -2vw;
  width: 99.3333333333vw;
  height: 56.9333333333vw;
  background-image: url("../img/sns.svg");
}

#sns .link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.0666666667vw;
  width: 100%;
  aspect-ratio: 712/417;
  padding-top: 5.7333333333vw;
}

#sns .link::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/sns_bg@sp.webp") center/contain no-repeat;
  opacity: 0.9;
}

#sns .link .flex {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.9333333333vw;
}

#sns .link .logo {
  width: 34.6666666667vw;
}

#sns .link .text {
  color: var(--color-white);
  font-size: 3.7333333333vw;
  font-weight: 800;
  line-height: 1.7142857143;
  letter-spacing: 0.05em;
  display: flex;
  gap: 3.8666666667vw;
}

#sns .link .text p {
  margin: calc((1em - 1lh) * 0.5) 0;
}

#sns .link .text::after {
  content: "";
  display: block;
  width: 7.4666666667vw;
  aspect-ratio: 1;
  background: url("../img/link.svg") center/contain no-repeat;
}

#sns .link::after {
  position: relative;
  content: "";
  display: block;
  width: 85.8146067416%;
  aspect-ratio: 611/53;
  background: url("../img/arrow_yellow.svg") center/contain no-repeat;
}

footer .shares {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 5.3333333333vw;
}

footer .shares::before {
  position: absolute;
  content: "";
  top: -23.4666666667vw;
  left: -6.8vw;
  width: 108vw;
  height: 40.5333333333vw;
  background: url("../img/share.svg") center/100% auto no-repeat;
}

footer .shares a {
  position: relative;
  display: block;
  padding: 5.8666666667vw;
}

footer .shares a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/icon_bg.svg") center/contain no-repeat;
}

footer .shares a img {
  aspect-ratio: 1;
  width: 12.2666666667vw;
  will-change: transform;
  transition: transform 200ms;
}

footer .links {
  display: flex;
  flex-direction: column;
  gap: 3.2vw;
}

footer .links a {
  display: flex;
  flex-direction: column;
  gap: 1.3333333333vw;
}

footer .links a .text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-white);
  font-size: 3.4666666667vw;
  font-weight: 400;
  line-height: 1.6153846154;
  letter-spacing: 0.1em;
  padding-left: 16.6666666667vw;
  padding-right: 4.8vw;
  margin: calc((1em - 1lh) * 0.5);
}

footer .links a .text::after {
  content: "";
  width: 7.4666666667vw;
  aspect-ratio: 1;
  background: url("../img/link.svg") center/contain no-repeat;
}

footer .links a::after {
  content: "";
  display: block;
  aspect-ratio: 711/53;
  background: url("../img/arrow_black.svg") center/contain no-repeat;
}

footer .copyright {
  color: var(--color-white);
  font-size: 3.2vw;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 6.6666666667vw;
  margin-bottom: 9.6vw;
}

footer .copyright p {
  margin: calc((1em - 1lh) * 0.5);
}

#movie_modal .player {
  box-sizing: content-box;
  position: relative;
  aspect-ratio: 16/9;
  width: 88vw;
}

#movie_modal .player::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: -6.8181818182%;
  background: url("../img/modal_player_bg@sp.webp") center/contain no-repeat;
}

#movie_modal .player .title {
  display: none;
}

#movie_modal .player .ytplayer {
  opacity: 0;
}

#movie_modal .player .thumbnail {
  position: absolute;
  inset: 0;
  transition: opacity 500ms;
}

#movie_modal .player .thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 17.8666666667vw;
  aspect-ratio: 263/264;
  background: url("../img/play.webp") center/contain no-repeat;
}

#movie_modal .player #first + #normal {
  display: none;
}

#movie_modal .player[data-playing=true] .ytplayer {
  opacity: 1;
}

#movie_modal .player[data-playing=true] .thumbnail {
  opacity: 0;
  pointer-events: none;
}

.flicker::before {
  will-change: filter;
  filter: drop-shadow(0 0 0px rgb(from var(--color-purple) r g b/0%));
  transition: filter 10ms;
}

.flicker.light::before {
  filter: drop-shadow(0 0 10px rgb(from var(--color-purple) r g b/50%));
}

@media screen and (min-width: 666px) {
  .modal {
    padding: 0;
  }

  .modal .modal-close {
    top: 17px;
    right: 24px;
    width: 82px;
    height: 83px;
  }

  #toppage {
    --content-width: 458px;
  }

  .visual .background {
    background-image: url("../img/visual@2x.webp");
    background-position: 50% 35%;
  }

  .visual .logo-content,
  .visual .logo-animation {
    width: 33.3333333333vw;
  }

  .visual .logo-content {
    top: auto;
    left: 4.1666666667vw;
    margin-top: -3.4722222222vw;
    opacity: 1;
    filter: drop-shadow(0 0 2.0833333333vw rgb(from var(--color-shadow) r g b/0.5));
  }

  .visual .logo-content .text {
    top: -3.8888888889vw;
    font-size: 2.9861111111vw;
    margin-bottom: 1.1111111111vw;
  }

  .visual .logo-content .text span[class^=color] {
    --radius: 0.0868055556vw;
  }

  .content {
    justify-content: flex-end;
  }

  .content .panel {
    min-width: var(--content-width);
    width: calc(var(--content-width) / 1440px * 100vw);
  }

  .content .background {
    --pattern-width: 180px;
  }

  .content .background {
    min-width: var(--content-width);
    width: calc(var(--content-width) / 1440px * 100vw);
  }

  .content .background::before {
    background-image: url("../img/back@1x.webp");
    min-width: var(--pattern-width);
    width: calc(var(--pattern-width) / 1440px * 100vw);
  }

  .content .inner > * {
    padding: 0 55px;
  }

  .content .inner section h2 {
    margin-bottom: 38px;
  }

  .content .inner section h2 .text {
    font-size: 28px;
  }

  #movie {
    margin-bottom: 144px;
  }

  #movie h2::before {
    top: -111px;
    left: -29px;
    width: 378px;
    height: 186px;
  }

  #movie .movie {
    width: calc(100% + 30px);
    margin: 0 -15px;
  }

  #movie .movie .thumbnail {
    width: 350px;
  }

  #movie .movie .thumbnail::after {
    width: 74px;
  }

  #staff {
    margin-bottom: 192px;
  }

  #staff h2::before {
    top: -103px;
    left: -41px;
    width: 395px;
    height: 196px;
  }

  #staff .table {
    font-size: 16px;
  }

  #staff .table dl {
    padding: 0;
  }

  #staff .table hr {
    margin-left: -11px;
    margin-right: -10px;
    margin-block: 16px;
  }

  #sns {
    margin-bottom: 194px;
  }

  #sns h2::before {
    top: -149px;
    left: -15px;
    width: 373px;
    height: 214px;
  }

  #sns .link {
    width: 431px;
    height: 155px;
    gap: 6px;
    padding-top: 42px;
    margin-left: -46px;
  }

  #sns .link::before {
    background-image: url("../img/sns_bg@1x.webp");
  }

  #sns .link .flex {
    flex-direction: row;
    gap: 9px;
  }

  #sns .link .logo {
    width: 101px;
  }

  #sns .link .text {
    font-size: 16px;
    line-height: 1.5;
    gap: 9px;
  }

  #sns .link .text::after {
    width: 29px;
  }

  #sns .link::after {
    grid-column: 1/-1;
    width: 386px;
  }

  footer .shares {
    margin-bottom: 20px;
  }

  footer .shares {
    margin-bottom: 1.3888888889vw;
  }

  footer .shares::before {
    top: -89px;
    left: -33px;
    width: 406px;
    height: 153px;
  }

  footer .shares a {
    padding: 23px;
  }

  footer .shares a img {
    width: 46px;
  }

  footer .links {
    gap: 15px;
  }

  footer .links a {
    gap: 4px;
  }

  footer .links a .text {
    font-size: 14px;
    line-height: 1.5;
    padding-left: 44px;
    padding-right: 17px;
  }

  footer .links a .text::after {
    width: 29px;
  }

  footer .links a::after {
    margin-left: -22px;
    margin-right: -14px;
  }

  footer .copyright {
    font-size: 12px;
    margin-top: 25px;
    margin-bottom: 100px;
  }

  #movie_modal .player {
    width: 72.2222222222vw;
    max-width: 109.8305084746vh;
  }

  #movie_modal .player::before {
    margin: -6.7307692308%;
    background-image: url("../img/modal_player_bg@1x.webp");
  }

  #movie_modal .player .title {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: -14.7115384615%;
  }

  #movie_modal .player .title img {
    display: block;
    width: 37.2115384615%;
  }

  #movie_modal .player .thumbnail::after {
    width: 12.7884615385%;
  }
}

@media screen and (min-width: 768px) {
  .scrollbar_thumb {
    width: 6px;
  }
}

@media screen and (min-width: 1440px) {
  .modal .modal-close {
    top: 1.1805555556vw;
    right: 1.6666666667vw;
    width: 5.6944444444vw;
    height: 5.7638888889vw;
  }

  .visual .logo-content,
  .visual .logo-animation {
    width: 33.3333333333vw;
  }

  .visual .logo-content {
    left: 4.1666666667vw;
    margin-top: -6.9444444444vw;
    filter: drop-shadow(0 0 2.0833333333vw rgb(from var(--color-shadow) r g b/0.5));
  }

  .visual .logo-content .text {
    font-size: 2.9861111111vw;
    margin-bottom: 1.1111111111vw;
  }

  .visual .logo-content .text span[class^=color] {
    --radius: 0.0868055556vw;
  }

  .content .inner > * {
    padding: 0 3.8194444444vw;
  }

  .content .inner section h2 {
    margin-bottom: 2.6388888889vw;
  }

  .content .inner section h2 .text {
    font-size: 1.9444444444vw;
  }

  #movie {
    margin-bottom: 10vw;
  }

  #movie h2::before {
    top: -7.7083333333vw;
    left: -2.0138888889vw;
    width: 26.25vw;
    height: 12.9166666667vw;
  }

  #movie .movie {
    margin: 0 -1.0416666667vw;
    width: calc(100% + 2.0833333333vw);
  }

  #movie .movie .thumbnail {
    width: 24.3055555556vw;
  }

  #movie .movie .thumbnail::after {
    width: 5.1388888889vw;
  }

  #staff {
    margin-bottom: 13.3333333333vw;
  }

  #staff h2::before {
    top: -7.1527777778vw;
    left: -2.8472222222vw;
    width: 27.4305555556vw;
    height: 13.6111111111vw;
  }

  #staff .table {
    font-size: 1.1111111111vw;
  }

  #staff .table hr {
    margin-left: -0.7638888889vw;
    margin-right: -0.6944444444vw;
    margin-block: 1.1111111111vw;
  }

  #sns {
    margin-bottom: 13.4722222222vw;
  }

  #sns h2::before {
    top: -10.3472222222vw;
    left: -1.0416666667vw;
    width: 25.9027777778vw;
    height: 14.8611111111vw;
  }

  #sns .link {
    width: 29.9305555556vw;
    height: 10.7638888889vw;
    gap: 0.4166666667vw;
    padding-top: 2.9166666667vw;
    margin-left: -3.1944444444vw;
  }

  #sns .link .flex {
    gap: 0.625vw;
  }

  #sns .link .logo {
    width: 7.0138888889vw;
  }

  #sns .link .text {
    font-size: 1.1111111111vw;
    gap: 0.625vw;
  }

  #sns .link .text::after {
    width: 2.0138888889vw;
  }

  #sns .link::after {
    width: 26.8055555556vw;
  }

  footer .shares::before {
    top: -6.1805555556vw;
    left: -2.2916666667vw;
    width: 28.1944444444vw;
    height: 10.625vw;
  }

  footer .shares a {
    padding: 1.5972222222vw;
  }

  footer .shares a img {
    width: 3.1944444444vw;
  }

  footer .links {
    gap: 1.0416666667vw;
  }

  footer .links a {
    gap: 0.2777777778vw;
  }

  footer .links a .text {
    font-size: 0.9722222222vw;
    padding-left: 3.0555555556vw;
    padding-right: 1.1805555556vw;
  }

  footer .links a .text::after {
    width: 2.0138888889vw;
  }

  footer .links a::after {
    margin-left: -1.5277777778vw;
    margin-right: -0.9722222222vw;
  }

  footer .copyright {
    font-size: 0.8333333333vw;
    margin-top: 1.7361111111vw;
    margin-bottom: 6.9444444444vw;
  }
}

@media (hover: hover) {
  .scrollbar_thumb:hover {
    opacity: 0.8;
  }

  footer .shares a:hover img {
    transform: scale(0.95);
  }

  footer .links a:hover::after {
    background-image: url("../img/arrow_yellow.svg");
  }
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .scrollbar_thumb:hover {
    opacity: 0.8;
  }

  footer .shares a:hover img {
    transform: scale(0.95);
  }

  footer .links a:hover::after {
    background-image: url("../img/arrow_yellow.svg");
  }
}

@media (prefers-reduced-motion: reduce) {
  .flicker::before {
    filter: none !important;
  }
}