@charset "shift_jis";
/* CSS Document */

/*============================================================
	Overwrite
*/
html, body {
	width: 100%; height: 100%;
}
header {
	position: absolute;
}
footer {
	position: absolute;
	z-index: 100;
	left: 0; top: 100%;
	width: 100%;
}
div#wrap {
	position: relative;
	padding: 0;
	width: 100%; height: 100%;
	min-width: 960px;
	background-image: none;
}

/*============================================================
	Common
*/
article {
	overflow: hidden;
	position: absolute;
	top: 110px; bottom: 0;
	width: 100%;
	background: #f7f2f2;
}
#content {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	/*-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);*/
}

/*============================================================
	Worldmap
*/
#worldmap {
	position: absolute;
	top: 50%; left: 50%;
	width: 2400px; height: 1400px;
}
#worldmap img {
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

/*============================================================
	Sound
*/
#sound {
	position: absolute;
	top: 150px; left: 50%;
	z-index: 998;
	margin: 0 0 0 380px;
	opacity: 0;
}
#sound a {
	display: block;
	width: 90px; height: 30px;
}
#sound a span {
	overflow: hidden;
	display: block;
	width: 100%; height: 100%;
	background: transparent url(../images/index/btn_sound.png) 0 0 no-repeat;
	-webkit-background-size: 180px 60px;
	background-size: 180px 60px;
	text-indent: -999em;
}
#sound a:hover span {
	background-position: 0 -30px;
}
#sound a.off span {
	background-position: -90px 0;
}
#sound a.off:hover span {
	background-position: -90px -30px;
}

/*============================================================
	Wall
*/
#wall {
	position: absolute;
	z-index: 100;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: #f7f2f2;
}

/*============================================================
	Index
*/
#index {
	position: absolute;
	top: 0; left: 0;
	z-index: 10;
	width: 100%; height: 100%;
}
#index #skip {
	overflow: hidden;
	position: absolute;
	top: 50%; left: 50%;
	margin: 140px 0 0 -50px;
	width: 100px; height: 40px;
}
#index #skip a {
	display: block;
	overflow: hidden;
	width: 100px; height: 40px;
	background: transparent url(../images/index/btn_skip.png) 0 0 no-repeat;
	text-indent: -999em;
}
#index #skip a:hover {
	background-position: 0 -40px
}
#index .catch01 {
	position: absolute;
	top: 50%; left: 50%;
	margin: -25px 0 0 -275px;
	width: 550px; height: 50px;
}
#index .catch01 .img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url(../images/index/catch01.png) 50% 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#index .catch01 .img span {
	overflow: hidden;
	display: block;
	height: 0;
}
#index .catch02 {
	position: absolute;
	top: 50%; left: 50%;
	margin: -25px 0 0 -410px;
	width: 820px; height: 50px;
}
#index .catch02 .img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: transparent url(../images/index/catch02.png) 50% 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}
#index .catch02 .img span {
	overflow: hidden;
	display: block;
	height: 0;
}
#index .title {
	position: absolute;
	top: 50%; left: 50%;
	margin: -110px 0 0 -350px;
	width: 700px; height: 220px;
}
#index .title .title-jp {
	position: absolute;
	top: 0; left: 50%;
	margin: 0 0 0 -350px;
	width: 700px; height: 70px;
}
#index .title .title-en {
	position: absolute;
	top: 84px; left: 50%;
	margin: 0 0 0 -165px;
	width: 330px; height: 20px;
}
#index .title .go-tours {
	position: absolute;
	bottom: 0; left: 50%;
	margin: 0 0 0 -187px;
	width: 374px; height: 74px;
}
#index .title .go-tours div,
#index .title .go-tours a {
	position: absolute;
}
#index .title .go-tours a {
	overflow: hidden;
	top: 0; left: 0;
	width: 100%; height: 100%;
	text-indent: -999em;
	background: transparent url(../images/index/null.png) 0 0 repeat;
}
#index .title .go-tours .line {
	left: 0;
	width: 100%; height: 1px;
	background: #c09b0f;
}
#index .title .go-tours .line-top {
	top: 0;
}
#index .title .go-tours .line-bottom {
	bottom: 0;
}
#index .title .go-tours .word00 {
	top: 17px; left: 42px;
}
#index .title .go-tours .word01 {
	top: 17px; left: 93px;
}
#index .title .go-tours .word02 {
	top: 17px; left: 124px;
}
#index .title .go-tours .word03 {
	top: 17px; left: 166px;
}
#index .title .go-tours .word04 {
	top: 17px; left: 196px;
}
#index .title .go-tours .word05 {
	top: 17px; left: 227px;
}
#index .title .go-tours .word06 {
	top: 17px; left: 257px;
}
#index .title .go-tours .word07 {
	top: 17px; left: 287px;
}

/*============================================================
	Tour
*/
#tour {
	position: absolute;
	top: 50%; left: 50%;
	width: 2400px; height: 1400px;
}
#tour .info {
	position: absolute;
	width: 270px;
	margin: -70px 0 0 -135px;
}
#tour .info .pointer {
	position: absolute;
	top: 70px; left: 50%;
	margin: 0 0 0 -70px;
	width: 140px; height: 140px;
	background: transparent url(../images/index/pointer.png) 50% 50% no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}
#tour .info .bottle {
	position: absolute;
	z-index: 10;
	top: 10px; left: 50%;
	margin: 0 0 0 -15px;
	width: 30px; height: 74px;
}
#tour .info .bottle img {
	width: 100%; height: 100%;
}
#tour .info .tip {
	position: absolute;
	z-index: 10;
	top: 90px; left: 0;
	width: 270px; height: 90px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
#tour .info .tip img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}

/*#tour .info:after {
	content: '';
	display: block;
	margin: -5px 0 0 -5px;
	width: 10px; height: 10px;
	background: #000;
	position: absolute;
	top: 70px; left: 50%;
}*/

#tour .anchor {
	display: block;
	position: absolute;
	z-index: 50;
	width: 80px; height: 80px;
	margin: -40px 0 0 -40px;
	background: transparent url(../images/index/null.png) 0 0 repeat;
}

#tour .finland,
#tour .anchor-finland {
	left: 25.1%; top: 22%;
}
#tour .iceland,
#tour .anchor-iceland {
	left: 14.306%; top: 21.875%;
}
#tour .india,
#tour .anchor-india {
	left: 37.8%; top: 48%;
}
#tour .russia-siberia,
#tour .anchor-russia-siberia {
	left: 39.05%; top: 29.625%;
}
#tour .russia,
#tour .anchor-russia {
	left: 28.61%; top: 29%;
}
#tour .switzerland,
#tour .anchor-switzerland {
	left: 20.22%; top: 35.5%;
}
#tour .uzbekistan,
#tour .anchor-uzbekistan {
	left: 33.9%; top: 42%;
}
#tour .netherland,
#tour .anchor-netherland {
	left: 19.5%; top: 31%;
}

/*============================================================
	Not PC
*/
.not-pc #tour .info .pointer {
	top: 0;
}
.not-pc #sound {
	display: none;
}
.not-pc article {
	bottom: 70px;
}
.not-pc footer {
	top: auto;
	bottom: 0;
}
.not-pc #tour .anchor {
	width: 240px; height: 160px;
	margin: -50px 0 0 -120px;
	/*background: #666;
	opacity: 0.4;*/
}
.not-pc #tour .anchor-finland,
.not-pc #tour .anchor-uzbekistan {
	z-index: 51;
}
#tour .russia,
#tour .anchor-russia {
	left: 29.2%;
}

/*============================================================
	Banner
*/
#banner {
	position: absolute;
	z-index: 9999;
	bottom: 20px; left: 50%;
	margin-left: -455px;
}
#banner a {
	display: block;
	width: 282px;
}
#banner a img {
	width: 100%;
}
#banner a img.base {
	position: absolute;
	top: 0; left: 0;
}
#banner a:hover img.base {
	opacity: 0;
}
@media screen and (max-height: 800px) {
	#banner a {
		width: 260px;
	}
}