@charset "UTF-8";
/* CSS Document */

#col_projectstop {
	margin: 0 auto;
	padding: 100px 10px 20px 10px;
	margin-top:-100px;
	width: 1000px;
	overflow: auto;
	position: relative;
}

/* ==|== 左年次の一覧 ================== */
#col_annual {
	padding-right: 5px;
	display: table-cell;
	width: 140px;
	vertical-align: top;
}

.annual_year{
	height: 530px;
	overflow-y: scroll;
}

.annual {
	font-size:30px;
	font-family:'DIN Next W01';
	font-style: normal;
	vertical-align: bottom;
	line-height: 1.2 !important;
	color: #fff!important;
}


.annual_year p:hover{
	cursor: pointer;
	color: #FFCC00!important;
}

.annual_on {
	color: #FFCC00;
}

.annual span {
	display: inline-block;
	width: 40px;
	font-size:50%;
}

.annual_year{
	overflow-y: hidden;
}

/* ==|== 受賞者一覧 ================== */
.notelist {
	padding: 10px 0;
	font-size: 14px;
	color: #0060af;
	font-weight: 500;
}
#col_winner {
	margin-right: 5px;
	display: table-cell;
	width: 290px;
	vertical-align: top;
}
.scroll_winner{
	background-color: #fff;
	width: 274px;
	height: 530px;
	overflow-y: hidden;
	padding: 0 0 0 8px;
	margin: 0 auto;
	position: relative;
}
hr.hr_year {
	margin: 0;
	padding:0;
	border: 0;
	border-top: solid #51b9f0 5px;
}
hr.hr_project {
	margin: 0 0 10px 0;
	padding:0;
	border: 0;
	border-top: solid #99dcff 3px;
}
.year {
	font-size:30px;
	font-family:'DIN Next W01';
	font-style: normal;
	vertical-align: bottom;
	text-align: center;
	color: #3895d2;
}
.year span {
	padding-right: 5px;
	display: inline-block;
	font-size:50%;
}
.col_project {
	padding: 5px 0 5px 0;
}
.ph_flag {
	display: table-cell;
	vertical-align: top;
}
.ph_flag img {
	padding: 0 5px 5px 0;
}
.btn_readstory1 a {
	display: block;
	background:url(../icons/btn_projectstop.png) 0 0 no-repeat;
	width:90px;
	height:45px;
	float: left;
}
.btn_readstory1 a:hover {
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}
.btn_reason {
	margin: 0 auto;
	display: block;
	background:url(../icons/btn_projectstop.png) 0 -100px no-repeat;
	width:230px;
	height:30px;
}
.btn_reason:hover, .btn_readstory2:hover{
	cursor: pointer;
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}
.btn_readstory1 span, .btn_reason span {
	display: none;
}
.winner_position {
	font-size: 13px;
	font-weight: 400;
	clear: both;
}
.winner_name {
	font-size: 18px;
	font-weight: 600;
	clear: both;
	text-align: center;
}
.winner_reason {
	font-size: 14px;
	font-weight: 400;
}


/* ==|== スクロールバー ================== */

.acdn-target{
	display: none;
}


/* ==|== 地球儀================== */
#col_earth {
	display: table-cell;
	vertical-align: top;
	width: 580px;
	position: relative;
	overflow: hidden;
}

.earth_area {
	text-align: center;
	position: absolute;
	width: 340px;
	height: 492px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 7% auto;
}

@media all and (-ms-high-contrast:none){
	.earth_area {
		padding-top: 43.5% !important;
	}
  *::-ms-backdrop, .earth_area {
		padding-top: 43.5% !important;
	}
_:-ms-lang(x)::-ms-backdrop, .earth_area {
		padding-top: 43.5% !important;
	}
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
	.earth_area {
		padding-top: 43.5%;
	}
}

.earth_area_inner {
	position: relative;
}

.pin {
	position: absolute;
	top: 0;
	display: none;
}

.pin.america {
	top: 45px;
	left: 100px;
	z-index: 1;
}

.pin.america_costarica {
	top: 40px;
	left: 95px;
	z-index: 1;
}

.pin.australia {
	top: 230px;
	left: 160px;
	z-index: 1;
}

.pin.belgium {
	top: 76px;
	left: 105px;
	z-index: 1;
}

.pin.brazil {
	top: 185px;
	left: 225px;
	z-index: 1;
}

.pin.canada {
	top: -6px;
	left: 116px;
	z-index: 1;
}

.pin.canada_swiss {
	top: 16px;
	left: 97px;
	z-index: 1;
}

.pin.china {
	top: 55px;
	left: 105px;
	z-index: 1;
}

.pin.costa_rica {
	top: 137px;
	left: 141px;
	z-index: 1;
}

.pin.france {
	top: 95px;
	left: 100px;
	z-index: 1;
}

.pin.germany {
	top: 88px;
	left: 113px;
	z-index: 1;
}

.pin.india {
	top: 160px;
	left: 137px;
	z-index: 1;
}

.pin.indonesia {
	top: 162px;
	left: 106px;
	z-index: 1;
}

.pin.japan {
	top: 45px;
	left: 190px;
	z-index: 1;
}

.pin.norway {
	top: 43px;
	left: 132px;
	z-index: 1;
}

.pin.russia {
	top: 20px;
	left: 220px;
	z-index: 1;
}

.pin.srilanka {
	top: 190px;
	left: 143px;
	z-index: 1;
}

.pin.sweden {
	top: 50px;
	left: 134px;
	z-index: 1;
}

.pin.swiss {
	top: 97px;
	left: 109px;
	z-index: 1;
}

.pin.uk {
	top: 73px;
	left: 96px;
	z-index: 1;
}

.pin.vietnam {
	top: 88px;
	left: 94px;
	z-index: 1;
}

.map {
	position: absolute;
	top: 0;
	display: none;
}

.map.america {
	top: 10px;
	left: 69px;
}
.map.america_costarica {
	top: 10px;
	left: 69px;
}
.map.australia {
	top: 253px;
	left: 131px;
}

.map.belgium {
	top: 129px;
	left: 123px;
}

.map.brazil {
	top: 204px;
	left: 189px;
}

.map.canada {
	top: 5px;
	left: 85px;
}

.map.canada_swiss {
	top: 3px;
	left: 38px;
}

.map.china {
	top: 56px;
	left: 65px;
}

.map.costa_rica {
	top: 184px;
	left: 158px;
}

.map.france {
	top: 141px;
	left: 105px;
}

.map.germany {
	top: 132px;
	left: 127px;
}

.map.india {
	top: 168px;
	left: 133px;
}

.map.indonesia {
	top: 177px;
	left: 72px;
}

.map.japan {
	top: 78px;
	left: 187px;
}

.map.norway {
	top: 83px;
	left: 136px;
}

.map.russia {
	top: 4px;
	left: 159px;
}

.map.srilanka {
	top: 248px;
	left: 162px;
}

.map.sweden {
	top: 88px;
	left: 147px;
}

.map.swiss {
	top: 143px;
	left: 129px;
}

.map.uk {
	top: 107px;
	left: 106px;
}

.map.vietnam {
	top: 141px;
	left: 106px;
}

.earth {
	width: 340px;
	height: 492px;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.earth.america,
.earth.asia,
.earth.america_euro,
.earth.east-asia,
.earth.europe {
	display: none;
}

.sky {
	position: relative;
	width: 100%;
	heighjt: 100%;
}

.cloud {
	position: absolute;
}

.cloud.energy {
	top: 2%;
	left: 3%;
	z-index: 1;
}
.cloud.development {
	top: 5%;
	left: 19%;
	z-index: 1;
}
.cloud.economy {
	top: 85%;
	left: 21%;
	z-index: 1;
}
.cloud.community {
	top: 1%;
	left: 79%;
	z-index: 1;
}
.cloud.chemicals {
	top: 10%;
	left: 2%;
	z-index: 1;
}
.cloud.communication {
	top: 30%;
	left: 2%;
}
.cloud.cooperation {
	top: 29%;
	left: 79%;
	z-index: 1;
}
.cloud.biodiversity {
	top: 4%;
	left: 60%;
	z-index: 1;
}
.cloud.forests {
	top: 40%;
	left: 8%;
	z-index: 1;
}
.cloud.animals {
	top: 48%;
	left: 1%;
	z-index: 1;
}
.cloud.oceans {
	top: 39%;
	left: 77%;
	z-index: 1;
}
.cloud.rivers {
	top: 12%;
	left: 75%;
}
.cloud.developing {
	top: 55%;
	left: 12%;
	z-index: 1;
}
.cloud.industry {
	top: 83%;
	left: 3%;
	z-index: 1;
}
.cloud.warming {
	top: 21%;
	left: 10%;
	z-index: 1;
}
.cloud.water {
	top: 62%;
	left: 2%;
	z-index: 1;
}
.cloud.atmospheric {
	top: 86%;
	left: 67%;
	z-index: 1;
}
.cloud.cities {
	top: 75%;
	left: 25%;
	z-index: 1;
}
.cloud.recycle {
	top: 70%;
	left: 79%;
	z-index: 1;
}
.cloud.ozone {
	top: 79%;
	left: 58%;
	z-index: 1;
}
.cloud.law {
	top: 67%;
	left: 62%;
	z-index: 1;
}
.cloud.policy {
	top: 57%;
	left: 69%;
	z-index: 1;
}
.cloud.foods {
	top: 70%;
	left: 8%;
	z-index: 1;
}
.cloud.population {
	top: 61%;
	left: 22%;
	z-index: 1;
}
.cloud.environment {
	top: 50%;
	left: 79%;
	z-index: 1;
}
.cloud.poverty {
	top: 77%;
	left: 76%;
	z-index: 1;
}

.cloud .cloud_inner {
	position: relative;
	background: url('../../../projects/icons/cloud-big.png') no-repeat;
	width: 100px;
	height: 65px;
	background-size: 100%;
	text-align: center;
	float: left;
	opacity: .7;
	cursor: pointer;
}

.opacity_on{
	opacity: 1 !important;
}

.cloud_inner img,
.cloud_inner span {
	cursor: pointer;
}

.cloud_inner span{
	font-weight: 600;
}

.cloud .small {
	width: 120px;
	height: auto;
}

.cloud.big {
	position: relative;
	width: 130px;
	text-align: center;
	opacity: 1;
}

.cloud span {
	position: absolute;
	font-size: 12px;
	line-height: 11px;
	height: 10px;
	width: 100px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0;
	transition: all 0.6s ease 0s;
	-webkit-transition: all 0.6s ease 0s;
	-moz-transition: all 0.6s ease 0s;
}

.cloud.double span {
	height: 24px;
}
.cloud.triple span {
	height: 35px;
}

.cloud .big span {
	font-size: 12px;
	line-height: 11px;
	vertical-align: middle;
	width: 200px;
	transition: all 0.6s ease 0.5s;
	-webkit-transition: all 0.6s ease 0.5s;
	-moz-transition: all 0.6s ease 0.5s;
}

.cloud.big.double span {
}
.cloud.big.triple span {
}


/* scroll bar */
.mCS-3d-thick-dark.mCSB_scrollTools, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer, .mCS-3d-thick.mCSB_scrollTools, .mCS-3d-thick.mCSB_scrollTools .mCSB_draggerContainer {
	border-radius: 0;
}
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_draggerContainer {
	box-shadow: none;
	background-color: rgba(0, 0, 0, 0);
}

.mCSB_scrollTools,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-2.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-3.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset-dark.mCSB_scrollTools .mCSB_draggerRail, .mCS-inset.mCSB_scrollTools .mCSB_draggerRail {
	background-color: rgba(115, 166, 206, 1);
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: #fff;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonUp, .mCS-inset.mCSB_scrollTools .mCSB_buttonUp,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonUp {
	background-position: -48px 0;
	opacity: 1;
}

.mCS-inset-2.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset-3.mCSB_scrollTools .mCSB_buttonDown, .mCS-inset.mCSB_scrollTools .mCSB_buttonDown,
.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_buttonDown {
	background-position: -48px -18px;
	opacity: 1;
}

.mCS-3d-thick-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-3d-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCS-inset-2-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-2.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-inset.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	margin: 3px 4px;
	width: 8px;
}

.mCSB_inside > .mCSB_container {
	margin-right: 18px;
}





@media screen and (min-height: 900px){
	.annual_year {
		height: 830px;
	}
	
	.scroll_winner {
		height: 830px;
	}
	
	.earth_area {
		padding-top: 10.5%;
		margin: 15% auto;
	}
	
	.map {
		padding-top: 17.5%;
	}
	
	.pin {
		padding-top: 17.5%;
	}
	
	@media screen and (-webkit-min-device-pixel-ratio:0) {
		.earth_area {
			padding-top: 55.5%;
		}
		
		.map {
			padding-top: 20%;
		}
		
		.pin {
			padding-top: 20%;
		}
	}
	
}