@charset "UTF-8";
@font-face {
  font-family: "acumin";
  src: url("../../cmn/font/acumin-variable-concept.ttf") format("truetype");
}
body {
  color: #231815;
}

.container {
  background-color: #eaad23;
  font-size: clamp(1.6rem, 1.85vw, 2rem);
  line-height: 1.5;
  overflow-x: hidden;
}

.mv {
  padding-top: clamp(35px, 6.48vw, 70px);
  margin-top: calc(clamp(5px, 0.6510416667vw, 7.5px) * 2 + clamp(40px, 5.6423611111vw, 65px) / 59 * 75);
}
.mv.animation--is .mv__title span {
  -webkit-animation: fromLeft 0.5s linear forwards;
          animation: fromLeft 0.5s linear forwards;
}
.mv.animation--is .mv__title span:nth-of-type(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}
.mv.animation--is .mv__title span:nth-of-type(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.mv.animation--is .mv__image {
  -webkit-animation: fadeIn 1s 0.75s linear forwards;
          animation: fadeIn 1s 0.75s linear forwards;
}
.mv.animation--is .mv__subtitle {
  -webkit-animation: fadeIn 1s 1.25s linear forwards;
          animation: fadeIn 1s 1.25s linear forwards;
}

.mv__inner {
  width: min(100%, 1140px);
  padding: 0 clamp(15px, 2.6041666667vw, 30px);
  margin: 0 auto;
}

.mv__content {
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 900;
}

.mv__box {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-bottom: min(4.17vw, 45px);
  margin-left: auto;
}
@media (min-width: 1200px) {
  .mv__box {
    width: 73.89%;
  }
}

.mv__title {
  font-size: min(12.5vw, 13.5rem);
  line-height: min(12.96vw, 14rem);
  letter-spacing: 0.03em;
}
.mv__title span {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}

.mv__image {
  position: absolute;
  width: 56.266%;
  width: min(41.57vw, 449px);
  bottom: -6.6268844444%;
  right: -5.64%;
  opacity: 0;
}

.mv__subtitle {
  color: #ffffff;
  font-size: min(3.89vw, 4.2rem);
  text-align: center;
  letter-spacing: 0.13em;
  opacity: 0;
}

.lineup {
  padding-top: clamp(45px, 8.33vw, 90px);
}
.lineup.animation--is .lineup__title {
  -webkit-animation: fadeIn 1s linear forwards;
          animation: fadeIn 1s linear forwards;
}
.lineup.animation--is .lineup__item {
  -webkit-animation: fadeIn 0.5s 0.5s linear forwards;
          animation: fadeIn 0.5s 0.5s linear forwards;
}
.lineup.animation--is .lineup__item:nth-of-type(2) {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.lineup.animation--is .lineup__item:nth-of-type(2) .lineup__item__box {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.lineup.animation--is .lineup__item:nth-of-type(3) {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.lineup.animation--is .lineup__item:nth-of-type(3) .lineup__item__box {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.lineup.animation--is .lineup__item__box {
  -webkit-animation: scale 1s 0.5s linear;
          animation: scale 1s 0.5s linear;
}

.lineup__inner {
  width: min(100%, 1140px);
  padding: 0 clamp(15px, 2.6041666667vw, 30px);
  margin: 0 auto;
}

.lineup__content {
  border-bottom-width: 1px;
  border-bottom-color: #000000;
  padding-bottom: clamp(35px, 6.48vw, 70px);
}

.lineup__title {
  color: #000000;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: clamp(1.9rem, 3.52vw, 3.8rem);
  font-weight: 700;
  padding-left: clamp(20px, 3.7vw, 40px);
  padding-right: clamp(20px, 3.7vw, 40px);
  opacity: 0;
}

.lineup__list__box {
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-top: clamp(7.5px, 1.39vw, 15px);
  margin-right: auto;
  margin-left: auto;
}
.lineup__list__box::-webkit-scrollbar {
  display: none;
}
@media (max-width: 767px) {
  .lineup__list__box {
    overflow-x: auto;
  }
}
@media (min-width: 768px) {
  .lineup__list__box {
    max-width: 749px;
    margin-top: clamp(-15px, -1.39vw, -7.5px);
  }
}

.lineup__list {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(27px, 5vw, 54px);
  /* 3種類の時
  @include m-mqMax($spMax) {
    width: 150%;
  }*/
}

.lineup__item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: clamp(25px, 4.63vw, 50px);
  opacity: 0;
  cursor: pointer;
  /* 3種類の時
  &:nth-of-type(1) {
    width: 18.16%;
  }

  &:nth-of-type(2) {
    width: 30.175%;
  }

  &:nth-of-type(3) {
    width: 37.117%;
  }*/
}
.lineup__item:nth-of-type(1) {
  width: 30.175%;
}
.lineup__item:nth-of-type(2) {
  width: 37.117%;
}

.lineup__item__box {
  scale: 1;
  transition: scale 0.4s;
}
@media (hover: hover) {
  .lineup__item__box:hover {
    scale: 1.1;
  }
}

.lineup__item--active {
  position: relative;
}
.lineup__item--active::after {
  content: "";
  position: absolute;
  display: block;
  background: #231815;
  width: clamp(21.5px, 3.98vw, 43px);
  height: clamp(12.5px, 2.31vw, 25px);
  bottom: 0;
  left: 50%;
  margin-left: calc(clamp(21.5px, 3.98vw, 43px) / -2);
  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
          clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.lineup__size {
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.2rem, 2.22vw, 2.4rem);
  font-weight: 900;
  line-height: clamp(1.25rem, 2.31vw, 2.5rem);
  text-align: center;
  letter-spacing: 0.1em;
}
.lineup__size span {
  font-size: clamp(0.95rem, 1.76vw, 1.9rem);
}

.spec {
  padding-top: clamp(15px, 2.78vw, 30px);
}
.spec.animation--is .spec__title {
  -webkit-animation: fadeIn 1s linear forwards;
          animation: fadeIn 1s linear forwards;
}
.spec.animation--is .spec__item--active {
  display: block;
}
.spec.animation--is .spec__item--active .spec__item__content {
  -webkit-animation: fadeIn 1s 0.5s linear forwards;
          animation: fadeIn 1s 0.5s linear forwards;
}
.spec.animation--is .spec__item--active .spec__image02 {
  -webkit-animation: scale02 0.5s 0.5s ease-out forwards;
          animation: scale02 0.5s 0.5s ease-out forwards;
}

.spec__inner {
  width: min(100%, 1140px);
  padding: 0 clamp(15px, 2.6041666667vw, 30px);
  margin: 0 auto;
}

.spec__title {
  color: #000000;
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: clamp(1.9rem, 3.52vw, 3.8rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(25px, 4.63vw, 50px);
  opacity: 0;
}

.spec__item {
  display: none;
}

.spec__item__content {
  display: flex;
  gap: clamp(22.5px, 4.17vw, 45px);
  padding-right: clamp(12.5px, 2.31vw, 25px);
  padding-left: clamp(12.5px, 2.31vw, 25px);
  margin-bottom: clamp(35px, 6.48vw, 70px);
  opacity: 0;
}
@media (max-width: 767px) {
  .spec__item__content {
    flex-direction: column;
  }
}
@media (min-width: 768px) {
  .spec__item__content {
    justify-content: center;
    align-items: flex-end;
  }
}

@media (min-width: 768px) {
  .spec__image__box {
    flex: 1 1 458px;
    order: 2;
  }
}

.spec__image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(5px, 0.93vw, 10px);
}
@media (min-width: 768px) {
  .spec__image {
    aspect-ratio: 472/294;
  }
}

.spec__notes {
  font-size: clamp(1.2rem, 1.3vw, 1.4rem);
  line-height: clamp(1.4rem, 1.57vw, 1.7rem);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.spec__table {
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .spec__table {
    flex: 1 1 527px;
    order: 1;
  }
}
.spec__table th,
.spec__table td {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  border-width: 1px;
  border-color: #000000;
  padding-top: clamp(3px, 0.56vw, 6px);
  padding-bottom: clamp(3px, 0.56vw, 6px);
}
.spec__table th {
  background-color: #000000;
  color: #ffffff;
  font-size: clamp(1.4rem, 2.04vw, 2.2rem);
  width: 30%;
  min-width: 80px;
}
.spec__table td {
  font-size: clamp(1.4rem, 1.67vw, 1.8rem);
  word-break: break-all;
  width: 70%;
}

.spec__image02 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  aspect-ratio: 1080/423;
  opacity: 0;
  scale: 0.5;
}

.spec__item:nth-of-type(1) .spec__image img {
  width: 38.43%;
}
.spec__item:nth-of-type(1) .spec__image02 img {
  width: 67.04%;
}
.spec__item:nth-of-type(2) .spec__image img {
  width: 67.25%;
}
.spec__item:nth-of-type(2) .spec__image02 img {
  width: 96.76%;
}
.spec__item:nth-of-type(3) .spec__image img {
  width: 80.35%;
}

.inst {
  background-color: #ffffff;
  padding-top: clamp(22.5px, 4.17vw, 45px);
  padding-bottom: clamp(20px, 3.7vw, 40px);
}
.inst.animation--is .inst__title {
  -webkit-animation: fadeIn 1s forwards;
          animation: fadeIn 1s forwards;
}
.inst.animation--is .inst__box {
  -webkit-animation: fadeIn 1s 0.5s forwards;
          animation: fadeIn 1s 0.5s forwards;
}
.inst.animation--is .inst__list {
  -webkit-animation: fadeIn 1s 1s forwards;
          animation: fadeIn 1s 1s forwards;
}

.inst__inner {
  width: min(100%, 1140px);
  padding: 0 clamp(15px, 2.6041666667vw, 30px);
  margin: 0 auto;
}

.inst__title {
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: min(6.2vw, 6.7rem);
  font-weight: 700;
  line-height: min(7.41vw, 8rem);
  letter-spacing: 0.1em;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-width: clamp(2px, 0.3472222222vw, 4px);
  border-color: #eaad23;
  border-radius: 100px;
  padding-top: clamp(1.5px, 0.28vw, 3px);
  padding-right: clamp(42.5px, 7.87vw, 85px);
  padding-bottom: clamp(1.5px, 0.28vw, 3px);
  padding-left: clamp(42.5px, 7.87vw, 85px);
  margin-right: auto;
  margin-bottom: clamp(22.5px, 4.17vw, 45px);
  margin-left: auto;
  opacity: 0;
}

.inst__box {
  position: relative;
  margin-bottom: clamp(12.5px, 2.31vw, 25px);
  opacity: 0;
}
@media (min-width: 768px) {
  .inst__box {
    padding-right: clamp(32.5px, 6.02vw, 65px);
    padding-left: clamp(32.5px, 6.02vw, 65px);
  }
}
.inst__box::before {
  content: "";
  position: absolute;
  display: block;
  background-image: url(/assets/terminal/img/img_inst.png);
  background-repeat: no-repeat;
  background-size: 100%;
  width: 28.982%;
  aspect-ratio: 313/274;
  bottom: -0.925942492%;
  left: 5.56%;
}

.inst__image {
  width: 78.106%;
  margin-bottom: clamp(2.5px, 0.53vw, 5px);
  margin-left: auto;
}

.inst__text {
  font-size: min(5.37vw, 5.8rem);
  font-weight: 900;
  line-height: min(5.83vw, 6.3rem);
  text-align: right;
  padding-right: clamp(10px, 1.85vw, 20px);
}
.inst__text span {
  -webkit-animation: blink02 3s linear infinite;
          animation: blink02 3s linear infinite;
}

.inst__list {
  max-width: 995px;
  border-width: clamp(2.5px, 0.4340277778vw, 5px);
  border-color: #eaad23;
  border-radius: clamp(15px, 2.6041666667vw, 30px);
  padding-top: clamp(12.5px, 2.31vw, 25px);
  padding-right: clamp(10px, 1.85vw, 20px);
  padding-bottom: clamp(12.5px, 2.31vw, 25px);
  padding-left: clamp(10px, 1.85vw, 20px);
  margin-right: auto;
  margin-left: auto;
  opacity: 0;
}

.inst__item {
  font-size: clamp(1.4rem, 2.04vw, 2.2rem);
  font-weight: 900;
  line-height: clamp(2.6rem, 3.7vw, 4rem);
}

.back {
  background-image: url(/assets/terminal/img/bg_back.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-top: clamp(30px, 5.56vw, 60px);
  padding-bottom: clamp(20px, 3.7vw, 40px);
}

.back__inner {
  width: min(100%, 1140px);
  padding: 0 clamp(15px, 2.6041666667vw, 30px);
  margin: 0 auto;
}

.back__image {
  position: relative;
  width: 28.7%;
  margin-right: auto;
  margin-bottom: clamp(17.5px, 3.24vw, 35px);
  margin-left: auto;
}
.back__image::before, .back__image::after {
  content: "";
  position: absolute;
  display: block;
}
.back__image::before {
  top: 50%;
  left: 50%;
  width: 120%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 200, 0.3), rgba(255, 255, 150, 0.1), transparent);
  border-radius: 50%;
  animation: halo 3s ease-in-out infinite reverse;
}
.back__image::after {
  top: 50%;
  left: 50%;
  width: 110%;
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgb(255, 255, 220), rgba(255, 255, 180, 0.8), rgba(255, 255, 150, 0.4) 60%, transparent);
  border-radius: 50%;
  -webkit-animation: halo 3s ease-in-out infinite;
          animation: halo 3s ease-in-out infinite;
  box-shadow: 0 0 60px rgba(255, 255, 200, 0.8), 0 0 100px rgba(255, 255, 150, 0.6), 0 0 140px rgba(255, 255, 100, 0.4);
}
.back__image a {
  position: relative;
  z-index: 1;
}
@media (hover: hover) {
  .back__image a:hover {
    opacity: 1;
  }
}

.back__text {
  position: relative;
  font-family: source-han-sans-japanese, sans-serif;
  font-size: clamp(2.6rem, 4.91vw, 5.3rem);
  font-weight: 900;
  line-height: clamp(3.1rem, 5.74vw, 6.2rem);
  text-align: center;
  z-index: 1;
}