/* default
-------------------------------------------------------------------------- */
/* in
-------------------------------------------------------------------------- */
/* out
-------------------------------------------------------------------------- */
/* in out
-------------------------------------------------------------------------- */
/* min-width
-------------------------------------------------------------------------- */
/* max-width
-------------------------------------------------------------------------- */
@keyframes swing1 {
  0% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); }
  35% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(5deg) translateY(-10px); }
  50% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); }
  85% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(-5deg) translateY(-10px); }
  100% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); } }

@keyframes swing2 {
  0% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); }
  35% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(-5deg) translateY(-10px); }
  50% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); }
  85% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: rotate(5deg) translateY(-10px); }
  100% {
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: rotate(0deg) translateY(0); } }

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 0, 0); }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -30px, 0); }
  70% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -15px, 0); }
  90% {
    animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, -4px, 0); } }

@keyframes button-on {
  0% {
    opacity: 1;
    transform: translateX(0); }
  50% {
    opacity: 0;
    transform: translateX(100%); }
  51% {
    opacity: 0;
    transform: translateX(-100%); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
input,
textarea,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
main,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box; }

main,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

img,
svg,
iframe {
  vertical-align: top; }

button {
  font-family: inherit; }

html {
  font-size: 10px; }
  @media screen and (max-width: 1600px) {
    html {
      font-size: 0.625vw; } }
  @media screen and (max-width: 768px) {
    html {
      font-size: 2.60417vw; } }
  @supports (-webkit-touch-callout: none) {
    html {
      height: -webkit-fill-available; } }

body {
  text-align: justify;
  text-justify: inter-ideograph;
  word-break: break-all;
  position: relative;
  height: 100dvh;
  min-height: 85rem;
  background: #020205;
  color: #fff;
  font-family: Yakuhanjp, "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  letter-spacing: 0;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased; }
  @media screen and (max-width: 768px) {
    body {
      height: auto;
      min-height: auto;
      font-size: 2.8rem; } }
  @supports (-webkit-touch-callout: none) {
    body {
      height: -webkit-fill-available; } }

a {
  outline: none;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

img {
  width: 100%;
  height: auto; }

.layout-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  width: 100%;
  height: 5rem;
  position: relative;
  z-index: 999;
  padding: 0 3rem;
  -ms-flex-pack: justify;
      justify-content: space-between;
  background: var(--fn_gray, #292929);
  box-shadow: 0 0 4rem 0 rgba(0, 0, 0, 0.25);
  font-size: 1.2rem; }
  @media screen and (max-width: 768px) {
    .layout-footer {
      -ms-flex-direction: column;
          flex-direction: column;
      height: auto;
      padding: 3rem 0 1.6rem; } }
  @media screen and (max-height: 850px) {
    .layout-footer.is-locked {
      overflow: auto;
      scrollbar-gutter: stable; } }
  .layout-footer .nav-sns {
    position: fixed;
    top: 2rem;
    right: 4rem;
    z-index: 999; }
    @media screen and (max-width: 768px) {
      .layout-footer .nav-sns {
        position: relative;
        top: 0;
        right: 0;
        transform: scale(0.9); } }
    .layout-footer .nav-sns .list-sns {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      gap: 1.8rem; }
      @media screen and (max-width: 768px) {
        .layout-footer .nav-sns .list-sns {
          -ms-flex-pack: center;
              justify-content: center; } }
      .layout-footer .nav-sns .list-sns__item-button {
        display: block; }
        .layout-footer .nav-sns .list-sns__item-button--facebook {
          width: 2.4rem;
          height: 2.4rem;
          background: url("../img/common/icn_facebook.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--x {
          width: 2.1rem;
          height: 2.2rem;
          background: url("../img/common/icn_x.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--tiktok {
          width: 1.8rem;
          height: 2.2rem;
          background: url("../img/common/icn_tiktok.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--instagram {
          width: 2.2rem;
          height: 2.2rem;
          background: url("../img/common/icn_instagram.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--line {
          width: 2.3rem;
          height: 2.2rem;
          background: url("../img/common/icn_line.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--youtube {
          width: 2.5rem;
          height: 1.7rem;
          background: url("../img/common/icn_youtube.svg") no-repeat center center/contain; }
        .layout-footer .nav-sns .list-sns__item-button--share {
          width: 2.2rem;
          height: 2.4rem;
          background: url("../img/common/icn_share.svg") no-repeat center center/contain; }
    .layout-footer .nav-sns .list-share {
      position: absolute;
      top: 4rem;
      right: 0;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      gap: 1rem;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
      will-change: opacity, visibility; }
      @media screen and (max-width: 768px) {
        .layout-footer .nav-sns .list-share {
          display: -ms-flexbox;
          display: flex;
          -ms-flex-pack: center;
              justify-content: center;
          position: static;
          opacity: 1;
          visibility: visible;
          margin-top: 3rem; } }
      .layout-footer .nav-sns .list-share.is-show {
        opacity: 1;
        visibility: visible; }
      .layout-footer .nav-sns .list-share__item .fb_iframe_widget > span {
        vertical-align: top !important; }
      .layout-footer .nav-sns .list-share__item--movie {
        width: 108px; }
  .layout-footer .footer-policy {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    gap: 2rem; }
    @media screen and (max-width: 768px) {
      .layout-footer .footer-policy {
        -ms-flex-direction: column;
            flex-direction: column;
        margin-top: 5rem; } }
    .layout-footer .footer-policy .list-policy,
    .layout-footer .footer-policy .list-logo {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      gap: 2rem; }
    @media screen and (max-width: 768px) {
      .layout-footer .footer-policy .list-policy {
        -ms-flex-pack: justify;
            justify-content: space-between;
        gap: 4.5rem; } }
    .layout-footer .footer-policy .list-logo__item a {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
          align-items: center;
      width: 100%;
      height: 100%; }
    .layout-footer .footer-policy .list-logo__item--universal {
      width: 3.5rem; }
    .layout-footer .footer-policy .list-logo__item--bh {
      width: 2.9rem; }
    .layout-footer .footer-policy .list-logo__item--towa {
      width: 2.4rem; }
    .layout-footer .footer-policy .list-logo__item--eirin {
      width: 2.6rem; }
  .layout-footer .copylight {
    -ms-flex-order: -1;
        order: -1; }
    @media screen and (max-width: 768px) {
      .layout-footer .copylight {
        -ms-flex-order: 0;
            order: 0;
        margin-top: 2.2rem; } }

body.is-hide .hero__logo-neon {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: .8s;
  will-change: opacity; }

body.is-hide .hero__logo-last--01 {
  animation-name: last01; }

body.is-hide .hero__logo-last--02 {
  animation-name: last00; }

body.is-hide .hero__logo-last--03 {
  animation-name: last03; }

body.is-hide .hero__logo-last--04 {
  animation-name: last04; }

body.is-hide .hero__logo-last--05 {
  animation-name: last00; }

body.is-hide .hero__logo-last--06 {
  animation-name: last06; }

body.is-hide .hero__logo-last--07 {
  animation-name: last07; }

body.is-hide .hero__logo-first--01 {
  animation-name: first01; }

body.is-hide .hero__logo-first--02 {
  animation-name: first02; }

body.is-hide .hero__logo-first--03 {
  animation-name: first03; }

body.is-hide .hero__logo-first--04 {
  animation-name: first04; }

body.is-hide .hero__logo-line--01 {
  animation-name: line01; }

body.is-hide .hero__logo-line--02 {
  animation-name: line02; }

body.is-hide .hero__logo-line--03 {
  animation-name: line03; }

@keyframes last00 {
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  64% {
    opacity: .4; }
  80% {
    opacity: .4; }
  82% {
    opacity: 1; }
  84% {
    opacity: .4; }
  92% {
    opacity: .8; }
  94% {
    opacity: 1; }
  96% {
    opacity: .8; }
  100% {
    opacity: 1; } }

@keyframes last01 {
  20% {
    opacity: .4; }
  22% {
    opacity: 1; }
  24% {
    opacity: .4; }
  30% {
    opacity: .4; }
  32% {
    opacity: 1; }
  34% {
    opacity: .4; }
  92% {
    opacity: .8; }
  100% {
    opacity: 1; } }

@keyframes last03 {
  10% {
    opacity: .4; }
  12% {
    opacity: 1; }
  14% {
    opacity: .4; }
  16% {
    opacity: 1; }
  20% {
    opacity: .4; }
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  64% {
    opacity: .4; }
  92% {
    opacity: .8; }
  100% {
    opacity: 1; } }

@keyframes last04 {
  40% {
    opacity: .4; }
  42% {
    opacity: 1; }
  44% {
    opacity: .4; }
  50% {
    opacity: .4; }
  52% {
    opacity: 1; }
  54% {
    opacity: .4; }
  92% {
    opacity: .8; }
  100% {
    opacity: 1; } }

@keyframes last06 {
  70% {
    opacity: .4; }
  72% {
    opacity: 1; }
  74% {
    opacity: .4; }
  92% {
    opacity: .8; }
  100% {
    opacity: 1; } }

@keyframes last07 {
  40% {
    opacity: .4; }
  42% {
    opacity: .2; }
  44% {
    opacity: .4; }
  60% {
    opacity: .4; }
  62% {
    opacity: .4; }
  64% {
    opacity: .4; }
  70% {
    opacity: .4; }
  72% {
    opacity: .8; }
  74% {
    opacity: .6; }
  100% {
    opacity: 1; } }

@keyframes first01 {
  10% {
    opacity: .4; }
  12% {
    opacity: 1; }
  14% {
    opacity: .4; }
  16% {
    opacity: 1; }
  20% {
    opacity: .4; }
  22% {
    opacity: 1; }
  60% {
    opacity: 1; }
  62% {
    opacity: .4; }
  64% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes first02 {
  20% {
    opacity: .4; }
  22% {
    opacity: 1; }
  24% {
    opacity: .4; }
  30% {
    opacity: .4; }
  32% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes first03 {
  40% {
    opacity: .4; }
  42% {
    opacity: 1; }
  44% {
    opacity: .4; }
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes first04 {
  20% {
    opacity: .4; }
  22% {
    opacity: 1; }
  24% {
    opacity: .4; }
  50% {
    opacity: .4; }
  52% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes line01 {
  8% {
    opacity: .4; }
  10% {
    opacity: 1; }
  12% {
    opacity: .4; }
  14% {
    opacity: 1; }
  18% {
    opacity: .4; }
  30% {
    opacity: .4; }
  32% {
    opacity: 1; }
  34% {
    opacity: .4; }
  36% {
    opacity: 1; }
  38% {
    opacity: .4; }
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  64% {
    opacity: .4; }
  70% {
    opacity: .4; }
  72% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes line02 {
  6% {
    opacity: .4; }
  8% {
    opacity: 1; }
  10% {
    opacity: .4; }
  12% {
    opacity: 1; }
  14% {
    opacity: .4; }
  16% {
    opacity: 1; }
  18% {
    opacity: .4; }
  20% {
    opacity: .4; }
  22% {
    opacity: 1; }
  24% {
    opacity: .4; }
  26% {
    opacity: 1; }
  28% {
    opacity: .4; }
  30% {
    opacity: 1; }
  32% {
    opacity: .4; }
  56% {
    opacity: .4; }
  58% {
    opacity: 1; }
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  64% {
    opacity: .4; }
  70% {
    opacity: .4; }
  72% {
    opacity: 1; }
  100% {
    opacity: 1; } }

@keyframes line03 {
  60% {
    opacity: .4; }
  62% {
    opacity: 1; }
  64% {
    opacity: .4; }
  100% {
    opacity: 1; } }

.hover-opacity a,
.hover-opacity span {
  transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: opacity; }
  .hover-opacity a.is-on,
  .hover-opacity span.is-on {
    opacity: .5; }

.hover-close.is-on {
  animation: neon 0.01s linear infinite;
  will-change: opacity; }

.hover-button.is-on {
  animation: neon .001s linear infinite;
  will-change: opacity; }
  .hover-button.is-on a,
  .hover-button.is-on span {
    animation: neon-flicker 2s linear infinite;
    will-change: opacity; }

@keyframes neon {
  0% {
    opacity: 1; }
  100% {
    opacity: .6; } }

@keyframes neon-flicker {
  0% {
    opacity: 1; }
  4% {
    opacity: .9; }
  6% {
    opacity: .85; }
  8% {
    opacity: .95; }
  10% {
    opacity: .90; }
  11% {
    opacity: .922; }
  12% {
    opacity: .9; }
  14% {
    opacity: .95; }
  16% {
    opacity: .98; }
  17% {
    opacity: .9; }
  19% {
    opacity: .93; }
  20% {
    opacity: .99; }
  24% {
    opacity: 1; }
  26% {
    opacity: .94; }
  28% {
    opacity: .98; }
  37% {
    opacity: .93; }
  38% {
    opacity: .5; }
  39% {
    opacity: .96; }
  42% {
    opacity: 1; }
  44% {
    opacity: .97; }
  46% {
    opacity: .94; }
  56% {
    opacity: .9; }
  58% {
    opacity: .9; }
  60% {
    opacity: .99; }
  68% {
    opacity: 1; }
  70% {
    opacity: .9; }
  72% {
    opacity: .95; }
  93% {
    opacity: .93; }
  95% {
    opacity: .95; }
  97% {
    opacity: .93; }
  100% {
    opacity: 1; } }

.about__background {
  transform-origin: bottom center;
  transition: scale 0.6s cubic-bezier(0.39, 0.575, 0.565, 1), opacity 0.8s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: .2s;
  will-change: scale, opacity; }

.character {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.8s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: 0s;
  will-change: opacity; }
  .character__image {
    opacity: 0;
    visibility: hidden;
    transition-delay: 2s; }

body.is-end .about__background {
  opacity: 0;
  visibility: visible;
  scale: 1.6;
  transition: scale 0.8s cubic-bezier(0.39, 0.575, 0.565, 1), opacity 0.8s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 0.8s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: 0s; }

body.is-end .character {
  opacity: 1;
  visibility: visible;
  transition-delay: .2s; }
  body.is-end .character__image {
    opacity: 1;
    visibility: visible;
    animation: character-changer 20s infinite;
    animation-delay: 1.8s;
    will-change: opacity; }
    @media screen and (max-width: 768px) {
      body.is-end .character__image {
        animation: character-changer-sp 20s infinite;
        animation-delay: 2s; } }
    body.is-end .character__image-01, body.is-end .character__image-02, body.is-end .character__image-03, body.is-end .character__image-04 {
      animation: 20s infinite;
      animation-delay: 2.0s;
      will-change: opacity; }
    body.is-end .character__image-01 {
      animation-name: image-changer-01; }
    body.is-end .character__image-02 {
      animation-name: image-changer-02; }
    body.is-end .character__image-03 {
      animation-name: image-changer-03; }
    body.is-end .character__image-04 {
      animation-name: image-changer-04; }
  body.is-end .character__black {
    opacity: 0;
    visibility: hidden;
    animation: black-changer 20s infinite;
    animation-delay: 1.4s;
    will-change: opacity; }
  body.is-end .character__noise {
    opacity: 0;
    visibility: hidden;
    animation: noise-changer 20s infinite, noise-move .1s infinite ease;
    animation-delay: .9s;
    will-change: opacity; }
  body.is-end .character__text {
    animation: text-changer 20s infinite;
    animation-delay: 3s;
    will-change: translate, opacity; }
    body.is-end .character__text-image {
      visibility: hidden;
      animation: 20s infinite;
      animation-delay: 2.8s;
      will-change: opacity; }
      body.is-end .character__text-image--01 {
        animation-name: image-changer-01; }
      body.is-end .character__text-image--02 {
        animation-name: image-changer-02; }
      body.is-end .character__text-image--03 {
        animation-name: image-changer-03; }
      body.is-end .character__text-image--04 {
        animation-name: image-changer-04; }
  body.is-end .character__name {
    animation: text-changer 20s infinite;
    animation-delay: 3s;
    will-change: translate, opacity; }
    body.is-end .character__name-image {
      visibility: hidden;
      animation: 20s infinite;
      animation-delay: 2.6s;
      will-change: opacity; }
      body.is-end .character__name-image--01 {
        animation-name: image-changer-01; }
      body.is-end .character__name-image--02 {
        animation-name: image-changer-02; }
      body.is-end .character__name-image--03 {
        animation-name: image-changer-03; }
      body.is-end .character__name-image--04 {
        animation-name: image-changer-04; }

@keyframes image-changer-01 {
  0%, 24% {
    overflow: 1;
    visibility: visible; }
  25%, 100% {
    overflow: 0;
    visibility: hidden; } }

@keyframes image-changer-02 {
  0%, 24%, 50%, 100% {
    overflow: 0;
    visibility: hidden; }
  25%, 49% {
    overflow: 1;
    visibility: visible; } }

@keyframes image-changer-03 {
  0%, 49%, 75%, 100% {
    overflow: 0;
    visibility: hidden; }
  50%, 74% {
    overflow: 1;
    visibility: visible; } }

@keyframes image-changer-04 {
  0%, 74%, 100% {
    overflow: 0;
    visibility: hidden; }
  75%, 99% {
    overflow: 1;
    visibility: visible; } }

@keyframes character-changer {
  0%, 22%, 25%, 47%, 50%, 72%, 75%, 97% {
    transform: skewX(0); }
  5.1%, 5.3%, 5.5%,
  22.1%, 22.3%, 22.5%,
  30.1%, 30.3%, 30.5%,
  47.1%, 47.3%, 47.5%,
  55.1%, 55.3%, 55.5%,
  72.1%, 72.3%, 72.5%,
  80.1%, 80.3%, 80.5%,
  97.1%, 97.3%, 97.5% {
    transform: skewX(4deg); }
  5.2%, 5.4%, 5.6%,
  22.2%, 22.4%, 22.6%,
  30.2%, 30.4%, 30.6%,
  47.2%, 47.4%, 47.6%,
  55.2%, 55.4%, 55.6%,
  72.2%, 72.4%, 72.6%,
  80.2%, 80.4%, 80.6%,
  97.2%, 97.4%, 97.6% {
    transform: skewX(-4deg); }
  6%, 23%, 31%, 48%, 56%, 81%, 98%, 100% {
    transform: skewX(0); } }

@keyframes character-changer-sp {
  0%, 22%, 25%, 47%, 50%, 72%, 75%, 97% {
    transform: skewX(0); }
  5.1%, 5.3%, 5.5%,
  22.1%, 22.3%, 22.5%,
  30.1%, 30.3%, 30.5%,
  47.1%, 47.3%, 47.5%,
  55.1%, 55.3%, 55.5%,
  72.1%, 72.3%, 72.5%,
  80.1%, 80.3%, 80.5%,
  97.1%, 97.3%, 97.5% {
    transform: skewX(1deg); }
  5.2%, 5.4%, 5.6%,
  22.2%, 22.4%, 22.6%,
  30.2%, 30.4%, 30.6%,
  47.2%, 47.4%, 47.6%,
  55.2%, 55.4%, 55.6%,
  72.2%, 72.4%, 72.6%,
  80.2%, 80.4%, 80.6%,
  97.2%, 97.4%, 97.6% {
    transform: skewX(-1deg); }
  6%, 23%, 31%, 48%, 56%, 81%, 98%, 100% {
    transform: skewX(0); } }

@keyframes black-changer {
  0%, 8%,
  25%, 33%,
  50%, 58%,
  75%, 83%, 100% {
    opacity: 0;
    visibility: hidden; }
  2%, 6%,
  27%, 31%,
  52%, 56%,
  77%, 81% {
    opacity: 1;
    visibility: visible; } }

@keyframes noise-changer {
  0%, 15%,
  25%, 40%,
  50%, 65%,
  75%, 90%, 100% {
    opacity: 0;
    visibility: hidden; }
  4%, 11%,
  29%, 36%,
  54%, 61%,
  79%, 86% {
    opacity: 1;
    visibility: visible; } }

@keyframes noise-move {
  0%, 100% {
    background-position: 0 center; }
  50% {
    background-position: 40.9rem center; } }

@keyframes text-changer {
  0%, 25%, 50%, 75%,
  13%, 38%, 63%, 88%,
  1.5%, 26.5%, 51.5%, 76.5%,
  12.5%, 37.5%, 62.5%, 87.5% {
    translate: 0 0;
    transform: skewX(0);
    opacity: 1; }
  0.3%, 25.3%, 50.3%, 75.3%,
  12.8%, 37.8%, 62.8%, 87.8% {
    translate: 2% 1%;
    transform: skewX(10deg); }
  0.6%, 25.6%, 50.6%, 75.6%,
  13.1%, 38.1%, 63.1%, 88.1% {
    translate: -1% 2%;
    transform: skewX(-10deg); }
  0.9%, 25.9%, 50.9%, 75.9%,
  13.4%, 38.4%, 63.4%, 88.4% {
    translate: 1% 1%;
    transform: skewX(10deg); }
  1.2%, 26.2%, 51.2%, 76.2%,
  13.7%, 38.7%, 63.7%, 88.7% {
    translate: -1% -1%;
    transform: skewX(-10deg); }
  14%, 39%, 64%, 89%,
  24%, 49%, 74%, 100% {
    translate: 0 0;
    opacity: 0; } }

.hero__background,
.hero__shadow,
.hero__text,
.hero__title,
.hero__logo-heading,
.hero__copy,
.hero__date,
.hero__crew,
.hero__banner,
.hero__lead,
.nav-global,
.nav-sns {
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  transition-delay: 1s; }

.hero__background {
  transition: opacity 1s cubic-bezier(0.47, 0, 0.745, 0.715), visibility 1s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition-delay: 1.4s; }

.hero__shadow {
  transition: opacity 0.8s cubic-bezier(0.47, 0, 0.745, 0.715), visibility 0.8s cubic-bezier(0.47, 0, 0.745, 0.715);
  transition-delay: 3.2s; }

.hero__character {
  opacity: 0;
  visibility: hidden;
  will-change: opacity; }

.hero__text,
.hero__title,
.hero__title,
.hero__logo-heading,
.hero__copy,
.hero__date,
.hero__crew,
.hero__banner,
.hero__lead,
.nav-global,
.nav-sns {
  transition: opacity 1.2s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 1.2s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition-delay: 4s; }

body.is-hide .hero__background,
body.is-hide .hero__shadow,
body.is-hide .hero__text,
body.is-hide .hero__title,
body.is-hide .hero__logo-heading,
body.is-hide .hero__copy,
body.is-hide .hero__date,
body.is-hide .hero__crew,
body.is-hide .hero__banner,
body.is-hide .hero__lead,
body.is-hide .nav-global,
body.is-hide .nav-sns {
  opacity: 1;
  visibility: visible; }

body.is-hide .hero__character {
  transform-origin: 50rem 90rem;
  animation: 1.6s forwards;
  animation-delay: 2.6s;
  will-change: opacity, scale; }
  @media screen and (max-width: 768px) {
    body.is-hide .hero__character {
      transform-origin: center 30rem; } }
  body.is-hide .hero__character--04 {
    animation-name: character-04; }
  body.is-hide .hero__character--03 {
    animation-name: character-03; }
  body.is-hide .hero__character--02 {
    animation-name: character-02; }
  body.is-hide .hero__character--01 {
    animation-name: character-01; }

@keyframes character-04 {
  0% {
    opacity: 0;
    visibility: hidden;
    scale: 0.95; }
  50%, 100% {
    opacity: 1;
    visibility: visible;
    scale: 1; } }

@keyframes character-03 {
  0%, 20% {
    opacity: 0;
    visibility: hidden;
    scale: 0.95; }
  70%, 100% {
    opacity: 1;
    visibility: visible;
    scale: 1; } }

@keyframes character-02 {
  0%, 40% {
    opacity: 0;
    visibility: hidden;
    scale: 0.95; }
  90%, 100% {
    opacity: 1;
    visibility: visible;
    scale: 1; } }

@keyframes character-01 {
  0%, 50% {
    opacity: 0;
    visibility: hidden;
    scale: 0.95; }
  100% {
    opacity: 1;
    visibility: visible;
    scale: 1; } }

.fade-in {
  opacity: 0;
  visibility: hidden;
  will-change: opacity;
  transition: opacity 1s cubic-bezier(0.47, 0, 0.745, 0.715), visibility 1s cubic-bezier(0.47, 0, 0.745, 0.715); }
  .fade-in.is-inview {
    opacity: 1;
    visibility: visible; }

.blur-in {
  filter: blur(20rem);
  transition: filter 1.6s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: filter; }
  .blur-in.is-inview {
    filter: blur(0); }

.skew-in {
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform; }
  .skew-in.is-inview {
    animation: skew-in .8s forwards; }

@keyframes skew-in {
  0%, 10%, 13%, 70%, 73%, 90%, 93%, 100% {
    opacity: 1;
    visibility: visible;
    transform: skewX(0); }
  11%, 71%, 91% {
    transform: skewX(-20deg); }
  12%, 72%, 92% {
    transform: skewX(20deg); } }

.modal-movie {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  -ms-flex-align: center;
      align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s cubic-bezier(0.39, 0.575, 0.565, 1), visibility 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
  will-change: opacity; }
  @media screen and (max-height: 850px) {
    .modal-movie {
      -ms-flex-align: start;
          align-items: flex-start;
      overflow-y: auto;
      padding: 10.6rem 0; } }
  @media screen and (max-width: 768px) {
    .modal-movie {
      -ms-flex-align: center;
          align-items: center;
      overflow-y: auto;
      padding: 0; } }
  @media screen and (max-width: 768px) and (max-height: 850px) {
    .modal-movie {
      -ms-flex-align: start;
          align-items: flex-start;
      overflow-y: scroll;
      padding: 7.2rem 0; } }
  @media screen and (max-width: 480px) {
    .modal-movie {
      -ms-flex-align: center;
          align-items: center;
      overflow-y: auto;
      padding: 0; } }
  @media screen and (max-width: 480px) and (max-height: 480px) {
    .modal-movie {
      -ms-flex-align: start;
          align-items: flex-start;
      overflow-y: scroll;
      padding: 8.2rem 0; } }
  .modal-movie__background {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100dvh;
    min-height: 85rem;
    background-color: #020205; }
    @media screen and (max-width: 768px) {
      .modal-movie__background {
        position: fixed; } }
  .modal-movie.is-show {
    opacity: 1;
    visibility: visible; }
  .modal-movie__inner {
    position: relative; }
  .modal-movie .list-movie__item {
    display: none;
    text-align: center; }
    .modal-movie .list-movie__item.is-show {
      display: block; }
    .modal-movie .list-movie__item iframe {
      width: 104rem;
      height: 58.5rem;
      aspect-ratio: 16 / 9; }
      @media screen and (max-width: 768px) {
        .modal-movie .list-movie__item iframe {
          width: 38.4rem;
          height: 21.6rem; } }
  .modal-movie .list-tab {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    gap: 1.2rem;
    width: 104rem;
    margin-top: 2rem; }
    @media screen and (max-width: 768px) {
      .modal-movie .list-tab {
        width: 100%;
        max-width: 34.4rem;
        margin-left: auto;
        margin-right: auto;
        -ms-flex-direction: column;
            flex-direction: column;
        gap: 1rem; } }
    .modal-movie .list-tab__item {
      width: calc(50% - 0.6rem);
      height: 3.6rem;
      font-size: 1.5rem; }
      @media screen and (max-width: 768px) {
        .modal-movie .list-tab__item {
          width: 100%;
          height: 3.4rem;
          font-size: 1.2rem; } }
      .modal-movie .list-tab__item span {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
        width: 100%;
        height: 100%;
        border: 0.1rem solid #30AD6C;
        background: #CAE746;
        color: #000; }
      .modal-movie .list-tab__item.is-show {
        opacity: .3;
        pointer-events: none; }
  .modal-movie__close {
    position: absolute;
    top: -2rem;
    right: -10rem;
    width: 9rem;
    height: 9rem;
    background: url("../img/home/line_close.png") no-repeat center center/contain;
    cursor: pointer; }
    @media screen and (max-width: 768px) {
      .modal-movie__close {
        width: 7.4rem;
        height: 7.4rem;
        top: -6.9rem;
        right: 0;
        background-image: url("../img/home/line_close@sp.png"); } }

.nav-global {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2.6rem 0;
  z-index: 999;
  background-image: linear-gradient(180deg, #020205 60%, rgba(255, 255, 255, 0)); }
  @media screen and (max-width: 768px) {
    .nav-global {
      position: relative;
      top: auto;
      width: auto;
      margin-top: 4rem;
      padding: 0;
      background: none; } }
  .nav-global .list-global {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    gap: 6rem; }
    @media screen and (max-width: 768px) {
      .nav-global .list-global {
        -ms-flex-direction: column;
            flex-direction: column;
        gap: 2rem; } }
    @media screen and (max-width: 768px) {
      .nav-global .list-global__item {
        width: 34.4rem;
        height: 5rem;
        background: url("../img/home/line_button.png") no-repeat center center/cover; } }
    .nav-global .list-global__item a,
    .nav-global .list-global__item span {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      width: 100%;
      height: 100%;
      color: #CAE746;
      font-size: 2.2rem;
      font-weight: 400;
      font-family: Yakuhanjp, "Special Elite", sans-serif;
      line-height: 100%;
      text-shadow: 0 0.2rem 0 rgba(1, 0, 10, 0.25); }

#home .hero {
  position: relative;
  height: 100vh;
  min-height: 108rem;
  overflow: hidden; }
  @media screen and (max-width: 768px) {
    #home .hero {
      height: auto;
      min-height: auto; } }
  @media screen and (max-width: 768px) {
    #home .hero__inner {
      height: 58.8rem; } }
  #home .hero__background, #home .hero__shadow, #home .hero__character, #home .hero__text {
    position: absolute;
    left: calc(50% - 192rem / 2);
    width: 192rem;
    height: 100%; }
  #home .hero__background {
    background: url(../img/home/bg_hero.jpg) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__background {
        background-image: url(../img/home/bg_hero@sp.jpg); } }
  #home .hero__shadow {
    background: url(../img/home/bg_hero_shadow.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__shadow {
        background-image: url(../img/home/bg_hero_shadow@sp.png); } }
  #home .hero__character--01 {
    background: url(../img/home/bg_hero_character01.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__character--01 {
        background-image: url(../img/home/bg_hero_character01@sp.png); } }
  #home .hero__character--02 {
    background: url(../img/home/bg_hero_character02.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__character--02 {
        background-image: url(../img/home/bg_hero_character02@sp.png); } }
  #home .hero__character--03 {
    background: url(../img/home/bg_hero_character03.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__character--03 {
        background-image: url(../img/home/bg_hero_character03@sp.png); } }
  #home .hero__character--04 {
    background: url(../img/home/bg_hero_character04.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__character--04 {
        background-image: url(../img/home/bg_hero_character04@sp.png); } }
  #home .hero__text {
    background: url(../img/home/bg_text.png) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__text {
        background-image: url(../img/home/bg_text@sp.png); } }
  #home .hero__content {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%; }
    @media screen and (max-width: 768px) {
      #home .hero__content {
        width: auto;
        height: auto;
        position: relative;
        top: auto;
        left: auto;
        z-index: 1;
        padding-top: 0.4rem; } }
  #home .hero__box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    width: fit-content;
    height: 100%;
    -ms-flex-direction: column;
        flex-direction: column;
    margin-top: -2rem; }
    @media screen and (max-width: 768px) {
      #home .hero__box {
        width: 100%;
        margin-top: 0; } }
  #home .hero__title {
    width: 54.6rem; }
    @media screen and (max-width: 768px) {
      #home .hero__title {
        width: 36.5rem; } }
  #home .hero__logo {
    width: 73.1rem;
    height: 39.2rem;
    position: relative;
    background: url("../img/home/logo_hero_background.png") no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .hero__logo {
        width: 24.5rem;
        height: 13.1rem;
        margin-top: 31.4rem; } }
    #home .hero__logo-heading {
      position: relative; }
    #home .hero__logo-neon {
      width: 100%;
      height: 100%;
      position: absolute;
      background: no-repeat center center / contain;
      opacity: 0; }
    #home .hero__logo-last--01 {
      background-image: url("../img/home/logo_hero_last01.png"); }
    #home .hero__logo-last--02 {
      background-image: url("../img/home/logo_hero_last02.png"); }
    #home .hero__logo-last--03 {
      background-image: url("../img/home/logo_hero_last03.png"); }
    #home .hero__logo-last--04 {
      background-image: url("../img/home/logo_hero_last04.png"); }
    #home .hero__logo-last--05 {
      background-image: url("../img/home/logo_hero_last05.png"); }
    #home .hero__logo-last--06 {
      background-image: url("../img/home/logo_hero_last06.png"); }
    #home .hero__logo-last--07 {
      background-image: url("../img/home/logo_hero_last07.png"); }
    #home .hero__logo-first--01 {
      background-image: url("../img/home/logo_hero_first01.png"); }
    #home .hero__logo-first--02 {
      background-image: url("../img/home/logo_hero_first02.png"); }
    #home .hero__logo-first--03 {
      background-image: url("../img/home/logo_hero_first03.png"); }
    #home .hero__logo-first--04 {
      background-image: url("../img/home/logo_hero_first04.png"); }
    #home .hero__logo-line--01 {
      background-image: url("../img/home/logo_hero_line01.png"); }
    #home .hero__logo-line--02 {
      background-image: url("../img/home/logo_hero_line02.png"); }
    #home .hero__logo-line--03 {
      background-image: url("../img/home/logo_hero_line03.png"); }
  #home .hero__copy {
    width: 64.3rem;
    margin-top: -3rem; }
    @media screen and (max-width: 768px) {
      #home .hero__copy {
        -ms-flex-order: 1;
            order: 1;
        width: 23.4rem;
        margin-top: -2.4rem; } }
  #home .hero__date {
    width: 33.4rem;
    margin-top: -3rem; }
    @media screen and (max-width: 768px) {
      #home .hero__date {
        -ms-flex-order: 1;
            order: 1;
        width: 11.9rem;
        margin-top: -3.2rem; } }
  #home .hero__crew {
    width: 65.5rem; }
    @media screen and (max-width: 768px) {
      #home .hero__crew {
        width: 34.4rem; } }
  #home .hero__banner {
    overflow: hidden;
    width: 44rem;
    margin-top: 3rem; }
    @media screen and (max-width: 768px) {
      #home .hero__banner {
        position: relative;
        width: 34.4rem;
        margin: 2.3rem auto 0; } }
  #home .hero__lead {
    position: absolute;
    left: calc(50% - 138rem / 2);
    width: 138rem;
    bottom: 6rem; }
    @media screen and (max-width: 768px) {
      #home .hero__lead {
        width: 100%;
        max-width: 34.4rem;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        bottom: auto;
        left: auto;
        z-index: 1;
        margin-top: -2.8rem; } }

#home .cta {
  position: relative;
  z-index: 1;
  background: url(../img/home/bg_cta.jpg) no-repeat bottom center/cover; }
  @media screen and (max-width: 768px) {
    #home .cta {
      margin-top: 4rem;
      background: none; } }
  #home .cta__inner {
    width: 100%;
    max-width: 192rem;
    margin-left: auto;
    margin-right: auto; }
  #home .cta .list-banner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1rem; }
    @media screen and (max-width: 768px) {
      #home .cta .list-banner {
        gap: 0.8rem; } }
    #home .cta .list-banner__item {
      width: 23.2rem; }
      @media screen and (max-width: 768px) {
        #home .cta .list-banner__item {
          width: 16.8rem; } }
      #home .cta .list-banner__item a {
        width: 100%;
        height: 100%;
        display: block; }
  #home .cta__widget {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    margin-top: 3rem; }

#home .about {
  position: relative;
  z-index: 99;
  overflow: hidden;
  padding: 10rem 0 15rem;
  background-color: #020205; }
  @media screen and (max-width: 768px) {
    #home .about {
      padding: 8rem 0; } }
  #home .about.is-fixed .about__background {
    position: fixed; }
  #home .about__background {
    position: absolute;
    left: calc(50% - 192rem / 2);
    width: 192rem;
    bottom: 0;
    z-index: -1;
    display: block;
    height: 183rem;
    background: url(../img/home/bg_about.jpg) no-repeat center center/contain; }
    @media screen and (max-width: 768px) {
      #home .about__background {
        width: 38.4rem;
        height: 79rem;
        left: 0;
        background-image: url(../img/home/bg_about@sp.jpg); } }
  #home .about__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-direction: column;
        flex-direction: column; }
    @media screen and (max-width: 768px) {
      #home .about__inner {
        margin-left: -0.6rem; } }
  #home .about__title {
    color: #CAE746;
    font-size: 3.6rem;
    line-height: 100%;
    font-family: Yakuhanjp, "Special Elite", sans-serif;
    text-align: center;
    text-shadow: 0 0 2rem #13AE67; }
    @media screen and (max-width: 768px) {
      #home .about__title {
        font-size: 3rem; } }
  #home .about__heading {
    width: 138rem;
    margin-top: 45.5rem; }
    @media screen and (max-width: 768px) {
      #home .about__heading {
        width: 40.6rem;
        margin-top: 16rem;
        margin-left: -1rem; } }
  #home .about__subheading:nth-of-type(1) {
    width: 89rem;
    margin-top: -1rem; }
    @media screen and (max-width: 768px) {
      #home .about__subheading:nth-of-type(1) {
        width: 36.2rem;
        margin-top: 0; } }
  #home .about__subheading:nth-of-type(2) {
    width: 107rem;
    margin-top: 2rem; }
    @media screen and (max-width: 768px) {
      #home .about__subheading:nth-of-type(2) {
        width: 36.3rem; } }
  #home .about__text {
    width: 72.9rem;
    margin-top: 4rem; }
    @media screen and (max-width: 768px) {
      #home .about__text {
        width: 36.4rem;
        margin-top: 0; } }
    #home .about__text:nth-of-type(2) {
      width: 72rem;
      margin-top: 2rem; }
      @media screen and (max-width: 768px) {
        #home .about__text:nth-of-type(2) {
          width: 36.4rem; } }

#home .character {
  width: 100%;
  height: calc(100vh - 5rem);
  position: relative;
  overflow: hidden; }
  #home .character__background, #home .character__image, #home .character__image-01, #home .character__image-02, #home .character__image-03, #home .character__image-04, #home .character__black, #home .character__noise, #home .character__monitor, #home .character__text, #home .character__text-image, #home .character__name, #home .character__name-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center center / cover; }
    @media screen and (max-width: 768px) {
      #home .character__background, #home .character__image, #home .character__image-01, #home .character__image-02, #home .character__image-03, #home .character__image-04, #home .character__black, #home .character__noise, #home .character__monitor, #home .character__text, #home .character__text-image, #home .character__name, #home .character__name-image {
        height: 100vh; } }
    #home .character__background img, #home .character__image img, #home .character__image-01 img, #home .character__image-02 img, #home .character__image-03 img, #home .character__image-04 img, #home .character__black img, #home .character__noise img, #home .character__monitor img, #home .character__text img, #home .character__text-image img, #home .character__name img, #home .character__name-image img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover; }
  #home .character__background {
    background-image: url(../img/home/bg_character.jpg); }
    @media screen and (max-width: 768px) {
      #home .character__background {
        background-image: url(../img/home/bg_character@sp.jpg); } }
  #home .character__black {
    background-color: #020205; }
  #home .character__noise {
    background-image: url(../img/home/img_noise.png);
    background-size: 288rem auto;
    -webkit-backdrop-filter: blur;
            backdrop-filter: blur; }
  #home .character__monitor {
    background-image: url(../img/home/bg_character.png); }
    @media screen and (max-width: 768px) {
      #home .character__monitor {
        background-image: url(../img/home/bg_character@sp.png); } }

@media screen and (max-width: 768px) {
  .only-pc {
    display: none !important; } }

@media screen and (min-width: 769px) {
  .only-sp {
    display: none !important; } }

.js-hover {
  cursor: pointer; }