@charset "UTF-8";
/*
Theme Name: ウェブランサー
Theme URI: https://weblan3.com
Author: weblan3.com
Version: 1.1
*/

/************************************************/
/*** Global Settings ***/
/************************************************/
:root {
	/*** Color Settings ***/
	--c-white: #f8f8f8;
	--c-gray-010: #e6e6e6;
	--c-gray-015: #d8d8d8;
	--c-gray-020: #cccccc;
	--c-gray-025: #bfbfbf;
	--c-gray-030: #b2b2b2;
	--c-gray-040: #999999;
	--c-gray-050: #7f7f7f;
	--c-gray-060: #666666;
	--c-gray-070: #4c4c4c;
	--c-gray-075: #3f3f3f;
	--c-gray-080: #333333;
	--c-gray-085: #262626;
	--c-gray-090: #191919;
	--c-black: #080808;
	--c-blue: #0066ff;
	--c-blueGem: #2211aa;
	/*** Tone Settings ***/
	--c-tone-b010: rgb(0 0 0 / 0.1);
	--c-tone-b020: rgb(0 0 0 / 0.2);
	--c-tone-b050: rgb(0 0 0 / 0.5);
	--c-tone-w010: rgb(255 255 255 / 0.1);
	--c-tone-w020: rgb(255 255 255 / 0.2);
	--c-tone-w050: rgb(255 255 255 / 0.5);
	/*** Typography Settings ***/
	--font-family-sans: Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	--font-family-sans-en: Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, Meiryo, sans-serif;
	--font-family-serif: Hiragino Mincho ProN, Yu Mincho, serif;
	--font-family-code: Consolas, Menlo, Courier, monospace;
	--font-size-x-small: clamp(0.625rem, 0.545rem + 0.34vw, 0.75rem);
	--font-size-small: clamp(0.75rem, 0.67rem + 0.34vw, 0.875rem);
	--font-size-normal: clamp(0.938rem, 0.897rem + 0.17vw, 1rem);
	--font-size-large: clamp(1.125rem, 1.045rem + 0.34vw, 1.25rem);
	--font-size-x-large: clamp(1.25rem, 1.09rem + 0.68vw, 1.5rem);
	--font-size-title: clamp(1.5rem, 1.34rem + 0.68vw, 1.75rem);
	--leading-none: 1;
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-wide: 1.75;
	--leading-heading: 1.25;
	/*** Spacing Settings ***/
	--global-padding-inline: 1rem;
	--block-gap-thin: 0.25rem;
	--block-gap-narrow: 0.5rem;
	--block-gap-normal: 1rem;
	--block-gap-wide: 2rem;
	--block-gap-huge: 3rem;
	--gap-em-thin: 0.25em;
	--gap-em-narrow: 0.5em;
	--gap-em-normal: 1em;
	--gap-em-wide: 2em;
	--gap-em-huge: 3em;
	--offset-thin: 2px;
	--offset-narrow: 0.5em;
	--offset-normal: 1em;
	/*** Size Settings ***/
	--size-main-inline: calc(var(--global-padding-inline) + 728px + var(--global-padding-inline));
	--size-sidebar-inline: calc(var(--global-padding-inline) + 300px + var(--global-padding-inline));
	--size-inline-max: calc(var(--size-main-inline) + var(--size-sidebar-inline));
	--rounded-small: 3px;
	--rounded-midium: 5px;
	/*** Time Settings ***/
	--duration-rapidly: 0.1s;
	--duration-default: 0.3s;
	--duration-relaxed: 1s;
}
/*** Theme - Light Mode ***/
:root {
	--theme-text-main: var(--c-gray-090);
	--theme-text-sub: var(--c-gray-080);
	--theme-text-mute: var(--c-gray-070);
	--theme-text-invert: var(--c-white);
	--theme-link-main: var(--c-blueGem);
	--theme-base-main: var(--c-white);
	--theme-base-sub: var(--c-gray-010);
	--theme-base-mute: var(--c-gray-020);
	--theme-base-invert: var(--c-gray-080);
	--theme-base-hover: var(--c-tone-b010);
	--theme-edge-low: var(--c-gray-020);
	--theme-edge-high: var(--c-gray-050);
	--theme-button-text: var(--c-gray-010);
	--theme-button-stay: var(--c-gray-080);
	--theme-button-active: var(--c-gray-090);
	--theme-accent-color: var(--c-blue);
}
*, ::before, ::after {
	box-sizing: border-box;
	min-inline-size: 0;
	margin-block: 0;
	margin-inline: 0;
	padding-block: 0;
	padding-inline: 0;
	border-style: solid;
	border-width: 0;
}
html {
	block-size: 100%;
	font-size: 100%;
}
body {
	min-block-size: 100svb;
	min-inline-size: 320px;
	background-color: var(--theme-base-sub);
	color: var(--theme-text-main);
	font-size: var(--font-size-normal);
	font-family: var(--font-family-sans);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	line-height: var(--leading-normal);
	line-break: strict;
	overflow-wrap: anywhere;
	overflow-x: clip;
}
:where(h1) {
	font-size: var(--font-size-title);
	line-height: var(--leading-heading);
}
:where(h2) {
	font-size: var(--font-size-x-large);
	line-height: var(--leading-heading);
}
:where(h3) {
	font-size: var(--font-size-large);
	line-height: var(--leading-heading);
}
:where(h4, h5) {
	font-size: var(--font-size-normal);
}
:where(ul, ol) {
	list-style-type: "";
}
:where(table) {
	inline-size: 100%;
}
:where(summary) {
	cursor: pointer;
}
:where(hr) {
	display: block;
	block-size: 1px;
	margin-block-end: var(--gap-em-wide);
	padding-block-start: var(--gap-em-normal);
	border: 0;
	border-block-end: 1px solid var(--theme-edge-high);
}
:where(img) {
	block-size: auto;
	inline-size: 100%;
	max-block-size: 1200px;
	max-inline-size: 1200px;
	object-fit: contain;
	vertical-align: bottom;
}
:where(figure) {
	text-align: center;
	text-wrap: balance;
}
:where(caption, figcaption) {
	position: relative;
	padding-block-start: var(--block-gap-thin);
	color: var(--theme-text-mute);
	font-size: var(--font-size-x-small);
	font-family: var(--font-family-sans-en);
}
:where(textarea) {
	display: block;
	inline-size: 100%;
	min-block-size: 8em;
	max-block-size: 30em;
	resize: block;
	field-sizing: content;
}
:where(textarea, input[type="text"]) {
	padding-block: var(--block-gap-narrow);
	padding-inline: var(--block-gap-narrow);
	border: 1px solid var(--theme-edge-high);
	border-radius: 0;
	outline: none;
	background-color: transparent;
	color: currentColor;
	font-size: var(--font-size-normal);
	font-family: inherit;
	line-height: inherit;
	appearance: none;
	cursor: text;
}
:where(textarea:read-only, input:read-only) {
	user-select: none;
	pointer-events: none;
}
:where(select) {
	display: block;
	inline-size: 100%;
	background-color: transparent;
	cursor: pointer;
	appearance: none;
}
:where(button, [type="button"], [type="reset"], [type="submit"], ::file-selector-button)
 {
	inline-size: fit-content;
	word-break: keep-all;
	overflow-wrap: break-word;
	appearance: unset;
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
	cursor: pointer;
}
:where(iframe) {
	display: block;
	inline-size: 100%;
}
:where(.submit-ui) {
	flex-shrink: 0;
	padding-block: var(--block-gap-narrow);
	padding-inline: var(--gap-em-normal);
	border: 1px solid var(--theme-edge-high);
	background-color:
		var(--hover-off, var(--theme-button-stay))
		var(--hover-on, var(--theme-button-active));
	color: var(--theme-button-text);
	font-family: inherit;
	font-size: inherit;
	text-decoration: none;
	word-break: keep-all;
	overflow-wrap: break-word;
	transition-property: background-color;
	transition-duration: var(--duration-rapidly);
	cursor: pointer;
}
.visually-hidden {
	position: absolute;
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
}
.screen-reader-text {
	position: absolute;
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	overflow-wrap: normal;
	overflow: hidden;
}
.skip-link:focus {
	display: block;
	inset-block-start: var(--block-gap-narrow);
	inset-inline-start: var(--block-gap-narrow);
	block-size: auto;
	inline-size: auto;
	padding: var(--gap-em-normal);
	border-radius: var(--rounded-midium);
	outline-offset: 0;
	background-color: var(--theme-base-main);
	color: var(--theme-text-main);
	font-size: initial;
	text-decoration: none;
	clip: auto !important;
	clip-path: none;
	z-index: 999;
}

/************************************************/
/*** Link Style ***/
/************************************************/
:where(:any-link, :enabled, summary, label) {
	--hover-off: initial;
	--hover-on: ;
}
:where(:any-link) {
	color: var(--theme-link-main);
	text-decoration:
		var(--hover-off, underline)
		var(--hover-on, none);
	text-underline-offset: var(--offset-thin);
}
:where(:any-link[class], :any-link:has([class])) {
	text-decoration: none;
}
:where(:focus-visible) {
	outline: 2px solid var(--theme-accent-color);
	outline-offset: -1px;
}
/*** External Link ***/
:where(a[rel~="external"])::after {
	content: "↗";
	margin-inline-start: var(--gap-em-thin);
	border-top: 1px dotted var(--theme-edge-low);
	border-right: 1px dotted var(--theme-edge-low);
	border-bottom: 1px solid var(--theme-edge-low);
	border-left: 1px solid var(--theme-edge-low);
	color: var(--theme-text-sub);
	font-size: var(--font-size-x-small);
	font-weight: bold;
}


/************************************************/
/*** Site Layout ***/
/************************************************/
.site-wrapper {
	max-inline-size: var(--size-inline-max);
	margin-inline: auto;
	background-color: var(--theme-base-main);
}
.site-header {
	padding-block-start: var(--block-gap-normal);
}
.site-contents-area {
	display: grid;
	grid-template-areas: "main sidebar";
	grid-template-columns: 1fr var(--size-sidebar-inline);
}
.main-contents {
	grid-area: main;
}
.sidebar {
	grid-area: sidebar;
	position: relative;
}
.site-footer {
	background-color: var(--theme-base-sub);
	border-block-start: 3px solid var(--theme-base-mute);
}
/*** Container ***/
.container {
	margin-inline: auto;
	padding-inline-start: var(--global-padding-inline);
	padding-inline-end: var(--global-padding-inline);
}
.container > :where(.block-group):not(:first-child) {
	margin-block-start: var(--block-gap-wide);
}
.container :where(.block-group > *+*) {
	margin-block-start: var(--block-gap-normal);
}
.container :where(.alignfull) {
	margin-inline-start: calc(var(--global-padding-inline) * -1);
	margin-inline-end: calc(var(--global-padding-inline) * -1);
}


/************************************************/
/*** Site Header Block ***/
/************************************************/
.site-header .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--block-gap-normal);
}
.site-header :where(.header-logo, .header-search) {
	inline-size: 100%;
	max-inline-size: 300px;
}
.search-box {
	display: flex;
}
.search-box input[type="text"] {
	flex-grow: 1;
	padding-block: 0;
	border: 3px solid var(--theme-edge-low);
}
.search-box input[type="text"]:focus {
	border: 3px solid var(--theme-accent-color);
	outline: none;
}
.search-box button[type="submit"] {
	font-size: var(--font-size-small);
}

/*** Header Menu Block ***/
.header-menu {
	margin-block-start: var(--block-gap-normal);
	padding-block: 3px;
	border-block-start: 1px solid var(--theme-edge-low);
	border-block-end: 1px solid var(--theme-edge-low);
	background-color: var(--theme-base-sub);
}
.header-menu ul {
	display: flex;
	column-gap: 4px;
	row-gap: 2px;
	transition-property: block-size, line-height, overflow;
	transition-duration: var(--duration-default);
}
.header-menu li {
	flex-grow: 1;
}
.header-menu a {
	display: block;
	padding-block: var(--block-gap-narrow);
	background-color:
		var(--hover-off, var(--theme-base-main))
		var(--hover-on, var(--theme-accent-color));
	color: 
		var(--hover-off, var(--theme-text-sub))
		var(--hover-on, var(--c-white));
	font-weight: bold;
	text-align: center;
}
.header-menu input {
	display: none;
}
.header-menu label {
	display: none;
	align-items: center;
	inline-size: 100%;
	padding-block: var(--block-gap-normal);
	background-color: var(--theme-base-invert);
	color: var(--theme-text-invert);
	text-align: center;
	cursor: pointer;
}
.header-menu label div {
	flex-grow: 1;
	padding-inline-end: var(--block-gap-huge);
	text-align: center;
}
.header-menu label span {
	display: inline-block;
	position: relative;
	block-size: 1px;
	inline-size: var(--block-gap-normal);
	margin-inline: var(--block-gap-normal);
	background-color: var(--theme-text-invert);
}
.header-menu label span::before,
.header-menu label span::after {
	content: "";
	display: inherit;
	position: absolute;
	block-size: inherit;
	inline-size: inherit;
	background-color: inherit;
}
.header-menu label span::before {
	inset-block-start: -6px;
}
.header-menu label span::after {
	inset-block-end: -6px;
}


/************************************************/
/*** Main Contents Block ***/
/************************************************/
.main-contents .container {
	padding-block: var(--block-gap-normal);
}
.entry-content > h2 {
	margin-block-start: var(--gap-em-wide);
	padding-block-end: var(--gap-em-thin);
	border-block-end: 1px solid var(--theme-edge-high);
}
.entry-content > h3 {
	margin-block-start: var(--gap-em-wide);
	padding-inline-start: var(--gap-em-narrow);
	border-inline-start: 4px solid var(--theme-edge-high);
}
.entry-content p {
	line-height: var(--leading-wide);
}
.entry-content :where(small) {
	display: block;
	color: var(--theme-text-mute);
	font-size: var(--font-size-small);
}
.main-contents code {
	padding-block: 1px;
	padding-inline: var(--gap-em-thin);
	border-radius: var(--rounded-small);
	background-color: var(--theme-base-sub);
	font-family: var(--font-family-code);
}


/************************************************/
/*** List Style ***/
/************************************************/

/*** List Marker Style ***/
.list-block[data-mode="marker"] li {
	margin-inline-start: var(--block-gap-normal);
	padding-block: var(--block-gap-thin);
	list-style: disc;
}
/*** List Number Style ***/
.list-block[data-mode="decimal"] li {
	margin-inline-start: var(--block-gap-wide);
	padding-block: var(--block-gap-thin);
	list-style: decimal;
}
/*** List Border-Dotted Style ***/
.list-block[data-mode="dotted"] :where(li > a, li > div) {
	display: block;
	padding-block: var(--block-gap-narrow);
	padding-inline-start: var(--block-gap-narrow);
	border-block-end: 1px dotted var(--theme-edge-low);
	background-color:
		var(--hover-off, unset)
		var(--hover-on, var(--theme-base-hover));
}


/************************************************/
/*** Definition List Style ***/
/************************************************/
.dl-block > div:not(:first-child) {
	margin-block-start: var(--block-gap-normal);
}
.dl-block dt {
	font-weight: bold;
}
.dl-block dd :where(ol, ul) {
	margin-block-start: var(--block-gap-narrow);
}
/*** DL Column Style ***/
.dl-block[data-mode="column"] > div {
	display: flex;
	flex-direction: column;
}
.dl-block[data-mode="column"] dt {
	text-decoration: underline;
	text-underline-offset: var(--offset-thin);
}
.dl-block[data-mode="column"] dd {
	margin-block-start: var(--block-gap-narrow);
}
/*** DL Row Style ***/
.dl-block[data-mode="row"] > div {
	display: flex;
	flex-direction: row;
	margin-block-start: var(--block-gap-thin);
	border-block-end: 1px solid var(--theme-edge-low);
}
.dl-block[data-mode="row"] dt {
	flex-basis: 15%;
	min-inline-size: 5em;
	padding-inline: var(--block-gap-thin);
	padding-block: var(--block-gap-narrow);
	background-color: var(--theme-base-sub);
	text-align: center;
}
.dl-block[data-mode="row"] dd {
	inline-size: 88%;
	padding-inline: var(--block-gap-narrow);
	padding-block: var(--block-gap-narrow);
}


/************************************************/
/*** Table Style ***/
/************************************************/
.table-block {
	border-block-start: 1px solid var(--theme-edge-low);
}
.table-block table {
	position: relative;
	border-spacing: 0;
	font-size: var(--font-size-small);
}
.table-block :where(th, td) {
	padding-block: var(--block-gap-narrow);
	padding-inline: var(--block-gap-narrow);
	border-block-end: 1px solid var(--theme-edge-low);
	text-align: left;
}
.table-block tr th {
	position: sticky;
	font-weight: normal;
	word-break: keep-all;
	overflow-wrap: break-word;
}
.table-block tr :where(th:first-child, td:first-child) {
	inset-inline-start: 0;
	background-color: var(--theme-base-main);
}
.table-block th[scope="col"] {
	inset-block-start: 0;
	background-color: var(--theme-base-sub);
	font-weight: bold;
	z-index: 1;
}
.table-block th:has(a) {
	padding: 0;
}
.table-block :where(th > a) {
	display: block;
	padding-block: var(--block-gap-narrow);
	padding-inline: var(--block-gap-narrow);
	background-color:
		var(--hover-off, transparent)
		var(--hover-on, var(--theme-base-hover));
}
.table-block table[data-mode~="border"] :where(th, td) {
	border-inline-end: 1px solid var(--theme-edge-low);
}
.table-block table[data-mode~="border"] tr :where(th, td):first-child {
	border-inline-start: 1px solid var(--theme-edge-low);
}
.table-block table[data-columns="2"] th:first-child {
	inline-size: 24%;
	min-inline-size: 5em;
}
/*** Table Zoom Cell Option ***/
.table-block table[data-mode~="zoom-cell"] :not(thead) tr th:first-child {
	text-align: center;
	cursor: zoom-in;
	&:hover {
		font-size: 3rem;
	}
}
.table-block table[data-mode~="zoom-cell"] :not(thead) td {
	user-select: all;
}
/*** Table Scroll Option ***/
.table-block[data-mode="scroll"] {
	max-block-size: 80svb;
	overscroll-behavior: contain;
	overflow: scroll;
}
.table-block[data-mode="scroll"] table {
	min-inline-size: 480px;
}
.table-block[data-mode="scroll"] tr th[scope="col"]:first-child {
	z-index: 2;
}


/************************************************/
/*** Generic Components ***/
/************************************************/

/*** TOC within the page ***/
.toc-block {
	padding-block: var(--block-gap-normal);
	padding-inline: var(--block-gap-normal);
	border: 1px solid var(--theme-edge-low);
	background-color: var(--theme-base-sub);
}
.toc-block .heading {
	font-size: var(--font-size-large);
}
.toc-block > :not(:first-child) {
	margin-block-start: var(--block-gap-normal);
}

/*** Archive List Block ***/
.archive-list .archive-item {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	column-gap: var(--block-gap-normal);
	padding-block: var(--block-gap-narrow);
	border-block-end: 1px solid var(--theme-edge-low);
	background-color:
		var(--hover-off, unset)
		var(--hover-on, var(--theme-base-hover));
	color: currentColor;
}
.archive-list .archive-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	row-gap: 0;
}
.archive-list .heading {
	max-block-size: 2lh;
	margin-block: auto;
	padding-block-end: 0;
	border-block-end: none;
	color: var(--theme-link-main);
	font-size: var(--font-size-large);
	overflow: hidden;
}
.archive-list .excerpt {
	flex: 1;
	block-size: auto;
	min-block-size: 2lh;
	max-block-size: 2lh;
	overflow: hidden;
}
.archive-list .archive-thumbnail {
	flex-basis: 20dvi;
	min-inline-size: 80px;
	max-inline-size: 100px;
}
.archive-list .archive-thumbnail img {
	object-fit: cover;
}
.archive-list .archive-thumbnail > div {
	border: 3px solid var(--theme-base-invert);
	aspect-ratio: 1;
}
.archive-list .archive-thumbnail > div span {
	display: block;
	margin-block-start: var(--block-gap-normal);
	background-color: var(--c-white);
	text-align: center;
}

/*** Flex Block ***/
.flex-block {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--block-gap-narrow);
}
.flex-block .flex-item {
	flex-grow: 1;
	flex-basis: 45%;
}
.flex-block [data-mode*="stripe-brick"] {
	border: 5px solid var(--theme-base-invert);
	background-size: 48px 48px;
	background-repeat: repeat;
}
.flex-block [data-mode*="green"] {
	background-image: linear-gradient(
		-45deg,
		#ffffff 25%,
		#d7ffc9 25%, #d7ffc9 50%,
		#ffffff 50%, #ffffff 75%,
		#d7ffc9 75%, #d7ffc9
	);
}
.flex-block [data-mode*="blue"] {
	background-image: linear-gradient(
		-45deg,
		#ffffff 25%,
		#aecfff 25%, #aecfff 50%,
		#ffffff 50%, #ffffff 75%,
		#aecfff 75%, #aecfff
	);
}
.flex-block [data-mode*="mono-tone"] {
	border: 1px solid var(--theme-base-invert);
}
.flex-block .flex-item a {
	display: block;
	padding: var(--block-gap-narrow);
	color: var(--c-black);
	text-shadow:
		0px 0px 10px #fff,
		0px 0px 6px #fff,
		0px -1px 1px #fff,
		1px 0px 1px #fff,
		0px 1px 1px #fff,
		-1px 0px 1px #fff;
	text-decoration:
		var(--hover-off, none)
		var(--hover-on, underline);
}
.flex-block .flex-item .heading {
	padding: 0;
	margin: 0;
	border: none;
	font-size: var(--font-size-x-large);
	font-weight: bold;
}
.flex-block .flex-item p {
	margin: 0;
	font-weight: bold;
}
.flex-block .flex-item div {
	text-align: right;
}

/*** Summary and Details ***/
.disclosure-box[open] {
	border-inline-start: 1px solid var(--theme-edge-low);
}
.disclosure-box summary {
	padding-block: var(--gap-em-narrow);
	padding-inline: var(--gap-em-narrow);
	background-color: var(--theme-base-invert);
	color: var(--theme-text-invert);
}
.disclosure-box :where(div, p) {
	padding-block: var(--block-gap-narrow);
	padding-inline: var(--block-gap-narrow);
}

/*** Page Navigation Box ***/
.rounded-rectangle a {
	display: block;
	padding-inline: var(--block-gap-normal);
	padding-block: var(--block-gap-normal);
	border: 1px solid var(--theme-edge-low);
	border-radius: var(--rounded-midium);
	background-color:
		var(--hover-off, unset)
		var(--hover-on, var(--theme-base-hover));
	font-weight: bold;
	text-align: center;
}
.rounded-rectangle[data-mode="return-to-top"] {
	display: flex;
	align-items: center;
}
.rounded-rectangle[data-mode="return-to-top"]::before {
	content: "";
	flex: 1;
	padding-inline: var(--block-gap-narrow);
	font-size: var(--font-size-small);
	text-align: end;
}
.rounded-rectangle[data-mode="return-to-top"] a {
	inline-size: fit-content;
}
.rounded-rectangle[data-mode="return-to-top"] a::before {
	content: "";
	display: block;
	inline-size: var(--block-gap-narrow);
	aspect-ratio: 1;
	margin-block: 3px -3px;
	border-inline-start: 1px solid var(--theme-accent-color);
	border-block-start: 1px solid var(--theme-accent-color);
	rotate: 45deg;
}


/************************************************/
/*** Specific Block ***/
/************************************************/

/*** Temporary Message Block ***/
.temporary-msg {
	position: relative;
	margin-block-start: var(--block-gap-normal);
	padding-block: var(--block-gap-normal);
	padding-inline: var(--block-gap-normal);
	border-inline-start: 3px solid var(--theme-edge-high);
	background-color: var(--theme-base-mute);
}
.temporary-msg[data-mode="alert"] {
	padding-inline-start: var(--block-gap-huge);
	border: 3px solid rgb(221 0 68 / 1);
	border-radius: var(--rounded-midium);
	background-color: rgb(221 0 68 / 0.1);
}
.temporary-msg[data-mode="alert"]::before {
	content: "⚠";
	margin-top: -0.8em;
	color: rgb(221 0 68 / 1);
	font-size: 2rem;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: var(--block-gap-narrow);
}

/*** Syntax Highlight Block ***/
.syntax-highlight {
	font-size: var(--font-size-small);
}
.syntax-highlight::before {
	content: "Script";
	display: inline-block;
	inline-size: 8em;
	padding-block: 2px 1px;
	border-start-start-radius: var(--rounded-midium);
	border-start-end-radius: var(--rounded-midium);
	background-color: #333333;
	color: #f8f8f8;
	font-size: var(--font-size-small);
	text-align: center;
}
.syntax-highlight:has(code.language-html)::before {
	content: "HTML";
}
.syntax-highlight:has(code.language-css)::before {
	content: "CSS";
	background-color: #333333;
}
.syntax-highlight:has(code.language-php)::before {
	content: "PHP";
	background-color: #333333;
}
.syntax-highlight pre code {
	padding: 0;
	border-radius: 0;
	background: none;
}

/*** Sample Browse iframe ***/
.sample-browse::before {
	content: "表示確認";
	display: inline-block;
	inline-size: 8em;
	padding-block: 2px 1px;
	border-start-start-radius: var(--rounded-midium);
	border-start-end-radius: var(--rounded-midium);
	background-color: #6699ff;
	color: #f8f8f8;
	font-size: var(--font-size-small);
	text-align: center;
}
.sample-browse iframe {
	padding: var(--block-gap-normal);
	border: 2px solid #6699ff;
}
.sample-browse pre {
	padding: var(--block-gap-normal);
	border: 2px solid #6699ff;
	font-family: var(--font-family-code);
}

/*** SNS Share Button Block ***/
.sns-share-block {
	margin-block-start: var(--block-gap-normal);
}
.sns-share-block ul {
	display: flex;
	justify-content: center;
	gap: var(--block-gap-narrow);
}
.sns-share-block li {
	flex: 1;
}
.sns-share-block .sns-btn-x {
	--brand-color: #000000;
}
.sns-share-block .sns-btn-facebook {
	--brand-color: #4267B2;
}
.sns-share-block .sns-btn-hatena {
	--brand-color: #00A4DE;
}
.sns-share-block .sns-btn-line {
	--brand-color: #06C755;
}
.sns-share-block li a {
	display: block;
	padding-block: var(--gap-em-narrow);
	border-radius: var(--rounded-small);
	background-color: var(--brand-color);
	color: var(--c-white);
	font-weight: bold;
	text-align: center;
	translate:
		var(--hover-off, unset)
		var(--hover-on, 0 1px);
}

/*** Ads Display Block ***/
.ad-block {
	position: relative;
	inline-size: auto;
	margin-inline: auto;
	margin-block-start: var(--block-gap-normal);
	background-image:
		repeating-linear-gradient(
			45deg,
			var(--theme-base-sub),
			var(--theme-base-sub) 1px,
			transparent 0px,
			transparent 50%
		),
		repeating-linear-gradient(
			-45deg,
			var(--theme-base-sub),
			var(--theme-base-sub) 1px,
			transparent 0px,
			transparent 50%
		);
	outline: 1px solid var(--theme-base-sub);
	outline-offset: -1px;
	contain: content;
}
.ad-block:has([data-test]) {
	display: block;
	block-size: 300px;
	padding: var(--block-gap-normal);
	text-align: center;
}
.ad-block[data-place="sidebarTop"] {
	margin-block-start: 0;
}
.ad-block[data-place="sidebarSticky"] {
	position: sticky;
	inset-block-start: var(--block-gap-normal);
	max-block-size: 80dvb;
	margin-inline: var(--block-gap-normal);
}


/************************************************/
/*** Element Parts ***/
/************************************************/
.lang-en {
	font-family: var(--font-family-sans-en);
}
.font-blod {
	font-weight: bold;
}
.font-big {
	font-size: 1.25em;
}

/*** Background Color ***/
.bgc-gray {	background-color: #cccccc;}
.bgc-red {	background-color: #ff9999;}
.bgc-orange {	background-color: #ffdeae;}
.bgc-green {	background-color: #bfffae;}
.bgc-blue {	background-color: #aecfff;}
.bgc-purple {	background-color: #aabbff;}
.bgc-pink {	background-color: #ffbbee;}


/************************************************/
/*** Sidebar Block ***/
/************************************************/
.sidebar .container {
	padding-block-start: var(--block-gap-normal);
}
.sidebar .heading {
	padding-block-start: var(--block-gap-normal);
	padding-inline-start: var(--block-gap-normal);
	border-block-start: 1px solid var(--theme-edge-high);
	background-image: linear-gradient(var(--theme-base-sub), transparent);
	font-size: var(--font-size-normal);
}
.sidebar .list-block a {
	padding-inline-start: var(--block-gap-normal);
}

/************************************************/
/*** Site Footer Block ***/
/************************************************/
.site-footer nav {
	padding-block: var(--block-gap-normal);
}
.site-footer nav ul {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--block-gap-narrow);
	row-gap: var(--block-gap-normal);
}
.site-footer .footer-nav a {
	display: block;
	padding-block: var(--block-gap-thin);
	padding-inline: var(--block-gap-narrow);
	border-inline-start: 3px solid var(--theme-accent-color);
	color: var(--theme-text-sub);
	font-weight: bold;
}
.footer-copyright {
	block-size: 16em;
	padding-block-start: var(--block-gap-normal);
	background-color: var(--theme-base-invert);
	color: var(--theme-text-invert);
	text-align: center;
}
.footer-copyright small {
	font-size: var(--font-size-small);
}


/************************************************/
/*** Mobile Responsive ***/
/************************************************/
@media screen and (max-width: 1023px) {
	.site-wrapper {
		max-width: 760px;
	}
	.site-contents-area {
		display: block;
	}
	.ad-block[data-place="sidebarSticky"] {
		display: none;
	}
}
@media screen and (max-width: 648px) {
	.site-header .container {
		flex-direction: column;
	}
	.header-menu input {
		display: block;
	}
	.header-menu label {
		display: flex;
	}
	.header-menu ul {
		flex-direction: column;
		block-size: 0;
		line-height: 0;
		overflow: hidden;
	}
	.header-menu a {
		padding-block: var(--block-gap-normal);
	}
	.header-menu input:checked ~ ul {
		block-size: auto;
		line-height: var(--leading-normal);
		overflow: auto;
	}
	.flex-block {
		flex-direction: column;
	}
}

/************************************************/
/*** Hover Action Style ***/
/************************************************/
@media (any-hover: hover) {
	:where(:any-link, :enabled, label, summary):hover {
		--hover-off: ;
		--hover-on: initial;
	}
}

/************************************************/