@charset "utf-8";
/* CSS Document */

/* ======================================
           loading animation
=======================================*/

/* 2回目はなくす */

/* Loading背景画面設定　*/
/*#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background:linear-gradient(0deg, #FBFEFD 0%, #D9F0E8 50%);
  text-align:center;
  display: none;
}

#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  color: #aaa;
}

#splash_logo img {
  width:60px;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 10%);
  width: 120px;
  text-align: center;
  
}

.spinner > div {
  width: 5px;
  height: 5px;
  background-color: #8F8F8F;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner > span {
  font-size: 15px;
  color: #434037;
  display: inline-block;
  -webkit-animation: sk-textdelay 1.4s infinite ease-in-out both;
  animation: sk-textdelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); }
  40% { -webkit-transform: scale(1.0); }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); }
  40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}
@-webkit-keyframes sk-textdelay {
  0%, 80%, 100% { -webkit-transform: scale(0.9); }
  40% { -webkit-transform: scale(1.0); }
}
@keyframes sk-textdelay {
  0%, 80%, 100% { -webkit-transform: scale(0.9); transform: scale(0.9); }
  40% { -webkit-transform: scale(1.0); transform: scale(1.0); }
}
*/


/* ======================================
           text animation 1
=======================================*/

.text--line { font-size: 10rem; line-height: 10rem; font-family: 'Roboto Condensed', sans-serif; font-weight: 600; letter-spacing: -0,002em;}
.title-eng{ width: 90%; max-width: 1200px;}
svg { width: 100%;}
.text-copy2 { fill: none; stroke: rgba(255,255,255,1); stroke-width: 2px;}
.text-copy { fill: #fff; stroke: white; stroke-dasharray: 7% 10%; stroke-width: 2px; -webkit-animation: stroke-offset 20s infinite linear; animation: stroke-offset 20s infinite linear;}
.text-copy:nth-child(1) { stroke: #006230; stroke-dashoffset: 7%;}
.text-copy:nth-child(2) { stroke: #7E2626; stroke-dashoffset: 14%;}
.text-copy:nth-child(3) { stroke: #006230; stroke-dashoffset: 21%;}
.text-copy:nth-child(4) { stroke: #7E2626; stroke-dashoffset: 28%;}
.text-copy:nth-child(5) { stroke: #006230; stroke-dashoffset: 40%;}
@-webkit-keyframes stroke-offset {
  25% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%;}
  75% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%;}
}
@keyframes stroke-offset {
  25% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%;}
  75% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%;}
}
@media screen and (max-width: 719px) {
  .text-copy2 { stroke-width: 0px; stroke: rgba(255,255,255,0.00);}
  .text-copy { stroke-width: 0px; stroke: rgba(255,255,255,0.00);}
}



/* ======================================
           text animation 2
=======================================*/

.title_en2 { font-family: 'Roboto Condensed', sans-serif; font-weight: 600; letter-spacing: -0,002em; font-size: 8vw;/* font-size: 15rem;*/ line-height: 1.0; color: #fff;}
.title_en2 span { color: transparent; animation: text__blur 8s ease-out infinite; -webkit-animation: text__blur 8s ease-out infinite;}
.title_en2 span:nth-child(1) { animation-delay: 0.1s; -webkit-animation-delay: 0.1s;}
.title_en2 span:nth-child(2) { animation-delay: 0.2s; -webkit-animation-delay: 0.2s;}
.title_en2 span:nth-child(3) { animation-delay: 0.3s; -webkit-animation-delay: 0.3s;}
.title_en2 span:nth-child(4) { animation-delay: 0.4s; -webkit-animation-delay: 0.4s;}
.title_en2 span:nth-child(5) { animation-delay: 0.5s; -webkit-animation-delay: 0.5s;}
.title_en2 span:nth-child(6) { animation-delay: 0.6s; -webkit-animation-delay: 0.6s;}
.title_en2 span:nth-child(7) { animation-delay: 0.7s; -webkit-animation-delay: 0.7s;}
.title_en2 span:nth-child(8) { animation-delay: 0.8s; -webkit-animation-delay: 0.8s;}
.title_en2 span:nth-child(9) { animation-delay: 0.9s; -webkit-animation-delay: 0.9s;}
.title_en2 span:nth-child(10) { animation-delay: 1.0s; -webkit-animation-delay: 1.0s;}
.title_en2 span:nth-child(11) { animation-delay: 1.1s; -webkit-animation-delay: 1.1s;}
.title_en2 span:nth-child(12) { animation-delay: 1.2s; -webkit-animation-delay: 1.2s;}
.title_en2 span:nth-child(13) { animation-delay: 1.3s; -webkit-animation-delay: 1.3s;}
.title_en2 span:nth-child(14) { animation-delay: 1.4s; -webkit-animation-delay: 1.4s;}
.title_en2 span:nth-child(15) { animation-delay: 1.5s; -webkit-animation-delay: 1.5s;}
.title_en2 span:nth-child(16) { animation-delay: 1.6s; -webkit-animation-delay: 1.6s;}
.title_en2 span:nth-child(17) { animation-delay: 1.7s; -webkit-animation-delay: 1.7s;}
.title_en2 span:nth-child(18) { animation-delay: 1.8s; -webkit-animation-delay: 1.8s;}
.title_en2 span:nth-child(19) { animation-delay: 1.9s; -webkit-animation-delay: 1.9s;}
.title_en2 span:nth-child(20) { animation-delay: 2.0s; -webkit-animation-delay: 2.0s;}
@keyframes text__blur {
  0%    {text-shadow:  0 0 100px #fff; opacity:0;}
  2%    {text-shadow:  0 0 90px #fff;}
  3%    {opacity: 1;}
  10%   {text-shadow:  0 0 0px #fff;}
  90%   {text-shadow:  0 0 0px #fff;}
  97%   {opacity: 1;}
  98%   {text-shadow:  0 0 90px #fff;}
  100%  {text-shadow:  0 0 100px #fff; opacity:0;}
}
@media screen and (min-width: 1920px) {
  .title_en2 { font-size: 15rem;}
}
@media screen and (max-width: 1200px) {
  .title_en2 { font-size: 10vw;}
}




/*==================================================
ふわっ
===================================*/


/* fadeUp */

.fadeUp{ animation-name:fadeUpAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(20vh); filter: blur(10px);}
  50%{ opacity: 0.8; filter: blur(0);}
  to { opacity: 1; transform: translateY(0); filter: blur(0);}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeUpTrigger{ opacity: 0;}
@media screen and (max-width: 799px) {
  @keyframes fadeUpAnime{
  from { opacity: 0; transform: translateY(10vh); filter: blur(6px);}
  50%{ opacity: 0.8; filter: blur(0);}
  to { opacity: 1; transform: translateY(0); filter: blur(0);}
  }
}