@charset "UTF-8";
/* ----------------------------------------------

	hc.kowa.co.jp CSS
	
	1. common Setting
	2. header
		2-1. navigation
		2-2. sub_link
		2-3. text_resize
	3. main_image
	4. contents
		4-1. main_contents
		4-2. advertise_area
		4-3. text_links
	5. footer
	
---------------------------------------------- */

/*
  1. common Setting -------------------------- */


* {
	font-weight: normal;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	zoom: 1;
	}

h1,h2,h3,h4,h5,h6,p,th,td,dt,dd,li,img{
	font-family:'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,sans-serif;
	border-style: none;
	font-style: normal;
	letter-spacing: 0.1em;
	border-style: none;
	color: #666666;
	}

span,em{
	letter-spacing: 0.1em;
	border-style: none;
	}

body{
	font-size: 75%;
	line-height: 180%;
	text-align: center;
	background: url(../img/common/body_bg.gif) repeat-x left top;
	}

html {
  filter: expression(document.execCommand("BackgroundImageCache", 
  false, true));
	color: #666666;
}

html>/**/body {  
    font-size: 12px;  
}


#container{
	position: relative;
	margin: 0px auto;
	text-align: left;
	}

#header-inner,
#main_image,
#contents,
#footer-inner{
	width: 900px;
	margin: 0px auto;
	}

a:link,
a:visited{
	color:#0962a0;
	text-decoration: underline;
}
a:active {color:#0962a0;}
a:hover {color:#ff791f; text-decoration: underline;}


span.kowa{
	font-size: 86.6%;
	}

a:link span.kowa,
a:visited span.kowa{
	color:#0962a0;
	text-decoration: underline;
	vertical-align: baseline;
}
a:active span.kowa{color:#0962a0;}
a:hover span.kowa{color:#ff791f; text-decoration: underline;}

/*
  2. header -------------------------- */

#header{
	background: url(../img/common/header_bg.gif) repeat-x left top;
	}

#header-inner{
	position: relative;
	height: 100px;
	}

#header h1{
	display: block;
	height: 40px;
	width: 85px;
	overflow: hidden;
	position: absolute;
	top: 16px;
	background: url(../img/common/kowa_logo.gif) no-repeat left center;
	}

#header h1 a{
	display: block;
	height: 40px;
	width: 85px;
	overflow: hidden;
	text-indent: -9999px;
	}

#header h2{
	display: block;
	background: url(../img/common/kowa_catch.gif) no-repeat left top;
	height: 40px;
	width: 264px;
	position: absolute;
	overflow: hidden;
	top: 16px;
	left: 85px;
	text-indent: -9999px;
	}

/*
  2-1. navigation ------------- */
#header #navigation{
	position: absolute;
	height: 23px;
	width: 577px;
	left: 184px;
	top: 59px;
	background-image:url(../img/common/navigation_bg.gif);
	background-repeat: no-repeat;
	}

#header #navigation ul{
	height: 23px;
	width: 577px;
	}

#header #navigation ul li{
	float: left;
	position: relative;
	}

#header #navigation ul li a{
	display: block;
	width: 115px;
	background-image:url(../img/common/navigation_bg.gif);
	background-repeat: no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	}

#header #navigation ul li.navi01 a{background-position: 0px 0px;}
#header #navigation ul li.navi01 a:hover{background-position: 0px -23px;}
#header #navigation ul li.navi02 a{background-position: -115px 0px;}
#header #navigation ul li.navi02 a:hover{background-position: -115px -23px;}
#header #navigation ul li.navi03 a{background-position: -230px 0px;}
#header #navigation ul li.navi03 a:hover{background-position: -230px -23px;}
#header #navigation ul li.navi04 a{background-position: -345px 0px;}
#header #navigation ul li.navi04 a:hover{background-position: -345px -23px;}
#header #navigation ul li.navi05 a{background-position: -460px 0px;}
#header #navigation ul li.navi05 a:hover{background-position: -460px -23px;}

/* roll-over setting -----------------------*/
.category_top #header #navigation ul li.navi01 a{background-position: 0px -23px;}
.category_otc #header #navigation ul li.navi02 a{background-position: -115px -23px;}
.category_healthcare #header #navigation ul li.navi03 a{background-position: -230px -23px;}
.category_cm #header #navigation ul li.navi04 a{background-position: -345px -23px;}
.category_contact #header #navigation ul li.navi05 a{background-position: -460px -23px;}


#header #navigation ul li ul{
	display:none;
	}


#header #navigation ul li:hover > ul{
	display:block;
	width:110px;
	border-top:1px solid #367D1C;
	position:absolute;
	top:100%;
	left:3px;
	z-index:3;
	}

#header #navigation ul li ul li{
	float: none;
	width:110px;
	height:23px;
}

#header #navigation ul li ul li a{
	font-size:12px;
	text-indent:32px;
	line-height:21px;
	width:107px;
	background:#FFFFFF url(../img/common/list_sankaku_dot.gif) no-repeat 10px 0.4em !important;
	background-repeat: no-repeat;
	color:#367D1C;
	border:1px solid #367D1C;
	border-top:none;
	padding:1px 0px 0px 1px;
	text-decoration: none;
	}

#header #navigation ul li ul li a:hover{
	color:#367D1C;
	background-color:#bcf8a1;
	background:#bcf8a1 url(../img/common/list_sankaku_dot.gif) no-repeat 10px 0.4em !important;
	}

#header #navigation ul li ul li:hover ul{
	top:0px;
	left:100%;
	z-index:3;
	}


/*
  2-2. sub_link ------------- */

#header #sub_link{
	position: absolute;
	top: 13px;
	right: 0px;
	}

#header #sub_link ul{
	text-align: right;
	}

#header #sub_link ul li{
	display: inline;
	font-size: 86.6%;
	margin-left: 10px;
	padding: 4px 0px 4px 17px;
	line-height: 100%;
	}

#header #sub_link ul li.sub01{background: url(../img/common/list_sankaku_dot.gif) no-repeat left 0.4em;}
#header #sub_link ul li.sub02{background: url(../img/common/betsuwaku.gif) no-repeat left 0.4em;}

#header #sub_link ul li a:link,
#header #sub_link ul li a:visited{
	color: #666666;
	text-decoration: none;
	}

#header #sub_link ul li a:hover{
	color: #0962a0;
	text-decoration: none;
	}


/*
  2-3. text_resize ------------- */

#header #text_resize{
	position: absolute;
	top: 59px;
	right: 0px;
	height: 22px;
	width: 139px;
	}

#header #text_resize ul{
	height: 22px;
	background: url(../img/common/text_resize_bg.gif) no-repeat right top;
	position: relative;
	}

#header #text_resize ul li{
	position: absolute;
	display: block;
	}

#header #text_resize ul li a{
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	}

#header #text_resize ul li.small{height: 17px; width: 17px; top: 5px; right: 44px;}
#header #text_resize ul li.small a{height: 17px; width: 17px;}
#header #text_resize ul li.midium{height: 20px; width: 20px; top: 2px; right: 23px;}
#header #text_resize ul li.midium a{height: 20px; width: 20px; top: 2px; right: 23px;}
#header #text_resize ul li.large{height: 22px; width: 22px; top: 0px; right: 0px;}
#header #text_resize ul li.large a{height: 22px; width: 22px; top: 0px; right: 0px;}


/* contents resize-text setting */
#main_inner.small-text{
	font-size: 0.9em;
	line-height: 1.4em;	
	}

#main_inner.medium-text{
	font-size: 1em;
	line-height: 1.8em;	
	}

#main_inner.large-text{
	font-size: 1.3em;
	line-height: 1.6em;	
	}

/*
  3. main_image -------------------------- */

#main_image,
#main_image #replace{
	z-index: 1;
	}

/*
  4. contents -------------------------- */

#contents{
	margin-top: 3px;
	overflow: hidden;
	background: url(../img/common/right_bg.gif) repeat-y left top;
}

#contents:after {
    content: "";
    display: block;
    clear: both;
    height: 1px;
    overflow: hidden;
}

/*\*/
* html #contents {
    height: 1em;
    overflow: visible;
}
/**/

/*
  4-1. main_contents ------------- */

#contents #main_contents{
	float: left;
	width: 680px;
	background: url(../img/common/pankuzu_bg.gif) repeat-x left top;
	}

/* pankuzu ----------------*/
#pankuzu{
	height: 24px;
	background: url(../img/common/navi_bar.gif) no-repeat left 3px;
	padding: 3px 0px 0px 20px;
	}

#pankuzu p{
	font-size: 86.6%;
	}

/* headline_link ----------------*/
#contents #main_contents .headline_link{
	position: relative;
	padding-top: 7px;
	height: 30px;
	background: #FFFFFF;
	}

#contents #main_contents .headline_link span{
	position: absolute;
	top: 7px;
	left: 160px;
	height: 30px;
	}

#contents #main_contents .headline_link ul{
	position: absolute;
	top: 13px;
	left: 444px;
	height: 24px;
	background: url(../img/common/headline_menu_otc.gif) no-repeat left top;
	}

#contents #main_contents .headline_link li{
	float: left;
	height: 20px;
	width: 76px;
	display: block;
	}

#contents #main_contents .headline_link li a{
	height: 20px;
	width: 76px;
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	overflow: hidden;
	}

.category_otc .headline_link li a{background-image: url(../img/common/headline_menu_otc.gif);}
.category_healthcare .headline_link li a{background-image: url(../img/common/headline_menu_healthcare.gif);}

#contents #main_contents .headline_link li.navi01 a{ background-position: 0px 0px;}
#contents #main_contents .headline_link li.navi01 a:hover{ background-position: 0px -24px;}
#contents #main_contents .headline_link li.navi02 a{ background-position: -76px 0px;}
#contents #main_contents .headline_link li.navi02 a:hover{ background-position: -76px -24px;}
#contents #main_contents .headline_link li.navi03 a{ background-position: -152px 0px;}
#contents #main_contents .headline_link li.navi03 a:hover{ background-position: -152px -24px;}

/* roll-over setting --------------------*/
#product_brand #contents #main_contents .headline_link li.navi01 a{ background-position: 0px -24px;}
#product_effect #contents #main_contents .headline_link li.navi02 a{ background-position: -76px -24px;}
#product_name #main_contents .headline_link li.navi03 a{ background-position: -152px -24px;}

/* table area --------------------*/
#product_headline #contents_detail .col01 a,
#product_headline #contents_detail dd.new {   
    display: table-cell;
    vertical-align: middle;
}   
* html #product_headline #contents_detail .col01 a,
* html #product_headline dd.new {/*for IE6 */
    display: inline;
    zoom: 1;
}
*:first-child+html #product_headline #contents_detail .col01 a,
*:first-child+html #product_headline dd.new {/*for IE7 */
    display: inline;
    zoom: 1;
}
#product_headline #contents_detail dd.new { padding-left: 3px; }

/* pagetop ----------------*/

#contents #main_contents p.pagetop{
	text-align: right;
	clear: both;
	}


/*
  4-2. advertise_area ------------- */

#contents #advertise_area{
	float: left;
	width: 220px;
	background: url(../img/common/pankuzu_bg.gif) repeat-x left top;
	padding-top: 3px;
	}

#contents #advertise_area h3{
	margin-bottom: 9px;
	}

#contents #advertise_area ul{
	text-align: center;
	}

#contents #advertise_area ul li,
#contents #advertise_area ul li a{
	overflow: hidden;
	margin-bottom: 3px;
	}

/* mobile --------------------*/
#contents #advertise_area ul li.mobile{
	background: url(../img/common/advertise_mobile_bg.gif) no-repeat center top;
	height: 104px;
	padding-top: 26px;
	position: relative;
	margin-bottom: 10px;
	}

#contents #advertise_area ul li.mobile span{
	position: absolute;
	height: 15px;
	width: 152px;
	bottom: 3px;
	left: 35px;
	display: block;
	overflow: hidden;
	}

#contents #advertise_area ul li.mobile span a{
	height: 15px;
	width: 152px;
	display: block;
	overflow: hidden;
	text-indent: -9999px;
	}


/* cm --------------------*/

#contents #advertise_area ul li.cm{
	background: url(../img/common/advertise_cm_bg.gif) no-repeat center top;
	height: 110px;
	padding-top: 20px;
	margin-bottom: 10px;
	}


/*
  4-3. text_links ------------- */
#contents #text_links{
	text-align: center;
	padding: 20px 220px 20px 0px;
	clear: both;
	}

#contents #text_links p{
	font-size: 86.6%;
	}

/*
  5. footer -------------------------- */

#footer{
	background: url(../img/common/footer_bg.gif) repeat-x left top;
	height: 40px;
	}

#footer p{
	color: #FFF;
	text-align: right;
	padding-top: 20px;
	font-size: 86.6%;
	}