@charset "UTF-8";
/* ==========================================================================
   base.css — デザイントークン／タイポグラフィ基礎／レイアウト土台
   トークンの定義は docs/03_design-rules.md を参照
   色はテーマCSS（theme-a.css / theme-b.css）で上書きする
   ========================================================================== */

:root {
  /* --- 余白スケール（8pxベース） --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* --- セクション余白（テーマで上書き可） --- */
  --section-py: var(--space-7);

  /* --- 文字サイズ --- */
  --fs-xs: clamp(12px, 0.75rem + 0.1vw, 13px);
  --fs-sm: clamp(13px, 0.8rem + 0.1vw, 14px);
  --fs-base: clamp(15px, 0.9rem + 0.15vw, 16px);
  --fs-md: clamp(16px, 0.95rem + 0.25vw, 18px);
  --fs-lg: clamp(18px, 1rem + 0.5vw, 22px);
  --fs-xl: clamp(22px, 1.2rem + 0.8vw, 28px);
  --fs-2xl: clamp(26px, 1.4rem + 1.4vw, 36px);
  --fs-3xl: clamp(30px, 1.5rem + 2.2vw, 44px);
  --fs-hero: clamp(32px, 1.6rem + 3.4vw, 56px);

  /* --- 行間 --- */
  --lh-body: 1.9;
  --lh-heading: 1.4;
  --lh-hero: 1.3;

  /* --- レイアウト --- */
  --container: 1120px;
  --container-narrow: 800px;
  --container-pad: 20px;

  /* --- ヘッダー・追従バー --- */
  --header-h: 64px;
  --cta-bar-h: 64px;

  /* --- 形状（テーマで上書き） --- */
  --radius: 4px;
  --radius-lg: 8px;
  --shadow: 0 2px 8px rgba(11, 46, 79, 0.08);
  --shadow-lg: 0 8px 24px rgba(11, 46, 79, 0.12);

  /* --- フォント（テーマで上書き） --- */
  --ff-body: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN",
    "Yu Gothic", "Meiryo", sans-serif;
  --ff-heading: var(--ff-body);
  --ff-num: var(--ff-body);

  /* --- ウェイト ---
     Zen Kaku Gothic New は M PLUS 1 より線が細く、同じ数値だと見出しの押しが弱い。
     そのため見出しは上げ、それ以外は下げてメリハリを付け直している。

       --fw-title  見出し・タイトル・大きな数値      700/800 → 900（上げる）
       --fw-bold   ボタン・ナビ・電話番号など押すUI  700 のまま（据え置き）
       --fw-label  ラベル・小見出し・キャプション    700/600 → 500（下げる）
       --fw-body   本文                              400（可読性のため据え置き）

     ウェイトを変えたいときはこの4行だけ直せば全ページに反映される。 */
  --fw-body: 400;
  --fw-label: 500;
  --fw-bold: 700;
  --fw-title: 900;

  /* --- ブランドカラー（デザインサンプル menu.png とロゴから採色。テーマによらず共通） --- */
  --c-brand-blue: #0149ba;
  /* グローバルナビ用。--c-brand-blue より明るい水色寄り（白背景でコントラスト比 4.5:1） */
  --c-brand-blue-light: #3579c9;
  /* ロゴの「WASH MAN」と同じ紺。社名まわりのテキストに使う */
  --c-brand-navy: #0e4e96;
  /* LINE公式のブランドカラー。デザインサンプルからの採色は #24E81F だったが、
     明るすぎて白文字とのコントラストが 1.66:1 しかなく読めなかったため差し替えた。
     この色なら 3.03:1 まで上がる。値は --c-line と同じ。 */
  --c-brand-green: #06c755;
  /* 蛍光ペン風マーカーの黄色（番号バッジと同じ） */
  --c-brand-green-marker: #edf219;
  /* サンプルで黒に見える文字はこの値を使う（純黒より少し緩めた濃灰） */
  --c-ink: #343434;

  /* --- 色のフォールバック（theme-a.css / theme-b.css で必ず上書きされる） --- */
  --c-primary: #0b2e4f;
  --c-primary-dark: #071e35;
  --c-primary-light: #1b4a78;
  --c-accent: #0a84ff;
  --c-accent-dark: #0066cc;
  --c-cv: #e8590c;
  --c-cv-dark: #c2410c;
  --c-line: #06c755;
  --c-bg: #ffffff;
  --c-bg-alt: #f4f7fa;
  --c-bg-dark: #0b2e4f;
  --c-text: #1a2733;
  --c-text-sub: #5a6b7c;
  --c-text-invert: #ffffff;
  --c-border: #d8e1e9;
  --c-error: #d92d20;

  /* --- トランジション --- */
  --t-fast: 0.18s ease;
  --t-base: 0.28s ease;
}

@media (min-width: 768px) {
  :root {
    --section-py: var(--space-8);
    --container-pad: 24px;
    --header-h: 80px;
  }
}

/* ==========================================================================
   ベーススタイル
   ========================================================================== */

body {
  font-family: var(--ff-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--c-text);
  background-color: var(--c-bg);
  letter-spacing: 0.02em;
  /* SP追従CTAバーがコンテンツ末尾を隠さないようにする */
  padding-bottom: var(--cta-bar-h);
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-heading);
  line-height: var(--lh-heading);
  letter-spacing: 0.01em;
}

p {
  overflow-wrap: break-word;
}

a {
  transition: color var(--t-fast), opacity var(--t-fast);
}

/* キーボード操作時のフォーカスを必ず見せる */
:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   レイアウト土台
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--container-pad) * 2);
}

.section {
  padding-block: var(--section-py);
}

.section--alt {
  background-color: var(--c-bg-alt);
}

.section--dark {
  background-color: var(--c-bg-dark);
  color: var(--c-text-invert);
}

.section--dark .section__lead,
.section--dark .text-sub {
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   ユーティリティ
   ========================================================================== */

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

.text-sub {
  color: var(--c-text-sub);
  font-size: var(--fs-sm);
}

.text-note {
  color: var(--c-text-sub);
  font-size: var(--fs-xs);
  line-height: 1.7;
}

.num {
  font-family: var(--ff-num);
  font-weight: var(--fw-title);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.nowrap {
  white-space: nowrap;
}

/* 蛍光ペン風のマーカー。要素が画面に入って .is-visible が付くと左から引かれる */
.marker {
  background-color: transparent;
  color: inherit;
  background-image: linear-gradient(transparent 60%, var(--c-brand-green-marker) 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.9s cubic-bezier(0.25, 0.8, 0.3, 1) 0.3s;
}

.is-visible .marker,
.is-visible.marker {
  background-size: 100% 100%;
}

/* スクロール連動フェードイン（main.js が .is-visible を付与） */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}