@charset "shift_jis";

.rank-opt-box {margin: -4px 68px 6px;}
.rank-opt-box .cf span {padding: 3px 10px; background-color: #fff; border: 1px solid #666; border-radius: 12px; font-size: 11px; margin-right: 6px; color: #333; font-weight: normal;}
/* ** ranking-comparison ** */
.comparison-table {width:2323px; border-collapse:collapse; border-spacing:0; border:2px solid #00baff; font-size: 14px;}
.comparison-table th.rank {width:40px; max-width:40px;}
.comparison-table th.maker {width:150px; max-width:150px;}
.comparison-table th.official {width:100px; max-width:100px;}
.comparison-table-area {max-height:403px;}
.comparison-table-title {background-color:#00baff; color:#fff; text-align:left; border-bottom:2px solid #fff; margin:20px auto 0;}
.comparison-table-title span {display:block; text-align:center; padding:8px 10px; font-size:20px; font-weight:bold;}
.comparison-table-area {width:980px; overflow:hidden; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; margin:0 auto 2px; transition:max-height 1s ease;}
.comparison-table-area.table-open {max-height:2000px;}
.comparison-table th,
.comparison-table td {padding:8px 5px; width:100px; max-width:100px; height:60px; border-left:1px solid #d0f2ff; border-right:1px solid #d0f2ff; border-bottom:1px solid #d0f2ff; text-align:center; vertical-align:middle;}
.comparison-table th {background-color:#f7fdff;}
.comparison-table th:first-child {border-left:1px solid #00baff;}
.comparison-table tr:first-child th {border-top:2px solid #00baff; border-bottom:2px solid #00baff;}
.comparison-table td.ranking-point span {color:#e66; font-weight:bold; font-size:120%;}
.comparison-table th.official span {display:table; width:100%;}
.comparison-table th.official span a {display:table-cell; width:80px; height:40px; background-color:#3a8de9; vertical-align:middle; color:#fff; border-radius:4px; text-decoration:none; box-shadow: 2px 2px 0px 0px rgba(88, 88, 88, 0.2);}
.comparison-table th.official span a:hover {opacity:0.8;}
.comparison-table .cell-fixed {position:sticky; top:0; left:1px; border-left:2px solid #00baff;}
.comparison-table .cell-fixed::before {content:""; position:absolute; top:0; left:-2px; width:100%; height:100%; z-index:-1; border-left:2px solid #00baff;}
.comparison-table .cell-fixed2 {position:sticky; top:0; left:52px;}
.comparison-table .cell-fixed2::before {content:""; position:absolute; top:0; left:-1px; width:100%; height:100%; z-index:-1; border-left:1px solid #d0f2ff;}
.comparison-table .cell-fixed3 {position:sticky; top:0; left:213px;}
.comparison-table .cell-fixed3::before {content:""; position:absolute; top:0; left:-1px; width:100%; height:100%; z-index:-1; border-left:1px solid #d0f2ff; border-right:1px solid #00baff;}
.comparison-table th.rank img {height: 20px; width: 20px;}
.comparison-table th.rank img.crown {height: 30px; width: 30px;}
.comparison-table td.comparison-rank {color:#999; font-weight:bold; color:#e66; font-size:110%;}
.comparison-table td.comparison-rank01 {background-color:#fffdf0;}
.comparison-table td.comparison-rank02 {background-color:#f5f9ff;}
.comparison-table td.comparison-rank03 {background-color:#fff8f3;}
.comparison-table td.comparison-rank span {display:inline-block; background-position: 50% 0; background-repeat: no-repeat; background-size:12px auto; padding-top:11px;}
.comparison-table td.comparison-rank01 span {background-image:url(https://life-cdn.oricon.co.jp/img/common/icon-rank-gold.png);}
.comparison-table td.comparison-rank02 span {background-image:url(https://life-cdn.oricon.co.jp/img/common/icon-rank-silver.png);}
.comparison-table td.comparison-rank03 span {background-image:url(https://life-cdn.oricon.co.jp/img/common/icon-rank-bronze.png);}
.caution {display: block; margin:4px 0 20px; font-size: 12px; line-height: 16px;}
/* ** spec ** */
.spec-list .category-title {background-color:#fff; margin:15px 10px 0; padding:10px 0 0;}
.spec-list .category-title span {margin:0 10px; padding:6px 1rem; background-color:#00baff; color:#fff; border-radius:2px; display:block;}
.spec-list .info-special {display:flex; margin:0 10px 0;}
.spec-list .server-information {width:588px; display:flex;}
.spec-list .server-information .server-photo {width:360px; border:1px solid #ccc; display:flex; align-items:center; text-align:center;}
.spec-list .server-information .server-detail {width:216px; text-align:left; padding-left:10px; font-size:12px;}
.spec-list .server-information .server-detail p.server-name {border-bottom:1px solid #999; padding:0 0 4px; font-size:14px; margin-bottom:8px; font-weight:bold;}
.spec-list .server-information .server-detail p.server-description {line-height:160%;}
.spec-list .server-image {width:628px; height:auto;}
.spec-list .server-info-table {width:100%; padding:0; margin:15px auto 0;}
.spec-list .server-info-table table {width:100%;}
.spec-list .server-info-table th,
.spec-list .server-info-table td {padding:4px 6px; border:1px solid #00baff; vertical-align:middle; text-align:center; font-size:12px;}
.spec-list .server-info-table th {background-color:#0bf; color:#fff; width: 200px; border-top: 1px solid #fff; border-bottom: 1px solid #fff;}
.spec-list .server-info-table tr:first-child th {border-top:1px solid #00baff;}
.spec-list .server-info-table tr:last-child th {border-bottom:1px solid #00baff;}
.spec-list .server-info-table td {background-color:#fff;}
.spec-list .server-annotation {font-size:9px; text-align:left; margin-top:4px; margin-bottom:22px;}
.ranking-aside .spec-list .server-information {width: 550px;}
.ranking-aside .spec-list .server-image {width:590px; height:auto;}
.ranking-aside .spec-list .server-information .server-photo {width: 320px;}