@charset "utf-8";

body {
　background-color: white;
}

img {
   width: 100%;
}

.main {
    position: relative;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

.banner {
    width: 34%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 21%;
  left: 79%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.gacha {
    width: 16%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 72%;
  left: 79%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.konyu {
    width: 7.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 43.2%;
  left: 93%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.gachatoha {
    width: 3.2%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 5.2%;
  left: 19.5%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.modoru {
    width: 6.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 91%;
  left: 4.5%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.whois {
    width: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 95%;
  left: 64%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.thanks {
    width: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 95%;
  left: 77.5%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.teikyo {
    width: 13%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
position: absolute;
  top: 95%;
  left: 91%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
}

.star {
  position: absolute;
  background: url(kirakira/sparkle.png) no-repeat;
  background-size: contain;
  overflow: hidden;
}
.star.star-1 {
  width: 6%;
  height: 6%;
  top: 9%;
  left: 18%;
}
.star.star-2 {
  width: 8%;
  height: 8%;
  top: 38%;
  left: 84%;
}
.star.star-3 {
  width: 6%;
  height: 6%;
  top: 52%;
  left: 92%;
}
.star.star-4 {
  width: 6%;
  height: 6%;
  top: 92%;
  left: 17%;
}
.star.star-5 {
  width: 15%;
  height: 15%;
  top: 75%;
  left: 85%;
}
.star.star-6 {
  width: 5%;
  height: 5%;
  top: 93%;
  left: 55%;
}
.star.star-7 {
  width: 7%;
  height: 7%;
  top: 2%;
  left: 90%;
}
.star.star-8 {
  width: 10%;
  height: 10%;
  top: 70%;
  left: 2%;
}
.star.star-9 {
  width: 10%;
  height: 10%;
  top: 10%;
  left: 12%;
}
.star.star-10 {
  width: 8%;
  height: 8%;
  top: 88%;
  left: 8%;
}
.star2 {
  position: absolute;
  background: url(kirakira/three.png) no-repeat;
  background-size: contain;
  overflow: hidden;
}
.star2.star-1 {
  width: 9%;
  height: 9%;
  top: 78%;
  left: 8%;
}
.star2.star-2 {
  width: 10%;
  height: 10%;
  top: 75%;
  left: 64%;
}
.star2.star-3 {
  width: 20%;
  height: 20%;
  top: 66%;
  left: 15%;
}
.star2.star-4 {
  width: 10%;
  height: 10%;
  top: 62%;
  left: 90%;
}