.clearfix, #ranking .section .item { *zoom: 1; }
.clearfix:after, #ranking .section .item:after { content: ""; display: table; clear: both; }

#ranking { margin: 30px auto; width: 960px; }
@media only screen and (max-width: 760px) { #ranking { width: auto; } }
#ranking h1 { font-size: 238%; font-weight: normal; }
@media only screen and (max-width: 760px) { #ranking h1 { font-size: 125%; margin-bottom: 15px; text-align: center; } }
#ranking .offer { font-size: 75%; margin-bottom: 50px; }
@media only screen and (max-width: 760px) { #ranking .offer { margin-bottom: 10px; padding: 0 10px; } }
#ranking .section.hide { display: none; }
#ranking .section .item { margin-bottom: 60px; }
#ranking .section .item h2 { margin-bottom: 25px; }
@media only screen and (max-width: 760px) { #ranking .section .item h2 { height: 60px; overflow: hidden; position: relative; }
  #ranking .section .item h2 img { height: 60px; left: 50%; margin-left: -412px; position: absolute; top: 0; } }
#ranking .section .item .content .img { float: left; margin-right: 40px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .img { float: none; margin-right: 0; margin-bottom: 20px; padding: 0 10px; }
  #ranking .section .item .content .img img { width: 100%; } }
#ranking .section .item .content .dtl { overflow: hidden; zoom: 1; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl { padding: 0 10px; } }
#ranking .section .item .content .dtl h3 { font-size: 150%; margin-bottom: 10px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl h3 { font-size: 100%; } }
#ranking .section .item .content .dtl .body { line-height: 1.8; margin-bottom: 10px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .body { font-size: 88%; } }
#ranking .section .item .content .dtl .trigger a { background: url(../img/ranking/icon_plus.gif) no-repeat left center; padding-left: 18px; text-decoration: none; }
#ranking .section .item .content .dtl .trigger a.on { background: url(../img/ranking/icon_minus.gif) no-repeat left center; }
#ranking .section .item .content .dtl .voice { display: none; padding-top: 20px; }
#ranking .section .item .content .dtl .voice h4 { font-size: 113%; margin-bottom: 15px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .voice h4 { font-size: 100%; } }
#ranking .section .item .content .dtl .voice ul li { background: url(../img/ranking/icon_balloon.gif) no-repeat left 4px; margin-bottom: 10px; padding-left: 24px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .voice ul li { font-size: 88%; } }
#ranking .section .item .content .dtl .point { background: #258a57 url(../img/ranking/bg_chalk.gif) no-repeat 311px bottom; border: 4px solid #ad7223; margin-top: 30px; padding: 20px 20px 40px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .point { background: #258a57 url(../img/ranking/bg_chalk.gif) no-repeat 90% bottom; padding: 15px 15px 30px; } }
#ranking .section .item .content .dtl .point h4 { color: #fff; font-size: 125%; margin-bottom: 15px; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .point h4 { font-size: 100%; } }
#ranking .section .item .content .dtl .point p { margin: 0; padding: 0; color: #fff; }
@media only screen and (max-width: 760px) { #ranking .section .item .content .dtl .point p { font-size: 88%; } }
#ranking .button { margin-bottom: 60px; text-align: center; }
@media only screen and (max-width: 760px) { #ranking .button { margin-top: 25px; margin-bottom: 50px; } }
#ranking .button a { background: url(../img/ranking/icon_plus02.gif) no-repeat 285px center; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 10px 5px #eee; color: #333; display: inline-block; line-height: 46px; text-align: center; text-decoration: none; width: 318px; }
@media only screen and (max-width: 760px) { #ranking .button a { background: url(../img/ranking/icon_plus02.gif) no-repeat 236px center; font-size: 88%; width: 260px; } }
#ranking .button a:hover { color: #999; }
#ranking .button a.on { background: url(../img/ranking/icon_minus02.gif) no-repeat 285px center; }
@media only screen and (max-width: 760px) { #ranking .button a.on { background: url(../img/ranking/icon_minus02.gif) no-repeat 236px center; } }