.site-header {
	position: relative;
	z-index: 20;
	background: rgba(9, 8, 10, .97);
	color: #fff;
}

.mini-navigation,
.site-header__inner,
.scroll-navigation,
.site-shell,
.container-widget,
.big-footer__inner,
.site-footer__inner {
	width: min(90%, var(--remelabo-content-width));
	margin-inline: auto;
}

.mini-navigation {
	display: flex;
	justify-content: flex-end;
	min-height: 28px;
	font-size: .75rem;
}

.mini-navigation ul,
.primary-navigation ul,
.scroll-navigation ul,
.footer-navigation ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-navigation a,
.primary-navigation a,
.scroll-navigation a,
.footer-navigation a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.mini-navigation a {
	padding: .2rem .65rem;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 82px;
}

.site-branding {
	flex: 0 1 390px;
}

.custom-logo-link,
.custom-logo-link img {
	display: block;
	max-height: 72px;
	width: auto;
}

.site-title {
	color: #fff;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 800;
	text-decoration: none;
}

.site-description {
	margin: .15rem 0 0;
	color: #c8c2c9;
	font-size: .75rem;
}

.primary-navigation a {
	min-width: 112px;
	padding: 1.2rem .9rem;
	font-size: .92rem;
	font-weight: 700;
	text-align: center;
}

.primary-navigation a:hover,
.primary-navigation a:focus-visible {
	background: #211b22;
	color: #ff79b9;
}

.menu-toggle {
	display: none;
	border: 1px solid #5b505b;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
}

.search-toggle {
	display: none;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.35rem;
}

.header-search-panel {
	position: absolute;
	z-index: 30;
	top: 100%;
	right: 0;
	width: min(360px, 92vw);
	padding: .65rem;
	background: #151216;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}

.scroll-navigation {
	display: none;
	overflow-x: auto;
}

.scroll-navigation a {
	padding: .55rem .8rem;
	white-space: nowrap;
}

.site-content {
	min-height: 60vh;
	padding-block: 1.25rem 2.5rem;
}

.content-grid,
.l-main-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--remelabo-sidebar-width);
	align-items: start;
	gap: 1.25rem;
}

.remelabo-sidebar-left .content-grid,
.remelabo-sidebar-left .l-main-container {
	grid-template-columns: var(--remelabo-sidebar-width) minmax(0, 1fr);
}

.remelabo-sidebar-left #sidebar {
	grid-column: 1;
	grid-row: 1;
}

.remelabo-sidebar-left .site-main {
	grid-column: 2;
}

.remelabo-sidebar-none .content-grid,
.remelabo-sidebar-none .l-main-container {
	grid-template-columns: minmax(0, 1fr);
}

#sidebar {
	min-width: 0;
	width: var(--remelabo-sidebar-width);
}

.site-main {
	min-width: 0;
}

.site-main--page {
	max-width: 1100px;
}

.single-article,
.archive-main,
.comments-area,
.post-navigation {
	background: var(--remelabo-surface);
}

.single-article {
	padding: 2rem;
}

.widget-area .widget,
.container-widget .widget,
.archive-main {
	margin-bottom: 1rem;
	padding: 0;
	background: var(--remelabo-surface);
}

.widget-title {
	margin: -1rem -1rem 1rem;
	padding: .65rem 1rem;
	border-bottom: 2px solid var(--remelabo-border);
	font-size: 1rem;
}

.sticky-widget-area {
	position: sticky;
	top: 1rem;
}

.big-footer {
	background: #221e24;
	color: #eee8ef;
}

.big-footer__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	padding-block: 2rem;
}

.big-footer__inner--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.big-footer__column {
	min-width: 0;
}

.big-footer__column .widget {
	margin: 0;
	padding: 0 10px;
	background: transparent;
}

.big-footer__column .widgettitle,
.big-footer__column .widget-title {
	margin: 0 0 .75rem;
	padding: .65rem .8rem;
	border: 0;
	background: linear-gradient(90deg, #ff6fa9, #dd0068);
	color: #fff;
	font-size: 1rem;
	text-align: center;
}

.big-footer__column ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.big-footer__column ul ul {
	margin-left: .75rem;
}

.big-footer__column li {
	margin: 0;
	padding: .35rem 0;
	line-height: 1.55;
}

.site-footer {
	background: #111;
	color: #d7d0d8;
}

.site-footer__inner {
	padding-block: 1.25rem;
	text-align: center;
}

.footer-navigation ul {
	justify-content: center;
	flex-wrap: wrap;
}

.footer-navigation a {
	padding: .4rem .7rem;
}

.site-info {
	margin: .6rem 0 0;
	font-size: .8rem;
}

.post-bottom-widgets--sp {
	display: none;
}

@media (max-width: 959px) {
	.mini-navigation,
	.site-header__inner,
	.scroll-navigation,
	.site-shell,
	.container-widget,
	.big-footer__inner,
	.site-footer__inner {
		width: 96%;
	}

	.menu-toggle {
		display: inline-flex;
		position: absolute;
		z-index: 4;
		left: 10px;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 44px;
		padding: 8px;
	}

	.scroll-navigation {
		display: block;
	}

	.menu-toggle__bars,
	.menu-toggle__bars i {
		display: block;
		width: 100%;
	}

	.menu-toggle__bars i {
		height: 3px;
		margin: 5px 0;
		border-radius: 2px;
		background: currentColor;
	}

	.search-toggle {
		display: inline-flex;
		position: absolute;
		z-index: 4;
		right: 10px;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.site-header__inner {
		position: relative;
		justify-content: center;
		min-height: 65px;
	}

	.site-branding {
		flex: 0 1 auto;
		max-width: calc(100% - 120px);
	}

	.site-branding .custom-logo {
		max-width: 100%;
		max-height: 55px;
	}

	.primary-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 2%;
		right: 2%;
		background: #151216;
		box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	}

	.nav-open .primary-navigation {
		display: block;
	}

	.primary-navigation ul {
		display: block;
	}

	.primary-navigation a {
		text-align: left;
	}

	.content-grid,
	.l-main-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.remelabo-sidebar-left .site-main,
	.remelabo-sidebar-left #sidebar {
		grid-column: auto;
		grid-row: auto;
	}

	#sidebar {
		width: auto;
	}

	.sticky-widget-area {
		position: static;
	}

	.big-footer__inner {grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width: 600px) {
	.site-content {
		padding-top: .6rem;
	}

	.site-header__inner {min-height:65px}

	.single-article {
		padding: 14px;
	}

	.big-footer__inner {
		grid-template-columns: 1fr;
	}

	.post-bottom-widgets--pc {
		display: none;
	}

	.post-bottom-widgets--sp {
		display: block;
	}
}