/*
 * Hasegawa UI foundation (v2)
 * Reusable tokens and block surfaces for future fixed pages.
 * Page-specific selectors must live in their own stylesheet.
 *
 * v2: 固定ページ間で同じ値を持つべきものをトークンへ移した。
 * ページ固有CSSで数値を直書きすると、ページが増えるほど差が生まれるため。
 * - --hs-hero-message-size: ファーストビューの主メッセージの文字サイズ
 * - --hs-block-space-y: ブロック上下の基本余白。860px以上で104pxへ広げる
 */
.hs-ui {
  --hs-blue: #005aa0;
  --hs-cyan: #00a0e9;
  --hs-blue-deep: #00477f;
  --hs-text: #333333;
  --hs-text-sub: #555555;
  --hs-text-muted: #6b7280;
  --hs-white: #ffffff;
  --hs-gray: #f8fafc;
  --hs-line: #e2e8f0;
  --hs-container: var(--tcd-base-container-size, 1100px);
  --hs-font-sans: "Noto Sans JP", Arial, "Hiragino Sans", "Yu Gothic Medium", Meiryo, sans-serif;
  --hs-hero-message-size: 24px;
  background: var(--hs-white);
  color: var(--hs-text);
  font-family: var(--hs-font-sans);
  font-size: 16px;
  line-height: 2;
}

.hs-ui .hs-block {
  --hs-block-radius: 8px;
  --hs-block-space-y: 76px;
  --hs-block-surface: transparent;
}

.hs-ui .hs-block--surface-tint {
  --hs-block-surface: var(--hs-gray);
}

.hs-ui .hs-block--surface-light {
  --hs-block-surface:
    linear-gradient(135deg, rgba(0, 160, 233, 0.12), transparent 48%),
    #eaf6fb;
}

.hs-ui .hs-block--surface-deep {
  --hs-block-surface:
    radial-gradient(circle at 82% -20%, rgba(0, 160, 233, 0.34), transparent 38%),
    linear-gradient(120deg, #002f55 0%, #004c7f 56%, #00679e 100%);
}

.hs-ui .hs-block--surface-tint,
.hs-ui .hs-block--surface-light,
.hs-ui .hs-block--surface-deep {
  background: var(--hs-block-surface);
}

.hs-ui a:focus-visible {
  outline: 3px solid #f6c343;
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .hs-ui {
    --hs-hero-message-size: 28px;
  }
}

@media (min-width: 860px) {
  .hs-ui {
    --hs-hero-message-size: clamp(30px, 2.4vw, 34px);
  }

  .hs-ui .hs-block {
    --hs-block-space-y: 104px;
  }

  /* CTAパネルは本文ブロックより締める。値はここだけで持つ。 */
  .hs-ui .hs-block--cta-panel {
    --hs-block-space-y: 82px;
  }
}