.hwfooter {
	width: 100%;
	background-color: #E6E6E6;
}

.footer-section {
	/* テキストの配置とスタイリング */
	font-family: 'Arial', sans-serif;
	/* お好みのフォントに変更可能 */
	color: #333;
}

.footer-section p {
	/* パラグラフのスタイリング */
	font-size: 16px;
	line-height: 1.5;
	margin: 10px 0;
  font-weight: bold;
}

.footer-section a {
	/* リンクのスタイリング */
	text-decoration: none;
	font-weight: bold;
}

.footer-section a:hover {
	text-decoration: underline;
}

.footer-section .contact-info {
	/* 連絡先情報のスタイリング */
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-section .contact-icon {
	/* アイコンのスタイリング（必要に応じて） */
	width: 20px;
	height: 20px;
}

.footer-section p {
	/* h3の左側に少しスペースを開けてダッシュを追加 */
	position: relative;
	padding-left: 20px;
}

.footer-section p::before {
	content: "-";
	position: absolute;
	left: 0;
}

.footer-section ul {
	/* 以下の3つの項目を左揃えにする */
	padding-left: 0;
	list-style: none;
}

.footer-section ul li {
	/* リスト項目のスタイル調整 */
	text-align: left;
	padding-left: 15px;
  font-size: 14px;
}

.footer-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

.logo-container {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-container {
	flex: 3;
	display: flex;
	flex-direction: column;
}

.footer-top,
.footer-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.contact-link {
	display: inline-block;
	color: #fff !important;
	/* 文字色を白に設定 */
	background-color: #5f5c5c;
	/* 背景色を青に設定 */
	padding: 10px 20px;
	/* パディングを追加 */
	border-radius: 5px;
	/* 角を丸くする */
	transition: background-color 0.3s ease;
	/* 背景色の遷移効果 */
}

.contact-link:hover {
	background-color: #707070;
	/* ホバー時の背景色 */
	text-decoration: none;
	/* 下線を削除 */
}

.footer-top .footer-section:nth-child(1) {
	flex: 2;
	/* 2/4 の比率 */
}

.footer-top .footer-section:nth-child(2),
.footer-top .footer-section:nth-child(3) {
	flex: 1;
	/* 1/4 の比率 */
}

.footer-section {
	flex: 1;
	margin: 10px;
	text-align: center;
}

.footer-section p {
	margin: 10px 0;
}

.footer-section a {
	text-decoration: none;
	color: #333;
}

.footer-section a:hover {
	text-decoration: underline;
}

.copyright {
	text-align: center;
	padding: 30px 0;
	font-size: 11px;
	max-width: 1280px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.footer-wrapper {
		flex-direction: column;
	}

	.footer-section p {
		display: block;
		margin: 10px 0;
	}

	.footer-section p::before {
		content: "";
	}

	.footer-container {
		padding-top: 20px;
		display: block;
	}

	.footer-section {
		margin: 20px;
	}

	.footer-section li {
		margin: 5px;
	}


	.footer-section p {
		font-weight: bold;
		padding-left: 0px;
	}


	.footer-top {
		display: block;
	}
}