@media (max-width:1024px) {
    .main_navi { width: 75%;}

    #home_header .main_navi { left: calc(50% - 37.5%);}
}

@media (max-width:767px) {

    /* ----------- common ----------- */
    body { background: url(../images/back_sp.jpg) repeat-y top 5.5% center / 100%;}

    #header { 
        background: url(../images/top_deco_sp.png) no-repeat top center / 100%;
        padding-top: 37.38%;
    }

    #header h1 {
        width: 80%;
        top: 15%;
        left: calc(50% - 40%);
    }

    .pc_only { display: none;}

    .sp_only { display: block;}

    .content_wrapper {
        background: url(../images/top_deco_sp.png) no-repeat top center / 100% ,url(../images/back_sp.jpg) repeat-y top / 100%;
        padding-top: 110%;
    }

    .inner_wrapper { 
        width: 80%;
        padding-bottom: 10%;
    }

    .main_navi { width: 80%;}

    #page h2 {
        font-size: 9.3vw;
        margin-bottom: 7%;
    }

    #page h2::before, #page h2::after { width: 25%;}

    #page-top {
        right: 3%;
        width: 14%;
    }
    /* ----------- common ----------- */


    /* ----------- top ----------- */
    #home_header div {
        padding-top: 168%;
        background: url(../images/main_img_sp.jpg) no-repeat top center / 100%;
    }

    #home_header h1, #home_header p { right: calc(50% - 40%);}

    #home_header h1 {
        width: 80%;
        top: 7%;
    }

    #home_header p { width: 80%;}

    #home_header .main_navi { 
        bottom: -22%;
        left: calc(50% - 40%);
    }

    .main_navi ul { font-size: 3vw;}

    .main_navi ul li { 
        width: 22%;
        margin-bottom: 5%;
    }

    .delivery {
        flex-direction: column;
        width: 80%;
        left: calc(50% - 40%);
        bottom: -57%;
    }

    .delivery li { width: 100%;}

    .delivery li:first-child { margin-bottom: 3%;}
    /* ----------- top ----------- */
 

    /* ----------- sns ----------- */
    #sns ul { width: 70%;}
    /* ----------- sns ----------- */


    /* ----------- trailer ----------- */
    #trailer .movie { width: 100%;}

    #trailer p:first-of-type {
        font-size: 4.5vw;
        margin-bottom: 3%;
    }

    #trailer p:nth-of-type(2) {
        font-size: 3.8vw;
        margin-bottom: 5%;
    }

    #trailer p:last-of-type {
        width: 100%;
        font-size: 3vw;
    }

    #trailer p:last-of-type a { padding: 4%;}

    #intro p:first-of-type { margin-bottom: 7%;}

    #intro picture img { width: 100%;}

    #intro p:last-of-type {
        font-size: 3.4vw;
        text-align: justify;
    }
    /* ----------- trailer ----------- */


    /* ----------- story ----------- */
    #story p:first-of-type {
        font-size: 4.5vw;
        margin-bottom: 3%;
    }

    #story p:nth-of-type(2) {
        font-size: 3.8vw;
        margin-bottom: 5%;
    }

    #story p:last-of-type {
        font-size: 3.5vw;
        margin-bottom: 7%;
    }

    #story .scene_photo,
    #story .recent_story ul { gap: 10px;}

    #story h3 {
        font-size: 3.5vw;
        margin-bottom: 5%;
    }

    #story .recent_story ul {
        grid-template-columns: 1fr 1fr;
    }

    #story .recent_story p { margin-bottom: 0;}

    #story .story_top { 
        width: 60%;
        font-size: 3.3vw !important;
        margin-top: 5%;
    }
    /* ----------- story ----------- */


    /* ----------- cast ----------- */
    #cast section {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding-bottom: 10%;
        margin-bottom: 10%;
    }

    #cast figure {
        width: 75%;
        margin-bottom: 5%;
    }

    #cast h3 {
        font-size: 6vw;
        text-align: center;
        margin-bottom: 5%;
    }

    #cast .role_name {
        font-size: 3.5vw;
        margin-bottom: 5%;
        text-align: center;
    }

    #cast .detail_txt { width: 100%;}

    #cast .role_detail,
    .comment_profile p {
        font-size: 3vw;
        line-height: 1.5;
    }

    #cast .role_detail { text-align: center;}

    .comment_profile_hd {
        font-size: 3.5vw;
        margin-bottom: 2%;
    }
    /* ----------- cast ----------- */


    /* ----------- original ----------- */
    #original h2::before,
    #original h2::after { width: 20% !important;}

    #original h3 {
        font-size: 6vw;
        margin-bottom: 3.5%;
    }

    #original .book_detail { font-size: 3.5vw;}

    #original .author_img { margin-bottom: 5%;}

    #original .author_img figure { width: 48%;}

    #original .comment_profile_hd {
        font-size: 3.8vw;
        text-align: left;
    }

    #original .comment_profile p {
        text-align: justify;
        font-size: 3.5vw;
        line-height: 1.7;
    }
    /* ----------- original ----------- */


    /* ----------- theme song ----------- */
    #theme_song h2::before,
    #theme_song h2::after { width: 10% !important;}

    #theme_song section {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding-bottom: 10%;
        margin-bottom: 10%;
    }

    #theme_song .detail_txt,
    #theme_song figure { width: 100%;}

    #theme_song figure { margin-bottom: 4%;}

    #theme_song h3 {
        font-size: 3.8vw;
        text-align: center;
    }

    #theme_song .song_name {
        font-size: 6vw;
        line-height: 1.2;
        text-align: center;
    }

    #theme_song .label {
        font-size: 3.5vw;
        text-align: center;
    }
    /* ----------- theme song ----------- */


    /* ----------- outline ----------- */
    #outline h2::before,
    #outline h2::after { width: 22% !important;}

    #outline dl { 
        flex-direction: column;
        font-size: 3vw;
    }

    #outline dt, #outline dd { 
        width: 100%;
        padding: 0;
    }

    #outline dt {
        border-bottom: none;
        padding-top: 3.5%;
        padding-left: 0;
        padding-bottom: 0;
    }

    #outline dd { 
        padding-bottom: 3.5%;
        line-height: 1.7;
    }
    /* ----------- outline ----------- */


    /* ----------- news ----------- */
    #news article { 
        padding: 7% 5%;
        margin-bottom: 20%;
    }

    #news h3 {
        font-size: 6vw;
        line-height: 1.3;
    }

    #news h3 .present_ttl {
        font-size: 75%;
        margin-bottom: 2%;
    }


    #news .main_img01 { width: 100%;}

    #news .copyright { font-size: 2.5vw;}

    #news dl { 
        flex-direction: column;
        margin-bottom: 7%;   
    }

    #news dt, #news dd { width: 100%;}

    #news dt { 
        border-bottom: none;
        padding-left: 0;
        font-size: 3vw;
        padding-top: 4.5%;
        padding-bottom: 0;
    }

    #news dd {
        font-size: 2.8vw;
        line-height: 1.7;
        padding-bottom: 4.5%;
    }

    #news .form_link { 
        width: 100%;
        font-size: 3.5vw;   
        line-height: 3;
    }

    #news .item_intro {
        font-size: 3.3vw;
        text-align: justify;
    }

    #news h4 { font-size: 3.3vw;}

    #news h5 {
        font-size: 3vw;
        text-align: center;
        margin-top: 20%;
        margin-bottom: 5%;
    }

    #news h5::before, #news h5::after { width: 8%;}

    #news .book_buy_link {
        flex-direction: column;
        align-items: center;
    }

    #news .book_buy_link p {
        width: 100%;
        font-size: 3.5vw;
    }

    #news .book_buy_link p a { padding: 6%;}

    #news .book_buy_link p:first-of-type { margin-bottom: 5%;}

    #news .caution { font-size: 3vw;}
    /* ----------- news ----------- */

}