/*====================================================
パンくず l-breadcrumb
====================================================*/
.l-breadcrumb {
	background-color: var(--color-creem);
	padding: 6px 18px;
	border-radius: 4px;
	align-items: center;
	position: relative;
	z-index: 1;
}
@media screen and (max-width: 768px) {
	.l-breadcrumb {
		background-color: var(--color-creem);
	}
}
.l-breadcrumb__list {
	width: fit-content;
	justify-content: space-between;
	gap: 8px;
}

.l-breadcrumb__item {
	color: #bababa;
	font-size: 1.2rem;
	font-weight: 500;
}

.l-breadcrumb__item-link {
	color: var(--color-main);
	display: flex;
	align-items: center;
	text-decoration: underline;
}
.l-breadcrumb__item-link::after {
	content: "";
	background-image: url(../images/common/breadcrumb-arrow.svg);
	background-size: 100% 100%;
	width: 3.17px;
	height: 6px;
	display: block;
	margin-left: 8px;
}
@media screen and (max-width: 768px) {
	.l-breadcrumb {
		margin: 0 calc(24 * var(--width-ratio));
	}
	.l-breadcrumb__list {
		width: fit-content;
		justify-content: space-between;
		gap: 6px;
	}

	.l-breadcrumb__item {
		color: #bababa;
		font-size: calc(12 * var(--width-ratio));
		font-weight: 500;
	}

	.l-breadcrumb__item-link {
		color: var(--color-main);
		display: flex;
		align-items: center;
	}
	.l-breadcrumb__item-link::after {
		content: "";
		background-image: url(../images/common/breadcrumb-arrow.svg);
		background-size: 100% 100%;
		width: calc(3.17 * var(--width-ratio));
		height: calc(6 * var(--width-ratio));
		display: block;
		margin-left: calc(6 * var(--width-ratio));
	}
}

/*====================================================
下層ページ MV l-pages-mv
====================================================*/
.l-pages-mv {
	max-width: 1200px;
	width: calc(100% - calc(60 * var(--width-ratio)));
	margin: 160px auto 87.7px;
}

@media screen and (max-width: 768px) {
	.l-pages-mv {
		width: 100%;
		margin-top: 7.8rem;
		margin-bottom: 1rem;
	}
}

.l-pages-mv__inner {
	position: relative;
	margin: 0 auto;
}
@media screen and (max-width: 768px) {
	.l-pages-mv__wrap {
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}
	.l-pages-mv__top-wrap {
		margin: calc(78 * var(--width-ratio)) auto 0;
	}
	.l-pages-mv__inner {
		position: relative;
		margin: calc(81 * var(--width-ratio)) auto 0;
	}
}
.l-pages-mv__top {
	align-items: flex-end;
	justify-content: space-between;
	position: relative;
}
.l-pages-mv__top-deco01 {
	display: block;
	width: 107.06px;
	height: 93.85px;
	position: absolute;
	left: -161.5px;
	bottom: 87px;
}
.l-pages-mv__top-deco02 {
	display: block;
	width: 134.16px;
	height: 107px;
	position: absolute;
	right: -186.25px;
	top: 39.4px;
}
.l-pages-mv__top-contents {
	width: 34.9%;
	margin-bottom: 34.8px;
}
.l-pages-mv__title {
	margin-bottom: 35px;
	font-size: 4.8rem;
}
.l-pages-mv__top-img {
	width: 63.16%;
	margin-right: -44px;
	margin-top: -24.1px;
}
@media screen and (max-width: 1235px) {
	.l-pages-mv__title {
		line-height: 1.5;
	}
	.l-pages-mv__top-contents {
		padding-top: 30px;
	}
}
@media screen and (max-width: 868px) {
	.l-pages-mv__title {
		line-height: 1.5;
		font-size: 42px;
	}
}
@media screen and (max-width: 768px) {
	.l-pages-mv__top {
		align-items: flex-end;
		justify-content: space-between;
		position: relative;
	}
	.l-pages-mv__top-deco01 {
		display: none;
	}
	.l-pages-mv__top-deco02 {
		display: block;
		width: calc(134.16 * var(--width-ratio));
		height: calc(107 * var(--width-ratio));
		position: absolute;
		right: -17.893vw;
		top: -14.267vw;
	}
	.l-pages-mv__top-contents {
		width: 100%;
		padding: 0 calc(24 * var(--width-ratio));
		margin-bottom: calc(22.3 * var(--width-ratio));
	}
	.l-pages-mv__title {
		line-height: 1.75;
		font-size: calc(28 * var(--width-ratio));
		margin-bottom: calc(32 * var(--width-ratio));
	}
	.l-pages-mv__top-img {
		width: 100%;
		margin-right: 0;
		margin-top: 0;
	}
}

/*============================
セクションタイトル
============================*/
.l-pages-ttl {
	position: relative;
	padding-top: 14.5rem;
	padding-bottom: 5rem;
}
@media screen and (max-width: 768px) {
	.l-pages-ttl {
		padding-top: 8rem;
		padding-bottom: 6.5rem;
	}
}

.l-pages-ttl::before {
	--grid: 30px;
	--line: 1px;
	--c: rgba(66, 140, 103, 0.3);
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(to right, var(--c) var(--line), transparent var(--line)), linear-gradient(to bottom, var(--c) var(--line), transparent var(--line));
	background-size: var(--grid) var(--grid);
	background-position: 0 0;
	z-index: -1;
}

@media screen and (max-width: 768px) {
	.l-pages-ttl::before {
		--grid: 20px;
		background-image: linear-gradient(to bottom, rgba(66, 140, 103, 0.3) 0, rgba(66, 140, 103, 0.3) 1px, transparent 1px, transparent 20px), repeating-linear-gradient(to left, rgba(66, 140, 103, 0.3) 0, rgba(66, 140, 103, 0.3) 1px, transparent 1px, transparent 20px);
	}
}

.l-pages-ttl__head {
	text-align: center;
	font-size: 3.6rem;
	font-weight: 700;
	line-height: 1.75;
	color: var(--color-main);
}
@media screen and (max-width: 768px) {
	.l-pages-ttl__head {
		font-size: calc(20 * var(--width-ratio));
	}
}
.l-pages-ttl__head::before {
	content: "";
	display: block;
	width: 7.48rem;
	height: 1.32rem;
	background-image: url(../images/common/icon_section_top.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-inline: auto;
	margin-bottom: 3.5rem;
}
@media screen and (max-width: 768px) {
	.l-pages-ttl__head::before {
		width: calc(48 * var(--width-ratio));
		height: calc(8.5 * var(--width-ratio));
		margin-bottom: calc(16 * var(--width-ratio));
	}
}

/*.  l-pages-ttl--nobg 背景格子なし
----------------------------------------------- */
.l-pages-ttl--nobg {
	padding-top: 0;
}
@media screen and (max-width: 768px) {
	.l-pages-ttl--nobg {
		padding-top: 2rem;
		padding-bottom: 4rem;
	}
}

.l-pages-ttl--nobg::before {
	content: none;
}

/*====================================================
コンテンツインナー
====================================================*/
.l-container {
	--contentmaxwidth: 1200px;
	--paddingInline: 20px;
	max-width: calc(var(--contentmaxwidth) + (2 * var(--paddingInline)));
	width: 100%;
	padding-inline: var(--paddingInline);
	margin-inline: auto;
}

@media screen and (max-width: 768px) {
	.l-container {
		--paddingInline: 15px;
	}
}

/* 1090px
----------------------------------------------- */
.l-container--1090 {
	--contentmaxwidth: 1090px;
}

/* 800px
----------------------------------------------- */
.l-container--800 {
	--contentmaxwidth: 800px;
}

/* l-container--spPin0 （inline paddingなし）
----------------------------------------------- */
.l-container--spPin0 {
	--paddingInline: 0px;
}
/* l-container--spPl0 （left paddingなし）
----------------------------------------------- */
.l-container--spPl0 {
	padding-left: 0;
}
/* l-container--spPr0 right paddingなし）
----------------------------------------------- */
.l-container--spPr0 {
	padding-right: 0;
}