@charset "utf-8";

/* ############################################################

	Styles for header
	Last Up Date: 2011.10.28
	Author: htanjo

############################################################ */

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

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

/* reset */
div#grpheader div, div#grpheader h1, div#grpheader h2, div#grpheader h3, div#grpheader p, div#grpheader ul, div#grpheader ol, div#grpheader dl, div#grpheader dt, div#grpheader dd {
	margin: 0;
	padding: 0;
	font-size: 100%;
}
div#grpheader ul,
div#grpheader ol {
	list-style: none outside;
}
div#grpheader a img {
	border: none;
}

/* layout */
div#grpheader {
/*	margin-bottom: 10px;*/
	color: #333333;
}
div#grpheader div#grpFunctionHeader {
	margin-bottom: 4px;
	padding: 4px 10px;
	background: #F7F7F7;
}
div#grpheader div#grpFunctionHeader div {
	float: left;
}
div#grpheader div#grpFunctionHeader div a {
	padding-left: 10px;
	background: url(../img/icon_red_right_arrow.gif) no-repeat 0 50%;
}
div#grpheader div#grpFunctionHeader ul {
	float: right;
}
div#grpheader div#grpFunctionHeader li {
	float: left;
	margin-right: 5px;
	padding-right: 5px;
	border-right: 1px solid #CCCCCC;
}
div#grpheader div#grpFunctionHeader li.ichiba {
	margin: 0;
	padding: 0;
	border: none;
	font-weight: bold;
}
div#grpheader div#grpFunctionHeader div a,
div#grpheader div#grpFunctionHeader li a {
	color: #666666;
}
div#grpheader div#grpFunctionHeader div a:hover,
div#grpheader div#grpFunctionHeader li a:hover {
	text-decoration: none;
}
div#grpheader div#grpServiceHeader {
    width: 950px;
    margin: 0 auto;
	padding: 5px 0 0;
	text-align: right;
}
div#grpheader div#grpServiceHeader div#grpLogo {
	float: left;
	height: 58px;
}
div#grpheader div#grpServiceHeader div#grpLogoS {
	float: left;
}
div#grpheader div#grpServiceHeader div#grpLogo div,
div#grpheader div#grpServiceHeader div#grpLogoS div {
	display: inline;
	margin-right: 5px;
	vertical-align: middle;
}
div#grpheader div#grpServiceHeader div#grpLogo div img,
div#grpheader div#grpServiceHeader div#grpLogoS div img {
	vertical-align: middle;
}
div#grpheader div#grpServiceHeader div#grpBnr {
	display: inline;
	float: right;
	width: 180px;
	height: 58px;
	text-align: right;
}
div#grpheader div#grpServiceHeader div#grpBnr img {
	vertical-align: bottom;
}
div#grpheader div#grpServiceHeader div#grpNavi {
	zoom: 1;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceGuideNavi {
	text-align: right;
	margin: 5px 0;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceGuideNavi li {
	display: inline;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceGuideNavi li a {
	padding-left: 15px;
	background: url(../img/common/icon_red_right_arrow.gif) no-repeat 5px 50%;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceGuideNavi li a:hover {
	text-decoration: none;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi {
	float: right;
	margin: 3px 0 9px;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li {
	float: left;
	padding-left: 5px;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li a {
	display: table-cell;
	height: 21px;
	vertical-align: middle;
	padding: 0 10px 0 20px;
	color: #333333;
	font-weight: bold;
	text-decoration: none;
}
* html div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li a {  /* for IE6 */
	display: inline-block;
	line-height: 21px;
	vertical-align: baseline;
}
*:first-child+html div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li a {  /* for IE7 */
	display: inline-block;
	line-height: 21px;
	vertical-align: baseline;
}

div#grpheader div#serviceNavi {
	margin-top: -3px;
}
div#mainCategory li {
	float: left;
	padding: 7px 2px 4px 2px;
}
div#mainCategory li.current {
	padding: 7px 4px 4px 4px;
	border-right: 1px solid #E7E7E7;
	border-left: 1px solid #E7E7E7;
}
div#mainCategory li a,
div#mainCategory li.current span {
	display: table-cell;
	height: 20px;
	vertical-align: middle;
	padding: 0 15px 0 25px;
	color: #333333;
	font-weight: bold;
	text-decoration: none;
}
* html div#mainCategory li a,
* html div#mainCategory li.current a,
* html div#mainCategory li.current span {  /* for IE6 */
	display: inline-block;
	line-height: 20px;
	vertical-align: baseline;
}
*:first-child+html div#mainCategory li a,
*:first-child+html div#mainCategory li.current a,
*:first-child+html div#mainCategory li.current span {  /* for IE7 */
	display: inline-block;
	line-height: 20px;
	vertical-align: baseline;
}

div#grpheader div#subCategory {
	padding: 5px;
	border-bottom: 1px solid #DDDDDD;
}
div#subCategory ul {
	float: left; /* IE6 */
}
div#subCategory li {
	float: left;
	margin-left: -1px; /* IE6 */
	padding: 0 9px;
	border-left: 1px solid #909090;
}
div#subCategory li:first-child {
	border-left: none;
}
div#subCategory li span {
	display: table-cell;
	height: 18px;
	vertical-align: middle;
	padding: 0 6px;
}
div#subCategory li span a {
	padding: 0;
}
div#subCategory li a {
	display: table-cell;
	height: 18px;
	vertical-align: middle;
	padding: 0 6px;
	color: #333333;
	text-decoration: none;
}
* html div#subCategory li a,
* html div#subCategory li span {  /* for IE6 */
	display: inline-block;
	line-height: 18px;
	vertical-align: baseline;
}
*:first-child+html div#subCategory li a,
*:first-child+html div#subCategory li span {  /* for IE7 */
	display: inline-block;
	line-height: 18px;
	vertical-align: baseline;
}

/* clearfix */

div#grpFunctionHeader,
div#grpServiceHeader,
ul#serviceGuideNavi,
ul#serviceUtilityNavi,
div#mainCategory,
div#subCategory {
	display: block;
	overflow: hidden;
	zoom: 1;
}

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

div#grpHeader a:link,
div#tabNaviHeader a:link,
div#grpHeader a:visited,
div#tabNaviHeader a:visited,
div#grpHeader a:active,
div#tabNaviHeader a:active { color: #0066BB;}
div#grpHeader a:hover,
div#tabNaviHeader a:hover { color: #0066BB; text-decoration: none;}

div#grpHeader {
	padding: 4px 0;
	background: #FFFFFF;
	border-bottom: 1px solid #C4BCB7;
}
div#grpHeader h1,
div#grpHeader div.logo {
	float: left;
}
div#grpHeader div.first {
	padding:3px 0 0 30px;
	height:17px;
	background: url(../img/common/icon_beginner.gif) no-repeat 10px 1px;
	float: left;
}
div#grpHeader ul {
	float: right;
	margin-right: -8px;
	padding-top: 2px;
}
div#grpHeader li {
	margin-left: 7px;
	padding-right: 7px;
	display: inline;
	border-right: 1px solid #AAA4A1;
}

/* ------------------------------------------
	Service color setting
------------------------------------------ */

div#grpheader {
	border-bottom: 2px solid #3399ee;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li {
	background: url(../img/common/bg_serviceUtilityNavi.gif) no-repeat 5px 0;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li a {
	background: url(../img/common/bg_serviceUtilityNaviRight.gif) no-repeat 100% 0;
}
div#grpheader div#grpServiceHeader div#grpNavi ul#serviceUtilityNavi li a:hover {
	color: #BF0000;
}
div#mainCategory {
	background: #E7E7E7 url(../img/bg_mainCategory.gif) repeat-x;
}
div#mainCategory li.current {
	background: url(../img/bg_mainCategoryCurrent.gif) repeat-x;
}
div#mainCategory li a,
div#mainCategory li.current span {
	background: url(../img/icon_mainCategory.gif) no-repeat 15px 50%;
}
div#mainCategory li.current a {
	background: #FFFFFF url(../img/icon_mainCategoryCurrent.gif) no-repeat 12px 50%;
}
div#mainCategory li a:hover {
	color: #FFFFFF;
	background: #3BA49B url(../img/icon_mainCategoryHover.gif) no-repeat 15px 50%;
}
div#mainCategory li.current a:hover {
	color: #FFFFFF;
	background: #3BA49B url(../img/icon_mainCategoryHover.gif) no-repeat 14px 50%;
}
div#subCategory li span {
	background: #CEE8E6;
}
div#subCategory li a:hover {
	background: #CEE8E6;
}

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

div#tabNaviHeader {
	margin-bottom: 6px;
	padding-top: 4px;
	background: url(../img/common/bg_tabNaviHeader.gif) repeat-x 0 100%;
}
div#tabNaviHeader div.inner {
	margin: 0 auto;
}
div#tabNaviHeader ul {
	margin-left: 2px;
}
div#tabNaviHeader li {
	float: left;
	margin: 1px 0 0 -1px;
	border-bottom: 1px solid #CDC5C0;
}
div#tabNaviHeader li a {
	padding-left: 15px;
	background: url(../img/common/bg_tabNaviList.gif) no-repeat 0 1px;
	font-weight: bold;
	cursor: pointer;
}
div#tabNaviHeader li a span {
	padding-right: 15px;
	background: url(../img/common/bg_tabNaviList_l.gif) no-repeat 100% 1px;
	line-height: 28px;
}
div#tabNaviHeader li a:hover {
	background: url(../img/common/bg_tabNaviList_hover.gif) no-repeat 0 1px;
}
div#tabNaviHeader li a:hover span {
	background: url(../img/common/bg_tabNaviList_hover_l.gif) no-repeat 100% 1px;
}
div#tabNaviHeader li.current {
	margin: 0 0 0 -1px;
	border: none;
}
div#tabNaviHeader li.current a,
div#tabNaviHeader li.current a:hover {
	padding-left: 15px;
	background: url(../img/common/bg_tabNaviList_a_l.gif) no-repeat;
	font-weight: bold;
}
div#tabNaviHeader li.current a span,
div#tabNaviHeader li.current a:hover span {
	padding-right: 15px;
	padding-left: 0;
	background: url(../img/common/bg_tabNaviList_a.gif) no-repeat 100% 0;
	line-height: 30px;
}

div#tabNaviHeader li a,
div#tabNaviHeader li span {
	display: table-cell;
}
* html div#tabNaviHeader li a,
* html div#tabNaviHeader li span {
	display: inline-block;
}
*:first-child+html div#tabNaviHeader li a,
*:first-child+html div#tabNaviHeader li span {
	display: inline-block;
}

div#tabNaviHeader div#search {
    float: left;
    vertical-align: middle;
    margin: 2px 0 0 5px;
    display:block;
}

div#tabNaviHeader div#search input {
    display: inline-block;
    vertical-align: middle;
}

* html div#tabNaviHeader div#search input {
    display: inline;
}

*:first-child+html div#tabNaviHeader div#search input {
    display: inline;
}

div#tabNaviHeader div#search span.uiPlaceHolder {
    position: absolute;    
    top: 5px;    
    left: 6px;    
    color: #aaa4a1;
}

div#tabNaviHeader div#search input#searchWord {
    width: 212px;                                                                                                                                       
    height: 16px;
    border: 1px solid #cdc5c0;
    padding: 3px 6px;
    background: url(../img/common/bg_searchWord.gif);
    border-top-left-radius: 5px; /* Safari, Google Chrome, Opera */
    border-bottom-left-radius: 5px; /* Safari, Google Chrome, Opera */
    -moz-border-radius-topleft: 5px;    /* Firefox */
    -moz-border-radius-bottomleft: 5px;    /* Firefox */
}
/*
div#tabNaviHeader div#search input#searchWord:hover,
div#tabNaviHeader div#search input#searchWord:focus {
    width: 303px;
    height: 16px;
    border: 1px solid #1C8DC3;
    padding: 3px 6px;
    background: url(../img/common/bg_searchWord.gif);
    border-top-left-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -moz-border-radius-topleft: 5px; 
    -moz-border-radius-bottomleft: 5px; 
}
*/

div#tabNaviHeader div#search input#searchBtn {
    width: 27px;
    height: 24px;
    margin-left: -1px;
    border: 1px solid #c0b6b0;
    background: url(../img/common/bg_searchBtn.gif) no-repeat 50% 50%;
    border-top-right-radius: 5px; /* Safari, Google Chrome, Opera */
    border-bottom-right-radius: 5px; /* Safari, Google Chrome, Opera */
    -moz-border-radius-topright: 5px;    /* Firefox */
    -moz-border-radius-bottomright: 5px;    /* Firefox */
    text-indent:-9999px;
    cursor: pointer;
}

div#tabNaviHeader div#word {
    float: left;
    vertical-align: middle;
    padding: 6px 10px 0 5px;
}
div#tabNaviHeader div#word span#searchword {
    margin: 0 5px 0 0;
}

div#tabNaviHeader div#noTab div#search {
    float: left;
    vertical-align: middle;
    margin: 2px 0 5px 318px;
    display:block;
}


div#tabNaviHeader div#noTab div#word {
    float: left;
    vertical-align: middle;
    padding: 5px 10px 3px 10px;
}