/*
 * 制作実績・お客様インタビュー一覧カードの共通ホバー表現。
 *
 * カード全体の反応に加え、見出し・CTAの文字幅だけに
 * ブランドブルーの下線を左から右へ伸ばし、クリック可能な領域を明確にする。
 * サマリーやインタビュー本文抜粋は読む情報として扱い、下線は付けない。
 */

.p-archive-body .c-project-card--archive,
.p-archive-body .c-interview-card,
.p-archive-body .c-special-interview-card {
	transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.p-archive-body .c-project-card--archive h2,
.p-archive-body .c-interview-card h2,
.p-archive-body .c-special-interview-card h3 {
	transition: color 0.2s ease;
}

.p-archive-body .c-project-card__visual img,
.p-archive-body .c-interview-card__visual img,
.p-archive-body .c-special-interview-card__visual img {
	transition: transform 0.28s ease;
}

/*
 * フッターと同じ左→右の下線アニメーション。
 * currentColor ではなくブランドブルーを明示し、本文色に左右されないようにする。
 */
.p-archive-body .c-card-hover-underline {
	display: inline;
	padding-bottom: 2px;
	background-image: linear-gradient(var(--color-primary), var(--color-primary));
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.3s ease;
}

.p-archive-body .c-project-card--archive > a:hover .c-card-hover-underline,
.p-archive-body .c-project-card--archive > a:focus-visible .c-card-hover-underline,
.p-archive-body .c-interview-card > a:hover .c-card-hover-underline,
.p-archive-body .c-interview-card > a:focus-visible .c-card-hover-underline,
.p-archive-body .c-special-interview-card > a:hover .c-card-hover-underline,
.p-archive-body .c-special-interview-card > a:focus-visible .c-card-hover-underline {
	background-position: left bottom;
	background-size: 100% 1px;
}

.p-archive-body .c-project-card__footer b,
.p-archive-body .c-interview-card__footer b,
.p-archive-body .c-special-interview-card__footer b {
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 7px;
}

.p-archive-body .c-project-card__footer b i,
.p-archive-body .c-interview-card__footer b i,
.p-archive-body .c-special-interview-card__footer b i {
	font-style: normal;
	line-height: 1;
	transition: transform 0.2s ease;
}

/* キーボード操作でもカード全体の反応が分かるよう hover と focus-within を揃える。 */
.p-archive-body .c-project-card--archive:hover,
.p-archive-body .c-project-card--archive:focus-within,
.p-archive-body .c-interview-card:hover,
.p-archive-body .c-interview-card:focus-within {
	border-color: var(--color-primary-muted);
	box-shadow: 0 14px 30px var(--color-shadow-primary-soft);
	transform: translateY(-4px);
}

.p-archive-body .c-special-interview-card:hover,
.p-archive-body .c-special-interview-card:focus-within {
	box-shadow: 0 14px 30px var(--color-shadow-primary-soft);
	transform: translateY(-4px);
}

.p-archive-body .c-special-interview-card:hover,
.p-archive-body .c-special-interview-card:focus-within {
	border-bottom-color: var(--color-primary-muted);
}

.p-archive-body .c-project-card--archive:hover h2,
.p-archive-body .c-project-card--archive:focus-within h2,
.p-archive-body .c-interview-card:hover h2,
.p-archive-body .c-interview-card:focus-within h2,
.p-archive-body .c-special-interview-card:hover h3,
.p-archive-body .c-special-interview-card:focus-within h3 {
	color: var(--color-primary);
}

.p-archive-body .c-project-card--archive:hover .c-project-card__visual img,
.p-archive-body .c-project-card--archive:focus-within .c-project-card__visual img,
.p-archive-body .c-interview-card:hover .c-interview-card__visual img,
.p-archive-body .c-interview-card:focus-within .c-interview-card__visual img,
.p-archive-body .c-special-interview-card:hover .c-special-interview-card__visual img,
.p-archive-body .c-special-interview-card:focus-within .c-special-interview-card__visual img {
	transform: scale(1.018);
}

.p-archive-body .c-project-card--archive > a:hover .c-project-card__footer b i,
.p-archive-body .c-project-card--archive > a:focus-visible .c-project-card__footer b i,
.p-archive-body .c-interview-card > a:hover .c-interview-card__footer b i,
.p-archive-body .c-interview-card > a:focus-visible .c-interview-card__footer b i,
.p-archive-body .c-special-interview-card > a:hover .c-special-interview-card__footer b i,
.p-archive-body .c-special-interview-card > a:focus-visible .c-special-interview-card__footer b i {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.p-archive-body .c-project-card--archive,
	.p-archive-body .c-interview-card,
	.p-archive-body .c-special-interview-card,
	.p-archive-body .c-project-card__visual img,
	.p-archive-body .c-interview-card__visual img,
	.p-archive-body .c-special-interview-card__visual img,
	.p-archive-body .c-project-card__footer b i,
	.p-archive-body .c-interview-card__footer b i,
	.p-archive-body .c-special-interview-card__footer b i,
	.p-archive-body .c-card-hover-underline {
		transition: none;
	}

	.p-archive-body .c-project-card--archive:hover,
	.p-archive-body .c-project-card--archive:focus-within,
	.p-archive-body .c-interview-card:hover,
	.p-archive-body .c-interview-card:focus-within,
	.p-archive-body .c-special-interview-card:hover,
	.p-archive-body .c-special-interview-card:focus-within,
	.p-archive-body .c-project-card--archive:hover .c-project-card__visual img,
	.p-archive-body .c-project-card--archive:focus-within .c-project-card__visual img,
	.p-archive-body .c-interview-card:hover .c-interview-card__visual img,
	.p-archive-body .c-interview-card:focus-within .c-interview-card__visual img,
	.p-archive-body .c-special-interview-card:hover .c-special-interview-card__visual img,
	.p-archive-body .c-special-interview-card:focus-within .c-special-interview-card__visual img {
		transform: none;
	}
}