@media(max-width: 1024px) {
    #mainBlock h1 {
        width: 27vw;
        margin-left: 2vw;
    }

    #mainBlock .download_bar,
    #mainBlock .slogan,
    #mainBlock .nav_pc {
        display: none;
    }

    #mainBlock .mobile_menu,
    #mainBlock .btn_prereserve_m {
        display: flex;
        opacity: 1;
    }

    #mainBlock .slogan_m {
        display: block;
        width: 100%;
        position: relative;
        padding-top: 85%;
    }

    #mainBlock header {
        width: 100%;
        background: url(../images/header_bg_m.jpg)#000000 top center no-repeat;
        background-size: 100%;
        aspect-ratio: 38 / 66;
        position: relative;
    }

    #mainBlock .h3_title {
        margin-bottom: 2vh;
    }

    #mainBlock nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 14vw;
        animation: none !important;
        transition: none !important;
    }

    #mainBlock nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1rem 0;
    }

    #mainBlock .quick_menu {
        position: absolute;
        top: 2vw;
        right: 12vw;
        width: 48vw;
    }

    #mainBlock .quick_menu img {
        width: 10vw;
        transition: .2s all;
    }

    #mainBlock .eq-icon {
        width: 10vw;
        height: 10vw;
    }

    /* 每一條 Bar */
    #mainBlock .eq-icon .bar {
        width: 1vw;
        /* 原來 5px → 改為相對單位 */
        padding: 0 0.1vw;
        border-radius: 1vw;
        background: #949494;
        transform-origin: bottom;
        transition: background .2s;
    }

    #mainBlock .header_movie {
        width: 65vw;
        bottom: auto;
        display: block;
        position: relative;
        left: 17vw;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    #mainBlock .banner-wrap {
        display: none;
    }

    #mainBlock .banner_bg {
        background: url(../images/line_repeat.png)top center repeat-x;
        display: block;
        background-size: contain;
        width: 100%;
        height: 3vh;
    }

    #mainBlock .img-box {
        width: 60vw;
        /* 固定容器寬高 */
        margin: 2vh auto;
    }

    #mainBlock .banner_section {
        background: #000000;
        padding-top: 3vh;
    }

    #mainBlock .prereserve_block {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
    }

    #mainBlock .prereserve_section {
        padding: 5vh 0;
    }

    #mainBlock .prereserve_block_l {
        width: 100%;
    }

    #mainBlock .prereserve_block_r {
        width: 100%;
    }

    #mainBlock .title {
        width: 40%;
    }

    #mainBlock .country-code {
        width: 40%;
        font-size: 4vw;
        background-image: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" xmlns="http://www.w3.org/2000/svg"><path d="M1 1l5 5 5-5" stroke="%23d4af37" stroke-width="2" fill="none" stroke-linecap="round"/></svg>');
        background-repeat: no-repeat;
        background-position: right 0px center;
        /* 箭頭位置 */
        background-size: 4vw;
    }

    /* 標題 */
    #mainBlock .label-title {
        font-size: 5vw;
        margin-top: 6vw;
        display: block;
        color: #ddc1a9;
    }

    #mainBlock .prereserve_item,
    #mainBlock .bg_1,
    #mainBlock .bg_2 {
        display: none;
    }

    #mainBlock .prereserve_item_m {
        display: block;
    }

    #mainBlock .prereserve_notice {
        position: absolute;
        width: 45%;
        margin-top: -40%;
        left: 47%;
    }

    #mainBlock .input-group input {
        font-size: 4vw;
        color: #fff;
    }

    #mainBlock .agree label {
        margin-left: 1vw;
        font-size: 3vw;
    }

    #mainBlock .prereserve_bg_m,
    #mainBlock .cast_bg_m,
    #mainBlock .character_bg_m {
        display: flex;
    }

    #mainBlock .award_section {
        font-size: 4vw;
    }

    #mainBlock .award_content {
        width: 90%;
        flex-wrap: wrap;
    }

    #mainBlock .award_content ul {
        width: 100%;
    }

    #mainBlock .char_bar {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #mainBlock .char_logo {
        width: 100%;
    }

    #mainBlock .char_logo img {
        width: 40%;
    }

    #mainBlock .scroll-wrapper {
        width: 100%;
    }

    /* 左右按鈕 */
    #mainBlock .btn {
        padding: 5vw 5vw;
    }

    #mainBlock .box {
        width: 60%;
        /* 固定容器寬高 */
        padding-bottom: 5%;
    }

    #mainBlock .char_name {
        width: 80%;
        font-size: 4.5vw;
        padding: 6.5% 0;
    }

    #mainBlock .txt_intro {
        width: 80%;
    }

    #mainBlock #gallery {
        width: 90vw;
    }

    #mainBlock .thumbs img {
        width: 100px;
    }

    #mainBlock .thumbs {
        gap: 2vw;
    }

    #mainBlock .thumb-box {
        width: 100px;
    }

    #mainBlock .thumb-nav {
        width: 10%;
        padding-bottom: 10%;
        cursor: pointer;
        opacity: 0.6;
    }

    #mainBlock .footer_section {
        width: 100%;
        height: 100vh;
        background: url(../images/img_lighthouse_sp.jpg)center center no-repeat;
        background-size: cover;
    }

    #mainBlock nav li a {
        font-size: 2.2rem;
        line-height: 3rem;
    }

    /* 登入視窗 */
    #mainBlock #success-modal,
    #mainBlock #notice-modal,
    #mainBlock #failed-modal,
    #mainBlock #info-modal {
        line-height: 6vw;
        font-size: 4vw;
    }

    /* 右上角的白色 X 按鈕 */
    #mainBlock .close-btn {
        font-size: 4vw;
    }

    #mainBlock h4 img {
        margin-bottom: 4vw;
    }

    #mainBlock .popup_btn,
    #mainBlock .pupup_sns {
        margin-bottom: 4vw;
    }

    #mainBlock #success-modal {
        padding: 10vw 0;
    }

    #mainBlock #failed-modal, #mainBlock #info-modal {
        padding: 25vw 0;
    }

    #mainBlock .popup_btn img {
        width: 35vw;
        padding: 1vw;
    }

    #mainBlock .popup_sns img {
        width: 10vw;
        padding: 0.5vw;
    }

    #mainBlock .notice_in {
        font-size: 3vw;
        line-height: 5vw;
    }

    #mainBlock .char_list {
        width: 100%;
        padding: 2vh 0;
    }

    #mainBlock .char_list_in {
        width: 96%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    #mainBlock .char_list_l {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 2vh;
    }

    #mainBlock .char_list_l img {
        width: 40%;
    }

    #mainBlock .char_list_r {
        width: 90%;
    }

    #mainBlock .char_list_r img {
        width: 47%;
        margin: 1%;
    }

    #mainBlock .btn_back {
        display: inline-block;
        font-size: 4vw;
        left: 65vw;
        position: relative;
    }

    #mainBlock .btn_more {
        font-size: 4vw;
        display: inline-block;
        margin-top: 4vw;
    }

    #mainBlock .character_section_in {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    #mainBlock .character_logo {
        width: 50%;
        margin-bottom: 5%;
    }

    #mainBlock .character_btn {
        display: flex;
        width: 30%;
        margin: 5% auto;
    }

    #mainBlock .character_section {
        display: none;
    }

    #mainBlock .character_section_m {
        position: relative;
        /* ⭐ 最重要 */
        width: 100%;
        padding-top: 10%;
        display: block;
        overflow: hidden;
        /* 防止背景超出 */
    }

    #mainBlock .character_img {
        width: 85%;
        margin-right: 15%;
    }

    #mainBlock .character_movie {
        width: 45%;
    }

    #mainBlock .char_intro {
        color: #ffffff;
        font-size: 4vw;
        line-height: 6vw;
        width: 90%;
        left: 5%;
        position: relative;
    }

    #mainBlock h5 {
        font-size: 8vw;
        line-height: 9vw;
    }

    #mainBlock .char_intro img {
        width: 4vw;
    }

    #mainBlock .news_section {
        padding: 10vh 0 20vh;
    }

    #mainBlock .news_block,
    #mainBlock .news_list_section_in {
        flex-direction: column;
        width: 90%;
        font-size: 4vw;
        line-height: 7vw;
    }

    #mainBlock .news_block_l {
        width: 100%;
    }

    #mainBlock .news_block_l img {
        width: 60%;
    }

    #mainBlock .news_block_r {
        width: 100%;
    }

    #mainBlock .news_block li a,
    #mainBlock .news_list_section_in li a {
        padding: 1em 0 1em 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #mainBlock .news_block .date,
    #mainBlock .news_list_section li .date {
        width: 100%;
        height: auto;
        padding: 1vw 0;
    }

    #mainBlock .news_block .content_title,
    #mainBlock .news_list_section li .content_title {
        width: 100%;
        height: auto;
    }

    #mainBlock h7 {
        font-size: 4vw;
        padding-bottom: 2vw;
        margin-bottom: 2vw;
        line-height: 7vw;
    }

    #mainBlock .news_content_section_in {
        font-size: 3vw;
        line-height: 5vw;
        width: 90%;
    }

    #mainBlock .news_content_section_in p {
        line-height: 5vw;
        margin: 4vw 0;
    }

    /* 動畫高度也換成相對單位（會更一致） */
    @keyframes eqAnim {
        0% {
            height: 2.5vw;
        }

        25% {
            height: 7vw;
        }

        50% {
            height: 4.5vw;
        }

        75% {
            height: 8.5vw;
        }

        100% {
            height: 2.5vw;
        }
    }

    #mainBlock .popup_btn a {
        width: 30vw;
        padding: 1vw;
    }

    #mainBlock .popup_sns a {
        width: 10vw;
        padding: 0.4vw;
    }

    #mainBlock .pad_block {
        padding-top: 12vw;
    }

    #mainBlock .pc {
        display: none;
    }

    #mainBlock .cast_block .cast_list_item {
        padding: 0 1.2rem;
        margin-bottom: 1.8rem;
        font-size: 1rem;
    }

    #mainBlock .cast_block .cast_more {
        width: 100%;
        font-size: 0.725rem;
        text-align: center;
    }

    #mainBlock .footer_wrap {
        background-color: #071c30;
    }

    #mainBlock .contents_staff {
        background-image: url("../images/frame_sp.png");
        width: 66.66vw;
        height: 96.4vw;
        margin: 0 auto;
        text-align: center;
        position: relative;
        min-width: auto;
    }

    #mainBlock .contents_staff ul {
        display: block;
        position: absolute;
        width: 100%;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #mainBlock .contents_staff_list {
        display: block;
        width: 100%;
    }

    #mainBlock .contents_staff_list::after {
        content: "";
        height: 1px;
        width: 3rem;
        background: #FDE4AB;
        position: absolute;
        left: calc(50% - 1.5rem);
        bottom: 0;
    }

    #mainBlock .contents_staff ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    #mainBlock .contents_staff_list:nth-child(1),
    #mainBlock .contents_staff_list:nth-child(2),
    #mainBlock .contents_staff_list:nth-child(3) {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    #mainBlock .contents_staff_list .staff-role {
        margin-bottom: 2.66vw;
        font-size: 1.2rem;
        text-align: center;
    }

    #mainBlock .contents_staff_list .staff-role::after {
        content: "";
        padding: 0;
    }

    #mainBlock .contents_staff_list .staff-logo img {
        width: auto;
        height: 8vw;
    }

    #mainBlock .scroll-wrapper-block {
        width: 98%;
    }

/*    #mainBlock .left-btn,
    #mainBlock .right-btn {
        display: none !important;
    }*/
}

@media(max-width: 575.98px) {
    #mainBlock .contents_staff_list .staff-role {
        font-size: 0.725rem;
    }
}