@charset "UTF-8";
/*
 * esience 2026 / Smartphone Layout (<= 797px)
 * 参考: /Users/setsuko/Downloads/esience-top_sp.html
 * 全ルールは @media (max-width: 797px) でラップ。PC (>=798px) には影響しない。
 */

@media (max-width: 797px) {

  /* ========== Base reset for SP ========== */
  html.has-2026-template,
  body.has-2026-template,
  .has-2026-template html,
  .has-2026-template body {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: clip !important;
  }

  /* SP 側変数 — すべてのコンテンツ横余白は 5% に統一 */
  :root {
    --side-pad-sp: 5%;
    --side-pad-sp-40: 5%;
  }

  /* セクション系すべて 100% 幅 */
  .has-2026-template .site-main,
  .has-2026-template .site-main > *,
  .has-2026-template .front-topback,
  .has-2026-template .front-topback > * {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* 共通 side-pad オーバーライド（_base.css の `--side-pad` 上書き） */
  .has-2026-template {
    --side-pad: 5%;
  }

  /* ========== HEADER ========== */
  .has-2026-template .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    background: transparent;
    transition: transform 0.5s ease-out, opacity 0.5s ease-out, background 0.3s ease;
  }
  .has-2026-template .site-header.is-scrolled {
    position: fixed;
    background: rgba(186, 0, 22, 0.92);
    box-shadow: none;
  }
  /* スクロール中はヘッダーを上に隠す（停止 150ms で .is-scrolling 解除→再表示）
     ユーザー指示 2026-05-25 */
  .has-2026-template .site-header.is-scrolling {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .has-2026-template .site-header__inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px;
    gap: 16px;
    max-width: none !important;
    width: 100%;
    height: auto;
    position: relative;                 /* ロゴを画面中央に absolute 配置するための基準 */
  }
  /* PC ナビは SP では非表示 */
  .has-2026-template .site-header__nav {
    display: none !important;
  }
  /* SP のみ: ハンバーガー + ユーザー（左端） */
  .has-2026-template .site-header__sp-left {
    display: flex !important;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    order: 1;
  }
  .has-2026-template .site-header__hamburger {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .has-2026-template .site-header__hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .has-2026-template .site-header__hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .has-2026-template .site-header__hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .has-2026-template .site-header__hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  /* ロゴ中央: 左右のアイコン群の幅差に影響されないよう absolute で画面中央に固定 */
  .has-2026-template .site-header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex: none;
    margin: 0;
    pointer-events: none;               /* タップは左右アイコン側に通す */
    z-index: 1;
  }
  .has-2026-template .site-header__logo, .site-header__logo a {
    pointer-events: auto;               /* ロゴ自体のリンクはタップ可能に戻す */
  }
  .has-2026-template .site-header__logo img {
    width: 100px;
    height: auto;
  }
  /* SP のカート（右端） */
  .has-2026-template .site-header__actions {
    flex-shrink: 0;
    gap: 0;
    order: 3;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  /* SP では PC 用のユーザーアイコン（actions 内）は非表示（左に出してある） */
  .has-2026-template .site-header__actions-user-pc {
    display: none !important;
  }

  /* ========== MOBILE NAV OVERLAY ========== */
  .has-2026-template .site-mobile-nav {
    display: flex !important;
    position: fixed;
    inset: 0;
    background: rgba(186, 0, 22, 0.98);
    z-index: 9980;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  .has-2026-template .site-mobile-nav.is-active {
    opacity: 1;
    visibility: visible;
  }
  .has-2026-template .site-mobile-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .has-2026-template .site-mobile-nav a {
    font-family: 'Scheherazade New', serif;
    font-size: 24px;
    color: #fff;
    letter-spacing: 3.2px;
    text-decoration: none;
  }

  /* ========== HERO ========== */
  .has-2026-template .section-hero {
    width: 100% !important;
    /* セクション通常フロー高さを伸ばして、fixed bg を覆う次セクション
       (.section-hero__btn-below / .section-product) が遅れて出てくるようにする
       （ユーザー指示 2026-05-25）。 */
    height: auto;
    aspect-ratio: 10 / 19;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    background-color: transparent;
  }
  .has-2026-template .section-hero__bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 778 / 1180;
    /* SP のヒーロー画像（ユーザー指示 2026-05-25 sp_FV.webp に変更）。
       PC は front-page.css の front/2026/top1.webp のまま（本ルールは SP メディアクエリ内のみ）。 */
    background-image: url('../img/front/sp_FV.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    background-color: transparent;
  }

  /* SP: hero 画像 fixed の上に後続セクションを重ねる（背景 white + z-index で覆い隠す） */
  .has-2026-template .section-hero__btn-below,
  .has-2026-template .section-product,
  .has-2026-template .section-lineup,
  .has-2026-template .section-concept,
  .has-2026-template .section-news,
  .has-2026-template .section-media,
  .has-2026-template .section-banner,
  .has-2026-template .section-contents {
    position: relative;
    z-index: 2;
    background: var(--color-white);
  }

  .has-2026-template .section-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 120px var(--side-pad-sp) 0;
    height: 100%;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
  }
  /* SP ではヒーローのロゴ/コピー/special-page ボタン一式を非表示
     （ユーザー指示 2026-05-19: スマホは画像のみ。view more の
     .section-hero__btn-below は別要素なので残る）。 */
  .has-2026-template .section-hero__content {
    display: none;
  }
  .has-2026-template .hero-logo {
    width: 100%;
    gap: 16px;
  }
  .has-2026-template .hero-logo__mark {
    width: 100px;
    height: auto;
  }
  .has-2026-template .site-main .hero-logo__title {
    font-size: 28px;
    letter-spacing: 4px;
    line-height: 1.3;
  }
  .has-2026-template .site-main .hero-logo__sub {
    font-size: 14px;
    letter-spacing: 1.5px;
    margin-top: 4px;
  }
  /* SP: Hero 内の special-page ボタンは非表示 */
  .has-2026-template .section-hero .btn--special-page {
    display: none !important;
  }
  /* SP: Hero 下の view more ボタンは非表示（ユーザー指示 2026-05-31）。
     以前は display:flex !important で表示していた。 */
  .has-2026-template .section-hero__btn-below {
    display: none !important;
  }
  .has-2026-template .section-hero__btn-below .btn--clear {
    width: 180px;
    height: 50px;
    font-size: 14px;
    letter-spacing: 2.24px;
    padding: 0 20px;
  }
  .has-2026-template .section-hero__btn-below .btn--clear .btn__arrow {
    right: 18px;
    width: 8px;
    height: 14px;
  }

  /* ========== Section共通 ========== */
  .has-2026-template .site-main .section-eyebrow {
    font-size: 20px;
    letter-spacing: 3.2px;
    margin-bottom: 40px;
  }
  .has-2026-template .section-hero,
  .has-2026-template .section-product,
  .has-2026-template .section-lineup,
  .has-2026-template .section-concept,
  .has-2026-template .section-news,
  .has-2026-template .section-media,
  .has-2026-template .section-banner,
  .has-2026-template .section-contents {
    padding-left: var(--side-pad-sp);
    padding-right: var(--side-pad-sp);
  }
  /* Hero は内側で別途余白制御するので horizontal padding を 0 に */
  .has-2026-template .section-hero {
    padding-left: 0;
    padding-right: 0;
  }

  /* ========== PRODUCT ========== */
  .has-2026-template .section-product {
    padding: 80px 0 80px !important;       /* 横余白は 0（画像フルブリード） */
    gap: 0;
  }
  .has-2026-template .section-product > .section-eyebrow {
    padding: 0 5%;                         /* タイトルは 5% 左寄せ */
    margin-bottom: 40px;
  }
  .has-2026-template .product-body {
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .has-2026-template .product-body__visual {
    flex: 0 0 auto;
    width: 100%;
    /* 固定 353px をやめ 1:1。幅を変えても正方形比率を維持
       （img は object-fit:cover で正方形にトリミング）。ユーザー指示 2026-05-19 */
    height: auto;
    aspect-ratio: 1 / 1;
  }
  .has-2026-template .product-body__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }
  /* PC で width: 598px 固定だった product-body__text を SP は 100% に */
  .has-2026-template .product-body__text {
    width: 100% !important;
    max-width: 100% !important;
    padding: 60px 20px 0;                    /* 32px → 5% */
    box-sizing: border-box;
    align-items: stretch !important;
  }
  .has-2026-template .product-text-block {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .has-2026-template .site-main .product-text-block .product-name-en {
    font-size: 24px;
    letter-spacing: 2.9px;
    line-height: 30px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .has-2026-template .site-main .product-name-jp,
  .has-2026-template .site-main .product-body__text p {
    font-size: 16px;
    letter-spacing: 2.56px;
    line-height: 24px;
    word-break: break-word;
  }
  /* view more ボタンは画面右寄せ */
  .has-2026-template .product-body__text .btn--clear {
    align-self: flex-end;
    margin-top: -8px;
  }

  /* SP: Figma 準拠で注釈だけ 12px に */
  .has-2026-template .site-main .product-body__text .product-note {
    font-size: 12px;
    letter-spacing: normal;
    line-height: normal;
  }

  /* SP: Figma 準拠で日本語商品名と医薬部外品バッジを非表示（PC には影響なし） */
  .has-2026-template .site-main .product-name-jp { display: none; }
  .has-2026-template .container-list .container--red { display: none; }


  /* ========== LINE UP (2列グリッド) Figma 準拠 ========== */
  .has-2026-template .section-lineup {
    display: block;
    padding: 80px 5%;
    width: 100%;
    box-sizing: border-box;
  }
  .has-2026-template .lineup-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px 8px;
    width: 100%;
  }
  .has-2026-template .lineup-card {
    width: 100%;
    height: auto;
    min-height: 357px;
    padding: 12px;
    background: #FFFFFF;   /* SP LINEUP 静止背景を白に（ユーザー指示 2026-05-30）。旧 #f9fafb */
    border: 1px solid #000;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
  }
  .has-2026-template .lineup-card__link {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    align-items: stretch;
  }
  .has-2026-template .lineup-card .tag.tag--red {
    display: none;                            /* SP では tag 非表示（ユーザー指示 2026-05-25） */
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-accent);
    color: #fff;
    font-size: 12px;
    letter-spacing: 1.85px;
    padding: 3px 8px;
    border-top-left-radius: 10px;
    line-height: 1.4;
    white-space: nowrap;
    z-index: 1;
  }
  .has-2026-template .lineup-card__visual {
    flex: 0 0 auto;
    width: 100%;
    height: 136px;
    margin-top: 24px;
    display: flex;
    align-items: flex-start;                  /* 横並びカードで画像上端を揃える（ユーザー指示 2026-05-25）*/
    justify-content: center;
  }
  .has-2026-template .lineup-card__visual picture,
  .has-2026-template .lineup-card__visual img {
    height: 128px;
    width: auto;
    object-fit: contain;
    object-position: top;                     /* 画像内のコンテンツも上端から表示 */
    margin-top: 0px;
  }
  .has-2026-template .lineup-card__body {
    display: flex;
    flex-direction: column;
    gap: 0px;                                 /* 要素間隔は gap で制御（ユーザー指示 2026-05-25）*/
    margin-top: 24px;
  }
  .has-2026-template .lineup-card .container-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    /* 横並びカード間で次要素の開始位置を揃えるための min-height
       （ユーザー指示 2026-05-25）*/
    min-height: 28px;
  }
  .has-2026-template .lineup-card .container--white {
    background: #f2f2f2;
    color: #8c8c8c;
    font-size: 10px;
    letter-spacing: 0.8px;
    padding: 2px 4px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    line-height: 1.3;
  }
  .has-2026-template .lineup-card .container--red {
    background: #f1f2f5;
    border: 0.5px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 10px;
    letter-spacing: 0.8px;
    padding: 3px 4px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    line-height: 1.3;
  }
  .has-2026-template .site-main .lineup-card__name-en {
    font-family: 'Scheherazade New', serif;
    font-size: 19px;
    color: #4c4c4c;
    letter-spacing: 1.28px;
    line-height: 1.15;
    margin-top: 0;                            /* 間隔は body の gap で制御 */
    /* 横並びカード間で揃える。最大 3 行（例: C×AZ DERMAIN SHOT）想定 */
    min-height: calc(1.15em * 3);
  }
  .has-2026-template .site-main .lineup-card__name-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    color: #8c8c8c;
    letter-spacing: 0;
    line-height: 1;
    margin-top: 0;
    /* 横並びカード間で揃える。最大 2 行（例: C×AZ ダーマインショット）想定 */
    min-height: calc(1em * 2);
  }
  .has-2026-template .site-main .lineup-card__volume {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    color: #8c8c8c;
    letter-spacing: 0.8px;
    line-height: 1.3;
    margin-top: 0;
    font-feature-settings: 'palt' 1;
  }


  /* ========== CONCEPT ========== */
  .has-2026-template .section-concept {
    padding: 0 !important;
    flex-direction: column;
    width: 100%;
  }
  .has-2026-template .concept-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin: 0;
  }
  .has-2026-template .concept-visual {
    order: 0;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100% !important;      /* PC の calc(100% + side-pad) を打ち消し */
    max-width: 100% !important;
    height: 572px;
    aspect-ratio: auto;
    margin: 0 !important;
    border-radius: 0;
  }
  .has-2026-template .concept-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
  }
  .has-2026-template .concept-text {
    order: 1;
    position: relative;
    z-index: 2;
    background: var(--color-white);
    width: 100%;
    padding: 60px 5% 80px;                 /* 40px → 5% */
    align-items: stretch;
    box-sizing: border-box;
  }
  .has-2026-template .site-main .concept-heading-jp {
    margin-top: 40px;
    font-size: 28px;
    letter-spacing: 4.48px;
    line-height: 1.4;
    white-space: normal;
  }
  .has-2026-template .site-main .concept-sub-en {
    margin-top: 16px;
    font-size: 16px;
    letter-spacing: 1.28px;
    white-space: normal;
    color: var(--color-gray, #8c8c8c);
  }
  .has-2026-template .concept-body--top {
    margin-top: 30px;
  }
  .has-2026-template .concept-body--bottom {
    margin-top: 30px;
    white-space: normal;
  }
  .has-2026-template .site-main .concept-body p {
    font-size: 13px;
    letter-spacing: 1.56px;
    line-height: 2.1;
  }
  .has-2026-template .concept-cta {
    align-self: flex-end;
    margin-top: 50px;
  }
  /* SP では view more ボタンを小さく */
  .has-2026-template .site-main a.btn--clear,
  .has-2026-template .btn--clear {
    width: 180px;
    height: 50px;
    font-size: 14px;
    letter-spacing: 2.24px;
    padding: 0 20px;
  }
  .has-2026-template .btn--clear .btn__arrow {
    right: 18px;
    width: 8px;
    height: 14px;
  }

  /* ========== NEWS ========== */
  .has-2026-template .section-news {
    background: var(--color-light-bg, #f2f2f2);
    padding: 80px 5%;                      /* 40px → 5% */
  }
  .has-2026-template .news-list {
    flex-direction: column;
    gap: 0;
  }
  .has-2026-template .news-item {
    border-bottom: 1px solid rgb(76 76 76);
    padding: 0;
  }
  /* PC の grid 構造を解除 → 縦積み 2 行（head[ラベル+日付] → タイトル）に再構築 */
  .has-2026-template .news-item__link {
    padding: 20px 0px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  /* SP: news アーカイブの左右パディング(5%)が効かずコンテンツが全幅(0〜100vw)になり
     タイトルが画面端まで伸びていた。明示的に左右パディングを効かせ、ラッパーを viewport 幅に固定。
     これでタイトル width:100% が内側幅にクランプされ … が画面内に出る。（ユーザー指示 2026-05-31）*/
  .has-2026-template .news-archive__section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden;
  }
  .has-2026-template .news-archive__inner {
    max-width: 100% !important;
    width: 100%;
  }
  /* news アーカイブ専用: PC由来の align-items:center が縦積みで横中央寄せになるため
     左寄せ(stretch)に戻す。日時行・タイトルとも左寄せ＆全幅で折り返す。
     front-page の news セクション(.news-item--frontには--archive無し)には影響させない。
     （ユーザー指示 2026-05-31）*/
  .has-2026-template .news-list--archive .news-item__link {
    align-items: stretch;
    text-align: left;
  }
  .has-2026-template .news-list--archive .news-item__head {
    justify-content: flex-start;
  }
  /* ラベル + 日付 を横並び（ユーザー指示 2026-05-25）。SP は日付 → ラベルの順 */
  .has-2026-template .news-item__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
  }
  .has-2026-template .news-item__date  { order: 1; }
  .has-2026-template .news-item__label { order: 2; }
  .has-2026-template .news-item__label {
    margin-bottom: 0;
    position: static !important;
    width: auto !important;
    min-width: 0;
    height: auto;
    padding: 0px 8px;
    font-size: 10px !important;
    letter-spacing: 1.28px !important;
  }
  .has-2026-template .site-main .news-item__date {
    position: static !important;
    display: block !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.4px !important;
    color: var(--color-text-sub, #4c4c4c);
  }
  .has-2026-template .site-main .news-item__title {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    font-size: 13px !important;
    margin-top: 10px;
    line-height: 1.5 !important;
    letter-spacing: 2.56px !important;
    /* 1行を超えたら … で省略（ユーザー指示 2026-06-01）。 */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* news アーカイブ専用: タイトルは2行にせず1行で … 省略（ユーザー指示 2026-05-31）。
     上の .site-main .news-item__title(0,3,0 !important) と同詳細度・後勝ちで上書き。
     width:100%+min-width:0 で箱を親幅に固定しないと … が画面右端の外に出る。 */
  .has-2026-template .news-list--archive .news-item__title {
    display: block !important;
    width: 100% !important;
    /* 親(リンク/リスト)が横オーバーフローで viewport より広いため、
       viewport 基準で上限を掛けて … を画面内に収める（左5% + 右余白ぶん 約40px 控除）*/
    max-width: calc(100vw - 40px) !important;
    min-width: 0 !important;
    box-sizing: border-box;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* SP では矢印は非表示 */
  .has-2026-template .news-item__arrow {
    display: none !important;
  }
  /* view more ボタンは右寄せ（共通 .btn--clear ルールで形は揃う） */
  .has-2026-template .news-cta {
    margin-top: 32px;
    justify-content: flex-end;
  }

  /* ========== MEDIA ========== */
  /* 左 5% を section-media 自体に持たせる → translateX で動く .media-grid 側は左端=section内側0
     → スクロール中も画面左 5% は常に空く（透ける見え方） */
  .has-2026-template .section-media {
    padding: 80px 0 80px 5%;
    overflow: hidden;
  }
  /* eyebrow は section-media の padding-left: 5% で既に左寄せ済 → 自前の padding は 0 */
  .has-2026-template .section-media .section-eyebrow {
    padding: 0;
    margin-bottom: 40px;
  }
  /* media-inner 自体は max-width / margin auto を解除して section の幅に追従させる */
  .has-2026-template .media-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .has-2026-template .media-grid {
    grid-template-columns: none;
    display: flex;
    width: max-content;
    gap: 16px;
    padding-left: 0;                        /* 左 5% は親 section-media が確保 → スクロール中も維持 */
    animation: media-marquee-scroll 40s linear infinite;
  }
  .has-2026-template .media-card {
    width: 160px;                           /* 390px 画面で 1枚目フル + 2枚目フル + 3枚目チラ見え */
  }
  .has-2026-template .media-card__visual {
    width: 160px;
    height: 210px;                          /* PCのアスペクト比 252:330 を維持（160×1.31）*/
    border-radius: 2px;
  }
  /* キャプションは中央寄せ（Figma準拠） */
  .has-2026-template .media-card__caption {
    align-items: center;
    text-align: center;
    gap: 4px;
  }
  .has-2026-template .site-main .media-card__title {
    font-size: 14px;
    letter-spacing: 1.12px;
    line-height: 1.5;
  }
  .has-2026-template .site-main .media-card__subtitle {
    font-size: 12px;
    letter-spacing: 0.96px;
    line-height: 1.5;
  }
  @keyframes media-marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  /* ========== CONTENTS ========== */
  .has-2026-template .section-contents {
    padding: 80px 5%;                      /* 40px → 5% */
  }
  .has-2026-template .contents-grid {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 20px;
  }

  /* ========== BRAND（page-brand-2026）==========
     PC HTML 構造（.brand-*）に対する SP override。
     Downloads brand_sp.html のレイアウトを 1 ソースで再現。 */

  /* SP は背景画像なし、全面ホワイト（PC は page-brand.css 側で head-back.webp） */
  .has-2026-template .site-main.page-brand {
    background: #ffffff;
  }

  /* パンくずは SP 非表示（Downloads SP 仕様） */
  .has-2026-template .brand-pankuzu {
    display: none;
  }

  /* HERO: SP は画像のみ（テキスト/ボタン非表示）、aspect-ratio で高さ可変 */
  .has-2026-template .brand-hero {
    height: auto;
    aspect-ratio: 390 / 592;
  }
  .has-2026-template .brand-hero .content {
    display: none;
  }
  .has-2026-template .brand-hero .bg img {
    object-position: 70% center;
  }

  /* BRAND MESSAGE: closing を body の前に（Downloads SP の lead 位置） */
  .has-2026-template .brand-message {
    padding: 100px 5% 0;
  }
  .has-2026-template .brand-message .inner {
    padding: 0;
    gap: 40px;
  }
  .has-2026-template .brand-message .label {
    font-size: 20px;
    letter-spacing: 3.2px;
  }
  .has-2026-template .brand-message .heading {
    font-size: 36px;
    letter-spacing: 5.76px;
    line-height: 1.2;
  }
  .has-2026-template .brand-message .heading-en {
    margin-top: 8px;
    font-size: 16px;
    line-height: 2.5;
  }
  .has-2026-template .brand-message .closing {
    order: 0;
    font-size: 20px;
    letter-spacing: 1.4px;
    line-height: 1.875;
  }
  .has-2026-template .brand-message .body {
    order: 1;                 /* closing(order:0)より後 → label,heading,closing,body */
    width: 100%;
    font-size: 14px;
    letter-spacing: 2.24px;
    line-height: 1.93;
  }

  /* CONCEPT: 縦並び */
  .has-2026-template .brand-concept {
    padding: 80px 5% 100px;
  }
  .has-2026-template .brand-concept .inner {
    flex-direction: column;
    padding: 0;
    gap: 80px;
  }
  .has-2026-template .brand-concept .image {
    flex: 0 0 auto;
    width: 100%;
  
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .has-2026-template .brand-concept .text {
    max-width: 100%;
    gap: 20px;
  }
  .has-2026-template .brand-concept .heading {
    font-size: 20px;
    letter-spacing: 1.4px;
    line-height: 1.875;
  }
  .has-2026-template .brand-concept .body {
    font-size: 14px;
    letter-spacing: 2.24px;
    line-height: 1.93;
  }
  .has-2026-template .brand-concept .body p {
    margin-bottom: 0;
  }
  .has-2026-template .brand-concept .body p + p {
    margin-top: 20px;
  }

  /* SPECIAL INTERVIEW: 高さ縮小・テキスト白フチ・ボタン円形化 */
  .has-2026-template .brand-interview {
    height: auto;
    aspect-ratio: 1170 / 732;          /* sp_3.webp の実比率に一致（cover クロップ解消）*/
  }
  .has-2026-template .brand-interview .content {
    position: absolute;
    inset: 0;
    max-width: none;
    padding:5%;
    justify-content: space-between;
    gap: 0;
    pointer-events: none;
  }
  .has-2026-template .brand-interview .heading {
    font-size: 20px;
    letter-spacing: 5.12px;
    line-height: 1.3;
    text-shadow: 0 0 24px #fff, 0 0 10px #fff;
  }
  .has-2026-template .brand-interview .heading p + p {
    margin-top: 0;
  }
  .has-2026-template .brand-interview .sub {
    margin-top: 5%;
    font-size: 13px;
    letter-spacing: 1.4px;
    line-height: 1.8;
    text-shadow: 0 0 18px #fff, 0 0 6px #fff;
  }
  .has-2026-template .brand-interview .btn-special--dark {
    align-self: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    width: 90px;
    height: 90px;
    padding: 0;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background: transparent;
    color: var(--color-accent);
    font-size: 13px;
    letter-spacing: 0.65px;
    line-height: 1.4;
    text-align: center;
    pointer-events: auto;
    box-shadow: none;
    position: absolute;
    border: 5%;
    top: 58%;
  }
  .has-2026-template .brand-interview .btn-special--dark:hover {
    background: var(--color-accent);
    color: var(--color-white);
    opacity: 1;
  }
  /* SP: 中身を全部隠して SVG 画像 (sp-spbtn.svg) だけを表示する。
     既存の丸ボタン枠 (border/border-radius) も解除（画像自体がボタンデザインを持つ） */
  .has-2026-template .brand-interview .btn-special--dark .btn-special__label-pc,
  .has-2026-template .brand-interview .btn-special--dark .btn-special__label-sp,
  .has-2026-template .brand-interview .btn-special--dark .arrow {
    display: none !important;
  }
  .has-2026-template .brand-interview .btn-special--dark {
    width: auto;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .has-2026-template .brand-interview .btn-special--dark .btn-special__sp-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
  }

  /* INGREDIENTS: SP は Swiper（slidesPerView 1.8 / 左 5% 余白で 2 枚目チラ見せ） */
  .has-2026-template .brand-ingredients {
    padding: 80px 0 40px;
    overflow: hidden; /* Swiper の slidesOffsetAfter / 2枚目チラ見せが body にはみ出して横ブレするのを防ぐ */
  }
  .has-2026-template .brand-ingredients .inner {
    padding: 0 0 0 5%;
    gap: 30px;
  }
  .has-2026-template .brand-ingredients .label {
    font-size: 24px;
    letter-spacing: 3.84px;
  }
  .has-2026-template .brand-ingredients .cards {
    gap: 0;
    flex-wrap: nowrap;
    overflow: visible;
  }
  .has-2026-template .brand-ingredients .cards.swiper {
    width: 100%;
    overflow: visible;
    padding-right: 0;
  }
  .has-2026-template .brand-ingredients .cards.swiper .swiper-slide {
    height: auto;
  }
  .has-2026-template .ingredient-card {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 20px 16px;
    gap: 28px;
    box-sizing: border-box;
  }
  .has-2026-template .ingredient-card .head {
    align-items: flex-start;
    gap: 8px;
  }
  .has-2026-template .ingredient-card .num {
    font-size: 28px;
    letter-spacing: 1.4px;
  }
  .has-2026-template .ingredient-card .product {
    flex: 1;
    font-size: 8px;
    letter-spacing: 0.64px;
    text-align: left;
  }
  .has-2026-template .ingredient-card .pic {
    width: 152px;
    height: 114px;
    max-width: 100%;
  }
  .has-2026-template .ingredient-card .summary {
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 16px;
  }
  .has-2026-template .ingredient-card .arrow {
    right: 17px;
    bottom: 13px;
  }

  /* ========== FOOTER ========== */
  .has-2026-template .site-footer__top {
    padding: 40px 5% 80px;
    gap: 40px;
  }
  .has-2026-template .site-footer__heading {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1.92px;
    line-height: 18.6px;
  }
  .has-2026-template .site-footer__cta-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    width: 100%;
  }
  .has-2026-template .site-footer-cta {
    flex: 1 1 0;                        /* 2枚を gap 込みで完全等分 */
    min-width: 0;
    max-width: 150px;                   /* 参考画像のカード上限サイズ */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 120px;                      /* 高さ固定で2枚必ず同寸（aspect-ratio は flex 内で不安定だったため） */
    gap: 10px;
    padding: 16px;
    border-width: 1px;
  }
  .has-2026-template .site-footer-cta__icon {
    width: 20px;
    height: 20px;
  }
  /* ラベルは Downloads .support-card h3（Work Sans 16px / accent / 2.56px）に合わせる */
  .has-2026-template .site-footer-cta__label {
    font-family: var(--font-en-btn);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2.56px;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-accent);
  }
  /* 矢印は Downloads .support-card .arrow（16x16 丸枠 + 中 chevron）に合わせる */
  .has-2026-template .site-footer-cta__arrow {
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    -webkit-mask: none;
            mask: none;
    position: relative;
  }
  .has-2026-template .site-footer-cta__arrow::before {
    content: "";
    width: 5px;
    height: 8px;
    background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' fill='none'><path d='M1 1L4 4L1 7' stroke='black' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8' fill='none'><path d='M1 1L4 4L1 7' stroke='black' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  }

  /* SP: --svg ボタンは Frame.svg / Frame-1.svg (150x120) がボタン丸ごとを描画するので、
     SP CTA 共通の枠/padding/列構造/固定高さを解除し、SVG だけを 150x120 で表示する。
     ユーザー指示 2026-05-23（PC・SPまとめて SVG 化）。 */
  .has-2026-template .site-footer-cta--svg {
    border: none;
    padding: 0;
    gap: 0;
    flex-direction: row;
    height: auto;
    aspect-ratio: 150 / 120;
  }
  .has-2026-template .site-footer-cta--svg .site-footer-cta__icon,
  .has-2026-template .site-footer-cta--svg .site-footer-cta__label,
  .has-2026-template .site-footer-cta--svg .site-footer-cta__arrow {
    display: none;
  }
  .has-2026-template .site-footer-cta--svg .site-footer-cta__svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .has-2026-template .site-footer__bottom {
    padding: 100px 0 140px !important;
  }
  /* SP: すべて中央寄せ。PC の grid-template-areas を打ち消し。
     要素間は Downloads footer の不均一マージン（logo↓40 / social↓60 / links↓16）に合わせる
     （均一 gap だと Downloads とリズムが変わりバランスが崩れるため） */
  .has-2026-template .site-footer__bottom-inner {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 0;
    text-align: center;
    padding: 0;
  }
  .has-2026-template .site-footer__logo {
    margin-bottom: 40px;
  }
  .has-2026-template .site-footer__logo img {
    width: 200px;
    height: auto;
  }
  .has-2026-template .site-footer__sns {
    gap: 44px;
    margin-bottom: 60px;
  }
  .has-2026-template .site-footer__sns a {
    width: 40px;
    height: 40px;
  }
  .has-2026-template .site-footer__sns-icon {
    width: 28px;
    height: 28px;
  }
  .has-2026-template .site-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 16px;
  }
  .has-2026-template .site-footer__links a {
    font-size: 12px;
    letter-spacing: 2.4px;
    font-weight: 500;
  }
  .has-2026-template .site-footer__copy {
    font-size: 12px;
    letter-spacing: 1.2px;
    line-height: 1.4;
  }

  /* ========== FLOATING LINE (旧テーマの公式LINEバッジ) ========== */
  /* 既存テーマ要素は触らない方針なので skip */

  /* ========== INTERVIEW（page-interview.php）==========
     reference: /Users/setsuko/Downloads/interview_sp.html（SP の正）。
     PC（interview_pc.html）とは SP の設計が根本的に異なるため、ここで
     SP 専用構造へ完全に上書きする:
       - FV 背景を position:fixed のパララックスにし、白の後続コンテンツが
         上にスクロールインする（.interview-fv__spacer が高さ確保）
       - FV テキストは縦書き回転（.interview-fv__vtext）
       - PC 専用要素（.interview-fv__text / .interview-video__logo /
         .interview-pankuzu）は SP 非表示
       - BRAND MESSAGE（SP 専用セクション）を表示
       - 虹色 back.webp は SP では不使用（白の scroll-content）
     横幅は sp-responsive-width.md 準拠（セクション左右 5% / 相対）。
     LINE UP は「TOP の section-lineup 流用（DRY・5商品）」を維持する方針のため
     共通 .has-2026-template .section-lineup ルールをそのまま使う
     （interview_sp.html の独自4商品カードは再現しない。意図的逸脱：
       tasks/decisions/2026-05-19.md 参照）。 */

  /* 本文オフセット解除（SP ヘッダは absolute/透明オーバーレイ） */
  /* ベース背景を白に統一（FV 固定画像の周辺・セクション隙間が
     #e8e6e3 や透明で見えるのを白で塗りつぶす）。固定 FV (.interview-fv__bg)
     は z-index:0 / position:fixed で body より上に描画されるため隠れない。 */
  body.is-interview-2026 {
    padding-top: 0;
    background: #ffffff;
  }
  .has-2026-template .page-interview {
    padding-top: 0;
  }

  /* PC 専用要素を SP 非表示 */
  .has-2026-template .interview-pankuzu,
  .has-2026-template .interview-fv__text,
  .has-2026-template .interview-video__logo {
    display: none;
  }

  /* SP 専用要素を表示（page-interview.css の display:none を上書き） */
  .has-2026-template .interview-fv__sp-overlay {
    display: flex;
  }
  .has-2026-template .interview-fv__spacer {
    display: block;
  }
  .has-2026-template .interview-brand-message {
    display: flex;
  }

  /* FV: 背景を固定パララックス化（reference .fv-bg） */
  .has-2026-template .interview-fv {
    position: static;
    min-height: 0;
    padding: 0;
    overflow: visible;
    background: #ffffff;
  }
  .has-2026-template .interview-fv__bg {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    aspect-ratio: 39 / 57;
    height: auto;
    overflow: hidden;
    z-index: 0;
    background: #ffffff;
    pointer-events: none;
  }
  .has-2026-template .interview-fv__bg::after {
    display: none;
  }
  .has-2026-template .interview-fv__bg picture,
  .has-2026-template .interview-fv__bg img {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    object-position: 82% center;
  }

  /* FV 縦書きオーバーレイ（reference .fv-overlay） */
  .has-2026-template .interview-fv__sp-overlay {
    position: absolute;
    /* top:74px = SP 共通ヘッダ（_sp.css .site-header__inner padding 24px+内容+24px）
       の実描画高さのクリアランス。reference interview_sp.html .fv-overlay と同値。
       PC の --header-height(110px) とは別物なので CSS 変数化しない（SP は header:auto）。 */
    inset: 74px 0 0 0;
    padding: 46px 5%;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    pointer-events: none;
  }
  .has-2026-template .interview-fv__vtext-wrap {
    position: relative;
    width: 70px;
    height: 190px;
  }
  .has-2026-template .interview-fv__vtext {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    white-space: nowrap;
    transform-origin: 0 0;
    transform: translateX(70px) rotate(90deg);
    font-family: var(--font-jp-heading);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 4.16px;
    line-height: 35px;
    color: var(--color-text);
    text-shadow: 0 0 70px #fff;
    font-feature-settings: 'pwid' 1, 'halt' 1;
  }
  .has-2026-template .interview-fv__vtext .vt-special {
    color: var(--color-accent);
  }
  .has-2026-template .interview-fv__sp-ambassador {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    font-family: var(--font-jp-base);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.96px;
    line-height: 18px;
    color: var(--color-text);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.65);
  }
  .has-2026-template .interview-fv__sp-ambassador p {
    margin: 0;
  }
  .has-2026-template .interview-fv__sp-ambassador .name {
    margin-top: 18px;
  }

  /* スクロール用スペーサー（reference .fv-spacer。固定FVと同じ高さ） */
  .has-2026-template .interview-fv__spacer {
    position: relative;
    z-index: 1;
    width: 100%;
    aspect-ratio: 39 / 57;
    pointer-events: none;
  }

  /* 後続コンテンツ＝白の scroll-content（固定FVの上に被さる）。
     interview-brand-message / interview-middle は INTERVIEW 専属クラスで安全。
     .section-lineup は TOP/BRAND と共有のため body.is-interview-2026 で
     INTERVIEW に限定し、未目視 TOP/BRAND SP への z-index/背景漏れを防ぐ。 */
  .has-2026-template .interview-brand-message,
  .has-2026-template .interview-middle,
  body.is-interview-2026 .section-lineup {
    position: relative;
    z-index: 2;
    background: var(--color-white);
  }
  /* page-interview.css の back.webp shorthand 指定を SP で確実に無効化
     （上の background shorthand でリセット済だが意図を明示する防御的宣言）。 */
  .has-2026-template .interview-middle {
    background-image: none;
  }
  body.is-interview-2026 .site-footer {
    position: relative;
    z-index: 2;
  }

  /* 共通セクションタイトル（reference .section-title。Copperplate 20px 赤） */
  .has-2026-template .interview-section-title,
  .has-2026-template .interview-body__title {
    font-family: var(--font-en-heading);
    font-size: 20px;
    font-weight: 400;
    color: var(--color-accent);
    letter-spacing: 3.2px;
    line-height: 1;
    text-transform: uppercase;
  }

  /* BRAND MESSAGE（SP 専用・reference .brand-message） */
  .has-2026-template .interview-brand-message {
    flex-direction: column;
    gap: 40px;
    padding: 80px 5%;
  }
  .has-2026-template .interview-brand-message > div {
    display: block;
  }
  .has-2026-template .interview-brand-message__heading {
    margin: 0;
    font-family: var(--font-jp-heading);
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 5.12px;
    line-height: 1.4;
    font-feature-settings: 'pwid' 1, 'halt' 1;
  }
  .has-2026-template .interview-brand-message__heading .accent {
    color: var(--color-accent);
  }
  .has-2026-template .interview-brand-message__heading-en {
    margin: 8px 0 0;
    font-family: var(--font-jp-heading);
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 1.28px;
    line-height: 1.6;
  }
  .has-2026-template .interview-brand-message__lead {
    margin: 0;
    font-family: var(--font-jp-heading);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 1.4px;
    line-height: 1.875;
  }
  .has-2026-template .interview-brand-message__body {
    margin: 0;
    font-family: var(--font-jp-heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 2px;
    line-height: 1.93;
    white-space: pre-line;
  }

  /* VIDEO セクション本体は SP で非表示。動画 wrap は brand-message__video へ
     移動済（ユーザー指示 2026-05-25）。PC は section-video.php 側で従来表示。 */
  .has-2026-template .interview-video {
    display: none;
    padding: 40px 5%;
    justify-content: center;
  }
  .has-2026-template .interview-video__intro {
    width: 100%;
    max-width: 100%;
    gap: 0;
  }
  .has-2026-template .interview-video__wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 311 / 175;
    overflow: hidden;
  }
  .has-2026-template .interview-video__placeholder {
    aspect-ratio: 311 / 175;
    background: #d9d9d9;
    border: none;
    border-radius: 0;
  }
  .has-2026-template .interview-video__placeholder-label {
    font-size: 20px;
    letter-spacing: 3px;
    color: var(--color-text-sub);
  }

  /* INTERVIEW 本文（reference .interview / .qa-*。内容は PC と同一、SP 余白に調整） */
  .has-2026-template .interview-body {
    padding: 80px 5% 160px;
    gap: 80px;
  }
  .has-2026-template .interview-body__text {
    font-family: var(--font-jp-heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text);
    letter-spacing: 1.54px;
    line-height: 1.93;
  }
  .has-2026-template .interview-body__text p {
    margin: 0 0 28px;
    line-height: 1.93;
  }
  .has-2026-template .interview-body__text p.spacer {
    display: none;
  }
  .has-2026-template .interview-body__text p:last-child {
    margin-bottom: 0;
  }
  .has-2026-template .interview-body__image {
    aspect-ratio: 1/1;
    overflow: hidden;
  }
  .has-2026-template .interview-body__image picture,
  .has-2026-template .interview-body__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* =========================================================
     SHOHIN 2026 — SP レイアウト
     対象: body.is-shohin-2026
     参考: Figma 7795:6241 (ns商品詳細 SP 390x7538)
     方針: 横幅は sp-responsive-width.md 準拠（セクション左右 5%）
           REVIEW は Figma SP に存在しないため display:none
     ========================================================= */

  /* STEP の横スクロール内のカードが body の幅を広げないよう、
     ページ全体に overflow-x: hidden を掛ける（SP のみ）。 */
  body.is-shohin-2026 {
    overflow-x: hidden;
    /* SP は他の2026ページと同じく「透明ヘッダー初期→スクロール赤」に揃える。
       PC では body.is-shohin-2026 で padding-top と赤固定が掛かるが、
       SP のみここで撤去し FV 画像がヘッダー透明オーバーレイの下に潜るレイアウトへ。
       ユーザー指示 2026-05-24。 */
    padding-top: 0;
  }
  body.is-shohin-2026 .site-header {
    background: transparent;
    box-shadow: none;
  }
  /* スクロール時は赤背景（specificity を合わせるため body.is-shohin-2026 を頭につける） */
  body.is-shohin-2026 .site-header.is-scrolled {
    background: var(--color-accent);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  }

  /* ---- REVIEW セクション SP 表示（ユーザー指示 2026-05-30: カードデザインを
       「こんな方におすすめ」の上に表示）。order は §並び替えで review=3 を指定。 ---- */
  .is-shohin-2026 .shohin-review {
    display: flex;
    padding: 40px 0px;   /* SP: 横 padding 0（ユーザー指示 2026-05-30）。カードは swiper の padding-left:5% で寄せる */
  }
  /* SP: REVIEW タイトルだけ 90% 幅で中央寄せ＝左端をカード(5%)に揃える（ユーザー指示 2026-05-30） */
  .is-shohin-2026 .shohin-review__heading {
    width: 90%;
    margin: auto;
  }
  /* SP カルーセル: 1 枚＋次カードの 1/3 表示（JS slidesPerView:1.33）。
     最初の左だけ 5% 空け、右はカードが画面端まで延びて 1/3 が覗く。
     PC の margin-right:-80px は SP では打ち消す（ユーザー指示 2026-05-30）。 */
  .is-shohin-2026 .shohin-review__grid--swiper {
    margin-right: 0;
    padding-left: 5%;
  }
  /* SP: write a review ボタンを右端から 5% 空ける（ユーザー指示 2026-05-30） */
  .is-shohin-2026 .shohin-review__actions {
    padding-right: 5%;
  }
  /* SP: レビューのページネーション（ドット）＋左右ボタン非表示（ユーザー指示 2026-05-30）。
     操作はスワイプのみ。 */
  .is-shohin-2026 .shohin-review__grid--swiper .swiper-pagination,
  .is-shohin-2026 .shohin-review__grid--swiper .swiper-button-prev,
  .is-shohin-2026 .shohin-review__grid--swiper .swiper-button-next {
    display: none;
  }
  /* SP カード内: 1.33 枚幅だと PC の padding 60px / body 20px は窮屈なので調整
     （ユーザー指示 2026-05-30 添付モック準拠）。 */
  .is-shohin-2026 .shohin-review__card {
    padding: 32px 24px;
    min-height: 0;
    height: 400px;       /* 固定高（ユーザー指示 2026-05-30）。あふれは body 側で ... 省略 */
    gap: 20px;
    overflow: hidden;
  }
  .is-shohin-2026 .shohin-review__name {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .is-shohin-2026 .shohin-review__age {
    font-size: 16px;
    letter-spacing: 2px;
  }
  .is-shohin-2026 .shohin-review__body {
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: 0.5px;
    margin-top: 10px;    /* ★と本文の間（ユーザー指示 2026-05-30） */
    /* 400px 固定カードに入りきらない本文は「...」で省略（ユーザー指示 2026-05-30）。
       flex:1 で残り高さを埋め、その範囲で多行省略する。 */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
  }

  /* ---- FV: PC grid 2-col → SP column stack ---- */
  .is-shohin-2026 .shohin-fv {
    padding: 0;
    gap: 0;
  }
  /* SP では FV の "PRODUCT" 見出しを非表示（ユーザー指示 2026-05-24）。
     画像の上に表示されるとデザイン上違和感がある + Figma SP デザインにも存在しない。 */
  .is-shohin-2026 .shohin-fv__eyebrow {
    display: none;
  }
  .is-shohin-2026 .shohin-fv__body {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    gap: 0;
    padding: 0;
  }

  /* 商品画像: 画面端まで延ばす（Figma 390x524 → aspect-ratio で機種幅に追従） */
  .is-shohin-2026 .shohin-fv__visual {
    width: 100%;
    height: auto;
    padding: 0;
  }
  .is-shohin-2026 .shohin-fv__visual-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 524;
    border-radius: 0;
  }

  /* 商品画像のオーバーレイ丸タグ（ビタミンC/針）は SP では小さく */
  .is-shohin-2026 .shohin-fv__tags {
    left: 5%;
    bottom: 16px;
    gap: 8px;
  }
  .is-shohin-2026 .shohin-fv__tag {
    width: 56px;
    height: 56px;
    font-size: 12px;
  }

  /* ---- SP 限定: 商品サマリー（Figma 7820:2725 準拠） ----
     画像直下にカテゴリー・英語商品名・内容量・説明・注釈を表示。
     タブパネル内の tab__head は SP で非表示にして重複を防ぐ。 */
  .is-shohin-2026 .shohin-fv__summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 5% 24px;
    background: var(--color-white);
  }
  .is-shohin-2026 .shohin-fv__summary-tags {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
  }
  .is-shohin-2026 .shohin-fv__summary-name-en {
    margin: 0;
    font-family: var(--font-en-product);   /* Scheherazade New */
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: 2.8px;
    color: var(--color-accent);
    text-align: left;
    word-break: keep-all;
  }
  .is-shohin-2026 .shohin-fv__summary-name-jp {
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text);
  }
  .is-shohin-2026 .shohin-fv__summary-naiyou {
    margin: -10px 0 0;   /* 日本語名との隙間だけ詰める（gap:16px を相殺） */
    font-family: var(--font-jp-base);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text);
  }
  .is-shohin-2026 .shohin-fv__summary-desc {
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 14.5px;
    line-height: 28px;
    color: var(--color-text);
    text-align: justify;
  }
  .is-shohin-2026 .shohin-fv__summary-note {
    /* SP: 注釈は上部サマリーの説明文の下に表示する（ユーザー指示 2026-06-01）。
       注釈の実体は先頭タブの note（基本タブ=top-img-chui）。 */
    display: block;
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-text-sub);
  }

  /* SP ではタブパネル内の head（タグ・名前・説明）は summary と重複するので非表示 */
  .is-shohin-2026 .shohin-tab__head {
    display: none;
  }
  /* ただしタブ0（default）以外は、タブごとの説明（name_jp + naiyou + desc）を
     金額の下に表示する（ユーザー指示 2026-05-24 再修正）。
     順序（SP のみ）：
       1. price-block（特別価格 / 1,980円 / ※注釈）  ← order 0（DOM順）
       2. name_jp + naiyou（トラベルサイズ　内容量：10日分）
       3. desc（お試しサイズ。初めての方や旅行に。）
     head を flex order: 2 で price-block の後ろに視覚的に押し込む。 */
  /* SP（tab-0 以外）の inner レイアウト：
     main teiki price-block を display:contents で分解し、price-value の直下に head を挿入する。
     順序:
       1. price-label（定期初回価格）
       2. price（2,980 円(税込)）
       3. head（name+naiyou+desc）  ← ユーザー指示 2026-05-24
       4. price-info（説明文）
       5. price-note（注意）
       6. main teiki CTA
       7. 追加 teiki block + CTA（DOM順）
       8. 灰色ボトムは外側にあるので影響なし
     ユーザー指示 2026-05-24 再修正版 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > * {
    order: 10;       /* デフォルトは高めにして、明示ルールで前に持ってくる */
  }
  /* タブ別商品画像（SP・全タブ共通）— 各タブ panel の先頭に表示 */
  .is-shohin-2026 .site-main .shohin-tab__inner > .shohin-tab__visual {
    display: block;
    width: 100%;
    margin: 0 auto 16px;
    text-align: center;
  }
  .is-shohin-2026 .site-main .shohin-tab__inner > .shohin-tab__visual img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 320px;        /* 大きすぎないように制限 */
    margin: 0 auto;
    object-fit: contain;
  }
  /* tab-1+ では先頭（order 0 以下）に来るよう調整 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__visual {
    order: 0;
  }
  /* 主 price-block を flatten（子が inner の flex 子になる）。追加 price-block は flatten しない */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head + .shohin-tab__price-block {
    display: contents;
  }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head + .shohin-tab__price-block > .shohin-tab__price-label { order: 1; }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head + .shohin-tab__price-block > .shohin-tab__price { order: 2; }
  /* head（en/jp 名 + desc）は price-block（label/price/info/note=order1〜5）の
     上＝画像の直後に出す。order:0 で visual(order:0) と同値→ソース順で visual の次に来る。
     ユーザー指示 2026-05-31: 「英語名・日本語名を price-block の上へ」。 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head { order: 0; margin-bottom: 0; }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head + .shohin-tab__price-block > .shohin-tab__price-info { order: 4; }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__inner > .shohin-tab__head + .shohin-tab__price-block > .shohin-tab__price-note { order: 5; }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
  }
  /* head 内のタグ・note は非表示。name_en / name_jp / desc を表示（ユーザー指示 2026-05-31:
     英語名・日本語名を全タブで出す。従来は name_en を隠していた）。 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > * {
    display: none;
  }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > .shohin-tab__name-en {
    display: block;
    margin: 0;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
  }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > .shohin-tab__name-jp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
  }
  /* naiyou は name-jp の外（head 直下）の独立 <p> になったので、head > * の
     display:none を打ち消して block（独立行）で表示する（ユーザー指示 2026-05-31）。 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > .shohin-tab__naiyou {
    display: block;
    color: var(--color-text-sub);
    margin-left: 0;
  }
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > .shohin-tab__desc {
    display: block;
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-text);
    text-align: left;
  }
  /* note（※注釈）は desc の直下に表示（ユーザー指示 2026-05-31）。head > * の display:none を打ち消す。 */
  .is-shohin-2026 .shohin-tab__panel:not([data-tab-panel="tab-0"]) .shohin-tab__head > .shohin-tab__note {
    /* SP は注釈を上部サマリーに出すため、タブ内では非表示（ユーザー指示 2026-06-01）。PC は表示のまま。 */
    display: none;
  }

  /* tab-0（基本タブ）も price-block の上に英語名・日本語名を表示（ユーザー指示 2026-05-31）。
     tab-0 は price-block を flatten していないので inner の flex order を明示し、
     visual → head(名前) → price-block → CTA の順にする。head はタグ・desc・note を隠して
     英語名・日本語名のみ（desc 等は上部サマリーと重複するため出さない）。
     head は order:0 で visual と同値→ソース順で visual の次（価格の前）に来る。 */
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__inner > .shohin-tab__visual { order: 0; }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__inner > .shohin-tab__head { order: 0; }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__inner > .shohin-tab__price-block { order: 1; }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__inner > .shohin-tab__cta { order: 3; }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
    margin: 0;
  }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head > * { display: none; }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head > .shohin-tab__name-en {
    display: block;
    margin: 0;
    text-align: left;
    white-space: normal;
    word-break: keep-all;
  }
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head > .shohin-tab__name-jp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0;
    font-family: var(--font-jp-base);
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text);
  }
  /* 内容量（独立 <p>）も表示。block で名前の下に独立行（ユーザー指示 2026-05-31）。 */
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head > .shohin-tab__naiyou {
    display: block;
    margin: 0;
    font-size: 12px;
    color: var(--color-text-sub);
  }
  /* note（※注釈）も表示（desc の直下。tab-0 は desc 非表示のため名前群の下）。ユーザー指示 2026-05-31。 */
  .is-shohin-2026 .shohin-tab__panel[data-tab-panel="tab-0"] .shohin-tab__head > .shohin-tab__note {
    /* SP は注釈を上部サマリーに出すため、タブ内では非表示（ユーザー指示 2026-06-01）。PC は表示のまま。 */
    display: none;
    margin: 0;
  }

  /* 商品タブ部（タブUI + 価格カード）は SP で 5% 左右余白を確保（ユーザー指示 2026-05-24）。
     画像はフルブリードのまま、価格カード周りだけ画面端から 5% インデント。
     内側の inner/bottom の余白はこの 5% を考慮して調整する（下記）。 */
  .is-shohin-2026 .shohin-fv__product-tab {
    width: 100%;
    max-width: 100%;
    min-width: 0;          /* flex item を内容の最小幅以下にも縮める（狭幅で右にはみ出す事故防止）*/
    padding: 0 5%;
    box-sizing: border-box;
  }

  /* タブボタン列: product-tab の 5% padding を継承するので自身は 0 */
  .is-shohin-2026 .shohin-tab {
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  .is-shohin-2026 .site-main .shohin-tab__btn {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    font-size: 12px;
    padding: 0 4px;
    letter-spacing: 0;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* タブが1個（通常版のみ）の場合は全幅に伸ばさず内容幅に固定し、
     左にタブ・右へパネル上辺の線が伸びる「タブ形状」を維持する。
     （flex:1 1 0 のままだと唯一のタブが横幅100%に広がり線が見えない）
     ユーザー指示 2026-05-29。 */
  .is-shohin-2026 .site-main .shohin-tab__btn:only-child {
    flex: 0 0 auto;
    width: auto;
    min-width: 40%;
    padding: 0 20px;
  }

  /* SP: タブ切替で表示されるパネル全体（inner＋通常購入グレーブロック）を
     PC と同じく 1 枠（濃赤茶 #67000c）で囲む。active タブは底辺 border を消して
     panel の上辺と連結する（PC と同じタブ-バンプ silhouette）。
     旧仕様（border を inner へ移動・グレーを線の外）は廃止。border:none のままだと
     inner からも枠線を外した結果、箱が完全に消える不具合になっていた。
     ユーザー指示 2026-05-31。 */
  .is-shohin-2026 .shohin-tab__panel {
    border: 1px solid #67000c;
    background: var(--color-white);
    overflow: hidden;
    margin-top: -1px;
    min-width: 0;          /* 内容の最小幅で右にはみ出さないよう縮め可に */
    box-sizing: border-box;
  }
  .is-shohin-2026 .shohin-tab__inner {
    /* 枠線は .shohin-tab__panel 側（PC と同じ）に任せる。inner からは外す（ユーザー指示 2026-05-31）。
       これで active パネル全体（inner＋通常購入）を panel の1枠で囲む＝PC と同じ見た目。 */
    background: var(--color-white);
    padding: 32px 16px 24px;
    gap: 16px;
    min-width: 0;          /* CTA 画像等の最小コンテンツ幅で panel を押し広げない */
    box-sizing: border-box;
  }
  /* active タブ底辺の白カバー（PC では panel に対して動作するが、SP は inner に移動したので作り直し） */
  .is-shohin-2026 .site-main .shohin-tab__btn--active::before {
    bottom: -2px;
    z-index: 3;
  }
  .is-shohin-2026 .shohin-tab__head {
    gap: 12px;
    align-items: flex-start;   /* 左寄せ（ユーザー指示 2026-05-31）*/
    text-align: left;
  }
  .is-shohin-2026 .shohin-tab__name-en {
    font-size: 22px;        /* 28px だと長商品名がパネルからはみ出すので縮小 */
    letter-spacing: 1.6px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;     /* 長い名前は折り返し許可 */
    overflow: visible;
    text-overflow: clip;
    word-break: keep-all;
  }
  .is-shohin-2026 .shohin-tab__name-jp {
    justify-content: flex-start;   /* 左寄せ（ユーザー指示 2026-05-31）*/
    font-size: 12px;
    text-align: left;
  }
  .is-shohin-2026 .shohin-tab__naiyou {
    font-size: 12px;
    margin-left: 0;   /* SP は名前との隙間を詰める（ユーザー指示 2026-05-31）。PC は base の 0.4em のまま */
  }
  .is-shohin-2026 .shohin-tab__desc {
    font-size: 14.5px;
    line-height: 28px;
    text-align: justify;
  }
  .is-shohin-2026 .shohin-tab__note {
    text-align: left;
  }

  /* 価格説明文（price-info）の SP スタイル（ユーザー指示 2026-05-31）。 */
  .is-shohin-2026 .shohin-tab__price-info {
    margin: 0;
    text-align: left;
    font-family: var(--font-jp-base);
    font-size: 12px;
    color: var(--color-text-sub);
  }

  /* 価格表示の数字 (88px → SP 56px 程度) */
  .is-shohin-2026 .shohin-tab__price-value {
    font-size: 56px;
  }
  .is-shohin-2026 .shohin-tab__price-yen {
    font-size: 22px;
  }
  .is-shohin-2026 .shohin-tab__price-tax {
    font-size: 16px;
  }

  /* CTA: 画像表示なので幅のみ調整（旧 height/font-size/bg は撤去済） */
  .is-shohin-2026 .shohin-tab__cta {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
  }

  /* セカンダリ通常価格 (パネル下グレー帯) — Figma 7813:8076 準拠の縦2段レイアウト：
       上段: [商品サムネイル] [通常価格ラベル / 4,980円(税込)]  (横並び)
       下段: 通常価格で購入する CTA  (フル幅)
     PC の flex 横一列を grid-template-areas で SP 縦2段に切り替え。
     内側余白 10px はユーザー指示 2026-05-24。 */
  /* Figma 7813:8076 準拠：bg #f1f2f5、items-center で全体中央寄せ、
     image 28×89、価格 56px Scheherazade、ラベル白背景。
     ユーザー指示 2026-05-24: 内部の隙間を縮める */
  .is-shohin-2026 .shohin-tab__bottom {
    display: grid;
    grid-template-areas:
      ". thumb price ."
      "cta cta cta cta";
    grid-template-columns: 1fr auto auto 1fr;  /* 両端1frで上段を中央寄せ・CTAは全幅 */
    grid-template-rows: auto auto;
    justify-content: center;
    justify-items: center;
    column-gap: 12px;             /* 20→12: 画像と価格の隙間縮小 */
    row-gap: 8px;                 /* 16→8: 上段と CTA の隙間縮小 */
    align-items: center;
    /* 通常購入ブロックは panel 枠線の中で 95%幅・中央寄せ・上下10pxの余白を持つ
       インセットカードにする（ユーザー指示 2026-05-31）。 */
    width: 95%;
    margin: 10px auto;
    padding: 12px;                /* 24/16 → 12 全周一律 */
    height: auto;
    min-height: 0;
    background: #f1f2f5;
  }
  /* 連続した灰色ブロック（主＋追加 通常ブロック）同士は密着（枠内で縦に連結）
     ユーザー指示 2026-05-24 / 2026-05-31 */
  .is-shohin-2026 .shohin-tab__bottom + .shohin-tab__bottom {
    margin-top: 0;
  }
  .is-shohin-2026 .site-main .shohin-tab__bottom-thumb {
    display: block;
    grid-area: thumb;
    width: 86px;                  /* ユーザー指示 2026-05-29（旧: 28px）。height は contain で維持 */
    height: 89px;
    object-fit: contain;
    align-self: center;
    max-height: none;
  }
  .is-shohin-2026 .shohin-tab__bottom-price {
    grid-area: price;
    align-items: flex-start;      /* ラベル「通常価格」を価格の左上に配置（参考画像準拠 2026-05-24）*/
    gap: 4px;                     /* Figma: ラベル↔価格 接近させる */
    text-align: left;
  }
  .is-shohin-2026 .shohin-tab__bottom-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }
  .is-shohin-2026 .shohin-tab__bottom-value > span:first-child {
    font-family: var(--font-en-product);  /* Scheherazade New */
    font-size: 56px;                       /* Figma exact */
    line-height: 1;
    color: var(--color-text);
  }
  .is-shohin-2026 .shohin-tab__bottom-unit {
    font-family: var(--font-jp-base);
    font-size: 14px;                       /* 「円(税込)」を一括 14px で簡略表示 */
    line-height: 1.4;
    color: var(--color-text);
    letter-spacing: 0.84px;
  }
  .is-shohin-2026 .shohin-tab__bottom-label {
    height: auto;
    padding: 2px 4px;
    font-size: 12px;
    line-height: 20px;
    background: #fff;             /* Figma: 通常価格ラベルは白背景 */
    color: #8c8c8c;
  }
  .is-shohin-2026 .shohin-tab__cta--secondary {
    grid-area: cta;
    width: 100%;
    max-width: 100%;    /* 上段は image+price 横並び、下段は CTA フル幅 */
    min-width: 0;
    height: auto;
    margin: 0;
  }

  /* ---- HOW TO USE 動画: padding 80px → 5%、frame aspect-ratio ---- */
  .is-shohin-2026 .shohin-how-mv {
    padding: 40px 5%;
    gap: 24px;
  }
  .is-shohin-2026 .shohin-how-mv__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 311 / 175;     /* Figma SP の動画 placeholder 比 */
  }
  .is-shohin-2026 .shohin-how-mv__play {
    width: 48px;
    height: 48px;
  }

  /* ---- 使用方法（HOW TO USE 5ステップ）: padding 80px → 5% ---- */
  .is-shohin-2026 .shohin-how-text {
    padding: 40px 5%;
  }
  .is-shohin-2026 .shohin-how-text__inner {
    max-width: 100%;
    gap: 24px;
  }
  .is-shohin-2026 .site-main .shohin-how-text__heading {
    font-size: 22px;
    line-height: 1.4;
  }
  /* HOW TO USE ステップ一覧: SP では行間を詰める（PC gap 40px → SP 17px）。
     ユーザー指示 2026-05-29。 */
  .is-shohin-2026 .shohin-step-list {
    display: flex;
    flex-direction: column;
    gap: 17px;
  }
  /* HOW TO USE ステップ番号の円: SP では小さく（PC 56×56/28px → SP 30×30/18px）。
     ユーザー指示 2026-05-29。 */
  .is-shohin-2026 .shohin-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #eaecf0;
    color: #8c8c8c;
    border-radius: 50%;
    font-family: var(--font-en-product);
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
  }
  /* タグバッジ（container）を SP では小さく（PC 11px/1px 10px → SP 10px/1px 5px）。
     ユーザー指示 2026-05-29。
     注: LINEUP カードのタグだけは下の専用ルールで 10px/1px 3px に上書き（2026-05-30）。 */
  .single-shohin ul.container-list > li.container {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    font-size: 10px;
    padding: 1px 5px;
  }
  /* 商品詳細 LINEUP カードのタグのみさらに小さく（ユーザー指示 2026-05-30）。
     FV サマリー等 他の container-list には影響しない。 */
  .single-shohin .lineup-card__body ul.container-list > li.container {
    font-size: 10px;
    padding: 1px 3px;
    line-height: 14px;
  }
  /* SP: 商品詳細 LINEUP の見出し〜カード間隔を 40px に（ユーザー指示 2026-05-30）。
     このレイアウトでは見出しの margin-bottom が無視される（検証済み）ため、
     グリッド側に margin-top を当てて間隔を作る。section-lineup--shohin にスコープ。 */
  .is-shohin-2026 .section-lineup--shohin .lineup-grid {
    margin-top: 40px;
  }
  /* FV サマリー（商品名上のタグ: 乳液/美容液 等）は大きめ（ユーザー指示 2026-05-30）。
     specificity を generic(0,3,2) より高く(0,4,2)して勝たせる。 */
  .single-shohin ul.shohin-fv__summary-tags.container-list > li.container {
    font-size: 13px;
    padding: 1px 10px;
  }

  /* ---- DETAIL: 横並び→縦並び、固定px幅を解除 ----
     PC: .shohin-detail__heading margin: 0 80px / __band padding: 80px 80px / __text width: 590px
     SP: 5% padding / band 内 5% / text フルワイド */
  .is-shohin-2026 .shohin-detail {
    padding: 40px 0 0;
    gap: 24px;
  }
  .is-shohin-2026 .site-main .shohin-detail__heading {
    margin: 0 5%;
  }
  .is-shohin-2026 .shohin-detail__band {
    height: auto;
    min-height: 320px;
    padding: 40px 5%;
  }
  .is-shohin-2026 .shohin-detail__text {
    width: 100%;
    margin: 0;
    gap: 20px;
  }
  .is-shohin-2026 .shohin-detail__label,
  .is-shohin-2026 .shohin-detail__name {
    font-size: 22px;
  }
  .is-shohin-2026 .shohin-detail__body {
    font-size: 14.5px;
    line-height: 26px;
  }

  /* ---- セクション順序: SP では shohin-recommend を FV の直下に移動 ----
     （ユーザー指示 2026-05-24: 通常価格ボタンの直下にこんな方におすすめを表示）
     PC は site-main がブロック層なので影響なし。 */
  body.is-shohin-2026 .site-main {
    display: flex;
    flex-direction: column;
    gap: 50px;
  }
  body.is-shohin-2026 .site-main > .shohin-breadcrumb  { order: 1; }
  body.is-shohin-2026 .site-main > .shohin-fv          { order: 2; }
  body.is-shohin-2026 .site-main > .shohin-review      { order: 3; }  /* ← FV の直下（こんな方におすすめ の上）。ユーザー指示 2026-05-30 */
  body.is-shohin-2026 .site-main > .shohin-recommend   { order: 4; }
  body.is-shohin-2026 .site-main > .shohin-how-text    { order: 9; }
  body.is-shohin-2026 .site-main > .shohin-detail      { order: 5; }
  body.is-shohin-2026 .site-main > .shohin-point       { order: 6; }
  body.is-shohin-2026 .site-main > .shohin-ingredients { order: 7; }
  body.is-shohin-2026 .site-main > .shohin-flow        { order: 8; }
  body.is-shohin-2026 .site-main > .shohin-lineup      { order: 10; }

  /* SP のみ DETAIL セクションを非表示（ユーザー指示 2026-05-24） */
  body.is-shohin-2026 .site-main > .shohin-detail { display: none; }

  /* ---- RECOMMEND（こんな方におすすめ）---- */
  /* PC: padding 80px 80px 80px 240px → 240px 左寄せが SP で見出しを画面外へ追いやる */
  .is-shohin-2026 .shohin-recommend {
    padding: 40px 5%;
    gap: 16px;
  }
  .is-shohin-2026 .shohin-recommend__heading {
    width: auto;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
  }
  .is-shohin-2026 .shohin-recommend__list {
    gap: 16px;
  }
  .is-shohin-2026 .shohin-recommend__list li {
    font-size: 14px;
    line-height: 22px;
    padding-left: 22px;
  }
  .is-shohin-2026 .shohin-recommend__list li::before {
    width: 12px;
    height: 12px;
    top: 5px;
  }

  /* ---- POINT: PC grid 600px+490px → SP 1カラム ---- */
  .is-shohin-2026 .shohin-point {
    padding: 24px 5%;
  }
  .is-shohin-2026 .shohin-point__row {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 16px;
    align-items: stretch;
  }
  /* Figma 仕様: SP は head(label+num+lead) -> visual -> body の順 */
  .is-shohin-2026 .shohin-point__row > .shohin-point__text {
    display: contents;
  }
  .is-shohin-2026 .shohin-point__text > .shohin-point__head { order: 1; }
  .is-shohin-2026 .shohin-point__row > .shohin-point__visual { order: 2; }
  .is-shohin-2026 .shohin-point__row > .shohin-free-grid { order: 2; }
  .is-shohin-2026 .shohin-point__text > .shohin-point__body { order: 3; }

  /* SP のみ: head 内を flex 2列に。左カラム __head-num (Point+番号 縦並び)、右カラム __lead。
     lead が複数行になっても __head-num 内の間隔は line-height: 1 で固定される。 */
  .is-shohin-2026 .shohin-point__head {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .is-shohin-2026 .shohin-point__head > .shohin-point__head-num {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
  }
  .is-shohin-2026 .shohin-point__head-num > .shohin-point__label,
  .is-shohin-2026 .shohin-point__head-num > .shohin-point__num {
    margin: 0;
    line-height: 1;
  }
  .is-shohin-2026 .shohin-point__head > .shohin-point__lead {
    flex: 1 1 auto;
    margin: 0;
  }
  .is-shohin-2026 .shohin-point__row--flip {
    grid-template-columns: 1fr;
  }
  /* SP では __row が flex column になり、order は __head/__visual/__body の新ルールで統一管理。
     --flip 用の order 打ち消しは不要のため削除済 (2026-05-24) */
  /* Point 05 (7つのフリー処方): PC は 400px+1fr / gap 100 / padding 80 160 → SP 縦 1fr */
  .is-shohin-2026 .shohin-point__row--free {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0;
  }
  .is-shohin-2026 .shohin-point__visual {
    width: 100%;
    height: auto;
    aspect-ratio: 330 / 214;
  }
  .is-shohin-2026 .shohin-point__label {
    font-size: 14px;
    line-height: 1.3;
  }
  .is-shohin-2026 .shohin-point__num {
    font-size: 28px;
  }
  .is-shohin-2026 .shohin-point__lead {
    font-size: 16px;
    line-height: 1.5;
  }
  .is-shohin-2026 .shohin-point__body {
    font-size: 13px;
    line-height: 22px;
  }
  /* 7つのフリー処方: 4×140 → 4×1fr で 4列維持しつつ画面幅追従、円サイズ縮小 */
  .is-shohin-2026 .shohin-free-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .is-shohin-2026 .shohin-free-grid__item {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    font-size: 11px;
    line-height: 1.3;
  }

  /* ---- INGREDIENTS（全成分アコーディオン）---- */
  /* PC: margin 80px 152px 0 → SP は左右マージン 5% */
  .is-shohin-2026 .shohin-ingredients {
    margin: 40px 5% 0;
    padding: 0;
  }
  .is-shohin-2026 .shohin-ingredients__toggle {
    padding: 20px 16px;
    font-size: 14px;
    /* ラベル「全成分」は左・矢印「>」は右（space-between を維持）。
       中央寄せにすべきは「ボックス自体」であってラベルではない（ユーザー指示 2026-05-29、画像確認）。 */
  }
  .is-shohin-2026 .shohin-ingredients__icon {
    font-size: 22px;
  }
  /* 全成分の「>」矢印を SP では細く（ユーザー指示 2026-05-29、PC 20×38 → SP 9×23）*/
  .is-shohin-2026 .shohin-ingredients__icon img {
    display: block;
    width: 9px;
    height: 23px;
  }
  .is-shohin-2026 .shohin-ingredients__body {
    padding: 0 16px 20px;
    font-size: 12px;
    line-height: 1.7;
    /* 親 .shohin-ingredients の text-align:center を継承して中央寄りになるため、
       本文は左寄せに戻す（ユーザー指示 2026-05-29）。 */
    text-align: left;
  }

  /* ---- breadcrumb: SP 商品詳細トップでは非表示（ユーザー指示 2026-05-24）---- */
  .is-shohin-2026 .shohin-breadcrumb {
    display: none;
  }

  /* ---- STEP: PC 6カード横並び → SP 横スクロール ---- */
  .is-shohin-2026 .shohin-flow {
    padding: 40px 0;
    overflow: hidden;
  }
  .is-shohin-2026 .shohin-flow__heading {
    padding: 0 5%;
  }
  .is-shohin-2026 .shohin-flow__grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    /* 横スクロールの flex コンテナに inline padding を付けると末尾(右)側の
       padding が無視され、スクロール末尾でカードが右端にくっつく（左右が切れる）。
       inline padding は撤去し、両端 5% ガターは先頭 margin と末尾スペーサーで確保する。
       ユーザー指示 2026-05-29。 */
    padding: 20px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 5%;   /* スナップ時も先頭から 5% を保つ */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .is-shohin-2026 .shohin-flow__grid::-webkit-scrollbar {
    display: none;
  }
  /* 先頭カードの左ガター（5%）*/
  .is-shohin-2026 .shohin-flow__grid > .shohin-flow__card:first-child {
    margin-left: 5%;
  }
  /* 末尾ガター（5%）: 実体スペーサーで確保。gap 12px ぶんを差し引いて実効 5% に */
  .is-shohin-2026 .shohin-flow__grid::after {
    content: "";
    flex: 0 0 calc(5% - 12px);
  }
  .is-shohin-2026 .shohin-flow__card {
    flex: 0 0 auto;
    width: 140px;
    scroll-snap-align: start;
  }
  /* STEP ページネーション（ドット）— JS が枚数分生成。ユーザー指示 2026-05-29。 */
  .is-shohin-2026 .shohin-flow__pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 0 5%;
  }
  .is-shohin-2026 .site-main .shohin-flow__pager-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #d0d0d0;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .is-shohin-2026 .site-main .shohin-flow__pager-dot.is-active {
    background: var(--color-accent);
    transform: scale(1.15);
  }

  /* ---- LINE UP: PC 3カード横並び → SP 縦並び 1カラム ---- */
  /* カード内も横並びだが SP の幅では body が狭くなりすぎ tag が overflow するので
     画像列を 100px に縮小し body の padding を縮める */
  .is-shohin-2026 .shohin-lineup {
    padding: 40px 5%;
  }
  .is-shohin-2026 .shohin-lineup__heading {
    padding: 0;
  }
  .is-shohin-2026 .shohin-lineup__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .is-shohin-2026 .shohin-lineup-card {
    width: 100%;
    max-width: 100%;
  }
  .is-shohin-2026 .site-main .shohin-lineup-card {
    height: auto;
    min-height: 200px;
    padding: 16px;
  }
  .is-shohin-2026 .shohin-lineup-card__visual {
    flex: 0 0 100px;
    width: 100px;
    height: 180px;
  }
  .is-shohin-2026 .shohin-lineup-card__body {
    height: auto;
    padding: 0 0 0 12px;
    gap: 12px;
  }
  .is-shohin-2026 .shohin-lineup-card__name-en {
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 2px;
  }
  .is-shohin-2026 .shohin-lineup-card__tag {
    font-size: 12px;
    padding: 2px 10px;
  }


  /* SP のみ: LINE ボタンを画面右下にさらに寄せる (24px → 12px) */
  .floating-line {
    right: 12px;
    bottom: 12px;
  }


  /* PC 専用要素を SP で非表示 (utility class) */
  .pc-only { display: none !important; }


  /* SP: MEDIA / CONTENTS セクションを一旦非表示 (ユーザー指示 2026-05-24) */
  .has-2026-template .section-media,
  .has-2026-template .section-banner,
  .has-2026-template .section-contents {
    display: none !important;
  }

  /* SP 商品詳細: WP Customer Reviews の商品名・集計レーティングを非表示
     （ユーザー指示 2026-05-31）*/
  .is-shohin-2026 .wpcr3_item_name,
  .is-shohin-2026 .wpcr3_aggregateRating {
    display: none !important;
  }



}