@charset "utf-8";

#main h1 {
	background-color: var(--vote-color);
}
#main h2 {
	color: var(--vote-color);
	border-left: 1em solid var(--vote-color);;
}

.list {
	margin: 2em 0 6em;
}
.list li {
	margin-bottom: 1.5em;
}
.list a.bnrbox {
	display: block;
	border-radius: 6px;
	padding: .8em 2em .8em 1.5em;
	line-height: 1.2;
	text-align: left;
	-webkit-box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	border: 1px solid #FFF;
	position: relative;
	transition: all .3s;
}
.list a.bnrbox::before {
	content: "■";
	position: absolute;
	right: .8em;
	top: calc(50% - .5em);
	transform: rotate(-45deg);
}
.list a.bnrbox::after {
	content: "■";
	position: absolute;
	right: 1em;
	top: calc(50% - .5em);
	transform: rotate(-45deg);
	transition: all .3s;
}

.list.now a.bnrbox {
	background-color: rgba(41,127,255,1.00);
	color: #FFFFCC;
	-webkit-box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	border: 1px solid #FFF;
}
.list.now a.bnrbox::after {
	color: rgba(41,127,255,1.00);
}
.list.now a.bnrbox:hover {
	background-color: #5499ff;
	-webkit-box-shadow: 0px 2px 3px rgba(41,127,255,.30);
	box-shadow: 0px 2px 3px rgba(41,127,255,.30);
	color: #FF0;
	border-color: #FF0;
}
.list.now a.bnrbox:hover::after {
	color: #5499ff;
}

.list.out a.bnrbox {
	background-color: rgba(94,137,203,1.00);
	color: #FFF;
	-webkit-box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	box-shadow: 0px 2px 3px rgba(41,127,255,.50);
	border: 1px solid #FFF;
	font-weight: normal;
}
.list.out a.bnrbox::after {
	color: rgba(94,137,203,1.00);
}
.list.out a.bnrbox:hover {
	background-color: #7ea1d5;
	-webkit-box-shadow: 0px 2px 3px rgba(41,127,255,.30);
	box-shadow: 0px 2px 3px rgba(41,127,255,.30);
}
.list.out a.bnrbox:hover::after {
	color: #7ea1d5;
}

.votebox p {
	margin: 1em 1em 2em 1em;
	color: #999;
}

:root {
	--kanon-color:#ff7f27;
	--kanon-light-color:rgba(255,127,39,.3);
	--keke-color:#a0fff9;
	--keke-light-color:rgba(160,255,249,.3);
	--chisato-color:#ff6e90;
	--chisato-light-color:rgba(255,110,144,.3);
	--sumire-color:#74f466;
	--sumire-light-color:rgba(116,244,102,.3);
	--ren-color:#0000a0;
	--ren-light-color:rgba(0,0,160,.3);
	--kinako-color:#fff442;
	--kinako-light-color:rgba(255,244,66,.3);
	--mei-color:#ff3535;
	--mei-light-color:rgba(255,53,53,.3);
	--shiki-color:#b2ffdd;
	--shiki-light-color:rgba(178,255,221,.3);
	--natsumi-color:#ff51c4;
	--natsumi-light-color:rgba(255,81,196,.3);
	--margarete-color:#e49dfd;
	--margarete-light-color:rgba(228,157,253,.3);
	--tomari-color:#4cd2e2;
	--tomari-light-color:rgba(76,210,226,.3);
}



.dlbox {
	margin-bottom: 30px;
	padding-top: 15px;
}
.dlbox p.catch {
	font-size: 160%;
	text-align: center;
	color: var(--vote-color);
	font-weight: 600;
	line-height: 1.2;
	margin-bottom: 10px;
}
.dlbox p span {
	display: inline-block;
}
.dlbox .dllist {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
}
.dlbox .dllist li {
	width: max(calc((100% - 60px) / 5), 130px);
	padding: 5px 5px;
	border-radius: 5px;
	line-height: 1;
}
.dlbox .dllist li.prof {
	width: max(calc((100% - 30px) / 3), 130px);
	padding: 5px 5px;
	border-radius: 5px;
	line-height: 1;
}
.dlbox .dllist li a {
	text-decoration: none;
}
.dlbox .dllist li img {
	margin-bottom: 5px;
}
.dlbox .dllist li span {
	display: block;
	text-align: center;
	font-size: 80%;
	padding: 5px 0;
	border-radius: 3px;
	line-height: 1;
}
.dlbox .dllist li.kanon,
.dlbox .dllist li.kanon span {
	background-color: var(--kanon-light-color);
	color: #000;
}
.dlbox .dllist li.keke,
.dlbox .dllist li.keke span {
	background-color: var(--keke-light-color);
	color: #000;
}
.dlbox .dllist li.chisato,
.dlbox .dllist li.chisato span {
	background-color: var(--chisato-light-color);
	color: #000;
}
.dlbox .dllist li.sumire,
.dlbox .dllist li.sumire span {
	background-color: var(--sumire-light-color);
	color: #000;
}
.dlbox .dllist li.ren,
.dlbox .dllist li.ren span {
	background-color: var(--ren-light-color);
	color: #fff;
}
.dlbox .dllist li.kinako,
.dlbox .dllist li.kinako span {
	background-color: var(--kinako-light-color);
	color: #000;
}
.dlbox .dllist li.mei,
.dlbox .dllist li.mei span {
	background-color: var(--mei-light-color);
	color: #000;
}
.dlbox .dllist li.shiki,
.dlbox .dllist li.shiki span {
	background-color: var(--shiki-light-color);
	color: #000;
}
.dlbox .dllist li.natsumi,
.dlbox .dllist li.natsumi span {
	background-color: var(--natsumi-light-color);
	color: #000;
}
.dlbox .dllist li.margarete,
.dlbox .dllist li.margarete span {
	background-color: var(--margarete-light-color);
	color: #000;
}
.dlbox .dllist li.tomari,
.dlbox .dllist li.tomari span {
	background-color: var(--tomari-light-color);
	color: #000;
}
.dlbox .dllist li.frame,
.dlbox .dllist li.prof {
	border: 1px solid var(--base-light-color);
	color: #000;
}
.dlbox .dllist li.frame span,
.dlbox .dllist li.prof span {
	color: #000;
	background-color: var(--base-light-color);
}