@charset "utf-8";
body{
  margin: 0;
  padding: 0;
}
div#container{
  width: 360px;
  margin: 0 auto;
  background: #efefef;
  font-family : メイリオ, "ＭＳ Ｐゴシック", "ＭＳ ゴシック";
}
div.center_no_margin{
  margin: 0 auto;
  line-height : 20px;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  line-height: 1.25;
}
div.center_waku{
  margin: 3px 9px 3px 9px;
  padding: 0;
  line-height : 20px;
  text-align: center;
  border: 1px solid;
}
div.under_red{
  width: 322px;
  line-height : 40px;
  font-size: 25px;
  color: red;
  font-weight : bold;
  padding: 2px 10px;
  margin: 20px auto 0 auto;
  text-align: center;
  border-bottom: solid 4px #ff0000;
}
div.bun{
  font-size: 24px;
  color: white;
  background: red;
  padding: 10px;
  margin: 10px 0px;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
div.bun_o{
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: white;
  background: red;
  padding: 10px;
  margin: 10px 0px;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
.opacity_1{
  opacity:1;
}
.opacity_0{
  opacity:0;
}
.heart {
  position: absolute;
  width: 60px;
  height: 54px;
  margin-top: -27px;
  margin-left: -30px;
}
.heart:before,
.heart:after {
  position: absolute;
  content: "";
  left: 30px;
  top: 0;
  width: 30px;
  height: 48px;
  background: #f88dc8;
  border-radius: 30px 30px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}

.heart_x {
  opacity:0;
  position: absolute;
  width: 60px;
  height: 54px;
  margin-top: -27px;
  margin-left: -30px;
}
.heart_x:before,
.heart_x:after {
  position: absolute;
  content: "";
  left: 30px;
  top: 0;
  width: 30px;
  height: 48px;
  background: #f88dc8;
  border-radius: 30px 30px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}
.heart_x:after {
  left: 0;
  transform: rotate(45deg);
  transform-origin :100% 100%;
}


.heart_do{
   animation: pounding .5s linear infinite alternate;
}

@keyframes pounding{
  0%{ transform: scale(1.2); }
  100%{ transform: scale(1); }
}


#heart_1{
  top:60%;
  left: 20%;
}
#heart_2{
  top:60%;
  left: 40%;
}
#heart_3{
  top:60%;
  left: 60%;
}
#heart_4{
  top:60%;
  left: 80%;
}

#heart_a{
  top:80%;
  left: 20%;

}
#heart_b{
  top:80%;
  left: 40%;

}
#heart_c{
  top:80%;
  left: 60%;

}
#heart_d{
  top:80%;
  left: 80%;

}

.himo{
  width: 2px;
  height: 160px;
  background-color: red;
}
#himo_1{
  position: absolute;
  top: 0;
  left: 20%;
}
#himo_2{
  position: absolute;
  top: 0;
  left: 40%;
}
#himo_3{
  position: absolute;
  top: 0;
  left: 60%;
}
#himo_4{
  position: absolute;
  top: 0;
  left: 80%;
}


p{
  font-size: 24px;
  padding: 10px;
  margin: 10px 0px;
}
p.red{
  font-size: 24px;
  padding: 10px;
  color: red;
}
p.red_l{
  font-size: 23px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  color: red;
}
div.top{
  background: red;
  text-align: center;
animation: bg-color 10s infinite;
-webkit-animation: bg-color 10s infinite;
  }

@-webkit-keyframes bg-color {
  0% { background-color: purple; }
  20% { background-color: #FF8000; }
  40% { background-color: green; }
  60% { background-color: red; }
  80% { background-color: #0080FF; }
  100% { background-color: navy; }
}
@keyframes bg-color {
  0% { background-color: purple; }
  20% { background-color: #FF8000; }
  40% { background-color: green; }
  60% { background-color: red; }
  80% { background-color: #0080FF; }
  100% { background-color: navy; }
}
  div.top a{
    display: block;
    /* background: red; */
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    line-height: 60px;
    color:white;
    font-weight: bold;
  }



div.sotowaku{
  position: relative;
  width: 340px;
  height: 300px;
  margin: 3px auto;
  background-color:navy;
}

div#start{
}
#neko{
  position: absolute;
  top: 80px;
  left: 110px;
}


#gold_1{
  position: absolute;
  top: 280px;
  left: 170px;
    opacity: 0;
}

#gold_2{
  position: absolute;
  top: 280px;
  left: 180px;
  opacity: 0;
}

#gold_3{
  position: absolute;
  top: 275px;
  left: 160px;
  opacity: 0;
}

#gold_4{
  position: absolute;
  top: 280px;
  left: 190px;
  opacity: 0;
}
#gold_5{
  position: absolute;
  top: 280px;
  left: 150px;
    opacity: 0;
}
#gold_6{
  position: absolute;
  top: 280px;
  left: 200px;
  opacity: 0;
}
#gold_7{
  position: absolute;
  top: 275px;
  left: 155px;
  opacity: 0;
}

#gold_8{
  position: absolute;
  top: 280px;
  left: 165px;
  opacity: 0;
}
#gold_9{
  position: absolute;
  top: 280px;
  left: 175px;
  opacity: 0;
}
#gold_10{
  position: absolute;
  top: 280px;
  left: 185px;
  opacity: 0;
}



#gold_a{
  position: absolute;
      z-index:108;
  top: 270px;
  left: 153px;
    opacity: 0;
}
#gold_b{
  position: absolute;
      z-index:107;
  top: 270px;
  left: 157px;
    opacity: 0;
}
#gold_c{
  position: absolute;
      z-index:106;
  top: 270px;
  left: 167px;
    opacity: 0;
}
#gold_d{
  position: absolute;
      z-index:105;
  top: 270px;
  left: 177px;
    opacity: 0;
}
#gold_e{
  position: absolute;
      z-index:104;
  top: 270px;
  left: 187px;
    opacity: 0;
}
#gold_f{
  position: absolute;
      z-index:103;
  top: 270px;
  left: 148px;
    opacity: 0;
}
#gold_g{
  position: absolute;
      z-index:102;
  top: 270px;
  left: 186px;
    opacity: 0;
}
#gold_h{
  position: absolute;
      z-index:101;
  top: 270px;
  left: 162px;
    opacity: 0;
}
#gold_i{
  position: absolute;
    z-index:100;
  top: 270px;
  left: 182px;
    opacity: 0;
}
#gold_j{
  position: absolute;
  top: 270px;
  left:188px;
    opacity: 0;
}

#gold_100{
  position: absolute;
  z-index:5;
  top:200px;
  left:100px;
  opacity:0;
}
#gold_101{
  position: absolute;
    z-index:4;
  top:200px;
  left:120px;
  opacity:0;
}
#gold_102{
  position: absolute;
    z-index:3;
  top:180px;
  left:100px;
  opacity:0;
}
#gold_103{
  position: absolute;
    z-index:2;
  top:250px;
  left:160px;
  opacity:0;
}
#gold_104{
  position: absolute;
    z-index:1;
  top:250px;
  left:170px;
  opacity:0;
}

#gold_1000{
  position: absolute;
  z-index:1;
  top:150px;
  left:5px;
  opacity:0;
}

.anime_1{
  animation-name: key_1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_1 {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(-5px ,-230px);}
  45% {transform:translate(-7px ,-245px);}
  50% {transform:translate(-10px ,-246px);}
  55% {transform:translate(-13px ,-245px);}
  60% {transform:translate(-15px ,-230px) ;}
  100% {opacity:1; transform:translate(-20px ,-1px) rotatex(1200deg);}
}

.anime_2{
  animation-name: key_2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 0.2s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_2 {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(5px ,-230px) ;}
  45% {transform:translate(7px ,-245px) ;}
  50% {transform:translate(10px ,-246px);}
  55% {transform:translate(13px ,-245px) ;}
  60% {transform:translate(15px ,-230px) ;}
  100% {opacity:1; transform:translate(20px ,-3px) rotatex(1600deg);}
}

.anime_3{
  animation-name:key_3;
  animation-duration: 1.9s;
  animation-timing-function: linear;
  animation-delay: 0.7s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_3 {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(3px ,-224px) ;}
  45% {transform:translate(6px ,-229px) ;}
  50% {transform:translate(8px ,-230px);}
  55% {transform:translate(10px ,-229px) ;}
  60% {transform:translate(13px ,-224px) ;}
  100% {opacity:1; transform:translate(14px ,-3px) rotatex(1600deg);}
}


.anime_4{
  animation-name: key_4;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: 0.6s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_4 {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(5px ,-226px) ;}
  45% {transform:translate(7px ,-231px) ;}
  50% {transform:translate(10px ,-232px);}
  55% {transform:translate(13px ,-231px) ;}
  60% {transform:translate(15px ,-226px) ;}
  100% {opacity:1; transform:translate(22px ,-3px) rotatex(1600deg);}
}

.anime_5{
  animation-name: key_5;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_5 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,0px) rotate(100deg);}
}

.anime_6{
  animation-name: key_6;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 1.3s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_6 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,0px) rotate(190deg);}
}

.anime_7{
  animation-name: key_7;
  animation-duration: 2.1s;
  animation-timing-function: linear;
  animation-delay: 1.2s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_7 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,0px) rotate(190deg);}
}

.anime_8{
  animation-name: key_8;
  animation-duration: 1.9s;
  animation-timing-function: linear;
  animation-delay: 0.9s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_8 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-5px) rotate(290deg);}
}

.anime_9{
  animation-name: key_9;
  animation-duration: 2.1s;
  animation-timing-function: linear;
  animation-delay: 1.1s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_9 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-6px) rotate(120deg);}
}

.anime_10{
  animation-name: key_10;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: 0.8s;
  animation-iteration-count:1;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_10 {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,0px) rotate(190deg);}
}

.anime_a{
  animation-name: key_a;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-delay: 1.5s;
  animation-iteration-count:3;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_a {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(-5px ,-230px);}
  45% {transform:translate(-7px ,-245px);}
  50% {transform:translate(-10px ,-246px);}
  55% {transform:translate(-13px ,-245px);}
  60% {transform:translate(-15px ,-230px) ;}
  100% {opacity:1; transform:translate(-20px ,-120px) rotatex(1200deg);}
}

.anime_b{
  animation-name: key_b;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0.8s;
  animation-iteration-count:5;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_b {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(5px ,-230px) ;}
  45% {transform:translate(7px ,-245px) ;}
  50% {transform:translate(10px ,-246px);}
  55% {transform:translate(13px ,-245px) ;}
  60% {transform:translate(15px ,-230px) ;}
  100% {opacity:1; transform:translate(20px ,-124px) rotatex(1600deg);}
}

.anime_c{
  animation-name:key_c;
  animation-duration: 1.9s;
  animation-timing-function: linear;
  animation-delay: 1.7s;
  animation-iteration-count:4;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_c {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(3px ,-224px) ;}
  45% {transform:translate(6px ,-229px) ;}
  50% {transform:translate(8px ,-230px);}
  55% {transform:translate(10px ,-229px) ;}
  60% {transform:translate(13px ,-224px) ;}
  100% {opacity:1; transform:translate(14px ,-124px) rotatex(1600deg);}
}


.anime_d{
  animation-name: key_d;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: 1.6s;
  animation-iteration-count:3;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_d {
  0% {opacity:1; transform:translate(0px, 0px)rotatex(0deg);}
  40% {transform:translate(5px ,-226px) ;}
  45% {transform:translate(7px ,-231px) ;}
  50% {transform:translate(10px ,-232px);}
  55% {transform:translate(13px ,-231px) ;}
  60% {transform:translate(15px ,-226px) ;}
  100% {opacity:1; transform:translate(22px ,-110px) rotatex(1600deg);}
}

.anime_e{
  animation-name: key_e;
  animation-duration: 1.9s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count:4;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_e {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-120px) rotate(100deg);}
}

.anime_f{
  animation-name: key_f;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 1.3s;
  animation-iteration-count:3;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_f {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-24px ,-114px) rotate(190deg);}
}

.anime_g{
  animation-name: key_g;
  animation-duration: 2.1s;
  animation-timing-function: linear;
  animation-delay: 1.6s;
  animation-iteration-count:2;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_g {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-124px) rotate(190deg);}
}

.anime_h{
  animation-name: key_h;
  animation-duration: 1.9s;
  animation-timing-function: linear;
  animation-delay: 0.9s;
  animation-iteration-count:3;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_h {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-120px) rotate(190deg);}
}

.anime_i{
  animation-name: key_i;
  animation-duration: 2.1s;
  animation-timing-function: linear;
  animation-delay: 1.1s;
  animation-iteration-count:3;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_i {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-20px ,-123px) rotate(190deg);}
}

.anime_j{
  animation-name: key_j;
  animation-duration: 1.8s;
  animation-timing-function: linear;
  animation-delay: 0.8s;
  animation-iteration-count:4;
  animation-direction: normal;
  animation-fill-mode:forwards;
  animation-play-state: running;
}
@keyframes key_j {
  0% {opacity:1; transform:translate(0px, 0px)rotate(0deg);}
  40% {transform:translate(-5px ,-230px) rotate(400deg);}
  45% {transform:translate(-7px ,-245px) rotate(560deg);}
  50% {transform:translate(-10px ,-250px) rotate(700deg);}
  55% {transform:translate(-13px ,-245px)rotate(840deg);}
  60% {transform:translate(-15px ,-230px)rotate(500deg);}
  100% {opacity:1; transform:translate(-22px ,-125px) rotate(180deg);}
}

.anime_100{
  animation-name: a_100;
  animation-duration: 0.5s;
  animation-timing-function: linear;
  animation-delay: 2.5s;
    animation-fill-mode: forwards;
}
@keyframes a_100{
  0%{opacity:0;}
  100%{opacity:1;}
}

.anime_101{
  animation-name: a_100;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 3.0s;
    animation-fill-mode: forwards;
}
.anime_102{
  animation-name: a_100;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 3.5s;
    animation-fill-mode: forwards;
}
.anime_103{
  animation-name: a_100;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 3.7s;
    animation-fill-mode: forwards;
}
.anime_104{
  animation-name: a_100;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 3.9s;
    animation-fill-mode: forwards;
}
.anime_105{
  animation-name: a_100;
  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-delay: 4s;
    animation-fill-mode: forwards;
}










@keyframes okiru {
  50% {opacity: 0.4;}
}
.hikaru_a{
  background: radial-gradient(#fff,#fffafa);
  box-shadow: 0 0 30px 20px #fff;
}


.hikaru{
    animation: flash 2s ease infinite normal;
    background: radial-gradient(#fff,#f0f8ff);
    box-shadow: 0 0 10px 10px #fff;
}
#a_2{
  position: absolute;
  top: 100px;
  left: 170px;
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color:white;
  box-shadow: 0 0 30px 20px white;
  animation: flash 10s ease infinite normal;
}

#a_neko{
  position: absolute;
  top: 55px;
  left: 250px;
}
#a_3{
  position: absolute;
  top: 80px;
  left: 100px;
  opacity:0;
  animation: flash_1kai 15s ease normal;
}
@keyframes flash {
  50% {opacity: 0.4;}
}
@keyframes flash_1kai {
  0% {opacity: 0;}
  40%{opacity:0;}
  50% {opacity: 0.07;}
  60%{opacity:0;}
  100% {opacity: 0;}
}
  .spin{
    transform:rotate(7200deg);
  }
  p.mokuzi{
    margin: 10px 5px 5px 5px;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    color:red;
}
  #ans{
    margin: 5px 15px 5px 15px;
    line-height : 35px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    background-color: white;
  }
p.bun{
  text-align: left;
  font-size: 16px;
  line-height: 26px;
  margin: 0;
  padding: 0 20px;
}  
p.bun_s{
  text-align: center;
  font-weight: bold;
  color: black;
  font-size: 14px;
}
span.bold_big{
  font-size: 18px;
  color: #333;
  font-weight: bold;
}
div.rela{
  position: relative;
  text-align: center;
}
div.a_1{
  position: absolute;
  top: 50px;
  left: 205px;
  width: 8px;
  height: 30px;
  border-radius: 50%;
  background-color:white;
  box-shadow: 0 0 30px 20px white;
  animation: flash 0.3s ease infinite normal;
}
@keyframes flash {
  50% {
    opacity: 0.1;
  }
}
#tubuyaki{
  margin: 5px 10px 5px 10px;
  line-height : 30px;
  font-size: 24px;
  text-align: left;
    background-color: white;
}
  div.cm{
    line-height : 20px;
    font-size: 12px;
    text-align: center;
    margin: 2px auto 2px auto;
  }

div.center{
  margin-top: 20px;
  line-height : 20px;
  font-size: 18px;
  text-align: center;
  line-height: 1.25;
}
  .anima{
    animation-duration: 3s;
    animation-name: slidein;
    animation-timing-function: ease-in;
  }

  table.num{
    width: 350px;
    margin: 5px auto 5px auto;
    background-color: white;
  }

  footer{
    line-height : 30px;
    font-size: 18px;
    text-align: center;
    color: black;
  }
  /* ＳＮＳ */
/*---SNSシェアボタン---*/
/* ボタン上の文字 */
.fa-twitter:before, .fa-hatena:before, .fa-line:before, .fa-pocket:before
{
  font-family: helvetica neue,helvetica,arial,sans-serif;

  /* font-size:14px */
}
.fa-facebook:before {
  content: "f";
  font-family: Verdana;
  font-size:23px;
  /* font-weight: bold */
}
.fa-twitter:before {
  content: "twitter";
  font-size:23px;
}

.fa-hatena:before {
  content: "B!";
  font-family: Verdana;
}
.fa-line:before {
  content: "Line";
  font-size:23px;
}
.fa-pocket:before {
  content: "pocket";
}

/* ボタン表示位置の調整 */
.button-area {
  text-align: center;
  overflow:hidden;
  /* clear:left; */
  margin-top:15px;
  margin-left: 8px;
  margin-bottom: 15px;
}

/* タイトルの表示設定 */
.button-area-title {
  text-align: center;
  padding:.7em;
}

/* ボタンブロックのデザイン */
.button-area li a {
  padding: 2px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #fff;
  border-radius: 4px; 
}

/* SNSごとの背景色 */
.twitter a {
  background-color: #55acee;
}
.facebook a{
  background-color: #3b5998;
}
.hatena a{
  background-color: #008fde;
}
.line a{
  background-color: #1dcd00;
}
.pocket a{
  background-color: #ea5a6c;
}

/* リスト「・」の削除 */
.button-area ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ボタン幅と余白の設定 */
.button-area li {
  float: left;
  /* width: 19%; */
  width: 32%;
/* 追加 */
  line-height: 30px;
  margin: 0 .3%;
}

.button-area  ul:after {
  display: block;
  clear: both;
}

/* ボタンにカーソルを合わせた時の表示設定 */
.button-area li a:hover {
  -ms-transform: translateY(-2px);
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
}
/* ＳＮＳボタンここまで */