@charset "shift_jis";

@import "rmenu.css";

/***********************************************************
*
*	outline style
*
*	Index
*
*	1. wrapper style
*	2. header style
*		2-1. top
*		2-2. specialMenu
*		2-3. navi
*		2-4. search
*		2-5. pmc
*	3. main style
*		3-1. content
*		3-2. sidebar
*	4. footer style
*	5. Common style
*		5-1. clearfix
*		5-2. categoryHead
*		5-3. pageselect
*	6. adjust for IE
*	7. for print
*	8. for mobile
*
***********************************************************/


/*=========================================================
 1. wrapper style 
=========================================================*/

div#wrapper {
	min-width: 980px;
	width: 100%;
	position: relative;
}

/*=========================================================
 2. header style
=========================================================*/

div#header {
	background-image:url(/image/common/header/bg.jpg);
}
div#header a img {
	border: none;
}
div#header a:hover img.hoverFade ,
div#header a:active img.hoverFade {
	opacity:0.6;
}

div#header h1,
div#header h2,
div#header ul,
div#header li,
div#header p {
	margin: 0;
	padding: 0;
	list-style: none;
}


/*
 */
div#header div#headerContents {
	height:72px;
	width:960px;
	margin:0 auto;
	position:relative;
}
div#header div#headerContents  h1.logo {
	position: absolute;
	top: 22px;
	left: 0;
}

div#header ul.socialLinks li,
div#header ul.topLinks li {
	float: left;
}

div#header ul.topLinks {
	position: absolute;
	left: 374px;
	top: 29px;
}

div#header ul.socialLinks {
	position: absolute;
	left: 256px;
	top: 69px;
}

div#header ul.socialLinks li{
	padding: 0 0 0 10px;
}

/* 2-4. search
-----------------------*/
div#header div#headerContents div#search {
	position: absolute;
	top: 25px;
	left: 612px;
}

div#header div#headerContents div#search select,
div#header div#headerContents div#search input {
	float: left;
}

div#header div#headerContents div#search select {
	margin: 3px 10px 0 0;
	font-size: 13px;
}

div#header div#headerContents input#inputBox {
	background: url(/image/common/header/search/search_bg.png) no-repeat top left;
	display: block;
	width: 155px;
	border: none;
	height: 25px;
	padding: 0 0 0 26px;
	font-size: 13px;
}

div#header div#headerContents input#searchSubmit {
	position: absolute;
	top: 0px;
	left: 296px;
}

/* 2-1.Header (div#header) > ul#brandList
-----------------------------------*/
div#header ul#brandList {
	width:960px;
	background: #FFFFFF url(/image/common/header/bg.jpg) repeat-x;
	margin:0 auto;
}

ul#brandList li {
	float: left;
}

ul#brandList li a {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	height: 40px;
	background-image:url(/image/common/header/brand.png);
}
ul#brandList li a:hover {
	background-image:url(/image/common/header/brand_on.png);
}

ul#brandList li#brand01 a {background-position: 0 0; width: 61px;}
ul#brandList li#brand02 a {background-position: -61px 0; width: 61px;}
ul#brandList li#brand03 a {background-position: -122px 0; width: 54px;}
ul#brandList li#brand04 a {background-position: -176px 0; width: 61px;}
ul#brandList li#brand05 a {background-position: -237px 0; width: 61px;}
ul#brandList li#brand06 a {background-position: -298px 0; width: 81px;}
ul#brandList li#brand07 a {background-position: -379px 0; width: 54px;}
ul#brandList li#brand08 a {background-position: -433px 0; width: 71px;}
ul#brandList li#brand09 a {background-position: -504px 0; width: 61px;}
ul#brandList li#brand10 a {background-position: -565px 0; width: 65px;}
ul#brandList li#brand11 a {background-position: -630px 0; width: 42px;}
ul#brandList li#brand12 a {background-position: -672px 0; width: 66px;}
ul#brandList li#brand13 a {background-position: -738px 0; width: 53px;}
ul#brandList li#brand14 a {background-position: -791px 0; width: 72px;}

/* 2-3. gnavi
-----------------------*/

div#gnavi {
	width: 960px;
	height: 42px;
	position: relative;
	margin: 0 auto;
}

ul#navigationMain {
	margin: 0; padding: 0;
	float:left;
	width: 100%;	
	list-style: none;
	z-index: 1;
}

ul#navigationMain li {
	float: left;
	margin: 0; padding: 0;
	position: relative; 
}

ul#navigationMain li a {
	float: left;
	text-indent: -9999px;
	height: 42px;
	z-index: 1;
	background: url(/image/common/header/gnavi.jpg) no-repeat;
}

ul#navigationMain a.gnavi01 { width: 27px; background-position: 0 0; }
ul#navigationMain li:hover a.gnavi01 { background-position: 0 -42px; }
ul#navigationMain a.gnavi02 { width: 73px; background-position: -27px 0; }
ul#navigationMain li:hover a.gnavi02 { background-position: -27px -84px; }
ul#navigationMain a.gnavi03 { width: 93px; background-position: -100px 0; }
ul#navigationMain li:hover a.gnavi03 { background-position: -100px -84px; }
ul#navigationMain a.gnavi04 { width: 72px; background-position: -193px 0; }
ul#navigationMain li:hover a.gnavi04 { background-position: -193px -84px; }
ul#navigationMain a.gnavi05 { width: 49px; background-position: -265px 0; }
ul#navigationMain li:hover a.gnavi05 { background-position: -265px -84px; }
ul#navigationMain a.gnavi06 { width: 102px; background-position: -314px 0; }
ul#navigationMain li:hover a.gnavi06 { background-position: -314px -42px; }
ul#navigationMain a.gnavi07 { width: 77px; background-position: -416px 0; }
ul#navigationMain li:hover a.gnavi07 { background-position: -416px -42px; }
ul#navigationMain a.gnavi08 { width: 73px; background-position: -493px 0; }
ul#navigationMain li:hover a.gnavi08 { background-position: -493px -42px; }
ul#navigationMain a.gnavi09 { width: 47px; background-position: -566px 0; }
ul#navigationMain li:hover a.gnavi09 { background-position: -566px -84px; }
ul#navigationMain a.gnavi10 { width: 76px; background-position: -613px 0; }
ul#navigationMain li:hover a.gnavi10 { background-position: -613px -42px; }

ul#navigationMain li .sub {
	position: absolute; 
	top: 36px; left: 0;
	/top: 42px; left: 0;
	width: 220px;
	background: #FFF;
	margin-left: 3px;
	border: #026899 1px solid;
	border-top: none;
	padding: 10px 5px;
	float: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 3px;
	-khtml-border-radius-bottomright: 3px;
	-webkit-border-bottom-right-radius: 3px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 3px;
	-khtml-border-radius-bottomleft: 3px;
	-webkit-border-bottom-left-radius: 3px;
	display: none; 
	z-index: 100;
}
ul#navigationMain li:hover .sub {
	display:block;
}

ul#navigationMain li .sub ul {
	list-style: none;
	margin: 0; padding: 0;
}

ul#navigationMain .sub ul li {
	width: 110px;
	display: inline;
	float: left;
}

ul#navigationMain .sub ul li a {
	text-indent: 0; 
	height: auto; 
	padding: 5px 0 0 18px;
	text-decoration: none;
	color: #666;
	font-weight: bold;
	font-size: 10px;
	background:white;
	background: url(/image/common/header/list_square.png) no-repeat 5px 13px;
}

ul#navigationMain .sub ul li a:hover {
	/*background: #48accc;*/
	color: #48accc;
}

ul#navigationMain div#gnavi03sub { width:340px; }
ul#navigationMain div#gnavi03sub li { width:170px; }
ul#navigationMain div#gnavi04sub { width:360px; }
ul#navigationMain div#gnavi04sub li { width:180px; }
ul#navigationMain div#gnavi05sub { width:380px; }
ul#navigationMain div#gnavi05sub li { width:190px; }
ul#navigationMain div#gnavi09sub { width:260px; }
ul#navigationMain div#gnavi09sub li { width:130px; }


ul#navigationSecondary {
	position: absolute;
	left: 720px;
	top: 10px;
}

ul#navigationSecondary li {
	padding: 0 10px 0 0;
	float:left;
}

/* 2-5. pmc
-----------------------*/

div#header div#pmcMenu {
	clear: both;
	height: 40px;
	background: url("/image/common/header/pmc/bg.gif") repeat-x;
}

div#header div#pmcMenu h2,
div#header div#pmcMenu li {
	float: left;
	margin-right: 3px;
}

div#header div#pmcMenu li {
	padding-top: 4px;
}

div#header div#pmcMenu li#pmcLogout {
	padding: 8px 0 7px 20px;
	margin-left: 20px;
	background: url("/image/common/header/pmc/bg_line.gif") no-repeat;
}

/* 4.topicsList (div#topicsList)
-----------------------------------*/
div#topicsList {
	background: #F5F5F5 url(/image/common/header/topics.png) no-repeat top left;
	width:960px;
	margin: 0 auto;
	height:22px;
}

div#topicsList ul {
	margin: 0 0 0 120px;
	background-color: #F5F5F5;
	height: 22px;
	width:750px;
	float:left;
}

div#topicsList ul li {
	float: left;
	padding: 2px 10px 0 0;
	font-size: 12px;
}

div#topicsList ul li img {
	display:none;
}

div#topicsList a.sns {
	float:left;
	width:16px;
	height:16px;
	display:block;
	overflow:hidden;
	text-indent:-1000px;
	background-image:url(/image/common/header/icons.png);
	margin:3px;
}
div#topicsList a.mail { background-position:0 16px; }
div#topicsList a.fb { background-position:0 32px; }
div#topicsList a.tw { background-position:0 0px; }
div#topicsList a.rss { background-position:0 48px; }


/* 5.topBanner (div#topBanner)
-----------------------------------*/
div#topBanner {
	margin: 10px 0 20px;
	text-align: center;
}

div#topBanner span {
	display: block;
	text-align: center;
}



/*=========================================================
 3. main style 
=========================================================*/

div#main {
	clear: both;
	width:960px;
	margin:5px auto;
}

/* 3-1. content
-----------------------*/

div#contentWrap {
	float: left;
	width: 100%;
	margin-right: -300px;
}

div#contentWrap div#content {
	margin-right: 308px;
	padding: 1px 8px 0 0;
	overflow: auto;
	width:640px;
}

/* 3-2. sidebar
-----------------------*/

div#sidebar {
	float: right;
	width: 300px;
}

div#sidebar div.rmenu {
	margin-bottom:10px;
	font-size:94%;
}
div#sidebar div.rmenu h3 {
    border-top: 4px solid #666666;
    color: #111111;
    font-size: 100%;
    margin: 0 0 10px;
    padding: 4px 2px 0;
}
div#sidebar div.rmenu h3 a {

}



/*=========================================================
 4. footer style 
=========================================================*/
div#newsArticle {
	width:980px;
	margin: 40px auto 0;
	font-size:13px;
}
div#newsArticle h2 {
    background-color: #F4F4F4;
    border-top: 3px solid #999999;
    font-size: 107%;
    padding: 8px 10px;
}
div#newsArticle div.newArticleWrapper {
    margin: 0 0 20px;
}
div#newsArticle div.newArticleWrapper div.newArticleBox {
    float: left;
    margin: 0 10px 0 0;
    width: 470px;
}
div#newsArticle div.newArticleWrapper div.newArticleBox h3 {
    border-bottom: 2px solid #CCCCCC;
    font-size: 107%;
    padding: 6px 10px;
}
div#newsArticle div.newArticleWrapper div.newArticleBox dl {
	margin:0;
	padding:0;
}
div#newsArticle div.newArticleWrapper div.newArticleBox dl dd {
    border-bottom:1px dotted #cccccc;
    margin: 0 0 10px;
    padding: 0 0 10px 10px;
}

/* 4-1. magazine
-----------------------*/
div#footerMagazine {
	width:980px;
	margin: 40px auto 0;
	background-color: #def2fd;
	padding: 0 0 24px;
	font-size:13px;
}

div#footerMagazine h3{
	background-color: #d5e9f6;
	margin: 2px;
	padding: 4px 10px;
	font-size: 16px;
}

div#footerMagazine .magazineBox {
	float: left;
	width: 210px;
	padding: 15px;
}

div#footerMagazine .magazineBox span {
	float:left;
	display:block;
}

div#footerMagazine .magazineBox dl{
	_float: right;
	margin: 0 0 0 110px;
	_padding: 0;
}

div#footerMagazine .magazineWrapper {
	margin: 0 0 10px;
}


div#footerMagazine dl.magazineInfo {
	display: block;
	margin-left: 110px;
}
div#footerMagazine .dottedB {
    border-bottom: 1px dotted #CCCCCC;
}

/* 4-2. sitemap
-----------------------*/

div#sitemapWrapper {
	width: 100%;
	background-color: #707070;
	text-align: center;
	position: relative;
	padding: 10px 0;
	margin: 20px 0;
	clear:both;
	font-size:13px;
}

div#sitemapBlock {
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	width: 980px;
	border: 1px solid #999999;
}
div#sitemapBlock div.leftBox{
	width:700px;
	float:left;
}
div#sitemapBlock div.rightBox{
	width:270px;
	float:left;
}

div#sitemapBlock dl a{
	color: #FFFFFF;
}

div#sitemapBlock dl.sitemapBox {
	float: left;
	width: 146px;
	padding: 0 10px 0;
}

div#sitemapBlock dl.sitemapBox dt {
	font-size: 122%;
	font-weight: bold;
	border-bottom: 1px solid #DDDDDD;
	padding: 0 0 4px;
	margin: 0 0 4px;
}

div#sitemapBlock dl.sitemapBox dd {
	font-size: 84%;
	margin: 0 0 2px;
}

div#sitemapBlock div.sitemapBoxList {
	padding: 10px 0 10px;
	margin: 0 0 20px;
}

div#sitemapBlock ul.primaryFooterBanner,
div#sitemapBlock ul.secondryFooterBanner {
	margin: 10px;
}

div#sitemapBlock div.secondryFooterBanner {
	background: url(/image/common/footer/footer.png) no-repeat -20px -186px;
}

div#sitemapBlock div.secondryFooterBanner ul{
	padding: 0 0 0 98px;
}

div#sitemapBlock div.secondryFooterBanner ul li{
	float: left;
	padding: 0 0 0 8px;
}

/* 4-3. footer
-----------------------*/
div#footer {
	clear: both;
	text-align: center;
	font-size:12px;
}

div#footer ul {
	background: #787878;
	border-top: 1px solid #BCBCBC;
	border-bottom: 1px solid #BCBCBC;
	border-right: 1px solid #FFF;
	padding: 10px 0;
	margin: 0;
}

div#footer ul a {
	color: #FFF;
}

div#footer ul a:hover {
	color: #F9F9F9;
}

div#footer li {
	padding: 0 5px 0 7px;
	border-left: 1px solid #FFF;
	display: inline;
}

div#footer li:first-child {
	border: none;
}

div#footer address {
	margin: 10px 0;
}


/*=========================================================
 5. Common style
=========================================================*/

/* 5-1. clearfix
-----------------------*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	zoom: 1;
}


/* 5-2. categoryHead
-----------------------*/

div.categoryHead {
	margin: 5px 0;
	position: relative;
	height:75px;
}
div.caetgoryHead:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

div.categoryHead img {
	vertical-align: baseline;
}

div.categoryHead h2 {
	position: absolute;
	top:40px;
	margin: 0;
	width:100%;
}

div.categoryHead p.topicPath {
	position: absolute;
	margin: 0;
	background-color: #F9F9F9;
    margin-bottom: 8px;
    padding: 6px 0;
    text-indent:6px;
	width:100%;
	font-size:13px;
}

div.categoryHead p.ecTopicPath {
	margin: 10px 0;
}

/* 5-3. pageselect
-----------------------*/
p#pageselect,
p.pageselect {
    margin: 10px;
    text-align: center;
    font-size:13px;
    line-height:1.4em;
}
p#pageselect a.n,
p.pageselect a.n {
    background: url("/image/common/parts/pager/box.png") no-repeat scroll 0 0 transparent;
    margin: 0 2px;
    padding: 2px 6px;
}
p#pageselect a.currentpage,
p.pageselect a.currentpage,
p#pageselect a#currentpage,
p.pageselect a#currentpage {
	background: url("/image/common/parts/pager/box_on.png") no-repeat scroll 0 0 transparent;
	color: #0477B3;
	font-weight: bold;
}
p#pageselect a img,
p.pageselect a img {
	border:none;
}
p#pageselect a:hover img,
p#pageselect a:active img,
p.pageselect a:hover img,
p.pageselect a:active img {
	opacity: 0.6;
}


/*=========================================================
 6. adjust for IE
=========================================================*/

*html #wrapper {
	width: expression(document.body.clientWidth < 975? "970px" : "auto");
}

* html ul#gnavi li {
	behavior: expression(
		this.onmouseover=new Function("this.className='activehovergnavi'"),
		this.onmouseout=new Function("this.className=''"),
		this.style.behavior='none'
	);
}

/*=========================================================
 7. for print
=========================================================*/
@media print {
div#wrapper { min-width:10px;}
div#header { background-position:0 -40px; }
div#header ul#brandList { display:none; }
div#header div#headerContents ul { display:none; }
div#header div#search { display:none; }
div#header div#gnavi { display:none; }
div#header div#pmcMenu { display:none; }
div#topicsList { display:none; }
div#topBanner { display:none; }
div#main { width:100%;}
div#main div#contentWrap { margin:0px; }
div#main div#contentWrap div#content { margin:0px; width:100%;}
div#main div#sidebar { display:none; }
div#newsArticle { display:none; }
div#footerMagazine { display:none; }
div#sitemapWrapper { display:none; }
}

/*=========================================================
 8. for mobile
=========================================================*/
div#spnavi {
	font-size:35pt;
	margin:1em;
}
div#spnavi a {
	padding:1em;
	display:block;
	width:600px;
	margin:auto;
	background-color:#333333;
	color:white;
	font-size:30pt;
	text-align:center;
}