@charset "UTF-8";

.featured004 .c-breadcrumb {
  display: none;
}


/* =========================================================================
 *  featured004 — 完熟はちみつ配合 クレンジングオイルジェル特集ページ
 *  モバイルファースト：SP → @media (min-width: 768px) で PC 拡張
 * ========================================================================= */

/* =========================================================================
 *  Root / Reset within the scope
 * ========================================================================= */

 .p-featured004 {
  /* 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);
  --c-bg-mv-photo-l: #e7e7e9;
  --c-bg-mv-photo-r: #ececee;

  /* 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;
  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-featured004 {
    --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;
  }
}

.p-featured004,
.p-featured004 *,
.p-featured004 *::before,
.p-featured004 *::after {
  box-sizing: border-box;
}

.p-featured004 img,
.p-featured004 picture {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-featured004 ul,
.p-featured004 ol {
  list-style: none;
}

:where(.p-featured004) h1,
:where(.p-featured004) h2,
:where(.p-featured004) h3,
:where(.p-featured004) h4,
:where(.p-featured004) p,
:where(.p-featured004) figure,
:where(.p-featured004) ul,
:where(.p-featured004) ol {
  margin: 0;
  padding: 0;
}


/* s_common.css `.s-container p` (0,1,1) に勝つため (0,1,1) で再宣言 */
.p-featured004 p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-family: var(--font-ja);
  font-weight: var(--fw-regular);
}

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

.p-featured004 button {
  /* font-family: var(--font-mixed); */
  color: inherit;
  border: none;
  /* background: none; */
  cursor: pointer;
}

/* .p-featured004 button.revico-common-button-style{
  background:inherit;
} */

.atari{
  position: relative;
}
.atari::before{
  background-color: var(--c-text);
  color: var(--c-white);
  font-size: 1rem;
  line-height: 1;
  padding: .3rem .6rem;
  position: absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin: auto;
  width: fit-content;
  height: fit-content;
  z-index: 10;
}
.atari[data-atari-text="shooting"]::before{
  content: "撮影想定";
}
.atari[data-atari-text="illustration"]::before{
  content: "イラスト作成予定";
}

.p-featured004 sup{
  font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
.p-featured004 sup span{
  transform: translateY(3px);
  display: inline-block;
}

.p-featured004-mv .atari::before,
.p-featured004-sec01 .atari::before{
  top:2rem;
  bottom: unset;
  right: 2rem;
  left: unset;
  margin: unset;
}

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

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

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

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

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

/* フルブリード（画面幅いっぱい）ユーティリティ */
.p-featured004 .u-fullbleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* セクション間マージン (PC 80px / SP 60px、mv→intro は除外) */
.p-featured004 > section + section {
  margin-top: var(--section-gap-sp);
}
.p-featured004 > section + section.p-featured004-point01{
  margin-top: 0;
}

@media screen and (min-width: 768px) {
  .p-featured004 > section + section,
  .p-featured004 > section + section.p-featured004-point01 {
    margin-top: var(--section-gap-pc);
  }
}

/* mv→intro は隙間なし */
.p-featured004-mv + .p-featured004-intro {
  margin-top: 0;
}


/* =========================================================================
 *  Common: Section title / body text
 * ========================================================================= */

.p-featured004 .c-title-section {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: 400;
  text-align: center;
  color: var(--c-text);
  font-family: var(--font-mixed);
}
.p-featured004-intro__hero-inner .p-featured004-intro__lead,
.p-featured004-intro__heading.c-title-section{
  color: var(--c-white);
}
.p-featured004-mv sup{
  font-size: 1.2rem;
}

/* PC 左寄せモディファイア (sec01, point01__diagram で使う) */
@media screen and (min-width: 768px) {
  .p-featured004 .c-title-section--left {
    text-align: left;
  }
}

.p-featured004 .c-title-section--en {
  font-family: var(--font-mixed);
  font-size: var(--fs-en-heading);
  line-height: var(--lh-en-heading);
  letter-spacing: var(--ls-en-heading);
  font-weight: 400;
  text-align: center;
  margin-bottom: 4rem;
  color: var(--c-text);
}

@media screen and (min-width: 768px) {
  .p-featured004 .c-title-section--en {
    font-size: 2.6rem;
    margin-bottom: 5rem;
  }
}

.p-featured004 .c-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
}

.p-featured004 .c-note {
  display: block;
  font-size: var(--fs-note);
  line-height: var(--lh-note);
  color: var(--c-text);
}


/* =========================================================================
 *  Common: Media 2-column (PC: 画像 + テキスト 2 カラム / SP: 縦積み)
 *  - 画像右 (デフォルト): grid-template-columns: text 49rem / image 33rem
 *  - 画像左 (--image-left): image 33rem / text 49rem
 *  - eco package (--package): image 32rem + gap 5rem
 * ========================================================================= */

@media screen and (min-width: 768px) {
  .p-featured004 .c-media-2col {
    display: grid;
    grid-template-columns: var(--col-text, 49rem) var(--col-image, 33rem);
    column-gap: var(--col-gap, 4rem);
    align-items: start;
    max-width: var(--content-max);
    margin-inline: auto;
  }

  .p-featured004 .c-media-2col--image-left {
    grid-template-columns: var(--col-image, 33rem) var(--col-text, 49rem);
  }

  .p-featured004 .c-media-2col--package {
    --col-image: 32rem;
    --col-gap: 5rem;
  }
}


/* =========================================================================
 *  Common: Image frame (border-radius + overflow:hidden + aspect-ratio)
 * ========================================================================= */

.p-featured004 .c-img-frame {
  border-radius: .4rem;
  overflow: hidden;
}

.p-featured004 .c-img-frame > img,
.p-featured004 .c-img-frame > picture > img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: var(--ar, 3 / 2);
  object-fit: cover;
}

.p-featured004 .c-img-frame--3-2 { --ar: 3 / 2; }
.p-featured004 .c-img-frame--1-1 { --ar: 1 / 1; }


/* =========================================================================
 *  Common: Section divider (border-top + padding-top)
 *  使用箇所: eco / cta / faq / journal / review
 *  ※ mv→intro は隙間 0 のため対象外 (既存 L203 の例外で維持)
 * ========================================================================= */

.p-featured004 .c-section-divider {
  border-top: 1px solid var(--c-line);
  padding-top: 6rem;
}

@media screen and (min-width: 768px) {
  .p-featured004 .c-section-divider {
    padding-top: 8rem;
  }
}


/* =========================================================================
 *  Common: Button
 * ========================================================================= */

.p-featured004 .c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 34.2rem;
  height: 5rem;
  margin: 0 auto;
  border: 1px solid var(--c-text);
  border-radius: .4rem;
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: opacity .3s ease;
}

.p-featured004 .c-btn:hover {
  opacity: .7;
}

.p-featured004 .c-btn--fill {
  background: var(--c-text);
  color: var(--c-white);
}

.p-featured004 .c-btn--outline {
  background: var(--c-white);
  color: var(--c-text);
}

.p-featured004 .c-btn--small {
  max-width: 23rem;
  height: 4.6rem;
  font-size: 1.5rem;
}

/* -- common -- */
.p-featured004 {
  overflow: clip;
}

.p-featured004 .p-featured004-mv.show .p-featured004-mv__img {
    transform: scale(1) !important;
    opacity: 1;
}
.p-featured004 .p-featured004-mv__img {
    transform: scale(1.2);
    opacity: 0;
    transition: transform 2.4s cubic-bezier(.215, .61, .355, 1), opacity 1.2s;
}
/* =========================================================================
 *  Section: MV
 * ========================================================================= */

.p-featured004-mv {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  background: var(--c-bg-mv);
  position: relative;
  overflow: hidden;
}

/* -----------------------------------------------------------------------
 *  Feature MV Animation (汎用 / 移植想定)
 *  ホスト要素に .js-featureMvAnimation を付与し、
 *  画像 -> .js-featureMvAnimation__image
 *  テキスト -> .js-featureMvAnimation__text
 *  を子要素に持たせる。 Intersect で .is-active が付くと
 *  画像 → テキスト の順にフェードインする。
 * ----------------------------------------------------------------------- */
.js-featureMvAnimation__image,
.js-featureMvAnimation__text {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.js-featureMvAnimation__image {
  transition-delay: 0.1s;
}

.js-featureMvAnimation__text {
  transition-delay: 0.9s;
}

.js-featureMvAnimation.is-active .js-featureMvAnimation__image,
.js-featureMvAnimation.is-active .js-featureMvAnimation__text {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js-featureMvAnimation__image,
  .js-featureMvAnimation__text {
    opacity: 1;
    transition: none;
  }
}

.p-featured004-mv__inner {
  position: relative;
  max-width: var(--content-max);
  margin-inline: auto;
}

@media screen and (min-width: 768px) {
  .p-featured004-mv__inner {
      display: block;
      position: static;
      height: 100%;
      max-width: unset;
  }
}

@media (max-width: 767px) {
  .p-featured004-mv__inner {
      display: grid;
      align-items: flex-end;
      height: 100%;
      aspect-ratio: 39/60;
  }
}
.p-featured004-mv__visual {
  width: 100%;
  margin-inline: auto;
  
  
}

@media (max-width: 767px) {
  .p-featured004-mv__visual {
    width: 100%;
    /* aspect-ratio: 390 / 600; */
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow: hidden;
  }
}
@media screen and (min-width: 768px) {
  .p-featured004-mv__visual {
      /* position: absolute; */
      inset: 0;
      z-index: 0;
      width: 100%;
      /* max-width: 120rem; */
      margin-inline: auto;
      aspect-ratio: initial;
      mask-image: linear-gradient(to right, black 96%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, black 96%, transparent 100%);
  }
}
.p-featured004-mv__bottle.p-featured004-mv__bottle {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}
@media screen and (min-width: 768px) {
  .p-featured004-mv__bottle.p-featured004-mv__bottle {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
  }
}

/* SP: 商品名 + 価格 + CTA を画像直下に静的配置 */
.p-featured004-mv__cta {
  position: relative;
  z-index: 2;
  padding: 0 var(--gutter-sp) 4rem;
  text-align: center;
}

/* 商品名 (SP): 2行構造 (.p-featured004 p に勝つため class 二重指定) */
.p-featured004-mv__cta-name.p-featured004-mv__cta-name {
  font-size: var(--fs-h3);
  line-height: 1.375;
  color: var(--c-text);
  margin-bottom: 1.2rem;
}

.p-featured004-mv__cta-name-sub {
  display: inline;
  font-size: 1.2rem;
  line-height: 1.833;
}

.p-featured004-mv__cta-price.p-featured004-mv__cta-price {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--c-text-sub);
  margin-bottom: 1.4rem;
}

.p-featured004-mv__cta-price-num {
  /* font-family: 'Inter', sans-serif; */
  font-family: var(--font-mixed);
  font-size: 1.2rem;
  color: var(--c-text-sub);
  margin-right: .2em;
}

/* SP CTA ボタン */
.p-featured004-mv__cta .c-btn {
  max-width: none;
  width: 100%;
  height: 5rem;
  font-size: var(--fs-body);
  line-height: var(--lh-title-small);
}

/* PC 限定の左コピーエリア（SP は非表示） */
.p-featured004-mv__copy-pc {
  display: none;
}

@media screen and (min-width: 768px) {
  /* PC: section フルブリード + 中央 860px コンテナ + 画像を右端絶対配置 */
  .p-featured004-mv {
    display: block;
    position: relative;
    /* height: 45rem; */
    background: linear-gradient(to right, var(--c-bg-mv-photo-l) 0, var(--c-bg-mv-photo-l) calc(50% - 60rem), var(--c-bg-mv-photo-r) calc(50% + 60rem), var(--c-bg-mv-photo-r) 100%);
  }


  .p-featured004-mv__visual {
    width: 100%;
    height: auto;
    aspect-ratio: initial;
  }

  /* .p-featured004-mv__visual img {
    width: 41rem;
    margin-top: 0rem;
  } */

  .p-featured004-mv__bottle {
    height: 100%;
    width: auto;
    max-width: none;
    object-fit: initial;
    display: block;
  }

  .p-featured004-mv__copy-pc {
    position: absolute;
    right: 0;
    left: 0;
    margin-inline: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: var(--content-max);
    margin-inline: auto;
    height: 100%;
    background: transparent;
  }

  .p-featured004-mv__copy-pc h1 {
    font-size: 2.6rem;
    line-height: 1.538;
    letter-spacing: .03em;
    font-weight: 400;
    color: var(--c-text);
    margin-bottom: 1.8rem;
    white-space: nowrap;
    font-family: var(--font-mixed);
  }

  .p-featured004-mv__copy-pc p {
    font-size: 1.6rem;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--c-text);
  }

  .p-featured004-mv__cta {
    display: none;
  }
}


/* =========================================================================
 *  Section: intro
 * ========================================================================= */

 .p-featured004-intro {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
}

.p-featured004-intro__hero {
  position: relative;
}

.p-featured004-intro__hero::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background-image: url("../img/intro__bg_masked_sp.jpg");
  background-size: cover;
  background-position: center;
  z-index: 0;
}


.p-featured004-intro__hero-inner {
  position: relative;
  z-index: 2;
  padding: 10rem var(--gutter-sp) 9.5rem;
  text-align: center;
}

/* heading: SPのみ表示 (色とマージンのみ個別) */
.p-featured004 .p-featured004-intro__heading {
  margin: 0 calc(var(--gutter-sp) * -1) 4rem;
}

.p-featured004-intro__movie {
  width: 100%;
  margin: 0 auto 4rem;
  aspect-ratio: 342 / 228;
  overflow: hidden;
  border-radius: .2rem;
  background: rgba(255, 255, 255, .12);
}

.p-featured004-intro__movie img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* lead 3段落 (改行は .--pc / .--sp で切替) */
.p-featured004-intro__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  text-align: left;
}

/* lead PC/SP 切り替え */
.p-featured004-intro__lead--pc {
  display: none;
}

.p-featured004-intro__lead--sp {
  display: block;
}

.p-featured004-intro__lead--sp + .p-featured004-intro__lead--sp {
  margin-top: 2.6rem;
}

.p-featured004-intro__lead--last {
  text-shadow: 0 0 1rem rgba(0, 0, 0, .25);
}

/* 帯 (apibrown) */
.p-featured004-intro__band {
  padding: 6rem var(--gutter-sp) 0;
  text-align: center;
}

.p-featured004-intro__band-inner {
  width: 100%;
  margin: 0 auto;
  display:grid;
  gap: 3rem;
}
.p-featured004 .p-featured004-intro__band .c-title-section{
  text-align: center;
}
.p-featured004-intro__band p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media screen and (min-width: 768px) {
  .p-featured004-intro__hero-inner {
    padding: 8rem 0;
    max-width: none;
    margin: 0 auto;
  }

  .p-featured004-intro__heading {
    display: none;
  }

  .p-featured004-intro__movie {
    max-width: 48rem;
    aspect-ratio: 480 / 320;
    margin: 0 auto 4rem;
  }

  .p-featured004-intro__lead {
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    text-shadow: none;
  }

  .p-featured004-intro__lead--pc {
    display: block;
  }


  .p-featured004-intro__lead--sp {
    display: none;
  }

  .p-featured004-intro__hero::before {
    background-image: url("../img/intro__bg_masked_pc.jpg");
  }

  .p-featured004-intro__band {
    padding: 9.2rem 0 0;
  }

  .p-featured004-intro__band-inner {
    max-width: var(--content-max);
    padding: 0;
    margin: 0 auto;
    gap: 4rem;
  }

}


/* =========================================================================
 *  Section: sec_01 — 肌と一体化して、うるおいの連鎖が続く肌へ
 * ========================================================================= */
.p-featured004-sec01{
  background: var(--c-apibeige);
}
 .p-featured004-sec01__inner {
  padding-block: 6rem;
  padding-inline: var(--gutter-sp);
}

.p-featured004-sec01__title {
  margin-bottom: 2.5rem;
}
.p-featured004-sec01__title sup{
  font-size: 1.4rem;
}

.p-featured004-sec01__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.p-featured004-sec01__description{
  /* display:grid;
  gap: 4rem; */
  margin-top: 4rem;
}


.p-featured004-sec01__caption {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin-top: 2.4rem;
}

@media screen and (min-width: 768px) {
  .p-featured004-sec01__inner {
    width: var(--content-max);
    margin: 0 auto;
    padding-block:8rem 9rem;
    padding-inline: 0;
  }
  .p-featured004 .p-featured004-sec01__title.c-title-section{
    text-align: left;
  }
  .p-featured004-sec01__description{
    margin-top: 5rem;
    /* grid-template-columns: auto 33rem; */
  }
  .p-featured004 .p-featured004-point .c-title-section{
    text-align: left;
    margin-top: -1rem;
  }
  .p-featured004 .p-featured004-sec01__title.c-title-section{
    text-align: center;
  }
  .p-featured004-sec01__lead{
    text-align: center;
  }



}


/* =========================================================================
 *  Section: point (Point01 / 02 / 03 共通)
 *  PC: アコーディオン挙動なし (常時opened, 装飾線 + 中央ラベル)
 *  SP: アコーディオン挙動あり (Point01=opened初期, Point02/03=closed初期)
 * ========================================================================= */

 .p-featured004-point {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  position: relative;
}

@media (max-width: 767px) {
  .p-featured004 .p-featured004-point {
    --accordion-contents-gutter-sp: 5rem;
  }

  .p-featured004 .p-featured004-point:not(.p-featured004-point01) {
    margin-top: 0;
  }
}

/* border-top をコンテンツ幅に制限するため擬似要素で実装 */
.p-featured004-point::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--gutter-sp) * 2);
  max-width: var(--content-max);
  height: 1px;
  background: var(--c-line);
}

@media (max-width: 767px) {
  .p-featured004-point::before {
    left: 0;
    transform: initial;
    width: 100%;
  }
  .p-featured004-point.p-featured004-point01::before{
    display: none;
  }
}

.p-featured004-point__head {
  display: grid;
  grid-template-columns: 9rem 1fr 1.5rem;
  column-gap: 1.6rem;
  align-items: center;
  width: 100%;
  max-width: calc(var(--content-max) + var(--gutter-sp) * 2);
  margin: 0 auto;
  padding: 3rem var(--gutter-sp);
  background: transparent;
  text-align: left;
  cursor: pointer;
  position: relative;
}

.p-featured004-point__icon {
  width: 9rem;
  height: 9rem;
  overflow: hidden;
  border-radius: .4rem;
}

.p-featured004-point__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.p-featured004-point__head-text {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.p-featured004-point__label {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.714;
  letter-spacing: .03em;
  color: var(--c-text);
  display:flex;
  flex-direction: column;
  gap: 1.4rem 2rem;
}
.p-featured004-point__label .p-featured004-point__label-box{
  font-size: 1.2rem;
  line-height: 1;
  color: var(--c-apibrown);
  border: 1px solid var(--c-apibrown);
  padding: .6rem .2rem .7rem .3rem;
  text-align: center;
  letter-spacing: 0;
  width: fit-content;
}
.p-featured004-point__label .p-featured004-point__label-box sup{
  font-size: 1rem;
  transform: scale(.9);
  display: inline-block;
}

/* +/- アイコン (SP用) */
.p-featured004-point__toggle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
}

.p-featured004-point__toggle::before,
.p-featured004-point__toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--c-text);
  transition: transform .3s ease;
}

.p-featured004-point__toggle::before {
  width: 1.5rem;
  height: .1rem;
  transform: translate(-50%, -50%);
}

.p-featured004-point__toggle::after {
  width: .1rem;
  height: 1.5rem;
  transform: translate(-50%, -50%);
}

.p-featured004-point[data-state-accordion="opened"] .p-featured004-point__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* アコーディオン body の表示制御 */
.p-featured004-point[data-state-accordion="closed"] .p-featured004-point__body {
  display: none;
}

.p-featured004-point[data-state-accordion="opened"] .p-featured004-point__body {
  display: block;
}

@media (max-width: 767px) {
  .p-featured004-point .p-featured004-point__body {
    /* padding-bottom: var(--accordion-contents-gutter-sp); */
    padding-bottom: 6rem;
  }
}

@media screen and (min-width: 768px) {
  /* PC タイトル: 装飾線 + 中央ラベル
   * `.p-featured004 button { border-style: none }` に勝つため class 二重指定 */
  .p-featured004 .p-featured004-point__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: var(--content-max);
    margin: 0 auto 6rem;
    padding: 3rem 0;
    cursor: default;
    pointer-events: none;
    position: relative;
    border-bottom: 1px solid var(--c-line);
  }

  .p-featured004-point__icon,
  .p-featured004-point__toggle {
    display: none;
  }

  .p-featured004-point__head-text {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    position: relative;
  }

  .p-featured004-point__label {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: 0;
    font-weight: 500;
    color: var(--c-text);
    flex-direction: row;
    align-items: center;
  }

  .p-featured004-point__label .p-featured004-point__label-box{
    padding: .4rem .4rem .55rem .6rem;
  }

  /* PC: アコーディオン body は常に展開 */
  .p-featured004-point[data-state-accordion="closed"] .p-featured004-point__body,
  .p-featured004-point[data-state-accordion="opened"] .p-featured004-point__body {
    display: block;
  }
}


/* =========================================================================
 *  Section: Point01 — 肌と自然にやさしい「すこやかクリア設計」
 * ========================================================================= */

@media (max-width: 767px) {
  .p-featured004-point01 {
    margin-top: 5rem;
  }
}

.p-featured004-point-common__diagram {
  padding: 1rem var(--gutter-sp) 0;
  /* margin-bottom: 2rem; */
  text-align: center;
}

.p-featured004-point-common__diagram-heading {
  margin-bottom: 3rem;
}

.p-featured004-point-common__diagram-img {
  width: 100%;
  margin: 0 auto 3.5rem;
}

.p-featured004-point-common__diagram-img img {
  width: 100%;
  height: auto;
  display: block;
}

.p-featured004-point-common__diagram-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
}


@media screen and (min-width: 768px) {
  .p-featured004-point-common__diagram {
    display: grid;
    grid-template-columns: 33rem 1fr;
    grid-template-rows: auto auto auto auto;
    column-gap: 4rem;
    align-items: start;
    max-width: var(--content-max);
    padding: 0;
    margin: 0 auto 5rem;
    text-align: left;
  }

  .p-featured004-point-common__diagram-img {
    grid-column: 1 / 2;
    grid-row: 1 / 5;
    width: 33rem;
    margin: 0;
    align-self: start;
  }

  .p-featured004-point-common__diagram-heading {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    margin-bottom: 3rem;
  }

  .p-featured004-point-common__diagram-text {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

}

/* =========================================================================
 *  Section: うるおいの連鎖をつなぐしくみ
 * ========================================================================= */

.p-featured004-structure {
  padding: 0 var(--gutter-sp);
  display: grid;
  gap: 6rem;
}

.p-featured004-structure-content + .p-featured004-structure-content{
  padding-top: 6rem;
  border-top: 1px solid var(--c-line);
}
.p-featured004-structure__heading{
  text-align: center;
}
.p-featured004-structure__heading sup{
  font-size: 1.4rem;
}
.p-featured004-structure__body{
  margin-top: 4rem;
  display: grid;
  gap:2.5rem 4rem;
}
[data-content="structure02"] .p-featured004-structure__body{
  margin-top: 3rem;
}

@media (max-width: 767px) {
  .p-featured004 .p-featured004-structure {
    margin-top: 0;
  }

}

.p-featured004-structure__heading {
  margin-bottom: 4rem;
}
[data-content="structure02"] .p-featured004-structure__heading{
  margin-bottom: 3rem;
}

.p-featured004-structure__lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: left;
  margin-bottom: 0;
}

.p-featured004-structure-sign__use-case{
  display: grid;
  gap: 3rem 7rem;
}
.p-featured004-structure-sign__use-case[data-use-case="hint"]{
  gap: 2rem;
}
.p-featured004-structure-sign__use-case + .p-featured004-structure-sign__use-case{
  margin-top: 3.5rem;
}
.p-featured004-structure-sign__use-list{
  display: flex;
  gap: 1rem;
  justify-content: center;
}
[data-use-case="hint"] .p-featured004-structure-sign__use-list.gap-wide{
  gap: 5.6rem;
}
.p-featured004-structure-sign__use-item{
  width: 33%;
}
.p-featured004 .p-featured004-structure-sign__caption{
  font-size: 1.4rem;
  line-height: 1;
  text-align: center;
  margin-top: 1.6rem;
}
.p-featured004 .p-featured004-structure-sign__use-description{
  background: var(--c-apibeige);
  padding: 1.4rem 2rem 1.4rem;
  border-radius: .4rem;
  font-size: 1.3rem;
  line-height: 1.7;
}
@media screen and (min-width: 768px) {
  .p-featured004-structure {
    max-width: var(--content-max);
    padding: 8rem 0 0;
    margin: 0 auto;
  }
  .p-featured004-structure__heading{
    text-align: center;
  }
  .p-featured004-structure__body{
    margin-top: 4rem;
    grid-template-columns: 33rem auto;
  }
  .p-featured004-structure__lead{
    margin-top: -.8rem;
  }
  [data-content="structure02"] .p-featured004-structure__body{
    margin-top: 5rem;
    grid-template-columns: auto;
  }
  [data-content="structure02"] .p-featured004-structure__lead{
    text-align: center;
  }

  .p-featured004-structure-sign__use-case[data-use-case="main"]{
    grid-template-columns: auto auto;
  }
  .p-featured004-structure-sign__use-case[data-use-case="hint"] {
    gap: 2.5rem;
  }
  .p-featured004-structure-sign__use-case + .p-featured004-structure-sign__use-case{
    margin-top: 5.2rem;
  }
  .p-featured004-structure-sign__use-list{
    gap: 5.6rem;
  }
  .p-featured004-structure-sign__use-item{
    width: 11rem;
  }
  .p-featured004 .p-featured004-structure-sign__caption{
    font-size: 1.4rem;
    margin-top: 1.5rem;
  }
  .p-featured004 .p-featured004-structure-sign__use-description{
    display: grid;
    place-content: center;
    font-size: 1.4rem;
  }

}

/* =========================================================================
 *  Section: 70年以上の研究に裏付けられたローヤルゼリーの知見
 * ========================================================================= */
  .p-featured004-knowledge{
    background: var(--c-bg-gray);
  }
  .p-featured004-knowledge__inner {
    padding-block: 6rem;
    padding-inline: var(--gutter-sp);
  }
  .p-featured004-knowledge__content{
    display: grid;
  }
  .p-featured004-knowledge__figure{
    border-radius: .4rem;
    overflow: hidden;
  }
  .p-featured004-knowledge__heading{
    margin-top: 3.5rem;
  }
  .p-featured004-knowledge__lead{
    margin-top: 3rem;
  }


  @media screen and (min-width: 768px) {
    .p-featured004-knowledge__inner{
      width: var(--content-max);
      margin: 0 auto;
      padding-block: 8rem 9rem;
      padding-inline: 0;
    }
    .p-featured004-knowledge__content {
      grid-template-columns: 33rem auto;
      grid-template-rows: auto auto;
      row-gap: 5rem;
      column-gap: 4.5rem;
    }
    .p-featured004-knowledge__heading {
      grid-area: 1 / 1 / 2 / 3;
      margin-top: 0;
    }
    .p-featured004-knowledge__figure {
      grid-area: 2 / 1 / 4 / 2;
    }
    .p-featured004-knowledge__lead {
      grid-area: 2 / 2 / 4 / 3;
      margin-top: 0;
    }
  }
/* =========================================================================
 *  Section: CTA — 商品訴求
 * ========================================================================= */

.p-featured004-cta {
  text-align: center;
}
.p-featured004-cta__main{
  display: flex;
  flex-direction: column;
}
.p-featured004-cta__copy { order: 1; }
.p-featured004-cta__image { order: 2; }
.p-featured004-cta__product { order: 3; }
.p-featured004-cta__price { order: 4; }
.p-featured004-cta .c-btn { order: 5; }

.p-featured004-cta__image {
  width: 28rem;
  margin: 0 auto 3rem;
}

.p-featured004-cta__image img {
  width: 100%;
  height: auto;
  display: block;
}

.p-featured004-cta__copy {
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.625;
  color: var(--c-text);
  text-align: center;
  font-family: var(--font-mixed);
  margin-bottom: 3rem;
}


.p-featured004-cta__product {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  text-align: center;
  margin: 0 0 .4rem;
  padding-inline: var(--gutter-sp);
}

.p-featured004-cta__price {
  font-size: 1.2rem;
  color: var(--c-text-sub);
  text-align: center;
  margin: 0 0 2.4rem;
  padding-inline: var(--gutter-sp);
}

.p-featured004-cta__price-num {
  /* font-family: 'Inter', sans-serif; */
  font-family: var(--font-mixed);
  font-size: 1.2rem;
  color: var(--c-text-sub);
  margin-right: .2em;
}
.p-featured004 .p-featured004-cta__notice{
  margin-top: 5.5rem;
  font-size: 1rem;
  line-height: 1.8;
  text-align: left;
  padding-inline: var(--gutter-sp);
}
.p-featured004-cta .p-featured004-cta__copy sup{
  font-size: 1.4rem;
}
.p-featured004-cta__price.p-featured004-cta__price{
  font-size: 1.2rem;
}

@media screen and (min-width: 768px) {
  .p-featured004-cta {
    padding-inline: 12rem;
    max-width: var(--container-max);
    margin: 0 auto;
    text-align: center;
  }
  .p-featured004-cta__main{
    display: grid;
    grid-template-columns: 42rem 1fr 42rem;
    grid-template-rows: auto auto auto auto 1fr;
  }

  .p-featured004-cta__image {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 100%;
    margin: 0;
    align-self: start;
  }
  .p-featured004-cta__image img {
    width: 100%;
    height: auto;
  }

  .p-featured004-cta__copy { grid-column: 3; grid-row: 1; order: 0; }
  .p-featured004-cta__product { grid-column: 3; grid-row: 2; order: 0; }
  .p-featured004-cta__price { grid-column: 3; grid-row: 3; order: 0; }
  .p-featured004-cta .c-btn { grid-column: 3; grid-row: 4; order: 0; }

  .p-featured004-cta__copy {
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.666;
    letter-spacing: .03em;
    margin: 5.8rem 0 2.8rem;
    text-align: center;
  }

  .p-featured004-cta__product.p-featured004-cta__product {
    font-size: var(--fs-body);
    line-height: 2;
    text-align: center;
    margin: 0 0 .2rem;
  }

  .p-featured004-cta__price.p-featured004-cta__price {
    text-align: center;
    line-height: 1.833;
    margin: 0 0 1.7rem;
    font-size: 1.2rem;
  }
  .p-featured004 .p-featured004-cta__notice{
    margin-top: 8rem;
    font-size: 1.2rem;
    padding: 0;
  }

}


/* =========================================================================
 *  Section: FAQ
 * ========================================================================= */

.p-featured004-faq {
  padding-inline: var(--gutter-sp);
}

.p-featured004-faq__heading {
  font-size: 2rem;
  line-height: 1;
  letter-spacing: .1em;
  font-weight: 400;
  text-align: center;
  margin-bottom: 4rem;
  color: var(--c-text);
}

.p-featured004-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-featured004-faq__item {
  background: var(--c-bg-gray);
  border-radius: .4rem;
  overflow: hidden;
}

.p-featured004-faq__head {
  display: grid;
  grid-template-columns: auto 1fr 1.3rem;
  column-gap: 1.2rem;
  align-items: center;
  width: 100%;
  padding: 1.8rem 2rem;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.p-featured004-faq__q {
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1;
}

.p-featured004-faq__text {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.571;
  color: var(--c-text);
}

.p-featured004-faq__toggle {
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  flex-shrink: 0;
}

.p-featured004-faq__toggle::before,
.p-featured004-faq__toggle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--c-text);
}

.p-featured004-faq__toggle::before {
  width: 1.3rem;
  height: .1rem;
  transform: translate(-50%, -50%);
}

.p-featured004-faq__toggle::after {
  width: .1rem;
  height: 1.3rem;
  transform: translate(-50%, -50%);
  transition: transform .3s ease;
}

.p-featured004-faq__item[data-state-accordion="opened"] .p-featured004-faq__toggle::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.p-featured004-faq__body {
  padding: 0 2rem 2rem;
}

.p-featured004-faq__body p {
  font-size: var(--fs-text-small);
  line-height: var(--lh-text-small);
  color: var(--c-text);
}

.p-featured004-faq__item[data-state-accordion="closed"] .p-featured004-faq__body {
  display: none;
}

.p-featured004 > section + section.p-featured004-faq{
  margin-top: 3rem;
}

@media screen and (min-width: 768px) {
  .p-featured004-faq {
    padding-inline: 0;
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .p-featured004-faq__heading {
    font-size: 2.4rem;
    margin-bottom: 5rem;
  }

  .p-featured004-faq__list {
    max-width: var(--content-max);
    margin: 0 auto;
    gap: 2rem;
  }

  .p-featured004-faq__item {
    background: var(--c-bg-gray-2);
    min-height: 6rem;
  }

  .p-featured004-faq__head {
    column-gap: 1.7rem;
    padding: 2rem 3rem;
    grid-template-columns: auto 1fr 1.5rem;
  }

  .p-featured004-faq__q {
    font-size: 1.7rem;
    line-height: 1;
  }

  .p-featured004-faq__text {
    font-size: 1.5rem;
    line-height: 1.466;
  }

  .p-featured004-faq__toggle {
    width: 1.5rem;
    height: 1.5rem;
  }

  .p-featured004-faq__toggle::before {
    width: 1.5rem;
  }

  .p-featured004-faq__toggle::after {
    height: 1.5rem;
  }

  .p-featured004-faq__body {
    padding: 0 3rem 2.4rem;
  }
  .p-featured004 section + section.p-featured004-faq{
    margin-top: 2rem;
  }
}


/* =========================================================================
 *  Section: JOURNAL
 *  BodyFeaturePageList.ascx が出力する .feature-page__* マークアップを
 *  既存 journal デザインに合わせて上書きする。
 * ========================================================================= */
.p-featured004-journal {
  padding-inline: var(--gutter-sp);
  text-align: center;
}

.p-featured004-journal .feature-page__list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 4rem;
  text-align: left;
}

.p-featured004-journal .feature-page__item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  column-gap: 1rem;
  align-items: center;
}

.p-featured004-journal .feature-page__item--thumbnail {
  margin: 0;
  overflow: hidden;
  border-radius: .4rem;
  position: relative;
}

.p-featured004-journal .feature-page__item--thumbnail a {
  display: block;
}

.p-featured004-journal .product__item--new-icon {
  display: none;
}

.p-featured004-journal .feature-page__item--thumbnail img {
  width: 9rem;
  height: 9rem;
  object-fit: cover;
  display: block;
}

.p-featured004-journal .feature-page__item--details {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.p-featured004-journal .feature-page__item--title {
  font-size: 1.4rem;
  line-height: 1.571;
  font-weight: 400;
  color: var(--c-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
          line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  word-break: break-all;
}

.p-featured004-journal .feature-page__item--category {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.p-featured004-journal .feature-page__item--category-name {
  align-self: flex-start;
  font-size: 1.2rem;
  line-height: 1.666;
  color: var(--c-text);
  border-bottom: 1px solid #DDDDDD;
  padding-bottom: 2px;
  margin: 0;
}

.p-featured004-journal .feature-page__item--date {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1.833;
  letter-spacing: .05em;
  color: var(--c-text-sub);
}

/* View All ボタン (.feature-page__actions) を c-btn--outline c-btn--small 相当に整形 */
.p-featured004-journal .feature-page__actions {
  text-align: center;
}

.p-featured004-journal .feature-page__actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 23rem;
  min-width: 0;
  height: 4.6rem;
  margin: 0 auto;
  border: 1px solid var(--c-text);
  border-radius: .4rem;
  background: var(--c-white);
  color: var(--c-text);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity .3s ease;
  padding-inline: 1rem;
}

.p-featured004-journal .feature-page__actions a:hover {
  opacity: .7;
}


@media screen and (min-width: 768px) {
  .p-featured004-journal {
    padding-inline: 0;
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .p-featured004-journal .feature-page__list {
    max-width: var(--content-max);
    margin: 0 auto 5rem;
    gap: 2.7rem;
  }

  .p-featured004-journal .feature-page__item {
    grid-template-columns: 12rem 1fr;
    column-gap: 2rem;
  }

  .p-featured004-journal .feature-page__item--thumbnail img {
    width: 12rem;
    height: 12rem;
  }

  .p-featured004-journal .feature-page__item--title {
    font-size: 1.8rem;
    line-height: 1.444;
    letter-spacing: .05em;
    -webkit-line-clamp: 2;
            line-clamp: 2;
  }

  .p-featured004-journal .feature-page__item--category {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }

  .p-featured004-journal .feature-page__actions a {
    font-size: 1.5rem;
  }
}


/* =========================================================================
 *  Section: REVIEW
 * ========================================================================= */
.p-featured004-review {
  padding-inline: var(--gutter-sp);
}
.p-featured004 .p-featured004-review img{
  max-width: unset;
}

@media screen and (min-width: 768px) {
  .p-featured004-review {
    padding-inline: 0;
    max-width: var(--container-max);
    margin: 0 auto;
  }

  .p-featured004 .p-featured004-review__inner {
    width: 86rem;
    margin-inline: auto;
  }

  /* REVIEW のみ c-title-section--en PC の margin-bottom 5rem を 4rem に上書き */
  .p-featured004-review__heading {
    margin-bottom: 4rem;
  }
}