@charset "UTF-8";
/* ============================================
	KV
============================================ */
body.y1998 .kvArea{
	background: url("../images/1998/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2002 .kvArea{
	background: url("../images/2002/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2006 .kvArea{
	background: url("../images/2006/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2010 .kvArea{
	background: url("../images/2010/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2014 .kvArea{
	background: url("../images/2014/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2018 .kvArea{
	background: url("../images/2018/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
body.y2022 .kvArea{
	background: url("../images/2022/kv_bg.jpg") no-repeat top center;
	background-size: cover;
}
.kvArea{
	position:relative;
	min-width: 1135px;
}
@media only screen and (max-width: 1135px) {
	.kvArea{
		min-width: 100%;
	}
}
.kvArea__img{
	width:100%;
	max-width: 1135px;
	margin: auto;
	padding: 100px 0px 30px 0px;
}
@media only screen and (max-width: 1135px) {
	.kvArea__img{
		width:95%;
		padding: 4vw 0px 0vw 0px;
	}
}
.kvArea__img img{
	width:100%;
	height:auto;
	vertical-align:top;
	max-width:none;
}
.kvArea h2{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: inline-block;
	line-height: 1;
	margin: auto;
	z-index: 1;
	font-weight: normal;
	color: #ffffff;
	opacity: 0.2;
	text-align: center;
}
.kvArea h2.france{
	font-size: 230px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.france{
		font-size: 9.5vw;
	}
}
.kvArea h2.japan{
	font-size: 156px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.japan{
		font-size: 13vw;
	}
}
.kvArea h2.germany{
	font-size: 190px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.germany{
		font-size: 13vw;
	}
}
.kvArea h2.africa{
	font-size: 155px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.africa{
		font-size: 11vw;
	}
}
.kvArea h2.brazil{
	font-size: 200px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.brazil{
		font-size: 16vw;
	}
}
.kvArea h2.russia{
	font-size: 200px;
}
@media only screen and (max-width: 1135px) {
	.kvArea h2.russia{
		font-size: 16vw;
	}
}

/* ============================================
	HISTORY
============================================ */
.history {
	display: block;
	width: 100%;
	margin: -250px auto 0px auto;
	padding: 0px 0px 0px 0px;
	overflow-x: clip;
}
@media only screen and (max-width: 1135px) {
	.history {
		margin: -20vw auto 0px auto;
		overflow: hidden;
	}
}
@media only screen and (max-width: 640px) {
	.history {
		margin: -20vw auto 0px auto;
	}
}
.history .inner {
	width: 100%;
	margin: 0px auto;
}
.history .inner .contents {
	position: relative;
	display: block;
	width: 100%;
	margin: 0px auto 100px auto;
	padding: 0px 0px 0px 0px;
	/*overflow: hidden;*/
	z-index: 2;
}
@media only screen and (max-width: 640px) {
	.history .inner .contents {
		margin: 0px auto 70px auto;
	}
}
.history .inner .contents:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 150%;
	height: 100%;
	margin: 10% -10% 0;
background: #031434;
background: -moz-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -webkit-gradient(linear, left center, right center, from(#041c4b), to(#031434));
background: -webkit-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -o-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -ms-linear-gradient(left, #041c4b 0%, #031434 100%);
background: linear-gradient(to right, #041c4b 0%, #031434 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#041c4b, endColorstr=#031434,GradientType=1 );
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
	transform: rotate(-9deg);
	z-index: -1;
}
@media only screen and (max-width: 640px) {
	.history .inner .contents:before {
		width: 250%;
		margin: 30% -70% 0;
	}
}
.history .inner .contents .contents_inner {
	position: relative;
	width: 100%;
	max-width: 1330px;
	min-width: 1135px;
	margin: 100px auto 0px auto;
	box-sizing: boder-box;
	height: 100%;
	padding: 0px;
}
@media only screen and (max-width: 1135px) {
	.history .inner .contents .contents_inner {
		max-width: 100%;
		min-width: 100%;
		
	}
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .contents_inner {
		width: 90%;
		margin: 4vw auto 0px auto;
	}
}
.history .inner .contents .txtarea {
	position: relative;
	width: 100%;
	/*height: 550px;*/
	margin: 0px;
	text-align: center;
	padding: 150px 0px 100px 0px;
}
@media only screen and (max-width: 1135px) {
	.history .inner .contents .txtarea {
		padding: 15vw 0px 0px 0px;
		height: 90vw;
	}
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .txtarea {
		padding: 3vw 0px 0px 0px;
		height: auto;
		width: 95%;
		margin: auto;
	}
}
.history .inner .contents .txtarea .year{
	position: absolute;
    top: -6%;
    left: 0;
	right: 0;
	display: inline-block;
    margin: auto;
    z-index: 1;
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .txtarea .year{
		position: inherit;
		width: 30vw;
		display: block;
	}
}
.history .inner .contents .txtarea .place{
	position: absolute;
    top: -10%;
	right: 50px;
    margin: auto;
    z-index: 1;
}
@media only screen and (max-width: 1135px) {
	.history .inner .contents .txtarea .place{
		position: absolute;
	    top: -7%;
		right: 0px;
		width: 30vw
	}
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .txtarea .place{
		position: inherit;
		width: 22vw;
		right: 0;
		display: block;
	}
}
/*-- 2002 --*/
.y2002 .history .inner .contents .txtarea .place{
	width: 380px;
}
@media only screen and (max-width: 1135px) {
	.y2002 .history .inner .contents .txtarea .place{
		width: 30vw;
	}
}
.y2002 .history .inner .contents .txtarea .place_sp{
	display: none;
}
@media only screen and (max-width: 640px) {
	.y2002 .history .inner .contents .txtarea .place{
		display: none;
	}
	.y2002 .history .inner .contents .txtarea .place_sp{
		display: block;
		width: 30vw;
		margin: auto;
	}
}
/*-- 2006 --*/
.y2006 .history .inner .contents .txtarea .place{
	top: -5%;
	width: 380px;
}
@media only screen and (max-width: 1135px) {
	.y2006 .history .inner .contents .txtarea .place{
		width: 30vw;
	}
}
/*-- 2010 --*/
.y2010 .history .inner .contents .txtarea .place{
	width: 380px;
}
@media only screen and (max-width: 1135px) {
	.y2010 .history .inner .contents .txtarea .place{
		width: 30vw;
	}
}
.y2010 .history .inner .contents .txtarea .place_sp{
	display: none;
}
@media only screen and (max-width: 640px) {
	.y2010 .history .inner .contents .txtarea .place{
		display: none;
	}
	.y2010 .history .inner .contents .txtarea .place_sp{
		display: block;
		width: 30vw;
		margin: auto;
	}
}

.history .inner .contents .txtarea h3{
	display: inline-block;
	font-size: 30px;
	line-height: 2;
	margin: 0px auto 50px auto;
	z-index: 1;
	color: #ffffff;
	font-weight: 700;
	border-bottom: 2px solid #ffffff;
}
@media only screen and (max-width: 1135px) {
	.history .inner .contents .txtarea h3{
		font-size: 3vw;
	}
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .txtarea h3{
		font-size: 5vw;
		margin: 0px auto 20px auto;
	}
}
.history .inner .contents .txtarea p{
	display: block;
	width: 1035px;
	font-size: 22px;
	line-height: 2.4; 
	margin: auto;
	color: #ffffff;
	font-weight: 300;
}
@media only screen and (max-width: 1135px) {
	.history .inner .contents .txtarea p{
		width: 100%;
		font-size: 2vw;
	}
}
@media only screen and (max-width: 640px) {
	.history .inner .contents .txtarea p{
		font-size: 3.8vw;
		line-height: 1.8;
		text-align: left;
	}
}



/*-- 2022 --*/
.y2022 .history {
	margin: -200px auto 0px auto;
}
@media only screen and (max-width: 1135px) {
	.y2022 .history {
		margin: -20vw auto 0px auto;
		overflow: hidden;
	}
}
@media only screen and (max-width: 640px) {
	.y2022 .history {
		margin: -20vw auto 0px auto;
	}
}

.y2022 .history .inner .contents .txtarea {
	padding: 100px 0px 100px 0px;
}
@media only screen and (max-width: 1135px) {
	.y2022 .history .inner .contents .txtarea {
		padding: 15vw 0px 0px 0px;
	}
}
@media only screen and (max-width: 640px) {
	.y2022 .history .inner .contents .txtarea {
		padding: 3vw 0px 0px 0px;
	}
}

.y2022 .history .inner .contents .txtarea .place{
    top: -7%;
}
@media only screen and (max-width: 1135px) {
	.y2022 .history .inner .contents .txtarea .place{
	    top: -7%;
	}
}

.y2022 .history .inner .contents:before {
	margin: 10% -20% 0;
}
@media only screen and (max-width: 640px) {
	.y2022 .history .inner .contents:before {
		margin: 30% -70% 0;
	}
}

/* ============================================
	JERSEY
============================================ */
.jersey {
	display: block;
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;
}
.nodis{
	display: none;
}
@media only screen and (max-width: 1135px) {
	.jersey {
		overflow: hidden;
	}
}
.jersey .inner {
	width: 1135px;
	margin: 0px auto 100px auto;
}
@media only screen and (max-width: 1135px) {
	.jersey .inner {
		width: 95%;
	}
}
@media only screen and (max-width: 640px) {
	.jersey .inner {
		width: 100%;
		margin: 0px auto 25px auto;
	}
}
.jersey .inner ul{
	margin:40px auto 0px auto;
	padding:0px;
	list-style:none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;		
}
@media only screen and (max-width: 1135px) {
	.jersey .inner ul{
		margin:20px auto 0px auto;
	}
}

/*-- 1列 --*/
.jersey .one ul li{
	display:block;
	width:300px;
	padding: 0px 0px 0px 0px;
	margin:0px auto 0px auto;
}
@media only screen and (max-width: 1135px) {
	.jersey .one ul li{
		width:30%;
	}
}
@media only screen and (max-width: 640px) {
	.jersey .one ul li{
		width:60%;
	}
}

body.y1998 .jersey .one ul li{
	display:block;
	width:230px;
	padding: 0px 0px 0px 0px;
	margin:0px auto 0px auto;
}
@media only screen and (max-width: 1135px) {
	body.y1998 .jersey .one ul li{
		width:23%;
	}
}
@media only screen and (max-width: 640px) {
	body.y1998 .jersey .one ul li{
		width:40%;
	}
}

/*-- 4列 --*/
.jersey .four ul li{
	display:block;
	width:24.2%;
	float:left;
	padding: 0px 0px 0px 0px;
	margin:0px 1% 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.jersey .four ul li{
		width:49%;
		margin:0px 2% 0px 0px;
	}
	.jersey .four ul li:nth-child(2n){
		margin:0px 0% 2% 0px;
	}
	.jersey .four ul li:last-child{
	margin:0px 0% 0px 0px;
}
}




.jersey .inner ul li img{
	display:block;
	width:100%;
}

/* ============================================
	MATCH
============================================ */
.match {
	display: block;
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
	overflow-x: clip;
}
@media only screen and (max-width: 1135px) {
	.match {
		overflow: hidden;
	}
}
.match .ttl h2{
	color: #ffffff !important;
	text-shadow: 0px 0px 4px #333333;
}
.match .inner {
	width: 100%;
	margin: 0px auto;
}
.match .inner .contents {
	position: relative;
	display: block;
	width: 100%;
	margin: 0px auto 100px auto;
	padding: 0px 0px 0px 0px;
	/*overflow: hidden;*/
	z-index: 2;
}
@media only screen and (max-width: 640px) {
	.match .inner .contents {
		margin: 0px auto 50px auto;
	}
}
.match .inner .contents:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 120%;
	height: 77%;
	margin: 20% -10% 0;
background: #031434;
background: -moz-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -webkit-gradient(linear, left center, right center, from(#041c4b), to(#031434));
background: -webkit-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -o-linear-gradient(left, #041c4b 0%, #031434 100%);
background: -ms-linear-gradient(left, #041c4b 0%, #031434 100%);
background: linear-gradient(to right, #041c4b 0%, #031434 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#041c4b, endColorstr=#031434,GradientType=1 );
	-webkit-transform-origin: left center;
	-ms-transform-origin: left center;
	transform-origin: left center;
	-webkit-transform: rotate(-9deg);
	-ms-transform: rotate(-9deg);
	transform: rotate(-9deg);
	z-index: -1;
}
@media only screen and (max-width: 640px) {
	.match .inner .contents:before {
		width: 150%;
		height: 90%;
		margin: 25% -20% 0;
	}
}
.match .inner .contents .contents_inner {
	position: relative;
	width: 100%;
	max-width: 1130px;
	margin: 100px auto 0px auto;
	box-sizing: boder-box;
	height: 100%;
	padding: 0px;
	width: 1130px;
}
@media only screen and (max-width: 1135px) {
	.match .inner .contents .contents_inner {
	margin: 0px auto 0px auto;
	width: 95%;
	}
}
.match .inner ul{
	margin:40px auto 30px auto;
	padding:0px;
	list-style:none;
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;		
}
@media only screen and (max-width: 640px) {
	.match .inner ul{
		margin:10px auto 0px auto;
	}
}
.match .inner ul li{
	display:block;
	width:32%;
	padding: 0px 0px 0px 0px;
	margin:0px 2% 0px 0px;
	box-shadow: 7px 7px 0px 0px rgba(220,8,33,1);
	text-align: center;
	overflow: hidden;
	background-color: #ffffff;
}
@media only screen and (max-width: 1135px) {
	.match .inner ul li{
		box-shadow: 3px 3px 0px 0px rgba(220,8,33,1);
	}
}
.match .inner ul li:last-child{
	margin:0px 0% 0px 0px;
}
.match .inner ul li a{
	display: block;
	background: url("../images/match_bg01.png") no-repeat left top #ffffff;
	background-size: contain;
	text-decoration: none;
	transition: all 0.2s ease;
}
.match .inner ul li a:hover{
  transform: scale(1.05);
}
.match .inner p.date{
	display: block;
	font-size: 60px;
	line-height: 1; 
	margin: 0px auto 15px auto;
	padding: 20px 0px 0px 0px;
	color: #021231;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.date{
		font-size: 5vw;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.date{
		font-size: 6vw;
		margin: 0px auto 7px auto;
		padding: 10px 0px 0px 0px;
	}
	.y2022 .match .inner p.date{
		font-size: 5.4vw;
	}
}
.match .inner p.result{
	display: block;
	font-size: 20px;
	line-height: 1; 
	margin: 0px auto 0px auto;
	padding: 15px 0px 15px 0px;
	color: #021231;
	font-weight: 500;
	background:rgba(2,18,49,0.1);	
}
@media only screen and (max-width: 1135px) {
	.match .inner p.result{
		font-size: 1.8vw;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.result{
		font-size: 2.5vw;
		line-height: 1.2;
		padding: 0px 2% 0px 2%;
		height: 11vw;
	}
	.y2002 .match .inner p.result{
		padding: 5px 2% 0px 2%;
	}
	.y2006 .match .inner p.result{
		height: 16vw;
	}
	.y2010 .match .inner p.result{
		height: 14vw;
	}
	.y2018 .match .inner p.result{
		height: 14vw;
	}	
}
.match .inner p.stage{
	display: block;
	font-size: 20px;
	line-height: 1; 
	margin: 0px auto 0px auto;
	padding: 15px 0px 15px 0px;
	color: #ffffff;
	font-weight: 700;
	background-color: #021231;
}
.match .inner p.stage span{
	margin: 0px 10px 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.stage{
		font-size: 1.8vw;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.stage{
		font-size: 3vw;
		line-height: 1.2;
		padding: 1vw 0px 1vw 0px;
	}
	.match .inner p.stage span{
		display: block;
		margin: 0px 0px 0px 0px;
	}
}
.match .inner p.name{
	display: block;
	font-size: 20px;
	line-height: 1; 
	margin: 10px auto 20px auto;
	color: #021231;
	font-weight: 700;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.name{
		font-size: 1.8vw;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.name{
		font-size: 3vw;
		margin: 5px auto 5px auto;
	}
}
.match .inner p.score{
	display: block;
	font-size: 100px;
	line-height: 1; 
	margin: auto;
	padding: 0px 30px 30px 0px;
	color: #021231;
	font-style: italic;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.score{
		font-size: 8vw;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.score{
		font-size: 8vw;
		padding: 0px 2vw 10px 0px;
	}
}
.match .inner p.score02{
	position: absolute;
	top: 25%;
	left: 25%;
	display: inline-block;
	font-size: 150px;
	line-height: 1; 
	margin: 0px auto 0px auto;
	color: #ffffff;
	font-style: italic;
	z-index: 1;
	text-align: center;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.score02{
		font-size: 14vw;
		padding-right: 5%;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner p.score02{
		font-size: 10vw;
		top: 40%;
		left: 0;
		right: 0;
		display: block;
		text-align: center;
	}
}
.match .inner p.score02 span{
	display: block;
	font-size: 40px;
	margin-left: 30px;
}
@media only screen and (max-width: 1135px) {
	.match .inner p.score02 span{
		font-size: 3vw;
		margin-left: 2%;
	}
}

.match .inner img.flag{
	display: block;
	margin: 20px auto 0px auto;
}
@media only screen and (max-width: 640px) {
	.match .inner img.flag{
		margin: 10px auto 0px auto;
		width: 50%;
	}
}




.match .inner .biggame{
	position: relative;
	display:block;
	width:100%;
	padding: 0px 0px 0px 0px;
	margin:0px 0% 0px 0px;
	box-shadow: 7px 7px 0px 0px rgba(220,8,33,1);
	z-index: 0;
	overflow: hidden;
}
@media only screen and (max-width: 1135px) {
	.match .inner .biggame{
		margin:20px 0% 0px 0px;
	}
}
@media only screen and (max-width: 640px) {
	.match .inner .biggame{
		box-shadow: 3px 3px 0px 0px rgba(220,8,33,1);
	}
}
.match .inner .biggame:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.match .inner .biggame a{
	display: block;
	text-decoration: none;
	transition: all 0.2s ease;
}
.match .inner .biggame a:hover{
  transform: scale(1.05);
}
.match .inner .biggame .txtarea{
	display:block;
	float: left;
	width:48%;
	padding: 0px 0px 0px 0px;
	margin:0px 0% 0px 0px;
	background: url("../images/match_bg01.png") no-repeat left top #ffffff;
	background-size: contain;
	text-align: center;
}
@media only screen and (max-width: 640px) {
	.match .inner .biggame .txtarea{
		float: none;
		width:100%;
		padding: 5px 0px 10px 0px;
	}
	.match .inner .biggame p.result{
		height: 7vw;
	}
	.match .inner .biggame img.flag{
		width: 25%;
	}
	.match .inner p.score02{
		font-size: 20vw;
		top: 30%;
	}
}

.match .inner .biggame .imgarea{
	position: absolute;
	top: 0;
	right: -3%;
	display:block;
	width:58%;
	padding: 0px 0px 0px 0px;
	margin:0px 0% 0px 0px;
}
@media only screen and (max-width: 640px) {
	.match .inner .biggame .imgarea{
		position: inherit;
		right: 0%;
		width:100%;
	}
}









.slanting04{
 display:inline-block;
 transform:skewX(-10deg);
 overflow:hidden;
}
@media only screen and (max-width: 1135px) {
	.slanting04{
		 transform:skewX(0deg);
	}
}
.slanting04 img{
	width:100%;
}
.slanting04 img{
 width:100%;
 transform:skewX(10deg) scale(1.1);
}
@media only screen and (max-width: 1135px) {
	.slanting04 img{
		 transform:skewX(0deg) scale(1.0);
	}
}

/* ============================================
	PLAYER
============================================ */
.player {
	display: block;
	width: 100%;
	margin: auto;
	padding: 0px 0px 0px 0px;
}
.player .inner {
	width: 1135px;
	margin: 40px auto 100px auto;
}
@media only screen and (max-width: 1135px) {
	.player .inner {
		width: 95%;
	}
}
@media only screen and (max-width: 640px) {
	.player .inner {
		width: 100%;
		margin: 10px auto 25px auto;
	}
}
.player .inner h3{
	display: block;
	font-size: 60px;
	line-height: 1; 
	margin: 0px auto 0px auto;
	padding: 15px 0px 15px 0px;
	color: #021231;
	background:rgba(255,255,255,0.5);	
	text-align: center;
	font-weight: normal;
}
@media only screen and (max-width: 1135px) {
	.player .inner h3{
		font-size: 5vw;
	}
}
@media only screen and (max-width: 640px) {
	.player .inner h3{
		font-size: 7vw;
		padding: 2px 0px 2px 0px;
	}
}
.player .inner .staff{
	width: 100%;
	margin: 40px auto 0px auto;
}
@media only screen and (max-width: 640px) {
	.player .inner .staff{
		width: 95%;
		margin: 10px auto 0px auto;
	}
}
.player .inner .staff:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.player .inner .staff img{
	display: block;
	float: left;
}
@media only screen and (max-width: 1135px) {
	.player .inner .staff img{
		width: 30%;
	}
}
.player .inner .staff .txtarea{
	display: block;
	float: right;
	font-size: 28px;
	line-height: 2;
	margin: 0px auto 0px auto;
	padding: 30px;
	color: #021231;
	background:rgba(255,255,255,0.5);	
	font-weight: 900;
	width: 700px;
}
@media only screen and (max-width: 1135px) {
	.player .inner .staff .txtarea{
		font-size: 2.5vw;
		line-height: 1.5;
		padding: 3%;
		width: 68%;
	}
}

.player .inner .staff .txtarea02{
	display: block;
	float: right;
	margin: 0px auto 0px auto;
	width: 700px;
}
@media only screen and (max-width: 1135px) {
	.player .inner .staff .txtarea02{
		width: 68%;
	}
}

.player .inner .staff .txtarea02 p{
	display: block;
	font-size: 28px;
	line-height: 2;
	padding: 30px;
	color: #021231;
	background:rgba(255,255,255,0.5);	
	font-weight: 900;
	margin: 0px 0px 20px 0px;
}
@media only screen and (max-width: 1135px) {
	.player .inner .staff .txtarea02 p{
		font-size: 2.5vw;
		line-height: 1.5;
		padding: 3%;
	}
}
@media only screen and (max-width: 640px) {
	.player .inner .staff .txtarea02 p{
		margin: 0px 0px 10px 0px;
	}
}




/* ============================================
	PHOTO
============================================ */
.player_photo__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
	margin:40px auto 30px auto;
}
@media only screen and (max-width: 640px) {
	.player_photo__list {
		margin:5px auto 5px auto;
		width: 95%;
	}
}
.player_photo__list.mgn {
	margin:100px auto 30px auto;
}
@media only screen and (max-width: 640px) {
	.player_photo__list.mgn {
		margin:20px auto 5px auto;
	}
}
.player_photo__list li {
	width:32%;
	margin:0px 2% 2% 0px;
}
.player_photo__list li:nth-child(3n) {
	margin:0px 0% 2% 0px;
}
.player_photo__list li a {
  width: 100%;
  text-align: center;
  margin: 0px;
  display: block;
}
.player_photo__list li a img {
  object-fit: scale-down;
  font-family: "object-fit: scale-down;";
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.player_photo__list li a img:hover {
  transform: scale(1.05);
}

.mfp-zoom, .mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close, button.mfp-close, button.mfp-arrow, .mfp-close {
  cursor: pointer !important;
}

/* ============================================
	フォトギャラリー
============================================ */
.gallery{
	position: relative;
	width: 100%;
	margin: 0px auto 10vw auto;
	background: url("../images/gallery_bg.jpg") no-repeat center top ;
	background-size: cover;
}
@media only screen and (max-width: 640px) {
	.gallery{
		margin: 0px auto 5vw auto;
	}
}
.gallery .ttl h2{
	color: #ffffff !important;
}
.gallery .ttl p{
    color: rgba(255, 255, 255, 0.2) !important;
	white-space: nowrap;
	font-size: 17vw;
}
@media only screen and (max-width: 640px) {
	.gallery .ttl p{
		font-size: 14vw;
	}
}
.gallery .inner{
	display: block;
	width:100%;
	/*height: 41vw;*/
	max-height: 580px;
	margin: 0px auto 0px auto;
	padding: 100px 0px 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.gallery .inner{
		padding: 7vw 0px 0px 0px;
	}
}
.gallery .inner .area{
	position: relative;
	/*top: 29vw;*/
	width: 100%;
	margin: 80px auto 0px auto;
	padding: 0px 0% 0px 0%;
}
@media only screen and (max-width: 1135px) {
	.gallery .inner .area{
		margin: 5vw auto 0px auto;
	}
}
.gallery .inner .area a{
	display:block;
	width:100%;
	margin:0px 0px 0px 0px;
	padding:0px;
}
.gallery .inner .area a img{
	width: 100%;
	margin: 0px auto 0px auto;
	transition:all .2s ease;
}
.gallery .inner .area a:hover img{
	opacity: .8;
}

/* ==　SWIPER 編集　== */
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    left: 5%!important;
    right: auto;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    right: 5%!important;
    left: auto;
}
.swiper-button-prev, .swiper-button-next {
    color: #ffffff !important;
}

.swiper-button-prev,
.swiper-button-next {
	top: 100% !important;
	background-color: #000000 !important;
    width: 150px !important;
	height: 60px !important;
	box-shadow: 7px 7px 0px 0px rgba(225,225,225,1);
}
.swiper-button-prev:after, .swiper-button-next:after {
    font-size: 33px !important;
    font-weight: bold !important;
}

/* ============================================
	RESULT
============================================ */
.result {
	display: block;
	width: 100%;
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 0px;
}
.result .inner {
	width: 1135px;
	margin: 80px auto 100px auto;
}
@media only screen and (max-width: 1135px) {
	.result .inner {
		width: 95%;
		margin: 5vw auto 25px auto;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner {
		width: 100%;
		margin: 0vw auto 25px auto;
	}
}
.result .inner h3{
	display: block;
	font-size: 60px;
	line-height: 1; 
	margin: 0px auto 0px auto;
	padding: 15px 0px 15px 0px;
	color: #021231;
	background:rgba(255,255,255,0.5);	
	text-align: center;
	font-weight: normal;
}
@media only screen and (max-width: 1135px) {
	.result .inner h3{
		font-size: 5vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner h3{
		font-size: 7vw;
		padding: 10px 0px 10px 0px;
	}
}
.result .inner .rate table{
	width: 100%;
	margin: 0px auto 50px auto;
}
@media only screen and (max-width: 1135px) {
	.result .inner .rate table{
		width: 100%;
		margin: 0px auto 15px auto;
	}
}
.result .inner .rate table tr {
	text-align: center;
	font-size: 22px;
	line-height: 1;
	color: #ffffff;
	font-weight: 500;
}
@media only screen and (max-width: 1135px) {
	.result .inner .rate table tr {
		font-size: 2vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .rate table tr {
		font-size: 3.5vw;
	}
}
.result .inner .rate table tr:nth-child(even) {
	background:rgba(4,28,75,0.5);
}
.result .inner .rate table tr:nth-child(odd) {
	background:rgba(4,28,75,0.6);
}
.result .inner .rate table tr:nth-child(1) {
	background:rgba(4,28,75,1);
	font-size: 20px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .rate table tr:nth-child(1) {
		font-size: 1.8vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .rate table tr:nth-child(1) {
		font-size: 3vw;
	}
}
.result .inner .rate table tr.japan {
	background:rgba(222,0,0,0.6);
}
.result .inner .rate table th, .result .inner .rate table td {
	border: 1px solid #ffffff;
	padding: 30px 0px 30px 0px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .rate table th, .result .inner .rate table td {
		padding: 3% 0% 3% 0%;
	}
}
.result .inner .rate table th {
	width: 8%;
}
.result .inner .rate table th:nth-child(2) {
	width: 30%;
}
.result .inner .rate table th:nth-child(7) {
	width: 14%;
}
.result .inner .detail{
	display: block;
	width: 100%;
	background-color: #132a56;
	border-radius: 10px;
	margin: 0px auto 30px auto;
	color: #ffffff;
	padding: 0px 50px 50px 50px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail{
		padding: 0px 5% 5% 5%;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail{
		width: 95%;
		margin: 0px auto 15px auto;
	}
}
.result .inner .detail:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.result .inner .detail h4{
	font-size: 40px;
	line-height: 1; 
	text-align: center;
	font-weight: 900;
	padding: 50px 0px 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail h4{
		font-size: 3vw;
		padding: 5% 0px 0px 0px;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail h4{
		font-size: 6vw;
	}
}
.result .inner .detail h5{
	font-size: 30px;
	line-height: 3; 
	text-align: center;
	font-weight: 900;
	border-bottom: 1px solid #ffffff;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail h5{
		font-size: 3vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail h5{
		font-size: 5vw;
	}
}

.result .inner .detail .more{
	display: block;
	width: 100%;
	margin: 30px auto 0px auto;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail .more{
		margin: 5% auto 0px auto;
	}
}
.result .inner .detail .more .more_score{
	font-size: 24px;
	line-height: 2; 
	text-align: center;
	font-weight: 900;
	border-top: 1px solid #ffffff;
	padding: 20px 0px 20px 0px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail .more .more_score{
		font-size: 2.2vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .more .more_score{
		font-size: 18px;
		padding: 5% 0px 5% 0px;
	}
}
.result .inner .detail .more .more_result{
	font-size: 40px;
	line-height: 1; 
	text-align: center;
	font-weight: 900;
	border-top: 1px solid #ffffff;
	padding: 20px 0px 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail .more .more_result{
		font-size: 3.5vw;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .more .more_result{
		font-size: 24px;
		padding: 5% 0px 0px 0px;
	}
}
.result .inner .detail table{
	width: 70%;
	margin: 30px auto 0px auto;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail table{
		width: 100%;
		margin: 20px auto 0px auto;
	}
}
.result .inner .detail table tr {
	text-align: center;
	font-size: 20px;
	line-height: 1.8;
	color: #ffffff;
	font-weight: 500;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail table tr {
		font-size: 1.8vw;
	}
}
.result .inner .detail table td:nth-child(even) {
	text-align: left;
	padding: 0px 0px 0px 0px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail table td:nth-child(even) {
		padding: 0px 0px 0px 0px;
	}
}
.result .inner .detail table td:nth-child(odd) {
	text-align: right;
	padding: 0px 0px 0px 0px;
}
.result .inner .detail table td:nth-child(2) {
    padding: 0px 50px 0px 0px;
}
.result .inner .detail .gameinfo{
	margin: 20px auto 20px auto;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail .gameinfo{
		margin: 10px auto 10px auto;
	}
}





.result .inner .detail .gameinfo p {
	text-align: left;
	font-size: 16px;
	line-height: 1;
	color: #ffffff;
	font-weight: 500;
	margin-bottom: 10px;
}
@media only screen and (max-width: 1135px) {
	.result .inner .detail .gameinfo p {
		font-size: 10px;
	}
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .gameinfo p {
		font-size: 3.5vw;
	}
}
.result .inner .detail .gameinfo p span{
	display: inline-block;
	width: 20%;
	text-align: right;
}
.result .inner .detail .gameinfo dl {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.result .inner .detail .gameinfo dt {
	width: 25%;
	margin-bottom: 10px;
	position: relative;
	font-size: 3.5vw;
	line-height: 1;
	color: #ffffff;
	font-weight: 500;
}
.result .inner .detail .gameinfo dt::after {
	content: '：';
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
}
.result .inner .detail .gameinfo dd {
	width: 75%;
	margin-bottom: 10px;
	font-size: 3.5vw;
	line-height: 1;
	color: #ffffff;
	font-weight: 500;
}

.result .inner .detail .gameinfo p.bestscore{
	display: block;
	text-align: right;
}
.result .inner .detail .ballinfo{
	position: relative;
	display: block;
	margin: 30px auto 30px auto;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo{
		margin: 10px auto 0px auto;
	}
}
.result .inner .detail .ballinfo:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.result .inner .detail .ballinfo .txtarea{
	display: block;
	width: 60%;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 3%;
	color: #021231;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .txtarea{
		width: 100%;
	}
}
.result .inner .detail .ballinfo .txtarea p.name{
	font-size: 24px;
	line-height: 1;
	font-weight: 700;
	margin: 0px 0px 15px 0px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .txtarea p.name{
		font-size: 3vw;
		margin: 0px 0px 10px 0px;
	}
}
.result .inner .detail .ballinfo .txtarea p.name span{
	font-size: 30px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail p.name span{
		font-size: 5vw;
	}
}
.result .inner .detail .ballinfo .txtarea p.sub{
	font-size: 20px;
	line-height: 1;
	font-weight: 500;
	margin: 0px 0px 15px 0px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .txtarea p.sub{
		font-size: 3vw;
		margin: 0px 0px 10px 0px;
	}
}
.result .inner .detail .ballinfo .txtarea p.sub span{
	font-size: 28px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detai .ballinfo .txtareal p.sub span{
		font-size: 2vw;
	}
}
.result .inner .detail .ballinfo .txtarea p.sub span:after {
    content: "TM";
	font-size: 10px;
    position: absolute;
}
.result .inner .detail .ballinfo .txtarea p.exp{
	font-size: 14px;
	line-height: 1.8;
	font-weight: 500;
	margin: 0px 0px 0px 0px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .txtarea p.exp{
		font-size: 3.5vw;
	}
}
.result .inner .detail .ballinfo .imgarea{
	position: absolute;
	top: 0;
	right: 0;
    display: block;
	width: 35%;
	padding: 0%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .imgarea{
		position: inherit;
		width: 25%;
		margin: auto
	}
}
.result .inner .detail .ballinfo .imgarea img{
	display: block;
	width: 162px;
	margin: 40px auto 0px auto;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .ballinfo .imgarea img{
		width: 100%;
		margin: 20px auto 10px auto;
	}
}






.result .inner .detail .uniinfo{
	position: relative;
	display: block;
	margin: 30px auto 30px auto;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 3%;	
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .uniinfo{
		margin: 10px auto 10px auto;
	}
}
.result .inner .detail .uniinfo:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.result .inner .detail .uniinfo .txtarea{
	display: block;
	width: 60%;
	padding: 0%;
	float: left;
	display: table;
    height: 290px;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .uniinfo .txtarea{
		width: 100%;
		float: none;
	}
}
.result .inner .detail .uniinfo .txtarea p.exp{
	font-size: 16px;
	line-height: 1.8;
	font-weight: 500;
	margin: 0px;
	color: #021231;
	display: table-cell;
    vertical-align: middle;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .uniinfo .txtarea p.exp{
		font-size: 4vw;
	}
}
.result .inner .detail .uniinfo .imgarea{
    display: block;
	width: 35%;
	padding: 0%;
	float: right;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .uniinfo .imgarea{
		position: inherit;
		width: 30%;
		margin: auto;
		float: none;
	}
}
.result .inner .detail .uniinfo .imgarea img{
	display: block;
	width: 162px;
	margin: 0px auto 0px auto;
}
@media only screen and (max-width: 640px) {
	.result .inner .detail .uniinfo .imgarea img{
		width: 100%;
	}
}

/* ============================================
	BTN
============================================ */
.btnarea {
	display: block;
	width: 100%;
	margin: 0px auto 0px auto;
}
.btnarea .inner {
	width: 1130px;
	margin: auto;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner {
		width: 95%;
	}
}
@media only screen and (max-width: 640px) {
	.btnarea .inner {
		width: 90%;
	}
}
.btnarea .inner:after{
	content: ".";
	display:block;
	visibility:hidden;
	height:0px;
	font-size:0em;
	line-height:0;
	clear:both;
}
.btnarea .inner a{
	display: inline-block;
	width: 550px;
	height: 100px;
	margin: 0% 0px 0px 0%;
	color: #ffffff;
	font-size: 80px;
	line-height: 1.2;
	font-style: oblique;
	text-decoration: none;
	position: relative;
	transition:all .2s ease;
	padding: 0px 70px 0px 90px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a{
		width: 48%;
		height: 8.5vw;
		font-size: 7vw;
		padding: 0px 7% 0px 7%;
	}
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a{
		width: 48%;
		height: 10vw;
		font-size: 10vw;
		line-height: 0.7;
		padding: 0px 5% 0px 5%;
	}
}
.btnarea .inner a:hover{
	color: #dc0821;
}
/*-- PREV --*/
.btnarea .inner a.prev{
	float: left;
	box-shadow: 7px 7px 0px 0px rgba(162,166,176,1);
}
.btnarea .inner a.prev:hover{
	box-shadow: 7px 7px 0px 0px rgba(220,8,33,1);
}
/*-- 1998 --*/
.btnarea .inner a.prev.b1998 {
    background: url("../images/nav_year_1998.png") no-repeat 35% 50% #c6c6c6;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.prev.b1998 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.prev.b1998:hover {
    background: url("../images/nav_year_1998_red.png") no-repeat 35% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.prev.b1998:hover {
	    background-size: 13vw;
	}
}
/*-- 2002 --*/
.btnarea .inner a.prev.b2002 {
    background: url("../images/nav_year_2002.png") no-repeat 35% 50% #c6c6c6;
    background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2002 {
	    background-size: 14vw;
	}
}
.btnarea .inner a.prev.b2002:hover {
    background: url("../images/nav_year_2002_red.png") no-repeat 35% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2002:hover {
	    background-size: 14vw;
	}
}
/*-- 2006 --*/
.btnarea .inner a.prev.b2006 {
    background: url("../images/nav_year_2006.png") no-repeat 35% 50% #c6c6c6;
    background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2006 {
	    background-size: 14vw;
	}
}
.btnarea .inner a.prev.b2006:hover {
    background: url("../images/nav_year_2006_red.png") no-repeat 35% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2006:hover {
	    background-size: 14vw;
	}
}
/*-- 2010 --*/
.btnarea .inner a.prev.b2010 {
    background: url("../images/nav_year_2010.png") no-repeat 35% 50% #c6c6c6;
    background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2010 {
	    background-size: 14vw;
	}
}
.btnarea .inner a.prev.b2010:hover {
    background: url("../images/nav_year_2010_red.png") no-repeat 35% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2010:hover {
	    background-size: 14vw;
	}
}
/*-- 2014 --*/
.btnarea .inner a.prev.b2014 {
    background: url("../images/nav_year_2014.png") no-repeat 35% 50% #c6c6c6;
    background-size: 110px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2014 {
	    background-size: 11vw;
	}
}
.btnarea .inner a.prev.b2014:hover {
    background: url("../images/nav_year_2014_red.png") no-repeat 35% 50% #ffffff;
	background-size: 110px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2014:hover {
	    background-size: 11vw;
	}
}
/*-- 2018 --*/
.btnarea .inner a.prev.b2018 {
    background: url("../images/nav_year_2018.png") no-repeat 35% 50% #c6c6c6;
    background-size: 110px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2018 {
	    background-size: 11vw;
	}
}
.btnarea .inner a.prev.b2018:hover {
    background: url("../images/nav_year_2018_red.png") no-repeat 35% 50% #ffffff;
	background-size: 110px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2018:hover {
	    background-size: 11vw;
	}
}
/*-- 2022 --*/
.btnarea .inner a.prev.b2022 {
    background: url("../images/nav_year_2022.png") no-repeat 35% 50% #c6c6c6;
    background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2022 {
	    background-size: 14vw;
	}
}
.btnarea .inner a.prev.b2022:hover {
    background: url("../images/nav_year_2022_red.png") no-repeat 35% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev.b2022:hover {
	    background-size: 14vw;
	}
}

/*-- NEXT --*/
.btnarea .inner a.next{
	float: right;
	box-shadow: 7px 7px 0px 0px rgba(4,28,75,1);
}
.btnarea .inner a.next:hover{
	box-shadow: 7px 7px 0px 0px rgba(220,8,33,1);
}
/*-- 2002 --*/
.btnarea .inner a.next.b2002 {
    background: url(../images/nav_year_2002.png) no-repeat 65% 50% #dc0821;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2002 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.next.b2002:hover {
    background: url("../images/nav_year_2002_red.png") no-repeat 65% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2002:hover {
	    background-size: 13vw;
	}
}
/*-- 2006 --*/
.btnarea .inner a.next.b2006 {
    background: url(../images/nav_year_2006.png) no-repeat 65% 50% #dc0821;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2006 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.next.b2006:hover {
    background: url("../images/nav_year_2006_red.png") no-repeat 65% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2006:hover {
	    background-size: 13vw;
	}
}
/*-- 2010 --*/
.btnarea .inner a.next.b2010 {
    background: url(../images/nav_year_2010.png) no-repeat 65% 50% #dc0821;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2010 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.next.b2010:hover {
    background: url("../images/nav_year_2010_red.png") no-repeat 65% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2010:hover {
	    background-size: 13vw;
	}
}
/*-- 2014 --*/
.btnarea .inner a.next.b2014 {
    background: url(../images/nav_year_2014.png) no-repeat 65% 50% #dc0821;
    background-size: 110px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2014 {
	    background-size: 11vw;
	}
}
.btnarea .inner a.next.b2014:hover {
    background: url("../images/nav_year_2014_red.png") no-repeat 65% 50% #ffffff;
	background-size: 110px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2014:hover {
	    background-size: 11vw;
	}
}
/*-- 2018 --*/
.btnarea .inner a.next.b2018 {
    background: url(../images/nav_year_2018.png) no-repeat 65% 50% #dc0821;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2018 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.next.b2018:hover {
    background: url("../images/nav_year_2018_red.png") no-repeat 65% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2018:hover {
	    background-size: 13vw;
	}
}
/*-- 2022 --*/
.btnarea .inner a.next.b2022 {
    background: url(../images/nav_year_2022.png) no-repeat 65% 50% #dc0821;
    background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2022 {
	    background-size: 13vw;
	}
}
.btnarea .inner a.next.b2022:hover {
    background: url("../images/nav_year_2022_red.png") no-repeat 65% 50% #ffffff;
	background-size: 140px;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.next.b2022:hover {
	    background-size: 13vw;
	}
}

.btnarea .inner a span{
	width: 100%;
	font-size: 48px;
	display: inline;
	vertical-align: middle;
	margin: 10px 0% 0px 0%;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a span{
		font-size: 4vw;
		margin: 2vw 0% 0px 0%;
		display: block;
	}
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a span{
		margin: 4vw 0% 0px 0%;
	}
}
.btnarea .inner a.prev span{
	margin: 6vw 0% 0px 70%;
}
@media only screen and (max-width: 1135px) {
	.btnarea .inner a.prev span{
		margin: 2.5vw 0% 0px 70%;
	}
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev span{
		margin: 4vw 0% 0px 70%;
	}
}
.btnarea .inner a.prev span::before,
.btnarea .inner a.prev span::after {
	content: "";
	width: 24px;
	height: 5px;
	display: inline-block;
	border-radius: 10px;
	background: #ffffff;
	position: absolute;
	left: 5%;
	transition: all .2s ease;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev span::before,
	.btnarea .inner a.prev span::after {
		width: 7px;
		height: 2px;
	}
}
.btnarea .inner a.prev span::before {
	top: calc(50% - 10px);
	transform: rotate(-45deg);
}
.btnarea .inner a.prev span::after {
	bottom: calc(50% - 10px);
	transform: rotate(45deg);
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.prev span::before {
		top: calc(50% - 3px);
	}
	.btnarea .inner a.prev span::after {
		bottom: calc(50% - 3px);
	}
}
.btnarea .inner a.prev:hover span::before,
.btnarea .inner a.prev:hover span::after {
	background: #dc0821;
	left: 4%;
}
.btnarea .inner a.next span::before,
.btnarea .inner a.next span::after {
	content: "";
	width: 24px;
	height: 5px;
	display: inline-block;
	border-radius: 10px;
	background: #ffffff;
	position: absolute;
	right: 5%;
	transition: all .2s ease;
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.next span::before,
	.btnarea .inner a.next span::after {
		width: 7px;
		height: 2px;
	}
}
.btnarea .inner a.next span::before {
	top: calc(50% - 10px);
	transform: rotate(45deg);
}

.btnarea .inner a.next span::after {
	bottom: calc(50% - 10px);
	transform: rotate(-45deg);
}
@media only screen and (max-width: 640px) {
	.btnarea .inner a.next span::before {
		top: calc(50% - 3px);
	}
	.btnarea .inner a.next span::after {
	bottom: calc(50% - 3px);
	}
}
.btnarea .inner a.next:hover span::before,
.btnarea .inner a.next:hover span::after {
	background: #dc0821;
	right: 4%;
}


@media only screen and (max-width: 988px) {

}