@charset "utf-8";
/* CSS Document */

/*　スクロールマウス　*/
@media screen and (min-width: 350px) { 
.mouse_icon {
	position:          absolute;
 bottom:            10px;
 margin-left:       auto;
 margin-right:      auto;
 display:           inline-block;
 -webkit-transform: translate(0, -50%);
 transform:         translate(0, -50%);
 font-size:         0.4rem;
 color:             #CCC;
 text-decoration:   none;
 padding-top:       45px;
 z-index:           99999999;
}
}
@media screen and (min-width: 700px) {
	.mouse_icon {
	position:          absolute;
 bottom:            20px;
 margin-left:       auto;
 margin-right:      auto;
 display:           inline-block;
 -webkit-transform: translate(0, -50%);
 transform:         translate(0, -50%);
 font-size:         0.4rem;
 color:             #CCC;
 text-decoration:   none;
 padding-top:       45px;
}
}
.mouse_icon span {
	position:      absolute;
 top:           0;
 left:          50%;
 width:         24px;
 height:        40px;
 margin-left:   -12px;
 /*border:        2px solid #CCC;*/
 /*border-radius: 50px;*/
 box-sizing:    border-box;
}
.mouse_icon span::before {
	position:          absolute;
 top:               10px;
 left:              50%;
 content:           '';
 width:             4px;
 height:            4px;
 margin-left:       -2px;
 background-color:  #fff;
 border-radius:     100%;
 -webkit-animation: sdb 2s infinite;
 animation:         sdb 2s infinite;
 box-sizing:        border-box;
}
@-webkit-keyframes sdb {
 0% {
 -webkit-transform: translate(0, 0);
 opacity: 0;
}
 40% {
 opacity: 1;
}
 80% {
 -webkit-transform: translate(0, 20px);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}
@keyframes sdb {
 0% {
 transform: translate(0, 0);
 opacity: 0;
}
 40% {
 opacity: 1;
}
 80% {
 transform: translate(0, 20px);
 opacity: 0;
}
 100% {
 opacity: 0;
}
}