/* * =========================================
 * Layout
 * =========================================
 */
.l-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
}

.l-footer,
.l-main {
	position: relative;
	width: 100%;
}

/* * =========================================
 * トップページ
 * =========================================
 */

/* .l-main（トップページなど）のcontainer */
.l-container {
	position: relative;
	width: 100%;
	min-width: 980px;
	max-width: 1128px;
	padding: 0 20px;
	margin: 0 auto;
	overflow: hidden;
}

/* 幅広め */
.l-container--wide {
	position: relative;
	width: 100%;
	min-width: 980px;
	max-width: 1306px;
	padding: 0 20px;
	margin: 0 auto;
	overflow: hidden;
}

/* * =========================================
 * 下層ページ
 * =========================================
 */

/* コンテンツとサイドバーで左右分かれているl-main */
.l-main--with-sidebar {
	/* コンテンツとサイドバーの定義（横並び/表示幅など）。 */
	display: flex;
	flex-direction: row;
	width: 100%;
	min-width: 980px;
	padding: 0;
	margin: 0 auto;
	overflow: hidden;
}

/* コンテンツの表示部分を定義。 */
.l-main__content {
	flex: 1;
}

/* l-main__contentの背景（必要に応じて各ページでオーバーライド） */
.l-main__content-bg {
	background-color: transparent;
}

/* サイドバーの表示部分を定義。 */
.l-main__sidebar {
	position: relative;
	width: 30%;
	max-width: 380px;
	box-shadow: inset 4px -1px 3px rgb(0 0 0 / 20%);
}

/* l-main__sidebarの背景（必要に応じて各ページでオーバーライド） */
.l-main__sidebar-bg {
	/* background-color: transparent; */
	background-color: rgb(255 232 239 / 80%);
}

.l-main__content,
.l-main__sidebar {
	/* headerに被らないように余白 */
	padding-top: 160px;
}

/* l-main__containerの配下で専用のcontainer */
.l-container--content {
	width: 100%;

	/* コンテンツ表示幅は840px（=920-40×2） */
	max-width: 920px;
	padding: 40px;
	padding-top: 0;
	padding-bottom: 0;
	margin: auto;
}

/* 幅広め */
.l-container--content-wide {
	width: 100%;
	max-width: 980px;
	padding: 16px;
	padding-top: 0;
	padding-bottom: 0;
	margin: auto;
}

/* l-main__sidebarの配下で専用のcontainer */
.l-container--sidebar {
	width: 100%;
	padding: 18px;
}

/* * =========================================
 * レスポンシブ対応 (767px以下)
 * =========================================
 */
@media (width <= 767px) {
	/*
	トップページで使用
	*/
	.l-container,
	.l-container--wide {
		min-width: 376px;
		padding: 0 16px;
	}

	.l-container--swiper {
		min-width: 376px;
	}

	/*
	下層ページで使用
	*/
	.l-main--with-sidebar {
		min-width: 0;
	}

	.l-main__sidebar {
		display: none;
	}

	.l-main__content {
		width: 100%;
		padding-top: var(--header-height);
	}

	.l-container--content,
	.l-container--content-wide {
		min-width: 376px;
		padding: 0 16px;
	}
}