@charset "utf-8";

/* theme original */
:root {
  --main-position: auto;
  --spacing: 0.08em;
}

.h_bar,
#beltbnr_ {
  display: none;
}

html {
  font-size: 62.5%;
}

html::-moz-selection,body::-moz-selection {
  background: #666; /* テキストをドラッグするときの色を指定 */
}

html::selection,body::selection {
  background: #666;
}

body {
  text-size-adjust: 100%; /* 大きくなる文字や小さくなる文字をなくす*/
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

ul,li {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
}

.topContent h2,
.topContent h3,
.topContent p, 
.topContent span,
.topContent a {
  color: rgb(89, 87, 87);
  font-optical-sizing: auto;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.75;
  text-align: justify;
  font-feature-settings: "palt";
}

.topContent a {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* タップアクションを透明にしてる */
}

.font-en {
  font-family: "helvetica-neue-lt-pro", sans-serif;
}

.font-ja {
  font-family: "source-han-sans-japanese", sans-serif;
}

.pc-img {
  display: block;
}

@media(max-width: 768px) {
  .pc-img {
    display: none;
  }
}

/* コンテンツ */
.topContent .l-header .kvArticle .kvSection {
  width: 900px;
  max-width: 100%;
  margin-inline: var(--main-position);
}


.topContent .l-header .kvArticle .kvSection picture {
  display: block;
  width: 100%;
}

.topContent .l-header .kvArticle .kvSection .lead {
  width: 79.49%;
  margin-inline: var(--main-position);
  padding-top: 13.875%;
  padding-bottom: 5px;
}

.topContent .l-header .kvArticle .kvSection .lead p {
  letter-spacing: var(--spacing);
  text-align: center;
}

@media(max-width: 768px) {
  .topContent .l-header .kvArticle .kvSection .lead p {
    text-align: left;
  }
}
.container .kvArticle {
  width: 900px;
  max-width: 100%;
  margin-inline: var(--main-position);
}

.container .kvArticle .kvSection {
  margin-top: 18.465%;
}

.container .kvArticle .kvSection .ranking-content h2 {
  padding-top: 6px;
  padding-bottom: 20px;
  width: 120px;
  margin-inline: var(--main-position);
}

.container .kvArticle .kvSection .ranking-content h2 .num {
  fill: #595757;
}

.container .kvArticle .kvSection .ranking-content h2[data-color="bronze"] .num {
  fill: rgb(184,115,51);
}

.container .kvArticle .kvSection .ranking-content h2[data-color="silver"] .num {
  fill: rgb(192,192,192);
}

.container .kvArticle .kvSection .ranking-content h2[data-color="gold"] .num {
  fill: rgb(195,144,0);
}

.container .kvArticle .kvSection .ranking-content .num .num-small {
  font-size: clamp(20px, 3.5982009vw, 24px);
}

.container .kvArticle .kvSection .ranking-content {
  width: 89.745%;
  margin-inline: var(--main-position);
}

.container .kvArticle .kvSection .ranking-content .content-block {
  display: -webkit-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media(max-width: 768px) {
  .container .kvArticle .kvSection .ranking-content .content-block {
    flex-wrap: wrap;
    justify-content: center;
  }
}

.container .kvArticle .kvSection .ranking-content .content-block .img {
  width: 42%;
  position: relative;
  overflow: hidden;
}


@media(max-width: 768px) {
  .container .kvArticle .kvSection .ranking-content .content-block .img {
    width: 100%;
  }
}

.container .kvArticle .kvSection .ranking-content .content-block .img a {
  display: block;
  height: 100%;
}

.container .kvArticle .kvSection .ranking-content .content-block .img a img {
  opacity: 0;
}

/* .container .kvArticle .kvSection .ranking-content .content-block .img:hover img {
  filter: grayscale(0);
} */

.animation-bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 10;
  background: rgb(58,87,87);
  opacity: 1;
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail {
  width: 52%;
}

@media(max-width: 768px) {
  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail {
    width: 88.575%;
  }
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail h3 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: var(--spacing);
}

@media(max-width: 768px) {
  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail h3 {
    margin-top: 8.71%;
  }
}

.container .kvArticle .kvSection .ranking-content .content-block__detail .font-ja[data-color="bronze"] {
  color: rgb(184,115,51);
}

.container .kvArticle .kvSection .ranking-content .content-block__detail .font-ja[data-color="silver"] {
  color: rgb(192,192,192);
}

.container .kvArticle .kvSection .ranking-content .content-block__detail .font-ja[data-color="gold"] {
  color: rgb(195,144,0);
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail h3 + p {
  padding-top: 5.165%;
  padding-bottom: 10.65%;
  letter-spacing: var(--spacing);
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  margin-top: 1.615%;
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item p{
  letter-spacing: var(--spacing);
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a {
  padding: 0 3px;
  position: relative;
  z-index: 1;
}

.container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 5%;
    left: 0;
    bottom: 0;
    background: rgb(58,87,87);
  }

@media(min-width: 769px) {
  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a {
    transition: color ease .3s;
  }
  
  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a::after {
    transition: all ease .3s;
  }
  
  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a:hover {
    color: rgb(255,255,255);
  }

  .container .kvArticle .kvSection .ranking-content .content-block .content-block__detail .credit-list .credit-item a:hover::after {
    height: 100%;
  }
}

.topContent .kvArticle .more-btn {
  margin-top: 16.413%;
  margin-bottom: 10.26%;
  width: 79.49%;
  max-width: 500px;
  margin-inline: var(--main-position);
}

.topContent .kvArticle .more-btn a {
  background: rgb(58,87,87);
  border: 1px solid rgb(58,87,87);
  border-radius: 50px;
  color: rgb(255, 255,255);
  text-align: center;
  width: 100%;
  height: 48px;
  line-height: 48px;
  letter-spacing: var(--spacing);
  margin-inline: var(--main-position);
  transition: all .3s;
}

@media(min-width: 769px) {
  .topContent .kvArticle .more-btn a:hover {
    background: transparent;
    color: rgb(58,87,87);
  }
}