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

/* =========================================================
   変数
   - anchor-color-* は inc/output-css.php（カスタマイザー）で出力する
   - CSSファイル側では安定した別名 --color-* を使う
   - カスタマイザー変数が存在しない場合の安全なフォールバックも用意する
   ========================================================= */

:root{
  /* 固定ヘッダー用アンカー補正 */
  --anchor-offset: 90px;

  /* ---- カスタマイザー基本フォールバック ---- */
  --anchor-color-primary:       #cba7d4;
  --anchor-color-primary-dark:  #b78fc3;
  --anchor-color-accent-soft:   #f3ecff;
  --anchor-color-accent-border: #e5dcfa;
  --anchor-color-text-base:     #333333;
  --anchor-color-text-heading:  #222222;
  /* リンクホバー下線色（未設定時はプライマリ（濃）を使用） */
  --anchor-color-link-hover-underline: var(--anchor-color-primary-dark);


  /* ---- エイリアス（CSS内で使用） ---- */
  --color-primary:       var(--anchor-color-primary);
  --color-primary-dark:  var(--anchor-color-primary-dark);
  --color-accent-soft:   var(--anchor-color-accent-soft);
  --color-accent-border: var(--anchor-color-accent-border);
  --color-text-base:     var(--anchor-color-text-base);
  --color-text-heading:  var(--anchor-color-text-heading);
  /* リンクホバー下線色（hover時の下線色だけを変えたい場合に使用） */
  --color-link-hover-underline: var(--anchor-color-link-hover-underline);


  /* ---- 角丸トークン ---- */
  --radius-s: 10px;
  --radius-m: 14px;
  --radius-l: 20px;

  /* 旧エイリアス（古いCSS向け） */
  --primary:       var(--color-primary);
  --primary-dark:  var(--color-primary-dark);
  --accent-soft:   var(--color-accent-soft);
  --accent-border: var(--color-accent-border);
  --text-base:     var(--color-text-base);
  --text-heading:  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 {
}