@charset "UTF-8";
/* ============================================
   デザイントークン — イオレ求人検索エンジン広告
   ============================================ */

:root {
  /* === カラー: プライマリ（ブランドグリーン） === */
  --color-primary: #53b332;
  --color-primary-dark: #3a7f22;
  --color-primary-light: #d4f2c0;
  --color-primary-bg: #f0fbe8;

  /* === カラー: セカンダリ（ティール） === */
  --color-secondary: #00856f;
  --color-secondary-vivid: #00c7b5;
  --color-secondary-dark: #006b5a;
  --color-secondary-light: #d9f7f4;
  --color-secondary-gradient: linear-gradient(135deg, #00856f, #00a293);

  /* === カラー: CTA === */
  --color-cta: #e63e3b;
  --color-cta-hover: #cc2b28;
  --color-cta-light: #fff1f0;

  /* === カラー: ニュートラル === */
  --color-text: #2a2d2d;
  --color-text-muted: #444;
  --color-text-light: #717575;
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9f9;
  --color-bg-gray: #efefef;
  --color-border: #e0e3e3;

  /* === カラー: リンク === */
  --color-link: #0870b7;
  --color-link-hover: #0a5c94;

  /* === カラー: セマンティック === */
  --color-success: #53b332;
  --color-warning: #e5a100;
  --color-error: #e63e3b;
  --color-info: #0870b7;

  /* === タイポグラフィ === */
  --font-sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-heading: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-display: "Inter", "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-number: "Inter", "Noto Sans JP", sans-serif;

  --text-xs: 1.2rem;
  --text-sm: 1.4rem;
  --text-base: 1.6rem;
  --text-lg: 1.8rem;
  --text-xl: 2.0rem;
  --text-2xl: 2.4rem;
  --text-3xl: 3.0rem;
  --text-4xl: 3.6rem;
  --text-5xl: 4.8rem;

  --leading-tight: 1.3;
  --leading-snug: 1.5;
  --leading-normal: 1.8;
  --leading-relaxed: 2.0;

  --tracking-tight: 0.02em;
  --tracking-normal: 0.05em;
  --tracking-wide: 0.1em;

  /* === スペーシング === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* === シャドウ === */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow-cta: 0 4px 20px rgba(230, 62, 59, 0.3);
  --shadow-glow-primary: 0 4px 20px rgba(0, 133, 111, 0.25);

  /* === トランジション === */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* === ボーダー === */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* === コンテナ === */
  --container-max: 960px;
  --container-wide: 1200px;
  --container-padding: 5%;

  /* === フォーカス === */
  --focus-ring: 3px solid var(--color-secondary);
  --focus-offset: 2px;

  /* === M3インスパイア: エレベーション === */
  --elevation-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
  --elevation-2: 0 2px 6px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.08);
  --elevation-3: 0 4px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.1);
  --elevation-4: 0 8px 16px rgba(0,0,0,0.08), 0 16px 48px rgba(0,0,0,0.12);
  --elevation-5: 0 12px 24px rgba(0,0,0,0.1), 0 24px 64px rgba(0,0,0,0.14);

  /* === M3: ステートレイヤー === */
  --state-hover: rgba(0, 133, 111, 0.08);
  --state-focus: rgba(0, 133, 111, 0.12);
  --state-pressed: rgba(0, 133, 111, 0.16);
  --state-dragged: rgba(0, 133, 111, 0.20);

  /* === M3: サーフェス === */
  --surface-dim: #f0f2f2;
  --surface-default: #ffffff;
  --surface-bright: #ffffff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f6f8f8;
  --surface-container: #f0f2f2;
  --surface-container-high: #eaecec;
  --surface-container-highest: #e4e6e6;

  /* === プレミアムグラデーション === */
  --gradient-hero: linear-gradient(135deg, #00856f 0%, #53b332 50%, #00a293 100%);
  --gradient-surface: linear-gradient(180deg, #f8fbfc 0%, #ffffff 40%, #f6faf8 100%);
  --gradient-cta: linear-gradient(135deg, #e63e3b 0%, #ff5252 50%, #e63e3b 100%);
  --gradient-cta-hover: linear-gradient(135deg, #cc2b28 0%, #e63e3b 50%, #cc2b28 100%);
  --gradient-dark: linear-gradient(180deg, #1a2332 0%, #2a2d2d 50%, #1a2332 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
  --gradient-mesh-1: radial-gradient(ellipse at 20% 50%, rgba(83,179,50,0.06) 0%, transparent 50%);
  --gradient-mesh-2: radial-gradient(ellipse at 80% 50%, rgba(0,133,111,0.06) 0%, transparent 50%);
  --gradient-accent-line: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-secondary-vivid));

  /* === グラスモーフィズム === */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur: 20px;

  /* === プレミアムシャドウ === */
  --shadow-colored-primary: 0 4px 24px rgba(83, 179, 50, 0.15);
  --shadow-colored-secondary: 0 4px 24px rgba(0, 133, 111, 0.18);
  --shadow-colored-cta: 0 8px 32px rgba(230, 62, 59, 0.25);
  --shadow-inner-glow: inset 0 1px 0 rgba(255,255,255,0.6);
  --shadow-card-hover: 0 20px 60px rgba(0, 133, 111, 0.12), 0 8px 24px rgba(0,0,0,0.06);

  /* === アニメーション === */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);
  --duration-micro: 0.12s;
  --duration-short: 0.2s;
  --duration-medium: 0.35s;
  --duration-long: 0.5s;
  --duration-extra: 0.8s;
}

/* === スクロールアニメーション === */
.js-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.js-reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.js-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* スタガーディレイ */
.js-stagger-1 { transition-delay: 0.1s; }
.js-stagger-2 { transition-delay: 0.2s; }
.js-stagger-3 { transition-delay: 0.3s; }
.js-stagger-4 { transition-delay: 0.4s; }
.js-stagger-5 { transition-delay: 0.5s; }

/* === フォーカスリング === */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

/* === アクセシビリティ: prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  .js-reveal,
  .js-reveal-left,
  .js-reveal-right,
  .js-reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }
}