@charset "utf-8";

/* footer position --------------------------------  */

/* scroll bar */
html{overflow-y:scroll;}

/* footer fixed bottom */
html{ height:100%;}
body{ height:100%;}

/* footer inside container */
/*
* html #container{height:100%;}
div#container{position:relative;min-height: 100%;}
body > #container {height: auto;}
div#main{padding-bottom:30px;}
#footer{position:absolute;bottom:0px;height:30px;}
*/

/* footer inside containerWrap */
* html #containerWrap{height:100%;}
div#containerWrap{position:relative;min-height: 100%;}
body > #containerWrap {height: auto;}
#container{padding-bottom:220px;}
#footer{position:absolute;bottom:0px;height: 60px;width: 100%;}
#footerInner { height: 60px;position: relative;}


/* frame layout  ----------------------------------  */

body { background: #EDF5F7;}

#containerWrap {
	width: 800px;
	margin: 0 auto;
}

#container {
	padding: 10px 30px 60px;
	background: #fff;
	position: relative;
}

#header {
	position: relative;
	margin-bottom: 46px;
}


#mainVisual {margin-bottom: 20px;}

#main {
}

#sidebar {
	width: 250px;
	float: right;
}

#footerInner {
	width: 800px;
	margin: 0 auto;
}

/* header  ------------------------------------------  */

#header h1 {
	display: inline-block;
	padding: 60px 42px 8px 0;
	font-size: 27px;
	font-weight: bold;
	color: #33ccff;
	color: #30C0F0;
	background: url(../img/13223_s.png) right 24px no-repeat;
	line-height: 1.2;
}

#header h1 img {
	display: block;
	margin: 0 0 5px;
}

#header .follow-me { position: absolute;top:0;}

#header p { line-height: 1.4;}


/* sidebar  -----------------------------------------  */



/* footer  ------------------------------------------  */


#footerInner {
	color: ;
}

#pagetop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999px;
}

#copyright {
	position: absolute;
	right: 0;
	bottom: 10px;
	width: 100%;
	text-align: center;
	font-size: 73%;
}


/* main  ---------------------------------------------  */

#main p { margin-bottom: 20px;}

#editForm,
#editForm select { font-size:13px}

#editForm { margin: 0 0 20px;}

#editForm label {
	display: inline-block;
	width: 27px;
	height: 22px;
	background:#EDF5F7;
	background: #EBE5C5;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 5px 0px 0px;
	text-align: center;
}

#editForm select { 
	min-height: 2.1em;
	padding: 8px 0 8px 4px;
	border: 1px solid #ababab;
	border-radius: 5px;
	background: #fff;
}

#editForm select:hover { cursor:pointer;}

#main p span.red,
#editForm select.red,
#editForm option.red { color:#ff0000;}

#editForm select.orange,
#editForm option.orange { color: #E65800;}

#editForm select.black,
#editForm option.black { color:#222;}

#main p span.cyan,
#editForm select.cyan,
#editForm option.cyan { color: #39C;}


#editForm select:active,
#editForm select:focus {
	border-color: #28A3CC;
	border-width: 1px;
	outline: none;
}

#editForm option { padding:0;}

#editForm div {
	display: inline-block;
	padding: 0 11px 8px 0;
}

#chartWrap {
	position: relative;
	width: 800px;
	height: 200px;
}

#commentForm {
}

#commentForm textarea{
	width: 92%;
	font-size: 16px;
	margin-bottom: 30px;
	border: 1px solid #ababab;
	padding: 10px;
	border-radius: 8px;
}

#commentForm textarea:active,
#commentForm textarea:focus {
	border-color: #28A3CC;
	border-width: 2px;
	outline: none;
}



#guide {
	padding-right: 150px;
	background: url(../img/11253_s.png) right top no-repeat;
}

#guide h2 {
	color: #33ccff;
	color: #30C0F0;
	font-size: 106%;
	font-weight: bold;
	margin: 24px 0 6px;
}

#guide h2::before {
	content:"●";
	color: #33ccff;
	opacity: 0.8;
}