@charset "utf-8";
/* =====================================================================
   ツールの入力フォーム（#inputBlock）の共通スタイル
   ---------------------------------------------------------------------
   `.table` / `.tr` / `.td e` / `.td v` の表組みは contents.css には
   汎用定義が無く（`.envPage .env_gene_block` 配下だけ）、各ツールが
   `css/<tool>.css` で個別に持っている。
   そのため CSS を用意しないツールでは全部 display:block のまま縦積みになり、
   ラベルと入力欄が並ばず、select も素のまま小さく表示される。

   同じ内容を6本コピーすると必ず食い違うので、共通ファイルとして1つにまとめた。
   読み込んでいるページ:
     ring-size / speed-unit / cron-generator / image-ocr / shoe-size / sleep-cycle
   ===================================================================== */

/* ---------- 表組み ---------- */
.wrapper .block #inputBlock .table {
	width: 100%;
	display: table;
	word-break: normal;
}
.wrapper .block #inputBlock .tbody { display: table-row-group; }
.wrapper .block #inputBlock .tbody .tr { display: table-row; }

.wrapper .block #inputBlock .tbody .td {
	display: table-cell;
	font-weight: 700;
	line-height: 1.4;
	padding: 14px 10px;
	border-bottom: 3px solid #fff;
	vertical-align: middle;
}
.wrapper .block #inputBlock .tbody .e {
	width: 34%;
	background-color: #eee;
	font-size: 117%;
	text-align: center;
}
.wrapper .block #inputBlock .tbody .v {
	background-color: #f9f9f9;
	font-size: 110%;
}

/* ---------- プルダウン ---------- */
/* appearance:none で標準の矢印が消えるので、背景画像で描き直す。
   select には ::after が効かない（置換要素のため）ので擬似要素は使わない。 */
.wrapper .block #inputBlock select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-size: 108%;
	font-weight: 700;
	line-height: 1.5;
	padding: 11px 38px 11px 12px;
	border: 2px solid #333;
	border-radius: 4px;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1.5 L6 6.5 L11 1.5" stroke="%23333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px 8px;
}
.wrapper .block #inputBlock select:hover {
	border-color: #23ac38;
	background-color: #f3faf4;
}
.wrapper .block #inputBlock select:focus {
	border-color: #23ac38;
	background-color: #f3faf4;
	box-shadow: 0 0 4px rgba(35, 172, 56, 0.5);
}

/* ---------- テキスト・数値入力 ---------- */
.wrapper .block #inputBlock input.form_txt,
.wrapper .block #inputBlock input[type="text"],
.wrapper .block #inputBlock input[type="number"],
.wrapper .block #inputBlock input[type="time"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	font-size: 108%;
	font-weight: 700;
	line-height: 1.5;
	color: #333;
	border: 2px solid #333;
	border-radius: 4px;
	background-color: #fff;
	margin: 0;
	outline: none;
}
.wrapper .block #inputBlock input.form_txt:focus,
.wrapper .block #inputBlock input[type="text"]:focus,
.wrapper .block #inputBlock input[type="number"]:focus,
.wrapper .block #inputBlock input[type="time"]:focus {
	border-color: #23ac38;
	background-color: #f3faf4;
	box-shadow: 0 0 4px rgba(35, 172, 56, 0.5);
}

/* 入力欄と単位を横並びにする。単位が改行で落ちないように flex で組む */
.wrapper .block #inputBlock .tbody .v.has-unit {
	white-space: nowrap;
}
.wrapper .block #inputBlock .unit-label {
	display: inline-block;
	margin-left: 8px;
	font-size: 100%;
	font-weight: 700;
	color: #66707f;
	white-space: nowrap;
}
/* 単位付きの行は、入力欄が単位のぶんだけ縮むようにする */
.wrapper .block #inputBlock .input-with-unit {
	display: flex;
	align-items: center;
	gap: 8px;
}
.wrapper .block #inputBlock .input-with-unit input {
	flex: 1 1 auto;
	min-width: 0;
}
.wrapper .block #inputBlock .input-with-unit .unit-label {
	flex: 0 0 auto;
	margin-left: 0;
}

/* ---------- ラジオ・チェックボックス ---------- */
/* contents.css に
     button, input, select, option, textarea { appearance: none; border: 0 }
   という全体リセットがあるため、ラジオとチェックボックスは
   0×0・枠なし・背景透明になって**完全に見えなくなる**（sleep-cycle で実際に消えていた）。
   ここで標準の見た目に戻す。 */
.wrapper .block #inputBlock label {
	display: inline-block;
	margin: 0 18px 4px 0;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}
.wrapper .block #inputBlock input[type="radio"],
.wrapper .block #inputBlock input[type="checkbox"] {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	width: 17px;
	height: 17px;
	margin: 0 6px 0 0;
	padding: 0;
	vertical-align: middle;
	cursor: pointer;
	accent-color: #23ac38;
}

/* ---------- ボタン ---------- */
/* サイト共通の .btn は存在しない（各ツールが自前のクラスを持っている）。
   さらに contents.css の全体リセットで button も appearance:none / border:0 になるため、
   何も当てないと**ただのテキストにしか見えない**。ここで共通の見た目を与える。 */
.wrapper .block .btn {
	display: inline-block;
	-webkit-appearance: none;
	appearance: none;
	padding: 11px 22px;
	font-size: 108%;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	background-color: #23ac38;
	border: 2px solid #23ac38;
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
	transition: background-color .15s, border-color .15s, color .15s;
}
.wrapper .block .btn:hover {
	background-color: #1c8c2d;
	border-color: #1c8c2d;
}
.wrapper .block .btn:focus-visible {
	outline: 3px solid rgba(35, 172, 56, 0.4);
	outline-offset: 1px;
}
.wrapper .block .btn:disabled {
	background-color: #cfd6de;
	border-color: #cfd6de;
	color: #8b95a3;
	cursor: not-allowed;
}
/* 補助的なボタン（白地） */
.wrapper .block .btn-sub {
	color: #23ac38;
	background-color: #fff;
}
.wrapper .block .btn-sub:hover {
	color: #fff;
	background-color: #23ac38;
}

/* ---------- 狭い画面 ---------- */
/* セルを横に並べたままだとラベルも入力欄も潰れるので、縦積みに切り替える */
@media screen and (max-width: 600px) {
	.wrapper .block #inputBlock .table,
	.wrapper .block #inputBlock .tbody,
	.wrapper .block #inputBlock .tbody .tr,
	.wrapper .block #inputBlock .tbody .td {
		display: block;
		width: auto;
	}
	.wrapper .block #inputBlock .tbody .tr {
		margin-bottom: 12px;
	}
	.wrapper .block #inputBlock .tbody .e {
		width: auto;
		text-align: left;
		padding: 8px 10px;
		font-size: 108%;
		border-bottom: none;
	}
	.wrapper .block #inputBlock .tbody .v {
		padding: 10px;
		border-bottom: none;
	}
}