@charset "utf-8";

/* RESPONSIVE */
/* -------------------------------------------------- */
@media screen and (min-width: 1024px) {

	/* 980px以上用（PC用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_about.jpg) center bottom no-repeat !important;
		-webkit-background-size: cover;
		background-size: cover;
	}

	#entryYoutube {
		width: 100%;
		padding-bottom: 60px;
	}

	#entryYoutube iframe {
		width: 1000px !important;
		height: 562px !important;
	}

	.jci {
		margin-bottom: 80px;
	}

	.jciTtl {
		text-align: center;
		font-size: 3.2rem;
		margin-bottom: 40px;
		line-height: 1.8;
	}

	#jciLink {
		margin-bottom: 0;
	}

	#jciPolicy {
		display: flex;
		justify-content: space-between;
	}

	.policy {
		display: inline-block;
		vertical-align: top;
		border: 1px #0068b7 solid;
		padding: 14px;
		letter-spacing: 0;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.policy:last-child {
		margin-right: 0;
	}

	.policy dt {
		font-size: 1.5rem;
		font-weight: bold;
		color: #000;
	}

	.policy dd {
		text-align: left;
	}

	#jciEstablish {
		text-align: center;
	}

	ul.historycMovieList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 40px;
	}

	.historycMovieList li {
		width: 48%;
	}

	.historycMovieList li iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	/* 768px - 979px用（タブレット用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_about.jpg) center bottom no-repeat !important;
		-webkit-background-size: cover;
		background-size: cover;
	}

	#entryYoutube {
		width: 100%;
		padding-bottom: 40px;
	}

	#entryYoutube iframe {
		width: 100% !important;
		height: 350px !important;
	}

	.jci {
		margin-bottom: 50px;
	}

	#jciLink {
		margin-bottom: 0;
	}


	.policy {
		display: block;
		vertical-align: top;
		border: 1px #0068b7 solid;
		padding: 10px;
		margin-bottom: 5px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.policy dt {
		font-size: 1.5rem;
		font-weight: bold;
		color: #000;
	}

	ul.historycMovieList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 40px 0;
	}

	.historycMovieList li {
		width: 48%;
	}

	.historycMovieList li iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

@media screen and (max-width: 767px) {

	/* 479px以下用（スマートフォン用）の記述 */
	/* メインビジュアル */
	#fv::after {
		background: url(../../img/mv/mv_about.jpg) center bottom no-repeat !important;
		-webkit-background-size: cover;
		background-size: cover;
	}

	/* 入会の勧め */
	#entryYoutube {
		width: 100%;
		padding-bottom: 40px;
	}

	#entryYoutube iframe {
		width: 100% !important;
	}

	.jci {
		margin-bottom: 50px;
	}

	#jciLink {
		margin-bottom: 0;
	}

	.jciTtl {
		font-size: 1.6rem;
		text-align: center;
	}

	.policy {
		display: block;
		vertical-align: top;
		border: 1px #0068b7 solid;
		padding: 10px;
		margin-bottom: 5px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.policy dt {
		font-size: 1.5rem;
		font-weight: bold;
		color: #000;
	}

	ul.historycMovieList {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 20px;
	}

	.historycMovieList li {
		width: 100%;
	}

	.historycMovieList li iframe {
		width: 100%;
		aspect-ratio: 16 / 9;
	}

}

@media screen and (min-width: 500px) and (max-width: 560px) {
	#entryYoutube iframe {
		height: 280px;
	}
}

@media screen and (min-width: 400px) and (max-width: 499px) {
	#entryYoutube iframe {
		height: 250px;
	}
}

@media screen and (max-width: 399px) {
	#entryYoutube iframe {
		height: 200px;
	}
}