@charset "UTF-8";

/* ============================================================
   base.css
   1) XD書き出しトークン（tokens.css）の不具合を補正
   2) 意味のある名前のセマンティックトークンを定義
   3) リセット／ベース
   tokens.css は書き出したまま触らず、ここで上書きする方針
   ============================================================ */

/* ------------------------------------------------------------
   1) tokens.css の補正

   XDの書き出しには次の不正値が含まれるため、ここで打ち消す。
   - --unnamed-font-weight-600: 600px;   → font-weight に px は不正
   - --unnamed-font-weight-medium: medium; → font-weight に medium は不正
   ------------------------------------------------------------ */
:root {
  --unnamed-font-weight-600: 600;
  --unnamed-font-weight-medium: 500;
}

/* ------------------------------------------------------------
   2) セマンティックトークン
   右辺は必ず tokens.css の変数を参照する。
   色を変えるときは tokens.css 側を直すだけで全体に反映される。
   ------------------------------------------------------------ */
:root {
  /* --- font family --- */
  --font-base: var(--unnamed-font-family-noto-sans-jp), "Noto Sans JP",
               "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-display: var(--unnamed-font-family-zen-kaku-gothic-new), "Zen Kaku Gothic New",
                  var(--unnamed-font-family-noto-sans-jp), sans-serif;
  /* Report は有償フォント。未導入時は手書き風の代替に落ちる */
  --font-script: var(--unnamed-font-family-report), "Report", "Segoe Script", cursive;

  /* --- text color --- */
  --color-text: var(--unnamed-color-000000);
  --color-text-soft: var(--unnamed-color-403c39);
  --color-text-mute: var(--unnamed-color-4c4948);
  --color-text-invert: var(--unnamed-color-ffffff);

  /* --- surface --- */
  --color-kv-bg: var(--unnamed-color-171717);
  --color-concept-bg: var(--unnamed-color-dbeffc);
  --color-product-band: var(--unnamed-color-91bed5);
  --color-product-bg: var(--unnamed-color-dfedf5);
  --color-features-bg: var(--unnamed-color-c6e6e6);
  --color-card-bg: var(--unnamed-color-ffffff);
  --color-footer-bg: var(--unnamed-color-16181d);
  --color-copy-bg: var(--unnamed-color-91bed5);
  --color-wave: var(--unnamed-color-d2e7f7);

  /* --- PC背景 --- */
  --color-page-top: var(--unnamed-color-e2f5ff);
  --color-page-bottom: var(--unnamed-color-b6d6e8);
  --color-page-mid: var(--unnamed-color-cbdfef);

  /* --- accent --- */
  --color-accent: var(--unnamed-color-2eb6aa);      /* 購入するボタン */
  --color-band: var(--unnamed-color-454545);        /* Point見出し帯 */
  --color-marker: var(--unnamed-color-f9ff5c);      /* 黄色マーカー */
  --color-badge-gel: #FBF45F;                        /* 高密着ジェル */
  --color-badge-foam: #FB5578;                       /* 泡立て不要 */
  --color-line: var(--unnamed-color-707070);

  /* --- layout --- */
  --w-main: 500px;   /* SPデザイン幅＝メインカラム幅 */
  --w-side: 470px;   /* PC片側カラム幅（1440 = 470 + 500 + 470） */
  --pad-x: 9.6%;     /* 48 / 500 */
  --radius-card: 30px;
}

/* ------------------------------------------------------------
   タイポグラフィスケール（pt指定・画面幅で可変）

   tokens.css の font-size は px 固定のため、画面幅を変えても
   文字サイズが追従しなかった。ここで pt に置き換え、
   vw を挟んで可変にする。

   ・500px以上   … デザインどおりのサイズ（clampの上限）
   ・375〜500px  … 画面幅に比例して縮小（vw）
   ・375px以下   … 可読性のため縮小を止める（clampの下限）

   中央の vw は「デザインpx ÷ 500 × 100」。
   例：22px → 22 / 500 × 100 = 4.4vw
   上限 pt は「デザインpx × 0.75」（1pt = 4/3px）。
   ------------------------------------------------------------ */
:root {
  /* clamp() 非対応ブラウザ向けのフォールバック（固定pt） */
  --fs-12: 9pt;
  --fs-14: 10.5pt;
  --fs-16: 12pt;
  --fs-18: 13.5pt;
  --fs-20: 15pt;
  --fs-22: 16.5pt;
  --fs-24: 18pt;
  --fs-26: 19.5pt;
  --fs-40: 30pt;
}

@supports (font-size: clamp(1pt, 1vw, 2pt)) {
  :root {
    --fs-12: clamp(6.8pt,  2.4vw,  9pt);
    --fs-14: clamp(7.9pt,  2.8vw,  10.5pt);
    --fs-16: clamp(9pt,    3.2vw,  12pt);
    --fs-18: clamp(10.1pt, 3.6vw,  13.5pt);
    --fs-20: clamp(11.3pt, 4vw,    15pt);
    --fs-22: clamp(12.4pt, 4.4vw,  16.5pt);
    --fs-24: clamp(13.5pt, 4.8vw,  18pt);
    --fs-26: clamp(14.6pt, 5.2vw,  19.5pt);
    --fs-40: clamp(22.5pt, 8vw,    30pt);
  }
}

/* ------------------------------------------------------------
   字間
   px固定だと文字サイズを変えたときに比率が崩れるため、
   tokens.css の値を em に換算して定義する。
   例：22px に 2.2px → 0.1em
   ------------------------------------------------------------ */
:root {
  --ls-004: 0.04em;   /* 24px / 1px */
  --ls-005: 0.05em;   /* 12px / 0.6px、14px / 0.7px、16px / 0.8px */
  --ls-008: 0.08em;   /* 18px / 1.44px、24px / 1.92px */
  --ls-01:  0.1em;    /* 16/1.6、18/1.8、22/2.2、26/2.6、40/4 */
  --ls-015: 0.15em;   /* 24px / 3.6px、26px / 3.9px */
  --ls-025: 0.25em;   /* 18px / 4.5px、22px / 5.5px */
}

/* ------------------------------------------------------------
   3) 500px基準のフルード設計
   1rem = 10px（デザイン1px = 0.1rem）。
   500px未満では viewport に比例して縮小し、カンプの比率を保つ。
   ------------------------------------------------------------ */
html {
  font-size: 62.5%;
  /* ページ内リンクのスムーススクロール（JS不要） */
  scroll-behavior: smooth;
}

/* ドロワー／モーダルが開いている間は背面をスクロールさせない */
html:has(.c-drawer:target),
html:has(.c-modal:target) {
  overflow: hidden;
}
@media (max-width: 500px) {
  html { font-size: 2vw; }  /* 10 / 500 * 100vw */
}

/* ------------------------------------------------------------
   リセット
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

body {
  font-family: var(--font-base);
  font-size: var(--fs-16);
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-page-top);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

sup {
  font-size: 0.6em;
  vertical-align: super;
  line-height: 0;
}

[hidden] { display: none !important; }

/* フォーカスリング */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ------------------------------------------------------------
   ユーティリティ
   ------------------------------------------------------------ */
/* href="#close" の飛び先。position:fixed なのでスクロール位置が動かない */
.u-close-anchor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 黄色マーカー */
.u-marker {
  background: linear-gradient(transparent 55%, var(--color-marker) 55%);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}