:root {
  /* 基本の色 */
  --imas-blue-1: #dceff2;
  --imas-blue-2: #b4dce3;
  --imas-blue-3: #7896b4;
  --imas-blue-4: #2b3a67;
  --white: #ffffff;
  --black: #000000;
  --gray-01: #f5f5f5;
  --gray-02: #dddddd;
  --gray-03: #aaaaaa;
  --gray-04: #666666;

  /* セマンティックカラー（意味づけをした色） */
  --primary-color: var(--imas-blue-4);
  --secondary-color: #d8c495;
  --accent-color: var(--imas-blue-2);
  --background-color: #f5f5f5;
  --text-color: var(--gray-04);

  /* フォントサイズ */
  --font-size-xs: 0.75rem; /* 12px相当 */
  --font-size-sm: 0.875rem; /* 14px相当 */
  --font-size-base: 1rem; /* 16px相当 */
  --font-size-md: 1.125rem; /* 18px相当 */
  --font-size-lg: 1.25rem; /* 20px相当 */
  --font-size-xl: 1.5rem; /* 24px相当 */
  --font-size-xxl: 2rem; /* 32px相当 */
  --font-size-ttl: 90px; /* サブページのタイトル用 */	

  /* フォントファミリー */
  --serif: "Times New Roman", "Libre Baskerville", "Noto Serif JP", serif;
  /* z-index */
  --z-index-current-bar: 5;
  --z-index-header: 10;
  --z-index-sp-menu: 30;
  --z-index-modal: 50;

  /* border-radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;

  /* containerサイズ */
  --container-max-width: 1200px; /* 最大幅（ヘッダーなど） */
  --container-max-width-normal: 1000px; /* 通常のコンテナ */
  --container-max-width-tablet: 608px; /* タブレット用のコンテナ */

  /* 左右余白 */
  --container-padding-sp: 24px; /* sectionタグについてる */
  --container-padding-tablet: 56px; /* --container-padding-spと合わせて80pxになるようにしている */
}