@charset "UTF-8";
/* =========================================================
   WWE — デザイントークン
   配色はチラシ（tirasi-design/soudan.css）の確定値。
   すべて --wwe- 接頭辞。AFFINGER や他サイトの変数と衝突させない。

   生の色コード・生の px を各セクションのCSSに書かない。
   必ずこの変数を経由する。
   ========================================================= */

:root {

  /* ---- 色（チラシ確定値） ---- */
  --wwe-navy:         #12203A;  /* ヘッダー・FV地・CTA帯 */
  --wwe-navy-dark:    #0D1829;  /* フッター。CTA帯と地続きに見せない */
  --wwe-navy-soft:    #26395C;  /* 写真オーバーレイ・比較図の枠 */
  --wwe-gold:         #B0873B;  /* ブランド色。アイコン・罫線・装飾・ネイビー地の文字 */

  /* 白文字を載せる面（主CTAボタン・重要バッジ）の地の色。
     --wwe-gold の上に白文字を置くと 3.29:1 で AA（4.5:1）に届かず、
     最も押してほしいボタンが読みにくかったため専用トークンを分けた（2026-07-30・A案）。
     白 on #8A6726 = 5.19:1。

     ⚠️ --wwe-gold を書き換えないこと。
        罫線・アイコン・装飾は #B0873B のままにして、ブランドの見え方を変えない。
     ⚠️ 白文字を載せる面を増やすときは、必ずこのトークンを使う。 */
  --wwe-gold-cta:     #8A6726;

  /* 明るい地に置く小さな金色文字（13〜17px）と hover / active。
     #96712C は白 4.47 / soft 4.10 / mid 3.78 で WCAG AA（4.5:1）に届かず、
     特に mid 背景の eyebrow が読みづらかったため #7F5F22 に変更（2026-07-30）。
     白 5.89 / soft 5.40 / mid 4.98 で全背景 AA を満たす。
     ⚠️ ネイビー地には使わない（沈む）。ネイビー地は --wwe-gold のまま。 */
  --wwe-gold-dark:    #7F5F22;
  --wwe-gold-pale:    #F0E7D5;  /* ゴールドの淡い面 */

  --wwe-text:         #12203A;  /* 見出し */
  --wwe-text-body:    #56606F;  /* 本文 */
  /* 注記・営業時間・補足。
     #8A929E は白地 3.14:1 で AA（4.5:1）未達だった。
     ヘッダーの営業時間など「読ませたい情報」に使っているうえ、
     対象がシニア層のため #6B7280（白地 4.83:1）に濃くした（2026-07-30）。
     ⚠️ ブランド色ではない中立グレーなので、濃くしても配色の印象は変わらない。 */
  --wwe-text-mute:    #6B7280;

  --wwe-bg:           #FFFFFF;
  --wwe-bg-soft:      #F4F5F7;  /* セクション交互背景 1 */
  --wwe-bg-mid:       #EAECF0;  /* セクション交互背景 2 */
  --wwe-line:         #DDE1E8;  /* カード枠 */

  --wwe-white:        #FFFFFF;
  --wwe-on-navy:      #FFFFFF;  /* ネイビー地の文字 */
  --wwe-on-navy-sub:  #C6CCD6;  /* ネイビー地の補足文 */

  /* ---- 角丸 ----
     ピル型（9999px）は親しみやすさ寄りのため採用しない。
     「株式会社らしい信頼感・安売りしない」を優先し 8px の矩形にする。
     完全な直角にはせず、相談しやすい柔らかさを残す。 */
  --wwe-radius-btn:   8px;   /* すべてのボタン・フォーム入力欄 */
  --wwe-radius-card:  8px;   /* カード・パネル */
  --wwe-radius-tag:   9999px; /* [8]制作物タグのみピル */

  /* ---- ボタン高さ（3種類のみ。個別に padding で高さを作らない） ---- */
  --wwe-btn-h-lg:     56px;  /* 主CTA（FV・最終CTA） */
  --wwe-btn-h-md:     48px;  /* 補助・中CTA・SP固定CTA */
  --wwe-btn-h-sm:     44px;  /* ヘッダー内。最小タップ領域 */

  /* ---- タイポ ----
     チラシの A-OTF 新ゴ Pro は Web フォント配信に別契約が必要なため使わない。
     Noto Sans JP で代替し、ウェイト・字間・行間・余白で印象を寄せる。
     読み込むウェイトは 400 / 700 の2つだけ。 */
  --wwe-font:      "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                   "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --wwe-font-num:  Georgia, "Times New Roman", serif;  /* 01/02/03・丸番号 */

  /* FVのキャッチ「あなたの「やりたい」を、／仕事に。」を
     どの幅でも <br> の位置どおり2行で組むための値。
     52px / 5vw では1行目が列幅に入らず3行に割れていた（実測 643px 対 594px）。

     和文は全角＝1em なので必要幅はフォントに依存しない:
        必要幅 = 12文字 × font-size × 1.03（letter-spacing .03em）= 12.36 × fs
     ブラウザ実測（52px → 643px）が 12.36×52=642.7 と一致することを確認済み。

     この式と列幅（page-home.css の 62fr / SP は vw-40）で全ブレークポイントを検算した。
     最小マージンは 1024px で +18px、360px で +11px。
     ⚠️ サイズ・字間・改行位置のどれかを変えたら、この式で必ず検算し直すこと。 */
  --wwe-fs-h1:      clamp(25px, 4.4vw, 48px);
  --wwe-fs-h2:      clamp(24px, 3.6vw, 36px);
  --wwe-fs-h3:      clamp(18px, 2vw,   20px);
  --wwe-fs-body:    17px;   /* SP で 16px（base.css で切替） */
  --wwe-fs-lead:    17px;
  --wwe-fs-note:    14px;
  --wwe-fs-small:   13px;
  --wwe-fs-eyebrow: 13px;
  --wwe-fs-num:     36px;   /* 01/02/03 */

  --wwe-lh-head:    1.45;
  --wwe-lh-body:    1.8;
  --wwe-ls-head:    .04em;
  --wwe-ls-body:    .02em;
  --wwe-ls-eyebrow: .3em;

  --wwe-fw-normal:  400;
  --wwe-fw-bold:    700;

  /* 和文の約物（「」、。）を詰める。
     全角のままだと「あなたの『やりたい』を、」のかっこ前後が1文字ぶん空いて、
     チラシ（新ゴ）の締まった見え方から離れる。

     ⚠️ 本文には当てない。長文に palt を効かせると行長が揃わず、かえって読みにくい。
        キャッチ・見出し・キッカーなど、字が大きくアキが目立つ箇所だけに使う。
     使い方: font-feature-settings: var(--wwe-palt); */
  --wwe-palt:       "palt" 1;

  /* ---- ロゴ ----
     画像ロゴの高さ。2行組みのワードマークを前提にした値。
     正式データの縦横比が確定したらここだけ調整する（CSSを探し回らない）。
     PC は is-compact でタグラインが消えるため、ヘッダーは 64px に収まる。 */
  --wwe-logo-h:       44px;

  /* ---- 余白・幅 ---- */
  --wwe-sec-y:            96px;   /* SP で 64px */
  --wwe-gutter:           24px;
  --wwe-container:        1120px;
  --wwe-container-narrow: 880px;

  /* ---- 影・動き ---- */
  --wwe-shadow-card: 0 10px 28px rgba(18, 32, 58, .07);
  --wwe-shadow-pop:  0 14px 36px rgba(18, 32, 58, .18);
  --wwe-ease:        cubic-bezier(0.4, 0.4, 0, 1);
  --wwe-dur:         .3s;

  /* ---- z-index（衝突防止のため一元管理） ---- */
  --wwe-z-header:      100;
  --wwe-z-sp-cta:      90;
  --wwe-z-nav-overlay: 110;
}

/* SP のみ本文を 16px、セクション余白を 64px に */
@media (max-width: 767px) {
  :root {
    --wwe-fs-body: 16px;
    --wwe-fs-lead: 16px;
    --wwe-sec-y:   64px;
    --wwe-gutter:  20px;
    --wwe-fs-num:  30px;
    --wwe-logo-h:  36px;
  }
}