/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --white: #ffffff;
  --black: #242424;
  --gray: #6C6C6C;
  --light-gray: #EAEAEA;
  --light-blue: #CDE6FB;
  --blue: #1C8AE2;
  --navy: #181A4B;
  --light-green: #E7F6D3;
  --green: #7EB732;
  --red: #E50707;
  --white-opac-10: rgba(225 225 225 / 10%);
  
  --grad-brand: radial-gradient(99.71% 41.06% at 5.71% 89.27%, #DFF5C2 0%, rgba(223, 245, 194, 0.00) 100%), radial-gradient(176.88% 83.91% at 89.9% 13.88%, #CDE6FB 0%, rgba(205, 230, 251, 0.00) 55%);
  --shadow-gray-1: 16px 16px 0 0 #BABABA;
  --shadow-gray-2: 16px 16px 0 0 #929292;
  --shadow-gray-3: 16px 16px 0 0 #4F4F4F;
}
/**
 * Text Colors
 * テキストの色に関するスタイルを持つクラスを定義します。
 * .text-whiteのようなクラスを使用して、テキストの色を変更することができます。
 * 事前にBootstrapのCSSを読み込んでしまっているため、<a>要素の色なども含めて上書きする必要があります。
 * 具体的には、
 * 1. クラスを持つ要素
 * 2. クラスを持つ<a>要素
 * 3. クラスを持つ<a>要素のvisited状態
 * 4. クラスを持つ<a>要素のhover状態
 * 5. クラスを持つ<p>要素の子孫の<a>要素
 * 6. クラスを持つ<p>要素の子孫の<a>要素のvisited状態
 * 7. クラスを持つ<p>要素の子孫の<a>要素のhover状態
 */
.color-fg, .color-fg a, .color-fg a:visited, .color-fg a:hover, p a.color-fg, p a.color-fg:visited, p a.color-fg:hover {
  color: var(--fg-color);
}
.text-white {
  --fg-color: var(--white);
}
.text-black {
  --fg-color: var(--black);
}
.text-gray {
  --fg-color: var(--gray);
}
.text-light-gray {
  --fg-color: var(--light-gray);
}
.text-light-blue {
  --fg-color: var(--light-blue);
}
.text-blue {
  --fg-color: var(--blue);
}
.text-navy {
  --fg-color: var(--navy);
}
/**
 * Background Colors
 */
.color-bg {
  background-color: var(--bg-color);
}
.bg-white {
  --bg-color: var(--white);
}
.bg-black {
  --bg-color: var(--black);
}
.bg-gray {
  --bg-color: var(--gray);
}
.bg-light-gray {
  --bg-color: var(--light-gray);
}
.bg-navy {
  --bg-color: var(--navy);
}
.bg-blue {
  --bg-color: var(--blue);
}
.bg-light-blue {
  --bg-color: var(--light-blue);
}
.bg-light-green {
  --bg-color: var(--light-green);
}
.bg-green {
  --bg-color: var(--green);
}
.bg-white-opac-10 {
  --bg-color: var(--white-opac-10);
}
.bg-grad-brand {
  background-image: var(--grad-brand);
}
.bg-hero-glass {
  background-color: rgba(255 255 255 / 70%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  top: 50%;
  transform: translateY(-50%);
}
/**
 * Border Colors
 */
.border-white {
  --border-color: var(--white);
}
.border-black {
  --border-color: var(--black);
}
.border-gray {
  --border-color: var(--gray);
}
.border-light-gray {
  --border-color: var(--light-gray);
}
.border-dark-gray {
  --border-color: var(--dark-gray);
}


.shadow-gray-1 {
  box-shadow: var(--shadow-gray-1);
}
.shadow-gray-2 {
  box-shadow: var(--shadow-gray-2);
}
.shadow-gray-3 {
  box-shadow: var(--shadow-gray-3);
}