:root {
  --index_margin60: clamp(40px, -78.462px + 15.385vw, 60px);
  --index_margin55: clamp(30px, -118.077px + 19.231vw, 55px);
  --index_margin150: clamp(90px, -265.385px + 46.154vw, 150px);
  --index_margin180: clamp(100px, -373.846px + 61.538vw, 180px);
  --index_font_h3: clamp(17px, -42.231px + 7.692vw, 27px);
  --index_font_h2: clamp(16px, 7.955px + 1.045vw, 23px);
}
@media screen and (max-width: 770px) {
  :root {
    --index_font_h3: max(17px, 4.53vw);
    --index_font_h2: max(16px, 4.27vw) ;
  }
}

body {
  opacity: 0;
  visibility: hidden;
}
body.is-ready {
  opacity: 1;
  visibility: visible;
}

main {
  width: 100%;
  height: auto;
}
main img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
main section {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  display: block;
}
main p,
main span,
main a {
  font-size: clamp(13px, 10.701px + 0.299vw, 15px);
  transition: color 0.35s ease;
}
@media screen and (max-width: 770px) {
  main p,
  main span,
  main a {
    line-height: 1.77;
  }
}
main .container_small,
main .container_big {
  width: 93%;
  margin: 0 auto;
}
main .container_small {
  max-width: 800px;
}
main .container_big {
  max-width: 1000px;
}
main .backImg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -40;
}
main .fvArea {
  background-color: transparent;
  width: 100%;
  height: 90vh;
  position: relative;
}
main .fvArea .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  opacity: 0;
  visibility: hidden;
  background-color: transparent;
  transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.5s ease;
}
main .fvArea .slide.is-active {
  opacity: 1;
  visibility: visible;
}
main .fvArea .slide .img,
main .fvArea .slide .text {
  grid-area: 2/2/3/3;
  padding-bottom: 80px;
  margin-right: 70px;
}
main .fvArea .slide .img img,
main .fvArea .slide .text img {
  width: 25.4vw;
  min-width: 300px;
  -o-object-fit: contain;
     object-fit: contain;
}
main .fvArea .slide .img {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 0;
  margin-left: 11.2vw;
  padding-bottom: 0;
  margin-bottom: 50px;
}
@media screen and (max-width: 770px) {
  main .fvArea .slide .img {
    grid-area: 1/1/2/2;
    margin-bottom: 0;
  }
  main .fvArea .slide .img img {
    width: 40.8vw;
    min-width: unset;
  }
}
main .fvArea .slide .text {
  width: 35.94vw;
  min-width: 300px;
  margin: 0 auto;
}
@media screen and (max-width: 770px) {
  main .fvArea .slide .text {
    width: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    grid-area: 1/1/3/3;
  }
}
main .fvArea .slide .text h2 {
  width: 100%;
  font-size: clamp(16px, 7.955px + 1.045vw, 23px);
  margin-bottom: calc(var(--index_margin60) - 15px);
  color: #ffffff;
}
main .fvArea .slide .text p {
  width: 100%;
  color: #ffffff;
}
main .fvArea #area2 {
  background-color: rgba(0, 0, 0, 0);
  visibility: visible;
  opacity: 1;
  transition: background-color 0.8s ease;
}
main .fvArea #area2.is-bg-dark {
  background-color: rgba(0, 0, 0, 0.4);
}
main .fvArea #area2 .text {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
main .fvArea #area2.is-active .text {
  opacity: 1;
  visibility: visible;
}
main .futureArea {
  padding-top: clamp(80px, 57.015px + 2.985vw, 100px);
  padding-bottom: var(--index_margin150);
}
main .futureArea h3 {
  font-size: var(--index_font_h3);
  margin-bottom: var(--index_margin55);
  letter-spacing: 0.13em;
}
main .futureArea .area01 {
  margin-bottom: var(--index_margin150);
}
main .futureArea .area01 .imgsBox {
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  margin-bottom: clamp(20px, -98.462px + 15.385vw, 40px);
}
main .futureArea .area01 .imgsBox .img {
  position: relative;
  height: -moz-fit-content;
  height: fit-content;
}
main .futureArea .area01 .imgsBox .img img {
  position: absolute;
  top: 0;
  left: 0;
}
main .futureArea .area01 .imgsBox .img::before {
  display: block;
  content: "";
  width: 100%;
}
main .futureArea .area01 .imgsBox .img.one {
  width: 20.5vw;
  max-width: 164px;
}
@media screen and (max-width: 770px) {
  main .futureArea .area01 .imgsBox .img.one {
    width: 23.91vw;
    justify-self: center;
  }
}
main .futureArea .area01 .imgsBox .img.one::before {
  padding-top: 141.4%;
}
main .futureArea .area01 .imgsBox .img.two {
  width: 45.63vw;
  max-width: 365px;
  margin-top: 75px;
}
@media screen and (max-width: 770px) {
  main .futureArea .area01 .imgsBox .img.two {
    position: relative;
    right: -3.5vw;
    width: 38.93vw;
    justify-self: end;
  }
}
main .futureArea .area01 .imgsBox .img.two::before {
  padding-top: 75%;
}
main .futureArea .area01 .contentBox {
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto auto;
}
main .futureArea .area01 .contentBox h3 {
  grid-area: 1/1/2/2;
}
main .futureArea .area01 .contentBox p {
  grid-area: 2/1/3/2;
  margin-bottom: var(--index_margin55);
}
@media screen and (max-width: 770px) {
  main .futureArea .area01 .contentBox p {
    grid-area: 3/1/4/2;
    margin-bottom: 0;
  }
}
main .futureArea .area01 .contentBox .img {
  width: 100%;
  grid-area: 3/1/4/2;
}
@media screen and (max-width: 770px) {
  main .futureArea .area01 .contentBox .img {
    grid-area: 2/1/3/2;
    margin-bottom: var(--index_margin55);
  }
}
main .futureArea .area02 {
  margin-bottom: var(--index_margin150);
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: auto;
  grid-auto-rows: auto;
}
@media screen and (max-width: 770px) {
  main .futureArea .area02 {
    grid-template-columns: 100%;
  }
}
main .futureArea .area02 .img {
  grid-area: 1/1/3/2;
  width: 100%;
  margin: 0 auto;
  margin-left: 0;
}
@media screen and (max-width: 770px) {
  main .futureArea .area02 .img {
    width: 87%;
    grid-area: 2/1/3/2;
    margin-bottom: var(--index_margin55);
  }
}
main .futureArea .area02 h3 {
  width: 93%;
  max-width: max(423px, 28.2vw);
  grid-area: 1/2/2/3;
  align-self: self-end;
  justify-self: center;
}
@media screen and (max-width: 770px) {
  main .futureArea .area02 h3 {
    grid-area: 1/1/2/2;
    max-width: none;
  }
}
main .futureArea .area02 p {
  width: 93%;
  max-width: max(423px, 28.2vw);
  grid-area: 2/2/3/3;
  justify-self: center;
}
@media screen and (max-width: 770px) {
  main .futureArea .area02 p {
    grid-area: 3/1/4/2;
    max-width: none;
  }
}
main .futureArea .area03 {
  margin-bottom: var(--index_margin150);
}
main .futureArea .area03.pc {
  width: 100%;
  background: url(.././images/img03_pc.jpg) no-repeat center/cover;
  position: relative;
}
@media screen and (max-width: 770px) {
  main .futureArea .area03.pc {
    display: none;
    visibility: hidden;
  }
}
main .futureArea .area03.pc::before {
  width: 100%;
  height: 0;
  content: "";
  display: block;
  padding-top: 44.07%;
}
main .futureArea .area03.pc .wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
main .futureArea .area03.pc .text {
  width: 93%;
  height: -moz-fit-content;
  height: fit-content;
  max-width: max(520px, 38.07vw);
  margin-left: 7%;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5%;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
}
main .futureArea .area03.pc .text h3 {
  width: 100%;
  align-self: self-end;
  justify-self: center;
}
main .futureArea .area03.pc .text p {
  width: 100%;
  justify-self: center;
}
main .futureArea .area03.sp {
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 770px) {
  main .futureArea .area03.sp {
    display: block;
    visibility: visible;
  }
}
main .futureArea .area03.sp .img {
  margin-bottom: var(--index_margin55);
}
main .futureArea .area04 h3 {
  text-align: center;
}
main .futureArea .area04 p {
  margin-bottom: var(--index_margin55);
}
main .futureArea .area04 .img {
  position: relative;
}
main .futureArea .area04 .img img {
  position: absolute;
  top: 0;
  left: 0;
}
main .futureArea .area04 .img::before {
  display: block;
  content: "";
  width: 100%;
}
main .futureArea .area04 .img.sp {
  display: none;
  visibility: hidden;
  width: 100%;
  margin-bottom: var(--index_margin55);
}
@media screen and (max-width: 770px) {
  main .futureArea .area04 .img.sp {
    display: block;
    visibility: visible;
  }
}
main .futureArea .area04 .img.sp::before {
  padding-top: 61.8%;
}
main .futureArea .area04 .imagesBox {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 770px) {
  main .futureArea .area04 .imagesBox {
    display: none;
    visibility: hidden;
  }
}
main .futureArea .area04 .imagesBox:last-child {
  margin-bottom: 0px;
}
main .futureArea .area04 .imagesBox .img {
  margin: 0 10px;
}
main .futureArea .area04 .imagesBox .img:first-child {
  margin-right: 0px;
}
main .futureArea .area04 .imagesBox .img:last-child {
  margin-left: 0px;
}
main .futureArea .area04 .imagesBox .img618 {
  width: calc(40.95% - 10px);
}
main .futureArea .area04 .imagesBox .img618::before {
  padding-top: 61.8%;
}
main .futureArea .area04 .imagesBox .img11 {
  width: calc(25.34% - 10px);
}
main .futureArea .area04 .imagesBox .img11::before {
  padding-top: 100%;
}
main .futureArea .area04 .imagesBox .img43 {
  width: calc(33.71% - 10px);
}
main .futureArea .area04 .imagesBox .img43::before {
  padding-top: 75%;
}
main .futureArea .area04 .imagesBoxSp {
  display: none;
  visibility: hidden;
}
@media screen and (max-width: 770px) {
  main .futureArea .area04 .imagesBoxSp {
    display: flex;
    visibility: visible;
    flex-wrap: wrap;
  }
}
main .futureArea .area04 .imagesBoxSp .img618 {
  width: 100%;
}
main .futureArea .area04 .imagesBoxSp .img618::before {
  padding-top: 61.8%;
}
main .futureArea .area04 .imagesBoxSp .img43 {
  width: 57.1%;
}
main .futureArea .area04 .imagesBoxSp .img43::before {
  padding-top: 75%;
}
main .futureArea .area04 .imagesBoxSp .img11 {
  width: 42.9%;
}
main .futureArea .area04 .imagesBoxSp .img11::before {
  padding-top: 100%;
}
main .proInfoArea {
  padding-bottom: var(--index_margin150);
  padding: clamp(50px, -246.154px + 38.462vw, 100px) 0;
  background-color: #EDEDED;
}
main .proInfoArea .outline {
  margin-bottom: var(--index_margin55);
}
main .proInfoArea .outline h3 {
  font-size: clamp(20px, -9.615px + 3.846vw, 25px);
  margin-bottom: 5px;
  text-align: center;
}
main .proInfoArea .outline p {
  font-size: clamp(12px, 0.154px + 1.538vw, 14px);
  text-align: center;
}
main .proInfoArea .infoTextBlock {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: var(--index_margin55);
}
main .proInfoArea .infoTextBlock li {
  display: flex;
  align-items: center;
}
main .proInfoArea .infoTextBlock li div {
  width: 1px;
  height: clamp(13px, 10.701px + 0.299vw, 15px);
  background-color: #515150;
  margin: 0 clamp(15px, -14.615px + 3.846vw, 20px);
}
main .proInfoArea .infoTextBlock li .tag {
  display: inline-block;
  font-size: clamp(9px, -2.846px + 1.538vw, 11px);
  border: solid 1px #515150;
  padding: 3px 4px;
  line-height: 1;
  margin-right: 5px;
}
main .proInfoArea .infoTextBlock li p:nth-of-type(3) .tag {
  margin-left: 9px;
}
main .proInfoArea #productInfoSlider {
  width: 100%;
}
main .proInfoArea #productInfoSlider .swiper-wrapper {
  width: 100%;
  margin-bottom: var(--index_margin55);
}
main .proInfoArea #productInfoSlider .swiper-nav {
  justify-content: center;
}
main .proInfoArea #productInfoSlider .swiper-pagination {
  width: 110px;
}
main .proInfoArea #productInfoSlider .swiper-button-next::after,
main .proInfoArea #productInfoSlider .swiper-button-prev::after {
  width: 17px;
  height: 17px;
}
main .proInfoArea #productInfoSlider .swiper-pagination-bullet {
  background-color: #515150;
}
main .proInfoArea #productInfoSlider a {
  pointer-events: none;
}
@media screen and (max-width: 770px) {
  main .proInfoArea #productInfoSlider .img {
    width: 87%;
    margin: 0 auto;
  }
}
main .proInfoArea #productInfoSlider .text {
  width: 100%;
}
main .proInfoArea #productInfoSlider .text h5 {
  font-size: 16px;
  text-align: center;
}
main .proInfoArea #productInfoSlider .text .price {
  display: flex;
  justify-content: center;
  align-items: center;
}
main .proInfoArea #productInfoSlider .text .price p {
  font-size: 16px;
}
main .proInfoArea #productInfoSlider .text .price p:nth-child(2) {
  margin: 0 5px;
}
main .proInfoArea #productInfoSlider .text .detail {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
}
main .proInfoArea #productInfoSlider .text .detail p {
  font-size: clamp(13px, 7.077px + 0.769vw, 14px);
  line-height: 1.6;
}
main .releaseDaysArea {
  padding: var(--index_margin180) 0;
}
main .releaseDaysArea .box {
  margin-bottom: var(--index_margin_60);
}
main .releaseDaysArea .box .line {
  width: 100%;
  height: 1px;
  display: block;
  background: #ffffff;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(0, 0, 0) 50%, rgba(255, 255, 255, 0) 100%);
}
main .releaseDaysArea .box .date {
  font-size: clamp(17px, 7.806px + 1.194vw, 25px);
  text-align: center;
  margin: clamp(30px, 18.507px + 1.493vw, 40px) 0 clamp(20px, 8.507px + 1.493vw, 30px);
}
main .releaseDaysArea .box .date .en {
  font-size: clamp(23px, 13.806px + 1.194vw, 31px);
}
main .releaseDaysArea .box p {
  text-align: center;
  margin-bottom: clamp(30px, 18.507px + 1.493vw, 40px);
}
@media screen and (max-width: 770px) {
  main .releaseDaysArea .box p {
    text-align: left;
  }
}
main .releaseDaysArea .box p a {
  text-decoration: underline;
}
main .releaseDaysArea .box p a:hover {
  color: #B0B2AF;
}
main .releaseDaysArea .base_btn {
  width: 300px;
  background-color: #1c1c1c;
  padding: 22px 0;
  margin: clamp(30px, 18.507px + 1.493vw, 40px) auto;
}
main .releaseDaysArea .base_btn span {
  color: #ffffff;
  font-size: clamp(13px, 10.701px + 0.299vw, 15px);
}
main .releaseDaysArea .base_btn:hover span {
  color: #1c1c1c;
}
main .releaseDaysArea .base_btn::after {
  background-color: #ffffff;
}