@charset "UTF-8";


.randomAnime02,
.randomAnime {
	visibility: hidden;
}


.fadeUpTrigger{
	opacity: 0;
}
.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
from {
    opacity: 0;
    transform: translateY(50px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.fadeImg {
    animation-name: fadeUpAnimeImg;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}
@keyframes fadeUpAnimeImg{
from {
    opacity: 0;
    transform: translateY(-50px) rotate(10deg);
}
to {
    opacity: 1;
    transform: translateY(0) rotate(0);
}
}






/*　画像の拡大　*/

.zoomIn img{
	transform: scale(1);
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
}

.zoomIn a:hover img{/*hoverした時の変化*/
	transform: scale(1.2);/*拡大の値を変更したい場合はこの数値を変更*/
}

/*　画像のマスク　*/

.mask{
    display: block;
    line-height: 0;/*行の高さを0にする*/
    overflow: hidden;/*拡大してはみ出る要素を隠す*/
}



.zoom {
	overflow: hidden;
}

.zoom img {
	width: 100%;
	height: auto;
	transform: scale(0.7)
}
	.zoom.is-show img {
		width: 100%;
		height: auto;
		animation: animationZoom1 3s ease-in-out forwards;
	}
@keyframes animationZoom1 {
	0% { transform: scale(0.7)}
	100% { transform: scale(1)}
}




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