@charset "UTF-8";

/* PC Site */
@media(min-width:800px){
	/* Login */
	form { margin: 20px 0px 120px 0px; padding: 10px; }
	form ul { margin: 0px auto; width: 50%; display: table; vertical-align: middle; background: #333; }
	form ul:first-child { padding: 30px 0px 10px 0px; border-radius: 8px 8px 0px 0px; box-shadow: 10px 13px 6px 0px #ccc; }
	form ul:last-of-type { padding: 10px 0px 30px 0px; border-radius: 0px 0px 8px 8px; box-shadow: 10px 10px 6px 0px #ccc; }
	form li { padding: 5px 20px; display: table-cell; }
	form li:first-child { width: 30%; color: #fec237; }
	form input[type="text"] { width: 80%; padding: 3px 10px; }
	form input[type="password"] { width: 80%; padding: 3px 10px; }
	
	.submit { margin: 0px; padding: 20px 0px 0px 0px; width: 100%; text-align: center; }
	.submit input[type="submit"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	.submit input[type="submit"]:hover { background: #fec237; border: solid 2px #333; }
	.e_mess { margin: 0px; padding: 20px 0px; width: 100%; color: #ff0066; text-align: center; }
	
	/* Client Page */
	#client_name { margin: 0px 0px 40px 0px; padding: 0px 0px 15px 0px; width: 100%; text-align: center; font-size: 1.66rem; border-bottom: dotted 3px #eee; }
	#client_name b { color: #666; font-size: 1.66rem; }
	
	.mTitle { margin: 0px 0px 20px 0px; padding: 8px 10px; color: #333; font-size: 1.33rem; background: #eee; border-left: solid 8px #fec237; }
	.list { margin: 0px 0px 40px 0px; padding: 0px; width: 100%; }
	.list li { padding: 8px; }
	.list li:not(:last-child) { border-bottom: dotted 1px #ccc; }
	.list span { padding: 0px 0px 0px 10px; }
	.list b { padding-left: 20px; font-weight: normal; }
	.list input[type="button"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	.list input[type="button"]:hover { background: #fec237; border: solid 2px #333; }
	
	#logout { margin: 50px 0px 100px 0px; padding: 15px 0px 0px 0px; width: 100%; text-align: center; border-top: dotted 3px #eee; }
	#logout input[type="button"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	#logout input[type="button"]:hover { background: #fec237; border: solid 2px #333; }
}

/* Mobile Site */
@media(max-width:799px){
	form { margin: 20px auto 120px auto; padding: 10px 0px; width: 100%; }
	form ul { margin: 0px auto; width: 90%; display: table; vertical-align: middle; background: #333; }
	form ul:first-child { padding: 30px 0px 10px 0px; border-radius: 8px 8px 0px 0px; box-shadow: 10px 13px 6px 0px #ccc; }
	form ul:last-of-type { padding: 10px 0px 30px 0px; border-radius: 0px 0px 8px 8px; box-shadow: 10px 10px 6px 0px #ccc; }
	form li:first-child { padding: 0px 0px 5px 15%; color: #fec237; }
	form li:last-child { padding: 0px 0px 5px 15%; }
	form input[type="text"] { padding: 3px 10px; width: 70%; }
	form input[type="password"] { padding: 3px 10px; width: 70%; }
	
	.submit { margin: 0px; padding: 20px 0px 0px 0px; width: 100%; text-align: center; }
	.submit input[type="submit"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	.submit input[type="submit"]:hover { background: #fec237; border: solid 2px #333; }
	.e_mess { margin: 0px; padding: 20px 0px; width: 100%; color: #ff0066; text-align: center; }
	
	/* Client Page */
	#client_name { margin: 0px 0px 40px 0px; padding: 0px 0px 15px 0px; width: 100%; text-align: center; font-size: 3vw; border-bottom: dotted 3px #eee; }
	#client_name b { color: #666; font-size: 3.6vw; }
	
	.mTitle { margin: 0px 0px 20px 0px; padding: 2px 10px; color: #333; font-size: 2.6vw; background: #eee; border-left: solid 8px #fec237; }
	.list { margin: 0px 0px 40px 0px; padding: 0px; width: 100%; }
	.list li { padding: 8px; }
	.list li:not(:last-child) { border-bottom: dotted 1px #ccc; }
	.list span { padding: 0px 0px 0px 10px; }
	.list b { padding: 10px 0px 20px 10px; font-weight: normal; display: block; }
	.list input[type="button"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	.list input[type="button"]:hover { background: #fec237; border: solid 2px #333; }
	.list input[type="button"]:last-child { display: block; }
	
	#logout { margin: 50px 0px 100px 0px; padding: 15px 0px 0px 0px; width: 100%; text-align: center; border-top: dotted 3px #eee; }
	#logout input[type="button"] { padding: 6px 20px; color: #333; background: #fff; border: solid 2px #ccc; border-radius: 8px; cursor: pointer; }
	#logout input[type="button"]:hover { background: #fec237; border: solid 2px #333; }
}