@charset "utf-8";
body{
	text-align: center;
	background:  #fff url(../images/wearestar_back.jpg)  center;
}

h1 { padding: 50px 0; }

div.cloudBox {
	background: #fff url(../images/bg.jpg) no-repeat top center;
	background-size:100% auto;
	padding: 0 5%;
}

div.goTicket { padding: 30px 0; }
div.textBox {
	max-width: 850px;
	margin: 0 auto;
	padding: 30px 5%;
	text-align: left;
	color: #3579dd;
	background: rgba(255, 255, 255, 0.5);
}

ul.artist {
	margin: 0 auto;
	max-width: 930px;
}
ul.artist li {
	vertical-align: top;
	text-align:center;
	margin:1% 5px 0;
	width: 30%;
	display:inline-block;
}
ul.artist li img { width: 100%;}

div.ticketBox {
	background: #fffeb2;
	padding: 30px 0;
}

ul.ticketBtn {
	margin: 0 auto;
	max-width: 930px;
}
ul.ticketBtn li {
	font-size: 0.75em;
	vertical-align: bottom;
	text-align:center;
	margin:1% 5px 2%;
	width: 22%;
	display:inline-block;
}
ul.ticketBtn li img { width: 100%;}

footer {
	color: #fff;
	padding: 20px 0 70px;
}

.sp { display: none; }
.pc { display: block; }

div#autoYT {
	width: 1000px;
	margin: 0 auto 20px;
}

.yt_wrapper {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	display: inline-block;
	height: 187px;
}

.yt_front {
	position: absolute;
	display: inline-block;
	z-index: 10;
	cursor: pointer;
}

.spyt {
	position: relative;
	width: 33%;
	padding-bottom: 18.783%;
	height: 0;
	overflow: hidden;
	float: left;
}
.spyt iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media all and (min-width: 0) and (max-width: 736px)  {
	.sp { display: block; }
	.pc { display: none; }
	img { max-width:96%; }
	div.goTicket { padding: 30px 0 0; }

	ul.artist li { width: 40%; }
	ul.ticketBtn li { width: 90%; }
	p { text-align: left;}
	.spyt {
		position: relative;
		width: 50%;
		padding-bottom: 28.175%;
		height: 0;
		overflow: hidden;
		float: left;
	}
}