@charset "UTF-8";
/* ============================================================================
   PlusOnePoint Design System — Tokens
   ----------------------------------------------------------------------------
   サイト全体を調律するための単一の変数層。
   ブランド色（紺 #043F6D / 空 #46A2DA / 桃 #EB4878 / 橙 #F5A100）はそのまま維持し、
   その周辺のランプ・余白・タイポ・影・モーションを体系化する。

   読み込み順: tokens.css → layout.css → button.css → 各ページのCSS
   ページ側は原則ここの変数を参照し、16進数を直書きしないこと。
   ========================================================================= */

:root {
  /* --------------------------------------------------------------------
     1. カラーランプ（ブランド色は各ランプの基準ステップに固定）
     -------------------------------------------------------------------- */

  /* 紺 — ブランド基準色は navy-700 */
  --navy-50: #f0f5f9;
  --navy-100: #dce7f0;
  --navy-200: #b6cbdd;
  --navy-300: #8aaac6;
  --navy-400: #5583a9;
  --navy-500: #2a6291;
  --navy-600: #0e4f7d;
  --navy-700: #043f6d;
  --navy-800: #03314f;
  --navy-900: #02263c;
  --navy-950: #011a29;

  /* 空 — ブランド基準色は sky-500 */
  --sky-50: #f2f8fc;
  --sky-100: #e1eff9;
  --sky-200: #bedcf2;
  --sky-300: #93c7e9;
  --sky-400: #6bb4e1;
  --sky-500: #46a2da;
  --sky-600: #2e86c4;
  --sky-700: #226ba0;
  --sky-800: #1b5480;

  /* 桃 — ブランド基準色は pink-500（主CTA） */
  --pink-50: #fef2f5;
  --pink-100: #fde3ea;
  --pink-200: #fac2d1;
  --pink-300: #f79bb2;
  --pink-400: #f27093;
  --pink-500: #eb4878;
  --pink-600: #d82d60;
  --pink-700: #b41f4c;
  --pink-800: #8e1a3e;

  /* 橙 — アクセント（バッジ・実績） */
  --orange-50: #fff8e9;
  --orange-100: #fef1d9;
  --orange-300: #fbcf74;
  --orange-500: #f5a100;
  --orange-600: #d68b00;
  --orange-700: #a86d00;

  /* 金・紫 — 旧 _variables.scss から引き継いだ補助色。
     実績バッジやサミット系の装飾で使われていたため、パレットとして残す。 */
  --gold-100: #f3e9dc;
  --gold-300: #d0b48a;
  --gold-500: #a57a43;
  --gold-700: #7d5c32;

  --purple-100: #f0dcf9;
  --purple-500: #aa3dd9;
  --purple-700: #822aa8;

  /* 中性色 — 紺側にわずかに寄せてブランドと馴染ませる */
  --neutral-0: #ffffff;
  --neutral-25: #fcfdfe;
  --neutral-50: #f7f9fb;
  --neutral-100: #eff3f7;
  --neutral-200: #e1e8ef;
  --neutral-300: #cbd6e0;
  --neutral-400: #9aaab8;
  --neutral-500: #6e8093;
  --neutral-600: #536374;
  --neutral-700: #3d4b59;
  --neutral-800: #2a343f;
  --neutral-900: #1a222b;

  /* --------------------------------------------------------------------
     2. 意味ベースの別名（ページCSSはこちらを使う）
     -------------------------------------------------------------------- */
  --surface: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-raised: var(--neutral-0);
  --surface-quiet: var(--navy-50);
  --surface-inverse: #032b49;
  --surface-inverse-deep: var(--navy-950);

  --ink: var(--neutral-800);
  --ink-strong: var(--navy-700);
  --ink-muted: var(--neutral-600);
  --ink-subtle: var(--neutral-500);
  --ink-inverse: #eef5fa;
  --ink-inverse-muted: rgba(238, 245, 250, 0.72);
  --ink-inverse-subtle: rgba(238, 245, 250, 0.5);

  --line: var(--neutral-200);
  --line-strong: var(--neutral-300);
  --line-inverse: rgba(255, 255, 255, 0.16);

  /* モーダルの背面を覆う幕。純黒だと背面の紺が濁って見えるので、
     navy-900 側に寄せた暗色を使う。透過率はパネルの白が確実に浮く 0.6。 */
  --scrim: rgba(4, 26, 43, 0.6);

  --brand: var(--navy-700);
  --brand-hover: var(--navy-800);
  --accent: var(--pink-500);
  --accent-hover: var(--pink-600);
  --accent-quiet: var(--pink-50);

  /* 主CTA（無料相談・購入）の色。
     以前は --accent（桃）をそのまま使っていたが、
       - 紺で組んだ画面の中で桃のベタ塗りだけが浮き、安っぽく見える
       - 桃は「いいね」やSVGの差し色にも使っており、CTAだけの色になっていない
     ため、桃は小さな差し色専用に戻した。

     一度 navy-800 にしたが、これは失敗。
     トップのヒーローは暗い写真＋スクリムの上にあり、紺のCTAが沈む。
     CTAは白地のセクションと暗いヒーローの両方に置かれるので、
     どちらの地色よりも明るく／暗く「ならない」中間の明度が要る。
     → sky-700。白抜き文字とのコントラストは 5.69:1（AA合格）、
        白地の上では面として立ち、暗いヒーローの上では明るく抜ける。 */
  --cta: var(--sky-700);
  --cta-hover: var(--sky-800);
  /* 汎用の灰色の影だと白地でぼやけて「浮いていない板」に見えるので、
     CTA の影だけは色を帯びさせる。 */
  --cta-shadow: 0 1px 2px rgba(2, 38, 60, 0.2), 0 8px 20px rgba(2, 38, 60, 0.24);
  --cta-shadow-hover: 0 2px 4px rgba(2, 38, 60, 0.22), 0 16px 32px rgba(2, 38, 60, 0.3);
  --highlight: var(--orange-500);
  --highlight-quiet: var(--orange-50);

  /* --------------------------------------------------------------------
     3. 余白
     4px 基準のスケールに加え、セクションの「密度」を選べるトークンを持つ。
     今回のリニューアルの中核: 余白を減らすのではなく、強弱をつける。
     -------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6.5rem;

  /* セクションの縦リズム（tight / normal / loose） */
  --section-pad-tight: clamp(2.5rem, 5vw, 3.75rem);
  --section-pad: clamp(3.75rem, 7.5vw, 6rem);
  --section-pad-loose: clamp(5rem, 10.5vw, 8.5rem);

  /* --------------------------------------------------------------------
     4. タイポグラフィ（全段階を流動化）
     -------------------------------------------------------------------- */
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Raleway", "Noto Sans JP", sans-serif;

  --fs-micro: clamp(0.68rem, 0.66rem + 0.1vw, 0.75rem);
  --fs-small: clamp(0.8rem, 0.78rem + 0.12vw, 0.875rem);
  --fs-body: clamp(0.95rem, 0.92rem + 0.16vw, 1.0625rem);
  --fs-body-lg: clamp(1rem, 0.955rem + 0.23vw, 1.1875rem);
  /* リード文（デック）専用。本文よりわずかに大きい程度に留める。
     ここを大きくしすぎると、見出しが短い場合に文字量で見出しに勝ってしまう。 */
  --fs-lede: clamp(1rem, 0.94rem + 0.3vw, 1.25rem);
  /* 見出し横（.ds-header__aside）に置く補足文。
     見出しと横並びになる位置では、リード文と同じ 1.25rem では
     2〜3行の青い塊が見出しと張り合ってしまう。注釈の階層まで落とす。 */
  --fs-aside: clamp(0.9rem, 0.86rem + 0.2vw, 1.0625rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.75rem);

  --lh-tight: 1.22;
  --lh-snug: 1.45;
  --lh-body: 1.85;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.14em;

  /* 本文の一行の長さ（現状の紹介文は改行制御がなく読みづらい） */
  --measure: 42em;
  --measure-narrow: 32em;

  /* --------------------------------------------------------------------
     5. 角丸 — ピルは主CTA専用に予約する
     -------------------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --------------------------------------------------------------------
     6. 影 — 青みを帯びた影をやめ、中性色の自然な陰影に
     -------------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 32, 44, 0.06), 0 1px 3px rgba(20, 32, 44, 0.05);
  --shadow-2: 0 2px 4px rgba(20, 32, 44, 0.05), 0 6px 16px rgba(20, 32, 44, 0.08);
  --shadow-3: 0 4px 8px rgba(20, 32, 44, 0.05), 0 16px 36px rgba(20, 32, 44, 0.12);
  --shadow-4: 0 8px 16px rgba(20, 32, 44, 0.06), 0 28px 64px rgba(20, 32, 44, 0.16);
  --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* --------------------------------------------------------------------
     7. モーション
     -------------------------------------------------------------------- */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);

  /* --------------------------------------------------------------------
     8. レイアウト
     -------------------------------------------------------------------- */
  --content-max: 72rem;
  --content-narrow: 46rem;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);

  /* --------------------------------------------------------------------
     9. フォーカス表示（サイト全体に存在しなかったため新設）
     -------------------------------------------------------------------- */
  --focus-color: var(--sky-600);
  --focus-ring: 0 0 0 3px rgba(70, 162, 218, 0.45);
  --focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, 0.6);

  /* 重なり順 */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* ============================================================================
   グローバルなフォーカスリング
   ここまでサイト全体に :focus-visible のスタイルが1つも無かった。
   ========================================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* 紺地のセクション内では白いリングに切り替える */
.ds-section--inverse
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: #ffffff;
}

/* ============================================================================
   モーション低減の一括停止
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* hover時の移動・拡大も止める */
  *:hover {
    transform: none !important;
  }
}