@charset "utf-8";
/* ==========================================================================
   variables.css 
   カラー・サイズ等を一元管理。
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------
     COLOR — ブランド
     ------------------------------------------------------------------ */
  --c-teal:            #5EC2C6;   /* メイン／カテゴリ「知る」 */
  --c-blue:            #74BEE4;   /* カテゴリ「読む」 */
  --c-yellow:          #FABF2A;   /* カテゴリ「参加する」／NEW CLIPS */
  --c-pink:            #F58792;   /* カテゴリ「働く」 */
  --c-orange:          #F5A623;   /* Action! */
  --c-blue-light:      #3277B8;   /* このサイトについて */
  --c-link:            #00A1E9;   /* テキストリンク・強調 */
  --c-fvblue:          #6095B8;   /* FVのラベル・ハッシュタグ・About Us（実測） */

  /* カテゴリ色のエイリアス。
     data-cat="know" 等から参照し、WP のタームが増えてもCSSだけで対応する。 */
  --cat-know:          var(--c-teal);
  --cat-read:          var(--c-blue);
  --cat-join:          var(--c-yellow);
  --cat-work:          var(--c-pink);
  --cat-news:          var(--c-blue-light);
  --cat-about:         var(--c-blue-light);

  /* ------------------------------------------------------------------
     COLOR — 背景
     ------------------------------------------------------------------ */
  --c-page:            #F8F9FA;   /* ページ地 */
  --c-white:           #FFFFFF;
  --c-cream:           #FBF8F4;   /* FV左ビジュアル背景 */
  --c-pale:            #ECF7F8;   /* セクション背景（水色帯） */
  --c-pale-yellow:     #FFFEF2;   /* NEW CLIPS 背景 */

  /* ------------------------------------------------------------------
     COLOR — テキスト・罫
     ------------------------------------------------------------------ */
  --c-ink:             #304852;   /* 基本の濃色。テキスト・罫・タグ・ボタン枠に共通 */
  --c-text:            var(--c-ink);
  --c-text-sub:        #79878C;
  --c-text-light:      #9BA7AC;
  --c-border:          #DDDDDD;   /* カード枠線（実測） */
  --c-border-dot:      #E3DFD1;

  /* パーツ固有 */
  --c-arrow-bg:        #EAF6F8;   /* 丸い矢印ボタンの背景 */
  --c-dot:             #E3DFD1;   /* カルーセルの非アクティブドット */

  /* ------------------------------------------------------------------
     TYPOGRAPHY  
     ------------------------------------------------------------------ */
  /* 確定仕様：本文 Zen Kaku Gothic New ／ 見出し・キャッチコピー Zen Maru Gothic */
  --ff-gothic:         "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ff-maru:           "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
  --ff-en:             "Zen Maru Gothic", "Helvetica Neue", Arial, sans-serif;

  --fz-xs:             12px;
  --fz-sm:             14px;
  --fz-base:           15px;
  --fz-md:             16px;
  --fz-lg:             18px;
  --fz-xl:             22px;
  --fz-2xl:            28px;
  --fz-3xl:            38px;   /* セクション見出し「福井の現状を知る」（実測） */

  --fz-variable-ssm:   clamp(10px, 0.8vw, 12px);
  --fz-variable-sm:    clamp(12px, 0.9vw, 14px);
  --fz-variable-base:  clamp(13px, 0.95vw, 15px);
  --fz-variable-md:    clamp(14px, 1vw, 16px);
  --fz-variable-lg:    clamp(16px, 1.15vw, 18px);
  --fz-variable-xl:    clamp(18px, 1.4vw, 22px);
  --fz-variable-2xl:   clamp(22px, 2.2vw, 30px);
  --fz-variable-3xl:   clamp(32px, 2.6vw, 38px);
  --fz-variable-4xl:   clamp(36px, 3.8vw, 48px);

  --lh-tight:          1.48;
  --lh-base:           1.96;
  --lh-loose:          2.0;
  --lh-vertical:       2.2;    /* 縦書き時の列間隔 */

  --ls-base:           0.04em;
  --ls-wide:           0.12em;
  --ls-vertical:       0.14em;


  /* ------------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------------ */
  --container:         1800px;  /* 実測：1920px時に左右60px空く */
  --container-narrow:  1200px;  /* 下層本文用（暫定） */
  --gutter:            60px;    /* PC */

  --header-h:          140px;   /* 実測 139px */
  --header-pad-x:      4.5vw;    /* ヘッダー左右の内側余白（実測。ロゴSVGの余白ぶんで前後します） */
  --mega-w:            650px;   /* メガメニューのパネル幅（実測） */

  --drawer-w:          762px;   /* ドロワーのパネル幅（実測） */
  --drawer-inset:      14px;    /* 画面端からの浮き（実測） */
  --drawer-tab-w:      267px;   /* 半円タブ 直径（実測幅） */
  --drawer-tab-h:      calc(var(--drawer-tab-w) / 2);   /* 正円の下半分 */

  /* ------------------------------------------------------------------
     SPACING — セクション間の余白
     ------------------------------------------------------------------ */
  --sp-section:        120px;
  --sp-block:          64px;
  --sp-item:           32px;

  /* ------------------------------------------------------------------
     SHAPE
     ------------------------------------------------------------------ */
  --r-lg:              24px;    /* 大ブロック（企業を知る／Contents） */
  --r-md:              14px;    /* メガメニュー／ドロワー／NEW CLIPS帯 */
  --r-card:            0;       /* カードは角丸なし（実測） */
  --r-tag:             6px;     /* カテゴリラベル */
  --r-sm:              8px;
  --r-pill:            999px;

  --shadow-card:       0 2px 12px rgba(0, 0, 0, .06);
  --shadow-float:      0 6px 28px rgba(0, 0, 0, .10);

  --wave-h:            96px;    /* 波形区切りの高さ */
  --ribbon-slant:      12px;    /* リボン見出しの矢羽根の張り出し（実測） */
  --ribbon-h:          26px;    /* リボン見出しの高さ（FV実測。セクションにより上書き） */

  /* ------------------------------------------------------------------
     MOTION
     ------------------------------------------------------------------ */
  --dur:               .3s;
  --dur-slow:          .6s;
  --ease:              cubic-bezier(.33, 1, .68, 1);

  /* ------------------------------------------------------------------
     Z-INDEX — ここで一元管理し、各所で数値を直書きしない
     ------------------------------------------------------------------ */
  --z-base:            1;
  --z-wave:            2;
  --z-megamenu:        50;
  --z-header:          100;
  --z-overlay:         200;
  --z-drawer:          210;
}

/* ==========================================================================
   ブレイクポイント（CSS変数はメディアクエリで使えないため定義値をここに明記）
     SP  :               ~ 767px
     TAB : 768px      ~ 1199px
     PC  : 1200px     ~
   ========================================================================== */

@media screen and (max-width: 1199px) {
  :root {
    --gutter:      40px;
    --sp-section:  88px;
    --sp-block:    48px;
  }
}

/* ==========================================================================
   SP — カンプ実測値（アートボード 375px）
   イメージ②（768px＝2.048倍）を基準に換算。イメージ①（704px＝1.877倍）は
   書き出し倍率が異なるため、差が出る箇所は②を優先している。
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root {
    --gutter:      24px;
    --sp-section:  56px;
    --sp-block:    32px;
    --sp-item:     18px;

    --fz-3xl:      34px;    /* 見出し。画面幅いっぱいに近い大きさ */
    --fz-2xl:      20px;
    --fz-xl:       18px;
    --fz-base:     16px;
    --fz-md:       16px;
    --lh-base:     1.76;

    --r-lg:        16px;
    --wave-h:      48px;
    --header-h:    64px;
    --header-pad-x: 16px;
    --drawer-inset: 10px;
    --drawer-tab-w: 180px;
  }
}