@charset "utf-8";




body {
	margin: 0px;
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif;
	overflow-x:hidden;
}

.container {
	width:90%;
	max-width:1200px;
	margin: 0 auto;
	padding:0 5%;
}


#information {
    float: left;
    width: 540px;
	color:#FFF;
	position:relative;
	height:505px;
}

#information #logo {
	margin:0 0 50px;
}


#information h2 {
	margin-top: 0;
	margin-bottom: 20px;
}


#img-circle {
    position: absolute;
    right: -55px;
    top: 100px;
    z-index: 0;
}

#information #time {
	display:block;
	margin:0 0 40px;
}

#information .btn {
	background-color: rgba(145,122,85,0.5);
	width:220px;
	text-align:center;
	font-weight:bold;
	color:#FFF;
	padding:10px 0;
	font-size: 14px;
	text-decoration:none;
	display: block;
	transition:0.5s transform;
	position:absolute;
	z-index:100;
}
#information .btn:hover {
	transform: scale(1.1,1.1);
}

#countdown {
    background-image: url("../images/bg-countdown.png");
    background-position: 26px 0;
    background-repeat: no-repeat;
    bottom: 42px;
    height: 175px;
    position: absolute;
    right: -44px;
    width: 253px;
}


#countdown #number {
    background-image: url("../images/img-number.png");
    display: block;
    height: 140px;
    width: 140px;
    margin: 49px 0 0 69px;
    text-indent: -9999px;
}
#countdown strong {
    background-position: 0px -13860px;
}



@keyframes blink {
	0% {
		opacity:0;
	}
	49% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	
	100% {
		opacity:1;
	}
}
@-webkit-keyframes blink {
	0% {
		opacity:0;
	}
	49% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	
	100% {
		opacity:1;
	}
}
@-o-keyframes blink {
	0% {
		opacity:0;
	}
	49% {
		opacity:0;
	}
	50% {
		opacity:1;
	}
	
	100% {
		opacity:1;
	}
}


@keyframes blink2 {
	0% {
		opacity:1;
	}
	49% {
		opacity:1;
	}
	50% {
		opacity:0;
	}
	
	100% {
		opacity:0;
	}
}
@-webkit-keyframes blink2 {
	0% {
		opacity:1;
	}
	49% {
		opacity:1;
	}
	50% {
		opacity:0;
	}
	
	100% {
		opacity:0;
	}
}
@-o-keyframes blink2 {
	0% {
		opacity:1;
	}
	49% {
		opacity:1;
	}
	50% {
		opacity:0;
	}
	
	100% {
		opacity:0;
	}
}


#gallery {
	width:100%;
	padding:60px 0;
}

#gallery header {
	text-align: center;
	margin-bottom: 40px;
}

#gallery ul {
	list-style:none;
	margin:0 auto;
	padding:0;
	font-size:0;
	text-align: center;
}

#gallery li {
	display:inline-block;
	margin-bottom: 15px;
	margin-right: 10px;
	font-size:0;
	text-align: center;
	vertical-align:top;
}

#gallery div.ih-item {
	position:relative;
}
#gallery div.ih-item img {
    width: 180px;
	height:136px;
}
#gallery div.ih-item span {
    font-size: 16px;
    font-weight: bold;
    left: 0;
    position: absolute;
    text-align: center;
    top: 28px;
    width: 100%;
	color:#680f0f;
}
#gallery div.ih-item h3 {
	line-height:1.2;
	font-size:14px;
}
#gallery li:last-child h3 {
	margin-top:15px;
}
#gallery li:last-child p {
    margin-top: 5px;
}
#gallery li:nth-child(15) p {
    margin-top: 5px;
}
#gallery div.caption{
	font-size:14px;
	padding:5px 0;
}

#access {
	width:100%;
	height:320px;
	background-image: url(../images/bg-access.png);
	padding:60px 0;
}

#access .container {
	width:100%;
	height:320px;
	max-width:1110px;
	margin:0 auto;
}

#map_txt {
    background-image: url("../images/bg-map_txt.png");
    background-position: 0 0;
    color: #fff;
    float: left;
    height: 256px;
    padding: 20px 40px;
    width: 404px;
	line-height:1.4;
}

#map_txt h1 {
	margin-bottom: 25px;
}

#map_txt span {
	font-size: 12px;
	margin-bottom: 12px;
	display:inline-block;
}


#access .container #map {
	width:580px;
	height:320px;
	margin-right:0;
	float:right;
}




#wall {
	width:100%;
	margin:0 auto;
	background-image: url(../images/bg-wall.jpg);
	background-repeat: repeat-x;
	background-position: 46% 0;
	height:560px;
		overflow:hidden;
		position:relative;
}


#Stage {
	margin-top: 5px;
	position:absolute;	
	left:50% !important;
	right:auto !important;
}

#Stage.open {
	left:85% !important;
}

#Stage.soon {
	left:58% !important;
}



#hours {
	background-color: #917a55;
	font-size:0;
}

#hours .hour {
	width:50%;
	display:inline-block;
	font-size: 14px;
	text-align:center;
	color:#FFF;
	padding:40px 0 60px;
}

#hours .hour h1 {
	margin-left: -30px;
	margin-bottom: 20px;
}


#hour-jp {
	background-color: #85704d;
	border-top: #786342 10px solid;
}

#hour-en {
	background-color: #7b6645;
	border-top: #5a462b 10px solid;
}

#hours table {
	width:450px;
	border:1px soild #FFF;
	border-collapse:collapse;
	margin:0 auto 30px;

	font-family:
		"游ゴシック",
		YuGothic,
		"Hiragino Kaku Gothic ProN",
		"ヒラギノ角ゴ Pro W3",
		"Hiragino Kaku Gothic Pro",
		Meiryo,
		sans-serif
	;
	
	/*
	font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", serif;
	*/
	
}

#hours th,
#hours td{
	border:1px solid #FFF;
	padding:25px 0;
	font-size: 16px;
	line-height:1.2;
}

#copy {
    display: block;
    text-align: center;
    width: 100%;
	padding:15px 0;
	background-color: #e8e8e8;
}



.ih-item.square.effect13 .info p {
    color: #DDD;
    padding: 0 20px;
}

.ih-item.square {
    height: 146px;
}
.flow-wrapper {
    position: absolute;
    bottom: 56px;
}

/*************************************************/

.kami {
  position: absolute;
  top: -50px;
  width: 30px;
  height: 30px;
  opacity: 0.8;
  -webkit-animation: fall 3s linear 0s 1 normal backwards;
  -moz-animation: fall 3s linear 0s 1 normal backwards;
  -ms-animation: fall 3s linear 0s 1 normal backwards;
  -o-animation: fall 3s linear 0s 1 normal backwards;
  animation: fall 3s linear 0s 1 normal backwards;
}
/* Animations */
/*************************************************/
@-webkit-keyframes fall {
  from {
    -webkit-transform: translateX(0) translateY(0) skew(30deg);
  }
  12.5% {
    -webkit-transform: translateX(-50px) translateY(75px) skew(0deg);
  }
  37.5% {
    -webkit-transform: translateX(50px) translateY(225px) skew(-30deg);
  }
  50% {
    -webkit-transform: translateX(0) translateY(300px) skew(30deg);
  }
  62.5% {
    -webkit-transform: translateX(-50px) translateY(375px) skew(0deg);
  }
  87.5% {
    -webkit-transform: translateX(50px) translateY(525px) skew(-30deg);
  }
  to {
    -webkit-transform: translateX(0) translateY(600px) skew(30deg);
  }
}
@keyframes fall {
  from {
    transform: translateX(0) translateY(0) skew(30deg);
  }
  12.5% {
    transform: translateX(-50px) translateY(75px) skew(0deg);
  }
  37.5% {
    transform: translateX(50px) translateY(225px) skew(-30deg);
  }
  50% {
    transform: translateX(0) translateY(300px) skew(30deg);
  }
  62.5% {
    transform: translateX(-50px) translateY(375px) skew(0deg);
  }
  87.5% {
    transform: translateX(50px) translateY(525px) skew(-30deg);
  }
  to {
    transform: translateX(0) translateY(600px) skew(30deg);
  }
}


	.fs-lightbox-image {
		padding: 10px;
		background-color: #ddc29c;
	}
.fs-lightbox,
.fs-lightbox-content,
.fs-lightbox-container {
	background-color: inherit;
}
.fs-lightbox-caption {
	color:#FFF;
	font-size: 12px;
}
.fs-lightbox-caption br {
	display:none;
}

.fs-lightbox-caption strong {
	display: block;
	font-size: 20px;
	margin-bottom: 5px;
}
.fs-lightbox-caption p {
	line-height:1.4;
}

.fs-lightbox-caption span {
    display: block;
    padding: 8px 0 0;
}
.fs-lightbox-position {
	display: none;
}

.fs-lightbox.fs-lightbox-mobile .fs-lightbox-close,
.fs-lightbox.fs-lightbox-mobile .fs-lightbox-control,
.fs-lightbox.fs-lightbox-mobile .fs-lightbox-caption {
	color:#FFF;
}
.fs-lightbox.fs-lightbox-mobile button {
	color:#FFF;
	padding:20px 10px;
	-webkit-appearance:none;
	background-color: inherit;
}
.fs-lightbox.fs-lightbox-mobile .fs-lightbox-caption {
	padding:10px;
}


#cboxTitle {
    background:none;
    box-sizing: border-box;
    color: #FFF;
    left: 0;
    line-height: 1.2;
    padding: 10px 0 0 0;
    position: absolute;
    top: 100%;
    width: 100%;
}

#cboxTitle p{
	margin:0;
}

#cboxTitle p strong{
	margin-bottom:5px;
	display:inline-block;
	font-size:20px;
}

#cboxTitle span {
    display: block;
    padding: 8px 0 0;
}

#cboxWrapper {
	overflow:visible;
	}
#colorbox {
	overflow:visible;
}

@media (min-width: 900px) and (max-width: 1200px) {

	
#Stage.open {
	left:51% !important;
}

#Stage.soon {
	left:34% !important;
}

	

#img-circle {
    height: auto;
    position: absolute;
    right: 0;
    top: 46px;
    width: 190px;
    z-index: 100;
}

	#information {
		color: #fff;
		float: left;
		height: 505px;
		position: relative;
		width: 100%;
	}
	

	#countdown {
		background-image: url("../images/bg-countdown.png");
		background-position: 26px 0;
		background-repeat: no-repeat;
		bottom: 210px;
		height: 188px;
		position: absolute;
		right: -21px;
		top: 32px;
		width: 253px;
		z-index: 100;
	}
	
	#access .container  {
		padding: 0px !important;
		width:90% !important;
	}


	#access #map_txt  {
		width:40% !important;
		-webkit-background-size: 100% 100%;
		background-size: 100% 100%;
	}

	
	#access .container #map {
		width: 50%;
	}
	
	
	#hours table {
		margin: 0 auto 30px;
		width: 380px;
	}


	#hours img {
		max-width: 380px;
		height:auto;
	}
	
	
	.flow-wrapper {
		position: absolute;
    bottom: 56px;
		left:0;
	}
	
	

}


@media (min-width: 500px) and (max-width: 900px) {

#img-circle {
    height: auto;
    position: absolute;
    right: 0;
    top: 46px;
    width: 190px;
    z-index: 100;
}

	#information {
		color: #fff;
		float: left;
		height: 505px;
		position: relative;
		width: 100%;
	}
	
	#information h2 img {
		width:280px;
		height:auto;
	}

#information #logo {
    margin: 0px 0 30px;
}

#information #time {
    display: block;
    margin: 0 0 20px;
}
	

	#countdown {
		background-image: url("../images/bg-countdown.png");
		background-position: 26px 0;
		background-repeat: no-repeat;
		bottom: 210px;
		height: 188px;
		position: absolute;
		right: -21px;
		top: 32px;
		width: 253px;
		z-index: 100;
	}
	
	#wall {
		height:550px;
	}
	
	#hours .hour {
		padding:20px 0 40px;
	}
	
	#hours .hour h1 img {
		height: 38px;
		width:auto !important;
	}


	
	#hours table {
		margin: 0 auto 20px;
		width: 320px;
	}

	#hours table th,
	#hours table td {
			padding:20px 15px ;
		width: 280px;
		white-space:pre-line;
	}


	#hours img {
		max-width: 320px;
		height:auto;
	}
	
	#hours .container {
		width:100%;
		padding:0 !important;
		margin:0 !important;
	}
	
	
	#map_txt {
		background-image: url("../images/bg-map_txt.png");
		background-position: 0 0;
		color: #fff;
		float: left;
		height: 256px;
padding: 15px 30px 40px;
    width: 250px;
			line-height: 1.4;
		background-size: 100% 100%;
		position:absolute;
		left:30px;
		top:30px;
		z-index:100;
	}
	#access h1 {
		margin-bottom: 10px;
	}
	
	#access h1 img {
		width:180px;
		height:auto;
	
	}
	
	#access .container {
		width:100%;
		padding:0 !important;
		margin:0 !important;
	}
	
	#access .container #map {
		width: 70%;
		margin-right: 20px;
	}
	
	#access {
		position: relative;
		height:340px;
	}
	
	#Stage {
	}
	
	#Stage.open {
		left:40% !important;
		transform: scale(0.3);
	}
	
	#Stage.soon {
		left:34% !important;
		transform: scale(0.6);
	}	


	.flow-wrapper {
		position: absolute;
    	bottom: 44px;
		left:0;
	}
	
}

@media (max-width: 500px) {

	.container {
		width:90%;
		margin:0 auto;
	}
	
	
	#information #logo {
		margin:0 auto 20px;
		text-align:center;
	}
	
		#logo img{
		width:280px;
		height:auto;
		}
	
	#information {
		float: none;
		width: 100%;
		position: relative;
		height: 320px;
	}
	
	#information h2 {
position: absolute;
    top: 100px;
    left: 5px;
    z-index: 100;
	}
	
	#information h2 img{
		width: 85%;
		height:auto;
	}
	
	
	#information #time {
    position: absolute;
    top: 230px;
    left: 5px;
    z-index: 100;
	width:50%;
	}
	
	#information #time img {
		max-width:100%;
		height:auto;
	}

	#information .btn {
    position: absolute;
    top: 300px;
    left: 5px;
    z-index: 100;
	width:50%;
	}
	
#img-circle {
    height: 140px;
    position: absolute;
    right: -4px;
    top: 200px;
    width: 140px;
    z-index: 0;
}
	#countdown {

		bottom: auto;
		right: -53px;
		top: 167px;
		transform: scale(0.7);
		z-index: 100;
	
	}
	
	
		#gallery h2 img {
			max-width:90%;
			height:auto;
		}
		
	#gallery img {
		max-width:100%;
		height:auto;
	}

	
	#gallery li {
		width: 45%;
	}
	
	#hours .hour {
		display:block;
		width:90%;
		padding:10px 5% 30px;
	}

	#hours .hour h1 img {
		height: 38px;
		width:auto !important;
	}

	#hours .hour img {
		max-width:100%;
		height:auto;
	}

	#hours .container {
		width:100% !important;
		padding:0 !important;
	}

	#hours .hour table {
		width:100%;
		margin-bottom: 10px;
	}
	
	#map_txt {
		background-image: url("../images/bg-map_txt.png");
		background-position: 0 0;
		color: #fff;
		float: none;
		height: 256px;
		padding: 20px 40px 30px;
		width: 70%;
		line-height: 1.4;
		background-size: 100% 100%;
		margin:0 auto 20px;
	}
	
	#map_txt h1 {
		margin-bottom: 10px;
	}
	#map_txt h1 img {
		width:180px;
		height:auto;
	}
	
	#access {
		padding: 30px 0;
	}

	#access .container {
		width:100% !important;
		padding:0 !important;
		
	}
	
	#wall {
		overflow-x:hidden;
		position:relative;
		width:100%;
		height:640px;
		background-size:cover;
	}
	
	#Stage.open {
		left:2% !important;
		transform: scale(0.3);
	}
	
	#Stage.soon {
		left:2% !important;
	}

	
	
	.ih-item.square {
		height:auto;
	}

	.ih-item.square.effect13 .info h3 {
		font-size:12px;
		margin-bottom: 5px;
	}

	.ih-item.square.effect13 .info p {
		padding:0 10px;
		margin:0;
	}
	
	footer {
		padding:10px 0;
	}
	
	.cboxPhoto {
		margin-top:0 !important;
	}
	
	#gallery div.ih-item img {
		width: 180px;
		height:auto;
	}
	#gallery div.ih-item span {
		top:17px;
	}

}