@charset "UTF-8";
/*
 * FZdoujin Theme
 * ランキング
*/

/* TOP 人気ランキング */
#ninki .wrap {
  display: flex;
  flex-wrap: wrap;
}
.top_rank_item {
  width: 25%;
}
.top_rank_item .top_rank_link {
  display: block;
  padding: 5px;
  max-width: 90px;
  margin: auto;
  box-sizing: content-box;
}
.top_rank_item .top_rank_link figure {
  margin-bottom: 0;
}
.top_rank_item .top_rank_link figure img {
  border-radius: 5px;
}

@media screen and (min-width: 761px) {
  .top_rank_item {
    width: 12.5%;
  }
}
@media screen and (min-width: 601px) and (max-width: 760px) {
  .top_rank_item {
    width: 16.6%;
  }
}

/*
#ninki .wrap {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 370px;
	gap: 5px;
	overflow-x: scroll;
  }
.top_rank_item {
	width: 300px;
}
.top_rank_item .top_rank_link {
	display: block;
}
.top_rank_item .top_rank_link figure {
	float: left;
	width: 65px;
	height: 65px;
	margin-right: 10px;
	margin-bottom: 0;
}
.top_rank_item .top_rank_link figure img {
	border-radius: 5px;
}
.top_rank_item .top_rank_link .rank {
	float: left;
	color: #fff;
	font-size: 11px;
	width: 16px;
	height: 65px;
	text-align: center;
	background-color: #ff0066;
	margin-right: 2px;
	display: table;
}
.top_rank_item .top_rank_link .rank span{
	display: table-cell;
	vertical-align: middle;
}*/

/* ranking item */
#ranking_item h3 {
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1em;
  color: #fff;
  padding: 5px 0;
  border-radius: 2px;
}

#ranking_item h3 span {
  display: block;
  margin: 0.25em 0;
}

.rank_link {
  display: block;
  overflow: hidden;
  margin: 0 auto 1em;
}

.rank_link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 5px;
  aspect-ratio: 1;
}

.rank_title {
  font-size: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  height: 3em;
  font-weight: bold;
}

.rank_cate {
  display: inline-block;
  color: #fff;
  font-size: 10px;
  padding: 0.15em 0.5em;
  border-radius: 3px;
}

#ranking_date .rank_item {
  float: left;
}
#ranking_date .rank_link {
  max-width: 100px;
  padding: 5px;
}
#ranking_date .rank_item figure {
  margin-bottom: 0.25em;
}

@media only screen and (min-width: 800px) and (max-width: 1399px) {
  #ranking_date .rank_item {
    width: 12.5%;
  }
}
@media only screen and (min-width: 600px) and (max-width: 799px) {
  #ranking_date .rank_item {
    width: 16.6%;
  }
}
@media only screen and (max-width: 599px) {
  #ranking_date .rank_item {
    width: 25%;
  }
}

@media only screen and (max-width: 1199px) {
  #ranking_item .rank_item {
    float: left;
  }
  #ranking_item .rank_link {
    max-width: 100px;
    padding: 5px;
  }
  #ranking_item .rank_item figure {
    margin-bottom: 0.25em;
  }
}

@media only screen and (min-width: 600px) and (max-width: 1199px) {
  #ranking_item .rank_item {
    width: 16.6%;
  }
}
@media only screen and (max-width: 599px) {
  #ranking_item .rank_item {
    width: 25%;
  }
}

@media only screen and (min-width: 1200px) {
  #ranking_item .rank_item {
    width: auto;
    margin: 0 0 1em;
    border-bottom: 1px dotted #999;
  }

  #ranking_item .rank_link {
    width: auto;
  }

  #ranking_item .rank_link figure {
    width: 90px;
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0;
  }

  #ranking_item .rank_title {
    -webkit-line-clamp: 4;
    height: 6em;
  }
}

@media only screen and (min-width: 1400px) {
  #ranking_date .rank_item {
    margin: 0 0 1em;
    border-bottom: 1px dotted #999;
  }

  #ranking_date .rank_link {
    width: auto;
  }

  #ranking_date .rank_link figure {
    width: 90px;
    float: left;
    margin-right: 0.5em;
    margin-bottom: 0;
  }

  #ranking_date .rank_title {
    -webkit-line-clamp: 4;
    height: 6em;
  }
}

/*
@media only screen and (max-width:1199px) {
	.rank_item_slide {
		margin: 0 25px;
		padding: 0 5px;
	}

	.rank_item {
		display: inline-block;
	}
}

@media only screen and (max-width:419px) {
	.rank_link {
		width: auto;
		margin: 0 5px;
	}

	.rank_link img {
		width: 100%;
		height: auto;
	}
}*/

/* date ranking */ /*
.rank_cate {
	display: inline-block;
	color: #fff;
	font-size: 10px;
	padding: 0.15em 0.5em;
	border-radius: 3px;
}

h3 {
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 0.5em;
	margin-bottom: 1.0em;
	border-bottom: 1px solid #666;
}


@media only screen and (max-width:1399px) {
	.rank_date_slide {
		margin: 0 25px;
		padding: 0 10px;
	}

	.rank_item {
		display: inline-block;
	}
}

@media only screen and (min-width:1200px) and (max-width:1399px) {

	.rank_date_slide .rank_link {
		width: 100px;
		min-height: 160px;
	}

	.rank_item {
		border-bottom: none;
	}

	.rank_title {
		-webkit-line-clamp: 2;
		height: 3.0em;
	}
}
*/