.only-pc {
  display: block;
}

.only-mobile {
  display: none;
}

body.is-mobile .only-pc {
  display: none !important;
}

body.is-mobile .only-mobile {
  display: block !important;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  --loading-last-text-end: 4.36s;
  --loading-hold-after-text: 1s;
  --loading-fade-duration: 0.6s;
  --first-scene-delay: calc(
    var(--loading-last-text-end) + var(--loading-hold-after-text) +
      var(--loading-fade-duration) - 0.5s
  );
}

div {
  box-sizing: border-box;
}

.loading img,
.container img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-drag: none;
}

html {
  width: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

body {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
}

html.is-loading,
body.is-loading {
  overflow: hidden !important;
}

body.is-loading {
  padding-right: var(--loading-scrollbar-compensation, 0px);
}

.container {
  width: 100%;
  height: -moz-fit-content;
  height: fit-content;
  position: relative;
}

.loading {
  opacity: 1;
  visibility: visible;
  width: 100%;
  height: calc(100% - 80px);
  background-image: url("./images/loading/loading-bg.jpg");
  background-size: cover;
  background-position: center;
  position: fixed;
  top: 80px;
  left: 0;
  z-index: 9999;
}
.loading .loading-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.loading .loading-content .paragraph {
  --base-delay-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.0729166667vw;
}
.loading .loading-content .paragraph img {
  width: auto;
  height: 2.1875vw;
  opacity: 0;
  transform: translateY(1.5625vw);
}
.loading .loading-content .paragraph img:nth-child(1) {
  animation-delay: calc((var(--base-delay-index) + 0) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(2) {
  animation-delay: calc((var(--base-delay-index) + 1) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(3) {
  animation-delay: calc((var(--base-delay-index) + 2) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(4) {
  animation-delay: calc((var(--base-delay-index) + 3) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(5) {
  animation-delay: calc((var(--base-delay-index) + 4) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(6) {
  animation-delay: calc((var(--base-delay-index) + 5) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(7) {
  animation-delay: calc((var(--base-delay-index) + 6) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(8) {
  animation-delay: calc((var(--base-delay-index) + 7) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(9) {
  animation-delay: calc((var(--base-delay-index) + 8) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(10) {
  animation-delay: calc((var(--base-delay-index) + 9) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(11) {
  animation-delay: calc((var(--base-delay-index) + 10) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(12) {
  animation-delay: calc((var(--base-delay-index) + 11) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(13) {
  animation-delay: calc((var(--base-delay-index) + 12) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(14) {
  animation-delay: calc((var(--base-delay-index) + 13) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(15) {
  animation-delay: calc((var(--base-delay-index) + 14) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(16) {
  animation-delay: calc((var(--base-delay-index) + 15) * 0.08s);
}
.loading .loading-content .paragraph img:nth-child(17) {
  animation-delay: calc((var(--base-delay-index) + 16) * 0.08s);
}
.loading .loading-content .paragraph-1 {
  --base-delay-index: 0;
}
.loading .loading-content .paragraph-2 {
  --base-delay-index: 14;
}
.loading .loading-content .paragraph-3 {
  --base-delay-index: 26;
}
.loading .loading-content .paragraph-4 {
  --base-delay-index: 43;
}
.loading .loading-content .paragraph-4 img {
  width: auto;
  height: 2.0833333333vw;
}
.loading .loading-content .spinner {
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: relative;
  margin: 0 auto;
}
.loading .loading-content .spinner::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5px;
  height: 5px;
  background-color: #666;
  border-radius: 50%;
}

.first-screen {
  min-width: 1200px;
  --intro-delay: 0.9s;
  --note-fade-delay: calc(var(--first-scene-delay) + var(--intro-delay) + 3.8s);
  width: 100%;
  height: calc(100vh - 80px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.first-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("./images/first/first-bg.jpg");
  background-size: cover;
  background-position: center;
  opacity: 1;
  transform: scale(1.15);
  transform-origin: center;
  z-index: 0;
}
.first-screen > * {
  position: relative;
  z-index: 1;
}
.first-screen .paragraph {
  --base-delay-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.7777777778vh;
}
.first-screen .paragraph img {
  opacity: 0;
  transform: translateY(2.2222222222vh);
}
.first-screen .paragraph img:nth-child(1) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 0) * 0.08s);
}
.first-screen .paragraph img:nth-child(2) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 1) * 0.08s);
}
.first-screen .paragraph img:nth-child(3) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 2) * 0.08s);
}
.first-screen .paragraph img:nth-child(4) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 3) * 0.08s);
}
.first-screen .paragraph img:nth-child(5) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 4) * 0.08s);
}
.first-screen .paragraph img:nth-child(6) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 5) * 0.08s);
}
.first-screen .paragraph img:nth-child(7) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 6) * 0.08s);
}
.first-screen .paragraph img:nth-child(8) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 7) * 0.08s);
}
.first-screen .paragraph img:nth-child(9) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 8) * 0.08s);
}
.first-screen .paragraph img:nth-child(10) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 9) * 0.08s);
}
.first-screen .paragraph img:nth-child(11) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 10) * 0.08s);
}
.first-screen .paragraph img:nth-child(12) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 11) * 0.08s);
}
.first-screen .paragraph img:nth-child(13) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 12) * 0.08s);
}
.first-screen .paragraph img:nth-child(14) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 13) * 0.08s);
}
.first-screen .paragraph img:nth-child(15) {
  animation-delay: calc(var(--first-scene-delay) + var(--intro-delay) + (var(--base-delay-index) + 14) * 0.08s);
}
.first-screen .paragraph-1 {
  --base-delay-index: 0;
}
.first-screen .paragraph-1 img {
  width: auto;
  height: 3.3333333333vh;
}
.first-screen .paragraph-2 {
  --base-delay-index: 15;
}
.first-screen .paragraph-2 img {
  width: auto;
  height: 4.6296296296vh;
}
.first-screen .paragraph-3 {
  --base-delay-index: 28;
}
.first-screen .paragraph-3 img {
  width: auto;
  height: 5.7407407407vh;
}
.first-screen .product {
  opacity: 1;
  transform: scale(1.2);
  transform-origin: center;
  width: 91.9444444444vh;
  height: 37.6851851852vh;
  background-image: url("./images/first/product.png");
  background-size: cover;
  background-position: center;
  margin: 2.7777777778vh auto;
}
.first-screen .note {
  opacity: 0;
  position: absolute;
  bottom: 0.8333333333vw;
  left: 50%;
  transform: translateX(-50%);
  background-image: url("./images/first/note.png");
  background-size: cover;
  background-position: center;
  width: 142.6851851852vh;
  height: 3.6111111111vh;
}

body.is-assets-ready .loading {
  animation: loadingFadeOut var(--loading-fade-duration) ease forwards;
  animation-delay: calc(var(--loading-last-text-end) + var(--loading-hold-after-text));
}
body.is-assets-ready .loading .loading-content .paragraph img {
  animation-name: textRiseIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
body.is-assets-ready .first-screen::before {
  animation: bgZoomIn 0.9s ease-out forwards;
  animation-delay: var(--first-scene-delay);
}
body.is-assets-ready .first-screen .paragraph img {
  animation-name: firstTextRiseIn;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}
body.is-assets-ready .first-screen .product {
  animation: productZoomIn 0.9s ease-out forwards;
  animation-delay: var(--first-scene-delay);
}
body.is-assets-ready .first-screen .note {
  animation: noteFadeIn 0.6s ease forwards;
  animation-delay: var(--note-fade-delay);
}

.content {
  padding: 0 100px;
  min-width: 1200px;
  max-width: 1600px;
  margin: 0 auto;
}

.second {
  width: 100%;
}
.second .title {
  width: 86.40625%;
  margin: 0 auto;
  margin-top: 13.8541666667%;
  margin-bottom: 11.7708333333%;
}
.second .swiper-wrap {
  overflow: hidden;
  width: 100%;
  margin-bottom: 6.875%;
}
.second .swiper-wrap .swiper-box {
  display: flex;
  align-items: center;
  width: 100%;
  animation: swiperRun 50s linear infinite;
}
.second .swiper-wrap .swiper-box .swiper-item {
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0 1.5625%;
}
.second .swiper-wrap .swiper-box .swiper-item-1 {
  width: 30.9895833333%;
}
.second .swiper-wrap .swiper-box .swiper-item-2 {
  width: 42.96875%;
}
.second .swiper-wrap .swiper-box .swiper-item-3 {
  width: 16.71875%;
}
.second .swiper-wrap .swiper-box .swiper-item-4 {
  width: 21.4583333333%;
}
.second .swiper-wrap .swiper-box .swiper-item-5 {
  width: 14.84375%;
}
.second .swiper-wrap .swiper-box .swiper-item-6 {
  width: 43.125%;
}
.second .video {
  width: 83.8541666667%;
  margin: 0 auto;
  display: block;
  margin-bottom: 11.6666666667%;
}

.third .title {
  width: 49.7916666667%;
  margin-left: 2.2395833333%;
}
.third .desc {
  width: 95.2604166667%;
  margin: 0 auto;
  margin-top: 5.0520833333%;
  margin-bottom: 11.4583333333%;
}

.fourth {
  margin-left: 2.2395833333%;
  display: flex;
  align-items: flex-start;
  overflow-y: visible;
  overflow-x: clip;
}
.fourth .detailDrawing {
  flex-shrink: 0;
  width: 45.15625%;
  position: sticky;
}
.fourth .detailDrawing img {
  position: absolute;
  left: 0;
  top: 0;
}
.fourth .desc-box {
  flex-shrink: 0;
  width: 100%;
}
.fourth .desc-box .desc {
  margin-left: 3.6458333333%;
}
.fourth .desc-box .desc-1 {
  width: 45.625%;
  margin-top: 5.0520833333%;
}
.fourth .desc-box .desc-2 {
  width: 46.40625%;
  margin-top: 15.8333333333%;
}
.fourth .desc-box .desc-3 {
  width: 46.3020833333%;
  margin-top: 13.125%;
}
.fourth .desc-box .desc-4 {
  width: 45.625%;
  margin-top: 26.6145833333%;
}

.fifth {
  margin: 13.5416666667% auto;
  width: 95.2604166667%;
}

.sixth {
  margin-left: 2.2395833333%;
  display: flex;
  align-items: flex-start;
  overflow-y: visible;
  overflow-x: clip;
}
.sixth .detailDrawing {
  flex-shrink: 0;
  width: 45.15625%;
  position: sticky;
}
.sixth .detailDrawing img {
  position: absolute;
  left: 0;
  top: 0;
}
.sixth .desc-box {
  flex-shrink: 0;
  width: 100%;
}
.sixth .desc-box .desc {
  margin-left: 3.6458333333%;
}
.sixth .desc-box .desc-1 {
  width: 45.625%;
  margin-top: 5.0520833333%;
}
.sixth .desc-box .desc-2 {
  width: 46.40625%;
  margin-top: 15.8333333333%;
}
.sixth .desc-box .desc-3 {
  width: 46.3020833333%;
  margin-top: 13.125%;
}
.sixth .desc-box .desc-4 {
  width: 45.625%;
  margin-top: 26.6145833333%;
}

.seventh .top,
.seventh .center,
.seventh .product {
  width: 95.2604166667%;
  margin: 0 auto;
}
.seventh .top {
  margin-top: 13.6979166667%;
}
.seventh .center {
  margin-bottom: 8.3333333333%;
  position: relative;
}
.seventh .center .round {
  position: absolute;
  width: 5.2083333333%;
  height: 7.2463768116%;
  border: 0.4vw solid #cf000e;
  border-radius: 50%;
  animation: roundRun 3s linear infinite both;
}
.seventh .center .round-1 {
  left: 20.45%;
  top: 70.2%;
}
.seventh .center .round-2 {
  left: 49.5%;
  top: 70.2%;
}
.seventh .center .round-3 {
  left: 66.7%;
  top: 70.1%;
}
.seventh .center .round-4 {
  left: 79.572917%;
  top: 76.572917%;
}
.seventh .product {
  width: 99.84375%;
  position: relative;
  margin-bottom: 20.8333333333%;
}
.seventh .product .btn {
  cursor: pointer;
  position: absolute;
  width: 9.5211887727%;
  height: 3.3834586466%;
}
.seventh .product .btn-1 {
  left: 18.6%;
  top: 43.4%;
}
.seventh .product .btn-2 {
  left: 52.6%;
  top: 43.4%;
}
.seventh .product .btn-3 {
  left: 86.3%;
  top: 43.4%;
}
.seventh .product .btn-4 {
  left: 36.7%;
  top: 89.4%;
}
.seventh .product .btn-5 {
  left: 74.7%;
  top: 89.4%;
}

@keyframes roundRun {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  50% {
    transform: scale(1);
    opacity: 0.15;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes textRiseIn {
  0% {
    opacity: 0;
    transform: translateY(1.5625vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes firstTextRiseIn {
  0% {
    opacity: 0;
    transform: translateY(2.2222222222vh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes noteFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bgZoomIn {
  0% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes productZoomIn {
  0% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes loadingFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
@keyframes swiperRun {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-189%);
  }
}
@keyframes swiperRunM {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-408%);
  }
}
body.is-mobile .content {
  min-width: 0;
  padding: 0;
}
body.is-mobile .loading .loading-content .paragraph {
  margin-bottom: 8.9333333333vw;
}
body.is-mobile .loading .loading-content .paragraph img {
  height: 5.2vw;
}
body.is-mobile .loading .loading-content .paragraph-3 {
  flex-wrap: wrap;
  align-content: center;
  row-gap: 4vw;
}
body.is-mobile .loading .loading-content .paragraph-3 img:nth-child(-n+10) {
  order: 1;
}
body.is-mobile .loading .loading-content .paragraph-3::before {
  content: "";
  flex-basis: 100%;
  width: 100%;
  height: 0;
  order: 2;
}
body.is-mobile .loading .loading-content .paragraph-3 img:nth-child(n+11) {
  order: 3;
}
body.is-mobile .first-screen {
  min-width: 0;
}
body.is-mobile .first-screen::before {
  background-image: url("./images/mb/bg.jpg");
}
body.is-mobile .first-screen .product {
  width: 86.1333333333vw;
  height: 33.2vw;
}
body.is-mobile .first-screen .paragraph {
  margin-bottom: 4vw;
}
body.is-mobile .first-screen .paragraph img {
  height: 6.8vw;
}
body.is-mobile .first-screen .paragraph-1 img {
  height: 3.2vw;
}
body.is-mobile .first-screen .paragraph-2 img {
  height: 6.8vw;
}
body.is-mobile .first-screen .paragraph-3 {
  margin-top: 5.3333333333vw;
}
body.is-mobile .first-screen .paragraph-3 img {
  height: 8.1333333333vw;
}
body.is-mobile .first-screen .paragraph-2 {
  flex-wrap: wrap;
  align-content: center;
  row-gap: 1.7333333333vw;
}
body.is-mobile .first-screen .paragraph-2 img:nth-child(-n+8) {
  order: 1;
}
body.is-mobile .first-screen .paragraph-2::before {
  content: "";
  flex-basis: 100%;
  width: 100%;
  height: 0;
  order: 2;
}
body.is-mobile .first-screen .paragraph-2 img:nth-child(n+9) {
  order: 3;
}
body.is-mobile .first-screen .paragraph-2 img:nth-child(9) {
  margin-left: -3.7333333333vw;
}
body.is-mobile .first-screen .paragraph-3 {
  flex-wrap: wrap;
  align-content: center;
  row-gap: 0.6666666667vw;
}
body.is-mobile .first-screen .paragraph-3 img:nth-child(-n+7) {
  order: 1;
}
body.is-mobile .first-screen .paragraph-3::before {
  content: "";
  flex-basis: 100%;
  width: 100%;
  height: 0;
  order: 2;
}
body.is-mobile .first-screen .paragraph-3 img:nth-child(n+8) {
  order: 3;
}
body.is-mobile .first-screen .paragraph-3 img:nth-child(8) {
  margin-left: -3.7333333333vw;
}
body.is-mobile .first-screen .note {
  background-image: url("./images/first/note-m.png");
  background-size: cover;
  background-position: center;
  width: 88.5333333333vw;
  height: 8.8vw;
  bottom: 4.9333333333vw;
}
body.is-mobile .content-m {
  overflow: hidden;
  padding: 0 7.2vw;
  padding-bottom: 26.6666666667vw;
}
body.is-mobile .content-m .session {
  margin-top: 20vw;
}
body.is-mobile .content-m .session-13,
body.is-mobile .content-m .session-14 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
body.is-mobile .content-m .session-14 {
  margin-top: 0;
  position: relative;
}
body.is-mobile .content-m .session-14 .round {
  position: absolute;
  width: 8vw;
  height: 8vw;
  border: 1vw solid #cf000e;
  border-radius: 50%;
  animation: roundRun 3s linear infinite both;
}
body.is-mobile .content-m .session-14 .round-1 {
  left: 18.7%;
  top: 77%;
}
body.is-mobile .content-m .session-14 .round-2 {
  left: 48%;
  top: 77%;
}
body.is-mobile .content-m .session-14 .round-3 {
  left: 65.4%;
  top: 77.1%;
}
body.is-mobile .content-m .session-14 .round-4 {
  left: 78.2%;
  top: 80.7%;
}
body.is-mobile .content-m .session-15 {
  width: 72.9333333333vw;
  margin: 0 auto;
  margin-top: 20vw;
  position: relative;
}
body.is-mobile .content-m .session-15 .product-title, body.is-mobile .content-m .session-15 .product {
  width: 100%;
  margin: 8vw 0;
  position: relative;
}
body.is-mobile .content-m .session-15 .product-title {
  margin-bottom: 4vw;
}
body.is-mobile .content-m .session-15 .btn {
  position: absolute;
  width: 21.7333333333vw;
  height: 6.6666666667vw;
  left: 42.2%;
  bottom: 0;
}
body.is-mobile .content-m .session-2 .title {
  width: 70.9333333333vw;
}
body.is-mobile .content-m .session-2 .swiper-wrap {
  margin-top: 12vw;
  width: 100%;
}
body.is-mobile .content-m .session-2 .swiper-wrap .swiper-box {
  display: flex;
  align-items: center;
  height: 54.1333333333vw;
  animation: swiperRunM 50s linear infinite;
}
body.is-mobile .content-m .session-2 .swiper-wrap .swiper-box .swiper-item {
  flex-shrink: 0;
  flex-grow: 0;
  margin: 0 4vw;
  height: 54.1333333333vw;
}
body.is-mobile .content-m .session-2 .swiper-wrap .swiper-box .swiper-item img {
  width: auto;
  height: 100%;
}
body.is-mobile .content-m .session-2 .swiper-wrap .swiper-box .swiper-item-1 {
  margin-left: 0;
}
body.is-mobile .content-m .session-2 video {
  width: 100%;
  height: auto;
  margin-top: 16.2666666667vw;
}/*# sourceMappingURL=style.css.map */