/* ============================================================
   iPS-X — Style v3 (clean rewrite)
   ============================================================ */

/* ── 0. ハイフン文字グリフ修正（Cormorant Garamond 対策）
   unicode-range でハイフン（U+002D）だけを Noto Sans JP に差し替え。
   HTML の span 要否に関わらず全ページで自動的に修正される。 ── */
@font-face {
  font-family: 'Cormorant Garamond';
  src: local('Noto Sans JP'), local('Arial');
  unicode-range: U+002D;
  font-weight: 100 900;
  font-style: normal oblique 0deg 20deg;
}

/* ── .hyphen-fix: span ベース対策（フォールバック） ── */
.hyphen-fix,
.sec-eyebrow span .hyphen-fix,
h1 .hyphen-fix, h2 .hyphen-fix, h3 .hyphen-fix,
.hero-h1 .hyphen-fix, .nav-logo .hyphen-fix, .footer-brand-name .hyphen-fix {
  font-family: 'Noto Sans JP', Arial, sans-serif !important;
  font-style:  normal !important;
  display:     inline-block;
}

/* ── 1. Variables ── */
:root {
  --gold:       #b8985a;
  --gold-lt:    rgba(184,152,90,.25);
  --dark:       #141412;
  --mid:        #4a4a48;
  --light:      #888580;
  --bg:         #f0f2f5;   /* シルバーグレー */
  --bg-alt:     #e8ecf0;   /* やや濃いシルバー */
  --white:      #f8f9fb;   /* ニュートラルホワイト（純白より少しクール） */
  --border:     rgba(184,152,90,.18);
  --nav-h:      68px;
  --max-w:      1200px;
  --pad:        clamp(1rem, 3.5vw, 5rem);
  --sec-v:      clamp(56px, 8vw, 100px);
  --font-d:     'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-s:     'Noto Serif JP', serif;
  --font-n:     'Noto Sans JP', sans-serif;
  --ease:       cubic-bezier(.25,.1,.25,1);
}

/* ── 2. Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-n);
  font-size: 16px;
  line-height: 1.85;
  color: var(--mid);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* ── 日本語タイポグラフィ：孤立行（1文字残り）防止 ── */
  text-wrap: wrap;          /* 各行を右端まで詰める標準折返し（pretty の行均等化による早め改行を回避） */
  word-break: normal;       /* 日本語の禁則処理(line-break:strict)を正しく効かせ、句読点の行頭ぶら下がりを防ぐ */
  line-break: strict;       /* 厳格な禁則処理（句読点・約物の処理） */
  overflow-wrap: break-word; /* 長い英単語・URLのみ折返し。日本語の句読点禁則(line-break:strict)は維持 */
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; max-width: 100%; }
picture img { width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }

/* ── 3. Typography ── */
h1, h2, h3 {
  font-family: var(--font-d);
  font-weight: 300;
  color: var(--dark);
  line-height: 1.3;
  letter-spacing: .05em;
  text-wrap: wrap;          /* 各行を右端まで詰める（balanceの行均等化による早め改行を回避） */
}
h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1rem, 1.8vw, 1.3rem); }
p  { color: var(--mid); }

.sec-eyebrow {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.2rem;
}
.sec-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.sec-eyebrow span {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .28em;
  color: var(--gold);
  text-transform: uppercase;
}
.sec-rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  margin: 1.4rem 0 2rem;
}
.sec-eyebrow.center,
.sec-rule.center { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }

/* ── 4. Layout ── */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 2rem;
  font-family: var(--font-d);
  font-size: .78rem;
  letter-spacing: .18em;
  text-decoration: none;
  border: 1px solid;
  transition: all .3s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 13px; height: 13px; flex-shrink: 0; transition: transform .3s; }
.btn:hover svg { transform: translateX(3px); }
.btn-primary {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
}
.btn-primary:hover { background: var(--gold); border-color: var(--gold); }
/* FV メインCTA（公式ECで購入する）専用：スレートブルー */
.btn-primary-navy {
  background: #2e4668;
  color: #ffffff;
  border-color: #2e4668;
  transition: background 150ms, border-color 150ms;
}
.btn-primary-navy:hover { background: #355176; border-color: #355176; }
.btn-primary-navy svg { color: var(--gold); }
.btn-ghost {
  background: transparent;
  color: var(--dark);
  border-color: var(--dark);
}
.btn-ghost:hover { background: var(--dark); color: var(--white); }
.btn-ec {
  background: var(--gold);
  color: var(--white);
  border-color: var(--gold);
}
.btn-ec:hover { background: var(--dark); border-color: var(--dark); }
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,.5);
}
.btn-outline-white:hover { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Hero 専用：CTAボタン2つの横幅を統一して整然と並べる */
.hero-btn-group .btn {
  flex: 0 0 auto;
  min-width: 220px;
  justify-content: center;
}
@media (max-width: 600px) {
  .hero-btn-group .btn {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal;
  }
}
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.br-sp { display: none; }

/* ── 5. Navigation ── */
#site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
#site-nav.scrolled { border-color: var(--border); }
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo {
  font-family: var(--font-d);
  font-style: normal;   /* italic → normal：ハイフン斜め対策 */
  font-size: 1.35rem;
  color: var(--dark);
  letter-spacing: .05em;
}
.nav-logo span { color: var(--gold); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
}
.nav-links a {
  font-family: var(--font-d);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--dark);
  transition: color .25s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .3s var(--ease);
  transform-origin: left;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-shop-link { color: var(--gold) !important; }
.nav-cta {
  padding: .4rem 1.2rem;
  border: 1px solid var(--dark);
  transition: all .3s;
}
.nav-cta:hover { background: var(--dark); color: var(--white) !important; }
.nav-cta::after { display: none; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: .4rem;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--dark);
  transition: transform .3s, opacity .3s;
}

/* Mobile nav drawer */
#mobile-nav {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 280px;
  background: var(--white);
  z-index: 200;
  padding: 5rem 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  transform: translateX(100%);
  transition: transform .4s var(--ease);
  box-shadow: -4px 0 32px rgba(0,0,0,.08);
}
#mobile-nav.open { transform: translateX(0); }
#mobile-nav a {
  font-family: var(--font-d);
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--dark);
  border-bottom: 1px solid var(--border);
  padding-bottom: 1rem;
  transition: color .25s;
}
#mobile-nav a:hover { color: var(--gold); }
#mobile-nav-close {
  position: absolute;
  top: 1.2rem; right: 1.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--dark);
  padding: .3rem;
}

/* ── 6. Hero ── */
#hero {
  min-height: 100svh;
  padding-top: var(--nav-h);
  /* 親に横方向グラデで左右を自然に馴染ませる */
  background: linear-gradient(
    90deg,
    var(--bg)      0%,
    var(--bg)      40%,
    var(--bg-alt)  65%,
    var(--bg-alt)  100%
  );
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.hero-bg {
  position: absolute;
  top: 0; right: 0;
  width: 60%;           /* 左端を手前まで伸ばして重ねしろを作る */
  height: 100%;
  /* 左端を transparent にしてhero親グラデに溶け込ませる */
  background: linear-gradient(
    90deg,
    transparent          0%,
    rgba(232,236,240,.4) 25%,
    var(--bg-alt)        100%
  );
  z-index: 0;
}
.hero-copy {
  position: relative;
  z-index: 1;
  padding: 4rem var(--pad);
}
.hero-copy > * {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.hero-tag {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.hero-h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.25;
  letter-spacing: .08em;
  color: var(--dark);
  margin-bottom: 1rem;
}
.hero-h1-brand {
  display: block;
  font-family: var(--font-d);
  font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem);
  letter-spacing: .04em;
  line-height: 1.1;
  color: var(--dark);
}
.hero-h1-tagline {
  display: block;
  font-family: 'Noto Serif JP', serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--dark);
  margin-top: .8rem;
  white-space: nowrap;
}
.hero-h1 em {
  display: block;
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(.74rem, 1.1vw, .88rem);
  letter-spacing: .04em;
  color: #2c4a7a;
  margin-top: 1rem;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .hero-h1 em {
    font-size: clamp(.6rem, 2.2vw, .8rem);
    letter-spacing: .02em;
    white-space: normal;
  }
}

/* SP: タグラインの1行表示維持（フォントサイズを viewport 幅に合わせて動的調整） */
@media (max-width: 768px) {
  .hero-h1-tagline {
    font-size: clamp(.7rem, 4vw, 1.4rem);
    letter-spacing: 0;
    white-space: normal;
  }
}
.hero-image {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  height: 100%;
}
.hero-image img {
  width: 100%;
  max-width: 480px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;   /* 白背景をページ背景に溶け込ませる */
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: var(--pad);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--font-d);
  font-style: italic;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--light);
}
.hero-scroll-line {
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}

/* ── 7. News Ticker ── */
#news-ticker {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.nticker-inner {
  padding: 1rem 0;
  display: flex;
  align-items: baseline;
  gap: 2rem;
}
.nticker-head {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}
.nticker-head::after {
  content: '';
  display: block;
  width: 1px;
  height: 1.2em;
  background: var(--gold);
  opacity: .4;
}
.nticker-label {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .62rem;
  letter-spacing: .28em;
  color: var(--gold);
  white-space: nowrap;
}
.nticker-all {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-d);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--light);
  transition: color .25s;
  text-decoration: none;
  white-space: nowrap;
}
.nticker-all:hover { color: var(--gold); }
.nticker-list {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.nticker-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  text-decoration: none;
  transition: opacity .22s;
}
.nticker-link:hover { opacity: .7; }
.nticker-date {
  font-family: var(--font-d);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.nticker-title {
  font-family: var(--font-s);
  font-size: .8rem;
  color: var(--mid);
  line-height: 1.5;
  /* 日本語の禁則処理＆自然な折返し */
  line-break: strict;
  text-wrap: wrap;
  overflow-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─────────────────────────────────────────────
   汎用：意味的かたまりを改行で分断しないユーティリティ
   例: <span class="ipsx-nobreak">独占出展決定！</span>
   ───────────────────────────────────────────── */
.ipsx-nobreak { white-space: nowrap; }

/* ── 8. Beauty ── */
#beauty {
  background: var(--white);
  padding: var(--sec-v) 0;
}
.beauty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.beauty-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}
.beauty-text h2 { margin-bottom: .5rem; }
.beauty-text p {
  font-size: .88rem;
  line-height: 2;
  margin-top: 1rem;
}

/* ── 9. What is iPS-X ── */
#what {
  background: var(--bg);
  padding: var(--sec-v) 0;
}
.what-header {
  margin-bottom: 3rem;
}
.what-header h2 { margin-top: .5rem; }
.what-header .lead {
  font-family: var(--font-d);
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  line-height: 1.9;
  color: var(--mid);
  margin-top: .5rem;
}
.what-header .desc {
  font-size: .88rem;
  line-height: 2;
  margin-top: .8rem;
}

/* 3本柱 */
.integrated-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  margin: 2.5rem 0;
}
.ipillar-item {
  padding: 1.8rem 1.6rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ipillar-en {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .28em;
  color: var(--gold);
}
.ipillar-label {
  font-family: var(--font-s);
  font-size: .9rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--dark);
  margin: 0;
}
.ipillar-desc {
  font-size: .74rem;
  line-height: 1.9;
  letter-spacing: 0;
  color: var(--mid);
  flex: 1;
}
.ipillar-key {
  font-size: .72rem;
  line-height: 1.65;
  color: var(--light);
  padding-top: .6rem;
  border-top: 1px solid rgba(184,152,90,.15);
  margin-top: auto;
}
.ipillar-key-kw {
  color: var(--gold);
  font-family: var(--font-s);
  font-size: .7rem;
  white-space: nowrap;
}

/* ── ipsx-disclosure（HTML標準 details/summary を使った確実な開閉UI） ── */
.ipsx-disclosure {
  margin-top: 2rem;
  border-top: 1px solid rgba(184, 152, 90, .35);
  border-bottom: 1px solid rgba(184, 152, 90, .25);
  padding: 0;
}
.ipsx-disclosure-summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 0;
  font-family: var(--font-d);
  font-size: .82rem;
  font-weight: 300;
  letter-spacing: .12em;
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color .25s;
}
.ipsx-disclosure-summary:hover { color: var(--gold); }
.ipsx-disclosure-summary::-webkit-details-marker { display: none; }
.ipsx-disclosure-summary::marker { content: ""; }
.ipsx-disclosure-summary::after {
  content: "▾";
  font-size: .9em;
  line-height: 1;
  color: var(--gold);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.ipsx-disclosure[open] .ipsx-disclosure-summary::after {
  transform: rotate(180deg);
}
.ipsx-disclosure-content {
  padding: 0 0 1.4rem;
  line-height: 2;
  color: var(--mid);
}
.ipsx-disclosure-content p {
  font-size: .86rem;
  line-height: 2;
  color: var(--mid);
  margin: 0 0 .9rem;
}
.ipsx-disclosure-content p:last-child { margin-bottom: 0; }
.ipsx-disclosure-content .accent { color: var(--dark); font-weight: 400; }
.ipsx-disclosure-content .closing { font-style: italic; color: var(--dark); }

/* 全成分表示用バリアント */
.ipsx-disclosure.ingredient-list {
  margin: 1rem 0 1.5rem;
}
.ipsx-disclosure.ingredient-list .ipsx-disclosure-summary {
  font-size: .76rem;
  letter-spacing: .15em;
  padding: .9rem 0;
  text-transform: uppercase;
}
.ipsx-disclosure.ingredient-list .ipsx-disclosure-content {
  font-size: .76rem;
  line-height: 1.9;
  word-break: break-word;
  padding: .8rem 0 1rem;
  color: var(--light);
}
.ipsx-disclosure.ingredient-list .ipsx-disclosure-content p {
  font-size: .76rem;
  line-height: 1.9;
  color: var(--light);
}

/* ── 10. Science / 比較表 ── */
#science {
  background: var(--white);
  padding: var(--sec-v) 0;
}
.comparison-intro { margin-bottom: 1.5rem; }
.comparison-intro-lead {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--gold);
  margin-bottom: .5rem;
}
.comparison-h3 {
  font-family: var(--font-s);
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  font-weight: 400;
  color: var(--dark);
  letter-spacing: .05em;
}
.comparison-scroll-hint {
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--light);
  margin-bottom: .8rem;
}
.comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .82rem;
}
.comparison-table th,
.comparison-table td {
  padding: .9rem 1.2rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  line-height: 1.65;
  vertical-align: top;
}
.comparison-table thead th {
  font-family: var(--font-d);
  font-weight: 300;
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--dark);
  background: var(--bg);
  border-bottom: 2px solid var(--border);
}
.th-ips { color: var(--gold) !important; }
.th-sub {
  display: block;
  font-size: .62rem;
  font-style: italic;
  letter-spacing: .12em;
  color: var(--light);
  margin-top: .2rem;
}
.td-label { color: var(--dark); font-weight: 400; white-space: nowrap; }
.td-ips { color: var(--dark); }
.comparison-note {
  font-size: .72rem;
  color: var(--light);
  margin-top: 1rem;
  line-height: 1.7;
}
.comparison-after-note {
  margin-top: 1.5rem;
  font-size: .88rem;
  line-height: 2;
  color: var(--mid);
}

/* ── 11. LP Bridge ── */
.lp-bridge-text {
  font-family: var(--font-d);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}

/* ── 12. Cannes Strip ── */
#cannes-strip { display: block; }
.cannes-strip {
  display: grid;
  grid-template-areas: "layer";
  min-height: clamp(280px, 30vw, 440px);
  overflow: hidden;
  text-decoration: none;
}
.cannes-strip-image,
.cannes-strip-overlay,
.cannes-strip-content { grid-area: layer; }
.cannes-strip-image {
  position: relative;
  overflow: hidden;
}
.cannes-strip-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform .8s var(--ease);
}
.cannes-strip:hover .cannes-strip-image img { transform: scale(1.03); }
.cannes-strip-overlay {
  background: linear-gradient(100deg,rgba(8,4,2,.78) 0%,rgba(8,4,2,.5) 45%,rgba(8,4,2,.15) 75%,transparent 100%);
  pointer-events: none;
  z-index: 1;
}
.cannes-strip-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem var(--pad);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.cannes-strip-label {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .62rem;
  letter-spacing: .32em;
  color: rgba(184,152,90,.8);
  margin-bottom: .8rem;
}
.cannes-strip-title {
  font-family: var(--font-s);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: .06em;
  color: #fff;
  max-width: 480px;
  margin-bottom: 1.2rem;
}
.cannes-strip-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-d);
  font-size: .68rem;
  letter-spacing: .18em;
  color: rgba(255,255,255,.6);
  transition: color .3s;
}
.cannes-strip:hover .cannes-strip-cta { color: var(--gold); }

/* ── 13. Product ── */
#product {
  background: var(--white);
  padding: var(--sec-v) 0;
}
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
}
.product-image-wrap { position: relative; }
.product-bg-shape {
  position: absolute;
  inset: 10%;
  background: radial-gradient(ellipse at center, var(--bg) 0%, transparent 70%);
  z-index: 0;
}
.product-image-main {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(360px, 42vw, 520px);
  object-fit: contain;
}
.product-name-block { margin-bottom: .5rem; }
.product-name-block h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.product-type-tag {
  display: inline-block;
  font-size: .65rem;
  letter-spacing: .16em;
  color: var(--gold);
  border: 1px solid var(--gold-lt);
  padding: .2rem .8rem;
  margin-top: .4rem;
}
.product-catch {
  font-family: var(--font-d);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  color: var(--dark);
  margin: 1rem 0;
}
.product-catch-sub {
  display: block;
  font-size: .85em;
  color: var(--mid);
  margin-top: .3rem;
}
.product-desc { margin: 1.5rem 0; }
.product-desc-lead {
  font-family: var(--font-d);
  font-size: 1rem;
  letter-spacing: .06em;
  color: var(--dark);
  margin-bottom: .8rem;
}
.product-desc p { font-size: .86rem; line-height: 2; margin-top: .8rem; }
.product-note { font-size: .78em; color: var(--light); }
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin: 1.5rem 0;
}
.product-detail-item {
  background: var(--white);
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.pdi-en {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--gold);
}
.product-detail-item strong { font-size: .82rem; color: var(--dark); font-weight: 400; }
.product-detail-item p { font-size: .76rem; line-height: 1.7; color: var(--light); margin: 0; }
.product-specs {
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}
.product-spec-row {
  display: flex;
  gap: 1.5rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.product-spec-row dt { color: var(--dark); font-weight: 400; min-width: 80px; flex-shrink: 0; }
.product-spec-row dd { color: var(--mid); }
.product-cta-block { margin-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.btn-ec-large { font-size: .82rem; padding: 1rem 2.5rem; }
.product-btn-secondary { gap: .8rem; }

/* ── Product Detail Section（PC全幅、SP通常） ── */
.product-detail-section {
  margin-top: clamp(2rem, 5vw, 4rem);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  /* PC: 4カードを 1×4 横並びに */
  .product-detail-section .product-detail-grid {
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 2.5rem;
  }
  .product-detail-section .product-detail-item {
    padding: 1.4rem 1.3rem;
  }
  .product-detail-section .product-specs {
    max-width: 720px;
    margin: 0 auto 1.5rem;
  }
  .product-detail-section .ingredient-list {
    max-width: 720px;
    margin: 0 auto 2rem;
  }
  /* CTAブロックは中央寄せで全幅活用 */
  .product-detail-section .product-cta-block {
    max-width: 760px;
    margin: 2.5rem auto 0;
  }
  .product-detail-section .product-btn-secondary {
    justify-content: center;
  }
}

/* ── 14. Global ── */
#global {
  background: var(--bg);
  padding: var(--sec-v) 0;
}
.global-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.global-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.global-text h2 { margin: .5rem 0 1rem; }
.global-text p { font-size: .88rem; line-height: 2; margin-top: .8rem; }
.global-partner {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--border);
}
.global-partner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.global-partner-label {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: .8rem;
}
.global-partner-text p { font-size: .86rem; line-height: 2; }
.global-partner-image { width: 100%; height: auto; object-fit: cover; }

/* ── 15. EC Banner ── */
#shop {
  background: var(--dark);
  padding: 3.5rem 0;
}
.ec-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.ec-banner-label {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .65rem;
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: .5rem;
}
.ec-banner-title {
  font-family: var(--font-s);
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 300;
  letter-spacing: .06em;
  color: var(--white);
  margin-bottom: .5rem;
}
.ec-banner-lead { font-size: .82rem; color: rgba(255,255,255,.5); }
.btn-ec-banner { font-size: .8rem; padding: .9rem 2rem; flex-shrink: 0; }

/* ── 16. FAQ ── */
#faq {
  background: var(--bg);
  padding: var(--sec-v) 0;
}
.faq-inner { max-width: 720px; margin: 0 auto; }
.faq-list { margin-top: 2.5rem; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-s);
  font-size: .88rem;
  font-weight: 300;
  letter-spacing: .04em;
  color: var(--dark);
  transition: color .25s;
}
.faq-question:hover { color: var(--gold); }
.faq-q-mark { color: var(--gold); font-weight: 400; flex-shrink: 0; }
.faq-question-text { flex: 1; line-height: 1.65; }
.faq-icon {
  width: 16px; height: 16px; flex-shrink: 0; position: relative; margin-top: .25rem;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--gold);
  transition: transform .3s, opacity .3s;
}
.faq-icon::before { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.faq-icon::after  { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.faq-item.open .faq-icon::after { opacity: 0; transform: translateX(-50%) scaleY(0); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq-answer-inner {
  padding: .2rem 0 1.4rem 2.2rem;
  font-size: .86rem;
  line-height: 2;
  color: var(--mid);
}
.faq-answer-inner a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }

/* ── 17. Contact ── */
#contact {
  background: var(--dark);
  padding: var(--sec-v) 0;
}
.contact-inner { max-width: 620px; margin: 0 auto; text-align: center; }
#contact .sec-eyebrow { justify-content: center; }
#contact .sec-eyebrow::before { display: none; }
#contact h2 {
  color: var(--white);
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  margin: .5rem 0 1rem;
}
.contact-lead {
  font-size: .86rem;
  line-height: 2;
  color: rgba(255,255,255,.55);
  margin-bottom: 2.5rem;
}
.contact-form { text-align: left; }
.form-honeypot { position: absolute; opacity: 0; pointer-events: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1.2rem; }
.form-group label {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
  margin-bottom: .5rem;
  font-family: var(--font-d);
}
.form-required { color: var(--gold); margin-left: .2em; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: .75rem 1rem;
  color: var(--white);
  font-family: var(--font-n);
  font-size: .86rem;
  outline: none;
  transition: border-color .25s;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--gold); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: '▾';
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.4);
  pointer-events: none;
  font-size: .7rem;
}
.form-group select { cursor: pointer; color: rgba(255,255,255,.7); }
.form-group select option { background: var(--dark); color: var(--white); }
.form-group textarea { min-height: 120px; resize: vertical; }
.form-consent { margin-bottom: 1.5rem; }
.consent-label { display: flex; align-items: flex-start; gap: .8rem; cursor: pointer; }
.consent-check { margin-top: .2rem; flex-shrink: 0; accent-color: var(--gold); }
.consent-text { font-size: .78rem; line-height: 1.75; color: rgba(255,255,255,.45); }
.consent-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.form-submit-wrap { text-align: center; }
#contact-submit-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── 18. Footer ── */
footer {
  background: #0e0d0b;
  padding: 4rem 0 2rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  margin-bottom: 2rem;
}
.footer-brand-name {
  font-family: var(--font-d);
  font-style: normal;   /* italic → normal: ハイフン斜め対策 */
  font-size: 1.5rem;
  color: var(--white);
  letter-spacing: .05em;
  margin-bottom: .5rem;
}
.footer-brand-name span { color: var(--gold); }
.footer-tagline {
  font-family: var(--font-d);
  font-size: .72rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.3);
  margin-bottom: 1rem;
}
.footer-desc {
  font-size: .76rem;
  line-height: 1.85;
  color: rgba(255,255,255,.25);
}
.footer-col-title {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a {
  font-size: .76rem;
  letter-spacing: .08em;
  color: rgba(255,255,255,.3);
  transition: color .25s;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-copy { font-size: .68rem; color: rgba(255,255,255,.18); letter-spacing: .06em; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: .68rem; color: rgba(255,255,255,.22); letter-spacing: .08em; transition: color .25s; }
.footer-legal a:hover { color: var(--gold); }

/* ── 19. Cookie Banner ── */
#cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(20,20,18,.96);
  backdrop-filter: blur(8px);
  padding: 1.2rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  z-index: 300;
  transform: translateY(100%);
  transition: transform .5s var(--ease);
  flex-wrap: wrap;
}
#cookie-banner.visible { transform: translateY(0); }
#cookie-banner p { font-size: .76rem; color: rgba(255,255,255,.5); line-height: 1.7; }
#cookie-banner a { color: var(--gold); text-decoration: underline; }
#cookie-accept {
  background: var(--gold);
  color: var(--white);
  border: none;
  padding: .5rem 1.5rem;
  font-family: var(--font-d);
  font-size: .72rem;
  letter-spacing: .14em;
  flex-shrink: 0;
  transition: opacity .25s;
}
#cookie-accept:hover { opacity: .82; }

/* ── 20. Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .32s; }
.reveal-delay-4 { transition-delay: .45s; }
.reveal-delay-5 { transition-delay: .58s; }

/* ── 21. Responsive ── */
@media (max-width: 1024px) {
  .beauty-grid,
  .product-grid,
  .global-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .global-partner-grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #hero { grid-template-columns: minmax(0, 1fr); min-height: auto; }
  .hero-bg { display: none; }
  .hero-copy { padding: 2.5rem var(--pad); }
  .hero-image { padding: 1.5rem var(--pad); justify-content: flex-start; }
  .hero-image img { max-width: 320px; }
  .hero-scroll { display: none; }
  .beauty-image img { max-height: 400px; width: 100%; object-fit: cover; object-position: center top; }
  .product-image-main { height: clamp(300px, 50vw, 420px); }
}

/* SP hero: 商品画像 → テキスト → CTA の順 */

/* ──────────────────────────────────────────────
   Special Offer Block — ブランド始動 × カンヌ参画 ダブル記念
   ────────────────────────────────────────────── */
:root {
  --c-navy: #2c4a7a;
  --c-navy-dark: #1a3a5c;
  --c-blue-grey-bg: #eef1f5;
  --c-blue-grey-line: #c8d2e0;
}
.special-offer {
  margin: 2.5rem 0 1.5rem;
  padding: 2.4rem 2rem 2.2rem;
  background: linear-gradient(180deg, #eef1f5 0%, #e6ebf3 100%);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  position: relative;
}
.special-offer::before,
.special-offer::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 24px;
  height: 1px;
  background: var(--gold);
}
.special-offer::before { top: -1px; transform: translateX(-50%) translateY(-3px); }
.special-offer::after  { bottom: -1px; transform: translateX(-50%) translateY(3px); }

.special-offer-label {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 1px solid var(--gold);
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(.78rem, 1.2vw, .92rem);
  font-weight: 400;
  letter-spacing: .15em;
  color: var(--dark);
  margin: 0 auto 1rem;
  text-align: center;
}
.special-offer-label-wrap {
  text-align: center;
  margin-bottom: 1.8rem;
}
.special-offer-label-jp {
  display: block;
  margin-top: .55rem;
  font-family: var(--font-s);
  font-style: normal;
  font-size: clamp(.74rem, 1vw, .85rem);
  letter-spacing: .12em;
  color: var(--c-navy);
  font-weight: 400;
}

.special-offer-body {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}
.special-offer-badge {
  display: inline-block;
  border: 1.5px solid var(--gold);
  background: linear-gradient(135deg, #2c4a7a 0%, #4a6a98 100%);
  color: #fff;
  padding: 1.2rem 2.2rem;
  font-family: var(--font-s);
  letter-spacing: .04em;
  line-height: 1.4;
  margin-bottom: 1.6rem;
  min-width: 240px;
}
.special-offer-badge-eyebrow {
  display: block;
  font-size: clamp(.72rem, 1vw, .82rem);
  letter-spacing: .2em;
  font-weight: 400;
  margin-bottom: .35rem;
  opacity: .92;
}
.special-offer-badge-main {
  display: block;
  font-family: var(--font-s);
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 500;
  letter-spacing: .04em;
}
.special-offer-badge-sub {
  display: block;
  font-size: clamp(.7rem, .95vw, .8rem);
  letter-spacing: .2em;
  margin-top: .45rem;
  font-weight: 300;
  opacity: .92;
}

.special-offer-prices {
  font-family: var(--font-s);
}
.special-offer-original {
  font-size: clamp(.78rem, 1.1vw, .9rem);
  color: var(--light);
  text-decoration: line-through;
  text-decoration-color: var(--light);
  margin-bottom: .9rem;
  letter-spacing: .04em;
}
.special-offer-sale-eyebrow {
  display: block;
  font-family: var(--font-d);
  font-style: italic;
  font-size: clamp(.82rem, 1.1vw, .95rem);
  letter-spacing: .15em;
  color: var(--gold);
  margin-bottom: .35rem;
  font-weight: 400;
}
.special-offer-sale {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  color: var(--c-navy-dark);
  white-space: nowrap;
}
.special-offer-sale-price {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.1;
  color: var(--c-navy-dark);
}
.special-offer-sale-tax {
  font-size: clamp(.85rem, 1.1vw, .95rem);
  font-weight: 400;
  color: var(--c-navy);
  letter-spacing: .04em;
}

.special-offer-shipping {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--c-blue-grey-line);
  font-family: var(--font-s);
  font-size: clamp(.74rem, 1vw, .82rem);
  color: var(--mid);
  text-align: center;
  letter-spacing: .04em;
  line-height: 1.7;
}

.special-offer-cta {
  display: block;
  margin: 1.8rem auto 0;
  max-width: 460px;
  padding: 1.1rem 2rem;
  background: var(--c-navy);
  color: #fff;
  font-family: var(--font-s);
  font-size: clamp(.85rem, 1.15vw, .95rem);
  font-weight: 500;
  letter-spacing: .12em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--c-navy);
  transition: all .3s var(--ease);
  position: relative;
}
.special-offer-cta:hover {
  background: var(--c-navy-dark);
  border-color: var(--c-navy-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(44, 74, 122, .25);
}
.special-offer-cta svg {
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: .6rem;
  vertical-align: -2px;
}

/* SP override */
@media (max-width: 767px) {
  .special-offer {
    padding: 2rem 1.2rem 1.8rem;
    margin: 2rem 0 1.2rem;
  }
  .special-offer-badge {
    padding: 1rem 1.6rem;
    min-width: 0;
    width: 100%;
    max-width: 280px;
  }
  .special-offer-sale {
    flex-direction: column;
    gap: .25rem;
    white-space: normal;
  }
  .special-offer-sale-price {
    font-size: 1.7rem;
  }
  .special-offer-sale-tax {
    font-size: .82rem;
  }
  .special-offer-cta {
    font-size: .82rem;
    padding: 1rem 1.2rem;
    letter-spacing: .08em;
  }
}

/* ──────────────────────────────────────────────
   Hero Special Notice — ヒーロー内のコンパクト記念バナー
   ────────────────────────────────────────────── */
.hero-special-notice {
  display: block;
  max-width: 32em;
  margin: 1.4rem 0 1.6rem;
  padding: .8rem 1.1rem;
  border-top: 1px solid rgba(184, 152, 90, .35);
  border-bottom: 1px solid rgba(184, 152, 90, .35);
  font-family: var(--font-s);
  line-height: 1.6;
}
.hero-special-eyebrow {
  display: block;
  font-size: clamp(.66rem, .9vw, .76rem);
  letter-spacing: .14em;
  color: var(--c-navy);
  margin-bottom: .35rem;
  font-weight: 400;
}
.hero-special-price {
  display: block;
  font-size: clamp(.82rem, 1.15vw, .98rem);
  letter-spacing: .04em;
  color: var(--dark);
}
.hero-special-price s {
  color: var(--light);
  font-weight: 300;
  margin-right: .35em;
  letter-spacing: .02em;
}
.hero-special-price .arrow {
  color: var(--gold);
  margin: 0 .35em;
  font-style: italic;
  font-family: var(--font-d);
}
.hero-special-price strong {
  color: var(--c-navy-dark);
  font-weight: 600;
  font-size: 1.08em;
  letter-spacing: .02em;
}
@media (max-width: 600px) {
  .hero-special-notice { padding: .7rem .9rem; margin: 1.2rem 0 1.4rem; }
}

/* ──────────────────────────────────────────────
   汎用ユーティリティ：SP時に内部の <br> を無効化
   ──────────────────────────────────────────────
   【目的】
     PC表示では意図的な改行（縦並びの整え・リズム）を残しつつ、
     SP表示では狭い画面幅で不自然な改行が発生するのを防ぐ。
     
   【使い方】
     <p class="no-sp-br">本文1<br>本文2</p>
     → PC：「本文1」改行「本文2」
     → SP：「本文1 本文2」（自然折り返し）
     
   【注意】
     見出し（h1〜h6）のタイトル改行はデザイン的意図が強いため、
     このクラスは付けず、改行を維持する想定。本文 <p> 専用。
   ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .no-sp-br br { display: none; }
}

/* ── 22. SP Typography System (max-width: 767px) ── */

/* ============================================================
   IMAGE ADDITIONS — バナー・ビジュアル・ピラー画像
   ============================================================ */

/* ── A. img-05/06 横長バナー ── */
.img-banners {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.img-banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.2rem clamp(1.5rem,5vw,5rem);
  min-height: 80px;
  overflow: hidden;
  text-decoration: none;
  transition: opacity .25s;
}
.img-banner:hover { opacity: .92; }
.img-banner-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .6s var(--ease);
}
.img-banner:hover .img-banner-bg { transform: scale(1.02); }
.img-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(80, 18, 22, .82);
  z-index: 1;
}
.img-banner-overlay--dark {
  background: rgba(8, 10, 18, .78);
}
.img-banner-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  flex: 1;
  min-width: 0;
}
.img-banner-label {
  font-family: var(--font-d);
  font-style: italic;
  font-size: .6rem;
  letter-spacing: .28em;
  color: rgba(184,152,90,.85);
  white-space: nowrap;
  flex-shrink: 0;
}
.img-banner-label--gold { color: var(--gold); }
.img-banner-title {
  font-family: var(--font-s);
  font-size: clamp(.75rem, 1.4vw, .9rem);
  font-weight: 300;
  letter-spacing: .05em;
  color: rgba(255,255,255,.92);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.img-banner-cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-d);
  font-size: .68rem;
  letter-spacing: .16em;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .25s;
}
.img-banner-cta--gold { color: var(--gold); }
.img-banner:hover .img-banner-cta { color: var(--gold); }

/* ── B. what 2カラムレイアウト ── */
.what-top-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3rem;
}
.what-visual img {
  width: 100%;
  aspect-ratio: auto;         /* infographic は横長なので auto に */
  height: auto;
  max-width: 640px;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* ── C. ピラー画像 ── */
.ipillar-img {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  margin-bottom: .8rem;
}
.ipillar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s var(--ease);
}
.ipillar-item:hover .ipillar-img img { transform: scale(1.04); }

/* ── D. Grade & Story ワイドビジュアル ── */
.grade-story-section {
  position: relative;
  overflow: hidden;
}
.grade-story-img img {
  width: 100%;
  height: clamp(280px, 32vw, 480px);
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
.grade-story-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8,6,4,.65) 0%,
    rgba(8,6,4,.45) 45%,
    rgba(8,6,4,.15) 80%,
    transparent 100%
  );
  z-index: 1;
}
.grade-story-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0 clamp(1.5rem,5vw,5rem);
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
}
.grade-story-content .lp-bridge-text {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 2vw, 1.4rem);
}

/* ── SP 対応 ── */

/* ── 言語切り替え ── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-left: .8rem;
  font-family: var(--font-d);
  font-size: .65rem;
  letter-spacing: .1em;
}
.lang-switcher a,
.lang-switcher span {
  color: var(--light);
  text-decoration: none;
  padding: .15rem .3rem;
  border-radius: 2px;
  transition: color .2s;
}
.lang-switcher a:hover { color: var(--gold); }
.lang-switcher .lang-active {
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  pointer-events: none;
}
.lang-divider {
  color: var(--border);
  font-size: .55rem;
  line-height: 1;
}

@media (min-width: 1024px) {
.cannes-strip {
    min-height: 0;
    height: clamp(360px, 38vw, 520px);
  }
  .cannes-strip-image img {
    object-position: center 38%;
  }
  /* PCのみ: 見出しを大きく・1行表示 */
  .cannes-strip-title {
    font-size: clamp(1.4rem, 1.9vw, 1.85rem);
    line-height: 1.25;
    max-width: 1100px;   /* 折り返し余地を十分確保 */
    white-space: nowrap; /* 1行固定 */
  }

.ips-infographic { padding: 0; }
}

@media (max-width: 767px) {
#hero {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding-top: var(--nav-h);
  }
  .hero-image {
    order: -1;                /* 画像を最上部へ */
    padding: 1rem var(--pad) .5rem;
    justify-content: center;
    height: auto;
  }
  .hero-image img {
    width: min(80vw, 300px);  /* 画面幅の80%・上限300px */
    max-height: 42vh;         /* 高さはVH 42%以内 */
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }
  .hero-copy {
    order: 0;
    padding: .5rem var(--pad) 1.8rem;
  }
  .hero-scroll { display: none; }

:root { --sec-v: clamp(40px, 7vw, 64px); }
  .br-sp { display: block; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: 2rem; }
  .ec-banner-inner { flex-direction: column; align-items: flex-start; text-align: left; }
  .integrated-pillars { grid-template-columns: 1fr; border-left: none; border-top: none; }
  .ipillar-item {
    border-left: 2px solid var(--gold-lt);
    border-right: none;
    border-top: none;
    padding: 1.2rem 1rem;
  }
  .ipillar-item:last-child { border-bottom: 1px solid var(--border); }
  .product-detail-grid { grid-template-columns: 1fr; }
  .cannes-strip { min-height: clamp(180px, 50vw, 260px); }
  .cannes-strip-title { font-size: clamp(.88rem, 4vw, 1rem); }
  .nticker-inner { flex-direction: column; gap: .8rem; padding: .9rem 0; }
  .nticker-head::after { display: none; }
  .nticker-title { -webkit-line-clamp: 2; }
  .comparison-scroll-hint { display: flex; }
  .hero-h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); }

/* globals */
  h2   { font-size: clamp(1.35rem, 6.5vw, 1.7rem); line-height: 1.3; letter-spacing: .04em; }
  h3   { font-size: clamp(.95rem, 4.5vw, 1.1rem);  line-height: 1.4; }
  p    { font-size: clamp(.84rem, 3.8vw, .95rem);   line-height: 1.85; }
  .lead { font-size: clamp(.9rem, 4.2vw, 1rem);    line-height: 1.7; }

  /* hero */
  .hero-h1  { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.22; letter-spacing: .06em; }

  /* what */
  .what-header .lead { font-size: clamp(.9rem, 4vw, 1.02rem); line-height: 1.7; }
  .what-header .desc { font-size: clamp(.82rem, 3.6vw, .92rem); line-height: 1.8; }
  .what-header { margin-bottom: 2rem; }

  /* pillars */
  .ipillar-desc { font-size: clamp(.7rem, 3vw, .74rem); line-height: 1.7; letter-spacing: 0; }
  .ipillar-key  { font-size: .7rem; line-height: 1.6; }
  .ipillar-key-kw { white-space: nowrap; }

  /* ipsx-disclosure SP */
  .ipsx-disclosure-summary { font-size: .78rem; padding: 1rem 0; }
  .ipsx-disclosure-content p { font-size: clamp(.8rem, 3.6vw, .9rem); line-height: 1.85; }
  .ipsx-disclosure.ingredient-list .ipsx-disclosure-summary { font-size: .72rem; }
  .ipsx-disclosure.ingredient-list .ipsx-disclosure-content { font-size: .72rem; }
  .ipsx-disclosure.ingredient-list .ipsx-disclosure-content p { font-size: .72rem; }

  /* news ticker */
  .nticker-title { font-size: clamp(.78rem, 3.5vw, .88rem); line-height: 1.6; }
  .nticker-date  { font-size: .65rem; }

  /* beauty */
  .beauty-text h2 { line-height: 1.28; }
  .beauty-text p  { font-size: clamp(.82rem, 3.8vw, .92rem); line-height: 1.8; }

  /* science */
  .comparison-h3   { font-size: clamp(.86rem, 4vw, .98rem); }
  .comparison-table { font-size: .76rem; }
  .comparison-after-note { font-size: clamp(.82rem, 3.8vw, .92rem); line-height: 1.8; }

  /* cannes */
  .lp-bridge-text { font-size: clamp(.9rem, 4.2vw, 1.05rem); line-height: 1.65; }

  /* product */
  .product-catch  { font-size: clamp(.95rem, 4.5vw, 1.1rem); line-height: 1.55; }
  .product-desc p { font-size: clamp(.8rem, 3.6vw, .9rem); line-height: 1.85; }
  .product-detail-item p { font-size: .74rem; }
  .product-spec-row { font-size: .8rem; }

  /* global */
  .global-text p  { font-size: clamp(.82rem, 3.8vw, .92rem); line-height: 1.85; }
  .global-partner-text p { font-size: clamp(.82rem, 3.8vw, .92rem); }

  /* ec banner */
  .ec-banner-title { font-size: clamp(.95rem, 4.5vw, 1.15rem); }
  .ec-banner-lead  { font-size: clamp(.78rem, 3.5vw, .88rem); }

  /* faq */
  .faq-question-text { font-size: clamp(.84rem, 3.8vw, .95rem); line-height: 1.55; }
  .faq-answer-inner  { font-size: clamp(.8rem, 3.6vw, .9rem); line-height: 1.85; padding-left: 1.5rem; }

  /* contact */
  .contact-lead { font-size: clamp(.8rem, 3.6vw, .9rem); line-height: 1.85; }

  .what-top-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .what-visual { order: -1; }        /* SP: 画像→テキストの順 */
  .what-visual img {
    max-width: 100%;
    height: auto;
    aspect-ratio: auto;              /* 横長infographicを自然に表示 */
  }
  .img-banner-content { flex-direction: column; gap: .3rem; }
  .img-banner-title { -webkit-line-clamp: 2; }
  .grade-story-img img { height: clamp(200px, 55vw, 320px); }
  .grade-story-content .lp-bridge-text { font-size: clamp(.88rem, 4vw, 1.05rem); }

.lang-switcher { margin-left: .4rem; }
  .lang-switcher a, .lang-switcher span { padding: .1rem .25rem; }
}

/* ── パンフ由来 強キャッチバナー（Manifesto / Tagline / Concept） ── */
.brand-manifesto {
  margin: 4rem auto 3rem;
  max-width: 1100px;
  padding: 2.4rem clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  position: relative;
}
.brand-manifesto::before,
.brand-manifesto::after {
  content: "";
  display: block;
  width: 36px; height: 1px;
  background: var(--gold);
  margin: 0 auto 1.4rem;
}
.brand-manifesto::after { margin: 1.4rem auto 0; }
.brand-manifesto-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.65rem, 1vw, .78rem);
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.brand-manifesto-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.15rem, 2.4vw, 1.85rem);
  font-weight: 300;
  letter-spacing: .06em;
  line-height: 1.55;
  color: #1a1a1a;
  margin: 0;
}
.brand-manifesto-title strong {
  font-weight: 400;
  color: var(--gold);
}
.signal-concept {
  margin: 3rem auto 2.5rem;
  max-width: 900px;
  padding: 2rem clamp(1.5rem, 4vw, 2.8rem);
  text-align: center;
  background: linear-gradient(135deg, rgba(184, 152, 90, .04), rgba(184, 152, 90, .01));
  border-radius: 2px;
  border: 1px solid rgba(184, 152, 90, .12);
}
.signal-concept-label {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(.7rem, 1.1vw, .85rem);
  letter-spacing: .3em;
  color: var(--gold);
  margin-bottom: .8rem;
  text-transform: uppercase;
}
.signal-concept-title {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 300;
  letter-spacing: .08em;
  line-height: 1.6;
  color: #1a1a1a;
  margin: 0;
}
@media (max-width: 600px) {
  .brand-manifesto { padding: 1.8rem 1.2rem; margin: 2.5rem auto 2rem; }
  .signal-concept { padding: 1.5rem 1.2rem; margin: 2rem auto 1.5rem; }
}

/* ── iPS インフォグラフィック（3言語共通） ── */
.ips-infographic {
  margin: 32px auto;
  max-width: 1100px;
  padding: 0 16px;
}
.ips-infographic__img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
/* EN/FR overlay 用：PNG 背景 + SVG ラベルレイヤー */
.ips-infographic__stack {
  position: relative;
  width: 100%;
  margin: 0 auto;
}
.ips-infographic__bg {
  display: block;
  width: 100%;
  height: auto;
}
.ips-infographic__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.ips-infographic__note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.75;
  color: #777;
  letter-spacing: 0.01em;
  text-align: left;
}
.ips-infographic__terms {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.75;
  color: #7a7a7a;
  letter-spacing: 0.01em;
  text-align: left;
}
.ips-infographic__terms strong {
  color: #666;
  font-weight: 600;
}

@media (max-width: 767px) {
  .ips-infographic__note,
  .ips-infographic__terms {
    font-size: 11px;
    line-height: 1.7;
  }
}