/* ----------------------------------------------------------
	協業・コラボ実績ページ専用スタイル
---------------------------------------------------------- */

@media (max-width: 768px) {
	.page-hero-title {
		font-size: 22px !important;
	}
}

.filter-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin: -30px auto 50px;
	padding: 20px;
}
@media (max-width: 768px) {
	.filter-nav {
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		justify-content: flex-start;
		padding-bottom: 10px;
		margin: 0 auto 30px; /* ネガティブマージンを解除 */
	}
}

.filter-btn {
	background: var(--bg-white);
	border: 1px solid var(--text-light);
	border-radius: 30px;
	padding: 10px 25px;
	font-size: var(--fs-sub);
	cursor: pointer;
	transition: all 0.3s ease;
	color: var(--text-gray);
	font-weight: 600;
}

.filter-btn:hover {
	background-color: var(--bg-gray);
	color: var(--text-gray);
	border-color: var(--text-gray);
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.filter-btn.active {
	background: var(--bg-dark);
	color: var(--text-white);
	border-color: var(--bg-dark);
}

.collab-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-bottom: 80px;
}
@media (max-width: 768px) {
	.collab-grid {
		grid-template-columns: 1fr;
	}
}

.collab-card {
	background: var(--bg-white);
    border: 1px solid var(--border-light);
	border-radius: 8px;
	padding: 25px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.03);
	display: flex;
	flex-direction: column;
	/* transition: transform 0.3s ease, opacity 0.3s ease; */

}

.collab-card:hover {
	/* transform: translateY(-5px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.08); */
}


.card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: 48px;
}

.card-tag {
	font-size:  var(--fs-sm);
	color: var(--tag-text);
	border: 1px solid var(--tag-border);
	padding: 4px 10px;
	border-radius: 4px;
	display: inline-block;
}

.card-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	opacity: 0.8;
}


.collab-card-title {
	font-size:  var(--fs-md);
	font-weight: 700;
	margin-bottom: 15px;
	line-height: 1.4;
	color: var(--text-main);
}

.collab-card-text {
	font-size:  var(--fs-sm);
	color: var(--text-gray);
	line-height: 1.7;
	margin-bottom: 25px;
	flex-grow: 1;
}

.card-result {
	border-top: 1px solid var(--text-light);
	padding-top: 15px;
	font-size:  var(--fs-sm);
	color: var(--result-text);
	display: flex;
	align-items: center;
	font-weight: 600;
}

.result-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: var(--primary-orange);
	margin-right: 8px;
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>');
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 6l2.29 2.29-4.88 4.88-4-4L2 16.59 3.41 18l6-6 4 4 6.3-6.29L22 12V6z"/></svg>');
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

.collab-cta-section {
	background: url("../img/image/gradation_map2-2.png");
	color: var(--text-white);
	text-align: center;
	padding: 60px 20px;
	border-radius: 8px;
	margin-bottom: 80px;
}

.cta-title {
	font-size:  var(--fs-lg);
	font-weight: 700;
	margin-bottom: 15px;
}

.cta-text {
	font-size:  var(--fs-sub);
	opacity: 0.8;
	margin-bottom: 30px;
	line-height: 1.6;
}

.cta-btn {
	display: inline-block;
	background-color: var(--primary-orange);
	color: var(--text-white);
	padding: 12px 40px;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
	transition: opacity 0.3s;
}
.cta-btn:hover {
	opacity: 0.9;
}