.pc-only {
display: block;
}
.sp-only {
display: none;
}
#content .content-area .wrap-table-rank-block2 .hidden-row {
display: none; }
@media screen and (max-width: 992px) {
.pc-only {
display: none;
}
.sp-only {
display: block;
}
}
#content .content-area .wrap-table-rank-block2 {
text-align: center;
}
#content .content-area .wrap-table-rank-block2 .table-attention {
text-align: left;
margin-bottom: 0.5em;
line-height: 1.4;
}
#content .content-area .wrap-table-rank-block2 .table-attention .small {
font-size: 0.8em;
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td:first-child {
background-color: #F7F4F4; }
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td:first-child {
background-color: #FFFFFF; }
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td {
background-color: #FFFFFF; }
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td {
background-color: #F7F4F4; }
#content .content-area .wrap-table-rank-block2 th {
font-weight: bold;
padding: 0 5px;
text-align: center;
height: 30px;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 th {
padding: 0 3px;
font-size: 11px;
height: 40px;
line-height: 140%;
}
#content .content-area .wrap-table-rank-block2 td {
padding: 2px 2px;
}
}
#content .content-area .wrap-table-rank-block2 th,
#content .content-area .wrap-table-rank-block2 td{
border: 0.5px solid #999999;
}
#content .content-area .wrap-table-rank-block2 td{
text-align: center;
}
#content .content-area .wrap-table-rank-block2 th.w02{
width: 17%;
position: relative;
}
#content .content-area .wrap-table-rank-block2 th.noleftb {
width: 20%;
padding-left: 15px;
}
#content .content-area .wrap-table-rank-block2 th.w02 .arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 22px;
border-color: transparent transparent transparent #f29c9f;
position: absolute;
left: -1px;
top: 0;
}
#content .content-area .wrap-table-rank-block2 #see-more-btn {
margin-bottom: 20px;
width: 100%;
border-radius: 5px;
background-color: #fff;
color: #02cbab;
border: 2px solid #02cbab;
}
#content .content-area .wrap-table-rank-block2 #close-btn {
width: 100%;
border-radius: 5px;
background-color: #fff;
color: #555;
border: 2px solid #555;  
margin-top: -10px;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 th.w02 .arrow {
border-width: 20px 0 20px 12px;
}
}
#content .content-area .wrap-table-rank-block2 th.red{
background-color: #F29C9F;
}
#content .content-area .wrap-table-rank-block2 th.blue{
background-color: #58B8D6;
}
#content .content-area .wrap-table-rank-block2 td.service {
position: relative;
height: 90px;
padding-right: 25px;
}
#content .content-area .wrap-table-rank-block2 td.service_bg_a {
}
#content .content-area .wrap-table-rank-block2 td.service_bg_b {
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-ss,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-s {
width: 31px;
height: 45px;
padding-top: 4px;
background-size: 100% auto;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-aa,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-a,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-bb,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-b,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-c,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-close {
width: 30px;
height: 20px;
color: #FFF;
line-height: 20px;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-aa {
background-color: #de2c8a;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-a {
background-color: #5AAD42;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-bb {
background-color: #ff5451;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-b {
background-color: #09ADD8;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-c {
background-color: #1A1F71;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-close {
background-color: #333;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-ss {
background-image: url(//buzztter.co.jp/urutike/wp-content/uploads/2023/10/tr2_gold_medal.png);
color: #F4071B;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-s {
background-image: url(//buzztter.co.jp/urutike/wp-content/uploads/2023/10/tr2_silver_medal.png);
color: #D0207D;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge {
position: absolute;
top: 0;
left: 0;
font-weight: bold;
font-size: 13px;
z-index: 20;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 td .rank4-badge{
padding-top: 3px;
font-size: 11px;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-ss,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-s {
width: 25px;
height: 35px;
}
#content .content-area .wrap-table-rank-block2 td .rank4-badge-aa,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-a,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-bb,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-b,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-c,
#content .content-area .wrap-table-rank-block2 td .rank4-badge-close {
width: 30px;
height: 16px;
color: #FFF;
line-height: 10px;
}
}
#content .content-area .wrap-table-rank-block2 td .service-logo {
width: 130px;
height: auto;
position: absolute;
top: 50%;
left: calc(50% - 10px);
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
z-index: 10;
transition: all 0.3s 0s ease;
box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
}
#content .content-area .wrap-table-rank-block2 td .service-logo:hover {
width: 140px;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 td .service-logo {
width: 90px;
left: calc(50% - 0px);
}
}
#content .content-area .wrap-table-rank-block2 td.noleftb,
#content .content-area .wrap-table-rank-block2 td.rate_1st {
border-left: 0;
}
#content .content-area .wrap-table-rank-block2 th.w01 {
}
#content .content-area .wrap-table-rank-block2 th.w01,
#content .content-area .wrap-table-rank-block2 td.service {
border-right: 0;
}
#content .content-area .wrap-table-rank-block2 td.rate_1st,
#content .content-area .wrap-table-rank-block2 td.rate_2nd {
font-size: 22px;
font-weight: bold;
}
#content .content-area .wrap-table-rank-block2 td.rate_1st .maker,
#content .content-area .wrap-table-rank-block2 td.rate_2nd .maker {
background:linear-gradient(transparent 60%, #FEF100 60%);
}
#content .content-area .wrap-table-rank-block2 td.speed,
#content .content-area .wrap-table-rank-block2 td.opening-hours {
font-size: 16px;
font-weight: bold;
line-height: 150%;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 td.rate_1st,
#content .content-area .wrap-table-rank-block2 td.rate_2nd {
font-size: 13px;
}
#content .content-area .wrap-table-rank-block2 td.speed,
#content .content-area .wrap-table-rank-block2 td.opening-hours {
font-size: 12px;
}
}
#content .content-area .wrap-table-rank-block2 td.rate_a,
#content .content-area .wrap-table-rank-block2 td.speed_a,
#content .content-area .wrap-table-rank-block2 td.oh_a {
background-color: #f8e5e6 !important;
} #content .content-area .wrap-table-rank-block2 td.unfilled {
background-color: transparent !important; }
#content .content-area .wrap-table-rank-block2 td.rate_b,
#content .content-area .wrap-table-rank-block2 td.speed_b,
#content .content-area .wrap-table-rank-block2 td.oh_b {
background-color: #E0F8FD !important;
}
#content .content-area .wrap-table-rank-block2 td.rate_1st {
position: relative;
}
#content .content-area .wrap-table-rank-block2 td.rate_1st .arrow {
width: 0;
height: 0;
border-style: solid;
border-width: 45px 0 45px 40px; border-color: transparent transparent transparent #ffffff;
position: absolute;
left: -25px;
top: 0;
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 td.rate_1st .arrow {
border-width: 45px 0 45px 20px;
left: -15px;
}
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.rate_1st .arrow {
border-color: transparent transparent transparent #F7F4F4;
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.rate_1st .arrow {
border-color: transparent transparent transparent #ffffff;
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 25px), #F7F4F4 calc(100% - 25px), #F7F4F4 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 25px), #FFF calc(100% - 25px), #FFF 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service_bg_a {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 25px), #F8E5E6 calc(100% - 25px), #F8E5E6 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service_bg_a {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 25px), #F8E5E6 calc(100% - 25px), #F8E5E6 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service_bg_b {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 25px), #E0F8FD calc(100% - 25px), #E0F8FD 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service_bg_b {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 25px), #E0F8FD calc(100% - 25px), #E0F8FD 100%);
}
@media screen and (max-width: 992px) {
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 15px), #F7F4F4 calc(100% - 15px), #F7F4F4 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 15px), #FFF calc(100% - 15px), #FFF 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service_bg_a {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 15px), #F8E5E6 calc(100% - 15px), #F8E5E6 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service_bg_a {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 15px), #F8E5E6 calc(100% - 15px), #F8E5E6 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(even) td.service_bg_b {
background: linear-gradient(90deg, #FFF 0%, #FFF calc(100% - 15px), #E0F8FD calc(100% - 15px), #E0F8FD 100%);
}
#content .content-area .wrap-table-rank-block2 tr:nth-child(odd) td.service_bg_b {
background: linear-gradient(90deg, #F7F4F4 0%, #F7F4F4 calc(100% - 15px), #E0F8FD calc(100% - 15px), #E0F8FD 100%);
}
}