@charset "UTF-8";
*,
*::after,
*::before {
  font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "Osaka", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1;
  letter-spacing: initial;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  box-sizing: border-box;
  min-inline-size: 0;
}

img {
  max-width: 100%;
}

.p-content {
  position: relative;
  z-index: 3;
  padding-block: 8rem 7.7rem;
  background: #F4FBFF;
}
@media screen and (max-width: 767px) {
  .p-content {
    padding-block: 2.7rem 4.3rem;
  }
}

.p-wave-01 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -3;
  width: 63rem;
}
@media screen and (max-width: 767px) {
  .p-wave-01 {
    width: 76.2666666667vw;
  }
}

.p-wave-02 {
  position: absolute;
  top: 74.8rem;
  right: 0;
  z-index: -3;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-wave-02 {
    top: 93.6vw;
    width: 11.7333333333vw;
  }
}

.p-hgroup_txt-en {
  font-size: 4.8rem;
  line-height: 1.2291666667;
  font-weight: 700;
  font-family: "Roboto Condensed", monospace;
  display: inline-block;
  background: linear-gradient(77.45deg, #9EB9A5 -0.27%, #7396DD 41.11%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 767px) {
  .p-hgroup_txt-en {
    font-size: 4rem;
    line-height: 1.45;
  }
}
.p-hgroup_ttl {
  font-size: 2.8rem;
  line-height: 1.6071428571;
  font-weight: 700;
}
@media screen and (max-width: 767px) {
  .p-hgroup_ttl {
    font-size: 2.4rem;
    line-height: 1.4166666667;
  }
}

.c-mv-02_inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-mv-02__img {
  max-height: 90%;
  height: 20vw;
}
@media screen and (max-width: 767px) {
  .c-mv-02__img {
    max-height: auto;
    height: 100%;
  }
}
.c-mv-02__img picture {
  display: block;
  height: 100%;
}
.c-mv-02__img img {
  width: auto;
  height: 100%;
}

.p-txt {
  font-size: 1.6rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .p-txt {
    font-size: 1.4rem;
    line-height: 1.7857142857;
  }
}

.p-txt-sml {
  font-size: 1.2rem;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .p-txt-sml {
    font-size: 1.2rem;
    line-height: 1.8333333333;
  }
}

.u-pc {
  display: block;
}

.u-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .u-pc {
    display: none;
  }
  .u-sp {
    display: block;
  }
}
#breadChumbs {
  position: relative;
  z-index: 1;
  margin: 30px 0 30px 50px;
}
@media screen and (max-width: 767px) {
  #breadChumbs {
    margin: 20px 0 20px 20px;
  }
}

@media screen and (max-width: 767px) {
  .c-wrap {
    width: 89.3333333333%;
    margin: 0 20px;
  }
}

.sec-rank {
  position: relative;
  background: #F4FBFF;
}
.sec-rank__bg1 {
  position: absolute;
  top: 30rem;
  right: 0;
  width: 61.2rem;
}
@media screen and (max-width: 767px) {
  .sec-rank__bg1 {
    width: 20rem;
  }
}
.sec-rank__bg2 {
  position: absolute;
  bottom: 10rem;
  left: 0;
  width: 100%;
  height: 24rem;
}
@media screen and (max-width: 767px) {
  .sec-rank__bg2 {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  .sec-rank__bg2 img {
    transform: scale(1.5);
  }
}
.sec-rank__intro {
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
  background: rgba(201, 225, 252, 0.3);
  font-weight: 500;
  padding: 3rem 0;
}
@media screen and (max-width: 767px) {
  .sec-rank__intro {
    font-size: min(3.4vw, 1.6rem);
    padding: 1.5rem;
  }
}
.sec-rank__intro .bold {
  font-weight: 700;
}
.sec-rank__intro .big {
  font-size: 1.8rem;
  font-weight: 700;
  color: #075697;
}
@media screen and (max-width: 767px) {
  .sec-rank__intro .big {
    font-size: min(3.4vw, 1.6rem);
  }
}
.sec-rank-intro {
  position: relative;
  border: 3px solid #075697;
  background: #fff;
  padding: 5rem 0 4rem;
  margin: 6rem 0 0;
}
.sec-rank-intro img {
  position: absolute;
  bottom: 0;
  right: 1rem;
  width: 20.6rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro {
    margin: 6rem 0 3.6rem;
    padding: 5.6rem 0 3rem;
  }
}
.sec-rank-intro__ttl {
  position: absolute;
  top: -2.6rem;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57.5rem;
  height: 4.7rem;
  background: url(../image/ranking/bg_ribbon.png) 0 0/100% auto no-repeat;
  color: #fff;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__ttl {
    top: -3.4rem;
    width: 28rem;
    height: 6.5rem;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.6;
    background: url(../image/ranking/bg_ribbon_sp.png) 0 0/100% 100% no-repeat;
  }
}
.sec-rank-intro__01 {
  text-align: center;
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1.7;
  color: #075697;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__01 {
    font-size: 2.4rem;
    margin: 0 0 1rem;
  }
}
.sec-rank-intro__01 .big {
  font-size: 4.6rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__01 .big {
    font-size: 3.2rem;
  }
}
.sec-rank-intro__01 .pk {
  color: #E761AD;
}
.sec-rank-intro__01 .notes {
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__01 .notes {
    font-size: 1.2rem;
  }
}
.sec-rank-intro__02 {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.7;
  color: #075697;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__02 {
    font-size: 1.6rem;
  }
}
.sec-rank-intro__02 .big {
  font-size: 3.2rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__02 .big {
    font-size: 1.6rem;
  }
}
.sec-rank-intro__02 .pk {
  color: #E761AD;
}
.sec-rank-intro__txt {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__txt {
    font-size: 1.2rem;
    line-height: 1.6;
  }
}
.sec-rank-intro__notes {
  text-align: center;
  font-weight: 500;
  font-size: 1rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-intro__notes {
    font-size: 1rem;
    line-height: 1.6;
  }
}
.sec-rank__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 7.2rem;
  color: #fff;
  font-weight: 700;
  background: url(../image/ranking/bg_heading.jpg) 0 0/cover no-repeat;
  font-size: 3.2rem;
  margin: 4rem 0;
}
@media screen and (max-width: 767px) {
  .sec-rank__heading {
    display: block;
    width: calc(100% + 40px);
    height: auto;
    font-size: 2rem;
    text-align: center;
    margin: 0 -20px 3rem;
    padding: 1rem 0;
    line-height: 1.5;
  }
}
.sec-rank__heading span {
  color: #FDF7AD;
}
@media screen and (max-width: 767px) {
  .sec-rank__heading span {
    text-align: center;
  }
}
.sec-rank-outline {
  position: relative;
}
.sec-rank-outline__scroll {
  width: 69.5rem;
  margin: 0 auto;
  padding: 0 0 0 1.9rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-outline__scroll {
    width: calc(100% + 20px);
    overflow-x: scroll;
    margin: 0 -10px;
  }
}
.sec-rank-outline__swipe {
  display: none;
}
@media screen and (max-width: 767px) {
  .sec-rank-outline__swipe {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11rem;
    transform: translate(-50%, -50%);
    animation: hintMove 1.2s infinite;
  }
}
@keyframes hintMove {
  0% {
    transform: translate(-50%, -50%) translateX(0);
  }
  50% {
    transform: translate(-50%, -50%) translateX(-15px);
  }
  100% {
    transform: translate(-50%, -50%) translateX(0);
  }
}
.sec-rank-outline__inner {
  width: 60rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-about {
    margin: 4rem 0 0;
  }
}
.sec-rank-about__inner {
  max-width: 88rem;
  margin: 0 auto;
}
.sec-rank-about__txt {
  font-weight: 500;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__txt {
    font-size: 1.4rem;
  }
}
.sec-rank-about__head {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  margin: 4rem 0 0;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__head {
    display: block;
  }
}
.sec-rank-about__head .ttl {
  font-size: 2.4rem;
  font-weight: 700;
}
.sec-rank-about__head .txt {
  font-size: 1.2rem;
  margin-left: 2rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__head .txt {
    margin: 1rem 0 0;
  }
}
.sec-rank-about__define {
  margin: 4rem 0 0;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__define {
    margin: 2.4rem 0 0;
  }
}
.sec-rank-about__define dt {
  font-weight: 500;
  line-height: 1.5;
  font-size: 2rem;
  border-bottom: 2px solid #6DBBEF;
  padding: 0 0 0.5rem;
  margin: 3rem 0 2rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__define dt {
    margin: 3rem 0 1.5rem;
  }
}
.sec-rank-about__define dt:first-child {
  margin-top: 0;
}
.sec-rank-about__define dd {
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__define dd {
    font-size: 1.4rem;
  }
}
.sec-rank-about__define dd ul {
  margin: 1rem 0 0;
}
.sec-rank-about__define dd ul li {
  line-height: 1.6;
}
.sec-rank-about__define dd ul li::before {
  content: "・";
}
.sec-rank-about__table {
  max-width: 61.5rem;
  width: 100%;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-spacing: 0;
  table-layout: fixed;
  margin: 2rem auto 0;
}
.sec-rank-about__table th,
.sec-rank-about__table td {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
  font-size: 1.2rem;
  line-height: 1.3;
  text-align: center;
  padding: 0.3rem 0;
}
.sec-rank-about__table th {
  background: #E9E9E9;
}
.sec-rank-about__table td {
  background: #fff;
}
.sec-rank-about__table thead th {
  width: 25%;
}
@media screen and (max-width: 767px) {
  .sec-rank-about__table thead th {
    width: 22%;
  }
  .sec-rank-about__table thead th:last-child {
    width: 34%;
  }
}
.sec-rank-balloon {
  position: relative;
  padding: 0 0 9rem;
  margin: 5rem 0 0;
}
@media screen and (max-width: 767px) {
  .sec-rank-balloon {
    padding: 0 0 4.5rem;
    margin-top: 4rem;
  }
}
.sec-rank-balloon__txt {
  position: relative;
  width: 65rem;
  border: 3px solid #112F83;
  font-size: 2rem;
  background: #fff;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #112F83;
  margin: 0 auto;
  padding: 2.4rem 0;
}
@media screen and (max-width: 767px) {
  .sec-rank-balloon__txt {
    width: 100%;
    font-size: 1.4rem;
    padding: 2rem 0;
  }
}
.sec-rank-balloon__txt::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background: #112F83;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}
.sec-rank-balloon__txt::after {
  content: "";
  position: absolute;
  top: calc(100% - 6px);
  left: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transform: translateX(-50%);
}
.sec-rank-balloon__img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26.5rem;
}
@media screen and (max-width: 767px) {
  .sec-rank-balloon__img {
    width: 13rem;
  }
}