/* CSS for user */
:root {
	--color_atr: #55f;
	--color_err: #f55;
	--color_btn: #e11;	/* ボタン色 */
	--color_bgm: #555;	/* mainの背景色 */
	--color_fcs: #fcc;	/* フォーカスの背景色 */
	--color_ttl: #c00;	/* タイトル背景色 */
	--color_stl: #ddd;	/* サブタイトル背景色 */
	--color_off: #708090;	/* radio、checkboxのoff時色 */
}
html {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
/*-------------------- header --------------------*/
#header {
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
	line-height: 1em;
}
#header img#logo {
	width: 200px;
}
#header ul {
	display: inline-flex;
	margin: 0;
	padding: 0;
	list-style: none;
}
#header p {
	display: block;
	margin: 0;
	white-space: nowrap;
}
#header li {
	font-family: "FontAwesome","Font Awesome 5 Free";
	font-family: FontAwesome;
	margin: 1em;
	white-space: nowrap;
}
#header i {
	color: var(--color_btn);
}
/*-------------------- contents --------------------*/
#contents {
	width: 100%;
}
/*-------------------- footer --------------------*/
#footer {
	position: sticky;
	top: 100vh;
	width: 100%;
	height: 80px;
	line-height: 2em;
	text-align: center;
	color: white;
	background-color: dimgray;
}
#footer p {
	margin: 0;
	font-size: large;
}
/*-------------------- link --------------------*/
a {
	text-decoration: none;
	color: var(--color_btn);
}
a.aimg {
	display: flex;
	justify-content: center;
}
/*-------------------- form parts --------------------*/
input {
	font-size: large;
	line-height: 2em;
	border: none;
	border-radius: 0.5em;
}
input:focus {
	background-color: var(--color_fcs);
	outline: none;
}
textarea {
	font-size: x-large;
}
select {
	height: 2em;
	font-size: large;
	border: none;
	border-radius: 0.5em;
}
select:focus {
	background-color: var(--color_fcs);
}
textarea {
	box-sizing: border-box;
	width: 100%;
	border: none;
	border-radius: 0.5em;
}
textarea:focus {
	background-color: var(--color_fcs);
	outline: none;
}
label {
	margin-right: 0.5em;
}
/*-------------------- buttons --------------------*/
button {
	font-family: FontAwesome;
	cursor: pointer;
	font-size: large;
	font-weight: bold;
	color: white;
	line-height: 2em;
	border-width: 0;
	border-radius: 0.5em;
}
button:disabled {
	opacity: 0.5;
}
button.btnEnter,
button.btnDL {
	background-color: var(--color_btn);
}
button.btnCancel {
	background-color: var(--color_off);
}
button:not(.pwb) {
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	filter:drop-shadow(4px 4px 2px #333);
}
tfoot button {
 	min-width: 5em;
}
button:not(.pwb):active {
	filter:drop-shadow(1px 1px 1px #333);
}
/*-------------------- password --------------------*/
div.pw {
	width: 100%;
	display: inline-flex;
	text-align: center;
}
input.pwi {
	width: calc(80% - 2em);
	border-radius: 0.5em 0 0 0.5em;

}
button.pwb {
	padding-left: 0.5em;
	padding-right: 0.5em;
	width: 2em;
	background-color: white;
	border-radius: 0 0.5em 0.5em 0;
	color: black;
}
button.pwb::before{
	content: "\f06e";
}

/*-------------------- radio button --------------------*/
input[type="radio"] {
	display:none;
}
input[type="radio"] + label:before {
	font-family: FontAwesome;
	display: inline-block;
	color: darkgray;
	color: var(--color_off);
	font-size: x-large;
	content: "\f057";
	filter:drop-shadow(2px 2px 1px #333);
}
input[type="radio"]:checked + label:before {
	color: var(--color_btn);
	content: "\f058";
}
input[type="radio"]:disabled + label:before {
	opacity: 0.5;
}
/*-------------------- checkbox --------------------*/
input[type="checkbox"] {
	display:none;
}
input[type="checkbox"] + label:before {
	font-family: FontAwesome;
	display: inline-block;
	color: darkgray;
	color: var(--color_off);
	font-size: x-large;
	content: "\f00d";
	filter:drop-shadow(2px 2px 1px #333);
}
input[type="checkbox"]:checked + label:before {
	content: "\f00c";
	color: var(--color_btn);
}
input[type="checkbox"]:disabled + label:before {
	opacity: 0.5;
}
/*-------------------- uploader --------------------*/
button.file {
	background-color: var(--color_btn);
}
button.file input[type="file"] {
	opacity: 0;
	width: 100%;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
	position: absolute;
	right: 0;
	top: 0;
	margin: 0;
	cursor: pointer;
}
#img_src {
	margin: 0 auto;
}
#progress_frame {
	position: absolute;
	height:30px;
	border: 2px solid #6666aa;
}
#progress_bar {
	background-color: #6666aa;
	line-height: 30px;
	color: #ffffff;
	text-align: center;
}
/*-------------------- agreement --------------------*/
#agree_btn {
	cursor: pointer;
	width: 100%;
	color: white;
	text-align: center;
	background-color: var(--color_btn);
}
#agree_btn::after {
	content: "を開く";
}
#agree_btn.active::after {
	content: "を閉じる";
}
#agree_body {
	display: none;
	margin-top: -1em;
	padding: 1em;
	text-align: left;
	background-color: white;
}
/*-------------------- messages --------------------*/
.nmlmsg {
	text-align: center;
}
.errmsg {
	text-align: center;
	color: #c00;
}
/*-------------------- tables --------------------*/
table {
	border-collapse: separate;
	border-spacing: 0;
}
/* table list */
.tbl_list {
	width: 80%;
	margin: 0.5em auto;
}
.tbl_list thead th {
	text-align: center!important;
	color: white;
	background-color: var(--color_ttl);
}
.tbl_list tbody td {
	text-align: center!important;
}
.tbl_list tbody tr:nth-child(odd) td {
	background-color: whitesmoke;
}
.tbl_list tbody tr:nth-child(even) td {
	background-color: lightgray;
}
/* table input */
.tbl_input {
	margin: 0.5em auto;
	background-color: var(--color_stl);
}
.tbl_input th,
.tbl_input td {
	padding: 0.5em 2%;
	line-height: 3em;
}
.tbl_input thead th {
	color: white;
	background-color: var(--color_ttl);
}
.tbl_input .error {
	font-weight: 100;
	font-size: small;
	color: #d11;
}
.tbl_input tfoot td {
	padding: 0.5em 0 0.8em;
	text-align: center!important;
	background-color: var(--color_stl);
}
/*-------------------- table cell vari --------------------*/
.cv_left {
	text-align: left !important;
}
.cv_center {
	text-align: center !important;
}
.cv_right {
	text-align: right !important;
}
.cv_nowrap {
	white-space: nowrap !important;
}
.cv_prewrap {
	white-space: pre-wrap !important;
}
.cv_noborder {
	border: 0 !important;
}
/*-------------------- bold text vari --------------------*/
xr {
	font-weight: bold;
	color: red;
}
xk {
	font-weight: bold;
	color: black;
}