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

    /* ここにSP向けのCSS指定 */
    .pc {
        display: none;
    }
}

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

    /* ここにPC向けのCSS指定 */
    .sp {
        display: none;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

* {
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    font-family: sans-serif;
}

#top_wrapper {
    overflow-x: hidden;
    width: 100%;
}


a {
    color: #fff;
    text-decoration: none;
}

img {
    width: 100%;
    vertical-align: top;
}

video {
    width: 100%;
}

.top_gradation {
    background: linear-gradient(90deg, #ffffff, #fff56d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.top_gradation_b {
    background: linear-gradient(90deg, #ff4141, #ff6d88);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.font-maru {
    font-family: "Kiwi Maru", serif;
}

.contents {
    padding: 10vw 2vw;
    text-align: center;
}

.schedule_ornament {
    display: flex;
    justify-content: space-between;
    align-items: end;
    border-bottom: dotted 1px;
    padding: 1vw;
    width: 60%;
    margin: -5vw auto 1vw;
    color: #ff0053;
}


.schedule_icon {
    width: 2.6vw;
}

.schedule_ornament_text {
    font-size: 1.1vw;
    letter-spacing: 0.16vw;
}


li.cast_name {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 1vw;
    color: #632325;
    font-size: 1.6vw;
    font-weight: 600;
    /* letter-spacing: -0.2vw; */
    margin-bottom: 0.5vw;
}

span._age {
    font-size: 0.8vw;
    letter-spacing: 0.06vw;
}

li._shift {
    color: #3f0b1b;
    border: solid 1px;
    border-radius: 0.7vw;
    padding: 0.4vw;
    font-size: 0.9vw;
    font-weight: 600;
    letter-spacing: 0.1vw;
    width: 70%;
    margin: 0 auto 0.5vw;
    text-align: center;
}

li.cast_size {
    color: #3f0b1b;
    font-size: 0.85vw;
    font-weight: 600;
    letter-spacing: 0.1vw;
    margin-bottom: 1vw;
}

ul._icon_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5vw;
    width: 10.8vw;
    margin: 0 auto 1.3vw;
}

img.castStateIcons__icon--twitter--off,
img.castStateIcons__icon--syame--off,
img.castStateIcons__icon--new--off {
    filter: opacity(0.1);
}

.pagetitle {
    font-size: 3vw;
    font-weight: 600;
    letter-spacing: 0.2vw;
    margin: auto;
}

.jp_title {
    font-size: 0.9vw;
    font-weight: 600;
    margin-bottom: 1.1vw;
}



@media(max-width:767px) {
    .contents {
        padding: 25vw 0vw;
    }

    ul._icon_list {
        width: 41vw;
        gap: 1.6vw;
    }

    .cast_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1vw;
        padding: 0 1vw;
    }

    section.top_schedule_area {
        padding: 5vw 0 10vw;
    }

    .castPanel.castPanel--middle {
        border-radius: 0 0 2vw 2vw;
    }

    .castPanel__datas {
        padding: 3vw;
    }

    .short_movie_cast_name {
        margin: 2.5vw 0 2.5vw !important;
        font-size: 5.6vw !important;
    }

    li.cast_name {
        gap: 3.5vw;
        font-size: 6.4vw;
        letter-spacing: 0vw;
        margin-bottom: 1.6vw;
    }

    span._age {
        font-size: 4vw;
        letter-spacing: 0.1vw;
    }

    li._shift {
        border-radius: 4vw;
        padding: 1.3vw;
        font-size: 3.7vw;
        letter-spacing: 0.1vw;
        width: 78%;
        margin: 0 auto 2.3vw;
    }

    li.cast_size {
        font-size: 2.6vw;
        letter-spacing: 0.8vw;
        margin-bottom: 3.3vw;
    }

    .schedule_icon {
        width: 8.6vw;
    }

    .schedule_ornament {
        width: 100%;
        margin: -18vw auto 5vw;
        padding: 0 5vw 10vw;
        border: none;
    }

    .pagetitle {
        font-size: 10vw;
        letter-spacing: 0.2vw;
        margin: 0 auto 0.5vw;
    }

    .jp_title {
        font-size: 4.1vw;
        margin-bottom: 3vw;
        letter-spacing: 1.4vw;
    }

    .logo_area {
        position: absolute;
        left: 4vw;
        top: 1.8vw;
        display: flex;
        align-items: center;
        gap: 5vw;
        height: 13vw;
    }

    .logo_area a {
        /* width: 13vw; */
    }

    .logo_area h2 {
        color: #fff;
        font-weight: 600;
        font-size: 4.5vw;
    }

}