/* ============================================================
   product-refine.css ― 商品ページの整え
   文字階層・背景・余白・価格カード・ファーストビューの帯
   既存CSSは変更せず、最後に読み込んで上書きします。
   読み込みの1行を外せば元に戻ります。
   ============================================================ */

/* ---- 1. 文字の階層（4段階に統一） ---- */
[data-tone="beige"]{ --t-ink:#3C3530; --t-sub:#6B625D; --t-line:rgba(120,95,88,.18); }

[data-tone="beige"] p,
[data-tone="beige"] li,
[data-tone="beige"] td{
  font-size:clamp(15.5px,1.15vw,18px) !important;
  line-height:2.0 !important;
  color:var(--t-ink) !important;
  letter-spacing:.04em;
}
[data-tone="beige"] .lp-note,
[data-tone="beige"] .note,
[data-tone="beige"] small,
[data-tone="beige"] .plan-tax,
[data-tone="beige"] .plan-ship,
[data-tone="beige"] figcaption{
  font-size:13px !important;
  line-height:1.8 !important;
  color:var(--t-sub) !important;
}
[data-tone="beige"] h3,
[data-tone="beige"] h4{ font-size:clamp(20px,2.2vw,26px) !important; line-height:1.55 !important; color:var(--t-ink) !important; }
[data-tone="beige"] h2{ font-size:clamp(26px,3.4vw,44px) !important; line-height:1.45 !important; color:var(--t-ink) !important; }

/* 本文の1行の長さを制限（PCで35〜42文字） */
[data-tone="beige"] .wrap > p,
[data-tone="beige"] .lp-section-head p,
[data-tone="beige"] .lp-lead,
[data-tone="beige"] .ing-lead{ max-width:720px; margin-left:auto; margin-right:auto; }

/* 明朝は見出しだけ。本文・価格・ボタンはゴシック */
[data-tone="beige"] p,
[data-tone="beige"] li,
[data-tone="beige"] .btn,
[data-tone="beige"] .plan-button,
[data-tone="beige"] .plan-amount,
[data-tone="beige"] .plan-perday{
  font-family:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",sans-serif !important;
}

/* ---- 2. 背景は3種類に（白／パール／サーモン） ---- */
[data-tone="beige"] .section-blue{
  background:linear-gradient(170deg,#FFFDFC 0%,#FAF7F5 60%,#F7F2EF 100%) !important;
  color:var(--t-ink) !important;
}
[data-tone="beige"] .section-blue h2,
[data-tone="beige"] .section-blue .lp-statement,
[data-tone="beige"] .section-blue p{ color:var(--t-ink) !important; }
[data-tone="beige"] .purchase-section{
  background:linear-gradient(160deg,#FFFDFC 0%,#FDF4F1 55%,#F8E5DD 100%) !important;
}

/* ---- 3. 余白の統一 ---- */
[data-tone="beige"] section{ padding-top:clamp(64px,7vw,112px) !important; padding-bottom:clamp(64px,7vw,112px) !important; }
[data-tone="beige"] .lp-hero{ padding-top:0 !important; }

/* ---- 4. ファーストビューの帯：丸アイコンをやめ、数字を主役に ---- */
[data-tone="beige"] .badge-circle{ display:none !important; }
[data-tone="beige"] .badge-stats{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  max-width:980px; margin:46px auto 0 !important;
}
[data-tone="beige"] .badge-stat{
  padding:6px clamp(8px,1.4vw,18px) !important;
  text-align:center;
  border-right:1px solid var(--t-line);
}
[data-tone="beige"] .badge-stat:last-child{ border-right:none; }
[data-tone="beige"] .badge-stat b{
  display:block; margin-bottom:10px;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif !important;
  font-size:clamp(16px,1.5vw,21px) !important;
  font-weight:500 !important;
  color:var(--t-ink) !important;
  letter-spacing:.04em;
}
[data-tone="beige"] .badge-stat span{
  display:block;
  font-size:clamp(12.5px,1vw,14px) !important;
  line-height:1.7 !important;
  color:var(--t-sub) !important;
}
@media(max-width:560px){
  [data-tone="beige"] .badge-stats{ grid-template-columns:1fr !important; gap:0 !important; }
  [data-tone="beige"] .badge-stat{ border-right:none; border-bottom:1px solid var(--t-line); padding:16px 0 !important; }
  [data-tone="beige"] .badge-stat:last-child{ border-bottom:none; }
}

/* ---- 5. ボタン：主と副をはっきり分ける ---- */
[data-tone="beige"] .hero-actions .btn-primary{
  background:#3C3530 !important; color:#FFFDFC !important; border:1px solid #3C3530 !important;
  font-weight:600 !important; font-size:15.5px !important; padding:15px 34px !important;
  box-shadow:0 10px 26px rgba(60,45,40,.18) !important;
}
[data-tone="beige"] .hero-actions .btn-ghost{
  background:transparent !important; color:#3C3530 !important;
  border:1px solid rgba(60,53,48,.4) !important; font-size:15.5px !important; padding:14px 30px !important;
}

/* ---- 6. 価格カードは2列（比較しやすく） ---- */
[data-tone="beige"] .plans-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:24px !important;
  max-width:920px; margin-left:auto; margin-right:auto;
}
@media(max-width:720px){
  [data-tone="beige"] .plans-grid{ grid-template-columns:1fr !important; }
}
[data-tone="beige"] .plan-amount{ font-size:clamp(30px,3.6vw,40px) !important; color:#3C3530 !important; letter-spacing:.02em; }
[data-tone="beige"] .plan-card.featured .plan-inner{ border-color:#3C3530 !important; box-shadow:0 20px 46px rgba(60,45,40,.16) !important; }
[data-tone="beige"] .plan-button{
  background:#3C3530 !important; color:#FFFDFC !important; border-color:#3C3530 !important;
  font-size:15.5px !important; font-weight:600 !important;
}

/* ---- 7. スマホ用の購入バー（js/product-cta.js が生成） ---- */
.nh-buybar{
  position:fixed; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,253,252,.96); border-top:1px solid rgba(120,95,88,.2);
  box-shadow:0 -8px 26px rgba(60,45,40,.1);
  bottom:-140px; transition:bottom .3s ease;
}
.nh-buybar.show{ bottom:0 !important; }
.nh-buybar .nh-price{ flex:1; font-size:13px; line-height:1.5; color:#6B625D; }
.nh-buybar .nh-price b{ display:block; font-size:17px; color:#3C3530; }
.nh-buybar a{
  flex:0 0 auto; padding:12px 22px; border-radius:999px;
  background:#3C3530; color:#FFFDFC !important; text-decoration:none;
  font-size:14.5px; font-weight:600; letter-spacing:.04em;
}
@media(min-width:861px){ .nh-buybar{ display:none !important; } }


/* ---- 8. 品質・医師コメントの面だけ、少し濃いグレージュで締める ---- */
[data-tone="beige"] .section-royal{
  background:linear-gradient(160deg,#F4F0EC 0%,#EBE5DF 58%,#E0D8D0 100%) !important;
  border-top:1px solid rgba(120,95,88,.22);
  border-bottom:1px solid rgba(120,95,88,.22);
}
[data-tone="beige"] .section-royal .eyebrow{ color:#A9856F !important; }
[data-tone="beige"] .section-royal .eyebrow::before{ background:#A9856F !important; }


/* ============================================================
   9. ファーストビュー：左にコピー＋価格＋ボタン／右にモデル写真
   ============================================================ */
[data-tone="beige"] .lp-hero .lp-hero-content{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  align-items:start;
  align-content:start;
  column-gap:clamp(24px,4vw,64px);
  padding-top:clamp(40px,5vw,72px) !important;
  padding-bottom:clamp(40px,5vw,72px) !important;
}
[data-tone="beige"] .lp-hero .lp-hero-content > *{ grid-column:1; }
[data-tone="beige"] .lp-hero .lp-hero-content > .hero-visual{
  grid-column:2 !important; grid-row:1 / span 30 !important;
  margin:0; align-self:center;
}
[data-tone="beige"] .hero-visual img{
  display:block; width:100%; height:auto; border-radius:3px;
  box-shadow:0 0 0 8px #FFFDFC, 0 0 30px 14px rgba(255,255,255,.9),
             0 0 70px 26px rgba(240,207,195,.22), 0 14px 40px rgba(120,95,88,.1);
}
[data-tone="beige"] .hero-visual figcaption{
  margin-top:14px; text-align:right;
  font-size:11.5px !important; color:#8A7E77 !important; letter-spacing:.06em;
}

/* 価格ブロック */
[data-tone="beige"] .hero-offer{
  margin:30px 0 26px; padding:20px 24px;
  max-width:460px;
  background:rgba(255,253,252,.86);
  border:1px solid rgba(120,95,88,.2);
  border-left:3px solid #B07F6E;
}
[data-tone="beige"] .hero-offer-lead{
  margin:0 0 6px !important; font-size:12.5px !important; letter-spacing:.16em;
  color:#B07F6E !important; font-weight:700;
}
[data-tone="beige"] .hero-offer-price{
  margin:0 0 8px !important; font-size:19px !important; color:#3C3530 !important; line-height:1.3 !important;
}
[data-tone="beige"] .hero-offer-price b{
  font-size:clamp(30px,3.4vw,40px); font-weight:600; letter-spacing:.01em;
}
[data-tone="beige"] .hero-offer-price span{ font-size:16px; }
[data-tone="beige"] .hero-offer-note{
  margin:0 !important; font-size:12.5px !important; color:#6B625D !important; line-height:1.7 !important;
}

/* 幅が狭いときは縦並び（写真を先頭に） */
@media(max-width:900px){
  [data-tone="beige"] .lp-hero .lp-hero-content{ display:block; }
  [data-tone="beige"] .hero-visual{ margin:0 0 30px; }
  [data-tone="beige"] .hero-visual figcaption{ text-align:left; }
  [data-tone="beige"] .hero-offer{ max-width:none; }
}


/* ヒーローから移した文章のセクション */
[data-tone="beige"] .hero-story .wrap{ max-width:760px; }
[data-tone="beige"] .hero-story .lp-sub{ font-size:clamp(15.5px,1.15vw,18px) !important; line-height:2.0 !important; }


/* ---- 10. ファーストビューを1画面に収める ---- */
@media(min-width:901px){
  [data-tone="beige"] .lp-hero{ min-height:auto !important; }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:clamp(28px,3vw,52px) !important;
    padding-bottom:clamp(28px,3vw,52px) !important;
  }
  [data-tone="beige"] .lp-hero h1{
    font-size:clamp(30px,3.1vw,44px) !important; line-height:1.4 !important; margin:6px 0 0 !important;
  }
  [data-tone="beige"] .lp-hero .lp-kicker{ margin:0 0 14px !important; }
  [data-tone="beige"] .lp-hero .lp-sub{
    margin-top:18px !important; margin-bottom:0 !important;
    font-size:16px !important; line-height:1.95 !important;
  }
  [data-tone="beige"] .lp-hero .badge-stats{ margin:24px 0 0 !important; max-width:560px; }
  [data-tone="beige"] .lp-hero .badge-stat b{ font-size:17px !important; margin-bottom:6px !important; }
  [data-tone="beige"] .lp-hero .badge-stat span{ font-size:12px !important; }
  [data-tone="beige"] .hero-offer{ margin:22px 0 0 !important; padding:16px 20px; }
  [data-tone="beige"] .hero-actions{ margin-top:20px !important; }
  [data-tone="beige"] .hero-visual figcaption{ margin-top:10px; }
}


/* さらに詰めて、ボタンまで1画面に */
@media(min-width:901px){
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:clamp(20px,2.2vw,36px) !important;
    padding-bottom:clamp(20px,2.2vw,36px) !important;
  }
  [data-tone="beige"] .lp-hero .lp-sub{ margin-top:14px !important; }
  [data-tone="beige"] .lp-hero .badge-stats{ margin-top:18px !important; }
  [data-tone="beige"] .hero-offer{ margin-top:16px !important; padding:14px 18px; }
  [data-tone="beige"] .hero-actions{ margin-top:16px !important; }
}


/* ヒーロー内の3項目は、折り返さない横一列の小さな行に */
@media(min-width:901px){
  [data-tone="beige"] .lp-hero .badge-stats{
    display:flex !important; flex-direction:column; gap:6px;
    max-width:520px; margin-top:18px !important;
  }
  [data-tone="beige"] .lp-hero .badge-stat{
    display:flex; align-items:baseline; gap:12px;
    border:none !important; border-bottom:1px solid rgba(120,95,88,.14) !important;
    padding:7px 0 !important; text-align:left;
  }
  [data-tone="beige"] .lp-hero .badge-stat:last-child{ border-bottom:none !important; }
  [data-tone="beige"] .lp-hero .badge-stat b{
    flex:0 0 auto; min-width:150px; margin:0 !important;
    font-size:14.5px !important; font-weight:600;
    font-family:"Noto Sans JP","Yu Gothic",sans-serif !important;
  }
  [data-tone="beige"] .lp-hero .badge-stat span{
    font-size:12.5px !important; line-height:1.6 !important; text-align:left;
  }
}


/* ヒーロー内の3項目は価格ブロックと重複するため非表示（他の場所では表示のまま） */
[data-tone="beige"] .lp-hero .badge-stats{ display:none !important; }


/* スマホ：写真 → コピー → 価格 → ボタンの順に */
@media(max-width:900px){
  [data-tone="beige"] .lp-hero .lp-hero-content{
    display:flex !important; flex-direction:column;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > .hero-visual{
    order:-1; grid-column:auto !important; margin:0 0 26px !important;
  }
  [data-tone="beige"] .lp-hero .hero-offer{ margin:22px 0 0 !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:20px !important; }
}


/* ============================================================
   11. 日本語の改行を整える（1文字だけの行・変な位置での改行を防ぐ）
   ============================================================ */
[data-tone="beige"] p,
[data-tone="beige"] li,
[data-tone="beige"] td,
[data-tone="beige"] h1,
[data-tone="beige"] h2,
[data-tone="beige"] h3,
[data-tone="beige"] h4,
[data-tone="beige"] .lp-statement,
[data-tone="beige"] .ing-h3{
  word-break:normal !important;
  overflow-wrap:normal !important;
  line-break:strict !important;          /* 句読点や小書き文字で不自然に切らない */
  text-wrap:pretty;                      /* 最終行が1文字だけになるのを防ぐ */
  hanging-punctuation:allow-end;
}

/* ============================================================
   12. 2種類のエラスチン（×バッジ）の重なりを解消
   ============================================================ */
@media(min-width:901px){
  [data-tone="beige"] .split{ position:relative; column-gap:clamp(120px,13vw,190px) !important; }
  [data-tone="beige"] .hybrid-x-badge{
    position:absolute !important;
    left:50% !important; top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:clamp(150px,13vw,190px) !important;
    margin:0 !important; padding:16px 10px !important;
    text-align:center !important;
    background:rgba(255,253,252,.96);
    border-radius:999px;
    box-shadow:0 0 0 10px rgba(255,253,252,.96), 0 10px 30px rgba(120,95,88,.12);
    z-index:3;
  }
  [data-tone="beige"] .hybrid-x-badge p{
    margin:0 !important; white-space:nowrap;
    font-size:12.5px !important; line-height:1.6 !important;
  }
}
@media(max-width:900px){
  [data-tone="beige"] .hybrid-x-badge{
    position:static !important; transform:none !important;
    margin:22px auto !important; text-align:center !important;
  }
}


/* ---- 13. 価格ブロック：30日分を主役、15日分は添える ---- */
[data-tone="beige"] .hero-offer-price em{
  display:block; margin-top:4px; font-style:normal;
  font-size:13px !important; color:#6B625D !important; letter-spacing:.04em;
}
[data-tone="beige"] .hero-offer-starter{
  margin:12px 0 0 !important; padding-top:12px;
  border-top:1px solid rgba(120,95,88,.18);
  font-size:13.5px !important; line-height:1.7 !important; color:#5A5148 !important;
}
[data-tone="beige"] .hero-offer-starter b{ font-weight:600; color:#3C3530; }


/* ============================================================
   14. ファーストビュー：写真を画面いっぱいに敷き、文字を重ねる
   （PC＝背景写真＋左にコピー／スマホ＝写真を上、文字を下）
   ============================================================ */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero{
    position:relative;
    min-height:min(96svh,880px);
    display:flex; align-items:stretch;
    background-image:
      linear-gradient(to bottom, rgba(255,253,252,0) 0%, rgba(255,253,252,0) 24%, rgba(255,253,252,.22) 44%, rgba(255,253,252,.40) 100%),
      linear-gradient(100deg, rgba(255,253,252,.94) 0%, rgba(255,253,252,.80) 24%, rgba(255,253,252,.36) 44%, rgba(255,253,252,0) 60%),
      url(../images/hero-product-wide.jpg?v=2) !important;
    background-repeat:no-repeat,no-repeat,no-repeat;
    background-size:cover,cover,cover;
    background-position:center,center,center 42%;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    display:flex !important; flex-direction:column;
    align-items:flex-start; justify-content:center;
    width:100%;
    padding-top:clamp(96px,11vw,168px) !important;
    padding-bottom:clamp(40px,5vw,76px) !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > *{
    grid-column:auto !important; grid-row:auto !important;
    width:100%; max-width:min(540px,50%);
  }
  /* 写真の中にモデルがいるので、右側の写真枠は出さない */
  [data-tone="beige"] .lp-hero .hero-visual{ display:none !important; }

  /* 価格ブロックは写真の上でも読めるよう、薄い白の面を敷く */
  [data-tone="beige"] .lp-hero .hero-offer{
    background:rgba(255,253,252,.84) !important;
    border:1px solid rgba(120,95,88,.16) !important;
    border-radius:3px;
    padding:clamp(15px,1.9vw,21px) clamp(17px,2.1vw,25px) !important;
    box-shadow:0 10px 34px rgba(150,120,110,.08);
  }
  [data-tone="beige"] .lp-hero .lp-kicker,
  [data-tone="beige"] .lp-hero h1,
  [data-tone="beige"] .lp-hero .lp-sub{ text-shadow:0 1px 10px rgba(255,253,252,.9); }

  /* 写真の注記 */
  [data-tone="beige"] .lp-hero::after{
    content:"モデル・写真はイメージです。";
    position:absolute; right:clamp(14px,2.6vw,32px); bottom:14px;
    font-size:11px; letter-spacing:.04em; line-height:1; color:#6B625D;
    background:rgba(255,253,252,.7); padding:6px 12px; border-radius:999px;
    pointer-events:none;
  }
}

@media (max-width:900px){
  [data-tone="beige"] .lp-hero{ background-image:none !important; min-height:0 !important; }
  [data-tone="beige"] .lp-hero::after{ content:none !important; }
  [data-tone="beige"] .lp-hero .hero-visual{ display:block !important; order:-1; }
  [data-tone="beige"] .lp-hero .lp-hero-content > *{ max-width:100% !important; }
}


/* ============================================================
   15. ファーストビューの微調整（写真のロゴを避けて1画面に収める）
   ============================================================ */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero{ min-height:min(94svh,864px); }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:clamp(150px,14vw,196px) !important;
    padding-bottom:clamp(28px,3vw,48px) !important;
  }
  [data-tone="beige"] .lp-hero .lp-kicker{ margin:0 0 10px !important; }
  [data-tone="beige"] .lp-hero h1{
    margin:0 !important;
    font-size:clamp(28px,2.7vw,37px) !important;
    line-height:1.42 !important;
  }
  [data-tone="beige"] .lp-hero .lp-sub{
    margin:10px 0 0 !important;
    font-size:15px !important; line-height:1.82 !important;
  }
  [data-tone="beige"] .lp-hero .hero-offer{ margin-top:14px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-lead{ margin:0 0 4px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price{ margin:0 !important; line-height:1.25 !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price em{ margin-top:2px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-starter{
    margin:9px 0 0 !important; padding-top:9px !important;
    font-size:13px !important; line-height:1.6 !important;
  }
  [data-tone="beige"] .lp-hero .hero-offer-note{
    margin:8px 0 0 !important; font-size:11.5px !important; line-height:1.65 !important;
  }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:14px !important; }
}
/* 旧CSSの中央寄せが残っていたので左揃えに戻す */
[data-tone="beige"] .lp-hero .lp-sub{ margin-left:0 !important; margin-right:0 !important; }


/* ---- 16. 1画面に収める最終調整 ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero .lp-hero-content{ padding-top:clamp(144px,13.4vw,188px) !important; }
  [data-tone="beige"] .lp-hero h1{ line-height:1.36 !important; }
  [data-tone="beige"] .lp-hero .hero-offer-starter{ margin-top:8px !important; padding-top:8px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-note{ margin-top:6px !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:11px !important; }
}


/* ---- 17. 写真の位置を固定し、画面の高さが低い環境でも1画面に収める ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero{
    background-color:#FFFDFC !important;
    background-size:100% auto, 100% auto, 100% auto !important;
    background-position:center top, center top, center top !important;
  }
}
@media (min-width:901px) and (max-height:1000px){
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:clamp(132px,12.6vw,172px) !important;
    padding-bottom:20px !important;
  }
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(24px,2.3vw,31px) !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:14px !important; line-height:1.72 !important; margin-top:8px !important; }
  [data-tone="beige"] .lp-hero .hero-offer{ margin-top:11px !important; padding:13px 18px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price{ font-size:15px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price b{ font-size:30px !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:10px !important; }
}


/* ---- 18. スマホの左右の余白（写真だけは端まで） ---- */
@media (max-width:900px){
  [data-tone="beige"] .lp-hero .lp-hero-content > *:not(.hero-visual){
    box-sizing:border-box;
    padding-left:20px !important; padding-right:20px !important;
  }
  [data-tone="beige"] .lp-hero .hero-visual figcaption{
    padding-left:20px !important; padding-right:20px !important;
  }
  [data-tone="beige"] .lp-hero .hero-visual{ margin-bottom:22px !important; }
}


/* ---- 19. 写真のロゴとの間隔を画面幅に連動させる ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:clamp(140px,13vw,260px) !important;
  }
}


/* ============================================================
   20. 写真を丸ごと1画面に収める（机のカプセル・PTPまで見せる）
   ・写真は高さ基準で右寄せ。左の余白は写真の端と同じ色でつなぐ
   ・白のベールは写真のロゴより下だけにかける（ロゴは濃いまま）
   ============================================================ */
@media (min-width:901px) and (min-aspect-ratio:13/10){
  [data-tone="beige"] .lp-hero{
    height:calc(100svh - 111px); min-height:560px !important;
    background-color:#F3F5FB !important;
    background-image:
      linear-gradient(90deg, #F3F5FB 0, #F3F5FB calc(100% - (100svh - 111px) * 1.5 + 2px), rgba(243,245,251,0) calc(100% - (100svh - 111px) * 1.5 + 90px)),
      url(../images/hero-product-wide.jpg?v=2) !important;
    background-size:100% 100%, auto 100% !important;
    background-position:left top, right bottom !important;
    background-repeat:no-repeat !important;
    overflow:hidden;
  }
  [data-tone="beige"] .lp-hero::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(255,253,252,.93) 0%, rgba(255,253,252,.86) 32%, rgba(255,253,252,.5) 46%, rgba(255,253,252,0) 58%);
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 19%, #000 31%);
            mask-image:linear-gradient(to bottom, transparent 0%, transparent 19%, #000 31%);
  }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    position:relative; z-index:1;
    justify-content:flex-start !important;
    padding-top:calc(16.9svh + 14px) !important;
    padding-bottom:16px !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > *{ max-width:min(540px,42vw) !important; }
  [data-tone="beige"] .lp-hero::after{ left:clamp(14px,2.6vw,32px); right:auto !important; z-index:2; }
}
/* 縦長の画面（タブレット縦など）は写真を横幅いっぱいにする */
@media (min-width:901px) and (max-aspect-ratio:13/10){
  [data-tone="beige"] .lp-hero{
    background-image:url(../images/hero-product-wide.jpg?v=2) !important;
    background-size:100% auto !important; background-position:center top !important;
  }
}
/* 文字をはっきり */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero .lp-kicker{ color:#5A4A42 !important; }
  [data-tone="beige"] .lp-hero h1{ color:#2E2723 !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ color:#3C3530 !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-weight:500; }
  [data-tone="beige"] .lp-hero .hero-offer{ background:rgba(255,253,252,.92) !important; }
}


/* ---- 21. 高さの低いノートPC向け＋注記の位置 ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero::after{ top:14px; bottom:auto !important; left:auto !important; right:clamp(14px,2.6vw,32px) !important; }
}
@media (min-width:901px) and (max-height:820px){
  [data-tone="beige"] .lp-hero .lp-hero-content{ padding-top:calc(16.9svh + 8px) !important; padding-bottom:10px !important; }
  [data-tone="beige"] .lp-hero .lp-kicker{ font-size:13.5px !important; margin-bottom:6px !important; }
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(23px,2.1vw,27px) !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:13.5px !important; line-height:1.62 !important; margin-top:6px !important; }
  [data-tone="beige"] .lp-hero .hero-offer{ margin-top:9px !important; padding:10px 16px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-lead{ font-size:12px !important; margin-bottom:2px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price b{ font-size:26px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price em{ font-size:12px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-starter{ margin-top:6px !important; padding-top:6px !important; font-size:12.5px !important; line-height:1.5 !important; }
  [data-tone="beige"] .lp-hero .hero-offer-note{ margin-top:4px !important; font-size:11px !important; line-height:1.5 !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:9px !important; }
  [data-tone="beige"] .lp-hero .hero-actions .btn{ padding-top:11px !important; padding-bottom:11px !important; }
}


/* ---- 22. 見出しと小さい文字を一回り大きく／ベールを少し弱める ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(28px,2.5vw,35px) !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:15px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-lead{ font-size:13px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-price em{ font-size:13px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-starter{ font-size:14px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-note{ font-size:12.5px !important; color:#5A5148 !important; }
  [data-tone="beige"] .lp-hero::before{
    background:linear-gradient(90deg, rgba(255,253,252,.9) 0%, rgba(255,253,252,.8) 30%, rgba(255,253,252,.38) 43%, rgba(255,253,252,0) 53%) !important;
  }
}
@media (min-width:901px) and (max-height:820px){
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(26px,2.3vw,30px) !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:14px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-starter{ font-size:13px !important; }
  [data-tone="beige"] .lp-hero .hero-offer-note{ font-size:11.5px !important; }
}


/* ============================================================
   23. 文字を写真の「ARCHIBEAUT」の頭に揃える／価格2つを同じ大きさで
   ・写真は上の空だけ少し切り、机のカプセルとPTPは必ず残す
   ・文字の列は「ARCHIBEAUT」の幅に収め、女性にかからないようにする
   ============================================================ */
[data-tone="beige"] .lp-hero::after{ content:none !important; }

@media (min-width:901px) and (min-aspect-ratio:13/10){
  [data-tone="beige"] .lp-hero{
    background-image:
      linear-gradient(90deg, #F3F5FB 0, #F3F5FB calc(100% - (100svh - 111px) * 1.63 + 2px), rgba(243,245,251,0) calc(100% - (100svh - 111px) * 1.63 + 90px)),
      url(../images/hero-product-wide.jpg?v=2) !important;
    background-size:100% 100%, auto 108.7% !important;
    background-position:left top, right bottom !important;
  }
  [data-tone="beige"] .lp-hero::before{
    background:linear-gradient(90deg, rgba(255,253,252,.9) 0%, rgba(255,253,252,.8) calc(100% - (100svh - 111px) * 0.99), rgba(255,253,252,0) calc(100% - (100svh - 111px) * 0.84)) !important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0%, transparent 11%, #000 21%);
            mask-image:linear-gradient(to bottom, transparent 0%, transparent 11%, #000 21%);
  }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    max-width:none !important; margin:0 !important; width:100% !important;
    box-sizing:border-box;
    padding-left:max(24px, calc(100% - (100svh - 111px) * 1.51)) !important;
    padding-right:0 !important;
    padding-top:calc((100svh - 111px) * 0.097 + 24px) !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > *{
    max-width:calc((100svh - 111px) * 0.55) !important;
  }
  [data-tone="beige"] .lp-hero h1{ font-size:min(35px, calc((100svh - 111px) * 0.043)) !important; }
  [data-tone="beige"] .lp-hero .lp-kicker::before{ display:none !important; }
}

/* 価格：15日分と30日分を同じ大きさで並べる */
[data-tone="beige"] .hero-plans{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
[data-tone="beige"] .hero-plan{
  background:#FFFDFC; border:1px solid rgba(120,95,88,.2); border-radius:3px;
  padding:11px 14px 10px; text-align:left;
}
[data-tone="beige"] .hero-plan p{ margin:0 !important; }
[data-tone="beige"] .hero-plan .hp-label{
  font-size:12.5px !important; letter-spacing:.06em; color:#A0705F !important; font-weight:600;
}
[data-tone="beige"] .hero-plan .hp-price{ line-height:1.2 !important; margin-top:4px !important; color:#3C3530 !important; white-space:nowrap; }
[data-tone="beige"] .hero-plan .hp-days{ display:block; font-size:13.5px; color:#3C3530; margin-bottom:1px; }
[data-tone="beige"] .hero-plan .hp-price b{ font-size:clamp(24px,2vw,29px); font-weight:600; letter-spacing:.01em; font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif; }
[data-tone="beige"] .hero-plan .hp-yen{ font-size:11.5px; margin-left:2px; color:#5A5148; }
[data-tone="beige"] .hero-plan .hp-sub{ font-size:12px !important; color:#6B625D !important; margin-top:3px !important; line-height:1.5 !important; }
[data-tone="beige"] .lp-hero .hero-offer{ padding:12px !important; }
[data-tone="beige"] .lp-hero .hero-offer .hero-offer-note{ margin:9px 2px 0 !important; }
@media (max-width:420px){
  [data-tone="beige"] .hero-plan{ padding:10px 10px 9px; }
  [data-tone="beige"] .hero-plan .hp-price b{ font-size:22px; }
  [data-tone="beige"] .hero-plan .hp-yen{ font-size:10.5px; }
}


/* ---- 24. ボタンを1行に ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero .hero-actions{ display:flex !important; flex-wrap:nowrap !important; gap:10px !important; }
  [data-tone="beige"] .lp-hero .hero-actions .btn{
    white-space:nowrap; margin:0 !important; min-width:0 !important;
    padding:12px clamp(16px,1.6vw,26px) !important; font-size:14px !important;
  }
}

/* ---- 25. 仕上げ（主ボタン濃紺・注記を大きく・ベールを弱く・ヘッダーロゴを濃く） ---- */
[data-tone="beige"] .lp-hero .hero-actions .btn-primary{
  background:#252B55 !important; border-color:#252B55 !important; color:#FFFDFC !important;
}
[data-tone="beige"] .lp-hero .hero-actions .btn-primary:hover{ background:#1B2046 !important; }
[data-tone="beige"] .hero-plan .hp-sub{ font-size:13px !important; }
[data-tone="beige"] .lp-hero .hero-offer .hero-offer-note{ font-size:13px !important; line-height:1.6 !important; }
@media (min-width:901px) and (min-aspect-ratio:13/10){
  [data-tone="beige"] .lp-hero::before{
    background:linear-gradient(90deg, rgba(255,253,252,.84) 0%, rgba(255,253,252,.7) calc(100% - (100svh - 111px) * 0.99), rgba(255,253,252,0) calc(100% - (100svh - 111px) * 0.84)) !important;
  }
}
[data-tone="beige"] .brand-mark .logo-text{ color:#6A7078 !important; }
[data-tone="beige"] .brand-mark .archi{ color:#6E7482 !important; }


/* ============================================================
   26. スマホのファーストビュー
   写真 → 見出し → 価格2枚 → ボタン を最初の画面に収める
   説明文はボタンの下へ（消さずに順番だけ入れ替え）
   ============================================================ */
@media (max-width:900px){
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-top:0 !important; padding-bottom:30px !important;
  }
  [data-tone="beige"] .lp-hero .hero-visual{ margin:0 0 14px !important; }
  [data-tone="beige"] .lp-hero .lp-kicker{
    font-size:12.5px !important; line-height:1.6 !important; letter-spacing:0 !important;
    margin:0 0 6px !important; white-space:nowrap;
  }
  [data-tone="beige"] .lp-hero .lp-kicker::before{ display:none !important; }
  [data-tone="beige"] .lp-hero h1{ font-size:26px !important; line-height:1.42 !important; margin:0 !important; }
  [data-tone="beige"] .lp-hero .hero-offer{ margin-top:14px !important; padding:10px !important; }
  [data-tone="beige"] .lp-hero .hero-offer .hero-offer-note{ font-size:11.5px !important; line-height:1.55 !important; margin-top:8px !important; }
  [data-tone="beige"] .lp-hero .hero-actions{
    display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:stretch !important;
    gap:8px !important; margin-top:12px !important;
  }
  [data-tone="beige"] .lp-hero .hero-actions > *{ width:auto !important; max-width:none !important; }
  [data-tone="beige"] .lp-hero .hero-actions .btn{
    flex:1 1 0; min-width:0 !important; margin:0 !important;
    padding:14px 6px !important; font-size:14px !important; white-space:nowrap; text-align:center;
  }
  [data-tone="beige"] .lp-hero .lp-sub{ order:1; margin-top:24px !important; }
}


/* ---- 27. 価格カードを必ず同じ幅に ---- */
[data-tone="beige"] .hero-plans{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; }
[data-tone="beige"] .hero-plan{ min-width:0; }
@media (min-width:901px){
  [data-tone="beige"] .hero-plan .hp-price b{ font-size:clamp(22px,1.8vw,28px) !important; }
  [data-tone="beige"] .hero-plan .hp-yen{ font-size:10.5px !important; margin-left:1px !important; }
}


/* ============================================================
   28. PC：女性を大きく見せるレイアウト（お気に入りの大きさ）
   ・写真は横幅いっぱい・上揃え → 頭が切れない
   ・文字は写真の「ARCHIBEAUT」の頭文字に左端を揃える
   ・画面の高さに合わせて文字が縮み、ボタンは必ず1画面目に入る
   ============================================================ */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero{
    height:auto !important;
    min-height:min(calc(100svh - 111px), 66.6vw) !important;
    background-color:#F3F5FB !important;
    background-image:url(../images/hero-product-wide.jpg?v=2) !important;
    background-size:100% auto !important;
    background-position:center top !important;
    background-repeat:no-repeat !important;
  }
  [data-tone="beige"] .lp-hero::before{
    background:linear-gradient(90deg, rgba(255,253,252,.86) 0%, rgba(255,253,252,.72) 34%, rgba(255,253,252,.3) 44%, rgba(255,253,252,0) 50%) !important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent calc(11.4vw), #000 calc(11.4vw + 70px)) !important;
            mask-image:linear-gradient(to bottom, transparent 0, transparent calc(11.4vw), #000 calc(11.4vw + 70px)) !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    max-width:none !important; margin:0 !important; width:100% !important; box-sizing:border-box;
    padding-left:7.4% !important; padding-right:0 !important;
    padding-top:calc(11.3% + 16px) !important;
    padding-bottom:22px !important;
    justify-content:flex-start !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > *{ max-width:33vw !important; }
  [data-tone="beige"] .lp-hero .lp-kicker{ font-size:clamp(13px,2svh,16px) !important; margin:0 0 6px !important; }
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(24px,4.4svh,39px) !important; line-height:1.36 !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:clamp(13.5px,1.8svh,16px) !important; line-height:1.75 !important; margin-top:clamp(6px,1.2svh,12px) !important; }

  /* 価格カードは枠なしで並べ、注記はボタンの下へ */
  [data-tone="beige"] .lp-hero .hero-offer{ display:contents !important; }
  [data-tone="beige"] .lp-hero .hero-plans{ margin-top:clamp(10px,1.8svh,18px) !important; }
  [data-tone="beige"] .hero-plan{ background:rgba(255,253,252,.93) !important; }
  [data-tone="beige"] .hero-plan .hp-price b{ font-size:clamp(22px,3.3svh,30px) !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ order:1; margin-top:clamp(10px,1.6svh,16px) !important; }
  [data-tone="beige"] .lp-hero .hero-actions .btn{ padding-top:clamp(11px,1.6svh,15px) !important; padding-bottom:clamp(11px,1.6svh,15px) !important; font-size:clamp(13.5px,1.8svh,15px) !important; }
  [data-tone="beige"] .lp-hero .hero-offer-note{ order:2; margin:10px 0 0 !important; font-size:12.5px !important; line-height:1.6 !important; color:#5A5148 !important; }
}
/* 高さの低い画面：説明文はボタンの下へ回し、見出し・価格・ボタンを優先 */
@media (min-width:901px) and (max-height:820px){
  [data-tone="beige"] .lp-hero .lp-sub{ order:3; margin-top:14px !important; }
}

/* ---- 29. 価格カードと注記の幅をボタンと揃える ---- */
@media (min-width:901px){
  [data-tone="beige"] .lp-hero .hero-plans,
  [data-tone="beige"] .lp-hero .hero-offer-note{ width:100% !important; max-width:33vw !important; box-sizing:border-box; }
}


/* ============================================================
   30. PC：写真を丸ごと（机・PTPまで）＋頭もボタンも切らない
   ・写真は「画面の高さ」に合わせて右寄せ。上も下も切らない
   ・文字サイズも同じ高さ基準 → 写真と文字が一緒に縮む
   ・文字の左端は写真の「ARCHIBEAUT」の頭文字に揃える
   ============================================================ */
@media (min-width:901px) and (min-aspect-ratio:4/3){
  [data-tone="beige"] .lp-hero{
    height:auto !important;
    min-height:calc(100svh - 111px) !important;
    background-color:#F3F5FB !important;
    background-image:
      linear-gradient(to bottom, rgba(243,245,251,0) calc((100svh - 111px) - 36px), #F3F5FB calc(100svh - 111px)),
      linear-gradient(90deg, #F3F5FB 0, #F3F5FB calc(100% - (100svh - 111px) * 1.5 + 2px), rgba(243,245,251,0) calc(100% - (100svh - 111px) * 1.5 + 90px)),
      url(../images/hero-product-wide.jpg?v=2) !important;
    background-size:100% 100%, 100% 100%, auto calc(100svh - 111px) !important;
    background-position:left top, left top, right top !important;
    background-repeat:no-repeat !important;
  }
  [data-tone="beige"] .lp-hero::before{
    background:linear-gradient(90deg, rgba(255,253,252,.86) 0%, rgba(255,253,252,.72) calc(100% - (100svh - 111px) * 0.9), rgba(255,253,252,0) calc(100% - (100svh - 111px) * 0.78)) !important;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent calc((100svh - 111px) * 0.175), #000 calc((100svh - 111px) * 0.175 + 60px)) !important;
            mask-image:linear-gradient(to bottom, transparent 0, transparent calc((100svh - 111px) * 0.175), #000 calc((100svh - 111px) * 0.175 + 60px)) !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content{
    padding-left:max(24px, calc(100% - (100svh - 111px) * 1.389)) !important;
    padding-top:calc((100svh - 111px) * 0.169 + 16px) !important;
    padding-bottom:18px !important;
  }
  [data-tone="beige"] .lp-hero .lp-hero-content > *,
  [data-tone="beige"] .lp-hero .hero-plans,
  [data-tone="beige"] .lp-hero .hero-offer-note{ max-width:max(330px, calc((100svh - 111px) * 0.52)) !important; }
  [data-tone="beige"] .lp-hero .lp-kicker{ font-size:max(12px, calc((100svh - 111px) * 0.02)) !important; }
  [data-tone="beige"] .lp-hero h1{ font-size:clamp(21px, calc((100svh - 111px) * 0.042), 38px) !important; }
  [data-tone="beige"] .lp-hero .lp-sub{ font-size:clamp(12.5px, calc((100svh - 111px) * 0.019), 16px) !important; line-height:1.72 !important; }
  [data-tone="beige"] .hero-plan .hp-label{ font-size:clamp(11px, calc((100svh - 111px) * 0.016), 13px) !important; }
  [data-tone="beige"] .hero-plan .hp-days{ font-size:clamp(11.5px, calc((100svh - 111px) * 0.017), 14px) !important; }
  [data-tone="beige"] .hero-plan .hp-price b{ font-size:clamp(19px, calc((100svh - 111px) * 0.035), 29px) !important; }
  [data-tone="beige"] .hero-plan .hp-sub{ font-size:clamp(11px, calc((100svh - 111px) * 0.016), 13px) !important; }
  [data-tone="beige"] .hero-plan{ padding:calc((100svh - 111px) * 0.012) 12px !important; }
  [data-tone="beige"] .lp-hero .lp-hero-content .hero-plans{ margin-top:calc((100svh - 111px) * 0.018) !important; }
  [data-tone="beige"] .lp-hero .hero-actions{ margin-top:calc((100svh - 111px) * 0.018) !important; }
  [data-tone="beige"] .lp-hero .hero-actions .btn{
    font-size:clamp(12.5px, calc((100svh - 111px) * 0.019), 15px) !important;
    padding-top:calc((100svh - 111px) * 0.016) !important; padding-bottom:calc((100svh - 111px) * 0.016) !important;
  }
  [data-tone="beige"] .lp-hero .hero-offer-note{ font-size:clamp(11px, calc((100svh - 111px) * 0.016), 12.5px) !important; }
}
/* 高さが足りない画面：説明文と注記はボタンの下へ（見出し・価格・ボタンを優先） */
@media (min-width:901px) and (min-aspect-ratio:4/3) and (min-height:701px){
  [data-tone="beige"] .lp-hero .lp-sub{ order:0 !important; margin-top:calc((100svh - 111px) * 0.014) !important; }
}
@media (min-width:901px) and (min-aspect-ratio:4/3) and (max-height:700px){
  [data-tone="beige"] .lp-hero .lp-sub{ order:3 !important; margin-top:14px !important; }
}


/* ---- 31. 写真の下の境目をなくす ----
   ・旧CSSの下余白(約106px)を消して、写真の下端＝次のセクションの始まりにする
   ・写真の下端を次のセクションの地色(#F3F4F6)へやわらかくぼかす
   ・写真の上に重なっていた設計図風の細い線(SVG)を消す */
@media (min-width:901px) and (min-aspect-ratio:4/3){
  [data-tone="beige"] .lp-hero{
    padding-bottom:0 !important;
    background-color:#F3F4F6 !important;
    background-image:
      linear-gradient(to bottom, rgba(243,244,246,0) calc((100svh - 111px) - 56px), rgba(243,244,246,.9) calc((100svh - 111px) - 6px), #F3F4F6 calc(100svh - 111px)),
      linear-gradient(90deg, #F3F5FB 0, #F3F5FB calc(100% - (100svh - 111px) * 1.5 + 2px), rgba(243,245,251,0) calc(100% - (100svh - 111px) * 1.5 + 90px)),
      url(../images/hero-product-wide.jpg?v=2) !important;
  }
  [data-tone="beige"] .lp-hero > .blueprint{ display:none !important; }
}

/* ---- 32. 境目の仕上げ：白いベールも下端でぼかし、次のセクションの地色を揃える ---- */
@media (min-width:901px) and (min-aspect-ratio:4/3){
  [data-tone="beige"] .lp-hero::before{
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, transparent calc((100svh - 111px) * 0.175), #000 calc((100svh - 111px) * 0.175 + 60px), #000 calc(100% - 90px), transparent 100%) !important;
            mask-image:linear-gradient(to bottom, transparent 0, transparent calc((100svh - 111px) * 0.175), #000 calc((100svh - 111px) * 0.175 + 60px), #000 calc(100% - 90px), transparent 100%) !important;
  }
  [data-tone="beige"] .hero-story{ background:#F3F4F6 !important; }
}


/* ============================================================
   33. 見出し（lp-statement）と小見出し（lp-eyebrow）の大きさを戻す
   ※1章の「本文pを一律の大きさに」が、pタグで書かれた見出しまで
     小さくしていたための修正
   ============================================================ */
[data-tone="beige"] .lp-statement{
  font-family:var(--f-serif, "Noto Serif JP", serif) !important;
  font-size:clamp(24px,2.9vw,38px) !important;
  font-weight:500 !important;
  line-height:1.65 !important;
  letter-spacing:.04em !important;
  color:#3C3530 !important;
}
[data-tone="beige"] .lp-statement .mark{ color:#A0705F !important; }
[data-tone="beige"] .lp-eyebrow{
  font-family:var(--f-util, "Jost", sans-serif) !important;
  font-size:12.5px !important; line-height:1.6 !important;
  letter-spacing:.24em !important; text-transform:uppercase;
  color:#A0705F !important; font-weight:500 !important;
}

/* 8 Ingredients, 8 Roles：中央揃えで、行と行の間にゆとりを */
[data-tone="beige"] #ingredients{ padding-top:clamp(64px,6vw,92px) !important; }
[data-tone="beige"] #ingredients .lp-section-head{
  text-align:center !important; max-width:780px !important;
  margin:0 auto !important;
}
[data-tone="beige"] #ingredients .lp-eyebrow{
  justify-content:center !important; margin:0 auto 22px !important;
}
[data-tone="beige"] #ingredients .lp-statement{
  text-align:center !important; margin:0 auto 30px !important;
}
[data-tone="beige"] #ingredients .ing-lead{
  margin:0 auto !important; line-height:2.15 !important;
  font-size:clamp(15px,1.1vw,17px) !important; color:#5A5148 !important;
}
[data-tone="beige"] #ingredients .ing-lead span{ display:block; }
[data-tone="beige"] #ingredients .lp-section-head + .reveal{ margin-top:clamp(44px,5vw,64px) !important; }


/* ============================================================
   34. 動作を軽くする（見た目はほぼそのまま）
   ・背景の光が流れ続けるアニメーション(shimmer)を止め、静止した光にする
   ・すりガラス効果(backdrop-filter)を、半透明の白い面に置き換える
     ※スクロールのたびに毎回ぼかし計算が走り、動きが重くなる原因
   ============================================================ */
[data-tone="beige"] .pearl-bg::before,
[data-tone="beige"] .section-royal::before,
[data-tone="beige"] .site-footer::before{
  animation:none !important;
}
[data-tone="beige"] .glass,
[data-tone="beige"] .ing-lp-card{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:rgba(255,253,252,.9) !important;
}
[data-tone="beige"] .site-header{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:rgba(248,248,250,.97) !important;
}
@media (prefers-reduced-motion: reduce){
  [data-tone="beige"] *{ animation:none !important; transition:none !important; }
}