@charset "UTF-8";
/**
* Tag Cloud Common Styles
* File: assets/css/tag-cloud.css
* Description: タグクラウド表示用スタイルシート
*/

/* =====================================================
□ 共通（PC・スマホ共通）
===================================================== */

.tag-cloud-header {
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:28px;
	padding-bottom:20px;
	border-bottom: 2px solid var(--color-gray-200);
}

.tag-cloud-title {
	font-weight: var(--font-weight-heading);
	color: var(--color-gray-900);
	margin:0;
	letter-spacing:.02em;
	font-size: 1.625rem;
}

.tag-clear-button {
	font-weight: var(--font-weight-medium);
	color: var(--color-blue);
	text-decoration:none;
	padding:8px 16px;
	border: 1px solid var(--color-blue);
	background:transparent;
	transition:.25s ease;
}

.tag-clear-button:hover {
	color: var(--color-blue);
	background:transparent;
	opacity:.7;
}

.tag-cloud-container {
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}

.tag-cloud-item {
	display:inline-flex;
	align-items:center;
	padding:10px 16px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size-caption);
	color:#222;
	background:transparent;
	border: 1px solid var(--color-gray-200);
	text-decoration:none;
	transition:color .25s ease,border-color .25s ease;
	white-space:nowrap;
}

.tag-cloud-item::before {
	content:"#";
	margin-right:4px;
	opacity:.6;
}

.tag-cloud-item:hover,
.tag-cloud-item:focus {
	color: var(--color-blue);
	border-color: var(--color-blue);
	background:#fff;
}

.tag-cloud-item.active,
.tag-cloud-item.is-active {
	color:#fff;
	background: var(--color-blue);
	border-color: var(--color-blue);
}

.tag-cloud-item.active:hover,
.tag-cloud-item.is-active:hover {
	opacity:1;
}

.tag-cloud-item:hover {
	opacity:.9;
}

/* taxonomyページ現在選択中 */
.tag-cloud-item.is-current {
	pointer-events:none;
}

/* =====================================================
□ PC（641px以上）
===================================================== */
@media screen and (min-width: 641px) {

}

/* =====================================================
□ スマホ（640px以下）
===================================================== */
@media screen and (max-width: 640px) {

	.tag-cloud-header {
		flex-direction:column;
		align-items:flex-start;
		gap:16px;
		margin-bottom:24px;
		padding-bottom:16px;
	}

	.tag-cloud-title {
		font-size: var(--font-size-h4);
	}

	.tag-clear-button {
		font-size: var(--font-size-small);
		padding:6px 14px;
	}

	.tag-cloud-container {
		gap:10px;
	}

	.tag-cloud-item {
		padding:10px 18px;
		font-size: var(--font-size-small);
	}

}


/* =====================================================
□ 小さいスマホ（480px以下）
===================================================== */
@media screen and (max-width:480px) {

	.tag-cloud-title {
		font-size: var(--font-size-lead);
	}

	.tag-cloud-item {
		padding:8px 14px;
		font-size: var(--font-size-small);
	}

}