@charset "utf-8";
/**
**  Date - 2017. 09. 24.
**  Name - ハンビ斗ガラム CSS
**  CSS Reset - html5doctor.com Reset Stylesheet ( Author: Richard Clark - http://richclarkdesign.com, Twitter: @rich_clark )
**
**/

/*CSS Reset*/
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
@media(min-width:800px){html, body{min-width:1200px; min-height:800px;margin-top:0px;}}

/*Main Stylesheet*/
html, body{margin:0px; height:100%; word-break:break-all; background:#f2f4f7;font-family:'Nanum Gothic', sans-serif; overflow-y:hidden;}
#contentArea{}
.screen_reader{width:0px; height:0px; overflow:hidden; position:fixed; top:-999px; left:-999px; display:block;} /* スクリーンリーダーの使用者への配慮 */
a{color:inherit; text-decoration:none;}

/* aside */
#aside{
	width:340px;
	position:absolute;
	height:100%;
	background:#595258;
	color:#fff;
	min-height:800px;
}
#aside > .profile{
	margin-top:30px;
	padding:0px 30px;
	font-size:25px;
	text-align:center;
}
#aside > .profile > img{
	max-width:100%;
	border-radius:450px;
}
#aside > .profile .hayan{
	font-size:12px;
	letter-spacing:0.3px;
}
#aside > .menu{
	margin-top:30px;
}
#aside > .menu > .nav{
	margin:0px;
	padding:0px;
	list-style:none;
}
#aside > .menu > .nav > li{
	display:block;
}
#aside > .menu > .nav > li:first-child > a{
	border-top:1px solid #473c43;
}
#aside > .menu > .nav > li > a.active{
	background:#473c43;
}
#aside > .menu > .nav > li > a{
	background:#595258;
	color:#fff;
	text-decoration:none;
	display:block;
	text-align:center;
	padding:10px 0px;
	border-bottom:1px solid #473c43;
	font-size:16px;
}
/* // aside */

/* content */
#content{
	margin-left:370px;
	/* min-height:800px; */
	height:100vh;
	overflow-y:auto;
}
#content > .content{
	margin-top:30px;
	margin-right:35px;
}
#content > .content img{
	max-width:100%;
}
#content > .content > h1{
	font-size:40px;
	/* border-bottom:1px solid #ccc; */
	padding:5px 15px;
	margin-bottom:5px;
	background:#595258;
	color:#fff;
}
#content > .content .infoBox{
	font-size:20px;
	text-align:center;
	margin:15px 0px;
	line-height:25px;
}
@keyframes rainbow{
	0%{
		color:red;
	}
	14%{
		color:orange;
	}
	28%{
		color:yellow;
	}
	42%{
		color:green;
	}
	56%{
		color:blue;
	}
	70%{
		color:#000066;
	}
	84%{
		color:#990099;
	}
	98%{
		color:#f33d3d;
	}
}
#content > .content .infoBox a:hover{
	animation:rainbow 1.3s infinite;
	font-weight:bold;
}
#content > .content .infoBox > table{
	margin:0px auto;
	font-size:15px;
	line-height:17px;
	padding:0px;
	width:750px;
}
#content > .content .infoBox > table tr, #content > .content .infoBox > table td, #content > .content .infoBox > table th{
	vertical-align:middle;
}
#content > .content .infoBox > table th{
	font-weight:bold; 
	text-align:right;
	padding:5px 10px;
}
#content > .content .infoBox > table td{
	width:500px;
	text-align:left;
	padding:5px 20px;
}
#content > .content .infoBox > table th, #content > .content .infoBox > table td{
	border-bottom:1px dotted #ccc;
}
#footer{
	text-align:center;
	font-size:12px;
	letter-spacing:-0.5px;
	margin:15px 0;
}
/* //content */

/* blog */
#loginBox{
	margin:5px  0px;
	text-align:right;
	font-size:15px;
}
#bo_list table{
	border-collapse:collapse;
	padding:0px;
	margin:5px 0px;
	width:100%;
	font-family:'Nanum Gothic', sans-serif;
}
#bo_list table th{
	padding:8px 3px;
	font-size:14px;
	background:#fff;
	background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 100%, #f6f6f6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 100%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 100%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */
}
#bo_list table th:first-child{
	border-radius:7px 0px 0px 7px;
	border-right:1px solid #ddd;
}
#bo_list table th:last-child{
	border-radius:0px 7px 7px 0px;
	border-left:1px solid #ddd;
}
#bo_list table tr.notice{
	background:#bbb;
	color:#fff;
}
#bo_list table tr.notice td:first-child{
	border-radius:8px 0px 0px 8px;
}
#bo_list table tr.notice td:last-child{
	border-radius:0px 8px 8px 0px;
}
#bo_list table td{
	font-size:13px;
	padding:9px 10px;
	border-bottom:1px dotted #ddd;
}
#bo_list table td:first-child{
	text-align:center;
}
#bo_list table td:last-child{
	text-align:center;
}
.pg_wrap{
	text-align:center;
	margin:15px 0px;
	display:block;
	font-size:12px;
}
.sound_only{
	display:none;
}
.pg_page{
	border:1px solid transparent;
	padding:3px 5px;
}
.pg_current{
	border:1px solid transparent;
	padding:3px;
	padding:3px 5px;
	background:#666;
	color:#fff;
}
.buttons{
	text-align:right;
}
.buttons a{
	background:#595258;
	height:28px;
	line-height:28px;
	color:#fff;
	font-size:13px;
	display:inline-block;
	width:80px;
	text-align:center;
}
.word_info p{
	font-size:15px;
	margin-top:5px;
	margin-bottom:5px;
	line-height:1.14em;
}
/* //blog */


/* port */
.running_job{
	font-size:13px;
	line-height:16px;
	margin-left:12px;
	margin-top:8px;
}
.running_job .job_progress:before{
	content:' - ';
}
.running_job .job_progress{
	margin-left:18px;
	font-size:12px;
	margin-bottom:5px;
}
.han_input{
	display:inline-block;
	width:100%;
	box-sizing:border-box;
	height:35px;
	outline:none;
	border-radius:0;
	-webkit-appearance:none;
	border:1px solid #ccc;
	background:#fff;
	padding:0px 10px;
	margin:3px 0px;
	border-radius: 8px;
}
select.han_input{
	-webkit-appearance:menulist;
	width:100%;
}
input[type=submit].han_input{
	background:#595258;
	height:30px !important;
	color:#fff;
	cursor:pointer;
	font-size:13px;
}
textarea.han_input{
	padding:10px 10px;
	height:auto;
	min-height:200px;
}

/* //make_req */
#make_req{
	padding:2px 10px;
}

/* //port */
.port_category{display:inline-block; padding:5px 8px; border-radius:5px; background:#595258; color:#fff; font-size:0.95em;}

@media(max-width:800px){
	html, body{
		min-width:300px;
		overflow:visible;
	}
	body{
		min-width:100%;
		/* margin-top:-30px; */
	}
	#aside{
		width:100%; 
		position:inherit;
		height:auto;
		min-height:auto;
		margin-top:-30px;
	}
	#aside img{
		max-width:100%;
	}
	#content{
		margin-left:0px;
		height:auto;
		overflow-y:auto;
	}
	#content > .content{
		margin-right:0px;
	}
	#content > .content .infoBox > table{
		width:100%;
	}
	#content > .content .infoBox > table th{
		white-space:nowrap;
	}
}