/* =========================================================
 * Design Tokens (v0.4 — リクルートページ独自トンマナ、2026-07-15 決裁者指示で刷新)
 *
 *   Primary accent  #0a52b8   (コーポレートカラー #00c4cc をあえて外し、
 *                              江口寿史風イラスト group から実測したコバルトブルーに統一。
 *                              意図的にコーポレートサイトの本家トンマナから差別化する)
 *   Heading         #333333
 *   Body text       #020201
 *   Footer / dark   #323232
 *   Subtle bg       #f0f0f0
 *
 *   Font: Noto Sans JP のみ (Public Sans は本家でも使用していない)
 * ========================================================= */

:root {
  /* --- Brand (2026-07-15 コバルトブルー系に刷新、旧 #00c4cc 系コーポレートカラーから意図的に離脱) --- */
  --color-accent:        #0a52b8;
  --color-accent-dark:   #063c89;
  --color-accent-light:  #d9e8fd;
  --color-accent-soft:   #ecf3fe;
  --color-accent-deep:   #02275a;   /* accent をさらに濃くした色 (白文字と WCAG AA 4.5:1 以上を確保) */
  --color-accent-ink:    #021127;   /* --color-accent-deep よりさらに濃い、帯セクション用の締め色 */

  /* 補助 (本家で背景に出る色) */
  --color-sub-blue:      #408bd1;

  /* --- Job category accents (2026-07-23 採用コンサルフィードバック対応、職種色分け) ---
   * 4系統: care(介護系) / nurse(看護系) / office(事務系) / it(IT系)。
   * Stage 1 で単色統一した accent 方針との緊張を避けるため、中彩度・ポスター調に抑制。
   * care は既存 --color-accent 系と同一値だが、job-list-card 側で var(--job-*) に統一参照するため専用定義。
   */
  --job-care:            #0a52b8;
  --job-care-soft:       #ecf3fe;
  --job-care-ink:        #063c89;
  --job-nurse:           #1f7a6a;
  --job-nurse-soft:      #e3f1ee;
  --job-nurse-ink:       #0e5346;
  --job-office:          #b06a1f;
  --job-office-soft:     #f7ecdd;
  --job-office-ink:      #7a4712;
  --job-it:              #5a3ea8;
  --job-it-soft:         #ece7f6;
  --job-it-ink:          #3d2879;

  /* --- Neutrals --- */
  --color-ink:           #020201;   /* 本文 (本家準拠) */
  --color-heading:       #333333;   /* 見出し (本家準拠) */
  --color-muted:         #6b7280;
  --color-faint:         #9aa0a6;
  --color-bg:            #ffffff;
  --color-bg-alt:        #f0f0f0;   /* セクション交互背景 (本家) */
  --color-bg-deep:       #323232;   /* footer / overlay (本家) */
  --color-border:        #e5e7eb;

  /* --- Typography --- */
  --font-sans:    'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-serif:   'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-display: 'Noto Sans JP', sans-serif;  /* logo English 用 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   900;

  /* やわらかいモジュラースケール */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --text-3xl:  clamp(1.625rem, 1.4rem + 1.4vw, 2.125rem);
  --text-4xl:  clamp(2rem, 1.6rem + 2vw, 2.75rem);
  --text-5xl:  clamp(2.5rem, 1.9rem + 3vw, 3.5rem);
  --text-hero: clamp(2.25rem, 1.6rem + 3.5vw, 3.5rem);

  --lh-tight:  1.25;
  --lh-snug:   1.45;
  --lh-normal: 1.75;
  --lh-loose:  1.95;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0.02em;
  --tracking-wide:    0.18em;

  /* --- Spacing (温かみのある余白) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: clamp(3.5rem, 5vw, 5rem);
  --space-16: clamp(4.5rem, 7vw, 7rem);
  --space-20: clamp(6rem, 10vw, 10rem);

  /* --- Layout --- */
  --container-max:   1120px;
  --container-wide:  1280px;
  --container-pad:   clamp(1.25rem, 4vw, 2rem);
  --header-h:        76px;
  --header-h-mobile: 60px;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-soft:  0 2px 8px rgba(20, 24, 33, 0.05), 0 10px 24px rgba(20, 24, 33, 0.06);
  --shadow-lift:  0 4px 12px rgba(20, 24, 33, 0.08), 0 18px 40px rgba(20, 24, 33, 0.10);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
 * Base
 * ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt";
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--color-accent-dark); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--color-heading);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }

::selection { background: var(--color-accent); color: #fff; }

/* =========================================================
 * Layout
 * ========================================================= */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--wide { max-width: var(--container-wide); }

.section { padding-block: var(--space-16); }
.section--alt { background: var(--color-bg-alt); }
.section--tight { padding-block: var(--space-12); }

.section__head {
  margin-bottom: var(--space-10);
  text-align: center;
}
.section__head--left {
  text-align: left;
  max-width: 720px;
  margin-inline: 0;
}

/* セクション見出しの装飾 — 英字小見出し + 日本語タイトル */
.section__en {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent);
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}
.section__en::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--color-accent);
  margin: var(--space-3) auto 0;
}
.section__head--left .section__en::after { margin-inline: 0; }

.section__title {
  font-size: var(--text-3xl);
  color: var(--color-heading);
  margin: var(--space-4) 0 var(--space-5);
  letter-spacing: 0.02em;
}
.section__lead {
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: var(--lh-loose);
  margin: 0 auto;
  max-width: 720px;
}
.section__head--left .section__lead { margin-inline: 0; }

/* section__lead の直前に置く強調見出し行（キャッチコピー的な短文を太字・アクセントカラーで強調） */
.section__lead-strong {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-accent-dark);
  line-height: var(--lh-loose);
  margin: 0 auto var(--space-4);
  max-width: 720px;
}
.section__head--left .section__lead-strong { margin-inline: 0; }

/* セクション head 直下に配置する水彩アクセントイラスト */
.section__illust {
  max-width: 720px;
  margin: 0 auto var(--space-10);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--color-bg-alt);
}
.section__illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}