@charset "UTF-8";
:root{
  --header-height: 6rem;
}
 .p-omatome {
  /* 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: '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) {
  :root{
    --header-height: 10.1rem;
  }
  .p-omatome {
    --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;
  }
}
html{
  scroll-padding-top: var(--header-height);
}
/* .s-container .p-omatome * {
  font-family: 'Inter','Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
} */

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

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

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

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

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

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

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


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



/* -- common -- */
.global-contents__inner {
  padding-bottom: 11.2rem;
}
.p-omatome__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-omatome__read{
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media screen and (min-width: 768px) {
  .global-contents__inner{
    padding-bottom: 8rem;
  }
  .p-omatome__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 - value
 * ========================================================================= */
.p-omatome-value{
  background-color: var(--c-bg-gray);
}
.p-omatome-value__inner{
  padding-inline: var(--gutter-sp);
  padding-block: 6rem;
}
.s-container .p-omatome-value__heading p{
  font-size: 1.7rem;
  line-height: 1.3;
  font-weight: var(--fw-medium);
  text-align: center;
  font-family: var(--font-mixed);
}
.p-omatome-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);
  font-family: var(--font-mixed);
}
.p-omatome-value__label{
  width: fit-content;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .1em;
  border: 1px solid #333;
  border-radius: 1px;
  padding: .5rem 1rem;
}
.p-omatome-value__body{
  margin-top: 3rem;
}
.p-omatome-value__main{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.6rem;
}
.p-omatome-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-omatome-value__main-item-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-container p.value-amount{
  text-align: center;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: var(--fw-medium);
}
.s-container p.value-numeric{
  font-size: 6rem;
  /* letter-spacing: -.05em; */
  line-height: 1;
  text-align: center;
}
.s-container p.value-numeric span{
  display:block;
  font-size: 4rem;
  letter-spacing: 0;
}
.value-soap-image{
  height: 3rem;
  margin-top: 1rem;
}
.value-soap-image img{
  width: auto;
  height: 100%;
}
.p-omatome-value__note{
  margin-top: 1.8rem;
}
.s-container p.p-omatome-value__note-text{
  font-size: 1.2rem;
  line-height: 1.8;
  letter-spacing: .04em;
  text-align: center;
}
.p-omatome-value__detail-list{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  /* gap: 5.4rem; */
  gap: 1rem;
}
.p-omatome-value__detail-item{
  position: relative;
}
.p-omatome-value__detail-item + .p-omatome-value__detail-item:before{
  content: "";
  position: absolute;
  top: 0;
  /* left: -2.7rem; */
  left: -.5rem;
  width: 1px;
  height: 100%;
  background-color: var(--c-line);
}
.s-container p.p-omatome-value__detail-per{
  text-align: center;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: .05em;
  font-weight: var(--fw-medium);
  font-family: var(--font-mixed);
}
.p-omatome-value__detail-price{
  margin-top: 1rem;
  font-family: var(--font-mixed);
}
.s-container p.p-omatome-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: .45rem .3rem .35rem;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5ch;
  margin-inline: auto;
  width: fit-content;
  /* max-width: 12.4rem; */
  padding-inline: 2.4rem;
  font-family: var(--font-mixed);
}
.s-container p.p-omatome-value__detail-price-label .text-yen,
.s-container p.p-omatome-value__detail-price-label .text-otoku{
  font-size: 1.2rem;
}
.s-container p.p-omatome-value__detail-price-numeric{
  margin-top: 1rem;
  font-size: 3rem;
  line-height: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--font-mixed);
}
.s-container p.p-omatome-value__detail-price-numeric span{
  font-size: 1rem;
}
@media screen and (min-width: 768px) {
  .p-omatome-value__inner{
    padding-block: 8rem;
    padding-inline: 0;
    width: var(--content-max);
    margin-inline: auto;
  }
  .p-omatome-value__title{
    margin-top: 2rem;
    gap: 1.8rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .p-omatome-value__title span{
   margin-top: .2rem;
  }
  .p-omatome-value__body{
    margin-top: 4rem;
  }
  .p-omatome-value__main{
    gap: 2rem;
  }
  .p-omatome-value__main li{
    padding: 2rem 3rem 2.1rem;
    align-items: flex-start;
    position: relative;
    display: grid;
    place-content: center;
  }
  .p-omatome-value__main-item-inner{
    display: block;
  }
  .s-container p.value-amount{
    text-align: left;
    font-size: 3rem;
  }
  .s-container p.value-numeric{
    font-size: 8.5rem;
    display: flex;
    align-items: baseline;
    gap: .2ch;
    margin-top: .5rem;
  }
  .s-container p.value-numeric span{
    font-size: 6.5rem;
  }
  .value-soap-image{
    height: 3rem;
    margin-top: 0;
    position: absolute;
    top: 2.1ch;
    left: calc(3rem + 9ch);
  }
  .p-omatome-value__main-item:nth-child(1) .value-soap-image{
    top: 2.5ch;
    left: calc(7.2rem + 9ch);
  }
  .p-omatome-value__main-item:nth-child(2) .value-soap-image{
    top: 2.5ch;
    left: calc(7.2rem + 9ch);
  }
  .p-omatome-value__note{
    margin-top: 2.5rem;
  }
  .s-container p.p-omatome-value__note-text{
    font-size: 1.5rem;
  }
  .p-omatome-value__detail-list{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 5rem;
  }
  .p-omatome-value__detail-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
  }
  .p-omatome-value__detail-item + .p-omatome-value__detail-item:before{
    left: -2.5rem;
  }
  .s-container p.p-omatome-value__detail-per{
    font-size: 1.5rem;
  }
  .p-omatome-value__detail-price{
    margin-top: 0;
    display: flex;
    gap: .8rem;
    justify-content: center;
    align-items: end;
  }
  .s-container p.p-omatome-value__detail-price-label{
    width: fit-content;
    font-size: 2.4rem;
    padding: .8rem 1.3rem .6rem;
    gap: .1ch;
  }
  .s-container p.p-omatome-value__detail-price-label .text-yen,
  .s-container p.p-omatome-value__detail-price-label .text-otoku{
    font-size: 1.6rem;
  }
  .s-container p.p-omatome-value__detail-price-numeric{
    margin-top: 0;
    font-size: 4rem;
  }
  .s-container p.p-omatome-value__detail-price-numeric span{
    font-size: 1.6rem;
  } 
  .c-button.p-information__button {
    width: 23rem;
    height: 4.6rem;
    font-size: 1.5rem;
  }
}


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

.p-omatome-merit .common-section[data-section="service"] .common-section__inner{
  padding-inline: 0;
}
.p-omatome-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-omatome-merit__note{
  margin-top: 2.7rem;
  font-size: 1.3rem;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .p-omatome-merit__inner{
    padding-block: 8rem;
  }
  .p-omatome-merit .common-section[data-section="service"]{
    padding-block: 5.3rem 0;
  }
  .s-container p.p-omatome-merit__note{
    margin-top: 2.6rem;
    font-size: 1.5rem;
    text-align: center;
  }
  .p-omatome-merit .common-section[data-section="service"] .common-section__inner{
    width: var(--container-max);
  }
  .p-omatome-merit__title{
    font-size: 2.6rem;
    letter-spacing: .03em;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-list{
    grid-template-columns: repeat(2, 1fr);
    gap: 12.5rem;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item {
    padding: 0;
    display: grid;
    grid-template-columns: 12.4rem auto;
    grid-template-rows: auto 1fr;
    grid-column-gap: 3rem;
    grid-row-gap: 0px;
    align-items: flex-start;
    width: fit-content;
    margin-inline: 0 auto;
    border: unset;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item:first-of-type{
    margin-inline: auto 0;
    border: unset;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item + .about-item{
    position: relative;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item + .about-item::after{
    content: "";
    position: absolute;
    top: 0;
    left: -6.25rem;
    width: 1px;
    height: 80%;
    background-color: var(--c-line);
  }
  .about-item__image { grid-area: 1 / 1 / 3 / 2; }
  .about-item__title { grid-area: 1 / 2 / 2 / 3; }
  .about-item__lead { grid-area: 2 / 2 / 3 / 3; }

  .p-omatome-merit .common-section[data-section="service"] .about-item[data-merit="remaind"]{
    padding-inline: 1rem;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item__image{
    width: 12.4rem;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item__title{
    text-align: left;
    border-bottom: unset;
    text-decoration: underline;
    text-underline-offset: 1.2rem;
    text-decoration-color: var(--c-apibrown);
    line-height: 1.5;
    letter-spacing: .05em;
    font-size: 2.2rem;
    margin-inline: 0;
  }
  .p-omatome-merit .common-section[data-section="service"] .about-item__lead{
    margin-top: 2rem;
  }
}

@media screen and (max-width: 767px) {
  /* 親要素：GridをやめてFlexbox（縦並び）にし、全体を中央寄せにする */
  .p-omatome-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-omatome-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-omatome-merit .common-section[data-section="service"] .about-item__lead {
    margin-top: 0.7rem;
  }
}

/* =========================================================================
 *  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-omatome__read{
  margin-top: 1rem;
}
.p-information__image{
  width: 11rem;
  display: block;
  margin-inline: auto 0;
}
.p-omatome-value__button-area{
  margin-top: 5rem;
}
.c-button.p-omatome-value__button {
  width: 23rem;
  min-width: 23rem;
  font-size: 1.4rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  margin: 0 auto;
  padding-inline: 1rem;
  background-color: unset;
  position: relative;
}
.c-button.p-omatome-value__button::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin-block: auto;
  right: 1.4rem;
  width: 1.2rem;
  height: .6rem;
  transform: translateY(0);
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212.708%22%20height%3D%227.069%22%20viewBox%3D%220%200%2012.708%207.069%22%3E%20%3Cpath%20id%3D%22Vector%22%20d%3D%22M6.648%2C7.069%2C0%2C.723.691%2C0%2C6.615%2C5.654%2C11.984.017l.724.69Z%22%20transform%3D%22translate(0)%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E')
}

@media screen and (min-width: 768px) {
  .p-information{
    margin-block: 7.3rem 5.5rem;
  }
  .p-information .p-omatome__read{
    margin-top: 2.6rem;
  }
  .p-information__image{
    width: 14rem;
    margin-top: 1rem;
    margin-inline: auto;
  }
  .c-button.p-omatome-value__button {
    width: 23rem;
    height: 4.6rem;
    font-size: 1.5rem;
  }
}
@media screen and (max-width: 767px) {
  .p-information_inner{
    display:grid;
    grid-template-columns: 1fr 9.5rem;
    grid-template-rows: auto 1fr;
    align-items: center;
  }
  .p-omatome__title {
    grid-area: 1 / 1 / 2 / 2;
    text-align: left;
  }
  .p-information__image {
    grid-area: 1 / 2 / 2 / 3;
    width: 9.5rem;
  }
  .p-omatome__read {
    grid-area: 2 / 1 / 3 / 3;
  }
}
/* =========================================================================
 *  Section - 定期お届け便対象商品一覧
 * ========================================================================= */
.p-target-products{
  padding-inline: var(--gutter-sp);
  margin-block: 4rem;
}
.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-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-omatome-target-products .p-omatome__title{
  text-align: center;
 }
 .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);
  }
}