/* =====================================================
 *  カスタムフッター スタイル (css/footer-style.css)
 * ===================================================== */

/* フッターエリア全体 */
.custom-footer-area {
	background-color: #1e293b; /* 例: 濃い青系の背景色 */
	color: #cbd5e1; /* 例: やや明るいグレーの文字色 */
	padding: 40px 0 20px; /* 上下のパディング */
	font-size: 0.9em; /* 基本フォントサイズ */
}

/* フッターコンテンツのラップ */
.custom-footer-wrap {
	display: flex; /* Flexbox を有効化 */
	flex-wrap: wrap; /* 画面幅が狭い場合に折り返す */
	justify-content: space-between; /* 要素間のスペースを均等に配置 */
	gap: 30px; /* 要素間の隙間 */
	margin-bottom: 30px; /* コピーライトとの間のマージン */
}

/* フッターの各セクション */
.footer-section {
	flex: 1; /* 利用可能なスペースを均等に分割 */
	min-width: 200px; /* 最小幅を指定して折り返しやすくする */
}

/* フッターウィジェット風タイトル */
.footer-widget-title {
	color: #ffffff; /* タイトルの文字色 */
	font-size: 1.2em;
	margin-bottom: 15px;
	font-weight: 600;
}

/* フッターのリスト */
.footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-list li {
	margin-bottom: 8px; /* リスト項目間のマージン */
}

/* フッターのリンク */
.custom-footer-area a {
	color: #94a3b8; /* リンクの文字色 */
	text-decoration: none;
	transition: color 0.3s ease; /* ホバー時のトランジション */
}

.custom-footer-area a:hover {
	color: #ffffff; /* ホバー時の文字色 */
	text-decoration: underline;
}

/* インライン表示のリスト（サポートリンクなど） */
.footer-list-inline li {
	display: inline-block; /* 横並びにする */
	margin-right: 15px; /* 右側のマージン */
	margin-bottom: 5px; /* 下マージンも少し取る */
}

.footer-list-inline li::after {
	content: "|"; /* 区切り文字 */
	margin-left: 15px; /* 区切り文字の左マージン */
	color: #475569; /* 区切り文字の色 */
}

.footer-list-inline li:last-child::after {
	content: ""; /* 最後の要素の区切り文字は消す */
	margin-left: 0;
}

/* コピーライト */
.custom-footer-copyright {
	text-align: center; /* 中央揃え */
	border-top: 1px solid #334155; /* 上部に区切り線 */
	padding-top: 20px; /* 区切り線からのスペース */
	margin-top: 20px; /* 上のコンテンツとのマージン */
	font-size: 0.85em;
	color: #64748b; /* やや薄めの文字色 */
}

.custom-footer-copyright p {
	margin: 0;
}


/* レスポンシブ対応 (例: 768px以下でレイアウト変更) */
@media (max-width: 768px) {
	.custom-footer-wrap {
		flex-direction: column; /* 縦並びに変更 */
		align-items: center; /* 中央揃え */
		text-align: center; /* テキストも中央揃え */
	}

	.footer-section {
		min-width: 100%; /* 幅を100%に */
		margin-bottom: 20px; /* セクション間のマージン */
	}

    .footer-section:last-of-type {
        margin-bottom: 0; /* 最後のセクションの下マージンは不要 */
    }

	.footer-widget-title {
		margin-bottom: 10px;
	}

    /* インラインリストの区切り文字調整 */
    .footer-list-inline li {
        margin-right: 8px;
    }
    .footer-list-inline li::after {
        margin-left: 8px;
    }
}