@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Klee+One:wght@400;600&display=swap');

/* ============================================================
   recruit-typo.css ── 採用ページ限定のタイポ試作
   2026-07-29
   ============================================================

   ■ 何のための試作か
     参考4サイト（mmslaw / maable / daiichi / 篠原）の「インパクト」が
     どこから来ているのかを実測した結果、アニメーションではなく
     **タイポと角丸のパッケージ** だと分かったので、それを黒岩で再現して
     実機で見比べるためのファイル。

     実測値（2026-07-29）
       英字見出し : maable 73px / 篠原 110px  ／ 黒岩 12px
       ウェイト   : maable 300 / 篠原 500主力 ／ 黒岩 700が76%
       角丸       : 参考2社は「円・ピル・直角」の3択 ／ 黒岩 6〜12px
       字間       : 参考 5〜12px ／ 黒岩 0
       行間       : 参考 2.0〜2.4 ／ 黒岩 1.45〜1.9

   ■ 5点を同時に変える理由
     1つだけ変えると中途半端になる。文字だけ大きくして太いままだと
     威圧感が出るし、角丸だけ取ると素っ気なくなる。
     「細い・大きい・角がない・空いている」が同時に来て初めて
     参考サイトの顔になる。だから5点セットで試す。

   ■ スコープ
     body.is-recruit-hero（＝/recruit/ だけに付くclass）配下に限定。
     他ページには1行も影響しない。

   ■ 戻し方
     mu-plugins/kuroiwa-motion.php の enqueue を1つ消すだけ。
     テーマファイルには一切手を入れていない。

   ■ 変えていないもの（意図的）
     ・ブランドカラーそのもの
     ・レイアウト（マークアップを触れないため）
     ・ファーストビューと最終CTAの英字（写真の上に72pxの白文字を
       乗せると見出しと喧嘩するため、今回は据え置き）
   ============================================================ */


/* ============================================================
   §1 角丸 ── 6/8/10/12px を 2px に（ゼロにはしない）
   ------------------------------------------------------------
   ■ 経緯
     参考2社（maable / 篠原）は「円・ピル・直角」の3択で、
     中途半端な小角丸を使わない。それに倣って一度ゼロにしたが、
     ボス判断で **2px** に変更。

       「ゼロはだめだ！角が立つ！
         認識されない程度でも構わないから角丸にしておこう！
         相手と向き合う姿勢が大切だ！」（2026-07-29）

     税理士事務所として、角を立てない。
     見た目の話であると同時に、事務所の姿勢の話でもある。

   ■ なぜ 2px なのか（1pxでも3pxでもなく）
     ・1px … 端末やDPRによっては消えてしまい、
              アンチエイリアスのにじみと区別がつかない
     ・2px … どの環境でも「角が丸い」と認識される最小値。
              ただし260px幅のカードに対して0.8%なので、
              意識して見ないと気づかない
     ・3px以上 … 「角丸のデザイン」として認識され始める
     → 「認識されない程度の角丸」の条件を満たす最小値が 2px。

   ■ 副作用として消えたもの
     .c-path-step__accent には style.css に border-radius:2px が
     直書きされていた（トークン非経由）。
     トークン側が 2px になったことで、意図せず揃った。
     直書きを打ち消す必要がなくなったので、前回入れた
     「.c-path-step__accent { border-radius: 0 }」は削除した。

   --r-pill（999px）はそのまま。ボタンと丸アイコンはピル・円のまま。
   ============================================================ */

body.is-recruit-hero {
  --r-btn: 2px;
  --r-sm: 2px;
  --r-md: 2px;
  --r-lg: 2px;
  /* --r-pill: 999px はそのまま */
}


/* ============================================================
   §2 英字見出し（eyebrow）── 12px/700 → 最大82px/Caveat
   ------------------------------------------------------------
   ボス選択：G3案（Caveat × Klee One）＝「文集・卒業アルバム」方向。

   ・書体  : Caveat 600（手書きペン）
   ・サイズ: clamp(32px, 6.6vw, 82px)
             Caveat は同じpx値でも Poppins より小さく見える（大文字高が
             低い）ため、前案の72pxから82pxに上げて見た目を揃えている。
   ・字間  : .01em
             手書き体は文字同士がつながる前提で設計されているので、
             サンセリフのように字間を開けると崩壊する。ほぼ0にする。
   ・行間  : 1.0（Caveat は上下の余白を字形自体が持っている）

   ■ ファーストビューと最終CTAも対象に（2026-07-29 ボス指示で追加）
     写真の上に置く文字なので、セクション見出しと同じ82pxだと
     h1（70px）を食ってしまう。こちらは 52px に抑えて、
     h1 が主役のまま「手書きの一言が添えられている」形にする。
   ============================================================ */

body.is-recruit-hero .l-main .eyebrow:not(.p-recruit-hero__en):not(.p-recruit-cta__en) {
  font-family: Caveat, cursive;
  font-size: clamp(32px, 6.6vw, 82px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  margin-bottom: 2px;
}

/* ファーストビュー／最終CTA の英字ラベル

   セレクタに .eyebrow を足しているのは詳細度のため。
   下の §3 で「FVとCTAの中の p は Klee One」と指定しているので、
   同じ強さだと後勝ちで Klee One に食われる（実際1回食われた）。
   .eyebrow を1つ足して (0,4,1) にし、Klee One 側の (0,3,2) に勝たせている。 */
body.is-recruit-hero .l-main .eyebrow:is(.p-recruit-hero__en, .p-recruit-cta__en) {
  font-family: Caveat, cursive;
  font-size: clamp(26px, 3.4vw, 52px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  margin-bottom: 2px;
}

/* ファーストビューの英文キャッチ「be Successful with us.」
   16px の細ゴシックだと写真に埋もれていた。手書きにして少し上げる。 */
body.is-recruit-hero .l-main .p-recruit-hero .p-recruit-hero__catch {
  font-family: Caveat, cursive;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.3;
}


/* ============================================================
   §3 日本語 ── 感情セクションだけ Klee One に
   ------------------------------------------------------------
   ■ セクションを2種類に分けている理由
     採用ページ14セクションのうち、条件や金額を正確に伝える場所に
     手書きを乗せると「ゆるい事務所」に見えて応募の質が落ちる。
     「読ませて感情を動かす場所」と「間違いなく伝える場所」を分ける。

       手書きにする（Klee One）
         p-recruit-hero  ファーストビュー（h1は除く／下記参照）
         p-recruit-cta   最終CTA
         p-greeting  代表から、未来の仲間へ
         p-mvv       存在意義／目指す将来像
         p-values    大切にする11の姿勢
         p-whyus     私たちと働く5つの魅力
         p-jobdesc   入社後の仕事内容
         p-welcome   こんな方と、一緒に働きたいと考えています
         p-workenv   職場環境

       手書きにしない（Noto Sans JP のまま）
         p-require   募集要項      ← 給与・勤務時間・待遇
         p-qualify   応募資格      ← 必須条件
         p-flow      選考の流れ    ← 手続き
         p-faq       よくあるご質問 ← 事実確認

   ■ Klee One を本文にも使う判断について
     Klee One は教科書体をベースにした「読ませるための手書き体」で、
     長文でも破綻しにくい。行間2.0と合わせれば実用範囲。
     ただし数字・英数字の可読性はゴシックに劣るので、
     金額や条件が出るセクションでは使わない（上の分け方の根拠）。
   ============================================================ */

body.is-recruit-hero .l-main
:is(.p-recruit-hero, .p-recruit-cta, .p-greeting, .p-mvv, .p-values, .p-whyus, .p-jobdesc, .p-welcome, .p-workenv)
:is(h2, h3, p, li, dt, dd) {
  font-family: "Klee One", "Noto Sans JP", serif;
}

/* 見出しは太め。Klee One は 400 と 600 のみ */
body.is-recruit-hero .l-main
:is(.p-recruit-hero, .p-recruit-cta, .p-greeting, .p-mvv, .p-values, .p-whyus, .p-jobdesc, .p-welcome, .p-workenv)
:is(h2, h3)[class*="__title"] {
  font-weight: 600;
}

/* ファーストビューの h1（鹿児島から、クラウド会計で経営を支える仕事を。）
   2026-07-29 ボス指示で手書き（Klee One）に変更。

   写真の上に乗る70pxの文字なので、可読性の担保だけ足してある：
     ・weight は 600（Klee One の上限）
     ・text-shadow で暗い縁を1枚
       Klee One は Noto Sans JP 700 より線が細く、
       芝生の明るい部分に白文字が乗ると輪郭が溶けるため。
       影は「読めるようにする」ためだけの最小限（ぼかし12px・不透明度35%）。 */
body.is-recruit-hero .l-main .p-recruit-hero__title {
  font-family: "Klee One", "Noto Sans JP", serif;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(11, 13, 17, .35);
}

/* ボタンのラベルも手書きにしない（押せることが最優先） */
body.is-recruit-hero .l-main .btn {
  font-family: "Noto Sans JP", sans-serif;
}


/* ============================================================
   §3-2 日本語見出しのサイズ ── 28px/700 → 20px/500
   ------------------------------------------------------------
   英字を主役にした分、日本語は「添え物」に降りる。
   Klee One を当てないセクション（募集要項など）にも同じサイズ感を
   適用して、ページ全体の階層は揃える。
   ============================================================ */

body.is-recruit-hero .l-main :is(h2, h3)[class*="__title"] {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1.7;
}

body.is-recruit-hero .l-main :is(.c-value-card, .c-whyus-card, .c-faq, .c-flow-step) :is(h3, p)[class*="__title"] {
  font-size: 16px;
  font-weight: 500;
}


/* ============================================================
   §4 本文 ── 行間と字間を開ける（全セクション共通）
   ------------------------------------------------------------
   参考2社の本文は 行間2.0〜2.4 / 字間1.5px。
   黒岩は 行間1.9 / 字間0。
   数字だけ見ると僅差だが、字間が入るだけで「詰まっている感」が消える。
   ============================================================ */

body.is-recruit-hero .l-main :is(p, li, dd, dt) {
  letter-spacing: .04em;
}

body.is-recruit-hero .l-main p:not([class*="__title"]):not(.eyebrow) {
  line-height: 2;
}


/* ============================================================
   §5 余白 ── 見出しブロックの下を少し開ける
   ------------------------------------------------------------
   英字が大きくなった分、見出しと本文がくっついて見えるため。
   参考2社の「セクションごとに画面1枚ぶんの余白」までは寄せない
   （ページが1.5倍に伸びてしまうので、試作では 1.4倍 に留める）。
   ============================================================ */

body.is-recruit-hero .l-main [class*="__head"] {
  margin-bottom: calc(var(--sp-gap, 20px) * 1.4);
}


/* ============================================================
   §6 SPでの安全弁
   ------------------------------------------------------------
   英字が長いセクション（WORK ENVIRONMENT / FROM REPRESENTATIVE）は
   狭い画面で折り返す。折り返し自体は許容するが、
   ハイフネーションや途中改行で読めなくなるのは防ぐ。
   ============================================================ */

@media (max-width: 767px) {
  body.is-recruit-hero .l-main .eyebrow:not(.p-recruit-hero__en):not(.p-recruit-cta__en) {
    line-height: 1.15;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}


/* ============================================================
   §7 画像に焼き込まれた角丸マスクを隠す（2026-07-29 ボス指摘）
   ------------------------------------------------------------
   ■ 何が起きていたか
     whyus-01〜05.jpg（560×388）は、**角丸マスクをかけた状態で
     書き出されている**。JPEGは透明を持てないので、
     角の透明部分が黒（RGB 0,0,0）に潰れて焼き込まれている。
     実測した角丸の半径は約16px（原寸560px幅での値）。

   ■ なぜ今まで見えなかったか
     カード側に border-radius:10px と overflow:hidden があり、
     container の角丸が画像の黒い角をちょうど覆い隠していた。
     今回 §1 で角丸をゼロにした瞬間、隠れていた黒が出てきた。
     ＝ ボスの言う「角丸の幻影」。

   ■ 角丸を 2px に戻しても、これは隠せない
     画像に焼き込まれた角丸は、表示サイズ換算で約7.4px
     （原寸16px × object-fit:cover の縮小率0.464）。
     元の設計が 10px だったのは、この7.4pxを覆い隠せる値だったから。
     2px では覆いきれないので、下の拡大による対処は引き続き必要。

   ■ ここでの対処は暫定
     画像を 1.07 倍に拡大して、黒い角を表示領域の外へ押し出している。
     16px ÷ (560/2) から、両側16pxを削るのに必要な倍率は 1.061。
     余裕を見て 1.07（＝両側18.3px相当）。
     .c-whyus-card__media は overflow:hidden なのではみ出しは切れる。

     代償として写真の外周を約7%失う。人物や文字が端にある画像では
     使えない手なので、whyus 5枚に限定している。

   ■ 恒久対応
     **角丸マスクを外した状態で書き出し直してもらう**のが正しい。
     _docs/09 の素材リクエスト（§C）に追加済み。
     差し替わったら、このブロックごと削除すること。

   ■ 他ページにも同じ画像がある場合
     TOPの case-01-manufacturing.jpg にも同じ症状がある（深さ3px）。
     ただし他ページはカードの角丸が生きているため見えていない。
     角丸をゼロにする範囲を広げるなら、そちらも同時に手当てが要る。
   ============================================================ */

body.is-recruit-hero .l-main .c-whyus-card__media img {
  transform: scale(1.07);
  transform-origin: center center;
}


/* ============================================================
   §8 ファーストビューの英字を蒼に（TOPと揃える）
   ------------------------------------------------------------
   2026-07-29 ボス指示。

   ■ 揃える先（TOPのFV実測値）
       .p-fv__eyebrow  「KUROIWA TAX OFFICE」            #06abc6
       .p-fv__en       「Cloud Accounting & Management」  #06abc6
     どちらも --c-teal。採用ページのFVだけ白のままだったので揃える。

   ■ 白のままにしないリスクと、その手当て
     TOPのヒーローは暗い写真なので #06abc6 が乗る。
     採用ページのヒーローは明るい公園の写真で、
     文字が乗る左側は芝生（明るい緑）。
     素の #06abc6 だとコントラストが足りない可能性が高い。

   ■ 実測して #06abc6 そのままは断念（ボス選択：明るい蒼＝A案）
     背景画像の実ピクセルを9点サンプリングしてコントラスト比を計算した。

       文字が乗る範囲でいちばん明るい部分（相対輝度 0.350）に対して
         #06abc6           1.05 : 1   ← 芝生とほぼ同じ明るさ＝溶ける
         #9bdde8（採用）    1.73 : 1
         白                 2.61 : 1

       中間的な明るさの部分（相対輝度 0.20）に対して
         #06abc6           1.52 : 1
         #9bdde8（採用）    2.76 : 1
         白                 4.17 : 1

     正直に書くと、**このヒーローでは白でさえ WCAG AA（大文字3:1）に
     届いていない**。明るい公園写真の上に文字を置いている時点で、
     色だけでは解決しない領域にいる。実際、元から text-shadow が
     入っていて、それが可読性を担保している。

     そのうえで #9bdde8 を選んだ理由：
       ・#06abc6 比で最悪部分 1.65倍・中間部分 1.82倍 改善する
       ・「蒼い」と認識される濃さは保っている（白60%混合）
       ・これ以上薄くすると白との区別がつかなくなり、
         「TOPと揃える」という当初の目的を失う
     影も一段強めた（不透明度 .5 → .66、ぼかし 10px → 14px）。
     写真側を暗くするのではなく、文字の周囲だけを締める方法。

   ■ 対象外
     h1（鹿児島から、〜）と本文リードは白のまま。
     ここは「読ませる」文字なので、写真の上では白が最も安全。
     TOP も同じ（見出しは白、英字だけ蒼）。
   ============================================================ */

body.is-recruit-hero .l-main .p-recruit-hero {
  /* --c-teal(#06abc6) を白と60%混ぜた明るい蒼。
     この1行を書き換えれば濃さを調整できる。 */
  --fv-en-color: var(--c-teal-pale);
}

body.is-recruit-hero .l-main .p-recruit-hero .eyebrow.p-recruit-hero__en,
body.is-recruit-hero .l-main .p-recruit-hero .p-recruit-hero__catch {
  color: var(--fv-en-color);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .66);
}


/* ============================================================
   §9 SP：FVの英字が人物の顔に重なる件
   ------------------------------------------------------------
   2026-07-29 ボス指摘。
   390px幅の実機相当（iframeで検証）で、英字ブロックが
   人物の顔の高さ帯に掛かっていた。

   ■ 手当て（構造は変えない）
     ・英字を一段小さく：JOIN OUR TEAM 26→21px ／ catch 22→18px
       文字が短くなるぶん、右側の人物に届かなくなる
     ・catch の上下マージンを詰めて、ブロック全体を縦に圧縮
     ・写真の明るい部分に乗っても沈まないよう、影をさらに一段強める

   ■ !important を使っていない理由
     motion.css は recruit-typo.css より先に読まれるので、
     同じ詳細度だとこちら（recruit-typo.css）が勝つ。
     §2 と同じセレクタ構造をそのまま使えば上書きできる。
     プロジェクト規約どおり !important は使わない。
   ============================================================ */

@media (max-width: 767px) {
  body.is-recruit-hero .l-main .eyebrow:is(.p-recruit-hero__en, .p-recruit-cta__en) {
    font-size: 21px;
  }

  body.is-recruit-hero .l-main .p-recruit-hero .p-recruit-hero__catch {
    font-size: 18px;
    margin-top: 2px;
    margin-bottom: 4px;
  }

  body.is-recruit-hero .l-main .p-recruit-hero .eyebrow.p-recruit-hero__en,
  body.is-recruit-hero .l-main .p-recruit-hero .p-recruit-hero__catch {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  }
}