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: rgb(221, 151, 0);
  margin: 0 auto;
  text-align: center;
}
.bumonTitle-in {
  max-width: 1000px;
  width: 100%;
  background: rgb(221, 151, 0);
  background: linear-gradient(
    270deg,
    rgba(221, 151, 0, 1) 0%,
    rgba(228, 221, 126, 1) 50%,
    rgba(221, 151, 0, 1) 100%
  );
  margin: 0 auto;
  text-align: center;
  padding: clamp(0.9375rem, 0.2679rem + 3.5714vw, 2.5rem) 0;
}
.outline {
  color: #000000;
  font-size: clamp(1.25rem, 0.1786rem + 5.7143vw, 3.75rem);
  font-weight: bold;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
@media screen and (max-width: 500px) {
  .outline {
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
  }
}
.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 {
  background: rgb(247,147,30);
background: linear-gradient(90deg, rgba(247,147,30,1) 0%, rgba(255,255,0,1) 50%, rgba(247,147,30,1) 100%);
  text-align: center;
  padding: min(3vw, 30px) 0;
  font-size: min(4vw, 40px);
  font-weight: 600;
}

.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);
  margin: 0 auto 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 {
    margin: 0 auto 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;
}