@charset "utf-8";


/*==================================================
シャッ（背景色が伸びて出現）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend{
    /**/ animation-name:bgextendAnimeBase;
    animation-duration:.1s;
    animation-fill-mode:forwards; 
    position: relative;
    overflow: hidden;
    opacity:0;
  }
  
  @keyframes bgextendAnimeBase{
    from {
      opacity:0;
    }
  
    to {
      opacity:1;  
  }
  }
  
  /*中の要素*/
  .bgappear{
    /**/ animation-name:bgextendAnimeSecond;
    animation-duration:1.5s;
    animation-delay: 0s;
    animation-fill-mode:forwards; 
    opacity: 1;
    mix-blend-mode: screen;
  }
  
  @keyframes bgextendAnimeSecond{
    0% {
    opacity: 0;
    }
    20% {
    opacity: 0.6;
      }
    100% {
    opacity: 1;
  }
  }
  
  /*左から*/
  .bgLRextend::before{
     animation-name:bgLRextendAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: #071f3c;/*伸びる背景色の設定*/
     /* background-color: #e63000;伸びる背景色の設定*/
	    mix-blend-mode:screen;
  }

  @keyframes bgLRextendAnime{
    0% {
      transform-origin:left;
      transform:scaleX(0);
    }
    40% {
      transform-origin:left;
      transform:scaleX(1);
    }
    40.001% {
      transform-origin:right;
    }
    100% {
      transform-origin:right;
      transform:scaleX(0);
    }
  }


  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  .bgappearTrigger,
  .bgUDextendTrigger,
  .bgDUextendTrigger,
  .bgRLextendTrigger,
  .bgLRextendTrigger{
      opacity: 0;
  }



  /*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: var(--blue-100);
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #252018;/*伸びる背景色の設定*/
	animation-name:PageAnime;
	animation-duration:0.8s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;

}

@keyframes PageAnime{
	0% {
		transform-origin:right;
		transform:scaleX(0);
	}
	50% {
		transform-origin:right;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:left;
	}
	100% {
		transform-origin:left;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/

#container{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.3s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}



/*========= スムーステキスト ===============*/


/* 滑らかに変形して出現 */
.smooth{
  animation-name:smoothAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
  　transform-origin: left;
  opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(8deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.smoothTrigger{
    opacity: 0;
}

/*========= END スムーステキスト ===============*/



/*==================================================
枠線が伸びて出現
===================================*/

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:var(--blue-100);/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:var(--blue-100);/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が1.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が1.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;
    }
  100%{width:100%;
}
}

@keyframes lineAnime2 {
  0% {height:0%;
  }
100%{height:100%;

}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}




/*==================================================
END 枠線が伸びて出現
===================================*/