@charset "utf-8";

/*--------------------------------------

  movie.css

---------------------------------------*/
/*動画*/
#movie .movie_list {
    display: table;
    overflow: hidden;
    text-align: center;
    width: 100%;
}
#movie .movie_list li {
    display: block;
    float: left;
    width: 23%;
    margin: 10px auto;
    margin: 0 1%;
    text-align: center;
    vertical-align: middle;
}
#movie .movie_list li .images {
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
#movie .movie_list li .youtube a {
    position: relative;
    display: inline-block;
    margin-bottom: 40px;
}
#movie .movie_list li .youtube a img.movie_img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 240px;
    height: 240px;
    object-fit: contain; 
    object-position: 50% 50%;
    font-family: 'object-fit: contain; object-position: 50% 50%;' /* IE・Edge対応 */
}
@media screen and (min-width: 0\0) and (min-resolution: +72dpi) { /* IE9〜11 */
#movie .movie_list li .youtube a img.movie_img {
    width: 98%;
    text-align: center;
}
#movie .movie_list li img {
    width: auto;
    object-fit: none;
    font-family: 'object-fit: none; ';
}
}
#movie .movie_list li .youtube a .play_btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    width: 54px;
    height: 36px;
    border-radius: 12px;
    background: rgba(40, 40, 40, .5);
    z-index: 1;
}
#movie .movie_list li .youtube a .play_btn::before,
#movie .movie_list li .youtube a .play_btn::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 22px;
    display: block;
    width: 0;
    height: 0;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-left: solid 12px #fff;
}
#movie .movie_list li .youtube a:hover .play_btn {
    background: rgba(255, 0, 0, .6);
}
#movie .movie_list li .youtube a .play_btn::after {
    top: 12px;
    left: 23px;
    border-left: solid 11px rgba(0, 0, 0, .4);
    transform: rotate(-6deg);
    -webkit-transform: rotate(-6deg);
    z-index: -1;
} 
@media screen and (max-width:600px) {
#movie .movie_list {
    display: block;
}
#movie .movie_list li {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto 30px auto;
    padding: 0 0;
}
#movie .movie_list li .youtube {
    text-align: center;
}
#movie .movie_list li .youtube a {
    display: block;
    float: none;
    margin: 0 auto;
    padding: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}
#movie .movie_list li .youtube .images {
    display: block;
    margin: 0 auto;
}
#movie .movie_list li .youtube a img.movie_img {
    width: 80%;
    height: auto;
    max-height: 300px;
    margin: 0 auto;
    object-position: 50% 50%;
    font-family: 'object-fit: contain; object-position: 50% 50%;' /* IE・Edge対応 */
}
}