@charset "utf-8";

@media screen and (max-width : 768px){
	.section {
		margin-top: 75px;
	}
	.section img {
		display: block;
	}
	.section h3 {
		margin: 0 25px 30px;
		text-align: center;
		font-size: 23px;
	}
	.section h3 span {
		display: inline-block;
		padding: 0 10px 10px;
		border-bottom: 3px solid #444;
		white-space: nowrap;
	}

	#footer_topic_path {
		margin-top: 88px;
	}


/* ----------------------------------------
	section_movie
---------------------------------------- */

	.section_movie a[name] {
		position: absolute;
		right: 100%;
	}

	.section_movie .text {
		padding: 10px;
		border: 1px solid #707070;
		background: #fff;
		font-size: 16px;
		line-height: 22px;
	}

	.movie_main a {
		display: block;
		position: relative;
	}
	.movie_main a::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		width: 40px;
		height: 40px;
		background: url(../img/btn_play.svg) 50% 50% / contain no-repeat;
		transform: translate(-50%,-50%);
	}

	.section_movie li {
		margin-top: 10px;
		background: #707070;
	}

	.section_movie .movie {
		position: relative;
		padding-top: 56.25%;
	}
	.section_movie .movie iframe {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.section_movie li .link {
		margin-top: 20px;
	}

	.section_movie .note {
		margin-top: 40px;
		font-family: var(--font-light);
		font-size: 12px;
	}


	/* ------------------------------
		Modal
	------------------------------ */

	#movie_modal {
		display: none;
		visibility: hidden;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 65535;
		width: 100%;
		height: 100%;
		min-height: 100vh;
		height: -webkit-fill-available;
		text-align: center;
		white-space: nowrap;
	}
	#movie_modal::after,
	#movie_modal_inner {
		display: inline-block;
		vertical-align: middle;
	}
	#movie_modal::after {
		content: '';
		width: 0;
		height: 100%;
	}

	#movie_modal .overlay {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		height: -webkit-fill-available;
		opacity: 1;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1;
		background: #fff;
	}

	.modal_btn_close {
		background: 50% 50% / contain no-repeat;
		z-index: 2;
	}

	#movie_modal .modal_btn_close {
		position: fixed;
		left: 10px;
		top: 10px;
		width: 20px;
		height: 20px;
		background-image:url(../img/modal_close.png);
	}

	#movie_modal_inner {
		opacity: 0;
		position: relative;
		top: 0;
		z-index: 2;
		box-sizing: border-box;
		width: 90%;
		margin: auto;
		white-space: normal;
	}

	#movie_modal_data {
		position: relative;
		padding-top: 56.25%;
	}
	#movie_modal_data iframe,
	#movie_modal_data .video-js {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}

	#movie_modal_data iframe.on,
	#movie_modal_data .video-js.on {
		display: block;
	}
}