@charset "utf-8";

/* main body */
#main_body {
float:left;
width:502px;
}



/* main image */
#main_body .main_image {
width:502px;
height:459px;
margin-bottom:28px;
}
#top_swf p {
padding-top:200px;
text-align:center;
}



/* ranking header */
#main_body .ranking .header {
overflow:hidden;
height:100%;
margin-bottom:2px;
padding:0 2px 9px 1px;
border-bottom:2px solid #DAA874;
}
#main_body .ranking h2,
#main_body .ranking .period h3,
#main_body .ranking .period ul,
#main_body .ranking .period li {
float:left;
}
#main_body .ranking .period {
float:right;
margin-top:2px;
line-height:1.3;
}
#main_body .ranking .period h3 {
padding-top:0.2em;
font-size:1.2em;
font-weight:normal;
}
#main_body .ranking .period li {
margin-right:3px;
}
#main_body .ranking .period ul a {
display:inline-block;
padding:2px 8px;
border:1px solid #DFB486;
background-color:#FEFEF1;
}
#main_body .ranking .period ul .selected,
#main_body .ranking .period ul a:hover {
border-color:#FD7A43;
background-color:#FD7A43;
color:#fff;
text-decoration:none;
}

/* ranking section */
#main_body .ranking .section li {
overflow:hidden;
height:100%;
padding:16px 6px 17px;
border-bottom:1px solid #EFE7D7;
}
#main_body .ranking .section .odd {
background-color:#FCFAF5;
}
#main_body .ranking .section .image {
float:left;
border:1px solid #DBDBDB;
}
#main_body .ranking .section h3,
#main_body .ranking .section .rate,
#main_body .ranking .section p {
margin-left:160px;
}
#main_body .ranking .section h3 {
margin-bottom:9px;
font-size:1.4em;
}
#main_body .ranking .section .rate li {
padding:0;
border-bottom:none;
}
#main_body .ranking .section .rate p {
margin-top:0;
margin-left:0;
font-size:1em;
line-height:1.6;
}
#main_body .ranking .section p {
margin-top:7px;
font-size:1.2em;
line-height:1.3;
}
#main_body .ranking .section .using {
font-size:1em;
line-height:1.51;
}



/* contents sub */
#main_aside {
float:right;
width:248px;
}



/* sub section */
#main_aside .section {
width:248px;
margin:0 auto 20px;
background:url(../img/index_bg_01.png) repeat-y;
}
#main_aside .section_inner {
padding-bottom:5px;
background:url(../img/index_bg_02.png) left bottom no-repeat;
}
#main_aside .section .header {
height:100%;
padding-top:5px;
background:url(../img/index_bg_03.png) no-repeat;
}



/* recommend section */
#main_aside .recommend .header {
overflow:hidden;
margin-bottom:8px;
padding:10px 12px 0;
}
#main_aside .recommend .header h2 {
float:left;
}
#main_aside .recommend .header p {
float:right;
margin-top:7px;
padding:2px 7px;
background-color:#FFF054;
color:#614334;
font-size:0.833em;
line-height:2;
text-align:center;
white-space:nowrap;
}
#main_aside .recommend ul {
overflow:hidden;
width:224px;
margin-right:-12px;
margin-left:12px;
padding-left:4px;
}
*:first-child+html #main_aside .recommend ul {
padding-bottom:10px;
}
#main_aside .recommend li {
float:left;
width:100px;
margin-right:12px;
margin-bottom:10px;
}
#main_aside .recommend ul .image {
display:block;
margin:0 auto 4px;
vertical-align:bottom;
}
#main_aside .recommend ul h3,
#main_aside .recommend ul p {
font-size:1.2em;
}
#main_aside .recommend ul h3 {
font-weight:normal;
line-height:1.3;
}

/* first product */
#main_aside .recommend ul .first {
float:none;
width:auto;
height:100%;
margin:0 4px 14px -4px;
padding-bottom:5px;
border-bottom:1px solid #F7E1BA;
}
#main_aside .recommend ul .first .image {
margin-bottom:9px;
}
#main_aside .recommend ul .first h3,
#main_aside .recommend ul .first p {
margin:0 7px;
}
#main_aside .recommend ul .first h3 {
margin-bottom:6px;
font-weight:bold;
}
#main_aside .recommend ul .first p {
margin-bottom:5px;
line-height:1.3;
}
#main_aside .recommend ul .first .using {
font-size:1em;
line-height:1.51;
}



/* calendar section */
#main_aside .calendar .header {
padding:10px 14px 6px;
}
#main_aside .calendar ul {
margin:0 14px;
}
#main_aside .calendar li {
overflow:hidden;
height:100%;
padding:14px 4px;
border-top:1px solid #F7E1BA;
}
#main_aside .calendar ul .image {
float:left;
}
#main_aside .calendar ul p {
margin-left:110px;
font-size:1.2em;
line-height:1.3;
}
#main_aside .calendar ul .more {
margin-top:5px;
color:#860000;
}



/* tips section */
#main_aside .tips .header {
padding:12px 14px 8px;
}
#main_aside .tips ul {
margin:0 15px;
padding:13px 0 5px;
border-top:1px solid #F7E1BA;
}
#main_aside .tips li {
margin-bottom:6px;
}
#main_aside .tips ul img {
vertical-align:bottom;
}