/* 色のルール定義 - Section 6 */

:root {
  /* グレースケール */
  --gray-900: #1A1A1A;
  --gray-800: #333333;
  --gray-700: #4C4C4C;
  --gray-600: #666666;
  --gray-500: #808080;
  --gray-400: #999999;
  --gray-300: #B3B3B3;
  --gray-200: #CCCCCC;
  --gray-100: #E5E5E5;
  --gray-50: #F2F2F2;

  /* グリーンスケール */
  --green-900: #006230;
  --green-800: #008340;
  --green-700: #00A450;
  --green-600: #1AAD61;
  --green-500: #4CBF84;
  --green-400: #66C996;
  --green-300: #8CD6B0;
  --green-200: #99DBB9;
  --green-100: #E5F6ED;
  --green-50: #F2FBF6;

  /* ブラックスケール */
  --black-100: #E5E5E5;
  --black-ffffff: #FFF;
}

.header {
  display: flex;
  width: 719px;
  height: 60px;
  padding: 18px 28px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--black-100, #E5E5E5);
  background: var(--black-ffffff, #FFF);
}

.header-logo {
  display: flex;
  width: 184px;
  height: 24px;
  padding-bottom: 0.038px;
  justify-content: center;
  align-items: flex-start;
  gap: 6.837px;
  aspect-ratio: 23/3;
}