/**
 * Color Variables
 * カラーパレットに関する変数を定義します。
 * これらの変数は、他のスタイルシートで使用されます。
 * デザインに合わせて変更・追加することができます。
 */
:root {
  --snow: #ffffff;
  --ink: #111111;
  
  /** アクセントカラー */
  --accent-yellow: #f7a900;
  --accent-red: #E63049;
  --accent-blue: #7C91EF;
  --accent: var(--accent-yellow);
  
  --accent-50:  hsla(from var(--brand-h) h 100% 98.04% / 100%);
  --accent-100: hsla(from var(--brand-h) h 100% 90% / 100%);
  --accent-200: hsla(from var(--brand-h) h 100% 78.04% / 100%);
  --accent-300: hsla(from var(--brand-h) h 100% 68.04% / 100%);
  
  /** 会社ごとの色 */
  --violet: #920883;
  --dark-red: #a51f37;
  --yellow: #f1d146;

  --gray: #808080;
  --light-gray: #d3d3d3;
  --dark-gray: #696969;
  /* --redは必須バッジ、--blueは記事本文のリンク色として参照される。
   * いずれも白地・白文字とのコントラスト比がWCAG AAを満たす値を初期値としている。 */
  --red: #d32f2f;
  --blue: #1a5fb4;

  /* 影とスクリム（画像上に敷く暗幕）の色。案件で上書きできるよう変数にしている。
   * 濃さは各クラス側でアルファを指定するため、ここでは色だけを持つ。 */
  --shadow-color: var(--ink);
  --scrim-color: var(--ink);
}

/**
 * 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-accent {
  --fg-color: var(--accent);
}
.text-accent-50 {
  --fg-color: var(--accent-50);
}
.text-accent-100 {
  --fg-color: var(--accent-100);
}
.text-accent-200 {
  --fg-color: var(--accent-200);
}
.text-accent-300 {
  --fg-color: var(--accent-300);
}

.text-violet {
  --fg-color: var(--violet);
}
.text-dark-red {
  --fg-color: var(--dark-red);
}
.text-yellow {
  --fg-color: var(--yellow);
}
.text-gray {
  --fg-color: var(--gray);
}
.text-light-gray {
  --fg-color: var(--light-gray);
}
.text-dark-gray {
  --fg-color: var(--dark-gray);
}

.text-alpha-5 {
  --fg-alpha: 5%;
}
.text-alpha-10 {
  --fg-alpha: 10%;
}
.text-alpha-15 {
  --fg-alpha: 15%;
}
.text-alpha-20 {
  --fg-alpha: 20%;
}
.text-alpha-25 {
  --fg-alpha: 25%;
}
.text-alpha-30 {
  --fg-alpha: 30%;
}
.text-alpha-35 {
  --fg-alpha: 35%;
}
.text-alpha-40 {
  --fg-alpha: 40%;
}
.text-alpha-45 {
  --fg-alpha: 45%;
}
.text-alpha-50 {
  --fg-alpha: 50%;
}
.text-alpha-55 {
  --fg-alpha: 55%;
}
.text-alpha-60 {
  --fg-alpha: 60%;
}
.text-alpha-65 {
  --fg-alpha: 65%;
}
.text-alpha-70 {
  --fg-alpha: 70%;
}
.text-alpha-75 {
  --fg-alpha: 75%;
}
.text-alpha-80 {
  --fg-alpha: 80%;
}
.text-alpha-85 {
  --fg-alpha: 85%;
}
.text-alpha-90 {
  --fg-alpha: 90%;
}
.text-alpha-95 {
  --fg-alpha: 95%;
}
.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-accent {
  --bg-color: var(--accent);
}
.bg-accent-50 {
  --bg-color: var(--accent-50);
}
.bg-accent-100 {
  --bg-color: var(--accent-100);
}
.bg-accent-200 {
  --bg-color: var(--accent-200);
}
.bg-accent-300 {
  --bg-color: var(--accent-300);
}
.bg-violet {
  --bg-color: var(--violet);
}
.bg-dark-red {
  --bg-color: var(--dark-red);
}
.bg-yellow {
  --bg-color: var(--yellow);
}
.bg-gray {
  --bg-color: var(--gray);
}
.bg-light-gray {
  --bg-color: var(--light-gray);
}
.bg-dark-gray {
  --bg-color: var(--dark-gray);
}

.bg-alpha-2 {
  --bg-alpha: 2%;
}
.bg-alpha-5 {
  --bg-alpha: 5%;
}
.bg-alpha-10 {
  --bg-alpha: 10%;
}
.bg-alpha-15 {
  --bg-alpha: 15%;
}
.bg-alpha-20 {
  --bg-alpha: 20%;
}
.bg-alpha-25 {
  --bg-alpha: 25%;
}
.bg-alpha-30 {
  --bg-alpha: 30%;
}
.bg-alpha-35 {
  --bg-alpha: 35%;
}
.bg-alpha-40 {
  --bg-alpha: 40%;
}
.bg-alpha-45 {
  --bg-alpha: 45%;
}
.bg-alpha-50 {
  --bg-alpha: 50%;
}
.bg-alpha-55 {
  --bg-alpha: 55%;
}
.bg-alpha-60 {
  --bg-alpha: 60%;
}
.bg-alpha-65 {
  --bg-alpha: 65%;
}
.bg-alpha-70 {
  --bg-alpha: 70%;
}
.bg-alpha-75 {
  --bg-alpha: 75%;
}
.bg-alpha-80 {
  --bg-alpha: 80%;
}
.bg-alpha-85 {
  --bg-alpha: 85%;
}
.bg-alpha-90 {
  --bg-alpha: 90%;
}
.bg-alpha-95 {
  --bg-alpha: 95%;
}
.bg-alpha-100 {
  --bg-alpha: 100%;
}

/**
 * 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-accent {
  --border-color: var(--accent);
}
.border-violet {
  --border-color: var(--violet);
}
.border-dark-red {
  --border-color: var(--dark-red);
}
.border-yellow {
  --border-color: var(--yellow);
}
.border-gray {
  --border-color: var(--gray);
}
.border-light-gray {
  --border-color: var(--light-gray);
}
.border-dark-gray {
  --border-color: var(--dark-gray);
}

.border-alpha-5 {
  --border-alpha: 5%;
}
.border-alpha-10 {
  --border-alpha: 10%;
}
.border-alpha-15 {
  --border-alpha: 15%;
}
.border-alpha-20 {
  --border-alpha: 20%;
}
.border-alpha-25 {
  --border-alpha: 25%;
}
.border-alpha-30 {
  --border-alpha: 30%;
}
.border-alpha-35 {
  --border-alpha: 35%;
}
.border-alpha-40 {
  --border-alpha: 40%;
}
.border-alpha-45 {
  --border-alpha: 45%;
}
.border-alpha-50 {
  --border-alpha: 50%;
}
.border-alpha-55 {
  --border-alpha: 55%;
}
.border-alpha-60 {
  --border-alpha: 60%;
}
.border-alpha-65 {
  --border-alpha: 65%;
}
.border-alpha-70 {
  --border-alpha: 70%;
}
.border-alpha-75 {
  --border-alpha: 75%;
}
.border-alpha-80 {
  --border-alpha: 80%;
}
.border-alpha-85 {
  --border-alpha: 85%;
}
.border-alpha-90 {
  --border-alpha: 90%;
}
.border-alpha-95 {
  --border-alpha: 95%;
}
.border-alpha-100 {
  --border-alpha: 100%;
}

/**
 * Scrim
 * ヒーロー画像の上に敷く暗幕。文字の可読性を確保するために使う。
 * テキストを持つ要素そのものに付けられるため、ラッパーを増やさずに済む。
 * 濃さは --scrim-alpha で調整する。
 */
.bg-scrim-b {
  background-image: linear-gradient(
    to top,
    hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 60%)),
    transparent
  );
}
.bg-scrim-t {
  background-image: linear-gradient(
    to bottom,
    hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 60%)),
    transparent
  );
}
.bg-scrim-full {
  background-image: linear-gradient(
    hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 40%)),
    hsl(from var(--scrim-color) h s l / var(--scrim-alpha, 40%))
  );
}

.scrim-alpha-5 {
  --scrim-alpha: 5%;
}
.scrim-alpha-10 {
  --scrim-alpha: 10%;
}
.scrim-alpha-15 {
  --scrim-alpha: 15%;
}
.scrim-alpha-20 {
  --scrim-alpha: 20%;
}
.scrim-alpha-25 {
  --scrim-alpha: 25%;
}
.scrim-alpha-30 {
  --scrim-alpha: 30%;
}
.scrim-alpha-35 {
  --scrim-alpha: 35%;
}
.scrim-alpha-40 {
  --scrim-alpha: 40%;
}
.scrim-alpha-45 {
  --scrim-alpha: 45%;
}
.scrim-alpha-50 {
  --scrim-alpha: 50%;
}
.scrim-alpha-55 {
  --scrim-alpha: 55%;
}
.scrim-alpha-60 {
  --scrim-alpha: 60%;
}
.scrim-alpha-65 {
  --scrim-alpha: 65%;
}
.scrim-alpha-70 {
  --scrim-alpha: 70%;
}
.scrim-alpha-75 {
  --scrim-alpha: 75%;
}
.scrim-alpha-80 {
  --scrim-alpha: 80%;
}
.scrim-alpha-85 {
  --scrim-alpha: 85%;
}
.scrim-alpha-90 {
  --scrim-alpha: 90%;
}
.scrim-alpha-95 {
  --scrim-alpha: 95%;
}
.scrim-alpha-100 {
  --scrim-alpha: 100%;
}

/**
 * Glassmorphism
 *
 * 刻みは 02_border.css の rounded-* に合わせている。低い側は差が見て分かる
 * ため 2 刻み、8 以上は 4 刻み。
 */
.bg-blur-2 {
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.bg-blur-4 {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.bg-blur-6 {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.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);
}
.bg-blur-28 {
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
}
.bg-blur-32 {
  -webkit-backdrop-filter: blur(32px);
  backdrop-filter: blur(32px);
}

/**
 * SVG の塗り
 *
 * svg { fill: currentColor } をベースへ入れると、色を持つ SVG（ロゴやイラスト）
 * まで単色に塗り潰してしまう。アイコンとして色を継承させたい箇所にだけ当てる。
 */
.fill-current {
  fill: currentColor;
}
.stroke-current {
  stroke: currentColor;
}