@charset "utf-8";

/*----- logo_anime -----*/

header .ctt h1#logo
{
    animation: logo_anime 1s cubic-bezier(0,.44,.16,1) 0s 1 forwards;
    -webkit-animation: logo_anime 1s cubic-bezier(0,.44,.16,1) 0s 1 forwards;
}
/* animation */
@keyframes logo_anime {
	0% { transform: scale(.1, .1) translate(0,20px); opacity: 0;}
	100% { transform: scale(1, 1) translate(0,0); opacity: 1;}
}
@-webkit-keyframes logo_anime {
	0% { transform: scale(.1, .1) translate(0,20px); opacity: 0;}
	100% { transform: scale(1, 1) translate(0,0); opacity: 1;}
}





/*----- seal_anime PC -----*/
.seal_01
{
    animation: seal_01_anime 1.6s ease-out 0s 1 forwards;
    -webkit-animation: seal_01_anime 1.6s ease-out 0s 1 forwards;
}
@keyframes seal_01_anime {
	0% { transform: scale(.5, .5); opacity: 0;}
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7) rotate(10deg); }
	90% { transform: scale(1.1, 1.1) rotate(-3deg); } 
	95% { transform: scale(.9, .9) rotate(1deg); } 
	100% {transform: scale(1, 1); opacity: 1;}
}
@-webkit-keyframes seal_01_anime {
	0% { transform: scale(.5, .5); opacity: 0;}
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7) rotate(10deg); }
	90% { transform: scale(1.1, 1.1) rotate(-3deg); } 
	95% { transform: scale(.9, .9) rotate(1deg); } 
	100% {transform: scale(1, 1); opacity: 1;}
}
.seal_02
{
    animation: seal_02_anime 1.8s ease-out 0s 1 forwards;
    -webkit-animation: seal_02_anime 1.8s ease-out 0s 1 forwards;
}
@keyframes seal_02_anime {
	0% { transform: scale(.5, .5); opacity: 0;}
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7) rotate(10deg); }
	90% { transform: scale(1.1, 1.1) rotate(-3deg); } 
	95% { transform: scale(.9, .9) rotate(1deg); } 
	100% {transform: scale(1, 1); opacity: 1;}
}
@-webkit-keyframes seal_02_anime {
	0% { transform: scale(.5, .5); opacity: 0;}
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7) rotate(10deg); }
	90% { transform: scale(1.1, 1.1) rotate(-3deg); } 
	95% { transform: scale(.9, .9) rotate(1deg); } 
	100% {transform: scale(1, 1); opacity: 1;}
}


/*----- seal_anime SP -----*/
.seal_01_sp
{
    opacity: 0;
    animation: seal_01_anime_sp 1.8s ease-out 0s 1 forwards;
    -webkit-animation: seal_01_anime_sp 1.8s ease-out 0s 1 forwards;
}
@keyframes seal_01_anime_sp {
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7);}
	90% { transform: scale(1.1, 1.1);} 
	95% { transform: scale(.9, .9);} 
	100% {transform: scale(1, 1); opacity: 1;}
}
@-webkit-keyframes seal_01_anime_sp {
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7);}
	90% { transform: scale(1.1, 1.1);} 
	95% { transform: scale(.9, .9);} 
	100% {transform: scale(1, 1); opacity: 1;}
}
.seal_02_sp
{
    opacity: 0;
    animation: seal_02_anime_sp 2s ease-out 0s 1 forwards;
    -webkit-animation: seal_02_anime_sp 2s ease-out 0s 1 forwards;
}
@keyframes seal_02_anime_sp {
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7);}
	90% { transform: scale(1.1, 1.1);} 
	95% { transform: scale(.9, .9);} 
	100% {transform: scale(1, 1); opacity: 1;}
}
@-webkit-keyframes seal_02_anime_sp {
	50% { transform: scale(.5, .5); opacity: 0;}
	60% { transform: scale(1, 1); opacity: 1;}
	80% { transform: scale(.7, .7);}
	90% { transform: scale(1.1, 1.1);} 
	95% { transform: scale(.9, .9);} 
	100% {transform: scale(1, 1); opacity: 1;}
}


/*----- thumb_anime -----*/

#CAMPAIGN #cp_list .n01.is-show,
#CAMPAIGN #cp_list .n02.is-show,
#CAMPAIGN #cp_list .n03.is-show,
#CAMPAIGN #cp_list .n04.is-show,
#CAMPAIGN #cp_list .n05.is-show,
#CAMPAIGN #cp_list .n06.is-show,
#CAMPAIGN #cp_list .n07.is-show,
#CAMPAIGN #cp_list .n08.is-show,
#CAMPAIGN #cp_list .n09.is-show,
#CAMPAIGN #cp_list .n10.is-show,
#CAMPAIGN #cp_list .n11.is-show,
#CAMPAIGN #cp_list .n12.is-show
{
    animation: MV_anime_1 1.5s cubic-bezier(0,.44,.16,1) 0s 1 forwards;
    -webkit-animation: MV_anime_1 1.5s cubic-bezier(0,.44,.16,1) 0s 1 forwards;
}
@keyframes MV_anime_1 {
	0% { transform: scale(2, 2) rotate(-15deg); opacity: 0;}
	100% {transform: scale(1, 1) rotate(0deg); opacity: 1;}
}
@-webkit-keyframes MV_anime_1 {
	0% { transform: scale(2, 2) rotate(-15deg); opacity: 0;}
	100% {transform: scale(1, 1) rotate(0deg); opacity: 1;}
}