/*-------------------------------------------------------------------------

layout.css

#container
+#head
+#gNavi
+#main
   +#top
 @+#(contents)
      +#pickup
      +#mNavi
      +#popular
      +#ad
      +#cNavi
+#hoot

--------------------------------------------------------------------------*/
body{  background: url(../image/bg.jpg) repeat-x top left; 
}
p{  
color: #333333;
font-size: 12px;
line-height: 180%;
text-decoration: none; 
}
li{
color: #333333;
font-size: 12px;
line-height: 180%;
text-decoration: none; 
}
a{
color: #333333;
font-size: 12px;
line-height: 180%;
text-decoration: none; 
}
h1{ text-indent: -9999px}
h2{ text-indent: -9999px}
h3{ text-indent: -9999px}

/*--container-------------------------------------------------------------*/
#container{ width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0px}

/*--head------------------------------------------------------------------*/
#head{ width: 860px; height: 115px; background: url(../image/head.jpg) no-repeat top left; margin-left: auto; margin-right: auto;}
#head h1 a{ float: left; width: 430px; height: 60px;margin-top:40px;}
/*#index #head span { display: block; float: left; width: 500px; height: 70px}*/

#head ul#sNavi{ position:absolute;}
#head ul#sNavi{ float: left; width: auto; height: 30px; margin: 7px 0 0 0;}
#head ul#sNavi li{ float: left; padding: 0 10px 0 0; color: #FFFFFF}
#head ul#sNavi a{ color: #FFFFFF}
#head ul#sNavi a:hover{ color: #ff5b62; text-decoration: underline}

/*--gnavi------------------------------------------------------------------*/
#gNavi{ clear: both; width: 860px; height: 55px; margin-left: auto; margin-right: auto}
#gNavi li { float: left}
#gNavi li a{ width: 163px; height: 55px; text-indent: -9999px; display: block}
#gNavi li.g01 a{ background: url(../image/gNavi01.jpg) no-repeat}
#gNavi li.g02 a{ background: url(../image/gNavi02.jpg) no-repeat}
#gNavi li.g03 a{ background: url(../image/gNavi03.jpg) no-repeat}
#gNavi li.g04 a{ background: url(../image/gNavi04.jpg) no-repeat}
#gNavi li.g05 a{ background: url(../image/gNavi05.jpg) no-repeat}
#gNavi li.g01 a:hover{ background: url(../image/gNavi01_o.jpg) no-repeat}
#gNavi li.g02 a:hover{ background: url(../image/gNavi02_o.jpg) no-repeat}
#gNavi li.g03 a:hover{ background: url(../image/gNavi03_o.jpg) no-repeat}
#gNavi li.g04 a:hover{ background: url(../image/gNavi04_o.jpg) no-repeat}
#gNavi li.g05 a:hover{ background: url(../image/gNavi05_o.jpg) no-repeat}

/*--top-------------------------------------------------------------------*/
#top{ width: 860px; height: 241px; background: url(../image/top.jpg) no-repeat top left;margin-left: auto; margin-right: auto;}
#top p{ float: right; width: 245px; padding: 10px 30px 0 0; color: #FFFFFF; line-height: 200%}

/*--main------------------------------------------------------------------*/
#main{ width: 100%; height: auto; margin-left: auto; margin-right: auto}

/*--contents--------------------------------------------------------------*/
#main #contents{ width: 860px; height: auto; margin-left: auto; margin-right: auto;}

#main #contents #pickup{  width: 860px; height: 241px; margin: 15px 0 0 0; background: url(../image/pickup_fr.jpg) no-repeat top left}
#main #contents #pickup .pCol{  float: left; width: 185px; height: 195px; margin: 17px 0 0 24px}
*html #main #contents #pickup .pCol{ float: left; width: 185px; height: 195px; margin: 17px 0 0 16px}
#main #contents #pickup .pCol p{ font-size: 10px; color:#ff5b62; margin: 4px 0 0 0}
#main #contents #pickup .pCol p.name{ height: 45px; margin: 0 0 0 0}
#main #contents #pickup .pCol a{ font-size: 10px; color:#666666; margin: 3px 0 0 0; line-height: 160%}
#main #contents #pickup .pCol a:hover{ color:#ff5b62; text-decoration: underline}
#main #contents #pickup .pCol a img{ border: #999999 solid 1px}
#main #contents #pickup .pCol a:hover img{ border: #FF6666 solid 1px}

#main #contents ul#mNavi{ width: 860px; height: 137px; padding-left: 30px; margin-bottom: 10px;}
#main #contents ul#mNavi li { float: left; height: 137px; text-indent: -9999px}
#main #contents ul#mNavi li a{ height: 137px; text-indent: -9999px; display: block}
#main #contents ul#mNavi li.m01{ background: url(../image/mNavi01.jpg) no-repeat top left; width: 202px}
#main #contents ul#mNavi li.m02 a{ background: url(../image/mNavi02.jpg) no-repeat top left; width: 201px}
#main #contents ul#mNavi li.m03 a{ background: url(../image/mNavi03.jpg) no-repeat top left; width: 202px}
#main #contents ul#mNavi li.m04 a{ background: url(../image/mNavi04.jpg) no-repeat top left; width: 201px}
#main #contents ul#mNavi li.m05 a{ background: url(../image/mNavi05.jpg) no-repeat top left; width: 194px}
#main #contents ul#mNavi li.m02 a:hover{ background: url(../image/mNavi02_o.jpg) no-repeat top left; width: 201px}
#main #contents ul#mNavi li.m03 a:hover{ background: url(../image/mNavi03_o.jpg) no-repeat top left; width: 202px}
#main #contents ul#mNavi li.m04 a:hover{ background: url(../image/mNavi04_o.jpg) no-repeat top left; width: 201px}
#main #contents ul#mNavi li.m05 a:hover{ background: url(../image/mNavi05_o.jpg) no-repeat top left; width: 194px}

#main #contents ul#popular{ width: 860px;  height: 27px; margin: 0 0 15px 0; background: url(../image/popular_bg.jpg) no-repeat top;}
#main #contents ul#popular li{ float: left}
#main #contents ul#popular li.p01{ padding: 0 20px 0 270px}
#main #contents ul#popular li.p02{ padding: 0 30px 0 25px}
#main #contents ul#popular li.p03{ padding: 0 53px 0 25px}
#main #contents ul#popular li.p04{ padding: 0 30px 0 25px}
#main #contents ul#popular a{ color: #FFFFFF}
#main #contents ul#popular a:hover{ color: #FFCC00; text-decoration: underline}

#main #contents #cNavi{ float: left; width: 600px; height: auto; margin: 0 0 20px 0; padding: 7px 0 0 0; background: url(../image/cNavi_bg.jpg) no-repeat top;}
#main #contents #cNavi h4{ clear: both; float: left; width: 90px; color:#166526; font-size: 12px; font-weight: bold}
#main #contents #cNavi h4.t1{ padding: 53px 0 0 10px}
#main #contents #cNavi h4.t2{ padding: 21px 0 0 10px}
#main #contents #cNavi h4.t3{ padding: 21px 0 0 10px}
#main #contents #cNavi h4.t4{ padding: 21px 0 0 10px}
#main #contents #cNavi h4.t5{ padding: 21px 0 0 10px}
#main #contents #cNavi .bgA{ clear: both; height: 180px; padding: 3px 0 3px 0; background-color:#f4f4f4} 
#main #contents #cNavi .bgB{ clear: both; height: 54px; padding: 3px 0 3px 0; background-color:#FFFFFF}
#main #contents #cNavi .bgC{ clear: both; height: 74px; padding: 3px 0 3px 0; background-color:#f4f4f4}
#main #contents #cNavi .bgE{ clear: both; height: 74px; padding: 3px 0 3px 0; background-color:#FFFFFF}
#main #contents #cNavi .bgD{ clear: both; height: 42px; padding: 15px 0 0 20px; background-color:#FFFFFF}
#main #contents #cNavi .bgA{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #cNavi .bgB{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #cNavi .bgC{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #cNavi .bgE{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #cNavi .bgD{ border-left: #166526 solid 6px; border-right: #166526 solid 6px; border-bottom: #166526 solid 6px;padding-bottom:12px;}
#main #contents #cNavi ul{ float: left; width: 170px; padding: 7px 0 0 0}
#main #contents #cNavi a{ color: #333333; padding: 0 0 0 2px}
#main #contents #cNavi a:hover{ color: #ff5b62; text-decoration: underline}


#main #contents #dNavi{ float: left; width: 635px; height: auto; margin: 0 0 20px 0; padding: 10px 0 0 0; background: url(../image/cNavi_bg.jpg) no-repeat top}
#main #contents #dNavi h4{ clear: both; float: left; width: 90px; color:#166526; font-size: 12px; font-weight: bold}
#main #contents #dNavi h4.t1{ padding: 53px 0 0 10px}
#main #contents #dNavi h4.t2{ padding: 21px 0 0 10px}
#main #contents #dNavi h4.t3{ padding: 21px 0 0 10px}
#main #contents #dNavi h4.t4{ padding: 21px 0 0 10px}
#main #contents #dNavi h4.t5{ padding: 21px 0 0 10px}
#main #contents #dNavi .bgA{ clear: both; height: 120px; padding: 3px 0 3px 0; background-color:#f4f4f4} 
#main #contents #dNavi .bgB{ clear: both; height: 54px; padding: 3px 0 3px 0; background-color:#FFFFFF}
#main #contents #dNavi .bgC{ clear: both; height: 54px; padding: 3px 0 3px 0; background-color:#f4f4f4}
#main #contents #dNavi .bgD{ clear: both; height: 42px; padding: 15px 0 0 20px; background-color:#FFFFFF}
#main #contents #dNavi .bgA{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #dNavi .bgB{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #dNavi .bgC{ border-left: #166526 solid 6px; border-right: #166526 solid 6px}
#main #contents #dNavi .bgD{ border-left: #166526 solid 6px; border-right: #166526 solid 6px; border-bottom: #166526 solid 6px}
#main #contents #dNavi ul{ float: left; width: 170px; padding: 7px 0 0 0}
#main #contents #dNavi a{ color: #666666; padding: 0 0 0 2px}
#main #contents #dNavi a:hover{ color: #ff5b62; text-decoration: underline}

#main #contents #category{ float: left; width: 600px; height: auto; margin: 0 0 20px 0; padding: 7px 0 0 0; background: url(../image/category_bg.jpg) no-repeat top}
#main #contents #category h4{ clear: both; float: left; margin: 5px 0 5px 0; padding: 3px 0 0 10px; color: #FF6666; font-size: 100%; font-weight: bold}
#main #contents #category #frame{ clear: both; float: left; width: 588px; padding: 7px 0 3px 0; background-color:#FFFFFF} 
*html #main #contents #category #frame{ clear: both; float: left; width: 588px; padding: 7px 0 13px 0; background-color:#FFFFFF} 
#main #contents #category #frame{ border-left: #166526 solid 6px; border-right: #166526 solid 6px; border-bottom: #166526 solid 6px}
#main #contents #category #frame p{ clear: both; float: left; margin: 0 0 10px 0; padding: 0 0 0 10px; width: 570px; font-size: 12px; line-height : 140%;}
#main #contents #category a{ color: #666666; padding: 0 0 0 2px}
#main #contents #category a:hover{ color: #ff5b62; text-decoration: underline}




/*--ranking---------------------------------------------------------------*/
#main #contents #ranking{ float: right; width: 240px; height: auto; margin: 0 0 15px 0; padding: 0 0 0 0px}
*html #main #contents #ranking{ float: right; width: 240px; height: auto; margin: 0 0 0 0; padding: 0 0 0 0px}
#main #contents #ranking{ background: url(../image/ranking_ttl.jpg) no-repeat top left}
#main #contents #ranking h3{ height: auto; padding: 0 0 0 0}
#main #contents #ranking .rCol{ margin: 7px 0 0 0; padding: 2px 0 5px 0; background-color: #ffffff}
*html #main #contents #ranking .rCol{ margin: 7px 0 0 0; padding: 2px 0 18px 0; background-color: #ffffff}
*+html #main #contents #ranking .rCol{ margin: 7px 0 0 0; padding: 2px 0 18px 15px; background-color: #ffffff}
#main #contents #ranking .rCol{ border-left: #166526 solid 6px; border-right: #166526 solid 6px; border-bottom: #166526 solid 6px}
#main #contents #ranking .rCol h4{ width: 240px}
*html #main #contents #ranking .rCol h4{ width: 210px}
*+html #main #contents #ranking .rCol h4{ width: 210px}
#main #contents #ranking .rCol img{ float: left; margin: 0 10px 0 0}
#main #contents #ranking .rCol a img.sum{ border: #999999 solid 1px}
#main #contents #ranking .rCol a:hover img.sum{ border: #ff5b62 solid 1px}
#main #contents #ranking .rCol p{ color: #666666; font-size: 12px}
#main #contents #ranking .rCol p.plase{ margin: 0 0 0 87px; padding: 3px 0 0 28px}
#main #contents #ranking .rCol p.plase1{ margin: 0 0 0 87px; padding: 3px 0 0 28px; background: url(../image/1plase.jpg) no-repeat top left}
#main #contents #ranking .rCol p.plase2{ margin: 0 0 0 87px; padding: 3px 0 0 28px; background: url(../image/2plase.jpg) no-repeat top left}
#main #contents #ranking .rCol p.plase3{ margin: 0 0 0 87px; padding: 3px 0 0 28px; background: url(../image/3plase.jpg) no-repeat top left}
#main #contents #ranking .rCol p.rate{ color: #ff5b62; font-size: 10px}
#main #contents #ranking .rCol a{ color: #666666; font-size: 10px}
#main #contents #ranking .rCol a:hover{ color: #ff5b62; text-decoration: underline}
#main #contents #ranking .rCol .col{ clear: both; height: 90px; margin: 20px 0 20px 0}

/*--ad-------------------------------------------------------------------*/
#main #contents #ad{ clear: both; width: 240px}
#main #contents #ad img{ padding: 0 0 15px 0}
/*--hoot------------------------------------------------------------------*/
#hoot{ clear: both; width: 100%; height: 96px; background-color: #002004; text-align: center}
#hoot ul{ width: 800px; margin: 0 auto 0 auto; padding: 20px 0 0 90px}
#hoot li{ float: left; padding: 0 10px 0 0; color:#FFFFFF}
#hoot a{ color: #FFFFFF}
#hoot a:hover{ text-decoration: underline}
#hoot p{ clear: both; color: #FFFFFF}
#hoot p a{ color: #fff}
#hoot p a:hover{ color: #fff; text-decoration: underline}

/*tune*/

#frame .topcl{
	clear : both;
	background :#f4f4f4;
	padding : 2px 0 1px 0;
	margin : -3px 10px 14px 10px;
	text-align : center;
	border-bottom : 2px solid #ddd;
}