@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*---------------------------------------*/
/* アニメーション */
/*---------------------------------------*/
.anime.slide{
position:relative;
}
/* スライドインコンテンツ */
.slideIn{
position:relative;
padding:0;
overflow:hidden;
}
.slideIn:after{
position:absolute;
top:-25%;
right:-25%;
width:150%;
height:150%;
background:#fff;
z-index:100;
display:inline-block;
opacity:1;
content:"";
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-webkit-transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
-moz-transition: all  0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
-o-transition: all  0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.2s;
}
.slideIn.leftSlide:after{
left:-25%;
}
.slideIn.bottomSlide:after{
bottom:-25%;
top:auto;
}
.slideIn.animation:after{
width:0;
}
.slideIn.bottomSlide.animation:after{
width:150%;
height:0%;
}
.slideIn:before{
position:absolute;
top:-25%;
right:-25%;
width:150%;
height:150%;
background:#f5f5f5;
z-index:100;
display:inline-block;
opacity:1;
content:"";
transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-webkit-transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
-moz-transition: all  0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
-o-transition: all  0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
transition: all 0.9s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
}
.slideIn.blue:before{
background:#1aa2e6;
}
.slideIn.leftSlide:before{
left:-25%;
}
.slideIn.bottomSlide:before{
bottom:-25%;
top:auto;
}
.slideIn.animation:before{
width:0;
}
.slideIn.bottomSlide.animation:before{
width:150%;
height:0%;
}
/* 画像スライドイン */
.slideIn.img{
background:#f5f5f5;
-webkit-transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;
-moz-transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;
-o-transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;
transition: all 0s cubic-bezier(0.075, 0.82, 0.165, 1) 1.6s;
}
.slideIn.animation.img{
background:none;
}
.slideIn img,
.slideIn .slideBg{
margin-left:-30px;
-webkit-transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
-moz-transition: all  1.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
-o-transition: all  1.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
transition: all 1.2s cubic-bezier(0.075, 0.82, 0.165, 1) 0.9s;
}
.slideIn.animation img,
.slideIn.animation .slideBg{
margin-left:0;
}
/* フェードイン */
.fadeIn{
opacity:0;
}
.animation.fadeIn{
opacity:1;
-webkit-transition: all 1.5s ease 0.5s;
-moz-transition: all 1.5s ease 0.5s;
-o-transition: all 1.5s ease 0.5s;
transition: all 1.5s ease 0.5s;
}
.animation.fadeIn.late{
opacity:1;
-webkit-transition: all 2.5s ease 0.8s;
-moz-transition: all 2.5s ease 0.8s;
-o-transition: all 2.5s ease 0.8s;
transition: all 2.5s ease 0.8s;
}
.fadeIn.left{
transform: translate(-50px,0);
}
.animation.fadeIn.left{
transform: translate(0,0);
}
.fadeIn.right{
transform: translate(50px,0);
}
.animation.fadeIn.right{
transform: translate(0,0);
}
.fadeIn.top{
transform: translate(0,-50px);
}
.animation.fadeIn.top{
transform: translate(0,0);
}
.fadeIn.bottom{
transform: translate(0,50px);
}
.animation.fadeIn.bottom{
transform: translate(0,0);
}
/*---------------------------------------*/
/* 個別記述 */
/*---------------------------------------*/
#loading .concept span{
transform: translate(0,20px);
opacity:0;
-webkit-filter: blur(0);
filter: blur(0);
display:inline-block;
}
#loading.animation .concept span:first-child{
opacity:1;
transform: translate(0,0);
-webkit-filter: blur(0);
filter: blur(0);
-webkit-transition: all 1s ease 4.2s;
-moz-transition: all 1s ease 4.2s;
-o-transition: all 1s ease 4.2s;
transition: all 1s ease 4.2s;
}
#loading.animation .concept span:nth-child(2){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.25s;
-moz-transition: all 1s ease 4.25s;
-o-transition: all 1s ease 4.25s;
transition: all 1s ease 4.25s;
}
#loading.animation .concept span:nth-child(3){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.3s;
-moz-transition: all 1s ease 4.3s;
-o-transition: all 1s ease 4.3s;
transition: all 1s ease 4.3s;
}
#loading.animation .concept span:nth-child(4){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.35s;
-moz-transition: all 1s ease 4.35s;
-o-transition: all 1s ease 4.35s;
transition: all 1s ease 4.35s;
}
#loading.animation .concept span:nth-child(5){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.4s;
-moz-transition: all 1s ease 4.4s;
-o-transition: all 1s ease 4.4s;
transition: all 1s ease 4.4s;
}
#loading.animation .concept span:nth-child(6){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.45s;
-moz-transition: all 1s ease 4.45s;
-o-transition: all 1s ease 4.45s;
transition: all 1s ease 4.45s;
}
#loading.animation .concept span:nth-child(7){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.5s;
-moz-transition: all 1s ease 4.5s;
-o-transition: all 1s ease 4.5s;
transition: all 1s ease 4.5s;
}
#loading.animation .concept span:nth-child(8){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.55s;
-moz-transition: all 1s ease 4.55s;
-o-transition: all 1s ease 4.55s;
transition: all 1s ease 4.55s;
}
#loading.animation .concept span:nth-child(9){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.6s;
-moz-transition: all 1s ease 4.6s;
-o-transition: all 1s ease 4.6s;
transition: all 1s ease 4.6s;
}
#loading.animation .concept span:nth-child(10){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.65s;
-moz-transition: all 1s ease 4.65s;
-o-transition: all 1s ease 4.65s;
transition: all 1s ease 4.65s;
}
#loading.animation .concept span:nth-child(11){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.7s;
-moz-transition: all 1s ease 4.7s;
-o-transition: all 1s ease 4.7s;
transition: all 1s ease 4.7s;
}
#loading.animation .concept span:nth-child(12){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.75s;
-moz-transition: all 1s ease 4.75s;
-o-transition: all 1s ease 4.75s;
transition: all 1s ease 4.75s;
}
#loading.animation .concept span:nth-child(13){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.8s;
-moz-transition: all 1s ease 4.8s;
-o-transition: all 1s ease 4.8s;
transition: all 1s ease 4.8s;
}
#loading.animation .concept span:nth-child(14){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.85s;
-moz-transition: all 1s ease 4.85s;
-o-transition: all 1s ease 4.85s;
transition: all 1s ease 4.85s;
}
#loading.animation .concept span:nth-child(15){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.9s;
-moz-transition: all 1s ease 4.9s;
-o-transition: all 1s ease 4.9s;
transition: all 1s ease 4.9s;
}
#loading.animation .concept span:nth-child(16){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 4.95s;
-moz-transition: all 1s ease 4.95s;
-o-transition: all 1s ease 4.95s;
transition: all 1s ease 4.95s;
}
#loading.animation .concept span:nth-child(17){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 5s;
-moz-transition: all 1s ease 5s;
-o-transition: all 1s ease 5s;
transition: all 1s ease 5s;
}
#loading.animation .concept span:nth-child(18){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 5.05s;
-moz-transition: all 1s ease 5.05s;
-o-transition: all 1s ease 5.05s;
transition: all 1s ease 5.05s;
}
#loading.animation .concept span:nth-child(19){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 5.1s;
-moz-transition: all 1s ease 5.1s;
-o-transition: all 1s ease 5.1s;
transition: all 1s ease 5.1s;
}
#loading.animation .concept span:nth-child(20){
opacity:1;
transform: translate(0,0);
-webkit-filter:none;
filter: none;
-webkit-transition: all 1s ease 5.15s;
-moz-transition: all 1s ease 5.15s;
-o-transition: all 1s ease 5.15s;
transition: all 1s ease 5.15s;
}
#itemArea .itemList .img.animation.fadeIn.late{
opacity:1;
-webkit-transition: all 2s ease 2s;
-moz-transition: all 2s ease 2s;
-o-transition: all 2s ease 2s;
transition: all 2s ease 2s;
}