@charset "utf-8";
/* ============================================================================
   service.css — 取扱業務（さくら福岡社会保険労務士事務所サンプル）
   ----------------------------------------------------------------------------
   旧テンプレートは <ul class="cat"><li><span>...</span></li></ul> という
   入れ子で6項目を並べていた。ここではカード＋数字バッジの構成に変えている。
   ========================================================================= */

.s5-servicelist {
	display: grid;
	gap: var(--sp-6);
	margin-top: var(--sp-7);
}
.s5-servicecard {
	padding: var(--sp-6);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
}
.s5-servicecard__head {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}
.s5-servicecard__head h2 { font-size: 1.2rem; color: var(--ink-green); }
.s5-servicecard > p { margin: 0 0 var(--sp-4); color: var(--ink-mid); font-size: .92rem; line-height: 1.9; }

.s5-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.s5-taglist li {
	padding: 5px 14px;
	background: var(--ink-green-100);
	border-radius: 999px;
	font-size: .8rem;
	color: var(--ink-green-700);
	font-weight: 500;
}
.s5-servicecard__note {
	margin: var(--sp-3) 0 0;
	font-size: .78rem;
	color: var(--ink-weak);
}