@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

body{
    font-size: 20px;
    letter-spacing: 0.5px;
}

/*a:visited {
    color:
}*/

a:hover {
    opacity: 0.8;
}

h1,
h2,
h3,
h4,
h5,
p,
pre {
    font-family: sans-serif;
}

/* フォント */

.gosick {
    font-family: initial;
}

@media (min-width:480px){

    #mobile_show{
        display: none;
    }

    /* header */

    .bg_line{
        background-image: url(../img/pc/bg_01.png);
        background-repeat: repeat;
        height: 800px;
    }

    .w_control{
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
    }

    .link_icon{
        padding: 20px 0 0 0;
    }

    .left_side{
        flex: 1;
        max-width: 155px;
    }

    .blank{
        flex: 3;
    }

    .right_side{
        flex: 1;
        max-width: 180px;
    }

    .right_side img{
        margin: 0 0 0 3px;
    }

    .main_img{
        max-width: 1000px;
        margin: 0 auto;
    }

    .posi_1{
        position: relative;
        top: -210px;
        left: 330px;
    }

    .posi_2{
        position: relative;
        top: -140px;
        left: -135px;
    }

    .posi_3{
        position: relative;
        top: -353px;
        left: 223px;
    }

    .move_1{
        animation: updown 3s steps(4) infinite;
    }

    @keyframes updown{
        0% {transform: translateY(0);}
        20% {transform: translateY(-2px);}
        60% {transform: translateY(5px);}
        100%{transform: translateY(0);}
    }

    .move_2{
        animation: runrun 2s steps(4) infinite;
    }

    @keyframes runrun{
        0% {transform: rotate(0deg);}
        25% {transform: rotate(3deg);}
        50% {transform: rotate(0deg);}
        75% {transform: rotate(-3deg);}
        100%{transform: rotate(0deg);}
    }

    .move_3{
        animation: lanp 2s steps(4) infinite;
    }

    @keyframes lanp{
        0% {opacity: 0%;}
        25% {opacity: 10%;}
        50% {opacity: 30%;}
        75% {opacity: 10%;}
        100%{opacity: 0%;}
    }



    /* watch's_program */

    .whats_program{
        display: block;
        margin: -175px auto 0 auto; 
    }

    .obi{
        font-size: 2vw;
        text-align: center;
        padding: 20px;
        background-color: #9ac514;
        color: white;
    } 

    .whats_program img{
        position: relative;
        left: 20%;
        bottom: -115px;
    }

    .whats_program p{
        color: #082412;
        max-width: 1000px;
        margin: 50px auto;
        font-weight:1000;
        text-align: center;
        font-size: 1.4vw;
    } 

    /* movie */

.bg_line_3{
        background-image: url(../img/pc/bg_01.png);
        background-repeat: repeat;
    }


    .movie{
        text-align: center;
    }

    /* 動画link */
.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
    margin: 0 auto;
    overflow: hidden;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
}

    /*.movie img{
        margin: 45px 0 0 0;
    }*/


    /* actor */

    .item_2{
        position: relative;
        left: 70%;
        bottom: -165px;
    }

    .container{
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
    }

    .cast{
        justify-content: space-around;
        margin: 50px 0 40px 0;
    }

    .cast h3{
        text-align: center;
        margin: 10px 0; 
    }
.cast h5 {
        text-align: center;
    }


    /* shop_info */

    .shop_info p{
        color: #082412;
        max-width: 1000px;
        margin: 50px auto;
        font-weight:1000;
        text-align: center;
        font-size: 1.4vw;
    } 

    .shop_info_h2{
        color: #082412;
        margin: 50px 0 20px 0;
        font-weight:1000;
        text-align: center;
        font-size: 2vw;
    } 

    .link_banner{
        max-width: 1000px;
        margin: 0 auto 50px auto;
    }


    /* sns */

    .sns{
        display: flex;
        flex-direction: column;
    }

    .bg_line_2{
        background-image: url(../img/pc/bg_01.png);
        background-repeat: repeat;
        height: 370px;
    }

    .sns_icon{
        margin: 0 auto;
    }

    .sns_icon h2{
        text-align: center;
        padding:100px 0 30px 0 ; 
    }

    .sns_icon_flex{
        display: flex;
        max-width: 1000px;
        margin: 0 auto;
    }

    .sns_icon_flex img{
        margin: 0 0 0 30px;
    }

    /* footer */

    .cp{
        display: block;
        text-align: center;
        margin: 20px auto 40px auto;
    }

}

@media (max-width:480px) {

    /**{
        border: mediumvioletred 1px solid;
    }*/

/* header */

#pc_show{
    display: none;
}



.menu-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        height: 60px;
        width: 60px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #9ac514;
    }

    .menu-btn span,
    .menu-btn span:before,
    .menu-btn span:after {
        content: '';
        display: block;
        height: 3px;
        width: 25px;
        border-radius: 3px;
        background-color: #ffffff;
        position: absolute;
    }

    .menu-btn span:before {
        bottom: 8px;
    }

    .menu-btn span:after {
        top: 8px;
    }

    #menu-btn-check:checked~.menu-btn span {
        background-color: #9ac514;
        /*メニューオープン時は真ん中の線を透明にする*/
    }

    #menu-btn-check:checked~.menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    #menu-btn-check:checked~.menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

    #menu-btn-check {
        display: none;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 80;
        background-color: #9ac514;
    }

    .menu-content ul {
        padding: 70px 10px 0;
    }

    .menu-content ul li {
        border-bottom: solid 1px #ffffff;
        list-style: none;
    }

    .menu-content ul li a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        color: #ffffff;
        text-decoration: none;
        padding: 9px 15px 10px 0;
        position: relative;
    }

    .menu-content ul li a::before {
        content: "";
        width: 7px;
        height: 7px;
        border-top: solid 1px #ffffff;
        border-right: solid 1px #ffffff;
        transform: rotate(45deg);
        position: absolute;
        right: 11px;
        top: 16px;
    }

    .menu-content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 100%;
        /*leftの値を変更してメニューを画面外へ*/
        z-index: 80;
        background-color: #9ac514;
        transition: all 0.5s;
        /*アニメーション設定*/
    }

    #menu-btn-check:checked~.menu-content {
        left: 0;
        /*メニューを画面内へ*/
    }




.bg_line{
    background-image: url(../img/mobile/bg_01.png);
    background-repeat: repeat;
}

.top_link{
    display: flex;
    /*padding: 2% 2% 0 2%;*/
    width: 100%;
}

/*.top_link_icon{
    width: 100%;
    position: relative;
    left: 20%;
}*/

.top_logo{
    padding: 2% 2% 0 2%;
}

.position_set_1 {
    display: block;
    width: 96%;
    margin: 0 2%;
    z-index: 70;
}

.move_1{
        animation: updown 3s steps(4) infinite;
    }

    @keyframes updown{
        0% {transform: translateY(0);}
        20% {transform: translateY(-2px);}
        60% {transform: translateY(5px);}
        100%{transform: translateY(0);}
    }


.position_set_2 {
    display: block;
    width: 76%;
    margin: -2% 12% 0 12%;
    z-index: 80;
}

.position_set_3 {
    display: block;
    width: 50%;
    margin: -3% 25% 0 25%;
    z-index: 90;
}

.move_2{
        animation: runrun 2s steps(4) infinite;
    }

    @keyframes runrun{
        0% {transform: rotate(0deg);}
        25% {transform: rotate(3deg);}
        50% {transform: rotate(0deg);}
        75% {transform: rotate(-3deg);}
        100%{transform: rotate(0deg);}
    }

.move_0{
        animation: nomove 3s steps(4) infinite;
    }

    @keyframes nomove{
        0% {transform: translateY(0);}
        20% {transform: translateY(0);}
        60% {transform: translateY(0);}
        100%{transform: translateY(0);}
    }

.position_set_4 {
    display: block;
    width: 75%;
    margin: -15% 12.5% 0 12.5%;
    z-index: 100;
}

.img_cover{
    position: relative;
    width: 75%;
    margin: -75% 12.5% 0 12.5%;
}


/* whats_program */

.obi{
        font-size: 5vw;
        text-align: center;
        padding: 10px;
        background-color: #9ac514;
        color: white;
    } 

.position_set_5{
    position: relative;
    width: 10%;
    margin: -5% 0 -15% 3%;
}

.whats_program p{
        color: #082412;
        width: 94%;
        margin: 2.5% 3%;
        font-weight:1000;
        text-align: center;
        font-size: 4vw;
    } 

/* movie */

.bg_line_3{
        background-image: url(../img/mobile/bg_01.png);
        background-repeat: repeat;
    }

.movie{
    width: 100%;
    height: auto;
}

/*.movie img{
    width: 90%;
    margin: 0 5%;
}*/

    /* 動画link */
.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    width: 100%;
    height: 0;
    margin: 0 auto;
    overflow: hidden;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    margin: 5% 10%;
}


/* actor */

.position_set_6{
    position: relative;
    width: 20%;
    margin: -2% 0 -5% 75%;
}

.position_set_7{
    width: 40%;
    margin: 5% 30% 1% 30%;
}

.actor h3{
    text-align: center;
}

.actor h5 {
        text-align: center;
    }

.actor h3:last-child{
    text-align: center;
    margin-bottom: 5%;
}

/* actor */

.obi_2{
        font-size: 3.8vw;
        text-align: center;
        padding: 10px;
        background-color: #9ac514;
        color: white;
        margin-top: -5%;
    } 

.shop_info p{
        color: #082412;
        width: 94%;
        margin: 2.5% 3%;
        font-weight:1000;
        text-align: center;
        font-size: 4vw;
    } 

  .shop_info_h2{
        color: #082412;
        margin: 50px 0 20px 0;
        font-weight:1000;
        text-align: center;
        font-size: 5vw;
    } 

/* sns */

    .shop_banner{
        width: 80%;
        margin: -3% 10% 0 10%;
    }

.sns{
        display: flex;
        flex-direction: column;
        margin: 5% 0;
    }

.sns_icon{
        margin: 0 auto;
    }

    .sns_icon h2{
        text-align: center;
        padding:5% 0 2% 0 ; 
    }

.bg_line_2{
        background-image: url(../img/mobile/bg_01.png);
        background-repeat: repeat;
        height: 150px;
    }

.sns_h2{
        color: #082412;
        margin: 7.5% 0 2% 0;
        font-weight:1000;
        text-align: center;
        font-size: 5vw;
    } 

/* footer */

    .cp{
        display: block;
        text-align: center;
        margin: 2% auto 4% auto;
        font-size: 2.5vw;
    }

}