@charset "UTF-8";

/*--------------------------------------------
COLUMNS
---------------------------------------------*/

@media screen and (max-width: 750px){
	#columns{
		padding-top : calc( 16 * 100vw / 750 );
		padding-bottom : calc( ( 62 - 2.6 ) * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#columns{
		padding-bottom : 112px;
		padding-top : 20px;
	}
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

.title{
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center;
	display : grid;
	place-items : end center;
	position : relative;
	overflow : hidden;
}

.title:before{
	content : "";
	position : absolute;
	left : calc( 50% );
	transform : translateX(-50%);
	background : url("../images/ranking/icon.webp") 0 0 / contain no-repeat;
}

.title span{
	font-weight : 700;
	color : #c4ab70;
	display : grid;
	background-position : center;
	background-repeat : no-repeat;
	background-size : auto 100%;
	z-index : 1;
	width : 100%;
}

@media screen and (max-width: 750px){
	.title{
		background-image : url("../images/ranking/bg_title_sp.webp");
		height : calc( 350 * 100vw / 750 );
		padding-bottom : calc( 16 * 100vw / 750 );
	}
	.title:before{
		width : calc( 256 * 100% / 750 );
		height : calc( 264 * 100vw / 750 );
		top : calc( 43 * 100vw / 750 );
	}
	.title span{
		text-align : center;
		height : calc( 120 * 100vw / 750 );
		align-items : center;
		background-image : url("../images/ranking/bg_title02_sp.webp");
	}
	.title span{
		font-size : 4rem;
		line-height : 1.2;
	}
}

@media print,screen and (min-width: 751px){
	.title{
		height : 330px;
		background-image : url("../images/ranking/bg_title_pc.webp");
		padding-bottom : 24px;
	}
	.title:before{
		width : 205px;
		height : 211px;
		top : 100px;
	}
	.title span{
		grid-template-columns : 1fr auto 1fr;
		align-items : center;
		height : 60px;
		background-image : url("../images/ranking/bg_title02_pc.webp");
		column-gap : 12px;
	}
	.title span:before , .title span:after{
		height : 22px;
		content : "";
		display : block;
		background : url("../images/ranking/border.svg") 0 0 / auto 100% repeat-x;
	}
	.title span:before{
		grid-column : 1;
	}
	.title span:after{
		grid-column : 3;
	}
	.title span{
		font-size : 4rem;
	}
}

/*--------------------------------------------
LIST BRANDS
---------------------------------------------*/

#listRanking > li{
	border-style : solid;
	border-color : rgb(0,0,0,.1);
	display : grid;
	position : relative;
}

#listRanking > li:before , #listRanking > li:after{
	position : absolute;
}

#listRanking > li:before{
	content : "RANKING";
	display : grid;
	align-items : end;
	position : absolute;
	font-weight : 700;
	left : 0;
	background-repeat : no-repeat;
	background-position : right bottom;
	background-size : auto 100%;
}

#listRanking > li:after{
	content : "";
	display : block;
}

#listRanking > li:nth-child(1):before{
	color : #b89a00;
	background-image : url("../images/ui/icon/rank01.svg");
}

#listRanking > li:nth-child(2):before{
	color : #95a8b2;
	background-image : url("../images/ui/icon/rank02.svg");
}

#listRanking > li:nth-child(3):before{
	color : #aa631a;
	background-image : url("../images/ui/icon/rank03.svg");
}

#listRanking > li:nth-child(4):before{
	color : #717071;
	background-image : url("../images/ui/icon/rank04.svg");
}

#listRanking > li:nth-child(5):before{
	color : #717071;
	background-image : url("../images/ui/icon/rank05.svg");
}

#listRanking h2{
	border-bottom-style : solid;
	font-weight : 700;
	color : #575757;
}

#listRanking .awards{
	display : grid;
	justify-content : start;
	align-items : center;
	grid-auto-flow : column;
}

#listRanking h3{
	display : grid;
	grid-template-columns : auto 1fr;
	align-items : center;
	font-weight : 400;
}

#listRanking h3 img{
	object-fit : cover;
}

#listRanking .thumbnail , #listRanking .pics picture{
	overflow : hidden;
}

#listRanking .thumbnail > img , #listRanking .pics picture > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
}

#listRanking .obsessions{
	display : flex;
	flex-wrap : wrap;
}

#listRanking .obsessions li{
	display : grid;
	place-items : center;
	border : 1px solid currentColor;
	color : var(--primary);
}

#listRanking dl{
	display : grid;
}

#listRanking dt , #listRanking dd{
	color : #575757;
}

#listRanking dt{
	display : grid;
	place-items : center;
	background-color : #e5e5e5;
}

#listRanking .links a{
	display : flex;
	align-items : center;
	justify-content : center;
	color : #fff;
	height : 100%;
}

#listRanking .bookmark a:before , #listRanking .request a:before{
	content : "";
	display : block;
	background-repeat : no-repeat;
	background-size : contain;
	background-position : center;
	flex-shrink : 0;
}

#listRanking .bookmark a{
	background-color : #32b16c;
}

#listRanking .bookmark a:before{
	background-image : url("../images/ui/icon/star.svg");
}

#listRanking .request a{
	background-color : #daac0a;
}

#listRanking .request a:before{
	background-image : url("../images/ui/icon/mail.svg");
}

#listRanking .detail a{
	background-color : var(--primary);
}

@media screen and (max-width: 750px){
	#listRanking{
		padding-top : calc( 120 * 100vw / 750 );
		overflow : hidden;
	}
	#listRanking > li{
		border-width : calc( 5 * 100vw / 750 );
		padding-top : calc( ( 25 - 3.4 ) * 100vw / 750 );
		padding-bottom : calc( 22 * 100vw / 750 );
		padding-left : calc( 20 * 100% / 690 );
		padding-right : calc( 20 * 100% / 690 );
		grid-template-columns : calc( 280 * 100% / 640 ) 1fr;
		column-gap : calc( 20 * 100% / 690 );
		grid-template-rows : auto calc( 10 * 100vw / 750 ) auto calc( 20 * 100vw / 750 ) auto calc( 16 * 100vw / 750 ) auto auto calc( 22 * 100vw / 750 ) auto;
	}
	#listRanking > li + li{
		margin-top : calc( 154 * 100vw / 750 );
	}
	#listRanking > li:before{
		font-size : 4rem;
		top : calc( -107 * 100vw / 750 );
		height : calc( 81 * 100vw / 750 );
		left : calc( 16 * 100% / 680 );
		width : calc( 281 * 100% / 680 );
	}
	#listRanking > li:after{
		width : calc( 750 * 100% / 680 );
		left : calc( -35 * 100% / 680 );
		height : calc( 30 * 100vw / 750 );
		top : calc( -57 * 100vw / 750 );
		z-index : -1;
	}
	#listRanking > li:nth-child(1):after{
		background-image : linear-gradient( 90deg , #b89a00 0% , #b89a00 calc( 40 * 100% / 750 ) , #fff calc( 40 * 100% / 750 ) , #fff calc( 337 * 100% / 750 ) , #b89a00 calc( 337 * 100% / 750 ) , #b89a00 100% );
	}
	#listRanking > li:nth-child(2):after{
		background-image : linear-gradient( 90deg , #95a8b2 0% , #95a8b2 calc( 40 * 100% / 750 ) , #fff calc( 40 * 100% / 750 ) , #fff calc( 337 * 100% / 750 ) , #95a8b2 calc( 337 * 100% / 750 ) , #95a8b2 100% );
	}
	#listRanking > li:nth-child(3):after{
		background-image : linear-gradient( 90deg , #aa631a 0% , #aa631a calc( 40 * 100% / 750 ) , #fff calc( 40 * 100% / 750 ) , #fff calc( 337 * 100% / 750 ) , #aa631a calc( 337 * 100% / 750 ) , #aa631a 100% );
	}
	#listRanking > li:nth-child(n+4):after{
		background-image : linear-gradient( 90deg , #717071 0% , #717071 calc( 40 * 100% / 750 ) , #fff calc( 40 * 100% / 750 ) , #fff calc( 337 * 100% / 750 ) , #717071 calc( 337 * 100% / 750 ) , #717071 100% );
	}
	#listRanking h2{
		grid-row : 1;
		grid-column : 1/3;
		border-bottom-width : calc( 6 * 100vw / 750 );
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) calc( 100 * 100% / 640 ) , #e5e5e5 calc( 100 * 100% / 640 ) , #e5e5e5 100% );
		border-image-slice : 1;
	}
	#listRanking h2{
		font-size : 3.4rem;
		line-height : 1.2;
	}
	#listRanking h2{
		padding-bottom : calc( ( 13 - 3.4 ) * 100vw / 750 );
	}
	#listRanking h3{
		grid-row : 3;
		grid-column : 1/3;
		column-gap : calc( 8 * 100% / 640 );
	}
	#listRanking h3{
		font-size : 2.2rem;
		line-height : 1.2;
	}
	#listRanking h3 img{
		width : calc( 55 * 100vw / 750 );
		height : calc( 55 * 100vw / 750 );
	}
	#listRanking .picbox{
		grid-row : 5/9;
		grid-column : 1;
	}
	#listRanking .thumbnail{
		height : calc( 187 * 100vw / 750 );
	}
	#listRanking .awards{
		margin-top : calc( 16 * 100vw / 750 );
		column-gap : calc( 6 * 100% / 280 );
	}
	#listRanking .awards01{
		height : calc( 56 * 100vw / 750 );
	}
	#listRanking .awards02{
		height : calc( 52 * 100vw / 750 );
	}
	#listRanking .obsessions{
		grid-row : 5;
		grid-column : 2;
		column-gap : calc( 10 * 100% / 340 );
		row-gap : calc( 10 * 100vw / 750 );
	}
	#listRanking .obsessions li{
		font-size : 2rem;
		min-width : calc( 100 * 100% / 340 );
		height : calc( 27 * 100vw / 750 );
		padding-left : calc( 10 * 100vw / 750 );
		padding-right : calc( 10 * 100vw / 750 );
	}
	#listRanking dl{
		grid-row : 7;
		grid-column : 2;
		grid-template-columns : calc( 110 * 100% / 340 ) 1fr;
		column-gap : calc( 13 * 100% / 340 );
		row-gap : calc( 10 * 100vw / 750 );
	}
	#listRanking dt , #listRanking dd{
		font-size : 2.4rem;
		line-height : 1.2;
	}
	#listRanking dt{
		height : calc( 34 * 100vw / 750 );
	}
	#listRanking dd{
		padding-top : calc( ( 2.6 - 2.4 ) * 100vw / 750 );
	}
	#listRanking .links{
		grid-row : 10;
		grid-column : 1/3;
		display : flex;
		justify-content : flex-end;
	}
	#listRanking .links a{
		font-size : 2rem;
		width : 100%;
		height : calc( 60 * 100vw / 750 );
	}
	#listRanking .bookmark{
		width : calc( 240 * 100vw / 750 );
	}
	#listRanking .bookmark a{
		column-gap : calc( 3 * 100% / 240 );
	}
	#listRanking .bookmark a:before{
		width : calc( 28 * 100% / 240 );
		height : calc( 28 * 100vw / 750 );
	}
	#listRanking .request{
		width : calc( 240 * 100vw / 750 );
	}
	#listRanking .request a{
		column-gap : calc( 3 * 100% / 240 );
	}
	#listRanking .request a:before{
		width : calc( 26 * 100% / 240 );
		height : calc( 21 * 100vw / 750 );
	}
	#listRanking .detail{
		width : calc( 160 * 100% / 640 );
	}
}

@media print,screen and (min-width: 751px){
	#listRanking{
		padding-top : 90px;
	}
	#listRanking > li{
		border-width : 10px;
		padding-top : 20px;
		padding-bottom : 20px;
		padding-left : 20px;
		padding-right : 20px;
		grid-template-columns : 240px 1fr;
		column-gap : 20px;
		grid-template-rows : auto 10px auto 14px auto 20px auto 20px auto auto;
	}
	#listRanking > li + li{
		margin-top : 80px;
	}
	#listRanking > li:before{
		top : -62px;
		font-size : 2.8rem;
		left : -10px;
		height : 43px;
		width : 186px;
	}
	#listRanking > li:after{
		right : -10px;
		width : 680px;
		height : 20px;
		top : -42px;
	}
	#listRanking > li:nth-child(1):after{
		background-color : #b89a00;
	}
	#listRanking > li:nth-child(2):after{
		background-color : #95a8b2;
	}
	#listRanking > li:nth-child(3):after{
		background-color : #aa631a;
	}
	#listRanking > li:nth-child(n+4):after{
		background-color : #717071;
	}
	#listRanking .picbox{
		grid-column : 1;
		grid-row : 1/11;
	}
	#listRanking .thumbnail{
		width : 100%;
		height : 160px;
	}
	#listRanking .pics{
		display : grid;
		grid-template-columns : repeat( 2 , 115px );
		justify-content : space-between;
	}
	#listRanking .pics picture{
		height : 77px;
		margin-top : 10px;
	}
	#listRanking .awards{
		margin-top : 10px;
		column-gap : 10px;
	}
	#listRanking .awards01{
		height : 56px;
	}
	#listRanking .awards02{
		height : 52px;
	}
	#listRanking h2{
		border-bottom-width : 5px;
		border-image : linear-gradient(90deg, var(--primary) 0%, var(--primary) 100px , #e5e5e5 100px , #e5e5e5 100% );
		border-image-slice : 1;
	}
	#listRanking h2{
		font-size : 2.4rem;
		line-height : 1.2;
	}
	#listRanking h2{
		padding-bottom : calc( 16px - 2.4px );
		grid-row : 1;
		grid-column : 2;
	}
	#listRanking h3{
		grid-row : 3;
		grid-column : 2;
		column-gap : 4px;
	}
	#listRanking h3{
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#listRanking h3 img{
		width : 46px;
		height : 46px;
	}
	#listRanking .obsessions{
		grid-row : 5;
		grid-column : 2;
		column-gap : 6px;
		row-gap : 10px;
	}
	#listRanking .obsessions li{
		font-size : 1.4rem;
		min-width : 76px;
		height : 27px;
		padding-left : 10px;
		padding-right : 10px;
	}
	#listRanking dl{
		grid-row : 7;
		grid-column : 2;
		display : grid;
		grid-template-columns : 80px 164px 80px 164px;
		column-gap : 10px;
	}
	#listRanking dt , #listRanking dd{
		font-size : 1.4rem;
		line-height : 1.2;
	}
	#listRanking dt{
		height : 27px;
	}
	#listRanking dd{
		padding-top : calc( 6.5px - 1.4px );
	}
	#listRanking .links{
		display : grid;
		grid-auto-flow : column;
		justify-content : end;
		grid-row : 9;
		grid-column : 2;
		grid-template-rows : 37px;
		column-gap : 10px;
		grid-template-columns : repeat(auto-fill , 160px);
	}
	#listRanking .links a{
		font-size : 1.4rem;
		width : 100%;
	}
	#listRanking .bookmark a{
		background-color : #32b16c;
		column-gap : 7px;
	}
	#listRanking .bookmark a:before{
		width : 21px;
		height : 21px;
	}
	#listRanking .request a{
		background-color : #daac0a;
		column-gap : 3px;
	}
	#listRanking .request a:before{
		width : 19px;
		height : 16px;
	}
}

/*--------------------------------------------
SIDEBAR RANKING02
---------------------------------------------*/

#sidebarRanking02 h3{
	background-color : var(--primary);
	color : #fff;
	font-weight : 700;
	display : grid;
	place-items : center start;
}

#sidebarRanking02 h4{
	font-weight : 700;
}

#sidebarRanking02 a{
	color : #084671;
	display : block;
}

@media screen and (max-width: 750px){
	#sidebarRanking02{
		margin-top : calc( 72 * 100vw / 750 );
	}
	#sidebarRanking02 h3{
		font-size : 3.2rem;
		padding-top : calc( 24 * 100vw / 750 );
		padding-bottom : calc( 24 * 100vw / 750 );
		padding-left : calc( 38 * 100% / 750 );
		padding-right : calc( 38 * 100% / 750 );
	}
	#sidebarRanking02 h4 , #sidebarRanking02 > a , #sidebarRanking02 ul{
		margin-left : calc( 30 * 100% / 750 );
		margin-right : calc( 30 * 100% / 750 );
	}
	#sidebarRanking02 h4{
		font-size : 3.2rem;
		color : #333;
	}
	#sidebarRanking02 h3 + h4{
		margin-top : calc( 32 * 100vw / 750 );
	}
	#sidebarRanking02 a{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#sidebarRanking02 h4 + a{
		margin-top : calc( ( 26 - 2.6 ) * 100vw / 750 );
	}
	#sidebarRanking02 a + h4{
		margin-top : calc( ( 74 - 2.6 ) * 100vw / 750 );
	}
	#sidebarRanking02 h4 + ul{
		margin-top : calc( ( 26 - 2.6 ) * 100vw / 750 );
	}
	#sidebarRanking02 li + li{
		margin-top : calc( 10 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#sidebarRanking02 h3{
		font-size : 2.4rem;
		padding-top : 13px;
		padding-bottom : 13px;
		padding-left : 18px;
		padding-right : 18px;
	}
	#sidebarRanking02 h4{
		font-size : 2rem;
		color : #575757;
	}
	#sidebarRanking02 h3 + h4{
		margin-top : 17px;
	}
	#sidebarRanking02 a{
		font-size : 1.6rem;
		line-height : 1.5;
	}
	#sidebarRanking02 h4 + a{
		margin-top : calc( 16px - 4px );
	}
	#sidebarRanking02 a + h4{
		margin-top : calc( 39px - 4px );
	}
	#sidebarRanking02 h4 + ul{
		margin-top : calc( 13px - 4px );
	}
	#sidebarRanking02 li + li{
		margin-top : 10px;
	}
}