@charset "UTF-8";
/*-------------------------------------------*/
/*変数*/
/*-------------------------------------------*/

/*
【書き方の例】
.example {
  color: var(--color-bg);
  font-size: var(--fs-lg);
  margin: var(--space-md) 10px;
}
*/


:root {
  /*------------------------------------------
    Color
  ------------------------------------------*/
  --color-main: #004aad;
  /* メインカラー */
  --color-accent: #fb7621;
  /* 強調・必須 */
  --color-text: #333333;
  /* 基本文字色 */
  --color-subtext: #666666;
  /* 補助テキスト */
  --color-border: #c9c9c9;
  /* 枠線 */
  --color-bg: #f5f6f9;
  /* セクション背景 */
  --color-bg-light: #ffffff;
  /* 白背景 */
  --color-bg-gray: #f4f4f4;
  /* 薄グレー背景 */

  /*------------------------------------------
    Font Size
  ------------------------------------------*/
  --fs-xs: 1.2rem;
  /* 注釈 */
  --fs-sm: 1.4rem;
  /* 補足 */
  --fs-md: 1.6rem;
  /* 本文 */
  --fs-lg: 2.0rem;
  /* 小見出し */
  --fs-xl: 3.0rem;
  /* 見出し */

  /*------------------------------------------
    Spacing
  ------------------------------------------*/
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;

  /*------------------------------------------
    Radius
  ------------------------------------------*/
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /*------------------------------------------
    Transition
  ------------------------------------------*/
  --transition-fast: 0.5s;
  --transition-normal: 0.8s;
}