@charset "utf-8";
/* CSS Document */

.movie .wrapper .content ul{ display: flex; flex-direction: column; grid-row-gap: 25px; margin-bottom: 60px; }
/*.movie .wrapper .content .btn-vimeo{ position: relative; z-index: 2; }
.movie .wrapper .content .btn-vimeo a{ cursor: pointer !important; position: relative; z-index: 1; }
.movie .wrapper .content .btn-vimeo a img{ border: solid 1px #000;}
.movie .wrapper .content .btn-vimeo::after{
    position: absolute;
    display: inline-block;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-image: url("../img/common/icon/movie1.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 80px;
    height: 80px;
    z-index: 10;
}*/
.movie .wrapper .content .btn-vimeo::after{ background-image: url("../img/common/icon/movie1.png") !important; }
.movie .wrapper .content .btn-vimeo p{
    border: solid 2px #000;
    /* right: 10px; */
    top: 12px;
    height: 99%;
    position: absolute;
    width: 99%;
    right: -10px;
    z-index: -1;
    background-size: auto auto;
    background-color: #f9f4ee;
    background-image: repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(0, 0, 0, 1) 5px, rgba(0, 0, 0, 1) 10px );
    -webkit-box-sizing: border-box!important;
    -moz-box-sizing: border-box!important;
    box-sizing: border-box!important;
}
@media screen and (max-width: 600px){
    .movie .wrapper .content .btn-vimeo p{ top: 9px; right: -8px; border: solid 1px #000; }
}

.movie .wrapper .content ul li.title{
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    position: relative;
    border-bottom: 4px solid;
    line-height: 1.6;
    padding-bottom: 10px;
}
@media screen and (max-width: 1440px){ .movie .wrapper .content ul li.title{ font-size: 20px; } }
@media screen and (max-width: 600px){ .movie .wrapper .content ul li.title{ font-size: 18px; border-bottom: 2px solid; } }

.movie .wrapper .content ul li.title:before,
.movie .wrapper .content ul li.title:after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
}

.movie .wrapper .content ul li.title:before {
    border: 16px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -16px;
}
@media screen and (max-width: 600px){
.movie .wrapper .content ul li.title:before {
    border: 13px solid;
    border-color: transparent;
    border-top-color: black;
    margin-left: -13px;
}
}
.movie .wrapper .content ul li.title:after {
    border: 10px solid;
    border-color: transparent;
    border-top-color: #f9f4ee;
    margin-left: -10px;
}