.banner-wrap {
  max-width: 994px;
  height: 324px;
  background-color: #FBE3E1;
  margin: 0px auto 30px;
}

.banner-wrap .inner {
  width: 601px;
  height: 304px;
  margin: 0 auto;
  position: relative;
}

.banner-wrap .inner .ball {
  width: 259px;
  height: 128px;
  background-image: url(../images/anim_banner/ball.png);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-position: 0px -128px;
}

.banner-wrap .inner .koma {
  width: 601px;
  height: 304px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: absolute;
  background-image: url(../images/anim_banner/koma.png);
  background-size: cover;
  background-position: 0px -1520px;
}

.banner-wrap .inner .ball.open {
  background-position: 0px 0px;
}

.banner-wrap .inner .sakura_r {
  width: 163px;
  height: 70px;
  background-image: url(../images/anim_banner/sakura_r.png);
  background-size: cover;
  position: absolute;
  top: 0;
  right: 2px;
  display: none;
}

.banner-wrap .inner .sakura_l {
  width: 163px;
  height: 70px;
  background-image: url(../images/anim_banner/sakura_l.png);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 2px;
  display: none;
}

.banner-wrap .inner .product1 {
  width: 160px;
  height: 174px;
  background-image: url(../images/anim_banner/product1_1.png);
  background-size: cover;
  position: absolute;
  top: 120px;
  left: 146px;
  display: none;
}

.banner-wrap .inner .product1_open {
  width: 277px;
  height: 183px;
  background-image: url(../images/anim_banner/product1_2.png);
  background-size: cover;
  position: absolute;
  top: 102px;
  left: 28px;
  display: none;
}

.banner-wrap .inner .product2 {
  width: 160px;
  height: 174px;
  background-image: url(../images/anim_banner/product2_1.png);
  background-size: cover;
  position: absolute;
  top: 120px;
  left: 300px;
  display: none;
}

.banner-wrap .inner .product2_open {
  width: 265px;
  height: 182px;
  background-image: url(../images/anim_banner/product2_2.png);
  background-size: cover;
  position: absolute;
  top: 100px;
  left: 306px;
  display: none;
}

@media screen and (max-width: 767px) {
  .banner-wrap {
    width: 100%;
    height: 152px;
  }

  .banner-wrap .inner {
    transform-origin: 50% 0;
    transform: scale(0.5) translateX(-50%);
    margin-left: calc((100% - 300px)/2);
  }
}