@charset "utf-8";
/* ============================================================================
   fee.css — 顧問料・費用（さくら福岡社会保険労務士事務所サンプル）
   ----------------------------------------------------------------------------
   旧テンプレートは弁護士費用の全項目を <table> で並べていた。
   月額の顧問契約は比較しやすいよう料金カードに変え、
   スポット料金など一覧性が要るものだけ表を残している（表自体も新しい見た目に）。
   ========================================================================= */

.s5-pricegrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-5);
	margin-top: var(--sp-6);
}
.s5-pricecard {
	position: relative;
	padding: var(--sp-6) var(--sp-5);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	text-align: center;
}
.s5-pricecard--main {
	border-color: var(--clay);
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}
.s5-pricecard__badge {
	position: absolute;
	top: -13px; left: 50%;
	transform: translateX(-50%);
	background: var(--clay);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	padding: 3px 14px;
	border-radius: 999px;
	white-space: nowrap;
}
.s5-pricecard__label { margin: 0 0 var(--sp-3); color: var(--ink-mid); font-size: .88rem; font-weight: 700; }
.s5-pricecard__num {
	margin: 0 0 var(--sp-5);
	font-family: var(--font-serif);
	font-size: 1.9rem;
	color: var(--ink-green);
}
.s5-pricecard__num span { font-size: .5em; font-family: var(--font-sans); color: var(--ink-weak); margin-left: 2px; }
.s5-pricecard ul { list-style: none; margin: 0; padding: 0; text-align: left; display: grid; gap: var(--sp-2); }
.s5-pricecard li {
	padding-left: 1.3em;
	position: relative;
	font-size: .85rem;
	color: var(--ink-mid);
}
.s5-pricecard li::before { content: "✓"; position: absolute; left: 0; color: var(--clay); font-weight: 700; }

.s5-table {
	width: 100%;
	margin-top: var(--sp-5);
	border-collapse: collapse;
	background: var(--white);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.s5-table tr:not(:last-child) { border-bottom: 1px solid var(--border); }
.s5-table th, .s5-table td { padding: var(--sp-4) var(--sp-5); text-align: left; font-size: .9rem; }
.s5-table th { width: 38%; color: var(--ink-green); font-weight: 700; background: var(--ink-green-100); }
.s5-table td { color: var(--ink-mid); }
@media (max-width: 560px) {
	.s5-table, .s5-table tr, .s5-table th, .s5-table td { display: block; width: auto; }
	.s5-table th { padding-bottom: var(--sp-2); }
	.s5-table td { padding-top: 0; }
}

.s5-note { margin: var(--sp-4) 0 0; font-size: .82rem; color: var(--ink-weak); }
.s5-mt-8 { margin-top: var(--sp-8); }