@charset "utf-8";
/*==================================================
	【お問い合わせ】ページ固有のスタイル
==================================================*/
#container h2.sub {
	font-size : 34px;
}
#container h2.past_works {
	margin-bottom: 75px;
}
#container h2.sub.left {
	text-align: left;
}
#container h2.sub.left::before {
	left: 0;
	transform: translateX(-25%);
}
#movie .kumo::before {
	background: url(../img/gallery/kumo01.png) no-repeat top 200px left / 35vw, url(../img/gallery/kumo04.png) no-repeat bottom left / 35vw;
}
#movie .box_movie {
	position: relative;
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(2, 45%);
	gap: 40px 0;
	background: #fffade;
	padding: 50px;
}
#movie .box_movie::after {
	background: url(../img/gallery/kumo02.png) no-repeat center right / 40vw;
}
#movie .box_movie iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}
#movie .box_movie p {
	text-align: center;
	color: #2C75AD;
	line-height: 29px;
	font-weight: bold;
	font-size: 20px;
}
#movie .url {
	text-align: center;
	margin-bottom: 2em;
}
#movie .url a {
	display: inline-block;
	color: var(--color-primary);
	font-size: 22px;
	text-decoration: underline;
	text-underline-offset: 5px;
}
#movie .txt01 {
	text-align: center;
	font-size: 110%;
	margin-bottom: 100px;
}
/*ボタン*/
#movie .more {
	font-size: 110%;
	text-align: center;
	margin-bottom: 30px;
}
#movie .more a {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	padding: 10px 20px;
	border: 1px solid var(--color-primary);
	font-size: 32px;
	color: var(--color-primary);
	box-shadow: 3px 3px 0 var(--color-primary);
	background: #fff;
	line-height: 1.1;
}
@media only screen and (max-width: 768px) {  /* タブレット以下 */
	#container h2.sub {
		font-size : 22px;
		margin-bottom: 70px;
	}
	#container h2.past_works {
		margin-bottom: 50px;
	}
	#movie .box_movie {
		grid-template-columns: repeat(2, 47%);
		gap: 20px 0;
		padding: 20px 15px;
	}
	#movie .box_movie p {
		font-size: 120%;
	}
	#movie .txt01 {
		text-align: left;
		font-size: 100%;
		margin-bottom: 50px;
	}
		/*ボタン*/
	#movie .more {
		margin: 50px 0 18px;
	}
	#movie .more a{
		font-size: 24px;
		padding: 5px 10px;
	}
}
@media only screen and (max-width: 640px){ /* スマホ */
	#movie h2.sub {
		font-size: 20px;
		margin-bottom: 50px;
	}
	#container h2.past_works {
		margin-bottom: 40px;
	}
	#movie .box_movie {
		grid-template-columns: repeat(1, 100%);
	}
	#movie .box_movie p {
		font-size: 110%;
	}
	/*ボタン*/
	#movie .more {
		margin: 40px 0 15px;
	}
	#movie .more a {
		font-size: 22px;
	}
}