@charset "utf-8";
/* CSS Document */

/***************************
css reset
***************************/

html, body, div, span, strong, iframe, h1, h2, h3, h4, h5, h6, p, a, address, img, pre, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: bottom; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, p, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
a:hover { text-decoration:underline; }
body { font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif; color: #766a63; }

/******************************
general settings
*******************************/

#rankWrap {
width:733px;/*コンテンツ幅*/
/*height:1200px;コンテンツ高さ*/
border-bottom: 1px solid #cccccc;
overflow: hidden;
}

/*コンテンツ*/
#rankWrap .tool-contents {
/*border: 1px solid #cccccc;*/
overflow: hidden;
}

#rankWrap .tool-contents li a.link {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
z-index: 99;
opacity: 0;
}

/*マウスオーバーアクション（基本設定）*/
#rankWrap .tool-contents li {
display: inline-block;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
background-color: #fff;
overflow:hidden;
}
#rankWrap .tool-contents li::before,
#rankWrap .tool-contents li::after {
position: absolute;
z-index: -1;
display: block;
content: '';
}
#rankWrap .tool-contents li,
#rankWrap .tool-contents li::before,
#rankWrap .tool-contents li::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}

/*マウスオーバーアクション（オプション）*/

/* じわっと */
#rankWrap .tool-contents li:hover {
background-color: #f4f4f4;
}

/* タイトル */
#rankWrap .tool-contents p.rankDate {
padding: 5px 10px;
border-bottom: #CCCCCC solid 1px;
background: #eeeeee;
font-size: 13px;
font-weight: bold;
text-align: right;
}

#rankFrm li {
opacity: 1;
display: list-item;
}


/****************************************
rank settings
***************************************/

#rankWrap .rankCell {
padding: 15px 10px;
border-bottom: 1px solid #cccccc;
font-size: 12px;
margin: 0 5px;
}

#rankWrap .rankCell dl {
display: table;
width: 100%;
}

#rankWrap .rankCell dt {
width: 8%;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
text-align: center;
}

#rankWrap .rankCell dt span.rankNum {
font-size:14px;
background-color: #826F52;
color: #FFF;
font-weight: bold;
padding: 5px 7px 5px;
}

#rankWrap .rankCell dd {
display: table-cell;
vertical-align: middle;
}

.rankCell .rankImg {
box-sizing: border-box;
display: table;
width: 19%;
padding: 0 1%;
text-align: center;
border-right: 1px dotted #cccccc;
}
.rankCell .rankImg img {
width: 94%;
padding: 0 6% 0 0;
}

.rankCell .description {
box-sizing: border-box;
display: table;
width: 77%;
}

#rankWrap .rankCell .description .inline-text {
width: 94%;
box-sizing: border-box;
display: inline-block;
padding: 0 3%;
display: table-cell;
vertical-align: middle;
}

#rankWrap span.rankName {
visibility: hidden;
color: #3d3734;
font-weight: bold;
}