@charset "UTF-8";

/* ========================================
   フッター本体
======================================== */
.site-footer {
	background: var(--color-white);
}

.site-footer__main {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 60px;

	padding-block: 48px;
}

.site-footer__logo {
	justify-self: start;
}

.site-footer__address {
	font-style: normal;
}

.site-footer__contact-list {
	display: grid;
	gap: 24px;
}

.site-footer__contact-list li {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	font-size: 14px;
}

.site-footer__icon {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	color: #0088df;
}

.site-footer__contact-list a {
	min-width: 0;
	padding-block: 2px;
}

.site-footer__contact-list a:hover {
	color: var(--color-blue);
}

/* ========================================
   SNS
======================================== */
.site-footer__sns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}

.site-footer__sns-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 40px;
	padding: 6px 14px;
	border-radius: 24px;

	color: var(--color-white);
	background: var(--color-green);
	font-size: 12px;
}

/* ========================================
   最下部
======================================== */
.site-footer__bottom {
	color: var(--color-white);
	background: #63864a;
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	min-height: 64px;
	padding-block: 16px;
}

.site-footer__copyright {
	font-size: 12px;
}

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 12px;
}

.site-footer__links li+li {
	padding-left: 24px;
	border-left: 1px solid rgb(255 255 255 / 50%);
}

.site-footer__links a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 読み上げ用の補足 */
.site-footer__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 767px) {
	.site-footer__main {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 40px;
	}

	.site-footer__logo {
		justify-self: center;
	}

	.site-footer__contact-list {
		gap: 20px;
	}

	.site-footer__contact-list li {
		gap: 14px;
		font-size: 13px;
	}

	.site-footer__sns {
		justify-content: center;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		gap: 14px;
		text-align: center;
	}

	.site-footer__links {
		justify-content: center;
		gap: 12px;
		font-size: 11px;
	}

	.site-footer__links li+li {
		padding-left: 12px;
	}
}


/* ========================================
   SNSアイコン
======================================== */
.site-footer__sns-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 44px;
	height: 44px;
	border-radius: 50%;

	color: #ffffff;
	background: #548735;

	transition: background-color 0.2s ease;
}

.site-footer__sns-icon svg {
	display: block;
	flex-shrink: 0;
}

.site-footer__sns-icon--line {
	font-size: 11px;
	font-weight: 700;
}

/* リンクに変更した後のホバー */
a.site-footer__sns-icon:hover {
	background: #3f6926;
}

.site-footer__line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.site-footer__line img {
	display: block;
	width: 44px;
	height: auto;
}