@charset "UTF-8";

:root {
  --font-color: #333333;
  --theme-color: #00398d;
  --base-color: #eeeeee;
  --point-color: #dc000c;

  --gray: gray;
  --silver: silver;
  --gold: gold;
  --red: red;
  --blue: blue;
  --green: green;
  --yellow: yellow;
  --cyan: cyan;
  --orange: orange;

  /*
  明度下げ
  background: oklch(from blue 25% c h);

  彩度下げ
  background: hsl(from indigo h 25% l);

  不透明度
  background: rgb(from lime r g b / 25%);

  色反転
  rgb(from yellow calc(1 - r) calc(1 - g) calc(1 - b));

  色補完
  hsl(from blue calc(h + 180) s l);

  暗い色コントラスト
  background: darkred;
  color: oklch(from darkred calc(l + 60) c h);

  明るい色コントラスト
  background: lightpink;
  color: oklch(from lightpink calc(l - 60) c h);

  類似パレット
  --base-color: blue;
  --primary:   var(--base-color);
  --secondary: oklch(from var(--base-color) l c calc(h - 45));
  --tertiary:  oklch(from var(--base-color) l c calc(h + 45));

  トライアディックパレット
  --base-color: yellow;
  --triad-1: oklch(from var(--base-color) l c calc(h - 120));
  --triad-2: oklch(from var(--base-color) l c calc(h + 120));

  四次元パレット
  --base-color: lime;
  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) l c calc(h + 90));
  --color-3: oklch(from var(--base-color) l c calc(h + 180));
  --color-4: oklch(from var(--base-color) l c calc(h + 270));

  モノクロ色相回転
  --base-color: deeppink;
  --color-1: var(--base-color);
  --color-2: oklch(from var(--base-color) calc(l - 10) c calc(h - 10));
  --color-3: oklch(from var(--base-color) calc(l - 20) c calc(h - 20));
  --color-4: oklch(from var(--base-color) calc(l - 30) c calc(h - 30));
  --color-5: oklch(from var(--base-color) calc(l - 40) c calc(h - 40));
  */

  /*
    透明化
    100%	FF
    90%	E6
    80%	CC
    70%	B3
    60%	99
    50%	80
    40%	66
    30%	4D
    20%	33
    10%	1A
    0%	00
 */

  --side-padding: 5%;
  --content-margin-y: 5em;
  --content-margin-t: 5em;
  --trans-par: 5%;
}

/* アニメーション用 */
:root {
  /* elastic */
  --anime1-1: linear(
    0 0%,
    0.22 2.1%,
    0.86 6.5%,
    1.11 8.6%,
    1.3 10.7%,
    1.35 11.8%,
    1.37 12.9%,
    1.37 13.7%,
    1.36 14.5%,
    1.32 16.2%,
    1.03 21.8%,
    0.94 24%,
    0.89 25.9%,
    0.88 26.85%,
    0.87 27.8%,
    0.87 29.25%,
    0.88 30.7%,
    0.91 32.4%,
    0.98 36.4%,
    1.01 38.3%,
    1.04 40.5%,
    1.05 42.7%,
    1.05 44.1%,
    1.04 45.7%,
    1 53.3%,
    0.99 55.4%,
    0.98 57.5%,
    0.99 60.7%,
    1 68.1%,
    1.01 72.2%,
    1 86.7%,
    1 100%
  );

  /* bounce */
  --anime1-2: linear(
    0 0%,
    0 2.27%,
    0.02 4.53%,
    0.04 6.8%,
    0.06 9.07%,
    0.1 11.33%,
    0.14 13.6%,
    0.25 18.15%,
    0.39 22.7%,
    0.56 27.25%,
    0.77 31.8%,
    1 36.35%,
    0.89 40.9%,
    0.85 43.18%,
    0.81 45.45%,
    0.79 47.72%,
    0.77 50%,
    0.75 52.27%,
    0.75 54.55%,
    0.75 56.82%,
    0.77 59.1%,
    0.79 61.38%,
    0.81 63.65%,
    0.85 65.93%,
    0.89 68.2%,
    1 72.7%,
    0.97 74.98%,
    0.95 77.25%,
    0.94 79.53%,
    0.94 81.8%,
    0.94 84.08%,
    0.95 86.35%,
    0.97 88.63%,
    1 90.9%,
    0.99 93.18%,
    0.98 95.45%,
    0.99 97.73%,
    1 100%
  );

  /* emphasized */
  --anime1-3: linear(
    0 0%,
    0 1.8%,
    0.01 3.6%,
    0.03 6.35%,
    0.07 9.1%,
    0.13 11.4%,
    0.19 13.4%,
    0.27 15%,
    0.34 16.1%,
    0.54 18.35%,
    0.66 20.6%,
    0.72 22.4%,
    0.77 24.6%,
    0.81 27.3%,
    0.85 30.4%,
    0.88 35.1%,
    0.92 40.6%,
    0.94 47.2%,
    0.96 55%,
    0.98 64%,
    0.99 74.4%,
    1 86.4%,
    1 100%
  );

  /* In Out · Sine */
  --anime2-1: cubic-bezier(0.45, 0.05, 0.55, 0.95);

  /* In Out · Quadratic */
  --anime2-2: cubic-bezier(0.46, 0.03, 0.52, 0.96);

  /* In Out · Cubic */
  --anime2-3: cubic-bezier(0.65, 0.05, 0.36, 1);

  /* Fast Out, Slow In */
  --anime2-4: cubic-bezier(0.4, 0, 0.2, 1);

  /* In Out · Back */
  --anime2-5: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /* In · Sine */
  --anime3-1: cubic-bezier(0.47, 0, 0.75, 0.72);

  /* In · Quadratic */
  --anime3-2: cubic-bezier(0.55, 0.09, 0.68, 0.53);

  /* In · Cubic */
  --anime3-3: cubic-bezier(0.55, 0.06, 0.68, 0.19);

  /* In · Back */
  --anime3-3: cubic-bezier(0.6, -0.28, 0.74, 0.05);

  /* Fast Out, Linear In */
  --anime3-4: cubic-bezier(0.4, 0, 1, 1);

  /* Out · Sine */
  --anime4-1: cubic-bezier(0.39, 0.58, 0.57, 1);

  /* Out · Quadratic */
  --anime4-2: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Out · Cubic */
  --anime4-3: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Linear Out, Slow In */
  --anime4-4: cubic-bezier(0, 0, 0.2, 1);

  /* Out · Back */
  --anime4-5: cubic-bezier(0.18, 0.89, 0.32, 1.28);
}