/* ===============================
   HERO = 全画面・1枚・sticky（レイアウトに影響させない）
   2カラムはページ上から150pxで見える／右だけ背景
   ※ .product-hero / .sticky-visual / .intro-wrap のHTMLは現状のまま
=============================== */
/* 競合排除（旧 before/after・mask 等） */
.product-hero::before, .product-hero::after {
  content: none !important;
}
.sticky-visual {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
/* セクション骨格（2カラム） */
.product-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(480px, 700px);
  background: var(--p-bg);
  overflow: visible;
  margin: 0;
  padding: 0;
}
/* ★ ヒーロー背景レイヤー */
.product-hero > .sticky-visual {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  margin-top: -100vh; /* ← これが肝。レイアウトへの高さ寄与を相殺 */
  background-image: var(--hero) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: clamp(30%, 50vw, 70%) top !important;
  z-index: 0;
  pointer-events: none;
  background-attachment: initial;
}
/* 本文（右カラム）はページ上から150pxで見える */
.product-hero > .intro-wrap {
  grid-column: 2;
  position: relative;
  z-index: 1;
  margin-top: 150px;
  padding: 0 0;
  display: grid;
  gap: 0;
  background: var(--p-bg);
}
/* 右カラムのカード */
.product-hero .btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-hero .btn-row .btn {
  font-size: var(--fs15);
  background: #fff;
  color: var(--ink);
}
/* レスポンシブ（任意） */
/* ===== SPで重なりを解消（画像→テキストの順で自然に表示） ===== */
@media (max-width: 767px) {
  .product-hero {
    display: block; /* グリッドをやめて通常フローに */
  }
  .product-hero > .sticky-visual {
    position: relative; /* stickyを無効化 */
    top: auto;
    height: 60vh; /* 画面いっぱい見せるなら */
    margin-top: 0; /* 負の相殺も不要 */
    /* 必要なら位置微調整 */
    background-position: 0% top !important; /* 上寄せ */
  }
  .product-hero > .intro-wrap {
    margin-top: 0; /* ← これが今回の主因。0に */
    grid-column: auto; /* 念のための保険 */
  }
}
/* ---------------------------------------------
    intro
--------------------------------------------- */
.product-hero .intro {
  background: #451D12;
  color: var(--white);
  padding: 70px 80px 140px 130px;
}
@media (max-width: 767px) {
  .product-hero .intro {
    padding: 50px 20px;
  }
}
.product-hero .intro h1 {
  font-family: var(--fn-out);
  font-size: var(--fs26);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .15em;
  color: var(--White);
  margin: 0 0 15px;
}
/* intro 内の和名・キャッチコピー */
.product-hero .intro .jp-name {
  font-family: var(--fn-yu);
  font-size: var(--fs15);  font-weight: 400;
  color: var(--White);
  letter-spacing: .1em;
  margin: 0 0 50px;
}
.product-hero .intro .catch {
  font-family: var(--fn-jp);
  font-size: var(--fs18);
  font-weight: 400;
  letter-spacing: .22em;
	line-height: 2.3;
  margin: 0 0 20px;
}
.product-hero .intro p {
  font-family: var(--fn-jp);
  font-size: var(--fs13);
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: .15em;
  margin: 0 0 40px;
}
.product-hero .intro .kind {
  font-family: var(--fn-jp);
  font-size: var(--fs12);
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: .2em;
  margin: 0 0 20px;
}
.product-hero .intro .price {
  font-family: var(--fn-jp);
  font-weight: 400;
  margin: 0 0 50px;
}
.product-hero .intro .price .volume {
  font-size: var(--fs11); /* 小さめ */
}
.product-hero .intro .price .amount {
  font-size: var(--fs16); /* 強調 */
}
.product-hero .intro .price .tax {
  font-size: var(--fs10); /* さらに小さめ */
}
/* ボタンは products 一覧と統一 */
.product-hero .intro .view-link {
  color: var(--white);
  border-bottom: 1px solid var(--white);
}
/* ---------------------------------------------
    FEATURES
--------------------------------------------- */
/* ===== FEATURES: 画像に合わせた縦積み・左寄せ・Noto Sans ===== */
.features {
  margin: 50px 0;
  padding: 0 50px 0 130px;
} /* セクション内の左右余白（現状に準拠） */
@media (max-width: 767px) {
  .features {
    margin: 30px 0;
    padding: 0 20px;
  }
}
.features .f-block {
  margin: 28px 0 64px;
}
.features h2 {
  border-top: 1px solid var(--p-border);
}
.features h2 .en {
  display: block;
  font-family: var(--fn-out);
  font-size: var(--fs15);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ink);
  padding: 20px 0 0;
}
.features h2 .jp {
  display: block;
  margin-top: 6px;
  font-size: var(--fs11);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .15em;
}
.features .f-lead {
  /* 見出し：スクショ準拠でゴシック&やや広めの字間 */
  font-family: var(--fn-jp);
  font-size: var(--fs16);
  font-weight: 400;
  letter-spacing: .20em;
  line-height: 1.9;
  color: var(--ink);
  margin: 18px 0 10px; /* 見出し→画像の間隔 */
  text-align: left;
}
.features .f-media {
  margin: 0;
  background: transparent;
}
.features .f-media img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.features .f-text {
  font-family: var(--fn-jp);
  font-size: var(--fs11);  font-weight: 400;
  letter-spacing: .15em;
  line-height: 2.4; /* 行間ゆったり */
  color: var(--ink);
  margin: 16px 0 8px; /* 画像→本文の間隔 */
  text-align: left;
}
.features .f-note {
  font-family: var(--fn-jp);
  font-size: var(--fs10);
  letter-spacing: .1em;
  line-height: 2.4; /* 行間ゆったり */
  color: var(--ink);
  margin: 6px 0 0;
  text-align: left;
}
/* 旧レイアウトの影響を消す（このページだけでOK） */
.features .grid, .features .media, .features .point {
  all: unset;
} /* 旧クラスの体裁をリセット */
/* ---------------------------------------------
    Accordion（上ボーダー／＋→×／英日2段
--------------------------------------------- */
.accordion {
  display: grid;
  gap: 3px;
  padding: 0 80px 0 130px;
  margin: 0 0 30px;
}
@media (max-width: 767px) {
  .accordion {
    padding: 0 20px;
  }
}
details.acd {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
details.acd > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 0;
  position: relative;
  border-bottom: none;
  border-top: 1px solid var(--p-border);
}
details.acd:not(:first-of-type) > summary {
  border-top: 1px solid var(--p-border);
}
details.acd > summary .en {
  display: block;
  font-family: var(--fn-out);
  font-size: var(--fs15);
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--ink);
}
details.acd > summary .jp {
  display: block;
  margin-top: 1px;
  font-size: var(--fs11);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .1em;
}
/* + / × */
details.acd > summary::before, details.acd > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--ink);
  transform-origin: 50% 50%;
  transition: transform .25s ease, opacity .25s ease;
}
details.acd > summary::before {
  transform: translateY(-50%) rotate(0deg);
}
details.acd > summary::after {
  transform: translateY(-50%) rotate(90deg);
}
details.acd[open] > summary::before {
  transform: translateY(-50%) rotate(45deg);
}
details.acd[open] > summary::after {
  transform: translateY(-50%) rotate(-45deg);
}
.acd-body {
  padding: 16px 0;
  display: grid;
  gap: 12px;
}
.acd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.acd-grid .media {
  background: #f7f4f0;
  min-height: 160px;
  display: grid;
  place-items: center;
}
.acd-grid .media img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ===== Accordion: 文字切れゼロのCSSアニメ（0fr→1fr） ===== */
/* 閉時：中身の行高を 0fr にして見えない状態に（高さ0だが中身は実寸で保たれる） */
details.acd .acd-body {
  display: grid; /* ★ここがポイント */
  grid-template-rows: 0fr; /* 閉：0fr（=高さ0） */
  transition: grid-template-rows .36s cubic-bezier(.22, .61, .36, 1), padding .36s ease;
  padding: 0; /* 閉時は余白ゼロ */
}
/* 中身を“隠す役”のラッパー。これがオーバーフローを受け止める */
details.acd .acd-inner {
  overflow: hidden; /* ★はみ出しを隠す（文字切れ防止の要） */
  display: grid; /* 既存の .acd-body のグリッド/ギャップ指定があるならこちらに移してOK */
  gap: 12px;
}
/* 開時：1fr で実高さにフィット。余白復活 */
details.acd[open] .acd-body {
  grid-template-rows: 1fr; /* 開：1fr（=中身の高さに追従） */
  padding: 16px 0;
}
/* 既存で .acd-body に height/max-height/overflow などがあれば削除 or 上記で上書き */
/* ---------------------------------------------
   COMMON INGREDIENTS:
--------------------------------------------- */
.acd-grid.is-stack {
  display: block; /* 2カラムを無効化 */
  margin: 0 0 50px;
}
.acd-grid.is-stack .media {
  background: transparent; /* 背景ボックスを消す */
  min-height: 0;
  padding: 0;
}
.acd-grid.is-stack .media img {
  width: 100%;
  height: auto;
  display: block;
}
.acd-grid.is-stack .text h4 {
  font-family: var(--fn-jp);
  font-size: var(--fs14);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 20px;
}
.acd-grid.is-stack .text h4 .small-note {
  font-size: var(--fs10); /* ［◯◯成分］を小さく */
  color: var(--ink);
}
.acd-grid.is-stack .desc.lead {
  font-family: var(--fn-jp);
  font-size: var(--fs14);
  font-weight: 400; /* 1行目を少しだけ強め */
  color: var(--ink);
  margin-top: 15px;
}
.acd-grid.is-stack .desc {
  font-family: var(--fn-jp);
  font-size: var(--fs10);  font-weight: 400;
  letter-spacing: .12em;
  line-height: 2.2;
  color: var(--ink);
  margin: 10px 0 0;
}
/* SP余白（任意） */
@media (max-width: 767px) {
  .acd-grid.is-stack {
    margin: 28px 0 44px;
  }
}
/* ---------------------------------------------
   KEY INGREDIENTS
--------------------------------------------- */
/* 2カラム */
.keying-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 0 0 30px;
}
/* SP時は縦積み */
@media (max-width: 768px) {
  .keying-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.keying-sub {
  min-height: 1.6em; /* 空でも高さを確保して左右を揃える */
}
/* 下段：1カラム＋画像のみ2カラム（ギャップなし） */
.keying-wide {
  margin: 0 0 30px;
}
.keying-wide .keying-figgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
/* SP時は縦積み */
@media (max-width: 768px) {
  .keying-wide .keying-figgrid {
    grid-template-columns: 1fr;
  }
  .keying-wide .keying-figgrid img:first-child {
    margin: 0 0 15px;
  }
}
.keying-grid img {
  width: 100%;
  height: auto;
}
.keying-wide .keying-figgrid img {
  width: 100%;
  height: auto;
}
.keying-tag {
  font-family: var(--fn-jp);
  font-size: var(--fs11);  font-weight: 400;
  letter-spacing: .12em;
  line-height: 2.2;
  color: var(--ink);
  margin: 0 0;
}
.keying-ttl {
  font-family: var(--fn-jp);
  font-size: var(--fs13);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 5px;
}
.keying-sub {
  font-family: var(--fn-jp);
  font-size: var(--fs09);  font-weight: 400;
  letter-spacing: .075em;
  line-height: 1.0;
  color: var(--ink);
  margin: 0 0 10px;
}
.keying-desc {
  font-family: var(--fn-jp);
  font-size: var(--fs11);  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.8;
  color: var(--ink);
  margin: 10px 0 0;
}
/* SP時は縦積み */
@media (max-width: 768px) {
  .keying-grid {
    grid-template-columns: 1fr;
  }
  .keying-wide .keying-figgrid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* ---------------------------------------------
   STORY
--------------------------------------------- */
.story-item {
  margin-bottom: 20px;
}
.story-ttl {
  font-family: var(--fn-jp);
  font-size: var(--fs14);
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.75;
  color: var(--ink);
  margin: 0 0 10px;
}
.story-desc {
  font-family: var(--fn-jp);
  font-size: var(--fs11);  font-weight: 400;
  letter-spacing: .12em;
  line-height: 2.5;
  color: var(--ink);
  margin: 15px 0 0;
}
/* ---------------------------------------------
   HOW TO / INGREDIENTS
--------------------------------------------- */
.acd-text {
  font-family: var(--fn-jp);
  font-size: var(--fs11);  font-weight: 400;
  letter-spacing: .12em;
  line-height: 2.5;
  color: var(--ink);
  margin: 15px 0 0;
}
/* ---------------------------------------------
   phiten-beauty ボタン（上下揺れ防止）
--------------------------------------------- */
.product-hero .pb-btn {
  display: inline-flex; /* ← flexで高さを固定 */
  align-items: center; /* ← 中央揃え */
  justify-content: center;
  gap: 20px;
  background: var(--p-bg);
  color: #451D12;
  text-decoration: none;
  border-radius: 0;
  padding: 15px 24px;
  font-family: var(--fn-out);
  font-size: var(--fs13);  font-weight: 400;
  letter-spacing: .05em;
  line-height: 1; /* ← 行の高さを固定 */
  vertical-align: middle; /* ← baseline依存を切る */
  transition: transform .3s ease, opacity .25s ease;
  will-change: transform; /* ← ブレを防ぐため描画最適化 */
}
.product-hero .pb-btn:hover {
  opacity: .9;
  transform: translateX(3px); /* ← ボタン全体を右へ */
}
.product-hero .pb-btn .pb-arrow {
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs11);
  line-height: 1;
  vertical-align: middle; /* ← 矢印も中央基準に固定 */
  margin-left: 4px;
  transition: transform .3s ease;
  will-change: transform;
}
.product-hero .pb-btn .pb-arrow::after {
  content: "→";
  display: block; /* ← インライン基準を無効化 */
}
.product-hero .pb-btn:hover .pb-arrow {
  transform: translateX(5px); /* ← 矢印だけさらに右へ */
}
/* ---------------------------------------------
   Texture Visual (routine 上)
--------------------------------------------- */
.parallax-section {
  position: relative;
  height: 450px; /* routine用なので450pxに変更 */
  overflow: hidden;
}
.parallax-section .parallax-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/product/lotion/texture-main.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0) scale(1.08);
  will-change: transform;
}
.parallax-section .parallax-bg.cleansing-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/product/cleansing/texture-main.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0) scale(1.08);
  will-change: transform;
}
.parallax-section .parallax-bg.facewash-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/product/facewash/texture-main.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0) scale(1.08);
  will-change: transform;
}
.parallax-section .parallax-bg.emulsion-bg {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/img/product/emulsion/texture-main.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateY(0) scale(1.08);
  will-change: transform;
}
/* ---------------------------------------------
   Routine
--------------------------------------------- */
.routine {
  background: var(--p-bg);
  padding-block: clamp(24px, 5vw, 60px);
}
/* ROUTINE */
.routine-title {
  text-align: center;
  letter-spacing: .1em;
  font-family: var(--fn-en);
  font-size: var(--fs26);  font-weight: 400;
  line-height: 1.4;
}
.routine-title .jp {
  display: block;
  font-size: var(--fs12);
  font-family: var(--fn-jp);
  font-weight: 400;
  letter-spacing: .1em;
  margin: 0 0 40px;
}
.routine .steps {
  --gap: clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr)); /* PC: 4列 */
  column-gap: var(--gap);
  row-gap: 40px;
}
@media (max-width: 767px) {
  .routine .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* SP: 2列 */
    row-gap: 40px;
  }
}
.routine .step {
  position: relative;
  text-align: left;
  width: 100%;
  max-width: 250px;
  aspect-ratio: 2.5 / 4.1;
}
/* 矢印（右方向のみ） */
.routine .step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--gap) / 2 - 18px); /* 矢印を列間中央に配置 */
  transform: translateY(-50%);
  width: 36px;
  height: 10px;
  background: url("../../assets/img/product/common/routine-arrow.svg") center/contain no-repeat;
  opacity: 0.65;
}
/* PC: 4列目は矢印なし */
@media (min-width: 768px) {
  .routine .step:nth-child(4)::after {
    content: none;
  }
}
/* SP: 各行の2列目は矢印なし */
@media (max-width: 767px) {
  .routine .step:nth-child(2n)::after {
    content: none;
  }
}
.step .text {
  position: absolute;
  bottom: 0; /* 下に揃える */
  left: 0; /* 左に揃える */
  text-align: left;
}
/* 背景色付きのボックス */
.step .phbox {
  position: absolute;
  top: 30px;
  right: 0;
  width: 77%;
  aspect-ratio: 2 / 3.2;
  background: #F3EEE6;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease; /* ← イーズでなめらかに */
}
.routine .step .kind {
  text-align: right;
  font-size: var(--fs11);
  font-family: var(--fn-jp);
  margin: 0;
  letter-spacing: .15em;
  color: var(--ink);
}
.routine .step h3 {
  font-family: var(--fn-out);
  font-size: var(--fs16);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
  margin: 0 0 8px;
}
.routine .step .jp {
  font-family: var(--fn-jp);
  font-size: var(--fs11);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .1em;
  margin: 0;
  color: var(--ink);
}
/* リンク・ホバアクション */
.steps .step {
  text-decoration: none;
  color: inherit; 
}
.steps .step .phbox img {
  transition: transform 0.3s ease;
}
.steps .step:hover .phbox img {
  transform: scale(1.03);
}
/* ホバー時の背景色 */
.step:hover .phbox {
  background-color: #E7DFD4; /* ← 変化後の色 */
}