@charset "UTF-8";

.reflection-img{
width       :100%;
height      :auto;
position    :relative;
overflow    :hidden;
margin: 0px auto;
border-radius: 40px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
z-index: 1; /*角丸マスクをかける*/
}
.reflection-img02{
width       :100%;
height      :auto;
position    :relative;
overflow    :hidden;
margin: 0px auto;
}

.reflection {
width       :50px;
height      :100%;
position    :absolute;
top         :0px;
left        :0px;
background-color: #fff;
opacity     :0;
transform: rotate(45deg);
animation: reflection 3s ease-in-out infinite;
-webkit-transform: rotate(45deg);
-webkit-animation: reflection 3s ease-in-out infinite;
-moz-transform: rotate(45deg);
-moz-animation: reflection 3s ease-in-out infinite;
-ms-transform: rotate(45deg);
-ms-animation: reflection 3s ease-in-out infinite;
-o-transform: rotate(45deg);
-o-animation: reflection 3s ease-in-out infinite;
}
@keyframes reflection {
0% { transform: scale(0) rotate(45deg); opacity: 0; }
80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { transform: scale(4) rotate(45deg); opacity: 0.8; }
100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 0.8; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -moz-transform: scale(4) rotate(45deg); opacity: 0.8; }
100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -ms-transform: scale(4) rotate(45deg); opacity: 0.8; }
100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -o-transform: scale(4) rotate(45deg); opacity: 0.8; }
100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}