@charset "UTF-8";
#main #ranking {
  max-width: 750px;
  width: auto;
  margin: 0px auto;
  background-color: #def;
  background-image: url("../img/bg_rank_01.jpg");
  background-size: 100% auto;
}
#main #ranking * {
  width: auto;
  height: auto;
  margin: 0px;
  padding: 0px;
  background-color: transparent;
  color: #444;
  font-family: "Lato", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "游ゴシック体", "游ゴシック Medium", "Yu Gothic Medium", YuGothic, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#main #ranking > .header > .title img {
  width: 100%;
  height: auto;
}
#main #ranking > .items {
  padding-bottom: 3vw;
  list-style: none;
}
#main #ranking > .items > .item.-rank {
  position: relative;
  margin: 10vw 2vw 2vw;
  background-color: #fff;
  border-style: solid;
  border-width: 2vw;
}
#main #ranking > .items > .item.-rank > .header {
  margin: 3vw auto;
}
#main #ranking > .items > .item.-rank > .header > .pref {
  position: absolute;
  top: -8vw;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 14vw;
  height: 14vw;
}
#main #ranking > .items > .item.-rank > .header > .pref > img {
  width: 100%;
  height: auto;
}
#main #ranking > .items > .item.-rank > .header > .title {
  text-align: center;
  font-size: 6vw;
  line-height: 1.25em;
  font-weight: 900;
}
#main #ranking > .items > .item.-rank > .header > .title > .catch {
  display: block;
  font-size: 4vw;
  line-height: 1.5em;
  font-weight: 700;
}
#main #ranking > .items > .item.-rank > .content > .image {
  padding: 0px 4vw;
}
#main #ranking > .items > .item.-rank > .content > .image > img {
  width: 100%;
  height: auto;
}
#main #ranking > .items > .item.-rank > .content > .comment {
  position: relative;
  padding: 4vw;
}
#main #ranking > .items > .item.-rank > .content > .comment > .title > img {
  display: block;
  width: 70vw;
  height: auto;
  margin: 0px auto 4vw;
}
#main #ranking > .items > .item.-rank > .content > .comment > .text {
  margin-bottom: 4vw;
  text-align: justify;
  font-size: 4vw;
  line-height: 1.5em;
}
#main #ranking > .items > .item.-rank > .content > .comment > .text + .title {
  margin-top: 8vw;
}
#main #ranking > .items > .item.-rank > .content > .comment > .text > .reviewer {
  display: block;
  margin-top: 0.5em;
  text-align: right;
}
#main #ranking > .items > .item.-rank > .content > .comment > .btn {
  display: block;
  width: 70vw;
  margin: 4vw auto 8vw;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  transform: -webkit- scale(1);
  transform: scale(1);
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
}
#main #ranking > .items > .item.-rank > .content > .comment > .btn img {
  width: 100%;
  height: auto;
}
#main #ranking > .items > .item.-rank > .link {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  inset: 0px;
}
#main #ranking > .items > .item.-rank:hover > .content > .comment > .btn {
  transform: -webkit- scale(1.02);
  transform: scale(1.02);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
#main #ranking > .items > .item.-rank.-rank-1 {
  border-color: #ff6347;
}
#main #ranking > .items > .item.-rank.-rank-1 header h3 span.catch {
  color: #ff6347;
}
#main #ranking > .items > .item.-rank.-rank-2 {
  border-color: #9acd32;
}
#main #ranking > .items > .item.-rank.-rank-2 header h3 span.catch {
  color: #9acd32;
}
#main #ranking > .items > .item.-rank.-rank-3 {
  border-color: #48d1cc;
}
#main #ranking > .items > .item.-rank.-rank-3 header h3 span.catch {
  color: #48d1cc;
}
#main #ranking > .items > .item.-rank.-rank-4 {
  border-color: #0053b2;
}
#main #ranking > .items > .item.-rank.-rank-4 header h3 span.catch {
  color: #0053b2;
}
#main #ranking > .items > .item.-rank.-rank-5 {
  border-color: #d3a0dd;
}
#main #ranking > .items > .item.-rank.-rank-5 header h3 span.catch {
  color: #d3a0dd;
}
#main #ranking > .items > .item.-rank.-rank-6 {
  border-color: #f099bf;
}
#main #ranking > .items > .item.-rank.-rank-6 header h3 span.catch {
  color: #f099bf;
}
#main #ranking > .items > .item.-rank.-rank-7 {
  border-color: #538236;
}
#main #ranking > .items > .item.-rank.-rank-7 header h3 span.catch {
  color: #538236;
}
#main #ranking > .items > .item.-rank.-rank-8 {
  border-color: #20aee5;
}
#main #ranking > .items > .item.-rank.-rank-8 header h3 span.catch {
  color: #20aee5;
}
#main #ranking > .items > .item.-rank.-rank-9 {
  border-color: #f6cc17;
}
#main #ranking > .items > .item.-rank.-rank-9 header h3 span.catch {
  color: #f6cc17;
}
#main #ranking > .items > .item.-rank.-rank-10 {
  border-color: #ca0066;
}
#main #ranking > .items > .item.-rank.-rank-10 header h3 span.catch {
  color: #ca0066;
}
#main #ranking > .items > .item.-movie {
  position: relative;
  margin: 2vw;
}
#main #ranking > .items > .item.-movie > .title > img {
  display: block;
  width: 70vw;
  height: auto;
  margin: 4vw auto;
}
#main #ranking > .items > .item.-movie > .movie {
  position: relative;
}
#main #ranking > .items > .item.-movie > .movie::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
#main #ranking > .items > .item.-movie > .movie > .iframe {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  inset: 0px;
  width: 100%;
  height: 100%;
  background-color: #000;
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.3);
}