/* =========================================================
   FunClock Blog "Have a Fun Time" — Base / Tokens
   値はすべて design_spec.json 由来。新採用サイトの :root と同値。
   ========================================================= */
:root {
  /* Colors */
  --color-primary: #C12620;
  --color-primary-dark: #A51F1A;   /* hover（estimated：採用サイトの --red-dark を採用） */
  --color-primary-light: #FDF0F0;
  --color-primary-mid: #E8AAAA;
  --color-dark: #1C1208;
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F3EF;
  --color-placeholder: #EEECE6;
  --color-border: #E8E5DE;
  --color-text-heading: #1C1208;
  --color-text-body: #333028;
  --color-text-muted: #6B655D;
  --color-text-on-dark: #D9D4CB;
  --color-text-faint: #9A948A;

  /* Category */
  --cat-test-bg: #E7EEF8;  --cat-test-fg: #1F4E8C;
  --cat-other-bg: #E5F2EA; --cat-other-fg: #1D6B45;
  --cat-development-bg: #F1ECF8; --cat-development-fg: #5B3E99;
  --cat-infrastructure-bg: #FFF1DE; --cat-infrastructure-fg: #7A4300; --cat-infrastructure-dot: #B86A00;
  --cat-culture-bg: #FDF0F0; --cat-culture-fg: #A51F1A; --cat-culture-dot: #C12620;

  /* Typography */
  --font-ja: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-en: 'Outfit', var(--font-ja);
  --text-hero: 44px;
  --text-article-h1: 32px;
  --text-section-h2: 30px;
  --text-article-h2: 24px;
  --text-article-h3: 20px; /* estimated */
  --text-body: 15px;
  --text-article: 16px;
  --leading-body: 1.8;
  --leading-article: 2;

  /* Layout */
  --container-width: 1200px;
  --container-px: 24px;
  --section-py: 72px;
  --header-py: 14px;

  /* Components */
  --radius-chip: 4px;
  --radius-thumb-sm: 6px;
  --radius-thumb: 8px;
  --radius-box: 12px;
  --radius-card: 14px;
  --radius-full: 999px;
  --shadow-card: 0 6px 24px rgba(44, 36, 32, .08);
  --shadow-search: 0 6px 24px rgba(44, 36, 32, .06);

  /* Motion */
  --duration: .2s;
  --easing: ease;
}

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

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-body);
  font-family: var(--font-ja);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

img { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--color-text-heading); text-decoration: none; transition: color var(--duration) var(--easing); }
a:hover { color: var(--color-primary); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

h1, h2, h3, h4 { color: var(--color-text-heading); margin: 0; }
p { margin: 0; }

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

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

.skip-link:focus {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  width: auto; height: auto; clip: auto;
  padding: 12px 16px; background: var(--color-dark); color: #fff; border-radius: 8px;
}

.en { font-family: var(--font-en); }