@charset "shift_jis";

/* =======================================

	Header CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Site Title
	
	2.Help
	
	3.Show Cargo
	
	4.Message
	
	5.Header Navi
	
	6.Keyword Search
		6-1.input
		6-2.select

========================================== */
#header {
	/* position: relative; */
	height: auto; /* for Modern Browser */
	position:relative;
}

/* IE6 Only */
* html #header {
}

#HeaderMoveBlocks {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index:1000;
}

/* IE6 Only */
* html #HeaderMoveBlocks {
	position: expression('absolute');
	top: expression(documentElement.scrollTop + 'px');
}

#headWrap {
	background-color:#FFF;
	min-height:82px;
	
}

* html #headWrap {
	height:82px;
}

/* 1.Site Title
========================================== */
#header span#siteTitle {
	position: absolute;
	top: 20px;
	left: 20px;
	/*width: 196px;*/
	width: 240px;
	z-index:2000;
}

#header span#siteTitle a {
	display: block;
	height: 52px;
	background: url(https://static.chara-ani.com/ca/i/base/header_logo_blue.gif?v=20180112) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

body.blue #header span#siteTitle a {background-image: url(https://static.chara-ani.com/ca/i/base/header_logo_blue.gif?v=20180112);}
body.pink #header span#siteTitle a {background-image: url(https://static.chara-ani.com/ca/i/base/header_logo_pink.gif?v=20180112);}

body.blue #header span#siteTitle a:hover {background-image: url(https://static.chara-ani.com/ca/i/base/header_logo_o.gif?v=20180112);}
body.pink #header span#siteTitle a:hover {background-image: url(https://static.chara-ani.com/ca/i/base/header_logo_o.gif?v=20180112);}

/* 2.Help
========================================== */
#header p.help {
	position: absolute;
	left: 585px;
	bottom: 5px;
	width: 37px;
}

*html #header p.help {
	bottom:60px;
}

#header p.help a {
	display: block;
	height: 37px;
	background: url(https://static.chara-ani.com/ca/i/base/headerhelp_btn_blue.gif) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

body.blue #header p.help a {background-image: url(https://static.chara-ani.com/ca/i/base/headerhelp_btn_blue.gif);}
body.pink #header p.help a {background-image: url(https://static.chara-ani.com/ca/i/base/headerhelp_btn_pink.gif);}

#header p.help a:hover {background-position: 0 -37px;}


/* 3.Show Cargo
========================================== */
#header p.showCargo {
	position: absolute;
	left: 630px;
	bottom: 5px;
	width: 60px;
}

*html #header p.showCargo {
	bottom:60px;
}

#header p.showCargo a {
	display: block;
	height: 60px;
	background: url(https://static.chara-ani.com/ca/i/base/headercargo_btn_blue.gif) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

body.blue #header p.showCargo a {background-image: url(https://static.chara-ani.com/ca/i/base/headercargo_btn_blue.gif);}
body.pink #header p.showCargo a {background-image: url(https://static.chara-ani.com/ca/i/base/headercargo_btn_pink.gif);}

#header p.showCargo a:hover {background-position: 0 -60px;}


/* 4.Message
========================================== */
#header div.userMessage {
	position:relative;
	margin: 0px 9px 6px;
	padding: 5px 0 5px;
	height: auto; /* for Modern Browser */
	min-height: 18px; /* for Modern Browser */
	font-size: 96.6%;
	line-height: 1.455;
	font-weight: bold;
}

/* IE6 Only */
* html #header div.userMessage {}

#header div.userMessage:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0px; visibility: hidden;
}

#header div.userMessage span.userName {
	margin: 0 0px 0 5px;
	color: #A1C527;
	line-height: 1.143;
	font-size: 113.28%;
}

#header p.message{
	line-height:20px;
}

#header p.message a {
	margin:0 0 0 8px;
}

#header p.message a.green {
	color:#A1C527;
}

#header p.message a.small {
	font-size:83%;
}

/*\ for Safari */
html*#header                 div.userMessage span.userName {top: -1px;} /* for Safari IE6 IE7 */
* html #header               div.userMessage span.userName {top: -2px;} /* Reset IE6 */
*:first-child + html #header div.userMessage span.userName {top: -2px;} /* Reset IE7 */
head~/* */body #header div.userMessage span.userName {top: -2px;} /* Reset IE8 */
/* Safari2 Only \*/
html:\66irst-child #header   div.userMessage span.userName {top: -2px;}/**/


/* 5.Header Navi
========================================== */
#header ul#headerNavi {
	position: relative;
	top: -1px;
	margin: 0 0 7px 18px;
	zoom: 1;
}
/*\ for Safari */
html*#header                 ul#headerNavi {        margin-left: 20px;} /* for Safari IE6 IE7 */
* html #header               ul#headerNavi {top: 0; margin-left: 20px;} /* Reset IE6 */
*:first-child + html #header ul#headerNavi {top: 0; margin-left: 19px;} /* Reset IE7 */

#header ul#headerNavi:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0px; visibility: hidden;
}

.narrow #header ul#headerNavi {padding-top: 38px;}
/* IE6 Only */
* html .narrow #header ul#headerNavi {padding-top: 37px;}
/* IE7 Only */
*:first-child + html .narrow #header ul#headerNavi {padding-top: 37px;}

/* for LogOff Page */
#header ul.entryNavi {padding-top: 26px;}

#header ul#headerNavi li {
	float: left;
	margin: 0 22px 0 0;
}

#header ul#headerNavi li.entry   {width:  53px;}
#header ul#headerNavi li.myPage  {width:  63px;}
#header ul#headerNavi li.guide   {width:  74px;}
#header ul#headerNavi li.service {width:  76px;}
#header ul#headerNavi li.rule    {width:  52px;}
#header ul#headerNavi li.privacy {width: 118px;}
#header ul#headerNavi li.logOut  {width:  63px;}
#header ul#headerNavi li.logIn   {width:  51px;}

#header ul#headerNavi li a {
	display: block;
	height: 12px;
	background: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
}

/* Default */
#header ul#headerNavi li.entry   a {background-image: url(https://static.chara-ani.com/ca/i/base/entry_btn_blue.gif);}
#header ul#headerNavi li.myPage  a {background-image: url(https://static.chara-ani.com/ca/i/base/mypage_btn_blue.gif);}
#header ul#headerNavi li.guide   a {background-image: url(https://static.chara-ani.com/ca/i/base/guide_btn_blue.gif);}
#header ul#headerNavi li.service a {background-image: url(https://static.chara-ani.com/ca/i/base/service_btn_blue.gif);}
#header ul#headerNavi li.rule    a {background-image: url(https://static.chara-ani.com/ca/i/base/rule_btn_blue.gif);}
#header ul#headerNavi li.privacy a {background-image: url(https://static.chara-ani.com/ca/i/base/privacy_btn_blue.gif);}
#header ul#headerNavi li.logOut  a {background-image: url(https://static.chara-ani.com/ca/i/base/logout_btn_blue.gif);}
#header ul#headerNavi li.logIn   a {background-image: url(https://static.chara-ani.com/ca/i/base/login_btn_blue.gif);}

/* Blue */
body.blue #header ul#headerNavi li.entry   a {background-image: url(https://static.chara-ani.com/ca/i/base/entry_btn_blue.gif);}
body.blue #header ul#headerNavi li.myPage  a {background-image: url(https://static.chara-ani.com/ca/i/base/mypage_btn_blue.gif);}
body.blue #header ul#headerNavi li.guide   a {background-image: url(https://static.chara-ani.com/ca/i/base/guide_btn_blue.gif);}
body.blue #header ul#headerNavi li.service a {background-image: url(https://static.chara-ani.com/ca/i/base/service_btn_blue.gif);}
body.blue #header ul#headerNavi li.rule    a {background-image: url(https://static.chara-ani.com/ca/i/base/rule_btn_blue.gif);}
body.blue #header ul#headerNavi li.privacy a {background-image: url(https://static.chara-ani.com/ca/i/base/privacy_btn_blue.gif);}
body.blue #header ul#headerNavi li.logOut  a {background-image: url(https://static.chara-ani.com/ca/i/base/logout_btn_blue.gif);}
body.blue #header ul#headerNavi li.logIn   a {background-image: url(https://static.chara-ani.com/ca/i/base/login_btn_blue.gif);}

/* Pink */
body.pink #header ul#headerNavi li.entry   a {background-image: url(https://static.chara-ani.com/ca/i/base/entry_btn_pink.gif);}
body.pink #header ul#headerNavi li.myPage  a {background-image: url(https://static.chara-ani.com/ca/i/base/mypage_btn_pink.gif);}
body.pink #header ul#headerNavi li.guide   a {background-image: url(https://static.chara-ani.com/ca/i/base/guide_btn_pink.gif);}
body.pink #header ul#headerNavi li.service a {background-image: url(https://static.chara-ani.com/ca/i/base/service_btn_pink.gif);}
body.pink #header ul#headerNavi li.rule    a {background-image: url(https://static.chara-ani.com/ca/i/base/rule_btn_pink.gif);}
body.pink #header ul#headerNavi li.privacy a {background-image: url(https://static.chara-ani.com/ca/i/base/privacy_btn_pink.gif);}
body.pink #header ul#headerNavi li.logOut  a {background-image: url(https://static.chara-ani.com/ca/i/base/logout_btn_pink.gif);}
body.pink #header ul#headerNavi li.logIn   a {background-image: url(https://static.chara-ani.com/ca/i/base/login_btn_pink.gif);}

#header ul#headerNavi li a:hover {background-position: 0 -12px;}


/* 6.Keyword Search
========================================== */
#header #keywordSearch {
	position: relative;
	margin: 3px 0 3px 18px;
	padding-bottom: 2px;
	padding-top: 2px;
	/*padding-bottom: 4px;*/
}
/*\ for Safari */
html*#header                 #keywordSearch {margin:  0   0 0 20px;} /* for Safari IE6 IE7 */
* html #header               #keywordSearch {margin: -1px 0 0 20px;} /* Reset IE6 */
*:first-child + html #header #keywordSearch {margin: -1px 0 0 19px;} /* Reset IE7 */

	/* 6-1.input
	---------------------------------------- */
	#header #keywordSearch input {
		position: relative;
		top: -1px;
		height: 1.2em;
		font-size: 123%;
		line-height: 1.2;
		vertical-align: middle;
	}
	/* IE6 Only */
	* html #header #keywordSearch input {top: 0;}
	/* IE7 Only */
	*:first-child + html #header #keywordSearch input {top: 0;}
	
	#header #keywordSearch label.textbox input {
		padding-top:3px;
		/*width: 340px;*/
		width: 320px;
		height: 1.3em;
		color: #878787;
		border:solid 2px #528ACE;
		
	}
	
	body.blue #header #keywordSearch label.textbox input { border-color:#528ACE; }
	body.pink #header #keywordSearch label.textbox input { border-color:#E96DB9; }
	
	#header #keywordSearch label.textbox input.input_color{
		color:#444444;
		font-weight:bold;
	}
	
	#header #keywordSearch label.submit input {
		width: 54px;
		height: 23px;
	}
	
	/* 6-2.select
	---------------------------------------- */
	#header #keywordSearch select {
		position: relative;
		top: -1px;
		margin: 0 5px 0 0;
		width: 150px;
		height: 1.6em;
		font-size: 133%;
		line-height: 1.6;
		vertical-align: middle;
	}
	/* IE6 Only */
	* html #header #keywordSearch select {
		top: 0;
	}
	/* IE7 Only */
	*:first-child + html #header #keywordSearch select {
		top: 0;
		height: 1.8em;
	}
	
/* 7 shadow
***************************************************/
	#HeaderMoveBlocks .shadow {
		height:10px;
		margin:0;
		padding:0;
		width:100%;
		position:relative;
		top:-4px;
		background:url(https://static.chara-ani.com/ca/i/common/header-shadow.png);
		
	}
	
	
	/* for IE7 */
	*:first-child + html body.logoff #HeaderMoveBlocks .shadow {
		top:0px;
	}
	
	*:first-child + html #HeaderMoveBlocks .shadow {
		top:0px;
	}
	
	/* for IE6 */
	*html #HeaderMoveBlocks .shadow {
		position:static;
	}
	

	
	/* for FireFox */
	#HeaderMoveBlocks .shadow { top:-4px; }
	#HeaderMoveBlocks .shadow, x:-moz-any-link { top:0px; }
	#HeaderMoveBlocks .shadow, x:-moz-read-only { top:0x; }
	#HeaderMoveBlocks .shadow, x:-moz-broken { top:0px; }
	#HeaderMoveBlocks .shadow { top:-4px; }
	
	body.logoff #HeaderMoveBlocks .shadow { top:-4px; }
	body.logoff #HeaderMoveBlocks .shadow, x:-moz-any-link { position:static; }
	body.logoff #HeaderMoveBlocks .shadow, x:-moz-read-only { position:static; }
	body.logoff #HeaderMoveBlocks .shadow, x:-moz-broken { position:static;}
	body.logoff #HeaderMoveBlocks .shadow { top:-4px; }