@charset 'UTF-8';
/*----------------------------------------

	- pageTitle
	- contentWrapTop
	- contentWrap

-----------------------------------------*/

.disabled {
	pointer-events: none;
	opacity: .1;
}

/*----------------------------------------
	pageTitle
-----------------------------------------*/
.pageTitle {
	inline-size: min(80%, 1120px);
	margin-block: 191px 128px;
	margin-inline: auto;
}

.pageTitle h1 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size52);
	line-height: var(--line-height15);
}

@media (width <=800px) {
	.pageTitle {
		inline-size: 88%;
		margin-block: 100px 96px;
	}

	.pageTitle h1 {
		font-size: var(--font-size32);
	}
}

/*----------------------------------------
	contentWrapTop
-----------------------------------------*/
.contentWrapTop {
	display: grid;
	inline-size: min(80%, 1120px);
	margin-inline: auto;
	padding-block-end: 32px;
}

.contentWrapTop p {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
}

@media (width <=800px) {
	.contentWrapTop {
		inline-size: 84%;
		margin-inline: auto;
	}
}

/*----------------------------------------
	contentWrap
-----------------------------------------*/
.contentWrap {
	display: grid;
	grid-template-columns: 1fr;
	inline-size: min(80%, 1120px);
	margin-inline: auto;
	border-block-start: 1px solid var(--color-black01);
	padding-block: 64px;
}

.contentWrap:has(h2) {
	grid-template-columns: 100px 1fr;
}

.contentWrap:last-of-type {
	padding-block-end: 0;
}

/* 文字サイズ */
.contentWrap h2 {
	position: relative;
}

.contentWrap h2 > span {
	display: grid;
	gap: 0 12px;
	grid-template-columns: max-content auto;
	align-items: center;
	position: sticky;
	inset-block-start: 0;
	inset-inline-start: 66px;
	margin-block-start: auto;
	writing-mode: vertical-rl;
}

.contentWrap h2 > span span:nth-of-type(1) {
	font-size: var(--font-size36);
	font-family: var(--font-family-mincho);
	line-height: var(--line-height10);
	letter-spacing: var(--letter-spacing6);
}

.contentWrap h2 > span span:nth-of-type(2) {
	font-weight: var(--font-weight-light);
	font-size: var(--font-size10);
	font-family: var(--font-family-jost);
	line-height: var(--line-height125);
	letter-spacing: var(--letter-spacing6);
}

.contentWrap .list01 > :where(dt, p) {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
}

.contentWrap .list01 > :where(dd),
.contentWrap .list02 > :where(dt, p) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size20);
	line-height: var(--line-height222);
}

.contentWrap .list02 > dd,
.contentWrap .list03 > :where(dt, dd) {
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size16);
	line-height: var(--line-height222);
}

/* 配置 */
.contentWrap .list01 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px 64px;
}

.contentWrap .list01 + .list01 {
	border-block-start: 1px solid var(--color-opalgray01);
	margin-block-start: 64px;
	padding-block-start: 64px;
}

.contentWrap .list01:has(>p + p){
	gap: 64px;
	margin-block-end: 30px;
}

.contentWrap .column2,
.contentWrap .list01 > :where(dt, p) {
	grid-column: 1/-1;
}

.contentWrap .list02 {
	display: grid;
	gap: 8px 64px;
}

.contentWrap .list03 {
	display: grid;
	gap: 8px 64px;
}

.contentWrap .column2 > [class*="list0"] {
	grid-template-columns: repeat(2, 1fr);
}

.contentWrap .list02 > dt {
	margin-block-end: 12px;
}

.contentWrap .list02 > dd {
	padding-inline-start: 20px;
}

.contentWrap .list03 > dd {
	padding-inline-start: 12px;
}

.contentWrap .wrap a span {
	display: inline-block;
	padding-inline: .7em 0;
}

@media (width <=950px) {
	.contentWrap .list01 {
		grid-template-columns: 1fr;
	}

	.contentWrap .column2 > [class*="list0"] {
		grid-template-columns: 1fr;
	}
}

@media (width <=800px) {
	.contentWrap {
		grid-template-columns: 1fr;
		inline-size: 84%;
		margin-inline: auto;
		padding-block: 48px;
	}

	.contentWrap:has(h2) {
		grid-template-columns: 56px 1fr;
	}

	.contentWrap h2 > span {
		gap: 4px;
	}

	.contentWrap h2 > span span:nth-of-type(1) {
		font-size: var(--font-size24);
	}

	.contentWrap h2 > span span:nth-of-type(2) {
		transform: scale(0.8);
	}

	.contentWrap .list01 > :where(dt, p) {
		font-size: var(--font-size24);
	}

	.contentWrap .list01 > :where(dd),
	.contentWrap .list02 > :where(dt, p) {
		font-size: var(--font-size18);
	}

	.contentWrap .list02 > dd,
	.contentWrap .list03 > :where(dt, dd) {
		font-size: var(--font-size14);
	}

	.contentWrap .list01 {
		gap: 24px;
	}

	.contentWrap .list01 + .list01 {
		margin-block-start: 48px;
		padding-block-start: 48px;
	}

	.contentWrap .list01:has(>p + p) {
		gap: 48px;
		margin-block-end: 0;
	}

	.contentWrap .list02 > dt {
		margin-block-end: 8px;
	}

	.contentWrap .list02 > dd {
		padding-inline-start: 16px;
	}

	.contentWrap .list02:has(.column2) > dd + dd {
		margin-block-start: 16px;
	}
}