/* ============================================================
   サイト共通フッター（site-footer）
   ------------------------------------------------------------
   全ページ共通のフッター。renderFooter() で動的生成される。
   サイト本文（白基調＋淡ティールカード）と一体感を保つため、
   白背景＋上に淡ティール罫線＋本文と同じ濃テキスト色＋ブランド
   ティールリンクで構成する。
   ============================================================ */

/* ===== フッター外枠（ブラウザ全幅・白塗り） ===== */
/* 上端に淡ティール 1px 罫線を引いて本文セクションと視覚的に区切る。
 * 罫線色 #CFE6EC は .maker-card のヘッダー枠線と同じ色にして
 * サイト内のカード群と統一感を出す。
 */
.site-footer {
	width: 100%;
	background: #FFFFFF;
	color: #333333;
	font-size: 13px;
	line-height: 1.7;
	border-top: 1px solid #CFE6EC;
}

/* ===== フッター内部の中央寄せコンテナ ===== */
.site-footer__container {
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 28px 24px 20px;
	box-sizing: border-box;
}

/* ===== 上段（ブランド左、ナビ右） ===== */
.site-footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid #E3E7EA;
}

/* ===== ロゴ ===== */
/* ライト背景に戻したため、filter での反転は不要。元画像のまま
 * 表示する。常時 opacity 0.9 で控えめに、hover で 1.0 に。
 */
.site-footer__logo {
	display: inline-block;
	line-height: 0;
}

.site-footer__logo img {
	display: block;
	height: 28px;
	width: auto;
	border: 0;
	opacity: 0.9;
	transition: opacity 0.15s ease;
}

.site-footer__logo:hover img {
	opacity: 1;
}

/* ===== フッターナビ ===== */
.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.site-footer__nav-list li {
	margin: 0;
}

.site-footer__nav-list a {
	color: #0095B4;
	text-decoration: none;
	font-size: 13px;
	transition: color 0.15s ease;
}

.site-footer__nav-list a:hover {
	color: #00708A;
	text-decoration: underline;
}

/* ===== 下段（会社情報＋コピーライト） ===== */
.site-footer__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px 32px;
	padding-top: 16px;
}

.site-footer__company {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.site-footer__address,
.site-footer__contact {
	margin: 0;
	color: #555555;
	font-size: 13px;
}

.site-footer__copyright {
	margin: 0;
	color: #888888;
	font-size: 12px;
	letter-spacing: 0.02em;
}

/* ============================================================
   スマホ表示（768px以下）：左右余白を詰め、gap を圧縮
   ------------------------------------------------------------
   flex-wrap で自動的に縦積みになるが、左右余白とギャップを
   さらに詰めて画面に追従させる。
   ============================================================ */
@media (max-width: 768px) {
	.site-footer__container {
		padding: 20px 16px 16px;
	}
	.site-footer__top,
	.site-footer__bottom {
		gap: 12px 24px;
	}
	.site-footer__nav-list {
		gap: 8px 16px;
	}
}