/* =========================================================
   KANAMOTO HOLDINGS 採用サイト — tokens.css v2.7-orange.2（2026-11-05：オレンジパターン。青の v2.7 から色だけを差し替え。
   メイン #E2650E（最初の #EE7821 から少し濃く）・文字 #2E211A・締めの面 #23170F（どちらも黒寄りに）。文字はこげ茶 --color-ink、オレンジの文字は --color-brand-text、締めの面は --color-anchor を新しく足した）
   元の記録：tokens.css v2.7（2026-10-29。大きい数字の書体 --font-num（Roboto）を追加。v2.6：下層の H1 --fs-h1 を追加。v2.5：FV コピーを大きく（--fs-kv）。v2.4：2026-10-28。FV の中身の幅を 1600px に（--container-kv）／流れる英字の書体 --font-deco を追加／追従ボタンの --cta-h を削除）
   コンセプト「オレンジひと色の、あたたかな世界」（青の版は「青ひと色の、やわらかな世界」）
   ・面・線・ボタンはオレンジの明度違い、文字は同じ色相のこげ茶。黒は使わない。深さは明度違いの面で出す（影とグラデはほぼ使わない）
   ・角丸は大きく、入れ子で小さくする（64 → 48 → 24 → 16）。ボタンはピル、バッジと矢印は円
   ・書体は Zen Kaku Gothic New ひとつ（英字ラベルも同じ書体）。本文も太め、行間は広く
   ・例外は横に流れる大きな英字（飾り）だけ：Ysabeau
   業種展開するときは Brand のオレンジ（--color-brand ほか）だけを差し替える。
   CSS はこの変数だけを参照し、色・角丸・余白の生値を書かない。
   ========================================================= */

:root {
  /* ---- Color: Brand（オレンジひと色＋明度違い。メインは #E2650E。11/5 18:47 に #EE7821 から少し濃く） ---- */
  --color-brand: #E2650E;            /* メイン：ボタン・吹き出し・帯・図の主役の面（文字色には使わない。白文字は 3.4:1 なので太字・大きめで） */
  --color-brand-hover: #C9570A;      /* ボタンのホバー（少し濃くなる）。面にだけ使う */
  --color-brand-text: #B4520D;       /* オレンジの文字：英字ラベル・副文字・リンクのホバー（白地 5.1:1） */
  --color-brand-mid: #E98C4A;        /* 図・アイコンの塗り（文字には使わない） */
  --color-brand-soft: #F0B286;       /* STEP番号・縦線・飾り（文字には使わない） */
  --color-ring: #F3C19F;             /* 主ボタンの太い外輪 */
  --color-line: #F6D1B7;             /* 罫線・矢印の円・進み具合のバーの地 */
  --color-layer: #F9E0CF;            /* 重ねた面・丸ボタンのホバー */
  --color-tint: #FCF0E7;             /* カードの内面・FAQ の枠・入口のホバー */
  --color-on-brand: #FFFFFF;
  /* 白文字の読みやすさ（11/5）：#E2650E の上の白文字は 3.4:1。24px 以上・18.66px 以上の太字は AA（大きい文字 3:1）を満たすが、
     ボタン（15〜18px 太字）・札（11〜16px）は本文の基準 4.5:1 に届かない。AA を厳密に満たす版にするときは次の2行に差し替える
     （オレンジの面が少し濃くなる。白文字 5.1:1）：--color-brand: #B4520D; --color-brand-hover: #9A4609; */

  /* ---- Color: Base ---- */
  --color-bg: #FFFFFF;               /* パネル・カード・丸ボタン */
  --color-bg-page: #FEF7F3;          /* セクションの地・入口ピルの地（ごく淡いクリーム） */
  --color-bg-kv: #F5ECE4;            /* 写真の下地 */
  --color-ink: #2E211A;              /* 本文・見出し：黒に近いこげ茶（白地 15.6:1）。11/5 18:47 に #492812 から黒寄りに */
  --color-ink-sub: var(--color-brand-text);
  --color-anchor: #23170F;           /* 締めの面：フッター（白文字 17.5:1）。11/5 18:47 に #3A200F から黒寄りに */
  --color-gray: #5F574F;             /* 注記・※（白地 7:1） */
  --color-marker: #FFF0C9;           /* 文中のマーカー */
  --color-white: #FFFFFF;
  --color-focus: #B4520D;

  /* ---- Typography ---- */
  --font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --font-en: var(--font-ja);         /* 英字ラベルも同じ書体 */
  --font-deco: "Ysabeau", "Zen Kaku Gothic New", sans-serif;  /* 横に流れる大きな英字（飾り）だけ */
  --font-num: "Roboto", "Zen Kaku Gothic New", sans-serif; /* 大きい数字だけ（10/29） */
  --fw-regular: 400;
  --fw-medium: 500;                  /* 基本の太さ（細く見せない） */
  --fw-bold: 700;                    /* 見出し・本文の強調・ボタン */

  --fs-kv: clamp(38px, 11vw, 56px);  /* FV コピー（3行）。SP・タブレット。PC（1024px〜）は下の @media で min(6vw, 9.6vh)。1440×900 で 86px、1920×1080 で 104px */
  --grid-line: rgba(236, 182, 146, .26);   /* FV の地の方眼（24px） */
  --fs-kv-sub: 15px;                        /* PC 18px */
  --fs-kv-note: 13px;                       /* PC 15px */
  --fs-voice: 13px;                         /* 写真の縦書きの声。PC 16px */
  --fs-h1: 28px;                            /* 下層MVの H1（そのページが答える質問への答え）。タブレット 34px・PC 42px */
  --fs-h2: 27px;                            /* セクション見出し。PC 40px（行間 2.0） */
  --fs-h3: 22px;                            /* PC 36px（字間 .1em） */
  --fs-lead: 17px;                          /* PC 20px */
  --fs-label-en: 12px;                      /* 英字ラベル「{ ABOUT }」。PC 16px */
  --fs-body: 15px;                          /* PC 16px（太さ 700・行間 2.0） */
  --fs-btn: 15px;                           /* PC 18px */
  --fs-small: 12px;
  --fs-num: 48px;                           /* 数字で見る。PC 72px */
  --lh-kv: 1.32;
  --lh-heading: 2;
  --lh-body: 2;
  --ls-ja: .06em;
  --ls-heading: .1em;
  --ls-en: .1em;

  /* ---- Shape（大きい角丸の入れ子） ---- */
  --radius-xs: 8px;                  /* インジケーター・FAQ の枠 */
  --radius-chip: 10px;               /* 小さなチップ */
  --radius-s: 16px;                  /* 写真・吹き出し・小さいパネル */
  --radius-m: 24px;                  /* 中くらいのパネル・パネルの中の白い面 */
  --radius-tab: 32px;                /* 垂れ下がるラベル・タブの角 */
  --radius-l: 32px;                  /* カード型の写真（PC 48px） */
  --radius-xl: 40px;                 /* 大きなパネル・セクションの面・オレンジの帯の上端（PC 64px） */
  --radius-pill: 80px;
  --ring-w: 6px;                     /* 主ボタンの外輪の太さ（PC 8px） */
  --shadow-float: 15px 15px 18px rgba(0, 0, 0, .08);          /* 浮いた丸ボタンだけ（右下に落ちる影）。PC 20px 20px 24px */
  --shadow-cta: 0 0 10px rgba(255, 255, 255, .5), 0 20px 20px rgba(226, 101, 14, .2);

  /* ---- Button ---- */
  --btn-h: 56px;                     /* PC 60px */
  --btn-h-s: 44px;                   /* ヘッダー内。PC 52px */
  --btn-arrow: 28px;                 /* ボタン内の円の矢印。PC 32px */
  --menu-size: 56px;                 /* 丸いメニューボタン。PC 72px */
  --menu-inset: 8px;                 /* 画面の端から丸ボタンまで。PC 24px */

  /* ---- Layout ---- */
  --container: 1200px;
  --container-kv: 1600px;            /* FV とヘッダーの中身の幅（他のセクションより広い） */
  --side: clamp(16px, 4.4vw, 64px);
  --gutter: 12px;                    /* PC 16px */
  --kv-pad: max(var(--side), calc((100% - var(--container-kv)) / 2));  /* FV とヘッダーの左右余白：中身の幅を --container-kv にそろえる */
  --header-h: 72px;                  /* ロゴと丸ボタンの置き場（背景は透明）。PC 110px */
  --section-py: 96px;                /* PC 144px */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 48px; --sp-6: 64px; --sp-7: 96px; --sp-8: 128px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.165, .84, .44, 1);     /* せり上がり・写真の明るさ・ホバー */
  --ease-back: cubic-bezier(.175, .885, .32, 1.275); /* バッジ・吹き出し（少し弾む） */
  --ease-arrow: cubic-bezier(.645, .045, .355, 1); /* 矢印が抜けて戻る・メニューが開く */
  --dur-rise: .8s;                   /* 下から 120px せり上がる */
  --dur-ui: .3s;
  --kv-interval: 6s;                 /* FV 写真の切替 */
  --rise: 80px;                      /* せり上がりの距離。PC 120px */

  /* ---- Decoration（背景の図形・写真に重なる図形・流れる英字） ---- */
  --shape-on-brand: rgba(255, 255, 255, .07);       /* オレンジの面の上の図形（面） */
  --shape-on-brand-2: rgba(255, 255, 255, .12);     /* オレンジの面の上の図形（濃いめ・吹き出し） */
  --shape-on-brand-line: rgba(255, 255, 255, .28);  /* オレンジの面の上の輪 */
  --marquee-ink: var(--color-layer);                /* 流れる英字の色（白地の上） */

  /* ---- Layer ---- */
  --z-scene: 0; --z-content: 1; --z-header: 100;
  --z-fixed-cta: 150; --z-menu: 300; --z-modal: 400;
}

@media (min-width: 768px) {
  :root {
    --fs-kv-sub: 17px;
    --fs-kv-note: 14px;
    --fs-voice: 15px;
    --fs-h1: 34px;
    --fs-h2: 34px;
    --fs-h3: 30px;
    --fs-label-en: 14px;
    --fs-btn: 17px;
    --radius-l: 40px;
    --radius-xl: 56px;
    --ring-w: 8px;
    --shadow-float: 20px 20px 24px rgba(0, 0, 0, .08);
    --btn-h: 60px;
    --btn-h-s: 52px;
    --btn-arrow: 32px;
    --menu-size: 72px;
    --menu-inset: 24px;
    --header-h: 110px;
    --rise: 120px;
  }
}

@media (min-width: 1200px) {
  :root {
    --fs-kv-sub: 18px;
    --fs-kv-note: 15px;
    --fs-voice: 16px;
    --fs-h1: 42px;
    --fs-h2: 40px;
    --fs-h3: 36px;
    --fs-lead: 20px;
    --fs-label-en: 16px;
    --fs-body: 16px;
    --fs-btn: 18px;
    --fs-num: 72px;
    --radius-l: 48px;
    --radius-xl: 64px;
    --gutter: 16px;
    --section-py: 144px;
  }
}

@media (min-width: 1024px) {
  :root { --fs-kv: clamp(48px, min(6vw, 9.6vh), 104px); }
}