/* CSS Document */
html {
  font-size: 62.5%;
  line-height: 1;
}

body {
  margin: 0 !important;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #000;
  font-size: 4.1vw;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  body {
    font-size: 21.28px;
  }
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

button {
  border: none;
}

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

a {
  text-decoration: none;
}

p {
  margin: 0;
}

ul, ol, dl, dt, dd {
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

.l-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../images/bg-stage.webp) no-repeat center/cover #222;
  z-index: -1;
}

.l-wrapper {
  width: 100%;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .l-wrapper {
    width: 520px;
  }
}
@media screen and (min-width: 1200px) {
  .l-wrapper {
    margin: 0 auto;
  }
}

nav .nav-button {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 999;
  width: 16.4vw;
  height: 16.4vw;
  border-radius: 0 0 0 2.82vw;
  background-color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14%;
}
nav .nav-button span {
  width: 43.75%;
  height: 3.125%;
  background-color: #fff;
  display: block;
  transform-origin: center;
  transition: all 0.2s;
}
nav .nav-button.is-open span:nth-of-type(1) {
  transform: rotate(45deg);
  translate: 0 2.8vw;
}
nav .nav-button.is-open span:nth-of-type(2) {
  opacity: 0;
}
nav .nav-button.is-open span:nth-of-type(3) {
  transform: rotate(-45deg);
  translate: 0 -2.8vw;
}
@media screen and (min-width: 768px) {
  nav .nav-button {
    display: none;
  }
}
nav .nav-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0);
  transition: all 0.2s;
  visibility: hidden;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper {
    visibility: visible;
  }
}
nav .nav-wrapper .nav-contents {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #222;
  border-radius: 0 0 0 30px;
  width: 80vw;
  transform: translate(100%, 0);
  opacity: 0;
  transition: all 0.2s;
  pointer-events: all;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents {
    transform: translate(30px, 0);
    background: none;
    width: calc(100vw - 520px);
    transition: 0.1s;
    pointer-events: none;
  }
}
nav .nav-wrapper .nav-contents .nav-inner-scroll {
  padding: 10.256vw 6.15vw 6.92vw 11.79vw;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-inner-scroll {
    padding: 42px 0 42px 54px;
  }
}
nav .nav-wrapper .nav-contents .nav-inner-scroll.is-scroll {
  height: 100vh;
  overflow-y: scroll;
}
nav .nav-wrapper .nav-contents .nav-qr {
  margin: 0 0 0 36px;
  border-radius: 5px;
  overflow: hidden;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
nav .nav-wrapper .nav-contents .nav-qr .text-area {
  width: 100%;
  padding: 7px 0 6px;
  background-color: #3232f0;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
nav .nav-wrapper .nav-contents .nav-qr .qr-area {
  width: 100%;
  background-color: #fff;
}
nav .nav-wrapper .nav-contents .nav-logo {
  width: 23vw;
}
nav .nav-wrapper .nav-contents .nav-list {
  margin-top: 4.1vw;
  display: flex;
  flex-direction: column;
  gap: 3.589vw;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-list {
    margin-top: 20px;
    gap: 24px;
  }
}
nav .nav-wrapper .nav-contents .nav-list a {
  display: block;
  color: #126dec;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 7.69vw;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-list a {
    font-size: 32px;
  }
}
nav .nav-wrapper .nav-contents .nav-list a span {
  display: block;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.07vw;
  margin-top: -0.5em;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-list a span {
    font-size: 13px;
  }
}
nav .nav-wrapper .nav-contents .nav-list li {
  position: relative;
  padding-left: 3.589vw;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-list li {
    padding-left: 14px;
  }
}
nav .nav-wrapper .nav-contents .nav-list li.is-current::before {
  display: block;
  position: absolute;
  content: "";
  left: 0;
  top: 5.5vw;
  width: 1.538vw;
  height: 1.538vw;
  border-radius: 50%;
  background-color: #126dec;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-list li.is-current::before {
    top: 25px;
    width: 6px;
    height: 6px;
  }
}
nav .nav-wrapper .nav-contents .nav-inner-list {
  margin-top: 3.589vw;
  display: flex;
  flex-direction: column;
  gap: 3.076vw;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-inner-list {
    margin-top: 16px;
    gap: 14px;
  }
}
nav .nav-wrapper .nav-contents .nav-inner-list a {
  display: block;
  font-size: 3.589vw;
  position: relative;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-inner-list a {
    font-size: 15px;
  }
}
nav .nav-wrapper .nav-contents .nav-inner-list a::before {
  display: inline-block;
  position: relative;
  content: "";
  width: 15.38vw;
  height: 0.256vw;
  background-color: #126dec;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .nav-inner-list a::before {
    width: 68px;
    height: 1px;
  }
}
nav .nav-wrapper .nav-contents .button {
  position: relative;
  margin-top: 7.179vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 61.025vw;
  height: 11.538vw;
  border-radius: 7.948vw;
  background-color: #3232f0;
  color: #fff;
  text-align: center;
  font-size: 3.076vw;
  letter-spacing: 0.12em;
}
nav .nav-wrapper .nav-contents .button::after {
  position: absolute;
  display: block;
  content: "";
  width: 2.05vw;
  height: 2.05vw;
  background: url(../images/parts-arrow.svg) no-repeat center/100%;
  right: 6.153vw;
  top: 50%;
  transform: translateY(-50%);
}
nav .nav-wrapper .nav-contents .pagetop {
  margin: 11.794vw 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 11.538vw;
  height: 11.538vw;
  color: #126dec;
  font-size: 2.564vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .pagetop {
    margin: 54px auto 0 8px;
    width: 45px;
    height: 45px;
    font-size: 10px;
  }
}
nav .nav-wrapper .nav-contents .pagetop .icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.1em;
}
nav .nav-wrapper .nav-contents .pagetop svg {
  width: 8.205vw;
  stroke: #126dec;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .pagetop svg {
    width: 32px;
    height: 22px;
  }
}
nav .nav-wrapper .nav-contents .pagetop span {
  display: block;
  width: 6.66vw;
  height: 1.025vw;
  background-color: #126dec;
  margin-top: 0.2em;
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents .pagetop span {
    width: 26px;
    height: 4px;
  }
}
@media screen and (min-width: 768px) {
  nav .nav-wrapper .nav-contents.is-scroll {
    transform: translate(0, 0);
    opacity: 1;
    transition: 0.2s;
    pointer-events: all;
  }
}
nav .nav-wrapper.is-open {
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
}
nav .nav-wrapper.is-open .nav-contents {
  transform: translate(0, 0);
  opacity: 1;
}

main {
  display: block;
}

.section-info, .section-contents:not(.impressive-area) {
  position: relative;
  background: #fff;
}
.section-info::before, .section-contents:not(.impressive-area)::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/noise.webp) repeat 0 0/70px 70px;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}

#kv {
  position: relative;
  width: 100%;
  min-height: 216.4vw;
  padding-top: 111.384vw;
  background: url(../images/kv-sp-bg.webp) no-repeat center center/100% #fff;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  #kv {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    min-height: 54.16vw;
    padding-top: 14.583vw;
    background: url(../images/kv-pc-bg.jpg) no-repeat center center/100%;
  }
}
#kv .kv-change-group {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}
#kv .kv-change-group::before {
  display: block;
  position: absolute;
  content: "";
  height: 100%;
  width: auto;
  aspect-ratio: 780/1686;
  background: url(../images/kv-sp-cover.webp) no-repeat top center/100%;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #kv .kv-change-group::before {
    aspect-ratio: 1200/650;
    background: url(../images/kv-pc-cover.webp) no-repeat top center/100%;
  }
}
#kv .kv-change-group::after {
  display: block;
  position: absolute;
  content: "";
  height: 100%;
  width: auto;
  aspect-ratio: 780/1468;
  background: url(../images/kv-sp-ef.webp) no-repeat top center/100%;
  mix-blend-mode: screen;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #kv .kv-change-group::after {
    aspect-ratio: 1200/650;
    background: url(../images/kv-pc-ef.webp) no-repeat top center/100%;
  }
}
#kv .kv-change-player {
  position: relative;
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
}
#kv .kv-change-player.is-active {
  visibility: visible;
  opacity: 1;
}
#kv .kv-player {
  position: absolute;
  top: 2.051vw;
  left: -23.076vw;
  width: 115.897vw;
}
@media screen and (min-width: 768px) {
  #kv .kv-player {
    top: -3.66vw;
    left: 26vw;
    width: 63.66vw;
  }
}
#kv .kv-card {
  position: absolute;
  top: 15.384vw;
  left: calc(50% + 0px);
  width: 43.589vw;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.4));
  transform: perspective(800px) rotate3d(440, -310, 160, 20deg);
}
@media screen and (min-width: 768px) {
  #kv .kv-card {
    top: 1.66vw;
    left: calc(50% + 21.66vw);
    width: 20.33vw;
  }
}
#kv h1 {
  position: relative;
  width: 46.41vw;
  margin: 0 auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  #kv h1 {
    width: 25vw;
    margin: 0 auto 0 7.5vw;
  }
}
#kv h1 img {
  filter: drop-shadow(0 1.282vw 2.564vw rgba(0, 0, 0, 0.4));
}
@media screen and (min-width: 768px) {
  #kv h1 img {
    filter: drop-shadow(0 13px 10px rgba(0, 0, 0, 0.4));
  }
}
#kv h1 p {
  margin-top: 2.564vw;
  color: #fff;
  font-size: 3.589vw;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  #kv h1 p {
    margin-top: 0.833vw;
    font-size: 1.366vw;
    font-weight: 700;
  }
}
#kv .scroll {
  position: absolute;
  transform: translate(0, -50%) rotate(90deg);
  top: 60%;
  right: -3em;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: 2.564vw;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  letter-spacing: 0.27em;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #kv .scroll {
    font-size: 0.833vw;
  }
}
#kv .scroll span {
  background: #fff;
  height: 0.256vw;
  width: 7em;
  margin-left: 0.5em;
  display: inline-block;
  animation: scroll 2s infinite;
}
@media screen and (min-width: 768px) {
  #kv .scroll span {
    height: 1.33px;
  }
}
@media screen and (min-width: 768px) {
  #kv + section {
    margin-top: 54.16vw;
  }
}
@media screen and (max-width: 768px) {
  #kv::before {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../images/noise.webp) repeat 0 0/70px 70px;
    top: 0;
    left: 0;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: -1;
  }
}

#kv {
  animation: kvBgScale 0.4s both 0.1s;
}
#kv .kv-change-group::before {
  animation: kvCoverSlideSP 0.4s both 0.4s;
}
@media screen and (min-width: 768px) {
  #kv .kv-change-group::before {
    animation-name: kvCoverSlidePC;
  }
}
#kv h1 {
  animation: kvLogoBound 0.2s both 0.6s;
}
#kv .kv-change-player.is-active .kv-player {
  animation: kvPlayerAppear 0.3s ease-out both 0.2s;
}
#kv .kv-change-player.is-active .kv-card {
  animation: kvCardAppear 0.25s ease-out both 0.3s;
}

@keyframes kvBgScale {
  0% {
    background-size: 120%;
  }
  100% {
    background-size: 100%;
  }
}
@keyframes kvCoverSlidePC {
  0% {
    opacity: 0;
    transform: translateX(-30%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes kvCoverSlideSP {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes kvLogoBound {
  0% {
    opacity: 0;
    scale: 1.7;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes kvPlayerAppear {
  0% {
    opacity: 0;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes kvCardAppear {
  0% {
    opacity: 0;
    transform: perspective(800px) rotate3d(300, -340, 80, 60deg);
    translate: 100% 60%;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: perspective(800px) rotate3d(440, -310, 160, 20deg);
    translate: 0 0;
  }
}
@keyframes scroll {
  0% {
    transform: scale(0, 1);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 100% 0;
  }
  100% {
    transform: scale(0, 1);
    transform-origin: 100% 0;
  }
}
.section-info h2 {
  display: flex;
  align-items: center;
  gap: 10.512vw;
  color: #3232f0;
  font-family: "Oswald", sans-serif;
  font-size: 15.897vw;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .section-info h2 {
    gap: 54.53px;
    font-size: 82.46px;
  }
}
.section-info h2 span {
  position: relative;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.564vw;
}
@media screen and (min-width: 768px) {
  .section-info h2 span {
    font-size: 13.3px;
  }
}
.section-info h2 span::before {
  position: absolute;
  display: block;
  content: "";
  width: 1.538vw;
  height: 11.794vw;
  background-color: #3232f0;
  transform: skewX(-18deg) translateY(-50%);
  top: 60%;
  left: -9.487vw;
}
@media screen and (min-width: 768px) {
  .section-info h2 span::before {
    width: 7.98px;
    height: 61.18px;
    left: -49.21px;
  }
}
.section-info.pos-rev h2 {
  flex-direction: row-reverse;
}
.section-info.pos-rev h2 span::before {
  left: calc(3.33vw + 100%);
}
@media screen and (min-width: 768px) {
  .section-info.pos-rev h2 span::before {
    left: calc(17.29px + 100%);
  }
}
.section-info:has(+ section.impressive-area) {
  padding-bottom: 16.41vw;
}
@media screen and (min-width: 768px) {
  .section-info:has(+ section.impressive-area) {
    padding-bottom: 85.12px;
  }
}

#pickup {
  margin-top: -20.512vw;
}
@media screen and (min-width: 768px) {
  #pickup {
    margin-top: -106.4px;
  }
}
#pickup .swiper-container {
  position: relative;
  margin: -6.41vw auto 0;
}
@media screen and (min-width: 768px) {
  #pickup .swiper-container {
    margin: -33.25px auto 0;
  }
}
#pickup .swiper {
  padding-bottom: 6.15vw;
}
@media screen and (min-width: 768px) {
  #pickup .swiper {
    padding-bottom: 31.92px;
  }
}
#pickup .swiper-slide {
  transform: scale(0.9);
}
#pickup .swiper-slide-active {
  transform: scale(1);
  transition: 0.2s 0.2s;
}
#pickup a {
  display: block;
  margin: 0 auto;
  border-radius: 1.748vw;
  overflow: hidden;
  box-shadow: 0 1.025vw 2.05vw rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  #pickup a {
    border-radius: 9.0706px;
    box-shadow: 0 5.32px 10.64px rgba(0, 0, 0, 0.2);
  }
}
#pickup .swiper-pagination {
  bottom: 0;
}
#pickup .swiper-pagination-bullet {
  background-color: #D9D9D9;
  height: 1.538vw;
  width: 1.538vw;
  border-radius: 50%;
  opacity: 1;
}
@media screen and (min-width: 768px) {
  #pickup .swiper-pagination-bullet {
    height: 7.98px;
    width: 7.98px;
  }
}
#pickup .swiper-pagination-bullet-active {
  background-color: #3232f0;
}

#new {
  margin-top: -1px;
}
#new .banner-area {
  display: flex;
  flex-direction: column;
  gap: 3.07vw;
  width: 91.794vw;
  margin: -6.41vw auto 0;
}
@media screen and (min-width: 768px) {
  #new .banner-area {
    gap: 15.96px;
    margin: -33.25px auto 0;
    width: 476.14px;
  }
}
#new .banner-area a {
  display: block;
  border-radius: 1.748vw;
  overflow: hidden;
  box-shadow: 0 1.025vw 2.05vw rgba(0, 0, 0, 0.2);
}
@media screen and (min-width: 768px) {
  #new .banner-area a {
    border-radius: 9.0706px;
    box-shadow: 0 5.32px 10.64px rgba(0, 0, 0, 0.2);
  }
}

.section-contents {
  padding: 9.23vw 0 14.87vw;
}
@media screen and (min-width: 768px) {
  .section-contents {
    padding: 47.88px 0 77.14px;
  }
}
.section-contents h2 {
  font-size: 10.256vw;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .section-contents h2 {
    font-size: 53.2px;
  }
}
.section-contents h2 span {
  display: block;
  font-size: 3.589vw;
  font-family: "Noto Sans JP", sans-serif;
  margin-top: -0.5em;
}
@media screen and (min-width: 768px) {
  .section-contents h2 span {
    font-size: 18.62px;
  }
}

#intro {
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.3);
}
#intro h2 {
  color: #3232f0;
}
#intro .lead-text {
  margin-block-start: 9.743vw;
  font-size: 5.897vw;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #intro .lead-text {
    margin-block-start: 50.54px;
    font-size: 30.59px;
  }
}
#intro .lead-text span {
  display: inline-block;
  position: relative;
  z-index: 1;
}
#intro .lead-text span::after {
  display: block;
  position: absolute;
  content: "";
  background-color: #3232f0;
  width: 103%;
  height: 1.4em;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
}
#intro .movie {
  width: 91.794vw;
  margin: 9.743vw auto 0;
  border-radius: 1.748vw;
  overflow: hidden;
  aspect-ratio: 16/9;
}
@media screen and (min-width: 768px) {
  #intro .movie {
    margin: 50.54px auto 0;
    border-radius: 9.0706px;
    width: 476.14px;
  }
}
#intro .card_wrap {
  position: relative;
  top: 0;
  width: 100%;
  height: 96.41vw;
}
@media screen and (min-width: 768px) {
  #intro .card_wrap {
    height: 500.08px;
  }
}
#intro .card_wrap .card {
  top: 14.358vw;
  left: 43%;
  pointer-events: none;
  position: relative;
  transform: rotate(346deg);
  translate: -50%;
  width: 51.282vw;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #intro .card_wrap .card {
    top: 74.48px;
    width: 266px;
  }
}
#intro .card_wrap .card img {
  height: auto;
  width: 100%;
}
#intro .card_wrap .card .cardFront {
  animation: cardFront 8s linear infinite;
  transform: perspective(600px) translateZ(0) rotate3d(0, 500, 0, 0turn);
}
#intro .card_wrap .card .cardBack,
#intro .card_wrap .card .cardFront {
  backface-visibility: hidden;
  left: 0;
  position: absolute;
  top: 0;
}
#intro .card_wrap .card .cardBack {
  animation: cardBack 8s linear infinite;
  transform: perspective(600px) translateZ(1px) rotate3d(0, 500, 0, 0.5turn);
}
#intro .note {
  margin-top: 1em;
  color: #fff;
  font-size: 2.564vw;
  opacity: 0.8;
  text-align: center;
}
@media screen and (min-width: 768px) {
  #intro .note {
    font-size: 13.3px;
  }
}
#intro .text {
  width: 87.692vw;
  color: #fff;
  margin: 3.589vw auto 0;
}
@media screen and (min-width: 768px) {
  #intro .text {
    width: 454.86px;
    margin-top: 18.62px;
  }
}

@keyframes cardFront {
  0% {
    transform: perspective(600px) translateZ(0) rotate3d(0, 500, 0, 0turn);
  }
  50% {
    transform: perspective(600px) translateZ(0) rotate3d(0, 500, 0, 0.5turn);
  }
  to {
    transform: perspective(600px) translateZ(0) rotate3d(0, 500, 0, 1turn);
  }
}
@keyframes cardBack {
  0% {
    transform: perspective(600px) translateZ(5px) rotate3d(0, 500, 0, 0.5turn);
  }
  50% {
    transform: perspective(600px) translateZ(5px) rotate3d(0, 500, 0, 1turn);
  }
  to {
    transform: perspective(600px) translateZ(5px) rotate3d(0, 500, 0, 540deg);
  }
}
.howto-block {
  margin-top: -1px;
}
.howto-block:first-of-type {
  margin-top: 5.128vw;
}
@media screen and (min-width: 768px) {
  .howto-block:first-of-type {
    margin-top: 26.6px;
  }
}
.howto-block h3 p {
  font-size: 4.1vw;
  margin-top: -1.5em;
  color: #fff;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .howto-block h3 p {
    font-size: 21.28px;
  }
}
.howto-block h3 p span {
  position: relative;
  z-index: 1;
}
.howto-block h3 p span::after {
  display: block;
  position: absolute;
  content: "";
  background-color: #126dec;
  width: 104%;
  height: 1.4em;
  top: calc(50% + 0.1em);
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.howto-block + .howto-block {
  margin-top: 23.589vw;
}
@media screen and (min-width: 768px) {
  .howto-block + .howto-block {
    margin-top: 122.36px;
  }
}
.howto-block h3 + .howto-block-unit {
  margin-top: 6.15vw;
}
@media screen and (min-width: 768px) {
  .howto-block h3 + .howto-block-unit {
    margin-top: 31.92px;
  }
}

.howto-block-list {
  display: flex;
  flex-direction: column;
  gap: 20.512vw;
  margin-top: 20.512vw;
  padding: 0 4.1vw;
  counter-reset: number;
}
@media screen and (min-width: 768px) {
  .howto-block-list {
    gap: 106.4px;
    margin-top: 106.4px;
    padding: 0 21.28px;
  }
}
.howto-block-list li {
  position: relative;
}
.howto-block-list li::before {
  counter-increment: number;
  content: counter(number);
  position: absolute;
  font-size: 29.23vw;
  font-family: "Oswald", sans-serif;
  color: #3232f0;
  transform: skewX(-18deg);
  top: -21vw;
  left: 5.128vw;
}
@media screen and (min-width: 768px) {
  .howto-block-list li::before {
    font-size: 151.62px;
    top: -109.06px;
    left: 26.6px;
  }
}

.howto-block-unit > *:not(.title) {
  width: 87.692vw;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .howto-block-unit > *:not(.title) {
    width: 454.86px;
  }
}
.howto-block-unit .title {
  margin-bottom: 6.153vw;
  position: relative;
  font-size: 4.615vw;
  font-weight: 700;
  text-align: center;
  aspect-ratio: 356/74;
  display: flex;
  align-items: center;
  justify-content: end;
}
@media screen and (min-width: 768px) {
  .howto-block-unit .title {
    margin-bottom: 31.92px;
    font-size: 23.94px;
  }
}
.howto-block-unit .title::before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: auto;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='356' height='73' viewBox='0 0 356 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 71.8522H69.0981L92 1.40209L356 1' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='356' height='73' viewBox='0 0 356 73' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 71.8522H69.0981L92 1.40209L356 1' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #3232f0;
  aspect-ratio: 356/74;
}
.howto-block-unit .title p {
  position: relative;
  width: 67.435vw;
}
@media screen and (min-width: 768px) {
  .howto-block-unit .title p {
    width: 349.79px;
  }
}
.howto-block-unit .text {
  margin-top: 0.8em;
}

.attention {
  display: inline-block;
  position: relative;
  padding: 3.846vw 4.358vw;
  border-radius: 1.748vw;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  background-color: #3232f0;
  left: 50%;
  translate: -50% 0;
  margin-bottom: 3.589vw;
}
@media screen and (min-width: 768px) {
  .attention {
    padding: 19.95px 22.61px;
    font-size: 18.62px;
    margin-bottom: 18.62px;
    border-radius: 9.0706px;
  }
}
.attention::after {
  display: block;
  position: absolute;
  content: "";
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='21' height='26' viewBox='0 0 21 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector 16' d='M8.5 11.7619H0.512195L8.5 0H21L12.8049 9.90476H19.9756L0 26L8.5 11.7619Z' fill='%23000'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='21' height='26' viewBox='0 0 21 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector 16' d='M8.5 11.7619H0.512195L8.5 0H21L12.8049 9.90476H19.9756L0 26L8.5 11.7619Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #3232f0;
  width: 5.384vw;
  height: 6.66vw;
  bottom: -5.128vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .attention::after {
    width: 27.93px;
    height: 34.58px;
    bottom: -26.6px;
  }
}
.attention svg {
  position: absolute;
  fill: #3232f0;
  width: 5.384vw;
  height: 6.66vw;
  bottom: -5.128vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .attention svg {
    width: 27.93px;
    height: 34.58px;
    bottom: -26.6px;
  }
}

#campaign {
  margin-top: -1px;
  background-color: #f0f0f0;
}
#campaign::before {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/noise.webp) repeat 0 0/70px 70px;
  top: 0;
  left: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
#campaign > .text, #campaign .campaign-block {
  padding: 0 4.1vw;
}
@media screen and (min-width: 768px) {
  #campaign > .text, #campaign .campaign-block {
    padding: 0 21.28px;
  }
}
#campaign .text {
  margin-top: 5.897vw;
}
@media screen and (min-width: 768px) {
  #campaign .text {
    margin-top: 30.59px;
  }
}
#campaign .label {
  position: relative;
  font-size: 4.615vw;
  font-weight: 700;
  color: #fff;
  text-align: center;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  #campaign .label {
    font-size: 23.94px;
  }
}
#campaign .label::before {
  display: block;
  position: absolute;
  content: "";
  width: 100%;
  height: 1.6em;
  transform: skewX(-18deg);
  z-index: -1;
}
#campaign .label.label-new::before {
  background-color: #3232f0;
}
#campaign .label.label-all::before {
  background-color: #126dec;
}
#campaign .campaign-block {
  margin-top: 7.692vw;
  display: flex;
  flex-direction: column;
  gap: 12.82vw;
}
@media screen and (min-width: 768px) {
  #campaign .campaign-block {
    margin-top: 39.9px;
    gap: 66.5px;
  }
}
#campaign .campaign-block .label {
  margin-bottom: 5.128vw;
}
@media screen and (min-width: 768px) {
  #campaign .campaign-block .label {
    margin-bottom: 26.6px;
  }
}
#campaign .campaign-block-unit .img {
  border-radius: 1.748vw;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  #campaign .campaign-block-unit .img {
    border-radius: 9.0706px;
  }
}
#campaign .campaign-block-unit .period {
  margin-top: 0.5em;
  text-align: center;
}
#campaign .campaign-block-unit .period span {
  color: #fff;
  font-size: 3.589vw;
  background-color: #000;
  padding: 0 2.05vw 0.512vw;
  margin-right: 0.5em;
}
@media screen and (min-width: 768px) {
  #campaign .campaign-block-unit .period span {
    font-size: 18.62px;
    padding: 0 10.64px 2.66px;
  }
}
#campaign .campaign-block-unit + .campaign-block-unit {
  margin-top: 5.128vw;
}
@media screen and (min-width: 768px) {
  #campaign .campaign-block-unit + .campaign-block-unit {
    margin-top: 26.6px;
  }
}

.default-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 81.282vw;
  height: 15.897vw;
  border: #222 0.256vw solid;
  border-radius: 7.948vw;
  font-weight: 700;
}
@media screen and (min-width: 768px) {
  .default-button {
    width: 421.61px;
    height: 82.46px;
    border: #222 1.33px solid;
    border-radius: 41.23px;
  }
}

#sns {
  margin-top: -1px;
}
#sns .button {
  position: relative;
  margin: 6.153vw auto 0;
  background-color: #000;
  color: #fff;
  transition: 0.2s;
}
@media screen and (min-width: 768px) {
  #sns .button {
    margin: 31.92px auto 0;
  }
}
#sns .button::before {
  display: block;
  position: absolute;
  content: "";
  width: 4.1vw;
  height: 4.615vw;
  background: url(../images/parts-Xlogo.svg) no-repeat center/100%;
  left: 14.87vw;
}
@media screen and (min-width: 768px) {
  #sns .button::before {
    width: 21.28px;
    height: 23.94px;
    left: 77.14px;
  }
}
#sns .button:hover {
  background-color: #3232f0;
}

footer {
  margin-top: -1px;
  padding: 11.282vw 0 30.769vw;
  background-color: #222;
}
@media screen and (min-width: 768px) {
  footer {
    padding: 58.52px 0 159.6px;
  }
}
footer .footer-button {
  color: #222;
  background-color: #DDD;
  transition: 0.2s;
}
footer .footer-button:hover {
  color: #DDD;
  background-color: #222;
  border-color: #DDD;
}
footer .footer-info {
  margin-top: 8.205vw;
  padding: 0 4.1vw;
  font-size: 2.564vw;
  color: #fff;
  font-weight: 300;
  opacity: 0.7;
  line-height: 1.2;
}
@media screen and (min-width: 768px) {
  footer .footer-info {
    margin-top: 42.56px;
    font-size: 13.3px;
    padding: 0 21.28px;
  }
}
footer .footer-info .title {
  font-size: 3.076vw;
  margin-bottom: 3.589vw;
}
@media screen and (min-width: 768px) {
  footer .footer-info .title {
    font-size: 15.96px;
    margin-bottom: 18.62px;
  }
}
footer .footer-info dd > * {
  margin-top: 0.5em;
}
footer .footer-link {
  margin-top: 10.256vw;
  display: flex;
  justify-content: center;
  gap: 7.179vw;
}
@media screen and (min-width: 768px) {
  footer .footer-link {
    margin-top: 53.2px;
    gap: 37.24px;
  }
}
footer .footer-link li {
  position: relative;
}
footer .footer-link li:not(:first-of-type)::after {
  display: block;
  position: absolute;
  content: "";
  width: 0.256vw;
  height: 1em;
  background-color: #fff;
  top: calc(50% + 0.2em);
  left: -3.589vw;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  footer .footer-link li:not(:first-of-type)::after {
    width: 1.33px;
    left: -18.62px;
  }
}
footer .footer-link a {
  color: #fff;
  font-weight: 300;
  font-size: 3.33vw;
  transition: 0.2s;
}
@media screen and (min-width: 768px) {
  footer .footer-link a {
    font-size: 17.29px;
  }
}
footer .footer-link a:hover {
  color: #3232f0;
}
footer .footer-link .mail a {
  position: relative;
  padding-left: 1.2em;
}
footer .footer-link .mail a::before {
  display: block;
  position: absolute;
  content: "";
  width: 2.82vw;
  height: 2.564vw;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M1.91667 0C1.41667 0 0.916667 0.25 0.583333 0.583333C0.25 0.916667 0 1.41667 0 1.91667V2.08333L5.66667 5.16667L11.3333 2.16667V1.91667C11.3333 1.41667 11.1667 0.916667 10.75 0.583333C10.4167 0.25 9.91667 0 9.41667 0H1.91667ZM11.3333 3.16667L5.91667 6.08333C5.83333 6.08333 5.75 6.16667 5.66667 6.16667C5.58333 6.16667 5.5 6.16667 5.41667 6.08333L0 3.16667V7.5C0 8 0.166667 8.5 0.583333 8.83333C0.916667 9.16667 1.41667 9.41667 1.91667 9.41667H9.41667C9.91667 9.41667 10.4167 9.25 10.75 8.83333C11.0833 8.5 11.3333 8 11.3333 7.5V3.16667Z' fill='white'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath id='Vector' d='M1.91667 0C1.41667 0 0.916667 0.25 0.583333 0.583333C0.25 0.916667 0 1.41667 0 1.91667V2.08333L5.66667 5.16667L11.3333 2.16667V1.91667C11.3333 1.41667 11.1667 0.916667 10.75 0.583333C10.4167 0.25 9.91667 0 9.41667 0H1.91667ZM11.3333 3.16667L5.91667 6.08333C5.83333 6.08333 5.75 6.16667 5.66667 6.16667C5.58333 6.16667 5.5 6.16667 5.41667 6.08333L0 3.16667V7.5C0 8 0.166667 8.5 0.583333 8.83333C0.916667 9.16667 1.41667 9.41667 1.91667 9.41667H9.41667C9.91667 9.41667 10.4167 9.25 10.75 8.83333C11.0833 8.5 11.3333 8 11.3333 7.5V3.16667Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: top center;
          mask-position: top center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background-color: #fff;
  top: 50%;
  transform: translateY(-25%);
  transition: 0.2s;
}
@media screen and (min-width: 768px) {
  footer .footer-link .mail a::before {
    width: 14.63px;
    height: 13.3px;
  }
}
footer .footer-link .mail a:hover::before {
  background-color: #3232f0;
}
footer .copy {
  margin-top: 7.179vw;
  color: #fff;
  font-weight: 300;
  font-size: 2.564vw;
  text-align: center;
}
@media screen and (min-width: 768px) {
  footer .copy {
    margin-top: 37.24px;
    font-size: 13.3px;
  }
}

#floating {
  position: fixed;
  bottom: 8.205vw;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 99;
  opacity: 1;
  visibility: visible;
  transition: all 0.2s;
}
#floating a {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 77.948vw;
  height: 12.564vw;
  border: #000 0.512vw solid;
  border-radius: 8.717vw;
  background-color: #3232f0;
  color: #fff;
  font-size: 3.589vw;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  box-shadow: 0 2.05vw 6.28vw 1.538vw rgba(50, 50, 240, 0.3), 0 1.28vw 2.05vw 0 rgba(0, 0, 0, 0.2);
}
#floating a::after {
  position: absolute;
  display: block;
  content: "";
  width: 2.564vw;
  height: 2.564vw;
  background: url(../images/parts-button-arrow.svg) no-repeat center/100%;
  right: 12.82vw;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
  #floating {
    display: none;
  }
}
#floating.is-hide {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 100%);
}

.section-info h2.scroll-anm + * {
  opacity: 0;
  translate: 0 20%;
  transition: all 0.3s ease-out;
}
.section-info h2.is-scrActive + * {
  opacity: 1;
  translate: 0 0;
}

#intro .lead-text.scroll-anm {
  filter: blur(10px);
  transition: all 0.2s ease-in;
}
#intro .lead-text.scroll-anm span::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: all 0.2s 0.5s;
}
#intro .lead-text.is-scrActive {
  filter: blur(0);
}
#intro .lead-text.is-scrActive span::after {
  transform: scaleX(1);
}

#howto h3.scroll-anm img {
  filter: blur(10px);
  transition: all 0.3s;
}
#howto h3.is-scrActive img {
  filter: blur(0);
}
#howto li.scroll-anm::before {
  opacity: 0;
  translate: -40% 0;
  transition: all 0.2s;
}
#howto li.scroll-anm .title p {
  opacity: 0;
  translate: 20% 0;
  transition: all 0.2s 0.05s;
}
#howto li.scroll-anm .box {
  opacity: 0;
  translate: 0 10%;
  transition: all 0.3s ease-out 0.2s;
}
#howto li.scroll-anm.is-scrActive::before {
  opacity: 1;
  translate: 0 0;
}
#howto li.scroll-anm.is-scrActive .title p {
  opacity: 1;
  translate: 0 0;
}
#howto li.scroll-anm.is-scrActive .box {
  opacity: 1;
  translate: 0 0;
}
#howto .no-title.scroll-anm {
  opacity: 0;
  translate: 0 10%;
  transition: all 0.3s ease-out 0.2s;
}
#howto .no-title.scroll-anm.is-scrActive {
  opacity: 1;
  translate: 0 0;
}

#campaign .attention.scroll-anm {
  transform: scale(0);
}
#campaign .attention.scroll-anm.is-scrActive {
  animation: bound 0.2s ease-out both;
}
#campaign .campaign-block li.scroll-anm {
  opacity: 0;
  translate: 0 10%;
  transition: all 0.3s ease-out;
}
#campaign .campaign-block li.scroll-anm.is-scrActive {
  opacity: 1;
  translate: 0 0;
}

@keyframes bound {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    translate: 0 10%;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}/*# sourceMappingURL=style.css.map */