#considerRank .hotelbox .ss-hotel {
    overflow: visible;
}

#considerRank .hotelbox .ss-hotel .htlrank {
    position: absolute;
    left: 12px;
    top: 5px;
    background: url(../images/rank.png) no-repeat;
    width: 27px;
    height: 23px;
    font-size: 10px;
    color: #fff;
    text-align: center;
    line-height: 1;
    font-style: normal;
    font-weight: bold;
    box-sizing: border-box;
    padding: 10px 0 0 0px;
    z-index: 1
}

#considerRank .hotelbox .ss-hotel:nth-child(1) .htlrank {
    background: url(../images/rank1.png) no-repeat;
    color: #333;
}

#considerRank .hotelbox .ss-hotel:nth-child(2) .htlrank {
    background: url(../images/rank2.png) no-repeat;
    color: #333;
}

#considerRank .hotelbox .ss-hotel:nth-child(3) .htlrank {
    background: url(../images/rank3.png) no-repeat;
    color: #333;
}

#considerRank .hotelbox .ss-hotel:nth-child(1) .htlrank::after {
    display: block;
    content: "1";
}

#considerRank .hotelbox .ss-hotel:nth-child(2) .htlrank::after {
    display: block;
    content: "2";
}

#considerRank .hotelbox .ss-hotel:nth-child(3) .htlrank::after {
    display: block;
    content: "3";
}

#considerRank .hotelbox .ss-hotel:nth-child(4) .htlrank::after {
    display: block;
    content: "4";
}

#considerRank .hotelbox .ss-hotel:nth-child(5) .htlrank::after {
    display: block;
    content: "5";
}

#considerRank .hotelbox .ss-hotel:nth-child(6) .htlrank::after {
    display: block;
    content: "6";
}

#considerRank .hotelbox .ss-hotel:nth-child(7) .htlrank::after {
    display: block;
    content: "7";
}

#considerRank .hotelbox .ss-hotel:nth-child(8) .htlrank::after {
    display: block;
    content: "8";
}

#considerRank .hotelbox .ss-hotel:nth-child(9) .htlrank::after {
    display: block;
    content: "9";
}

#considerRank .hotelbox .ss-hotel:nth-child(10) .htlrank::after {
    display: block;
    content: "10";
}

#considerRank .hotelbox .ss-hotel:nth-child(11) .htlrank::after {
    display: block;
    content: "11";
}

#considerRank .hotelbox .ss-hotel:nth-child(12) .htlrank::after {
    display: block;
    content: "12";
}

#considerRank .hotelbox .ss-hotel:nth-child(13) .htlrank::after {
    display: block;
    content: "13";
}

#considerRank .hotelbox .ss-hotel:nth-child(14) .htlrank::after {
    display: block;
    content: "14";
}

#considerRank .hotelbox .ss-hotel:nth-child(15) .htlrank::after {
    display: block;
    content: "15";
}

#considerRank .hotelbox .ss-hotel:nth-child(16) .htlrank::after {
    display: block;
    content: "16";
}

#considerRank .hotelbox .ss-hotel:nth-child(17) .htlrank::after {
    display: block;
    content: "17";
}

#considerRank .hotelbox .ss-hotel:nth-child(18) .htlrank::after {
    display: block;
    content: "18";
}

#considerRank .hotelbox .ss-hotel:nth-child(19) .htlrank::after {
    display: block;
    content: "19";
}

#considerRank .hotelbox .ss-hotel:nth-child(20) .htlrank::after {
    display: block;
    content: "20";
}

#considerRank .hotelbox .swiper-container .swiper-wrapper .ss-hotel:nth-of-type(n+21) {
    display: none !important;
}

#considerRank .area-container #rank-spot {
    position: relative;
    border-radius: 6px;
    margin-top: 16px;
    border: 1px solid #ccc;
    display: flex;
    height: 36px
}

#considerRank .area-container #rank-spot::after {
    position: absolute;
    display: block;
    content: "";
    width: 7px;
    height: 7px;
    right: 16px;
    top: calc(50% - 6px);
    border-width: 0 1px 1px 0;
    border-style: solid;
    transform: rotate(45deg)
}

#considerRank .area-container #rank-spot.active {
    border: 1px solid #0dbd0d
}

#considerRank .area-container #rank-spot.active::before {
    position: absolute;
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    left: 10px;
    top: calc(50% - 7px);
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAE7mlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyNC0wOC0xNlQxNTo0ODo0OCswODowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjQtMDgtMTZUMTU6NTA6MDMrMDg6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjQtMDgtMTZUMTU6NTA6MDMrMDg6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNhYzdiMDFkLWY3NTItZmI0OS1hN2M0LWM1YzY5ZDE2MmJjYSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozYWM3YjAxZC1mNzUyLWZiNDktYTdjNC1jNWM2OWQxNjJiY2EiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozYWM3YjAxZC1mNzUyLWZiNDktYTdjNC1jNWM2OWQxNjJiY2EiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjNhYzdiMDFkLWY3NTItZmI0OS1hN2M0LWM1YzY5ZDE2MmJjYSIgc3RFdnQ6d2hlbj0iMjAyNC0wOC0xNlQxNTo0ODo0OCswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqM4XIkAAADKSURBVFiF7dfdDYIwFEDhg/GZOEJHcARxAydzI1mBUQgL4INtUpv+UL0tJrYJCdDkni99gm5dV/Zch13rDdAAvwA4ui/6R1+io4ATMC3X5W2jxgkoYNTX2d0sDTBxxesE7jUBdhxgAm61AL74AMw1AJvjJQBZcWlAdlwS8FE8BnAHFomHAGbgZQPiq3gIMFsD3IBoPAYY9MAQQiQeAqQQYvEYIIYQi6cAIYRYfAvAhxCLg+eDJIEY9bNIPAdgI8y9yOran1ED/D3gCXkSTO3aFO8IAAAAAElFTkSuQmCC) no-repeat center center;
    background-size: cover
}

#considerRank .area-container #rank-spot.active select {
    padding-left: 28px;
    text-align-last: left;
    color: #0dbd0d;
    font-weight: 700
}

#considerRank .area-container #rank-spot select {
    padding-left: 28px;
    font-size: 13px;
    border-radius: 6px;
    border: none;
    color: #767676;
    width: 100%;
    appearance: none
}

#considerRank .hotelbox .ss-hotel .clearfix .hotel-container {
    float: right !important;
    width: 72px;
    padding: 0;
}

#considerRank .hotelbox .ss-hotel .clearfix .hotel-container .premium {
    height: 20px;
    max-height: 16px !important;
    width: 72px;
    background: url(https://img.travel.rakuten.co.jp/share/premium/images/premium_normal.svg) center center no-repeat;
}

#considerRank .hotelbox .ss-hotel .clearfix .hotel-container .platinum {
    height: 20px;
    max-height: 16px !important;
    width: 72px;
    background: url(https://img.travel.rakuten.co.jp/share/premium/images/premium_ultra.svg) center center no-repeat;
}

#considerRank .hotelbox .hotel-title {
    position: relative;
    color: #333;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin: 40px 0 8px 0;
}

#considerRank .hotelbox .hotel-title a {
    font-size: 14px;
    color: #333;
    position: relative;
    padding-right: 20px;
}
#considerRank .hotelbox .hotel-title a::after {
    position: absolute;
    top: 50%;
    right: 10px;
    content: "";
    display: block;
    right: 0.6em;
    width: 0.6em;
    height: 0.6em;
    margin-top: -0.5em;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
  
    transform: rotate(45deg);
}
#considerRank .hotelbox .hotel-title a:hover{text-decoration: underline !important;}

#considerRank .swiper-wrapper {
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    /* #considerRank{margin:30px 8px;padding:16px 8px;background:#fff;border:1px solid #ced5db;box-sizing:border-box} */ #considerRank .title {
        text-align:center;
        font-size: 20px;
        padding-bottom: 24px
    }

    #considerRank .tab {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px;
        border-bottom: 4px solid #0f9aeb
    }

    #considerRank .tab li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(50% - 12px);
        margin: 0 6px;
        border: 1px solid #666;
        color: #fff;
        border-radius: 5px 5px 0 0;
        text-decoration: none;
        font-weight: 700;
        background: #666;
        font-size: 16px;
        height: 32px;
        margin-top: 11px;
        box-sizing: border-box;
        cursor: pointer
    }

    #considerRank .tab li.active {
        color: #0f9aeb;
        height: 42px;
        margin: 0;
        background: #fff;
        border: 1px solid #0f9aeb
    }

    #considerRank .tab-container {
        display: none
    }

    #considerRank .theme-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #considerRank .theme-list li {
        width: calc(100% / 2 - 8px);
        margin: 0 4px 8px;
        cursor: pointer;
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 6px;
        text-shadow: 1px 1px 2px #333
    }

    #considerRank .theme-list li span {
        display: block;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: #0f9aeb;
        font-weight: 700;
        margin-top: 8px
    }

    #considerRank .theme-list li>img {
        width: 100%
    }

    #considerRank .theme-list li.active,#considerRank .theme-list li:active,#considerRank .theme-list li:hover {
        border-radius: 4px;
        outline: 4px solid #0dbd0d;
        outline-offset: -4px
    }

    #considerRank .area-container {
        padding-top: 16px
    }

    #considerRank .area-container .area-title {
        font-weight: 700;
        text-align: center;
        font-size: 20px;
        padding-bottom: 12px
    }

    #considerRank .area-container .area-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px 22px;
        background-color: #f3f3f3
    }

    #considerRank .area-container .area-list li {
        border-radius: 3px;
        width: calc((100% - 24px)/ 4);
        background-color: #fff;
        color: #333;
        text-align: center;
        padding: 8px 0;
        cursor: pointer
    }

    #considerRank .area-container .area-list li.active {
        background-color: #0dbd0d;
        color: #fff
    }

    #considerRank .area-container .area-list-small {
        padding: 16px;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    #considerRank .area-container .area-list-small li {
        border: 1px solid #767676;
        border-radius: 3px;
        padding: 8px;
        box-sizing: border-box;
        background-color: #fff;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #767676;
        font-size: 13px
    }

    #considerRank .area-container .area-list-small li.active {
        background-size: 16px;
        background-repeat: no-repeat;
        padding-left: 24px;
        background-position: left 4px center;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADLSURBVHgB7ZTRDYMwDAVfmIBukBG6QkfoCJ2oI9BNWKEjsAFsQOMQPlI5QJDdn/okCyTAd0IIwDCMv6AbfZgrd6mBNiR3ro/DROgGrHLAh2nD+RM/C8jlxBvzfP++zUEDXn7D4zJBPaBCLh9QKZcNOCGXCzgpJ5riwtfUx6OinHA7C4e0bICCnODewJQGcfHyB/MacoL/BrqxTcvXX2f+JoTk5YCtiPiUjHw7oBSx4CXk+wF8BKTkxwL4CBH58YA8AlLyeiiCxjAMQT4blpKlSoPFfwAAAABJRU5ErkJggg==);
        color: #0dbd0d;
        border: 1px solid #0dbd0d
    }

    #considerRank .area-container #rank-spot {
        border-radius: 6px;
        margin: 0 16px;
        margin-top: 16px;
        border: 1px solid #ccc;
        display: flex;
        height: 36px
    }

    #considerRank .area-container #rank-spot select {
        font-size: 13px;
        border-radius: 6px;
        border: none;
        color: #767676;
        width: 100%;
        text-align: center;
        appearance: none
    }

    #considerRank .hotelbox {
        padding: 16px 8px
    }

    #considerRank .hotelbox .swiper-container {
        padding-top: 24px!important;
    }

    #considerRank .hotelbox .hotel-title {
        position: relative;
        margin-bottom: 40px;
        font-weight: 700;
        color: #333
    }

    #considerRank .hotelbox .ss-hotel {
        position: relative;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #c3c3c3;
        box-shadow: 1px 1px 3px #ddd;
        height: auto;
        color: #333
    }

    #considerRank .hotelbox .ss-hotel .icon {
        position: absolute;
        top: -32px;
        left: 0;
    }

    #considerRank .hotelbox .ss-hotel .icon img {
        width: auto;
    }

    #considerRank .hotelbox .ss-hotel .hotel-img {
        border-radius: 5px 5px 0 0;
        position: relative;
        width: calc(100% + 20px);
        margin: -10px -10px 7px !important;
    }

    #considerRank .hotelbox .ss-hotel .hotel-img .bg-img {
        border-radius: 5px 5px 0 0;
        display: block;
        height: 130px;
        background-size: cover;
        text-indent: -9999px
    }

    #considerRank .hotelbox .ss-hotel .hotelName {
        display: flex;
        align-items: center;
        padding: 4px;
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        bottom: 0;
        color: #fff;
        background: rgba(0,0,0,.6);
        margin-left: 0;
        margin-right: 0;
        font-size: 12px
    }

    #considerRank .hotelbox .ss-hotel .infobox {
        display: flex;
        padding: 8px;
        justify-content: space-between;
        align-items: center
    }

    #considerRank .hotelbox .ss-hotel .infobox .area {
        font-size: 11px
    }

    #considerRank .hotelbox .ss-hotel .infobox .premium {
        padding-right: 4px
    }

    #considerRank .hotelbox .ss-hotel .button {
        display: block;
        margin: 8px;
        border-radius: 4px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #666!important;
        font-size: 14px
    }

    #considerRank .hotelbox .ss-hotel .htlstar {
        display: block;
        font-size: 14px;
        width: 120px;
        padding: 0 4px;
        margin-bottom: 6px;
        margin-left: 8px;
        background-image: url(https://travel.rakuten.co.jp/special/sales/template/summersale/2407/ranking/images/star.gif);
        background-repeat: no-repeat;
        color: #bf0000!important;
        text-align: right;
        font-weight: 700;
        line-height: 20px
    }

    #considerRank .hotelbox .ss-hotel .htlstar50 {
        background-position: 0 0
    }

    #considerRank .hotelbox .ss-hotel .htlstar45 {
        background-position: 0 -20px
    }

    #considerRank .hotelbox .ss-hotel .htlstar40 {
        background-position: 0 -40px
    }

    #considerRank .hotelbox .ss-hotel .htlstar35 {
        background-position: 0 -60px
    }

    #considerRank .hotelbox .ss-hotel .htlstar30 {
        background-position: 0 -80px
    }

    #considerRank .hotelbox .ss-hotel .htlstar25 {
        background-position: 0 -100px
    }

    #considerRank .hotelbox .ss-hotel .htlstar20 {
        background-position: 0 -120px
    }

    #considerRank .hotelbox .ss-hotel .htlstar15 {
        background-position: 0 -140px
    }

    #considerRank .hotelbox .ss-hotel .htlstar10 {
        background-position: 0 -160px
    }

    #considerRank .hotelbox .ss-hotel .htlstar05 {
        background-position: 0 -180px
    }

    #considerRank .hotelbox .ss-hotel .htlstar00 {
        background-position: 0 -200px
    }

    #considerRank .hotelbox .ss-hotel .hotel-price {
        padding: 8px 0 0
    }

    #considerRank .hotelbox .ss-hotel .hotel-price .details {
        display: block;
        color: #bf0000;
        font-weight: 700;
        font-size: 18px;
        text-align: right
    }

    #considerRank .hotelbox .ss-hotel .hotel-price .details em {
        font-size: 12px;
        font-style: normal
    }

    #considerRank #mytrip {
        overflow: hidden;
        padding-bottom: 30px
    }

    #considerRank #mytrip .swiper-container {
        overflow: inherit
    }

    #considerRank #mytrip .swiper-wrapper {
        padding: 3px
    }

    #considerRank #mytrip .mytrip-title {
        font-size: 20px;
        padding-bottom: 16px;
        font-weight: 700;
        color: #0f9aeb
    }

    #considerRank #mytrip .hotel-list {
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 1.52925px 6.117px #ccc;
        border-radius: 4px
    }

    #considerRank #mytrip .hotel-list a {
        color: #333
    }

    #considerRank #mytrip .info {
        display: flex;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 400;
        justify-content: space-between;
        align-items: center
    }

    #considerRank #mytrip .info .date {
        color: #6d6d6d
    }

    #considerRank #mytrip .photo img {
        aspect-ratio: 16/9;
        width: 100%;
        border-radius: 4px 4px 0 0
    }

    #considerRank #mytrip .name {
        display: flex;
        font-size: 15px;
        font-weight: 500;
        align-items: center;
        padding: 12px 16px
    }

    #considerRank #mytrip .name img {
        margin-right: 4px
    }

    #considerRank #mytrip .pr {
        font-size: 14px;
        padding: 0 16px;
        margin-bottom: 24px;
        position: relative
    }

    #considerRank #exp {
        overflow: hidden;
        padding-bottom: 30px
    }

    #considerRank #exp .swiper-container {
        overflow: inherit
    }

    #considerRank #exp .swiper-wrapper {
        box-sizing: border-box;
        padding: 3px
    }

    #considerRank #exp .exp-title {
        font-size: 20px;
        padding-bottom: 16px;
        font-weight: 700;
        color: #0f9aeb
    }

    #considerRank #exp .exp-list {
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: 0 1.52925px 6.117px #ccc
    }

    #considerRank #exp .exp-list img {
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    #considerRank #exp .exp-list .box {
        padding: 12px;
        font-size: 13px
    }

    #considerRank #exp .exp-list .box .price {
        color: #006c00;
        font-size: 16px;
        font-weight: 700;
        padding: 8px
    }

    #considerRank #exp .exp-list .box .area {
        background: url(https://travel.rakuten.co.jp/special/sales/template/summersale/2407/ranking/images/location.svg) no-repeat left center;
        padding-left: 22px
    }

    #considerRank .attention {
        font-size: 13px;
        line-height: 1.5;
        color: #333
    }

    .no-data {
        position: relative;
        text-align: center;
        top: -25px
    }

    /* 2409ss*/
    #considerRank .hotelbox .ss-hotel .area {
        float: left;
        max-width: 52px;
        color: #777;
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice {
        font-size: 12px;
        color: #767676;
        position: relative;
        text-align: right;
        padding: 10px 0 4px 0;
        margin: 0;
        text-decoration: line-through;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice span {
        font-size: 12px;
        font-weight: normal;
        display: block;
        border-radius: 3px;
        padding: 4px 6px;
        color: #ffffff;
        text-decoration: none;
        background: #f14f4f;
        position: absolute;
        top: 0;
        left: 0;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice span em {
        font-size: 14px;
        font-style: normal;
        text-decoration: none;
    }

    #considerRank .hotelbox .ss-hotel .ss-button-middle.ss-button-green {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        color: #666 !important;
        font-size: 14px;
        display: block;
        margin: 8px auto 0;
    }

    #considerRank .hotelbox .ss-hotel .htlrank {
        left: 2px;
        top: 2px;
    }
}

@media screen and (min-width: 768px) {
    #considerRank {
        background:#fff;
        box-sizing: border-box
    }

    #considerRank .title {
        text-align: center;
        font-size: 20px;
        padding-bottom: 24px
    }

    #considerRank .tab {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16px
    }

    #considerRank .tab li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50%;
        border: 1px solid #666;
        border-bottom: 5px solid #666;
        color: #fff;
        border-radius: 5px 5px 0 0;
        text-decoration: none;
        font-weight: 700;
        background: #666;
        font-size: 18px;
        height: 45px;
        margin-top: 11px;
        box-sizing: border-box;
        cursor: pointer
    }

    #considerRank .tab li.active {
        color: #0f9aeb;
        height: 56px;
        margin: 0;
        background: #fff;
        border: 1px solid #0f9aeb;
        border-bottom: 5px solid #0f9aeb
    }

    #considerRank .tab-container {
        display: none
    }

    #considerRank .theme-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 32px
    }

    #considerRank .theme-list li {
        width: calc((100% - 30px)/ 4);
        height: 132px;
        border-radius: 5px;
        margin: 0 4px 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        text-shadow: 1px 1px 2px #333
    }

    #considerRank .theme-list li.active,#considerRank .theme-list li:hover {
        border-radius: 4px;
        outline: 4px solid #0dbd0d;
        outline-offset: -4px
    }

    #considerRank .area-container {
        margin-top: 32px
    }

    #considerRank .area-container .area-title {
        font-weight: 700;
        text-align: center;
        font-size: 20px;
        padding-bottom: 12px
    }

    #considerRank .area-container .area-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 16px;
        background-color: #f3f3f3
    }

    #considerRank .area-container .area-list li {
        border-radius: 3px;
        width: calc(100% / 13 - 8px);
        background-color: #fff;
        color: #333;
        text-align: center;
        padding: 12px 0;
        cursor: pointer;
        font-size: 14px
    }

    #considerRank .area-container .area-list li.active {
        background-color: #0dbd0d;
        color: #fff
    }

    #considerRank .area-container .area-list li:hover {
        opacity: .8
    }

    #considerRank .area-container .area-list-small {
        padding: 16px;
        padding-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px
    }

    #considerRank .area-container .area-list-small li {
        cursor: pointer;
        width: auto;
        border: 1px solid #767676;
        border-radius: 3px;
        padding: 8px;
        box-sizing: border-box;
        background-color: #fff;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #767676;
        font-size: 13px
    }

    #considerRank .area-container .area-list-small li.active {
        background-size: 16px;
        background-repeat: no-repeat;
        padding-left: 24px;
        background-position: left 4px center;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADLSURBVHgB7ZTRDYMwDAVfmIBukBG6QkfoCJ2oI9BNWKEjsAFsQOMQPlI5QJDdn/okCyTAd0IIwDCMv6AbfZgrd6mBNiR3ro/DROgGrHLAh2nD+RM/C8jlxBvzfP++zUEDXn7D4zJBPaBCLh9QKZcNOCGXCzgpJ5riwtfUx6OinHA7C4e0bICCnODewJQGcfHyB/MacoL/BrqxTcvXX2f+JoTk5YCtiPiUjHw7oBSx4CXk+wF8BKTkxwL4CBH58YA8AlLyeiiCxjAMQT4blpKlSoPFfwAAAABJRU5ErkJggg==);
        color: #0dbd0d;
        border: 1px solid #0dbd0d
    }

    #considerRank .area-container .area-list-small li:hover {
        opacity: .8
    }

    #considerRank .area-container #rank-spot {
        width: 300px;
        border-radius: 6px;
        margin: 16px auto;
        border: 1px solid #ccc;
        display: flex;
        height: 36px
    }

    #considerRank .area-container #rank-spot select {
        cursor: pointer;
        font-size: 13px;
        border-radius: 6px;
        border: none;
        color: #767676;
        width: 100%;
        text-align: center;
        appearance: none
    }

    #considerRank .hotelbox {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 16px 16px 0;
    }

    #considerRank .hotelbox .swiper-container[data-section_name="いま人気の温泉宿"] {
        order: 1;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="露天風呂付き客室で人気の高級宿"] {
        order: 2;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="カップルに人気の温泉宿"] {
        order: 3;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="家族・子ども連れに人気の温泉宿"] {
        order: 4;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="ペットと泊まれる人気の温泉宿"] {
        order: 5;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="クチコミ評価4.0以上の温泉宿"] {
        order: 6;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="温泉付きで人気のビジネスホテル"] {
        order: 7;
    }
    #considerRank .hotelbox .swiper-container[data-section_name="ひとり旅に人気の温泉宿"] {
        order: 8;
    }

    #considerRank .hotelbox a:hover {
        text-decoration: none;
        opacity: .8
    }

    #considerRank .hotelbox .swiper-container {
        padding-bottom: 15px!important;
        width: 100%;
    }

    #considerRank .hotelbox .hotel-title2 {
        color: #333;
        font-size: 16px;
        margin: 40px 8px 8px 8px;
        box-sizing: border-box;
        z-index: 1;
        position: relative;
    }

    #considerRank .hotelbox .hotel-title2:after {
        content: "";
        display: block;
        position: absolute;
        top: -33px;
        left: 8px;
        width: 28px;
        height: 24px;

    }
    .hotelbox .hotel:nth-of-type(1)  .hotel-title2:after {
    background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no1.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(2)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no2.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(3)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no3.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(4)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no4.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(5)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no5.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(6)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no6.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(7)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no7.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(8)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no8.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(9)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no9.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(10)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no10.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(11)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no11.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(12)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no12.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(13)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no13.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(14)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no14.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(15)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no15.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(16)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no16.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(17)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no17.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(18)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no18.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(19)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no19.png) no-repeat;
    }
    .hotelbox .hotel:nth-of-type(20)  .hotel-title2:after {
        background: url(https://img.travel.rakuten.co.jp/share/themes/onsen/images/no20.png) no-repeat;
    }

    #considerRank .hotelbox .ss-hotel {
        position: relative;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #c3c3c3;
        box-shadow: 1px 1px 3px #ddd;
        height: auto;
        color: #333;
        overflow: visible
    }

    #considerRank .hotelbox .ss-hotel .icon {
        position: absolute;
        top: -32px;
        left: 0;
    }

    #considerRank .hotelbox .ss-hotel .icon img {
        width: auto;
    }

    #considerRank .hotelbox .ss-hotel .hotel-img {
        border-radius: 5px 5px 0 0;
        position: relative;
    }

    #considerRank .hotelbox .ss-hotel .hotel-img .bg-img {
        border-radius: 5px 5px 0 0;
        display: block;
        height: 130px;
        background-size: cover;
        text-indent: -9999px
    }

    #considerRank .hotelbox .ss-hotel .hotelName {
        display: block;
        padding: 0;
        margin: 0 0 8px;
        position: relative;
        left: 0;
        bottom: 0;
        color: #333;
        background: 0 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 700
    }

    #considerRank .hotelbox .ss-hotel .infobox {
        display: flex;
        padding: 8px;
        justify-content: space-between;
        align-items: center
    }

    #considerRank .hotelbox .ss-hotel .infobox .area {
        font-size: 11px
    }

    #considerRank .hotelbox .ss-hotel .infobox .premium {
        padding-right: 4px
    }

    #considerRank .hotelbox .ss-hotel .button {
        display: block;
        margin: 8px;
        border-radius: 4px;
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #ccc;
        color: #666!important;
        font-size: 14px
    }

    #considerRank .hotelbox .ss-hotel .htlstar {
        display: block;
        font-size: 14px;
        width: 120px;
        padding: 0 4px;
        margin-bottom: 6px;
        background-image: url(https://travel.rakuten.co.jp/special/sales/template/summersale/2407/ranking/images/star.gif);
        background-repeat: no-repeat;
        color: #bf0000!important;
        text-align: right;
        font-weight: 700;
        line-height: 20px
    }

    #considerRank .hotelbox .ss-hotel .htlstar50 {
        background-position: 0 0
    }

    #considerRank .hotelbox .ss-hotel .htlstar45 {
        background-position: 0 -20px
    }

    #considerRank .hotelbox .ss-hotel .htlstar40 {
        background-position: 0 -40px
    }

    #considerRank .hotelbox .ss-hotel .htlstar35 {
        background-position: 0 -60px
    }

    #considerRank .hotelbox .ss-hotel .htlstar30 {
        background-position: 0 -80px
    }

    #considerRank .hotelbox .ss-hotel .htlstar25 {
        background-position: 0 -100px
    }

    #considerRank .hotelbox .ss-hotel .htlstar20 {
        background-position: 0 -120px
    }

    #considerRank .hotelbox .ss-hotel .htlstar15 {
        background-position: 0 -140px
    }

    #considerRank .hotelbox .ss-hotel .htlstar10 {
        background-position: 0 -160px
    }

    #considerRank .hotelbox .ss-hotel .htlstar05 {
        background-position: 0 -180px
    }

    #considerRank .hotelbox .ss-hotel .htlstar00 {
        background-position: 0 -200px
    }

    #considerRank .hotelbox .ss-hotel .hotel-price {
        padding: 8px 0 0
    }

    #considerRank .hotelbox .ss-hotel .hotel-price .details {
        display: block;
        color: #bf0000;
        font-weight: 700;
        font-size: 18px;
        text-align: right
    }

    #considerRank .hotelbox .ss-hotel .hotel-price .details em {
        font-size: 12px;
        font-style: normal
    }

    #considerRank #mytrip {
        overflow: hidden;
        padding: 16px;
        padding-bottom: 30px
    }

    #considerRank #mytrip .swiper-container {
        overflow: inherit;
        padding-right: 10px
    }

    #considerRank #mytrip .swiper-wrapper {
        padding: 3px
    }

    #considerRank #mytrip .mytrip-title {
        font-size: 24px;
        padding-bottom: 16px;
        font-weight: 700;
        color: #0f9aeb
    }

    #considerRank #mytrip .hotel-list {
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 1.52925px 6.117px #ccc;
        border-radius: 4px
    }

    #considerRank #mytrip .hotel-list a {
        color: #333
    }

    #considerRank #mytrip .hotel-list a:hover {
        text-decoration: none;
        opacity: .8
    }

    #considerRank #mytrip .info {
        display: flex;
        padding: 8px 16px;
        font-size: 14px;
        font-weight: 400;
        justify-content: space-between;
        align-items: center
    }

    #considerRank #mytrip .info .date {
        color: #6d6d6d
    }

    #considerRank #mytrip .photo img {
        aspect-ratio: 16/9;
        width: 100%;
        border-radius: 4px 4px 0 0
    }

    #considerRank #mytrip .name {
        display: flex;
        font-size: 15px;
        font-weight: 500;
        align-items: center;
        padding: 12px 16px
    }

    #considerRank #mytrip .name img {
        margin-right: 4px
    }

    #considerRank #mytrip .pr {
        font-size: 14px;
        padding: 0 16px;
        margin-bottom: 24px;
        position: relative
    }

    #considerRank #exp {
        overflow: hidden;
        padding: 16px;
        padding-bottom: 30px
    }

    #considerRank #exp a {
        color: #333
    }

    #considerRank #exp a:hover {
        text-decoration: none;
        opacity: .8
    }

    #considerRank #exp .swiper-container {
        overflow: inherit;
        padding-right: 10px
    }

    #considerRank #exp .swiper-wrapper {
        box-sizing: border-box;
        padding: 3px
    }

    #considerRank #exp .exp-title {
        font-size: 24px;
        padding-bottom: 16px;
        font-weight: 700;
        color: #0f9aeb
    }

    #considerRank #exp .exp-list {
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: 0 1.52925px 6.117px #ccc
    }

    #considerRank #exp .exp-list img {
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover
    }

    #considerRank #exp .exp-list .box {
        padding: 12px;
        font-size: 13px
    }

    #considerRank #exp .exp-list .box .price {
        color: #006c00;
        font-size: 16px;
        font-weight: 700;
        padding: 8px
    }

    #considerRank #exp .exp-list .box .area {
        background: url(https://travel.rakuten.co.jp/special/sales/template/summersale/2407/ranking/images/location.svg) no-repeat left center;
        padding-left: 22px
    }

    #considerRank .attention {
        font-size: 13px;
        line-height: 1.5;
        padding: 0 16px 16px;
        color: #333
    }

    .no-data {
        width: 100%;
        position: relative;
        text-align: center;
        padding-top: 30px;
        padding-bottom: 30px
    }

    /* 2409ss*/
    #considerRank .hotelbox .ss-hotel .area {
        float: left;
        max-width: 52px;
        color: #777;
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 8px;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice {
        font-size: 12px;
        color: #767676;
        position: relative;
        text-align: right;
        padding: 10px 0 4px 0;
        margin: 0;
        text-decoration: line-through;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice span {
        font-size: 12px;
        font-weight: normal;
        display: block;
        border-radius: 3px;
        padding: 4px 6px;
        color: #ffffff;
        text-decoration: none;
        background: #f14f4f;
        position: absolute;
        top: 0;
        left: 0;
    }

    #considerRank .hotelbox .ss-hotel p.originalPrice span em {
        font-size: 14px;
        font-style: normal;
        text-decoration: none;
    }

    #considerRank .hotelbox .ss-hotel .ss-button-middle.ss-button-green {
        background-color: #ffffff;
        border: 1px solid #cccccc;
        color: #666 !important;
        font-size: 14px;
        display: block;
        margin: 8px auto 0;
    }
}

/* #considerRank .hotelbox .ss-hotel .icon{ display: none;} */