/***** ver. 20241022c *****/

:root {
	--c-text:        black;            /* 黒 文字色など */
	--c-bodybg:      whitesmoke;       /* 白系 全体背景色など */
	--c-gray:        gray;             /* グレー 境界線など */
	--c-inputbg:     white;            /* 黒系 inputやselectの背景など */

	--c-link1:       blue;             /* 青系 リンク */
	--c-placeholder: lightsteelblue;   /* くすみ青 プレースホルダ */

	--c-popuptext:   white;            /* 白 ポップアップメッセージ */
	--c-popupbg:     rgb(0 0 0 / 55%); /* 黒透過 ポップアップ背景 */

	--c-btnbg:    rgb(230 230 230);  /* 薄グレー ボタン背景 */

	--c-linesilver:  silver; /* 薄めのhrなど */

	/* setting.html */
	--c-setting_contents_bg:   rgb(240 240 240);
	--c-setting_contents_line: rgb(213 213 213);

	/* index.html */
	--c-redbtnbg:   red;   /* 赤ボタン */
	--c-redbtntext: white; /* 赤ボタン */
	--c-snsbg: rgb(  0   0   0 /  8%); /* SNSアカウント名 背景 */
}

/* ↓ブラウザ規定値を解除 */
select, input, button {
	font-size: unset;
}

button, textarea {
	-webkit-appearance: none;
}

/* プレースホルダ：Firefoxではopacity 0.55程度（半透過）がかかっているので明示的にopacityを指定 */
::placeholder {
	opacity: 1.0;
	color: var(--c-placeholder);
}

input[type="text"]:focus, textarea:focus {
	outline: none;
}

body.main {
	background-color: var(--c-bodybg);
	color: var(--c-text);
	margin: 2.00vw;
	font-family: sans-serif;
	touch-action: manipulation;
	/* iphoneのSafariで文字が大きくなる箇所があるバグの対策 */
	-webkit-text-size-adjust: 100%;
}

/* ページ最上部のタイトル */
div.pagetitle {
	line-height: 0.8;
	margin-bottom: 0.30em;
}

/* ページ最上部のタイトル - 上につける小さい文字 */
div.pagetitle_sub {
	font-size: 80%;
	margin-bottom: 0.80em;
}

/* タイトルの頭につける数字（白黒反転） */
span.title_num {
	background-color: var(--c-text);
	color: var(--c-bodybg);
	padding: 0em 0.2em 0em 0.2em;
	margin-right: 0.2em;
}
span.title_num::after { /* safariで和欧フォントのdivの高さがずれる対策 */
	content: "　";
	display:inline-block;
	width: 0.001em;
}

/* ページ最上部のタイトルの直下につける更新日 */
div.header_date {
	text-align: right;
	font-size: 85%;
	margin-top: -0.3em;
}

/* サブタイトル */
/* 注意: text-decorationでのまとめての指定はSafari未対応なので個別指定せよ */
div.subtitle_lv1 {
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-thickness: 1px;
	/* text-decoration: underline dotted 1px;*/
	margin-bottom: 0.5em;
}

input, textarea, select{
	color: var(--c-text);
	background-color: var(--c-inputbg);
	border: solid 1px;
	border-color: var(--c-gray);
}

button.btn1 {
	font-size: 1.10rem;
	height: 1.70em;
	color: var(--c-text);
	background-color: var(--c-btnbg);
	box-sizing: border-box;
	border: solid 1px;
	border-color: var(--c-gray);
	border-radius: 0.40em;
	padding: 0 0.45em 0 0.45em;
	vertical-align: middle;	/* 英字・日本語で高さがずれるのを防ぐ */
}

button:active {
	background-image: url("clearblue.png");
	opacity: 0.75;
}

button:disabled, select:disabled {
	opacity: 0.3;
}

button.general {
	font-size: 0.80rem;
	height: 1.9em;
	color: var(--c-text);
	background-color: var(--c-btnbg);
	border: solid 1px;
	border-color: var(--c-gray);
	border-radius: 0.20em;
	vertical-align: middle;	/* 英字・日本語で高さがずれるのを防ぐ */
}

hr.silver {
	border: solid;
	border-width: 1px 0px 0px 0px;
	color: var(--c-linesilver);
	margin: 2px 0px 2px 0px;
}

hr.black {
	border: solid;
	border-width: 2px 0px 0px 0px;
	color: var(--c-text);
	margin: 3px 0px 3px 0px;
}

hr.black_wide {
	border: solid;
	border-width: 2px 0px 0px 0px;
	color: var(--c-text);
	margin: 10px 0px 10px 0px;
}

hr.black_1px {
	border: solid;
	border-width: 1px 0px 0px 0px;
	color: var(--c-text);
	margin: 2px 0px 2px 0px;
}

/* 項目間のhrのマージン設定に使う */
hr.danraku_sep {
	margin: 0.50rem 0rem 0.50rem 0rem;
}

div.note {
	font-size: 85%;
/*	line-height: 1.15;*/
}

.toggle {
	cursor: pointer;
	color: var(--c-gray);
}

div.indent1 {
	padding-left: 1.0em;
	text-indent: -1.0em;
}

.monosp {
	font-family: monospace;
}

a {
	color: var(--c-link1);
}

/* ページ最下部の自分のアカウント表示 */
a.sns_acc {
	margin-left: 0.40em;
	font-size: 85%;
	font-family: monospace;
	text-decoration: none;
	background-color: var(--c-snsbg);
	padding: 0 0.15em;
}

a.sns_acc:hover {
	text-decoration: underline;
}

a.sns_acc > span {
	color: var(--c-text);
	font-weight: bold;
}

/* ソースコード・コマンドなど（複数行） */
pre.src {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding: 0.5em;
	background-color: rgb(223 223 223);
	white-space: pre-wrap; /* 横幅に合わせて改行する */
	tab-size: 4;
}

/* ソースコード・コマンドなど（1行・文中） */
code {
	margin:  0em 0.5em 0em 0.5em;
	padding: 0em 0.5em 0em 0.5em;
	background-color: rgb(223 223 223);
	tab-size: 4;
}

/* ソースコード表記内の変数部分 */
span.srcvar {
	font-style: italic;
	color: rgb(255 0 122);
}

/* ソースコード表記内のタイトル部分：ファイル名などを記す */
pre.src > div.srctitle {
	background-color: rgb(110 110 110);
	color: white;
	padding-left: 0.5em;
	margin: -0.5em -0.5em -1.2em -0.5em;
}
pre.src > div.srctitle::before {
	content: "▶";
	font-size: 0.75em;
	vertical-align:  0.125em;
	margin-right: 0.35em;
}
pre.src > div.srctitle::after { /* safariで和欧フォントのdivの高さがずれる対策 */
	content: "　";
	display:inline-block;
	width:0.001em;
}