/* ======================
慌宥
====================== */
.page-movie article header {
    line-height: 180%;
}

.page-movie .header-wrap {
    margin-bottom:25px;
    padding-top:15px;
}

.page-movie article header time {
    display: inline-block;
    font-size: 80%;
    color: #8F0119;
    margin: 0 5px 0 0;
}

.page-movie article .header-desc {
    line-height: 150%;
}

.page-movie article header h1 {
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 150%;
    font-size: 180%;
    margin: 20px 0 40px 0;
    padding: 0 0 15px 0;
    border-width: 0 0 1px 0;
    border-style: solid;
    border-color: #bebebe;
}

.page-movie article header h2 {
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 150%;
    font-size: 180%;
    margin: 0;
    padding: 0;
}

.page-movie .moviesBox .moviesBox-item .thumbnail {
    margin:0;
    padding:0;
    margin-bottom:10px;
}

.page-movie .movie-data {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.page-movie .movie-data iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100% !important;
    height: 100% !important;
}

.page-movie .movie-categories {
    margin:0;
    padding:0;
    margin-bottom:10px;
    display:flex;
    flex-wrap:wrap;
}

.page-movie .movie-categories li {
    margin-right:4px;
    margin-bottom:3px;
}

.page-movie .movie-categories li a {
    display:block;
    background:#ffffff;
    border:1px solid #bebebe;
    border-radius: 15px;;
    color:#333;
    text-decoration:none;
    padding:5px;
    font-size:80%;
    line-height:110%;
}

.page-movie .moviesBox .moviesBox-item .title {
    font-size:110%;
    line-height:120%;
    font-weight:bold;
}

.page-movie .moviesBox .moviesBox-item img {
    width:100%;
    height:auto;
}

.page-movie .select-category-wrap {
    display:flex;
    padding:5px;
    background-color: #9a0119;
    background-size:8px 8px;
    background-repeat: repeat;
    background-image:
        repeating-linear-gradient(
            -45deg,
            #eacccc75 0, #eacccc75 25%,
            #9a0119 25%, #9a0119 50%,
            #eacccc75 50%, #eacccc75 75%,
            #9a0119 75%, #9a0119 100%
        );
}

.page-movie .select-category {
    margin-left:5px;
    margin-right:5px;
}

.page-movie .select-category select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-width: 0;
    background-color: #ffffff;
    border-width: 1px;
    border-style: solid;
    border-color: #cecece;
    width: 100%;
    height: 27px;
    border-radius: 0;
    padding: 0 30px 0 10px;
    box-sizing: border-box;
    position: relative;
    background-image: url(/faculty/arts/movie/common/img/common/bg_pulldown.svg);
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position: right top;
}

/* ======================
レイアウト
====================== */
@media only screen and (min-width: 960px) {
    .page-movie .header-wrap {
        display:flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:25px;
        padding-bottom: 10px;
        border-bottom:1px solid #bebebe;
    }

    .page-movie .moviesBox {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin-bottom:40px;
    }
    
    .page-movie .moviesBox .moviesBox-item,
    .page-movie .moviesBox .moviesBox-item-pseudo {
        flex-grow:0;
        flex-shrink:0;
        flex-basis:24%;
    }
}

@media only screen and (min-width: 600px) and (max-width: 959px) {
    .page-movie article header h2 {
        font-size:140%;
        margin-bottom: 15px;
    }

    .page-movie .moviesBox {
        display:flex;
        justify-content:space-between;
        flex-wrap:wrap;
        margin-bottom:40px;
    }
    
    .page-movie .moviesBox .moviesBox-item {
        flex-grow:0;
        flex-shrink:0;
        flex-basis:49%;
        margin-bottom:30px;
    }

    .page-movie .moviesBox .moviesBox-item-pseudo {
        display:none;
    }
}

@media only screen and (max-width: 599px) {
    .page-movie article header h2 {
        font-size:120%;
        margin-bottom: 15px;
    }
    
    .page-movie .moviesBox .moviesBox-item {
        margin-bottom:30px;
    }

    .page-movie .moviesBox .moviesBox-item-pseudo {
        display:none;
    }
}