@charset "utf-8";


/*========= ランダムに出現するテキスト ===============*/
.randomAnime {
	visibility: hidden;
}




/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeDownTrigger,
.smoothTrigger{
    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(12deg);
  opacity:0;
  }

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



/*========= スクロールタイムライン ===============*/
.timeline li{
    /*線の起点とするためrelativeを設定*/
    position: relative;
	list-style: none;
	padding:0 0 80px 18px;
}

.timeline dl{
	margin:0 0 20px 3em;
}


/*絶対配置で線を設定*/
.border-line {
	position: absolute;
	left:0.2em;
	top:0;
	width:2px;/*線の太さ*/
	height:0;/*はじめは高さを0に*/
	background: #999999;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li::after{
	content:'';
	position: absolute;
	top:0;
	left:0;
	width:10px;
	height: 10px;
	background:#999999;
	border-radius: 50%;
}


/*===========================================================*/
/* 流体シェイプ*/
/*===========================================================*/
.fluid {
    width:100%;
    height:100%;
    background: #FCF868; 
    animation: fluidrotate 30s ease 0s infinite;
}

@keyframes fluidrotate {  
	  
0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
}
14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
}
28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
}
42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
}
56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
}
70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
}
84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
}
	  
}