@media screen and (min-width: 769px) {
    #warp {
        width: 100%;
        margin: 0 auto;
    }

    #head {
        width: 100%;
        margin: 0 auto;
        background: url(../img/head_bk.jpg) no-repeat top center #fff000;
        background-size: contain;
    }

    #head .head_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
    }

    #head .head_in h1 {
        margin: 0 auto;
        background: url(../img/head_logo.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(901 / 1920 * 100%);
        font-size: 0px;
    }

    #about {
        width: 100%;
        margin: 0 auto;
        background: #fff000;
    }

    #about .mc {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/mc_bk.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #about .mc .mc_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
    }

    #about .mc .mc_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/mc.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(758 / 1300 * 100%);
    }

    #about .read {
        width: 100%;
        line-height: 0;
        margin: 0;
        font-size: 0px;
    }

    #about .read .read_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
    }

    #about .read .read_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/read.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(756 / 1300 * 100%);
    }

    #about .cast {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/cast_bk.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #about .cast .cast_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
    }

    #about .cast .cast_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/cast.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(1037 / 1300 * 100%);
    }

    #content {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/content_bk.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #content .content_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
    }

    #content .content_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/content.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(917 / 1300 * 100%);
    }

    #footer {
        width: 100%;
        margin: 0 auto;
        background: #fff000;
    }

    #footer .footer_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
        font-size: 0px;
    }

    #footer .footer_in p {
        margin: 0 auto;
        background: url(../img/footer.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(508 / 1300 * 100%);
    }

    #page-top {
        position: fixed;
        bottom: -140px;
        right: 5px;
        width: 191px;
        height: 136px;
        opacity: 1;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    #page-top a {
        display: block;
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/pagetop.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(136 / 191 * 100%);
        font-size: 0px;
        text-decoration: none;
    }
}

@media screen and (max-width: 768px) {

    #warp {
        width: 100%;
        margin: 0 auto;
    }

    #head {
        width: 100%;
        margin: 0 auto;
        background: url(../img/head_bk_sp.jpg) no-repeat top center #fff000;
        background-size: contain;
    }

    #head .head_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
    }

    #head .head_in h1 {
        margin: 0 auto;
        background: url(../img/head_logo_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(789 / 768 * 100%);
        font-size: 0px;
    }


    #about {
        width: 100%;
        margin: 0 auto;
        background: #fff000;
    }

    #about .mc {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/mc_bk_sp.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #about .mc .mc_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
    }

    #about .mc .mc_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/mc_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(495 / 768 * 100%);
    }

    #about .read {
        width: 100%;
        line-height: 0;
        margin: 0;
        font-size: 0px;
    }

    #about .read .read_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
    }

    #about .read .read_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/read_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(1199 / 768 * 100%);
    }

    #about .cast {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/cast_bk_sp.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #about .cast .cast_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
    }

    #about .cast .cast_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/cast_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(1129 / 768 * 100%);
    }

    #content {
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/content_bk_sp.jpg) no-repeat top center;
        background-size: cover;
        font-size: 0px;
    }

    #content .content_in {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        line-height: 0;
    }

    #content .content_in h2{
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/content_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(1422 / 768 * 100%);
    }

    #footer {
        width: 100%;
        margin: 0 auto;
        background: #fff000;
    }

    #footer .footer_in {
        width: 100%;
        margin: 0 auto;
        line-height: 0;
        font-size: 0px;
    }

    #footer .footer_in p {
        margin: 0 auto;
        background: url(../img/footer_sp.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(774 / 768 * 100%);
    }

    #page-top {
        position: fixed;
        bottom: -140px;
        right: 5px;
        width: 80px;
        height: 80px;
        opacity: 1;
        -webkit-transition: all 1s;
        transition: all 1s;
    }

    #page-top a {
        display: block;
        width: 100%;
        line-height: 0;
        margin: 0;
        background: url(../img/pagetop.png) no-repeat top center;
        background-size: contain;
        padding-top: calc(80 / 103 * 100%);
        font-size: 0px;
        text-decoration: none;
    }

}

a:hover {
    opacity: 0.8;
}