@charset "utf-8";
/* ------------------------------------------------------
	アニメーション用CSS
------------------------------------------------------ */

.sa {	transition: transform 1.5s ease, opacity 1.5s ease, background .5s ease, border .5s ease;}

.sa--show { opacity: 0;}
.sa--show.show { opacity: 1; transform: none;}


.blur { opacity: 0; filter: blur(50px); transition: filter 1.5s ease;}
.blur.show { opacity: 1; filter: blur(0);	transform: none;}


.sa.left { opacity: 1; position: relative; transition: none;}


.sa--slideText { overflow: hidden;}
.sa--slideText div { display: inline-block; transition: transform 2s ease;}
.sa--slideText.show div { transform: translateX(0) !important;}
.sa--slideText .sa-outer { overflow: hidden; transform: translateX(-100%);}
.sa--slideText .sa-inner { transform: translateX(100%);}



/* 下から上 */
.sa--showimg { position: relative;}
.sa--showimg::before {
	content: ''; display: block; width: calc(100% + 1px); height: calc(100% + 1px);
	position: absolute; top: -1px; left: -1px; transition: height .9s cubic-bezier(1,0.01,0.45,0.99);
}
.sa--showimg.show::before { height: 0;}


/* 右から左 */

.sa--showimg-left { position: relative;}
.sa--showimg-left::before {
	content: ''; display: block; width: calc(100% + 1px); height: calc(100% + 1px);
	position: absolute; top: -1px; left: -1px; transition: width .9s cubic-bezier(1,0.01,0.45,0.99);
}
.sa--showimg-left.show::before { width: 0;}



/* 左から右 */
.sa--showimg-right { position: relative;}
.sa--showimg-right::before {
	content: ''; display: block; width: calc(100% + 1px); height: calc(100% + 1px);
	position: absolute; top: -1px; right: -1px; transition: width .9s cubic-bezier(1,0.01,0.45,0.99);
}

.sa--showimg-right.show::before { width: 0;}



.sa--lr { transform: translate(-100px, 0);}
.sa--rl { transform: translate(100px, 0);}
.sa--up { transform: translate(0, 100px);}
.sa--down { transform: translate(0, -100px);}
.sa--scaleUp { transform: scale(.5);}
.sa--scaleDown { transform: scale(1.5);}
.sa--rotateL { transform: rotate(180deg);}
.sa--rotateR { transform: rotate(-180deg);}


@media screen and (max-width: 600px) {
	.sa {	transition: transform 1s ease, opacity 1s ease, background .5s ease, border .5s ease;}

}