@charset "UTF-8";

.voteMainText{
	width: 110%;
    margin-left: -5%;
}

.voteArea{
	padding: 0 .6% .6%;
	background-color: #7ecef4;
}
.voteTitle{
	display: block;
	max-width: 710px;
	width: 73.4%;
	margin: auto;
}
.voteInner{
	position: relative;
	padding: 1% 1% 4% 1%;
	background-color: #fff;
}
.voteItemsWrap{
	margin-top: 4%;
	padding: 0 .8%;
	float: left;
	text-align: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.menuTitle{
    width: 37%;
    margin: 4% 31.5% 0%;
    text-align: center;
}

.voteArea.-menu   .voteItemsWrap{width: 50%;}
.voteArea.-chara  .voteItemsWrap{width: 25%;}
.voteArea.-series .voteItemsWrap{width: 50%;}
.voteArea.-menu   .voteItemsWrap:nth-child(n+3) .voteItemsWrap:not(p),
.voteArea.-chara  .voteItemsWrap:nth-child(n+5),
.voteArea.-series .voteItemsWrap:nth-child(n+3){margin-top: 7%;}
.voteArea.-menu   .voteItemsWrap:last-child{margin-bottom: 4%;}

.voteArea .voteImage{width: 100%;}
.voteArea.-menu   .voteImage{max-width: 410px;}
.voteArea.-chara  .voteImage{max-width: 220px;}
.voteArea.-series .voteImage{max-width: 450px;}
.voteName{
	position: relative;
	z-index: 0;
	margin: 2% 0;
	font-size: 2.8rem;
	color: #336699;
	line-height: 1.2;
	white-space: nowrap;
}
.voteArea.-menu   .voteName{padding-top: 20px;}
.voteArea.-chara  .voteName{padding-top: 50px;}
.voteArea.-series .voteName{padding-top: 30px;}
.voteName span{
	position: absolute;
	z-index: 1;
	width: 100%;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.voteButton{
	display: block;
	max-width: 224px;
	width: 102%;
	padding-top: 24.1%;
	background-image: url(../image/nineteen-million/vote_buttonVote.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
.voteArea.-chara  .voteButton{margin: 0 0 0 -1%;}
.voteArea.-series .voteButton{
	width: 50%;
	margin: auto;
	padding-top: 11.57%;
}


.voteStepArea .textImage{
	display: block;
	max-width: 910px;
	width: 96%;
	margin: auto;
}
.voteStepArea .imageWide{
	display: block;
	max-width: 870px;
	width: 92%;
	margin: auto;
}
.voteStepArea .buttonTweet{
	display: block;
	max-width: 566px;
	width: 60%;
	margin: auto;
}


.voteDetailArea .left{
	max-width: 220px;
	width: 24%;
	margin-left: 3%;
	float: left;
}
.voteDetailArea .right{
	max-width: 638px;
	width: 68%;
	margin-left: 4%;
	float: left;
}
.voteDetailArea .notes{
	color: #1d599e;
	font-size: 2.4rem;
}
.voteDetailArea .notes li{
	padding-left:1.6rem;
	text-indent:-1.6rem;
}

.voteinfoArea .textImage{
	display: block;
	max-width: 910px;
	width: 96%;
	margin: auto;
}

@media screen and (max-width:640px) {
	.voteArea.-chara  .voteItemsWrap{width: 33.3%;}
	.voteArea.-chara  .voteItemsWrap:nth-child(n+4),
	.voteArea.-series .voteItemsWrap:nth-child(n+3){margin-top: 12%;}
	.voteArea.-chara  .voteName{padding-top: 30%;}
	.voteArea.-series .voteName{padding-top: 12%;}
	.voteArea.-series .voteButton{
		width: 67%;
		padding-top: 15.66%;
	}

	.voteDetailArea .notes li{
		padding-left:1.2rem;
		text-indent:-1.2rem;
	}
}

.y_banner{
	width:  60%;
    margin: 3% auto;
    display: block;
}
.y_banner img{
	width: 100%;
}

.bs{
	box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

.voteArea .voteInner .badgeEnd{
	position: absolute;
    z-index: 10;
    max-width: 216px;
    width: 24.5%;
	top: 0;
    right: 2%;
}

.voteArea .voteinfoArea .badgeEnd{
    position: absolute;
    z-index: 10;
    max-width: 216px;
    width: 24.5%;
    top: 68%;
    right: 2%;
}