@charset "utf-8";


.translate,
.rotate,
.scale {
	display: inline-block;
	cursor: default;
}
.translate {
	transition: translate 1s;
}
.translate:hover {
	translate: 0 -1em;
}
.rotate {
	transition: rotate 1s;
}
.rotate:hover {
	rotate: 45deg;
}
.scale {
	transition: scale 1s;
}
.scale:hover {
	scale: 1 2;
}

.c-text {
	transition: opacity .3s;
}
.c-text:hover {
	opacity: .3;
}

.c-ico {
	width: 1.2em;
	height: 1.2em;
	margin: -.1em .1em 0;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.c-ico.-fill {
	stroke: none;
	fill: currentcolor;
}
.c-ico.-pan {
	width: 42px;
	height: 39px;
	margin-top: -12px;
}
@media (max-width: 519px) {
	.c-ico.-pan {
		width: 28px;
		height: 26px;
		margin-top: -8px;
	}
}


/**
 * Article
 * ---------------------------------------- */
.p-article {
	font-size: 1.1875rem;
	line-height: 2;
	font-family: var(--tsukuAM), sans-serif;
	text-align: center;
}
@media (max-width: 959px) {
	.p-article {
		font-size: 1.0625rem;
	}
}
@media (max-width: 519px) {
	.p-article {
		font-size: .9375rem;
		line-height: 1.8;
	}
}


/**
 * Main Header
 * ---------------------------------------- */
.l-shadow,
.main_header {
	height: clamp(320px, 52.5vw, 640px);
}

/* white header */
.l-shadow {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	line-height: 0;
	-webkit-clip-path: url(#arch_square);
	clip-path: url(#arch_square);
	pointer-events: none;
}
.p-home .l-shadow {
	display: none;
}
.l-shadow .header_logo,
.l-shadow .header_menu {
	color: white;
}
.l-shadow .header_menu {
	border-color: white;
}
.main_header {
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin: 0 calc(50% - 50vw);
	padding: 0 24px;
}
@media (hover: hover) and (prefers-color-scheme: light) {
	.l-shadow .header_menu {
		transition: color .4s, background-color .4s;
	}
	.header_menu:hover ~ .l-shadow .header_menu {
		color: var(--lopan);
		background: white;
		transition-duration: .05s;
	}
}
@media (hover: hover) and (prefers-color-scheme: dark) {
	.l-shadow .header_menu::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		opacity: .2;
		transition: background .4s;
	}
	.header_menu:hover ~ .l-shadow .header_menu::before {
		background: var(--lopan);
		transition-duration: .05s;
	}
}
.has-scrollbar .main_header {
	margin-right: calc(50% - var(--viewWidth) / 2);
	margin-left: calc(50% - var(--viewWidth) / 2);
}

/* タイトル */
.main_header .title {
	position: relative;
	color: white;
	font-size: 2.5rem;
	line-height: 1.2;
	font-family: var(--tsukuAN);
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}
@media (min-width: 1200px) {
	.main_header .title {
		font-size: 3.125rem;
	}
}
@media (max-width: 959px) {
	.main_header .title {
		font-size: 2.25rem;
	}
}
@media (max-width: 519px) {
	.main_header {
		padding: 0 16px;
	}
	.main_header .title {
		font-size: 2rem;
	}
}
@media (max-width: 360px) {
	.main_header .title {
		font-size: 1.75rem;
	}
}

/* 日付 */
.main_header .c-date {
	position: absolute;
	bottom: 24px;
	left: 0;
	width: 100%;
	margin: 0;
	color: white;
	letter-spacing: .05em;
	text-align: center;
}
.main_header .c-date .update {
	margin-left: 1em;
}

/* アイキャッチ */
.main_header .eyecatch,
.main_header .eyecatch::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.main_header .eyecatch {
	z-index: -1;
	-webkit-user-select: none;
	user-select: none;
	-webkit-clip-path: url(#arch_square);
	clip-path: url(#arch_square);
}
.main_header .eyecatch::after {
	content: "";
	opacity: .8;
	background: linear-gradient(to right top,
		var(--red), #ec8668 32%, #86c68c 68%, #ec0
	) center / cover no-repeat;
}
.main_header .eyecatch img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: clamp(320px, 640vw / 12, 640px);
	object-fit: cover;
	/*filter: url(#fractal-noise);*/
}


/**
 * リード文
 * ---------------------------------------- */
.p-article .c-lead {
	margin: 0 auto;
	padding: 64px 100px;
}
@media (max-width: 959px) {
	.p-article .c-lead {
		padding: 64px 40px;
	}
}
@media (max-width: 519px) {
	.p-article .c-lead {
		padding: 32px 16px;
	}
}
@media (max-width: 360px) {
	.p-article .c-lead {
		padding: 24px 0;
	}
}


/**
 * Section
 * ---------------------------------------- */
:where(.p-article > section) {
	position: relative;
	margin: 40px 0;
	padding: 80px 100px;
}
@media (max-width: 959px) {
	:where(.p-article  > section) {
		padding: 80px 40px;
	}
}
@media (max-width: 519px) {
	:where(.p-article > section) {
		padding: 80px 16px;
	}
}
@media (max-width: 360px) {
	:where(.p-article > section) {
		padding: 40px 16px;
	}
}
:where(.p-article > section) {
	padding-top: 0;
}
:where(.p-article > section:first-of-type) {
	margin-top: 0;
}
:where(.p-article > section)::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 7rem;
	right: 0;
	bottom: 0;
	left: 0;
	border-radius: 40px;
	background: white;
}
@media (prefers-color-scheme: dark) {
	:where(.p-article > section)::before {
		background: var(--dark-black);
	}
}
@media (max-width: 959px) {
	:where(.p-article > section)::before {
		border-radius: 24px;
	}
}
@media (max-width: 519px) {
	:where(.p-article > section)::before {
		border-radius: 16px;
	}
}

/* h3 以下 */
:where(.p-article) .c-box,
:where(.p-article) aside,
:where(.p-article section section) {
	margin: 80px 0;
	font-size: max(96%, .875rem);
}
:where(.p-article section section + section) {
	margin-top: 96px;
}
:where(.p-article) .c-box,
:where(.p-article) aside {
	padding: 40px;
	border-radius: 8px;
}

@media (max-width: 959px) {
	:where(.p-article) .c-box,
	:where(.p-article) aside {
		margin: 64px 0;
		padding: 32px;
	}
}
@media (max-width: 519px) {
	:where(.p-article) .c-box,
	:where(.p-article) aside {
		margin: 48px 0;
		padding: 24px 16px;
	}
	:where(.p-article) .c-box .c-propertylist,
	:where(.p-article) aside .c-propertylist {
		margin-left: -16px;
	}
}
@media (max-width: 360px) {
	:where(.p-article) .c-box,
	:where(.p-article) aside {
		margin: 32px 0;
		padding: 16px;
	}
}

/* h4 以下 */
:where(.p-article section section section) {
	margin: 48px 0 0;
	padding: 0 24px;
	border: 0;
}
:where(.p-article section section section + section) {
	margin-top: 64px;
}
:where(.p-article section section section section) {
	margin-top: 24px;
	padding: 0;
}
:where(.p-article section section section section + section) {
	margin-top: 40px;
}
@media (max-width: 959px) {
	:where(.p-article section section section) {
		padding: 0 16px;
	}
}
@media (max-width: 519px) {
	:where(.p-article section section section) {
		padding: 0;
	}
}

.p-article aside > :first-child,
.p-article .c-box > :first-child,
.p-article section > :first-child {
	margin-top: 0;
}
.p-article aside > :last-child,
.p-article .c-box > :last-child,
.p-article section > :last-child {
	margin-bottom: 0;
}

/* 補足 */
:where(.p-article) aside {
	background: var(--white);
}
:where(.p-article) aside .c-title {
	font-size: 1.375rem;
}
@media (max-width: 360px) {
	:where(.p-article) aside .c-title::before {
		background: none;
	}
}

/* 枠欄 */
.c-box {
	border: 1px solid var(--gray7);
}
.c-box.-fill {
	background: var(--white);
}
@media (max-width: 360px) {
	.c-box .c-title::before {
		background: none;
	}
}

/* 注意 */
.c-attention {
	padding: 24px 40px;
	border: 1px solid var(--gray6);
	border-radius: 8px;
	font-size: max(86%, .875rem);
	line-height: 1.8;
}
.c-attention .c-title {
	font-size: 1.375rem;
}
@media (max-width: 959px) {
	.c-attention {
		padding: 24px 32px;
	}
}
@media (max-width: 519px) {
	.c-attention {
		padding: 24px;
	}
}
@media (max-width: 360px) {
	.c-attention {
		padding: 16px;
	}
	.c-attention .c-title::before {
		background: none;
	}
}

/* サンプル */
.c-sample {
	padding: 1em 1.5em;
	border: 1px solid var(--gray7);
	border-radius: 8px;
	font-size: 1rem;
	line-height: 1.8;
	background: inherit;
}
.c-sample > :first-child {
	margin-top: 0;
}
.c-sample > :last-child {
	margin-bottom: 0;
}

/* 注釈 */
.c-note {
	padding-left: 1em;
	font-size: .875rem;
	line-height: 1.8;
	text-indent: -1em;
}
small.c-note {
	display: inline-block;
}
.c-note::before {
	content: "※";
}
.c-note > *,
.c-note::before {
	text-indent: 0;
}
@media (max-width: 519px) {
	.c-note {
		font-size: .75rem;
	}
}

/* 編集ブロック */
.c-blockins {
	display: block;
	position: relative;
	margin: 24px 0 calc(24px + 2em);
	padding: 16px 24px;
	border: 1px solid var(--gray6);
	border-radius: 16px 16px 16px 0;
	background: var(--white);
}
.c-blockins[datetime]::after {
	position: absolute;
	top: 100%;
	left: -1px;
	padding: 0 1em .2em 1em;
	border: 1px solid var(--gray6);
	border-top: 0;
	border-radius: 0 0 8px 8px;
	background: var(--white);
}
.c-blockins > :first-child {
	margin-top: 0;
}
.c-blockins > :last-child {
	margin-bottom: 0;
}
.c-blockins blockquote {
	background: white;
}
@media (prefers-color-scheme: dark) {
	.c-blockins blockquote {
		background: var(--dark-black);
	}
}


/**
 * Paragraph
 * ---------------------------------------- */
:where(.p-article) h2 {
	margin-bottom: 2em;
	padding: 1.1em 0 1em;
	font-size: 2rem;
	font-family: var(--tsukuAN);
}
:where(.p-article) h2::before {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: calc(50% - 50vw);
	bottom: 0;
	left: calc(50% - 50vw);
	background: var(--white) url(/prx/000/https/lopan.jp/assets/img/bg.webp) center / 200px fixed;
	/*animation: sandstorm 1s steps(8) infinite;
	will-change: animation;*/
}
@media (prefers-color-scheme: dark) {
	:where(.p-article) h2::before {
		background-image: url(/prx/000/https/lopan.jp/assets/img/bg_dark.webp);
	}
}
:where(.has-scrollbar .p-article) h2::before {
	right: calc(50% - 50vw + var(--scrollBarWidth) / 2);
	left: calc(50% - 50vw + var(--scrollBarWidth) / 2);
}
:where(.p-article) h3 {
	margin-left: -40px;
	padding-left: 40px;
	font-size: 1.75rem;
}
:where(.p-article) h4 {
	margin-left: -40px;
	padding-left: 40px;
	font-size: 1.5rem;
}
:where(.p-article) h3::before,
:where(.p-article) h4::before {
	content: "";
	position: absolute;
	top: .2em;
	bottom: .2em;
	left: 0;
	width: 8px;
	background: var(--stripeYellow) center;
}
:where(.p-article) h4::before {
	background-image: var(--stripeGray);
}
:where(.p-article) h5 {
	font-size: 1.375rem;
}
@media (max-width: 519px) {
	:where(.p-article) h3,
	:where(.p-article) h4 {
		margin-left: -16px;
		padding-left: 24px;
	}
	:where(.p-article) h2 {
		font-size: 1.875rem;
	}
	:where(.p-article) h3 {
		font-size: 1.5rem;
	}
	:where(.p-article) h4 {
		font-size: 1.25rem;
	}
	:where(.p-article) h5 {
		font-size: 1.125rem;
	}
}

:where(.p-article) .c-title {
	position: relative;
}

:where(.p-article) p,
:where(.p-article) ul,
:where(.p-article) ol,
:where(.p-article) dl {
	margin: 1em 0;
	text-align: left;
	line-break: strict;
	overflow-wrap: break-word;
	hyphens: auto;
	hanging-punctuation: last allow-end;
	font-feature-settings: "palt" 1;
}

/* リストの項目 */
:where(.p-article) li {}

/* 定義リストの用語 */
:where(.p-article) dt {}

/* 定義リストの説明 */
:where(.p-article) dd {}

/* ブロック引用要素 */
:where(.p-article) blockquote {
	padding: 16px;
	border-radius: 8px;
	background: var(--white);
}
:where(.p-article) blockquote.quote {
	background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><path fill="%23eeeff1" d="M2.536,4.128c0,.48-.4,1.024-1.072,1.024S.087,4.592.087,3.52C.087,1.695,2.023.847,2.584.847c.145,0,.256.208.256.352,0,.064-.016.112-.063.128-1.089.256-1.457.864-1.457,1.28,0,.336.192.497.641.705.4.16.576.48.576.816ZM5.609,4.128c0,.48-.4,1.024-1.072,1.024s-1.377-.561-1.377-1.633c0-1.825,1.937-2.673,2.497-2.673.145,0,.256.208.256.352,0,.064-.016.112-.063.128-1.089.256-1.457.864-1.457,1.28,0,.336.192.497.641.705.4.16.576.48.576.816Z"/></svg>'), url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><path fill="%23eeeff1" d="M.095,4.801c0-.048.017-.096.064-.112,1.072-.256,1.44-.864,1.44-1.296,0-.336-.16-.497-.64-.705-.385-.16-.561-.48-.561-.8,0-.256.224-1.041,1.072-1.041.832,0,1.36.769,1.36,1.633,0,1.809-1.937,2.673-2.48,2.673-.145,0-.257-.208-.257-.353ZM3.152,4.801c0-.048.017-.096.064-.112,1.088-.256,1.456-.864,1.456-1.296,0-.32-.176-.497-.64-.705-.4-.16-.576-.48-.576-.816,0-.48.399-1.024,1.072-1.024s1.376.561,1.376,1.633c0,1.857-1.984,2.673-2.497,2.673-.144,0-.256-.208-.256-.353Z"/></svg>');
	background-position: left .5em top .5em, right .5em bottom .5em;
	background-size: 2em, 2em;
	background-repeat: no-repeat;
}
@media (prefers-color-scheme: dark) {
	:where(.p-article) blockquote.quote {
		background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><path fill="%2346434c" d="M2.536,4.128c0,.48-.4,1.024-1.072,1.024S.087,4.592.087,3.52C.087,1.695,2.023.847,2.584.847c.145,0,.256.208.256.352,0,.064-.016.112-.063.128-1.089.256-1.457.864-1.457,1.28,0,.336.192.497.641.705.4.16.576.48.576.816ZM5.609,4.128c0,.48-.4,1.024-1.072,1.024s-1.377-.561-1.377-1.633c0-1.825,1.937-2.673,2.497-2.673.145,0,.256.208.256.352,0,.064-.016.112-.063.128-1.089.256-1.457.864-1.457,1.28,0,.336.192.497.641.705.4.16.576.48.576.816Z"/></svg>'), url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6"><path fill="%2346434c" d="M.095,4.801c0-.048.017-.096.064-.112,1.072-.256,1.44-.864,1.44-1.296,0-.336-.16-.497-.64-.705-.385-.16-.561-.48-.561-.8,0-.256.224-1.041,1.072-1.041.832,0,1.36.769,1.36,1.633,0,1.809-1.937,2.673-2.48,2.673-.145,0-.257-.208-.257-.353ZM3.152,4.801c0-.048.017-.096.064-.112,1.088-.256,1.456-.864,1.456-1.296,0-.32-.176-.497-.64-.705-.4-.16-.576-.48-.576-.816,0-.48.399-1.024,1.072-1.024s1.376.561,1.376,1.633c0,1.857-1.984,2.673-2.497,2.673-.144,0-.256-.208-.256-.353Z"/></svg>');
	}
}
:where(.p-article) blockquote > * {
	font-size: 96%;
}
:where(.p-article) blockquote > :first-child {
	margin-top: 0;
}
:where(.p-article) blockquote > :last-child {
	margin-bottom: 0;
}
:where(.p-article) blockquote span:not([class],[lang]) {
	color: var(--gray4);
}
:where(.p-article) blockquote cite {
	display: block;
	margin-top: .5em;
	color: var(--gray4);
	font-size: max(80%, .625rem);
	text-align: right;
}
:where(.p-article) aside blockquote {
	background: var(--gray7);
}
@media (min-width: 520px) {
	:where(.p-article) blockquote {
		padding-left: 40px;
	}
	:where(.p-article) blockquote.quote {
		padding: 40px;
		background-position: left 1em top .5em, right 1em bottom .5em;
	}
}

/* 区切り線 */
:where(.p-article) hr {
	max-width: calc(100% - 48px);
	margin: 64px auto;
	border: 0;
	border-top: 1px solid var(--gray5);
}
:where(.p-article) hr.rest {
	max-width: 2em;
}
:where(.p-article) hr.wait {
	max-width: 40px;
	border-top-width: 8px;
	border-top-style: dotted;
}
@media (max-width: 519px) {
	:where(.p-article) hr {
		margin: 40px auto;
	}
}


/**
 * Phrase
 * ---------------------------------------- */
/* 重要 */
:where(.p-article) strong {
	padding: .1em;
	margin: 0 .1em;
	color: var(--lopan);
	font-size: 104%;
	font-family: var(--tsukuAE);
	background: var(--stripeYellow) center bottom repeat-x;
}

/* 強調 */
:where(.p-article) em {
	padding: .1em;
	font-style: normal;
	background: var(--stripeYellow) center;
}
@media (prefers-color-scheme: dark) {
	:where(.p-article) em {
		color: var(--black);
	}
}

/* 目立たせ (太字下線) */
:where(.p-article) mark {
	color: inherit;
	font-family: var(--tsukuAB);
	text-decoration: var(--yellow) underline;
	text-decoration-thickness: 3px;
	background: none;
}
/* 目立たせ (太字) */
:where(.p-article) b {
	color: var(--lopan);
	font-family: var(--tsukuAE);
}
:where(.p-article) .b {
	font-family: var(--tsukuAE);
}

/* 他と区別 (空き) */
:where(.p-article) i {
	padding: .1em;
	font-style: normal;
	background: var(--stripeGray) center;
}
:where(.p-article) .emo,
:where(.p-article) .emoji {
	display: inline-block;
	cursor: default;
	font-family: var(--monospace);
	letter-spacing: .05em;
	background: none;
}
:where(.p-article) .emo {
	position: relative;
	top: -.1em;
	min-width: 1.4em;
	font-size: 96%;
	transition: transform .6s var(--easeOut);
	will-change: transform;
}
:where(.p-article) .emo:hover {
	transform: rotate(90deg);
	transition-duration: .1s;
}

/* リンク */
:where(.c-lead) a,
:where(.p-article section) a {
	margin: 0 .1em;
	padding: .1em 0;
	color: var(--lopan);
	background: linear-gradient(currentcolor, currentcolor) left bottom / 100% 1px no-repeat;
}
@media (any-hover: hover) {
	:where(.c-lead) a,
	:where(.p-article section) a {
		transition: background-size .6s cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	:where(.c-lead) a:hover,
	:where(.p-article section) a:hover {
		background-position: right bottom;
		background-size: 0 1px;
		transition-duration: .2s;
	}
}

/* 注釈 */
:where(.p-article) small,
:where(.p-article) span:not([class],[lang]) {
	font-size: max(80%, .625rem);
	font-family: var(--tsukuAM);
}

/* 引用 */
:where(.p-article) q::before {
	content: "“";
}
:where(.p-article) q::after {
	content: "”";
}

/* 引用元ページ・書籍のタイトル */
:where(.p-article) cite {
	font-style: normal;
}

/* ソースコード */
:where(.p-article) code {
	position: relative;
	top: -.1em;
	margin: 0 .2em;
	padding: .2em .2em .1em;
	border: 1px solid var(--gray7);
	border-radius: 4px;
	font-size: 92%;
	font-family: var(--monospace);
	background: var(--white);
}
:where(.p-article) .c-title code {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
}

/* ルビ */
:where(.p-article) ruby {}
:where(.p-article) rp {}
:where(.p-article) rt {
	font-size: max(60%, .5rem);
	font-family: var(--tsukuAM);
}
:where(.p-article) code ~ rt {
	margin-bottom: .5em;
	transform: translateY(-.5em);
}
@supports (-ms-ime-align: auto) {
	:where(.p-article) rt {
		position: relative;
		top: .5em;
	}
	:where(.p-article) code ~ rt {
		position: static;
	}
}

/* 上付き・下付き */
:where(.p-article) sup,
:where(.p-article) sub {
	position: relative;
	font-size: .75rem;
}
:where(.p-article) sup {
	top: .25em;
	vertical-align: top;
}
:where(.p-article) sub {
	bottom: .25em;
	vertical-align: bottom;
}
@media (max-width: 959px) {
	:where(.p-article) sup,
	:where(.p-article) sub {
		font-size: .6875rem;
	}
}
@media (max-width: 519px) {
	:where(.p-article) sup,
	:where(.p-article) sub {
		font-size: .625rem;
	}
}

/* 略語や頭字語 */
:where(.p-article) abbr {
	text-decoration: var(--yellow) dotted underline;
	text-decoration-thickness: 3px;
}

/* キーボード */
:where(.p-article) kbd {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .2em;
	margin: 0 .1em;
	line-height: 1.4;
}
:where(.p-article) kbd kbd {
	cursor: default;
	position: relative;
	top: -.1em;
	margin: 0;
	padding: .1em .4em 0;
	border: 1px solid var(--gray5);
	border-radius: 4px;
	box-shadow: 0 1px 0 var(--gray5);
	font-size: 88%;
	font-family: var(--monospace);
	white-space: nowrap;
	background: var(--gray7);
	transition: box-shadow .6s var(--easeOut), transform .6s var(--easeOut);
}
:where(.p-article) kbd kbd:hover {
	box-shadow: 0 0 0 var(--gray5);
	transform: translateY(1px);
	transition-duration: .1s;
}

/* 取り消し */
:where(.p-article) s {
	margin: 0 .1em;
	color: var(--gray2);
	text-decoration-color: var(--gray4);
	text-decoration-style: double;
}

/* 文書の編集 */
:where(.p-article) del,
:where(.p-article) ins {
	padding: .1em;
	margin: 0 .1em;
}
:where(.p-article) ins {
	text-decoration: none;
	background: var(--stripeGray) center;
}
:where(.p-article) ins[datetime] {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
}
:where(.p-article) code del {
	background: rgba(220,100,134,.5);
}
:where(.p-article) code ins {
	background: rgba(136,199,143,.5);
}

/* 装飾 */
:where(.p-article) .dot {
	-webkit-text-emphasis: dot;
	text-emphasis: dot;
}
:where(.p-article) .sesame {
	-webkit-text-emphasis: sesame;
	text-emphasis: sesame;
}
:where(.p-article) .waveline {
	padding-bottom: .3em;
	background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="3" viewBox="0 0 12 3" preserveAspectRatio="none"><path fill="none" stroke="%23553968" d="M0,.9C1.5.9,1.5,2.1,3,2.1S4.5.9,6,.9,7.5,2.1,9,2.1,10.5.9,12,.9"/></svg>') 48% 100% / 1.02em .3em repeat-x;
}
@media (prefers-color-scheme: dark) {
	:where(.p-article) .waveline {
		background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="3" viewBox="0 0 12 3" preserveAspectRatio="none"><path fill="none" stroke="%239181cc" d="M0,.9C1.5.9,1.5,2.1,3,2.1S4.5.9,6,.9,7.5,2.1,9,2.1,10.5.9,12,.9"/></svg>');
	}
}


/**
 * List
 * ---------------------------------------- */
.c-list {
	padding-left: 1.2em;
	line-height: 1.8;
	text-indent: -1.2em;
}
.c-list li + li {
	margin-top: .4em;
}
.c-list li::before {
	content: "";
	display: inline-block;
	width: .3em;
	height: .3em;
	border-radius: .3em;
	margin: -.15em .6em 0 .3em;
	vertical-align: middle;
	background: var(--gray6);
}
.c-list li > * {
	text-indent: 0;
}

/* リンク一覧 */
.c-linklist {
	padding-left: 1.2em;
	line-height: 1.8;
	text-indent: -1.2em;
}
.c-linklist li::before {
	content: "";
	display: inline-block;
	width: .4em;
	border-top: 1px solid var(--gray4);
	margin: -.15em .8em 0 0;
	vertical-align: middle;
}
.c-linklist li + li {
	margin-top: .4em;
}

/* 番号付き一覧 */
.c-numlist {
	padding-left: 2.4em;
	list-style: decimal-leading-zero;
	line-height: 1.8;
}
.c-numlist li + li {
	margin-top: .4em;
}
.c-numlist li::marker {
	font-family: var(--monospace);
}
.c-numlist li > * {
	text-indent: 0;
}

/* 用語の解説一覧 */
.c-dllist {
	margin: 24px 0;
	padding: 1em 1.5em;
	border-radius: 8px;
	background: var(--white);
}
.c-dllist dt {
	position: relative;
	padding-left: 1em;
	font-family: var(--tsukuAB);
}
.c-dllist.-num dt {
	counter-increment: num;
	padding-left: 1.4em;
}
.c-dllist dt::before {
	content: "";
	position: absolute;
	top: .75em;
	left: 0;
	width: .3em;
	height: .3em;
	border-radius: .3em;
	background: var(--gray6);
}
.c-dllist.-num dt::before {
	content: counter(num) ".";
	top: 0;
	width: 1em;
	height: auto;
	background: none;
	font-family: var(--monospace);
}
.c-dllist dd {
	position: relative;
	margin-top: .2em;
	padding-left: 2em;
	font-size: 92%;
	line-height: 1.8;
}
.c-dllist dd + dt {
	margin-top: .5em;
}
@media (max-width: 519px) {
	.c-dllist dd {
		padding-left: 1em;
	}
	.c-dllist.-num dd {
		padding-left: 1.4em;
	}
	.c-dllist dd::before {
		width: 4px;
	}
}

/* 用語の解説ボックス */
.c-dlbox {
	margin: 40px 0;
	padding: 24px clamp(16px, 24vw / 5.2, 40px);
	border: 1px solid var(--gray7);
	border-radius: 8px;
	background: var(--white);
}
.c-dlbox dt {
	position: relative;
	font-size: 108%;
	font-family: var(--tsukuBB);
}
.c-dlbox dt::before {
	content: "";
	position: absolute;
	top: calc(50% - .6em);
	left: clamp(-40px, -24vw / 5.2, -16px);
	width: 8px;
	height: 1.2em;
	background-image: var(--stripeGray);
}
.c-dlbox dd {
	margin-top: .5em;
	font-size: 92%;
}

/* 用語の解説テーブル */
.c-dlgrid {
	--dt: auto;
	display: grid;
	grid-template-columns: auto auto;
	margin: 2em 0;
	border-top: 1px solid var(--gray7);
}
.c-dlgrid dt,
.c-dlgrid dd {
	padding: .6em .3em;
	border-bottom: 1px solid var(--gray7);
	line-height: 1.8;
}
.c-dlgrid dt {
	grid-column: 1;
}
.c-dlgrid dd {
	grid-column: 2;
	padding-left: 1em;
}

/* プロパティ解説一覧 */
.c-propertylist {
	margin: 40px 0;
}
.c-propertylist dt {
	position: relative;
	padding-left: 24px;
	font-family: var(--tsukuBB);
	font-size: 112%;
	font-weight: 700;
}
.c-propertylist dt::before {
	content: "";
	position: absolute;
	top: calc(50% - 8px);
	left: 0;
	width: 8px;
	height: 16px;
	background: var(--stripeYellow) center;
}
.c-propertylist dt code {
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font-weight: inherit;
	background: inherit;
}
.c-propertylist dd {
	margin-top: .2em;
	margin-left: 24px;
	line-height: 1.8;
}
.c-propertylist dd + dt {
	margin-top: 24px;
}
.c-propertylist .value {
	margin-top: .5em;
	padding: 16px;
	border-radius: 8px;
	background: var(--white);
}
.c-propertylist .value ul {
	padding-left: 0;
}
.c-propertylist .value > *:first-child {
	margin-top: 0;
}
.c-propertylist .value > *:last-child {
	margin-bottom: 0;
}
.c-propertylist .value li {
	display: inline-block;
}
.c-propertylist .value .default {
	color: var(--lopan);
}
.c-propertylist .value li:not(:last-child)::after {
	content: "/";
	margin: 0 .5em;
}

/* 脚注 */
.c-notes {
	padding: 24px;
	border-radius: 8px;
	background: var(--gray7);
}
.c-notes li {
	counter-increment: note;
	padding-left: 2em;
	font-size: .875rem;
	line-height: 1.8;
	text-indent: -2em;
}
.c-notes li + li {
	margin-top: .2em;
}
.c-notes li::before {
	content: "※" counter(note);
	display: inline-block;
	width: 2em;
}
.c-notes li > *,
.c-notes li::before {
	text-indent: 0;
}
@media (prefers-color-scheme: dark) {
	.c-notes {
		background: var(--white);
	}
	:where(.p-article) aside .c-notes,
	:where(.p-article) blockquote .c-notes {
		background: var(--dark-black);
	}
}
@media (max-width: 519px) {
	.c-notes li {
		font-size: .75rem;
	}
}


/**
 * Figure
 * ---------------------------------------- */
:where(.p-article) figure {
	margin: 24px 0;
}
:where(.p-article) figcaption {
	font-size: .875rem;
	line-height: 1.4;
}
:where(.p-article) figcaption:last-child,
:where(.p-article) figcaption:first-child + *,
:where(.p-article) iframe + figcaption {
	margin-top: .375rem;
}
@media (max-width: 519px) {
	:where(.p-article) figcaption {
		font-size: .8125rem;
	}
}

/* image */
.c-image img {
	border-radius: 8px;
}
.c-image.is-broken {
	position: relative;
}
.c-image.is-broken::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	width: min(100%, var(--w) * 1px);
	height: auto;
	margin-inline: auto;
	border-radius: 8px;
	aspect-ratio: var(--w) / var(--h);
	background: var(--gray7) url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="none" stroke="%23c2c4ca" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M1,59.4c3.2-1.4,6.4-2.3,10.1-2.6,2.1,5.6-2.9,6.7-4.6,2.9.7,5.4-3.5,5.4-4.8,2.4M8.6,76.6c0-.9,0-1.9,0-2.8,5.4,3.5,7.4-5.6,2.1-4.2-2.1.6-4.2,1.4-6.2,2.3M16.6,85.9c4.1-.3,3.1-6.3-1.1-5.5s-2.4,5.8,1.1,5.5ZM29.2,84.9c-2.1,2.3-4.2,4.5-5.9,7.3M28.7,93.8c-.8-.9-2.5-1.8-1.5-3s2.5-.8,3.4-.8M38.4,95.1c5.1-.2,5.3-3.7,1.7-3.7s-4,5.7,1.2,6.2M55.4,97.6c0-1.4-.3-4.9-2.5-5-2.3,0-2.3,4.1-2.1,5.4M63.5,89.1c1.1,2.7,1.7,6,3.7,6.8s4-.9,5.5-1.8M75.2,83.8c-.3,0-.6,0-.9.1M80,89.6c-1.1-.5-2-1.3-2.6-2.2M88.8,80.7c-1-1.1-2.7-2.7-4.4-1.9-3,1.5.2,4.7,2,5.4M86.6,69.9c2.2,1.7,4.8,2.2,7.2,3.4,0,0,0,0,.1,0M94.2,68.6c-.3,1.1-1.3,1.9-2.4,2.2-.6-1.1-1-2.3-1.1-3.6M96.6,62.9c-.3,0-.7,0-1.1.1M98.2,58.1c-.4,0-.8,0-1.3.1M99,53.4c-.4,0-1,0-1.3.2M31.1,25.4c-7.6,4.3-19.1,4.1-23.3-4.7-5.4,3.3-8.8,0-4.1-4.4,11.4-10.4,29.8-10.4,36.9,4.9M66.3,23c2.4,8.4,14.6,19.7,24.3,17.2,1.9,3.7,5.6,1.3,5.2-2.8-1.9-16-20.9-29.2-33.8-20.7-6.1-3.2-17.1-2.9-23.1.1M23.9,28.5c-10.4,10.7-9.8,33.3,5,39.5M72.5,67.5c11.6-3.7,14.4-16.6,11.2-26.8M24.1,65.4c-7.1,5.5,1.2,14,8,8.7-2.4,7.4,8.2,11.6,11.9,3.8M47.2,78.4c1.2,3.5,5.2,5.2,8.7,4.9,4.2-.4,6.2-4.6,8.9-6.2s6.8,1.2,10.3.4c6-1.4,7.8-8.6,1.4-11.6M34.7,46.5c1.5,1.9,3.3,3.7,5.3,5.1M33.1,52.8l5.8-6M66.9,51.7l-4.2-4.6M67.4,46.4c-2.2,1.8-4.1,3.8-5.8,6.1M44.5,30.2c-2.5,1.9-3.4,6.7-.5,8.5M50,31.1c-1.6,2-2.1,5.7,1,6.9M55.1,31c-1,2.6-.4,7.2,3.2,6.8M33.3,61.4c-2.5,1.5-1.3,4.8,1.6,4.6,2.6-.1,5-2.6,7.6-1.8,1.4.5,2.6,1.8,3.9,1.4,1.7-.6,2.3-2.5,4.4-1.7s1.7,1,2.6,1.3c2.4.7,3.8-1.6,6.1-1.7,1.5,0,2.7,1,4,1.6,1.7.8,4.1.8,5.8-.2,1.7-1.1,2.2-3.3,0-4.2-2.2-.9-4.7-1.2-7.1-1-2.3.2-5,1.6-7.3,1.3-1.4-.2-2.2-1.4-3.5-1.8-1.9-.6-3.6.9-5.4,1.2s-4-.9-6.1-1c-2.3-.1-4.6.8-6.6,2Z"/></svg>') center center / 16% auto no-repeat;
}
.c-image.is-broken img {
	opacity: 0;
}
@media (max-width: 519px) {
	.c-image.is-broken::after {
		background-size: 24%;
	}
}
@media (max-width: 360px) {
	.c-image {
		margin-right: -24px;
		margin-left: -24px;
	}
	.c-image img {
		border-radius: 0;
	}
}
.c-image.-chrome,
.c-image.-safari,
.c-image.-firefox,
.c-image.-edge {
	--pos: 24px;
	--size: 40px;
	position: relative;
}
.c-image.-chrome::after,
.c-image.-safari::after,
.c-image.-firefox::after,
.c-image.-edge::after {
	content: "";
	position: absolute;
	top: var(--pos);
	left: var(--pos);
	width: var(--size);
	height: var(--size);
	background: center / cover no-repeat;
}
.c-image.-chrome::after { background-image: url(/prx/000/https/lopan.jp/assets/img/chrome.svg); }
.c-image.-safari::after { background-image: url(/prx/000/https/lopan.jp/assets/img/safari.svg); }
.c-image.-firefox::after { background-image: url(/prx/000/https/lopan.jp/assets/img/firefox.svg); }
.c-image.-edge::after { background-image: url(/prx/000/https/lopan.jp/assets/img/edge.svg); }
@media (max-width: 519px) {
	.c-image.-chrome,
	.c-image.-safari,
	.c-image.-firefox,
	.c-image.-edge {
		--pos: 12px;
		--size: 32px;
	}
}
@media (max-width: 360px) {
	.c-image.-chrome,
	.c-image.-safari,
	.c-image.-firefox,
	.c-image.-edge {
		--pos: 8px;
		--size: 24px;
	}
}

/* multiple image */
.c-multiimage {
	margin: 24px 0;
}
.c-multiimage .c-slider {
	margin: 0;
}

/* slider */
.c-slider {
	display: flex;
	justify-content: space-between;
	overflow: auto;
	margin: 24px 0;
	overscroll-behavior: auto;
	scroll-snap-type: x mandatory;
}
.c-slider::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.c-slider::-webkit-scrollbar-thumb {
	border-radius: 6px;
	box-shadow: none;
	background: #dadcde;
}
.c-slider::-webkit-scrollbar-track {
	border-radius: 6px;
	background: #eeeff1;
}
@-moz-document url-prefix() {
	.container.-styling {
		scrollbar-width: thin;
		scrollbar-color: #dadcde #eeeff1;
	}
}
@media (prefers-color-scheme: dark) {
	.c-slider::-webkit-scrollbar-thumb {
		background: #52515c;
	}
	.c-slider::-webkit-scrollbar-track {
		background: #46434c;
	}
	@-moz-document url-prefix() {
		.container.-styling {
			scrollbar-color: #52515c #46434c;
		}
	}
}
.c-slider > * {
	min-width: calc(100% - 48px);
	margin: 0 8px 4px;
	scroll-snap-align: center;
}
.c-slider > *:first-child {
	margin-left: 0;
}
.c-slider > *:last-child {
	margin-right: 0;
}
@media (max-width: 519px) {
	.c-slider > * {
		min-width: calc(100% - 32px);
		margin: 0 4px 4px;
	}
}

/* iframe */
.c-iframe {}
.c-iframe iframe {
	width: 100%;
	min-height: 192px;
	border: 0;
	border-radius: 8px;
}
.c-iframe iframe {
	--maxWidth: min(100vw - 96px, 1200px);
	box-shadow: 0 0 0 1px #0001;
	max-width: var(--maxWidth);
}
.c-iframe:is(.resizable, .resizable-x, .resizable-y) iframe {
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
	max-height: 100svh;
}
.c-iframe.resizable iframe { resize: both; }
.c-iframe.resizable-x iframe { resize: horizontal; }
.c-iframe.resizable-y iframe { resize: vertical; }

@media (max-width: 519px) {
	.c-iframe iframe {
		--maxWidth: calc(100vw - 32px);
	}
}

/* table */
.c-table {
	overflow: auto;
	overscroll-behavior: auto;
}
.c-table::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.c-table::-webkit-scrollbar-thumb {
	border-radius: 6px;
	box-shadow: none;
	background: #dadcde;
}
.c-table::-webkit-scrollbar-track {
	border-radius: 6px;
	background: #eeeff1;
}
@media (prefers-color-scheme: dark) {
	.c-table::-webkit-scrollbar-thumb {
		background: #52515c;
	}
	.c-table::-webkit-scrollbar-track {
		background: #46434c;
	}
}
.c-table table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
}
.c-table th,
.c-table td {
	border: 1px solid var(--gray5);
	padding: .4em .8em;
	font-size: 92%;
	line-height: 1.6;
}
.c-table th {
	background: var(--white);
}
.c-table td {
	text-align: left;
	background: white;
}
.c-table td.-c {
	text-align: center;
}
.c-table td.-r {
	text-align: right;
}
@media (prefers-color-scheme: dark) {
	.c-table td {
		background: var(--dark-black);
	}
}
@media (max-width: 959px) {
	.c-table {
		padding-bottom: 4px;
	}
}

/* lopan syntax */
.c-syntax {
	font-size: .9375rem;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}
.c-syntax.-shortcut {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	will-change: scroll-position;
	overscroll-behavior: none auto;
	scrollbar-width: auto;
	scrollbar-color: #dadcde #eeeff1;
}
.c-syntax[data-lang]::before {
	content: attr(data-lang);
	display: block;
	margin-left: .2em;
	color: var(--gray4);
	font-size: .75rem;
	font-family: var(--monospace);
	text-align: left;
	text-transform: uppercase;
}
.c-syntax pre {
	overflow: auto;
	margin: 0;
	border-radius: 8px;
	line-height: 2rem;
	font-family: var(--monospace);
	text-align: left;
	background: linear-gradient(var(--white) 50%, var(--gray7) 50%) left top / 4rem 4rem;
	overscroll-behavior: auto;
}
.c-syntax.-wrap pre {
	overflow: hidden;
	white-space: pre-wrap;
}
:where(.p-article aside) .c-syntax pre {
	background: linear-gradient(var(--gray7) 50%, white 50%) left top / 4rem 4rem;
}
@media (prefers-color-scheme: dark) {
	:where(.p-article aside) .c-syntax pre {
		background: linear-gradient(var(--gray7) 50%, var(--dark-black) 50%) left top / 4rem 4rem;
	}
}
.c-syntax pre::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
.c-syntax pre::-webkit-scrollbar-thumb {
	border-radius: 6px;
	box-shadow: none;
	background: #dadcde;
}
@media (prefers-color-scheme: dark) {
	.c-syntax pre::-webkit-scrollbar-thumb {
		background: #92939c;
	}
}
.c-syntax pre::-webkit-scrollbar-track {
	border-radius: 6px;
	background: transparent;
}
.c-syntax pre code {
	display: inline-block;
	z-index: 1;
	/* position: static; */
	top: unset;
	min-width: 100%;
	margin: 0;
	padding: 0 1em;
	border: 0;
	border-radius: 0;
	color: var(--gray1);
	font-size: inherit;
	line-height: inherit;
	font-family: inherit;
	white-space: inherit;
	word-break: break-all;
	background: none;
}
@media (max-width: 959px) {
	.c-syntax {
		font-size: .875rem;
	}
}
@media (max-width: 519px) {
	.c-syntax {
		font-size: .8125rem;
	}
}


/**
 * PrismJS
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 * ---------------------------------------- */
.c-syntax .token {
	text-shadow: 0 1px #ffffff68;
}
@media (prefers-color-scheme: dark) {
	.c-syntax .token {
		text-shadow: 0 1px #25212768;
	}
}
.c-syntax .token.comment {
	color: var(--gray5);
}
.c-syntax .token.prolog,
.c-syntax .token.doctype,
.c-syntax .token.cdata {
	color: var(--gray2);
}
.c-syntax .token.punctuation,
.c-syntax .token.attr-equals {
	color: var(--gray2);
}
.c-syntax .token.namespace {
	opacity: .7;
}
.c-syntax .token.property,
.c-syntax .token.tag,
.c-syntax .token.boolean,
.c-syntax .token.constant,
.c-syntax .token.symbol,
.c-syntax .token.deleted {
	color: var(--red);
}
.c-syntax .token.function,
.c-syntax .token.class-name {
	color: var(--red);
}
.c-syntax .token.selector,
.c-syntax .token.attr-name,
.c-syntax .token.string,
.c-syntax .token.char,
.c-syntax .token.builtin,
.c-syntax .token.inserted {
	color: var(--orange);
}
.c-syntax .token.regex,
.c-syntax .token.important,
.c-syntax .token.variable,
.c-syntax .token.regex-source {
	color: var(--yellow);
}
.c-syntax .token.operator,
.c-syntax .token.entity,
.c-syntax .token.url,
.c-syntax .language-css .token.string,
.c-syntax .style .token.string {
	color: var(--green);
}
.c-syntax .token.atrule,
.c-syntax .token.attr-value,
.c-syntax .token.keyword {
	color: var(--blue);
}
.c-syntax .token.number {
	color: var(--skyblue);
}
.c-syntax .token.bold,
.c-syntax .token.important {
	font-weight: bold;
}
.c-syntax .token.italic {
	font-style: italic;
}
.c-syntax .token.entity {
	/* cursor: help; */
}

/* :::::: 行数とハイライト :::::: */
.c-syntax .line-numbers {
	z-index: 0;
	position: relative;
	padding-left: 3rem;
	counter-reset: row;
}
.c-syntax .line-numbers > code {
	padding-left: 0;
}

/* 行数 */
.c-syntax .line-numbers-rows {
	position: absolute;
	top: 0;
	left: -3rem;
	width: 2.25rem;
	line-height: inherit;
	text-align: right;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}
.c-syntax .line-numbers-rows > span {
	display: block;
	counter-increment: row;
	font-family: inherit;
}
.c-syntax .line-numbers-rows > span::before {
	display: block;
	content: counter(row);
	color: var(--gray5);
	font-family: inherit;
}
/* .c-syntax .line-numbers-rows > span:nth-child(n+10)::before {
	content: "0" counter(row);
}
.c-syntax .line-numbers-rows > span:nth-child(n+100)::before {
	content: counter(row);
} */
.c-syntax [data-start] .line-numbers-rows > span {
	counter-increment: linenumber;
}
.c-syntax [data-start] .line-numbers-rows > span::before {
	content: counter(linenumber);
}

/* ハイライト */
.c-syntax .line-highlight {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--stripeYellow) center;
	opacity: .8;
	pointer-events: none;
}
@media (prefers-color-scheme: dark) {
	.c-syntax .line-highlight {
		opacity: .6;
	}
}
/* ブラウザが背景色を白に置き換えるのを防ぐ
 * 表示されたコードの上に要素が階層化されているため必要らしい */
@media print {
	.c-syntax .line-highlight {
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
	}
}


/**
 * Relation
 * ---------------------------------------- */
.c-relation {
	display: grid;
	grid: auto-flow auto / repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
	padding-left: 0;
}
.c-relation a {
	display: block;
	margin: 0;
	padding: 0;
	background: none;
}
.c-relation .c-thumb {
	margin: 0;
	border-radius: 16px;
	aspect-ratio: 4 / 2;
}
.c-relation .c-title {
	margin: .5em 0 0;
}
@media (hover: hover) {
	.c-relation .c-thumb .effect::after {
		left: -30%;
		height: 200%;
	}
}
@media (max-width: 959px) {
	.c-relation {
		grid: auto-flow auto / repeat(2, 1fr);
	}
}
@media (max-width: 519px) {
	.c-relation {
		gap: 16px;
	}
}
@media (max-width: 360px) {
	.c-relation {
		grid: auto-flow auto / 1fr;
	}
}


/**
 * Next Link
 * ---------------------------------------- */
.c-nextlink {
	display: flex;
	margin: 64px auto 0;
	padding: 0;
	background: none;
}
.c-nextlink .c-thumb,
.c-nextlink .c-title {
	margin: 0;
	border: 1px solid var(--gray7);
}
.c-nextlink .c-thumb {
	flex-basis: 120px;
	border-right: 0;
	border-radius: 16px 0 0 16px;
	aspect-ratio: 16 / 9;
}
.c-nextlink .c-title {
	flex-grow: 1;
	display: flex;
	align-items: center;
	padding: .5em 1.5em;
	padding-right: 2.4em;
	border-left: 0;
	border-radius: 0 16px 16px 0;
	color: inherit;
	font-size: 1.0625rem;
	background: var(--white);
}
.c-nextlink .c-title .ico {
	position: absolute;
	top: calc(50% - 10px);
	right: 1em;
}
@media (prefers-color-scheme: dark) {
	.c-nextlink .c-title {
		background: var(--dark-black);
	}
}
@media (hover: hover) {
	.c-nextlink .c-thumb .effect::after {
		left: -30%;
		height: 200%;
	}
}
@media (min-width: 520px) {
	.c-nextlink {
		width: min(100%, 480px);
	}
}
@media (max-width: 519px) {
	.c-nextlink {
		flex-direction: column;
		width: min(100%, 280px);
	}
	.c-nextlink .c-thumb {
		border-radius: 16px 16px 0 0;
	}
	.c-nextlink .c-title {
		border-radius: 0 0 16px 16px;
	}
	@media (hover: hover) {
		.c-nextlink .c-thumb .effect::after {
			left: -15%;
		}
	}
}


/**
 * Main Footer
 * ---------------------------------------- */
.main_footer {
	margin: 64px 0;
}
@media (min-width: 520px) {
	.main_footer .c-tags {
		font-size: 1rem;
	}
}