/*----- html body -----*/
html > body {
	background-image: url(./image/background_pc.webp);
	background-attachment: fixed;
	background-size: cover;
	background-position: 50% 0;
	display: grid;
	grid-template-columns: 2fr 700px 1fr;
	overflow: hidden;

	@media (width < 1450px) {
		grid-template-columns: 1fr 700px;
	}

	@media (width < 1200px) {
		grid-template-columns: 1fr 700px 1fr;
	}

	@media (width < 700px) {
		grid-template-columns: 1fr;
	}
}

/*----- pcArea -----*/
section.pcArea {
	position: fixed;
	left: 0;
	top: 0;
	width: calc((100% - 700px) / 3 * 2);

	@media (width < 1450px) {
		width: calc(100% - 700px);
	}

	@media (width < 1200px) {
		display: none;
	}

	> div {
		margin-inline: auto;
		padding-top: calc((100vh - 255px) / 2);

		> figure {
			text-align: center;

			> a {
				text-decoration: none;

				&:hover {
					opacity: 0.8;
				}

				> img {
					max-width: 100%;
				}
			}
		}
	}
}

/*----- main -----*/
main {
	background-color: #e7eaf0;
	grid-column: 2 / 3;

	@media (width < 700px) {
		grid-column: 1 / 2;
	}
}

section.panel {
	> figure {
		> div {
			> img {
				display: block;
				max-width: 100%;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		}
	}
}

section.panel {
	position: relative;
}

/* CTA */
.cta-button {
	position: absolute;
	left: 50%;
	top: 13%;
	transform: translate(-50%, -50%);
	width: 90%;
	z-index: 10;
}

/*
float button
*/
section.floatbutton {
	position: fixed;
	right: 10px;
	bottom: 50px;
	transition: margin-right 0.3s;

	&:hover {
		opacity: 0.8;
	}

	&.hidden {
		margin-right: -150px;
	}

	> a {
		text-decoration: none;

		> img {
			max-width: 100%;
		}
	}
}

@media screen and (max-width: 1920px) {
	.map {
		background-image: url(./image/p07.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 220px 40px 40px 40px;
		margin: auto;
	}
}

@media screen and (max-width: 480px) {
	.map {
		background-image: url(./image/p07-sp.webp);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		padding: 150px 40px 40px 40px;
		margin: auto;
	}
}

/* フォーム非表示（レイアウト維持） */
.is-hidden {
	visibility: hidden;
	height: 0;
	overflow: hidden;
}

/* サンクス表示 */
.thanks {
	text-align: center;
	padding: 48px 20px;
}

.thanks h2 {
	font-size: 24px;
	margin-bottom: 16px;
}

.thanks p {
	font-size: 16px;
	line-height: 1.6;
}

/* ステップ「完了」強調 */
.step div.active {
	background: #ff8fb1;
	color: #fff;
}