@charset "UTF-8";

@media screen and (min-width:767px) {

  .inner{ max-width: 900px; width: 100%;margin: 0 auto;}

  /* --------------------------
  mv
  ----------------------------- */

  .mv{ width: 100%;height: 400px;overflow: hidden;background: url(../img/song/bg_mv.jpg)repeat-x center bottom;background-size: contain 100%; position: relative;}
  .mv::after{ content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/song/bg_curtain.png)repeat-x center top;background-size: contain 100%;}

  .mv__inner{ width: 1094px;height: 302px;text-align: center;position: absolute;top: 35px;bottom: 0;left: 0;right: 0;margin: auto;z-index: 2;}
  .mv__inner{ background: url(../img/song/bg_point.png)no-repeat top center; background-size: contain;}
  .mv__inner img{ transition: all 1s;}
  .mv .mv__ttl{display: inline-block;vertical-align: top; width: 38.5%;margin: 30px 3% 0;}
  .mv .mv__img--left{display: inline-block;vertical-align: top; width: 16.5%;}
  .mv .mv__img--right{display: inline-block;vertical-align: top; width: 14.5%;margin-top: 10px;}

  @media screen and (max-width:1350px) {
    .mv__inner { width: 106%;height: 21vw;left: -3%;}
    .mv__inner img{ width: 100%;}
  }

  .mike{ width: 126px;position: absolute;top: 335px;left: 0;right: 0;margin: auto;z-index: 2;}

  main{ background: url(../img/song/bg.png)repeat;background-size: auto;}

  /* --------------------------
    cont
  ----------------------------- */

  .cont{ width: 100%;overflow: hidden;position: relative;padding: 70px 0 0;}

  /* --------------------------
    cont__info
  ----------------------------- */

  .cont__info{ width: 100%;margin: 0 auto 50px;text-align: center;}
  .cont__info h4{ max-width: 455px;width: 100%;font-size: 24px;font-weight: 700;line-height: 1.5;color: #f85c82;margin: 0 auto 20px;position: relative;}
  .cont__info h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-01.png)no-repeat left center;}
  .cont__info h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-02.png)no-repeat right center;}

  .cont__info--txt{ width: 100%;padding: 18px 28px;background-color: rgba(255,255,255,0.5);border-radius: 30px;}
  .cont__info--txt h5{ font-size: 15px;font-weight: 700;line-height: 1.3;transform:rotateZ(0.03deg);text-align: center;color: #411b08;margin-bottom: 10px;}
  .cont__info--txt p{ font-size: 13px;font-weight:700;line-height: 1.5;transform:rotateZ(0.03deg);text-align: left;color: #411b08;}

  @media screen and (max-width:1160px) {.cont__info{ width: 95%;}}


  /* --------------------------
    cont__main
  ----------------------------- */

  .cont__main{ max-width: 900px;width: 100%;margin: 0 auto;text-align: center;position: relative;}

  .cont__main h4.mov_ttl{ max-width: 355px;width: 100%;}
  .cont__main h4.mov_ttl{ font-size: 24px;font-weight: 800;line-height: 1.5;color: #fb9db4;margin: -65px auto 25px;position: relative;}
  .cont__main h4.mov_ttl::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-03.png)no-repeat left center;}
  .cont__main h4.mov_ttl::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-03.png)no-repeat right center;}

  .cont__main h4.dow_ttl01{ max-width: 410px;width: 100%;}
  .cont__main h4.dow_ttl02{ max-width: 290px;width: 100%;}
  .cont__main h4.dow_ttl03{ max-width: 315px;width: 100%;}
  .cont__main h4{ font-size: 24px;font-weight: 800;line-height: 1.5;color: #fb9db4;margin: 10px auto 35px;position: relative;}
  .cont__main h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-04.png)no-repeat left center;}
  .cont__main h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-04.png)no-repeat right center;}


  .cont__main--mov{ width: 100%;}
  .cont__main--mov h3 img{max-width: 783px;width: 95%;margin: 0 auto;position: relative;z-index: 2;}

  /* popup */

  .mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background:rgba(251,157,180,0.95);
    opacity: 0.8;
    filter: alpha(opacity=80);
  }

  .mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 190px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: white;
    right: 0;
    text-align: right;
    padding-right: 6px;
    width: 100%;
  }

  .mfp-iframe-holder .mfp-close {
    top: -55px;
  }

  button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: url(../img/song/btn_closed.png)no-repeat top right;
    background-size: contain;
}

  .mfp-close {
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    filter: alpha(opacity=65);
    padding: 0 0 18px 10px;
    color: white;
    font-size: 0;
}

  @media screen and (max-width:1160px) {.cont__info{ width: 95%;}}

  .mov_cont{width: 100%;margin: 0 auto;position: relative;}
  .mov_cont img{max-width: 822px;width: 95%;margin: 0 auto;}

  .mov_cont .mov_btn{ width: 134px;height: 134px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
  .mov_cont .mov_btn img{ position: absolute;top:0;left: 0;opacity: 1;transition: opacity .4s;}
  /* hover */
  .mov_cont:hover{ cursor: pointer;}
  .mov_cont:hover .mov_btn img{ opacity: 0;}
  .mov_cont:hover .mov_btn img.on{ opacity: 1;}

  .cont__main--dow{ width: 100%;margin: 50px auto 70px;}
  .cont__main--dow h3 img{max-width: 538px;width: 95%;}
  .cont__main--dow ul{ width: 100%;text-align: left;}
  .cont__main--dow ul li{ width: 44%;display: inline-block;vertical-align: top;margin-bottom: 20px;position: relative;}
  .cont__main--dow ul li:nth-child(odd){ margin-right: 2%;margin-left: 4.8%;}

  @media screen and (max-width:1030px) {
    .cont__main--dow ul{ width: 100%;text-align: center;}
    .cont__main--dow ul li{ width: 400px;display: inline-block;margin: 0 auto 20px;position: relative;}
    .cont__main--dow ul li:nth-child(odd){ margin-right: 0;margin-left: 0;}
  }

  .cont__main--dow ul li p{ width: 100%;height: 80px; background-color: #ffffff;border-radius: 100vh;margin: 10px 0;padding: 0 65px 0 110px;display: flex;align-items: center;}
  .cont__main--dow ul li p span{ font-size: 20px;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);color: #fb9db4;}
  .cont__main--dow ul.dow_03 li p{ width: 100%;height: 80px; background-color: #ffffff;border-radius: 100vh;margin: 10px 0;padding: 0 65px 0 50px;display: flex;align-items: center;}
  .cont__main--dow ul.dow_03 li p span small{ font-size: 13px;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);vertical-align: middle;border: 2px solid #fb9db4;display: inline-block;padding: 0 5px;margin-left: 10px;}

  .cont__main--dow ul li .btn_play{ position: absolute;top: 0;left: 0;}
  .cont__main--dow ul li .btn_play img{ position: absolute;top: 0;left: 0;transition: opacity .4s;}
  /* hover */
  .cont__main--dow ul li .btn_play:hover img{ opacity: 0;cursor: pointer;}
  .cont__main--dow ul li .btn_play:hover img.on{ opacity: 1;}

  .cont__main--dow ul li a.btn_dow{ position: absolute;top: 24px;right: 13px;}
  .cont__main--dow ul li a.btn_dow img{ position: absolute;top: 0;right: 0;transition: opacity .4s;}
  /* hover */
  .cont__main--dow ul li a:hover img{ opacity: 0;cursor: pointer;}
  .cont__main--dow ul li a:hover img.on{ opacity: 1;}

}


@media screen and (max-width:767px) {
  main .inner{ width: 90%;margin: 0 auto;}

  /* --------------------------
  mv
  ----------------------------- */

  .mv{ width: 100%;height:53.3vw;overflow: hidden;background: url(../img/song/bg_mv-sp.jpg)repeat-x center bottom;background-size: contain; position: relative;}
  .mv::after{ content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../img/song/bg_curtain-sp.png)repeat-x center top;background-size: 6.6vw auto;}

  .mv__inner{ width: 100%;height: 30vw;text-align: center;position: absolute;top: -7vw;bottom: 0;left: 0;right: 0;margin: auto;z-index: 2;}
  .mv__inner{ background: url(../img/song/bg_point-sp.png)no-repeat top center; background-size: contain;}
  .mv__inner img{ transition: all 1s;}
  .mv .mv__ttl{display: inline-block;vertical-align: top; width: 54%;margin: 7vw 1% 0;}
  .mv .mv__img--left{display: inline-block;vertical-align: top; width: 21.5%;margin-top:3vw;}
  .mv .mv__img--right{display: inline-block;vertical-align: top; width: 19.5%;margin-top:3vw;}

  .mike{ width: 16.6vw;position: absolute;top: 43.5vw;left: 0;right: 0;margin: auto;z-index: 2;}

  main{ background: url(../img/song/bg.png)repeat;background-size: auto;}

  /* --------------------------
    cont
  ----------------------------- */

  .cont{ width: 100%;overflow: hidden;position: relative;padding: 10vw 0 0;}

  /* --------------------------
    cont__info
  ----------------------------- */

  .cont__info{ width: 100%;margin: 0 auto 7.6vw;text-align: center;}
  .cont__info h4{ width: 85vw;font-size: 4.26vw;font-weight: 700;line-height: 1.5;transform:rotateZ(0.03deg);color: #f85c82;margin: 0 auto 4vw;position: relative;}
  .cont__info h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-01-sp.png)no-repeat left center;background-size: 10%;}
  .cont__info h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-02-sp.png)no-repeat right center;background-size: 9%;}

  .cont__info--txt{ width: 100%;padding: 4vw;background-color: rgba(255,255,255,0.5);border-radius: 30px;}
  .cont__info--txt h5{ font-size: 3.2vw;font-weight: 500;line-height: 1.3;transform:rotateZ(0.03deg);text-align: center;color: #411b08;margin-bottom: 3vw;}
  .cont__info--txt p{ font-size: 2.66vw;font-weight:500;line-height: 1.8;transform:rotateZ(0.03deg);text-align: left;color: #411b08;}


  /* --------------------------
    cont__main
  ----------------------------- */

  .cont__main{ width: 100%;margin: 0 auto;text-align: center;position: relative;}

  .cont__main h3{ width: 98%;margin: 0 auto;position: relative;z-index: 2;}
  .cont__main h4.mov_ttl{ width: 65vw;margin: 0 auto;}
  .cont__main h4.mov_ttl{ font-size: 4.26vw;font-weight: 800;line-height: 1.5;transform:rotateZ(0.03deg);color: #fb9db4;margin: -10vw auto 3vw;position: relative;}
  .cont__main h4.mov_ttl::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-03-sp.png)no-repeat left center;background-size: 6%;}
  .cont__main h4.mov_ttl::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-03-sp.png)no-repeat right center;background-size: 6%;}

  .cont__main h4.dow_ttl01{ max-width: 75vw;width: 100%;}
  .cont__main h4.dow_ttl02{ max-width: 52vw;width: 100%;}
  .cont__main h4.dow_ttl03{ max-width: 56vw;width: 100%;}
  .cont__main h4{ font-size: 4.26vw;font-weight: 800;font-weight: 800;line-height: 1.5;transform:rotateZ(0.03deg);color: #fb9db4;margin: 2vw auto 6vw;position: relative;}
  .cont__main h4::before{ content: '';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-04-sp.png)no-repeat left center;background-size: auto 90%;}
  .cont__main h4::after{ content: '';position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: url(../img/song/ico_main-04-sp.png)no-repeat right center;background-size: auto 90%;}

  .cont__main--mov { width: 100%;}

  /* popup */

  .mfp-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;
    overflow: hidden;
    position: fixed;
    background:rgba(251,157,180,0.95);
    opacity: 0.8;
    filter: alpha(opacity=80);
  }

  .mfp-container {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 5%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
    color: white;
    right: 0;
    text-align: right;
    padding-right: 0;
    width: 100%;
  }

  .mfp-iframe-holder .mfp-close {
    top: -12vw;
  }

  button.mfp-close, button.mfp-arrow {
    overflow: visible;
    cursor: pointer;
    border: 0;
    -webkit-appearance: none;
    display: block;
    outline: none;
    padding: 0;
    z-index: 1046;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: url(../img/song/btn_closed.png)no-repeat top right;
    background-size: 10%;
}

  .mfp-close {
    width: 14vw;
    height: 14vw;
    line-height: 14vw;
    position: absolute;
    right: 0;
    top: 0;
    text-decoration: none;
    text-align: center;
    opacity: 1;
    padding: 0;
    color: white;
    font-size: 0;
}
  .mov_cont{width: 100%;margin: 0 auto;position: relative;}
  .mov_cont img{width: 100%;}

  .mov_cont .mov_btn{ width: 14.6vw;height: 14.6vw;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
  .mov_cont .mov_btn img{ position: absolute;top:0;left: 0;opacity: 1;transition: opacity .4s;}

  .cont__main--dow{ width: 100%;margin: 7.6vw auto 10vw;}
  .cont__main--dow h3{ width: 80%;margin: 0 auto;position: relative;z-index: 2;}
  .cont__main--dow ul{ width: 100%;text-align: left;}
  .cont__main--dow ul li{ width: 95%;display: block;margin: 0 auto 6.5vw;padding: 1.5vw 0; position: relative;}

  .cont__main--dow ul li p{ width: 100%;height: 12.6vw;background-color: #ffffff;border-radius: 100vh;padding: 0 12vw 0 16vw;display: flex;align-items: center;}
  .cont__main--dow ul li p span{ font-size: 3.7vw;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);color: #fb9db4;}
  .cont__main--dow ul.dow_03 li p{ width: 100%;height: 12.6vw;background-color: #ffffff;border-radius: 100vh;padding: 0 12vw 0 10vw;display: flex;align-items: center;}
  .cont__main--dow ul.dow_03 li p span small{ font-size: 2.8vw;font-weight: 800;line-height: 1.3;transform:rotateZ(0.03deg);vertical-align: middle;border: 1px solid #fb9db4;display: inline-block;padding: 0 1vw;margin-left: 5vw;}

  .cont__main--dow ul li .btn_play{ position: absolute;top: 0;left: 0;width: 15.7vw;}
  .cont__main--dow ul li .btn_dow{ position: absolute;top: 3.5vw;right: 2vw;width: 9vw;}

}


/* animation */

.-cookie .mv__ttl {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .mv__ttl{opacity: 1;transform: translateY(0);transition:all .8s ease .2s;}

.-cookie .mv__img--left,
.-cookie .mv__img--right {opacity: 0;transform: scale(.5);}
.-cookie.-is-loaded .mv__img--left,
.-cookie.-is-loaded .mv__img--right {opacity: 1;transform: scale(1);transition:all .4s ease .6s;}

.-cookie .mike {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .mike {opacity: 1;transform: translateY(0);transition:all .3s ease .4s;}

.-cookie .cont {opacity: 0;transform: translateY(20px);}
.-cookie.-is-loaded .cont {opacity: 1;transform: translateY(0);transition:all .6s ease .8s;}


.-is-first-time .mv__ttl {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .mv__ttl{opacity: 1;transform: translateY(0);transition:all .8s ease 1.5s;}

.-is-first-time .mv__img--left,
.-is-first-time .mv__img--right {opacity: 0;transform: scale(.5);}
.-is-first-time.-is-loaded .mv__img--left,
.-is-first-time.-is-loaded .mv__img--right {opacity: 1;transform: scale(1);transition:all .4s ease 1.9s;}

.-is-first-time .mike {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .mike {opacity: 1;transform: translateY(0);transition:all .3s ease 1.7s;}

.-is-first-time .cont {opacity: 0;transform: translateY(20px);}
.-is-first-time.-is-loaded .cont {opacity: 1;transform: translateY(0);transition:all .6s ease 2s;}