@charset "utf-8";

/*

DEFAULT

*/
body,div,h1,h2,h3,h4,ul,li,p{margin:0;padding:0;}
html { overflow-y:scroll; }

body{
background:url(../images/background_body.gif) left top repeat;
padding:0;
margin:0 auto;
font-size: 80%;
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; 
text-align:center;
line-height:1.6;
color:#333;
}

img{ border:0;}
.clear{ clear:both; }
.clearfix:after { content: ""; display: block; clear: both;}


/*

HEADER 

*/

#header{
background:url(../images/background_header.gif) left top repeat-x;
clear:both;
width:100%;
height:370px;
padding:0;
margin:0 auto;
}

#header div{ width:970px; margin:0 auto; position:relative; height:40px;}
#header div h1{
clear:both;
width:400px;
height:32px;
padding:8px 0 0px 10px;
margin:0 auto;
font-size:13px;
font-weight:normal;
text-align:right;
color:#fff;
position:absolute;
top:0px;
right:0;
}
#header div p{
clear:both;
width:400px;
height:32px;
padding:8px 0 0px 10px;
margin:0 auto;
font-size:13px;
font-weight:normal;
text-align:left;
color:#fff;
position:absolute;
top:0px;
left:0;
}
#header div p a:link { color:#fff; text-decoration:none; }
#header div p a:visited { color:#fff; text-decoration:none; }
#header div p a:active { color:#fff; text-decoration:none; }
#header div p a:hover { color:#ebebeb; text-decoration:underline; }






/*

wrap 

 */
#wrap{
background:url(../images/background_wrap.gif) left top repeat-y;
clear:both;
width:940px;
height:auto;
padding:0px 15px 10px 15px;
margin:0px auto 10px auto ;
box-shadow: 2px 0px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 2px 0px 2px rgba(0,0,0,0.1);
-webkit-box-shadow: 2px 0px 2px rgba(0,0,0,0.1);
border-radius: 0px 0px 30px 0px;
-moz-border-radius: 0px 0px 30px 0px;
-webkit-border-radius: 0px 0px 30px 0px;
border-bottom:1px solid #eee;
}


/*

mainbox 

*/
#wrap #mainbox{
background-color:#FFF;
float:left;
width:640px;
height:auto;
padding:0px 0px 15px 0px;
margin:0px 0 0 0;
border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-webkit-border-radius: 5px 5px 5px 5px;
}



#wrap #mainbox h2{
background-color:#D9D9D9;
clear:both;
width: 615px;
padding: 13px 10px 15px 10px;
margin:15px 0 0px 0;
font-size:22px;
font-weight: bold;
line-height:1.2;
text-align: left;
color: #333;
border-left:5px solid #82BF56;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}

#wrap #mainbox h3{
clear:both;
float:left;
width:620px;
height:auto;
padding:8px 10px 8px 10px;
margin:15px 0 0px 0;
font-size:18px;
text-align:left;
color:#000;
border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-top: 3px dotted #82BF56;
border-bottom: 3px dotted #82BF56;
}


#wrap #mainbox p{
clear:both;
float:left;
width:620px;
padding:20px 0 20px 10px;
margin:0px 0 0 0;
font-size:16px;
text-align:left;
letter-spacing:0.01em;
color:#333;
}



/*

NAVBAR

*/
#navbar{
background-color:#FFF;
float:right;
width:270px;
margin:15px 0 0 0;
display:block;
}



#navbar h3{
background:url(../images/background_cate_title.jpg) 0px bottom no-repeat;
padding:12px 10px 12px 10px;
margin:0px 0px 0px 0px;
font-size:18px;
font-weight:bold;
text-align:center;
text-shadow: 1px 1px 1px #444;
color:#fff;
display:block;
}

#navbar h3 a:link { color:#fff; text-decoration:underline; }
#navbar h3 a:visited { color:#fff; text-decoration:underline; }
#navbar h3 a:active { color:#fff; text-decoration:underline; }
#navbar h3 a:hover { color: #ffcc00; text-decoration:underline; }



#navbar ul{
width:270px;
padding:0px 0px 0px 0px;
margin:0 0 0px 0;
font-size:17px;
text-align:center;
}

#navbar ul li a{
background:url(../images/nav_icon.jpg) 10px 12px no-repeat;
width:230px;
padding:7px 10px 7px 30px;
margin:0px 0 0 0;
font-size:14px;
text-align:left;
color:#333;
border-bottom:1px dotted #ccc;
display:block;
}
#navbar ul li a:hover{
background:url(../images/nav_icon_on.jpg) 10px 12px no-repeat;
width:230px;
padding:7px 10px 7px 30px;
margin:0 0 0 0;
font-size:14px;
color:#FFCC00;
text-align:left;
border-bottom:1px solid #ebebeb;
display:block;
}

#navbar ul li:last-child a{ border-bottom:none;}

address{
width:950px;
padding:10px 10px 10px 10px;
margin:0 auto;
font-size:12px;
font-style:normal;
text-align:center;
color:#666;
}


a:link { color:#82BF56; text-decoration:underline; }
a:visited { color:#82BF56; text-decoration:underline; }
a:active { color:#82BF56; text-decoration:underline; }
a:hover { color: #ffcc00; text-decoration:underline; }

ul{list-style-type: none;}
li{display: inline;}


/* ---------CATEGORY------------ */

#wrap #mainbox ul{
clear:both;
float:left;
width:640px;
padding:0 0 20px 0px
}

#wrap #mainbox ul li a{
padding:15px 10px 15px 25px;
margin:0px 0 0 0;
text-align:left;
color:#444;
font-size:16px;
width:605px;
display:block;
border-bottom:1px solid #ebebeb;
background:url(../images/list_icon01.gif) #fff 3px center no-repeat;
}

#wrap #mainbox ul li a:hover{
padding:15px 10px 15px 25px;
margin:0px 0 0 0;
text-align:left;
color:#08A689;
font-size:16px;
width:605px;
display:block;
border-bottom:1px solid #ebebeb;
background:url(../images/list_icon01.gif) #fff 3px center no-repeat;
}


/* --------------------------------------
RANKING
-------------------------------------- */
.recommended{
clear:both;
float:left;
width:640px;
padding:0 0 30px 20px;
text-align:center;
}
.recommended .icon_box{ width:106px; top:0; left:0; z-index:200;}