/**
 * お問い合わせページ：アクセス・レスポンシブ
 *
 * 2026-07-20：旧style.cssから内容を変更せず分割。
 */

/* =====================================
   アクセス
===================================== */

.sd-contact-access {
	margin-bottom: 50px;
}

.sd-contact-access__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.sd-contact-office {
	overflow: hidden;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 9px;
}

.sd-contact-office h3 {
	margin: 0;
	padding: 15px 20px;
	background: #7e6837;
	border: 0;
	color: #fff;
	font-size: 19px;
}

.sd-contact-office h3::before,
.sd-contact-office h3::after {
	display: none;
}

.sd-contact-office__info {
	min-height: 155px;
	padding: 18px 20px;
}

.sd-contact-office__info p {
	margin: 3px 0;
}

.sd-contact-map {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 4 / 3;
	background: #eee;
}

.sd-contact-map iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}


/* =====================================
   スマートフォン
===================================== */

@media (max-width: 767px) {

	.sd-contact-page {
		font-size: 15px;
	}

	.sd-contact-phone,
	.sd-contact-mail {
		padding: 24px 18px;
		border-radius: 8px;
	}

	.sd-contact-phone__header {
		align-items: flex-start;
		gap: 14px;
	}

	.sd-contact-phone__person {
		width: 72px;
	}

	.sd-contact-phone h2,
	.sd-contact-section-heading h2 {
		font-size: 21px;
	}

	.sd-contact-phone__number {
		padding: 20px 10px;
	}

	.sd-contact-phone__tel {
		gap: 8px;
		font-size: 29px;
	}

	.sd-contact-phone__tel img {
		width: 42px;
	}

	/* 案内ボタンを縦1列にする */
	.sd-contact-page .sd-contact-guide {
		grid-template-columns: 1fr !important;
	}

	.sd-contact-page .sd-contact-guide .sd-contact-guide__link {
		min-height: 52px;
	}

	.sd-contact-access__grid {
		grid-template-columns: 1fr;
	}

	.sd-contact-office__info {
		min-height: auto;
	}

	.sd-contact-privacy__body {
		padding-right: 16px;
		padding-left: 16px;
	}

}


/* =====================================
   小さいスマートフォン
===================================== */

@media (max-width: 380px) {

	.sd-contact-phone__header {
		display: block;
		text-align: center;
	}

	.sd-contact-phone__person {
		margin: 0 auto 10px;
	}

	.sd-contact-phone__tel {
		flex-wrap: wrap;
		font-size: 27px;
	}

}