article {
	margin-top: 4.75em;
	margin-bottom: 1.75em;
	padding: 0 1em;
}

h1 {
	padding: 8px 8px;
	border-left: 12px solid #000;
	background: #f4f4f4;
	margin-top: 8px;
	font-size: 125%;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, メイリオ, YuGothic, "游ゴシック";
}

form {
	padding: 1px 0;
}

.inputText {
	background-color: #eeeeee;
	border-radius: 8px;
	padding: 16px 8px;
	margin: 16px 0;
}

.inputAreaOpenClose {
	border: 1px solid #000000;
	padding: 4px 1em;
	font-size: 125%;
	cursor: pointer;
	transition: .4s;
}
.nowClose {
	border-bottom: 1px solid #000000;
}
.inputAreaOpenClose:hover {
	background-color: rgba(241, 168, 196, 0.8);
}
.nowOpen .openBtn,
.nowClose .closeBtn {
	display: none;
}

.inputArea {
	border-collapse: collapse;
	margin-top: -1px;
	width: 100%;
}
.inputArea th {
	word-break: keep-all;
	font-weight: bold;
	background-color: #cccccc;
	width: 20%;
	text-align: right;
}
.inputArea th,
.inputArea td {
	padding: 4px 8px;
	border: 1px solid #000000;
}
.inputArea label {
	display: inline-block;
}
.inputArea td label {
	margin: 2px 0;
	padding: 2px;
	border-radius: 4px;
	cursor: pointer;
	transition: .4s;
}
.inputArea td label:hover {
	opacity: 0.8;
	background-color: #eee;
}
.inputArea label:not(:last-child) {
	margin-right: 1em;
}
.inputArea .w5 label { width: 5em;}
.inputArea .w6 label { width: 6em;}
.inputArea .w7 label { width: 7em;}
.inputArea .w8 label { width: 8em;}
.inputArea .w9 label { width: 9em;}
.inputArea .w10 label { width: 10em;}
.inputArea .w11 label { width: 11em;}
.inputArea .w12 label { width: 12em;}
.inputArea .w13 label { width: 13em;}
.inputArea .w14 label { width: 14em;}
.inputArea .w15 label { width: 15em;}
.inputArea .w16 label { width: 16em;}
.inputArea .w17 label { width: 17em;}
.inputArea .w18 label { width: 18em;}
.inputArea .w19 label { width: 19em;}
.inputArea .w20 label { width: 20em;}
.inputArea .w21 label { width: 21em;}
.inputArea .w22 label { width: 22em;}
.inputArea .w23 label { width: 23em;}
.inputArea .w24 label { width: 24em;}
.inputArea .w25 label { width: 25em;}
.inputArea .w26 label { width: 26em;}
.inputArea .w27 label { width: 27em;}
.inputArea .w28 label { width: 28em;}
.inputArea .w29 label { width: 29em;}

.inputArea input[type="checkbox"],
.inputArea input[type="radio"] {
	margin: 0 4px;
}
.inputArea input[type="text"],
.inputArea input[type="email"],
.inputArea input[type="password"],
.inputArea input[type="number"] {
	padding: 8px;
}
.inputArea textarea {
	width: calc(100% - 16px);
	height: 10em;
	padding: 8px;
}
.inputArea select {
	padding: 8px 32px;
}

.inputArea button {
	display: inline-block;
	background-color: #cccccc;
	color: #000000;
	padding: 8px;
	min-width: 10em;
	border-radius: 4px;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid #000000;
	transition: .4s;
}
.inputArea button[type="submit"] {
	background-color: #19448e;
	color: #ffffff
}
.inputArea button:not(:last-child) {
	margin-right: 1em;
}
.inputArea button:hover {
	opacity: 0.8;
}

.error li {
	list-style: none;
	color: #ff0000;
}

.changeReport {
	animation: animateChangeReport 1s none;
}
@keyframes animateChangeReport {
	0%   { background-color: rgba(241, 168, 196, 0); }
	10%  { background-color: rgba(241, 168, 196, 0.1); }
	20%  { background-color: rgba(241, 168, 196, 0.2); }
	30%  { background-color: rgba(241, 168, 196, 0.3); }
	40%  { background-color: rgba(241, 168, 196, 0.4); }
	50%  { background-color: rgba(241, 168, 196, 0.5); }
	60%  { background-color: rgba(241, 168, 196, 0.4); }
	70%  { background-color: rgba(241, 168, 196, 0.3); }
	80%  { background-color: rgba(241, 168, 196, 0.2); }
	90%  { background-color: rgba(241, 168, 196, 0.1); }
	100% { background-color: rgba(241, 168, 196, 0); }
}

.resultArea {
	margin-top: 1em;
	border-radius: 4px;
	border: 1px solid #000;
}
.resultArea ul {
	padding: 0 4px;
}
.resultArea li {
	list-style: none;
	background-color: rgba(241, 168, 196, 0.8);
	display: inline-block;
	padding: 4px;
	border-radius: 4px;
	margin: 4px 0;
	line-height: 1.25em;
}
.resultArea .headline {
	display: block;
	padding: 4px 8px;
}
.resultArea .headline:not(:first-child) {
	border-top: 1px solid #000000;
}
.resultArea .headline:before {
	content: "\f150 ";
	font-family: "FontAwesome";
	margin-right: 4px;
	border-bottom: 1px solid #cccccc;
}

.alertBox {
	position: fixed;
	color: #000;
	z-index: 9999;
	background-color: #fff;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%);
	padding: 40px;
	border: 1px solid #000000;
	border-radius: 4px;
	visibility: hidden;
}
.alertDisplay {
	animation: animateAlertDisplay 1.5s none;
}
@keyframes animateAlertDisplay {
	0%   { visibility: hidden;opacity: 0; }
	10%  { visibility: hidden;opacity: 0; }
	20%  { visibility: hidden;opacity: 0; }
	30%  { visibility: visible;opacity: 1; }
	40%  { visibility: visible;opacity: 1; }
	50%  { visibility: visible;opacity: 1; }
	60%  { visibility: visible;opacity: 1; }
	70%  { visibility: visible;opacity: 1; }
	80%  { visibility: hidden;opacity: 0; }
	90%  { visibility: hidden;opacity: 0; }
	100% { visibility: hidden;opacity: 0; }
}

small {
	font-size: 75%;
}

.downBtn:before,
.downBtn:after {
	content: "\f309 ";
	font-family: "FontAwesome";
}

.upBtn:before,
.upBtn:after {
	content: "\f30c ";
	font-family: "FontAwesome";
}