@charset "UTF-8";

/* hero */
#hero .width-wrap .text-area {
  background-image: linear-gradient(
      0deg,
      rgba(22, 22, 46, 0.65),
      rgba(22, 22, 46, 0.65)
    ),
    url("/img/screen/bg_hero_aesthetic.jpg");
}

/* our */
#our .width-wrap .swiper-area .swiper-wrapper .swiper-slide.a {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 22.58%,
      rgba(50, 46, 85, 0.23) 57.42%,
      rgba(50, 46, 85, 0.75) 100%
    ),
    url("/img/screen/img_our_a_01.jpg");
}
#our .width-wrap .swiper-area .swiper-wrapper .swiper-slide.b {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 22.58%,
      rgba(50, 46, 85, 0.23) 57.42%,
      rgba(50, 46, 85, 0.75) 100%
    ),
    url("/img/screen/img_our_a_02.jpg");
}
#our .width-wrap .swiper-area .swiper-wrapper .swiper-slide.c {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 22.58%,
      rgba(50, 46, 85, 0.23) 57.42%,
      rgba(50, 46, 85, 0.75) 100%
    ),
    url("/img/screen/img_our_a_03.jpg");
}

/* explanation */
#explanation
  .width-wrap
  .swiper-area
  .swiper-wrapper
  .swiper-slide
  .img-zone.a {
  background-image: url("/img/screen/img_explanation_a_01.jpg");
}
#explanation
  .width-wrap
  .swiper-area
  .swiper-wrapper
  .swiper-slide
  .img-zone.b {
  background-image: url("/img/screen/img_explanation_a_02.jpg");
}
#explanation
  .width-wrap
  .swiper-area
  .swiper-wrapper
  .swiper-slide
  .img-zone.c {
  background-image: url("/img/screen/img_explanation_a_03.jpg");
}
#explanation
  .width-wrap
  .swiper-area
  .swiper-wrapper
  .swiper-slide
  .img-zone.d {
  background-image: url("/img/screen/img_explanation_a_04.jpg");
}

/* whitening */
#whitening .width-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
#whitening .width-wrap .left .center-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 44px 0;
}
#whitening .width-wrap .left .center-area .left-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#whitening .width-wrap .left .center-area .left-list li {
  display: flex;
  align-items: center;
  gap: 4px;
}
#whitening .width-wrap .left .center-area .left-list li:first-child {
  margin-bottom: 8px;
}
#whitening .width-wrap .left .center-area .right-list li:first-child {
  margin-bottom: 12px;
}
#whitening .width-wrap .left > p {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 5px;
}
#whitening .width-wrap .img {
  aspect-ratio: 63 / 50;
  background: url("/img/screen/img_whitening.jpg") 50% / cover no-repeat;
}

/* who */
#who .width-wrap .contents-area .img.a {
  background-image: url("/img/screen/img_who_a_01.jpg");
}
#who .width-wrap .contents-area .img.b {
  background-image: url("/img/screen/img_who_a_03.jpg");
}
#who .width-wrap .contents-area .img.c {
  background-image: url("/img/screen/img_who_a_02.jpg");
}
#who .deco {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  transform: translateY(70%);
}
#who .deco.a {
  position: absolute;
  left: -23px;
  right: auto;
  bottom: auto;
  top: 0;
  transform: translateY(-20%);
}

#price .width-wrap .price-area {
  padding-top: 44px;
}

#points .title-area > p:nth-child(2) {
  margin: 24px 0 40px;
}
#points .width-wrap .list-area li {
  grid-template-columns: 0.146fr 1fr;
  padding: 0;
}
#points .width-wrap .list-area li .desc {
  padding: 12px 0;
}

/* responsive */
@media all and (max-width: 1325px) {
  #whitening .width-wrap {
    display: grid;
    grid-template-columns: 1fr 1.2902fr;
    align-items: end;
    gap: 40px;
  }
  #whitening .width-wrap .left .center-area {
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 30px 0;
  }
  #whitening .width-wrap .img {
    aspect-ratio: 38 / 25;
    margin-bottom: 7px;
  }
}
@media all and (max-width: 1170px) {
  #who .deco.a {
    display: block;
  }

  #explanation.cus
    .width-wrap
    .swiper-area
    .swiper-wrapper
    .swiper-slide
    .right {
    padding-bottom: 0;
  }
}
@media all and (max-width: 1024px) {
  #whitening .width-wrap {
    grid-template-columns: 1fr 1.1818fr;
    gap: 32px;
  }
  #whitening .width-wrap .left .center-area {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 16px 0;
  }
  #whitening .width-wrap .left .center-area .left-list li:first-child {
    margin-bottom: 4px;
  }
  #whitening .width-wrap .left .center-area .right-list li:first-child {
    margin-bottom: 8px;
  }

  #who .width-wrap .contents-area .img {
    aspect-ratio: 157 / 166.73;
  }
  #who .deco.a {
    left: -52px;
    transform: translateY(-15%);
  }
  #who .deco.a svg {
    width: 247px;
    height: 273px;
  }

  #price .width-wrap {
    grid-template-columns: 1fr 0.995fr;
    gap: 80px;
  }

  #points .title-area > p:nth-child(2) {
    margin: 12px 0 24px;
  }
  #points .width-wrap .list-area li {
    grid-template-columns: 0.14fr 1fr;
  }
  #points .width-wrap .list-area li .desc {
    padding: 8px 0;
  }
}
@media all and (max-width: 1000px) {
  #price .width-wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media all and (max-width: 900px) {
  #whitening .width-wrap {
    grid-template-columns: 1fr;
  }
  #whitening .width-wrap .title-area > p:nth-child(2) {
    margin: 16px 0 36px;
  }
  #whitening .width-wrap .img {
    aspect-ratio: 49 / 30;
    margin-bottom: 36px;
  }

  #who .width-wrap .contents-area .img {
    aspect-ratio: 343 / 180;
  }
  #who .deco.a {
    transform: translateY(-30%);
  }
  #who .deco.a svg {
    width: 200px;
  }
}
@media all and (max-width: 500px) {
  #whitening .width-wrap .left .center-area {
    gap: 16px;
  }

  #who .deco.a {
    left: -46px;
    transform: translateY(-22%);
  }
  #who .deco.a svg {
    width: 123px;
    height: 135.915px;
  }

  #process .width-wrap .process-area:before {
    left: 28px;
  }

  #price .width-wrap .price-area {
    padding-top: 24px;
  }
  #price .width-wrap .price-area .price-list {
    gap: 20px 0;
    margin-bottom: 20px;
  }
  #price .width-wrap .price-area .price-list li {
    height: 55px;
  }

  #points .title-area > p:nth-child(2) {
    margin: 16px 0;
  }
  #points .width-wrap .list-area {
    gap: 20px;
  }
  #points .width-wrap .list-area li {
    grid-template-columns: 0.1356fr 1fr;
  }
  #points .width-wrap .list-area li .desc {
    padding: 4px 0;
  }
}