@charset "UTF-8";
/*
 * esience-2026 / single-shohin styles
 * Figma: 7451:7033 (ns_page)
 */

.single-shohin {
  width: 100%;
  background: var(--color-white);
}

/* セクションタイトル共通: HOW TO USE / REVIEW / STEP / DETAIL の4見出しが
   .section-eyebrow .section-eyebrow--left を付けているが、当該クラスは
   front-page.css 専属で shohin ページでは未ロード → ブラウザ既定 h2 に落ちて
   「色・フォントがバラバラ」になっていた（ユーザー指摘 2026-05-23）。
   ※ DUPLICATED FROM front-page.css の .section-eyebrow（typography のみ移植・
     margin/width/align-self は各 __heading が個別設定するためここでは省略）。
   .site-main 付きで specificity を上げ、_base.css の h2 既定に確実に勝つ。 */
.site-main .section-eyebrow {
  font-family: var(--font-en-heading);
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 5.12px;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: left;
}

/* 旧 esience の style.css が ul/li に当てる規則を打ち消す（specificity 強化） */
.single-shohin ul.container-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
}

.single-shohin ul.container-list > li.container {
  display: inline-flex;
  width: auto;
  flex: 0 0 auto;
  margin: 0;
  font-size: 11px;
  padding: 1px 10px;
}

/* shohin の container-list バッジ色：ユーザー指示 2026-05-24
   - white スタイル: グレー背景 + 黒文字（front-page.css の薄グレー文字を上書き）
   - red スタイル: 赤線枠 + 赤文字（front-page.css のまま継承）
   PC/SP 共通で適用（PC tab__head と SP summary の両方をカバー） */
.is-shohin-2026 .container--white {
  background: var(--color-gray-base);
  color: var(--color-text);
}
.is-shohin-2026 .container--red {
  background: transparent;
  color: var(--color-accent);
  border: 0.5px solid var(--color-accent);
}

/* =========================================================
   パンくず
   ========================================================= */
.shohin-breadcrumb {
  width: 100%;
  padding: 16px 80px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-line);
}

.shohin-breadcrumb__list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-jp-base);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.shohin-breadcrumb__list a {
  color: var(--color-text);
  text-decoration: none;
}

.shohin-breadcrumb__list a:hover {
  text-decoration: underline;
}

.shohin-breadcrumb__sep {
  color: var(--color-text-sub);
}

.shohin-breadcrumb__current {
  color: var(--color-text-sub);
}

/* =========================================================
   1. FV
   ========================================================= */
.shohin-fv {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 80px 80px 80px;
  background: var(--color-white);
}

.shohin-fv__eyebrow {
  text-align: left;
  align-self: flex-start;
  margin: 0;
}

.shohin-fv__body {
  /* Figma 7245:3224 の 630+670+40=1340 を共通 --content-max(1260) 枠に比例縮小
     （630fr:670fr=画像47%:タブ50%）。全ページ共通トークンに揃えた。 */
  display: grid;
  grid-template-columns: minmax(0, 630fr) minmax(0, 670fr);
  gap: 40px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* HOW TO USE 動画セクションは fv.php 内に統合（ユーザー指示 2026-05-24）。
   PC では FV grid 2列の下にフル幅で表示するため、明示的に位置を指定。
   - visual: row 1 col 1（auto）
   - product-tab: row 1 col 2（明示）
   - how-mv: row 2 col 1/-1（明示・2列ぶち抜き）
   summary は SP のみ表示なので PC では display:none で grid から除外される。 */
.shohin-fv__body > .shohin-fv__visual {
  grid-column: 1;
  grid-row: 1;
}
.shohin-fv__body > .shohin-fv__product-tab {
  grid-column: 2;
  grid-row: 1;
}
.shohin-fv__body > .shohin-how-mv {
  grid-column: 1 / -1;
  grid-row: 2;
}

/* 左：商品画像 */
.shohin-fv__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;            /* grid セル（630fr）に追従して縮小 */
  height: 805px;
}

.shohin-fv__visual-frame {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--color-base);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.shohin-fv__visual-frame picture,
.shohin-fv__visual-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SP 限定サマリー（画像下にタグ/英名/内容量/説明・Figma 7820:2725 準拠）。
   PC は tab__head 内に同じ内容が表示されるため非表示にする。
   実体は _sp.css で @media (max-width: 797px) 内のみ display:flex を適用する。 */
.shohin-fv__summary {
  display: none;
}

/* 商品タグ（橙色の丸バッジ、画像左下にオーバーレイ） */
.shohin-fv__tags {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 2;
}

.shohin-fv__tag {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #C75C2E;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
  box-sizing: border-box;
  word-break: keep-all;
}

/* 右：購入カード（grid セル 670fr に追従して縮小） */
.shohin-fv__product-tab {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.shohin-tab {
  display: flex;
  gap: 0;
  padding-left: 0;
  justify-content: flex-start;
}

/* `.site-main` を頭に付けて specificity を上げる
   （_base.css の `.site-main button { background:none; border:none; padding:0 }` に勝つため。
     これ無しだと border/bg/padding が全部 0 になりタブが「素のテキスト」に見える）。 */
.site-main .shohin-tab__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* ラベルが長くても1行で収まるよう内容幅に追従させる（最小122px は維持）。
     旧 width:122px 固定だと「トラベルサイズ」等が折り返していた（ユーザー指示 2026-05-31）。 */
  min-width: 122px;
  width: auto;
  white-space: nowrap;
  height: 54px;
  padding: 0 18px;
  background: var(--color-white);
  /* inactive タブは文字色と同じ薄い赤の border で統一 */
  border: 1px solid rgba(118, 25, 36, 0.4);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-family: var(--font-en-btn);
  font-size: 14px;
  letter-spacing: 0.56px;
  text-align: center;
  color: rgba(118, 25, 36, 0.4);
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

.site-main .shohin-tab__btn--active {
  /* active タブは底辺 border なし + 濃い赤茶 border で panel と一体化。
     bg を白に揃えて panel と同色＝1つの矩形に見える（ユーザー指示 2026-05-23）。 */
  border: 1px solid #67000c;
  border-bottom: none;
  position: relative;
  z-index: 2;
  color: var(--color-text);
  opacity: 1;
  background: var(--color-white);
}

/* active タブ底辺の白カバー: panel.top border を active の x 範囲だけ確実に覆い
   隠す（z-index と bg だけだとサブピクセルや stacking context の都合で 1px の
   線が滲んで見える事があるため、明示的に白帯を被せる）。
   ユーザー指摘 2026-05-23: active 直下に横線が残る。 */
.site-main .shohin-tab__btn--active::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  background: var(--color-white);
  z-index: 3;
  pointer-events: none;
}

/* active タブに「▾」マーク（chevron-down） */
.shohin-tab__btn--active::after {
  content: "▾";
  font-size: 12px;
  line-height: 1;
  color: inherit;
}

.site-main .shohin-tab__btn:hover {
  opacity: 0.75;
}

.site-main .shohin-tab__btn--active:hover {
  opacity: 1;
}

.shohin-tab__panel {
  position: relative;
  /* Figma 7238:1024 準拠: active タブ + パネル = 1つの矩形（濃赤茶 #67000c）。
     panel.top border は inactive タブ群の下〜右端で「矩形の上端」を形成し続ける。
     active タブの x 範囲だけは、active の z-index:2 + 白bg が panel.top を覆い
     視覚的に「active と panel が連結」して見える（標準のタブ-バンプ silhouette）。
     margin-top:-1px で active.bottom と 1px 重ねて確実に覆う。 */
  border: 1px solid #67000c;
  border-radius: 0;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: -1px;
  z-index: 1;
}

.shohin-tab__panel[hidden] {
  display: none;
}

.shohin-tab__inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 40px 40px 32px;
}

.shohin-tab__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.shohin-tab__name-en {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: 3.04px;
  color: var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shohin-tab__name-jp {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-jp-base);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
  letter-spacing: 0;
}

.shohin-tab__naiyou {
  color: var(--color-text-sub);
  /* 旧来は本文に全角スペース「　」を直書きして商品名と区切っていたが、
     左に無駄な隙間ができる・折返し時に字下げするため撤去。区切りは小さい margin で制御。
     ユーザー指示 2026-05-31。 */
  margin-left: 0.4em;
}

.shohin-tab__desc {
  margin: 0;
  font-family: var(--font-jp-base);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text);
}

.shohin-tab__note {
  margin: 0;
  text-align: left;
  font-family: var(--font-jp-base);
  font-size: 12px;
  color: var(--color-text-sub);
}

.shohin-tab__price-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shohin-tab__price-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 127px;
  height: 30px;
  background: var(--color-gray-base);
  font-family: var(--font-jp-base);
  font-size: 16px;
  color: var(--color-text-sub);
}

.shohin-tab__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-family: var(--font-en-product);
  color: var(--color-accent);
}

.shohin-tab__price-value {
  font-size: 88px;
  line-height: 1;
}

.shohin-tab__price-yen {
  font-family: var(--font-jp-base);
  font-size: 36px;
}

.shohin-tab__price-tax {
  font-family: var(--font-jp-base);
  font-size: 24px;
}

.shohin-tab__price-info {
  margin: 0;
  font-family: var(--font-jp-base);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.shohin-tab__price-info--strong {
  font-weight: 500;
}

.shohin-tab__price-note {
  margin: 0;
  font-family: var(--font-jp-base);
  font-size: 12px;
  color: var(--color-text-sub);
}

/* CTA ボタンは SVG 画像（PC/SP × red/gray）を picture/source で出し分け表示。
   旧 background-color + icon + text 構成は撤去（ユーザー指示 2026-05-24）。
   SVG はアスペクト比を維持しながら親の幅に追従する。 */
.shohin-tab__cta {
  display: block;
  width: 100%;
  max-width: 550px;
  margin: 12px auto 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  line-height: 0;     /* picture/img 周辺の余白除去 */
}

.shohin-tab__cta:hover,
.shohin-tab__cta:focus-visible {
  opacity: 0.85;
}

.shohin-tab__cta picture,
.shohin-tab__cta img {
  display: block;
  width: 100%;
  height: auto;
}

/* 旧 icon span はもう存在しないが、念のため残存する場合は非表示 */
.shohin-tab__cta-icon,
.shohin-tab__cta-label {
  display: none;
}

.shohin-tab__cta--secondary {
  width: auto;
  min-width: 0;
  max-width: 240px;
  margin: 0;
  height: auto;
  flex-shrink: 0;
}

.shohin-tab__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: calc(100% - 80px);
  height: 138px;
  margin: 0 40px 32px;
  padding: 10px 24px;
  background: var(--color-gray-base);
  border-radius: 0;
  box-sizing: border-box;
}

/* SP 限定の商品サムネイル（Figma 7813:8076）— PC は非表示。
   `.site-main img { display: block }` (_base.css L105) に勝つため
   `.site-main` プレフィックスで specificity を上げる */
.site-main .shohin-tab__bottom-thumb {
  display: none;
}

/* SP 限定のタブ別商品画像（各タブ内、price-block の上）— PC は非表示 */
.site-main .shohin-tab__visual {
  display: none;
}

/* タブ・パネル外の独立した通常価格ブロック（現状未使用） */
.shohin-tab__bottom--standalone {
  margin-top: 24px;
  border-radius: 10px;
  border: 0.4px solid rgba(103, 0, 12, 0.2);
}

.shohin-tab__bottom-price {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 auto;            /* 旧: width: 204px 固定 → 親に追従して縮む */
  min-width: 0;
  align-items: flex-start;
}

.shohin-tab__bottom-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 4px 20px;
  background: var(--color-base);
  font-family: var(--font-jp-base);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--color-text-sub);
  box-sizing: border-box;
  white-space: nowrap;
  flex-shrink: 0;
}

.shohin-tab__bottom-value {
  margin: 0;
  font-family: var(--font-en-product);
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  line-height: 1;
}

.shohin-tab__bottom-value > span:first-child {
  font-size: 70px;
  line-height: 48px;
}

.shohin-tab__bottom-unit {
  font-family: var(--font-jp-base);
  font-size: 23px;
  line-height: 48px;
}

.shohin-tab__placeholder {
  padding: 80px 40px;
  text-align: center;
  color: var(--color-text-sub);
}

/* =========================================================
   2. HOW TO USE — メインビジュアル
   ========================================================= */
.shohin-how-mv {
  padding: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.shohin-how-mv__heading {
  margin: 0;
}

.shohin-how-mv__frame {
  position: relative;
  width: 896px;
  max-width: 100%;
  height: 504px;
  margin: 0;
  background: var(--color-gray-base);
  border-radius: 10px;
  overflow: hidden;
}

.shohin-how-mv__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border: 0;
  background: none;                 /* SVG (douga.svg) に円形背景が含まれるので不要 */
  padding: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
  line-height: 0;
}

.shohin-how-mv__play:hover {
  transform: translate(-50%, -50%) scale(1.05);
}

/* img タグになったので幅・高さフィット */
img.shohin-how-mv__play-icon {
  display: block;
  width: 100%;
  height: 100%;
}

/* 動画サムネイル（nv_howto_mv_image）。フレーム全体を覆う（はみ出しは cover で中央トリミング）。
   `.site-main` を付けて `_base.css` の `.site-main img{height:auto}`(0,1,1) に勝たせる。
   ユーザー指示 2026-05-31: 静止画を入れても枠に収まらなかったため CSS を追加。 */
.site-main .shohin-how-mv__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 再生ボタン押下で挿入される動画プレーヤー（iframe / video）。フレーム全体を覆う。
   shohin-how-mv.js が生成（ユーザー指示 2026-05-31: 動画リンクが表示されない不具合の修正）。
   `.site-main` を付けて `_base.css` の img/video リセット(0,1,1) に勝たせる。 */
.site-main .shohin-how-mv__player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.site-main video.shohin-how-mv__player {
  object-fit: contain;   /* 動画ファイルは見切れないよう contain */
}

/* =========================================================
   3. HOW TO USE — 5ステップ
   ========================================================= */
.shohin-how-text {
  padding: 80px;
  background: var(--color-white);
}

.shohin-how-text__inner {
  /* 全ページ共通 1280px トークン（_base.css の --content-max・SSOT）に揃える */
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Figma 7236:870 準拠（ユーザー指示 2026-05-23・実装コード取得後の精密版）:
   - 見出し: Noto Sans Medium 28px #1e2939
   - 下線: 直下に固定幅 122px の赤 (#ba0016) 線（::after で描画）
   - 説明文: 16px #364153
   - lead 下の区切り線は無し */
.shohin-how-text__lead {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-main .shohin-how-text__heading {
  margin: 0;
  position: relative;
  font-family: var(--font-jp-base);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: 0.0141em;
  line-height: 36px;
  color: #1e2939;
}
.site-main .shohin-how-text__heading::after {
  content: "";
  display: block;
  width: 122px;
  height: 1px;
  background: var(--color-accent);
  margin-top: 16px;
}

.shohin-how-text__desc {
  margin: 0;
  padding-left: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.04em;
  color: #364153;
}

.shohin-step-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shohin-step {
  display: flex;
  align-items: center;
  gap: 17px;
}

/* Figma 7236:870 準拠（精密版）: 56x56 薄グレー丸 (#eaecf0) + Scheherazade 28px
   薄グレー番号 (#8c8c8c)。ユーザー指示 2026-05-23。 */
.shohin-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: #eaecf0;
  color: #8c8c8c;
  border-radius: 50%;
  font-family: var(--font-en-product);
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.shohin-step__visual {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-gray-base);
}

.shohin-step__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shohin-step__text {
  margin: 0;
  font-family: var(--font-jp-base);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text);
}

/* =========================================================
   4. REVIEW
   ========================================================= */
/* Figma 8166:6178 準拠（ユーザー指示 2026-05-24）。
   3件以上で Swiper モード（slidesPerView:3, gap:8px）/ 未満ならグリッド。
   padding は対称 80px 80px（heading / actions の中央軸を他セクションと揃える）。
   カード列だけ右端まで延ばす要件は `.shohin-review__grid--swiper` の負マージンで吸収。
   2026-05-24 修正: 旧 `padding: 80px 0 80px 80px` だと actions の auto margin 中央軸が
   +40px 右にズレ、write-a-review の x が他セクションと揃わなかった。 */
.shohin-review {
  padding: 80px 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: var(--color-white);
}

.shohin-review__heading {
  margin: 0;
}

/* グリッド版（2件以下） */
.shohin-review__grid {
  width: 100%;
  position: relative;
}

.shohin-review__grid:not(.shohin-review__grid--swiper) .shohin-review__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}

/* Swiper モード時: Swiper.js が track(.swiper-wrapper) をフレックスで管理。
   親 `.shohin-review` の右 padding=80 を打ち消してカードを右端まで延ばす（旧仕様維持）。 */
.shohin-review__grid--swiper {
  overflow: hidden;
  margin-right: -80px;
}

/* カード */
.shohin-review__card {
  background: var(--color-gray-base);    /* #F2F2F2 Figma */
  border-radius: 0;
  padding: 71px 60px;                    /* Figma: ml60 mt71 内側 342px */
  display: flex;
  flex-direction: column;
  gap: 40px;                             /* head と body の間 */
  position: relative;
  min-height: 663px;                     /* Figma 高さ */
  box-sizing: border-box;
  height: auto;
}
.shohin-review__grid--swiper .shohin-review__card {
  /* Swiper の swiper-slide はデフォルトで高さ均等。max-width で 461 上限 */
  max-width: 461px;
}

.shohin-review__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.shohin-review__name {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 700;                      /* Bold */
  font-size: 20px;
  letter-spacing: 4px;                   /* 4px */
  line-height: 1.2;
  color: #000;                           /* black per Figma */
}

.shohin-review__age {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 4px;
  line-height: 1.2;
  color: #979797;                        /* Figma グレー */
}

/* 星評価 */
.shohin-review__stars {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  line-height: 0;
}
.shohin-review__star {
  display: block;
  width: 24px;
  height: 23px;
}
.shohin-review__star.is-filled { color: #f5b301; }   /* オレンジゴールド */
.shohin-review__star.is-empty  { color: #d9d9d9; }   /* 薄グレー */

.shohin-review__body {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 20px;
  line-height: 31px;
  letter-spacing: 4px;
  color: #000;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Swiper ナビゲーション（赤円のシンプル prev/next） */
.shohin-review__grid--swiper .swiper-button-prev,
.shohin-review__grid--swiper .swiper-button-next {
  width: 40px;
  height: 40px;
  margin-top: -20px;
  color: var(--color-accent);
}
.shohin-review__grid--swiper .swiper-button-prev::after,
.shohin-review__grid--swiper .swiper-button-next::after {
  font-size: 20px;
  font-weight: 700;
}

/* Swiper ページネーション（赤ドット） */
.shohin-review__grid--swiper .swiper-pagination {
  position: static;
  margin-top: 24px;
  text-align: center;
}
.shohin-review__grid--swiper .swiper-pagination-bullet {
  background: var(--color-text-sub);
  opacity: 0.5;
}
.shohin-review__grid--swiper .swiper-pagination-bullet-active {
  background: var(--color-accent);
  opacity: 1;
}

/* write a review ボタン（赤 200x60 右寄せ）。
   全ページ共通 1280px トークン枠内で右寄せ。レビューカードは右端まで延びる現状維持。 */
.shohin-review__actions {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  box-sizing: border-box;
}
.site-main .shohin-review__write-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 60px;
  padding: 0 20px;
  /* 通常: 白背景・赤線・赤文字（arrow は currentColor で赤）。ユーザー指示 2026-05-29 */
  background: var(--color-white);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 4px;
  font-family: var(--font-en-btn);        /* Work Sans */
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 1.6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
}
.shohin-review__write-btn-label {
  white-space: nowrap;
}
/* hover で反転: 赤背景・白文字（arrow も白に追従） */
.site-main .shohin-review__write-btn:hover {
  background: var(--color-accent);
  color: var(--color-text-on-accent);     /* #F1F2F5 */
}
.shohin-review__write-btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6px;
  height: 13px;
  color: currentColor;
  flex-shrink: 0;
}

/* =========================================================
   5. DETAIL
   ========================================================= */
.shohin-detail {
  padding: 80px 0 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* `.site-main` 付きで specificity 強化（_base.css の `.site-main h2 { margin:0 }`
   に勝つため）。parent `.shohin-detail` は band を端まで延ばすため
   padding-l/r=0 で組まれており、heading だけ 80px インデントして他セクションと
   左端を揃える。ユーザー指摘 2026-05-23。 */
.site-main .shohin-detail__heading {
  margin: 0 80px;
}

/* 背景画像が設定されている場合: linear-gradient を消して画像を表示
   ユーザー指示 2026-05-27（管理画面 ACF nv_detail_image から入力）*/
.shohin-detail__band--has-image {
  background-color: transparent !important;
  background-image: var(--band-bg, none);
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.shohin-detail__band {
  width: 100%;
  height: 924px;
  background: linear-gradient(135deg, #6b0010 0%, var(--color-accent) 60%, #8b0014 100%);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 80px 80px;
  box-sizing: border-box;
}

.shohin-detail__text {
  width: 590px;
  margin-left: auto;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.shohin-detail__label {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.shohin-detail__name {
  margin: 0;
  font-family: var(--font-jp-heading);
  font-size: 28px;
  letter-spacing: 0.04em;
  color: var(--color-white);
}

.shohin-detail__body {
  margin: 0;
  font-family: var(--font-jp-base);
  font-size: 16px;
  line-height: 28px;
  color: var(--color-base);
}

/* =========================================================
   6. RECOMMEND
   ========================================================= */
.shohin-recommend {
  padding: 80px 80px 80px 240px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shohin-recommend__heading {
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 234px;
  height: 44px;
  background: var(--color-gray-base);
  color: var(--color-accent);
  border-radius: 4px;
  font-family: var(--font-jp-base);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.06em;
  align-self: flex-start;
  flex: 0 0 auto;
}

.shohin-recommend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shohin-recommend__list li {
  position: relative;
  padding-left: 27px;
  font-family: var(--font-jp-base);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text);
}

.shohin-recommend__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* =========================================================
   7. POINT
   ========================================================= */
.shohin-point {
  padding: 80px 0 80px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
}

.shohin-point__row {
  display: grid;
  grid-template-columns: 600px 490px;
  gap: 80px;
  align-items: center;
  padding: 80px 171px;
}

.shohin-point__row--flip {
  grid-template-columns: 490px 600px;
}

.shohin-point__row--flip .shohin-point__text {
  order: 1;
}

.shohin-point__row--flip .shohin-point__visual {
  order: 2;
}

.shohin-point__visual {
  width: 600px;
  height: 430px;
  background: transparent;
  border-radius: 0;
}

/* POINT 画像をエリア内に収める */
.shohin-point__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shohin-point__text {
  display: flex;
  flex-direction: column;
}

.shohin-point__label {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  color: var(--color-accent);
  text-transform: capitalize;
}

.shohin-point__num {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 60px;
  line-height: 60px;
  color: var(--color-accent);
}

.shohin-point__lead {
  margin: 32px 0 0;
  font-family: var(--font-jp-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 43px;
  letter-spacing: 0.8px;
  color: #1e2939;
  font-feature-settings: 'pwid', 'palt', 'kern' 0;
}

.shohin-point__body {
  margin: 24px 0 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: 0.64px;
  color: var(--color-text);
  font-feature-settings: 'palt', 'pwid', 'kern' 0;
}

/* Point 05: 7つのフリー処方 */
.shohin-point__row--free {
  grid-template-columns: 400px 1fr;
  gap: 100px;
  padding: 80px 160px;
}

.shohin-free-grid {
  display: grid;
  grid-template-columns: repeat(4, 140px);
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shohin-free-grid__item {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--color-gray-base);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-jp-base);
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}

/* 全成分（折りたたみ） */
.shohin-ingredients {
  margin: 80px 152px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.shohin-ingredients__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 30px 46px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-jp-base);
  font-size: 18px;
  color: var(--color-text);
}

.shohin-ingredients__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;                             /* 旧 ＋ 用。img 化後は意味なしだが残置 */
  color: var(--color-accent);
  transition: transform 0.3s ease;
  line-height: 0;
}

.shohin-ingredients__icon img {
  display: block;
  width: 20px;
  height: 38px;
}

/* 展開時: chevron > を 90度回転して下向き ∨ に */
.shohin-ingredients__toggle[aria-expanded="true"] .shohin-ingredients__icon {
  transform: rotate(90deg);
}

.shohin-ingredients__body {
  padding: 0 46px 30px;
  font-family: var(--font-jp-base);
  font-size: 14px;
  line-height: 24px;
  color: var(--color-text);
  display: none;                             /* 初期は閉じる（JS で aria-expanded を toggle） */
}

.shohin-ingredients__toggle[aria-expanded="true"] + .shohin-ingredients__body {
  display: block;
}

/* LINE UP セクションを single-shohin で使う場合の上下余白調整 */
.single-shohin .section-lineup {
  background: var(--color-white);
}

/* =========================================================
   STEP — スキンケアフロー（6ステップ）
   Figma: 7451:7307 (step_goods)
   ========================================================= */
.shohin-flow {
  padding: 80px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
/* STEP ページネーションは SP 横スクロール専用。PC（グリッド）では非表示。
   SP では _sp.css で display:flex に上書き。 */
.shohin-flow__pager {
  display: none;
}

.shohin-flow__heading {
  margin: 0;
}

.shohin-flow__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shohin-flow__card {
  background: var(--color-white);
  border: 1px solid var(--color-line, rgba(76, 76, 76, 0.18));
  border-radius: 0;
  transition: box-shadow 0.2s ease;
}

.shohin-flow__card:not(.shohin-flow__card--current):hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.shohin-flow__card--current {
  border-color: var(--color-accent);
  border-width: 1px;
}

.shohin-flow__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px 16px;
  position: relative;
  height: 100%;
  color: var(--color-text);
  text-decoration: none;
  box-sizing: border-box;
}

.shohin-flow__num {
  margin: 0;
  font-family: var(--font-en-product);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--color-text);
}

.shohin-flow__card--current .shohin-flow__num {
  color: var(--color-accent);
}

.shohin-flow__visual {
  width: 100%;
  max-width: 80px;
  aspect-ratio: 1 / 1.6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shohin-flow__visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shohin-flow__name {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-jp-base);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
}

.shohin-flow__card--current .shohin-flow__name {
  color: var(--color-accent);
}

.shohin-flow__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: auto;
  font-size: 18px;
  line-height: 1;
  color: var(--color-accent);
  align-self: flex-end;
}

/* =========================================================
   LINE UP（shohin専用・Figma 7245:3479 準拠の3カード）
   ユーザー指示 2026-05-24
   ========================================================= */
.shohin-lineup {
  padding: 80px;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.shohin-lineup__heading {
  margin: 0;
}

.shohin-lineup__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* カード本体: 横並び [画像 / テキスト] */
.site-main .shohin-lineup-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 380px;
  padding: 20px;
  background: var(--color-base);            /* #F9FAFB */
  border: 1px solid #000000;
  border-radius: 3px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  overflow: hidden;
}
.site-main .shohin-lineup-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* 画像列（Figma: 136×280） */
.shohin-lineup-card__visual {
  flex: 0 0 136px;
  width: 136px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shohin-lineup-card__visual img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* 影を消す（ユーザー指示 2026-05-27、PC/SP 共通） */
  filter: none;
}

/* テキスト列 */
.shohin-lineup-card__body {
  flex: 1 1 auto;
  min-width: 0;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 0 20px;
}

/* タグ列（白タグ／赤枠タグ） */
.shohin-lineup-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
}
.shohin-lineup-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 16px;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.1504px;
  white-space: nowrap;
}
.shohin-lineup-card__tag--white {
  background: var(--color-gray-base);       /* #F2F2F2 */
  color: var(--color-text-sub);             /* #8C8C8C */
}
.shohin-lineup-card__tag--red {
  background: var(--color-base-dark);       /* #F1F2F5 */
  color: var(--color-accent);               /* #BA0016 */
  border: 0.5px solid var(--color-accent);
}

/* 商品名（英 / 日 / 容量） */
.shohin-lineup-card__name-en {
  margin: 0;
  font-family: var(--font-en-product);      /* Scheherazade New */
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
  letter-spacing: 3.84px;
  color: var(--color-text);                 /* #4C4C4C */
}
.shohin-lineup-card__name-jp {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1.92px;
  color: var(--color-text-sub);
}
.shohin-lineup-card__size {
  margin: 0;
  font-family: var(--font-jp-base);
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: 1.92px;
  color: var(--color-text-sub);
}

/* =========================================================
   PC: 商品詳細ページ <main> を 1260px 固定中央（ユーザー指示 2026-05-27）
   - main.single-shohin を限定スコープにする
     （`<body class="... single-shohin">` にも同名クラスが付くため、
      要素タグで scope を明示しないと body 全体が 1260px に縮み、
      sibling の <footer> も巻き込まれて背景が中央寄せになる事故が起きる。
      フッターは全ページ共通・全幅で表示する。ユーザー指示 2026-05-27）
   - 各セクション個別の max-width 指定（fv__body / how-text__inner /
     review__actions / lineup__grid）はそのまま残るが、親が1260px固定
     なので実害なく重複しないように働く
   - SP（<=797px）は _sp.css 側で別レイアウトのため width:auto に戻す
   ========================================================= */
@media (min-width: 798px) {
  main.single-shohin {
    width: 1260px;
    margin-inline: auto;
    /* セクション間ギャップ 100px（ユーザー指示 2026-05-27）
       各 section の上下 padding はそのまま維持。section 同士の境界に
       純粋な 100px の隙間が入る */
    display: flex;
    flex-direction: column;
    gap: 100px;
  }
}

@media (max-width: 797px) {
  main.single-shohin {
    width: 100%;
  }
}

/* =========================================================
   PC: HOW TO USE（mv動画 + text ステップ）は padding を外し左寄せ
   ユーザー指示 2026-05-27。
   - main 自体が 1260px 中央寄せなので、padding を外すと内容は main の
     左端（=ビューポート中央寄せ 1260px の左端）に揃う
   - .shohin-how-mv は fv 内 grid row2 にぶち抜きで配置されている。
     親 .shohin-fv の padding:80px が残るため、それも 0 にすると true 左端。
     ただし fv 全体の padding は他要素（visual / product-tab）も使う
     ため、how-mv 自身の padding のみ解除する
   - .shohin-how-text__inner は max-width + margin:auto をリセットし
     コンテンツ幅 100%・左寄せに
   - SP（<=797px）は _sp.css 側の既存レイアウト維持
   ========================================================= */
@media (min-width: 798px) {
  .shohin-how-mv {
    padding: 0;
  }
  .shohin-how-text {
    padding: 0;
  }
  .shohin-how-text__inner {
    max-width: none;
    margin: 0;
  }
}

/* =========================================================
   PC: .shohin-fv は親 main(1260px) に対して横 padding 0
   ユーザー指示 2026-05-27。
   - 元: padding: 80px 80px 80px（上下左右80px）
   - 上下 80px は維持し、左右だけ 0 にする
   - これにより fv 全体（商品画像 / 購入カード / how-mv）が
     main の左端〜右端いっぱい（=1260px幅）に展開される
   ========================================================= */
@media (min-width: 798px) {
  .shohin-fv {
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   PC: パンくずは背景フル幅・中身だけ 1260px 中央寄せ
   ユーザー指示 2026-05-27。
   - 親 main は width:1260px 固定。breadcrumb もそのままだと 1260px に
     収まり背景の白＆下線が中央のみになる
   - `margin-left: calc(50% - 50vw)` + `width: 100vw` で main の枠を
     突き抜けてビューポート全幅まで広げる（典型的な "full-bleed" 技法）
   - 中身 .shohin-breadcrumb__list は max-width:1260px + margin auto で
     1260px センター。padding は元の 16px 縦のみ維持
   ========================================================= */
@media (min-width: 798px) {
  /* main(1260px) の枠を突き抜けてビューポート全幅にする full-bleed。
     position+transform 方式（margin方式より副作用が小さく確実）。
     背景・border-bottom も画面全幅に達する */
  .shohin-breadcrumb {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    padding: 16px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-line);
    display: flex;                /* 中身 ol を justify-content で確実に中央寄せ */
    justify-content: center;
  }
  .shohin-breadcrumb__list {
    width: var(--content-max);
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
  }
}

/* =========================================================
   PC: .shohin-review は横 padding を 0（縦は維持）
   ユーザー指示 2026-05-27。
   - 元: padding: 80px 80px
   - 親 main(1260px) に対して横いっぱい使う
   ========================================================= */
@media (min-width: 798px) {
  .shohin-review {
    padding-left: 0;
    padding-right: 0;
  }
}

/* =========================================================
   PC: レビューカード padding 30px / 文字 15px（ユーザー指示 2026-05-27）
   - 元: padding 71px 60px / name・age・body 20px
   - カードを引き締めて 1 画面に多く見せる方針
   ========================================================= */
@media (min-width: 798px) {
  .shohin-review__card {
    padding: 50px;
    min-height: 0;             /* 元の min-height:663px を解除 */
    gap: 20px;                 /* head と body の間 */
    aspect-ratio: 461 / 663;   /* Figma 比率（ユーザー指示 2026-05-28）。main 1260px 内で 3 列 grid に追従 */
  }
  .shohin-review__name,
  .shohin-review__age,
  .shohin-review__body {
    font-size: 15px;
  }
  .shohin-review__body {
    line-height: 1.8;          /* 元 31px は 20px ベース。15px に合わせて行間も縮める */
    letter-spacing: 0.04em;    /* 元 4px(=20*0.2)→15px比例 */
  }
}

/* =========================================================
   PC: 商品詳細ページの全 font-size を 0.9 倍（ユーザー指示 2026-05-27）
   - 除外: h2（.section-eyebrow 32px / .shohin-recommend__heading 18px）
   - 他は元の値 × 0.9 で上書き。h3 や本文・タブ・カード等すべて対象
   ========================================================= */
@media (min-width: 798px) {
  /* breadcrumb */
  main.single-shohin .shohin-breadcrumb__list { font-size: 12.6px; }   /* 14 */

  /* FV: tag / tab */
  main.single-shohin .shohin-fv__tag { font-size: 12.6px; }            /* 14 */
  main.single-shohin .shohin-tab__btn { font-size: 12.6px; }           /* 14 */
  main.single-shohin .shohin-tab__btn--active::after { font-size: 10.8px; } /* 12 */
  main.single-shohin .shohin-tab__name-en { font-size: 34.2px; }       /* 38 */
  main.single-shohin .shohin-tab__name-jp { font-size: 12.6px; }       /* 14 */
  main.single-shohin .shohin-tab__desc { font-size: 14.4px; }          /* 16 */
  main.single-shohin .shohin-tab__note { font-size: 10.8px; }          /* 12 */
  main.single-shohin .shohin-tab__price-label { font-size: 14.4px; }   /* 16 */
  main.single-shohin .shohin-tab__price-value { font-size: 79.2px; }   /* 88 */
  main.single-shohin .shohin-tab__price-yen { font-size: 32.4px; }     /* 36 */
  main.single-shohin .shohin-tab__price-tax { font-size: 21.6px; }     /* 24 */
  main.single-shohin .shohin-tab__price-info { font-size: 12.6px; }    /* 14 */
  main.single-shohin .shohin-tab__price-note { font-size: 10.8px; }    /* 12 */
  main.single-shohin .shohin-tab__bottom-label { font-size: 12.6px; }  /* 14 */
  main.single-shohin .shohin-tab__bottom-value > span:first-child { font-size: 63px; } /* 70 */
  main.single-shohin .shohin-tab__bottom-unit { font-size: 20.7px; }   /* 23 */

  /* HOW TO USE TEXT（h3 = .shohin-how-text__heading は対象） */
  main.single-shohin .shohin-how-text__heading { font-size: 25.2px; }  /* 28 */
  main.single-shohin .shohin-how-text__desc { font-size: 14.4px; }     /* 16 */
  main.single-shohin .shohin-step__num { font-size: 25.2px; }          /* 28 */
  main.single-shohin .shohin-step__text { font-size: 14.4px; }         /* 16 */

  /* REVIEW（前段で 15px に既調整。さらに 0.9 倍 = 13.5px に） */
  main.single-shohin .shohin-review__name,
  main.single-shohin .shohin-review__age,
  main.single-shohin .shohin-review__body {
    font-size: 13.5px;                                                  /* 15 */
    margin-top: 20px;
  }
  main.single-shohin .shohin-review__grid--swiper .swiper-button-prev::after,
  main.single-shohin .shohin-review__grid--swiper .swiper-button-next::after { font-size: 18px; } /* 20 */
  main.single-shohin .shohin-review__write-btn { font-size: 14.4px; }  /* 16 */

  /* DETAIL */
  main.single-shohin .shohin-detail__label { font-size: 25.2px; }      /* 28 */
  main.single-shohin .shohin-detail__name { font-size: 25.2px; }       /* 28 */
  main.single-shohin .shohin-detail__body { font-size: 14.4px; }       /* 16 */

  /* RECOMMEND（heading 18px は h2 のため除外） */
  main.single-shohin .shohin-recommend__list li { font-size: 14.4px; } /* 16 */

  /* POINT（lead は h3） */
  main.single-shohin .shohin-point__label { font-size: 21.6px; }       /* 24 */
  main.single-shohin .shohin-point__num { font-size: 54px; }           /* 60 */
  main.single-shohin .shohin-point__lead { font-size: 25.2px; }        /* 28 */
  main.single-shohin .shohin-point__body { font-size: 14.4px; }        /* 16 */
  main.single-shohin .shohin-free-grid__item { font-size: 16.2px; }    /* 18 */

  /* INGREDIENTS */
  main.single-shohin .shohin-ingredients__toggle {
    font-size: 14px;
    line-height: 90px;
    padding: 0px 46px;
  }
  main.single-shohin .shohin-ingredients__icon img {
    display: block;
    width: 20px;
    height: 22px;
  }
  main.single-shohin .shohin-ingredients__icon { font-size: 25.2px; }  /* 28 */
  main.single-shohin .shohin-ingredients__body { font-size: 12.6px; }  /* 14 */

  /* STEP (flow) */
  main.single-shohin .shohin-flow__num { font-size: 25.2px; }          /* 28 */
  main.single-shohin .shohin-flow__name { font-size: 12.6px; }         /* 14 */
  main.single-shohin .shohin-flow__arrow { font-size: 16.2px; }        /* 18 */

  /* LINE UP */
  main.single-shohin .shohin-lineup-card__tag { font-size: 12.6px; }   /* 14 */
  main.single-shohin .shohin-lineup-card__name-en { font-size: 21.6px; } /* 24 */
  main.single-shohin .shohin-lineup-card__name-jp { font-size: 10.8px; } /* 12 */
  main.single-shohin .shohin-lineup-card__size { font-size: 10.8px; }  /* 12 */
}

/* =========================================================
   PC: DETAIL 見出しの 80px インデントを解除（ユーザー指示 2026-05-27）
   - 元: margin: 0 80px（band 全幅に対し heading だけ左 80px インデント）
   - 新: margin: 0 0px（PC は main 1260px 固定で band も同幅なので不要）
   ========================================================= */
@media (min-width: 798px) {
  .site-main .shohin-detail__heading {
    margin: 0 0px;
  }
}

/* =========================================================
   PC: DETAIL band をビューポート全幅に（ユーザー指示 2026-05-27）
   - main 1260px の枠を突き抜けて画面端から端まで
   - 背景画像を 100% で敷く想定
   - 中の .shohin-detail__text は元の `width:590px; margin-left:auto`
     により band 内で右寄せ。main の右端より少し外側になるが、画像背景
     との見え方で改めて調整予定
   ========================================================= */
@media (min-width: 798px) {
  .shohin-detail__band {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 1920px;     /* ユーザー指示 2026-05-28: 1920px 上限。それ以上はセンタリングのまま余白 */
  }
}

/* =========================================================
   PC: RECOMMEND を 1000px 中央寄せ・padding 0・gap 解除
   ユーザー指示 2026-05-27
   ========================================================= */
@media (min-width: 798px) {
  .shohin-recommend {
    display: flex;
    flex-direction: column;
    /* gap: 24px; */
    width: 1000px;
    padding: 0;
    margin: auto;
  }
}

/* =========================================================
   PC: POINT__row の横 padding を 0 に（ユーザー指示 2026-05-27）
   ========================================================= */
@media (min-width: 798px) {
  .shohin-point {
    padding: 80px 0 0px;
  }
  .shohin-point__row {
    display: grid;
    grid-template-columns: 600px 490px;
    gap: 80px;
    align-items: center;
    padding: 80px 0px;
  }
  .shohin-flow {
    padding: 0px;
  }
  .shohin-lineup {
    padding: 0px;
    background: var(--color-white);
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  /* 4 枚目は SP のみで表示（PC は 3 カード）
     カード本体のサイズや見た目は TOP と同じ .has-2026-template .lineup-card（_global.css + front-page.css）に委譲。
     ユーザー指示 2026-05-28: 商品詳細の LINEUP デザインを TOP と完全統一。 */
  main.single-shohin .lineup-card--sp-only,
  main.single-shohin .shohin-lineup-card--sp-only {
    display: none;
  }
}

/* SP: .section-lineup--shohin の表示位置を旧 .shohin-lineup と同じ末尾 (order:10) に。
   _sp.css 側の `body.is-shohin-2026 .site-main > .shohin-lineup { order:10 }` が
   旧クラス限定だったため、新構造に変わってから order が無く想定外の位置に出る
   事象を補修（ユーザー指摘 2026-05-27 「スマホのLINEUPがなくなってる」）。 */
@media (max-width: 797px) {
  /* SP の表示順を再構成（ユーザー指示 2026-05-27）:
     ... → 6:POINT → 7:STEP(flow) → 8:HOW TO USE(how-text) → 9:全成分(ingredients) → 10:LINEUP
     全成分は HOW TO USE セクションの直後に配置する。
     注: _sp.css が本 CSS より後に enqueue されるため、同 specificity だと負ける。
        main.single-shohin スコープを足して specificity を上げて上書き。 */
  body.is-shohin-2026 main.single-shohin > .shohin-flow        { order: 7; }
  body.is-shohin-2026 main.single-shohin > .shohin-how-text    { order: 8; }
  body.is-shohin-2026 main.single-shohin > .shohin-ingredients {
    order: 9;
    /* _sp.css の `.site-main > * { width:100% !important; margin:0 !important }` に
       勝つため width / margin に !important を付ける。これが無いと全幅・左寄りになる。
       table-cell は使わない（margin:auto を殺すため）。ユーザー指摘 2026-05-29。 */
    width: 90% !important;
    margin: 40px auto 0 !important;
    text-align: center;
  }
  body.is-shohin-2026 main.single-shohin > .section-lineup--shohin { order: 10; }
  /* HOW TO USE の説明文（nv_howto_lead）と「使用方法」見出しは SP では
     STEP 側に移動・非表示にする（ユーザー指示 2026-05-27）。 */
  .is-shohin-2026 .shohin-how-text__heading,
  .is-shohin-2026 .shohin-how-text__desc {
    display: none;
  }
  /* STEP（shohin-flow）の SP padding（ユーザー指示 2026-05-27 → 2026-05-29 改）。
     _sp.css 後勝ち対策で main.single-shohin スコープを足す。
     横スクロール(__grid)を画面端まで full-bleed させるため親の左右 padding を撤去。
     5% ガターは __grid 内部（先頭 margin + 末尾スペーサー）で確保し、
     見出し・説明文には個別に 5% を付与する（下記）。 */
  body.is-shohin-2026 main.single-shohin .shohin-flow {
    padding: 0;
    overflow: hidden;
  }
  /* HOW TO USE（shohin-how-text）の SP padding（ユーザー指示 2026-05-27） */
  body.is-shohin-2026 main.single-shohin .shohin-how-text {
    padding: 0px 5% 40px;
  }
  /* セクション見出し（section-eyebrow）の SP タイポ調整（ユーザー指示 2026-05-27）。
     _sp.css 後勝ち対策で main.single-shohin スコープを足す。 */
  body.has-2026-template main.single-shohin .section-eyebrow {
    font-size: 18px;
    letter-spacing: 3.2px;
    margin-bottom: 0px;
  }
  /* STEP 見出しの SP padding（ユーザー指示 2026-05-27 → 2026-05-29 改）。
     親の左右 padding を外したぶん、見出し・説明文に個別で 5% を付与し
     横スクロールのカード先頭(5%)と左端を揃える。 */
  body.is-shohin-2026 main.single-shohin .shohin-flow__heading,
  body.is-shohin-2026 main.single-shohin .shohin-flow__desc {
    padding: 0 5%;
  }
  /* HOW TO USE 内側コンテナの SP 調整（ユーザー指示 2026-05-27） */
  body.is-shohin-2026 main.single-shohin .shohin-how-text__inner {
    max-width: 100%;
    gap: 0px;
  }
}

/* PC: STEP 側に追加した SP 用 desc は非表示（元の how-text__desc を維持）。 */
@media (min-width: 798px) {
  .shohin-flow__desc--sp-only {
    display: none;
  }
}

/* =========================================================
   PC: POINT__label の行間を 13px に（ユーザー指示 2026-05-27）
   ========================================================= */
@media (min-width: 798px) {
  .shohin-point__label {
    line-height: 13px;
  }
}

/* =========================================================
   PC: POINT__lead（h3）の下余白（ユーザー指示 2026-05-27）
   ========================================================= */
@media (min-width: 798px) {
  main.single-shohin .shohin-point__lead {
    font-size: 25.2px;
    margin-bottom: 50px;
  }
}

/* =========================================================
   PC: 全成分アコーディオン Figma 7248:5230 準拠
   ユーザー指示 2026-05-27（Figma URL 提供）
   - コンテナ幅 1206px 中央寄せ（旧 margin: 80px 152px 0 で 956px → 全幅寄り）
   - 上下 padding 38px・左 46px・右 21px（Figma 実測）
   - section gap は親 main の flex gap:100px に委ねるので、margin-top は 0
   ========================================================= */
@media (min-width: 798px) {
  .shohin-ingredients {
    width: 1085px;
    max-width: 100%;
    margin: 0 auto;
  }
  .shohin-ingredients__toggle {
    padding: 38px 21px 38px 46px;
    font-size: 14px;                /* ユーザー指示 2026-05-27 */
  }
}

/* =========================================================
   商品詳細 LINEUP カードの hover「キラン」（TOP と同じ案A）。
   front-page.css は TOP のみ enqueue されるため、商品詳細でも効くよう
   single-shohin.css へ移植し .section-lineup--shohin にスコープ。
   挙動はトップと同一（地色グレー＋斜め1スイープ＋brightness 微揺らし）。
   ユーザー指示 2026-05-30。解析: 00.wiki/raw/2026-05-29_yunth-holo-gradient-hover-effect.md
   ========================================================= */
.section-lineup--shohin .lineup-card {
  position: relative;
  overflow: hidden;
  background-color: #FFFFFF;   /* 静止時は白（ユーザー指示 2026-05-30）*/
  transition: background-color 0.15s ease;  /* 触った瞬間に白→薄グレーへ（高速化 2026-05-31）*/
}
@media (hover: hover) and (pointer: fine) {
  .section-lineup--shohin .lineup-card:hover {
    background-color: #F2F2F2;   /* hover で薄いグレー地色に */
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;  /* 0.15s 遅延＝白→グレー後にキラン（高速化 2026-05-31）*/
  }
}
@keyframes holoGradient {
  0%   { background-position: 150% 150%; filter: brightness(1); }
  10%  { background-position: 120% 120%; }
  20%  { background-position: 100% 100%; filter: brightness(1.01); }
  30%  { background-position: 80% 80%; }
  40%  { background-position: 60% 60%; }
  50%  { background-position: 40% 40%; filter: brightness(0.98); }
  60%  { background-position: 20% 20%; }
  70%  { background-position: 0% 0%; filter: brightness(1.01); }
  80%  { background-position: -10% -10%; }
  90%  { background-position: -30% -30%; }
  100% { background-position: -50% -50%; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .section-lineup--shohin .lineup-card:hover,
  .section-lineup--shohin .lineup-card:active { animation: none; }
}
/* SP（タッチ）: hover が無いので :active（タップ）でキランを出す（ユーザー指示 2026-05-30）。 */
@media (hover: none) {
  .section-lineup--shohin .lineup-card:active {
    background-color: #F2F2F2;
    background-image: linear-gradient(125deg,
        rgba(242, 242, 242, 0) 15%,
        rgba(234, 234, 234, 0.65) 32%,
        rgba(255, 255, 255, 0.96) 52%,
        rgba(242, 242, 242, 0) 90%);
    background-size: 250% 250%;
    background-position: 150% 150%;
    background-repeat: no-repeat;
    animation: holoGradient 1.2s cubic-bezier(0.11, 0, 0.5, 0) 0.15s forwards;  /* 0.15s 遅延＝白→グレー後にキラン（高速化 2026-05-31）*/
  }
}

/* WP Customer Reviews の商品名・集計レーティングを PC/SP とも非表示
   （ユーザー指示 2026-06-01。SPは _sp.css にもあったが、PC含め共通で隠すためここに集約）。 */
.is-shohin-2026 .wpcr3_item_name,
.is-shohin-2026 .wpcr3_aggregateRating {
  display: none !important;
}