@charset "UTF-8";

/**
 * マークダウンでそのまま入力するコンテンツ用のスタイル
 * マークダウンはクラスなしの要素に変換されるので、クラスセレクタは基本使わない
 */
.blog {
	--blog-code-background-color: var(--color-background-7);
	--blog-code-border-color: var(--color-border-2);
	--blog-heading-2-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2043%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23343640%22%20d%3d%22M1%2e5%201%2e5h8%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M10%2e5%201%2e5h12%22%2f%3e%3cpath%20stroke%3d%22%23cbced8%22%20d%3d%22M23%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
	--blog-heading-3-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2033%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23e4e5eb%22%20d%3d%22M1%2e5%201%2e5h30%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M1%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
	--blog-heading-2-adjacent-paragraph-margin-top: var(--size-spacing-20);
	--blog-list-bullet-color: var(--color-mark-normal);
	--blog-blockquote-background-color: var(--color-background-7);

	& p:not([class]),
	& dl:not([class]),
	& dt:not([class]) {
		margin-top: var(--size-spacing-20);
	}

	& dt:not([class]) {
		font-weight: var(--font-weight-medium);
	}

	& pre {
		margin-top: var(--size-spacing-20);
	}

	& code {
		background-color: var(--blog-code-background-color);
		border: var(--border-width-1) var(--border-style-solid) var(--blog-code-border-color);
		border-radius: var(--border-radius-4);
		display: inline-block;
		line-height: 1;
		margin-left: var(--size-spacing-4);
		margin-right: var(--size-spacing-4);
		padding: 5px var(--size-spacing-8);
	}

	& pre > code {
		display: block;
		overflow-x: auto;
		padding: 1em;
		line-height: 1.6;
	}

	& .hljs-pre {
		border: none;
		display: block;
		font-size: inherit;
		margin-inline: 0;
	}

	& a:not([class]) {
		text-decoration: underline;
	}

	& h2:not([class]) {
		font-size: var(--font-size-heading-2-narrow);
		margin-top: var(--size-spacing-30);
		padding-bottom: var(--size-spacing-20);
		position: relative;
	}

	& h2:not([class])::before {
		background-image: var(--blog-heading-2-line-image);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 43px 3px;
		bottom: 0;
		content: "";
		display: inline-block;
		height: 3px;
		left: 0;
		position: absolute;
		width: 43px;
	}

	& h3:not([class]) {
		font-size: var(--font-size-heading-3-narrow);
		margin-top: var(--size-spacing-30);
		padding-bottom: var(--size-spacing-20);
		position: relative;
	}

	& h3:not([class])::before {
		background-image: var(--blog-heading-3-line-image);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 33px 3px;
		bottom: 0;
		content: "";
		display: inline-block;
		height: 3px;
		left: 0;
		position: absolute;
		width: 33px;
	}

	& h4:not([class]) {
		font-size: var(--font-size-heading-4-narrow);
		margin-top: var(--size-spacing-20);
		padding-left: var(--size-spacing-10);
		position: relative;
	}

	& h4:not([class])::before {
		background-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%203%2015%22%3e%3cpath%20stroke%3d%22%23e65c63%22%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%20d%3d%22M1%2e5%201%2e5v12%22%2f%3e%3c%2fsvg%3e");
		background-position: center;
		background-repeat: no-repeat;
		background-size: 3px 15px;
		content: "";
		display: inline-block;
		height: 15px;
		left: 0;
		position: absolute;
		top: 5px;
		width: 3px;
	}

	& h5:not([class]) {
		font-size: var(--font-size-heading-5-narrow);
		margin-top: var(--size-spacing-20);
	}

	& ul:not([class]) {
		margin-top: var(--size-spacing-20);
	}

	& ul:not([class])>li:not(.navigationLink li) {
		padding-inline-start: var(--size-spacing-20);
		position: relative;
	}

	& ul:not([class])>li:not(.navigationLink li):not(:first-child) {
		margin-top: var(--size-spacing-10);
	}

	& ul:not([class])>li:not(.navigationLink li)::before {
		background-color: var(--blog-list-bullet-color);
		border-radius: var(--border-radius-round);
		content: "";
		display: inline-block;
		height: 5px;
		inset-inline-start: var(--size-spacing-8);
		position: absolute;
		top: 12px;
		width: 5px;
	}

	& ol:not([class]) {
		counter-reset: number;
		margin-top: var(--size-spacing-20);
	}

	& ol:not([class])>li {
		counter-increment: number;
		padding-inline-start: var(--size-spacing-30);
		position: relative;
	}

	& ol:not([class])>li:not(:first-child) {
		margin-top: var(--size-spacing-10);
	}

	& ol:not([class])>li:before {
		content: counter(number) ".";
		display: inline-block;
		inset-inline-start: 0;
		position: absolute;
	}

	& ul:not([class]),
	& ol:not([class]) {
		& ul:not([class]),
		& ol:not([class]) {
			margin-top: var(--size-spacing-10);
		}
	}

	& blockquote:not([class]) {
		background-color: var(--blog-blockquote-background-color);
		border-radius: 0 var(--border-radius-20) var(--border-radius-20);
		margin-top: var(--size-spacing-20);
		padding: var(--size-spacing-30) var(--size-spacing-30) var(--size-spacing-40);
	}

	& h2:not([class])+p {
		margin-top: var(--blog-heading-2-adjacent-paragraph-margin-top);
	}

	& blockquote:not([class])>:first-child {
		margin-top: 0;
	}

	& blockquote:not([class])>:last-child {
		margin-bottom: 0;
	}

	& .mediaLayout__content>:first-child {
		margin-top: 0;
	}

	& figure{
		border:1px solid #b9b9b9;
		padding:15px;
		margin:15px;
	}

	& figcaption{
		margin:0 0 10px;
		text-align:right;
		font-size:.75em;
	}

	& baseline-status {
		margin-top: var(--size-spacing-10);
	}
}

@media only screen and (prefers-color-scheme: dark) {
	html[data-theme="system"] .blog {
		--blog-code-background-color: var(--color-background-3);
		--blog-code-border-color: var(--color-border-2-dark);
		--blog-heading-2-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2043%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23cbced8%22%20d%3d%22M1%2e5%201%2e5h8%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M10%2e5%201%2e5h12%22%2f%3e%3cpath%20stroke%3d%22%23484f5c%22%20d%3d%22M23%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
		--blog-heading-3-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2033%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23484f5c%22%20d%3d%22M1%2e5%201%2e5h30%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M1%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
		--blog-heading-2-adjacent-paragraph-margin-top: var(--size-spacing-30);
		--blog-list-bullet-color: var(--color-mark-normal-dark);
		--blog-blockquote-background-color: var(--color-background-2);
	}
}

html[data-theme="dark"] .blog {
	--blog-code-background-color: var(--color-background-3);
	--blog-code-border-color: var(--color-border-2-dark);
	--blog-heading-2-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2043%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23cbced8%22%20d%3d%22M1%2e5%201%2e5h8%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M10%2e5%201%2e5h12%22%2f%3e%3cpath%20stroke%3d%22%23484f5c%22%20d%3d%22M23%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
	--blog-heading-3-line-image: url("data:image/svg+xml; charset=utf-8, %3csvg%20xmlns%3d%22http%3a%2f%2fwww%2ew3%2eorg%2f2000%2fsvg%22%20viewBox%3d%220%200%2033%203%22%3e%3cg%20stroke%2dlinecap%3d%22round%22%20stroke%2dwidth%3d%223%22%20fill%3d%22none%22%3e%3cpath%20stroke%3d%22%23484f5c%22%20d%3d%22M1%2e5%201%2e5h30%22%2f%3e%3cpath%20stroke%3d%22%235c6473%22%20d%3d%22M1%2e5%201%2e5h18%22%2f%3e%3c%2fg%3e%3c%2fsvg%3e");
	--blog-heading-2-adjacent-paragraph-margin-top: var(--size-spacing-30);
	--blog-list-bullet-color: var(--color-mark-normal-dark);
	--blog-blockquote-background-color: var(--color-background-2);
}

@media print,
screen and (min-width: 769px) {
	.blog {
		& code:not([class]) {
			font-size: var(--font-size-14);
		}

		& h2:not([class]) {
			font-size: var(--font-size-heading-2-wide);
			margin-top: var(--size-spacing-80);
		}

		& h2:not([class])+h3 {
			margin-top: var(--size-spacing-40);
		}

		& h3:not([class]) {
			font-size: var(--font-size-heading-3-wide);
			margin-top: var(--size-spacing-60);
		}

		& h4:not([class]) {
			font-size: var(--font-size-heading-4-wide);
			margin-top: var(--size-spacing-40);
			padding-left: var(--size-spacing-20);
		}

		& h4:not([class])::before {
			top: 10px;
		}

		& h4:not([class])+p {
			margin-top: var(--size-spacing-10);
		}

		h5:not([class]) {
			font-size: var(--font-size-heading-5-wide);
		}

		& ul:not([class])>li:not(.navigationLink li)::before {
			top: 15px;
		}

		& blockquote:not([class]) {
			border-radius: 0 var(--border-radius-40) var(--border-radius-40);
			padding: var(--size-spacing-60) var(--size-spacing-60) var(--size-spacing-80);
		}

		& baseline-status {
			margin-top: var(--size-spacing-20);
		}
	}
}

@media only screen and (any-hover: hover) {
	.blog  {
		& a:any-link:not([class]):hover,
		& a:any-link:not([class]):focus-visible {
			text-decoration: none;
		}
	}
}

.layout.-audio-fix {
	position: sticky;
	top: calc(var(--size-height-header-narrow) + 10px);
	z-index: 10;
	transition: top var(--transition-normal);
}

@media print,
screen and (min-width: 769px) {
	.layout.-audio-fix {
		top: calc(var(--size-height-header-wide) + 10px);
	}
}

.header.is-hidden ~ main .layout.-audio-fix {
	top: 10px;
}

.-offline .layout.-audio-fix {
	display: none;
}

.-text-offline {
	display: none;
}

.-offline .-text-offline {
	display: block;
}