@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);

body {margin: 0px; padding:0px; font-family:'Open Sans', Verdana, Arial, Helvetica, sans-serif; background-color: #ddd;}

a:link, a:visited, a:active	{color: #444;}
a:hover 					{color: #666;}

#wrapper	{
	display: flex;
	flex-direction: column;
	width:741px; height: 521px;
	margin: 7% auto 35px auto;
	padding:0;
	text-align: center;
	background-color: #fff;
	background-image: url(/img/splash/SakuraLive.png);
	-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.2);
}

#contents {
	display: flex;
	flex-direction: column;
	position: relative;
	top:7px;
	width:380px;
}
#logo {width:100%; height:35px; margin: 0 auto;}

#contents a img {margin: 0 0 24px 0;}
#eightteen {
	margin: 40px auto 0 auto;
	padding: 10px 20px;
	font-size: 1.1rem;
	background: #fff9;
}
#exit			{margin: 5px auto 30px auto; font-size:0.7rem; color: #A00;}
#creditCards	{margin: 35px auto 0 auto;}

#footer		{width:420px; margin:0 auto; text-align: center; font-size: 0.8rem;}
#footer span{display: inline-block;}


#copy	{margin:10px 0 0 0; font-size: 0.7rem;}
.hide {display: inline;}

@media all and (max-width: 800px) {
#wrapper	{
	width:90%;
	height: auto;
	margin: 7% auto 35px auto;
	background-position-x:36%;
}
#contents {height: 521px;}
}

@media all and (max-width: 440px) {
#contents 	{width:98%;}
#footer 	{width:100%;}
#footer span{display: block;}
.hide 		{display: none !important;}
}
@media all and (max-width: 380px) {
#logo img {width:90%; height: auto;}
#eightteen {font-size: 0.9rem;}
}