@charset "UTF-8";
body {
	font-size: 14px;
	font-family:"游ゴシック Medium",YuGothic,YuGothicM,"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
	line-height: 1.6;
	color:#000;
	font-weight: normal;
}

img{
	vertical-align: top;
	max-width:100%;
	height:auto;
}

h2{
    padding:0 20px;
	text-align: center;
}
/*
#trailer-banner{
    margin-top:50px;
    text-align: center;
}

#trailer-banner a{
   display:inline-block;
}
*/

#spmovie-navi{
    max-width:1280px;
    margin:0 auto;
    padding: 3% 20px 0 20px;
	box-sizing: border-box;
}

#spmovie-navi li{
    float:left;
    width:25%;
    padding:10px;
    box-sizing: border-box;
    transform:skewX(-10deg);
}

#spmovie-navi li a{
    display:block;
    text-align: center;
    padding:0.5em;
    color:#ffe002;
    font-size:110%;
    font-weight: bold;
    text-decoration: none;
    border:1px solid #ffe002;
    transition: all 0.2s;
}

#spmovie-navi li a:hover{
    background:#ffe002;
    color:#000;
}

#spmovie-main{
	background:url("../images/bg_black.jpg") repeat 50% 0;
    padding:0;
}

#spmovie-main-bg{
    background:url("../images/spmovie/bullet_bg.png") repeat-y 50% -10%;
    background-size:contain;
    padding: 80px 0;
}

section{
    padding:10% 0 0 0;
}

section h3{
    background:#ffe002;
    color:#000;
    padding:0.2em;
    font-size:400%;
    font-weight: bold;
    font-family: 'bebasregular',sans-serif;
    text-align: center;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1;
    transform:skewY(-2deg);
}

section h3 span{
    display: block;
    text-align: center;
    font-size:40%;
    margin-top:0.2em;
}

.spmovie-main-inner{
	/*max-width:960px;
	margin:0 auto;*/
	/*padding:0 20px;*/
	box-sizing: border-box;
}

#spmovie-main .spmovie-column {
    max-width:1280px;
    margin:0 auto;
    padding: 3% 20px 0 20px;
	box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
}

#spmovie-main .spmovie-column dl {
	/*float:left;*/
	width:33.33333%;
	margin:5% 0 0 0;
    padding:0 20px;
    box-sizing: border-box;
    /*display:table;*/
}

#spmovie-main .spmovie-column dl dt {
	margin-top:1em;
    font-weight: bold;
    font-size: 120%;
    text-align: left;
    /*letter-spacing: 0.2em;*/
    color:#fff;
    /*float:right;
    font-style:italic;*/
    /*display:table-cell;
    width:40%;
    vertical-align: middle;
    padding-left:1.5em;*/
    text-align: center;
}
#spmovie-main .spmovie-column dl dd {
    /*float:left;*/
    /* display:table-cell;
    width:60%;*/
}
#spmovie-main .spmovie-column dl dd a {
    display: block;
}
/*
#spmovie-main .spmovie-column dl dd iframe,
#spmovie-main .spmovie-column dl dd a,
#spmovie-main .spmovie-column dl dd .spmovie-comingsoon
{
	position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}*/

#spmovie-main .spmovie-column dl dd .spmovie-comingsoon span
{
    position: absolute;
    width:100%;
    top:50%;
    left:0;
    color:#828282;
    text-align: center;
    margin-top:-0.5em;
    
}


#spmovie-main .spmovie-column .slick-prev,
#spmovie-main .spmovie-column .slick-next{
    width: 15px;
    height: 30px;
    top:40%;
}

#spmovie-main .spmovie-column .slick-prev:before,
#spmovie-main .spmovie-column .slick-next:before{
    content: "";
    width: 15px;
    height: 30px;
    display: block;
}

#spmovie-main .spmovie-column .slick-prev{
    left:-10px;
}

#spmovie-main .spmovie-column .slick-prev:before{
    background: url(../images/top/btn_prev.png) no-repeat 0 0;
    background-size: cover;
}

#spmovie-main .spmovie-column .slick-next{
    right:-10px;
}

#spmovie-main .spmovie-column .slick-next:before{
    background: url(../images/top/btn_next.png) no-repeat 0 0;
    background-size: cover;
}

#official-banner{
    padding-top:10%;
}


/* clearfix */
/*.clearfix:before, .clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
 *zoom: 1;
}*/

@media screen and (max-width: 900px) {
.pc {
	display: block;
}
.sp {
	display: none;
}

#spmovie-navi li a{
    font-size:1.6vw;
}

}

@media screen and (max-width: 640px) {

#spmovie-main-bg{
    padding: 40px 0;
}


#spmovie-navi li{
    width:50%;
}

#spmovie-navi li a{
    font-size:2.5vw;
}


section h3{
    font-size:10vw;
}


#spmovie-main .spmovie-column dl {
	float:none;
	width:auto;
    padding:0;
    display:table;
}

#spmovie-main .spmovie-column dl dt {
    width:55%;
    font-size:4vw;
    display:table-cell;
    text-align: left;
    vertical-align: middle;
    padding-left:1.5em;
}
#spmovie-main .spmovie-column dl dd {
    width:45%;
    display:table-cell;
}

/*
#official-banner {
   width: 70%;
   padding:0;
   margin:10% auto 0 auto;
}
*/

.pc {
	display: none;
}
.sp {
	display: block;
}


}