@charset "utf-8";
/* 基本色 */
:root{
	--main-color: rgb(32, 68, 149);
	--accent-color: rgb(100, 149, 237);
	--accent-color: rgb(255, 201, 60);
	--accent-color: rgb(92, 192, 239);
}


/* ボタン設定 */
.entry img:hover{
	opacity:0.5;
	cursor: pointer;
	animation: big 0.1s;
	animation-fill-mode: forwards;
}
.entry img:active{
	position: relative;
	top: 3px;
	animation: small 0.1s;
	animation-fill-mode: forwards;
}
@keyframes big 
{
  0% {transform: scale(1); }
  100% {transform: scale(1.1);}
}

@keyframes small 
{
  100% {transform: scale(0.9);}
}
/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
	position: absolute;
	top:40%;
	right:35%;
    /*矢印の動き1秒かけて永遠にループ*/
	animation: arrowmove 1s ease-in-out infinite;
	z-index: 1;
	transform: translate(-50%,-20%);
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
	position: absolute;
	left:-20px;
	bottom:8px;
    /*テキストの形状*/
	color: rgba(96, 117, 167,.8);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 21px;
    background: rgba(96, 117, 167,.8);
    transform: skewX(-31deg);
}

.scrolldown4:after{
	content:"";
    /*描画位置*/
	position: absolute;
	bottom:0;
	right:0;
    /*矢印の形状*/
	width:1px;
	height: 51px;
	background: rgba(96, 117, 167,.8);
}
/* cont1 */
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ 
	animation:text_anime_on 2.5s ease-out forwards; 
}
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

/*----- 矢印設定 -----*/
#cont1 i,#cont4 i{
	color: #fff;

}
#cont3 i{
	color: #5CC0EF;
}
.fadeDownTrigger{
    opacity: 0;
}
/* 上から */

.fadeDown{
	animation-name:fadeDownAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeDownAnime{
	  from {
		opacity: 0;
	  transform: translateY(-100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}
/* ----------------------------- */

/* headerのTop画像部分 */
/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:2s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

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

/*左から*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	content: "";
	position: absolute;
	width: 30%;
	height: 50%;
	background-color: rgba(100, 149, 237, 0.4);/*伸びる背景色の設定*/
	margin-top: 90px;
  }
  @keyframes bgLRextendAnime{
	0% {
	  transform-origin:left;
	  transform:scaleX(0);
	}
	50% {
	  transform-origin:left;
	  transform:scaleX(1);
	}
	50.001% {
	  transform-origin:right;
	}
	100% {
	  transform-origin:right;
	  transform:scaleX(0);
	}
  }
  
  /*右から*/
  .bgRLextend::before{
	animation-name:bgRLextendAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	  content: "";
	  position: absolute;
	  width: 30%;
	  height: 50%;
	  background-color: rgba(100, 149, 237,.4);/*伸びる背景色の設定*/
	  margin-top: 30px;
  }
  @keyframes bgRLextendAnime{
	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);
	}
  }


/* ヘッダー&フッターP部分 */
/*========= 1文字ずつ出現させるためのCSS ===============*/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1.9s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}

/* フッターp部分 */
/*========= 光りながら出現させるためのCSS ===============*/
.glowAnime span{opacity: 0;}

/*アニメーションで透過を0から1に変化させtext-shadowをつける*/
.glowAnime.glow span{ animation:glow_anime_on 3s ease-out forwards; }

@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}
/* -------------------------------------------- */




/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgRLextendTrigger{
    opacity: 0;
}
/* -------------------------------------------- */
/* aのtittle部分 */
.title {
	display: flex;
	overflow: hidden;
  }

  .title span {
	display: block;
	transform: translate(0, 105%);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
  }
  
  .title.-visible span {
	transform: translate(0, 0);
  }
  
  .title span:nth-child(2) {
	transition-delay: 0.06s;
  }
  .title span:nth-child(3) {
	transition-delay: 0.12s;
  }
  .title span:nth-child(4) {
	transition-delay: 0.18s;
  }
  .title span:nth-child(5) {
	transition-delay: 0.24s;
  }
  .title span:nth-child(6) {
	transition-delay: 0.30s;
  }
  .title span:nth-child(7) {
	transition-delay: 0.36s;
  }  

/* h3の設定 */
/*==================================================
ボンッ
===================================*/

/* 拡大 */
.zoomIn{
	animation-name:zoomInAnime;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
  }
  
  @keyframes zoomInAnime{
	from {
	transform: scale(0.6);
	opacity: 0;
	}
  
	to {
	  transform: scale(1);
	opacity: 1;
	}
  }
/* -------------------------------------------- */

/* cont2メリットの設定 */
/*==================================================
パタッ
===================================*/
/* 左上へ */
.flipLeftTop{
	animation-name:flipLeftTopAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes flipLeftTopAnime{
	  from {
	   transform: translate(-20px,80px) rotate(-15deg);
	  opacity: 0;
	  }
	
	  to {
	   transform: translate(0,0) rotate(0deg);
	  opacity: 1;
	  }
	}
/* 右上へ */
.flipRightTop{
	animation-name:flipRightTopAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes flipRightTopAnime{
	  from {
	   transform: translate(-20px,80px) rotate(25deg);
	   opacity: 0;
	  }
	
	  to {
	   transform: translate(0,1) rotate(0deg);
	  opacity: 1;
	  }
	}

/* cont3 Voiceの設定 */
.fadeInTrigger{
	opacity: 0;
}
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeInAnime{
	  from {
		opacity: 0;
	  }
	
	  to {
		opacity: 1;
	  }
	}
/* アニメーションスタートの遅延時間を決めるCSS*/
.delay-time05{  
	animation-delay: 0.5s;
  }
.delay-time1{  
	animation-delay: 0.8s;
  }

.delay-time2{  
	animation-delay: 0.9s;
  }


/* cont4 tableの設定 */
/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
  }
  
  @keyframes blurAnime{
	from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
	}
  
	to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
	}
  }
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .blurTrigger{
	  opacity: 0;
  }


/* スマホ対応 */
@media (max-width:768px){

/*スクロールダウン全体の場所*/
.scrolldown4{
	top:-30%;
	right:15%;
}

/* aのTop画像部分 */
/*左から*/
.bgLRextend::before{
	width: 80%;
  }
 /*右から*/
 .bgRLextend::before{
	width: 80%;
  }
}


/* *{border: 1px solid #000;} */