@charset "utf-8";
/* ============================================================================
   office.css — 事務所紹介まわり共通（さくら福岡社会保険労務士事務所サンプル）
   office/ lawyer/ access/ の3ページで共通して読み込む前提のファイル。
   ========================================================================= */

/* --- 事務所紹介サブページのタブ風ナビ ------------------------------------ */
.s5-subnav { background: var(--white); border-bottom: 1px solid var(--border); }
.s5-subnav__inner { display: flex; gap: var(--sp-6); overflow-x: auto; }
.s5-subnav__inner a {
	display: block;
	padding: var(--sp-4) 0;
	text-decoration: none;
	color: var(--ink-mid);
	font-size: .9rem;
	font-weight: 500;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.s5-subnav__inner a.is-current { color: var(--ink-green); border-color: var(--clay); font-weight: 700; }

/* --- 2カラムの紹介（写真＋文章） ------------------------------------------ */
.s5-split { display: grid; gap: var(--sp-7); align-items: center; }
.s5-split__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.s5-split__body p { color: var(--ink-mid); font-size: .92rem; line-height: 1.9; margin: 0 0 var(--sp-3); }
@media (min-width: 860px) {
	.s5-split { grid-template-columns: 1fr 1fr; }
}

/* --- 3つの強み ------------------------------------------------------------- */
.s5-strengths {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-6);
}
.s5-strengths__item { text-align: center; }
.s5-strengths__item h3 { font-size: 1rem; color: var(--ink-green); margin-bottom: var(--sp-2); }
.s5-strengths__item p { margin: 0; font-size: .86rem; color: var(--ink-mid); line-height: 1.8; }