@charset "UTF-8";
/*
[blue]
210.0

[red]
345.0
*/

a {
	color: hsl(199, 100%, 50%);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.btnGrad, .btnSubmit {
	border-color: hsl(0, 0%, 91%) hsl(0, 0%, 85%) hsl(0, 0%, 76%) hsl(0, 0%, 91%);
	border-style: solid;
	border-width: 1px;
	box-shadow: 0 16px 16px -8px rgba(64, 64, 64, 15%);
	cursor: pointer;
	display: inline-block;
	font-size: 85%;
	height: 36px;
	line-height: 36px;
	padding: 0 16px;
	
	/*グラデーション*/
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(hsl(0, 0%, 94%)));
	background: -moz-linear-gradient(top, #fff, hsl(0, 0%, 94%));
	background: -ms-linear-gradient(top, #fff, hsl(0, 0%, 94%));
	
	/* 角を丸くする */
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.btnGrad:hover, .btnSubmit:hover {
	border-color: hsl(0, 0%, 85%) hsl(0, 0%, 76%) hsl(0, 0%, 62%) hsl(0, 0%, 85%);
	box-shadow: 0 16px 16px -8px rgba(64, 64, 64, 24%);
	color: hsl(0, 0%, 15%);
}
#contents {
	display: none;
	padding: 3%;
	width: 87.5%;
}
.div_container {
	width: 100%;
}
.div_container.help {
	background-color: hsl(64, 100%, 85%); 
	border: solid 1px hsl(64, 100%, 76%); 
	font-size: 85%; 
	padding: 22px;
	
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(64, 100%, 94%)), to(hsl(64, 100%, 85%)));
	background: -moz-linear-gradient(top, hsl(64, 100%, 94%), hsl(64, 100%, 85%));
	background: -ms-linear-gradient(top, hsl(64, 100%, 94%), hsl(64, 100%, 85%));
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px; 
}
.div_message {
	border-color: hsl(0, 0%, 91%) hsl(0, 0%, 85%) hsl(0, 0%, 76%) hsl(0, 0%, 91%);
	border-style: solid;
	border-width: 1px;
	display: block;
	padding: 120px 30px;
	text-align: center;
	text-decoration: none;
}
footer {
	color: #fff;
	font-size: 85%;
	padding: 22px;
	text-align: center;
}
footer a {
	color: #fff;
}
h2 {
	background: hsl(199, 38%, 91%);
	border-color: hsl(0, 0%, 85%) hsl(199, 100%, 50%);
	border-style: double;
	border-width: 0 0 1px 3px;
	font-weight: bold;
	margin-bottom: 1px;
	padding: 12px 16px;
}
header {
	background: #fff;
	border-color: hsl(199, 0%, 85%);
	border-style: solid;
	border-width: 0 0 1px 0;
	font-size: 115%;
	padding: 16px 30px 12px 30px;
}
header img {
	height: 42px;
	margin-right: 22px;
}
header strong {
	position: relative;
	top: +0px;
}
.help_q{
	border: solid 1px hsl(214, 50%, 38%);
	color: #fff;
	font-weight: bold;
	margin-right: 12px;
	padding: 1px 4px 2px 4px;
	position: relative;
	top: -3px;
	
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(199.0, 85%, 50%)), to(hsl(199.0, 85%, 44%)));
	background: -moz-linear-gradient(top, hsl(199.0, 85%, 50%), hsl(199.0, 85%, 44%));
	background: -ms-linear-gradient(top, hsl(199.0, 85%, 50%), hsl(199.0, 85%, 44%));
	
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}
html {
	background: #000;
}
img {
	vertical-align: middle;
}
input[type="password"]:focus, 
input[type="text"]:focus, 
select:focus, 
textarea:focus {
	background: hsl(199, 100%, 97%);
	border-color: hsl(199, 100%, 76%);
	border-width: 2px;
	outline: none;
}
input[type="number"].code, 
input[type="text"].code {
	text-align: center;
}
input[type="number"].code:focus, 
input[type="text"].code:focus {
	text-align: left;
}
main {
	background: #fff;
	display: flex;
}
.margin-bottom-2px {margin-bottom: 2px;}
.margin-bottom-8px {margin-bottom: 8px;}
.max-width-960px {max-width: 960px;}
.max-width-960px .btnSubmit {max-width: 240px;}
.memo {
	color: hsl(0, 0%, 62%);
	font-size: 85%;
}
.red {
	color: hsl(345.0, 100%, 62%);
}
#sidemenu {
	background: hsl(199, 38%, 91%);
	min-height: 640px;
	width: 12.5%;
}
#sidemenu a {
	border-color: hsl(0, 0%, 85%) hsl(199, 100%, 38%);
	border-style: solid;
	border-width: 0 0 1px 4px;
	color: hsl(0, 0%, 24%);
	display: block;
	font-size: 76%;
	margin-top: 1px;
	overflow: hidden;
	padding: 12px;
	transition: 0.3s;
	
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(hsl(199, 38%, 97%)));
	background: -moz-linear-gradient(top, #fff, hsl(199, 38%, 97%));
	background: -ms-linear-gradient(top, #fff, hsl(199, 38%, 97%));
}
#sidemenu a.admin {
	border-color: hsl(0, 0%, 76%) hsl(199, 100%, 38%);
	
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(0, 0%, 91%)), to(hsl(0, 0%, 85%)));
	background: -moz-linear-gradient(top, hsl(0, 0%, 91%), hsl(0, 0%, 85%));
	background: -ms-linear-gradient(top, hsl(0, 0%, 91%), hsl(0, 0%, 85%));
}
#sidemenu a:hover {
	padding-left: 22px;
	text-decoration: none;
}
#sidemenu a.selected {
	border-color: hsl(0, 0%, 62%) hsl(0, 0%, 24%);
	color: #fff;
	
	/*グラデーション*/
	background: -webkit-gradient(linear, left top, left bottom, from(hsl(199, 100%, 50%)), to(hsl(199, 100%, 44%)));
	background: -moz-linear-gradient(top, hsl(199, 100%, 50%), hsl(199, 100%, 44%));
	background: -ms-linear-gradient(top, hsl(199, 100%, 50%), hsl(199, 100%, 44%));
}
#sidemenu hr {
	border-color: #fff;
	border-style: dotted;
	border-width: 0 0 1px 0;
	margin: 6px 0;
	width: 94%;
}
.smaller {font-size: 85%;}
table.form {
	border-color: hsl(0, 0%, 91%) hsl(0, 0%, 85%) hsl(0, 0%, 85%) hsl(0, 0%, 91%);
	border-style: solid;
	border-width: 1px 0 0 1px;
}
table.form td {
	border-color: hsl(0, 0%, 85%);
	border-style: solid;
	border-width: 0 1px 1px 0;
	padding: 16px;
}
table.form th {
	background: hsl(0, 0%, 91%);
	border-color: hsl(0, 0%, 85%);
	border-style: solid;
	border-width: 0 1px 1px 0;
	padding: 16px;
	text-align: left;
	width: 25%;
}
table.view {
	border-color: hsl(0, 0%, 91%) hsl(0, 0%, 85%) hsl(0, 0%, 85%) hsl(0, 0%, 91%);
	border-style: solid;
	border-width: 1px 0 0 0;
}
table.view tr.even td {
	background-color: hsl(0, 0%, 97%);
}
table.view td {
	background-color: #fff;
	border-color: hsl(0, 0%, 85%);
	border-style: solid;
	border-width: 0 0 1px 0;
	padding: 6px 8px;
}
table.view th {
	background: hsl(0, 0%, 91%);
	border-color: hsl(0, 0%, 85%);
	border-style: solid;
	border-width: 0 0 1px 0;
	font-size: 85%;
	padding: 6px 8px;
}
tr.line-through td {
	text-decoration: line-through;
}
.width-100 {width: 100%;}
.width-100-60px {width: calc(100% - 60px);}
.width-120px {width: 120px;}
.width4 {width: 25.00% !important;}
.width-60px {width: 60px !important;}
.width-84px {width: 84px !important;}



@media only screen and (min-width:768px){/*PC*/
	.btnSubmit {
		height: 60px;
		margin-top: 16px;
		width: 25%;
	}
	.btnSubmit.reset {
		margin: 16px 0 0 2px;
	}
}



@media only screen and (max-width:767px){/*SP*/
	.btnSubmit {
		display: block;
		height: 48px;/* 42px + 6px */
		margin-top: 16px;
		width: 100%;
	}
	.btnSubmit.reset {
		margin-top: 2px;
	}
}