/*
rev. 2025-12-19
copyright © 2025
*/
@layer reset, base, general, component;
@layer reset {
	/*! kiso.css v1.2.2 | MIT License | https://github.com/tak-dcxi/kiso.css */
	*,
	:after,
	:before {
		box-sizing: border-box;
	}
	:where(:root) {
		font-family: sans-serif;
		line-height: 1.5;
		text-spacing-trim: trim-start;
		text-autospace: normal;
		line-break: strict;
		overflow-wrap: anywhere;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scrollbar-gutter: stable;
		-webkit-tap-highlight-color: transparent;
	}
	:where(body) {
		min-block-size: 100dvb;
		margin: unset;
	}
	:where(h1, h2, h3, h4, h5, h6) {
		text-wrap: pretty;
	}
	:where(h1) {
		margin-block: 0.67em;
		font-size: 2em;
	}
	:where(h2, h3, h4, h5, h6) {
		margin-block: unset;
	}
	:where(search) {
		display: block;
	}
	:where(p, blockquote, figure, pre, address, ul, ol, dl, menu) {
		margin-block: unset;
	}
	:where(blockquote, figure) {
		margin-inline: unset;
	}
	:where(p:lang(en)) {
		text-wrap: pretty;
	}
	:where(address:lang(ja)) {
		font-style: unset;
	}
	:where(ul, ol, menu) {
		padding-inline-start: unset;
		list-style-type: '';
	}
	:where(dt) {
		font-weight: bolder;
	}
	:where(dd) {
		margin-inline-start: unset;
	}
	:where(pre) {
		text-spacing-trim: space-all;
		text-autospace: no-autospace;
	}
	:where(em:lang(ja)) {
		font-weight: bolder;
	}
	:where(:is(i, cite, em, dfn, var):lang(ja)) {
		font-style: unset;
	}
	:where(code, kbd, samp) {
		font-family:
			ui-monospace,
			SFMono-Regular,
			Menlo,
			Monaco,
			Consolas,
			Liberation Mono,
			Courier New,
			monospace;
		font-feature-settings: normal;
		font-variation-settings: normal;
		font-size: unset;
		font-variant-ligatures: none;
	}
	:where(abbr[title]) {
		text-decoration-line: underline;
		text-decoration-style: dotted;
		cursor: help;
	}
	:where(time) {
		text-autospace: no-autospace;
	}
	@media (forced-colors: active) {
		:where(mark) {
			background-color: Highlight;
			color: HighlightText;
		}
	}
	@media print {
		:where(mark) {
			border-width: 1px;
			border-style: dotted;
		}
	}
	:where(a:any-link) {
		color: unset;
		text-decoration-line: unset;
		text-decoration-thickness: from-font;
	}
	:where(img, svg, picture, video, canvas, model, audio, iframe, embed, object) {
		block-size: auto;
		max-inline-size: 100%;
		vertical-align: bottom;
	}
	:where(iframe) {
		border: unset;
	}
	:where(table) {
		border-collapse: collapse;
	}
	:where(caption, th) {
		text-align: unset;
	}
	:where(caption) {
		text-wrap: pretty;
	}
	::file-selector-button,
	:where(button, input, select, textarea) {
		border: 1px solid;
		border-color: unset;
		border-radius: unset;
		color: unset;
		font: unset;
		letter-spacing: unset;
		text-align: unset;
	}
	:where(input:is([type='radio' i], [type='checkbox' i])) {
		margin: unset;
	}
	:where(input[type='file' i]) {
		border: unset;
	}
	:where(input[type='search' i]) {
		-webkit-appearance: textfield;
	}
	@supports (-webkit-touch-callout: none) {
		:where(input[type='search' i]) {
			background-color: Canvas;
		}
	}
	:where(
		input:is([type='tel' i], [type='url' i], [type='email' i], [type='number' i]):not(
				:placeholder-shown
			)
	) {
		direction: ltr;
	}
	:where(textarea) {
		margin-block: unset;
		resize: block;
	}
	:where(
		input:not([type='button' i], [type='submit' i], [type='reset' i]),
		textarea,
		[contenteditable]
	) {
		text-autospace: no-autospace;
	}
	::file-selector-button,
	:where(button, input:is([type='button' i], [type='submit' i], [type='reset' i])) {
		background-color: unset;
	}
	::file-selector-button,
	:where(
		button,
		input:is([type='button' i], [type='submit' i], [type='reset' i]),
		[role='tab' i],
		[role='button' i],
		[role='option' i]
	) {
		touch-action: manipulation;
	}
	:where(:enabled)::file-selector-button,
	:where(
		button:enabled,
		label[for],
		select:enabled,
		input:is(
				[type='button' i],
				[type='submit' i],
				[type='reset' i],
				[type='radio' i],
				[type='checkbox' i]
			):enabled,
		[role='tab' i],
		[role='button' i],
		[role='option' i]
	) {
		cursor: pointer;
	}
	:where(fieldset) {
		min-inline-size: 0;
		margin-inline: unset;
		padding: unset;
		border: unset;
	}
	:where(legend) {
		padding-inline: unset;
	}
	:where(progress) {
		vertical-align: unset;
	}
	::placeholder {
		opacity: unset;
	}
	:where(summary) {
		list-style-type: '';
		cursor: pointer;
	}
	:where(summary)::-webkit-details-marker {
		display: none;
	}
	:where(dialog, [popover]) {
		overscroll-behavior-block: contain;
		padding: unset;
		border: unset;
	}
	:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
		display: none !important;
	}
	:where(dialog) {
		max-inline-size: unset;
		max-block-size: unset;
	}
	:where(dialog)::backdrop {
		background-color: oklch(0 0 0deg/30%);
	}
	:where([popover]) {
		margin: unset;
	}
	:where(:focus-visible) {
		outline-offset: 3px;
	}
	[tabindex='-1']:focus {
		outline: none !important;
	}
	:where(:disabled, [aria-disabled='true' i]) {
		cursor: default;
	}
	[hidden]:not([hidden='until-found' i]) {
		display: none !important;
	}
}
@layer base {
	:root {
		--color-tone-primary: #16253c;
		--color-tone-primary-hover: #126682;
		--color-tone-secondary: #dae4e5;
		--color-tone-dark: #16253c;
		--color-tone-monotone-01: #ddd;
		--color-tone-monotone-02: #99a1af;
		--color-must-lightest: #fff;
		--color-must-darkest: #333;
		--color-bg-base-darkest: #16253c;
		--color-bg-base-primary: #3c434d;
		--color-bg-base-monotone: #f5f5f5;
		--color-text-base-font-primary: #333;
		--color-text-base-font-gray: #6f7071;
		--color-text-link-text-link-primary: #16253c;
		--color-text-link-text-link-primary-light: #7ee9df;
		--color-text-link-text-link-primary-hover: #126682;
		--color-text-link-text-link-secondary: #126682;
		--color-semantics-error: #de2424;
		--color-semantics-bg-error: #fff1f1;
		--color-semantics-border-line-default: #ccc;
		--schemes-tertiary: #006a6a;
		--color-header-border: #364356;
		--color-dark-01: #555;
		--color-bg-base-hover: #f0f0f0;
		--color-black: #000;
		--color-semantics-important: #cc4141;
		--color-shadow: 0 4px 16px #002d351a;
		--base-font-color: var(--color-text-base-font-primary);
		--base-font-size: 1rem;
		--base-line-height: 1.8;
		--font-family-body: noto sans jp, sans-serif;
		--font-family-inter: 'Inter', var(--font-family-body);
	}
}
@layer general {
	* {
		&,
		&:after,
		&:before {
			box-sizing: border-box;
		}
	}
}
@layer general {
	body {
		padding: 0;
		margin: 0;
		font-family: var(--font-family-body);
		font-size: var(--base-font-size);
		line-height: var(--base-line-height);
		color: var(--base-font-color);
	}
	button {
		border-radius: 0;
	}
	img {
		min-inline-size: 0;
		min-block-size: 0;
	}
}
@layer general {
}
@layer general {
}
@layer component {
	.c-page {
		background-color: var(--color-bg-base-primary);
	}
	.c-page,
	.c-page__base {
		inline-size: 100%;
		block-size: 100%;
	}
	.c-page__base {
		display: grid;
		grid-template: 'header' auto ' . ' 24px 'main' 1fr ' . ' 24px 'footer' auto/1fr;
		min-block-size: 100dvb;
	}
	.c-page__header {
		position: sticky;
		inset-block-start: 0;
		z-index: 1;
		grid-area: header;
	}
	.c-page__main {
		grid-area: main;
		> :where(main:first-child:last-child) {
			block-size: 100%;
		}
	}
	.c-page__footer {
		grid-area: footer;
	}
	.c-template-dashboard {
		display: grid;
		gap: 32px;
		max-inline-size: 900px;
		padding-block-end: 56px;
		padding-inline: 24px;
		margin-inline: auto;
	}
	.c-template-login {
		block-size: 100%;
	}
	.c-template-login__login {
		display: grid;
		align-items: center;
		block-size: 100%;
	}
	.c-header {
		font-size: 1rem;
		color: var(--color-must-lightest);
		background-color: var(--color-tone-dark);
	}
	.c-header__container {
		display: flex;
		column-gap: 10px;
		align-items: center;
		justify-content: space-between;
		inline-size: min(100%, 1180px);
		padding-inline: 20px 0;
		margin-inline: auto;
	}
}
@layer component {
}
@layer component {
}
@layer component {
	.c-header__logo {
		inline-size: 120px;
		margin: 0;
		:where(img) {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}
	.c-header__menu,
	.c-header__menu-list {
		display: flex;
		flex-grow: 1;
		justify-content: flex-end;
	}
	.c-header__menu-list {
		list-style: '';
	}
	.c-header__menu-item {
		position: relative;
		flex-basis: 90px;
		border-inline-end: 1px solid var(--color-header-border);
		@media (width < 992px) {
			flex-basis: 80px;
		}
		&:first-child {
			border-inline-start: 1px solid var(--color-header-border);
		}
	}
	.c-header__menu-button {
		--_icon-path: var(--c-header-menu-button-icon-path, unset);
		display: grid;
		grid-template: 'icon' 20px 'label' 1fr/1fr;
		gap: 6px;
		place-items: center;
		inline-size: 100%;
		block-size: 100%;
		padding-block: 12px 8px;
		padding-inline: 8px;
		background-color: var(--color-tone-dark);
		border: none;
		@media (width < 992px) {
			padding-inline: 4px;
		}
		&:before {
			display: block;
			grid-area: icon;
			inline-size: 20px;
			block-size: 20px;
			content: '';
			background-color: currentcolor;
			mask-image: var(--_icon-path);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		&:hover {
			@media (hover) {
				background-color: var(--color-tone-primary-hover);
			}
		}
	}
	.c-header__menu-button-label {
		grid-area: label;
		font-size: 0.625rem;
		line-height: 1.2;
		text-align: center;
		&:where(button *):after {
			display: inline-block;
			inline-size: 0.4em;
			block-size: 0.4em;
			margin-inline-start: 0.5em;
			vertical-align: middle;
			content: '';
			border: 1px solid;
			border-block-start-width: 0;
			border-inline-start-width: 0;
			transform-origin: center;
			rotate: 45deg;
			translate: 0 -0.2em;
		}
		> :where(span) {
			display: inline-block;
		}
	}
	.c-header__menu-button-list {
		--_width: 256px;
		position: fixed;
		inset-block-start: calc(var(--item-position-top) + var(--item-position-height));
		inset-inline-start: max(calc(var(--item-position-right) - var(--_width)), 20px);
		z-index: 1;
		inline-size: min(var(--_width), 100% - 40px);
		padding-block: 12px;
		color: var(--color-text-base-font-primary);
		background-color: var(--color-must-lightest);
		border-end-start-radius: 4px;
		border-end-end-radius: 4px;
		box-shadow: 0 0 4px 0 color-mix(in srgb, var(--color-must-darkest) 25%, #0000);
	}
	.c-header__menu-button-link {
		display: grid;
		grid-template: 'icon name' auto/30px 1fr;
		gap: 10px;
		align-items: center;
		padding-block: 6px;
		padding-inline: 12px;
		&:hover {
			@media (hover) {
				background-color: var(--color-bg-base-hover);
			}
		}
	}
	.c-header__menu-button-item-icon {
		grid-area: icon;
	}
	.c-header__menu-button-item-name {
		grid-area: name;
		font-family: var(--font-family-inter);
		font-size: 0.75rem;
		line-height: 1.5;
	}
	.c-header__account {
		display: grid;
		grid-template: 'user' auto 'decoration-line' auto 'description' auto/1fr;
		padding-inline: 20px;
		border-inline-end: 1px solid var(--color-header-border);
		&:after {
			display: block;
			grid-area: decoration-line;
			inline-size: 100%;
			block-size: 1px;
			content: '';
			background-color: var(--color-dark-01);
		}
	}
	.c-header__account-user {
		display: grid;
		grid-area: user;
		grid-template: 'icon name' auto 'icon id' auto/34px 1fr;
		gap: 2px 6px;
		align-items: center;
		padding-block: 8px 6px;
	}
	.c-header__account-user-icon {
		grid-area: icon;
		overflow: hidden;
		border-radius: calc(infinity * 1px);
		:where(img) {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}
	.c-header__account-user-name {
		grid-area: name;
		font-size: 0.875rem;
		line-height: 1.21429;
		@media (width < 992px) {
			font-size: 0.8125rem;
		}
	}
	.c-header__account-user-id {
		grid-area: id;
		font-family: var(--font-family-inter);
		font-size: 0.625rem;
		line-height: 1.2;
	}
	.c-header__account-description {
		grid-area: description;
		padding-block: 6px;
		font-size: 0.75rem;
		line-height: 1.16667;
		@media (width < 992px) {
			font-size: 0.625rem;
		}
	}
}
@layer component {
	.c-footer {
		font-size: 1rem;
		color: var(--color-must-lightest);
		background-color: var(--color-tone-primary);
		box-shadow: 0 0 12px 0 color-mix(in srgb, var(--color-black) 30%, #0000);
	}
	.c-footer__container {
		display: flex;
		flex-wrap: wrap;
		gap: 0 40px;
		align-items: center;
		justify-content: flex-end;
		inline-size: min(100%, 1192px);
		padding-block: 12px;
		padding-inline: 20px;
		margin-inline: auto;
		text-align: end;
	}
	.c-footer__link {
		font-size: 0.75rem;
		color: inherit;
		text-decoration: underline;
		text-underline-position: from-font;
	}
	.c-footer__copyright {
		font-family: var(--font-family-inter);
		font-size: 0.75rem;
		font-weight: 500;
	}
	.c-login {
		--c-login-option-card-width: 472px;
		--c-login-option-card-width-wide: 900px;
		--_card-width: var(--c-login-card-width, var(--c-login-option-card-width));
		display: grid;
		place-items: center;
		inline-size: 100%;
		font-size: 1rem;
		color: var(--color-text-base-font-primary);
	}
	.c-login__card {
		gap: 48px;
		inline-size: min(100% - 32px, var(--_card-width));
		padding-block: 40px 56px;
		padding-inline: 56px;
		background-color: var(--color-must-lightest);
		border: 1px solid var(--color-semantics-border-line-default);
		border-radius: 4px;
	}
}
@layer component {
	.c-login__layout {
		display: grid;
		grid-template: 'layout-head' auto ' . ' 48px 'layout-body' 1fr ' . ' 40px 'layout-foot' auto/1fr;
		max-inline-size: 740px;
		margin-inline: auto;
		&:not(:has(.c-login__layout-head)) {
			grid-template: 'layout-body' 1fr ' . ' 40px 'layout-foot' auto/1fr;
		}
	}
	.c-login__layout-head {
		grid-area: layout-head;
	}
	.c-login__layout-body {
		display: grid;
		grid-area: layout-body;
		gap: 24px;
	}
	.c-login__layout-foot {
		grid-area: layout-foot;
	}
	.c-login__logo {
		inline-size: 160px;
		margin-inline: auto;
		:where(img) {
			display: block;
			inline-size: 100%;
			block-size: auto;
		}
	}
	.c-login__message {
		display: grid;
		gap: 4px;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--color-semantics-error);
	}
	.c-login__title {
		font-size: 1.5rem;
		line-height: 1.5;
	}
	.c-login__title,
	.c-login__title-error {
		font-weight: 700;
		color: var(--color-tone-primary);
	}
	.c-login__title-error {
		inline-size: fit-content;
		margin-inline: auto;
		font-size: 2rem;
	}
	.c-login__description {
		line-height: 1.8;
	}
	.c-login__description-center {
		line-height: 1.8;
		text-align: center;
	}
	.c-login__input {
		display: grid;
		gap: 24px;
	}
	.c-login__actions {
		display: grid;
		gap: 16px;
	}
	.c-login__button {
		box-sizing: border-box;
		display: flex;
		gap: 8px;
		align-items: center;
		justify-content: center;
		inline-size: min(100%, 360px);
		padding-block: 16px;
		padding-inline: 8px 12px;
		margin-inline: auto;
		font-size: 1rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--color-must-lightest);
		text-decoration: none;
		cursor: pointer;
		background-color: var(--color-tone-primary);
		border: none;
		border-radius: 4px;
		&:hover {
			background-color: var(--color-tone-primary-hover);
		}
		&:where([data-style='back']) {
			inline-size: 280px;
			padding-inline: 16px 32px;
			&:before {
				flex-shrink: 0;
				inline-size: 24px;
				block-size: 24px;
				content: '';
				background-color: currentcolor;
				mask-image: url(/img/icon-arrow.svg);
				mask-repeat: no-repeat;
				mask-position: center;
				mask-size: contain;
				rotate: 180deg;
			}
			> span {
				flex-grow: 1;
				text-align: center;
			}
			&:hover {
				background-color: var(--color-tone-primary-hover);
			}
		}
	}
	.c-login__link {
		:where(a) {
			font-size: 0.875rem;
			color: var(--color-text-link-text-link-primary);
			text-decoration: underline;
			&:hover {
				color: var(--color-text-link-text-link-primary-hover);
			}
		}
	}
	.c-login__error-content {
		display: grid;
		gap: 16px;
		place-items: center;
		text-align: center;
	}
	.c-login__error-message {
		font-size: 1rem;
		line-height: 1.8;
		white-space: pre-wrap;
	}
	.c-login__error-content .c-login__actions {
		margin-block-start: 16px;
	}
	.c-input {
		display: grid;
		gap: 8px;
		font-size: 1rem;
	}
	.c-input__label {
		font-size: 1rem;
		color: var(--color-text-base-font-primary);
	}
}
@layer component {
	.c-input__label :where(small) {
		margin-inline-start: 0.5em;
		font-size: 0.875rem;
	}
	.c-input__input-wrapper {
		position: relative;
	}
	.c-input__input-wrapper :where(input) {
		inline-size: 100%;
		block-size: 100%;
		padding-block: 11px;
		padding-inline: 16px;
		font-family: inherit;
		font-size: 1rem;
		color: inherit;
		background: var(--color-must-lightest);
		border: 1px solid var(--color-semantics-border-line-default);
		border-radius: 4px;
		&:where([data-error] *):not(:where([data-inputting='true'] *)) {
			background: var(--color-semantics-bg-error);
			border-color: var(--color-semantics-error);
		}
		&:has(+ .c-input__toggle-password) {
			padding-inline-end: 40px;
		}
	}
	.c-input__toggle-password {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 16px;
		display: grid;
		place-items: center;
		padding: 4px;
		margin-block: auto;
		cursor: pointer;
		background: none;
		border: none;
		&:before {
			display: block;
			inline-size: 20px;
			block-size: 20px;
			content: '';
			background-image: url(/img/icon-eye-close.svg);
			background-repeat: no-repeat;
			background-position: 50%;
			background-size: contain;
		}
		&:where([aria-checked='true']):before {
			background-image: url(/img/icon-eye-open.svg);
		}
	}
	.c-input__toggle-label {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		white-space: nowrap;
		border-width: 0;
		clip-path: inset(50%);
		&:where([data-hide]):where(.c-input__toggle-password[aria-checked='false'] *) {
			display: none;
		}
		&:where([data-show]):where(.c-input__toggle-password[aria-checked='true'] *) {
			display: none;
		}
	}
	.c-input__error-text {
		font-size: 0.875rem;
		color: var(--color-semantics-error);
		&:where([data-inputting='true'] *) {
			display: none;
		}
	}
}
@layer component {
	.c-oss {
		font-size: 1rem;
	}
	.c-oss__list {
		display: grid;
		gap: 16px;
		&:where([data-js-loading]) {
			visibility: hidden;
		}
	}
	.c-oss__item {
		display: grid;
		grid-template: 'meta handle' 'link handle'/1fr auto;
		overflow: clip;
		background-color: var(--color-must-lightest);
		border-radius: 4px;
		box-shadow: var(--color-shadow);
		&:where([data-dragging]) {
			opacity: 0.5;
		}
	}
	.c-oss__meta {
		display: grid;
		grid-area: meta;
		grid-template: 'icon . head        .          ' auto 'icon . .           .          ' 4px 'icon . description description' auto/auto 24px auto 1fr;
		align-items: start;
		padding-block: 16px 12px;
		padding-inline: 24px;
	}
	.c-oss__icon {
		grid-area: icon;
		align-self: center;
		inline-size: 40px;
		block-size: 40px;
		> :where(img) {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			object-fit: contain;
		}
	}
	.c-oss__head {
		display: flex;
		flex-wrap: wrap;
		grid-area: head;
		gap: 4px 12px;
		align-items: center;
	}
	.c-oss__name {
		align-self: end;
		font-size: 1.125em;
		color: var(--color-black);
	}
	.c-oss__anomaly,
	.c-oss__name {
		font-weight: 700;
		line-height: 1;
	}
	.c-oss__anomaly {
		align-self: center;
		padding-block: 4px;
		padding-inline: 8px;
		font-size: 0.75em;
		color: var(--color-must-lightest);
		background-color: var(--color-semantics-important);
		border-radius: 4px;
	}
	.c-oss__description {
		grid-area: description;
		font-size: 0.8125em;
		line-height: 1.5;
		color: var(--color-dark-01);
	}
	.c-oss__link {
		display: flex;
		grid-area: link;
		gap: 12px;
		align-items: center;
		padding-block: 16px;
		padding-inline: 80px 16px;
		background-color: var(--color-bg-base-monotone);
		border-block-start: 1px solid var(--color-semantics-border-line-default);
	}
	.c-oss__dashboard {
		display: inline-flex;
		gap: 4px;
		align-items: center;
		padding-block: 6px;
		padding-inline: 12px;
		font-size: 0.8125em;
		color: var(--color-must-lightest);
		text-decoration: none;
		background-color: var(--color-tone-primary);
		&:before {
			display: block;
			inline-size: 20px;
			block-size: 20px;
			content: '';
			background-color: currentcolor;
			mask-image: url(/img/icon-dashboard.svg);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		&:hover {
			background-color: var(--color-tone-primary-hover);
		}
	}
	.c-oss__documentation {
		display: inline-flex;
		gap: 4px;
		align-items: center;
		font-size: 0.8125em;
		color: var(--color-text-link-text-link-primary);
		text-decoration: underline;
		&:before {
			display: block;
			inline-size: 20px;
			block-size: 20px;
			content: '';
			background-color: currentcolor;
			mask-image: url(/img/icon-document.svg);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		&:hover {
			color: var(--color-text-link-text-link-primary-hover);
		}
	}
	.c-oss__handle {
		display: flex;
		flex-direction: column;
		grid-area: handle;
		gap: 3px;
		align-items: center;
		justify-content: center;
		inline-size: 32px;
		cursor: grab;
		background-color: var(--color-tone-secondary);
		&:where([data-has-single-item='true'] *) {
			cursor: default;
			background-color: var(--color-tone-monotone-01);
			&:after,
			&:before {
				background-color: var(--color-tone-monotone-02);
			}
			&:before {
				box-shadow: 0 4px 0 var(--color-tone-monotone-02);
			}
		}
		&:after,
		&:before {
			display: block;
			inline-size: 10px;
			block-size: 1px;
			content: '';
			background-color: var(--schemes-tertiary);
		}
		&:before {
			box-shadow: 0 4px 0 var(--schemes-tertiary);
		}
	}
}
@layer component {
	.c-news {
		container-type: inline-size;
		font-size: 1rem;
		color: var(--color-must-lightest);
	}
	.c-news__list {
		display: grid;
		grid-template: 'category date title icon' auto/auto auto 1fr 20px;
		column-gap: 12px;
	}
	.c-news__item {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1/-1;
		border-block-end: 1px solid var(--color-tone-monotone-02);
		&:last-child {
			border-block-end: none;
		}
	}
	.c-news__link {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: 1/-1;
		align-items: center;
		padding-block: 8px;
		padding-inline: 16px 8px;
		color: inherit;
		text-decoration: none;
		&:hover {
			color: var(--color-text-link-text-link-primary-light);
		}
		&:after {
			display: block;
			grid-area: icon;
			inline-size: 20px;
			block-size: 20px;
			content: '';
			background-color: currentcolor;
			mask-image: url(/img/icon-arrow.svg);
			mask-repeat: no-repeat;
			mask-position: center;
			mask-size: contain;
		}
		&[target='_blank']:after {
			mask-image: url(/img/icon-blank.svg);
		}
	}
	.c-news__category {
		grid-area: category;
		padding-block: 4px;
		padding-inline: 16px;
		font-size: 0.6875em;
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-text-base-font-gray);
		text-align: center;
		background-color: var(--color-must-lightest);
		border-radius: 20px;
		&:where([data-variant='important']) {
			font-weight: 700;
			color: var(--color-must-lightest);
			background-color: var(--color-semantics-error);
		}
	}
	.c-news__date {
		grid-area: date;
		font-size: 0.8125em;
		font-weight: 500;
		line-height: 1.5;
	}
	.c-news__title {
		grid-area: title;
		font-size: 0.875em;
		line-height: 1.5;
	}
}