﻿.page-skincare .main-banner {
  margin: 0 auto;
  max-width: var(--width-1200);
}
.page-skincare .p-main-area {
  margin-top: 53px;
  padding: 70px 0 100px;
  background: #F2F8F8;
}
.page-skincare .p-highspec-ttl {
  text-align: center;
}
.page-skincare .p-highspec-desc {
  text-align: center;
  font-size: 2.2rem;
  line-height: 44px;
  color: #333;
  margin-top: 58px;
}
.page-skincare .p-highspec-whatis.box {
  margin: 73px auto 0;
}
.page-skincare .p-highspec-whatis-txt {
  font-size: 1.7rem;
  line-height: 34px;
  color: #333;
  margin-bottom: 44px;
}
.page-skincare .p-highspec-whatis-ckbox {
  font-size: 1.7rem;
  line-height: 26px;
  color: #333;
  background: #f8f4f6;
  padding: 57px 60px 33px;
  position: relative;
  text-align: left;
  margin-top: 48px;
}
.page-skincare .p-highspec-whatis-tag {
  position: absolute;
  top: -23px;
  left: 64px;
  width: 236px;
  height: 46px;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 25px;
  background: #eb6ba7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.page-skincare .p-highspec-whatis-tag::after {
  content: '';
  position: absolute;
  left: 34px;
  bottom: -14px;
  width: 25px;
  height: 25px;
  background: url(/cms/contents/lens/highspec/skincare/img/ico_skincare_01.svg) no-repeat 0 0/100%;
}
.page-skincare .p-highspec-whatis-lst li {
  display: flex;
}
.page-skincare .p-highspec-whatis-lst li::before {
  content: '';
  width: 26px;
  height: 22px;
  background: url(/cms/contents/lens/highspec/skincare/img/ico_skincare_02.svg) no-repeat 0 0/100%;
  margin-right: 16px;
  flex: 0 0 auto;
}
.page-skincare .p-highspec-whatis-lst li+li {
  margin-top: 7px;
}
.page-skincare .p-highspec-whatis-lstNote {
  margin-top: 20px;
}
.page-skincare .p-highspec-whatis-lstNote li {
  font-size: 1.4rem;
}
.page-skincare .p-highspec-whatis-sttl {
  font-size: 2rem;
  line-height: 28px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin: 40px 0 18px;
}
.page-skincare .box {
  border-radius: 10px;
  margin: 70px auto 0;
  max-width: 920px;
  overflow: hidden;
}
.page-skincare .box__ttl {
  border-radius: 10px 10px 0 0;
  background: #EB6BA7;
  color: #fff;
  font-weight: bold;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.46875;
  padding: 20px;
  min-height: 87px;
}
.page-skincare .box__content {
  background: #fff;
  padding: 47px 60px 50px;
  overflow: hidden;
  text-align: center;
}
.page-skincare .box strong {
  color: #EB6BA7;
  font-weight: bold;
  font-size: 1.9rem;
}
.page-skincare .box p {
  font-size: 1.7rem;
  line-height: 2;
  color: #333;
}
.page-skincare .box p:first-child {
  margin-bottom: 44px;
}
.page-skincare .box p.p--f15 {
  font-size: 1.5rem;
  line-height: 1.46667;
  margin-top: 50px;
}
.page-skincare .box .notes {
  margin: 28px auto 45px;
  padding-left: 17px;
}
.page-skincare .box .notes img {
  max-width: 75px;
}
.page-skincare .box .notes span {
  margin-left: 26px;
  text-align: left;
  display: inline-block;
}
.page-skincare .box .img-area {
  margin-bottom: 30px;
}
.page-skincare .box .img-area.last {
  margin-bottom: 0;
}
.page-skincare .box .underline {
  max-width: 800px;
  margin: 30px auto 48px;
  height: 3px;
  background: #DEDEDE;
  display: block;
}
.page-skincare .box .h__ttl {
  color: #EB6BA7;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.66667;
  text-align: center;
  margin: 20px auto 80px;
}
.page-skincare .box__gray {
  position: relative;
  max-width: 800px;
  margin: 0 auto 50px;
  background: #F8F4F6;
  padding: 55px 55px 33px 65px;
}
.page-skincare .box__gray-ttl {
  font-size: 1.9rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  max-width: 100%;
  height: 58px;
  line-height: 58px;
  background: #EB6BA7;
  border-radius: 999px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 484px;
}
.page-skincare .box__gray p {
  text-align: left;
}
.page-skincare .box__btn {
  border-radius: 4px;
  background: #42A8BA url(/cms/contents/lens/highspec/skincare/img/icon_skincare_arrow.svg) no-repeat;
  background-position: center right 27px;
  max-width: 493px;
  height: 110px;
  margin: auto;
  display: flex;
  align-items: center;
  padding-right: 90px;
  padding: 0 90px 0 55px;
}
.page-skincare .box__btn:hover {
  background-color: #42BAB5;
}
.page-skincare .box__items {
  display: flex;
  max-width: 700px;
  margin: auto;
  width: 100%;
  margin-bottom: 44px;
}
.page-skincare .box__item {
  max-width: 320px;
}
.page-skincare .box__item:first-child {
  margin-right: 60px;
}
.page-skincare .box__item img {
  max-width: 100%;
}
.page-skincare .box__item p {
  font-weight: bold;
  font-size: 1.7rem;
  line-height: 2;
  margin-top: 12px;
}
.page-skincare .banner {
  text-align: center;
  margin: 66px auto 100px;
  width: fit-content;
}
.page-skincare .banner__ttl {
  font-size: 1.7rem;
  line-height: 2;
  color: #333;
  position: relative;
  display: inline-block;
  margin-bottom: 13px;
}
.page-skincare .banner__ttl:before {
  content: "";
  width: 17px;
  height: 24px;
  background: url(/cms/contents/lens/highspec/skincare/img/ico_skincare_03.svg) no-repeat;
  background-size: contain;
  position: absolute;
  left: -27px;
  top: 6px;
}
.page-skincare .banner__ttl:after {
  content: "";
  width: 17px;
  height: 24px;
  background: url(/cms/contents/lens/highspec/skincare/img/ico_skincare_04.svg) no-repeat;
  background-size: contain;
  position: absolute;
  right: -27px;
  top: 6px;
}
.page-skincare .banner__content {
  position: relative;
  display: block;
}
.page-skincare .banner__content:hover .banner__label {
  background: url(/cms/contents/lens/highspec/skincare/img/bg_skincare_label_hover.svg) no-repeat;
}
.page-skincare .banner__content:hover .banner__txt--bg {
  color: #FF990F;
}
.page-skincare .banner__txt {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: bold;
}
.page-skincare .banner__txt--s {
  font-size: 2.2rem;
  line-height: 2.22727;
  margin-bottom: 4px;
}
.page-skincare .banner__txt--l {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 21px;
}
.page-skincare .banner__txt--bg {
  display: inline-block;
  background: #fff;
  border-radius: 999px;
  color: #00A0F0;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 4px 29px;
  font-weight: 400;
  margin-top: 7px;
}
.page-skincare .banner__label {
  position: absolute;
  background: url(/cms/contents/lens/highspec/skincare/img/bg_skincare_label.svg) no-repeat;
  background-size: contain;
  width: 120px;
  height: 120px;
  right: 5px;
  bottom: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 10px;
  padding-bottom: 10px;
  color: #fff;
  font-size: 1.3rem;
  line-height: 18px;
  font-weight: bold;
  text-align: left;
}
@media screen and (max-width:740px) {
  .page-skincare .p-main-area {
    margin-top: 25px;
    padding: 38px 15px 65px;
  }
  .page-skincare .p-highspec-ttl {
    max-width: 78%;
    margin: 0 auto;
  }
  .page-skincare .p-highspec-desc {
    font-size: clamp(1.3rem, calc(15 / 375 * 100vw), 1.7rem);
    line-height: 2;
    margin-top: 30px;
  }
  .page-skincare .p-highspec-whatis.box {
    margin: 25px 0 0;
  }
  .page-skincare .p-highspec-whatis-txt {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
    line-height: 2;
    margin-bottom: 25px;
  }
  .page-skincare .p-highspec-whatis-ckbox {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
    line-height: 1.53;
    padding: 38px 16px 18px;
    margin-top: 68px;
  }
  .page-skincare .p-highspec-whatis-tag {
    top: -17px;
    left: 16px;
    width: 180px;
    height: 33px;
    font-size: clamp(1rem, calc(12 / 375 * 100vw), 1.4rem);
  }
  .page-skincare .p-highspec-whatis-tag::after {
    left: 28px;
    bottom: -12px;
    width: 22px;
    height: 22px;
  }
  .page-skincare .p-highspec-whatis-lst li {
    display: flex;
  }
  .page-skincare .p-highspec-whatis-lst li::before {
    width: 18px;
    height: 16px;
    margin-right: 7px;
  }
  .page-skincare .p-highspec-whatis-lstNote {
    margin-top: 10px;
  }
  .page-skincare .p-highspec-whatis-lstNote li {
    font-size: clamp(.9rem, calc(10 / 375 * 100vw), 1.2rem);
  }
  .page-skincare .p-highspec-whatis-sttl {
    font-size: clamp(1.3rem, calc(15 / 375 * 100vw), 1.7rem);
    line-height: 1.33;
    margin: 27px 0 10px;
  }
  .page-skincare .box {
    margin: 25px auto 0;
  }
  .page-skincare .box__ttl {
    border-radius: 5px 5px 0 0;
    font-size: clamp(1.8rem, calc(20 / 375 * 100vw), 2.2rem);
    line-height: 1.5;
    padding: 12px;
    min-height: 54.5px;
  }
  .page-skincare .box__content {
    padding: 25px 12px;
  }
  .page-skincare .box strong {
    font-size: clamp(1.3rem, calc(15 / 375 * 100vw), 1.7rem);
  }
  .page-skincare .box p {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
  }
  .page-skincare .box p:first-child {
    margin-bottom: 25px;
  }
  .page-skincare .box p.p--f15 {
    font-size: clamp(1rem, calc(11 / 375 * 100vw), 1.3rem);
    line-height: 1.73913;
    margin-top: 25px;
  }
  .page-skincare .box .notes {
    margin: 20px auto 25px;
    padding-left: 0;
  }
  .page-skincare .box .notes img {
    max-width: 60px;
  }
  .page-skincare .box .notes span {
    margin: 9px 0 0;
    text-align: center;
    display: block;
  }
  .page-skincare .box .img-area {
    margin-bottom: 20px;
  }
  .page-skincare .box .underline {
    max-width: 800px;
    margin: 25px auto 30px;
    height: 1.5px;
  }
  .page-skincare .box .h__ttl {
    font-size: clamp(1.4rem, calc(16 / 375 * 100vw), 1.8rem);
    line-height: 1.75;
    margin: 10px auto 62px;
  }
  .page-skincare .box__gray {
    margin: 0 auto 15px;
    padding: 50px 21px 22px 21px;
  }
  .page-skincare .box__gray-ttl {
    font-size: clamp(1.2rem, calc(14 / 375 * 100vw), 1.6rem);
    height: 63.5px;
    line-height: 1.57;
    width: 224px;
    padding: 10px;
  }
  .page-skincare .box__btn {
    background-position: center right 12px;
    background-size: 8px 16px;
    height: initial;
    padding: 10px 40px 10px 20px;
  }
  .page-skincare .box__btn img {
    width: auto;
    max-height: 40px;
  }
  .page-skincare .box__items {
    width: 61.7vw;
    margin-bottom: 30px;
    display: block;
  }
  .page-skincare .box__item {
    max-width: initial;
  }
  .page-skincare .box__item:first-child {
    margin: 0 0 20px;
  }
  .page-skincare .box__item p {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);font-weight: bold;
    line-height: 1.53846;
    margin-top: 8px;
  }
  .page-skincare .banner {
    margin: 25px 0 0;
    width: 100%;
  }
  .page-skincare .banner__ttl {
    font-size: clamp(1rem, calc(11 / 375 * 100vw), 1.3rem);
    line-height: 1.5;
  }
  .page-skincare .banner__content {
    background: url(/cms/contents/lens/highspec/skincare/img/img_skincare_banner_sp.jpg) no-repeat center / contain;
    height: 50.7vw;
  }
  .page-skincare .banner__content:hover .banner__label {
    background: none;
  }
  .page-skincare .banner__txt {
    position: static;
  }
  .page-skincare .banner__txt--s {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
    line-height: 2.30769;
  }
  .page-skincare .banner__txt--l {
    font-size: clamp(2rem, calc(22 / 375 * 100vw), 2.4rem);
    margin-bottom: 17.5px;
  }
  .page-skincare .banner__txt--bg {
    font-size: clamp(.9rem, calc(10 / 375 * 100vw), 1.2rem);
    padding: 4px 15px;
    margin-top: 0;
    width: 242px;
    max-width: 242px;
  }
  .page-skincare .banner__label {
    background: #00A0F0;
    height: 29px;
    right: auto;
    left: 50%;
    bottom: -12px;
    padding: 0;
    font-size: clamp(.9rem, calc(10 / 375 * 100vw), 1.2rem);
    line-height: 2.7;
    transform: translateX(-50%);
    justify-content: center;
  }
  .page-skincare .spAdjust1 {
    margin: 0 auto;
    width: calc(226 / 375 * 100vw);
    max-width: 387px;
  }
  .page-skincare .spAdjust2 {
    margin: 0 auto;
    width: calc(206 / 375 * 100vw);
    max-width: 355px;
  }
}


/* 価格ブロック */
.price-promo {
  margin: 70px 0 0;
  /* padding: 30px 10px; */
  /* background: #f7f7f7; */
}
.p-price-option {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px 60px;
}
@media screen and (max-width:1085px) {
  .p-price-option {
    flex-direction: column;
  }
}
.p-price-option .c-icon--plus {
  margin: 0 10px;
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  color: #000;
  position: relative;
}
.p-price-option .c-icon--plus.u-large {
  margin: 0;
  width: 40px;
  height: 40px;
}
.p-price-option .c-icon--plus:before,
.p-price-option .c-icon--plus:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: block;
  width: 100%;
  height: 6px;
  border-radius: .04em;
  background-color: #EB6BA7;
  backface-visibility: hidden;
  box-sizing: content-box;
}
.p-price-option-card__body .c-icon--plus:before,
.p-price-option-card__body .c-icon--plus:after {
  /* width: 80%; */
  height: 4px;
  background-color: #b4b5b3;
}
.p-price-option .c-icon--plus:before {
  transform: rotate(90deg);
}
.p-price-option-card {
  width: 420px;
}
.p-price-option-card__head {
  background: #EB6BA7;
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 2.3rem;
  line-height: 1.46154;
  letter-spacing: .255em;
  padding-top: .3em;
  padding-bottom: .3em;
  border-radius: 5px 5px 0 0;
}
.p-price-option-card__body {
  height: 113px;
  padding-top: 23px;
  padding-bottom: 15px;
  text-align: center;
  background-color: #fff;
  border: solid 3px #EB6BA7;
  border-top-width: 0;
  border-radius: 0 0 5px 5px;
}
.p-price-option-card__body .-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.p-price-option-card__body .-icon--frame svg {
  width: 80px;
  height: 64px;
}
.p-price-option-card__body .-icon--lens svg {
  width: 56px;
  height: 55px;
}
.p-price-text {
  font-weight: 700;
  font-size: 4.7rem;
  vertical-align: bottom;
  line-height: 1;
  color: #EB6BA7;
}
.p-price-text__small {
  font-size: 1.7rem;
}
.p-price-option-text {
  font-size: 1.7rem;
  font-weight: bold;
  vertical-align: middle;
}
.p-price-option-note {
  margin-top: 10px;
  font-size: 1.2rem;
}
@media screen and (max-width:740px) {
  .price-promo {
    margin: 40px 0 0;
    padding: 15px;
  }
  .p-price-option {
    flex-direction: column;
    gap: 10px;
  }
  .p-price-option .c-icon--plus,
  .p-price-option .c-icon--plus.u-large {
    width: 20px;
    height: 20px;
  }
  .p-price-option .c-icon--plus:before,
  .p-price-option .c-icon--plus:after {
    width: 18px;
    height: 4px;
  }
  .p-price-option-card {
    width: 100%;
  }
  .p-price-option-card__head {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
  }
  .p-price-option-card__body {
    height: initial;
    padding: 15px 0;
  }
  .p-price-option-card__body .-icon--frame svg {
    width: 47px;
    height: auto;
  }
  .p-price-option-card__body .-icon--lens svg {
    width: 33px;
    height: auto;
  }
  .p-price-text {
    font-size: clamp(3.2rem, calc(34 / 375 * 100vw), 3.6rem);
  }
  .p-price-text__small {
    font-size: clamp(1.1rem, calc(13 / 375 * 100vw), 1.5rem);
  }
  .p-price-option-text {
    font-size: clamp(1rem, calc(11 / 375 * 100vw), 1.3rem);
  }
  .p-price-option-note {
    margin-top: 5px;
    font-size: clamp(.8rem, calc(9 / 375 * 100vw), 1.1rem);
  }
}