@charset "utf-8";
/* =========================================================
   base.css — リセット + デザイントークン
   りんくグループ / 株式会社ビジネス・デザイン サービスサイト
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Brand color */
  --c-navy:        #1b2a4a;  /* 見出し・ヘッダー・フッター */
  --c-navy-deep:   #12203a;
  --c-cyan:        #00a5cf;  /* メインアクセント */
  --c-cyan-dark:   #0089ae;
  --c-cyan-pale:   #e7f4fa;  /* 淡い背景 */
  --c-magenta:     #e4007f;  /* CTA・強調 */
  --c-magenta-dark:#c2006c;
  --c-green:       #8dc21f;  /* キャリア支援 */
  --c-yellow:      #f5c400;  /* 研修・合宿 */

  /* Neutral */
  --c-ink:         #2a3342;
  --c-ink-sub:     #5d6b7f;
  --c-line:        #dde5ec;
  --c-bg:          #ffffff;
  --c-bg-soft:     #f4f9fc;
  --c-bg-gray:     #f7f8fa;

  /* Typography */
  --f-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
            "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --f-num:  "Helvetica Neue", Arial, var(--f-base);

  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.875rem;  /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md:   1.125rem;  /* 18px */
  --fs-lg:   1.375rem;  /* 22px */
  --fs-xl:   1.75rem;   /* 28px */
  --fs-2xl:  2.25rem;   /* 36px */
  --fs-3xl:  3rem;      /* 48px */

  /* Layout */
  --w-max:   1120px;
  --w-narrow: 840px;
  --gap:     24px;
  --radius:  12px;
  --radius-lg: 20px;

  /* Effect */
  --shadow-sm: 0 2px 8px rgba(27, 42, 74, .06);
  --shadow-md: 0 6px 24px rgba(27, 42, 74, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--f-base);
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, p, figure, ul, ol, dl, dd, blockquote {
  margin: 0;
}

ul, ol { padding: 0; list-style: none; }

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

a { color: var(--c-cyan-dark); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-magenta); }

button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

table { border-collapse: collapse; width: 100%; }

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 3px solid var(--c-magenta);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 12px 20px;
  background: var(--c-navy);
  color: #fff;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  color: #fff;
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}