@charset "UTF-8";
/*--------------------------------------------------------*/
/*　ランキングページCSS（スマホビュー）　*/
/*--------------------------------------------------------*/
.rank-comment h2,
.rank-vote h2, .rank-intro h2 {
  line-height: 1.4;
  font-weight: bold;
}

.entry-rank {
  padding: 4em 0;
}

/*　イントロ　*/
.rank-intro {
  padding: 0 1em;
}
.rank-intro h2 {
  margin: 0.83333em -0.41667em 0.83333em 0;
  margin: 0 -0.41667em 0.83333em 0;
  padding: 0 0.41667em 0.41667em 0;
  font-size: 24px;
  font-size: 2.4rem;
  color: #932A40;
  border-bottom: solid 4px #932A40;
  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px rgba(0, 0, 0, 0.1);
}
.rank-intro h2:before {
  content: "Introduction";
  display: block;
  margin-bottom: 0.21429em;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: 0;
  text-shadow: none;
}

.rank-intro-txt p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2;
}
.rank-intro-txt .intro-more {
  color: #0047BA;
  text-decoration: underline;
}
.rank-intro-txt .intro-more:hover {
  cursor: pointer;
  color: #932A40;
}

/*　------------------------------------ランキング項目-----------------------------------　*/
.rank-sec {
  position: relative;
  padding: 0 1em;
}
.rank-sec + .rank-sec {
  margin-top: 4em;
}
.rank-sec:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  display: block;
  width: 4em;
  height: 5em;
  background-size: cover;
  z-index: 1;
}
.rank-sec:after {
  content: "";
  position: absolute;
  left: 4em;
  top: 0.5em;
  border-style: solid;
  border-width: 1em 0 0 1em;
  border-color: transparent transparent transparent #CCC;
}
.rank-sec.no1:before {
  background-image: url("../images/ranking/rank_no1.svg");
}
.rank-sec.no2:before {
  background-image: url("../images/ranking/rank_no2.svg");
}
.rank-sec.no3:before {
  background-image: url("../images/ranking/rank_no3.svg");
}
.rank-sec.no4:before {
  background-image: url("../images/ranking/rank_no4.svg");
}
.rank-sec.no5:before {
  background-image: url("../images/ranking/rank_no5.svg");
}
.rank-sec.no6:before {
  background-image: url("../images/ranking/rank_no6.svg");
}
.rank-sec.no7:before {
  background-image: url("../images/ranking/rank_no7.svg");
}
.rank-sec.no8:before {
  background-image: url("../images/ranking/rank_no8.svg");
}
.rank-sec.no9:before {
  background-image: url("../images/ranking/rank_no9.svg");
}
.rank-sec.no10:before {
  background-image: url("../images/ranking/rank_no10.svg");
}
.rank-sec.no11:before {
  background-image: url("../images/ranking/rank_no11.svg");
}
.rank-sec.no12:before {
  background-image: url("../images/ranking/rank_no12.svg");
}
.rank-sec.no13:before {
  background-image: url("../images/ranking/rank_no13.svg");
}
.rank-sec.no14:before {
  background-image: url("../images/ranking/rank_no14.svg");
}
.rank-sec.no15:before {
  background-image: url("../images/ranking/rank_no15.svg");
}
.rank-sec.no16:before {
  background-image: url("../images/ranking/rank_no16.svg");
}
.rank-sec.no17:before {
  background-image: url("../images/ranking/rank_no17.svg");
}
.rank-sec.no18:before {
  background-image: url("../images/ranking/rank_no18.svg");
}
.rank-sec.no19:before {
  background-image: url("../images/ranking/rank_no19.svg");
}
.rank-sec.no20:before {
  background-image: url("../images/ranking/rank_no20.svg");
}
.rank-sec.pick:before {
  background-image: url("../images/ranking/rank_pick.svg");
}
.rank-sec.kuchi:before {
  background-image: url("../images/ranking/rank_kuchi.svg");
}
.rank-sec.pick .rank-sec-head:before {
  border-bottom: solid 5px #1B2F66;
}

.rank-sec-head {
  position: relative;
  min-height: 14em;
  padding: 0 2.2em 2em 11.2em;
  margin-bottom: 2em;
  border-bottom: solid 1px #CCC;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.rank-sec-head:before {
  content: "";
  display: block;
  height: 1.5em;
  margin: 0 -3.2em 2.5em -12.2em;
  border-bottom: solid 5px #932A40;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.rank-sec-head:after {
  content: "";
  position: absolute;
  right: 0;
  top: calc(50% - 8px);
  display: block;
  width: 1.2em;
  height: 3.6em;
  background-image: url("../images/ranking/rank_arr.svg");
  background-size: cover;
}
.rank-sec-head figure {
  position: absolute;
  left: 0;
  top: 4em;
  width: 10.2em;
  font-size: 10px;
  font-size: 1rem;
  line-height: 1;
  text-align: center;
  border: solid 1px #CCC;
}
.rank-sec-head figure img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
.rank-sec-head h2 {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.4;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}
.rank-sec-head h2 .sub {
  display: block;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: normal;
  text-shadow: none;
}
.rank-sec-head h2 .sub:after {
  content: "\e903";
  font-family: "icomoon";
}
.rank-sec-head h2 a {
  display: block;
}
.rank-sec-head h2 + p {
  margin: 0.5em 0 0 0;
  line-height: 1;
  font-size: 10px;
  font-size: 1rem;
}
.pick .rank-sec-head h2:before {
  display: block;
  content: "PICKUP!";
  font-size: 16px;
  font-size: 1.6rem;
  color: #F7931E;
  text-shadow: none;
  -webkit-transform: translateY(-0.1875em);
  transform: translateY(-0.1875em);
}
.rank-sec-head .rank-score {
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  color: #932A40;
}
.rank-sec-head .rank-score span {
  display: inline-block;
  height: 1.125em;
  width: 5.625em;
  margin-right: 0.125em;
  background-image: url("../images/ranking/star00.svg");
  background-size: 5.625em auto;
  background-repeat: no-repeat;
  vertical-align: -0.125em;
}
.rank-sec-head .rank-score span:before {
  content: "";
  display: block;
  height: 1.125em;
  background-image: url("../images/ranking/star10.svg");
  background-size: 5.625em auto;
  background-repeat: no-repeat;
}
.rank-sec-head .rank-change {
  font-size: 14px;
  font-size: 1.4rem;
  margin-left: 0.35714em;
  vertical-align: 0.14286em;
}
.rank-sec-head .rank-change:before {
  content: "";
  display: inline-block;
  height: 1.5em;
  margin-right: 0.21429em;
  vertical-align: -0.42857em;
  background-size: auto 1.5em;
  background-repeat: no-repeat;
}
.rank-sec-head .rank-change.up {
  color: #932A40;
}
.rank-sec-head .rank-change.up:before {
  width: 1.07143em;
  background-image: url("../images/ranking/change-up.svg");
}
.rank-sec-head .rank-change.down {
  color: #1B2F66;
}
.rank-sec-head .rank-change.down:before {
  width: 1.07143em;
  background-image: url("../images/ranking/change-down.svg");
}
.rank-sec-head .rank-change.keep {
  color: #1CA764;
}
.rank-sec-head .rank-change.keep:before {
  width: 1.5em;
  background-image: url("../images/ranking/change-keep.svg");
}
.rank-sec-head .rank-change.new {
  color: #F96335;
}
.rank-sec-head .rank-change.new:before {
  width: 1.21429em;
  background-image: url("../images/ranking/change-new.svg");
}

.score10:before {
  width: 20%;
}

.score11:before {
  width: 22%;
}

.score12:before {
  width: 24%;
}

.score13:before {
  width: 26%;
}

.score14:before {
  width: 28%;
}

.score15:before {
  width: 30%;
}

.score16:before {
  width: 32%;
}

.score17:before {
  width: 34%;
}

.score18:before {
  width: 36%;
}

.score19:before {
  width: 38%;
}

.score20:before {
  width: 40%;
}

.score21:before {
  width: 42%;
}

.score22:before {
  width: 44%;
}

.score23:before {
  width: 46%;
}

.score24:before {
  width: 48%;
}

.score25:before {
  width: 50%;
}

.score26:before {
  width: 52%;
}

.score27:before {
  width: 54%;
}

.score28:before {
  width: 56%;
}

.score29:before {
  width: 58%;
}

.score30:before {
  width: 60%;
}

.score31:before {
  width: 62%;
}

.score32:before {
  width: 64%;
}

.score33:before {
  width: 66%;
}

.score34:before {
  width: 68%;
}

.score35:before {
  width: 70%;
}

.score36:before {
  width: 72%;
}

.score37:before {
  width: 74%;
}

.score38:before {
  width: 76%;
}

.score39:before {
  width: 78%;
}

.score40:before {
  width: 80%;
}

.score41:before {
  width: 82%;
}

.score42:before {
  width: 84%;
}

.score43:before {
  width: 86%;
}

.score44:before {
  width: 88%;
}

.score45:before {
  width: 90%;
}

.score46:before {
  width: 92%;
}

.score47:before {
  width: 94%;
}

.score48:before {
  width: 96%;
}

.score49:before {
  width: 98%;
}

.score50:before {
  width: 100%;
}

.rank-sec-txt h3 {
  margin: 0 0 0.625em 0;
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.6;
}
.rank-sec-txt h3 span {
  text-shadow: 1px 1px 0 #FFF;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(255, 255, 0, 0.35)));
  background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.35) 60%);
}
.rank-sec-txt h3 span:before {
  content: "\e610";
  font-family: "icomoon";
  color: #932A40;
  font-size: 20px;
  font-size: 2rem;
  font-weight: normal;
  text-shadow: none;
  line-height: 1;
  vertical-align: -0.15em;
}
.rank-sec-txt p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2;
}
.rank-sec-txt .txt-more {
  display: inline-block;
  color: #0047BA;
  text-decoration: underline;
}
.rank-sec-txt .txt-more:hover {
  color: #932A40;
}
.pick .rank-sec-txt h3 {
  color: #932A40;
}

.rank-sec-data,
.rank-sec-data2 {
  padding: 1.2em 0 1.5em 0;
  border-bottom: solid 1px #CCC;
}
.rank-sec-data li,
.rank-sec-data2 li {
  display: inline-block;
  padding: 0.23077em 0.38462em;
  margin-bottom: 0.38462em;
  font-size: 13px;
  font-size: 1.3rem;
  text-align: center;
  line-height: 1;
  border-radius: 3px;
  color: #FFF;
}
.rank-sec-data li:before,
.rank-sec-data2 li:before {
  margin-right: 0.1em;
  font-style: 75%;
  font-family: "icomoon";
  font-weight: normal;
}
.rank-sec-data .maru2,
.rank-sec-data .maru,
.rank-sec-data2 .maru2,
.rank-sec-data2 .maru {
  background: #932A40;
}
.rank-sec-data .maru2:before,
.rank-sec-data2 .maru2:before {
  content: "\e801";
}
.rank-sec-data .maru:before,
.rank-sec-data2 .maru:before {
  content: "\e64c";
}
.rank-sec-data .batsu,
.rank-sec-data2 .batsu {
  background: #999;
}
.rank-sec-data .batsu:before,
.rank-sec-data2 .batsu:before {
  content: "\e64b";
}
.rank-sec-data .sankaku,
.rank-sec-data2 .sankaku {
  background: #1CA764;
}
.rank-sec-data .sankaku:before,
.rank-sec-data2 .sankaku:before {
  content: "\e800";
}

.rank-sec-data2 {
  padding: 1.5em 0 0 0;
  margin-bottom: -0.5em;
  border: 0;
}
.rank-sec-data2 .maru2,
.rank-sec-data2 .maru {
  background: #1B2F66;
}

.rank-sec-kuchi,
.rank-sec-point,
.rank-sec dl.item_camp {
  position: relative;
  padding: 1.66667em 1em 1em 1em;
  margin: 2em 0 1.33333em 0;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2;
  background: #F2F2F2;
}
.rank-sec-kuchi:before, .rank-sec-kuchi:after,
.rank-sec-point:before,
.rank-sec-point:after,
.rank-sec dl.item_camp:before,
.rank-sec dl.item_camp:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.rank-sec-kuchi:before,
.rank-sec-point:before,
.rank-sec dl.item_camp:before {
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: #CCC transparent transparent transparent;
}
.rank-sec-kuchi:after,
.rank-sec-point:after,
.rank-sec dl.item_camp:after {
  border-style: solid;
  border-width: 0 0 14px 14px;
  border-color: transparent transparent #FFF transparent;
}
.rank-sec-kuchi .ttl,
.rank-sec-point .ttl,
.rank-sec dl.item_camp .ttl {
  display: inline-block;
  position: absolute;
  top: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 11.53846em;
  padding: 0.53846em;
  font-size: 13px;
  font-size: 1.3rem;
  font-weight: normal;
  text-align: center;
  color: #FFF;
  line-height: 1;
  background: #DC3704;
  border-radius: 1.07692em;
}
.rank-sec-kuchi .ttl:before,
.rank-sec-point .ttl:before,
.rank-sec dl.item_camp .ttl:before {
  margin-right: 0.5em;
  content: "\e635";
  font-family: "icomoon";
}
.rank-sec-kuchi .ttl:after,
.rank-sec-point .ttl:after,
.rank-sec dl.item_camp .ttl:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  border-style: solid;
  border-width: 7px 5px 0 5px;
  border-color: #DC3704 transparent transparent transparent;
  -webkit-transform: translateX(-5px);
  transform: translateX(-5px);
}

.rank-sec-point li {
  position: relative;
  padding-left: 1em;
  margin-top: 0.33333em;
  font-size: 15px;
  font-size: 1.5rem;
}
.rank-sec-point li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.33333em;
  border-style: solid;
  border-width: 0.26667em 0 0.26667em 0.53333em;
  border-color: transparent transparent transparent #F96335;
}
.rank-sec-point .ttl {
  width: 7.69231em;
  background: #1CA764;
}
.rank-sec-point .ttl:after {
  border-color: #1CA764 transparent transparent transparent;
}

.rank-sec-btn {
  font-size: 18px;
  font-size: 1.8rem;
  text-align: center;
}
.rank-sec-btn a {
  position: relative;
  display: inline-block;
  padding: 0.66667em 1.38889em;
  font-weight: bold;
  color: #FFF;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
  line-height: 1.4;
  background: rgb(96.1, 193.4, 146.5);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(96.1, 193.4, 146.5)), to(#1CA764));
  background: linear-gradient(to bottom, rgb(96.1, 193.4, 146.5) 0%, #1CA764 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$clr02", endColorstr="$clr01",GradientType=0 );
  -webkit-box-shadow: 0 0 0.27778em rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0.27778em rgba(0, 0, 0, 0.2);
  border-radius: 0.27778em;
}
.rank-sec-btn a:after {
  content: "\e62b";
  margin: 0 0 0 0.3em;
  font-family: "icomoon";
  font-weight: normal;
  line-height: 1;
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}
.pick .rank-sec-btn a {
  background: rgb(138.1, 174.5, 228.4);
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(138.1, 174.5, 228.4)), to(#588CD9));
  background: linear-gradient(to bottom, rgb(138.1, 174.5, 228.4) 0%, #588CD9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="$clr02", endColorstr="$clr01",GradientType=0 );
  -webkit-box-shadow: 0 0 0.27778em rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0.27778em rgba(0, 0, 0, 0.2);
}
.pick .rank-sec-btn a .name {
  margin-right: 0.25em;
  font-size: 14px;
  font-size: 1.4rem;
}
.pick .rank-sec-btn a .sub {
  display: inline-block;
}
.pick .rank-sec-btn a:after {
  content: normal;
}
.pick .rank-sec-btn a:before {
  content: "\e62b";
  margin: 0 0.3em 0 0;
  font-family: "icomoon";
  font-weight: normal;
  line-height: 1;
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}

.rank-sec dl.item_camp {
  margin-top: -0.5em;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 1em;
}
.rank-sec dl.item_camp dt {
  font-size: 15px;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 0;
  position: relative;
  background: none;
  color: #DC3704;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.rank-sec dl.item_camp dt::after {
  content: normal;
}
.rank-sec dl.item_camp dt::before {
  margin-right: 0.5em;
  content: "\e60e";
  font-weight: normal;
  font-family: "icomoon";
}
.rank-sec dl.item_camp dd {
  margin-top: 0;
  font-size: 15px;
  font-size: 1.5rem;
}
.rank-sec dl.item_camp dd .fb {
  font-weight: normal;
}
.rank-sec dl.item_camp dd .orange {
  color: inherit;
}
.rank-sec dl.item_camp img {
  display: none;
}
.rank-sec dl.item_camp dt.sp {
  margin-top: 0.5em;
}
.rank-sec dl.item_camp dt.sp::before {
  content: "\e9d9";
}
.rank-sec dl.item_camp dd.sp a {
  display: inline-block;
}
.rank-sec dl.item_camp dd.sp a::before {
  content: "\ea42";
  font-weight: normal;
  font-family: "icomoon";
  font-size: 80%;
}
.rank-sec dl.item_camp dd.sp .mk {
  background: none;
}

.rank-sec-data + .rank-sec-btn {
  margin-top: 1.11111em;
}

/*　------------------------------------その他の口コミ-----------------------------------　*/
.rank-other {
  padding: 0 1em;
  margin-top: 3em;
}
.rank-other:before {
  content: "";
  display: block;
  height: 1.5em;
  margin: 0 -1em 2.5em -1em;
  border-bottom: solid 5px #1B2F66;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.1)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
}
.rank-other h2 {
  margin: 1.11111em 0;
  padding: 0.83333em 0.83333em;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
  color: #FFF;
  background: #1B2F66;
  border-radius: 0.27778em;
}

.rank-oth-item {
  border-top: solid 1px #CCC;
  padding: 2em 0;
}
.rank-oth-item h3 {
  padding-bottom: 0.83333em;
  font-size: 18px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.4;
}
.rank-oth-item h3:before {
  content: "\e62b";
  margin: 0 0.3em 0 0;
  font-family: "icomoon";
  font-weight: normal;
  line-height: 1;
  color: #0047BA;
  -webkit-transform: translateY(-0.6em);
  transform: translateY(-0.6em);
}
.rank-oth-item .rvw-box {
  position: relative;
  padding: 1em;
  font-size: 15px;
  font-size: 1.5rem;
  line-height: 2;
  background: #F2F2F2;
  overflow: hidden;
}
.rank-oth-item .rvw-box:before, .rank-oth-item .rvw-box:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.rank-oth-item .rvw-box:before {
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: #CCC transparent transparent transparent;
}
.rank-oth-item .rvw-box:after {
  border-style: solid;
  border-width: 0 0 14px 14px;
  border-color: transparent transparent #FFF transparent;
}
.rank-oth-item .rvw-box + .rvw-box {
  margin-top: 0.66667em;
}
.rank-oth-item .rvw-box .data:before,
.rank-oth-item .rvw-box .txt:first-child:before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-size: cover;
  vertical-align: -0.2em;
}
.rank-oth-item .rvw-box .data {
  display: block;
  color: #1B2F66;
}
.rank-oth-item .rvw-box .data:before {
  margin-right: 0.5em;
}
.rank-oth-item .rvw-box .txt {
  display: block;
  height: auto;
  overflow: hidden;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.rank-oth-item .rvw-box .txt.is-close {
  height: 6em !important;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}
.rank-oth-item .rvw-box .rvw-more {
  position: absolute;
  bottom: 1em;
  padding-right: 2em;
  display: block;
  width: 100%;
  text-align: right;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(242, 242, 242, 0)), to(#f2f2f2));
  background: linear-gradient(to bottom, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
}
.rank-oth-item .rvw-box .rvw-more span {
  display: inline-block;
  padding: 0 0.25em 0 0.5em;
  background: #F2F2F2;
  text-decoration: underline;
  color: #0047BA;
}
.rank-oth-item .rvw-box .rvw-more span:hover {
  color: #932A40;
  cursor: pointer;
}
.rank-oth-item .rvw-good .data:before,
.rank-oth-item .rvw-good .txt:first-child:before {
  background-image: url("../images/ranking/icon-good.svg");
}
.rank-oth-item .rvw-soso .data:before,
.rank-oth-item .rvw-soso .txt:first-child:before {
  background-image: url("../images/ranking/icon-soso.svg");
}
.rank-oth-item .rvw-bad .data:before,
.rank-oth-item .rvw-bad .txt:first-child:before {
  background-image: url("../images/ranking/icon-bad.svg");
}

/*　------------------------------------総評／口コミ募集中-----------------------------------　*/
.rank-comment,
.rank-vote {
  padding: 0 1em;
}
.rank-comment h2,
.rank-vote h2 {
  margin: 0 -0.41667em 1.04167em -0.41667em;
  padding: 0.625em 0.41667em;
  font-size: 24px;
  font-size: 2.4rem;
  color: #1B2F66;
  border-top: solid 4px #1B2F66;
  border-bottom: solid 4px #1B2F66;
  -webkit-box-shadow: 0 2px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px rgba(0, 0, 0, 0.1);
}
.rank-comment h2 .sub,
.rank-vote h2 .sub {
  display: block;
  margin-bottom: 0.21429em;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  letter-spacing: 0;
  text-shadow: none;
}
.rank-comment p,
.rank-vote p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2;
}

.rank-vote {
  margin-top: 3em;
}

/*　------------------------------------それ以外のパーツ-----------------------------------　*/
.rank-note {
  margin: 1em 0 3em 0;
  padding: 0 1em;
}
.rank-note li {
  position: relative;
  margin-top: 0.35714em;
  padding-left: 1.25em;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: #999;
}
.rank-note li a {
  color: #999;
}
.rank-note li:first-child {
  margin-top: 0;
}
.rank-note li:before {
  content: "※";
  position: absolute;
  left: 0;
}

/*--------------------------------------------------------*/
/*　ランキングページCSS（PCビュー）　*/
/*--------------------------------------------------------*/
@media only screen and (min-width: 768px) {
  /*　------------------------------------ランキング項目-----------------------------------　*/
  .rank-sec:before {
    left: 0;
    top: 0.5em;
    width: 6em;
    height: 7em;
  }
  .rank-sec:after {
    left: 6em;
  }
  .rank-sec.no1:before {
    background-image: url("../images/ranking/rank_no1_pc.svg");
  }
  .rank-sec.no2:before {
    background-image: url("../images/ranking/rank_no2_pc.svg");
  }
  .rank-sec.no3:before {
    background-image: url("../images/ranking/rank_no3_pc.svg");
  }
  .rank-sec.no4:before {
    background-image: url("../images/ranking/rank_no4_pc.svg");
  }
  .rank-sec.no5:before {
    background-image: url("../images/ranking/rank_no5_pc.svg");
  }
  .rank-sec.no6:before {
    background-image: url("../images/ranking/rank_no6_pc.svg");
  }
  .rank-sec.no7:before {
    background-image: url("../images/ranking/rank_no7_pc.svg");
  }
  .rank-sec.no8:before {
    background-image: url("../images/ranking/rank_no8_pc.svg");
  }
  .rank-sec.no9:before {
    background-image: url("../images/ranking/rank_no9_pc.svg");
  }
  .rank-sec.no10:before {
    background-image: url("../images/ranking/rank_no10_pc.svg");
  }
  .rank-sec.no11:before {
    background-image: url("../images/ranking/rank_no11_pc.svg");
  }
  .rank-sec.no12:before {
    background-image: url("../images/ranking/rank_no12_pc.svg");
  }
  .rank-sec.no13:before {
    background-image: url("../images/ranking/rank_no13_pc.svg");
  }
  .rank-sec.no14:before {
    background-image: url("../images/ranking/rank_no14_pc.svg");
  }
  .rank-sec.no15:before {
    background-image: url("../images/ranking/rank_no15_pc.svg");
  }
  .rank-sec.no16:before {
    background-image: url("../images/ranking/rank_no16_pc.svg");
  }
  .rank-sec.no17:before {
    background-image: url("../images/ranking/rank_no17_pc.svg");
  }
  .rank-sec.no18:before {
    background-image: url("../images/ranking/rank_no18_pc.svg");
  }
  .rank-sec.no19:before {
    background-image: url("../images/ranking/rank_no19_pc.svg");
  }
  .rank-sec.no20:before {
    background-image: url("../images/ranking/rank_no20_pc.svg");
  }
  .rank-sec.pick:before {
    background-image: url("../images/ranking/rank_pick_pc.svg");
  }
  .rank-sec.kuchi:before {
    background-image: url("../images/ranking/rank_kuchi_pc.svg");
  }
  .rank-sec-head {
    min-height: 14em;
    padding: 0 2.2em 3em 0;
    margin: 0 0 2em 23em;
  }
  .rank-sec-head:before {
    margin: 0 -3.2em 4em -24em;
  }
  .rank-sec-head figure {
    left: -23em;
    top: 5.5em;
    width: 20.2em;
  }
  .rank-sec-head h2 {
    font-size: 22px;
    font-size: 2.2rem;
  }
  .rank-sec-head h2 + p {
    margin: 1em 0 0 0;
    line-height: 1;
    font-size: 10px;
    font-size: 1rem;
  }
  .rank-sec-txt {
    margin-left: 23em;
  }
  .rank-sec-txt h3 {
    margin: 0 0 0.55556em 0;
    font-size: 18px;
    font-size: 1.8rem;
  }
  .rank-sec-data2,
  .rank-sec-data {
    margin-left: 23em;
  }
  .rank-sec-kuchi,
  .rank-sec-point {
    padding: 2em 1.33333em 1.33333em 1.33333em;
    margin: 2em 0 1.33333em 15.33333em;
  }
  .rank-sec-btn {
    margin-left: 12.77778em;
    font-size: 18px;
    font-size: 1.8rem;
  }
  .rank-sec-btn a {
    display: block;
  }
  .pick .rank-sec-btn a .name {
    font-size: 18px;
    font-size: 1.8rem;
  }
  .rank-sec dl.item_camp {
    padding: 1.2em 1.33333em;
    margin-left: 15.33333em;
  }
}
@media only screen and (min-width: 1024px) {
  /*　------------------------------------イントロ------------------------------------　*/
  .rank-intro {
    padding: 0;
  }
  .rank-intro h2 {
    margin: 0.38462em 0 1.53846em 0;
    padding: 0 0 0.19231em 0;
    font-size: 26px;
    font-size: 2.6rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
  }
  /*　------------------------------------ランキング項目-----------------------------------　*/
  .rank-sec {
    padding: 0;
  }
  .rank-sec-head:before {
    margin: 0 -2.2em 4em -23em;
  }
  /*　------------------------------------その他の口コミ-----------------------------------　*/
  .rank-other {
    padding: 0;
    margin-top: 4em;
  }
  .rank-other:before {
    margin: 0 0 3em 0;
  }
  .rank-other h2 {
    margin: 1.5em 0 0.5em 0;
    padding: 0.75em 0.75em;
    color: #FFF;
    text-align: center;
    border-radius: 0.25em;
  }
  .rank-oth-item {
    overflow: hidden;
    border-top: solid 1px #CCC;
    padding: 2em 0;
  }
  h2 + .rank-oth-item {
    border: none;
  }
  .rank-oth-item:last-child {
    border-bottom: solid 1px #CCC;
  }
  .rank-oth-item h3 {
    position: relative;
    float: left;
    width: 11.11111em;
    padding: 0 0 0.83333em 0.83333em;
    margin-right: -11.11111em;
    font-size: 18px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .rank-oth-item h3:before {
    position: absolute;
    left: 0;
    -webkit-transform: translateY(0.1em);
    transform: translateY(0.1em);
  }
  .rank-oth-item .rvw-box {
    padding: 1.33333em;
    margin-left: 15.33333em;
  }
  .rank-oth-item .rvw-box .rvw-more {
    bottom: 1.33333em;
    padding-right: 2.66667em;
  }
  /*　------------------------------------総評／口コミ募集中-----------------------------------　*/
  .rank-comment,
  .rank-vote {
    padding: 0;
  }
  .rank-comment h2,
  .rank-vote h2 {
    margin: 1.53846em 0;
    padding: 0 0 0.19231em 0;
    font-size: 26px;
    font-size: 2.6rem;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    border-top: none;
  }
  /*　------------------------------------それ以外のパーツ-----------------------------------　*/
  .rank-note {
    margin: 4em 0;
    padding: 0;
  }
  .rank-note li {
    margin-top: 0.41667em;
    font-size: 12px;
    font-size: 1.2rem;
  }
}
/*--------------------------------------------------------*/
/*　ランキングページCSS（留学カテゴリ用addファイル）　*/
/*--------------------------------------------------------*/
.author {
  margin-inline: 1em;
}
@media only screen and (min-width: 1024px) {
  .author {
    margin-inline: 0;
  }
}

.rank-abroad-inner {
  padding: 0 1em;
}
.rank-abroad-inner p {
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 2;
}
@media only screen and (min-width: 1024px) {
  .rank-abroad-inner {
    padding: 0;
  }
}

.rank-sec-head::after {
  content: normal;
}

.rank-score-ttl {
  display: block;
  margin-block: 0.45455em 0.18182em;
  font-size: 11px;
  font-size: 1.1rem;
  color: #1B2F66;
}
.rank-score-ttl::after {
  content: "：";
}
@media only screen and (min-width: 1024px) {
  .rank-score-ttl {
    margin-block: 0.83333em 0.16667em;
    font-size: 12px;
    font-size: 1.2rem;
  }
}

.rank-sec-city {
  position: relative;
  margin-block: 1.7em 1.5em;
  padding: 3.5em 1.5em 1em 1.5em;
  background: #F2F2F2;
  border-radius: 0.3em;
}
.rank-sec-city dt {
  padding: 0.53846em 1.15385em 0.46154em 1.15385em;
  font-size: 13px;
  font-size: 1.3rem;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  background: #588CD9;
  color: #FFF;
  line-height: 1;
  border-radius: 0.23077em 0 0.46154em 0;
}
.rank-sec-city dd {
  font-size: 14px;
  font-size: 1.4rem;
}