@charset "UTF-8";

 .p-subscription {
  /* Color tokens (Figma Variables) */
  --c-text: #333;            /* CLEAN BLACK */
  --c-text-sub: #686868;     /* クリーングレー */
  --c-white: #fff;           /* 白 */
  --c-gray: #bbb;            /* グレー */
  --c-line: #ddd;            /* 表用グレー */
  --c-bg-gray: #f5f5f5;      /* 背景グレー */
  --c-apibeige: #fefbf1;     /* アピベージュ */
  --c-apibrown: #b2806a;     /* apibrown */
  --c-apibrown-text: #a56b55;/* apibrown_text */
  /* 補助色 (Figma Variables 外) */
  --c-bg-gray-2: #f6f6f6;
  --c-bg-mv: #f1f1f1;
  --c-bg-eco: #f1f0ee;
  --c-overlay-intro: rgba(146, 92, 17, .35);

  /* Typography tokens (Figma Variables, SP ベース。PC は @media で上書き)
   *   sp_h2_jp     : 18/28/0.05em
   *   sp_h3_jp     : 16/26/0
   *   sp_text      : 14/26/0
   *   sp_text_small: 13/22/0
   *   sp_title_small: 14/22/0
   *   sp_h2_en     : 20/20/0.1em (line-height 1.0)
   */
  --fs-h2: 1.8rem;
  --lh-h2: 1.555;
  --ls-h2: .05em;
  --fs-h3: 1.6rem;
  --lh-h3: 1.625;
  --fs-body: 1.4rem;
  --lh-body: 1.857;
  --fs-text-small: 1.3rem;
  --lh-text-small: 1.692;
  --fs-title-small: 1.4rem;
  --lh-title-small: 1.571;
  --fs-note: 1rem;
  --lh-note: 1.8;
  --fs-en-heading: 2rem;
  --lh-en-heading: 1;
  --ls-en-heading: .1em;
  --fs-article-title: 1.8rem;
  --lh-article-title: 1.444;
  --ls-article-title: .05em;

  /* Layout tokens */
  --gutter-sp: 2.4rem;
  --gutter-pc: 17rem;
  --content-max: 86rem;
  --container-max: 110rem;
  --section-gap-sp: 6rem;
  --section-gap-pc: 8rem;

  /* font family */
  /* font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif; */
  font-family: 'Inter','Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color: var(--c-text);
  font-weight: 400;
  line-height: var(--lh-body);
  /* -webkit-font-smoothing: antialiased; */

  /* 全体ベース */
  position: relative;
}

/* PC 用 typography 上書き (Figma Variables)
 *   pc_h2_jp        : 24/38/0.05em
 *   pc_h3_jp        : 18/26/0
 *   pc_text         : 15/26/0
 *   pc_text_small   : 14/24/0
 *   pc_article_title: 18/26/0.05em
 */
@media screen and (min-width: 768px) {
  .p-subscription {
    --fs-h2: 2.4rem;
    --lh-h2: 1.583;
    --ls-h2: .05em;
    --fs-h3: 1.8rem;
    --lh-h3: 1.444;
    --fs-body: 1.5rem;
    --lh-body: 1.733;
    --fs-text-small: 1.4rem;
    --lh-text-small: 1.714;
    --fs-note: 1.2rem;
    --lh-note: 1.66;
    --fs-en-heading: 2.4rem;
    --lh-en-heading: 1;
    --fs-article-title: 1.8rem;
    --lh-article-title: 1.444;
    --ls-article-title: .05em;
  }
}

/* .s-container .p-subscription * {
  font-family: 'Inter','Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
} */

.p-subscription a {
  color: inherit;
  text-decoration: none;
}

.p-subscription button {
  font-family: inherit;
  color: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

/* インライン英数フォント */
.p-subscription .u-en {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* レスポンシブ改行 */
.p-subscription .u-br-pc {
  display: none;
}

.p-subscription .u-br-sp {
  display: inline;
}

@media screen and (min-width: 768px) {
  .p-subscription .u-br-pc {
    display: inline;
  }

  .p-subscription .u-br-sp {
    display: none;
  }
}


/* -- overwrite -- */
.global-contents:has(.p-subscription) .c-breadcrumb {
  display: none;
}



/* -- common -- */
.global-contents__inner {
  padding-bottom: 11.2rem;
}
.p-subscription__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  text-align: center;
  font-weight: var(--fw-regular);
}
.p-subscription__read{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media screen and (min-width: 768px) {
  .global-contents__inner{
    padding-bottom: 8rem;
  }
  .p-subscription__read{
    text-align: center;
  } 
}

/* =========================================================================
 *  Section - MV
 * ========================================================================= */
.s-mv__title{
  color: var(--c-white);
  font-family: var(--font-mixed);
}

@media screen and (max-width: 767px) {
  .s-mv.s-mv--center .s-mv-unit{
    top: 8rem;
  }
  .s-mv__title{
    color: var(--color-primary);
  }
}

/* =========================================================================
 *  Section - Intro
 * ========================================================================= */
.p-intro{
  padding-inline: var(--gutter-sp);
  margin-block: 5.5rem;
}

@media screen and (min-width: 768px) {
  .p-intro{
    margin-block: 7.3rem;
  }
}

/* =========================================================================
 *  Section - Merit
 * ========================================================================= */
.p-subscription-merit{
  background-color: var(--c-apibeige);
}
.p-subscription-merit__inner{
  padding-inline: var(--gutter-sp);
  padding-block: 5.5rem;
}
.p-subscription-merit .common-section[data-section="service"]{
  padding-block: 4rem 0;
}

.p-subscription-merit .common-section[data-section="service"] .common-section__inner{
  padding-inline: 0;
}
.p-subscription-merit__title{
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}
.s-container p.p-subscription-merit__note{
  margin-top: 3rem;
  font-size: 1rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-subscription-merit__inner{
    padding-block: 8rem;
  }
  .s-container p.p-subscription-merit__note{
    margin-top: 2.8rem;
    font-size: 1.2rem;
  }
  .p-subscription-merit .common-section[data-section="service"] .common-section__inner{
    width: var(--container-max);
  }
  .p-subscription-merit__title{
    font-size: 2.6rem;
    letter-spacing: .03em;
  }
  .p-subscription-merit .common-section[data-section="service"] .about-list{
    /* grid-template-columns: repeat(5, 1fr); */
    grid-template-columns: repeat(4, 1fr);
  }
  .p-subscription-merit .common-section[data-section="service"] .about-item {
    /* padding: 1rem 2rem 0; */
    padding: 1rem 3rem 0;
    grid-template-rows: subgrid;
    grid-row : span 3;
    gap: 0;
    align-items: start;
  }
  .p-subscription-merit .common-section[data-section="service"] .about-item[data-merit="remaind"]{
    /* padding-inline: 1rem; */
    padding-inline: 3rem;
  }
  .p-subscription-merit .common-section[data-section="service"] .about-item__image{
    width: 9.4rem;
  }
  .p-subscription-merit .common-section[data-section="service"] .about-item__title{
    text-align: center;
    border-bottom: unset;
    text-decoration: underline;
    text-underline-offset: .4rem;
    text-decoration-color: var(--c-apibrown);
    line-height: 1.5;
    letter-spacing: .05em;
  }
  .p-subscription-merit .common-section[data-section="service"] .about-item__lead{
    margin-top: 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  /* 親要素：GridをやめてFlexbox（縦並び）にし、全体を中央寄せにする */
  .p-subscription-merit .common-section[data-section="service"] .about-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 8rem;
    position: relative;
    padding-left: 9.4rem;
  }

  /* アイコン：絶対配置（枠線に対して完全に縦中央）にする */
  .p-subscription-merit .common-section[data-section="service"] .about-item__image {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding-inline: 0;
    width: 8rem;
  }

  /* 不要になったGridの設定を初期化（干渉を防ぐため） */
  .about-item__image { grid-area: auto; }
  .about-item__title { grid-area: auto; }
  .about-item__lead {  grid-area: auto; }

  /* タイトルとリード文の間の隙間をここで微調整 */
  .p-subscription-merit .common-section[data-section="service"] .about-item__lead {
    margin-top: 0.7rem;
  }
}

/* =========================================================================
 *  Section - Promise
 * ========================================================================= */
.p-subscription-promise{
  padding-inline: var(--gutter-sp);
  padding-block: 6rem;
}
.p-subscription-promise__inner{
  background-color: var(--c-bg-gray);
  margin: 0 auto;
  padding: 3rem;
  border-radius: .4rem;
  display: grid;
  gap: 2.3rem;
}
.s-container p.p-subscription-promise-heading{
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: var(--fw-medium);
}
.p-subscription-promise-list{
  display: grid;
  margin-top: 1.3rem;
}
.p-subscription-promise-list li{
  display: flex;
  gap: 1ch;
  font-size: 1.3rem;
  line-height: 1.7;
}
.p-subscription-promise-list li:before{
  content: "・";
}
@media screen and (min-width: 768px) {
  .p-subscription-promise{
    padding-block: 8rem;
  }
  .p-subscription-promise__inner{
    width: var(--content-max);
    padding: 3.6rem 3rem;
    border-radius: .4rem;
    display: grid;
    gap: 2rem;
  }
  .s-container p.p-subscription-promise-heading{
    font-size: 1.5rem;
  }
  .p-subscription-promise-list{
    margin-top: 1rem;
  }
  .p-subscription-promise-list li{
    font-size: 1.5rem;
  }
}

/* =========================================================================
 *  Section - value
 * ========================================================================= */
.p-subscription-value{
  background-color: var(--c-bg-gray);
}
.p-subscription-value__inner{
  padding-inline: var(--gutter-sp);
  padding-block: 6rem;
}
.s-container .p-subscription-value__heading p{
  font-size: 1.7rem;
  line-height: 1.3;
  font-weight: var(--fw-medium);
  text-align: center;
}
.p-subscription-value__title{
  margin-top: 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  font-size: 2.6rem;
  letter-spacing: .03em;
  line-height: 1;
  text-align: center;
  font-weight: var(--fw-regular);
}
.p-subscription-value__label{
  width: fit-content;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .1em;
  border: 1px solid var(--c-text);
  border-radius: 1px;
  padding: .5rem 1rem;
}
.p-subscription-value__body{
  margin-top: 3rem;
}
.p-subscription-value__main{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .6rem;
}
.p-subscription-value__main li{
  background-color: var(--c-white);
  padding: 1.6rem 0 1rem;
  border-radius: .4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-subscription-value__main-item-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-container p.value-amount{
  text-align: center;
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: var(--fw-medium);
}
.s-container p.value-numeric{
  font-size: 5rem;
  /* letter-spacing: -.05em; */
  line-height: 1;
  text-align: center;
}
.s-container p.value-numeric span{
  display:block;
  font-size: 2.4rem;
  letter-spacing: 0;
}
.value-soap-image{
  height: 2.6rem;
  margin-top: 1rem;
}
.value-soap-image img{
  width: auto;
  height: 100%;
}
.p-subscription-value__note{
  margin-top: 1.8rem;
}
.s-container p.p-subscription-value__note-text{
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: .04em;
  text-align: center;
}
.p-subscription-value__detail-list{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.4rem;
}
.p-subscription-value__detail-item{
  position: relative;
}
.p-subscription-value__detail-item + .p-subscription-value__detail-item:before{
  content: "";
  position: absolute;
  top: 0;
  left: -.7rem;
  width: 1px;
  height: 100%;
  background-color: var(--c-line);
}
.s-container p.p-subscription-value__detail-per{
  text-align: center;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: .05em;
  font-weight: var(--fw-medium);
}
.p-subscription-value__detail-price{
  margin-top: 1rem;
}
.s-container p.p-subscription-value__detail-price-label{
  background-color: var(--c-apibrown);
  border-radius: .2rem;
  color: var(--c-white);
  font-size: 1.6rem;
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: .1em;
  padding: .4rem .3rem .4rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5ch;
  font-family: var(--font-mixed);
}
.s-container p.p-subscription-value__detail-price-label .text-yen{
  font-size: 1.4rem;
}
.s-container p.p-subscription-value__detail-price-label .text-otoku{
  font-size: 1.2rem;
}

.s-container p.p-subscription-value__detail-price-numeric{
  margin-top: 1rem;
  font-size: 2.4rem;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-mixed);
}
.s-container p.p-subscription-value__detail-price-numeric span{
  font-size: 1rem;
}

@media screen and (min-width: 768px) {
  .p-subscription-value__inner{
    padding-block: 8rem;
    padding-inline: 0;
    width: var(--content-max);
    margin-inline: auto;
  }
  .p-subscription-value__title{
    margin-top: 2rem;
    gap: 1.8rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .p-subscription-value__title span{
   margin-top: .2rem;
  }
  .p-subscription-value__body{
    margin-top: 4rem;
  }
  .p-subscription-value__main{
    gap: 1.6rem;
  }
  .p-subscription-value__main li{
    padding: 2rem 3rem 2.1rem;
    align-items: flex-start;
    position: relative;
    display: grid;
    place-content: center;
  }
  .p-subscription-value__main-item-inner{
    display: block;
  }
  .s-container p.value-amount{
    text-align: left;
    font-size: 2.4rem;
  }
  .s-container p.value-numeric{
    font-size: 6.4rem;
    display: flex;
    align-items: baseline;
    gap: .2ch;
    margin-top: .5rem;
  }
  .s-container p.value-numeric span{
    font-size: 4.9rem;
  }
  .value-soap-image{
    height: 2.6rem;
    margin-top: 0;
    position: absolute;
    top: 2.3ch;
    left: calc(3rem + 8.5ch);
  }
  .p-subscription-value__main-item:nth-child(1) .value-soap-image{
    left: calc(4.2rem + 8.5ch);
  }
  .p-subscription-value__main-item:nth-child(2) .value-soap-image{
    left: calc(2.5rem + 8.5ch);
  }
  .p-subscription-value__main-item:nth-child(3) .value-soap-image{
    left: calc(2.5rem + 8.5ch);
  }
  .p-subscription-value__note{
    margin-top: 2.5rem;
  }
  .s-container p.p-subscription-value__note-text{
    font-size: 1.5rem;
  }
  .p-subscription-value__detail-list{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 3.6rem;
  }
  .p-subscription-value__detail-item + .p-subscription-value__detail-item:before{
    left: -1.8rem;
  }
  .s-container p.p-subscription-value__detail-per{
    font-size: 1.5rem;
  }
  .p-subscription-value__detail-price{
    margin-top: 1rem;
    display: flex;
    gap: .8rem;
    justify-content: center;
    align-items: end;
  }
  .s-container p.p-subscription-value__detail-price-label{
    width: fit-content;
    font-size: 2rem;
    padding: .3rem .5rem .3rem;
    gap: .1ch;
  }
  .s-container p.p-subscription-value__detail-price-label .text-yen,
  .s-container p.p-subscription-value__detail-price-label .text-otoku{
    font-size: 1.4rem;
  }
  .s-container p.p-subscription-value__detail-price-numeric{
    margin-top: 0;
    font-size: 3.2rem;
  }
  .s-container p.p-subscription-value__detail-price-numeric span{
    font-size: 1.6rem;
  } 
}

/* =========================================================================
 *  Section - Step
 * ========================================================================= */
.p-subscription-step{
  background-color: var(--c-apibeige);
}
.p-subscription-step__inner{
  padding-block: 6rem;
}
.p-subscription-step .step-slider{
  padding-inline: var(--gutter-sp);
  margin-top: 3.6rem;
}
.p-subscription-step .step__item {
  width: 30rem;
  background-color: var(--c-white);
  border-radius: .4rem;
  height: auto;
  display: flex;
  flex-direction: column;
}
.p-subscription-step .step__item + .step__item{
  position: relative;
}
.p-subscription-step .step__item + .step__item::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  left: -1.7rem;
  width: .814rem;
  height: 1.342rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8.13867%206.40527L1.44727%2013.415L0%2012.0342L5.30859%206.47168L0.0341797%201.44922L1.41309%200L8.13867%206.40527Z%22%20fill%3D%22%23333333%22%2F%3E%3C%2Fsvg%3E')
}
.p-subscription-step .step__item .step__item-inner {
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.s-container p.step__item-heading{
  background-color: var(--c-text);
  line-height: 1;
  color: var(--c-white);
  padding: 1.205rem 2rem;
}
.s-container .step__item-body{
  padding: 1.5rem 1.7rem 3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.step__item-image{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
}
.p-subscription-step .step-slider__pagination{
  margin: 4rem auto 0;
  position: relative;
  width: 20rem;
  height: 2px;
  background-color: #ddd;
}

.p-subscription-step .step-slider__pagination .swiper-pagination-progressbar-fill{
  background-color: var(--color-primary);
}
.step__item-image-caption{
  font-family: var(--font-ja);
}

@media screen and (min-width: 768px) {
  .p-subscription-step__inner{
    padding-block: 7.4rem 7rem;
    width: var(--container-max);
    margin-inline: auto;
  }
  .p-subscription-step .step-slider{
    padding-inline: 0;
    margin-top: 3.3rem;
  }
  .p-subscription-step .step__item {
    width: auto;
  }
  .p-subscription-step .step__item + .step__item::before{
    left: -2rem;
  }
  .s-container p.step__item-heading{
    padding: 1.65rem 2rem;
  }
  .s-container .step__item-body{
    padding: 1.5rem 1.7rem 3rem;
  }
  .step__item-image-caption{
    font-size: 1.5rem;
  }
  .step__item-image{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.1rem;
  }
  .p-subscription-step .step-slider__pagination{
    margin: 4rem 0 0 auto;
    position: relative;
    width: 20rem;
    height: 2px;
    background-color: #ddd;
  }

  .p-subscription-step .step-slider__pagination .swiper-pagination-progressbar-fill{
    background-color: var(--color-primary);
  }
}
/* =========================================================================
 *  Section - 定期同梱サービスもご利用可能 / よくあるご質問
 * ========================================================================= */
.p-information{
  padding-inline: var(--gutter-sp);
  margin-block: 5.5rem 4rem;
}
[data-information="faq"] .p-information_inner{
  border-top: 1px solid #BDBDBD;
  padding-top: 5.4rem;
}
.p-information .p-subscription__read{
  margin-top: 3rem;
}
.p-information__image{
  width: 11rem;
  display: block;
  margin-inline: auto 0;
}
.p-information__button-area{
  margin-top: 4.6rem;
}
.c-button.p-information__button {
  width: 23rem;
  min-width: 23rem;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  margin: 0 auto;
  padding-inline: 1rem;
}

@media screen and (min-width: 768px) {
  .p-information{
    margin-block: 7.3rem 5.5rem;
  }
  .p-information .p-subscription__read{
    margin-top: 2.6rem;
  }
  .p-information__image{
    width: 14rem;
    margin-top: 1rem;
    margin-inline: auto;
  }
  .p-information__button-area{
    margin-top: 4.2rem;
  }
  .c-button.p-information__button {
    width: 23rem;
    height: 4.6rem;
    font-size: 1.5rem;
  }
  .p-subscription-information .p-information__button{
    width: 24rem;
  }
}

/* =========================================================================
 *  Section - 定期お届け便対象商品一覧
 * ========================================================================= */
.p-target-products{
  padding-inline: var(--gutter-sp);
  margin-block: 4rem;
}
.p-subscription-information + .p-target-products__inner{
  border-top: 1px solid #BDBDBD;
  padding-top: 5.4rem;
}
.p-target-products__list{
  margin-top: 3.7rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem 1.6rem;
}
.p-target-products__caption{
  margin-top: .7rem;
  font-size: 1.4rem;
  line-height: 1.57;
}
@media screen and (min-width: 768px) {
  .p-target-products{
    margin-block: 5.5rem 8rem;
    padding-inline: 0;
    width: var(--container-max);
    margin-inline: auto;
  }
  .p-subscription-information + .p-target-products__inner{
    padding-top: 7.2rem;
  }
  .p-target-products__list{
    margin-top: 3.7rem;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 1.6rem 2rem;
  }
  .p-target-products__caption{
    margin-top: 1.2rem;
    font-size: 1.5rem;
  }
}


/* =========================================================================
 *  Section - おまとめ割 対象商品一覧
 * ========================================================================= */
 .p-target-products__image-inner{
   overflow: hidden;
 }
.p-target-products__image-inner img{
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}

@media (hover : hover) {
  .c-button.p-omatome-value__button::after{
    transition: transform var(--transition-duration);
  }
  .c-button.p-omatome-value__button:hover::after{
    transform: translateY(2px);
  }
  .p-target-products__image-inner img{
    transition: scale var(--transition-default),opacity var(--transition-default);
  }
  .p-target-products__image-inner:hover img{
    scale: 1.1;
    opacity: var(--hover-opacity);
  }
  .p-target-products__item > a:hover{
    opacity: 1!important;
  }
  .p-target-products__caption{
    transition:opacity var(--transition-default);
  }
  .p-target-products__caption:hover{
    opacity: var(--hover-opacity);
  }
}