/*アニメーションの@keyframes用のCSSコードを書く（ここに書くとAMP用で約500KBまで記入できます）*/



/* ふわっとエフェクト */
.effect-fade {
	opacity : 0;
	transform : translate(0, 25px);
	transition : all 1000ms;
}

.effect-fade.effect-scroll {
	opacity : 1;
	transform : translate(0, 0);
}



/* 下向きにフワッとうごく２つの矢印 */
.top-page-icon-arrow-container {
    width: 38px;
    height: 46px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 1;
    margin-left: -19px;
    -webkit-animation: top-page-arrow-bounce 1.4s infinite;
    animation: top-page-arrow-bounce 1.4s infinite;
}
/*768px以上*/
@media screen and (min-width: 768px) {
	.top-page-icon-arrow-container {
	bottom: 40px;
	}
}

.top-page-icon-arrow-container_item-orange,
.top-page-icon-arrow-container_item-red {
    display: block;
    margin: 0 auto;
    position: relative;
    -webkit-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
    -webkit-animation: top-page-arrow-opacity 1.4s infinite linear;
    animation: top-page-arrow-opacity 1.4s infinite linear;
}
.top-page-icon-arrow-container_item-orange::before,
.top-page-icon-arrow-container_item-red::before {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    top: 6px;
    left: 6px;
}
.top-page-icon-arrow-container_item-orange:before {
    content: '';
    display: block;
    border-top: solid 7px #ed7700;
    border-right: solid 7px #ed7700;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -13.5px;
    opacity: 1;
}
.top-page-icon-arrow-container_item-red:before {
    content: '';
    display: block;
    border-top: solid 7px #cf1126;
    border-right: solid 7px #cf1126;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    margin-top: -13.5px;
    opacity: 1;
}
.top-page-icon-arrow-container_item-red {
    margin-top: 30px;
    animation-direction: reverse;
}
@keyframes top-page-arrow-bounce{
	0% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	}
	10% {
	-webkit-transform: translateY(2.2px);
	transform: translateY(2.2px);
	}
	20% {
	-webkit-transform: translateY(4.4px);
	transform: translateY(4.4px);
	}
	30% {
	-webkit-transform: translateY(6.6px);
	transform: translateY(6.6px);
	}
	40% {
	-webkit-transform: translateY(8.8px);
	transform: translateY(8.8px);
	}
	50% {
	-webkit-transform: translateY(11px);
	transform: translateY(11px);
	}
	60% {
	-webkit-transform: translateY(13.2px);
	transform: translateY(13.2px);
	}
	70% {
	-webkit-transform: translateY(15.4px);
	transform: translateY(15.4px);
	}
	80% {
	-webkit-transform: translateY(17.6px);
	transform: translateY(17.6px);
	}
	90% {
	-webkit-transform: translateY(19.8px);
	transform: translateY(19.8px);
	}
	100% {
	-webkit-transform: translateY(22px);
	transform: translateY(22px);
	}
}
@keyframes top-page-arrow-opacity{
	0% {
	opacity: 0;
	}
	30% {
	opacity: 0.5;
	}
	100% {
	opacity: 1;
	}
}