:root{
  --sec-subtitle-size: clamp(14px, 1.2vw, 16px);
}

/* =========================================================
   タイポグラフィ
   - フォントファミリーはカスタマイザー由来のCSS変数で指定する
   ========================================================= */

body{
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif);
  line-height: 1.8;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--font-heading, var(--font-body, inherit));
  color: var(--color-text-heading);
}

/* 見出しサイズ
   - PC / タブレット / スマホは output-css.php の動的CSSで最終反映
   - ここでは基本値へフォールバック
*/
h1{ font-size: var(--h1-size-sp, var(--h1-size, 28px)); line-height: var(--h1-lh-sp, var(--h1-lh, 1.4)); }
h2{ font-size: var(--h2-size-sp, var(--h2-size, 24px)); line-height: var(--h2-lh-sp, var(--h2-lh, 1.5)); }
h3{ font-size: var(--h3-size-sp, var(--h3-size, 20px)); line-height: var(--h3-lh-sp, var(--h3-lh, 1.6)); }
h4{ font-size: var(--h4-size-sp, var(--h4-size, 18px)); line-height: var(--h4-lh-sp, var(--h4-lh, 1.6)); }

@media (min-width: 769px){
  h1{ font-size: var(--h1-size, 28px); line-height: var(--h1-lh, 1.4); }
  h2{ font-size: var(--h2-size, 24px); line-height: var(--h2-lh, 1.5); }
  h3{ font-size: var(--h3-size, 20px); line-height: var(--h3-lh, 1.6); }
  h4{ font-size: var(--h4-size, 18px); line-height: var(--h4-lh, 1.6); }
}


/* 見出し：階層ごとの色変数（カスタマイザー） */
h1{ color: var(--color-h1, var(--color-text-heading)); }
h2{ color: var(--color-h2, var(--color-text-heading)); }
h3{ color: var(--color-h3, var(--color-text-heading)); }
h4{ color: var(--color-h4, var(--color-text-heading)); }

.c-secSubtitle,
.front-about__subtitle,
.front-service__subtitle,
.front-reasons__subtitle,
.front-voice__subtitle,
.front-cta__subtitle {
  font-size: var(--sec-subtitle-size);
  line-height: 1.6;
}

.front-about__role,
.front-about__shoulder {
}