@charset "UTF-8";

.sp_only {
  display: none !important;
}

a img {
  transition: opacity 300ms !important;
}

.bredlist.lp {
  margin: 60px auto;
  width: 1260px;
  font-size: 12px;
}

.flex {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

.fw {
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}

.fnw {
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.jcsb {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.jcc {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.jcfs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.jcfe {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.aic {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.aie {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

/************ fade **********/
.fade {
  transition: opacity 2000ms;
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0;
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.fade.onView {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/****************************/
/* フォント設定はいつも同じようにしてください */
#Ranking_210210 {
  font-family: toppan-bunkyu-mincho-pr6n, serif;
  color: #656565;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

#Ranking_210210 a {
  color: #656565 !important;
}

#Ranking_210210 img {
  width: 100%;
}

#Ranking_210210 .content_wrap {
  width: 1260px;
  margin: 0 auto;
  position: relative;
}

/* ===================
	title
=================== */

#Ranking_210210 .title .content_wrap .title_img {
  width: 339px;
  margin: 60px auto 0;
}

#Ranking_210210 .title .content_wrap .title_date_img {
  width: 147px;
  margin: 10px auto 0;
}

/* ===================
	credit
=================== */

#Ranking_210210 .credit {
  font-size: 12px;
  line-height: 20px;
  margin-top: 10px;
  letter-spacing: 0.1em;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
}

#Ranking_210210 .credit-price .before {
  text-decoration: line-through;
}

#Ranking_210210 .credit-price .after {
  color: #f5315b;
}

/* ===================
	共通
=================== */
#Ranking_210210 .rank1 {
  width: 320px;
  margin: 32px auto 0;
  position: relative;
}

#Ranking_210210 .rank1 img {
  position: relative;
  z-index: 1;
  /* visibility: hidden; */
}

#Ranking_210210 .credit-area {
  text-align: center;
}

#Ranking_210210 .content_wrap .credit-area .num {
  font-family: classico-urw, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 19px;
}

#Ranking_210210 .content_wrap .credit-area .credit-name {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.3333333333;
}

#Ranking_210210 .content_wrap .credit-area .credit-price {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

#Ranking_210210 .rank1 .credit-area {
  content: "";
  width: 100%;
  top: 381px;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  position: absolute;
  z-index: 2;
}

#Ranking_210210 .rank1 .credit-area p {
  color: #fff;
}

#Ranking_210210 .content_wrap ul {
  width: 844px;
  margin: 22px auto 0;
  justify-content: space-between;
}

#Ranking_210210 .content_wrap ul li {
  width: 200px;
}

#Ranking_210210 .content_wrap ul li img {
  width: 100%;
  margin: 0 auto;
}

#Ranking_210210 .content_wrap ul li .credit-area {
  margin-top: 11px;
}

#Ranking_210210 .content_wrap .rank1 .credit-area .credit-name {
  margin-top: 9px;
}

/* ===================
	sec01
=================== */

.sec01._02 {
  margin-top: 122px;
}
#Ranking_210210 .sub_ttl {
  width: 1260px;
  margin: 50px auto 0;
  border-top: solid 1px;
}

#Ranking_210210 .sub_ttl figure {
  width: 262px;
  margin: -7px auto 0;
  background-color: #fff;
  padding: 0 10px;
}

#Ranking_210210 .sec01._02 .sub_ttl figure {
  width: 246px;
  margin: -7px auto 0;
  background-color: #fff;
  padding: 0 10px;
}

#Ranking_210210 .sub_ttl2 {
  width: 1260px;
  margin: 142px auto 0;
  border-top: solid 1px;
}

#Ranking_210210 .sub_ttl2 figure {
  width: 300px;
  margin: -25px auto 0;
}

#Ranking_210210 .sec01 .content_wrap .title_img {
  width: 80px;
  margin: 24px auto 0;
}

#Ranking_210210 .sec01 .content_wrap ul.list_02 {
  margin-top: 20px;
}

/* ===================
	sec02
=================== */
#Ranking_210210 .sec02 .content_wrap .title_img {
  width: 150px;
  margin: 78px auto 0;
}

#Ranking_210210 .sec02 .content_wrap ul.list_02 {
  margin-top: 20px;
}

/* ===================
	sec03
=================== */
#Ranking_210210 .sec03 .content_wrap .title_img {
  width: 90px;
  margin: 78px auto 0;
}

#Ranking_210210 .sec03 .rank1 .credit-area {
  top: 373px;
}

/* ===================
	sec04
=================== */
#Ranking_210210 .sec04 .content_wrap .title_img {
  width: 82px;
  margin: 78px auto 0;
}

#Ranking_210210 .sec04 .rank1 .credit-area {
  top: 373px;
}

/* ===================
	btn
=================== */

#Ranking_210210 .btn_all {
  width: 460px;
  margin: 106px auto 0;
}

@media all and (-ms-high-contrast: none) {
  #Ranking_210210 .content_wrap .credit-area .credit-name {
    margin-top: 17px;
  }

  #Ranking_210210 .sec02 .content_wrap .title_img,
  #Ranking_210210 .sec03 .content_wrap .title_img {
    margin-top: 71px;
  }

  #Ranking_210210 .sub_ttl2 {
    margin-top: 136px;
  }
}

/* タブレット */
@media only screen and (max-width: 1200px) and (min-width: 561px) {
  .bredlist.lp {
    margin: calc(60 * (100vw / 1600)) auto;
    width: calc(1260 * (100vw / 1600));
    font-size: calc(12 * (100vw / 1600));
  }

  #Ranking_210210 .content_wrap {
    width: calc(1260 * (100vw / 1600));
  }

  /* ===================
	title
  =================== */

  #Ranking_210210 .title .content_wrap .title_img {
    width: calc(339 * (100vw / 1600));
    margin: calc(60 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .title .content_wrap .title_date_img {
    width: calc(171 * (100vw / 1600));
    margin: calc(18 * (100vw / 1600)) auto 0;
  }

  /* ===================
	credit
  =================== */

  #Ranking_210210 .credit {
    font-size: calc(12 * (100vw / 1600));
    line-height: calc(20 * (100vw / 1600));
    margin-top: calc(15 * (100vw / 1600));
  }

  /* ===================
	共通
  =================== */
  #Ranking_210210 .rank1 {
    width: calc(320 * (100vw / 1600));
    margin: calc(32 * (100vw / 1600)) auto 0;
    position: relative;
  }

  #Ranking_210210 .rank1 img {
    position: relative;
    z-index: 1;
  }

  #Ranking_210210 .credit-area {
    text-align: center;
  }

  #Ranking_210210 .content_wrap .credit-area .num {
    font-family: classico-urw, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: calc(19 * (100vw / 1600));
  }

  #Ranking_210210 .content_wrap .credit-area .credit-name {
    margin-top: calc(10 * (100vw / 1600));
    font-size: calc(12 * (100vw / 1600));
    letter-spacing: 0.06em;
    line-height: 1.3333333333;
  }

  #Ranking_210210 .content_wrap .credit-area .credit-price {
    margin-top: calc(6 * (100vw / 1600));
    font-size: calc(12 * (100vw / 1600));
    letter-spacing: 0.12em;
  }

  #Ranking_210210 .rank1 .credit-area {
    content: "";
    top: calc(381 * (100vw / 1600));
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    z-index: 2;
  }

  #Ranking_210210 .rank1 .credit-area p {
    color: #fff;
  }

  #Ranking_210210 .content_wrap ul {
    width: calc(844 * (100vw / 1600));
    margin: calc(22 * (100vw / 1600)) auto 0;
    justify-content: space-between;
  }

  #Ranking_210210 .content_wrap ul li {
    width: calc(200 * (100vw / 1600));
  }

  #Ranking_210210 .content_wrap ul li img {
    width: 100%;
    margin: 0 auto;
  }

  #Ranking_210210 .content_wrap ul li .credit-area {
    margin-top: calc(11 * (100vw / 1600));
  }

  #Ranking_210210 .content_wrap .rank1 .credit-area .credit-name {
    margin-top: calc(9 * (100vw / 1600));
  }

  /* ===================
	sec01
  =================== */
  .sec01._02 {
    margin-top: calc(122 * (100vw / 1600));
  }

  #Ranking_210210 .sub_ttl {
    width: calc(1260 * (100vw / 1600));
    margin: calc(50 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sub_ttl figure {
    width: calc(262 * (100vw / 1600));
    margin: calc(-7 * (100vw / 1600)) auto 0;
    padding: 0 calc(10 * (100vw / 1600));
  }

  #Ranking_210210 .sec01._02 .sub_ttl figure {
    width: calc(246 * (100vw / 1600));
    margin: calc(-7 * (100vw / 1600)) auto 0;
    padding: 0 calc(10 * (100vw / 1600));
  }

  #Ranking_210210 .sub_ttl2 {
    width: calc(1260 * (100vw / 1600));
    margin: calc(105 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sub_ttl2 figure {
    width: calc(300 * (100vw / 1600));
    margin: calc(-25 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sec01 .content_wrap .title_img {
    width: calc(80 * (100vw / 1600));
    margin: calc(24 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sec01 .content_wrap ul.list_02 {
    margin-top: calc(20 * (100vw / 1600));
  }

  #Ranking_210210 .sec01 .content_wrap ul li {
    width: calc(200 * (100vw / 1600));
  }

  /* ===================
	sec02
=================== */

  #Ranking_210210 .sec02 .content_wrap .title_img {
    width: calc(150 * (100vw / 1600));
    margin: calc(74 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sec02 .content_wrap ul.list_02 {
    margin-top: calc(20 * (100vw / 1600));
  }

  #Ranking_210210 .sec02 .content_wrap ul li {
    width: calc(200 * (100vw / 1600));
  }

  /* ===================
	sec03
=================== */

  #Ranking_210210 .sec03 .content_wrap .title_img {
    width: calc(90 * (100vw / 1600));
    margin: calc(78 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sec03 .content_wrap ul li {
    width: calc(200 * (100vw / 1600));
  }

  #Ranking_210210 .sec03 .rank1 .credit-area {
    top: calc(373 * (100vw / 1600));
  }

  /* ===================
	sec04
=================== */

  #Ranking_210210 .sec04 .content_wrap .title_img {
    width: calc(82 * (100vw / 1600));
    margin: calc(78 * (100vw / 1600)) auto 0;
  }

  #Ranking_210210 .sec04 .content_wrap ul li {
    width: calc(200 * (100vw / 1600));
  }

  #Ranking_210210 .sec04 .rank1 .credit-area {
    top: calc(373 * (100vw / 1600));
  }

  /* ===================
	btn
=================== */

  #Ranking_210210 .btn_all {
    width: calc(460 * (100vw / 1600));
    margin: calc(185 * (100vw / 1600)) auto 0;
  }
}