@charset "UTF-8";
/* =============================================================
   フォトスタジオ ｜ tokens.css
   RESEARCH_STUDIO §6-2＝【明るさ・余白・柔らかさ】。★ブランドピンクは使わない
   2026-08-21 新規。web-production-flow STEP7（実装）

   正本：
     _v3_flow/ART_DIRECTION.md（美学）
     _v3_flow/FACTS_LIVE_2026-08-21.md（数字・条件の実測）
     09_KNOWLEDGE/web/WEB_PRODUCTION_BASICS.md（数値ゲート）
     09_KNOWLEDGE/design/DESIGN_LAWS_DEEP.md（共通法則）

   ★値は「本番サイトの実測」から起こしている。過去のコンプではなく本番が正
     （feedback-live-site-is-the-source-of-truth）。
     実測日 2026-08-21 ／ 対象 www.chorule-hair.com ・ recruit.re-bell.com
   ============================================================= */

:root{

  /* -----------------------------------------------------------
     色
     -----------------------------------------------------------
     実測（Playwright・computed style）
       recruit.re-bell.com  body color = rgb(11,11,13)   → #0B0B0D
       www.chorule-hair.com body color = rgb(54,42,51)   → #362A33
     採用は「強さ」、美容室は「抑制」。ART_DIRECTION の三本柱に従い、
     採用サイトのインクは #0B0B0D（より黒い方）を採る。
     ----------------------------------------------------------- */
  --ink:        #2A2A2A;   /* 圧を下げる。白地に 13.6:1 */
  --mut:        #5F5F5F;   /* 補助文。白地に 6.39:1 ／ 帯地に 5.60:1 */
  --line:       #D8D8D8;   /* 細罫（1px） */
  --line-2:     #9A9A9A;   /* やや強い罫・画像枠 */
  --paper:      #FFFFFF;
  --band:       #F6F6F6;   /* 美容室(#F2F2F2)より明るい地 */

  /* -----------------------------------------------------------
     アクセント（★2026-08-21 実測で判明した問題と、その解き方）
     -----------------------------------------------------------
     本番 recruit.re-bell.com は #F25E5E を面で22回使っている。
     ところが計算すると：

       #F25E5E に白文字 = 3.21:1  → WCAG AA（4.5:1）不合格
       #F25E5E に墨文字 = 6.12:1  → 合格

     つまり本番の「赤いボタンに白文字」は、本文サイズでは基準を満たしていない。
     AA Large（3:1）は超えるので 24px 以上／太字 18.66px 以上なら通るが、
     CTA のラベルをその大きさにすると版面が壊れる。

     そこで面を2つに分ける：
       --accent      … 文字を載せない面・罫・アイコンに使う（ブランドの赤そのまま）
       --accent-cta  … 白文字を載せる面に使う。#C64D4D で 4.60:1（実測で決めた最小の暗さ）

     ★#D94F4F では 4.05:1 で届かない。#C64D4D が境界。
     ----------------------------------------------------------- */
  --accent:     #000000;   /* Biene様の正式ロゴ実色（logo-1.png から抽出）＝純黒。器から色を持たないブランド */
  --accent-cta: #000000;   /* 白文字 21.00:1。分ける必要がない */

  /* -----------------------------------------------------------
     書体
     -----------------------------------------------------------
     実測（www.chorule-hair.com・実際にロードされた @font-face）
       Baskervville 400/700   … 欧文見出し
       Noto Serif JP 200-900  … 和文見出し（H2 = 72px / w300 / ls -1.44px / lh 86.4px）
       本文の和文は Webフォントを読まず Yu Gothic 等のローカル書体で描画

     → 本文にローカルのゴシックを使うのは本番と同じで、かつ 0KB。
       1ページ 1.6MB 未満（BASICS §6）を守るうえで有利なので、この設計を継承する。
       和文の Webフォントは「見出しの Noto Serif JP」だけに限定する。

     ★本文サイズだけ本番と変える：本番 14px → 実装 16px。
       BASICS の本文規格が 15〜18px で、14px は下回るため。
       行間は本番と同じ 1.8。
     ----------------------------------------------------------- */
  --ff-en:   'ShipporiMix', "Baskervville", "Times New Roman", serif;
  --ff-ja:   'ShipporiMix', "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --ff-body: 'ShipporiMix', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
             "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;

  /* -----------------------------------------------------------
     級数（実測から起こす。勘で置かない）
     -----------------------------------------------------------
     本番 H2 = 72px（1440px 時）／ls -0.02em ／lh 1.2
     ★岩田さん指示 2026-08-21：見出しは小さく、欧文の方を大きく。字間は詰める。
     ----------------------------------------------------------- */
  /* ★2026-08-21 実測で修正：64px だとヒーローのコピー欄（PC1440で内寸393px）に
     「安定も自由も、」7字が収まらず4行に折れた（意図は2行）。
     7字 × 字送り0.98em が 393px に入る上限は約56px。余裕を見て46pxに落とす。
     岩田さん指示「見出しは小さく」とも整合する。 */
  --fs-hero:   clamp(26px, 3.2vw, 46px);   /* トップのヒーロー和文 */
  --fs-en:     clamp(24px, 2.45vw, 35px);  /* 欧文見出し（主） */
  --fs-ja:     clamp(19px, 2.2vw, 32px);   /* 見出しは美容室より一段小さく、圧を下げる */
  --fs-ja-sub: 12px;                       /* 和文の副題 */
  --fs-lead:   clamp(15px, 1.3vw, 18px);
  --fs-body:   16px;
  --fs-cap:    13px;
  --fs-small:  12px;
  --fs-wm:     clamp(56px, 13.5vw, 195px); /* 巨大な英字透かし */

  --ls-en:   .04em;
  --ls-ja:  -.02em;   /* 本番実測 −1.44px / 72px = −0.02em */
  --lh-head: 1.2;
  --lh-body: 1.8;

  /* -----------------------------------------------------------
     余白とグリッド
     -----------------------------------------------------------
     参照＝global-sports.co.jp（岩田さん指定・PC1440 実測）
       左右マージン 180px ／ コンテンツ幅 1066px ＝ 外形 1426px
     ★border-box では max-width に padding が含まれるので外形で指定する
       （2026-08-20 に本文が 706px しか無くなった事故の再発防止）
     ----------------------------------------------------------- */
  --maxw:       1066px;
  --pad:        clamp(20px, 12.5vw, 180px);
  --sec:        clamp(80px, 11vw, 160px);   /* 余白をさらに広く */
  --band-inset: clamp(0px, 9vw, 130px);   /* 帯は全幅にしない */

  /* 下層のページヘッダー：トップと同じ強さにせず高さで階層差を出す
     （トップ 568px → 二階層 418px → 三階層 331px。2026-08-21 実測） */
  --h-hero:  568px;
  --h-phead: clamp(260px, 29vw, 420px);
  --h-phead-wide: clamp(200px, 23vw, 340px);

  /* -----------------------------------------------------------
     部品の規格（正本＝WEB_PRODUCTION_BASICS §3・§6）
     ----------------------------------------------------------- */
  --tap:      48px;    /* タップ領域の最小 */
  --hdr-pc:   130px;   /* 本番実測 */
  --hdr-sp:   64px;
  --radius-pill: 35px; /* 本番実測：ピル35px が2箇所実在。面の角丸は 0 */
  --dur:      .8s;
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* ブレイクポイント（CSS変数にできないので定数として明記）
   360 / 600 / 700 / 900 / 1100 / 1280 / 1400 / 1800 / 2560
   組み替えの主軸は 899px（PC↔SP）。BASICS §3-3 の検証幅で実測すること。 */

/* 数字だけを明朝にする指定は _shared/css/base.css に集約した（全サイト共通のため） */