@charset "utf-8";

/* =========================================================
	ランキング一覧
========================================================= */
/****************************
見出し装飾
******************************/
.subHeading h3 {
  /* letter-spacing: 0em; */
  /* font-size: 3.6vw; */
}

.subHeading h3:after {
  content: none;
}

.bannerHeadline h2 {
  font-size: 100%;
}

/****************************
ランキングコンテンツ
******************************/
body {
  color: #2f2f2f;
}

main section {
  /* background-color: #FFFFFF; */
}

.rankingBox {
  box-sizing: border-box;
  margin-bottom: 5%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;
  background-color: #2f2f2f;
  color: #ffffff;
  padding: 3% 3% 2%;
}

#rankingContentsHealth .rankingBox:not(:last-child):after {
  /* content: ""; */
  /* display: block; */
  /* position: absolute; */
  /* z-index: 10; */
  /* width: 100%; */
  /* left: 0px; */
  /* border-bottom: solid 1px #2056c8; */
}

#rankingContentsEsthe .rankingBox:not(:last-child):after {
  /* content: ""; */
  /* display: block; */
  /* position: absolute; */
  /* z-index: 10; */
  /* width: 100%; */
  /* left: 0px; */
  /* border-bottom: solid 1px #158039; */
}

#rankingContentsHealth .rankingBox:last-child,
#rankingContentsEsthe .rankingBox:last-child {
  margin-bottom: 0;
}

/*1位*/
#rankingContentsHealth .rankingBox:first-child:after,
#rankingContentsEsthe .rankingBox:first-child:after {}

/*2位*/
#rankingContentsHealth .rankingBox:nth-child(2):after,
#rankingContentsEsthe .rankingBox:nth-child(2):after {}

/*3位*/
#rankingContentsHealth .rankingBox:nth-child(3):after,
#rankingContentsEsthe .rankingBox:nth-child(3):after {}

/****************************
ボックス上部
******************************/
#rankingContentsHealth .rankingBox .rankingBoxTop,
#rankingContentsEsthe .rankingBox .rankingBoxTop {
  /* margin: 1.6% 0 2.4%; */
}

#rankingContentsHealth .rankingBox .topLeft,
#rankingContentsEsthe .rankingBox .topLeft {
  margin-top: 2.7%;
  margin-left: 6%;
  width: 44%;
  position: relative;
}

/*　写真
******************************/
.rankingPhoto {
  /* height: 100%; */
  width: 48%;
  /* padding-top: 3vw; */
  /* margin-right: 0; */
  /* margin-left: auto; */
  position: relative;
  /* z-index: 1; */
}

#rankingContentsHealth .rankingBox .rankingPhoto img,
#rankingContentsEsthe .rankingBox .rankingPhoto img {
  object-fit: cover;
  object-position: 50% 0%;
}

.rankingPhoto a {
  width: 100%;
  height: 100%;
  display: block;
}

/*順位と差分
******************************/
.rankingBoxTop {
  /* display: flex; */
  width: 50%;
  padding: 4vw;
  box-sizing: border-box;
  /* height: 37.5%; */
  margin-bottom: 2.3%;
  position: absolute;
}

.rankingData {
  width: 48%;
  top: 45.9vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.rankingNumber {
  font-size: 1.4em;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

.rankingNumber span {
  font-weight: inherit;
  font-size: 0.8em;
}

.rankingData ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.rankingData li {
  font-size: 1.2em;
  height: 1.5em;
  line-height: 1.5em;
  font-weight: 700;
  text-align: center;
}

.rankingData li.girlsRegion {
  background-color: #1c1c1e;
  width: 44%;
}

.rankingData li.girlsIndustry {
  width: 52%;
}

#rankingContentsHealth .rankingData li.girlsIndustry {
  background-color: #5bc0eb;
}

#rankingContentsEsthe .rankingData li.girlsIndustry {
  background-color: #fb8b24;
}


/*差分
******************************/
#rankingContentsHealth .rankingBox .rankingData .imgRank+p span,
#rankingContentsEsthe .rankingBox .rankingData .imgRank+p span {
  font-size: inherit;
}

#rankingContentsHealth .rankingBox .rankingData .rankUp span,
#rankingContentsEsthe .rankingBox .rankingData .rankUp span {
  color: #ff6b11;
}

#rankingContentsHealth .rankingBox .rankingData .rankUp:before,
#rankingContentsEsthe .rankingBox .rankingData .rankUp:before {
  background-position: top center;
}

#rankingContentsHealth .rankingBox .rankingData .imgRank+p.newMark,
#rankingContentsEsthe .rankingBox .rankingData .imgRank+p.newMark {
  background-color: #ff0000;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  padding: 0 1.8%;
  right: -1.5%;
}

#rankingContentsHealth .rankingBox .rankingData .newMark:before,
#rankingContentsEsthe .rankingBox .rankingData .newMark:before {
  background-position: top center;
  padding: 0% 1.4%;
}

#rankingContentsHealth .rankingBox .rankingData .rankConstant span,
#rankingContentsEsthe .rankingBox .rankingData .rankConstant span {
  color: #2cad47;
}

#rankingContentsHealth .rankingBox .rankingData .rankConstant:before,
#rankingContentsEsthe .rankingBox .rankingData .rankConstant:before {
  background-position: center 50.7%;
}

#rankingContentsHealth .rankingBox .rankingData .rankDown span,
#rankingContentsEsthe .rankingBox .rankingData .rankDown span {
  color: #405781;
}

#rankingContentsHealth .rankingBox .rankingData .rankDown:before,
#rankingContentsEsthe .rankingBox .rankingData .rankDown:before {
  background-position: bottom center;
}

/*女子プロフ　名前とか
******************************/
#rankingContentsHealth .rankingBox .rankingGirlsInfo,
#rankingContentsEsthe .rankingBox .rankingGirlsInfo {
  margin: 29% 2% 0 0;
}

#rankingContentsHealth .rankingBox .rankingGirlsInfo a,
#rankingContentsEsthe .rankingBox .rankingGirlsInfo a {
  text-decoration: none;
  color: inherit;
}

.rankingBox .girlsName {
  /* margin: 4.9% 0 4% 3.1%; */
  text-align: center;
}

#rankingContentsHealth .rankingBox:first-child .girlsName,
#rankingContentsEsthe .rankingBox:first-child .girlsName {}

#rankingContentsHealth .rankingBox:nth-child(2) .girlsName,
#rankingContentsEsthe .rankingBox:nth-child(2) .girlsName {}

#rankingContentsHealth .rankingBox:nth-child(3) .girlsName,
#rankingContentsEsthe .rankingBox:nth-child(3) .girlsName {}

#rankingContentsHealth .rankingBox .girlsName a,
#rankingContentsEsthe .rankingBox .girlsName a {
  font-weight: bold;
  color: inherit;
  font-size: 1.6em;
  text-decoration: none;
}

.rankingBox .girlsName a span {
  color: inherit;
  font-size: 0.83em;
  font-weight: inherit;
}

#rankingContentsHealth .rankingBox .girlsData,
#rankingContentsEsthe .rankingBox .girlsData {
  /* margin: 0 0 0 2.85%; */
  font-size: 1.1em;
  /* white-space: nowrap; */
  /* overflow: hidden; */
  /* line-height: 1.4em; */
  /* letter-spacing: -0.03em; */
  text-align: center;
  font-weight: 500;
}

#rankingContentsHealth .rankingBox .girlsData a,
#rankingContentsEsthe .rankingBox .girlsData a {
  font-size: 100%;
  text-decoration: none;
}

/****************************
ボックス下部
******************************/
#rankingContentsHealth .rankingBoxBottom,
#rankingContentsEsthe .rankingBoxBottom {
  padding-bottom: 3.5%;
}

/*店舗バナー
******************************/
#rankingContentsHealth .rankingBox .shopBanner,
#rankingContentsEsthe .rankingBox .shopBanner {
  /* position: absolute; */
  /* bottom: 0; */
  /* right: 0; */
  width: 100%;
}

/*お店からのコメント
******************************/
#rankingContentsHealth .rankingBox .rankingComment>p,
#rankingContentsEsthe .rankingBox .rankingComment>p {
  /* font-size: 98%; */
  /* font-weight: bold; */
  /* color: #005fd5; */
  /* margin-left: 2.9%; */
  /* padding-top: 4.5%; */
}

#rankingContentsHealth .rankingBox:first-child .rankingComment>p,
#rankingContentsEsthe .rankingBox:first-child .rankingComment>p {
  /* color: #baa449; */
}

#rankingContentsHealth .rankingBox:nth-child(2) .rankingComment>p,
#rankingContentsEsthe .rankingBox:nth-child(2) .rankingComment>p {
  /* color: #9499a2; */
}

#rankingContentsHealth .rankingBox:nth-child(3) .rankingComment>p,
#rankingContentsEsthe .rankingBox:nth-child(3) .rankingComment>p {
  /* color: #cd6f54; */
}

#rankingContentsHealth .rankingBox .commentText,
#rankingContentsEsthe .rankingBox .commentText {
  /* clear: both; */
  box-sizing: border-box;
  background-color: #555555;
  letter-spacing: 0.02em;
  padding: 2.9%;
  /* border: 1px solid #d8e6f1; */
  /* height: 6em; */
  /* margin: 0.5% auto 0; */
  display: none;
}

/*スクロールバー非表示*/
/*#rankingContentsHealth .rankingBox:first-child .commentText::-webkit-scrollbar ,
#rankingContentsEsthe .rankingBox:first-child .commentText::-webkit-scrollbar {
  display: none;
}*/
#rankingContentsHealth .rankingBox:nth-child(2) .commentText,
#rankingContentsEsthe .rankingBox:nth-child(2) .commentText {}

#rankingContentsHealth .rankingBox:nth-child(3) .commentText,
#rankingContentsEsthe .rankingBox:nth-child(3) .commentText {}

#rankingContentsHealth .rankingBox .commentText p,
#rankingContentsEsthe .rankingBox .commentText p {
  font-size: 3.44vw;
  line-height: 1.48em;
}

/*タブ切り替え全体のスタイル*/
.tabs {
  width: 94.4%;
  margin: 0 auto 5%;
  display: flex;
  flex-wrap: wrap;
}

/*タブのスタイル*/
.tabs>div {
  width: 50%;
  padding: 3.5% 0;
  /* letter-spacing: 0.1em; */
  background-color: #555555;
  color: #FFFFFF;
  transition: all 0.1s ease;
  /* border-top-left-radius: 6px; */
  /* border-top-right-radius: 6px; */
  cursor: pointer;
  position: relative;
}

.tabs>div.active::after {
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -0.6em;
  border-top: 0.7em solid #555555;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

.tabs_2>div.active::after {
  top: -0.6em;
  bottom: auto;
  transform: rotate(180deg);
}

.tabs div p {
  font-size: 115%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-content: center;
}

/*タブ切り替えの中身のスタイル*/
.tabContent {
  display: none;
  /* padding: 3.4% 3.2%; */
  /* clear: both; */
  overflow: hidden;
  /* background-color: #FFFFFF; */
  width: 94.4%;
  margin: 0 auto 5%;
}

.tabContent.active {
  display: block;
}

.tabs .health.active {
  /* background: #2056c8; */
  /* color: #FFFFFF; */
  /* opacity: 1; */
}

.tabs .esthe.active {
  /* background: #158039; */
  /* color: #FFFFFF; */
  /* opacity: 1; */
}

#estheContent {
  /* border-top: 2px solid #158039; */
  /* border-bottom: 2px solid #158039; */
  /* font-size: 0; */
}

#healthContent {
  /* border-top: 2px solid #2056c8; */
  /* border-bottom: 2px solid #2056c8; */
}

/*ふわっと*/
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s;
}

/*レスポンシブ*/
.padd {
  position: relative;
  margin-bottom: 4vw;
}

.rankingComment {
  line-height: 1.3;
  margin-top: 2%;
  width: 100%;
}

.commentTab {
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
  cursor: pointer;
  position: relative;
  line-height: 1.8;
}

.commentTab span {
  position: absolute;
  top: 44%;
  right: 0;
  transform: translateY(-50%);
  width: 1em;
  height: 1em;
}

.commentTab span::before,
.commentTab span::after {
  content: "";
  display: inline-block;
  background-color: #ffffff;
  position: absolute;
}

.commentTab span::before {
  height: 1px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.commentTab span::after {
  width: 1px;
  height: 100%;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  transition: height .1s ease;
}

.commentTab.open span::after {
  height: 0;
}

#rankingContentsHealth .rankingBox .rankingData::before,
#rankingContentsEsthe .rankingBox .rankingData::before {
  /* position: absolute; */
  /* content: ""; */
  /* display: block; */
  /* background-repeat: no-repeat; */
  /* background-size: contain; */
  /* z-index: 100; */
  /* background-image: url(/img/s/ranking/img_deco_sp.png); */
  /* width: 45vw; */
  /* height: 3.8vw; */
  /* left: 0; */
  /* top: -2vw; */
}



/* 200525ランキングに出勤日表示 */
#middleBox .rankingBox p.girlsDate {
  border-bottom: none;
  font-size: 1em;
  font-weight: bold;
  /* color: #4a57ff; */
  border: 1px solid;
  box-sizing: border-box;
  /* margin: 0 auto 1.5% 2%; */
  /* letter-spacing: 0; */
  width: 100%;
  padding-left: 26%;
  position: relative;
  text-align: center;
  line-height: 1.7;
  height: 1.7em;
}

#middleBox .rankingBox p.girlsDate span {
  font-weight: inherit;
  margin-right: 0.5em;
  /* font-size: 3vw; */
}

#middleBox .rankingBox.today p.girlsDate {
  /* background-color: #4a57ff; */
  /* color: #ffffff; */
}

#middleBox .rankingBox p.girlsDate::before {
  content: "次回";
  font-size: 1em;
  height: auto;
  text-align: center;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  border-right: 1px solid;
  width: 26%;
  height: 100%;
  /* margin-right: 5%; */
}

#middleBox .rankingBox.today p.girlsDate::before {
  content: "本日";
  background-color: #ffffff;
  color: #2f2f2f;
}

/* /200525ランキングに出勤日表示 */


/*下部タブのスタイル*/
.tabs_2 {
  /* width: 100%; */
  /* display: flex; */
}

.tabs_2>div {
  /* width: 45%; */
  /* padding: 3.5% 0; */
  /* letter-spacing: 0.1em; */
  /* background-color: #d9d9d9; */
  /* color: #FFFFFF; */
  /* transition: all 0.1s ease; */
  /* border-bottom-left-radius: 6px; */
  /* border-bottom-right-radius: 6px; */
}

.tabs_2>.health {
  /* margin-right: 1%; */
  /* padding-right: 1%; */
  /* margin-left: 3%; */
}

.tabs_2>.esthe {
  /* margin-left: 1%; */
  /* padding-left: 1%; */
  /* margin-right: 3%; */
}

.tabs_2>div:hover {
  opacity: 0.75;
}

.tabs_2 div p {
  font-size: 115%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-content: center;
}

.tabs_2 .health.active {
  /* background: #2056c8; */
  /* color: #FFFFFF; */
  /* opacity: 1; */
}

.tabs_2 .esthe.active {
  /* background: #158039; */
  /* color: #FFFFFF; */
  /* opacity: 1; */
}

/*end 下部タブのスタイル*/