.summary__title {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0, 0, 1, 1), transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(0, 10px);
  will-change: opacity, transform;
}
.is-inview .summary__title {
  opacity: 1;
  transform: translate(0, 0);
}

.summary__text {
  line-height: 2.8;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0, 0, 1, 1) 200ms, transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 200ms;
  transform: translate(0, 10px);
  will-change: opacity, transform;
}
.is-inview .summary__text {
  opacity: 1;
  transform: translate(0, 0);
}

.summary__note {
  line-height: 1.5;
  letter-spacing: 0.2em;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0, 0, 1, 1) 400ms, transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 400ms;
  transform: translate(0, 10px);
  will-change: opacity, transform;
}
.is-inview .summary__note {
  opacity: 1;
  transform: translate(0, 0);
}

.sec {
  position: relative;
}

.sec__img {
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0, 0, 1, 1), transform 1200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translate(0, 3%);
  will-change: opacity, transform;
}
.sec__img.is-inview {
  opacity: 1;
  transform: translate(0, 0);
}

.sec__text {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.sec__title {
  flex-shrink: 0;
}

.sec__price {
  color: #3f4a79;
}

.sec__description {
  line-height: 1.9;
}

.sec__link {
  display: flex;
  align-items: center;
  color: #3f4a79;
}
.sec__link::before {
  content: "";
  background-color: #3f4a79;
  border-radius: 50%;
}
.sec__link[aria-disabled=true] {
  pointer-events: none;
}

@media only screen and (max-width: 767px) {
  .kv__title {
    width: 27.4666666667vw;
  }
  .content-body {
    padding-top: 13.3333333333vw;
    padding-left: 5.3333333333vw;
    padding-right: 5.3333333333vw;
  }
  .summary__title {
    width: 28vw;
    margin-left: auto;
    margin-right: auto;
  }
  .summary__text {
    margin-top: 8vw;
    font-size: 3.4666666667vw;
  }
  .summary__note {
    margin-top: 8vw;
    font-size: 2.9333333333vw;
  }
  .sec {
    margin-top: 21.3333333333vw;
  }
  .sec.--1 {
    margin-top: 13.3333333333vw;
  }
  .sec.--1 .sec__title {
    width: 10.9333333333vw;
  }
  .sec.--2 .sec__title {
    width: 10.9333333333vw;
  }
  .sec.--3 .sec__title {
    width: 11.2vw;
  }
  .sec.--4 .sec__title {
    width: 11.4666666667vw;
  }
  .sec__text {
    margin-top: -2.6666666667vw;
    padding: 9.3333333333vw 8vw 9.3333333333vw 6.6666666667vw;
  }
  .sec__detail {
    width: 57.3333333333vw;
  }
  .sec__price {
    margin-top: 0.5333333333vw;
    font-size: 2.6666666667vw;
  }
  .sec__price .num {
    font-size: 4vw;
  }
  .sec__description {
    margin-bottom: 3.2vw;
    font-size: 3.4666666667vw;
  }
  .sec__note {
    margin-top: 6.4vw;
    font-size: 2.6666666667vw;
  }
  .sec__link {
    margin-top: 5.3333333333vw;
    font-size: 3.4666666667vw;
  }
  .sec__link::before {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
  }
  .sec__img {
    margin-left: -5.3333333333vw;
    margin-right: -5.3333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .kv__title {
    width: 133px;
  }
  .content-body {
    padding-top: min(13.4020618557vw, 130px);
  }
  .summary {
    max-width: min(79.381443299vw, 770px);
    margin-left: auto;
    margin-right: auto;
  }
  .summary__title {
    width: min(12.2680412371vw, 119px);
  }
  .summary__text {
    margin-top: min(4.6391752577vw, 45px);
    font-size: min(1.4432989691vw, 14px);
  }
  .summary__note {
    margin-top: min(3.0927835052vw, 30px);
    font-size: min(1.2371134021vw, 12px);
  }
  .sec {
    min-height: min(46.8521229868vw, 640px);
    margin-top: min(7.3206442167vw, 100px);
  }
  .sec:not(:has(.sec__img)) {
    min-height: unset;
  }
  .sec.--1 {
    margin-top: min(7.6866764275vw, 105px);
  }
  .sec.--1 .sec__title {
    width: min(3.0014641288vw, 41px);
  }
  .sec.--1 .sec__img {
    left: min(21.2298682284vw, 290px);
  }
  .sec.--2 .sec__text {
    margin-left: min(51.4641288433vw, 703px);
  }
  .sec.--2 .sec__title {
    width: min(3.0014641288vw, 41px);
  }
  .sec.--2 .sec__img {
    left: max(-7.3206442167vw, -100px);
  }
  .sec.--3 {
    padding-bottom: min(19.9121522694vw, 272px);
  }
  .sec.--3 .sec__title {
    width: min(3.074670571vw, 42px);
  }
  .sec.--3 .sec__img {
    left: min(21.2298682284vw, 290px);
  }
  .sec.--4 .sec__title {
    width: min(3.1478770132vw, 43px);
  }
  .sec__text {
    width: min(28.5505124451vw, 390px);
    padding: min(3.3674963397vw, 46px);
  }
  .sec__detail {
    width: min(15.9590043924vw, 218px);
  }
  .sec__price {
    font-size: min(0.7320644217vw, 10px);
  }
  .sec__price .num {
    font-size: min(1.1713030747vw, 16px);
  }
  .sec__description {
    margin-bottom: min(1.0248901903vw, 14px);
    font-size: min(1.0248901903vw, 14px);
  }
  .sec__note {
    margin-top: min(1.756954612vw, 24px);
    font-size: min(0.878477306vw, 12px);
  }
  .sec__link {
    margin-top: min(2.9282576867vw, 40px);
    font-size: min(1.0248901903vw, 14px);
  }
  .sec__link::before {
    width: min(0.8052708638vw, 11px);
    height: min(0.8052708638vw, 11px);
    margin-right: min(0.3660322108vw, 5px);
  }
  .sec__img {
    position: absolute;
    top: min(4.39238653vw, 60px);
    width: min(66.3250366032vw, 906px);
  }
}