/* CSS Document */

#movie{
	padding-top: 0;
	}
	#movie section{
		padding-top: 0;
		}

#movieList{}
	#movieList h3{
		display: none;
		}
	#movieList h3+div{
		display: grid;
		}
	#movieList dl{
		display: grid;
		align-self: flex-start;
		grid-gap: 1em;
		}
	#movieList dt{
		color: var(--primary-color);
		font-weight: 500;
		line-height: 1.5em;
		order: 1;
		}
	#movieList dd{}
		#movieList dd a{
			position: relative;
			display: block;
			}
			#movieList dd a:hover{
				opacity: 0.8;
				}
		#movieList dd a:before{
			content: "";
			position: absolute;
			top: 50%;
			left: 50%;
			display: block;
			width: 3em;
			height: 3em;
			background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path style="fill:%23c4302b" d="M31.68,9.6a6.85,6.85,0,0,0-1.27-3.17A4.55,4.55,0,0,0,27.2,5.07C22.73,4.74,16,4.74,16,4.74h0s-6.71,0-11.19.33A4.56,4.56,0,0,0,1.59,6.43,6.79,6.79,0,0,0,.33,9.6,48.41,48.41,0,0,0,0,14.78v2.43a48.66,48.66,0,0,0,.32,5.18,7,7,0,0,0,1.26,3.17,5.45,5.45,0,0,0,3.53,1.37c2.57.24,10.89.32,10.89.32s6.72,0,11.2-.33a4.59,4.59,0,0,0,3.2-1.36,6.94,6.94,0,0,0,1.28-3.17A48.41,48.41,0,0,0,32,17.21V14.78a50,50,0,0,0-.33-5.18Z"/><polygon points="12.69 20.15 12.69 11.16 21.34 15.67 12.69 20.15" style="fill:%23fff"/></svg>');
			background-size: cover;
			transform: translate(-50%,-50%);
			z-index: 1;
			}

#pagenation{
	padding-top: 0;
	}




/* for lower */
@media (max-width: 1399.98px) {
/*1399px以下*/
}
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
#movieList{}
	#movieList h3+div{
		grid-gap: 2em 1.5em;
		}
}


/* Small */
@media (max-width: 767.98px) {
/*767px以下*/
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#movieList{}
	#movieList h3+div{
		grid-template-columns: repeat(3, 1fr);
		}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* Medium */
@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*/
}


/* Large */
@media (min-width: 992px) {
/*992px以上*/
#movieList{}
	#movieList h3+div{
		grid-gap: 4em;
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}


/* X-Large */
@media (min-width: 1200px) {
/*1200px以上*/
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
/*1200px～1399px*/
}


/* XX-Large */
@media (min-width: 1400px) {
/*1400px以上*/
}




