@charset "utf-8";

@keyframes mvAnimePC{0%{background-position:0 center}100%{background-position:-1066px center}}@keyframes mvAnimeSP{0%{background-position:0 center}100%{background-position:-341px center}}
@keyframes moveAnime{0%{margin-left:-160px}50%{margin-left:-130px}100%{margin-left:-160px}}@keyframes bgAnimeMsgSp{0%{background-position:0 center}100%{background-position:-2605px center}}@keyframes bgAnimeMsgPc{0%{background-position:0 center}100%{background-position:-2605px center}}
@keyframes bgAnime{0%{background-position:0 center}100%{background-position:-2700px center}}

.top-mv{
  padding:30px 25px 0px
}

@media (min-width: 1180px){
  .top-mv{
    padding:70px 0 0px
  }
}

.top-mv__img{
  max-width:550px;
  margin:0 auto;
  margin-bottom:15px;
  animation-name:mvAnimeSP;
  animation-timing-function:linear;
  animation-duration:30s;
  animation-fill-mode:forwards;
  animation-iteration-count:infinite;
  background-image:url(../assets/img/top/mv.png);
  background-size:auto 136px
}

@media (min-width: 1180px){
  .top-mv__img{
    max-width:900px;
    margin:0 auto 20px;
    animation-name:mvAnimePC;
    animation-duration:60s;
    background-size:1066px
  }
  }

  .top-mv__img img{
    display:block;
    width:100%
  }

  .top-mv .c-celebration{
    font-size:2.4rem
  }

  @media (min-width: 1180px){
    .top-mv .c-celebration{
      font-size:6rem
    }
  }

  .top-mv .c-celebration>span:nth-of-type(1){
    width:100%
  }

  @media (min-width: 1180px){
    .top-mv .c-celebration>span:nth-of-type(1){
      width:auto
    }
  }

  .top-mv .c-celebration>span:nth-of-type(2){
    margin-right:10px
  }

  @media (min-width: 1180px){
    .top-mv .c-celebration>span:nth-of-type(2){
      margin:0 20px
    }
  }

  .top-mv .c-celebration>span:nth-of-type(4){
    font-size:1rem;margin-top:10px
  }

  @media (min-width: 1180px){
    .top-mv .c-celebration>span:nth-of-type(4){
      font-size:2rem;margin-top:20px
    }
  }

  .top-mv__text{
    text-align:center;
    margin-top:15px;
    position:relative
  }

  @media (min-width: 1180px){
    .top-mv__text{
      margin-top:20px
    }
  }

  .top-mv__text span:nth-of-type(1){
    font-size:1.4rem;font-weight:500
  }

  @media (min-width: 1180px){
    .top-mv__text span:nth-of-type(1){
      font-size:3.6rem
    }
  }

  .top-mv__text span:nth-of-type(2){
    position:absolute;
    top:0px;
    left:50%;
    margin-left:55px;
    transform:rotate(-10deg);
    font-size:1rem;
    font-weight:500;
    width:60px
  }

  @media (min-width: 1180px){
    .top-mv__text span:nth-of-type(2){
      width:auto;
      font-size:3.6rem;
      margin-left:140px;
      top:0px
    }
  }

  .top-mv__text span:nth-of-type(2) img{
    display:block;
    width:100%
  }

  .top-lead{
    padding:0 25px;
    margin:60px 0
  }

  @media (min-width: 1180px){
    .top-lead{
      margin:120px 0 130px
    }
  }

  .top-lead__img img{
    display:block;
    width:100%;
    max-width:400px;
    margin:0 auto
  }

  @media (min-width: 1180px){
    .top-lead__img img{
      display:none
    }
  }

  .top-lead__img img+img{
    display:none
  }

  @media (min-width: 1180px){
    .top-lead__img img+img{
      display:block;
      max-width:659px;
      margin:0 auto
    }
  }

/**/
.top-history{
  background-image:url(../assets/img/top/history_bg.png);
  background-repeat:repeat-x;
  background-size:auto 519px;
  animation-name:bgAnime;
  animation-timing-function:linear;
  animation-duration:60s;
  animation-fill-mode:forwards;
  animation-iteration-count:infinite;
  padding:60px 25px;
  position:relative
}

@media (min-width: 1180px){
  .top-history{
    margin-top:30px;
    padding:20px 0 30px
  }
}

.top-history.anime-start .top-history__block::after{
  left:90%;opacity:0
}

.top-history.anime-start .top-history__mask{
  width:100%
}

.top-history .top__heading{
  color:#fff
}

@media (min-width: 1180px){
  .top-history .top__heading{
    margin-bottom:30px
  }
}

.top-history .top__heading:before{
  background-image:url(../img/top/heading-history.svg);
  width:32px;
  height:10px
}

@media (min-width: 1180px){
  .top-history .top__heading:before{
    width:65px;height:18px
  }
}

.top-history::before{
  content:'';
  display:block;
  width:100%;
  height:100%;
  /*background-color:rgba(99,72,89,0.7);*/
  /*background-color:rgba(249,177,66,0.7);*/
  background-color:rgba(207,148,59,0.7);
  /*background-color:rgba(47,120,111,0.7);*/
  position:absolute;top:0;
  left:0;z-index:1
}

.top-history__inner{
  position:relative;
  z-index:2
}

/*.top-history__text{
  font-size:120%;
  line-height:1.7;
  color:#fff;
  margin-bottom:50px;
  max-width:1100px;
  margin:0 auto 50px
      text-align:center;
}

@media (min-width: 1180px){
  .top-history__text{
    text-align:center;
    font-size:100%;
    max-width:none
}
}*/

.top-history__block{
  width:290px;
  height:50px;
  margin:0 auto;
  position:relative
}

@media (min-width: 1180px){
  .top-history__block{
    width:380px;
    height:65px
  }
}

.top-history__block::after{
  content:'';
  display:block;
  background-image:url(../img/top/history_arch.png);
  width:100px;
  height:70px;
  background-size:100%;
  background-repeat:no-repeat;
  background-position:left top;
  position:absolute;
  top:-30px;
  left:0;
  transition:left 1s, opacity 1.5s 1s
}

@media (min-width: 1180px){
  .top-history__block::after{
    width:129px;height:90px
  }
}

.top-history__block .c-button{
  max-width:290px;
  width:290px;
  border:none;
  position:absolute;
  top:0;
  left:0
}

@media (min-width: 1180px){
  .top-history__block .c-button{
    max-width:380px;
    width:380px
  }
}

.top-history__mask{
  width:0px;
  height:50px;
  overflow:hidden;
  position:relative;
  transition:1s
}

@media (min-width: 1180px){
  .top-history__mask{
    height:65px
  }
}

.top-movie{
  margin-top:65px;
  padding:0 25px
}

@media (min-width: 1180px){
  .top-movie{
    max-width:1140px;
    margin:100px auto 0
  }
}

.top-movie .top__heading{
  margin:0 -10px 20px
}

@media (min-width: 1180px){
  .top-movie .top__heading{
    margin-bottom:45px;
    position:relative;
    z-index:5;
    margin:0 0 45px
  }
}

.top-movie .top__heading:before{
  background-image:url(../img/top/heading-movie.svg);
  width:34px;
  height:13px
}

@media (min-width: 1180px){
  .top-movie .top__heading:before{
    width:48px;
    height:18px
  }}

  .top-movie__text{
    text-align:center;
    font-size:1.3rem;
    line-height:1.5
  }

  @media (min-width: 1180px){
    .top-movie__text{
      font-size:1.8rem
    }
  }

  .top-movie__movie{
    background-color:#FDF4F9;
    padding:20px 15px;
    margin:20px 0 0
  }