@charset "utf-8";
@import url("parts.css");

/* CSS Document */

html,body{margin:0;padding:0;}
body{font: 12px "ＭＳ ゴシック", "Osaka－等幅" arial,sans-serif;text-align:center;color:#000;/*background:url(../imgdir/common/bgs.gif) repeat-x top;*/ font-size:12px;}
p{margin:0 0 10px; line-height:160%; padding:5px;}
a{color: #10117B; text-decoration:none;}
a:visited{color: #7C7C7C;}
a:hover,a:active{color: #00A0C6;text-decoration:underline;}
img {border:0; vertical-align:bottom;line-height:0;}
ul { margin:0; padding:0;}
li { list-style:none; margin:0; padding:0;}
.left { float:left; display:inline;}
.right { float:right; display:inline;}
.clear{clear:both;}
h1,h2,h3,h4,h5,h6{margin:0; padding:0; }


.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/* Hides from IE-mac \*/
* html .clearfix { height:1%; }
.clearfix { display:block; }
/* End hide from IE-mac */


.go-top { margin:0; padding:1em 0; text-align:right; }



/**************************

1.レイアウトスタイル

**************************/

/*全体の枠*/  
div#container{background:#fff;text-align:left;border:1px solid #7D6F67;border-top:none; border:none;}
div#container{width:800px;margin:0 auto;padding:0;}

/*iframe_gallarey*/  
div#container_c{background:#fff;text-align:left;border:1px solid #7D6F67;border-top:none; border:none;}
div#container_c{width:605px;margin:0;padding:0;}

/**************************

2.ヘッダー

**************************/
/*パンくずリスト*/
div#pankuzu { width:500px; margin:0; height:20px; }
div#pankuzu ul{ margin:0; padding:0;line-height:120%;}
div#pankuzu li{ float:left; display:inline;}
#header { position:relative;}
#header h1 {
	color:#F0F0F0;
	padding:5px;
	font-size:12px; /*background:url(../imgdir/common/header_h1.gif) no-repeat top left;*/
	height:15px;
	text-indent:5px;
	background-color: #850D0E;
}
#header h1 strong, #header h1 em { font-weight:bold; font-style:normal; }
#header img { margin:4px 0 4px 10px;}
#header ul{ width:300px;position:absolute;right:200px;top:30px;}
#header ul{	margin-top:7px;position:absolute;width: 300px;	right:-10px;top:21px;}
#header li{padding-top:2px; padding-right:8px;float:left;margin:0 5px 0 5px;list-style:none; border-right:1px solid #000000;}
#header li.last{padding-top:2px; padding-right:8px;float:left;margin:0 5px 0 5px;list-style:none; border:none;}

/*#header li{float:left;border-right:1px solid #000000; padding:0 5px;}
#header li.last {float:left; padding:0 5px; border:none;}*/

/**************************

3.メインナビ

**************************/


div#mainnavi {width:800px;}
div#mainnavi ul {margin:0;padding:0;}
div#mainnavi li {position:relative;width:160px;height:36px;min-height:36px;float:left;}
div#mainnavi li a { display:block; }
div#mainnavi li.navi01 span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat 0px 0px; width:160px; height:36px;}
div#mainnavi li.navi02 span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -160px 0px; width:160px;height:36px; }

div#mainnavi li.navi03 span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -320px 0px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi04 span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -480px 0px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi05 span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -640px 0px; width:160px;height:36px;cursor:pointer; }


div#mainnavi li.navi01 a:hover span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat 0px -36px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi02 a:hover span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -160px -36px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi03 a:hover span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -320px -36px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi04 a:hover span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -480px -36px; width:160px;height:36px;cursor:pointer; }
div#mainnavi li.navi05 a:hover span {position:absolute;background:url(../imgdir/common/mainnavi.gif) no-repeat -640px -36px;width:160px; height:36px;cursor:pointer; }

div#mainnavi li a:hover, div#mainnavi li a:active { text-decoration:none;}


/**************************

3.5.ラッパー

**************************/
#wrapper_01 { width:611px; float:right; display:inline; margin-top:8px;}
#wrapper { width:605px; float:right; display:inline; margin-top:8px;}
#wrapper.wide-content { width:798px; /*border-right:1px solid #ccc; border-left:1px solid #ccc;*/ clear:both; margin-top:8px;}

/**************************

4.サービス(TOPページ)

**************************/

#service { width:415px; text-align:center; float:left; display:inline;}
#service li { margin:10px 0;}


/**************************

5.ピックアップ(TOPページ)

**************************/

#pickup { width:196px; text-align:center; float:left; display:inline;}
#pickup img { float:right; display:inline;}
#pickup li { margin:10px 0; float:right; display:inline;}
#pickup li a:hover img {opacity:0.70;filter:alpha(opacity=80); }



/**************************

6.ニュース(TOPページ)

**************************/

#news { clear:both; width:605px; float:left; display:inline;}
#news ul { text-align:left;}
#news li { margin:10px 0;}


/**************************

7.サイドメニュー(TOPページ)

**************************/

#sidemenu { width:171px; text-align:center; float:left; display:inline; margin-top:7px;}
#sidemenu li { margin:20px 0;}
#sidemenu li a:hover img {opacity:0.70;filter:alpha(opacity=80); }

#sidemenu img#side_top_img { margin:10px 0 5px 0; }
#sidemenu ul#shop_info_area { border:1px solid #850D0E; background:#ededed; text-align:center; }
#sidemenu ul#shop_info_area img { border:2px solid #fff; }
#sidemenu ul#shop_info_area li { margin:10px 0; }

#sidemenu p.bnr { line-height:110%; margin-top:0px;}


/**************************

8.フッター(TOPページ)

**************************/

#footer { clear:both; width:800px; height:45px;/* background:url(../imgdir/common/footer.gif) no-repeat */ color:#FFF;background:#850D0E; }
#footer ul { position:relative; width:200px; top:10px; left:10px; }
#footer li{float:left; display:inline;border-right:1px solid #FFF; padding:0 5px;}
#footer li.last {float:left; padding:0 5px; border:none;}
#footer li a {float:left; padding:0 5px; border:none; color:#FFF;}
#footer p { text-align:right; margin-right:10px;}


/**************************

9.タイトル系(2次階層)

**************************/
h2.main_ttl { margin: 0 0 20px 0;/*float:right; display:inline;*/}

h3.ttl { background:url(../imgdir/common/title_bar.gif) no-repeat left ; height:28px; padding:6px 0 6px 12px; font-size:14px; margin-top:40px;}

h4.ttl { background:url(../imgdir/common/title_3rd.gif) no-repeat left -25px ; height:28px; padding:0px 0 0px 12px; font-size:16px; margin-top:40px;}

p.ttl_bold { font-weight:bold; font-size:16px;}



/**************************

紫外線対策特集ページ

**************************/
#uv { color:#333; }
#uv a { color:#1B9BC5; text-decoration:none; }
#uv a:hover { text-decoration:underline; }
#uv a:visited { color:#1B9BC5;}

#uv h3 { margin:1em 0; }
#uv .unit { margin:0 0 25px 0; text-align:left; }
#uv .unit.image { text-align:center; }
#uv .unit.banner { margin-top:50px; }
#uv .unit.banner a:hover img { opacity:0.9; filter:alpha(opacity=90); }

#uv #lead.group { margin:0; padding:0; }
#uv #description.group { margin:50px 25px; padding:0; }




#uv #lead.group p,
#uv #lead.group dl{ margin-left:30px; }
#uv #lead.group dl { padding:0; }
#uv #lead.group dl dt{ margin:0 5px 0 0; padding:0; float:left; color:#1B9BC5; }
#uv #lead.group dl dd{ margin:0; padding:0; }
#uv #lead.group dl dt,
#uv #lead.group dl dd { margin-bottom:10px; }


#uv .unit h4{ margin:0.5em 0; padding:0; font-size:1.4em; font-weight:bold; color:#1B9BC5; clear:both; }
#uv #price-list.unit h4{ font-size:1.6em; color:#205CA7; }


#uv .unit.text { width:750px; }
#uv .unit.text div.top { margin:0; padding:4px 0; background:url(../imgdir/uv/bg_content_box_top.gif) no-repeat left top; /* border:1px solid #f00; */ }
#uv .unit.text div.body { margin:0; padding:0; background:url(../imgdir/uv/bg_content_box_body.gif) repeat-x left top; /* border:1px solid #0f0; */ }

#uv .unit.text div.bottom { margin:0; padding:0; background:url(../imgdir/uv/bg_content_box_bottom.gif) no-repeat left bottom; }
#uv .unit.text div.body p { padding:1em; }


#uv .unit.image ul { text-align:center; }
#uv .unit.image ul li{ margin:0 10px; display:inline; }


#uv #price-list.unit table { margin:0; padding:0; }
#uv #price-list.unit table caption { margin:0 0 1em 0; padding:0 0 0 10px; color:#F7BB3F; font-size:1.2em; text-align:left; }
#uv #price-list.unit table th,
#uv #price-list.unit table td{ margin:0; padding:5px; color:#333; border:none; border-bottom:1px solid #ddd; }

#uv #price-list.unit table th { background-color:transparent; font-weight:bold; padding-right:25px; }
#uv #price-list.unit table td { padding:5px 50px 5px 75px; }






#product { color:#333; }
#product a { color:#F68B38; text-decoration:none; }
#product a:hover { text-decoration:underline; }
#product a:visited { color:#F68B38;}

#product h3 { margin:1em 0; }
#product .unit { margin:0 0 15px 0; padding:0 0 15px 0; text-align:left; background:url(../imgdir/uv/dot2.gif) repeat-x left bottom; clear:both; }

#product #lead.group { margin:0 0 50px 0; padding:0; }
#product #description.group { margin:50px 25px; padding:0; }




#product #lead.group dl{ margin:0; padding:0; }
#product #lead.group dl dt{ margin:0 0 1em 0; padding:0; }
#product #lead.group dl dd{ margin:0 0 1em 40px; padding:0; }



#product .unit h4{ margin:0.5em 0; padding:0; font-size:1.4em; font-weight:bold; color:#F68B38; clear:both; }

#product .unit div.image img { padding:5px; background:url(../imgdir/uv/dot.gif) repeat left top; }


#product .unit div.exp { width:500px; }
#product .unit div.exp table { margin:0; padding:0; width:50%; }
#product .unit div.exp table caption { margin:0 0 1em 0; padding:0 0 0 10px; color:#F7BB3F; font-size:1.2em; text-align:left; }
#product .unit div.exp table th,
#product .unit div.exp table td{ margin:0; padding:5px; color:#333; border:none; border-bottom:1px solid #ddd; }

#product .unit div.exp table th { background-color:transparent; font-weight:bold; width:50px;  }
#product .unit div.exp table td { text-align:left; }

#product .unit div.exp dl { margin:1em 0; padding:0; }
#product .unit div.exp dl dt{ margin:0 0 0.25em 0; padding:0; font-weight:bold; color:#F68B38; }
#product .unit div.exp dl dd{ margin:0; padding:0; }