:root {
	--font-family-sans-serif: "Noto Sans JP", "Meiryo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", 'YuGothic', "Roboto", "Droid Sans", sans-serif;
	--font-family-sans-serif-italic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", 'YuGothic', "Roboto", "Droid Sans", sans-serif;
	--font-family-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho Medium", "Yu Mincho", "YuMincho", serif;
	--font-family-monospace: "Noto Sans Mono", "Noto Sans JP", "Consolas", "Meiryo", "monaco", "Osaka−等幅", "Osaka-mono", monospace;
	--font-family-arial: "Arial", "Helvetica Neue", "Helvetica", sans-serif;
	--font-family-baskerville: "Baskerville", "Baskerville Old Face", "Garamond", "Times New Roman", serif;
	--font-family-bodoni: "Bodoni MT", "Bodoni 72", "Didot", "Didot LT STD", "Hoefler Text", "Garamond", "Times New Roman", serif;
	--font-family-candara: "Candara", "Calibri", "Segoe", "Segoe UI", "Optima", "Arial", sans-serif;
	--font-family-century-gothic: "Century Gothic", "CenturyGothic", "AppleGothic", sans-serif;
	--font-family-georgia: "Georgia", "Times", "Times New Roman", serif;
	--font-family-datetime: "Georgia", "Times", "Times New Roman", serif;

	--content-width: 960px;
	--content-font-size-px:  16px;
	--content-padding-left:  16px;
	--content-padding-right: 16px;
	--default-margin-block-start: 2em;
	--default-margin-block-end:   2em;

	--is-windows: 0;
	--is-mac:     0;
	--is-android: 0;
	--is-iphone:  0;
}

/*
 * ルート
 */
html {
	overflow-y: scroll; /* 常にスクロールバーを表示します */
	scroll-behavior: smooth; /* スムースにスクロールします */
	font-family: var(--font-family-sans-serif);
	font-size: var(--content-font-size-px); /* html または :root css で font-size を指定すると 1rem が変更されます。*/
	font-kerning: none; /* カーニングを無効にします（Noto Sans JP では和文の一部でもツメ処理がおこなわれてしまうので、それを防ぐためです）*/
	text-spacing-trim: space-all; /* 役物ツメ処理を無効にします（ブラウザーの機能を使わずに Catalpa の HTML 出力で対応するため）*/
	text-autospace: no-autospace; /* 和字・欧字の間隔調整を無効にします（ブラウザーの機能を使わずに Catalpa の HTML 出力で対応するため）*/
	background-color: var(--footer-background-color); /* HTMLにフッター背景色を設定しておくと body の縦が短いときに表示されます。*/
}

/*
 * ボディ
 */
body {
	margin: 0;
	padding: 0;
	line-height: 1.75rem;
	color: var(--main-text-color);
	background-color: var(--main-background-color);
}

/*
 * コンテント
 */
.content {
	box-sizing: border-box;
	margin-inline-start: auto;
	margin-inline-end: auto;
	padding-inline-start: calc(var(--content-padding-left) + round(up, calc(mod(calc(min(100%, var(--content-width)) - var(--content-padding-left) - var(--content-padding-right)), var(--content-font-size-px)) / 2), 1px));
	padding-inline-end: calc(var(--content-padding-right) + round(down, calc(mod(calc(min(100%, var(--content-width)) - var(--content-padding-left) - var(--content-padding-right)), var(--content-font-size-px)) / 2), 1px));
	max-width: var(--content-width);
}

/*
 * アンカー
 */
a {
	text-decoration: none;
	color: var(--text-link-color);
	line-break: anywhere;
}
a:visited {
	color: var(--text-link-visited-color);
}
a:hover {
	color: var(--text-link-hover-color);
}

/*
 * テレタイプ・テキスト
 */
tt {
	font-family: var(--font-family-monospace);
	white-space: pre-wrap;
	font-size: 106.25%; /* 16px -> 17px monospace は文字が小さいので大きくしてます */ 
}

/*
 * ヘッダー
 */
header {
	background-color: var(--header-background-color);
	color: var(--header-text-color);
}
header div.nav {
	background-color: var(--nav-link-background-color);
	border-bottom: 1px solid var(--nav-background-color);
}

/*
 *  既定のヘッダー
 */
header .default {
	background-color: var(--header-background-color);
}
header .default .content {
	padding-block-start: 0.75em;
	padding-block-end:   0.75em;
	display: flex;
	flex-flow: wrap;
	gap: 0.75em;
	align-items: center;
}
header .default .content a {
	color: var(--header-text-color);
}
header .default .content .title {
	line-height: 1.25;
	font-size: 1.5em;
}

/*
 * フッター
 */
footer {
	background-color: var(--footer-background-color);
	color: var(--footer-text-color);
}
footer div.nav {
	background-color: var(--nav-link-background-color);
	border-top: 1px solid var(--nav-background-color);
}

/*
 *  既定のフッター
 */
footer .default {
	padding: 1.5em 0;
	border-top: 1px solid var(--border-color);
}
footer .default .content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}
footer .default .content .copyright {
	margin-inline-start: auto;
	padding: 0.5em;
}
footer .default .content address {
	display: inline;
	font-style: normal;
}
footer .default .legal {
	flex-grow: 1;
}

/*
 *  検索ボックス
 */
form.search {
	margin-inline-start: auto;
}
input[type="search"] {
    font-family: var(--font-family-sans-serif);
	font-size: 1rem;
	line-height: 1;
	margin: auto;
	padding: 0 1em;
	width: 14em;
	height: 32px;
	border-style: none;
	border-radius: 2em;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
	appearance: textfield;
	color: var(--search-box-color);
	background-color: var(--search-box-background-color);
}
input[type="search"]:focus {
	outline: 0;
}
input:focus::placeholder {
	color: transparent;
}
input[type="search"]::-webkit-search-cancel-button {
	appearance: none;
}
input[type="search"]::-webkit-search-decoration {
	display: none;
}
input[type="search"]::-ms-clear {
	display: none;
}