/* ============================================================
   pearl-theme.css  ―  トップページ用の配色（パール／サーモン基調）
   既存CSSは変更せず、このファイルを後から読み込んで上書きします。
   読み込みの1行を外せば元の配色に戻ります。
   配分の目安：パール55 / サーモン35 / シルバー7 / ブルー3
   ============================================================ */

:root{
  --nh-pearl:      #FFFDFC;
  --nh-pearl-2:    #F4F1EF;
  --nh-salmon:     #F0CFC3;
  --nh-salmon-2:   #F8E5DD;
  --nh-salmon-3:   #FDF4F1;
  --nh-ink:        #3C3530;
  --nh-ink-2:      #6B625D;
  --nh-blue:       #1F3A93;
  --nh-line:       rgba(120,95,88,.20);
}

/* ---- 紺の大きな面 → パール＋サーモンへ ---- */
.section-royal{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg, var(--nh-pearl) 0%, var(--nh-pearl-2) 38%, var(--nh-salmon-2) 78%, var(--nh-salmon) 100%) !important;
  color: var(--nh-ink) !important;
  border-top:1px solid var(--nh-line);
  border-bottom:1px solid var(--nh-line);
}
.section-royal::before{ opacity:.35 !important; }

.section-royal h2,
.section-royal h3,
.section-royal h4,
.section-royal .display,
.section-royal .lp-statement,
.section-royal .bs-closing{ color: var(--nh-ink) !important; }

.section-royal p,
.section-royal .bs-p,
.section-royal .bs-lead,
.section-royal li,
.section-royal td{ color:#4B4239 !important; }

.section-royal .bs-em{ color: var(--nh-ink) !important; font-weight:600; }
.section-royal .bs-blue{ color: var(--nh-blue) !important; }
.section-royal .bs-sign{ color: var(--nh-ink-2) !important; }
.section-royal .bs-sign-link{ color: var(--nh-blue) !important; }

.section-royal .eyebrow{ color:#B07F6E !important; }
.section-royal .eyebrow::before{ background:#B07F6E !important; }

.section-royal .profile-table tr{ border-top:1px solid var(--nh-line) !important; }
.section-royal .profile-table tr:last-child{ border-bottom:1px solid var(--nh-line) !important; }
.section-royal .profile-table td{ color:#4B4239 !important; }
.section-royal .profile-table th{ color: var(--nh-ink) !important; }

.section-royal .btn,
.section-royal .button,
.section-royal a.cta{
  background: var(--nh-ink) !important;
  color: var(--nh-pearl) !important;
  border-color: var(--nh-ink) !important;
}

/* ---- サーモンの差し色を少しずつ ---- */
.section.tight{ background: var(--nh-salmon-3) !important; }

.pearl-bg .eyebrow{ color:#B07F6E !important; }
.pearl-bg .eyebrow::before{ background:#C9A294 !important; }

/* ロイヤルブルーは本文リンクだけに（面積はごくわずか） */
.pearl-bg p a:not(.btn):not(.nav-cta):not(.brand-mark){ color: var(--nh-blue); }


/* ---- 8つの役割の図：枠線なし・光で浮かせる ---- */
.pearl-bg .reveal img[alt^="8つの成分"]{
  display:block;
  width:auto;
  max-width:min(100%, 980px);
  margin:34px auto 26px;
  padding:clamp(14px,2.2vw,28px);
  background:#FFFDFC;
  border:none;
  border-radius:3px;
  box-shadow:
    0 0 0 10px #FFFDFC,
    0 0 26px 12px rgba(255,255,255,.95),
    0 0 60px 26px rgba(255,252,250,.8),
    0 0 90px 30px rgba(240,207,195,.28),
    0 10px 40px rgba(150,120,110,.07);
}
@media(max-width:760px){
  .pearl-bg .reveal img[alt^="8つの成分"]{
    margin:22px auto 18px;
    box-shadow:
      0 0 0 6px #FFFDFC,
      0 0 18px 8px rgba(255,255,255,.95),
      0 0 40px 16px rgba(255,252,250,.75),
      0 0 60px 18px rgba(240,207,195,.22);
  }
}

/* ============================================================
   ページごとのトーン（data-tone 属性で切り替え）
   beige  = 商品ページ  / silver = LAB / plain = 会社概要
   ============================================================ */
[data-tone="beige"] .section-royal{
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(150deg,#FFFDFC 0%,#F7F2EC 45%,#F1E7DC 100%) !important;
}
[data-tone="silver"] .section-royal,
[data-tone="silver"] .lab-section.navy,
[data-tone="silver"] .check-section{
  background:
    radial-gradient(900px 520px at 14% 0%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(150deg,#FFFDFC 0%,#F2F1EF 46%,#E7E4E1 100%) !important;
  color:#3C3530 !important;
  border-top:1px solid var(--nh-line);
  border-bottom:1px solid var(--nh-line);
}
[data-tone="plain"] .section-royal{
  background:linear-gradient(150deg,#FFFDFC 0%,#FAF9F8 55%,#F2F0EE 100%) !important;
}

/* 明るい地になった診断セクションの文字と部品 */
[data-tone="silver"] .check-intro h2,
[data-tone="silver"] .check-question,
[data-tone="silver"] .check-result h3,
[data-tone="silver"] .lab-section.navy h2,
[data-tone="silver"] .lab-section.navy h3{ color:#3C3530 !important; }
[data-tone="silver"] .check-intro p,
[data-tone="silver"] .check-context,
[data-tone="silver"] .lab-section.navy p,
[data-tone="silver"] .lab-standard p{ color:#5A5148 !important; }
[data-tone="silver"] .check-shell{ background:rgba(255,255,255,.72) !important; border-color:var(--nh-line) !important; box-shadow:0 22px 54px rgba(60,45,40,.12) !important; }
[data-tone="silver"] .check-top{ border-bottom-color:var(--nh-line) !important; }
[data-tone="silver"] .check-step{ color:#B07F6E !important; }
[data-tone="silver"] .check-progress{ background:rgba(120,95,88,.18) !important; }
[data-tone="silver"] .check-progress span{ background:#B07F6E !important; }
[data-tone="silver"] .check-option{ background:#FFFDFC !important; border-color:var(--nh-line) !important; color:#3C3530 !important; }
[data-tone="silver"] .check-option:hover,
[data-tone="silver"] .check-option:focus-visible{ border-color:#B07F6E !important; background:#FDF4F1 !important; }
[data-tone="silver"] .check-option.selected{ border-color:#B07F6E !important; background:#F8E5DD !important; box-shadow:inset 3px 0 #B07F6E !important; }
[data-tone="silver"] .check-nav{ border-color:var(--nh-line) !important; color:#3C3530 !important; }
[data-tone="silver"] .check-nav.primary{ background:#3C3530 !important; border-color:#3C3530 !important; color:#FFFDFC !important; }
[data-tone="silver"] .lab-standards{ background:var(--nh-line) !important; border-color:var(--nh-line) !important; }
[data-tone="silver"] .lab-standard{ background:#FFFDFC !important; }
[data-tone="silver"] .lab-standard b{ color:#B07F6E !important; }
[data-tone="silver"] .lab-standard h3{ color:#3C3530 !important; }

/* 商品ページ：価格と購入まわりだけ濃くしてメリハリを出す */
[data-tone="beige"] .price-card.is-recommended,
[data-tone="beige"] .plan-card.is-recommended{ border-color:#3C3530 !important; box-shadow:0 20px 48px rgba(60,45,40,.16) !important; }
[data-tone="beige"] .btn-buy,
[data-tone="beige"] .buy-button,
[data-tone="beige"] a[href*="checkout"]{ background:#3C3530 !important; color:#FFFDFC !important; border-color:#3C3530 !important; }

/* ---- フッター：チャコール → グレージュ ---- */
.site-footer{ background:linear-gradient(135deg,#5A5049 0%,#6E645C 38%,#8C817A 68%,#B6ABA3 100%) !important; color:#F5EFEA !important; }
.site-footer .footer-brand p{ color:#E7DFD9 !important; }
.site-footer h5{ color:#F5EFEA !important; }
.site-footer a{ color:#EFE7E1 !important; }
.site-footer a:hover{ color:#FFFDFC !important; }
.site-footer .footer-bottom{ color:#DCD2CB !important; }