@-webkit-keyframes down {
  0% {
    opacity: 1;
      -webkit-transform: translate(0, -10px);
      -moz-transform: translate(0, -10px);
      -ms-transform: translate(0, -10px);
      -o-transform: translate(0, -10px);
    transform: translate(0, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
      -webkit-transform: translate(0, 10px);
      -moz-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
      -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}

@-moz-keyframes down {
  0% {
    opacity: 1;
      -webkit-transform: translate(0, -10px);
      -moz-transform: translate(0, -10px);
      -ms-transform: translate(0, -10px);
      -o-transform: translate(0, -10px);
    transform: translate(0, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
      -webkit-transform: translate(0, 10px);
      -moz-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
      -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}

@-o-keyframes down {
  0% {
    opacity: 1;
      -webkit-transform: translate(0, -10px);
      -moz-transform: translate(0, -10px);
      -ms-transform: translate(0, -10px);
      -o-transform: translate(0, -10px);
    transform: translate(0, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
      -webkit-transform: translate(0, 10px);
      -moz-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
      -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}

@keyframes down {
  0% {
    opacity: 1;
      -webkit-transform: translate(0, -10px);
      -moz-transform: translate(0, -10px);
      -ms-transform: translate(0, -10px);
      -o-transform: translate(0, -10px);
    transform: translate(0, -10px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
      -webkit-transform: translate(0, 10px);
      -moz-transform: translate(0, 10px);
      -ms-transform: translate(0, 10px);
      -o-transform: translate(0, 10px);
    transform: translate(0, 10px);
  }
}

/* CSS Document */

body {
    -webkit-text-size-adjust: 100%;
}
/*** setting css ***/

/*** all reset ***/
* {
  margin:0;
  padding:0;
  list-style:none;
  text-indent:0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
img {border:none;vertical-align:bottom;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,pre,address,em,strong,th,ins {font-style:normal;font-weight:normal;}
table {border-collapse:collapse;border:0;}
th {text-align:left;}
input,select,textarea {vertical-align:middle;}
img {border:0;vertical-align:middle;}
ins, a {text-decoration:none;}
ul {list-style:none;}
br {letter-spacing: 0;}


.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

@media screen and (max-width: 640px) {
.xs_off {
display: none;
}
.sm_on {
display: none;
}
.md_on {
display: none;
}
.lg_on {
display: none;
}
.sp {
	display:none;
}
}

@media screen and (min-width: 641px) and (max-width: 800px) {
.xs_on {
display: none;
}
.sm_off {
display: none;
}
.md_on {
display: none;
}
.lg_on {
display: none;
}
.sp {
	display:none;
}
}

@media screen and  (min-width: 801px) and (max-width: 1000px) {
.xs_on {
display: none;
}
.sm_on {
display: none;
}
.md_off {
display: none;
}
.lg_on {
display: none;
}
}

@media screen and  (min-width: 1001px)  {
.xs_on {
display: none;
}
.sm_on {
display: none;
}
.md_on {
display: none;
}
.lg_off {
display: none;
}
}
.display-none{
display: none;
}