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

@media screen and (min-width: 1024px) {
    .sp_only{
		display: none;
    }
	body{
		background: #f4f4f4;
	}
}
@media screen and (max-width: 1023px) {
    .pc_only{
		display: none;
    }
	body{
		background: #fff;
	}
}

#movie{
}
#movie .movie .movie-box a{
	text-decoration: none;
}
@media screen and (max-width: 1023px) {
	#movie{
		background: #eeeeee;
		border-bottom: solid 1px #ccc; 
	}
	#movie .title{
		padding: 5vw 0 3vw;
		background: #fff;
		text-align: center;
	}
	#movie .orange-title{
		font-size: 5vw;
		color: #ff6d2b;
		line-height: 1.2;
	}
	#movie hr{
		height: 1px;
		margin: 0 30vw 2vw;
		text-align: center;
		background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(255, 109, 43, 1) 50%, rgba(255, 255, 255, 1));
    	border: none;
	}
	#movie .title p{ 
		font-size: 3.6vw;
		color: #777;
		line-height: 1.2;
	}
	#movie .movie{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 2vw;
		padding: 2vw;
		background: #fff;
	}
	.movie .movie-box{
		width: 48.7%;
		margin: 0 0 3vw 0;
		background: #fff;
	}
	.movie .movie-box:nth-child(odd){
		margin: 0 2vw 0 0;
	}
	.movie .movie-gazou {
		margin: 0 0 2vw 0;
	}
	.movie .movie-text{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.movie .movie-icon{
		width: 15%;
		margin: 0 1vw 0 0;
	}
	.movie .movie-title{
		width: 85%;
		font-weight: bold;
		font-size: 3vw;
		color: #333;
		line-height: 1.2;
	}
	.subtitle{
		font-weight: normal;
		font-size: 2.6vw;
		color: #999;
		line-height: 1.2;
	}
}
@media screen and (min-width: 1024px) {
	#movie{
		margin: 0 auto;
	}
	#movie .title{
		margin: 20px 0 5px;
		padding: 10px 0 10px 15px;
		font-size: 18px;
		font-weight: bold;
		color: #444;
		background: #fff;
	}
	#movie .movie{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 15px;
		background: #fff;
	}
	.movie .movie-box{
		width: 32.5%;
		margin: 0 0 10px 0;
		box-sizing: border-box;
		background: #fff;
	}
	.movie .movie-gazou {
		margin: 0 0 10px 0;
	}
	.movie .movie-text{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
	}
	.movie .movie-icon{
		width: 16%;
		margin: 0 8px 0 0;
	}
	.movie .movie-title{
		width: 84%;
		font-weight: bold;
		font-size: 12px;
		color: #333;
		line-height: 1.2;
	}
	.subtitle{
		font-weight: normal;
		font-size: 10px;
		color: #999;
		line-height: 1.2;
	}
}