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

	- 　goBack
	- topics

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

/*----------------------------------------
	goBack
-----------------------------------------*/
.goBack {
	inline-size: min(80%, 1120px);
	margin-block-start: 189px;
	margin-inline: auto;
}

.goBack a {
	position: relative;
	padding-inline-start: 30px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size20);
	line-height: var(--line-height15);
}

.goBack a::before {
	content: '';
	display: block;
	position: absolute;
	inset-block-start: 9px;
	inset-inline-start: 0;
	transform: rotate(265deg);
	block-size: 10px;
	inline-size: 10px;
	background: url(/asset/img/common/arrow01_s.svg) no-repeat center center;
	background-size: cover;
}

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

/*----------------------------------------
	topics
-----------------------------------------*/
.topics {
	inline-size: min(80%, 1120px);
	margin-block-start: 73px;
	margin-inline: auto;
}

.topics .pageTitle {
	max-inline-size: 800px;
	margin-inline-start: auto;
	padding-block-end: 32px;
	border-block-end: var(--border-width1) solid var(--color-black01);
}

.topics .pageTitle p {
	line-height: var(--line-height15);
	font-family: var(--font-family-mincho);
}

.topics .pageTitle p span {
	margin-inline-start: 12px;
	padding-block: 3px;
	padding-inline: 8px;
	background: var(--color-mediumgray01);
	color: var(--color-white01);
	font-size: var(--font-size14);
	line-height: var(--line-height125);
	font-family: var(--font-family);
}

.topics .pageTitle p span.ritual {
	background: var(--color-about01);
}

.topics .pageTitle h1 {
	margin-block-start: 15px;
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size44);
	line-height: var(--line-height15);
}

.topics .pageTitle h1 ruby rt {
	font-size: var(--font-size16);
	ruby-align: unset;
	text-align: unset;
	margin-block: 0.18rem;
}

@-moz-document url-prefix() {
	.topics .pageTitle h1 ruby rt {
		margin-block: -0.05rem -0.7rem;
	}
}

_::-webkit-full-page-media,
_:future,
:root .topics .pageTitle h1 ruby rt {
	margin-block-end: -0.85rem;
}

.topics .pageContents {
	max-inline-size: 800px;
	margin-inline-start: auto;
}

.topics .pageContents .keyword {
	display: flex;
	gap: 12px 8px;
	flex-wrap: wrap;
	margin-block-start: 32px;
}

.topics .pageContents .keyword li a {
	display: grid;
	place-items: center;
	padding: 12px 20px;
	border-radius: 100vh;
	background: var(--color-white01);
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size14);
	line-height: var(--line-height125);
	opacity: 1;
	-webkit-user-select: none;
	user-select: none;
}

@media (hover: hover) {
	.topics .pageContents .keyword li a:hover {
		background: var(--color-darkgray01);
		color: var(--color-white01);
		transition: all 0.2s cubic-bezier(0.45, 0, 0.55, 1);
	}
}

.topics .pageContents .mainTxt {
	margin-block-start: 80px;
}

.topics .pageContents .mainTxt a {
	border-block-end: var(--border-width1) solid currentColor;
}

.topics .pageContents .relationLink {
	margin-block-start: 80px;
}

.topics .pageContents .relationLink li+li {
	margin-block-start: 19px;
}

.topics .pageContents .relationLink li a {
	border-block-end: var(--border-width1) solid currentColor;
}

.topics .pageContents .relationLink li a:is(.external, .pdf) {
	position: relative;
	margin-inline-end: calc(0.65em + 16px);
}

.topics .pageContents .relationLink li a.external::after {
	content: '';
	display: inline-block;
	position: absolute;
	inset-block-end: 0.25em;
	inset-inline-end: calc((0.65em + 16px)* -1);
	block-size: 16px;
	inline-size: 16px;
	background: url(/asset/img/common/ic_external01_m.svg) no-repeat center center;
	background-size: cover;
}

.topics .pageContents .relationLink li a.pdf::after {
	content: '';
	display: inline-block;
	position: absolute;
	inset-block-end: 0.25em;
	inset-inline-end: calc((0.65em + 16px)* -1);
	block-size: 16px;
	inline-size: 16px;
	background: url(/asset/img/common/ic_pdf01_m.svg) no-repeat center center;
	background-size: cover;
}

.topics .pageContents .img {
	margin-block-start: 32px;
}

.topics .pageContents .img:first-of-type {
	margin-block-start: 62px;
}

.topics .pageContents .img.large {
	inline-size: min(100%, 800px);
}

.topics .pageContents .img.medium {
	inline-size: min(65%, 520px);
}

.topics .pageContents .img.small {
	inline-size: min(42%, 336px);
}

.topics .pageContents .video {
	inline-size: 100%;
	margin-block-start: 64px;
	margin-inline: unset;
}

@media (width <=800px) {
	.topics {
		inline-size: 100%;
		margin-block-start: 59px;
		margin-inline: unset;
	}

	.topics .pageTitle {
		inline-size: 84%;
		margin-inline: auto;
		padding-block-end: 31px;
	}

	.topics .pageTitle p span {
		font-size: var(--font-size12);
	}

	.topics .pageTitle h1 {
		margin-block-start: 10px;
		font-size: var(--font-size28);
	}

	.topics .pageTitle h1 ruby rt {
		font-size: var(--font-size10);
	}
	@-moz-document url-prefix() {
		.topics .pageTitle h1 ruby rt {
			margin-block: -0.05rem -0.35rem;
		}
	}
	_::-webkit-full-page-media,
	_:future,
	:root .topics .pageTitle h1 ruby rt {
		margin-block-end: -0.55rem;
	}

	.topics .pageContents {
		inline-size: 100%;
		margin-inline-start: unset;
	}

	.topics .pageContents :is(.keyword, .mainTxt, .relationLink, .img:is(.large, .medium, .small)) {
		inline-size: 84%;
		margin-inline: auto;
	}

	.topics .pageContents .mainTxt {
		margin-block-start: 65px;
	}

	.topics .pageContents .relationLink {
		margin-block-start: 65px;
	}

	.topics .pageContents .relationLink li a:is(.external, .pdf) {
		margin-inline-end: calc(0.65em + 10px);
	}

	.topics .pageContents .relationLink li a.external::after {
		inset-inline-end: calc((0.65em + 10px)* -1);
		block-size: 10px;
		inline-size: 10px;
		background-image: url(/asset/img/common/ic_external01_s.svg);
	}

	.topics .pageContents .relationLink li a.pdf::after {
		content: '';
		inset-inline-end: calc((0.65em + 10px)* -1);
		block-size: 10px;
		inline-size: 10px;
		background-image: url(/asset/img/common/ic_pdf01_s.svg);
	}

	.topics .pageContents .video {
		inline-size: unset;
	}
}