@charset "utf-8";
#special ul li span {display: block; background: #000;}



@media screen and (min-width:641px){
#special {text-align: center; padding: 118px 0 100px; z-index: 0; position: relative;}
#special ul {display: flex; justify-content:center; align-content: center; margin: 48px auto 0; flex-wrap: wrap; width: 1400px; align-items: flex-start;}
#special ul li {padding: 0 48px 0;}
#special ul li img {height: 317px; width: auto;}
#special ul li b{font-size: 24px; line-height: 1; color: #fff; background: url(/thelastremnant/images/bg_special.png) center center no-repeat; background-size: cover; padding: 3px 0; margin: 15px 0 0; font-weight: normal; display: block;}
#special ul li a {display: block; position: relative; transition: 0.8s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1);}
#special ul li a::after{content: ''; background: url(/thelastremnant/images/btn_play.png) center center no-repeat; background-size: 108px 108px; position: absolute; left: 50%; top: 50%; z-index: 10; width: 108px; height: 108px; margin: -54px 0 0 -54px; transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1);}
#special ul li:nth-child(n+3) {margin-top: 46px;}
#special ul li a:hover {filter: brightness(1.35);}
#special ul li a:hover::after{transform: scale(1.15); transform-origin: center center;}
#special ul li i {font-style: normal; position: relative; border-top:1px solid #fff; border-bottom:1px solid #fff; display: block; padding: 11px 0 10px;}
}
@media screen and (max-width:1400px) and (min-width:641px){

#special ul {width: 1200px;}
#special ul li {padding: 0 24px 0;}
#special ul li img {height: 300px; width: auto;}

}

@media screen and (max-width:640px){
#special {padding: 13.594vw 0;}
#special h2 {margin-bottom: 7.8vw;}

#special ul {width: 87.813vw; margin: 0 auto; text-align: center;}
#special ul li {padding: 0; width: 87.813vw;}
#special ul li img {height:auto; width: 87.813vw;}

#special ul li b{font-size: 3.75vw; line-height: 1; background: url(/thelastremnant/images/bg_special.png) center center no-repeat; background-size: cover; padding: 0.469vw 0; margin: 2.344vw 0 0; font-weight: normal; display: block; color: #fff;}
#special ul li a {display: block; position: relative; width:100%; height:100%;}
#special ul li a::after{content: ''; background: url(/thelastremnant/images/btn_play.png) center center no-repeat; background-size: 16.875vw 16.875vw; position: absolute; left: 50%; top: 50%; z-index: 10; width: 16.875vw; height: 16.875vw; margin: -8.438vw 0 0 -8.438vw;}
#special ul li:nth-child(n+2) {margin-top: 9.844vw;}
#special ul li i {font-style: normal; position: relative; border-top:1px solid #fff; border-bottom:1px solid #fff; display: block; padding: 1.719vw 0 1.563vw;}

#special ul li span {height:49.531vw;}
#special ul li span.youtubeplayer {/*padding-top: 56.25%;*/ position: relative; display: block;}
#special ul li span.youtubeplayer iframe{width: 100% !important; height: 100% !important; position: absolute; left: 0; top: 0;}


}