@charset "UTF-8";

:root {
  /* ====================
      Colors
==================== */
  --color-bg: #ece9e7;
  --color-text: #63636b;
  --color-primary: #8ba3b2;
  --color-on-primary: #ffffff;

  /* ====================
      Typography
==================== */
  --ff-sans: "Zen Kaku Gothic New", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Shippori Mincho", "Noto Serif JP", serif;
  --ff-en: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-display: "Libre Baskerville", "Times New Roman", serif;


  --fz-15-16: clamp(1.5rem, 1.40rem + 0.25vw, 1.7rem);
  /* 目安：SP 1.5 / TB 1.55〜1.65 / PC 1.7 */

  --fz-16-18: clamp(1.6rem, 1.45rem + 0.55vw, 1.9rem);
  /* 目安：SP 1.6 / TB 1.7〜1.8 / PC 1.9 */

  --fz-18-22: clamp(1.8rem, 1.5rem + 0.9vw, 2.2rem);
  /* 目安：SP 1.8 / TB 2.0前後 / PC 2.2 */

  --fz-20-26: clamp(2.1rem, 1.7rem + 1.2vw, 2.6rem);
  /* 目安：SP 2.4 / TB 2.7〜3.0 / PC 3.2 */

  --fz-24-32: clamp(2.4rem, 1.9rem + 1.6vw, 3.2rem);
  /* 目安：SP 2.4 / TB 2.7〜3.0 / PC 3.2 */

  --fz-26-40: clamp(2.6rem, 1.9rem + 2.2vw, 4.0rem);
  /* 目安：SP 2.6 / TB 3.2〜3.7 / PC 4.0 */

  --fz-32-52: clamp(3.2rem, 2.1rem + 3.0vw, 5.2rem);
  /* 目安：SP 3.2 / TB 4.2〜4.9 / PC 5.2 */


  --lh-base: 1.6;
  --lh-tight: 1.8;

  /* ====================
      Buttons
==================== */
  /* ===== HEADER CTA（ヘッダー専用）===== */
  --header-cta-bg: #63b0b8;
  --header-cta-fg: #fff;
  --header-cta-radius: 999px;

  --header-cta-w-pc: 195px;
  --header-cta-h-pc: 52px;

  /* ※ header内CTAをSPで表示する将来用（現状は display:none） */
  --header-cta-w-sp: 200px;
  --header-cta-h-sp: 60px;

  /* TB/SP（パネル内）は可変にしておく：最小200、最大340 */
  --header-panel-cta-w: clamp(200px, 72vw, 340px);
  --header-panel-cta-h: 60px;

  /* 高さ固定と両立する “横paddingだけ” */
  --header-cta-pad-x-pc: 22px;
  --header-cta-pad-x-sp: 22px;

  /* ===== 下層section CTA ===== */
  --btn-h: clamp(70px, 8vw, 92px);
  --btn-pad-x: clamp(24px, 4vw, 56px);
  --btn-radius: 999px;

  --btn-letter-spacing: .06em;

  --btn-min-w: 270px;
  --btn-max-w: 400px;
  --btn-w: clamp(var(--btn-min-w), 30vw, var(--btn-max-w));

  /* arrow (⇀) */
  --btn-arrow-w: clamp(42px, 8vw, 56px);
  --btn-arrow-stroke: 2px;
  --btn-arrow-head-w: clamp(5px, 1.2vw, 8px);
  --btn-arrow-translate-y: 0px;

  --btn-hover-lift: -1px;
  --btn-hover-brightness: .98;
  --btn-active-lift: 0px;
  --btn-active-brightness: .94;

  --btn-shadow: 8px 8px 16px 0 rgba(59, 129, 136, 0.2);

  /* fgだけ共通 */
  --btn-fg: #fff;

  /* ====================
      Layout
==================== */
  --header-h: 94px;

  /* ====================
      Textures (shared)
      ※ components側で使い回す用
==================== */
  --tex-marble-img: url("../img/marble-texture.png");
  --tex-marble-repeat: repeat;
  --tex-marble-size: 600px auto;
  --tex-marble-position: center;
}

/* 下層section CTA（TB用） */
@media (max-width: 1040px) {
  :root {
    --btn-w: clamp(300px, 42vw, 367px);
  }
}