@charset "UTF-8";

/**
 * HTMLで入力するコンテンツ用のスタイル
 * 過去記事のHTMLは変更しないので、現在のクラスに対してスタイルをあてる
 */

.blog {
	--blog-table-border-normal: var(--border-normal);
	--blog-table-border-strong: var(--border-2);
	--blog-table-head-background-color: var(--color-background-6);
	--blog-table-body-header-background-color: var(--color-background-7);
	--blog-table-body-data-background-color: var(--color-background-normal);
	--blog-table-head-data-background-color: transparent;
	--blog-table-head-data-border-bottom: 0;
	--blog-table-head-data-border-right: 0;

	& .c-media {
		margin-top: var(--size-spacing-20);
		text-align: center;
	}

	& .c-media__image {
		align-items: center;
		display: inline-flex;
		flex-direction: column-reverse;
		justify-content: center;
		row-gap: var(--size-spacing-10);
	}

	& .c-media__image img {
		clip-path: inset(0 round var(--border-radius-10));
		width: max-content;
	}

	& .c-media.-sharp img {
		clip-path: none;
	}

	& .c-media__caption {
		font-size: var(--font-size-13);
	}

	& .c-media.-movie {
		& .c-media__image {
			width: 100%;
			& iframe {
				aspect-ratio: 16/9;
				height: 100%;
				width: 100%;
			}
		}
	}

	& .lyt_image_3 {
		margin-top: var(--size-spacing-20);
		align-items: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		row-gap: var(--size-spacing-10);
	}

	& .lyt_image_3 .caption {
		font-size: var(--font-size-13);
	}

	& .c-table {
		margin-top: var(--size-spacing-30);
		overflow-x: auto;
	}

	& .c-table__mainBody,
	& table:not([class]) {
		--border-radius-width-minus: 2px;
		border-collapse: separate;
		border-left: var(--blog-table-border-normal);
		border-radius: var(--border-radius-10);
		border-spacing: 0;
		border-top: var(--blog-table-border-normal);
	}

	& .c-table.-noScroll .c-table__mainBody {
		width: 100%;
	}

	& .c-table__mainBody {
		width: calc(var(--size-breakpoint-major) - var(--size-margin-content-narrow) * 2);
	}

	& table:not([class]) {
		margin-top: var(--size-spacing-30);
		width: 100%;
	}

	& .c-table:has(thead) .c-table__head .c-table__row:first-child > :first-child,
	& .c-table:not(:has(thead)) .c-table__body .c-table__row:first-child > :first-child,
	& table:not([class]):has(thead) thead tr:first-child > :first-child,
	& table:not([class]):not(:has(thead)) tbody tr:first-child > :first-child {
		border-top-left-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-table:has(thead) .c-table__head .c-table__row:first-child > :last-child,
	& .c-table:not(:has(thead)) .c-table__body .c-table__row:first-child > :last-child,
	& table:not([class]):has(thead) thead tr:first-child > :last-child,
	& table:not([class]):not(:has(thead)) tbody tr:first-child > :last-child {
		border-top-right-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-table__head .c-table__row > :last-child:not(.-not-last-column),
	& table:not([class]) thead tr > :last-child:not(.-not-last-column) {
		border-right: var(--blog-table-border-normal);
	}

	& .c-table__body .c-table__row:last-child > :first-child:not(.-not-first-column),
	& table:not([class]) tbody tr:last-child > :first-child:not(.-not-first-column) {
		border-bottom-left-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-table__body .c-table__row:last-child > :last-child:not(.-not-last-column),
	& table:not([class]) tbody tr:last-child > :last-child:not(.-not-last-column) {
		border-bottom-right-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-table__head .c-table__header,
	& table:not([class]) thead th {
		background-color: var(--blog-table-head-background-color);
		border-bottom: var(--blog-table-border-strong);
		border-right: var(--blog-table-border-strong);
	}

	& .c-table__body .c-table__header,
	& table:not([class]) tbody th {
		background-color: var(--blog-table-body-header-background-color);
		border-bottom: var(--blog-table-border-normal);
		border-right: var(--blog-table-border-normal);
	}

	& .c-table__header,
	& table:not([class]) th {
		font-weight: var(--font-weight-medium);
		padding: var(--size-spacing-20);
	}

	& .c-table__header.-in-last-row,
	& table:not([class]) th.-in-last-row {
		border-bottom-left-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-table__head .c-table__data,
	& table:not([class]) thead td {
		background-color: var(--blog-table-head-data-background-color);
		border-bottom: var(--blog-table-head-data-border-bottom);
		border-right: var(--blog-table-head-data-border-right);
	}

	& .c-table__body .c-table__data,
	& table:not([class]) tbody td {
		background-color: var(--blog-table-body-data-background-color);
		border-bottom: var(--blog-table-border-normal);
		border-right: var(--blog-table-border-normal);
	}

	& .c-table__data,
	& table:not([class]) td {
		padding: var(--size-spacing-20);
	}

	& .c-table__data.-in-last-row,
	& table:not([class]) td.-in-last-row {
		border-bottom-left-radius: calc(var(--border-radius-10) - var(--border-radius-width-minus));
	}

	& .c-indexBrowserCompat {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		gap: var(--size-spacing-10) var(--size-spacing-30);
		margin-top: var(--size-spacing-10);
	}

	& .c-indexBrowserCompat__label {
		flex: 0 0 auto;
		max-width: 100%;
	}

	& .c-indexBrowserCompat__list {
		align-items: center;
		display: flex;
		flex: 0 0 auto;
		flex-wrap: wrap;
		gap: var(--size-spacing-10) var(--size-spacing-30);
		max-width: 100%;
	}

	& .c-indexBrowserCompat__item {
		flex: 0 0 auto;
		max-width: 100%;
	}

	& .c-indexBrowserCompat__icon {
		display: inline-block;
		height: 34px;
		margin-right: var(--size-spacing-8);
		vertical-align: middle;
		width: 34px;
	}

	& .c-indexBrowserCompat__support {
		background-color: #DFEFE7;
		border-radius: var(--border-radius-round);
		color: #36604C;
		display: inline-block;
		font-size: var(--font-size-14);
		height: 34px;
		line-height: 26px;
		min-width: 34px;
		padding: var(--size-spacing-4);
		text-align: center;
		vertical-align: middle;
	}

	& .c-indexBrowserCompat__support > img {
		align-items: center;
		display: inline-flex;
		height: 100%;
		justify-content: center;
	}

	& .c-indexBrowserCompat__support.-preview,
	& .c-indexBrowserCompat__support.-behind {
		background-color: #fdecd6;
	}

	& .c-indexBrowserCompat__support.-no {
		background-color: #faedee;
		color: #af2929;
	}

	& .c-indexBrowserCompat__supportText:not(:focus),
	& .c-indexBrowserCompat__supportText:not(:active) {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.c-indexBrowserCompat__sourceLink {
		text-decoration: underline;
	}

	.c-indexBrowserCompat__sourceLink:hover {
		text-decoration: none;
	}

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

@media only screen and (prefers-color-scheme: dark) {
	html[data-theme="system"] .blog {
		--blog-table-border-normal: var(--border-width-1) var(--border-style-solid) var(--color-border-normal-dark);
		--blog-table-border-strong: var(--border-width-1) var(--border-style-solid) var(--color-border-2-dark);
		--blog-table-head-background-color: var(--color-background-3);
		--blog-table-body-header-background-color: var(--color-background-2);
		--blog-table-body-data-background-color: var(--color-background-normal-dark);
		--blog-table-head-data-background-color: var(--color-background-3);
		--blog-table-head-data-border-bottom: var(--blog-table-border-strong);
		--blog-table-head-data-border-right: var(--blog-table-border-strong);
	}
}

html[data-theme="dark"] .blog {
	--blog-table-border-normal: var(--border-width-1) var(--border-style-solid) var(--color-border-normal-dark);
	--blog-table-border-strong: var(--border-width-1) var(--border-style-solid) var(--color-border-2-dark);
	--blog-table-head-background-color: var(--color-background-3);
	--blog-table-body-header-background-color: var(--color-background-2);
	--blog-table-body-data-background-color: var(--color-background-normal-dark);
	--blog-table-head-data-background-color: var(--color-background-3);
	--blog-table-head-data-border-bottom: var(--blog-table-border-strong);
	--blog-table-head-data-border-right: var(--blog-table-border-strong);
}

@media print,
screen and (min-width: 769px) {
	.blog {
		& .c-media__image img {
			clip-path: inset(0 round var(--border-radius-20));
		}

		& .c-media__caption {
			font-size: var(--font-size-14);
		}

		& .c-media.-movie .c-media__image {
			width: 60%;
		}

		& .lyt_image_3 .caption {
			font-size: var(--font-size-14);
		}

		& .c-table,
		& table:not([class]) {
			margin-top: var(--size-spacing-40);
		}

		& .c-table__mainBody,
		& table:not([class]) {
			--border-radius-width-minus: 2px;
			border-radius: var(--border-radius-20);
			width: 100%;
		}

		& .c-table:has(thead) .c-table__head .c-table__row:first-child > :first-child,
		& .c-table:not(:has(thead)) .c-table__body .c-table__row:first-child > :first-child,
		& table:not([class]):has(thead) thead tr:first-child > :first-child,
		& table:not([class]):not(:has(thead)) tbody tr:first-child > :first-child {
			border-top-left-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-table:has(thead) .c-table__head .c-table__row:first-child > :last-child,
		& .c-table:not(:has(thead)) .c-table__body .c-table__row:first-child > :last-child,
		& table:not([class]):has(thead) thead tr:first-child > :last-child,
		& table:not([class]):not(:has(thead)) tbody tr:first-child > :last-child {
			border-top-right-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-table__body .c-table__row:last-child > :first-child:not(.-not-first-column),
		& table:not([class]) tbody tr:last-child > :first-child:not(.-not-first-column) {
			border-bottom-left-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-table__body .c-table__row:last-child > :last-child:not(.-not-last-column),
		& table:not([class]) tbody tr:last-child > :last-child:not(.-not-last-column) {
			border-bottom-right-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-table__header,
		& table:not([class]) th {
			padding: var(--size-spacing-30);
		}

		& .c-table__header.-in-last-row,
		& table:not([class]) th.-in-last-row {
			border-bottom-left-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-table__data,
		& table:not([class]) td {
			padding: var(--size-spacing-30);
		}

		& .c-table__data.-in-last-row,
		& table:not([class]) td.-in-last-row {
			border-bottom-left-radius: calc(var(--border-radius-20) - var(--border-radius-width-minus));
		}

		& .c-indexBrowserCompat__support {
			height: 27px;
			min-width: 27px;
			line-height: 19px;
		}
	}
}