@charset "UTF-8";
/*---------------------------------
	layout
---------------------------------*/
#wrapper::before {
	content:"";
	display:block;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;	background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVQIW2NkYGDYzMDAcIYBChgZGBjqYRwQjSxgAlKJoQIAnPQEARvsWbgAAAAASUVORK5CYII=) repeat,url(../../pc/img/top/bg_top_ge.jpg) center/cover no-repeat;
	background-size:auto,auto 100%;
	z-index:-1;
}
#contents {
	position:relative;
	margin:0 auto;
	padding:0;
	color:#bdb6af;
}
#contents > .btn {
	position:absolute;
	top:6px;
	right:10px;
	min-width:220px;
	margin:0;
}
#contents h1 {
	position:absolute;
	top:60px;
	width:100%;
	color:#fff;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	letter-spacing:0.1em;
}
#contents h1:after {
	content:'';
	display:block;
	width:3.1em;
	height:1px;
	margin:0 auto;
	background:#fff;
}
/*---------------------------------
	main
---------------------------------*/
#main {
	position:relative;
	min-height:193px;
	/*padding:0 0 20px 0;*/
}
#main .titleArea {
	padding:64px 0 45px 0;
	text-align:center;
}
#main .titleArea .title {
	margin:0 0 15px 0;
	color:#fff5eb;
	font-size:12px;
	text-align:center;
}
#main .titleArea .title span {
	display:block;
	font-size:26px;
}
#main .titleArea .about {
	display:inline-block;
	padding:0 0 0 20px;
	background:url(../../pc/img/common/icon_about.png) no-repeat left center;
	background-size:15px;
}
#main .titleArea .about a {
	color:#fff5eb;
	font-size:14px;
	text-decoration:underline;
}
#main .titleArea .about:hover a {
	text-decoration:none;
}
/*login*/
#login {
	padding:10px 0 15px 0;
	text-align:center;
}
#login .btn_cross {
	display:inline-block;
}
#login .btn_cross a {
	position:relative;
	display:block;
	width:245px;
	height:44px;
	margin:0 auto;
	border:1px solid #fff5eb;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	line-height:44px;
	transition:0.25s ease all;
}
#login .btn_cross span {
	display:none;
}
/*account*/
#account {
	padding:20px 0 0 0;
}
#dataStatus {
	margin:0 auto;
}
/*btnArea*/
#main .bnrArea li a {
	display:block;
	text-align:center;
}
#main .bnrArea li img {
	width: 100%;
	height: auto;
}
/*
#main .bnrArea li:first-child {
	padding:0 2%;
}
#main .bnrArea li:first-child img {
	width:288px;
	margin:10px auto 20px auto;
	background:rgba(0,0,0,0.5);
}
#main .bnrArea li.dlc div {
	position:relative;
	width:100%;
	background:rgba(0,0,0,0.5);
	text-align:center;
}
#main .bnrArea li.dlc img {
	width:288px;
	height:auto;
	margin:-15px auto 0 auto;
}
#main .bnrArea li.dlc span {
	display:block;
	padding:8px 0;
	color:#ac2929;
	font-size:12px;
}
*/
/*---------------------------------
	important
---------------------------------*/
#important {
	background:rgba(60,55,50,0.4);
}
#important .inner {
	width:92%;
	padding:0 4%;
}
#important dt {
	width:100%;
	margin:0 0 10px 0;
	padding:5px 0 0 0;
	border-bottom:1px solid #9d968c;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	line-height:30px;
}
#important dt span.tit {
	display:block;
	float:left;
	margin:0 0 0 5px;
	padding:2px 0 2px 25px;
	background:url(../img/common/icon_important.png) no-repeat left center;
	background-size:20px;
}
#important dt a {
	float:right;
	padding:0 15px 0 0;
	background:url(../../pc/img/common/arrow_btn_min.png) no-repeat right center;
	color:#bbb6af;
	font-size:12px;
	font-weight:bold;
}
#important dd ul {
	padding:0 10px 10px 10px;
}
#important dd li,
#important dd li a {
	color:#aaa198;
	font-size:12px;
}
#important dd li span {
	display:block;
	color:#bdb6af;
}
/*---------------------------------
	dataArea
---------------------------------*/
#dataArea {
	padding:28px 0;
	background:rgba(0,0,0,0.6);
	overflow:hidden;
}
#dataArea > .world {
	width:92%;
	margin:0 auto;
	border:1px solid #3c3732;
}
#dataArea .world > dt {
	position:relative;
	height:53px;
	padding:20px 0;
	border-bottom:1px solid #3b3732;
	background:url(../../pc/img/top/bg_world.png) no-repeat center center;
	color:#bbb6af;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
#dataArea .world > dt span {
	display:block;
	color:#9d968c;
	font-size:11px;
	font-weight:normal;
}
#dataArea .world dd {
	text-align: center;
}
#dataArea h2 {
	width: 100%;
}
#dataArea h2 span {
	display: inline-block;
	margin: 20px 0 40px 0;
	color: #fcf5eb;
	font-size: 20px;
	font-weight: normal;
}
#dataArea h2 span:after {
	display:block;
	content:'';
	width:100%;
	height:1px;
	margin:5px auto 0 auto;
	background:#fff5eb;
}
#dataArea .world dd dl {
	width:50%;
}
#dataArea .world dd > dl dt {
	display: inline-block;
	margin:0 auto;
	border:1px solid #3c3732;
	color:#fff5eb;
	font-size:14px;
	text-align:center;
	line-height:32px;
}
#dataArea .world dd dl dd.status {
	padding:110px 0 0 0;
}
#dataArea .world dd > dl dd p {
	display:table;
	position:relative;
	width: auto;
	box-sizing: border-box;
	margin:0 auto 30px auto;
	padding:0 0 0 40px;
	color:#a0968c;
	font-size:16px;
	font-weight:bold;
	line-height:40px;
}
#dataArea .world dd dl dd .txt {
	display:inline-block;
	position:absolute;
	top:5px;
	left:0;
	width:36px;
	padding:30px 0 0 0;
	font-size:10px;
	font-weight:normal;
	text-align:center;
	line-height:1;
}
#dataArea .world dd dl dd .txt {
	background:url(../../pc/img/world/icon_world.png) no-repeat center top;
	background-size:25px;
}
#dataArea .world dd dl.insect {
	float:left;
	text-align:center;
}
#dataArea .world dd dl.punch {
	float:right;
	text-align:center;
}
#dataArea .world dd > dl dt {
	padding:7px 10px;
	line-height:1.2!important;
}
#dataArea .world dd dl dd.status {
	padding: calc(100vw * 0.37) 0 0 0;
}
#dataArea .world dd dl.insect dd {
	background: url(../../pc/img/world/eoz_insect.png) no-repeat center 20px;
	background-size: calc(100vw * 0.4)
}
#dataArea .world dd dl.punch dd {
	background: url(../../pc/img/world/eoz_punch.png) no-repeat center 20px;
	background-size: calc(100vw * 0.4)
}
#dataArea .world dd .resultNum {
	clear: both;
	display: flex;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
/*
	padding: 0 0 calc(46vw * 0.715) 0;
	background: url(../../pc/img/world/line_arrow.png) no-repeat center bottom;
	background-size: 50%;
*/
}
#dataArea .world dd .resultNum:after {
	display: block;
	content: '';
	width: 50vw;
	height: calc(50vw *0.74);
	margin: -0.7vw auto 0 auto;
	background: url(../../pc/img/world/line_arrow.png) no-repeat;
	background-size: 100%;
}
#dataArea .world dd .resultNum dl:nth-of-type(1) {
	width: 50%;
}
#dataArea .world dd .resultNum dl:nth-of-type(2) {
	width: 50%;
}
#dataArea .world dd .resultNum dt {
	width: 100%;
	height: 32px;
	margin: 0 0 10px 0;
	padding: 0;
	border: none;
	color: #fff5eb;
	font-size: 14px;
	line-height: 1;
}
#dataArea .world dd .resultNum dd {
	color: #a0968c;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
#dataArea .world dd .resultNum dd span {
	margin: 0 5px 0 0;
	color: #fff5eb;
	font-size: 16px;
}
#dataArea .world dd .resultNum dd p {
	display: inline-block;
}
#dataArea .world dd .resultNum dd p:after {
	display:block;
	content:'';
	width:100%;
	height:1px;
	margin:5px auto 0 auto;
	background:#fff5eb;
}
#dataArea .world dd .resultCol {
	padding: 20px 2% 0 2%;
}
#dataArea .world dd .resultCol:after {
	display: block;
	content: '';
	clear: both;
}
#dataArea .world dd .resultCol .result {
	position: relative;
	width: 100%;
}
#dataArea .world dd .resultCol .result dt {
	position: absolute;
	top:0;
	left: 50%;
	width: 17em;
	padding: 0;
	border: none;
	color: #a0968c;
	font-size: 14px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
#dataArea .world dd .resultCol .result dt span {
	margin: 0 0 0 10px;
	color: #fff5eb;
	font-size: 24px;
	font-weight: bold;
}
#dataArea .world dd .resultCol .result dt:after {
	display:block;
	content:'';
	width:100%;
	height:1px;
	margin:5px auto 0 auto;
	background:#fff5eb;
}
#dataArea .world dd .resultCol .result dd.img {
	max-width: 400px;
	margin: 0 auto;
	padding: 90px 0 20px 0;
	color: #fff5eb;
	font-size: 14px;
	text-align: center;
}
#dataArea .world dd .resultCol .result dd.img img {
	width: 96%;
	height: auto;
	margin: 0 2% 10px 2%;
}
#dataArea .world dd .resultCol .result dd.share {
	width: 85%;
	margin: 0 auto 30px auto;
	padding: 15px;
	border-radius: 4px;
	border: 1px solid #3c3732;
	background: rgba(255,245,235,0.1);
}
#dataArea .world dd .resultCol .result dd.share p {
	margin: 0 0 10px 0;
	color: #fff5eb;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
#dataArea .world dd .resultCol .result dd.share {
	text-align: center;
}
#dataArea .world dd .resultCol .result dd.share li {
	display: inline-block;
	width: 40%;
	max-width: 170px;
	margin: 0 2px;
	border-radius: 4px;
	background: #fff5eb;
	line-height: 65px; 
}
#dataArea .world dd .resultCol .result dd.share li a {
	display: block;
}
#dataArea .world dd .resultCol .result dd.share li img {
	vertical-align: middle;
}
/*
#dataArea .family {
	width:92%;
	margin:0 auto 8px auto;
	border:1px solid #3c3732;
}
#dataArea .family dt {
	position:relative;
	height:60px;
	padding:20px 40% 0 0;
	border-bottom:1px solid #3b3732;
	color:#bbb6af;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}
#dataArea .family dt img {
	position:absolute;
	bottom:0;
	right:-50px;
	width:180px;
	height:auto;
}
#dataArea .family dd {
	padding:10px 2%;
}
#dataArea .family dd li {
	padding:4px 0;
	border-bottom:1px solid #3b3732;
}
#dataArea .family dd li a {
	display:block;
	color:#777370;
	font-size:12px;
}
#dataArea .family dd li .img {
	display:table-cell;
	border:1px solid #777370;
}
#dataArea .family dd li .name {
	display:table-cell;
	padding:0 7px;
}
#dataArea .world {
	width:92%;
	margin:0 auto;
	border:1px solid #3c3732;
}
#dataArea .world > dt {
	position:relative;
	height:53px;
	padding:20px 0;
	border-bottom:1px solid #3b3732;
	background:url(../../pc/img/top/bg_world.png) no-repeat center center;
	color:#bbb6af;
	font-size:24px;
	font-weight:bold;
	text-align:center;
}
#dataArea .world > dt span {
	display:block;
	color:#9d968c;
	font-size:11px;
	font-weight:normal;
}

#dataArea .world div {
	position:relative;
	width:92%;
	margin:55px auto 0 auto;
	padding:35px 10px 0 10px;
	border:1px solid #3c3732;
	background:#000;
	text-align:center;
	box-sizing:border-box;
}
#dataArea .world div .btmBar {
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	height:5px;
	background:#ffa019;
	transition:all 0.5s;
}
#dataArea .world div.time:after {
	display:block;
	position:absolute;
	top:-30px;
	left:50%;
	content:'';
	width:60px;
	height:60px;
	margin:0 0 0 -30px;
	background:url(../img/top/icon_time.png) no-repeat center top;
	background-size:60px;
}
#dataArea .world div.distance:after {
	display:block;
	position:absolute;
	top:-30px;
	left:50%;
	content:'';
	width:60px;
	height:60px;
	margin:0 0 0 -30px;
	background:url(../img/top/icon_distance.png) no-repeat center top;
	background-size:60px;
}
#dataArea .world div.kills:after {
	display:block;
	position:absolute;
	top:-30px;
	left:50%;
	content:'';
	width:60px;
	height:60px;
	margin:0 0 0 -30px;
	background:url(../img/top/icon_kills.png) no-repeat center top;
	background-size:60px;
}
#dataArea .world div dt {
	margin:0 0 25px 0;
	color:#a0968c;
	font-size:18px;
}
#dataArea .world div dd.data {
	padding:0 0 25px 0;
	font-size:18px;
	font-weight:bold;
	line-height:1.2;
}
#dataArea .world div dd.data .year {
	font-size:30px;
}
#dataArea .world div dd.data .year span {
	margin:0 0 0 5px;
	font-size:18px;
	font-weight:normal;
}
#dataArea .world div dd.data .days {
	font-size:14px;
}
#dataArea .world div dd.data .km,
#dataArea .world div dd.data .kill {
	font-size:24px;
}
#dataArea .world div dd.data .days span,
#dataArea .world div dd.data .km span,
#dataArea .world div dd.data .kill span {
	margin:0 0 0 5px;
	color:#9d968c;
	font-weight:normal;
}
#dataArea .world div dd.data .km span,
#dataArea .world div dd.data .kill span {
	font-size:18px;
}
#dataArea .world div dd.next {
	margin:0 0 15px 0;
	color:#9d968c;
	font-size:12px;
	line-height:1.2;
}
#dataArea .world div dd.next span {
	display:inline-block;
	margin:5px 5px 0 0;
	color:#ffa019;
	font-size:30px;
	font-weight:bold;
}
#dataArea .world div dd.comp {
	margin:0 0 15px 0;
	color:#ffa019;
	font-size:18px;
}
*/
#dataArea .world .view {
	width:245px;
	margin:40px auto 30px auto;
	border:1px solid #a0968c;
	font-size:16px;
	font-weight:bold;
	text-align:center;
}
#dataArea .world .view a {
	display:block;
	width:auto;
	background:url(../../pc/img/common/arrow_btn_min.png) no-repeat 94% center;
	color:#bbb6af;
	font-size:14px;
	line-height:44px;
}
/*---------------------------------
	news
---------------------------------*/
#news {
	background:rgba(21, 19, 15, 0.8);
}
/*latest*/
#news .latest {
	padding:40px 0 30px 0;
}
#news .latest h2 {
	position:relative;
	margin:0 0 30px 0;
	color:#fff5eb;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	letter-spacing:0.1em;
}
#news .latest h2:after {
	content:'';
	display:block;
	width:7.3em;
	height:1px;
	margin:0 auto;
	background:#ffa019;
}
#news .latest .list {
	position:relative;
	width:100%;
}
#news .latest .slideArea {
	width:100%;
	margin:0 0 24px 0;
	overflow:hidden;
}
#news .latest .slideArea.left {
}
#news .latest .slideArea.right {
}
#news .latest .slideArea .slide {
	width:1460px;
}
#news .latest .slideArea .slide li {
	float:left;
	width:261px;
	padding:0 15px;
}
#news .latest .slideArea .slide li:first-child {}
#news .latest .slideArea .slide li img {
	width:100%;
	height:auto;
	margin:0 0 12px 0;
	border:1px solid #3c3732;
}
#news .latest .slideArea .slide li p {
	color:#9d968c;
	font-size:14px;
}
#news .latest .slideArea .slide li p span {
	display:block;
	color:#767370;
	font-size:11px;
}
#news .latest .ui {
	text-align:center;
}
#news .latest .ui li {
	display:inline-block;
	width:10px;
	height:10px;
	margin:0 7px;
	border-radius:50px;
	background:#a0968c;
}
#news .latest .ui li.current {
	background:#fff5eb;
}
/*---------------------------------
	other
---------------------------------*/
#other {
	padding:40px 0 30px 0;
	/*background:rgba(0,0,0,0.6);*/
	background:rgba(21, 19, 15, 0.8);
}
#other h2 {
	osition:relative;
	margin:0 0 15px 0;
	color:#fff5eb;
	font-size:24px;
	font-weight:normal;
	text-align:center;
	letter-spacing:0.1em;
}
#other h2:after {
	content:'';
	display:block;
	width:9.8em;
	height:1px;
	margin:0 auto;
	background:#ffa019;
}
#other .leadTxt {
	margin:0 0 30px 0;
	background:url(../img/top/bg_leadtxt.png) no-repeat center top;
	background-size:auto 34px;
	color:#fff5eb;
	font-size:12px;
	text-align:center;
	line-height:34px;
}
#other ul {
	margin:0 0 25px 0;
}
#other li {
	width:92%;
	max-width:320px;
	margin:0 auto 18px auto;
	padding:17px 40px;
	border:1px solid #3c3732;
	background:rgba(0,0,0,0.1);
	vertical-align:top;
	box-sizing:border-box;
}
#other li:last-child {
	margin:0 auto;
}
#other li dt {
	margin:0 0 13px 0;
	color:#bdb6af;
	font-size:18px;
	text-align:center;
}
#other li dt span {
	display:block;
	color:#777370;
	font-size:14px;
}
#other li dd .img {
	height:173px;
	margin:0 auto 5px auto;
	border:1px solid #3c3732;
	background:rgba(0,0,0,0.5);
	overflow:hidden;
}
#other li dd .img span {
	display:table-cell;
	height:173px;
	text-align:center;
	vertical-align:middle;
}
#other li dd .img img {
	width:100%;
	height:auto;
}
#other li dd .date {
	color:#777370;
	font-size:12px;
	text-align:left;
}
#other li dd .txt {
	height:46px;
	color:#a0968c;
	font-size:14px;
	text-align:left;
	overflow:hidden;
}
.btn_window a {
	display:block;
	width:220px;
	margin:0 auto;
	border:1px solid #a0968c;
	background:url(../../pc/img/common/icon_window.png) no-repeat 95% center;
	color:#bdb6af;
	font-size:14px;
	text-align:center;
	line-height:44px;
}
/*---------------------------------
	guide
---------------------------------*/
#guide {
	position:absolute;
	top:0;
	width:100%;
	padding:0 5%;
	background:url(../../pc/img/top/bg_guide.jpg) no-repeat center top;
	background-size:100%;
	z-index:10000;
	box-sizing:border-box;
}
#guide .closeGuide {
	float:right;
	width:30px;
	margin:10px;
}
#guide .closeGuide img {
	width:100%;
	height:auto;
}
#guide h2 {
	clear:both;
	max-width:320px;
	margin:0 auto;
	padding:9vw 0 10vw 0;
	color:#bdb6af;
	font-size:16px;
	text-align:center;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
#guide h2 span {
	display:block;
	font-size:12px;
}
#guide .contentsCol {
	margin:0 0 50px 0;
}
#guide .contentsCol .img {
	margin:0 0 20px 0;
}
#guide .contentsCol .img img {
	width:100%;
	height:auto;
}
#guide .contentsCol dt {
	display:table;
	margin:0 0 25px 0;
	color:#bdb6af;
	font-size:15px;
	line-height:1.2;
	letter-spacing:2px;
}
#guide .contentsCol dt span {
	display:none;
	font-size:8px;
}
.ja #guide .contentsCol dt span {
	display:block;
}
#guide .contentsCol dt:after {
	display:block;
	content:'';
	height:1px;
	margin:10px 0 0 0;
	background:#504b47;
}
#guide .contentsCol dd {
	color:#bdb6af;
	font-size:10px;
	line-height:20px;
}
#guide .contentsCol .lightBtn {
	clear:both;
	width:240px;
	margin:25px auto 0 auto;
}
#guide .contentsCol .lightBtn a {
	background:url(../img/common/arrow_lightbtn.png) no-repeat 96% center #fff5eb;
	background-size:14px;
}
#guide .chktxt {
	margin:0 0 20px 0;
	color:#bdb6af;
	font-size:10px;
	text-align:center;
}
#guide .chktxt span {
	color:#ffa019;
}
#guide .chkbtn {
	width:80%;
	margin:0 auto 20px auto;
	border:1px solid #fff5eb;
}
#guide .chkbtn a {
	display:block;
	color:#bdb6af;
	font-size:14px;
	text-align:center;
	line-height:45px;
	transition:all 0.5s;
}
#guide .chkbtn a:hover {
	background:rgba(160,150,140,0.2);
	transition:all 0.5s;
}
#guide .closetxt {
	text-align:center;
}
#guide .closetxt a {
	padding:2px 0 2px 20px;
	background:url(../../pc/img/top/txt_close.png) no-repeat left center;
	background-size:15px;
	color:#bdb6af;
	font-size:14px;
	line-height:30px;
}
#guide .closetxt a span {
	text-decoration:underline;
}

/*---------------------------------
	layout -minSize-
---------------------------------*/
@media screen  and (min-width:640px){
	#globalHeader .inner,
	#header .inner,
	#important .inner,
	#guide,
	#dataArea .family,
	#dataArea .world,
	#news .latest .list {
		width:640px;
		margin-right:auto;
		margin-left:auto;
		box-sizing:border-box;
	}
	#dataArea .world dd .resultNum:after {
		width: 325px;
		height: 240px;
		margin: -4px auto 0 auto;
	}
	#dataArea .world dd dl dd.status {
		padding: 272px 0 0 0;
	}
	#dataArea .world dd dl.insect dd,
	#dataArea .world dd dl.punch dd {
		background-size: 80%;
	}
	#guide {
		left:50%;
		margin:0 0 0 -320px;
	}
	#important .inner {
		padding:0;
	}
	#other ul {
		text-align:center;
	}
	#other li {
		display:inline-block;
		width:210px;
		margin:0 5px;
		padding:0 20px;
	}
	#other li dt span {
		font-size:10px;
	}
}