@charset "utf-8";

/* ------------------
fv
--------------------- */
#fv {
    background: url(../images/movie/fv.jpg) no-repeat center center / cover;
}

/* ------------------
movie_area
--------------------- */
#movie_area {
    background-color: #e9f1f9;
    padding: 80px 0;
}

    #movie_area .inner {
        width: 800px;
    }

    #movie_area .movie-wrap {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    #movie_area .movie-wrap iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/* ------------------
contents
--------------------- */
#contents {
    padding: 112px 0;
}

    #contents .inner {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 0 auto 120px;
    }

    #contents #main {
        width: 550px;
    }

        #contents #main .titlebox {
            border-bottom: solid 1px #dcdcdc;
            margin: 0 0 40px;
            padding: 0 0 32px;
        }

        #contents #main .titlebox p {
            margin: 0 0 16px;
            font-size: 18px;
            font-family: 'Noto-Sans-JP-Regular';
            color: #004680;
        }

        #contents #main .titlebox h2 {
            font-size: 36px;
            font-family: 'NotoSerifCJKjp-Regular';
            line-height: 1.3;
        }

        #contents #main .text {
            font-size: 16px;
            font-family: 'Noto-Sans-JP-Light';
            line-height: 2.3;
        }

        #contents #main .sns-share {
            display: flex;
            justify-content: flex-start;
            margin: 80px 0 0 -4px;
            overflow: hidden;
        }

        #contents #main .sns-share a {
            display: block;
            width: calc( (100% - 4px * 3) / 3 );
            margin: 0 0 0 4px;
            padding: 10px 10px 14px;
            background-color: #004680;
            box-sizing: border-box;
            text-align: center;
        }

        #contents #main .sns-share a span {
            display: block;
            margin: 6px 0 0;
            font-size: 14px;
            font-family: 'Noto-Sans-JP-Light';
            color: #fff;
            letter-spacing: 2px;
        }

    #contents #sidebar {
        width: 440px;
        background: url(../images/movie/pattern_01.jpg) repeat left top;
        padding: 32px 24px 24px;
        box-sizing: border-box;
    }

        #contents #sidebar h3 {
            margin: 0 0 20px;
            font-size: 24px;
            font-family: 'NotoSerifCJKjp-Regular';
            color: #275694;
        }

        #contents #sidebar h3 span {
            display: block;
            margin: 0 0 8px;
            font-size: 16px;
            font-family: trajan-pro-3, serif;
            font-weight: 400;
            font-style: normal;
            letter-spacing: 3px;
        }

        #contents #sidebar .pickup .p_list article {
            border-top: solid 1px rgba(0,57,104,0.3);
        }

        #contents #sidebar .pickup .p_list article a {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
        }

        #contents #sidebar .pickup .p_list article a .imgbox {
            width: 170px;
        }

        #contents #sidebar .pickup .p_list article a .imgbox img {
            width: 100%;
            height: auto;
        }

        #contents #sidebar .pickup .p_list article a .textbox {
            width: calc(100% - 170px);
            padding: 0 0 0 16px;
            box-sizing: border-box;
        }

        #contents #sidebar .pickup .p_list article a .textbox h4 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            max-height: 72px;
            overflow: hidden;
            margin: 0 0 12px;
            font-size: 16px;
            line-height: 1.5;
            color: #000;
        }

        #contents #sidebar .pickup .p_list article a .textbox p {
            font-size: 14px;
            color: #004680;
        }


/* ------------------
related
--------------------- */
#related {
    background-color: #d4dbe5;
    margin: 0 auto 60px;
    padding: 84px 0;
}

    #related h2 {
        margin: 0 auto 36px;
        font-size: 36px;
        font-family: 'NotoSerifCJKjp-Regular';
        text-align: center;
        color: #275694;
        letter-spacing: 8px;
    }

    #related h2 span {
        display: block;
        margin: 0 0 12px;
        font-size: 16px;
        font-family: trajan-pro-3, serif;
        font-weight: 400;
        font-style: normal;
        letter-spacing: 4px;
    }

    #related .r_list {
        display: flex;
        justify-content: flex-start;
        margin: 0 0 0 -40px;
        overflow: hidden;
    }

    #related .r_list article {
        width: calc( (100% - 40px * 3) / 3);
        margin: 0 0 0 40px;
    }

    #related .r_list article a {
        display: block;
    }

    #related .r_list article a .imgbox {
        margin: 0 0 20px;
    }

    #related .r_list article a .textbox p {
        margin: 0 0 8px;
        font-size: 14px;
        font-family: 'Noto-Sans-JP-Regular';
        color: #004680;
    }

    #related .r_list article a .textbox h3 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        max-height: 62px;
        overflow: hidden;
        font-size: 18px;
        font-family: 'Noto-Sans-JP-Regular';
        line-height: 1.7;
        color: #000;
    }


/* -------------------------------- mobile ---------------------------------- */
@media only screen and (max-width:640px) {

/* ------------------
movie_area
--------------------- */
#movie_area {
    padding: 30px 0;
}

    #movie_area .inner {
        width: 90%;
    }

/* ------------------
contents
--------------------- */
#contents {
    padding: 40px 0;
}

    #contents .inner {
        display: block;
        margin: 0 auto 40px;
    }

    #contents #main {
        width: 100%;
        margin: 0 auto 60px;
    }

        #contents #main .titlebox {
            margin: 0 0 24px;
            padding: 0 0 20px;
        }

        #contents #main .titlebox p {
            margin: 0 0 10px;
            font-size: 12px;
        }

        #contents #main .titlebox h2 {
            font-size: 22px;
            line-height: 1.4;
        }

        #contents #main .text {
            font-size: 14px;
            line-height: 1.9;
        }

        #contents #main .sns-share {
            margin: 32px 0 0 -4px;
        }

        #contents #main .sns-share a {
            padding: 8px 8px 12px;
        }

        #contents #main .sns-share a img {
            width: 20px;
            height: auto;
        }

        #contents #main .sns-share a span {
            display: block;
            margin: 6px 0 0;
            font-size: 10px;
            letter-spacing: normal;
        }

    #contents #sidebar {
        width: 100%;
        background: url(../images/movie/pattern_01.jpg) repeat left top;
        padding: 28px 20px 20px;
        box-sizing: border-box;
    }

        #contents #sidebar h3 {
            margin: 0 0 20px;
            font-size: 20px;
        }

        #contents #sidebar h3 span {
            margin: 0 0 8px;
            font-size: 12px;
            letter-spacing: 3px;
        }

        #contents #sidebar .pickup .p_list article a {
            padding: 12px 0;
        }

        #contents #sidebar .pickup .p_list article a .imgbox {
            width: 120px;
        }

        #contents #sidebar .pickup .p_list article a .textbox {
            width: calc(100% - 120px);
            padding: 0 0 0 12px;
            box-sizing: border-box;
        }

        #contents #sidebar .pickup .p_list article a .textbox h4 {
            -webkit-line-clamp: 2;
            max-height: 42px;
            margin: 0 0 8px;
            font-size: 14px;
        }

        #contents #sidebar .pickup .p_list article a .textbox p {
            font-size: 12px;
        }


/* ------------------
related
--------------------- */
#related {
    margin: 0 auto 60px;
    padding: 40px 0;
}

    #related .inner {
        width: 100%;
        margin: 0 auto;
    }

    #related h2 {
        margin: 0 auto 24px;
        font-size: 28px;
        letter-spacing: 4px;
    }

    #related h2 span {
        display: block;
        margin: 0 0 12px;
        font-size: 14px;
        letter-spacing: 3px;
    }

    #related .r_list {
        display: flex;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 95%;
        margin: 0 0 0 auto;
    }

    #related .r_list article {
        flex: 0 0 auto;
        width: 170px;
        margin: 0 16px 0 0;
    }

    #related .r_list article a {
        display: block;
    }

    #related .r_list article a .imgbox {
        width: 100%;
        margin: 0 0 12px;
    }

    #related .r_list article a .imgbox img {
        width: 100%;
        height: auto;
    }

    #related .r_list article a .textbox p {
        margin: 0 0 6px;
        font-size: 12px;
    }

    #related .r_list article a .textbox h3 {
        max-height: 62px;
        font-size: 14px;
        line-height: 1.5;
    }

}