/* CSS Document */

#movieList{
	display: flex;
	flex-wrap: wrap;
	}
	#movieList dl{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		}
	#movieList dt{
		font-weight: bold;
		line-height: 1.4em;
		}
	#movieList dt+dd{
		margin-bottom: 0.6em;
		order: -1;
		}
	#movieList dt+dd+dd{
		margin-top: 0.6em;
		line-height: 1.4em;
		}
	#movieList dd{}
		#movieList dd a{
			position: relative;
			display: block;
			fill: rgba(0,0,0,0.7);
			}
			#movieList dd a:hover{
				fill: rgba(196,48,43,0.7);
				}
		#movieList dd i{
			position: absolute;
			top: 50%;
			left: 50%;
			width: 1em;
			height: 1em;
			margin: -0.5em;
			transform: scale(3);
			pointer-events: none;
			z-index: 1;
			}
	#movieList .thumb{
		padding-top: 56.25%;
		}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#movieList{
	justify-content: space-between;
	}
	#movieList dl{
		width: calc(50% - 0.5em);
		}
		#movieList dl:nth-of-type(n+3){
			margin-top: 2em;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#movieList{}
	#movieList dl{
		width: calc(33.33% - 1.33em);
		}
		#movieList dl:not(:nth-of-type(3n+1)){
			margin-left: 2em;
			}
		#movieList dl:nth-of-type(n+3){
			margin-top: 2em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#movieList{}
	#movieList dl{
		width: calc(25% - 1.5em);
		}
		#movieList dl:not(:nth-of-type(4n+1)){
			margin-left: 2em;
			}
		#movieList dl:nth-of-type(n+5){
			margin-top: 2em;
			}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}