header {
    position: relative;
    width: 100%;
    padding: 0 0 2vw;
    /* background: linear-gradient(
    to right,
    rgb(120, 201, 13),
    rgb(203, 213, 22),
    rgb(120, 201, 13)
  ); */
    background-image: url(../img/topbg.png);
    text-align: center;
    background-size: cover;
    background-position: center center;
}

.logoimg {
    margin: 0 auto;
    width: 80%;
    max-width: 800px;
}

.ResultLabelImg {
    margin-top: max(-6vw, -60px);
    width: 85%;
    max-width: 850px;
}
.bumonTitle {
    width: 100%;
    background: #138452 !important;
    margin: 0 auto;
    text-align: center;
}
.bumonTitle-in {
    max-width: 1000px;
    width: 100%;
    background: linear-gradient(
        90deg,
        #138452 15%,
        #8fb472 50%,
        #138452 85%
    ) !important;
    margin: 0 auto;
    text-align: center;
    padding: clamp(0.9375rem, 0.2679rem + 3.5714vw, 2.5rem) 0;
}
.outline {
    color: #fff;
    font-size: clamp(1.25rem, 0.1786rem + 5.7143vw, 3.75rem);
    font-weight: bold;
}

.top-content {
    margin-top: min(4.5vw, 45px);
}

.content {
    text-align: center;
    font-size: clamp(0.75rem, 0.5357rem + 1.1429vw, 1.25rem);
    width: 90%;
}

.cate,
.shotyo,
.special {
    width: 100%;
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}

.cate_box,
.shotyo-area,
.special-area {
    margin-bottom: min(3vw, 30px) 0;
    text-align: center;
}

.cate_box > img,
.shotyo-area > img,
.special-area > img {
    width: 100%;
}

.cate_btns {
    margin: min(3vw, 30px) auto;
    width: 95%;
    display: flex;
}

img.btn1 {
    width: 87%;
}

.Ranking {
    max-width: 1000px;
    margin: 0 auto;
}

.CateName {
    color: #fff !important;
    border-radius: 0 0 20px 20px;
    text-align: center;
    padding: min(3vw, 30px) 0;
    font-size: min(4vw, 40px);
    font-weight: 600;
    background: #138452 !important;
    background: linear-gradient(
        90deg,
        #138452 15%,
        #8fb472 50%,
        #138452 85%
    ) !important;
}

.CateName.Cate1 {
    background: rgb(223, 140, 76) !important;
}
/* 料理自慢 */
.CateName.Cate2 {
    background: rgb(106, 172, 143) !important;
}
/* 絶景 */
.CateName.Cate3 {
    background: rgb(212, 154, 52) !important;
}
/* おもてなし */
.CateName.Cate4 {
    background: rgb(19, 133, 187) !important;
}
/* 泉質自慢 */
.CateName.Cate5 {
    background: rgb(213, 185, 110) !important;
}
/* ファミリー */
.CateName.Cate6 {
    background: rgb(121, 118, 146) !important;
}
/* ラグジュアリー */
.CateName.Cate7 {
    background: rgb(184, 172, 126) !important;
}
/* ペット同伴 */
.CateName.Cate8 {
    background: rgb(185, 200, 118) !important;
}
/* 湯治ウェルネス */
.CateName.Cate9 {
    background: rgb(119, 182, 207) !important;
}
/* 健康/スポーツ */
.CateName.Cate10 {
    background: rgb(219, 181, 177) !important;
}
/* 美肌 */
.CateName.Cate11 {
    background: rgb(163, 140, 127) !important;
}
/* 秘湯宿 */
.CateName.Cate12 {
    background: rgb(160, 85, 86) !important;
}

/* お気軽/お得 */
.CateName.Cate13 {
    background: rgb(175, 132, 57) !important;
}
/* 一人旅 */
.CateName.Cate14 {
    background: rgb(168, 124, 134) !important;
}
/* レトロ */
.CateName.Cate15 {
    background: rgb(95, 153, 73) !important;
}
/* アウトドア */
.CateName.Cate16 {
    background: #d68630 !important;
}
/* 食事 */
.CateName.Cate17 {
    background: #a87b4f !important;
}
/* 温泉 */
.CateName.Cate18 {
    background: #2f9ecf !important;
}
/* 客室施設*/
.CateName.Cate19 {
    background: #91317c !important;
}
/* リピート */
.CateName.Cate20 {
    background: #64a448 !important;
}
/* サービス */
.CateName.Cate21 {
    background: #d55a2f !important;
}
/* 総合評価 */

.AreaTitle {
    text-align: center;
    margin: min(3vw, 30px) 0;
    font-size: min(3vw, 30px);
    font-weight: 550;
}

.RankingArea {
    width: 95%;
    text-align: center;
    margin: 0 auto;
}

.Top3 {
    width: 100%;
    margin-bottom: min(6vw, 60px);
}

.Top3_RankLabelImg {
    width: 30%;
}

.RankYadoImg {
    width: 80%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    margin: min(2vw, 20px) 0;
}

.Top3Name {
    width: 80%;
    padding: 2vw 0;
    font-size: min(3.5vw, 35px);
    font-weight: 550;
}

.No1Name {
    background: linear-gradient(
        90deg,
        rgba(211, 163, 24, 1) 0%,
        rgba(211, 163, 24, 1) 23%,
        rgba(255, 245, 154, 1) 33%,
        rgba(255, 245, 154, 1) 35%,
        rgba(205, 143, 26, 1) 50%,
        rgba(205, 143, 26, 1) 100%
    );
}

.No2Name {
    background: linear-gradient(
        90deg,
        rgba(178, 161, 106, 1) 0%,
        rgba(244, 239, 225, 1) 26%,
        rgba(200, 187, 146, 1) 43%,
        rgba(200, 187, 146, 1) 57%,
        rgba(244, 239, 225, 1) 74%,
        rgba(178, 161, 106, 1) 100%
    );
}

.No3Name {
    background: linear-gradient(
        90deg,
        rgba(215, 105, 2, 1) 0%,
        rgba(247, 189, 120, 1) 26%,
        rgba(228, 139, 47, 1) 43%,
        rgba(228, 139, 47, 1) 50%,
        rgba(228, 139, 47, 1) 57%,
        rgba(247, 189, 120, 1) 74%,
        rgba(215, 105, 2, 1) 100%
    );
}

.Top4-5 {
    margin: min(10vw, 100px) 0 0;
}

.Top4-5_RankLabelImg {
    width: 20%;
}

.Top4-5Name {
    margin: 1vw 0 0;
    font-size: min(3.5vw, 35px);
    font-weight: 550;
}

.No1Border {
    width: 100%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) auto 0;
    background: linear-gradient(
        90deg,
        rgba(211, 163, 24, 1) 0%,
        rgba(211, 163, 24, 1) 23%,
        rgba(255, 245, 154, 1) 33%,
        rgba(255, 245, 154, 1) 35%,
        rgba(205, 143, 26, 1) 50%,
        rgba(205, 143, 26, 1) 100%
    );
}

.No2Border {
    width: 100%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) auto 0;
    background: linear-gradient(
        90deg,
        rgba(178, 161, 106, 1) 0%,
        rgba(244, 239, 225, 1) 26%,
        rgba(200, 187, 146, 1) 43%,
        rgba(200, 187, 146, 1) 57%,
        rgba(244, 239, 225, 1) 74%,
        rgba(178, 161, 106, 1) 100%
    );
}

.No3Border {
    width: 100%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) auto 0;
    background: linear-gradient(
        90deg,
        rgba(215, 105, 2, 1) 0%,
        rgba(247, 189, 120, 1) 26%,
        rgba(228, 139, 47, 1) 43%,
        rgba(228, 139, 47, 1) 50%,
        rgba(228, 139, 47, 1) 57%,
        rgba(247, 189, 120, 1) 74%,
        rgba(215, 105, 2, 1) 100%
    );
}

.No4Border {
    width: 100%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) auto 0;
    background: linear-gradient(90deg, #00abff 0%, #96e1ff 50%, #00abff 100%);
}

.No5Border {
    width: 100%;
    height: min(1vw, 10px);
    margin: min(1vw, 10px) auto 0;
    background: linear-gradient(90deg, #39cb3b 0%, #baf0aa 50%, #39cb3b 100%);
}

#ButtonGroup {
    display: flex;
    flex-direction: column;
    padding-top: min(7vw, 70px);
    padding-bottom: min(8vw, 80px);
}

.TopBackButton {
    margin: min(2vw, 20px) auto min(4vw, 40px);
    background: linear-gradient(#bbbbbb, #ffffff, #bbbbbb);
    border: 2px solid#bbbbbb;
}

.SearchBackButton {
    margin: 0 auto;
    background: linear-gradient(orange, rgb(255, 243, 73), orange);
    border: 2px solid rgb(255, 153, 0);
}

.ButtonTxt {
    width: 35%;
    border-radius: min(1vw, 10px);
    padding: min(1.5vw, 15px) 0;
    font-size: min(1.7vw, 17px);
    font-weight: 600;
}

@media screen and (max-width: 960px) {
    header {
        padding: 0 0 4vw;
    }

    .CateName {
        padding: 3.5vw 0;
        font-size: 5vw;
    }

    .AreaTitle {
        font-size: 4vw;
    }

    .Top3_RankLabelImg {
        width: 30%;
    }

    .RankYadoImg {
        width: 85%;
        height: 45vw;
    }

    .Top3Name {
        width: 85%;
    }

    .No4Border {
        width: 100%;
    }

    .No5Border {
        width: 100%;
    }

    .ButtonTxt {
        width: 55%;
        padding: 2vw 0;
        font-size: 3vw;
    }

    .TopBackButton {
        margin: 2vw auto 7vw;
    }
}

@media screen and (max-width: 500px) {
    header {
        padding: 0 0 5vw;
    }

    .logoimg {
        width: 80%;
    }

    .ResultLabelImg {
        width: 90%;
    }

    .CateName {
        padding: 4vw 0;
        font-size: 5.5vw;
    }

    .AreaTitle {
        margin: 4vw 0;
        font-size: 4.5vw;
    }

    .Top3_RankLabelImg {
        width: 35%;
    }

    .RankYadoImg {
        width: 90%;
        height: 50vw;
        margin: 3vw 0;
    }

    .Top3Name {
        width: 90%;
        padding: 3vw 0;
        font-size: 4vw;
    }

    .Top4-5_RankLabelImg {
        width: 25%;
    }

    .No4Border {
        width: 100%;
        height: 1.3vw;
    }

    .Top4-5Name {
        font-size: 4vw;
    }

    .No5Border {
        width: 100%;
        height: 1.3vw;
    }

    #ButtonGroup {
        padding-bottom: 12vw;
    }

    .ButtonTxt {
        width: 60%;
        padding: 2.5vw 0;
        font-size: 3.5vw;
    }

    .TopBackButton {
        margin: 3vw auto 8vw;
    }
}

.back-bumon {
    text-align: center;
    margin: 0 auto;
}
.back-bumon a {
    font-size: clamp(0.875rem, 0.8214rem + 0.2857vw, 1rem);
    color: blue;
}