@charset "utf-8";
/*-----------------------------------------------
 * img
------------------------------------------------*/
.-ndl{
	-webkit-touch-callout: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-moz-touch-callout: none;
	touch-callout: none;
	-webkit-user-drag: none;
	-khtml-user-drag: none;
}


/*-----------------------------------------------
 * voteAll
-------------------------------------------------*/
.voteAllWrap{
	padding-top: 26px;
	padding-bottom: 60px;
}

.voteAll_h2{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}
.voteAll_h2Line{
	width: 24px;
	height: 18px;
	display: flex;
	justify-content: space-between;
}
.voteAll_h2Line i{
	display: inline-block;
	width: 1px;
	height: 100%;
	position: relative;
}
.voteAll_h2Line i:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto 0;
	height: 100%;
	background-color: var(--color-blue);
}
.voteAll_h2Txt{
	display: inline-block;
	padding: 0 16px;
	flex-shrink: 0;
	line-height: 1;
	font-size: 20px;
	color: var(--color-blue);
}

.voteAll_counTxt{
	display: block;
	font-weight: 500;
	padding-top: 12px;
	text-align: center;
}



.voteAll_countNum{
	color: var(--color-blue);
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-size: 20px;
}
.voteAll_countNum__num{
	display: inline-block;
	font-family: "Orbitron", sans-serif;
	font-size: 48px;
	line-height: 1;
	min-width: 6em;
	margin-right: 0.25em;
	text-align: right;
}
.voteAll_countNum__num.-numAni:after{
	content: '0';
	animation: number-roll 2s ease-in-out 3s forwards;
	display: inline-block;
	line-height: 1;
}

/* 数字上昇アニメーション */
@keyframes number-roll {
	0% {
	  content: "0";
	}
	1% {
	  content: "15,300";
	}
	2% {
	  content: "30,601";
	}
	3% {
	  content: "45,902";
	}
	4% {
	  content: "61,203";
	}
	5% {
	  content: "76,504";
	}
	6% {
	  content: "91,804";
	}
	7% {
	  content: "107,105";
	}
	8% {
	  content: "122,406";
	}
	9% {
	  content: "137,707";
	}
	10% {
	  content: "153,008";
	}
	11% {
	  content: "168,309";
	}
	12% {
	  content: "183,609";
	}
	13% {
	  content: "198,910";
	}
	14% {
	  content: "214,211";
	}
	15% {
	  content: "229,512";
	}
	16% {
	  content: "244,813";
	}
	17% {
	  content: "260,113";
	}
	18% {
	  content: "275,414";
	}
	19% {
	  content: "290,715";
	}
	20% {
	  content: "306,016";
	}
	21% {
	  content: "321,317";
	}
	22% {
	  content: "336,618";
	}
	23% {
	  content: "351,918";
	}
	24% {
	  content: "367,219";
	}
	25% {
	  content: "382,520";
	}
	26% {
	  content: "397,821";
	}
	27% {
	  content: "413,122";
	}
	28% {
	  content: "428,422";
	}
	29% {
	  content: "443,723";
	}
	30% {
	  content: "459,024";
	}
	31% {
	  content: "474,325";
	}
	32% {
	  content: "489,626";
	}
	33% {
	  content: "504,927";
	}
	34% {
	  content: "520,227";
	}
	35% {
	  content: "535,528";
	}
	36% {
	  content: "550,829";
	}
	37% {
	  content: "566,130";
	}
	38% {
	  content: "581,431";
	}
	39% {
	  content: "596,731";
	}
	40% {
	  content: "612,032";
	}
	41% {
	  content: "627,333";
	}
	42% {
	  content: "642,634";
	}
	43% {
	  content: "657,935";
	}
	44% {
	  content: "673,236";
	}
	45% {
	  content: "688,536";
	}
	46% {
	  content: "703,837";
	}
	47% {
	  content: "719,138";
	}
	48% {
	  content: "734,439";
	}
	49% {
	  content: "749,740";
	}
	50% {
	  content: "765,041";
	}
	51% {
	  content: "780,341";
	}
	52% {
	  content: "795,642";
	}
	53% {
	  content: "810,943";
	}
	54% {
	  content: "826,244";
	}
	55% {
	  content: "841,545";
	}
	56% {
	  content: "856,845";
	}
	57% {
	  content: "872,146";
	}
	58% {
	  content: "887,447";
	}
	59% {
	  content: "902,748";
	}
	60% {
	  content: "918,049";
	}
	61% {
	  content: "933,350";
	}
	62% {
	  content: "948,650";
	}
	63% {
	  content: "963,951";
	}
	64% {
	  content: "979,252";
	}
	65% {
	  content: "994,553";
	}
	66% {
	  content: "1,009,854";
	}
	67% {
	  content: "1,025,154";
	}
	68% {
	  content: "1,040,455";
	}
	69% {
	  content: "1,055,756";
	}
	70% {
	  content: "1,071,057";
	}
	71% {
	  content: "1,086,358";
	}
	72% {
	  content: "1,101,659";
	}
	73% {
	  content: "1,116,959";
	}
	74% {
	  content: "1,132,260";
	}
	75% {
	  content: "1,147,561";
	}
	76% {
	  content: "1,162,862";
	}
	77% {
	  content: "1,178,163";
	}
	78% {
	  content: "1,193,463";
	}
	79% {
	  content: "1,208,764";
	}
	80% {
	  content: "1,224,065";
	}
	81% {
	  content: "1,239,366";
	}
	82% {
	  content: "1,254,667";
	}
	83% {
	  content: "1,269,968";
	}
	84% {
	  content: "1,285,268";
	}
	85% {
	  content: "1,300,569";
	}
	86% {
	  content: "1,315,870";
	}
	87% {
	  content: "1,331,171";
	}
	88% {
	  content: "1,346,472";
	}
	89% {
	  content: "1,361,772";
	}
	90% {
	  content: "1,377,073";
	}
	91% {
	  content: "1,392,374";
	}
	92% {
	  content: "1,407,675";
	}
	93% {
	  content: "1,422,976";
	}
	94% {
	  content: "1,438,277";
	}
	95% {
	  content: "1,453,577";
	}
	96% {
	  content: "1,468,878";
	}
	97% {
	  content: "1,484,179";
	}
	98% {
	  content: "1,499,480";
	}
	99% {
	  content: "1,514,781";
	}
	100% {
	  content: "1,530,082";
	}
}

@media screen and (max-width: 359px){
	.voteAll_countNum__num{
		font-size: 40px;
	}
}


/*-----------------------------------------------
 * ranking - contents
-------------------------------------------------*/
.rankingWrap{
	width: 100%;
	padding-top: 96px;
	position: relative;
	background-color: #EFF0F0;
}

.ranking_h2{
	position: relative;
	margin: 0 24px 84px 36px;
}
.ranking_h2:before{
	content: '';
	display: block;
	width: 28px;
	height: 52px;
	position: absolute;
	top: 10px;
	left: -36px;
	background: url(../img/common/deco/deco_title_before.png) no-repeat 0 0 / 100%;
}
.ranking_h2__en{
	min-height: 48px;
	position: relative;
	display: block;
	font-size: 32px;
	color: #00a2c2;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	font-family: var(--font-michroma);
	z-index: 999;
	padding-top: 4px;
}
.ranking_h2__ja{
	font-size: 10px;
	letter-spacing: .025em;
	font-weight: 600;
	position: absolute;
	right: 0;
	top: 46px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	z-index: 1000;
	line-height: 1.25;
}
.ranking_h2__ja::before {
	content: '';
	display: block;
	width: 6px;
	height: 12px;
	background: url(../img/common/deco/deco_arrow_type1.svg) no-repeat center center / contain;
	margin-right: 8px;
}
.ranking_h2__ja:after {
	content: "MOBILE SUIT GUNDAM SEED";
	display: block;
	position: absolute;
	right: -12px;
	bottom: -24px;
	color: #000;
	font-family: "Roboto Condensed", sans-serif;
	line-height: 1;
	font-size: 10px;
	white-space: nowrap;
	opacity: .4;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
}
.ranking_h2__deco {
	width: calc(100% - 86px);
	min-height: 30px;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-left: auto;
	position: absolute;
	bottom: -8px;
	top: 0;
	left: 60px;
	z-index: 1000;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	color: #000;
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.ranking_h2__deco:before {
	content: "";
	background-color: #000;
	width: 100%;
	height: 1px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: -100px;
	left: 25px;
}
.ranking_h2__deco:after {
	content: "";
	background: url(../img/common/deco/deco_title_pointline_sp.svg) no-repeat 0 bottom / 100%;
	position: absolute;
	width: 64px;
    height: 64px;
    left: -38px;
    bottom: -23px;
}
.ranking_h2::after {
	content: 'GP';
	display: block;
	position: absolute;
	z-index: 10;
	font-family: "Roboto Condensed", sans-serif;
	width: 32px;
	right: 4px;
	bottom: -35px;
	font-size: 10px;
	text-align: center;
	line-height: 1;
	-webkit-transform: translateX(100%) scale(0.7);
	transform: translateX(100%) scale(0.7);
	color: #00a2c2;
}


.ranking__hbg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 30%;/* 126 */
	background: url(../img/common/bg_dots.svg) no-repeat center top / cover;
}
.ranking__hbg.-htbg{
	margin-top: -10%;/* -42 */
}


.rankingContent{
	width: 100%;
	padding-top: 104px;
	position: relative;
}
.rankingContent.-npt{
	padding-top: 0;
}
.ranking_h3{
	width: 100%;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.ranking_h3:before{
	content: '';
	width: 100%;
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: var(--color-blue);
	margin: auto 0;
}


.ranking_h3In{
	display: inline-flex;
	position: relative;
	justify-content: center;
	align-items: center;
	height: 24px;
	line-height: 1;
	background-color: var(--color-blue);
	color: #FFF;
	font-family: var(--font-michroma);
	font-size: 12px;
	padding: 0 8px;
	min-width: 184px;
}
.ranking_h3In:before,
.ranking_h3In:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	display: block;
	width: 16px;
	height: 24px;
	background-color: var(--color-blue);
}
.ranking_h3In:before{
	left: -15px;
	/* clip-path: polygon(100% 0, 0 50%, 100% 100%); */
	clip-path: polygon(80% 0, 100% 0, 100% 100%, 80% 100%, 0 50%);
}
.ranking_h3In:after{
	right: -15px;
	/* clip-path: polygon(0 0, 0% 100%, 100% 50%); */
	clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0 100%, 0 0);
}

.ranking_h3__line{
	width: 20px;
	height: 10px;
	display: flex;
	justify-content: space-between;
}

.ranking_h3__line i{
	display: inline-block;
	width: 1px;
	height: 100%;
	position: relative;
}
.ranking_h3__line i:before{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto 0;
	height: 100%;
	background-color: #FFF;
}

.ranking_h3__txt{
	display: inline-block;
	padding: 0 12px;
}


.rankingContentIn{
	padding-top: 32px;
}
.rankingContentIn.-pt64{
	padding-top: 64px;
}

.ranking_h4{
	width: 100%;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	padding-bottom: 26px;
	position: relative;
}
.ranking_h4:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 45px;
	height: 12px;
	background: url(../img/common/line_h4.svg) no-repeat center / cover;
	margin: 0 auto;
}

.ranking_img{
	padding-top: 12px;
}
.ranking_img img{
	width: 100%;
}


.imgModalContWrap{
	width: 100%;
	padding-top: 24px;
	padding-left: 5.7143%;
	padding-right: 5.7143%;
	position: relative;
	z-index: 2;
}
.imgModal__link{
	display: block;
	width: 100%;
	position: relative;
	overflow: hidden;
}
.imgModal__link:after{
	content: '';
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 0 8px 8px 0;
	width: 6.45161%;
	padding-top: 6.45161%;
	background: url(../img/common/modalbtn.svg) no-repeat center / contain;
}

@media (hover: hover) and (pointer: fine){
	.imgModal__link img{
		transition: .3s ease;
	}
	.imgModal__link img:hover{
		filter: brightness(105%);
		transform: scale(1.05);
	}
}


/**
* COMMENT
**/
#comment .ranking_h3{
	position: relative;
	z-index: 2;
}
.commentCont{
	width: 100%;
	background-color: #000;
	color: #FFF;
	margin-top: -14px;
	border: 4px solid var(--color-blue);
	position: relative;
}
.commentCont:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url(../img/gp2024/comment_bg_grid.png) repeat left top / min(5.3334vw, 40px) min(5.3334vw, 40px);
}
.commentCont::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 48%;
}

.commentContIn{
	position: relative;
	z-index: 2;
	padding: 52px 5.8253% 40px;
}
.comment_title{
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 4px 0;
	line-height: 1.5;
	background: url(../img/gp2024/comment_bg_title.svg) repeat;
}
.comment_txt{
	padding-top: 24px;
	line-height: 2;
}

@media screen and (max-width: 399px){
	.comment_title{
		font-size: 18px;
	}
}



/**
* OTHER
**/
#other:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #fff;
	margin-top: calc(56px + 30%);
}
#other .ranking__hbg{
	margin-top: 56px;
	transform: scale(-1);
}
#other .ranking_h3{
	z-index: 2;
}
#other .rankingContentIn{
	position: relative;
	z-index: 2;
}

.other_headText{
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	color: var(--color-blue);
	line-height: 1.6;
}

.otherContentWrap{
	padding-top: 30px;
}
.otherContentTabLists{
	display: flex;
}
.otherContentTabList{
	width: 50%;
	height: 54px;
	position: relative;
	background-color: #EFF0F0;
}
.otherContentTabList[data-tab="character"]{
	clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 100%, 0% 100%);
}
.otherContentTabList[data-tab="character"]:before{
	content: '';
	position: absolute;
	top: -10px;
	right: 21px;
	bottom: -10px;
	width: 2px;
	background-color: #fff;
	transform: rotate(-30deg);
	z-index: 2;
}
.otherContentTabList[data-tab="ms-ma"]{
	clip-path: polygon(32px 0, 100% 0, 100% 100%, 0% 100%);
}
.otherContentTabList[data-tab="ms-ma"]:before{
	content: '';
	position: absolute;
	top: -10px;
	left: 21px;
	bottom: -10px;
	width: 2px;
	background-color: #fff;
	transform: rotate(30deg);
	z-index: 2;
}
.otherContentTab{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: #fff;
	font-family: var(--font-michroma);
	color: var(--color-blue);
	background-color: #EFF0F0;
}

.otherContentTabList[data-tab="character"] .otherContentTab{
	padding-right: 32px;
}
.otherContentTabList[data-tab="ms-ma"] .otherContentTab{
	padding-left: 32px;
}

.otherContentTab:before{
	content: '';
	width: 6px;
	height: 6px;
	position: absolute;
	-webkit-mask: url(../img/gp2024/other_tab_accent.svg) no-repeat center / contain;
	mask: url(../img/gp2024/other_tab_accent.svg) no-repeat center / contain;
	background-color: var(--color-blue);
}
.otherContentTabList[data-tab="character"] .otherContentTab:before{
	top: 3px;
	left: 3px;
}
.otherContentTabList[data-tab="ms-ma"] .otherContentTab:before{
	bottom: 3px;
	right: 3px;
	transform: rotate(180deg);
}

/* --is-current */
.otherContentTab.--is-current{
	background-color: var(--color-blue);
	color: #FFF;
}
.otherContentTab.--is-current:before{
	background-color: #fff;
}

@media (hover: hover) and (pointer: fine){
	.otherContentTab{
		transition: filter .3s ease;
	}
	.otherContentTab:hover{
		filter: brightness(105%);
	}
	.otherContentTab.--is-current:hover{
		filter: brightness(100%);
	}
}
@media screen and (max-width: 399px){
	.otherContentTab_txt{
		font-size: 15px;
	}
}
@media screen and (max-width: 359px){
	.otherContentTab_txt{
		font-size: 13px;
	}
}



.otherContentInWrap{
	width: 100%;
}
.otherContent{
	width: 100%;
	position: relative;
}
.otherContentIn{
	position: relative;
	padding: 40px 7.1429%;/* 40px 30px */
}

.otherRankList{
	display: flex;
}
.otherRankLists .otherRankList:not(:last-child){
	margin-bottom: 6px;
}
.otherRankList > dt{
	font-family: var(--font-roboto);
	flex-shrink: 0;
	color: var(--color-blue);
	padding-right: 18px;
	line-height: 28px;
	position: relative;
	letter-spacing: 0;
}
.otherRankList > dt:after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 5px;
	height: 16px;
	margin: 6px 6px 0 0;
	background: url(../img/gp2024/other_rankList__dt_ac.svg) no-repeat center / contain;
}
.otherRankList > dd{
	font-size: 14px;
	line-height: 28px;
	color: #272727;
}


.otherContentAccent{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}
.otherContentAccent__sticky{
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	max-height: 100%;
}
.otherContentAccent__ttl{
	width: 7.1429%;
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-family: var(--font-roboto);
	color: #C2C2C2;
	letter-spacing: 0.03em;
	writing-mode: vertical-rl;
	line-height: 1;
}
.otherContentAccent__ttl.-l{
	left: 0;
	transform: rotate(180deg);
}
.otherContentAccent__ttl.-r{
	right: 0;
}

.otherContentAccent__side{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 8px;
}
.otherContentAccent__side > i{
	position: absolute;
	width: 16px;
	height: 16px;
	background: url(../img/gp2024/other_contentAccent__side.svg) no-repeat center / contain;
}
.otherContentAccent__side > i:nth-of-type(1){
	top: 0;
	left: 0;
}
.otherContentAccent__side > i:nth-of-type(2){
	top: 0;
	right: 0;
	transform: rotate(90deg);
}
.otherContentAccent__side > i:nth-of-type(3){
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
}
.otherContentAccent__side > i:nth-of-type(4){
	bottom: 0;
	left: 0;
	transform: rotate(-90deg);
}



/**
* MOVIE
**/
#movie{
	padding-top: 56px;
	padding-bottom: 96px;
}

#movie .rankingContentIn{
	position: relative;
}
.movie_headText{
	text-align: center;
}
.movie_headText_h{
	display: block;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-blue);
}
.movie_headText_n{
	font-size: 12px;
}

.movie_movieAreaWrap{
	padding-top: 24px;
	padding-left: 5.7143%;
    padding-right: 5.7143%;
}
.movieArea{
	width: 100%;
	padding-top: 56.25%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.movieArea:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	opacity: 40%;
	z-index: 2;
	transition: .3s ease;
}
.movieArea > img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
	transition: .4s ease;
}

.movie_arrow{
	position: absolute;
	top: calc(50% - 15.0538%);
	width: 15.0538%;/* 56 */
	padding-top: 15.0538%;/* 56 */
	border-radius: 50%;
	background-color: #FFF;
	z-index: 2;
}
.movie_arrow:before{
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 34.7369%;
	height: 40%;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	background-color: var(--color-blue);
}

@media (hover: hover) and (pointer: fine){
	.movieArea:hover::before{
		opacity: 32%;
		overflow: hidden;
	}
	.movieArea:hover img{
		transform: scale(105%);
	}
}

/*-----------------------------------------------
 * Footer
-------------------------------------------------*/
.foooter{
	width: 100%;
}
.footer_bnrLists{
	padding: 54px 5.9524%;
	background-color: var(--color-blue);
}
.footer_bnrList{
	width: 100%;
}
.footer_bnrList:not(:last-child){
	margin-bottom: 20px;
}
.footer_bnrList img{
	width: 100%;
}
.footer_bnrList__link{
	display: block;
	text-decoration: none;
	transition: .3s ease;
}
.footer_copyrightWrap{
	padding: 40px 0;
	color: #FFF;
	background-color: #000;
}
.footer_copyright__caution{
	font-size: 12px;
	line-height: 2;
	text-align: center;
}
.footer_copyright__linkLists{
	margin-top: 32px;
	font-size: 13px;
	line-height: 1;
	display: flex;
	justify-content: center;
}
.footer_copyright__linkList{
	padding: 0 12px;
	position: relative;
}
.footer_copyright__linkList:not(:last-child)::before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 1px;
	background-color: #fff;
}
.footer_copyright__link{
	display: inline-block;
	text-decoration: none;
	color: var(--color-blue);
}
.footer_copyright__cp{
	margin-top: 32px;
	font-size: 12px;
	color: #AAA;
	text-align: center;
}


@media (hover: hover) and (pointer: fine){
	.footer_bnrList__link:hover{
		filter:brightness(115%);
	}
	.footer_copyright__link{
		transition: .3s ease;
	}
	.footer_copyright__link:hover{
		text-underline-offset: 4px;
		text-decoration: underline;
	}
}




/*-----------------------------------------------
 * Animation
-------------------------------------------------*/
@keyframes ani_line {
	0%,20%{
		height: 0%;
	}
	60%,100%{
		height: 100%;
	}
}

.voteAll_h2Line i,
.ranking_h3__line i{
	margin: auto 0;
	animation: ani_line 1s linear infinite alternate;
}
.voteAll_h2Line.-l i:nth-of-type(5),
.ranking_h3__line.-l i:nth-of-type(5){
	animation-delay: .0s;
}
.voteAll_h2Line.-l i:nth-of-type(4),
.ranking_h3__line.-l i:nth-of-type(4){
	animation-delay: .2s;
}
.voteAll_h2Line.-l i:nth-of-type(3),
.ranking_h3__line.-l i:nth-of-type(3){
	animation-delay: .4s;
}
.voteAll_h2Line.-l i:nth-of-type(2),
.ranking_h3__line.-l i:nth-of-type(2){
	animation-delay: .6s;
}
.voteAll_h2Line.-l i:nth-of-type(1),
.ranking_h3__line.-l i:nth-of-type(1){
	animation-delay: .8s;
}

.voteAll_h2Line.-r i:nth-of-type(1),
.ranking_h3__line.-r i:nth-of-type(1){
	animation-delay: .0s;
}
.voteAll_h2Line.-r i:nth-of-type(2),
.ranking_h3__line.-r i:nth-of-type(2){
	animation-delay: .2s;
}
.voteAll_h2Line.-r i:nth-of-type(3),
.ranking_h3__line.-r i:nth-of-type(3){
	animation-delay: .4s;
}
.voteAll_h2Line.-r i:nth-of-type(4),
.ranking_h3__line.-r i:nth-of-type(4){
	animation-delay: .6s;
}
.voteAll_h2Line.-r i:nth-of-type(5),
.ranking_h3__line.-r i:nth-of-type(5){
	animation-delay: .8s;
}



/**
* ranking_img
**/
.ranking_img img{
	opacity: 0;
	transform: translateY(50%);
	transition: transform .6s ease, opacity .4s;
}
.ranking_img.is-ani img{
	opacity: 1;
	transform: translateY(0%);
}
.ranking_img.is-ani img:nth-of-type(1){
	transition-delay: .0s;
}
.ranking_img.is-ani img:nth-of-type(2){
	transition-delay: .1s;
}
.ranking_img.is-ani img:nth-of-type(3){
	transition-delay: .2s;
}

/**
* rankingContentIn -> imgModalContWrap
**/
.rankingContentIn .imgModalContWrap{
	transform: scale(80%);
	opacity: 0;
	transition: transform .4s ease, opacity .3s;
}
.rankingContentIn.is-ani .imgModalContWrap{
	transform: scale(100%);
	opacity: 1;
}