/*ホバーで画像拡大*/

.imagebox{
  overflow: hidden;
}
.imagebox_img{
  transition-duration: 0.3s;
}
.imagebox_img:hover{
  transform: scale(1.2);
  transition-duration: 0.3s;
}

/* -------------------------------------------------------------------------*/

/*スクロールでボックスを時差表示*/

.ani_fadein .fadein_box {
	list-style: none;
	position: relative;
	opacity: 0; 	/* 最初は非表示 */
	bottom: -30px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 2秒かけてアニメーション */
}

/* スクロールした時に追加されるclass */
.ani_fadein .fadein_box.fadein {
	opacity: 1;
	bottom: 0;
}

/*スクロールでボックスを時差表示*/

.ani_fadein2 .fadein_box {
	list-style: none;
	position: relative;
	opacity: 0; 	/* 最初は非表示 */
	bottom: -30px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 2秒かけてアニメーション */
}

/* スクロールした時に追加されるclass */
.ani_fadein2 .fadein_box.fadein2 {
	opacity: 1;
	bottom: 0;
}

/*スクロールでボックスを時差表示*/

.ani_fadein3 .fadein_box {
	list-style: none;
	position: relative;
	opacity: 0; 	/* 最初は非表示 */
	bottom: -30px; 	/* 下から上に移動したいので最初はマイナス値 */
	transition: 1s; /* 2秒かけてアニメーション */
}

/* スクロールした時に追加されるclass */
.ani_fadein3 .fadein_box.fadein3 {
	opacity: 1;
	bottom: 0;
}


/* -------------------------------------------------------------------------*/


/*フェードインアニメ*/
/*左から右にフェードイン*/
.left-to-right {
  opacity: 0.1;
  transform: translateX(-20px);
  transition: all 1s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}

/*下から上にフェードイン*/
.down-to-top {
  opacity: 0.1;
  transform: translateY(20px);
  transition: all 1s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}


/*右から左にフェードイン*/
.right-to-left {
  opacity: 0.1;
  transform: translateX(20px);
  transition: all 1s;
}
.right-to-left.scrollin {
  opacity: 1;
  transform: translateX(0);
}