/* ---------------------------------------------
    PRODUCTS: Hero
--------------------------------------------- */
.products-hero {
  position: relative;
  background: var(--paper);
  min-height: clamp(420px, 80vh, 820px); /* 画面比に追従しつつPCでしっかり高さ確保 */
  overflow: clip;
}
.products-hero__bg {
  position: absolute;
  inset: 0;
  background: url('../img/product/top/hero-main.jpg') center/cover no-repeat;
  transform: scale(1.01);
}
@media (max-width: 767px) {
  .products-hero {
    min-height: 70vh;
  }
  .products-hero__bg {
    background-position: 47% bottom;
  }
}
/* ---------------------------------------------
   PRODUCTS: 2col grid + Card typography
--------------------------------------------- */
.section-title {
  font-family: var(--fn-en);
  font-size: var(--fs39);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: .05em;
  margin: 15px 0 0;
}
.subtitle {
  font-family: var(--fn-jp);
  font-size: var(--fs13);
  letter-spacing: .1em;
  color: var(--ink);
  margin: 0 0 25px
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: clamp(0px, 7vw, 70px);
  column-gap: 70px;
  margin: 45px 0 55px;
}
@media (max-width: 767px) {
  .section-title {
    font-size: var(--fs30);
    margin: 15px 0 0;
  }
  .subtitle {
    font-size: var(--fs12);
    margin: 0 0 25px
  }
  .products-grid {
    grid-template-columns: 1fr;
    row-gap: 60px;
    column-gap: 0;
    margin: 25px 0 40px;
  }
}
.product-card-list {
  display: grid;
  grid-template-rows: auto auto; /* 画像→本文 */
}
.product-card-list .media {
  overflow: hidden;
}
.product-card-list .media .ph {
  /* 画像の比率を揃えて見栄えを安定 */
  aspect-ratio: 4/3;
}
.product-card-list .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.product-card-list:hover .media img {
  transform: scale(1.02);
}
.product-card-list .body {
  padding: 35px 0 0;
}
.product-card-list .kind {
  font-size: var(--fs11);
  letter-spacing: .2em;
  color: var(--ink);
  margin: 0 0 8px;
}
.product-card-list .name {
  font-family: var(--fn-out);
  font-size: var(--fs20);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .13em;
  margin: 0 0 10px;
}
.product-card-list .jp {
  font-size: var(--fs12);
  letter-spacing: .2em;
  color: var(--ink);
  margin: 0 0 20px;
}
.product-card-list .tax {
  font-family: var(--fn-jp);
  font-size: var(--fs10);
  letter-spacing: .06em;
  color: var(--ink);
  margin: 0 0 25px
}
.product-card-list .price {
  font-family: var(--fn-jp);
  font-size: var(--fs13);
  letter-spacing: .06em;
  color: var(--ink);
}
/* ---------------------------------------------
   phiten-beauty ボタン（上下揺れ防止）
--------------------------------------------- */
.pb-btn {
  display: inline-flex; /* ← flexで高さを固定 */
  align-items: center; /* ← 中央揃え */
  justify-content:space-between;
  gap: 12px;
  width: 200px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  border-radius: 0;
  padding: 18px 20px;
  font-family: var(--fn-out);
  font-size: var(--fs13);
  font-weight: 300;
  letter-spacing: .085em;
  line-height: 1; /* ← 行の高さを固定 */
  vertical-align: middle; /* ← baseline依存を切る */
  transition: transform .3s ease, opacity .25s ease;
  will-change: transform; /* ← ブレを防ぐため描画最適化 */
}
.pb-btn:hover {
  opacity: .9;
  transform: translateX(3px); /* ← ボタン全体を右へ */
}
.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: 50px;
  transition: transform .3s ease;
  will-change: transform;
}
.pb-btn .pb-arrow::after {
  content: "→";
  display: block; /* ← インライン基準を無効化 */
}
.pb-btn:hover .pb-arrow {
  transform: translateX(5px); /* ← 矢印だけさらに右へ */
}
/* ---------------------------------------------
   ABOUT section (PRODUCTS page)
--------------------------------------------- */
/* ===== ABOUT + FEATURE RAIL (PRODUCTS) ===== */
.about-visual {
  position: relative;
  margin: 0;
  padding: 0;
}
.about-visual .about-bg {
  position: relative;
  height: 320px; /* 高さ固定 */
  background: url('../img/product/top/about-visual.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.about-visual .about-title {
  font-family: var(--fn-en);
  font-size: var(--fs40);
  font-weight: 400;
  color: var(--white);
  letter-spacing: .05em;
  text-align: center;
  z-index: 2;
}
/* FEATURE RAIL 上書き */
.feature-rail {
  transform: translateY(-60px); /* 画像を持ち上げて重ねる */
}
.feature-rail .rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  border: none !important; /* 上下ボーダー削除 */
  padding: 0;
  position: relative;
  z-index: 3;
}
.feature-rail .rail-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  color: inherit;
  border: none !important; /* 縦ボーダー削除 */
  background: transparent; /* 背景も不要 */
}
.feature-rail .rail-thumb img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.feature-rail .rail-body {
  display: grid;
  align-content: start;
  gap: 10px;
}
/* SP対応 */
@media (max-width: 1024px) {
  .about-visual .about-bg {
    height: 200px;
  }
  .about-visual .about-title {
    font-size: var(--fs35);
  }
  .feature-rail .rail {
    grid-template-columns: 1fr;
    margin-top: -20px;
    padding: 0 20px;
  }
  .feature-rail {
    transform: translateY(0px); /* 画像を持ち上げて重ねる */
  }
  .feature-rail .rail-item {
    grid-template-columns: 1fr 1.2fr;
    gap: 20px;
    padding: 0 0 !important;
  }
  .feature-rail .rail-eyebrow {
    font-size: var(--fs20);
  }
  .feature-rail .rail-title {
    font-size: var(--fs13);
  }
  .feature-rail .view-link {
    margin-top: 10px;
    padding: 8px 0;
    letter-spacing: .1rem;
  }
  .feature-rail .rail-body {
    gap: 2px;
  }
}