@keyframes about-bg-default {
  0%, 30% {
    filter: blur(6px);
    opacity: 0;
  }
  99% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: none;
    opacity: 1;
  }
}
@keyframes about-bg-blur {
  0%, 30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes about-bg-in-pc {
  0% {
    filter: blur(10px);
    opacity: 0;
    transform: translate3d(-50%, -25%, 0);
  }
  20% {
    opacity: 1;
  }
  40% {
    filter: blur(10px);
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    filter: blur(0);
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes about-bg-loop-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(50%);
  }
}
.chara-switch {
  display: none;
}
.chara-switch.js--ready {
  display: block;
  height: 100svh;
}

.after-section.js--ready {
  height: 20svh;
}
@media only screen and (max-width: 767px) {
  .after-section.js--ready {
    height: 110svh;
  }
}

body.js-cursor-on-about .common__circle-cursor-ring.js-cursor-global-ring {
  mix-blend-mode: hard-light;
}

.about {
  position: relative;
  z-index: 2;
  min-height: 100svh;
}
body.isTablet .about {
  min-height: 100lvh;
}
@media only screen and (min-width: 768px) {
  .about {
    mask-image: linear-gradient(to right, transparent 0%, #000 1.5%, #000 98.5%, transparent 100%);
  }
}
@media only screen and (min-width: 1920px) {
  .about {
    mask-image: linear-gradient(to right, transparent 0, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%, transparent 100%);
  }
}
@media only screen and (max-width: 767px) {
  .about::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 13.3333333333vw;
    background: linear-gradient(180deg, rgba(28, 225, 255, 0) 0%, rgb(245, 245, 245) 100%);
  }
}
.about.js--cutin-cover {
  z-index: 5;
}
.about.js--no-cursor .common__circle-cursor, .about.js--no-cursor .common__circle-cursor-ring {
  opacity: 0 !important;
  visibility: hidden !important;
}
@media only screen and (max-width: 767px) {
  .about .common__circle-cursor {
    background: rgba(0, 0, 0, 0.25);
  }
}
@media only screen and (max-width: 767px) {
  .about .common__circle-cursor,
  .about .common__circle-cursor-ring {
    top: 39%;
  }
}
@media only screen and (min-width: 768px) {
  .about .common__circle-cursor,
  .about .common__circle-cursor-ring {
    transform: translate(-50%, 100%);
  }
}
body.isTablet .about .common__circle-cursor,
body.isTablet .about .common__circle-cursor-ring {
  transform: translate(-50%, 140%);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.isTablet .about .common__circle-cursor,
  body.isTablet .about .common__circle-cursor-ring {
    transform: translate(-50%, 100%);
  }
}
@media only screen and (min-width: 768px) and (orientation: landscape) and (min-height: 768px) and (max-height: 1024px) {
  body.isTablet .about .common__circle-cursor,
  body.isTablet .about .common__circle-cursor-ring {
    transform: translate(-50%, 150%);
  }
}
.about__link {
  display: none;
}
.about__modal-btn a {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
}
@media only screen and (max-width: 767px) {
  .about__modal-btn {
    width: 73.6vw;
    height: 16vw;
    margin: 0 auto;
    border: 0.2666666667vw solid #fff;
    border-radius: 16vw;
    color: #fff;
    font-family: "Zen Old Mincho", serif;
    font-size: 5.6vw;
    line-height: 15.2vw;
    text-align: center;
    background: url("../img/top/about/bg_btn.webp") no-repeat center center;
    background-size: 100% auto;
  }
}
@media only screen and (min-width: 768px) {
  .about__modal-btn {
    display: none;
  }
}
.about__bg {
  position: absolute;
  top: 29.3333333333vw;
  left: 50%;
  width: 141.3333333333vw;
  height: 58.9333333333vw;
  transform: translate(-50%, -10%) scale(0.85);
  transform-origin: center 50%;
}
@media only screen and (min-width: 768px) {
  .about__bg {
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 41.7333333333vw;
    transform: translate(-50%, -50%) scale(0.85);
  }
}
@media (min-width: 1920px) {
  .about__bg {
    width: 1536px;
    height: 641px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .about__bg {
    top: 30%;
  }
}
@media only screen and (max-width: 767px) {
  .about__bg {
    mask-image: url("../img/top/about/bg_blur.webp");
    mask-size: 100% auto;
    mask-position: 100% 0%;
    mask-repeat: no-repeat;
  }
  .about__bg .about__bg-inner {
    mask-image: url("../img/top/about/bg.webp");
    mask-size: 100% auto;
    mask-position: 100% 0%;
    mask-repeat: no-repeat;
  }
  .about__bg .about__bg-inner::before {
    mix-blend-mode: overlay;
  }
  .about__bg.js--loop {
    mask-image: none;
  }
  .about__bg.js--loop .about__bg-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 200%;
    height: 100%;
    background: linear-gradient(100deg, rgba(220, 0, 60, 0) 0%, rgba(220, 0, 60, 0.08) 8%, rgba(220, 0, 60, 0.22) 14%, rgba(220, 0, 60, 0.42) 19%, rgba(220, 0, 60, 0.58) 23%, rgba(220, 0, 60, 0.65) 25%, rgba(220, 0, 60, 0.58) 27%, rgba(220, 0, 60, 0.42) 31%, rgba(220, 0, 60, 0.22) 36%, rgba(220, 0, 60, 0.08) 42%, rgba(220, 0, 60, 0) 50%, rgba(220, 0, 60, 0.08) 58%, rgba(220, 0, 60, 0.22) 64%, rgba(220, 0, 60, 0.42) 69%, rgba(220, 0, 60, 0.58) 73%, rgba(220, 0, 60, 0.65) 75%, rgba(220, 0, 60, 0.58) 77%, rgba(220, 0, 60, 0.42) 81%, rgba(220, 0, 60, 0.22) 86%, rgba(220, 0, 60, 0.08) 92%, rgba(220, 0, 60, 0) 100%);
    animation: about-bg-loop-sweep 8s linear infinite;
    pointer-events: none;
  }
}
.about__bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about__bg-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.about__bg-inner img {
  margin: 0 auto;
}
.about__bg-inner img.about__bg-img-default {
  opacity: 0;
}
.about__bg-inner img.about__bg-img-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
}
.about__bg.js--anime {
  transition: transform 0.4s cubic-bezier(0.33, 0.235, 0.045, 0.95);
  transform: translate3d(-50%, 0, 0) scale(1);
}
@media only screen and (min-width: 768px) {
  .about__bg.js--anime {
    transform: translate(-50%, -50%) scale(1);
  }
}
.about__bg.js--anime .about__bg-inner {
  opacity: 1;
}
.about__bg.js--anime .about__bg-inner img.about__bg-img-default {
  animation: about-bg-default 0.4s cubic-bezier(0.33, 0.235, 0.045, 0.95);
  animation-fill-mode: forwards;
}
.about__bg.js--anime .about__bg-inner img.about__bg-img-blur {
  animation: about-bg-blur 0.4s cubic-bezier(0.33, 0.235, 0.045, 0.95);
  animation-fill-mode: forwards;
}
.about__container {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
  margin-inline: auto;
  overflow: hidden;
  pointer-events: none;
}
@media (min-width: 1920px) {
  .about__container .about__cutin-chara-wrap {
    width: 1920px;
  }
}
.about__container.js--anime {
  position: sticky;
  top: 0;
  pointer-events: auto;
}
.about__inner {
  position: relative;
  z-index: 1;
  padding: 26.6666666667vw 0vw 0;
}
@media only screen and (min-width: 768px) {
  .about__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 100svh;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .about__inner {
    padding: 0px 140px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .about__inner {
    padding: 0px 200px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .about__inner {
    padding: 0px 240px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (min-width: 768px) {
  body.isTablet .about__inner {
    padding: 0px 105px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (min-width: 1280px) {
  body.isTablet .about__inner {
    padding: 0px 150px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (min-width: 1920px) {
  body.isTablet .about__inner {
    padding: 0px 180px 0px;
  }
}
@media only screen and (min-width: 1920px) {
  .about__inner {
    width: 1920px;
    margin: 0 auto;
  }
}
.about__content {
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .about__content {
    margin-left: 5.3333333333vw;
    overflow: hidden;
  }
  .about__content.is-slid-in-init {
    transition: transform 0.7s cubic-bezier(0.005, 0.13, 0.03, 0.975);
    transition-delay: 0.2s;
    transform: translateX(-65vw);
    will-change: transform;
  }
  .about__content.is-slid-in-init.is-slid-in {
    transform: translateX(0);
  }
  .about__content {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, #000 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, #000 100%);
  }
}
@media only screen and (min-width: 768px) {
  .about__content {
    width: 100%;
  }
}
body.isTablet .about__content {
  width: 100%;
  margin-left: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
.about__desc {
  position: relative;
  font-family: "Zen Old Mincho", serif;
  line-height: 6.6666666667vw;
}
@media only screen and (max-width: 767px) {
  .about__desc {
    width: max-content;
    will-change: transform;
  }
}
body.isTablet .about__desc {
  width: auto;
}
@media (min-width: 768px) {
  .about__desc {
    line-height: 23.8px;
  }
}
@media (min-width: 1280px) {
  .about__desc {
    line-height: 34px;
  }
}
@media (min-width: 1920px) {
  .about__desc {
    line-height: 40.8px;
  }
}
.about__desc-negative {
  margin-left: -2.1333333333vw;
}
@media (min-width: 768px) {
  .about__desc-negative {
    margin-left: -8.4px;
  }
}
@media (min-width: 1280px) {
  .about__desc-negative {
    margin-left: -12px;
  }
}
@media (min-width: 1920px) {
  .about__desc-negative {
    margin-left: -14.4px;
  }
}
.about__desc-layer {
  clip-path: polygon(110% 0%, 110% 0%, 110% 100%, 110% 100%);
}
@media only screen and (max-width: 767px) {
  .about__desc-layer {
    transform: translateZ(0);
    will-change: clip-path;
    backface-visibility: hidden;
  }
}
.about__desc-layer--1, .about__desc-layer--2 {
  position: absolute;
  inset: 0;
}
.about__desc-layer--1 {
  z-index: 1;
}
.about__desc-layer--1 .about__desc-text {
  color: #9f9f9f;
}
.about__desc-layer--2 {
  z-index: 2;
}
.about__desc-layer--2 .about__desc-text {
  background: url("../img/common/bg_gradient_about.webp") no-repeat 43% 50%/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 768px) {
  .about__desc-layer--2 .about__desc-title {
    margin-block: -0.3em;
    padding-block: 0.3em;
  }
}
.about__desc-layer--3 {
  position: relative;
  z-index: 3;
  display: flow-root;
}
.about__desc-text {
  color: #262626;
  font-size: 4.2666666667vw;
  line-height: 6.9333333333vw;
}
@media (min-width: 768px) {
  .about__desc-text {
    font-size: 12.6px;
  }
}
@media (min-width: 1280px) {
  .about__desc-text {
    font-size: 18px;
  }
}
@media (min-width: 1920px) {
  .about__desc-text {
    font-size: 21.6px;
  }
}
@media (min-width: 768px) {
  .about__desc-text {
    margin-top: 16.8px;
  }
}
@media (min-width: 1280px) {
  .about__desc-text {
    margin-top: 24px;
  }
}
@media (min-width: 1920px) {
  .about__desc-text {
    margin-top: 28.8px;
  }
}
@media (min-width: 768px) {
  .about__desc-text {
    line-height: 21px;
  }
}
@media (min-width: 1280px) {
  .about__desc-text {
    line-height: 30px;
  }
}
@media (min-width: 1920px) {
  .about__desc-text {
    line-height: 36px;
  }
}
@media (min-width: 768px) {
  .about__desc-text:first-of-type:not(.about__desc-title) {
    margin-top: 33.6px;
  }
}
@media (min-width: 1280px) {
  .about__desc-text:first-of-type:not(.about__desc-title) {
    margin-top: 48px;
  }
}
@media (min-width: 1920px) {
  .about__desc-text:first-of-type:not(.about__desc-title) {
    margin-top: 57.6px;
  }
}
.about__desc-text-negative {
  margin-top: -0.2666666667vw;
}
@media (min-width: 768px) {
  .about__desc-text-negative {
    margin-top: -7px;
  }
}
@media (min-width: 1280px) {
  .about__desc-text-negative {
    margin-top: -10px;
  }
}
@media (min-width: 1920px) {
  .about__desc-text-negative {
    margin-top: -12px;
  }
}
.about__desc-text-spacing {
  letter-spacing: -0.2em;
}
@media only screen and (min-width: 768px) {
  .about__desc-text-spacing {
    letter-spacing: -0.2em;
  }
}
.about__desc-title {
  font-size: 8.5333333333vw;
  font-weight: 700;
  letter-spacing: -0.05em;
}
@media only screen and (min-width: 768px) {
  .about__desc-title {
    letter-spacing: -0.075em;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .about__desc-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .about__desc-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .about__desc-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .about__desc-title {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .about__desc-title {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .about__desc-title {
    margin-top: 0px;
  }
}
@media only screen and (max-width: 768px) {
  .about__desc-title {
    margin-right: 29.3333333333vw;
    padding-left: 3.4666666667vw;
    text-align: center;
  }
}
.about__desc-title-eng {
  letter-spacing: 0.05em;
  writing-mode: initial;
}
@media only screen and (min-width: 768px) {
  .about__desc-title-eng {
    letter-spacing: 0.05em;
  }
}
.about__cursor-wrapper {
  display: none;
}
body.isTablet .about__cursor-wrapper {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
}
.about__cutin-chara {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .about__cutin-chara {
    overflow: hidden;
  }
}
@media only screen and (max-width: 767px) {
  .about__cutin-chara .about__cutin-chara-inner-1-mask {
    position: absolute;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }
  .about__cutin-chara .about__cutin-chara-inner-1-mask video,
  .about__cutin-chara .about__cutin-chara-inner-1-mask canvas {
    max-width: none;
  }
}
@media only screen and (min-width: 768px) {
  .about__cutin-chara .about__cutin-chara-inner-1-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 100%);
  }
}
@media only screen and (min-width: 1920px) {
  .about__cutin-chara .about__cutin-chara-inner-1-mask {
    mask-image: none;
  }
  .about__cutin-chara .about__cutin-chara-inner-1-mask canvas {
    left: 50%;
    width: 100vw;
    max-width: none;
    transform: translateX(-50%);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.isTablet .about__cutin-chara .about__cutin-chara-inner-1-mask canvas {
    left: 50%;
    width: 200vw;
    max-width: none;
    transform: translateX(-50%);
  }
}
.about__cutin-chara video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__cutin-chara .about__cutin-chara-video-1 {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.about__cutin-chara .about__cutin-chara-canvas-1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 1920px) {
  .about__cutin-chara-wrap {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateX(-50%);
  }
}
.about__cutin-chara-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about__cutin-chara-inner-1 {
  opacity: 0;
}
.about__cutin-chara-inner-1.js--show {
  opacity: 1;
}
body.isTablet .about__cutin-chara-inner-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  body.isTablet .about__cutin-chara-inner-1 {
    width: 100%;
    transform: translate(-50%, -50%);
  }
}
.about__cutin-chara-inner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
@media only screen and (max-width: 767px) {
  .about__cutin-chara-inner-2 {
    display: none;
  }
}
.about__cutin-chara-inner-2-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 87%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 87%, transparent 100%);
}
@media only screen and (min-width: 768px) {
  .about__cutin-chara-inner-2 video,
  .about__cutin-chara-inner-2 canvas {
    object-position: center top;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0%, #000 92%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: right center;
    mask-position: right center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}
@media only screen and (max-width: 767px) {
  .about__cutin-chara-inner-2 video,
  .about__cutin-chara-inner-2 canvas {
    position: relative;
    top: 58%;
    left: 50%;
    width: 100%;
    max-width: none;
    height: 100%;
    transform: translate(-50%, -50%);
  }
}
.about__cutin-chara-inner-2 {
  transition: opacity 0.8s ease;
}
.about__cutin-chara-inner-2.js--show {
  opacity: 1;
}
@media only screen and (max-width: 767px) {
  .about {
    z-index: 2;
    min-height: auto;
    overflow: visible;
  }
  .about.js--cutin-cover {
    z-index: 2;
  }
  .about .common__circle-cursor,
  .about .common__circle-cursor-ring {
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }
  .about.is-cursor-shown .common__circle-cursor, .about.is-cursor-shown .common__circle-cursor-ring {
    opacity: 1;
    pointer-events: auto;
  }
  .about__container {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    margin-inline: 0;
    overflow: visible;
    pointer-events: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about__container.js--anime {
    position: relative;
    top: auto;
  }
  .about__cutin-chara {
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .about__cutin-chara {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 94%, transparent 100%);
  }
}
@media only screen and (max-width: 767px) {
  .about__cutin-chara-inner-1 {
    position: sticky;
    top: 0;
    bottom: auto;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100lvh;
    opacity: 0;
  }
  .about__cutin-chara-inner-1.js--show {
    opacity: 1;
  }
  .about__cutin-chara-inner-1-mask {
    position: relative;
    left: auto;
    width: 100%;
    height: 100%;
    transform: none;
  }
  .about__cutin-chara-inner-1-mask video,
  .about__cutin-chara-inner-1-mask canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    -webkit-mask-image: none;
    mask-image: none;
    object-fit: cover;
  }
  .about__inner {
    position: relative;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 26.6666666667vw 0vw 29.3333333333vw;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
}
@media only screen and (max-width: 767px) and (max-width: 767px) {
  .about__inner {
    letter-spacing: -0.05em;
  }
}
@media only screen and (max-width: 767px) {
  .about__inner.is-shown {
    opacity: 1;
  }
  .about__scroller {
    position: relative;
    height: 0;
    pointer-events: none;
  }
  .about__content {
    width: 100%;
    margin-left: 0;
    overflow: visible;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about__content.is-slid-in-init, .about__content.is-slid-in-init.is-slid-in {
    transform: none;
    will-change: auto;
  }
  .about__desc {
    width: 100%;
    line-height: 1.7;
    writing-mode: horizontal-tb;
  }
  .about__desc-layer {
    transform: none;
    will-change: auto;
    backface-visibility: visible;
  }
  .about__desc-layer--1 {
    position: absolute;
    display: block;
    clip-path: none;
    inset: 0;
  }
  .about__desc-layer--2 {
    position: absolute;
    display: block;
    transition: clip-path 0.8s ease-out;
    clip-path: polygon(110% 0%, 110% 0%, 110% 100%, 110% 100%);
    inset: 0;
  }
  .about__desc-layer--2 .about__desc-text {
    color: transparent;
    background: url("../img/common/bg_gradient_about.webp") no-repeat 43% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .about__desc-layer--3 {
    position: relative;
    transition: clip-path 0.8s ease-out;
    clip-path: polygon(110% 0%, 110% 0%, 110% 100%, 110% 100%);
    inset: auto;
  }
  .about__desc-text {
    margin-top: 5.3333333333vw;
    line-height: 7.2vw;
  }
  .about__desc-text-negative {
    margin-top: 0;
  }
  .about__desc-title {
    margin: 0 0 10vw 0vw;
    padding-left: 0;
  }
  .about__desc-title-eng {
    writing-mode: horizontal-tb;
    margin: 0.4vw;
  }
}

@media only screen and (max-width: 767px) {
  .chara-switch,
  .after-section {
    display: none !important;
  }
  .chara-switch.js--ready,
  .after-section.js--ready {
    display: none !important;
  }
}
.banner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 5.3333333333vw 0;
  overflow: hidden;
}
@media (min-width: 768px) {
  .banner {
    padding: 28px 0px;
  }
}
@media (min-width: 1280px) {
  .banner {
    padding: 40px 0px;
  }
}
@media (min-width: 1920px) {
  .banner {
    padding: 48px 0px;
  }
}
.banner[data-banner-count="1"] .banner__swiper {
  padding: 0 5.3333333333vw;
  overflow: visible;
}
@media (min-width: 768px) {
  .banner[data-banner-count="1"] .banner__swiper {
    padding: 0px 28px;
  }
}
@media (min-width: 1280px) {
  .banner[data-banner-count="1"] .banner__swiper {
    padding: 0px 40px;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="1"] .banner__swiper {
    padding: 0px 48px;
  }
}
.banner[data-banner-count="1"] .banner__item {
  width: 100%;
}
.banner[data-banner-count="2"] .banner__swiper {
  display: flex;
  gap: 2.6666666667vw;
  padding: 0 5.3333333333vw;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
}
@media (min-width: 768px) {
  .banner[data-banner-count="2"] .banner__swiper {
    padding: 0px 28px;
  }
}
@media (min-width: 1280px) {
  .banner[data-banner-count="2"] .banner__swiper {
    padding: 0px 40px;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="2"] .banner__swiper {
    padding: 0px 48px;
  }
}
@media (min-width: 768px) {
  .banner[data-banner-count="2"] .banner__swiper {
    gap: 14px;
  }
}
@media (min-width: 1280px) {
  .banner[data-banner-count="2"] .banner__swiper {
    gap: 20px;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="2"] .banner__swiper {
    gap: 24px;
  }
}
.banner[data-banner-count="2"] .banner__swiper::-webkit-scrollbar {
  display: none;
}
.banner[data-banner-count="2"] .banner__item {
  flex-shrink: 0;
  width: 80vw;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  .banner[data-banner-count="2"] .banner__item {
    width: 41.6666666667vw;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="2"] .banner__item {
    width: 720px;
  }
}
.banner[data-banner-count="3"] .banner__swiper, .banner[data-banner-count="4"] .banner__swiper, .banner[data-banner-count="5"] .banner__swiper {
  padding: 0 5.3333333333vw;
  overflow: hidden;
}
@media (min-width: 768px) {
  .banner[data-banner-count="3"] .banner__swiper, .banner[data-banner-count="4"] .banner__swiper, .banner[data-banner-count="5"] .banner__swiper {
    padding: 0px 28px;
  }
}
@media (min-width: 1280px) {
  .banner[data-banner-count="3"] .banner__swiper, .banner[data-banner-count="4"] .banner__swiper, .banner[data-banner-count="5"] .banner__swiper {
    padding: 0px 40px;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="3"] .banner__swiper, .banner[data-banner-count="4"] .banner__swiper, .banner[data-banner-count="5"] .banner__swiper {
    padding: 0px 48px;
  }
}
.banner[data-banner-count="3"] .banner__item, .banner[data-banner-count="4"] .banner__item, .banner[data-banner-count="5"] .banner__item {
  width: 80vw;
}
@media (min-width: 768px) {
  .banner[data-banner-count="3"] .banner__item, .banner[data-banner-count="4"] .banner__item, .banner[data-banner-count="5"] .banner__item {
    width: 41.6666666667vw;
  }
}
@media (min-width: 1920px) {
  .banner[data-banner-count="3"] .banner__item, .banner[data-banner-count="4"] .banner__item, .banner[data-banner-count="5"] .banner__item {
    width: 720px;
  }
}
.banner__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.0666666667vw;
}
@media (min-width: 768px) {
  .banner__img {
    border-radius: 5.6px;
  }
}
@media (min-width: 1280px) {
  .banner__img {
    border-radius: 8px;
  }
}
@media (min-width: 1920px) {
  .banner__img {
    border-radius: 9.6px;
  }
}

@keyframes cursor-ripple-movie {
  0% {
    width: 100%;
    height: 100%;
    filter: blur(4px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    width: 120%;
    height: 160%;
    filter: blur(3px);
    opacity: 0;
  }
  95%, 100% {
    width: 120%;
    height: 160%;
    filter: blur(3px);
    opacity: 0;
  }
}
body.js-cursor-on-movie .common__circle-cursor-ring.js-cursor-global-ring {
  mix-blend-mode: hard-light;
}

body:not(:has(.news)) .movie {
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  body:not(:has(.news)) .movie {
    margin-top: -6.6666666667vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  body:not(:has(.news)) .movie {
    margin-top: -128px;
  }
}

.movie {
  position: relative;
  z-index: 4;
  height: 300vh;
  margin-top: 29.3333333333vw;
  contain: layout paint;
}
@media only screen and (min-width: 768px) {
  .movie {
    margin-top: 12.6388888889vw;
    height: 200vh;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie {
    margin-top: 242.6666666667px;
  }
}
.movie__sticky {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
  contain: layout paint;
}
.movie__cursor-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .movie__cursor-wrapper {
    height: 100dvh;
  }
  .movie__cursor-wrapper .common__circle-cursor-ring {
    mix-blend-mode: none;
  }
  .movie__cursor-wrapper:has(.common__circle-cursor-ring) {
    mix-blend-mode: hard-light;
  }
}
.movie__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: center center;
  will-change: transform, opacity;
}
.movie__tile-grid {
  --tile-gap-base: 0.5333333333vw;
  --tile-extra-gap: 0;
  display: grid;
  gap: calc(var(--tile-gap-base) + var(--tile-extra-gap) * 1px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  transform: translateZ(0);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .movie__tile-grid {
    --tile-gap-base: 2.8px;
  }
}
@media (min-width: 1280px) {
  .movie__tile-grid {
    --tile-gap-base: 4px;
  }
}
@media (min-width: 1920px) {
  .movie__tile-grid {
    --tile-gap-base: 4.8px;
  }
}
.movie__tile {
  overflow: hidden;
  border-radius: 0.8vw;
  background: #f5f5f5;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .movie__tile {
    border-radius: 5.6px;
  }
}
@media (min-width: 1280px) {
  .movie__tile {
    border-radius: 8px;
  }
}
@media (min-width: 1920px) {
  .movie__tile {
    border-radius: 9.6px;
  }
}
.movie__tile-video {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  object-fit: cover;
  backface-visibility: hidden;
}
.movie__tile-poster {
  position: absolute;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
  inset: 0;
}
.movie__tile-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.movie__tile.is-loaded .movie__tile-poster {
  opacity: 0;
}
.movie__normal {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(36px);
  pointer-events: none;
  will-change: opacity, transform;
}
.movie__post-scroll {
  height: 75svh;
  pointer-events: none;
}
.movie__main {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.movie__main-img {
  width: 100%;
  height: 100%;
}
.movie__main-img picture {
  height: 100%;
}
.movie__main-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (max-width: 767px) {
  .movie {
    height: auto;
    contain: none;
  }
  .movie__sticky {
    position: static;
    height: auto;
    overflow: visible;
    contain: none;
  }
  .movie__stage {
    position: relative;
    inset: auto;
    transform: none;
    will-change: auto;
  }
  .movie__tile-grid {
    display: block;
    gap: 0;
    width: 100%;
    height: auto;
    background: transparent;
    transform: none;
    will-change: auto;
    backface-visibility: visible;
  }
  .movie__tile-grid .movie__tile:not(.movie__tile--main) {
    display: none;
  }
  .movie__tile {
    border-radius: 0;
    background: transparent;
    transform: none;
    will-change: auto;
    backface-visibility: visible;
  }
  .movie__tile--main {
    display: block;
    width: 90%;
    margin: 0 auto;
  }
  .movie__tile-video {
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1.3333333333vw;
    transform: none;
    object-fit: cover;
    backface-visibility: visible;
    aspect-ratio: 16/9;
  }
  .movie__cursor-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .movie__cursor-wrapper:has(.common__circle-cursor-ring) {
    display: none;
  }
  .movie__cursor-wrapper .common__circle-cursor-text {
    color: #000;
    font-size: 3.2vw;
    line-height: 4.2666666667vw;
    letter-spacing: 0.08em;
    text-align: center;
  }
  .movie__cursor-wrapper .common__circle-cursor {
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    border: 0.2666666667vw solid #9f9f9f;
    background: #fff;
    box-shadow: none;
  }
  .movie__cursor-wrapper .common__circle-cursor::after {
    display: none;
  }
  .movie__cursor-wrapper .common__circle-cursor,
  .movie__cursor-wrapper .common__circle-cursor-ring {
    opacity: 1;
  }
}

@media only screen and (max-width: 767px) {
  .movie__post-scroll {
    display: none;
  }
}
.movie-list {
  position: relative;
  z-index: 3;
}
@media only screen and (max-width: 767px) {
  .movie-list {
    width: 84vw;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list {
    padding: 0 1.3888888889vw;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__container {
    margin: 0 auto;
    padding: 0 4.0277777778vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__container {
    max-width: 1008px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__container {
    max-width: 1440px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__container {
    max-width: 1728px;
  }
}
.movie-list__inner {
  width: 100%;
  margin: 0 auto;
  padding: 8vw 5.3333333333vw;
  border-radius: 1.3333333333vw;
  background: #ffffff;
}
@media only screen and (min-width: 768px) {
  .movie-list__inner {
    width: 100%;
    padding: 4.1666666667vw;
    border-radius: 0.6944444444vw;
  }
}
.movie-list__item {
  margin-bottom: 8vw;
  padding-bottom: 6.4vw;
  border-bottom: 0.6666666667vw solid #ececec;
}
@media (min-width: 768px) {
  .movie-list__item {
    border-bottom-width: 1.4px;
  }
}
@media (min-width: 1280px) {
  .movie-list__item {
    border-bottom-width: 2px;
  }
}
@media (min-width: 1920px) {
  .movie-list__item {
    border-bottom-width: 2.4px;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__item {
    margin-bottom: 2.7777777778vw;
    padding-bottom: 2.7777777778vw;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__item:last-of-type {
    margin-bottom: 0;
  }
}
.movie-list__item-link {
  display: block;
  color: #262626;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .movie-list__item-link {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__item-link {
    gap: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__item-link {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__item-link {
    gap: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__item-link .movie-list__title {
    background: url("../img/common/bg_gradient_about.webp") no-repeat 50% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .movie-list__item-link .movie-list__title {
      -webkit-text-fill-color: currentcolor;
      transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
    }
  }
  .movie-list__item-link:hover .movie-list__title {
    color: transparent;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .movie-list__item-link:hover .movie-list__title {
      -webkit-text-fill-color: transparent;
    }
  }
}
.movie-list__thumb {
  position: relative;
  overflow: hidden;
  border-radius: 1.3333333333vw;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 768px) {
  .movie-list__thumb {
    flex: none;
    width: 20.8333333333vw;
    border-radius: 0.6944444444vw;
  }
}
.movie-list__thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.movie-list__play {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 2.6666666667vw;
  bottom: 2.6666666667vw;
  width: 8.6666666667vw;
  height: 8.6666666667vw;
  border: 0.4vw solid #9f9f9f;
  border-radius: 50%;
  background: #ffffff;
}
@media (min-width: 768px) {
  .movie-list__play {
    border-width: 1.4px;
  }
}
@media (min-width: 1280px) {
  .movie-list__play {
    border-width: 2px;
  }
}
@media (min-width: 1920px) {
  .movie-list__play {
    border-width: 2.4px;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__play {
    right: 0.6944444444vw;
    bottom: 0.6944444444vw;
    width: 3.125vw;
    height: 3.125vw;
  }
}
.movie-list__play::before {
  content: "";
  position: absolute;
  padding: 0.4vw;
  border-radius: inherit;
  background: url("../img/common/bg_gradient_about.webp") center/cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  inset: -0.4vw;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media only screen and (min-width: 768px) {
  .movie-list__play::before {
    padding: 2px;
    inset: -2px;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__thumb:hover .movie-list__play::before {
    opacity: 1;
  }
}
.movie-list__play-icon {
  width: 2.6666666667vw;
  height: auto;
  margin-left: 0.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .movie-list__play-icon {
    width: 1.1111111111vw;
    margin-left: 0.2083333333vw;
  }
}
.movie-list__title {
  display: -webkit-box;
  margin-top: 5.3333333333vw;
  overflow: hidden;
  font-size: 3.7333333333vw;
  line-height: 6.9333333333vw;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (min-width: 768px) {
  .movie-list__title {
    font-size: 12.6px;
  }
}
@media (min-width: 1280px) {
  .movie-list__title {
    font-size: 18px;
  }
}
@media (min-width: 1920px) {
  .movie-list__title {
    font-size: 21.6px;
  }
}
@media only screen and (min-width: 768px) {
  .movie-list__title {
    margin-top: 0;
    color: #0d0d0d;
    -webkit-line-clamp: 2;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__title {
    line-height: 22.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__title {
    line-height: 32px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__title {
    line-height: 38.4px;
  }
}
.movie-list__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 73.3333333333vw;
  height: 12.4vw;
  margin: 0 auto;
  border: 1px solid #9f9f9f;
  border-radius: 12.4vw;
  color: #262626;
  font-family: "Zen Old Mincho", serif;
  font-size: 3.7333333333vw;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: #ffffff;
}
@media only screen and (min-width: 768px) {
  .movie-list__btn {
    margin-top: 4.1666666667vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn {
    font-size: 12.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn {
    font-size: 21.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn {
    width: 266px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn {
    width: 380px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn {
    width: 456px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn {
    height: 38.5px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn {
    height: 55px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn {
    height: 66px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn {
    border-radius: 38.5px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn {
    border-radius: 55px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn {
    border-radius: 66px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn {
    letter-spacing: -0.07px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn {
    letter-spacing: -0.1px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn {
    letter-spacing: -0.12px;
  }
}
.movie-list__btn::before {
  content: "";
  position: absolute;
  padding: 2px;
  border-radius: inherit;
  background: url("../img/common/bg_gradient_about.webp") center/cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  inset: -1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
@media only screen and (min-width: 768px) {
  .movie-list__btn {
    color: #0d0d0d;
  }
  .movie-list__btn:hover::before {
    opacity: 1;
  }
}
.movie-list__btn-icon {
  width: 3.6vw;
  height: auto;
  margin-right: 2.4vw;
}
@media only screen and (max-width: 767px) {
  .movie-list__btn-icon {
    margin-top: 0.4vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn-icon {
    width: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn-icon {
    width: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn-icon {
    width: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .movie-list__btn-icon {
    margin-right: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .movie-list__btn-icon {
    margin-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .movie-list__btn-icon {
    margin-right: 12px;
  }
}

.mv {
  position: relative;
  z-index: 3;
  width: 100%;
  padding-top: 6.6666666667vw;
  overflow: hidden;
}
@media only screen and (min-width: 768px) {
  .mv {
    padding-top: 2.0833333333vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv {
    padding-top: 40px;
  }
}
.mv.js--anime .mv__img img {
  opacity: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(0);
}
.mv.js--anime .mv__catch-inner {
  opacity: 1;
  transition: opacity 1s ease, transform 1.2s ease;
  transition-timing-function: ease, cubic-bezier(0, 0.245, 0.07, 0.97);
  transform: scale(1);
}
.mv__img {
  position: relative;
  width: 100%;
  margin-top: 9.3333333333vw;
  line-height: 0;
}
@media only screen and (min-width: 768px) {
  .mv__img {
    position: relative;
    left: 50%;
    margin-top: 0;
    transform: translateX(-50%);
    width: 133.3333333333vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__img {
    width: 2560px;
  }
}
.mv__img-wrap {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.mv__img img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translateY(-2%);
}
.mv__catch {
  position: relative;
  top: 0.2666666667vw;
  left: 21.0666666667vw;
  z-index: 1;
  width: 15.0666666667vw;
}
@media only screen and (min-width: 768px) {
  .mv__catch {
    position: absolute;
    left: 50%;
    margin-bottom: 0;
    transform: translateX(-50%);
    top: 18.4027777778vw;
    margin-left: 0.1388888889vw;
    width: 6.4583333333vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__catch {
    top: 353.3333333333px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__catch {
    margin-left: 2.6666666667px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__catch {
    width: 124px;
  }
}
.mv__catch-wrap {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 767px) {
  .mv__catch-wrap {
    top: 6.6666666667vw;
    left: 0;
  }
}
.mv__catch-inner {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(1.1);
  pointer-events: none;
}
.mv__catch img {
  display: block;
  width: 100%;
  height: auto;
}
.mv__logo {
  position: absolute;
  top: 62.9333333333vw;
  left: 50%;
  width: 63.6vw;
  margin-bottom: 3.2vw;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) {
  .mv__logo {
    margin-bottom: 0;
    top: 37.1527777778vw;
    width: 28.1944444444vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__logo {
    top: 713.3333333333px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__logo {
    width: 541.3333333333px;
  }
}
.mv__logo img {
  display: block;
  width: 100%;
  height: auto;
}
.mv__preregister {
  margin-bottom: 2.6666666667vw;
  font-family: "Zen Old Mincho", serif;
  font-size: 4.5333333333vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.mv__store {
  position: relative;
  z-index: 1;
  padding: 0vw 5.3333333333vw 10.6666666667vw;
}
@media (min-width: 768px) {
  .mv__store {
    padding: 0px 0px 49px 0px;
  }
}
@media (min-width: 1280px) {
  .mv__store {
    padding: 0px 0px 70px 0px;
  }
}
@media (min-width: 1920px) {
  .mv__store {
    padding: 0px 0px 84px 0px;
  }
}
@media (min-width: 768px) {
  .mv__store {
    gap: 14px;
  }
}
@media (min-width: 1280px) {
  .mv__store {
    gap: 20px;
  }
}
@media (min-width: 1920px) {
  .mv__store {
    gap: 24px;
  }
}
@media only screen and (max-width: 767px) {
  .mv__store {
    margin-top: -10vw;
  }
}
@media only screen and (min-width: 768px) {
  .mv__store {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .mv__store {
    justify-content: center;
    gap: 0;
    margin-top: -15.5555555556vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .mv__store {
    margin-top: -298.6666666667px;
  }
}
.mv__store-btn-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4vw 2.6666666667vw;
  width: 65.3333333333vw;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .mv__store-btn-wrap {
    width: 100%;
    margin: 0 auto;
  }
}
@media (min-width: 768px) {
  .mv__store-btn-wrap {
    gap: 12.6px 14px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn-wrap {
    gap: 18px 20px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn-wrap {
    gap: 21.6px 24px;
  }
}
.mv__store-btn {
  display: block;
  width: 23.7333333333vw;
}
@media (min-width: 768px) {
  .mv__store-btn {
    width: 103.6px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn {
    width: 148px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn {
    width: 177.6px;
  }
}
@media only screen and (min-width: 768px) {
  .mv__store-btn {
    transition: transform 0.2s ease;
  }
  .mv__store-btn:hover {
    transform: scale(0.95);
    cursor: pointer;
  }
}
.mv__store-btn.is-disabled {
  cursor: default;
}
.mv__store-btn.is-disabled:hover {
  transform: none;
  cursor: default;
}
.mv__store-btn img {
  display: block;
  width: 100%;
  height: auto;
}
.mv__store-btn--apple {
  width: 26.4vw;
}
@media (min-width: 768px) {
  .mv__store-btn--apple {
    width: 103.6px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn--apple {
    width: 148px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn--apple {
    width: 177.6px;
  }
}
@media (min-width: 768px) {
  .mv__store-btn--apple {
    margin-left: 16.8px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn--apple {
    margin-left: 24px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn--apple {
    margin-left: 28.8px;
  }
}
.mv__store-btn--google {
  width: 31.7333333333vw;
}
@media (min-width: 768px) {
  .mv__store-btn--google {
    width: 124.6px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn--google {
    width: 178px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn--google {
    width: 213.6px;
  }
}
.mv__store-btn--dmm {
  width: 31.7333333333vw;
}
@media (min-width: 768px) {
  .mv__store-btn--dmm {
    width: 124.6px;
  }
}
@media (min-width: 1280px) {
  .mv__store-btn--dmm {
    width: 178px;
  }
}
@media (min-width: 1920px) {
  .mv__store-btn--dmm {
    width: 213.6px;
  }
}

.news {
  position: relative;
  z-index: 3;
  width: calc(100% - 10.1333333333vw);
  margin: 0 auto;
  padding: 8vw 5.3333333333vw 4vw;
  border-radius: 0.6666666667vw;
  background: #fff;
}
@media (min-width: 768px) {
  .news {
    border-radius: 3.5px;
  }
}
@media (min-width: 1280px) {
  .news {
    border-radius: 5px;
  }
}
@media (min-width: 1920px) {
  .news {
    border-radius: 6px;
  }
}
@media (min-width: 768px) {
  .news {
    height: 86.8px;
  }
}
@media (min-width: 1280px) {
  .news {
    height: 124px;
  }
}
@media (min-width: 1920px) {
  .news {
    height: 148.8px;
  }
}
@media (min-width: 768px) {
  .news {
    padding: 14px 28px;
  }
}
@media (min-width: 1280px) {
  .news {
    padding: 20px 40px;
  }
}
@media (min-width: 1920px) {
  .news {
    padding: 24px 48px;
  }
}
@media only screen and (min-width: 768px) {
  .news {
    margin-top: -7.3611111111vw;
    width: 87.5vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news {
    margin-top: -141.3333333333px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news {
    width: 1680px;
  }
}
.news__label {
  padding-bottom: 4.6666666667vw;
  font-family: "Zen Old Mincho", serif;
  font-size: 5.3333333333vw;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .news__label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 11.9444444444vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__label {
    width: 229.3333333333px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__label {
    font-size: 19.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__label {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__label {
    font-size: 33.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__label {
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__label {
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__label {
    padding-bottom: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .news__label.pc-none {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .news__container {
    display: flex;
    justify-content: space-between;
  }
}
.news__inner {
  position: relative;
}
@media only screen and (min-width: 768px) {
  .news__inner {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__inner {
    margin-right: 21px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__inner {
    margin-right: 30px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__inner {
    margin-right: 36px;
  }
}
.news__list {
  position: relative;
  height: 17.3333333333vw;
  --news-sign: 1;
}
@media only screen and (min-width: 768px) {
  .news__list {
    width: 69.4444444444vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__list {
    width: 1333.3333333333px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__list {
    height: 37.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__list {
    height: 54px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__list {
    height: 64.8px;
  }
}
.news__list.js--prev {
  --news-sign: -1;
}
.news__all {
  position: relative;
  width: 12.5333333333vw;
  height: 8vw;
  color: #262626;
  font-size: 4.2666666667vw;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .news__all {
    position: absolute;
    top: 50%;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    width: 5vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__all {
    font-size: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__all {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__all {
    font-size: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__all {
    width: 96px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__all {
    height: 35px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__all {
    height: 50px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__all {
    height: 60px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__all {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__all {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__all {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .news__all span {
    background: url("../img/common/bg_gradient_about.webp") no-repeat 50% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .news__all span {
      -webkit-text-fill-color: currentcolor;
      transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
    }
  }
  .news__all:hover span {
    color: transparent;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .news__all:hover span {
      -webkit-text-fill-color: transparent;
    }
  }
}
.news__all-lines-side {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
}
@media only screen and (min-width: 768px) {
  .news__all-lines-side {
    display: none;
  }
}
.news__all-lines-side::before, .news__all-lines-side::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #9f9f9f;
  opacity: 0;
  pointer-events: none;
}
.news__all-lines-side::before {
  left: 0;
}
.news__all-lines-side::after {
  right: 0;
}
@media only screen and (min-width: 768px) {
  .news__all-lines-side.js--line-in {
    animation: news-all-scale-up 0.8s ease;
    animation-delay: 0.25s;
  }
}
.news__all-lines-side.js--line-in::before {
  animation: news-all-line-left 0.4s ease;
  animation-delay: 0.6s;
}
.news__all-lines-side.js--line-in::after {
  animation: news-all-line-right 0.4s ease;
  animation-delay: 0.6s;
}
.news__all-lines-topbottom {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
}
@media only screen and (min-width: 768px) {
  .news__all-lines-topbottom {
    border-right: 1px solid #9f9f9f;
    border-left: 1px solid #9f9f9f;
  }
}
.news__all-lines-topbottom::before, .news__all-lines-topbottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #9f9f9f;
  opacity: 0;
  pointer-events: none;
}
.news__all-lines-topbottom::before {
  top: 0;
}
.news__all-lines-topbottom::after {
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .news__all-lines-topbottom.js--line-hover {
    animation: news-all-scale-up 0.8s ease;
    animation-fill-mode: forwards;
  }
}
.news__all-lines-topbottom.js--line-hover::before {
  animation: news-all-line-top 0.4s ease;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
.news__all-lines-topbottom.js--line-hover::after {
  animation: news-all-line-bottom 0.4s ease;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
@media only screen and (min-width: 768px) {
  .news__all-lines-topbottom.js--line-in {
    animation: news-all-scale-up 0.6s ease;
    animation-delay: 0.25s;
  }
}
.news__all-lines-topbottom.js--line-in::before {
  animation: news-all-line-top 0.4s ease;
  animation-delay: 0.4s;
}
.news__all-lines-topbottom.js--line-in::after {
  animation: news-all-line-bottom 0.4s ease;
  animation-delay: 0.4s;
}
.news__all span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Zen Old Mincho", serif;
  font-size: 4vw;
  text-align: center;
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
}
@media (min-width: 768px) {
  .news__all span {
    font-size: 14px;
  }
}
@media (min-width: 1280px) {
  .news__all span {
    font-size: 20px;
  }
}
@media (min-width: 1920px) {
  .news__all span {
    font-size: 24px;
  }
}
.news__item {
  --news-move: 5.3333333333vw;
  --news-ax: 1;
  --news-ay: 0;
}
@media only screen and (min-width: 768px) {
  .news__item {
    --news-move: 1.6666666667vw;
    --news-ax: 0;
    --news-ay: 1;
  }
}
.news__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translate(calc(var(--news-move) * var(--news-ax) * var(--news-sign)), calc(var(--news-move) * var(--news-ay) * var(--news-sign)));
  pointer-events: none;
}
.news__item.js--current {
  opacity: 1;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate(0, 0);
  pointer-events: auto;
}
.news__item.js--hide {
  opacity: 0;
  transition: all 0.3s ease;
  transform: translate(calc(var(--news-move) * var(--news-ax) * var(--news-sign) * -1), calc(var(--news-move) * var(--news-ay) * var(--news-sign) * -1));
}
.news__item-link {
  display: block;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .news__item-link .news__text {
    background: url("../img/common/bg_gradient_about.webp") no-repeat 50% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .news__item-link .news__text {
      -webkit-text-fill-color: currentcolor;
      transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
    }
  }
  .news__item-link:hover .news__text {
    color: transparent;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .news__item-link:hover .news__text {
      -webkit-text-fill-color: transparent;
    }
  }
}
.news__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 2.4vw;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .news__head {
    margin-bottom: 5.6px;
  }
}
@media (min-width: 1280px) {
  .news__head {
    margin-bottom: 8px;
  }
}
@media (min-width: 1920px) {
  .news__head {
    margin-bottom: 9.6px;
  }
}
@media (min-width: 768px) {
  .news__head {
    line-height: 1.19px;
  }
}
@media (min-width: 1280px) {
  .news__head {
    line-height: 1.7px;
  }
}
@media (min-width: 1920px) {
  .news__head {
    line-height: 2.04px;
  }
}
@media only screen and (min-width: 768px) {
  .news__head {
    display: flex;
    justify-content: flex-start;
  }
}
.news__date {
  display: flex;
  align-items: center;
  color: #262626;
  font-family: "BIZ UDPGothic", serif;
  font-size: 4.2666666667vw;
  font-weight: 400;
}
@media only screen and (max-width: 767px) {
  .news__date {
    letter-spacing: -0.05em;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__date {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__date {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__date {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__date {
    margin-right: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__date {
    margin-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__date {
    margin-right: 12px;
  }
}
.news__tag {
  display: block;
  height: 5.3333333333vw;
  margin-right: 1.6vw;
  padding: 0.1333333333vw 3.2vw 0vw;
  border-radius: 5.3333333333vw;
  color: #fff;
  font-size: 2.4vw;
  font-weight: 700;
  line-height: 5.3333333333vw;
  text-align: center;
}
.news__tag-wrapper {
  display: flex;
  height: 100%;
}
.news__tag--new {
  margin-top: -0.8vw;
  margin-left: 1.3333333333vw;
  color: #000;
  font-family: "Zen Old Mincho", serif;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: initial;
  letter-spacing: 0.05em;
  background: url("../img/common/bg_gradient_new.webp") no-repeat center center/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag--new {
    font-size: 11.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag--new {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag--new {
    font-size: 19.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag--new {
    margin-right: 2.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag--new {
    margin-right: 4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag--new {
    margin-right: 4.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag--new {
    margin-top: -1.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag--new {
    margin-top: -2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag--new {
    margin-top: -2.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag--new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag--new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag--new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag--new {
    letter-spacing: calc(0.035em * 1px);
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag--new {
    letter-spacing: calc(0.05em * 1px);
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag--new {
    letter-spacing: calc(0.06em * 1px);
  }
}
.news__tag.news__tag--info {
  color: #262626;
  background: #d6f5c7;
}
.news__tag.news__tag--important {
  color: #fff;
  background: #ee4065;
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    font-size: 9.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    font-size: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    padding: 0.7px 8.4px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    padding: 1px 12px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    padding: 1.2px 14.4px 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    height: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    height: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    height: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    line-height: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    line-height: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    line-height: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    border-radius: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    border-radius: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    border-radius: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__tag {
    margin-right: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__tag {
    margin-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__tag {
    margin-right: 12px;
  }
}
.news__tag:last-of-type {
  margin-right: 0;
}
.news__text {
  display: -webkit-box;
  overflow: hidden;
  color: #333;
  font-size: 3.7333333333vw;
  line-height: 1.9;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  backface-visibility: hidden;
}
@media only screen and (max-width: 767px) {
  .news__text {
    letter-spacing: -0.05em;
  }
}
@media only screen and (min-width: 768px) {
  .news__text {
    -webkit-line-clamp: 1;
    line-height: 1.7;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__text {
    font-size: 12.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__text {
    font-size: 21.6px;
  }
}
.news__nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 5.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .news__nav {
    width: 9.3055555556vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__nav {
    width: 178.6666666667px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__nav {
    height: 58.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__nav {
    height: 84px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__nav {
    height: 100.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__nav {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .news__nav {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__nav {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .news__btn {
    position: absolute;
    left: 0;
  }
  .news__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/common/bg_gradient_about.webp") no-repeat center center/cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    cursor: pointer;
    pointer-events: none;
    mask-image: url("../img/common/btn_arrow_pc.webp");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: 100%;
    -webkit-mask-image: url("../img/common/btn_arrow_pc.webp");
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }
  .news__btn:hover:not(.is-disabled)::before {
    opacity: 1;
    pointer-events: auto;
  }
  .news__btn:hover:not(.is-disabled) img {
    opacity: 0;
  }
}
.news__btn img {
  width: 1.8666666667vw;
}
@media only screen and (min-width: 768px) {
  .news__btn img {
    transition: opacity 0.3s ease;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .news__btn img {
    width: 1.7361111111vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .news__btn img {
    width: 30px;
  }
}
.news__btn.is-disabled {
  opacity: 0.3;
  cursor: default;
}
.news__btn--prev {
  top: 0;
  transform: scale(-1, 1);
}
@media only screen and (min-width: 768px) {
  .news__btn--prev {
    transform: scale(1, -1);
  }
}
.news__btn--next {
  bottom: 0;
}

@keyframes news-all-line-top {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  25%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes news-all-line-bottom {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  25%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes news-all-line-left {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  25%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes news-all-line-right {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  25%, 70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes news-all-scale-up {
  0% {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
  }
  25% {
    transform: translate3d(-50%, -50%, 0) scale(1.1, 1.25);
  }
  75% {
    transform: translate3d(-50%, -50%, 0) scale(1.1, 1.25);
  }
  100% {
    transform: translate3d(-50%, -50%, 0) scale(1, 1);
  }
}
.special {
  position: relative;
  z-index: 3;
  width: 84vw;
  margin: 0 auto;
  margin-top: 10.6666666667vw;
  margin-bottom: 21.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .special {
    width: auto;
    margin-top: 5.5555555556vw;
    margin-bottom: 5.5555555556vw;
    padding: 0 1.3888888889vw;
  }
}
@media only screen and (min-width: 768px) {
  .special__container {
    margin: 0 auto;
    padding: 0 4.0277777778vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__container {
    max-width: 1008px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__container {
    max-width: 1440px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__container {
    max-width: 1728px;
  }
}
.special__inner {
  width: 100%;
  margin: 0 auto;
  padding: 8vw 5.3333333333vw;
  border-radius: 1.3333333333vw;
  background: #ffffff;
}
@media only screen and (min-width: 768px) {
  .special__inner {
    width: 100%;
    padding: 4.1666666667vw;
    border-radius: 0.6944444444vw;
  }
}
.special__item {
  margin-bottom: 8vw;
  padding-bottom: 6.4vw;
  border-bottom: 0.6666666667vw solid #ececec;
}
@media (min-width: 768px) {
  .special__item {
    border-bottom-width: 1.4px;
  }
}
@media (min-width: 1280px) {
  .special__item {
    border-bottom-width: 2px;
  }
}
@media (min-width: 1920px) {
  .special__item {
    border-bottom-width: 2.4px;
  }
}
@media only screen and (min-width: 768px) {
  .special__item {
    margin-bottom: 2.7777777778vw;
    padding-bottom: 2.7777777778vw;
  }
}
@media only screen and (min-width: 768px) {
  .special__item:last-of-type {
    margin-bottom: 0;
  }
}
.special__item-link {
  display: block;
  color: #262626;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .special__item-link {
    display: flex;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__item-link {
    gap: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__item-link {
    gap: 20px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__item-link {
    gap: 24px;
  }
}
@media only screen and (min-width: 768px) {
  .special__item-link .special__text {
    background: url("../img/common/bg_gradient_about.webp") no-repeat 50% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .special__item-link .special__text {
      -webkit-text-fill-color: currentcolor;
      transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
    }
  }
  .special__item-link:hover .special__text {
    color: transparent;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .special__item-link:hover .special__text {
      -webkit-text-fill-color: transparent;
    }
  }
}
.special__thumb {
  overflow: hidden;
  border-radius: 1.3333333333vw;
  aspect-ratio: 16/9;
}
@media only screen and (min-width: 768px) {
  .special__thumb {
    flex: none;
    width: 20.8333333333vw;
    border-radius: 0.6944444444vw;
  }
}
.special__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media only screen and (min-width: 768px) {
  .special__dtl {
    flex: 1;
    min-width: 0;
  }
}
.special__meta {
  display: flex;
  align-items: center;
  margin-top: 4.5333333333vw;
}
@media only screen and (min-width: 768px) {
  .special__meta {
    margin-top: 0;
  }
}
.special__date {
  color: #262626;
  font-size: 4.2666666667vw;
  letter-spacing: 0.06em;
}
@media only screen and (max-width: 767px) {
  .special__date {
    margin-top: 0.2666666667vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__date {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__date {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__date {
    font-size: 24px;
  }
}
.special__new {
  margin-left: 1.8666666667vw;
  font-family: "Zen Old Mincho", serif;
  font-size: 2.9333333333vw;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: url("../img/common/bg_gradient_new.webp") no-repeat center center/cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media only screen and (max-width: 767px) {
  .special__new {
    margin-top: -0.2666666667vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__new {
    margin-left: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__new {
    margin-right: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__new {
    margin-right: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__new {
    margin-right: 12px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__new {
    font-size: 11.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__new {
    font-size: 16px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__new {
    font-size: 19.2px;
  }
}
.special__tag {
  height: 5.7333333333vw;
  margin-left: auto;
  padding: 0 3.2vw;
  border-radius: 5.7333333333vw;
  color: #262626;
  font-size: 2.4vw;
  line-height: 5.7333333333vw;
  letter-spacing: 0.1em;
  text-align: center;
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    height: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    height: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    height: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    padding: 0px 11.9px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    padding: 0px 17px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    padding: 0px 20.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    border-radius: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    border-radius: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    border-radius: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    font-size: 9.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    font-size: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    line-height: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    line-height: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    line-height: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__tag {
    margin-left: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__tag {
    margin-left: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__tag {
    margin-left: 12px;
  }
}
.special__tag.is-all {
  background: #d6e29e;
}
.special__tag.is-news {
  background: #ffe4d1;
}
.special__tag.is-tips {
  background: #fffbdd;
}
.special__tag.is-manga {
  background: #eacaf3;
}
.special__tag.is-fankit {
  background: #ccd4f2;
}
.special__text {
  display: -webkit-box;
  margin-top: 3.2vw;
  overflow: hidden;
  font-size: 3.7333333333vw;
  line-height: 6.9333333333vw;
  letter-spacing: 0.06em;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media (min-width: 768px) {
  .special__text {
    font-size: 12.6px;
  }
}
@media (min-width: 1280px) {
  .special__text {
    font-size: 18px;
  }
}
@media (min-width: 1920px) {
  .special__text {
    font-size: 21.6px;
  }
}
@media only screen and (min-width: 768px) {
  .special__text {
    color: #0d0d0d;
    -webkit-line-clamp: 2;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__text {
    margin-top: 8.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__text {
    margin-top: 12px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__text {
    margin-top: 14.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__text {
    line-height: 22.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__text {
    line-height: 32px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__text {
    line-height: 38.4px;
  }
}
.special__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 73.3333333333vw;
  height: 12.4vw;
  margin: 0 auto;
  border: 1px solid #9f9f9f;
  border-radius: 12.4vw;
  color: #262626;
  font-family: "Zen Old Mincho", serif;
  font-size: 3.7333333333vw;
  letter-spacing: 0.04em;
  text-decoration: none;
  background: #ffffff;
}
@media only screen and (min-width: 768px) {
  .special__btn {
    margin-top: 4.1666666667vw;
    color: #0d0d0d;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__btn {
    font-size: 12.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__btn {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__btn {
    font-size: 21.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__btn {
    width: 266px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__btn {
    width: 380px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__btn {
    width: 456px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__btn {
    height: 38.5px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__btn {
    height: 55px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__btn {
    height: 66px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .special__btn {
    border-radius: 42px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .special__btn {
    border-radius: 60px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .special__btn {
    border-radius: 72px;
  }
}
@media only screen and (min-width: 768px) {
  .special__btn:hover::before {
    opacity: 1;
  }
}
.special__btn::before {
  content: "";
  position: absolute;
  padding: 2px;
  border-radius: inherit;
  background: url("../img/common/bg_gradient_about.webp") center/cover;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  inset: -1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.story {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding-top: 28.8vw;
  padding-bottom: 28.8vw;
  overflow: hidden;
  text-align: center;
}
.story::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: calc(100% - 2.6666666667vw);
  height: 0.5333333333vw;
  background: #9f9f9f;
  transform: translateX(-50%);
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story {
    padding-top: 112px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story {
    padding-top: 160px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story {
    padding-top: 192px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story {
    padding-bottom: 112px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story {
    padding-bottom: 160px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story {
    padding-bottom: 192px;
  }
}
@media only screen and (min-width: 768px) {
  .story::before {
    width: calc(100% - 2.7777777778vw);
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story::before {
    height: 2.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story::before {
    height: 4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story::before {
    height: 4.8px;
  }
}
.story__inner:has(.story__content-1.js--anime) .story__bg-1 .story__bg-inner {
  mask-position: 200% 100%;
  transition: mask-position 1s ease-in-out;
  transition-delay: 0s;
}
@media only screen and (min-width: 768px) {
  .story__inner:has(.story__content-1.js--anime) .story__bg-1 .story__bg-inner {
    transition: mask-position 1.9s ease-in-out;
  }
}
.story__inner:has(.story__content-2.js--anime) .story__bg-2 .story__bg-inner {
  mask-position: 200% 100%;
  transition: mask-position 1s ease-in-out;
  transition-delay: 0s;
}
@media only screen and (min-width: 768px) {
  .story__inner:has(.story__content-2.js--anime) .story__bg-2 .story__bg-inner {
    transition: mask-position 1.9s ease-in-out;
  }
}
.story__bg {
  position: absolute;
}
.story__bg-1 {
  max-width: 2000px;
  margin: 0 auto;
  background: url("../img/top/story/bg-1.webp") no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
  .story__bg-1 {
    top: 41.6vw;
    right: 0;
    width: 79.4666666667vw;
    height: 56.9333333333vw;
  }
}
@media only screen and (min-width: 768px) {
  .story__bg-1 {
    left: 50%;
    width: 100%;
    background-image: url("../img/top/story/bg-1_pc.webp");
    transform: translateX(-50%);
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-1 {
    width: 1400px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-1 {
    width: 2000px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-1 {
    width: 2400px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-1 {
    height: 425.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-1 {
    height: 608px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-1 {
    height: 729.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-1 {
    top: -38.5px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-1 {
    top: -55px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-1 {
    top: -66px;
  }
}
.story__bg-1 .story__bg-inner {
  width: 100%;
  height: 100%;
  background: url("../img/top/story/bg-1.webp") no-repeat center top;
  background-size: 100% auto;
  filter: grayscale(1);
}
@media only screen and (min-width: 768px) {
  .story__bg-1 .story__bg-inner {
    background-image: url("../img/top/story/bg-1_pc.webp");
  }
}
.story__bg-1 .story__bg-inner {
  mask-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, #000 35%, #000 65%, #000 100%);
  mask-size: 200% 200%;
  mask-position: 0% 100%;
  mask-repeat: no-repeat;
}
.story__bg-2 {
  max-width: 1920px;
  background: url("../img/top/story/bg-2.webp") no-repeat center top;
  background-size: 100% auto;
}
@media only screen and (max-width: 767px) {
  .story__bg-2 {
    bottom: 0;
    left: 0;
    width: 80.2666666667vw;
    height: 50.8vw;
  }
}
@media only screen and (min-width: 768px) {
  .story__bg-2 {
    left: 50%;
    width: 100%;
    background-image: url("../img/top/story/bg-2_pc.webp");
    transform: translateX(-50%);
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-2 {
    width: 1344px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-2 {
    width: 1920px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-2 {
    width: 2304px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-2 {
    height: 457.1px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-2 {
    height: 653px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-2 {
    height: 783.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__bg-2 {
    bottom: -226.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__bg-2 {
    bottom: -324px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__bg-2 {
    bottom: -388.8px;
  }
}
.story__bg-2 .story__bg-inner {
  width: 100%;
  height: 100%;
  background: url("../img/top/story/bg-2.webp") no-repeat center top;
  background-size: 100% auto;
  filter: grayscale(1);
}
@media only screen and (min-width: 768px) {
  .story__bg-2 .story__bg-inner {
    background-image: url("../img/top/story/bg-2_pc.webp");
  }
}
.story__bg-2 .story__bg-inner {
  mask-image: linear-gradient(to bottom right, rgba(0, 0, 0, 0) 0%, #000 35%, #000 65%, #000 100%);
  mask-size: 200% 200%;
  mask-position: -200% 100%;
  mask-repeat: no-repeat;
  transition: -webkit-mask-position 0.8s ease-out, mask-position 0.8s ease-out;
  transition-delay: 0.3s;
}
.story__content {
  position: relative;
  z-index: 1;
}
.story__content.js--anime .story__content-text {
  opacity: 1;
  transition: opacity 0.8s ease;
  transition-delay: 0.05s;
}
.story__content-title {
  position: relative;
  width: fit-content;
  margin: 0 auto 8.5333333333vw;
  font-family: "Zen Old Mincho", serif;
  font-size: 8.5333333333vw;
  font-weight: 700;
}
@media only screen and (max-width: 767px) {
  .story__content-title-1 {
    letter-spacing: -0.175em;
  }
}
@media only screen and (max-width: 767px) {
  .story__content-title-2 .letter-space-min-sp {
    letter-spacing: -0.125em;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-title {
    padding-left: 42px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-title {
    padding-left: 60px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-title {
    padding-left: 72px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-title {
    padding-right: 42px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-title {
    padding-right: 60px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-title {
    padding-right: 72px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-title {
    font-size: 28px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-title {
    font-size: 40px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-title {
    font-size: 48px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-title {
    margin-bottom: 26.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-title {
    margin-bottom: 38px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-title {
    margin-bottom: 45.6px;
  }
}
.story__content-text {
  position: relative;
  font-size: 3.4666666667vw;
  line-height: 7.7333333333vw;
  letter-spacing: 0.05em;
  opacity: 0;
}
@media only screen and (min-width: 768px) {
  .story__content-text {
    letter-spacing: 0.02em;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-text {
    font-size: 12.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-text {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-text {
    font-size: 21.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__content-text {
    line-height: 28px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__content-text {
    line-height: 40px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__content-text {
    line-height: 48px;
  }
}
.story__content-1 {
  margin-bottom: 22.6666666667vw;
}
@media (min-width: 768px) {
  .story__content-1 {
    margin-bottom: 91px;
  }
}
@media (min-width: 1280px) {
  .story__content-1 {
    margin-bottom: 130px;
  }
}
@media (min-width: 1920px) {
  .story__content-1 {
    margin-bottom: 156px;
  }
}
.story__content-title-layer--1, .story__content-title-layer--2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.story__content-title-layer--1 {
  z-index: 1;
  color: #9f9f9f;
}
.story__content-title-layer--2 {
  z-index: 2;
  color: transparent;
  background: url("../img/common/bg_gradient_about.webp") no-repeat center center/cover;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.story__content-title-layer--3 {
  position: relative;
  z-index: 3;
}
.story__content-title-layer--1 {
  opacity: 0;
}
.story__content-title-layer--2, .story__content-title-layer--3 {
  clip-path: polygon(110% 0%, 110% 0%, 110% 100%, 110% 100%);
}
.story__link {
  position: relative;
  width: 16vw;
  height: 8vw;
  font-size: 4.2666666667vw;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
}
@media only screen and (max-width: 767px) {
  .story__link {
    display: flex;
    margin: 7.4666666667vw auto 0;
  }
}
@media only screen and (min-width: 768px) {
  .story__link {
    display: flex;
    margin: 0 auto;
    width: 5vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__link {
    font-size: 16.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__link {
    font-size: 24px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link {
    font-size: 28.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link {
    width: 96px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__link {
    height: 35px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__link {
    height: 50px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link {
    height: 60px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__link {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__link {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link {
    letter-spacing: 0px;
  }
}
@media only screen and (min-width: 768px) {
  .story__link span {
    background: url("../img/common/bg_gradient_about.webp") no-repeat 50% 50%/cover;
    -webkit-background-clip: text;
    background-clip: text;
    transition: color 0.3s ease;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .story__link span {
      -webkit-text-fill-color: currentcolor;
      transition: color 0.3s ease, -webkit-text-fill-color 0.3s ease;
    }
  }
  .story__link:hover span {
    color: transparent;
  }
  @supports (-webkit-text-fill-color: transparent) {
    .story__link:hover span {
      -webkit-text-fill-color: transparent;
    }
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__link {
    margin-top: 32.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__link {
    margin-top: 46px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link {
    margin-top: 55.2px;
  }
}
.story__link-lines-side {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
}
@media only screen and (min-width: 768px) {
  .story__link-lines-side {
    display: none;
  }
}
.story__link-lines-side::before, .story__link-lines-side::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: #9f9f9f;
  pointer-events: none;
}
.story__link-lines-side::before {
  left: 0;
}
.story__link-lines-side::after {
  right: 0;
}
@media only screen and (min-width: 768px) {
  .story__link-lines-side.js--line-in {
    animation: news-all-scale-up 0.8s ease;
    animation-delay: 0.25s;
  }
}
.story__link-lines-side.js--line-in::before {
  animation: news-all-line-left 0.4s ease;
  animation-delay: 0.6s;
}
.story__link-lines-side.js--line-in::after {
  animation: news-all-line-right 0.4s ease;
  animation-delay: 0.6s;
}
.story__link-lines-topbottom {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translate3d(-50%, -50%, 0);
}
@media only screen and (min-width: 768px) {
  .story__link-lines-topbottom {
    border-right: 1px solid #9f9f9f;
    border-left: 1px solid #9f9f9f;
  }
}
.story__link-lines-topbottom::before, .story__link-lines-topbottom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #9f9f9f;
  opacity: 0;
  pointer-events: none;
}
.story__link-lines-topbottom::before {
  top: 0;
}
.story__link-lines-topbottom::after {
  bottom: 0;
}
@media only screen and (min-width: 768px) {
  .story__link-lines-topbottom.js--line-hover {
    animation: news-all-scale-up 0.8s ease;
    animation-fill-mode: forwards;
  }
}
.story__link-lines-topbottom.js--line-hover::before {
  animation: news-all-line-top 0.4s ease;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
.story__link-lines-topbottom.js--line-hover::after {
  animation: news-all-line-bottom 0.4s ease;
  animation-delay: 0.15s;
  animation-fill-mode: forwards;
}
@media only screen and (min-width: 768px) {
  .story__link-lines-topbottom.js--line-in {
    animation: news-all-scale-up 0.6s ease;
    animation-delay: 0.25s;
  }
}
.story__link-lines-topbottom.js--line-in::before {
  animation: news-all-line-top 0.4s ease;
  animation-delay: 0.4s;
}
.story__link-lines-topbottom.js--line-in::after {
  animation: news-all-line-bottom 0.4s ease;
  animation-delay: 0.4s;
}
.story__link span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: "Zen Old Mincho", serif;
  font-size: 4vw;
  font-weight: 700;
  text-align: center;
  transform: translate3d(-50%, -50%, 0) scale(1, 1);
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .story__link span {
    font-size: 14px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .story__link span {
    font-size: 20px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .story__link span {
    font-size: 24px;
  }
}

.system {
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .system {
    padding: 0 1.3888888889vw;
  }
}
.system__content {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
}
@media only screen and (max-width: 767px) {
  .system__content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    width: calc(100% - 2.6666666667vw);
    height: 0.5333333333vw;
    background: #9f9f9f;
    transform: translateX(-50%);
  }
}
@media only screen and (max-width: 767px) {
  .system__content:last-of-type {
    padding-bottom: 28.8vw;
  }
}
@media only screen and (max-width: 767px) {
  .system__content {
    display: flex;
    align-items: center;
    padding-top: 33.3333333333vw;
    padding-bottom: 9.8666666667vw;
  }
}
@media only screen and (min-width: 768px) {
  .system__content {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100dvh;
    border-top: 0.5333333333vw solid #9f9f9f;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__content {
    border-top-width: 2.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__content {
    border-top-width: 4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__content {
    border-top-width: 4.8px;
  }
}
.system__content-inner {
  position: relative;
  width: 100%;
}
.system__inner {
  padding: 0 8vw;
}
@media only screen and (min-width: 768px) {
  .system__inner {
    display: flex;
    flex-flow: column-reverse wrap;
    justify-content: center;
    padding: 0 4.0277777778vw;
  }
}
.system__no {
  position: absolute;
  top: -41.8666666667vw;
  left: -14.6666666667vw;
  color: #d6d6d6;
  font-family: "Zen Old Mincho", serif;
  font-size: 46.6666666667vw;
  letter-spacing: -0.1em;
  white-space: nowrap;
  transform: scale(0.7625, 1);
}
@media only screen and (min-width: 768px) {
  .system__no {
    position: absolute;
    top: 0;
    display: none;
    letter-spacing: 0;
    transform-origin: left top;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__no {
    font-size: 156.1px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__no {
    font-size: 223px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__no {
    font-size: 267.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__no {
    top: -128.1px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__no {
    top: -183px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__no {
    top: -219.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__no {
    left: -5.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__no {
    left: -8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__no {
    left: -9.6px;
  }
}
.system__img {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 1.3333333333vw;
}
@media only screen and (min-width: 768px) {
  .system__img {
    flex: none;
    width: 55.5555555556vw;
    margin: 0 auto;
    border-radius: 0.6944444444vw;
  }
}
.system__img .system__poster {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}
.system__img .system__video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  object-fit: cover;
}
.system__img.is-loaded .system__video {
  opacity: 1;
}
.system__img.is-playing .system__poster {
  opacity: 0;
}
.system__text {
  margin-top: 6.6666666667vw;
  color: #0d0d0d;
}
@media only screen and (min-width: 768px) {
  .system__text {
    margin-top: 0;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__text {
    margin-bottom: 32.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__text {
    margin-bottom: 46px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__text {
    margin-bottom: 55.2px;
  }
}
.system__text-title {
  font-family: "Zen Old Mincho", serif;
  font-size: 7.7333333333vw;
  line-height: 10.1333333333vw;
  transform-origin: left top;
}
@media only screen and (max-width: 767px) {
  .system__text-title {
    position: relative;
    width: 110%;
    font-weight: 600;
    letter-spacing: -0.065em;
  }
}
@media only screen and (min-width: 768px) {
  .system__text-title {
    font-weight: 800;
    letter-spacing: -0.03em;
    text-align: center;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__text-title {
    font-size: 26.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__text-title {
    font-size: 38px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__text-title {
    font-size: 45.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .system__text-title {
    line-height: 33.6px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .system__text-title {
    line-height: 48px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .system__text-title {
    line-height: 57.6px;
  }
}
@media only screen and (min-width: 768px) {
  .system__text-title .lettter-space-min-pc {
    letter-spacing: -0.08em;
  }
}
@media only screen and (min-width: 768px) {
  .system__text-title .lettter-space-exc-pc {
    letter-spacing: -0.15em;
  }
}
@media only screen and (max-width: 767px) {
  .system__text-title .lettter-space-min-sp {
    letter-spacing: -0.11em;
  }
}
@media only screen and (max-width: 767px) {
  .system__text-title .lettter-space-none-sp {
    letter-spacing: 0;
  }
}

body.isSp.isIos .preregister__btn--google {
  display: none;
}

body.isSp.isAndroid .preregister__btn--apple {
  display: none;
}

.preregister__store {
  position: fixed;
  right: 3.2vw;
  bottom: 3.2vw;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 0.2666666667vw;
  overflow: hidden;
  border-radius: 0.5333333333vw;
  background: url("../img/common/bg_gradient_preregister.webp") no-repeat center center/100% 100%;
  transition: opacity 0.3s ease;
}
@media only screen and (min-width: 768px) {
  .preregister__store {
    background: url("../img/common/bg_gradient_preregister_pc.webp") no-repeat center center/100% 100%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    right: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    right: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    right: 12px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    bottom: 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    bottom: 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    bottom: 12px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    width: 329px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    width: 470px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    width: 564px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    height: 60.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    height: 86px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    height: 103.2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    padding: 1.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    padding: 2px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    padding: 2.4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__store {
    border-radius: 2.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__store {
    border-radius: 4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__store {
    border-radius: 4.8px;
  }
}
@media only screen and (max-width: 767px) {
  .preregister__store {
    opacity: 0;
    pointer-events: none;
  }
  .preregister__store.js--show {
    opacity: 1;
    pointer-events: auto;
  }
}
.preregister__store.js--hide {
  opacity: 0;
}
.preregister__btn-wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4vw 2.6666666667vw;
  width: 100%;
  margin: 0 auto;
  border-radius: 0.5333333333vw;
  background: #fff;
}
@media only screen and (max-width: 767px) {
  .preregister__btn-wrap {
    padding: 4vw 4.8vw;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__btn-wrap {
    border-radius: 2.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__btn-wrap {
    border-radius: 4px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__btn-wrap {
    border-radius: 4.8px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__btn-wrap {
    gap: 0px 7px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__btn-wrap {
    gap: 0px 10px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__btn-wrap {
    gap: 0px 12px;
  }
}
.preregister__btn {
  display: block;
  width: 23.7333333333vw;
}
.preregister__btn.js--hide {
  display: none;
}
@media only screen and (min-width: 768px) {
  .preregister__btn {
    transition: transform 0.2s ease;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .preregister__btn {
    width: 84px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1280px) {
  .preregister__btn {
    width: 120px;
  }
}
@media only screen and (min-width: 768px) and (min-width: 1920px) {
  .preregister__btn {
    width: 144px;
  }
}
@media only screen and (min-width: 768px) {
  .preregister__btn:hover {
    transform: scale(0.95);
    cursor: pointer;
  }
}
.preregister__btn.is-disabled {
  cursor: default;
}
.preregister__btn.is-disabled:hover {
  transform: none;
  cursor: default;
}
.preregister__btn img {
  display: block;
  width: 100%;
  height: auto;
}
.preregister__btn--apple {
  width: 26.4vw;
}
@media (min-width: 768px) {
  .preregister__btn--apple {
    width: 84px;
  }
}
@media (min-width: 1280px) {
  .preregister__btn--apple {
    width: 120px;
  }
}
@media (min-width: 1920px) {
  .preregister__btn--apple {
    width: 144px;
  }
}
.preregister__btn--google {
  width: 31.7333333333vw;
}
@media (min-width: 768px) {
  .preregister__btn--google {
    width: 100.8px;
  }
}
@media (min-width: 1280px) {
  .preregister__btn--google {
    width: 144px;
  }
}
@media (min-width: 1920px) {
  .preregister__btn--google {
    width: 172.8px;
  }
}
.preregister__btn--dmm {
  width: 31.7333333333vw;
}
@media (min-width: 768px) {
  .preregister__btn--dmm {
    width: 102.2px;
  }
}
@media (min-width: 1280px) {
  .preregister__btn--dmm {
    width: 146px;
  }
}
@media (min-width: 1920px) {
  .preregister__btn--dmm {
    width: 175.2px;
  }
}
@media only screen and (max-width: 767px) {
  .preregister__btn--dmm {
    display: none;
  }
}
/*# sourceMappingURL=sourcemaps/top.css.map */