/* Typography */
:root {
  --font-size-base: 16px; /* 基準となるフォントサイズ */
  --font-size-xm: calc(var(--font-size-base) * 0.625); /* 非常に小さいフォントサイズ */
  --font-size-sm: calc(var(--font-size-base) * 0.875); /* 小さいフォントサイズ */
  --font-size-md: calc(var(--font-size-base) * 1.125); /* 中程度のフォントサイズ */
  --font-size-lg: calc(var(--font-size-base) * 1.25); /* 大きいフォントサイズ */
  --font-size-xl: calc(var(--font-size-base) * 1.5); /* 非常に大きいフォントサイズ */
  --font-size-xxl: calc(var(--font-size-base) * 1.75);
  --font-weight-normal: 400; /* 通常の太さ */
  --font-weight-bold: 700; /* 太字の太さ */
  --line-height-base: 1.5; /* 基準となる行の高さ */
}


/* Colors */
:root {
  --color-primary: #002060; /* メインカラー */
  --color-secondary: #6c757d; /* 補助カラー */
  --color-success: #28a745; /* 成功カラー */
  --color-danger: #dc3545; /* 危険カラー */
  --color-warning: #ffc107; /* 警告カラー */
  --color-info: #17a2b8; /* 情報カラー */
  --color-light: #F2F2F2; /* 薄いカラー */
  --color-dark: #343a40; /* 濃いカラー */

  --color-t-ctrl: #002060; /* Tコントロールメインカラー */

  --color-g-ctrl: rgb(240, 191, 54); /* Gコントロールメインカラー */



  --color-text-base: #212529; /* 基準となるテキストカラー */
  --color-text-muted: var(--color-secondary); /* 目立たないテキストカラー */
  --color-text-inverted: #fefefe; /* 反転したテキストカラー */

  --color-bg-base: #fefefe; /* 基準となる背景カラー */
  --color-bg-muted: var(--color-light); /* 目立たない背景カラー */
}

/* Spacing */
:root {
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
}

/* Border Radius */
:root {
  --border-radius-sm: 0.25rem; /* 4px */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 1rem; /* 16px */
  --border-radius-pill: 9999px; /* 丸みを帯びた形状 */
}

/* Transitions */
:root {
  --transition-duration: 0.3s;
  --transition-timing: ease;
}

/* Shadows */
:root {
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
  --box-shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* Breakpoints */
:root {
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

/* Button */
.btn {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  /* background-color: var(--color-primary); */
  color: var(--color-text-inverted);
  border-radius: var(--border-radius-md);
  /* transition: background-color var(--transition-duration) var(--transition-timing); */
  transition: filter var(--transition-duration) var(--transition-timing);

}

.btn:hover {
  /* background-color: var(--color-primary-dark); */
  filter: brightness(1.4);
}

/* Card */
.card {
  background-color: var(--color-bg-base);
  border-radius: 0;
  box-shadow: var(--box-shadow-md);
  overflow: hidden;
}

.card-header {
  padding: var(--spacing-md);
  background-color: var(--color-bg-muted);
}

.card-body {
  padding: var(--spacing-md);
}

.card-footer {
  padding: var(--spacing-md);
  background-color: var(--color-bg-muted);
}

/* Modal */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  background-color: var(--color-bg-base);
  border-radius: var(--border-radius-md);
  box-shadow: var(--box-shadow-lg);
  padding: var(--spacing-md);
}