@charset "UTF-8";
body{
  width: 750px;
  background: url(../../assets/img/birthday/bg.gif) no-repeat;
}
.clearfix:after {
  content: '.';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.top{
  width: 699px;
  height: 320px;
  margin:40px auto 91px auto;
}
.top-list li{
  float: left;
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.txt-balloon{
  position: absolute;
  -webkit-transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
          transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.top-list li:hover .txt-balloon{
  -webkit-transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
          transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform:translate(20px, 20px);
          transform:translate(20px, 20px);
  opacity: 0;
}
.bottom-list li:hover .txt-balloon{
  -webkit-transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
          transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform:translate(20px, 20px);
          transform:translate(20px, 20px);
  opacity: 0;
}
.txt-balloon-hover{
  position: absolute;
  -webkit-transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
          transition: all .2s 0s cubic-bezier(.6, -.28, .735, .045);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform:translate(20px, 20px);
        	transform:translate(20px, 20px);
  opacity: 0;
}
.top-list li:hover .txt-balloon-hover{
  -webkit-transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
          transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
.bottom-list li:hover .txt-balloon-hover{
  -webkit-transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
          transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
  -webkit-transform: scale(1);
          transform: scale(1);
    opacity: 1;
}
.chara-image{
}
.chara-touch{
}
.osomatsu{
  position: relative;
  margin-right:21px;
}
.karamatsu{
  position: relative;
}
.k-image{
  margin-top:-40px;
}
.choromatsu{
  position: relative;
  margin-left: 21px;
}
.center{
  width: 750px;
  margin:0 auto 0 auto;
}
.player-bg{
  width:750px;
  height:448px;
  position: relative;
  background: url(../../assets/img/birthday/bg_movie.png);
}
.youtube{
  width: 750px;
}
.txt-birthday{
  position: absolute;
  left: 51px;
  top: -120px;
}
#player{
  position: absolute;
  top:30px;
  left:30px;
}
.bottom{
  width: 689px;
  height:320px;
  margin: 0 auto 28px auto;;
}
.bottom-list li{
  float: left;
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.ichimatsu{
  position: relative;
  margin-right:21px;
}
.i-image{
  margin-top: -20px;
}
.jushimatsu{
  position: relative;
}
.todomatsu{
  position: relative;
  margin-left: 20px;
}
.t-image{
  margin-top:-20px;
}
.bnr-event{
  width: 670px;
  margin: 0 auto;
}
.txt-sns{
  width: 290px;
  margin: 49px auto 20px auto;;
}
.sns{
  width:690px;
  margin: 0 auto 61px auto;;
}
.sns li{
  float: left;
}
.btn-tw{
  margin-right:30px;
}
.btn-fb{
}
.btn-line{
  margin-left:30px;
}
.txt-copywright{
  width: 348px;
  text-align: center;
  margin:79px auto 57px auto;
  font-family: "avenir", "Lato", "Helvetica Neue", Helvetica, Arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-size:19px;
}
.l-footer__userdata {
  display: block;
  text-align: center;
  font-size: 19px;
}

.l-footer__userdata-link {
  color: #000;
  text-decoration: underline;
}

.l-footer__userdata-link:hover {
  text-decoration: none;
}
.btn-enter{
  position: relative;
  width: 320px;
  height: 358px;
  margin: 0 auto;
}
.iyami-balloon{
  position: absolute;
  top: 0;
  left:0;
}
.iyami-image{
  position: absolute;
  top: 151px;
  left:0;
}
.touch{
  display: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url(../../assets/img/birthday/bg_float.png) top center repeat;
}
.close{
  position: absolute;
  top: 30px;
  left:614px;
}
.chara-touch li{
  display: none;
  position: absolute;
  top: 165px;
  left:30px;
}
.chara-touch li.active{
  display: block;
}
.chara-touch li img{
    position: relative;
    top:390px;
    opacity: 0;
    -webkit-transform:rotate3d(1,0,0,90deg);
            transform:rotate3d(1,0,0,90deg);
    -webkit-transition: all 0.3s .3s cubic-bezier(.68, -.55, .265, 1.55);
            transition: all 0.3s .3s cubic-bezier(.68, -.55, .265, 1.55);
}
.chara-touch li img.active{
    top: 0;
    opacity: 1;
    -webkit-transform:rotate3d(1,0,0, 0deg);
            transform:rotate3d(1,0,0, 0deg);
    -webkit-transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
            transition: all .3s .3s cubic-bezier(.68, -.55, .265, 1.55);
}