@charset "utf-8";

/* html {
  visibility: hidden;
}
html.wf-active,
html.loading-delay {
    visibility: visible;
}
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
} */
/* =========================================== */
/*    共通
/* =========================================== */

.pore-essence {
  font-size: 16px;
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", sans-serif;
	font-style: normal;
}

.sec__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 40px;
}

@media screen and (max-width: 767px) {
  .sec__inner {
    padding-inline: 15px;
  }
}

.pc-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.text__note {
  font-size: clamp(10px, 2.5vw, 13px);
  text-align: right;
}

@media screen and (max-width: 767px) {
  .text__note {
    text-align: left;
  }
}

.text__small {
  font-size: 0.7em;
}

sup {
  font-size: clamp(10px, .6em, 13px);
}

.wh__box {
  background-color: rgba(255, 255, 255, 0.78);
  padding: min(9vw, 30px) min(5vw, 40px) min(9vw, 50px);
}

.round__box {
  border-radius: 30px;
}

.marker__yellow {
  background :linear-gradient(transparent 60%, #FFF100 60%);
}


/* =========================================== */
/*    kv
/* =========================================== */

.pore-essence .kv {
  background: url(../img/kv_bg.webp) no-repeat center center/cover;
  padding: min(7.5vw, 100px) 0 min(5vw, 36px);
}
.pore-essence .kv__inner {
  position: relative;
  z-index: 1;
  max-width: 940px;
  margin-inline: auto;
  padding-inline: min(5vw, 40px);
}
.pore-essence .kv__grid {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: min(5vw, 20px);
  row-gap: min(9vw, 40px);
  margin-bottom: min(12vw, 110px);
}
.pore-essence .kv__title {
  text-align: center;
  display: grid;
  row-gap: min(6vw, 32px);
}

@media screen and (max-width: 767px) {
  .pore-essence .kv {
    background: url(../img/kv_bg_sp.webp) no-repeat center center/cover;
  }
  .pore-essence .kv__inner {
    padding-inline: 15px;
  }
  .pore-essence .kv__grid {
    grid-template-columns: auto;
    justify-items: center;
  }
  .pore-essence .kv__img {
    width: 37.5vw;
    max-width: 155px;
    margin-inline: auto;
  }
}

/* =========================================== */
/*    lead
/* =========================================== */
.pore-essence .lead {
  background: #fefcf3 url(../img/lead_bg.webp) no-repeat center bottom/cover;
  padding: min(7.5vw, 30px) 0 min(22vw, 68px);
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", serif;
  letter-spacing: .11em;
  font-weight: 600;
}

.pore-essence .lead__text_sub {
  color: #fff;
  font-size: min(6.75vw, 27px);
}

.pore-essence .lead__text_sub--s {
  font-size: .7em;
}

.pore-essence .lead__text_sub--m {
  font-size: .8em;
}

.pore-essence .lead__text_main {
  color: #fff;
  font-size: min(8vw, 32px);
}

.pore-essence .lead__text_main--s {
  font-size: .75em;
}

.pore-essence .lead__text_main--m {
  font-size: .93em;
}

.pore-essence .lead__text_main--l {
  font-size: 1.06em;
}

.pore-essence .gold-textbg {
  background: linear-gradient(94deg, #CFC16B -4.02%, #D0C26E 2.83%, #D3C777 8.54%, #DACF87 13.1%, #E3DA9E 17.66%, #EFE9BC 22.23%, #FDFAE0 25.65%, #FFFDE5 26.79%, #CCBE7B 55.32%, #FFFCD1 80.42%, #CFC16B 110.09%);
  color: #333;
  padding-inline: .3em;
  margin-right: .3em;
}

@media screen and (max-width: 767px) {
  .pore-essence .lead {
    background: #fefcf3 url(../img/lead_bg_sp.webp) no-repeat center bottom/cover;
  }
}

/* =========================================== */
/*    ingredient
/* =========================================== */
.pore-essence .ingredient {
  background: #fff url(../img/ingredient_bg.webp) no-repeat center top/cover;
  padding:100px 0 min(14vw, 56px);
  margin-top: -36px;
}

.pore-essence .ingredient__title {
  text-align: center;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro",
    "Hiragino Mincho Pro", serif;
  font-size: min(6vw, 32px);
  font-weight: 600;
  letter-spacing: .07em;
  margin-bottom: min(4vw, 35px);
}

.pore-essence .point__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: space-between;
  justify-items: center;
  column-gap: min(5vw, 20px);
  row-gap: min(4.5vw, 16px);
  margin-bottom: min(16vw, 140px);
}

.pore-essence .glass__box {
  border: 1px solid #696216;
  padding: min(5vw, 24px) min(6vw, 24px) min(5vw, 30px);
  background: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(7.8px);
  width: 100%;
}

.pore-essence .point__title {
  color: #817328;
  text-align: center;
  font-size: min(4.5vw, 20px);
  font-weight: 700;
  margin-bottom: min(2.5vw, 15px);
}

.pore-essence .point__detail {
  font-size: min(5.5vw, 16px);
  font-weight: 700;
}

.pore-essence .ingredient__sub-title {
  text-align: center;
  font-size: min(4.5vw, 28px);
  font-weight: 700;
  margin-bottom: min(2.5vw, 15px);
}

.pore-essence .ingredient__sub-title .bracket {
  color: #B9B293;
  display: inline-block;
  padding-inline: min(2vw, 20px);
}

.pore-essence .ing-figure__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  column-gap: 10px;
  row-gap: 18px;
  margin-bottom: min(5vw, 56px);
}

@media screen and (max-width: 767px) {

  .pore-essence .ingredient {
    background: #fff url(../img/ingredient_bg_sp.webp) no-repeat center top -5vw /cover;
    padding-top: 18vw;
    margin-top: -12vw;
  }

  .pore-essence .ingredient__title {
    margin-bottom: 16vw;
  }

  .pore-essence .point__grid {
    grid-template-columns: 1fr;
  }

  .pore-essence .ing-figure__grid {
    grid-template-columns: auto;
    justify-content: center;
  }
}

/* =========================================== */
/*    effect
/* =========================================== */

.pore-essence .effect__wrapper {
  padding: min(7.5vw, 100px) 0 min(15vw, 74px);
  background-color: #FAFAC6;
}

.pore-essence .effect__title {
  text-align: center;
  font-size: min(6vw, 28px);
  font-weight: 700;
  margin-bottom: min(4vw, 35px);
  letter-spacing: .08em;
  line-height: 1.8;
}

.pore-essence .marker__white {
  position: relative;
}
.pore-essence .marker__white::before,
.pore-essence .marker__white::after {
  content: "";
  height: 1.5em;
  width: 1px;
  background-color: #333;
  display: inline-block;
  position: absolute;
  bottom: 0;
}
.pore-essence .marker__white::before {
  margin-right: 1em;
  transform: rotate(-30deg);
  left: -1.5em;
}
.pore-essence .marker__white::after {
  margin-left: 1em;
  transform: rotate(30deg);
  right: -1.5em;
}

.pore-essence .effect__title span {
  background :linear-gradient(transparent 60%, #fff 60%);
}

.pore-essence .keana__grid {
  display: grid;
  grid-template-columns: min(39vw, 245px) auto;
  column-gap: min(6vw, 48px);
  row-gap: min(8vw, 32px);
  justify-content: center;
  margin-bottom: min(6vw, 32px);
}

.pore-essence .keana__hadaimg {
  width: 39vw;
  max-width: 245px;
}

.pore-essence .keana__about--copy {
  color: #E40041;
  font-size: min(5vw, 22px);
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: min(5vw, 24px);
}

.pore-essence .keana__about--mtext {
  font-size: min(4.5vw, 18px);
  font-weight: 700;
  margin-bottom: min(3vw, 12px);
}

.pore-essence .trouble__list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: min(3vw, 12px);
}


.pore-essence .trouble__list li {
  background-color: #fff;
  padding: .5em .7em .5em 1em;
  border-radius: 35px;
  font-size: min(4vw, 16px);
  font-weight: 700;
  max-width: 180px;
}

.pore-essence .trouble__list li::before {
  content: "";
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  background: url(../img/alert_icon.svg) no-repeat center center/contain;
  margin-right: 5px;
  transform: translateY(.2em);
}

.pore-essence .effect__downarrow {
  text-align: center;
  margin-bottom: min(7vw, 28px);
}

.pore-essence .approach {
  margin-bottom: min(9vw, 84px);
}

.pore-essence .approach__title {
  border-radius: 32px;
  background: linear-gradient(90deg, #CFC16B -19.07%, #D0C26E -11.23%, #D3C777 -4.69%, #DACF87 0.54%, #E3DA9E 5.77%, #EFE9BC 11%, #FDFAE0 14.92%, #FFFDE5 16.23%, #CCBE7B 48.92%, #FFFCD1 77.68%, #CFC16B 111.68%);
  max-width: 830px;
  margin-inline: auto;
  padding: .3em 1em;
  text-align: center;
  font-size: min(6.5vw, 28px);
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: min(5vw, 20px);
}

.pore-essence .approach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  column-gap: min(6vw, 24px);
  row-gap: min(7vw, 28px);
}

@media screen and (max-width: 767px) {
  .pore-essence .marker__white::before,
  .pore-essence .marker__white::after {
    height: 2em;
    bottom: .2em;
  }
  
  .pore-essence .keana__grid {
    grid-template-columns: auto;
    justify-items: center;
  }

  .pore-essence .keana__about--mtext {
    text-align: center;
  }

  .pore-essence .trouble__list {
    justify-items: center;
  }

  .pore-essence .trouble__list li {
    min-width: 180px;
  }

  .pore-essence .approach__title {
    border-radius: 17.5vw;
    max-width: 830px;
  }

  .pore-essence .approach__grid {
    grid-template-columns: auto;
  }

}

/* =========================================== */
/*    test
/* =========================================== */

.pore-essence .test__title {
  background: linear-gradient(90deg, #F0F054 0%, #FFFFB1 50.49%, #EFEF43 87.02%, #F0F054 100%);
  box-shadow: 4px 4px 0 0 rgba(196, 196, 0, 0.48);
  font-size: min(6vw, 28px);
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  margin-bottom: min(6vw, 32px);
  padding: .4em .5em;
  max-width: 700px;
  margin-inline: auto;
}

.pore-essence .wh__box + .wh__box {
  margin-top: min(6.5vw, 28px);
}

.pore-essence .test__name {
  font-size: min(6.5vw, 18px);
  font-weight: 700;
  text-align: center;
  margin-bottom: min(5vw, 24px);
}

.pore-essence .test__name .bracket {
  color: #B9B293;
  display: inline-block;
  padding-inline: min(2vw, 20px);
}

.pore-essence .test__detail {
  text-align: center;
  font-size: min(4vw, 16px);
  margin-bottom: min(6vw, 24px);
}

.pore-essence .test__keanaimg {
  text-align: center;
  transform: translateX(45px);
}

.pore-essence .graph__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: min(8vw, 40px);
  row-gap: min(3.5vw, 14px);
  margin-bottom: min(5.5vw, 28px);
}

.pore-essence [class^="graph__box"] {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: min(3vw, 18px);
  background-color: #fff;
}

.pore-essence .graph__name {
  color: #fff;
  font-size: min(4vw, 18px);
  font-weight: 700;
  padding: .2em 2em;
  text-align: center;
  margin-bottom: min(3.75vw, 24px);
}

.pore-essence .graph__text,
.pore-essence [class^="graph__box"] > figure,
.pore-essence [class^="graph__box"] > .text__note {
  padding-inline: min(5vw, 20px);
}

.pore-essence .graph__text {
  font-size: min(3.25vw, 16px);
  margin-bottom: 1em;
  text-align: center;
}

.pore-essence .graph__subtext {
  display: block;
  font-size: min(3vw, 12px);
  margin-top: .5em;
}

.pore-essence [class^="graph__box"] > figure {
  margin-bottom: min(2vw, 10px);
  text-align: center;
}

.pore-essence .graph__box--first {
  border: 1px solid #37A354;
}

.pore-essence .graph__box--first .graph__name {
  background-color: #37A354;
  border: 1px solid #37A354;
}

.pore-essence .graph__box--second {
  border: 1px solid #3A5E9B;
}

.pore-essence .graph__box--second .graph__name {
  background-color: #3A5E9B;
  border: 1px solid #3A5E9B;
}

.pore-essence .graph__copy {
  color: #E4007F;
  text-align: center;
  font-size: min(5vw, 22px);
  font-weight: 700;
  letter-spacing:.06em;
  text-decoration: underline;
  text-underline-offset: .5em;
  line-height: 2;
}

@media screen and (max-width: 767px) {
  
  .pore-essence .test__keanaimg {
    transform: translateX(0);
  }

  .pore-essence .graph__grid {
    grid-template-columns: auto;
  }
}

/* =========================================== */
/*    series
/* =========================================== */

.pore-essence .product__wrapper {
  background: linear-gradient(90deg, rgba(207, 193, 107, 0.47) -19.07%, rgba(208, 194, 110, 0.47) -11.23%, rgba(211, 199, 119, 0.47) -4.69%, rgba(218, 207, 135, 0.47) 0.54%, rgba(227, 218, 158, 0.47) 5.77%, rgba(239, 233, 188, 0.47) 11%, rgba(253, 250, 224, 0.47) 14.92%, rgba(255, 253, 229, 0.47) 16.23%, rgba(204, 190, 123, 0.47) 48.92%, rgba(255, 252, 209, 0.47) 77.68%, rgba(207, 193, 107, 0.47) 111.68%);
  padding: min(14vw, 66px) 15px min(12.5vw, 74px);
}

.pore-essence .series__title {
  border-radius: 32px;
  background: linear-gradient(90deg, #F0F054 0%, #FFFFB1 50.49%, #EFEF43 87.02%, #F0F054 100%);
  padding: .4em 1.5em;
  max-width: 430px;
  margin-inline: auto;
  text-align: center;
  font-size: min(4.1vw, 22px);
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: min(5.5vw, 26px);
}

.pore-essence .series__grid {
  display: grid;
  grid-template-columns: 1fr auto 1.54fr;
  align-items: center;
  justify-items: center;
}

.pore-essence .series__arrow {
  margin-inline: -30px;
  position: relative;
  z-index: 2;
  transform: translateY(-35px);
}
@media screen and (max-width: 767px) {
  
  .pore-essence .series__grid {
    grid-template-columns: auto;
    align-items: center;
    justify-items: center;
  }

  .pore-essence .series__grid figure:first-child {
    transform: translateX(-3.5vw);
  }
  
  .pore-essence .series__arrow {
    margin-inline: 0;
    transform: rotate(90deg);
    margin-top: 11vw;
    margin-bottom: 4vw;
    width: 27.5vw;
    text-align: center;
  }
}

/* =========================================== */
/*    product
/* =========================================== */

.product {
  margin-bottom: min(3vw, 12px);
}
.product--item{
  display: grid;
  grid-template-columns: 1fr 1.27fr;
  justify-content: center;
  padding: min(3vw, 36px) 0 min(1vw, 22px);
  column-gap: min(8.75vw, 35px);
  row-gap: min(9.5vw, 38px);
}
	.product__item-ttl {
		font-weight: 600;
		font-size: clamp(18px, 4.5vw, 22px);
		line-height: 1.8em;
	}
	.product__item-ttl span{
		font-weight: 400;
		font-size: clamp(16px, 4vw, 20px);
	}
	.product__item-line{
		content: "";
		display: block;
		width: 100%;         /* 線の長さを調整 */
		height: 1px;         /* 線の太さを調整 */
		background: #333;   
		margin-block: 12px; /* 線の色 */
	}
	.product__item-detail{
		max-width: 470px;
	}

  .product__item-txt{
		font-weight: 400;
		font-size: clamp(14px,3.5vw,16px);
		line-height: 1.8;
		padding-bottom: min(6vw, 36px);
	}

  .product__item-detail .btn-gray {
    font-size: min(4vw, 20px);
    height: 4.5em;
  }

  
	@media screen and (max-width: 767px) {
    .product--item{
      grid-template-columns: 1fr;
      justify-items: center;
      
    }
    .product__item-detail{
      max-width: 582px;
      margin-inline: auto;
		}
		.product--item-img{
      margin-inline: auto;
    }
    .product__item-detail .btn-gray {
      margin-inline: auto;
    }
	}