@charset 'utf-8';

/* =========================================================
 PC・スマホ共通
========================================================= */
.therapistBox::after {
  content: "";
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}

.therapistBox:nth-child(1)::after {
  background-image: url(/img/ranking/no1.png);
}

.therapistBox:nth-child(2)::after {
  background-image: url(/img/ranking/no2.png);
}

.therapistBox:nth-child(3)::after {
  background-image: url(/img/ranking/no3.png);
}

.therapistBox:nth-child(4)::after {
  background-image: url(/img/ranking/no4.png);
}

.therapistBox:nth-child(5)::after {
  background-image: url(/img/ranking/no5.png);
}

/* =========================================================
 PC用
========================================================= */
@media screen and (min-width: 981px) {
  .girlsBlock {
    margin-bottom: 45px;
  }

  .therapistBox {
    width: 191px;
    margin-right: 6px;
  }

  .therapistBox:nth-of-type(4n) {
    margin-right: 6px;
  }

  .therapistBox:nth-of-type(5n) {
    margin-right: 0;
  }

  .therapistBox::after {
    width: 50px;
    height: 39px;
    top: 3px;
    left: 3px;
  }

  .therapistGuidance {
    height: 26px;
  }

  .therapistGuidance p {
    font-size: 12px;
    line-height: 15px;
  }

  .therapistGuidance p.kanda span::after {
    content: "神田";
  }

  .therapistGuidance p.ginza span::after {
    content: "銀座";
  }

  .therapistGuidance p.gotanda span::after {
    content: "五反田";
  }

  .therapistGuidance p.ebisu span::after {
    content: "恵比寿";
  }

  .therapistGuidance p.ikebukuro span::after {
    content: "池袋";
  }

  .therapistGuidance p.shinbashi span::after {
    content: "新橋";
  }

  .therapistGuidance p.kinshicho span::after {
    content: "錦糸町";
  }

  .therapistGuidance p.akihabara span::after {
    content: "秋葉原";
  }

  .therapistGuidance p>span>span {
    display: none;
  }

  span.workTime {
    font-size: 12px;
  }

  p.therapistName {
    font-size: 17px;
    line-height: 1.5;
    padding-top: 5px;
  }

  p.therapistName span {
    font-size: 12px;
  }

  p.therapistSize {
    font-size: 14px;
    margin-bottom: 8px;
  }

  .discount {
    right: -33px;
    bottom: 19px;
  }

}

/* =========================================================
 スマホ用
========================================================= */
@media screen and (max-width: 980px) {
  .middleContents {
    margin-top: 6%;
  }

  .girlsBlock {
    margin-top: 5%;
    margin-bottom: 9%;
  }

  .therapistBox::after {
    width: calc(50vw * 0.23);
    height: calc(39vw * 0.23);
    top: 0.5%;
    left: 0.2%;
  }

  .therapistBox:nth-child(even) {
    margin-right: 2%;
  }

  .therapistBox:nth-child(odd):not(:first-child) {
    margin-right: 0;
  }

  .therapistBox:first-child {
    width: 72%;
    margin: 0 auto 5%;
    padding: 3%;
  }

  .therapistBox:first-child::after {
    width: calc(50vw * 0.34);
    height: calc(39vw * 0.34);
    top: 2.6%;
    left: 4.5%;
  }

  .therapistBox:first-child .therapistSchedule {
    border: 1px solid #c2ad61;
  }

  .therapistBox:first-child .therapistGuidance p span {
    font-size: 3.8vw;
  }

  .therapistBox:first-child .therapistSchedule .workDeta .workTime {
    font-size: 3.8vw;
  }

  .therapistBox:first-child .therapistSchedule .therapistDeta .therapistName {
    font-size: 5.2vw;
  }

  .therapistBox:first-child .therapistSchedule .therapistDeta .therapistName span {
    font-size: 4.3vw;
  }

  .therapistBox:first-child .therapistSchedule .therapistDeta .therapistSize {
    font-size: 3.8vw;
  }

  .therapistBox:first-child .discount {
    width: 45vw;
    bottom: 7vw;
    right: -8vw;
}
}