/* ==========================================================================
   LINK+U Creator Portal — Design tokens + shared components
   Base tokens inherit LINK+U Design System (greige/ink/spacing/radius/shadow).
   Typography + product accent tokens follow this project's coding brief
   (Marcellus / Shippori Mincho / Jost / Noto Sans JP, 4 product accents).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Noto+Sans+JP:wght@400;500;600;700&family=Jost:wght@400;500;600&display=swap');

:root {
  /* — Base — */
  --linku-paper:   #F7F6F2;
  /* ---- タイプスケール（16px基準） ----
     rem で指定しているので、利用者がブラウザやOSで文字サイズを大きくすると
     このサイトの文字もいっしょに大きくなる。px で書くとそれが効かない。
     新しく font-size を足すときは、必ずこの中から選ぶ。増やさない。 */
  --fs-note:     0.75rem;    /* 12px 注釈・タグ。これより小さくしない */
  --fs-caption:  0.875rem;   /* 14px 補助・キャプション・ラベル */
  --fs-body:     1rem;       /* 16px 本文（基準） */
  --fs-lead:     1.125rem;   /* 18px リード文・カード見出し */
  --fs-h4:       1.25rem;    /* 20px */
  --fs-h3:       1.375rem;   /* 22px */
  --fs-h2:       1.5rem;     /* 24px */
  --fs-h1:       1.75rem;    /* 28px */
  --fs-display:  2rem;       /* 32px */
  --fs-hero-sm:  2.25rem;    /* 36px */
  --fs-hero:     2.5rem;     /* 40px */
  --fs-hero-lg:  2.75rem;    /* 44px */

  --linku-white:   #FFFFFF;
  --linku-ink:     #58585A;
  --linku-ink-soft:#717173;
  --linku-border:  #E4E1D8;
  --linku-border-strong: #CDC9BD;

  /* — Semantic status — */
  --linku-ng:      #B3352A;
  --linku-ng-bg:   #FBECEA;
  --linku-ok:      #3F7A57;
  --linku-ok-bg:   #EBF3EE;
  /* 控えめな注意色（ブランドトーンを崩さない範囲。強い警告赤は使わない） */
  --linku-note:    #8A6A3B;
  --linku-note-bg: #F7F2E8;
  --linku-note-bd: #E3D7C0;

  /* — Buttons — */
  --linku-btn-primary-bg: #58585A;
  --linku-btn-primary-fg: #FFFFFF;
  --linku-btn-secondary-bg: #B7ACA1;
  --linku-btn-secondary-fg: #FFFFFF;

  /* — Product accents (4 lines) — */
  --linku-sand-tint:  #e2dfd6;
  --linku-sand-deep:  #6d6658;
  --linku-blush-tint: #e6d9e1;
  --linku-blush-deep: #76627e;
  --linku-aqua-tint:  #aed5d4;
  --linku-aqua-deep:  #477c8a;
  --linku-green-tint: #b4cfb8;
  --linku-green-deep: #547464;

  /* — Spacing — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px;
  --space-9: 80px; --space-10: 112px;
  --container: 720px;

  /* — Radius — */
  --radius-3: 3px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 30px;
  --radius-circle: 50%;

  /* — Shadow — */
  --shadow-sm: 0 4px 16px rgba(88,88,90,0.07);
  --shadow-md: 0 12px 36px rgba(88,88,90,0.09);

  /* — Motion — */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 320ms;

  /* — Typography — */
  --font-jp:     'Noto Sans JP', sans-serif;
  --font-latin:  'Jost', sans-serif;
  --font-serif:  'Marcellus', serif;
}

* , *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: 0.02em;
  color: var(--linku-ink);
  background: var(--linku-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-jp); font-weight: 600; color: var(--linku-ink); }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
table { border-collapse: collapse; width: 100%; }

.l-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-4); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===== Header ===== */
.site-header {
  background: var(--linku-white);
  border-bottom: 1px solid var(--linku-border);
  position: sticky; top: 0; z-index: 40;
}
.site-header .l-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
@media (min-width: 720px) {
  /* トップの .hero-band .header-row と同じ全幅・左右32pxに揃える */
  .site-header .l-container {
    max-width: none; padding-inline: var(--space-6);
    display: grid; grid-template-columns: 1fr auto 1fr;
  }
  .site-header .l-container > a:first-child { grid-column: 2; justify-self: center; }
  .site-header .l-container > .hamburger { grid-column: 3; justify-self: end; }
}
.site-logo { font-family: var(--font-serif); font-size: var(--fs-h3); letter-spacing: 0.06em; color: var(--linku-ink); }
.site-logo span { font-family: var(--font-jp); }
.site-logo-img { height: 36px; width: auto; }

.hamburger {
  width: 32px; height: 32px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--linku-ink); transition: transform var(--dur-base) var(--ease-soft), opacity var(--dur-fast); }
.hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* メニューは常に最前面。全幅の帯ではなく、右端から出るパネルにする
   （ヘッダー40／アンカーナビ30より上のz-index） */
.header-menu {
  display: none; position: fixed; top: 72px; right: 0; left: auto;
  width: min(340px, 88vw);
  background: var(--linku-white);
  border: 1px solid var(--linku-border); border-top: none; border-right: none;
  border-bottom-left-radius: var(--radius-md);
  box-shadow: var(--shadow-md); max-height: calc(100vh - 72px); overflow-y: auto;
  z-index: 60;
}
.header-menu.is-open { display: block; }
.header-menu ul { display: flex; flex-direction: column; }
.header-menu a { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4); border-top: 1px solid var(--linku-border); font-size: var(--fs-body); font-weight: 500; }
.header-menu a:first-child { border-top: none; }
.header-menu .menu-label {
  padding: var(--space-3) var(--space-4) var(--space-1); font-size: var(--fs-note); font-weight: 600;
  color: var(--linku-ink-soft); letter-spacing: 0.06em; border-top: 1px solid var(--linku-border);
}
.header-menu .menu-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ===== Home: hero band =====
   スマホは「KVの上に文字を重ねない」。重ねると
     ① 文字が商品パッケージに被って読みにくい
     ② 文字を読ませるための白フェードでKVが沈み、写真がもったいない
   の両方が同時に起きるため、KVと文字を上下に分ける。
   PC（720px〜）は横幅に余裕があり文字が商品に被らないので、従来どおり重ねる。 */
.hero-band {
  position: relative; padding: 0 0 var(--space-7);
  color: var(--linku-ink); overflow: hidden;
  background: var(--linku-paper);
}
/* スマホのKV。画像の比率（1772:1231）で置くので4アイテム全部が入る。
   coverで縦長に切ると中央2本しか見えなくなるため、比率を画像に合わせる。 */
.hero-kv {
  position: relative;
  /* KVは横長の集合カットで、商品は中央の帯にしか写っていない。
     画像を全幅で置くと1本あたり40pxしかなく、商品の存在感が出ない。
     そこで background-size を拡大して商品まで寄り、
     上下左右の余白（バブルだけの領域）を切り落とす。
     4アイテムが写っている範囲は画像の横24%〜76%・縦20%〜72%（グリッドを重ねて実測）。
     4本とも画面内に収める拡大率の上限は約178%。175%で左右に17pxずつ余白が残る。
     ・175%＝375px幅の端末で画像を656px相当に拡大（1本あたり59〜79px）
     ・center 28% ＝ 商品の帯を上寄せにして、下の空白（バブルだけの領域）を切る
     ・高さは 25/24（375px幅で360px）。商品の上に約56px残り、ロゴ行と重ならない */
  aspect-ratio: 25 / 24;
  background: url('img/link+u_KV_1206.webp') center 28% / 175% auto no-repeat;
  background-color: #eef0f1;
}
/* 下端だけ地色へ溶かす。硬い境界線を出さないため */
.hero-kv::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg,
    rgba(247,246,242,0) 0%, rgba(247,246,242,.6) 60%,
    rgba(247,246,242,.92) 85%, var(--linku-paper) 100%);
}
/* KVを敷く土台。スマホでは content:none で消し、PC（720px〜）で復活させる。
   位置指定はここに置く（PC側は背景の指定だけを上書きする）。 */
.hero-band::before {
  content: none;
  position: absolute; inset: 0; z-index: 0;
}
.hero-band > * { position: relative; z-index: 1; }
.hero-band .header-row {
  position: absolute; top: var(--space-4); left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-4);
}
.hero-band .hero-inner { padding: var(--space-5) var(--space-4) 0; text-align: center; }
/* 3つのボタンは1行に収める。均等割りにして、押し分けやすい幅を確保する */
.hero-band .header-nav {
  display: flex; flex-wrap: nowrap; justify-content: center; align-items: stretch;
  gap: 6px;
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em;
  margin-top: var(--space-5);
  /* 3つを1行に収めるため、ボタン列だけ本文より少し外側まで使う（画面端からは8px残る） */
  margin-inline: calc(var(--space-2) * -1);
}
/* 320px級のさらに狭い端末では、無理に1行にせず2段に折り返す（文字を潰さない） */
@media (max-width: 339px) {
  .hero-band .header-nav { flex-wrap: wrap; }
}
.hero-band .header-nav a {
  /* 3つを必ず1行に収める。360px級の狭い端末では、いちばん長いラベルだけが
     2行に折り返して高さが揃う（横スクロールにはしない）。 */
  flex: 0 0 auto; white-space: nowrap; text-align: center;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 10px; line-height: 1.35; background: var(--linku-white);
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill);
}

/* ヒーローを通過したら、ロゴ行を白い固定ヘッダーとして再利用する（他ページの
   .site-header と同じ見え方。ボタンを増やさないのでメニュー開閉はそのまま動く） */
body.is-scrolled .hero-band .header-row {
  position: fixed; top: 0; left: 0; right: 0; height: 72px;
  padding: 0 var(--space-4);
  background: var(--linku-white);
  border-bottom: 1px solid var(--linku-border);
  box-shadow: var(--shadow-sm);
  z-index: 40;
  animation: header-drop var(--dur-base) var(--ease-soft);
}
body.is-scrolled .hero-band .header-row .site-logo-img { filter: none; }
body.is-scrolled .hero-band .header-row .hamburger span { background: var(--linku-ink); }
@keyframes header-drop { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.is-scrolled .hero-band .header-row { animation: none; }
}

.hero-headline {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1);
  letter-spacing: 0.14em; line-height: 1.4; margin: 0 0 var(--space-3); color: var(--linku-ink);
}
.hero-copy { font-size: var(--fs-body); line-height: 1.8; max-width: 34em; margin-inline: auto; color: var(--linku-ink); }
/* 文節ごとに inline-block にして、折り返しが語の途中で起きないようにする。
   画面幅に応じて自動でまとまるので、端末別に <br> を出し分けなくてよい。 */
.hero-copy span { display: inline-block; }

@media (min-width: 720px) {
  /* PCでは cover のままだと写真が横幅いっぱいまで拡大され、顔の上下が切れる。
     写真は高さ100%（等倍相当）まで縮小して全体を見せ、左右の余白は
     写真の地色 #F2F2F2 で埋める。グラデーションは写真と地色の両方に
     同じようにかかるため、つなぎ目は出ない。 */
  .hero-band::before {
    background-color: #f4f5f6;
    background-image:
      linear-gradient(180deg,
        rgba(255,255,255,.26) 0%, rgba(255,255,255,.22) 80%,
        rgba(252,251,249,.26) 93%, rgba(249,248,244,.80) 98%, rgb(247,246,242) 100%),
      url('img/link+u_KV_1206.webp');
    background-size: 100% 100%, cover;
    background-position: center, center 42%;
    background-repeat: no-repeat, no-repeat;
  }

  /* PCは従来どおりKVに文字を重ねる（横に余裕があり、文字が商品に被らないため） */
  .hero-kv { display: none; }
  .hero-band::before { content: ''; }
  .hero-band {
    min-height: 420px; padding: var(--space-4) 0 var(--space-6);
    display: flex; flex-direction: column; justify-content: center; text-align: center;
  }
  .hero-band .hero-inner { padding: 0 var(--space-4); }
  .hero-band .header-nav { flex-wrap: wrap; }
  .hero-band .header-nav a { flex: 0 0 auto; padding: 6px 14px; background: rgba(255,255,255,.72); }
  .hero-band .header-row {
    padding: 0 var(--space-6);
    display: grid; grid-template-columns: 1fr auto 1fr;
  }
  .hero-band .header-row > a:first-child { grid-column: 2; justify-self: center; }
  .hero-band .header-row > .hamburger { grid-column: 3; justify-self: end; }
  body.is-scrolled .hero-band .header-row {
    padding: 0 var(--space-6);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .hero-band .hero-inner { max-width: 640px; margin-inline: auto; margin-top: var(--space-9); }
  .hero-band .header-nav { justify-content: center; }
  .hero-headline { font-size: var(--fs-hero-lg); }
  .hero-copy { margin-inline: auto; }
}

/* ===== Section shell ===== */
.section { padding-block: var(--space-7); border-top: 1px solid var(--linku-border); }
.section:first-of-type { border-top: none; }
.section-heading { font-size: var(--fs-h3); font-weight: 600; margin-bottom: var(--space-2); }
/* 商品ページの見出し番号。丸数字（①）は小さく読みにくいため、
   ブランド紹介ページと同じ Jost の連番にして商品カラーで見せる。 */
.hub-page .section-heading {
  display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4);
}
.section-num {
  flex: none; font-family: var(--font-latin); font-size: var(--fs-h3); font-weight: 500;
  line-height: 1; letter-spacing: 0.02em; color: var(--pc-deep, var(--linku-ink-soft));
}
.section-title { flex: 1; min-width: 0; }
.hub-page .section-heading::after {
  content: ''; display: block; flex: none; width: 28px; height: 2px;
  background: var(--pc-tint, var(--linku-border-strong)); border-radius: 2px;
}
.section-lead { font-size: var(--fs-body); color: var(--linku-ink-soft); margin-bottom: var(--space-5); }

/* ===== Product picker (home) ===== */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.product-card {
  display: block; background: var(--linku-white); border: 1px solid var(--linku-border);
  border-radius: var(--radius-md); overflow: hidden; transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft);
}
.product-card:hover, .product-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.product-card__thumb {
  aspect-ratio: 1 / 1; background: #E9E7E1; display: flex; align-items: center; justify-content: center;
  color: var(--linku-ink-soft); font-size: var(--fs-note); text-align: center; overflow: hidden;
}
.product-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: var(--space-3); }
.product-card__cat {
  display: inline-flex; align-items: center; font-size: var(--fs-caption); font-weight: 700;
  letter-spacing: 0.03em; padding: 4px 11px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}
.product-card__name { font-family: var(--font-jp); font-weight: 600; font-size: var(--fs-body); line-height: 1.4; margin-bottom: var(--space-2); }
.product-card__price { font-family: var(--font-latin); font-size: var(--fs-body); }

.brand-teaser { padding-block: var(--space-7); text-align: left; }
.brand-teaser-media { aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-5); }
.brand-teaser-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand-teaser p { font-size: var(--fs-body); line-height: 1.9; margin-bottom: var(--space-4); }
.link-arrow { font-weight: 600; font-size: var(--fs-body); }
/* 本文の続きに置くリンクは、地の文と区別できるよう商品カラー＋下線にする */
.a-text .link-arrow {
  display: inline-block; margin-left: 0.25em;
  color: var(--pc-deep, var(--linku-ink));
  text-decoration: underline; text-underline-offset: 3px;
}
.link-arrow::after { content: '›'; margin-left: 4px; }

/* ===== Footer ===== */
.site-footer {
  position: relative; padding: var(--space-9) 0 var(--space-8); color: #fff; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: -30px;
  background: linear-gradient(180deg, rgba(30,24,18,.42) 0%, rgba(30,24,18,.58) 100%), url('img/bg_footer.webp');
  background-size: cover; background-position: center;
  filter: blur(24px);
}
.site-footer > .l-container { position: relative; z-index: 1; }
.footer-group { margin-bottom: var(--space-6); }
.footer-group h3 { font-size: var(--fs-caption); color: rgba(255,255,255,.75); font-weight: 600; margin-bottom: var(--space-4); letter-spacing: 0.1em; }
.footer-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; font-size: var(--fs-body); font-weight: 500; color: #fff; }
.footer-thumb {
  width: 28px; height: 42px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.footer-thumb img { width: 100%; height: 100%; object-fit: contain; }
.footer-meta { font-size: var(--fs-note); color: rgba(255,255,255,.6); margin-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.25); padding-top: var(--space-4); text-align: center; }
.footer-copyright { font-size: var(--fs-note); color: rgba(255,255,255,.6); margin-top: var(--space-4); text-align: center; }

@media (min-width: 720px) {
  .footer-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

/* ===== Anchor nav (hub) ===== */
.anchor-nav-wrap { position: sticky; top: 72px; z-index: 30; background: var(--linku-paper); border-bottom: 1px solid var(--linku-border); }
.anchor-nav { display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-3) var(--space-4); scrollbar-width: none; }
.anchor-nav::-webkit-scrollbar { display: none; }
/* 横スクロールできることが伝わるよう、続きがあるときだけ右端をわずかに透かし、小さな矢印を添える（スマホのみ）。
   実際にスクロール可能かはJS（initAnchorNav）が判定し .is-end を切り替える。 */
.anchor-nav-wrap:not(.is-end) .anchor-nav {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 84%, transparent 100%);
}
.anchor-nav-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 1px; right: 8px; margin: auto 0;
  width: 7px; height: 7px;
  border-top: 1.5px solid var(--linku-ink-soft); border-right: 1.5px solid var(--linku-ink-soft);
  transform: rotate(45deg);
  pointer-events: none; opacity: 1; transition: opacity var(--dur-fast) var(--ease-soft);
}
.anchor-nav-wrap.is-end::after { opacity: 0; }
@media (min-width: 720px) {
  .anchor-nav {
    max-width: var(--container); margin-inline: auto;
    flex-wrap: wrap; row-gap: var(--space-2); gap: 4px; overflow-x: visible;
    justify-content: center;
  }
  /* PCは横幅に余裕があるので、スマホより小さくしない（本文と同じ14px系） */
  .anchor-nav a { font-size: var(--fs-caption); padding: 6px 12px; }
  /* PCは折り返し表示でスクロールしないため、フェード・矢印は不要 */
  .anchor-nav-wrap::after { display: none; }
  .anchor-nav-wrap:not(.is-end) .anchor-nav { -webkit-mask-image: none; mask-image: none; }
}
.anchor-nav a {
  flex-shrink: 0; font-size: var(--fs-caption); font-weight: 500; padding: 7px 14px;
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill);
  color: var(--linku-ink); background: var(--linku-white); white-space: nowrap;
}
.anchor-nav a.is-active { background: var(--pc-deep, var(--linku-ink)); color: #fff; border-color: var(--pc-deep, var(--linku-ink)); }

/* ===== Product hero (hub) ===== */
.product-hero { padding-top: var(--space-5); }
.gallery {
  position: relative; aspect-ratio: 1/1; background: #E9E7E1; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; color: var(--linku-ink-soft);
  font-size: var(--fs-caption); overflow: hidden; margin-bottom: var(--space-3);
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery-dots { position: absolute; bottom: var(--space-3); left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.gallery-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(88,88,90,0.25); }
.gallery-dots span.is-active { background: var(--linku-ink); }

.product-category {
  display: inline-block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em;
  margin-bottom: var(--space-3); padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--pc-tint, transparent);
}
.product-name { font-family: var(--font-jp); font-weight: 600; font-size: var(--fs-h2); line-height: 1.4; margin-bottom: var(--space-1); }
.product-name-en { font-family: var(--font-latin); font-size: var(--fs-body); color: var(--linku-ink-soft); margin-bottom: var(--space-3); }
.product-price { font-family: var(--font-latin); font-size: var(--fs-h3); margin-bottom: var(--space-5); }

.spec-block { border-top: 1px solid var(--linku-border); padding-top: var(--space-5); margin-top: var(--space-5); }
.spec-label { font-size: var(--fs-caption); color: var(--linku-ink-soft); font-weight: 700; letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.spec-item-title { font-size: var(--fs-caption); color: var(--linku-ink-soft); margin-bottom: 5px; }
/* 「120mL」と「（約2ヵ月分）」を切り離さないため、注記は値と同じ行から続ける。
   値の側は nowrap のままにして境界で改行させず、注記の中だけ折り返しを許す。 */
.spec-item-value { font-size: var(--fs-h4); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.spec-item-note {
  display: inline; white-space: normal;
  font-size: var(--fs-caption); line-height: 1.7; font-weight: 400; color: var(--linku-ink-soft);
}

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.badge {
  font-size: var(--fs-caption); padding: 7px 15px; border: 1px solid transparent;
  border-radius: var(--radius-pill); background: var(--pc-tint, var(--linku-white));
  color: var(--linku-ink);
}
.spec-note { font-size: var(--fs-caption); color: var(--linku-ink-soft); margin-bottom: var(--space-5); }

.ingredients-box {
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-md); overflow: hidden;
}
.ingredients-box summary {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer; list-style: none;
  background: var(--pc-tint, transparent);
}
.ingredients-box summary::-webkit-details-marker { display: none; }
/* 開閉の印はアコーディオンと同じ「く」の字にそろえる */
.ingredients-box summary::after {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: -3px; margin-right: 2px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-soft);
}
.ingredients-box[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
  .ingredients-box summary::after { transition: none; }
}
.ingredients-box .ingredients-scroll {
  background: var(--linku-white);
  max-height: 180px; overflow-y: auto; padding: 0 var(--space-4) var(--space-4);
  font-size: var(--fs-caption); line-height: 1.9; color: var(--linku-ink-soft); border-top: 1px solid var(--linku-border);
  padding-top: var(--space-3);
}

/* ===== Tables (usage steps / shoot guide / rewrite) ===== */
.table-wrap { overflow-x: auto; border: 1px solid var(--linku-border); border-radius: var(--radius-md); }
.data-table { min-width: 100%; }
.data-table th, .data-table td { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--fs-body); border-bottom: 1px solid var(--linku-border); vertical-align: top; }
.data-table thead th { background: var(--pc-tint, #EFEDE7); font-size: var(--fs-caption); color: var(--linku-ink); font-weight: 700; letter-spacing: 0.04em; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.step-cell, .data-table th.step-cell { white-space: nowrap; font-weight: 700; }
.data-table tbody td.step-cell { color: var(--pc-deep, var(--linku-ink)); }
.data-table .ng-text { text-decoration: line-through; color: var(--linku-ink-soft); }
.data-table .ok-text { font-weight: 600; }

/* ===== Accordion ===== */
.accordion-list { border: 1px solid var(--linku-border); border-radius: var(--radius-md); overflow: hidden; }
.accordion-item { border-top: 1px solid var(--linku-border); }
.accordion-item:first-child { border-top: none; }
.accordion-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer; list-style: none;
}
.accordion-item > summary::-webkit-details-marker { display: none; }
/* 開閉できることが一目で分かるよう、丸ボタンの中に「く」の字を置いて開くと反転させる。
   ＋／−の記号だけだと押せる場所に見えないため。 */
.accordion-item summary .icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--linku-border-strong);
  background: var(--linku-white); color: var(--linku-ink);
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft);
}
.accordion-item summary .icon::after {
  content: ''; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-soft);
}
.accordion-item[open] summary .icon::after { margin-top: 3px; transform: rotate(225deg); }

/* 押せる場所だと分かるように、行全体に反応をつける */
.accordion-item > summary { transition: background var(--dur-fast) var(--ease-soft); }
.accordion-item > summary:hover .icon,
.accordion-item > summary:focus-visible .icon {
  background: var(--pc-tint, #EFEDE7);
  border-color: var(--pc-deep, var(--linku-border-strong));
}
.accordion-item[open] summary .icon {
  background: var(--pc-tint, #EFEDE7);
  border-color: var(--pc-deep, var(--linku-border-strong));
}
@media (prefers-reduced-motion: reduce) {
  .accordion-item summary .icon,
  .accordion-item summary .icon::after { transition: none; }
}
.accordion-item summary .titles { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.accordion-item .a-title { font-size: var(--fs-body); font-weight: 600; margin-bottom: 4px; }
.accordion-item .a-sub { font-size: var(--fs-body); line-height: 1.75; color: var(--linku-ink-soft); }

/* 08のQ&Aは1行だけの並びで押せる感じが弱いので、行のホバーで反応させる */
.accordion-list:not(.is-feature) > .accordion-item > summary:hover { background: var(--linku-white); }
/* 答えは白地にして、設問の行と見分けられるようにする */
.accordion-list:not(.is-feature) > .accordion-item > .a-body { background: var(--linku-white); }

/* ===== 03「この商品の魅力」だけ2段構成にする =====
   閉じているとタイトルと説明が同じ地色に並んで平坦に見えるため、
   タイトルは商品カラーの帯、説明と本文は白地にして段差をつける。
   （08のQ&Aは設問だけなので、これまで通り地の色のまま） */
.accordion-list.is-feature > .accordion-item > summary { display: block; padding: 0; }
/* 説明のない項目は帯どうしが隣り合うので、境目が消えないよう区切りを強めにする */
.accordion-list.is-feature > .accordion-item + .accordion-item {
  border-top-color: var(--linku-border-strong);
  border-top-color: color-mix(in srgb, var(--pc-deep, #CDC9BD) 40%, var(--linku-border-strong));
}
.accordion-list.is-feature .a-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  /* color-mix 非対応ブラウザは淡いトーンのまま表示される */
  background: var(--pc-tint, #EFEDE7);
  background: color-mix(in srgb, var(--pc-tint, #EFEDE7) 84%, var(--pc-deep, #8B8B8D) 16%);
}
/* 商品カラーは帯で見せる。文字までカラーにすると帯の上でコントラストが足りないため、
   タイトルは地のインク色のままにする（4商品とも4.1:1以上を確保） */
.accordion-list.is-feature .a-band .a-title {
  flex: 1; min-width: 0; margin-bottom: 0;
  color: var(--linku-ink);
}
.accordion-list.is-feature > .accordion-item > summary:hover .a-band {
  background: var(--pc-tint, #EFEDE7);
  background: color-mix(in srgb, var(--pc-tint, #EFEDE7) 72%, var(--pc-deep, #8B8B8D) 28%);
}
.accordion-list.is-feature .a-band { transition: background var(--dur-fast) var(--ease-soft); }
.accordion-list.is-feature .a-sub {
  padding: var(--space-3) var(--space-4);
  background: var(--linku-white);
}
/* 説明から本文へ地色を続けて、開いたときにひと続きに見せる */
.accordion-list.is-feature .a-body { background: var(--linku-white); }
/* 本文は sub の続きの文章なので、書体・行間・色をそろえる */
.accordion-list.is-feature .a-text {
  font-size: var(--fs-body); line-height: 1.75; color: var(--linku-ink-soft);
}
/* 開いたときは sub の下余白を外し、sub から本文までを段落内と同じ行送りでつなぐ。
   （閉じているときは余白が要るので [open] のときだけ外す） */
.accordion-list.is-feature > .accordion-item[open] > summary .a-sub { padding-bottom: 0; }
/* 本文のあとに図版が続くときだけ間隔をあける */
.accordion-list.is-feature .a-text + .a-media { margin-top: var(--space-3); }
.accordion-item .a-body { padding: 0 var(--space-4) var(--space-5); }
.accordion-item .a-media {
  aspect-ratio: 16/10; background: #E9E7E1; border-radius: var(--radius-sm); display: flex;
  align-items: center; justify-content: center; color: var(--linku-ink-soft); font-size: var(--fs-caption); margin-bottom: var(--space-3);
  overflow: hidden; text-align: center; padding: var(--space-2);
}
.accordion-item .a-media img { width: 100%; height: 100%; object-fit: cover; }
/* 配布資料P04の図版は説明図なので、16:10に切らず画像の比率のまま全体を見せる */
.accordion-item .a-media.is-figure {
  aspect-ratio: auto; background: none; padding: 0; display: block;
}
/* 元の解像度より拡大するとぼけるため、幅は自然サイズまで（超える場合だけ縮小） */
.accordion-item .a-media.is-figure img {
  width: auto; max-width: 100%; height: auto; object-fit: contain; display: block; margin: 0 auto;
}
/* 正方形・縦長の図版は原寸まで広げると本文が遠くなるので、動画と同じ幅に揃える。
   ただし親は overflow:hidden のため、420px を素で指定すると375px端末で右端が切れる。
   min() で画面幅にも従わせる（スマホ＝親幅いっぱい／PC＝420px上限）。 */
.accordion-item .a-media.is-figure.is-tall img { max-width: min(420px, 100%); }
/* 成分アイコンのような小さい図版は本文の横に回り込ませる */
.accordion-item .a-media.is-figure.is-side {
  float: right; max-width: 40%; margin: 0 0 var(--space-2) var(--space-4);
}
.accordion-item .a-media.is-figure.is-side img { width: auto; max-width: 100%; margin: 0; }
/* 回り込みが次のブロックに残らないように閉じる */
.accordion-item .a-body::after { content: ''; display: block; clear: both; }

/* 図版素材が無い項目の代替。使用感の要点を文字のカードで3つ並べる */
.accordion-item .a-points {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2);
}
.accordion-item .a-point {
  display: flex; align-items: center; justify-content: center; text-align: center;
  /* 狭い画面でも「のばしやすい」が1行で収まるよう左右の余白は詰める */
  min-height: 92px; padding: var(--space-3) 4px;
  background: var(--pc-tint, #EFEDE7); border-radius: var(--radius-md);
  font-size: var(--fs-body); font-weight: 700; line-height: 1.7; letter-spacing: 0.02em;
  color: var(--pc-deep, var(--linku-ink));
}

/* 動画は素材の比率のまま。正方形素材が本文を押し下げないよう幅の上限を置いて中央に寄せる */
.accordion-item .a-media.is-video {
  aspect-ratio: auto; background: none; padding: 0; display: block;
}
.accordion-item .a-media.is-video video {
  display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto;
  border-radius: var(--radius-sm); background: #E9E7E1;
}
/* 横長の動画は420pxだと小さすぎるので、本文の幅いっぱいまで使う */
.accordion-item .a-media.is-video.is-wide video { max-width: 100%; }
.accordion-item .a-text { font-size: var(--fs-body); line-height: 1.9; }
/* 成分名などの注釈は本文と分けて、文末に小さく置く */
.accordion-item .a-note {
  margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px dashed var(--linku-border);
  font-size: var(--fs-note); line-height: 1.8; color: var(--linku-ink-soft);
}

/* ===== Script cards ===== */

/* ===== Chips ===== */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-size: var(--fs-caption); padding: 8px 15px; border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill);
  background: var(--linku-white);
}
.chip.is-hashtag { font-family: var(--font-latin); background: var(--pc-tint, var(--linku-white)); border-color: transparent; font-weight: 500; }
.chip.is-pr { background: var(--linku-ink); color: #fff; border-color: var(--linku-ink); }
.chip-note { font-size: var(--fs-caption); line-height: 1.7; color: var(--linku-ink-soft); margin-top: var(--space-3); }
.chip-note strong { color: var(--linku-ink); font-weight: 600; }

/* ===== Watch-out excerpt ===== */

/* ===== Download buttons ===== */
.dl-list { display: flex; flex-direction: column; gap: var(--space-3); }
.dl-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-3);
  padding: var(--space-4); font-size: var(--fs-body); font-weight: 600; background: var(--linku-white);
}
.dl-btn[aria-disabled="true"] { color: var(--linku-ink-soft); cursor: not-allowed; }
.dl-note { font-size: var(--fs-caption); color: var(--linku-ink-soft); text-align: center; margin-top: var(--space-2); }

/* ===== 02 使用方法 =====
   公式サイト（link-u-cosme.com）の商品ページと同じ、イラスト＋文の並べ方にする。
   洗顔料だけ「通常の使い方／スペシャルケア」をタブで切り替える。 */
/* タブ行。右（狭い画面では下）に2WAYであることの一言を添える */
.usage-tabs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-3); margin-bottom: var(--space-4);
}
.usage-tabs__btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.usage-tabs__note {
  font-size: var(--fs-caption); font-weight: 600; line-height: 1.6; letter-spacing: 0.02em;
  color: var(--pc-deep, var(--linku-ink-soft));
}
.usage-tab {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.02em; padding: 9px 18px;
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill);
  background: var(--linku-white); color: var(--linku-ink-soft);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.usage-tab.is-active {
  background: var(--pc-deep, var(--linku-ink)); border-color: var(--pc-deep, var(--linku-ink)); color: #fff;
}
.usage-lead {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  font-size: var(--fs-body); line-height: 1.8; color: var(--linku-ink-soft); margin-bottom: var(--space-4);
}
.usage-lead .usage-freq {
  flex: none; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em;
  color: var(--pc-deep, var(--linku-ink)); background: var(--pc-tint, #EFEDE7);
  border-radius: var(--radius-pill); padding: 5px 12px;
}
/* 公式サイトの商品ページと同じ「イラスト左＋文右、間に▼」の並び。
   イラストは白地なので、白いパネルの中にまとめて置いて地色の差を出さない。 */
.usage-flow {
  background: var(--linku-white); border: 1px solid var(--linku-border);
  border-radius: var(--radius-md); padding: var(--space-5) var(--space-3);
}
.usage-step { display: flex; align-items: center; gap: var(--space-3); }
.usage-step__fig { flex: none; width: 88px; }
.usage-step__fig img { display: block; width: 100%; height: auto; }
.usage-step__body { flex: 1; min-width: 0; }
.usage-step__text { font-size: var(--fs-body); line-height: 1.95; letter-spacing: 0.02em; }
.usage-step__note { font-size: var(--fs-caption); line-height: 1.8; color: var(--linku-ink-soft); margin-top: var(--space-2); }
/* ステップ間の▼。商品のメインカラーで着色する */
.usage-arrow { display: flex; justify-content: center; padding: var(--space-3) 0; }
.usage-arrow::before {
  content: ''; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-top: 9px solid var(--pc-deep, var(--linku-border-strong));
}
/* 枠内の最下部に置く締めのコピー。使い方ごとの「結果」を1行で見せる */
.usage-outro {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px dashed var(--linku-border);
  text-align: center; font-size: var(--fs-lead); font-weight: 700;
  line-height: 1.6; letter-spacing: 0.04em; color: var(--pc-deep, var(--linku-ink));
}
.usage-caution {
  margin-top: var(--space-4); font-size: var(--fs-body); line-height: 1.8;
  background: var(--linku-note-bg); border: 1px solid var(--linku-note-bd);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); color: var(--linku-ink);
}

/* ===== 07 紹介の切り口（配布資料P07）＝商品の切り口→動画の内容 ===== */
.angle-table { table-layout: fixed; width: 100%; }
/* 「動画の内容」は最長27文字。矢印列を細くして右列に幅を回し、1行で収まるようにする。
   左列は最長「ダブルプランツラッピング」＝約180pxが入る幅を確保する */
.angle-table .col-angle-p { width: 32%; }
.angle-table .col-angle-a { width: 5%; }
.angle-table .col-angle-c { width: 63%; }
.angle-table th, .angle-table td { text-align: center; vertical-align: middle; }
/* 折り返すときも単語や記号の途中で切らない（「ストーリ／ー」のような分断を防ぐ） */
.angle-table td { line-break: strict; overflow-wrap: normal; word-break: normal; }
.angle-table tbody td { background: var(--linku-white); }
.angle-table td.angle-content { text-align: left; padding-left: var(--space-4); }
.angle-table thead th:last-child { text-align: left; padding-left: var(--space-4); }
.angle-table td.angle-product { font-weight: 700; color: var(--pc-deep, var(--linku-ink)); }
.angle-table td.angle-content { color: var(--linku-ink); }
/* 「切り口→動画の内容」の対応が分かるよう、間に矢印を挟む */
.angle-table td.angle-arrow { padding-left: 0; padding-right: 0; }
.angle-table td.angle-arrow::before {
  content: ''; display: inline-block; width: 0; height: 0;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent;
  border-left: 8px solid var(--pc-deep, var(--linku-border-strong));
}
/* セクションの中に小見出しつきの塊を置くとき（例：切り口の下のキーワード集） */
.sub-block { margin-top: var(--space-6); }
.sub-block__label {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em;
  color: var(--linku-ink-soft); margin-bottom: var(--space-3);
}

/* ===== 08 気をつけたい表現と言い換え（配布資料P09 YOUR REAL VOICE） =====
   NG→OKを1行にし、法令ごとにまとめて理由・背景を添える。
   3列の表のままだとスマホで横スクロールになるため、狭い画面では縦積みにする。 */
.voice-lead { font-size: var(--fs-body); font-weight: 600; line-height: 1.8; letter-spacing: 0.02em; }
.voice-note {
  font-size: var(--fs-caption); line-height: 1.8; color: var(--linku-ink-soft);
  margin-top: var(--space-2); margin-bottom: var(--space-5);
}
/* NG／OKの列見出し。目立つよう商品サブカラーの帯にする */
.voice-head {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  background: var(--pc-tint, #EFEDE7); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  text-align: center; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em;
  color: var(--pc-deep, var(--linku-ink));
}
.voice-head__ng::before { content: '× '; }
.voice-head__ok::before { content: '○ '; }
.voice-group {
  background: var(--linku-white); border: 1px solid var(--linku-border);
  border-radius: var(--radius-md); padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.voice-group__label {
  display: inline-block; font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.06em;
  color: var(--pc-deep, var(--linku-ink)); background: var(--pc-tint, #EFEDE7);
  border-radius: var(--radius-pill); padding: 5px 12px; margin-bottom: var(--space-3);
}
.voice-rows { display: flex; flex-direction: column; gap: var(--space-2); }
.voice-row {
  display: grid; grid-template-columns: 1fr; gap: 4px;
  padding: var(--space-3) 0; border-top: 1px solid var(--linku-border);
}
.voice-rows > .voice-row:first-child { border-top: none; padding-top: 0; }
.voice-ng {
  font-size: var(--fs-body); line-height: 1.7; color: var(--linku-ink-soft);
  text-decoration: line-through; text-decoration-color: var(--linku-ng);
}
.voice-ng::before { content: '× '; color: var(--linku-ng); font-weight: 700; text-decoration: none; }
.voice-ok { font-size: var(--fs-body); line-height: 1.7; font-weight: 600; color: var(--linku-ink); }
.voice-ok::before { content: '○ '; color: var(--linku-ok); font-weight: 700; }
/* 狭い画面ではNGの下にOKを置くので、矢印は下向きにする */
.voice-arrow { display: none; }
.voice-reason {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--linku-border);
  font-size: var(--fs-caption); line-height: 1.9; color: var(--linku-ink-soft);
}
/* タイトルは独立した行にして、本文はその下から始める */
.voice-reason__label {
  display: block; font-weight: 700; color: var(--linku-ink);
  margin-bottom: var(--space-1);
}
.voice-reason > p { margin: 0; }
.voice-hint > span {
  display: inline-block; font-weight: 700; color: var(--linku-ink);
  margin-right: var(--space-2);
}
.voice-hint {
  margin: var(--space-4) 0 var(--space-4);
  background: var(--pc-tint, #EFEDE7); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: var(--fs-caption); line-height: 1.9;
}

/* ===== 04 撮影＆台本ガイド =====
   旧「見せどころ」「撮影STEPガイド」「台本例」を統合したSTEPカード。
   1枚に 撮るもの／見るポイント／テロップ例／話すこと／撮り方のコツ をまとめる。
   左のイメージ枠は画像が入るまで空枠で場所を確保しておく。 */
.shoot-list { display: flex; flex-direction: column; gap: var(--space-3); }
.shoot-step {
  background: var(--linku-white); border: 1px solid var(--linku-border);
  border-left: 3px solid var(--pc-deep, var(--linku-border-strong));
  border-radius: var(--radius-md); padding: var(--space-4);
}
.shoot-step__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.shoot-step__num {
  flex: none; font-family: var(--font-latin); font-size: var(--fs-body); font-weight: 600;
  letter-spacing: 0.06em; color: var(--pc-deep, var(--linku-ink-soft));
}
.shoot-step__shot {
  flex: 1; min-width: 0; margin: 0;
  font-family: var(--font-jp); font-size: var(--fs-body); font-weight: 600;
  line-height: 1.6; letter-spacing: 0.02em; color: var(--linku-ink);
}
.shoot-step__body { display: flex; align-items: flex-start; gap: var(--space-3); }
.shoot-step__fig { flex: none; width: 88px; }
.shoot-step__fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
/* 同じSTEPで補足カットを添えるとき（例：化粧液STEP1の黒背景カット）は現行画像の下に積む */
.shoot-step__fig img + img { margin-top: var(--space-2); }
.shoot-step__slot {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border: 1px dashed var(--linku-border-strong); border-radius: var(--radius-sm);
  background: var(--pc-tint, #EFEDE7); opacity: .45;
}
.shoot-step__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
/* 項目名（見るポイント／テロップ例／話すこと）が本文に紛れないよう、
   商品色のタグにして本文の上に置く。 */
.shoot-row { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: start; }
.shoot-row dt {
  justify-self: start;
  font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  color: var(--pc-deep, var(--linku-ink));
  background: var(--pc-tint, #EFEDE7);
  border-radius: var(--radius-pill); padding: 5px 10px;
}
.shoot-row dd { margin: 0; font-size: var(--fs-body); line-height: 1.8; }
/* 項目どうしの区切り。タグだけでは塊が続いて見えるため薄い罫を入れる */
.shoot-row + .shoot-row { border-top: 1px solid var(--linku-border); padding-top: var(--space-2); }
.shoot-row dd.is-telop { font-weight: 600; color: var(--pc-deep, var(--linku-ink)); }
/* 台本の段階（導入／特徴説明／使用感／まとめ）。項目名タグ（塗り）と区別するため線のタグにする */
.shoot-step__label {
  display: inline-block; font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.04em;
  color: var(--linku-ink-soft); background: transparent;
  border: 1px solid var(--linku-border-strong);
  border-radius: var(--radius-pill); padding: 2px 8px; margin-right: 6px;
  vertical-align: 2px;
}
.shoot-step__tip {
  margin-top: var(--space-3); padding-top: var(--space-3);
  border-top: 1px dashed var(--linku-border);
  font-size: var(--fs-caption); line-height: 1.9; color: var(--linku-ink-soft);
}
/* 見出しと本文が続けて並ぶと読み出しがつかないため、見出しで改行する */
.shoot-step__tip > span {
  display: block; margin-bottom: 4px;
  font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; line-height: 1;
  color: var(--pc-deep, var(--linku-ink));
}

/* ===== ルビ（御木本＝ミキモト）=====
   読みが分からず誤読されるのを防ぐため漢字の上に小さくふる。
   ルビの分だけ行が押し上げられないよう、ruby-position と line-height を固定する。 */
ruby { ruby-position: over; ruby-align: center; }
ruby rt {
  /* 親の0.55倍だと16pxの本文に対して8.8pxになり読めない。11px相当を下限として固定する */
  font-size: 0.6875rem; font-weight: 400; line-height: 1;
  letter-spacing: 0.02em; color: var(--linku-ink-soft);
}

/* ===== 参照記号（※・※1）=====
   本文と同じ大きさだと文章の一部に見えるため、小さく上付きにする。
   行の高さが変わらないよう line-height は固定する。 */
.ref-mark {
  /* 下限12pxの方針に合わせる（0.68emだと本文16pxに対し10.9px） */
  font-size: var(--fs-note); line-height: 1; letter-spacing: 0;
  vertical-align: 0.4em; margin: 0 0.1em;
}

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-size: var(--fs-body); font-weight: 600; border-radius: var(--radius-pill); }
.btn-primary { background: var(--linku-btn-primary-bg); color: var(--linku-btn-primary-fg); }
.btn-secondary { background: var(--linku-btn-secondary-bg); color: var(--linku-btn-secondary-fg); border-radius: var(--radius-3); }

/* ===== Rules page: NG/OK cards ===== */
.ngok-card { border: 1px solid var(--linku-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--linku-white); }
.ngok-row { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-2); }
.ngok-tag { flex-shrink: 0; font-size: var(--fs-note); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-3); margin-top: 2px; }
.ngok-tag.ng { background: var(--linku-ng-bg); color: var(--linku-ng); }
.ngok-tag.ok { background: var(--linku-ok-bg); color: var(--linku-ok); }
.ngok-row .ngok-text { font-size: var(--fs-body); font-weight: 600; }
.ngok-row.ng .ngok-text { text-decoration: line-through; color: var(--linku-ng); font-weight: 500; }
.ngok-note { font-size: var(--fs-caption); color: var(--linku-ink-soft); line-height: 1.7; padding-left: calc(11px + var(--space-2) + 8px); }

.rule-list { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-6); }
.rule-list li { font-size: var(--fs-body); line-height: 1.8; padding-left: 1.3em; position: relative; }
.rule-list li::before { content: '●'; position: absolute; left: 0; top: 0.15em; font-size: 0.375rem; color: var(--linku-ink-soft); }

/* 表記ルール・PR表記ルールのカード（①のNG／OKカードと見た目の重さを揃える） */
.rule-cards { margin-bottom: var(--space-6); }
.rule-card { border: 1px solid var(--linku-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--linku-white); }
.rule-card:last-child { margin-bottom: 0; }
.rule-card__label { display: inline-block; font-size: var(--fs-note); font-weight: 700; letter-spacing: .04em; color: var(--linku-ink); background: var(--linku-paper); border: 1px solid var(--linku-border); padding: 2px 8px; border-radius: var(--radius-3); margin-bottom: var(--space-2); }
.rule-card__body { font-size: var(--fs-body); font-weight: 600; line-height: 1.8; }
.rule-card__note { font-size: var(--fs-caption); color: var(--linku-ink-soft); line-height: 1.7; margin-top: var(--space-2); }

/* ===== Checklist page ===== */
.tab-row { display: flex; border-bottom: 1px solid var(--linku-border); margin-bottom: var(--space-3); }
.tab-btn { flex: 1; text-align: center; padding: var(--space-4) 0; font-size: var(--fs-body); font-weight: 600; color: var(--linku-ink-soft); border-bottom: 2px solid transparent; }
.tab-btn.is-active { color: var(--linku-ink); border-color: var(--linku-ink); }
.tab-btn[disabled] { color: #C6C3BB; cursor: not-allowed; }
.tab-hint { font-size: var(--fs-caption); color: var(--linku-ink-soft); margin-bottom: var(--space-6); }

.progress-track { height: 6px; background: var(--linku-border); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: var(--space-2); }
.progress-fill { height: 100%; background: var(--linku-ink); border-radius: var(--radius-pill); transition: width var(--dur-base) var(--ease-soft); width: 0%; }
.progress-label { font-size: var(--fs-caption); color: var(--linku-ink-soft); margin-bottom: var(--space-6); }

.check-group { margin-bottom: var(--space-6); }
.check-group h3 { font-size: var(--fs-body); font-weight: 700; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--linku-border-strong); }
.check-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--linku-border); cursor: pointer; }
.check-item:last-child { border-bottom: none; }
.check-item input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--linku-ink); flex-shrink: 0; }
.check-item span { font-size: var(--fs-body); line-height: 1.7; }
.check-item.is-checked .check-label { color: var(--linku-ink-soft); text-decoration: line-through; }
.check-item.is-checked .check-hint { color: var(--linku-ink-soft); opacity: .65; }
.check-item .check-body { display: block; }
.check-group__lead { font-size: var(--fs-body); color: var(--linku-ink-soft); line-height: 1.7; margin-bottom: var(--space-3); }
.check-group__lead a { color: var(--linku-ink); text-decoration: underline; }
.check-item .check-hint { display: block; font-size: var(--fs-caption); line-height: 1.7; color: var(--linku-ink-soft); margin-top: var(--space-1); }

.status-banner { text-align: center; padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-body); font-weight: 600; margin-bottom: var(--space-6); background: #EFEDE7; color: var(--linku-ink-soft); }
.status-banner.is-ready { background: var(--linku-ok-bg); color: var(--linku-ok); }
.reset-link { display: block; text-align: center; font-size: var(--fs-caption); color: var(--linku-ink-soft); text-decoration: underline; margin-top: var(--space-3); }

/* 進捗と「投稿OK」の表示は、スクロールしても常に見えるよう上部に固定する */
.checklist-sticky {
  position: sticky; top: 72px; z-index: 20;
  background: var(--linku-paper);
  padding-top: var(--space-4);
  margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4);
  box-shadow: 0 10px 12px -10px rgba(88,88,90,.18);
}
.checklist-sticky .tab-hint { margin-bottom: var(--space-4); }
.checklist-sticky .progress-label { margin-bottom: var(--space-3); }
.checklist-sticky .status-banner { margin-bottom: var(--space-4); }
/* 固定に入ったら、読み終えている要素を畳んで高さを抑える */
.checklist-sticky.is-stuck { padding-top: var(--space-2); }
.checklist-sticky.is-stuck .section-heading {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em;
  color: var(--linku-ink-soft); margin-bottom: var(--space-2);
}
.checklist-sticky.is-stuck .tab-hint { display: none; }
.checklist-sticky.is-stuck .tab-btn { padding-block: var(--space-2); font-size: var(--fs-caption); }
.checklist-sticky.is-stuck .progress-label { margin-bottom: var(--space-2); }
.checklist-sticky.is-stuck .status-banner {
  padding: var(--space-2) var(--space-3); font-size: var(--fs-caption); margin-bottom: var(--space-3);
}
@media (min-width: 720px) {
  .checklist-sticky { margin-inline: calc(var(--space-6) * -1); padding-inline: var(--space-6); }
  .checklist-sticky.is-stuck .section-heading { font-size: var(--fs-body); }
  .checklist-sticky.is-stuck .status-banner { font-size: var(--fs-body); }
}

/* ===== Brand page ===== */
.brand-hero { padding: var(--space-7) 0 var(--space-4); }
.brand-eyebrow { font-family: var(--font-serif); font-size: var(--fs-h2); letter-spacing: 0.06em; margin-bottom: var(--space-4); }
.brand-lead { font-size: var(--fs-body); line-height: 1.9; margin-bottom: var(--space-5); }
.story-media { aspect-ratio: 16/10; background: #E9E7E1; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--linku-ink-soft); font-size: var(--fs-caption); margin-bottom: var(--space-4); overflow: hidden; }
.story-media img { width: 100%; height: 100%; object-fit: cover; }
.section-note { font-size: var(--fs-note); color: var(--linku-ink-soft); margin-top: var(--space-3); }

/* ===== Brand page: Why/Who/What/How running head ===== */
.section-eyebrow {
  font-family: var(--font-serif); font-size: var(--fs-note); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--linku-ink-soft); margin-bottom: var(--space-2);
}

/* ===== Brand page: WHO tile gallery ===== */
.tile-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.tile-gallery figure { margin: 0; }
.tile-media { aspect-ratio: 4/3; background: #E9E7E1; border-radius: var(--radius-md); overflow: hidden; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; }
.tile-caption { font-size: var(--fs-note); color: var(--linku-ink-soft); margin-top: var(--space-2); }

.diagram-media {
  aspect-ratio: 1/1; max-width: 280px; margin: 0 auto var(--space-4); background: var(--linku-white);
  border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--linku-border);
}
.diagram-media img { width: 100%; height: 100%; object-fit: contain; }
.portrait-media { aspect-ratio: 4/5; background: #E9E7E1; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
.portrait-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* ===== Brand page: placeholder box (no confirmed image yet) ===== */
.media-placeholder {
  aspect-ratio: 16/10; background: #E9E7E1; border: 1px dashed var(--linku-border-strong); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4);
  color: var(--linku-ink-soft); font-size: var(--fs-caption); line-height: 1.7; margin-bottom: var(--space-4);
}
.tile-media.media-placeholder { margin-bottom: 0; }

/* ===== Sticky quick links on hub (mobile-first, desktop too) ===== */
.back-to-rules { font-size: var(--fs-caption); font-weight: 600; }

/* ===== Responsive ===== */
@media (min-width: 600px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) {
  .hero-band { min-height: clamp(600px, 52vw, 900px); }
  .hero-tagline { font-size: var(--fs-hero); }

  /* — PC typography: raise the jump rate (headings up, body text up a touch) — */
  body { font-size: var(--fs-body); }

  .usage-flow { padding: var(--space-6) var(--space-5); }
  .usage-step { gap: var(--space-5); }
  .usage-step__fig { width: 150px; }
  .usage-step__text { font-size: var(--fs-body); }
  .usage-step__note { font-size: var(--fs-caption); }
  .usage-arrow { padding: var(--space-4) 0; }
  .usage-outro { font-size: var(--fs-h3); margin-top: var(--space-6); padding-top: var(--space-5); }
  .usage-tab { font-size: var(--fs-body); }
  .usage-tabs__note { font-size: var(--fs-caption); }

  .voice-lead { font-size: var(--fs-lead); }
  .voice-note { font-size: var(--fs-body); }
  .voice-head {
    grid-template-columns: 1fr 22px 1fr; gap: var(--space-3);
    padding: var(--space-3) var(--space-5); font-size: var(--fs-body);
  }
  .voice-head__ok { grid-column: 3; }
  .voice-group { padding: var(--space-5); }
  .voice-row { grid-template-columns: 1fr 22px 1fr; align-items: center; gap: var(--space-3); }
  .voice-arrow { display: flex; justify-content: center; }
  .voice-arrow::before {
    content: ''; width: 0; height: 0;
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid var(--pc-deep, var(--linku-border-strong));
  }
  .voice-ng, .voice-ok { font-size: var(--fs-body); }
  .voice-reason, .voice-hint { font-size: var(--fs-caption); }
  .usage-lead { font-size: var(--fs-body); }

  .section { padding-block: var(--space-8); }
  .section-heading { font-size: var(--fs-display); margin-bottom: var(--space-3); }
  .section-lead { font-size: var(--fs-body); margin-bottom: var(--space-6); }

  .brand-eyebrow { font-size: var(--fs-hero-sm); margin-bottom: var(--space-5); }
  .brand-lead { font-size: var(--fs-body); }

  .product-name { font-size: var(--fs-hero-sm); margin-bottom: var(--space-2); }
  .product-name-en { font-size: var(--fs-body); }
  .product-price { font-size: var(--fs-h1); margin-bottom: var(--space-6); }
  .product-category { font-size: var(--fs-caption); }
  .spec-label { font-size: var(--fs-caption); }
  .spec-item-title { font-size: var(--fs-caption); }
  .spec-item-value { font-size: var(--fs-h3); }
  .spec-item-note { font-size: var(--fs-caption); }
  .badge { font-size: var(--fs-body); }
  .ingredients-box summary { font-size: var(--fs-body); }

  .product-card__cat { font-size: var(--fs-caption); }
  .product-card__name { font-size: var(--fs-lead); }
  .product-card__price { font-size: var(--fs-body); }

  .accordion-item .a-title { font-size: var(--fs-h4); }
  .accordion-item .a-sub { font-size: var(--fs-body); }
  .accordion-item .a-text { font-size: var(--fs-body); }
  /* 03の本文は sub と同じ大きさにそろえる */
  .accordion-list.is-feature .a-text { font-size: var(--fs-body); }
  .accordion-item .a-note { font-size: var(--fs-caption); }

  .accordion-item .a-point {
    min-height: 104px; padding: var(--space-4) var(--space-3); font-size: var(--fs-lead);
  }
  .data-table th, .data-table td { font-size: var(--fs-body); }
  .shoot-step { padding: var(--space-5); }
  .shoot-step__num { font-size: var(--fs-body); }
  .shoot-step__shot { font-size: var(--fs-h4); }
  .shoot-step__body { gap: var(--space-5); }
  .shoot-step__fig { width: 150px; }
  .shoot-row dt { font-size: var(--fs-note); }
  .shoot-row dd { font-size: var(--fs-body); }
  .shoot-step__label { font-size: var(--fs-note); }
  .shoot-step__tip { font-size: var(--fs-caption); }
  .shoot-step__tip > span { font-size: var(--fs-note); }
  .data-table thead th { font-size: var(--fs-caption); }

  .chip { font-size: var(--fs-body); }
  .chip-note { font-size: var(--fs-caption); }
  .rule-list li { font-size: var(--fs-body); }
  .rule-card__body { font-size: var(--fs-lead); }
  .rule-card__note { font-size: var(--fs-caption); }
  .dl-btn { font-size: var(--fs-body); }


  .footer-link { font-size: var(--fs-body); }
  .footer-group h3 { font-size: var(--fs-caption); }
  .footer-meta { font-size: var(--fs-caption); }

  .ngok-row .ngok-text { font-size: var(--fs-lead); }
  .ngok-note { font-size: var(--fs-caption); }

  .check-item span { font-size: var(--fs-body); }
  .check-item .check-hint { font-size: var(--fs-caption); }
  .check-group__lead { font-size: var(--fs-body); }
  .check-group h3 { font-size: var(--fs-lead); }
  .status-banner { font-size: var(--fs-lead); }

  .link-arrow { font-size: var(--fs-body); }
}

/* ==========================================================================
   ブランド紹介ページ — Claude Design「ブランド紹介」からの移植（2026-09-08）
   ヘッダー／セクションナビ／フッターはサイト共通コンポーネント（.site-header・
   .anchor-nav・.site-footer）を流用。幅も他ページと同じ720px（--container）。
   文字ルールもサイト共通に統一（2026-09-08 第2次）＝
     ・書体は --font-jp／数字は --font-latin（Jost）／ラテン小見出しは --font-serif（Marcellus）
     ・見出しは font-weight:600、本文は400
     ・文字色は --linku-ink / --linku-ink-soft のみ
     ・サイズは clamp を使わず、他ページと同じ 720px の1段階で切り替える
   レイアウト（グリッド・比率・余白）はデザインの値を踏襲する。
   ========================================================================== */

.brand-page {
  /* デザイン側のインク系トークンはサイトの文字色に寄せる（別名で受けて全箇所に反映） */
  --bg-ink-deep:    var(--linku-ink);
  --bg-ink:         var(--linku-ink);
  --bg-ink-soft:    var(--linku-ink-soft);
  --bg-ink-mute:    var(--linku-ink-soft);
  --bg-grey:        var(--linku-ink-soft);
  /* 罫線・アクセントはデザインの値を維持 */
  --bg-line:        #e2e4e6;
  --bg-line-strong: #cfd3d6;
  --bg-sand-deep:   #7a6855;
  /* 強調文字。既定は海の色。各セクションでは商品カラーに切り替える（下記） */
  --bg-em:          #3f7286;
  --bg-aqua-soft:   #cbe4e7;
  --bg-aqua-deep:   #527a8a;
  --bg-green-deep:  #5e7461;
  --bg-tint:        #fbf8f3;   /* セクション交互の地色 */
  --bg-container:   var(--container);  /* 他ページの .l-container と同一（720px） */
  --bg-gutter:      var(--space-4);    /* 同 16px */

  background: #f4efe7;
}

/* 強調文字はコンテンツ単位で商品カラーに切り替える。
   サンド（#6d6658）は本文の墨と差が出ないため使わず、
   化粧液（アクア）・乳液（グリーン）・洗顔料（ブラッシュ）の3色を巡回させる。 */
.brand-page #s1, .brand-page #s4 { --bg-em: var(--linku-aqua-deep); }
.brand-page #s2, .brand-page #s5 { --bg-em: var(--linku-green-deep); }
.brand-page #s3, .brand-page #s6 { --bg-em: var(--linku-blush-deep); }

.bg-container {
  max-width: var(--bg-container); margin-inline: auto; padding-inline: var(--bg-gutter);
}
.bg-em { font-weight: 600; color: var(--bg-em); }
.bg-strong { font-weight: 600; }

/* ===== コピーボタン（app.js の initCopyBoxes が data-copy で駆動する） ===== */
.copy-btn {
  flex-shrink: 0; font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.04em;
  padding: 5px 12px; background: var(--linku-paper); color: var(--linku-ink);
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.copy-btn:hover, .copy-btn:focus-visible { background: var(--linku-ink); color: #fff; border-color: var(--linku-ink); }
.copy-btn.is-copied { background: var(--linku-ok-bg); color: var(--linku-ok); border-color: var(--linku-ok); }
/* クリップボードAPIが使えない環境：テキストは選択済みのまま残す */
.copy-btn.is-manual { background: var(--linku-note-bg); color: var(--linku-note); border-color: var(--linku-note-bd); }

/* セクションナビは商品ハブと同じ .anchor-nav-wrap / .anchor-nav をそのまま使う
   （720pxで中央寄せ＋折り返し。独自の上書きはしない） */

/* ===== ヒーロー =====
   商品KVを全幅の背景に敷き、コピーを重ねる（トップの .hero-band と同じ作り）。
   KVは明るい写真なので、暗いオーバーレイではなく生成り色のフェード＋墨文字にする。 */
/* ===== ヒーロー =====
   KVは`cover`だと画面幅とバンド高の比でトリミング量が変わり、ブラウザの
   拡大率を変えるだけで見え方が変わってしまう（100%＝商品の下が隠れる／
   125%＝上の余白が広がる）。トップページの`.hero-band`と同じ考え方で
   **写真の全体が常に同じ見え方で入る**サイズ指定にし、余る領域は
   ぼかしたKVで埋める。コピーは写真の下（生成り地）に置く。 */
.bg-hero {
  position: relative; overflow: hidden;
  /* スマホ＝写真を幅にフィットさせ、コピーは写真の床面（空き）に重ねる。
     1.601 は KV（1220×762）の縦横比。静物の下端は写真の縦70.9%、
     ボトルの下端は55.1%なので、その下が文字の置き場になる。
     +140px＝文字ブロック（eyebrow+title+copy）の高さぶんの余白。
     +88pxだとeyebrowが写真のフェード前（まだ被写体がはっきり写っている領域）に
     かかってしまうため、eyebrowが元のtitleの位置まで下がる分（約32px）を上乗せし、
     そこからさらに松田さんの指示でeyebrowの行の高さ分（約20px）をもう1行分下げた。 */
  min-height: calc(100vw / 1.601 + 140px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: var(--space-6);
  background: var(--bg-tint);
}
/* 写真の左右に余る領域を埋める地色。KVの端は単色ではない
   （#c3aa96〜#523320）ためベタ塗りだと継ぎ目が出る。KV自体のぼかしを敷く。
   高さは写真自体の高さ（.bg-hero::afterの画像・グラデーション層と同じ）に揃え、
   それより下には伸ばさない。
   一度.bg-hero全体（inset:-48px）まで伸ばしたが、cover指定のまま背景を
   縦に大きく引き伸ばすことになり、写真の暗い部分（什器の陰影）まで
   拡大されて本文の背景が茶色く見えてしまった。
   写真の高さぴったりで止めれば、その下は.bg-hero自身のフラットな地色
   （--bg-tint）だけになり、グラデーションの着地色と完全一致して継ぎ目が出ない。 */
.bg-hero::before {
  content: ''; position: absolute; top: -48px; left: -48px; right: -48px;
  height: calc(100vw / 1.601);
  background: url('img/brand/kv-hero-wide.webp') center / cover;
  filter: blur(48px);
}
/* 1層目＝写真の下端を生成り色へ溶かすグラデーション（写真と同じ高さに敷く）
   2層目＝KV本体 */
.bg-hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg,
      rgba(251,248,243,0) 0%, rgba(251,248,243,0) 56%,
      rgba(251,248,243,.50) 68%, rgba(251,248,243,.85) 82%, rgb(251,248,243) 95%),
    url('img/brand/kv-hero-wide.webp');
  background-size: 100% calc(100vw / 1.601), 100% auto;
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
}
/* グラデーションの%は写真の高さに対する比。ボトルの下端が55.1%なので
   56%から溶かし始めれば商品（ボトル）は隠れない。台座は薄く沈む。 */
.bg-hero__inner {
  position: relative; z-index: 1; width: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.bg-hero__eyebrow {   /* = .section-eyebrow */
  font-family: var(--font-serif); font-size: var(--fs-note); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--linku-ink-soft);
}
.bg-hero__title {     /* = .hero-headline（ブランドページは和文なので font-jp） */
  margin: 0; font-family: var(--font-jp); font-weight: 600;
  font-size: var(--fs-h1); line-height: 1.4; letter-spacing: 0.04em; color: var(--linku-ink);
}
.bg-hero__copy { max-width: 30em; font-size: var(--fs-body); line-height: 1.8; color: var(--linku-ink); }

/* ===== セクションの器 ===== */
.bg-section { border-top: 1px solid var(--linku-border); padding-block: var(--space-7); }
.bg-section--tint { background: var(--bg-tint); }
.bg-section__inner { display: flex; flex-direction: column; gap: var(--space-5); }
/* 横スクロールレール（.bg-rail）は min-content が親の幅を超える。flexアイテムの
   既定 min-width:auto では縮まず親を押し広げてしまうため、連鎖する各段で0にする。 */
.bg-section__inner > *, .bg-qa > *, .bg-qa__body > *, .bg-qa__body--flow > * { min-width: 0; }
.brand-page .bg-section[id] { scroll-margin-top: 132px; }

.bg-head { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }
.bg-head__num {
  font-family: var(--font-latin); font-size: var(--fs-h3); font-weight: 500;
  line-height: 1; letter-spacing: 0.02em; color: var(--linku-border-strong);
}
.bg-head__text { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; min-width: 240px; }
.bg-head__eyebrow {   /* = .section-eyebrow */
  font-family: var(--font-serif); font-size: var(--fs-note); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--linku-ink-soft);
}
.bg-head__title {     /* = .section-heading */
  margin: 0; font-family: var(--font-jp); font-weight: 600; font-size: var(--fs-h3);
  line-height: 1.5; letter-spacing: 0.02em; color: var(--linku-ink);
}
.bg-head__sub,        /* = .section-lead */
.bg-head__note,
.bg-head__lead { font-size: var(--fs-body); line-height: 1.9; color: var(--linku-ink-soft); }
.bg-head__lead { max-width: 40em; }

/* ===== 01 30秒解説：1文ずつコピーできる行 ===== */
.bg-lines { display: flex; flex-direction: column; gap: var(--space-2); }
.bg-line {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--linku-white); border: 1px solid var(--linku-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
/* 30秒で順に話す4文なので、順序が分かる連番にする（レ点は「該当」の意味になる） */
.bg-line__num {
  flex: none; font-family: var(--font-latin); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.06em; line-height: 1.9; color: var(--bg-em);
  min-width: 1.6em;
}
.bg-line__text {
  flex: 1; font-size: var(--fs-caption); font-weight: 500; line-height: 1.8; letter-spacing: 0.02em;
  user-select: text; -webkit-user-select: text;
}
.bg-line .copy-btn { flex: none; align-self: center; }

/* ===== 02 製造販売元：ひとことステートメント＋数字カード ===== */
.bg-statement { font-size: var(--fs-lead); font-weight: 600; line-height: 1.75; letter-spacing: 0.02em; color: var(--linku-ink); }
.bg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.bg-fact {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
}
.bg-fact__label { font-size: var(--fs-note); line-height: 1.5; color: var(--linku-ink-soft); }
.bg-fact__num {   /* = .stat-num */
  font-family: var(--font-latin); font-size: var(--fs-h1); font-weight: 500;
  line-height: 1.15; letter-spacing: 0.01em; color: var(--linku-ink);
}
.bg-fact__num .u { font-family: var(--font-jp); font-size: 0.6em; font-weight: 600; letter-spacing: 0; margin-left: 2px; }
.bg-fact__word { font-size: var(--fs-h2); font-weight: 600; line-height: 1.15; letter-spacing: 0.04em; color: var(--linku-ink); }

/* ===== 表記の注意（サイトの .notice-box と同じ注意色・文字ルール） ===== */
.bg-caution {
  background: var(--linku-note-bg); border: 1px solid var(--linku-note-bd);
  border-left: 3px solid var(--linku-note); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.bg-caution__title { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.04em; color: var(--linku-note); }
.bg-caution ul { padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; list-style: disc; }
.bg-caution li { font-size: var(--fs-caption); line-height: 1.7; color: var(--linku-ink); }

/* ===== 共通：画像バンド／図版 ===== */
.bg-band {
  position: relative; width: 100%; aspect-ratio: 21 / 8;
  border-radius: var(--radius-md); overflow: hidden; background: #ece7df;
}
.bg-band img { width: 100%; height: 100%; object-fit: cover; }
.bg-band--lineup { aspect-ratio: 16 / 9; background: #eef0f0; }
.bg-figure {
  position: relative; width: 100%; aspect-ratio: 16 / 10;
  border-radius: var(--radius-md); overflow: hidden; background: var(--bg-aqua-soft);
}
.bg-figure img { width: 100%; height: 100%; object-fit: cover; }
.bg-figure--plain { background: var(--linku-white); }
/* 縦位置の写真（モデル）は16:10だと顔が切れるため、縦長の枠で全体を入れる */
.bg-figure--portrait { aspect-ratio: 4 / 5; }
/* 説明図（3要素の図など）は枠に合わせて切ると意味が壊れるため、全体を収める。
   地色はペールトーンに寄せ、白い円が沈まない範囲で背景となじませる。 */
.bg-figure--diagram { aspect-ratio: 1 / 1; background: #E6EFF0; }
.bg-figure--diagram img { object-fit: contain; }

/* ===== 03 ターゲット ===== */
.bg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.bg-card {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
/* 「生活環境」「美容意識」「肌不安・肌悩み」を同じ見え方に統一する。
   サイズは旧 .bg-panel__title に合わせ、色・字送り・左寄せは他カードに合わせる。 */
.bg-card__label {
  display: block; font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.06em;
  color: var(--linku-ink-soft);
}
.bg-tick { display: flex; flex-direction: column; gap: var(--space-2); }
.bg-tick > li { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); line-height: 1.8; }
.bg-tick__row { display: flex; gap: var(--space-2); }
/* 〇は「該当する」の意味に読めるため、項目を示す細い横罫にする */
.bg-tick__row::before {
  content: ''; flex: none; width: 10px; height: 1px; margin-top: 0.95em;
  background: var(--bg-em); opacity: .75;
}
.bg-tick__sub { padding-left: 1.6em; font-size: var(--fs-note); line-height: 1.7; color: var(--linku-ink-soft); }

.bg-panel {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.bg-panel__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: center; }
@media (min-width: 760px) {
  .bg-panel__grid { grid-template-columns: minmax(280px, 1.35fr) minmax(240px, 1fr); gap: var(--space-5); }
}
.bg-discs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.bg-disc {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: clamp(64px, 6vw, 72px); aspect-ratio: 1; border-radius: var(--radius-circle);
  background: #f2ede4; font-size: var(--fs-caption); font-weight: 600;
  line-height: 1.5; letter-spacing: 0.02em; color: var(--linku-ink);
}

/* ===== 04 商品特徴：Q&Aアコーディオン ===== */
.bg-qa { display: flex; flex-direction: column; border-top: 1px solid var(--linku-border); }
.bg-qa__item { border-bottom: 1px solid var(--linku-border); }
.bg-qa__item > summary { list-style: none; }
.bg-qa__item > summary::-webkit-details-marker { display: none; }
.bg-qa__summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4) var(--space-1); cursor: pointer;
}
.bg-qa__qa { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.bg-qa__q, .bg-qa__a { display: flex; gap: var(--space-3); align-items: baseline; }
.bg-qa__q { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.02em; line-height: 1.7; color: var(--linku-ink); }
.bg-qa__a { font-size: var(--fs-body); font-weight: 400; line-height: 1.8; letter-spacing: 0.02em; color: var(--linku-ink-soft); }
.bg-qa__mark { flex: none; font-family: var(--font-serif); letter-spacing: 0.06em; color: var(--bg-sand-deep); }
/* 本文側はmarkと合わせて1つのflexアイテムにする。
   ここを分けずにテキスト＋ruby等を直接の子にすると、地の文とrubyが別アイテムとして
   横に並んでしまい（rubyの前に不要な空白＋文の途中で改行がずれる）、
   折り返しが崩れる（例：Q&A「“整う”とどんな肌になれるの？」の「透澄肌」）。 */
.bg-qa__text { min-width: 0; }
.bg-qa__q .bg-qa__mark { font-size: var(--fs-caption); }
.bg-qa__a .bg-qa__mark { font-size: var(--fs-caption); }
.bg-qa__icon { position: relative; width: 14px; height: 14px; flex: none; margin-top: var(--space-1); }
.bg-qa__icon::before, .bg-qa__icon::after { content: ''; position: absolute; background: var(--linku-ink-soft); }
.bg-qa__icon::before { top: 6px; left: 0; width: 14px; height: 1px; }
.bg-qa__icon::after { top: 0; left: 6px; width: 1px; height: 14px; transition: opacity var(--dur-fast) var(--ease-soft); }
.bg-qa__item[open] .bg-qa__icon::after { opacity: 0; }
.bg-qa__body {
  padding: 0 var(--space-1) var(--space-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4); align-items: start;
}
.bg-qa__body--flow { display: flex; flex-direction: column; gap: var(--space-4); align-items: stretch; }
.bg-qa__col { display: flex; flex-direction: column; gap: var(--space-3); }
.bg-text { font-size: var(--fs-body); line-height: 1.9; color: var(--linku-ink); }

/* ===== 横スライダー（04の成分カード／05の誕生秘話） =====
   「横に動く」ことが分かるよう、①案内文 ②前後ボタン ③進捗バー ④右端のフェード
   を付ける。レール自体はネイティブの横スクロールなので、指でのスワイプも効く。 */
.bg-slider { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.bg-slider__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.bg-slider__meta { display: flex; align-items: center; gap: var(--space-3); }
.bg-slider__hint {
  font-size: var(--fs-note); letter-spacing: 0.06em; color: var(--linku-ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.bg-slider__hint::after {
  content: ''; width: 22px; height: 1px; background: var(--linku-border-strong);
}
.bg-slider__btns { display: flex; gap: 6px; flex: none; }
.bg-slider__btn {
  width: 34px; height: 34px; border-radius: var(--radius-circle);
  border: 1px solid var(--linku-border-strong); background: var(--linku-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), opacity var(--dur-fast);
}
.bg-slider__btn::before {
  content: ''; width: 7px; height: 7px; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg); margin-left: -2px;
}
.bg-slider__btn[data-slider-prev]::before { transform: rotate(-135deg); margin-left: 0; margin-right: -2px; }
.bg-slider__btn:hover:not(:disabled), .bg-slider__btn:focus-visible:not(:disabled) {
  background: var(--linku-ink); border-color: var(--linku-ink); color: #fff;
}
.bg-slider__btn:disabled { opacity: .3; cursor: default; }
/* 進捗バーはドラッグでもスライドできるスクロールバー。
   細いと「触れる」ことが伝わらないため、つまみを掴める太さにする。 */
.bg-slider__bar {
  position: relative; height: 8px; background: var(--linku-border);
  border-radius: 999px; cursor: pointer; touch-action: none;
}
/* 指でも掴めるよう、見た目より上下に広い当たり判定をつくる */
.bg-slider__bar::before { content: ''; position: absolute; inset: -11px 0; }
.bg-slider__bar > span {
  position: absolute; left: 0; top: 0; height: 100%; width: 40%; min-width: 28px;
  background: var(--linku-ink-soft); border-radius: 999px; cursor: grab;
  transition: transform var(--dur-fast) linear, background var(--dur-fast) var(--ease-soft);
}
.bg-slider__bar > span::after { content: ''; position: absolute; inset: -11px 0; }
.bg-slider.is-dragging { user-select: none; -webkit-user-select: none; }
.bg-slider.is-dragging .bg-slider__bar > span { transition: none; background: var(--linku-ink); cursor: grabbing; }
.bg-slider.is-dragging .bg-rail { scroll-behavior: auto; }
.bg-slider.is-static .bg-slider__bar,
.bg-slider.is-static .bg-slider__hint { display: none; }
/* 右端をわずかに透かして「続きがある」ことを示す */
.bg-slider .bg-rail { position: relative; }
.bg-slider:not(.is-end) .bg-rail {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, rgba(0,0,0,.25) 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 88%, rgba(0,0,0,.25) 100%);
}

/* — 横スクロールのカードレール — */
.bg-rail {
  min-width: 0;   /* これが無いと min-content まで膨らみ、はみ出した分が切れる */
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr);
  gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--space-3);
}
/* スクロールバーは出さない（下の .bg-slider__bar と二重に見えるため） */
.bg-rail::-webkit-scrollbar { display: none; }
.bg-rail { scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
.bg-rail > * { scroll-snap-align: start; }

.bg-ing {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  overflow: hidden; display: flex; flex-direction: column;
}
.bg-ing__media { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--bg-aqua-soft); }
.bg-ing__media img { width: 100%; height: 100%; object-fit: cover; }
.bg-ing__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.bg-ing__num { font-family: var(--font-latin); font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.08em; color: var(--bg-aqua-deep); }
.bg-ing__num--green { color: var(--bg-green-deep); }
.bg-ing__num--sand { color: var(--bg-sand-deep); }
.bg-ing__title {  /* = .accordion-item .a-title */
  margin: 0; font-family: var(--font-jp); font-size: var(--fs-body); font-weight: 600;
  line-height: 1.7; letter-spacing: 0.02em; color: var(--linku-ink);
}
.bg-ing__text { font-size: var(--fs-body); line-height: 1.9; color: var(--linku-ink-soft); }
.bg-more {
  align-self: flex-start; margin-top: var(--space-1);
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.02em; color: var(--linku-ink);
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.bg-more::after { content: ''; display: inline-block; width: 20px; height: 1px; background: currentColor; opacity: 0.55; }
.bg-more:hover, .bg-more:focus-visible { opacity: 0.62; }

/* — 透澄肌パネル — */
.bg-goal {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: #f5f8f8; border-radius: var(--radius-md); padding: var(--space-4);
}
.bg-goal__title { display: flex; align-items: center; gap: var(--space-3); }
.bg-goal__title span { font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0.08em; color: var(--linku-ink); }
.bg-goal__title::before, .bg-goal__title::after { content: ''; flex: 1; height: 1px; background: #cfd8d8; }
.bg-goal__discs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.bg-goal__disc {
  display: flex; align-items: center; justify-content: center;
  width: clamp(64px, 6vw, 72px); aspect-ratio: 1; border-radius: var(--radius-circle);
  background: var(--linku-white); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: 0.02em; color: var(--linku-ink);
}
/* vertical-align:super（既定）や0.4emの上付きだと、狭い円の中で「感」の行と
   「※1」がぶつかって崩れて見える。上付きをやめてベースライン（＝「感」と同じ行）に
   揃え、文字を小さく・色を薄くするだけで注記だと分かるようにする。 */
.bg-goal__disc sup { font-size: var(--fs-note); font-weight: 400; vertical-align: baseline; margin-left: 0.15em; color: var(--linku-ink-soft); }
.bg-footnote { font-size: var(--fs-note); line-height: 1.7; color: var(--linku-ink-soft); }

/* ===== 05 誕生秘話 ===== */
.bg-label { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; color: var(--linku-ink-soft); }
.bg-rail--story { grid-auto-columns: minmax(min(560px, 86vw), 1fr); }
.bg-slider--story .bg-slider__head { align-items: baseline; }
.bg-story {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  overflow: hidden; display: grid; grid-template-columns: 1fr; align-items: stretch;
}
@media (min-width: 560px) {
  .bg-story { grid-template-columns: minmax(160px, 40%) minmax(0, 1fr); }
}
.bg-story__media { position: relative; min-height: 200px; background: var(--bg-aqua-soft); }
.bg-story__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bg-story__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.bg-story__eyebrow { font-size: var(--fs-note); font-weight: 700; letter-spacing: 0.06em; color: var(--bg-sand-deep); }
.bg-story__title {  /* = .accordion-item .a-title */
  margin: 0; font-family: var(--font-jp); font-size: var(--fs-body); font-weight: 600;
  line-height: 1.7; letter-spacing: 0.02em; color: var(--linku-ink);
}
.bg-story__text { font-size: var(--fs-body); line-height: 1.9; color: var(--linku-ink-soft); }
.bg-keywords { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; padding-top: var(--space-2); }
/* ラベルを単独の行にして、チップ3つを次の行にまとめて並べる
   （ラベルとチップが同じ行で競うと、チップが2+1に割れて落ち着かないため） */
.bg-keywords__label { flex: 1 0 100%; font-family: var(--font-serif); font-size: var(--fs-note); letter-spacing: 0.14em; text-transform: uppercase; color: var(--linku-ink-soft); margin-right: 2px; }
.bg-chip {
  font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.02em; color: var(--linku-ink-soft);
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill); padding: 4px 10px;
}

/* ===== 06 語り出し ===== */
.bg-openings { display: flex; flex-direction: column; gap: var(--space-3); }
.bg-open {
  background: var(--linku-white); border: 1px solid var(--linku-border); border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.bg-open__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.bg-open__type { font-size: var(--fs-body); font-weight: 700; letter-spacing: 0.02em; color: var(--linku-ink); }
.bg-open__tag {
  font-size: var(--fs-note); font-weight: 600; letter-spacing: 0.02em; color: var(--linku-ink-soft); white-space: nowrap;
  border: 1px solid var(--linku-border-strong); border-radius: var(--radius-pill); padding: 3px 9px;
}
.bg-open__head .copy-btn { margin-left: auto; }
/* カードの中にもう一枚囲みがあると窮屈なので、引用は罫線1本で示す */
.bg-open__quote {
  margin: 0; padding: 0 var(--space-2) 0 var(--space-4); border-left: 2px solid var(--bg-em);
  font-size: var(--fs-body); font-weight: 600; line-height: 1.75; letter-spacing: 0.02em; color: var(--linku-ink);
  user-select: text; -webkit-user-select: text;
}
.bg-open__note { font-size: var(--fs-caption); line-height: 1.7; color: var(--linku-ink-soft); }
.bg-open__note a { color: var(--linku-ink); text-decoration: underline; text-underline-offset: 2px; }
.bg-closing { font-size: var(--fs-note); line-height: 1.7; color: var(--linku-ink-soft); }

/* ==========================================================================
   スマホ（〜719px）の調整
   ========================================================================== */
@media (max-width: 719px) {
  /* PC向けに入れた任意改行は、狭い画面では不自然な折り返しになるため無効化 */
  /* ただし肌悩みの補足（4項目を改行で並べたもの）は意味のある改行なので残す */
  .bg-hero__copy br, .bg-line__text br { display: none; }
  /* 30秒解説：番号＋本文を1行、コピーボタンは下に回して本文幅を確保する */
  .bg-line { flex-wrap: wrap; row-gap: var(--space-2); }
  .bg-line__text { flex: 1 1 100%; order: 2; }
  .bg-line__num { order: 1; }
  .bg-line .copy-btn { order: 3; margin-left: auto; }

  /* 肌悩み（5項目）／透澄肌を満たす条件（5項目）：折り返さず1行に収める */
  .bg-discs, .bg-goal__discs { flex-wrap: nowrap; gap: 6px; }
  .bg-disc, .bg-goal__disc { width: 56px; font-size: var(--fs-note); }

  /* 誕生秘話のKEY WORDS：ラベルとチップ3つが同じ行で競って2+1に割れるため、
     ラベルを単独行にした（.bg-keywords__labelのflex基本値）うえで、
     チップ3つが1行に収まるようパディング・gapを詰める */
  .bg-keywords { gap: 4px; }
  .bg-chip { padding: 4px 6px; }
}

/* ==========================================================================
   PC（他ページと同じ 720px の1段階のみ）
   ========================================================================== */
@media (min-width: 720px) {
  .bg-section { padding-block: var(--space-8); }
  .bg-section__inner { gap: var(--space-6); }

  /* 720〜1023px＝写真を画面幅いっぱいに使う（商品をできるだけ大きく見せる） */
  .bg-hero {
    min-height: calc(100vw / 1.601 + 128px);
    padding-block: var(--space-8);
  }
  .bg-hero__inner { gap: var(--space-4); }
  .bg-hero__title { font-size: var(--fs-hero-lg); }
  .bg-hero__copy { font-size: var(--fs-body); }

  .bg-head__num { font-size: var(--fs-h1); }
  .bg-head__title { font-size: var(--fs-display); }
  .bg-head__sub, .bg-head__note, .bg-head__lead { font-size: var(--fs-body); }

  .bg-line { padding: var(--space-5); }
  .bg-line__text { font-size: var(--fs-body); }
  .bg-line__num { font-size: var(--fs-body); }
  .copy-btn { font-size: var(--fs-caption); padding: 6px 14px; }

  .bg-statement { font-size: var(--fs-h4); }
  .bg-facts { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
  .bg-fact { padding: var(--space-5) var(--space-4); }
  .bg-fact__num { font-size: var(--fs-hero-sm); }
  .bg-fact__label { font-size: var(--fs-caption); }
  .bg-fact__word { font-size: var(--fs-display); }

  .bg-caution { padding: var(--space-4) var(--space-5); }
  .bg-caution__title { font-size: var(--fs-caption); }
  .bg-caution li { font-size: var(--fs-body); }

  .bg-card { padding: var(--space-5); }
  .bg-card__label { font-size: var(--fs-lead); }
  .bg-tick > li { font-size: var(--fs-body); }
  .bg-tick__sub { font-size: var(--fs-caption); }
  .bg-panel { padding: var(--space-5); }
  .bg-disc { font-size: var(--fs-caption); }

  .bg-qa__summary { padding: var(--space-5) var(--space-1); }
  .bg-qa__q { font-size: var(--fs-lead); }
  .bg-qa__a { font-size: var(--fs-lead); }
  .bg-qa__q .bg-qa__mark { font-size: var(--fs-body); }
  .bg-qa__a .bg-qa__mark { font-size: var(--fs-body); }
  .bg-text { font-size: var(--fs-body); }

  .bg-ing__body { padding: var(--space-5); }
  .bg-ing__title { font-size: var(--fs-h4); }
  .bg-ing__text { font-size: var(--fs-body); }
  .bg-ing__num { font-size: var(--fs-caption); }
  .bg-more { font-size: var(--fs-caption); }

  .bg-goal { padding: var(--space-5); }
  .bg-goal__title span { font-size: var(--fs-caption); }
  .bg-goal__disc { font-size: var(--fs-caption); }

  .bg-label { font-size: var(--fs-caption); }
  .bg-story__body { padding: var(--space-5); }
  .bg-story__eyebrow { font-size: var(--fs-caption); }
  .bg-story__title { font-size: var(--fs-h4); }
  .bg-story__text { font-size: var(--fs-body); }
  .bg-keywords__label { font-size: var(--fs-note); }
  .bg-chip { font-size: var(--fs-caption); }
  .bg-story__media { min-height: 320px; }

  .bg-open { padding: var(--space-5); }
  .bg-open__type { font-size: var(--fs-lead); }
  .bg-open__tag { font-size: var(--fs-caption); }
  .bg-open__quote { font-size: var(--fs-lead); }
  .bg-open__note { font-size: var(--fs-caption); }
}

/* 1024px以上＝写真を幅いっぱいにすると縦に伸びすぎるため、高さ基準に切り替える。
   写真の高さ＝バンド高の72%に固定するので、画面幅・拡大率が変わっても
   トリミングは一定（＝1stビューの見え方が固定される）。 */
@media (min-width: 1024px) {
  /* 写真がバンド全体を満たすので、コピーは完全に写真の中に載る */
  .bg-hero { min-height: clamp(660px, 42vw, 800px); }
  .bg-hero::before { height: calc(100% + 96px); }
  .bg-hero::after {
    background-size: 100% 100%, auto 100%;
    background-position: center top, center top;
  }
}