@charset "UTF-8";
/* CSS Document */
html, body {
   height: 100%;
}
.ranking-various {
	font-size: 20px;
	line-height: 2.2;
	letter-spacing: 0.050rem;
}
.ranking-various .flex{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-flow: row wrap;
	flex-wrap: wrap;
	-ms-flex-pack: flex-start;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	flex-wrap:wrap;
}
[data-ruby] {
	position: relative;
}
[data-ruby]::before {
	content: attr(data-ruby);
	position: absolute;
	top: -4em;
	left: 0;
	right: 0;
	margin: auto;
	font-size: 0.6vw;
	text-align: center;
	letter-spacing: -0.035rem;
}
.ranking-various .mgauto {
	margin: auto;
}
.w50 {
	width: 50%;
}


/* cts */
.ranking-various .cts {
	margin: auto;	
}


/* main */
.ranking-various .cts .main {
	margin: 0;
	padding: 140px 0 0;
}
.ranking-various .cts .main .main-image {
	max-width: 736px;
    width: 100%;
}
.ranking-various .cts .main h1 {
	margin: 30px 0;
}


/* nav */
.ranking-various .cts .nav {
	justify-content: center;
	max-width: 900px;
	width: 100%;
	margin: auto;
}
.ranking-various .cts .nav li {
	margin: 2%;
	width: 20%;
}
.ranking-various .cts .nav li img {
	width: 100%;;
}


/* best3 */
.ranking-various .cts .block-best3 {
    background: url(../ranking/img/dt/ranking-various/series-bg-kirakira.png) no-repeat center top;
    background-size: 80%;
    background-position-y: 34%;
    margin: 100px 0;
}
.ranking-various .cts .block-best3 h1 {
	margin-bottom: 120px;
	padding-top: 110px;
	padding-bottom: -110px;
}
.ranking-various .cts .block-best3 h1 img {
	width: 100%;;
}
.ranking-various .cts .block-best3 .inner {
	max-width: 900px;
	width: 100%;
	margin: auto;
}
.ranking-various .cts .block-best3 .series-best-image {
	max-width: 826px;
	width: 100%;
}
.ranking-various .block-best3 .block-book {
	margin-bottom: 113px;
}




/* block-genre */
.ranking-various .cts .block-genre .inner {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}
.ranking-various .block-genre .block-book {
	margin-bottom: 113px;
}
.ranking-various .block-genre .buy-book .img-byu {
	margin-bottom: 50px;
}
.ranking-various .block-genre .buy-book .buy {
	justify-content: center;
}
.ranking-various .block-genre .buy-book .buy-box {
	margin: 0 0 0 auto;
}
.ranking-various .block-genre .buy-book .icn-box {
	position: relative;
	top: -6px;
	margin: 0 0 0 auto;
}
.ranking-various .block-genre .buy-book .sgl  {
	position: relative;
	left: 36px;
}
.ranking-various .cts .block-genre h1 {
	margin-bottom: 140px;
	padding-top: 110px;
	padding-bottom: -110px;
}
.ranking-various .cts .block-genre .flex {
	justify-content: space-between;
}
.ranking-various .cts .block-genre  h1 img {
	width: 100%;
}



/* block-iroirodata */
.ranking-various .cts .block-iroirodata .inner {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}
.ranking-various .cts .block-iroirodata h1 {
	margin-bottom: 70px;
	padding-top: 110px;
	padding-bottom: -110px;
}
.ranking-various .cts .block-iroirodata h2 {
	margin-bottom: 55px;
}
.ranking-various .cts .block-iroirodata .block-graph {
	margin-bottom: 95px;
}
.ranking-various .cts .block-iroirodata .flex {
	justify-content: space-between;
}



/* tabloid */
.ranking-various .tabloid .tabloid-pdf .flex {
    margin: auto;
    width: 100%;
    justify-content: center;
}
.ranking-various .tabloid {
	margin-bottom: 200px;
}


@media screen and (min-width: 1240px) {
	[data-ruby]::before {
	    top: -3em;
	}
}

@media screen and (min-width:600px) and (max-width:640px) {
	[data-ruby]::before {
	    top: -6em;
	}

}
@media screen and (min-width:600px) and (max-width:980px) {
	[data-ruby]::before {
	    top: -6em;
	}
	.ranking-various .buy-book {
	    justify-content: center;
	}
	.ranking-various .cts {
		width: 90%;
		margin: auto;
	}
	.ranking-various .cts .block-best3 .inner .block-book img {
		width: 100%;;
	}
	.ranking-various .block-genre .block-book {
		width: 46%;
	}
	.ranking-various .block-genre .block-book .item-image {
		width: 100%;
	}
	.ranking-various .cts .block-genre h1 {
		margin-bottom: 80px;
	}
	.ranking-various .block-iroirodata h1 img {
		width: 100%;
	}
	.ranking-various .block-iroirodata .image-graph {
		width: 100%;
	}
	.ranking-various .block-iroirodata .flex .block-graph {
		width: 44%;
	}

}

@media screen and (max-width: 599px) {
	[data-ruby]::before {
		content: attr(data-ruby);
		position: absolute;
		top: -9em;
		left: 0;
		right: 0;
		margin: auto;
		font-size: 0.6vw;
		text-align: center;
		letter-spacing: -0.035rem;
	}
	.ranking-various {
	    font-size: 18px;
	    line-height: 2.2;
	    letter-spacing: 0.035rem;
	}
	
	
	/* nav */
	.ranking-various .cts .nav {
		justify-content: space-between;
	}
	.ranking-various .cts .nav li {
	    margin: 2%;
	    width: 29%;
	}
	.ranking-various .cts .nav li:first-child {
		margin-left:0; 
	}
	.ranking-various .cts .nav li:last-child {
		margin-right:0; 
	}
	
	
	/* .cts */
	.ranking-various .cts {
		width: 90%;
		margin: auto;
	}
	
	
	/* main */
	.ranking-various .cts .main {
	    margin: 0 0 30px 0;
	}
	.ranking-various .cts .main img {
		width: 100%;
	}
	.ranking-various .cts .main h1 img {
		width: 70%;
	}
	
	
	/* block-best3 */
	.ranking-various .cts .block-best3 h1 {
	    margin-bottom: 30px;
	    padding-top: 95px;
	    padding-bottom: -95px;
	}
	.ranking-various .cts .block-best3 .ttl-series-best  {
		max-width: 826px;
	    width: 100%;
	}
	.ranking-various .cts .block-best3 .series-best-image {
		max-width: 826px;
		width: 90%;
	}
	.ranking-various .cts .block-best3 {
		background: none;
		margin: 0 0 140px;
	}
	.ranking-various .block-best3 .block-book {
		margin-bottom: 80px;
	}
	.ranking-various .block-best3 .book-mb40 {
		margin-bottom: 40px;
	}
	.ranking-various .block-best3 .block-book:last-child {
		margin-bottom: 40px;
	}
	

	
	/* block-genre */
	.ranking-various .block-genre {
		margin-bottom: 100px;
	}
	.ranking-various .block-genre .buy-book {
		background: url(../ranking/img/sp/ranking-various/genre-bg-kirakira.png) no-repeat left;
		background-size: 50%;
		background-position-y: 130px;
		margin: 100px 0;
		margin: 0 auto 0;
		justify-content: space-between;
	}
	.ranking-various .block-genre .buy-book .buy-box {
		width: 60%;
	}
	.ranking-various .block-genre .buy-book .icn-box {
		position: relative;
		left: 20px;
		top: -18px;
		width: 31%;
	}
	.ranking-various .block-genre .buy-book .sgl {
		position: relative;
		left: 46px;
		top: -18px;
		width: 15%;
	}
	.ranking-various .cts .block-genre h1 {
		margin-bottom: 30px;
		padding-top: 95px;
		padding-bottom: -95px;
	}
	.ranking-various .block-book .item-image {
		width: 100%;
	}
	.ranking-various .block-genre .buy-book .img-byu {
	    margin-bottom: 30px;
	}
	.ranking-various .block-genre .block-book {
	    margin-bottom: 80px;
	}
/*
	.ranking-various .block-genre .genre1 {
		background: url(../ranking/img/sp/ranking-various/series-bg-kirakira.png) no-repeat center top;
		background-size: 80%;
		background-position-y: 24%;
		margin: 100px 0;
	}
*/
	
	
	
	/* iroirodata */
	.ranking-various .block-iroirodata .item-image {
		width: 100%;
	}
	.ranking-various .cts .block-iroirodata h1 {
		margin-bottom: 80px;
		padding-top: 95px;
		padding-bottom: -95px;
	}
	.ranking-various .cts .block-iroirodata h1 {
		margin-bottom: 40px;
	}
	.ranking-various .cts .block-iroirodata .ttl-graph4 {
		width: 64%;
	}
	.ranking-various .ttl-graph2 {
		width: 76%;
	}
	.ranking-various .tabloid {
		margin-bottom: 0;
	}

	
}