/* Typography */
:root {
  --font-size-base: 10px; /* 基準となるフォントサイズ */
  --font-size-xs: calc(var(--font-size-base) * 1); /* 非常に小さいフォントサイズ */
  --font-size-sm: calc(var(--font-size-base) * 1.4); /* 小さいフォントサイズ */
  --font-size-default: calc(var(--font-size-base) * 1.6); /* 通常フォントサイズ */
  --font-size-md: calc(var(--font-size-base) * 1.8); /* 中程度のフォントサイズ */
  --font-size-lg: calc(var(--font-size-base) * 2.0); /* 大きいフォントサイズ */
  --font-size-xl: calc(var(--font-size-base) * 2.4); /* 非常に大きいフォントサイズ */

  --font-weight-normal: 400; /* 通常の太さ */
  --font-weight-bold: 700; /* 太字の太さ */

  --line-height-base: 1.5; /* 基準となる行の高さ */
}

.font-size-xs{
  font-size: var(--font-size-xs);
}

.font-size-sm{
font-size: var(--font-size-sm);
}

.font-size-md{
font-size: var(--font-size-md);
}

.font-size-lg{
font-size: var(--font-size-lg);
}

.font-size-xl{
font-size: var(--font-size-xl);;
}

/* 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-gc-ctrl: #990000; /* GCコントロールメインカラー */

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

  --color-g-ctrl: #c9daf8; /* 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: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-primary);
  color: var(--color-text-inverted);
}


.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);
  max-width: 600px;
  padding: var(--spacing-md);
}