/* Banner Components */
.price-bottom-nav,
.lineup-bottom-nav {
	margin: 60px 0;
}

.lineup-bottom-nav {
	padding: 60px 0;
	background-color: #fdfdfb;
}

.banner-flex {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.banner-item {
	flex: 1;
	max-width: 590px;
	height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	transition: opacity var(--transition);
}

/* Banner Colors */
.banner-orange {
	background-color: #fbb03b;
}

.banner-blue {
	background-color: #76a6d4;
}

.banner-green {
	background-color: #72c7ae !important;
}

/* Banner Icon */
.banner-icon {
	width: 66px;
	height: 66px;
	border: 2px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.banner-icon img {
	width: 32px;
	height: auto;
}

.banner-item span {
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
	.banner-flex {
		flex-direction: column;
		padding: 0 20px;
	}

	.banner-item {
		max-width: 100%;
		height: 140px;
	}
}

/* 実績ページ用のバナー外枠を追加 */
.price-bottom-nav,
.lineup-bottom-nav,
.common-bottom-nav {
	/* これを追加 */
	margin: 60px 0;
}

/* もし icon-circle というクラス名を使っているなら、既存の .banner-icon と同じスタイルを当てる */
.banner-icon,
.banner-icon-circle {
	width: 66px;
	height: 66px;
	border: 2px solid #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

.banner-icon img,
.banner-icon-circle img {
	width: 32px;
	height: auto;
}