@charset "utf-8";

@import "layout.css";
	
/*-------------------------------------------------------------------------
	title
/*-----------------------------------------------------------------------*/	

#title {
}

	#title h1 img,
	#title ul#btn img,
	#title .qr img {
		width:100%;
		height:auto;
	}
	
	#title ul#btn {
	}
	
		#title ul#btn li {
			float:left;
			width:50%;
		}
		
			
	#title #instagram {
		position:relative;
	}
	
		#title #instagram .bg {
			width:100%;
			height:auto;
		}
	
		#title #instagram ul {
			position:absolute;
			top:29%;
			left:8%;
			padding: 1% 0 0 0;
		}
		
			#title #instagram ul li {
				width:110%;
			}
			
			#title #instagram ul li p {
				float:left;
				width:36%;
				margin:0 5% 0 0;
			}
			
				#title #instagram ul li p img {
					border:5px #FFF solid;
					width:100%;
					height:auto;
					
				}
			
			#title #instagram ul li span {
				font-size:120%;
				color:#FFF;
				letter-spacing: 0;
			}
			
			#title #instagram ul li span a {
				color:#FFF;
			}
			
			@media screen and (max-width: 480px) {
				
			#title #instagram ul li {
				width:90%;
			}
				
			#title #instagram ul li p {
				float:left;
				width:32%;
				margin:0 8% 0 0;
				float:left;
			}
			
				#title #instagram ul li span {
					font-size:90%;
					line-height:1.4;
					display:block;
					
			}
			}
			

/*-------------------------------------------------------------------------
	main
/*-----------------------------------------------------------------------*/

#main {
	background:url(../img/index/bg.jpg) 0 0 repeat-y;
	padding:3% 0 0 0;
}

	#main img {
		width:100%;
		height:auto;
	}
	
	#main #news {
		position:relative;
	}
	
		#main #news dl {
			position:absolute;
			top:0;
			left:0;
		}	

	#main #movie {
		width:72%;
		padding: 0 0 5% 0;
		margin: 3% auto 0 auto;
		position: relative;
	}
		#main #movie .new {
			width: 33%;
			position: absolute;
			top: -5%;
			left: 1%;
		}

#main .package {
	position:relative;
	margin:3% 0 0 0;
}

	#main .package ul {
		position:absolute;
		top:13%;
		left:56%;
	}
	
		#main .package ul li {
			float:left;
			margin:0 5% 5% 0;
			width:38%;
			height:auto;
		}
		
		#main .package ul li.cero {
			float:left;
			margin:0 5% 5% 0;
			width:32%;
			height:auto;
		}
		
			#main .package ul li img {
				
			}

#main #sns {
	position:relative;
}

	#main #sns img {
		width:100%;
		height:auto;
	}

	#main #sns ul {
		position:absolute;
		top:10%;
		left:65%;
	}
	
		#main #sns ul li {
			float:left;
			width:40%;
			margin:0 10% 0 0;
		}
		
		#main #sns ul li img {
		}
		
#main .account {
	margin:2% 0 0 0;
}
		
	

@media screen and (max-width: 480px) {
#main #sns {
}

#main #sns ul li {
	float:left;
}

#main #sns ul li img {
}
}


/*-------------------------------------------------------------------------
	info
/*-----------------------------------------------------------------------*/	

#info {
	padding: 4% 0 8% 0;
	margin:3% 0 0 0;
	position:relative;
}

#info img {
	width:100%;
	height:auto;
}
		#info .box {
            width: 86%;
			height:50%;
            padding: 14% 0% 10% 7%;
            overflow: auto;
            -webkit-overflow-scrolling:touch;
            display: inline-block;
			position:absolute;
			top:0;
			left:0;
			
        }
            #info .box iframe {
                height: 100%;
                width: 100%;
				border:none;
                display:block;
            }
			
		#infoInner {
			width: 100%;
			color: #3c3c3c;
			font-size: 130%;
			font-weight: 800;
		}
			#infoInner dt {
			}
			#infoInner dd {
			}
			#infoInner dd a {
				color: #3c3c3c;
				text-decoration: underline;
                display: block;
			}
			
		@media screen and (max-width: 480px) {
		#info .box {
            width: 86%;
			height:85px;
            padding: 0 0 0 7%;
			margin:0 0 0 0;
            /*overflow: auto;*/
            /*<!---webkit-overflow-scrolling:touch;-->*/
			position:absolute;
			top:30%;
			left:0;
			
        }
		
		#infoInner {
			width: 100%;
			color: #3c3c3c;
			font-size: 90%;
			font-weight: 800;
		}
		}