/* ==========================================================
   インタビュー（一覧・詳細）共通
   色・角丸などの設定と、タグ・ボタン・入力欄・サムネイル・フォーカス表示をそろえる
   このあとに 一覧: case-archive.css / 詳細: case-single.css が読み込まれる
   ========================================================== */

.post-type-archive-case,
.tax-case_cat,
.tax-case_scale,
.tax-case_occupation,
.tax-case_skill,
.single-case {
	--case-red: #e60012;       /* SAMURAI の赤（トップのお問い合わせフォームと同じ） */
	--case-red-dark: #c4000f;
	--case-red-soft: #fff2f2;  /* 薄いピンク（フォーム背景と同じ） */
	--case-text: #30343b;
	--case-muted: #737983;
	--case-line: #e5e7eb;
	--case-line-strong: #d1d5db;
	--case-bg: #f7f8fa;
	--case-radius: 8px;
	--case-ease: .2s ease;
}

/* SWELL のメインカラー・リンク色（青）を、事例ページの本文エリア内だけ赤に */
.post-type-archive-case #main_content,
.tax-case_cat #main_content,
.tax-case_scale #main_content,
.tax-case_occupation #main_content,
.tax-case_skill #main_content,
.single-case #main_content {
	--color_main: var(--case-red);
	--color_link: var(--case-red);
}

/* ---------- タグ（絞り込みへのリンク） ----------
   未選択: 白地のチップ / 選択中: 赤 / 0件になるもの: 点線・グレー */
.c-caseTag {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 3px 12px;
	border: 1px solid var(--case-line);
	border-radius: 999px;
	background: #fff;
	color: var(--case-text);
	font-size: .8125rem;
	line-height: 1.5;
	text-decoration: none;
	transition: border-color var(--case-ease), color var(--case-ease), background-color var(--case-ease);
}

a.c-caseTag:hover {
	border-color: var(--case-red);
	background: #fff;
	color: var(--case-red);
}

.c-caseTag.is-active,
a.c-caseTag.is-active:hover {
	border-color: var(--case-red);
	background: var(--case-red);
	color: #fff;
}

a.c-caseTag.is-active:hover {
	border-color: var(--case-red-dark);
	background: var(--case-red-dark);
}

.c-caseTag.is-active::after {
	content: "×";
	margin-left: .5em;
	font-size: .85em;
}

.c-caseTag.is-disabled {
	border-style: dashed;
	background: var(--case-bg);
	color: #a9aeb6;
	cursor: default;
}

/* ---------- バッジ（業種・社員数などの表示のみ） ---------- */
.c-caseBadge {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--case-bg);
	color: var(--case-text);
	font-size: .75rem;
	line-height: 1.6;
	list-style: none;
}

.c-caseBadge__key {
	margin-right: .5em;
	font-weight: 700;
	color: var(--case-muted);
}

/* ---------- 入力欄・ボタン ---------- */
.c-caseFilter__input[type="search"],
.c-caseSideSearch input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 40px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--case-line-strong);
	border-radius: var(--case-radius);
	background: #fff;
	color: var(--case-text);
	font-size: .875rem;
	box-shadow: none;
	transition: border-color var(--case-ease), box-shadow var(--case-ease);
}

.c-caseFilter__input[type="search"]:focus,
.c-caseSideSearch input[type="search"]:focus {
	outline: none;
	border-color: var(--case-red);
	box-shadow: 0 0 0 3px rgba(230, 0, 18, .15);
}

.c-caseFilter__submit,
.c-caseSideSearch button,
.c-caseSideDl__btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 0;
	padding: 0 20px;
	border: none;
	border-radius: var(--case-radius);
	background: var(--case-red);
	color: #fff;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--case-ease);
}

.c-caseFilter__submit:hover,
.c-caseSideSearch button:hover,
.c-caseSideDl:hover .c-caseSideDl__btn {
	background: var(--case-red-dark);
}

/* ---------- キーボード操作時のフォーカス表示 ---------- */
.c-caseTag:focus-visible,
.c-caseCard__link:focus-visible,
.c-caseSidePosts__link:focus-visible,
.c-caseSideDl:focus-visible,
.c-caseSide__more:focus-visible,
.c-caseFilter__reset:focus-visible,
.c-caseFilter__more > summary:focus-visible,
.c-caseFilter__submit:focus-visible,
.c-caseSideSearch button:focus-visible,
.c-caseHead__termVals a:focus-visible,
.c-casePager .page-numbers:focus-visible {
	outline: 2px solid var(--case-red);
	outline-offset: 3px;
}

/* ---------- 動きを減らす設定の人には動きを止める ---------- */
@media (prefers-reduced-motion: reduce) {
	.c-caseMain *,
	.c-caseSingle * {
		transition: none !important;
		animation: none !important;
	}

	.c-caseCard__link:hover .c-caseCard__img {
		transform: none !important;
	}
}