@charset "UTF-8";

:root {
  --font-size: 1.6rem;

  --font-color: #444444;
  --theme-color: #00a2ea;
  --theme-color2: #e50081;
  --theme-color3: #fef200;

  /* グレー系 */
  --gray-light: #f7f7f7;
  --gray: #cccccc;
  --gray-dark: #707070;
  --gray-deep: #333333;

  --inner: 1000px;
  --side-margin: calc((100vw - var(--inner)) / 2);
  --side-padding: 0;
  --section-margin: 20em;
  --content-padding: 5em;
  --tf-margin: 1em;
}

@media screen and (max-width: 1200px) {
  :root {
    --side-padding: 3%;
  }
}

@media screen and (max-width: 1000px) {
  :root {
    --side-margin: 5%;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --side-padding: 5%;
    --font-size: 1.4rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    --side-padding: 10%;
  }
}

/* アニメーション用 */
: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);
}

.wow {}

.wow.animated {}

.opacity {
  opacity: 0;
}

.opacity.animated {
  opacity: 1;
}

.tf-left {
  transform: translateX(calc(-1 * var(--tf-margin)));
}

.tf-left.animated {
  transform: translateX(0);
}

.tf-right {
  transform: translateX(var(--tf-margin));
}

.tf-right.animated {
  transform: translateX(0);
}

.tf-top {
  transform: translateY(calc(-1 * var(--tf-margin)));
}

.tf-top.animated {
  transform: translateY(0);
}

.tf-bottom {
  transform: translateY(var(--tf-margin));
}

.tf-bottom.animated {
  transform: translateY(0);
}