/*
 * 一覧ページ（Figma PC 15:4916 / SP 15:8539）。
 * Pick up、絞り込み、記事カード、ページャーを投稿タイプ非依存で定義する。
 */
.content-archive {
	padding-bottom: var(--section-space);
}

.archive-card__image,
.pickup-feature__image,
.pickup-card__image {
	display: block;
	width: 100%;
	object-fit: cover;
	background: #d9d9d9;
}

/* ---------- Pick up ---------- */

.archive-pickup {
	padding-top: 120px;
	padding-bottom: 120px;
	grid-template-areas:
		"head ."
		"feature list";
	row-gap: 54px;
	border-bottom: 1px solid rgb(255 255 255 / 45%);
}

.archive-pickup__head {
	grid-area: head;
}

.pickup-feature {
	grid-area: feature;
}

.pickup-list {
	grid-area: list;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pickup-feature a,
.pickup-card a {
	display: block;
	text-decoration: none;
}

.pickup-feature .card-media {
	aspect-ratio: 8 / 5;
}

.pickup-feature .card-meta {
	margin-top: 24px;
}

.pickup-feature__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 12px 0 0;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pickup-feature__lead {
	display: -webkit-box;
	overflow: hidden;
	margin: 20px 0 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pickup-feature .card-tags {
	margin-top: 4px;
}

.pickup-card + .pickup-card {
	margin-top: 24px;
}

.pickup-card:not(:last-child) {
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(255 255 255 / 45%);
}

.pickup-card a {
	display: grid;
	grid-template-columns: 276px minmax(0, 1fr);
	gap: 24px;
}

.pickup-card .card-media {
	aspect-ratio: 8 / 5;
}

.pickup-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.pickup-card .card-tags {
	margin-top: 4px;
}

/* ---------- 一覧本体 ---------- */

.archive-main {
	padding-top: 160px;
}

.archive-layout {
	display: grid;
	margin-top: 60px;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 60px;
}

/* ---------- 絞り込み ---------- */

.archive-filter {
	align-self: start;
}

.archive-filter__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.archive-filter__field {
	position: relative;
	margin-top: 24px;
}

.archive-filter__field + .archive-filter__field {
	margin-top: 20px;
}

.archive-filter input,
.archive-filter select {
	width: 100%;
	height: 57px;
	padding: 0 44px 0 12px;
	border: 0;
	border-radius: 4px;
	appearance: none;
	background: #fff;
	color: var(--color-ink);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.archive-filter input::placeholder {
	color: #bababa;
}

.archive-filter__field--search button {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 12px;
	height: 12px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	background: url("../../images/archive-search.svg") center / contain no-repeat;
	cursor: pointer;
}

.archive-filter__field--select::after {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 12px;
	height: 6px;
	background: url("../../images/contact-select-chevron.svg") center / contain no-repeat;
	content: "";
	pointer-events: none;
	transform: translateY(-50%);
}

.archive-filter__count {
	margin: 24px 0 0;
	color: #bababa;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.archive-filter__submit {
	width: 100%;
	min-height: 48px;
	margin-top: 20px;
	padding: 10px 16px;
	border: 1px solid currentcolor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.archive-filter-enhanced .archive-filter__submit {
	display: none;
}

.archive-filter__clear {
	display: inline-block;
	margin-top: 40px;
	color: var(--color-accent);
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ---------- 記事カード ---------- */

.archive-results__list {
	display: grid;
	margin: 0;
	padding: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px 39px;
	list-style: none;
}

.archive-results__item {
	list-style: none;
}

.archive-card a {
	display: block;
	text-decoration: none;
}

.archive-card .card-media {
	aspect-ratio: 8 / 5;
}

.archive-card .card-meta {
	margin-top: 24px;
}

.archive-card__title {
	display: -webkit-box;
	overflow: hidden;
	margin: 12px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.archive-card .card-tags {
	margin-top: 4px;
}

.archive-results__empty {
	margin: 0;
}

.archive-layout.is-loading .archive-results {
	opacity: 0.45;
	pointer-events: none;
}

.archive-results {
	transition: opacity 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
	.archive-results {
		transition: none;
	}
}

/* ---------- ページャー ---------- */

.content-pagination {
	display: flex;
	margin-top: 80px;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.content-pagination .page-numbers {
	display: grid;
	width: 32px;
	height: 32px;
	border-radius: 4px;
	place-items: center;
	font-family: var(--font-en);
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.content-pagination .page-numbers.current {
	background: #fff;
	color: var(--color-ink);
}

/* 前後の送りは数字と違い、矢印だけで見せる。 */
.content-pagination .prev.page-numbers,
.content-pagination .next.page-numbers {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	width: 6px;
	height: 12px;
	margin: 0 16px;
	background: url("../../images/pagination-arrow.svg") center / contain no-repeat;
	text-indent: -999em;
}

.content-pagination .next.page-numbers {
	transform: rotate(180deg);
}

/* ---------- 900px以下（1カラム） ---------- */

/* ---------- インタビュー variant（Figma PC 15:4323 / SP 15:8182） ---------- */

.archive-pickup--interview .pickup-feature .card-media {
	aspect-ratio: 8 / 5;
}

.pickup-feature__profile,
.archive-card__profile {
	display: grid;
	margin-top: 24px;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.pickup-feature__logo,
.archive-card__logo,
.pickup-card__logo {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: #d9d9d9;
}

.archive-pickup--interview .pickup-feature__title,
.archive-card--interview .archive-card__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.8;
}

.pickup-feature__guest,
.archive-card__guest {
	display: -webkit-box;
	overflow: hidden;
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.8;
	letter-spacing: 0.04em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.archive-card--interview .archive-card__guest {
	margin-top: 4px;
}

.archive-pickup--interview .pickup-feature__lead {
	margin-top: 20px;
}

.archive-pickup--interview .pickup-feature .card-tags {
	margin-top: 4px;
}

.archive-card--interview .card-tags {
	margin-top: 4px;
}

.archive-pickup--interview .pickup-card a {
	grid-template-columns: 296px minmax(0, 1fr);
}

.archive-pickup--interview .pickup-card .card-media {
	aspect-ratio: 8 / 5;
}

.archive-pickup--interview .pickup-card__title {
	margin-top: 0;
}

.pickup-card__guest {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.8;
	letter-spacing: 0.04em;
}

.archive-pickup--interview .pickup-card .card-tags {
	margin-top: 4px;
}


/* ---------- 実績・導入事例 variant（Figma PC 15:3223 / SP 15:7354） ---------- */

/* ロゴやアイコンを持たないクライアント系カード（導入事例）。 */
.archive-pickup--work .pickup-feature__title {
	margin-top: 24px;
	font-size: 28px;
	line-height: 1.6;
}

.archive-pickup--work .pickup-feature__guest {
	margin-top: 8px;
	font-size: 14px;
}

.archive-pickup--work .pickup-feature__lead {
	margin-top: 20px;
}

.archive-pickup--work .pickup-feature .card-tags {
	margin-top: 4px;
}

/* SPと同じくPCでも会社名を先に読ませる（Figma準拠）。 */
.archive-pickup--work .pickup-card__body {
	display: flex;
	flex-direction: column;
}

.archive-pickup--work .pickup-card__guest {
	order: 1;
	margin-top: 0;
}

.archive-pickup--work .pickup-card__title {
	order: 2;
	margin-top: 8px;
}

.archive-pickup--work .pickup-card .card-tags {
	order: 3;
	margin-top: 4px;
}

.archive-card--work .archive-card__title {
	margin-top: 24px;
	font-size: 20px;
	line-height: 1.6;
}

.archive-card--work .archive-card__guest {
	margin-top: 12px;
	font-size: 16px;
}

.archive-card--work .card-tags {
	margin-top: 4px;
}

/* ---------- クライアントロゴ帯 ---------- */

/*
 * Figmaではロゴ帯がPick upの区切り罫線と重なっているため、罫線は出さず
 * 「Pick up末尾→120px→ロゴ帯→160px→一覧見出し」の間隔だけを再現する。
 */
.archive-pickup--work {
	padding-bottom: 0;
	border-bottom: 0;
}

/*
 * 導入企業ロゴの帯。サービス詳細のロゴ帯と同じく、同じ並びを2セット置いて
 * 1セット分ずらし続ける。送り幅は枚数×(カード幅＋間隔)。
 */
.client-logos {
	--logo-card: 240px;
	--logo-gap: 24px;
	--logo-shift: calc(var(--logo-count, 8) * (var(--logo-card) + var(--logo-gap)));

	margin-top: 120px;
	overflow: hidden;
}

.client-logos__track {
	display: flex;
	width: max-content;
	gap: var(--logo-gap);
	animation: client-logos-scroll calc(var(--logo-count, 8) * 5s) linear infinite;
	will-change: transform;
}

@keyframes client-logos-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(var(--logo-shift) * -1), 0, 0);
	}
}

.client-logos__group {
	display: flex;
	margin: 0;
	padding: 0;
	gap: var(--logo-gap);
	list-style: none;
}

.client-logos__item {
	width: var(--logo-card);
	flex: none;
}

.client-logos__item a,
.client-logos__placeholder {
	display: grid;
	height: 120px;
	border-radius: 12px;
	background: #fff;
	place-items: center;
}

@media (prefers-reduced-motion: reduce) {
	.client-logos__track {
		animation: none;
	}
}

.client-logos__image {
	width: 180px;
	height: 56px;
	object-fit: contain;
}


/* ---------- 資料ダウンロード variant（Figma PC 15:4015 / SP 15:7923） ---------- */

/*
 * 資料一覧はPick upと一覧見出しを持たず、見出し帯の直後に絞り込みと
 * カードが並ぶ。カードは日付・カテゴリーを出さずダウンロードボタンを持つ。
 */
.archive-card--whitepaper .archive-card__title {
	margin-top: 24px;
	font-size: 16px;
	line-height: 1.8;
}

.archive-card--whitepaper .card-tags {
	margin-top: 4px;
}

/* 資料一覧はPick upと一覧見出しを持たないぶん、見出し帯からの余白が120px。 */
.post-type-archive-whitepaper .archive-main {
	padding-top: 120px;
}


/* ---------- ニュース variant（Figma PC 15:683 / SP 15:5657） ---------- */

/*
 * ニュースはPick upも一覧見出しも持たず、画像のない罫線区切りの行が並ぶ。
 */
.post-type-archive-news .archive-main {
	padding-top: 120px;
}

.post-type-archive-news .archive-results__list {
	grid-template-columns: 1fr;
	gap: 0;
}

.archive-card--news a {
	display: block;
	padding-bottom: 24px;
	border-bottom: 1px solid rgb(255 255 255 / 45%);
}

.archive-card--news + .archive-card--news,
.archive-results__item + .archive-results__item .archive-card--news {
	margin-top: 24px;
}

.news-row__meta {
	display: flex;
	margin: 0;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.news-row__meta time {
	font-family: var(--font-en);
}

.news-row__badge {
	padding: 4px 8px;
	border: 1px solid #fff;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

.news-row__body {
	display: grid;
	margin-top: 12px;
	padding-right: 32px;
	grid-template-columns: minmax(0, 1fr) 20px;
	gap: 40px;
	align-items: start;
}

.archive-card--news .archive-card__title {
	display: block;
	overflow: visible;
	margin: 0;
	font-size: 20px;
	line-height: 1.8;
}

.news-row__arrow {
	width: 20px;
	height: 20px;
	margin-top: 8px;
	flex: none;
}

@media (max-width: 899px) {
	.archive-pickup {
		grid-template-areas: none;
		row-gap: 0;
	}

	.archive-pickup > * {
		grid-area: auto;
	}

	.pickup-feature {
		margin-top: 50px;
	}

	.pickup-list {
		margin-top: 60px;
	}

	.archive-layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.archive-results {
		/* SPの全一覧で、フィルター下端からカード一覧までを60pxに統一する。 */
		margin-top: 60px;
	}
}

/* ---------- SP ---------- */

@media (max-width: 899px) {
	.archive-pickup {
		padding-top: 60px;
		padding-bottom: 80px;
	}

	.pickup-feature .card-media {
		aspect-ratio: 8 / 5;
	}

	.pickup-feature .card-meta {
		margin-top: 20px;
	}

	.pickup-feature__title {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.8;
	}

	.pickup-feature__lead {
		margin-top: 11px;
		font-size: 12px;
	}

	.pickup-feature .card-tags {
		margin-top: 4px;
	}

	.pickup-card a {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 12px;
	}

	.pickup-card .card-media {
		aspect-ratio: 8 / 5;
	}

	.pickup-card__title {
		margin-top: 4px;
		font-size: 14px;
	}

	.pickup-card .card-tags {
		margin-top: 4px;
	}

	.archive-main {
		padding-top: 80px;
	}

	.archive-layout {
		margin-top: 40px;
	}

	.archive-filter__title {
		font-size: 16px;
	}

	.archive-filter__field {
		margin-top: 12px;
	}

	.archive-filter__field + .archive-filter__field {
		margin-top: 12px;
	}

	/* SPは絞り込みが本文幅いっぱいに載り、件数とリセットは右寄せになる。 */
	.archive-filter__count {
		margin-top: 8px;
		font-size: 12px;
		text-align: right;
	}

	.archive-filter__clear {
		display: block;
		margin-top: 12px;
		font-size: 14px;
		text-align: right;
	}

	.archive-results__list {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.archive-card .card-media {
		aspect-ratio: 8 / 5;
	}

	.archive-card .card-meta {
		margin-top: 20px;
	}

	.archive-card__title {
		margin-top: 8px;
		font-size: 14px;
		line-height: 1.8;
	}

	.archive-card .card-tags {
		margin-top: 4px;
	}

	/* ---------- インタビュー variant（SP） ---------- */

	.pickup-feature__profile,
	.archive-card__profile {
		margin-top: 20px;
		grid-template-columns: 64px minmax(0, 1fr);
		gap: 16px;
	}

	.archive-pickup--interview .pickup-feature__title,
	.archive-card--interview .archive-card__title {
		font-size: 14px;
	}

	.pickup-feature__guest,
	.archive-card__guest {
		margin-top: 8px;
		font-size: 12px;
	}

	.archive-pickup--interview .pickup-feature__lead {
		margin-top: 12px;
	}

	.archive-pickup--interview .pickup-feature .card-tags,
	.archive-card--interview .card-tags {
		margin-top: 4px;
	}

	.archive-card--interview .card-tags {
		margin-top: 4px;
	}

	/* ---------- 実績・導入事例 variant（SP） ---------- */

	.archive-pickup--work .pickup-feature__title {
		margin-top: 20px;
		font-size: 14px;
		line-height: 1.8;
	}

	.archive-pickup--work .pickup-feature__guest {
		margin-top: 8px;
		font-size: 12px;
	}

	.archive-pickup--work .pickup-feature__lead {
		margin-top: 12px;
	}

	.archive-pickup--work .pickup-feature .card-tags {
		margin-top: 4px;
	}

	.archive-pickup--work .pickup-card__title {
		margin-top: 4px;
	}

	.archive-pickup--work .pickup-card .card-tags {
		margin-top: 4px;
	}

	.archive-card--work .archive-card__title {
		margin-top: 20px;
		font-size: 14px;
		line-height: 1.8;
	}

	.archive-card--work .archive-card__guest {
		margin-top: 8px;
		font-size: 12px;
	}

	.archive-card--work .card-tags {
		margin-top: 4px;
	}

	.archive-card--whitepaper .archive-card__title {
		margin-top: 20px;
		font-size: 14px;
	}

	.archive-card--whitepaper .card-tags {
		margin-top: 4px;
	}

	.post-type-archive-news .archive-main {
		padding-top: 60px;
	}

	/* SPは行の区切り罫線が画面全幅まで伸びる。 */
	.post-type-archive-news .archive-results {
		margin-top: 60px;
		margin-inline: calc(-1 * var(--page-gutter));
		padding-inline: var(--page-gutter);
		border-top: 1px solid rgb(255 255 255 / 45%);
	}

	.archive-card--news a {
		padding-bottom: 24px;
	}

	/* 先頭行も上罫線からFigma指定の26pxを空ける。 */
	.post-type-archive-news .archive-results__item:first-child .archive-card--news a {
		padding-top: 26px;
	}

	.archive-card--news + .archive-card--news,
	.archive-results__item + .archive-results__item .archive-card--news {
		margin-top: 26px;
	}

	.news-row__meta {
		font-size: 12px;
	}

	.news-row__badge {
		font-size: 12px;
	}

	.news-row__body {
		margin-top: 11px;
		padding-right: 0;
		grid-template-columns: minmax(0, 1fr) 16px;
		gap: 20px;
	}

	.archive-card--news .archive-card__title {
		font-size: 14px;
	}

	.news-row__arrow {
		width: 16px;
		height: 16px;
		margin-top: 6px;
	}

	.post-type-archive-whitepaper .archive-main {
		padding-top: 60px;
	}

	/* 資料一覧も他の一覧と同じ60pxに統一する。 */
	.post-type-archive-whitepaper .archive-results {
		margin-top: 60px;
	}

	/* 送り幅の計算に使うので、寸法は変数で上書きする。 */
	.client-logos {
		--logo-card: 120px;
		--logo-gap: 8px;

		margin-top: 56px;
		margin-bottom: 40px;
	}

	.client-logos__item a,
	.client-logos__placeholder {
		height: 60px;
		border-radius: 4px;
	}

	.client-logos__image {
		width: 90px;
		height: 28px;
	}

	.archive-pickup--interview .pickup-card a {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 12px;
	}

	.archive-pickup--interview .pickup-card .card-media {
		aspect-ratio: 8 / 5;
	}

	/* SPは会社名がタイトルより上に来る。 */
	.archive-pickup--interview .pickup-card__body {
		display: flex;
		flex-direction: column;
	}

	.archive-pickup--interview .pickup-card__guest {
		order: 1;
		margin-top: 0;
		font-size: 12px;
	}

	.archive-pickup--interview .pickup-card__title {
		order: 2;
		margin-top: 4px;
	}

	.archive-pickup--interview .pickup-card .card-tags {
		order: 3;
		margin-top: 4px;
	}
}

/* Unset guest image: no empty image column. */
.pickup-feature__profile:not(:has(> img)),
.archive-card__profile:not(:has(> img)) {
	grid-template-columns: minmax(0, 1fr);
}