/**
* Color Variables
* カラーパレットに関する変数を定義します。
* これらの変数は、他のスタイルシートで使用されます。
* デザインに合わせて変更・追加することができます。
*/
:root {
  --snow: #ffffff;
  --ink: #292929;
  --blue: #1F63C3;
  --yellow: #F7C81F;
  --green: #369234;
  --red: #C8191B;
  --emerald: #0082A0;
  
  --grad-emerald-blue: linear-gradient(90deg, #0082A0 0%, #1F63C3 100%);
  --grad-white-emerald: linear-gradient(180deg, #FFF 4.81%, #0082A0 70%);
  --grad-yellow: linear-gradient(90deg, #F7C81F 0%, #EBFC34 100%);
  --grad-white-yellow: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(247, 200, 31, 0.25) 50%, rgba(255, 255, 255, 0.35) 100%);
}

/**
* Text Colors
* テキストの色に関するスタイルを持つクラスを定義します。
* .text-snowのようなクラスを使用して、テキストの色を変更することができます。
* 事前に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: hsl(from var(--fg-color) h s l / var(--fg-alpha, 100%)) !important;
}

.text-snow {
  --fg-color: var(--snow);
}
.text-ink {
  --fg-color: var(--ink);
}
.text-blue {
  --fg-color: var(--blue);
}
.text-yellow {
  --fg-color: var(--yellow);
}
.text-green {
  --fg-color: var(--green);
}
.text-red {
  --fg-color: var(--red);
}
.text-emerald {
  --fg-color: var(--emerald);
}
.text-grad-yellow {
  background-image: var(--grad-yellow);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-grad-emerald-blue {
  background: linear-gradient(90deg, #3080F0 0%, #0AC5F0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-alpha-10 {
  --fg-alpha: 10%;
}
.text-alpha-20 {
  --fg-alpha: 20%;
}
.text-alpha-30 {
  --fg-alpha: 30%;
}
.text-alpha-40 {
  --fg-alpha: 40%;
}
.text-alpha-50 {
  --fg-alpha: 50%;
}
.text-alpha-60 {
  --fg-alpha: 60%;
}
.text-alpha-70 {
  --fg-alpha: 70%;
}
.text-alpha-80 {
  --fg-alpha: 80%;
}
.text-alpha-90 {
  --fg-alpha: 90%;
}
.text-alpha-100 {
  --fg-alpha: 100%;
}

/**
* Background Colors
*/
.color-bg {
  background-color: hsl(from var(--bg-color) h s l / var(--bg-alpha, 100%)) !important;
}

.bg-snow {
  --bg-color: var(--snow);
}
.bg-ink {
  --bg-color: var(--ink);
}
.bg-blue {
  --bg-color: var(--blue);
}
.bg-yellow {
  --bg-color: var(--yellow);
}
.bg-green {
  --bg-color: var(--green);
}
.bg-red {
  --bg-color: var(--red);
}
.bg-emerald {
  --bg-color: var(--emerald);
}

.bg-alpha-05 {
  --bg-alpha: 5%;
}
.bg-alpha-10 {
  --bg-alpha: 10%;
}
.bg-alpha-20 {
  --bg-alpha: 20%;
}
.bg-alpha-25 {
  --bg-alpha: 25%;
}
.bg-alpha-30 {
  --bg-alpha: 30%;
}
.bg-alpha-40 {
  --bg-alpha: 40%;
}
.bg-alpha-50 {
  --bg-alpha: 50%;
}
.bg-alpha-60 {
  --bg-alpha: 60%;
}
.bg-alpha-70 {
  --bg-alpha: 70%;
}
.bg-alpha-80 {
  --bg-alpha: 80%;
}
.bg-alpha-90 {
  --bg-alpha: 90%;
}
.bg-alpha-100 {
  --bg-alpha: 100%;
}

.bg-grad-emerald-blue {
  background: var(--grad-emerald-blue);
}
.bg-grad-white-emerald {
  background: var(--grad-white-emerald);
}
.bg-grad-yellow {
  background: var(--grad-yellow);
}
.bg-grad-white-yellow {
  background: var(--grad-white-yellow);
}

/**
* Border Colors
*/

.color-border {
  --bd-color: hsl(from var(--border-color) h s l / var(--border-alpha, 100%));
}

.border-snow {
  --border-color: var(--snow);
}
.border-ink {
  --border-color: var(--ink);
}
.border-blue {
  --border-color: var(--blue);
}
.border-yellow {
  --border-color: var(--yellow);
}
.border-green {
  --border-color: var(--green);
}
.border-red {
  --border-color: var(--red);
}
.border-emerald {
  --border-color: var(--emerald);
}
.border-instagram {
  --border-color: #D1006C;
}

.border-alpha-05 {
  --border-alpha: 5%;
}
.border-alpha-10 {
  --border-alpha: 10%;
}
.border-alpha-15 {
  --border-alpha: 15%;
}
.border-alpha-20 {
  --border-alpha: 20%;
}
.border-alpha-30 {
  --border-alpha: 30%;
}
.border-alpha-40 {
  --border-alpha: 40%;
}
.border-alpha-50 {
  --border-alpha: 50%;
}
.border-alpha-60 {
  --border-alpha: 60%;
}
.border-alpha-70 {
  --border-alpha: 70%;
}
.border-alpha-80 {
  --border-alpha: 80%;
}
.border-alpha-90 {
  --border-alpha: 90%;
}
.border-alpha-100 {
  --border-alpha: 100%;
}

/**
* Glassmorphism
*/
.bg-blur-8 {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.bg-blur-12 {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bg-blur-16 {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.bg-blur-20 {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.bg-blur-24 {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}