@charset "utf-8";
/* ============================================================================
   layout.css — ヘッダー・ナビ・フッター（さくら福岡社会保険労務士事務所サンプル）
   ========================================================================= */

.s5-sp { display: inline; }
@media (min-width: 768px) { .s5-sp { display: none; } }

/* ==========================================================================
   ヘッダー
   ========================================================================== */
.s5-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(250, 246, 239, .96);
	backdrop-filter: saturate(140%) blur(6px);
	border-bottom: 1px solid var(--border);
}
.s5-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	height: 72px;
}
.s5-header__brand { flex: none; line-height: 0; }
.s5-header__brand img { height: 34px; width: auto; }

.s5-nav { flex: 1 1 auto; }
.s5-nav__list {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--sp-5);
}
.s5-nav__list a {
	position: relative;
	text-decoration: none;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink-green);
	padding-block: 4px;
}
.s5-nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: -2px;
	height: 2px;
	background: var(--clay);
	transition: right .18s ease;
}
.s5-nav__list a:hover::after { right: 0; }
.s5-nav__cta { display: none; }

.s5-header__tel {
	display: none;
	align-items: center;
	gap: 6px;
	flex: none;
	text-decoration: none;
	font-weight: 700;
	color: var(--ink-green);
	font-size: .95rem;
}

.s5-navtoggle {
	margin-left: auto;
	flex: none;
	width: 40px; height: 40px;
	border: 0;
	background: none;
	display: grid;
	place-content: center;
	gap: 5px;
	cursor: pointer;
}
.s5-navtoggle span {
	display: block;
	width: 22px; height: 2px;
	background: var(--ink-green);
	transition: transform .2s ease, opacity .2s ease;
}
.s5-navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s5-navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.s5-navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* モバイルの開閉パネル */
.s5-nav {
	position: fixed;
	top: 72px; left: 0; right: 0;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	transform: translateY(-8px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.s5-nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
.s5-nav__list { display: grid; padding: var(--sp-4) var(--sp-5) var(--sp-5); gap: var(--sp-1); }
.s5-nav__list a { display: block; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
.s5-nav__cta { display: block; margin: var(--sp-2) var(--sp-5) var(--sp-5); text-align: center; }

@media (min-width: 900px) {
	.s5-nav {
		position: static;
		max-height: none;
		background: none;
		border: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		display: flex;
		align-items: center;
		gap: var(--sp-6);
	}
	.s5-nav__list { display: flex; padding: 0; }
	.s5-nav__list a { border-bottom: 0; padding-block: 4px; }
	.s5-nav__cta { display: inline-flex; margin: 0; }
	.s5-header__tel { display: flex; }
	.s5-navtoggle { display: none; }
}

/* ==========================================================================
   ページ上部へ戻る
   ========================================================================== */
.s5-pagetop {
	position: fixed;
	right: var(--sp-4);
	bottom: var(--sp-4);
	z-index: 30;
	width: 44px; height: 44px;
	display: grid;
	place-content: center;
	border-radius: 50%;
	background: var(--ink-green);
	color: #fff;
	box-shadow: var(--shadow);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}
.s5-pagetop.is-shown { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* ==========================================================================
   フッター
   ========================================================================== */
.s5-footer { background: var(--ink-green); color: rgba(250, 246, 239, .86); }

.s5-footer__top { padding-block: var(--sp-8); border-bottom: 1px solid rgba(250, 246, 239, .14); }
.s5-footer__cta { text-align: center; }
.s5-footer__cta-lead {
	margin: 0 0 var(--sp-2);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--clay);
	font-weight: 700;
}
.s5-footer__cta-title {
	color: #fff;
	font-size: clamp(1.3rem, 4vw, 1.8rem);
	line-height: 1.6;
	margin-bottom: var(--sp-6);
}
.s5-footer__cta-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.s5-footer__cta-btns .s5-btn--ghost { border-color: rgba(250,246,239,.5); color: #fff; }
.s5-footer__cta-btns .s5-btn--ghost:hover { background: rgba(250,246,239,.12); }

.s5-footer__grid {
	display: grid;
	gap: var(--sp-6);
	padding-block: var(--sp-7);
}
.s5-footer__brand img { height: 30px; width: auto; margin-bottom: var(--sp-3); }
.s5-footer__brand p { margin: 0; font-size: .85rem; line-height: 1.9; }
.s5-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
.s5-footer__nav a { text-decoration: none; font-size: .88rem; }
.s5-footer__nav a:hover { text-decoration: underline; }

@media (min-width: 700px) {
	.s5-footer__grid { grid-template-columns: 1fr auto; align-items: start; }
}

.s5-footer__copy {
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid rgba(250, 246, 239, .14);
	text-align: center;
	font-size: .78rem;
	color: rgba(250, 246, 239, .6);
}
.s5-footer__copy span { display: block; margin-top: 2px; }
.s5-footer__copy a { color: rgba(250, 246, 239, .8); }