@charset "utf-8";
* {
	margin: 0;
}

#header + * {
	clear: both;
}

#header a img {
	vertical-align: middle;
}

#header .member-id-area {
	margin-top: 8px;
	text-align: right;
}

#header #member-id {
	margin: 21.5px 0;
}

#header #member-id:hover img.off {
	display: inline;
}

#header #member-id:hover img.on {
	display: none;
}

#header #member-id img.off {
	display: none;
}

#header #member-id img.on {
	display: inline;
}


#header a {
	color: #ffffff;
}

#header a:hover {
	color: #cccccc;
}

#header {
	width: 100%;
	border-bottom: solid 1px #dddddd;
	background: #202123;
	margin: 0;
}

#header .inner {
	width: 1200px;
	max-width: 100%;
	margin: 0 auto;
	padding: 15px 0;
	position: relative;
}

#header .inner:after {
	content: "";
	clear: both;
	display: block;
}

#header #site-logo {
	width: 188px;
	display: block;
}

/* member-menu-area */
#member-menu-area a:hover {
	background: #f1f1f1;
}

#member-menu-area a {
	margin: 0;
	color: #555;
	padding: 10px 20px;
	display: block;
}

#member-menu-area a {
	border-radius: 5px;
}

#member-menu-area {
	right: 0;
	position: absolute;
	display:none;
	background: #ffffff;
	border-radius: 5px;
	line-height: 32px;
	text-align: left;
	border: 1px solid #888;
	z-index: 0;
	width: 200px;
}
#member-menu-area:before {
	content: "";
	position: absolute;
	top: -8px; left: 50%;
	margin-left: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0 9px 9px 9px;
	border-color: transparent transparent #ffffff transparent;
	z-index: 0;
}
#member-menu-area:after {
	content: "";
	position: absolute;
	top: -12px; left: 50%;
	margin-left: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 3px 9px 9px 9px;
	border-color: transparent transparent #888 transparent;
	z-index: -1;
}