html{
	width: 100%;
	height: 100%;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
	font-size: 12px;
	color: #333;
}
body{
	position: relative;
	height: 100%;
	margin: 0;
	padding: 0;
}
#loading{
	position: absolute;
	z-index: -1;
	width: 20px;
	height: 20px;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	margin-top: -10px;
	margin-left: -10px;
	border:3px solid #999;
	border-top-color: #666;
	-webkit-animation: loader 0.8s infinite linear;
	animation: loader 0.8s infinite linear;
}
@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


#intro{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000;
	display: none;
	z-index: 999;
}
#intro img{
 /*-ms-interpolation-mode: bicubic;*/
}

#intro .skip{
	display: none;
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 15px;
	z-index: 10;
	font-family: Times New Roman, "Hiragino Mincho ProN","ＭＳ Ｐ明朝","ＭＳ 明朝", serif;
	color: #fff;
	font-size: 22px;
	text-shadow:0px 0px 5px #000;
	letter-spacing: 0.1em;
	cursor: pointer;
}

#intro #opening{
	display: none;
	position: relative;
	/*display: table-cell;
	vertical-align: middle;*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 20px;
	box-sizing:border-box;
	z-index: 999;
	text-align: center;
	/*background: url("../img/openingBg.jpg") center center no-repeat;
	background-size:cover;*/
	background-color: #1a1a1a;
}
.ie8 #intro #opening{
	background:none;
	/*background-color: #fff;*/
}

#intro #opening img.painting{
	position: relative;
	top: 50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
	margin-top: -50px;
	max-width: 100%;
	max-height: -webkit-calc(100% - 100px);
	max-height: calc(100% - 100px);
	/*max-height: 100%;*/
	/*padding-bottom: 120px;*/
	box-shadow:0 0 15px rgba(0,0,0,0.2);

	/*display: none;*/
}

.ie8 #intro #opening img.painting{
	top: 20px;
	margin-top: 0;
	max-height:80%;
}

#intro #opening .belt{
	/*display: none;*/
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100px;
	background-color: #a37f12;
	background: -webkit-gradient(linear, left top, right top, from(#9c7700), color-stop(30%, #fdeabd), to(#9c7700)); 
  	background: linear-gradient(to right, #9c7700, #fdeabd 30%, #9c7700);
}

#intro #opening .belt .thanks{
	position: absolute;
	left: 20px;
	top: 16px;
	width: 110px;
}
#intro #opening .belt .logo130th{
	position: absolute;
	left: 50%;
	top: 5px;
	margin-left: -70px;
	width: 140px;
}
#intro #opening .belt .logoTakano{
	position: absolute;
	right: 20px;
	top: 30px;
	width: 140px;
}




#intro ul.bg{
	display: none;

	position: absolute;
	z-index: 1;
	margin: 0;
	padding: 0;
	height: 100%;
	list-style: none;
	animation: fadein 3s linear forwards;
	-webkit-animation: fadein 3s linear forwards;
}
@-webkit-keyframes fadein {
  0% { opacity:0; }
  100% { opacity:1; }
}
@keyframes fadein {
  0% { opacity:0; }
  100% { opacity:1; }
}

#intro ul.bg li{
	margin: 0;
	padding: 0;
	height: 100%;
	position: absolute;
}
#intro ul.bg li img{
	position: absolute;
	vertical-align: bottom;
	display: block;
}

#intro ul.bg li img.zoom{
	animation: bgZoom 6s linear forwards;
	-webkit-animation: bgZoom 6s linear forwards;
}

@-webkit-keyframes bgZoom {
  0% { -webkit-transform: scale(1.0); }
  80% { opacity:1; }
  100% { -webkit-transform: scale(1.3);  opacity:0;}
}
@keyframes bgZoom {
  0% { transform: scale(1.0); }
  80% { opacity:1; }
  100% { transform: scale(1.3); opacity:0; }
}

#intro .obj{
	position: relative;
	z-index: 2;
	height: 100%;

	display: none;
}



#intro .obj .copy01{
	position: absolute;
	top: 50%;
	margin-top:-90px;
	width: 380px;
	left: 50%;
	margin-left: -190px;
	
	/*display: none;*/
}

#intro .obj .copy02{
	position: absolute;
	top: 50%;
	margin-top:-50px;
	width: 300px;
	margin-left: -150px;
	left: 50%;

	/*display: none;*/
}
#intro .obj .logo{
	position: absolute;
	top: 50%;
	margin-top:-130px;
	width: 260px;
	margin-left: -130px;
	left: 50%;

	/*display: none;*/
}

#main{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #fff;
}
/*#main:after{
	content: "";
	display: block;
	position: absolute;
	width: 1px;
	left: 50%;
	height: 100%;
	background-color: #ededed;
}*/
#main > section a{
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
}

#main .takano{
	position: absolute;
	height: 100%;
	width: 50%;
	left: 0;
	background-color: #02180b;
}
#main .parlour{
	position: absolute;
	height: 100%;
	width: 50%;
	left: 50%;
	background-color: #fff;
}
#main .bg{
	position: absolute;
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition:all 0.3s linear;
}
#main a:hover .bg{
	/*-webkit-filter: blur(7px);
    -ms-filter: blur(7px);
	filter: blur(7px);*/
	opacity: 0.6;
}
#main .takano .bg{
	background-image: url("../img/takanoBg.jpg");
}
#main .parlour .bg{
	background-image: url("../img/parlourBg.jpg");
}



#main .inner{
	/*display: none;*/
	position: absolute;
	left: 0;
	width: 100%;
	/*top:50%;
	height: 260px;
	margin-top: -120px;*/
height: 100%;
	text-align: center;
	font-size: 14px;
	/*-webkit-transform:scale(0.95);
	transform:scale(0.95);
	transition:all 0.5s ease;*/
	transition:all 0.5s linear;
}
/*#main .takano a:hover .inner{
	background-color: rgba(0,0,0,0.6);
}
#main .parlour a:hover .inner{
	background-color: rgba(255,255,255,0.8);
}*/

#main > section img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -110px;
	margin-left: -113px;
	height: 260px;
}
#main .takano .inner{
	background-color: rgba(0,0,0,0.2);
}
#main .parlour .inner{
	background-color: rgba(255,255,255,0.2);
}
#main .inner h1{
	font-weight: normal;
}
#main .takano .inner h1{
	color: #ebcf8c;
}
#main .parlour .inner h1{
	color: #fff;
}

@media screen and (max-width: 560px) {
	#intro #opening{
		padding: 0;
		/*background:none;
		background-color: #bf9c44;*/
	}
	#intro #opening img.painting{
		display: block;
		position: relative;
		top: 0;
		-webkit-transform:translateY(0);
		transform:translateY(0);
		margin-top: 0;
		max-width: 100%;
		max-height: -webkit-calc(100% - 120px);
		max-height: calc(100% - 120px);

		/*display: none;*/
	}

	#intro #opening .belt{
		padding: 20px 0;
		position: static;
		height: 100%;
		width: calc(100% + 10px);
		margin-top: 0;
		margin-left: -5px;
		text-align: center;
		/*border:1px solid #f00;*/
		/*height: 100%;*/
		background:none;
		background-color: #bf9c44;
		background: -webkit-gradient(linear, left bottom, left top, from(#bf9c44), color-stop(80%, #bf9c44), to(#dabb6e)); 
  		background: linear-gradient(to top, #bf9c44 80%, #dabb6e);
	}
	#intro #opening .belt .thanks{
		display: block;
		margin: 0 auto 20px;
		position: static;
		width: 100px;
	}
	#intro #opening .belt .logo130th{
		display: block;
		margin: 0 auto 30px auto;
		position: static;
		width: 130px;
	}
	#intro #opening .belt .logoTakano{
		display: block;
		margin: 0 auto 10px;
		position: static;
		width: 70px;
	}


	#intro .obj .copy01{
		margin-top:-15px;
		width: 220px;
		margin-left: -110px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
	}

	#intro .obj .copy02{
		margin-top:-15px;
		width: 160px;
		margin-left: -80px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	#intro .obj .logo{
		margin-top:-15px;
		width: 160px;
		margin-left: -80px;
		-webkit-transform:translateY(-50%);
		transform:translateY(-50%);
	}
	#intro .skip{
		right: auto;
		left: 50%;
		-webkit-transform:translateX(-50%);
		transform:translateX(-50%);
		font-size: 18px;
		bottom: 15px;
	}


	#main{
		position: absolute;
		width: 100%;
		height: 100%;
	}
	#main:after{
		display: none;
	}
	#main > section a{
		position: relative;
		display: block;
		height: 100%;
		overflow: hidden;
	}

	#main .takano{
		position: absolute;
		height: 50%;
		width: 100%;
		left: 0;
		top: 0;
	}
	#main .parlour{
		position: absolute;
		height: 50%;
		width: 100%;
		top: 50%;
		left: 0;
	}

	#main .inner{
		position: relative;
		width: 100%;
		height: 100%;
		margin: 0;
		top: 0;
	}


	#main > section img{
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -105px;
		margin-top: -120px;
		height: 240px;
	}
}