:root {
	--primary-color:           #007F85;
	--primary-variant-color:   #3700B3;
	--secondary-color:         #B4C540;
	--secondary-variant-color: #018786;

	--text-black-color:           #333333; /* 薄いまたは明るい背景にテキストを表示するときの黒色です */
	--text-white-color:           #f2f2f2; /* 濃いまたは暗い背景にテキストを表示するときの白色です */
	--header-text-color:          var(--text-white-color);
	--header-background-color:    var(--primary-color);
	--footer-text-color:          var(--text-black-color);
	--footer-background-color:    #fdfdfd;
	--main-text-color:            var(--text-black-color);
	--main-background-color:      #fdfdfd;
	--text-link-color:            #01509d;
	--text-link-visited-color:    #01509d;
	--text-link-hover-color:      #ef4e00;
	--button-text-color:          var(--text-white-color);
	--button-background-color:    #287DCF;
	--list-marker-color:          #287DCF;
	--table-text-color:           var(--text-black-color);
	--table-background-color-odd: #f8f8f8;
	--table-border-color:         #cccccc;
	--blockquote-font-family:     var(--font-family-sans-serif-italic);
	--blockquote-color:           #e8e8e8;
	--ruby-text-color:            var(--text-black-color);

	--font-family-sans-serif: "Meiryo", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", 'YuGothic', "Roboto", "Droid Sans", sans-serif;
	--font-family-sans-serif-italic: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", 'YuGothic', "Roboto", "Droid Sans", sans-serif;
	--font-family-serif: "Hiragino Mincho ProN", "Yu Mincho Medium", "Yu Mincho", "YuMincho", serif;
	--font-family-monospace: "Consolas", "Meiryo", "Menlo", "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;
	--content-padding-left-adjust:  0px;
	--content-padding-right-adjust: 0px;
	--default-margin-block-start: 2em;
	--default-margin-block-end:   2em;
}

/*
 * ルート
 */
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 が変更されます。*/
}

/*
 * ボディ
 */
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) + var(--content-padding-left-adjust));
	padding-inline-end: calc(var(--content-padding-right) + var(--content-padding-right-adjust));
	max-width: var(--content-width);
}

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

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

/*
 *  既定のヘッダー
 */
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;
}

/*
 *  メイン
 */
main .content {
	margin-inline-start: auto;
	margin-inline-end: auto;
	padding-inline-start: calc(var(--content-padding-left) + var(--content-padding-left-adjust));
	padding-inline-end: calc(var(--content-padding-right) + var(--content-padding-right-adjust));
}

/*
 *  既定のフッター
 */
footer .default {
	padding: 1.5em 0;
	border-top: 1px solid #ccc;
}
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;
}

/*
 *  検索ボックス
 */
form.search {
	margin-inline-start: auto;
}
input[type="search"] {
	font-size: 16px;
	line-height: 1.0;
	margin: auto;
	padding: 0.6em 1em 0.5em 1em;
	width: 12em;
	border-style: none;
	border-radius: 2em;
	box-shadow: inset 1px 1px 3px rgba(0,0,0,.5);
	appearance: textfield;
	color: var(--main-text-color);
	background-color: var(--main-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;
}
