@charset "utf-8";

:root {
  /* ==== Color ====
     Illustratorデザインのスウォッチ名をそのままCSS変数名に反映 */
  --color-text: #3b2f14; /* 文字茶 */
  --color-primary: #108ca4; /* ボタンなど濃いブルー */
  --color-accent: #58aebf; /* 見出し薄いブルー */
  --color-accent-light: #e8f2f4; /* セクション背景の薄いブルー(見出し薄いブルーのtint) */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f8f4; /* 会社概要・事業所案内・沿革セクションの背景 */
  --color-border: #e0e0e0;

  /* ==== Font ====
     デザイン上、和文・欧文とも Zen Old Mincho で統一されているため1系統のみ定義 */
  --font-base: "Zen Old Mincho", serif;

  /* ==== Font size(デザイン実測値に対応) ==== */
  --fs-2xs: 1.2rem; /* 12px 日付・キャプション */
  --fs-xs: 1.4rem; /* 14px */
  --fs-sm: 1.6rem; /* 16px 本文・ナビ */
  --fs-md: 1.8rem; /* 18px ラベル・サブコピー */
  --fs-lg: 2.2rem; /* 22px */
  --fs-xl: 2.8rem; /* 28px セクション見出し */
  --fs-2xl: 3.4rem; /* 34px Hero見出し */

  /* ==== Line height ==== */
  --lh-heading: 1.5;
  --lh-body: 1.8;
  --lh-loose: 2.2;

  /* ==== Spacing ==== */
  --space-2xs: 0.8rem;
  --space-xs: 1.6rem;
  --space-sm: 2.4rem;
  --space-md: 4rem;
  --space-lg: 6.4rem;
  --space-xl: 9.6rem;

  /* ==== Layout ==== */
  --inner-width: 1200px;
  --inner-padding: 2rem;
  --header-height: 90px;
  --content-width-narrow: 900px; /* お知らせ一覧など、本文中心の細めのコンテンツ幅(下層ページで使い回す想定) */

  /* ==== Radius / Shadow ==== */
  --radius-sm: 6px;
  --radius-pill: 100px;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);

  /* ==== Motion ==== */
  --transition: 0.3s ease;
  --opacity-hover: 0.7;

  /* ==== z-index ==== */
  --z-header: 100;
  --z-menu: 200;
}

/* 767px以下がブレークポイント(base.cssの数値管理のためコメントで統一) */

@media (max-width: 767px) {
  :root {
    /* 見出し系フォントサイズをSPで一括縮小(このサイズを使う側は個別上書き不要) */
    --fs-lg: 2rem; /* 22px→20px */
    --fs-xl: 2.4rem; /* 28px→24px */
    --fs-2xl: 2.8rem; /* 34px→28px */
  }
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
  overflow-x: hidden; /* 装飾要素の画面端はみ出し(bg-blob・下線の100vw等)による横スクロール発生を防ぐ */
}

body {
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  min-width: 375px;
  overflow-x: hidden; /* 装飾要素の画面端はみ出し(bg-blob等)による横スクロール発生を防ぐ */
  overflow-wrap: break-word; /* 長いURL等の英数字文字列も折り返して横スクロールを防ぐ */
}

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

a {
  color: inherit; /* 作者CSSはUA標準スタイルより常に優先されるため、これだけでvisited時の既定色(紫系)も上書きされる */
  transition: opacity var(--transition);
}

button {
  font-family: inherit;
}

.inner {
  width: 100%;
  max-width: calc(var(--inner-width) + var(--inner-padding) * 2);
  margin-inline: auto;
  padding-inline: var(--inner-padding);
}

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

/* スクロールフェード共通クラス(Intersection Observerでis-inviewを付与) */
.js-fade {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.js-fade.is-inview {
  opacity: 1;
  transform: translateY(0);
}