.c-archive-header .c-archive-header-text {
	display: grid;
	row-gap: 8px;
}

.c-archive-header .c-archive-header-text::before {
	background-image: url(../images/archive/story/header.svg);
}

.c-archive-header .c-archive-header-text .c-story-archive-header-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	-moz-column-gap: 12px;
	column-gap: 12px;
	line-height: 1.40625;
	color: #fff;
	font-weight: 600;
	font-size: 2rem;
	letter-spacing: 12%;
	position: relative;
	z-index: 2;
}

.c-archive-header .c-archive-header-text .c-story-archive-header-title > span {
	padding-block: 4px;
	padding-inline: 10px;
	border-radius: 24px;
	background-color: #f5f6fa;
	display: flex;
	align-items: center;
	-moz-column-gap: 2px;
	column-gap: 2px;
	line-height: 1.4;
	color: #1f3566;
	font-weight: 600;
	font-size: 0.625rem;
}

.c-archive-header .c-archive-header-text .c-story-archive-header-title > span > span {
	line-height: 1;
	color: #1156bd;
	font-size: 1rem;
	letter-spacing: 0;
}

.c-archive-header .c-archive-header-text .c-story-archive-header-description {
	color: #e0e4f8;
	font-size: 0.875rem;
}

.post-content .rag-story-narrow-down {
	margin-block-end: 24px;
	padding-block: 16px;
	padding-inline: 24px;
	border-radius: 12px;
	background-color: #f5f6fa;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-header {
	margin-block-end: 16px;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-header .rag-story-narrow-down-title {
	padding-inline-start: 15px;
	color: #333;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 2%;
	position: relative;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-header .rag-story-narrow-down-title::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	translate: 0 -50%;
	border-radius: 100px;
	width: 3px;
	height: calc(100% - 5px);
	background-color: #e5e5e5;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul {
	padding-inline-start: 0;
	display: flex;
	align-items: center;
	list-style-type: '';
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li {
	flex-shrink: 0;
	min-width: 0;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link {
	border-radius: 4px;
	display: flex;
	align-items: center;
	font-size: 0.75rem;
	letter-spacing: 2%;
	text-decoration: none;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link::before {
	content: '';
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered {
	padding-block: 8px;
	padding-inline: 12px;
	border: 1px solid #e5e5e5;
	display: flex;
	align-items: center;
	-moz-column-gap: 6px;
	column-gap: 6px;
	color: #1f3566;
	background-color: #fff;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered > b {
	font-weight: 600;
	font-size: 0.875rem;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered:hover {
	background-color: #f5f6fa;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered:active {
	background-color: #f0f3ff;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered:focus-visible {
	box-shadow: 0 0 3px 0 rgba(0, 97, 243, 0.7);
	border-color: #06f;
	background-color: #fff;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered::before {
	content: '';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered[href='#era']::before {
	background-image: url(../images/icons/story/era.svg);
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-bordered[href='#occupation']::before {
	background-image: url(../images/icons/story/occupation.svg);
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-no-border {
	padding-block: 4px;
	padding-inline: 8px;
	color: #06f;
	font-weight: 600;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li > .rag-story-narrow-down-link.is-style-no-border[href='#era']::before {
	margin-inline-end: 4px;
	width: 16px;
	height: 16px;
	background-image: url(../images/icons/story/narrow-down.svg);
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li:has(.is-style-bordered) + :has(.is-style-bordered) {
	margin-inline-start: 8px;
}

.post-content .rag-story-narrow-down .rag-story-narrow-down-content > ul > li:has(.is-style-bordered) + :has(.is-style-no-border) {
	margin-inline-start: 16px;
}
