@charset "utf-8";
/****************
common
****************/
:root {
--nomal: "Zen Kaku Gothic New", sans-serif;
--flux: "Afacad Flux", sans-serif;
--color-black: #231815;
--color-gray: #707070;
--color-brown: #665652;


--space-huge: 100px;
--space-large:80px;
--space-lll: 60px;
--space-ll: 40px;
--space-l: 32px;
--space-mm: 24px;
--space-m: 16px;
--space-nomal: 8px;
--space-s: 4px;
--letterspace-l: .6rem;
--letterspace-m: .1rem;
--size-catename: 4.5rem;
--size-main: 1.6rem;
--size-double: 2rem;

--size-l: 1.3rem;
--size-m: 1.1rem;
--size-nomal: 1rem;
--size-s: 0.9rem;
}
.text--r {text-align: right;}

/**animation**/
@keyframes letter{
  0%   {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.1);
  }
  66%  {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255,255,255,0.9);
  }
  77%   { opacity: 1;  }
  100% {
    opacity:0.7;
    text-shadow: 0px 0px 20px rgba(255,255,255,0.0);
  }
}
@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes letter-glow{
  0%   {
    opacity: 0;
    text-shadow: 0px 0px 1px rgba(255,255,255,0.1);
  }
  66%  {
    opacity: 1;
    text-shadow: 0px 0px 20px rgba(255,255,255,0.9);
  }
  77%   { opacity: 1;  }
  100% {
    opacity:0.7;
    text-shadow: 0px 0px 20px rgba(255,255,255,0.0);
  }
}