/* ====== result.css ====== */


:root {
	--color-blue: #109af2;
	--color-yellow: #fbf4aa;
}


header {
    margin-bottom: 0 !important;
}


/*
 * #information
 */

#information{
	padding: 30px 30px 30px 30px;
	background: #faf6eb;
}

	#information h1{
		font-size: 24px;
		letter-spacing: 0.1em;
	}



/*
 * accordion
 */
 .accordion dt.panel{
	position: relative;
	border: solid 1px var(--color-blue);
	box-sizing: border-box;
	padding: 15px 20px 15px 20px;
	font-size: 20px;
	cursor:pointer;
	background: linear-gradient( #179af2 0%, #83caff 100%);
	color: #fff;
}

	.accordion dt.panel:before{
		content:"";
		display:block;
		width:16px;
		height:16px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		-webkit-transform: rotate(135deg);
		-ms-transform: rotate(135deg);
		transform: rotate(135deg);
		position:absolute;
		right: 2%;
		top: 0;
		bottom: 15%;
		margin: auto;
	}

	.accordion dt.panel.active::before{
		content:"";
		display:block;
		width:16px;
		height:16px;
		border-top: #fff 2px solid;
		border-right: #fff 2px solid;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
		position:absolute;
		right: 2%;
		top: 7%;
		bottom: 0;
		margin: auto;
	}

.accordion dd.panel{
	display: none;
	background-color: rgba(255,255,255,0.6);
	padding: 20px 30px 20px 30px;
	box-sizing: border-box;
}

	.accordion dd.panel:first-child{
		display: block;
	}


/*
 * rank
 */

.accordion .point{
	display: grid;
	place-items: center;
	height: 40px;
	background: var(--color-blue);
	color: #fff;
	/* font-size: 80%; */
}

.accordion .series{
	display: grid;
	place-items: center;
	height: 40px;
	background: var(--color-yellow);
	color: var(--color-blue);
	margin-bottom:10px;
	/* font-size: 80%; */
}

.accordion .song{
	display: grid;
	place-items: center;
	font-weight: 900;
	font-size: 120%;
}

.accordion article.win{
	max-width: 600px;
	margin: 0 auto;
}

.accordion .best3{
	width: 100%;
	max-width: 600px;
	padding: 90px 0 0 0;
}

	.accordion .best3.rank1{
		background:url(../img/rank-01.png);
		background-size: 120px;
		background-repeat:no-repeat;
		background-position:top center;
	}

	.accordion .best3.rank2{
		background:url(../img/rank-02.png);
		background-size: 120px;
		background-repeat:no-repeat;
		background-position:top center;
	}

	.accordion .best3.rank3{
		background:url(../img/rank-03.png);
		background-size: 120px;
		background-repeat:no-repeat;
		background-position:top center;
	}
	
	.accordion .rank2-3{
		display: flex;
		width: 100%;
		gap: 20px 20px;
	}

		.accordion .rank2-3 dd{
			width: 50%;
		}

.accordion .rank4-{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

	.accordion .rank4- dl{
		display: table;
		width: 100%;
	}

		.accordion .rank4- dt{
			display: table-cell;
			vertical-align: top;
			width: 100px;
			padding: 0px 20px 20px 0px; 
		}

		.accordion .rank4- dt img{
			width: 100%;
		}

		.accordion .rank4- dd{
			display: table-cell;
			vertical-align: top;
			text-align: left;
		}

		.accordion .rank4- li{
			text-align: left;
		}


			.accordion .rank4- .point{
				height: auto;
				display: inline-block;
				padding: 3px 10px 3px 10px;
				font-size: 80%;
			}
			
			.accordion .rank4- .series{
				height: auto;
				display: inline-block;
				padding: 3px 10px 3px 10px;
				font-size: 80%;
			}
			
			.accordion .rank4- .song{
				height: auto;
				display: inline-block;
				text-align: left;
				font-size: 100%;
			}


			
@media (max-width: 768px) {

	.accordion dd.panel {
		padding: 20px 20px 20px 20px;
	}

	.accordion .point{
		height: 35px;
	}
	
	.accordion .series{
		height: 35px;
	}

	.accordion .best3{
		padding: 80px 0 0 0;
	}

	.accordion dt.panel{
		padding: 10px 20px 10px 20px;
		font-size: 16px;
	}

	.accordion .best3.rank1{
		background-size: 100px;
	}

	.accordion .best3.rank2{
		background-size: 100px;
	}

	.accordion .best3.rank3{
		background-size: 100px;
	}
	
	
	.accordion .win{
		margin-bottom: 20px !important;
	}

	.accordion .rank2-3{
		display: block;
	}

	.accordion .rank4- dl{
		margin-bottom: 20px;
	}

		.accordion .rank2-3 dd{
			width: 100%;
			margin-bottom: 20px;
		}
	
		.accordion .rank4- dt{
			width: 80px;
		}
}






/* === loading === */
#loading-wrap{
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background: #F1D7DA;
	z-index:99;
	display: flex;
	justify-content: center;
	align-items: center;
}
	
	#loading-wrap.loading_half{
	 opacity: 0.85;
	}
	
	#loading-wrap img{
 		display: block;
		opacity: 0;
	}
	
	.fadeOut_start{
		animation: fadeOut 1s linear forwards;
	}
	
	@keyframes fadeOut{
		100% { opacity: 0; }
	}



/* === 追加 === */
.accordion .artist{
	display: grid;
	place-items: center;
	font-weight: 600;
	font-size: 90%;
}

.accordion .rank4- .artist{
	height: auto;
	display: inline-block;
	text-align: left;
	font-size: 90%;
}

.accordion .rank4- dl{
	margin-bottom: 20px;
}

			
@media (max-width: 768px) {

	.accordion .artist br{
		display: none;
	}
	
}