﻿#change_box_and {
position: relative;
height: 300px;
width: 100%;
}

#change_box_bay {
position: relative;
height: 480px;
width: 100%;
}

#change_box_koyomi {
position: relative;
height: 420px;
width: 100%;
}

#change {
position: absolute;
top: 0px;
left: 50%;
margin-left: -340px;
z-index: 5;
}

#change_next {
position: absolute;
top: 0px;
left: 50%;
margin-left: -340px;
}

.fadeOut{
-webkit-animation: Out 1s;
-moz-animation: Out 1s;
-o-animation: Out 1s;
animation: Out 1s;
}

.fadeIn{
-webkit-animation: In 1s;
-moz-animation: In 1s;
-o-animation: In 1s;
animation: In 1s;
}

@-webkit-keyframes Out { 0% {opacity: 1;} 100% {opacity: 0;} }
@-moz-keyframes Out { 0% {opacity: 1;} 100% {opacity: 0;} }
@-o-keyframes Out { 0% {opacity: 1;} 100% {opacity: 0;} }


@keyframes Out {
0% { filter: alpha(opacity=100); opacity: 1; }
100% { filter: alpha(opacity=0); opacity: 0; }
}

@-webkit-keyframes In { 0% {opacity: 0;} 100% {opacity: 1;} }
@-moz-keyframes In { 0% {opacity: 0;} 100% {opacity: 1;} }
@-o-keyframes In { 0% {opacity: 0;} 100% {opacity: 1;} }

@keyframes In {
0% { filter: alpha(opacity=0); opacity: 0; }
100% { filter: alpha(opacity=100); opacity: 1; }
}