@charset "utf-8";
@media screen and (min-width: 801px){
    /*------------------
    navigation
    -------------------*/
    #sp_navi_base{
        display: none;
    }
    #navi_btn{
        position: fixed;
        width:34px;
        height: 29px;
        z-index: 1;
        left: 30px;
        top:30px;
        cursor: pointer;
    }
    #navigation{
        position: fixed;
        width:280px;
        height: 100%;
        z-index: 10;
        left:-280px;
        top:0;
        background: #FFF;
        box-sizing: border-box;
        border-right:1px solid rgba(230,0,68,0.1);
        transition:0.5s ease-in-out;
    }
    .h_line{
        position: absolute;
        width:34px;
        height: 3px;
        background: #e60044;
        transition: 0.2s ease-in-out;
    }
    .h_line:nth-child(1){
        top:0;
    }
    .h_line:nth-child(2){
        top:13px;
    }
    .h_line:nth-child(3){
        top:26px;
    }
    .open{
        left:0px !important;
    }
    .open .h_line:nth-child(1){
        top: 12px;
        transform: rotate(45deg);
    }
    .open .h_line:nth-child(2){
        opacity: 0;
        transition:0s;
    }
    .open .h_line:nth-child(3){
        top: 12px;
        transform: rotate(-45deg);
    }
    #navi_menu{
        width:220px;
        margin: 170px auto 0;
    }
    #navi_menu .navi_li{
        position: relative;
        width:220px;
        height: 55px;
        text-indent: -9999px;
        cursor: pointer;
        transition:0.3s;
    }
    #navi_menu .navi_li:hover{
        opacity: 0.6;
    }
    #navi_menu .navi_li a{
        display: block;
        width:100%;
        height: 100%;
        position: absolute;
        left:0;
        top:0;
    }
    .navi_ef img{
        display: block;
        vertical-align: top;
    }
    #navi_menu .navi_li:nth-child(2){
        background-image: url("../img/navi_home.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    #navi_menu .navi_li:nth-child(4){
        background-image: url("../img/navi_movie.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    #navi_menu .navi_li:nth-child(6){
        background-image: url("../img/navi_news.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    #navi_menu .navi_li:nth-child(8){
        background-image: url("../img/navi_about.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    #navi_menu .navi_li:nth-child(10){
        background-image: url("../img/navi_comment.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    #navi_menu .navi_li:nth-child(12){
        background-image: url("../img/navi_media.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    /*
    #navi_menu .navi_li:nth-child(5){
        background-image: url("../img/navi_line.gif"),url("../img/navi_photo.gif");
        background-repeat:no-repeat,no-repeat;
        background-position:center top,center bottom;
    }
    */
    #navi_menu .navi_li:nth-child(14){
        background-image: url("../img/navi_ticket.gif");
        background-repeat:no-repeat,no-repeat,no-repeat;
        background-position:center top,center 4px,center bottom;
    }
    body .sc_active{
        bottom:40px;
    }    
    #page_top{
        position: fixed;
        width:90px;
        height: 118px;
        background: url("../img/pagetop.png") no-repeat left top;
        right:40px;
        animation: down_pc 2s ease-in-out infinite;
        transform-origin:left top;
        text-indent: -9999px;
        z-index: 10;
        cursor: pointer;
        transition:0.3s ease-out;
        bottom:-130px;
    }
    #page_top_sp{
        display: none;
    }

}
@media screen and (max-width: 800px){
    #navigation{
        display: none;
    }
    #sp_menu img{
        display: block;
        vertical-align: top;
    }
    .sp_head{
        position:fixed;
        width:100%;
        padding-top:14%;
        overflow: hidden;
        background: #FFF;
        z-index: 4;
        top:0;
        left:0;
    }
    .sp_tw{
        position: absolute;
        right:13.4%;
        top:0;
        width: 8.12%;
    }
    .sp_ig{
        position: absolute;
        right:3.12%;
        top:0;
        width: 8.12%;
    }
    #sp_navi{
        position: fixed;
        width:14%;
        padding-top:14%;
        background: #e60044;
        top:0;
        left:0;
         z-index: 5;
    }
    .sp_bar{
        position: absolute;
        width:44%;
        left:28%;
        padding-top:4%;
        background: #FFF;
        transition:0.2s ease-in-out;
    }
    .sp_bar:nth-child(1){
        top:35%;
    }
    .sp_bar:nth-child(2){
        top:49%;
    }
    .sp_bar:nth-child(3){
        top:62%;
    }
    .open .sp_bar:nth-child(1){
        top: 48%;
        transform: rotate(45deg);        
    }
    .open .sp_bar:nth-child(2){
        opacity: 0;
        transition:0s;
    }
    .open .sp_bar:nth-child(3){
        top: 48%;
        transform: rotate(-45deg);        
    }
    
    #sp_menu{
        position: fixed;
        width:100%;
        height: 100%;
        top:-110%;
        left:0;
        background: #FFF;
        transition:0.5s ease-in-out;
        z-index: 3;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom:10%;
    }
    .sp_bgns{
        position: relative;
        width:100%;
        margin-top:20%;
    }
    .open #sp_menu{
        top:0 !important;
    }
    
    #page_top_sp{
        position: fixed;
        width:16%;
        height: 11.6%;
        background: url("../img/sp/pagetop.png") no-repeat left bottom;
        right:3.125%;
        background-size:cover;
        animation: down_sp 2s ease-in-out infinite;
        transform-origin:left top;
        text-indent: -9999px;
        z-index: 2;
        cursor: pointer;
        transition:0.3s ease-out;
        bottom:-20%;
    }
    body .sc_active{
        bottom:3.125% !important;
    }  
    body .detail_active .sc_active{
        margin-bottom:19%;
    }
    #page_top{
        display: none;
    }


}


@keyframes down_pc {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}



@keyframes down_sp {
  0% {
    transform: translateY(0);
    -webkit-transform: translateY(0);

  }
  50% {
    transform: translateY(15%);
    -webkit-transform: translateY(15%);
  }
  100% {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}