@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');

:root {
  --viewport: 750;
  --gold: #BBA171;
}
@media screen and (min-width:768px) {
  :root {
    --viewport: 1280;
  }
}

.font_gold {
  color: var(--gold);
}
.fw300 {
  font-weight: 300;
}
.fw400 {
  font-weight: 400;
}

@media screen and (min-width:768px) {
  .features {
    --viewport: 1280;
  }
}

/*----------------------------------------------------------
    layout
----------------------------------------------------------*/
.inner {
  padding-left: calc(100vw / var(--viewport) * 30);
  padding-right: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:979px) {
  .inner {
    max-width: 1160px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
  }
}

/* firstview */
.firstview {
  width: 100%;
  background-color: #000;
}
.firstviewWrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
}
.firstviewImage {
  width: 100%;
  height: 100%;
  display: block;
}
.firstviewImage img {
  width: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
@media screen and (max-width: 979px) {
  .firstviewImage img {
    max-height: none;
    height: calc(100vw / var(--viewport) * 518);;
  }
}
@media screen and (min-width: 1136px) {
  .firstviewImage img {
    width: auto;
    height: 400px;
    margin: 0 auto;
  }
}
.firstviewContent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.firstviewContent__Subtitle {
  width: calc(100vw / var(--viewport) * 314);
  margin-bottom: calc(100vw / var(--viewport) * 16);
  display: block;
}
@media screen and (min-width:980px) {
  .firstviewContent__Subtitle {
    width: 314px;
    margin-bottom: 16px;
  }
}
.firstviewContent__Title {
  color: #fff;
  font-size: 36px;
  font-weight: 600;
  display: block;
}
@media screen and (max-width: 979px) {
  .firstviewContent__Title {
    font-size: calc(100vw / var(--viewport) * 44);
  }
}

/* priceBanner */
.priceBanner {
  padding: calc(100vw / var(--viewport) * 77) 0 0;
}
@media screen and (min-width:980px) {
  .priceBanner {
    padding: 80px 0 0;
  }
}

/* lead */
.lead {
  padding: calc(100vw / var(--viewport) * 82) 0 0;
}
.lead h2 {
  font-size: calc(100vw / var(--viewport) * 44);
  font-weight: bold;
  text-align: center;
  margin-top: calc(100vw / var(--viewport) * 67);
  margin-bottom: calc(100vw / var(--viewport) * 34);
}
.lead h2 .sub {
  font-size: calc(100vw / var(--viewport) * 33);
}
@media screen and (min-width:980px) {
  .lead {
    padding: min(calc(100vw / var(--viewport) * 82), 82px) 0 0;
  }
  .lead h2 {
    font-size: min(calc(100vw / var(--viewport) * 53), 53px);
    margin-top: min(calc(100vw / var(--viewport) * 62), 62px);
    margin-bottom: min(calc(100vw / var(--viewport) * 30), 30px);
  }
  .lead h2 .sub {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
  }
}

/* case */
.case .caseSwiper {
  width: 100%;
  padding: 0 calc(100vw / var(--viewport) * 30);
}
.case .caseSwiper .slide-item {
  margin: 0;
  padding: 0;
  width: 100%;
}
.case .caseSwiper .slide-item img {
  width: 100%;
  height: auto;
  display: block;
}
.case .caseSwiper .slide-item figcaption {
  color: var(--gold);
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 600;
  line-height: 1.3;
  background: #000;
  width: 100%;
  height: calc(100vw / var(--viewport) * 120);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.case .caseSwiper .slide-item figcaption .sub {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 28);
  font-weight: 400;
}
.case .caseSwiper.second {
  margin-top: calc(100vw / var(--viewport) * 40);
}
.case .caption {
  font-size: calc(100vw / var(--viewport) * 24);
  line-height: 1.67;
  margin-top: calc(100vw / var(--viewport) * 34);
}
@media screen and (min-width:980px) {
  .case .caseSwiper {
    max-width: 1160px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto;
  }
  .case .caseSwiper .slide-item figcaption {
    font-size: min(calc(100vw / var(--viewport) * 28), 28px);
    height: min(calc(100vw / var(--viewport) * 80), 80px);
  }
  .case .caseSwiper .slide-item figcaption .sub {
    font-size: min(calc(100vw / var(--viewport) * 20), 20px);
  }
  .case .caseSwiper.second {
    margin-top: min(calc(100vw / var(--viewport) * 40), 40px);
  }
  .case .caption {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    margin-top: min(calc(100vw / var(--viewport) * 18), 18px);
  }
}

/* price */
.price {
  padding: calc(100vw / var(--viewport) * 58) 0 calc(100vw / var(--viewport) * 80);
}
.price h2 {
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: bold;
  text-align: center;
  margin-bottom: calc(100vw / var(--viewport) * 31);
}
.price h3 {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 40);
  text-align: center;
  background: #4D96BC;
  width: 100%;
  height: calc(100vw / var(--viewport) * 120);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(100vw / var(--viewport) * 41);
}
.price .imgBox figcaption {
  color: var(--gold);
  font-size: calc(100vw / var(--viewport) * 56);
  font-weight: bold;
  text-align: center;
  width: 100%;
  height: calc(100vw / var(--viewport) * 120);
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price .imgBox .priceBox {
  background: var(--gold);
  width: 100%;
  height: calc(100vw / var(--viewport) * 120);
  display: flex;
  justify-content: center;
  align-items: center;
}
.price .imgBox .priceBox .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(100vw / var(--viewport) * 12);
}
.price .imgBox .priceBox .count {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 33);
  background: #000;
  width: calc(100vw / var(--viewport) * 98);
  height: calc(100vw / var(--viewport) * 50);
  border-radius: calc(100vw / var(--viewport) * 4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.price .imgBox .priceBox .price {
  padding: 0;
}
.price .imgBox .priceBox .price img {
  height: calc(100vw / var(--viewport) * 88);
  padding-top: calc(100vw / var(--viewport) * 15);
  box-sizing: content-box;
}
.price .imgBox .priceBox .tax {
  font-size: calc(100vw / var(--viewport) * 25);
  writing-mode: vertical-rl;
}
.price .caption {
  font-size: calc(100vw / var(--viewport) * 24);
  line-height: 1.67;
  margin-top: calc(100vw / var(--viewport) * 34);
}
.price .button a {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 26);
  font-weight: 600;
  text-decoration: none;
  width: calc(100vw / var(--viewport) * 540);
  height: calc(100vw / var(--viewport) * 111);
  background: url(../img/arw03_wh_r.svg), #026EA8;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 97% 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(100vw / var(--viewport) * 18);
  margin: calc(100vw / var(--viewport) * 76) auto 0;
  transition: opacity 0.3s;
}
@media screen and (max-width:767px) {
  .price h3.second {
    margin-top: calc(100vw / var(--viewport) * 80);
  }
  .price .pc_right {
    margin-top: calc(100vw / var(--viewport) * 40);
  }
}
@media screen and (min-width:768px) {
  .price {
    padding: min(calc(100vw / var(--viewport) * 65), 65px) 0 0;
  }
  .price h2 {
    font-size: min(calc(100vw / var(--viewport) * 40), 40px);
    margin-bottom: min(calc(100vw / var(--viewport) * 32), 32px);
  }
  .price .pc_flex {
    display: flex;
    justify-content: space-between;
    gap: min(calc(100vw / var(--viewport) * 20), 20px);
  }
  .price h3 {
    font-size: min(calc(100vw / var(--viewport) * 29), 29px);
    height: min(calc(100vw / var(--viewport) * 70), 70px);
    margin-bottom: min(calc(100vw / var(--viewport) * 19), 19px);
  }
  .price .imgBox figcaption {
    font-size: min(calc(100vw / var(--viewport) * 28), 28px);
    height: 70px;
  }
  .price .imgBox .priceBox {
    height: min(calc(100vw / var(--viewport) * 70), 70px);
  }
  .price .imgBox .priceBox .flex {
    gap: min(calc(100vw / var(--viewport) * 5), 5px);
  }
  .price .imgBox .priceBox .count {
    font-size: min(calc(100vw / var(--viewport) * 15), 15px);
    width: min(calc(100vw / var(--viewport) * 41), 41px);
    height: min(calc(100vw / var(--viewport) * 21), 21px);
    border-radius: min(calc(100vw / var(--viewport) * 4), 4px);
  }
  .price .imgBox .priceBox .price {
    padding: 0;
  }
  .price .imgBox .priceBox .price img {
    height: min(calc(100vw / var(--viewport) * 38), 38px);
    padding-top: min(calc(100vw / var(--viewport) * 7), 7px);
  }
  .price .imgBox .priceBox .tax {
    font-size: min(calc(100vw / var(--viewport) * 11), 11px);
  }
  .price .caption {
    font-size: min(calc(100vw / var(--viewport) * 18), 18px);
    margin-top: min(calc(100vw / var(--viewport) * 19), 19px);
  }
  .price .button a {
    font-size: min(calc(100vw / var(--viewport) * 22), 22px);
    width: min(calc(100vw / var(--viewport) * 460), 460px);
    height: min(calc(100vw / var(--viewport) * 100), 100px);
    background-size: min(calc(100vw / var(--viewport) * 44), 44px);
    border-radius: min(calc(100vw / var(--viewport) * 18), 18px);
    margin: min(calc(100vw / var(--viewport) * 82), 82px) auto 0;
  }
}