@charset "utf-8";

html, body { 
    margin: 0px;
    padding: 0px;
   }

   body {
    color:#686868;
    font-family: "Kiwi Maru";
    background-color: black;
    }

    a{text-decoration: none;}

    #container{ 
        margin: 0 auto;
        max-width :390px;
        width: 100%;
        height: 2400px;
        background-color: #FFCDCE;
        background-position: center;
        background-size: contain;
        background-attachment: fixed;
     }


    #keyvisual{
        position:relative;
        top: -300px;
        left: 60px;
    }
   #pari{
    position:relative;
    top: -580px;
    left: 280px;
    transform: rotate(15deg);
     -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
     text-align: left;
     font-size: 35px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
   }

   #toro{
    position:relative;
    top: -500px;
    left: -10px;
    transform: rotate(-15deg);
     -webkit-writing-mode: vertical-rl;
     writing-mode: vertical-rl;
     text-align: left;
     font-size: 35px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
   }

   #title1{
    font-size: 20px;
    position:relative;
    padding-left: 15px;
    top: -510px;
    left: 15px;
    transform: rotate(-3deg);
    border-radius: 15px;
    background-color: #FFF9EC;
    width: 260px;
   height: 30px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
   }
   

   #title2{
    font-size: 40px;
    position:relative;
    padding-left: 15px;
    top: -530px;
    left: 10px;
    border-radius: 30px;
    background-color: #FFF9EC;
    width: 355px;
   height: 60px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
   }

   #hitokugiri1{
    position:relative;
    left: 135px;
    top: -500px;
   }

   .budou {
    animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
  }

  .girl-animation {
    animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
  }
  
  /* @keyframesの用意 */
  @keyframes girl-animation {
    0% {
      transform: translateY(-6px);
    }
    100% {
      transform: translateY(6px);
    }
  }

  .masukatto {
    animation: girl-animation1 1.8s ease-in-out infinite alternate-reverse;
  }

  .girl-animation1 {
    animation: girl-animation1 1.8s ease-in-out infinite alternate-reverse;
  }
  
  /* @keyframesの用意 */
  @keyframes girl-animation1 {
    0% {
      transform: translateY(6px);
    }
    100% {
      transform: translateY(-3px);
    }
  }

  #hure-ba-{
    font-size: 26px;
    position:relative;
    padding-left: 15px;
    top: -510px;
    left: 10px;
    border-radius: 30px;
    background-color: #FFF9EC;
    width: 145px;
   height: 40px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
   }

#mikannaji{
   position:relative;
   top: -450px;
   animation: animateImage1 4s infinite;
}

@keyframes animateImage1 {
    0% {
        transform: rotate(-5deg);
      /* アニメーション開始時のスタイル */
    }
    50% {
        transform: rotate(5deg);
      /* アニメーション終了時のスタイル */
    }
    100% {
        transform: rotate(-5deg);
  }
}

#unsyuumikann{
    font-size: 24px;
    position:relative;
    top: -730px;
    left: 120px;
    padding-left: 15px;
    border-radius: 30px;
    background-color: #FFF9EC;
    width: 135px;
   height: 35px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

#mikannsetumei{
    position:relative;
    top: -710px;
    left: 160px;
     text-align: left;
     font-size: 16px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
}

#hukidasi1{
    position:relative;
    top: -715px;
    left: 250px;
}

#kyara1{
    scale: 25%;
    position:relative;
    top: -930px;
    left: 120px; 
    transform: rotate(7deg);
}

#masukatto{
    font-size: 24px;
    position:relative;
    top: -1350px;
    left: 20px;
    padding-left: 15px;
    border-radius: 30px;
    background-color: #FFF9EC;
    width: 135px;
   height: 35px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

#masukattosetumei{
    position:relative;
    top: -1330px;
    left:20px;
     text-align: left;
     font-size: 16px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
}

#masukattoaji{
    position:relative;
    top: -1070px;
    left: 170px;
    animation: animateImage1 4s infinite;
 }
 
 @keyframes animateImage1 {
     0% {
         transform: rotate(5deg);
       /* アニメーション開始時のスタイル */
     }
     50% {
         transform: rotate(-5deg);
       /* アニメーション終了時のスタイル */
     }
     100% {
         transform: rotate(5deg);
   }
 }

 #hukidasi2{
    position:relative;
    top: -1335px;
    left: 60px;
}

#kyara2{
    scale: 23%;
    position:relative;
    top: -1575px;
    left: -150px; 
    transform: rotate(-7deg);
}

#momoaji{
    position:relative;
    top: -1750px;
    animation: animateImage1 4s infinite;
 }
 
 @keyframes animateImage1 {
     0% {
         transform: rotate(-5deg);
       /* アニメーション開始時のスタイル */
     }
     50% {
         transform: rotate(5deg);
       /* アニメーション終了時のスタイル */
     }
     100% {
         transform: rotate(-5deg);
   }
 }
 
 #hakutou{
     font-size: 24px;
     position:relative;
     top: -2020px;
     left: 120px;
     padding-left: 50px;
     border-radius: 30px;
     background-color: #FFF9EC;
     width: 100px;
    height: 35px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
 }
 
 #momosetumei{
     position:relative;
     top: -2010px;
     left: 160px;
      text-align: left;
      font-size: 16px;
      text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
 }
 
 #hukidasi3{
     position:relative;
     top: -2015px;
     left: 230px;
 }
 
 #kyara3{
     scale: 25%;
     position:relative;
     top: -2230px;
     left: 115px; 
     transform: rotate(7deg);
 }

 #akabudou{
    font-size: 24px;
    position:relative;
    top: -2640px;
    left: 20px;
    padding-left: 15px;
    border-radius: 30px;
    background-color: #FFF9EC;
    width: 120px;
   height: 35px;
   box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .3);
}

#budousetumei{
    position:relative;
    top: -2620px;
    left:25px;
     text-align: left;
     font-size: 16px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
}

#budouaji{
    position:relative;
    top: -2360px;
    left: 170px;
    animation: animateImage1 4s infinite;
 }
 
 @keyframes animateImage1 {
     0% {
         transform: rotate(5deg);
       /* アニメーション開始時のスタイル */
     }
     50% {
         transform: rotate(-5deg);
       /* アニメーション終了時のスタイル */
     }
     100% {
         transform: rotate(5deg);
   }
 }

 #hukidasi4{
    position:relative;
    top: -2625px;
    left: 60px;
}

#kyara4{
    scale: 23%;
    position:relative;
    top: -2865px;
    left: -150px; 
    transform: rotate(-7deg);
}



#hitokugiri2{
    position:relative;
    left: 110px;
    top: -3300px;
   }

   .budou {
    animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
  }

  .girl-animation {
    animation: girl-animation 1.8s ease-in-out infinite alternate-reverse;
  }
  
  /* @keyframesの用意 */
  @keyframes girl-animation {
    0% {
      transform: translateY(-6px);
    }
    100% {
      transform: translateY(6px);
    }
  }

  #sotobako{
    top: -2970px;
    left: 15px;
    position:relative;
    animation: kakudai 3s infinite;
 }
 
 @keyframes kakudai {
     0% {
         transform: scale(100%);
       /* アニメーション開始時のスタイル */
     }
     50% {
         transform: scale(95%);
   }
   100% {
    transform: scale(100%);
}
 }
  

  #setumei{
    position:relative;
    top: -3190px;
    left: 85px;
     text-align: center;
     font-size: 20px;
     text-shadow: 4px 3px 2px #FFF9EC, -4px -3px 2px #FFF9EC, -4px 3px 2px #FFF9EC, 4px -3px 2px #FFF9EC, 4px 0px 2px #FFF9EC, -4px -0px 2px #FFF9EC, 0px 3px 2px #FFF9EC, 0px -3px 2px #FFF9EC;
   }

   #syuugou{
    top: -3150px;
    left: 85px;
    position:relative;
    animation: jannpu 2s infinite;
 }
 
 @keyframes jannpu {
    0%   { 
        transform:translateY(0px);
         }
    80% { 
        transform:translateY(7px);
     }
    100% { 
        transform:translateY(0px);
     }
  }

  #gamennsita{
    top: -3155px;
    position:relative;
  }