@charset "UTF-8";

#wrapper {
	width: auto;
	padding-bottom: 0;
	background: #000;
}
#content {
	padding-top: 0;
}
#footer {
	margin-top: 0;
}

#breadcrumbs {
	display: none;
}

div.page-world-area {
	position: relative;
	border-style: solid;
	border-width: 1px 0;
	border-color: #ccc;
}
div.page-world-area div.explain-area {
	position: relative;
}
div.page-world-area div.explain-area div.explain-inner {
	position: absolute;
	right: 10px;
	width: 200px;
	color: #ccc;
}
div.page-world-area div.country-area {
	display: none;
	margin: 20px 0;
	text-align: center;

	pointer-events: none;
}
div.page-world-area.country-selected div.country-area {
	display: block;
}
div.page-world-area div.country-area div.image {
	border: solid 1px #ccc;
	opacity: 0.7;
}
div.page-world-area div.country-area div.image img {
	width: 100%;
}
div.page-world-area div.country-area div.name {
	margin: 5px 0;
	font-size: 110%;
}
div.page-world-area div.tooltip {
	position: absolute;
	width: 150px;
	height: 60px;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 3px;
	opacity: 1;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);

	transition: opacity 0.2s;
}
div.page-world-area div.tooltip div.inner {
	display: table;
	width: 100%;
	height: 100%;
	padding: 5px;
	box-sizing: border-box;
}
div.page-world-area div.tooltip div.inner div.inner-inner {
	display: table-cell;
	vertical-align: middle;
}
div.page-world-area div.tooltip.close {
	opacity: 0;
}
div.page-world-area div.tooltip div.name {
	color: #fff;
	text-align: center;
}
div.page-world-area div.tooltip div.count {
	color: #fff;
	text-align: center;
}
svg {
	width: 100%;
	height: 900px;
}
.su {
	stroke: #aaa;
	stroke-width: 1px;
	fill: #fff;
	cursor: pointer;
}
.su.c1 {
	fill: rgba(10, 100, 250, 0.8);
	stroke: rgba(0, 100, 255, 1.0);
}
.su.c2 {
	fill: rgba(10, 100, 250, 0.9);
	stroke: rgba(0, 100, 255, 1.0);
}
.su.c3 {
	fill: rgba(10, 100, 250, 1.0);
	stroke: rgba(0, 100, 255, 1.0);
}
.su.active,
.su:hover {
	fill: rgba(252, 18, 244, 0.3);
}
.su.selected {
	fill: rgba(252, 18, 244, 1.0);
	stroke: rgba(252, 0, 0, 1.0);
}
.su.selected.loaded {
	fill: none;
	stroke: none;
}



.bg {
	fill: white;
	fill-opacity: 0;
}

.ocean { fill: url(#ocean); }
.highlight { fill: url(#highlight); }
.shading { fill: url(#shading); }

.land {
	fill: rgb(0,0,0);
	stroke-opacity: 1;
	opacity: .1;
}

path.su {
	stroke: rgb(80, 64, 39);
	stroke-linejoin: round;
	stroke-width: 1;
	fill: #575757;
	fill-opacity: .2;
	stroke-opacity: .1;
}



.arcs {
	opacity:.1;
	stroke: gray;
	stroke-width: 3;
}
.flyers {
	stroke-width:1;
	opacity: .6;
	stroke: darkred;
}
.arc, .flyer {
	stroke-linejoin: round;
	fill:none;
}
.point {
	opacity:.6;
}



div.menu-area {
	text-align: center;
	background: #000;
}
div.menu-area a {
	display: inline-block;
	color: #ccc;
	padding: 3px 5px;
	text-decoration: none;
}
div.page-world-area[data-type="house"] div.menu-area a.house,
div.page-world-area[data-type="school"] div.menu-area a.school,
div.page-world-area[data-type="shareticket"] div.menu-area a.shareticket,
div.page-world-area[data-type="sharelog"] div.menu-area a.sharelog,
div.page-world-area[data-type="recommend_area"] div.menu-area a.recommend-area,
div.menu-area a:hover {
	color: #97e1ea;
}
div.menu-area div.menu-sub-area {
	display: none;
	border-top: solid 1px #eee;
}
div.page-world-area[data-type="recommend_area"] div.menu-area div.menu-sub-area {
	display: block;
}

g.item path,
g.item circle {
	fill: rgba(255, 0, 0, 1.0);
	opacity: 0.8;
	mix-blend-mode: screen;
}
div.page-world-area[data-type="house"] g.item path,
div.page-world-area[data-type="house"] g.item circle {
	fill: rgba(24, 120, 203, 1.0);
}
div.page-world-area[data-type="school"] g.item path,
div.page-world-area[data-type="school"] g.item circle {
	fill: rgba(160, 109, 255, 1.0);
}
div.page-world-area[data-type="sharelog"] g.item path,
div.page-world-area[data-type="sharelog"] g.item circle {
	fill: rgba(255, 145, 26, 1.0);
}
div.page-world-area[data-type="shareticket"] g.item path,
div.page-world-area[data-type="shareticket"] g.item circle {
	fill: rgba(252, 83, 143, 1.0);
}

.graticule {
	fill: none;
	stroke: #777;
}

g.area circle.outer {
	fill: rgba(0, 150, 255, 1.0);
/*
	stroke: rgba(0, 124, 255, 0.9);
	stroke-width: 10px;
*/
	stroke: rgba(255, 255, 255, 0.0);
	stroke-width: 20px;
	mix-blend-mode: screen;
}
g.area circle.inner {
	fill: rgba(255, 255, 255, 0.7);
/*
	stroke: rgba(0, 124, 255, 0.9);
	stroke-width: 10px;
*/
	mix-blend-mode: screen;
}

#header {
	display: none;
}


div.globe-type-area {
}
div.globe-type-area a {
	display: block;
	float: left;
	color: #ccc;
	width: 50%;
	padding: 5px;
	box-sizing: border-box;
	border: solid 1px #ccc;
	text-align: center;
	text-decoration: none;

	transition: color 0.2s, background 0.2s;
}
div.globe-type-area a:nth-child(2) {
	border-left: 0;
}
div.globe-type-area a:hover {
	color: #000;
	background: #ccc;
}
div.explain-area div.display-option-area {
	padding: 10px;
}

div.page-title {
	color: #ccc;
	font-weight: bold;
	font-size: 200%;
	padding: 5px;
}