@charset = "utf-8";

	.movie-wrap {
		height: 0;
		overflow:hidden;
		position:relative;
		padding-bottom:56.25%; /* アスペクト比　16:9の場合の縦幅(YouTube埋め込み用) */
	}

	.movie-wrap iframe {
		height:93%;
		position:absolute;
		top:0;
		left:2%;
		width:93%;
	}

	section#ichiran > div.col-1-2:nth-of-type(odd) {
		clear:both;
	}

	#movie-container {
		min-height: 500px;
		padding-bottom: 20px;
		position: relative;
	}

	#movie-contents {
		float: right;
		margin-right: 15px;
		height: 500px;
		overflow-y: auto; 
		width: 30%;
	}

	.movie-content {
		cursor: pointer;
		display: block;
		position: relative;
		width: 100%;
	}

	.movie-content h3 {
		background: linear-gradient(to bottom, #4c4c4c 0%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
		color: #fff;
		font-size: 14px;
		margin-bottom: 5px;
	}

	.movie-description {
		display: none;
	}

	.movie-content.show {
		animation: fadeIn .8s ease-in 0s forwards;
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 68%;
	}

	.movie-content.show h3 {
		font-size: 18px;
		margin-bottom: 10px;
	}

	@keyframes fadeIn {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}

	.movie-content.show .movie-cover {
		display: none;
	}


	.movie-content.show .movie-description {
		display: block;
		font-size: 18px;
		font-weight: bold;
		margin-top: -20px;
	}

	.movie-cover {
		display: block;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(255,255,255,0.1);
	}

	@media screen and (max-width: 767px) {
		#movie-contents,
		.movie-content.show {
			width: 100%;
		}

		#movie-contents {
			float: none;
			height: auto;
		}

		.movie-content.show {
			animation: none;
			opacity: 1;
			position: static;
		}

		.movie-content.show h3 {
		    font-size: 14px;
	    }

		.movie-content.show .movie-description {
			font-size: 14px;
			margin-top: 0;
		}

		.movie-cover {
			display: none;
		}
	}