/*--------------------------
コンテンツフェード
--------------------------*/

.common.effect-fade {
opacity: 0;
  transform: translate(0, 50px);
  transition: all 2000ms;
}
.common.effect-fade.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}

/*--------------------------
背景の円
--------------------------*/
.circle.effect-fade {
opacity : 0;
transition: 1s;
transition-delay: 0.4s;
}
.circle.effect-fade.effect-scroll {
opacity : 1;
animation: pop 0.8s ease-in-out;
animation-delay: 0.4s;
}
@keyframes pop {
  0%   { transform: scale(0.2, 0.2)  }
  100% { transform: scale(1.0, 1.0)  }
}

.circle_top01.effect-fade {
opacity : 1;
animation: pop_top 0.8s ease-in-out,
pop_topfade 2s ease-in-out;
}
@keyframes pop_top{
  0%   {transform: scale(0.2, 0.2) }
  100% {transform: scale(1.0, 1.0)  }
}
@keyframes pop_topfade {
  0%   {opacity: 0; }
  100% {opacity: 1; }
}



/*--------------------------
アイコンの回転
--------------------------*/
.icn.anime img{
  animation:10s linear infinite rotation1;
}
@keyframes rotation1{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}






/*--------------------------
帯のロールオン（不使用）
--------------------------*/
h2 span{
	display:inline-block;
    padding:10px 30px;
    text-decoration: none;
    color: #fff;

    position: relative;
}

h2.effect-fade span:after {
	content: '';
    /*絶対配置で線の位置を決める*/
	position: absolute;
	z-index: -1;
	bottom: 0;
	left: 0;
    /*背景の形状*/
	width: 0;
	height:100%;
	background:#0481A2;

}

h2.effect-fade:hover span:after{
	animation: box-animation 1.2s;
  animation-timing-function:ease;
  animation-delay: 0.5s;
  animation-fill-mode:forwards;
}

h2.effect-fade.effect-scroll:hover span{
	
}

@keyframes box-animation{
  0%{width: 0%;}
  100%{width: 100%;}
}