@charset "UTF-8";
/* CSS Document */

/*--- first veiw
-------------------------------------------------------------------------------- */
body{
	background-image:url("../img/bg_play.png");
	background-position:center center;
	background-size:cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color:#fff!important;
}
@media screen and (max-width: 768px) {
	body{
		background:none;
	}
	body::before {
	  	background:url("../img/bg_play.png") no-repeat right bottom;
	  	background-size: cover;
	  	display: block;
	  	position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height:100vh;
		content: "";
		z-index: -1;
	}   
}

.main_play{
	min-height:100%;
	max-width:1280px;
	margin:0 auto;
}
@media screen and (max-width: 768px) {
	.main_play{
		overflow:hidden;
	}
}


.play {
	width:100%;
}
.play .flex{
	margin:50px auto;
	width:80%;
}
.play .flex img{
	max-height:550px;
	width:auto;
}

h2.play_ttl{
	margin-top:100px;
	width:100%;
	text-align:center;
}
h3.play_midashi{
	background-color:#e36299;
	border-radius: 5px;
	width:350px;
	padding:10px 5px;
	color:#fff;
	display:block;
	margin:0 auto 30px auto;
	text-shadow:0px 1px 3px #fff;
	box-shadow:2px 2px 3px #888;
	font-size:20px;
	font-weight:normal;
	text-align:center;
}
h4.play_end{
	color:#e36299;
	font-weight:bold;
	text-shadow: 0 0 15px #ffffcc,0 0 15px #ffffcc,0 0 15px #ffffcc,0 0 15px #ffffcc;
	font-size:30px;
	text-align:center;
	margin-top:40px;
}
.play_txt{
	width:350px;
	text-align:left;
	text-shadow: 2px 2px 4px #fff,-2px 2px 4px #fff,2px -2px 4px #fff,-2px -2px 4px #fff;
	margin:0 auto;
	font-size:18px;
	color:#0071bc;
	/*color:#6364ac;*/
}
@media screen and (max-width: 768px) {
	.play{
		padding:20px 0px;
	}
	.play .flex{
		flex-direction: column;
		margin:10px auto;
		width:100%;
	}
	h2.play_ttl{
		padding-top: 25px;
		width:60%;
		text-align:center;
		margin:0 auto;
	}
	h3.play_midashi{
		width:330px;
		margin:0 auto 20px auto;
	}
	.play_txt{
		width:330px;
	}
}


.play_txt p{
	padding:15px 25px;
	background-color:rgba(255,255,255,0.5);
}
.play_txt_img{
	text-align:center;
	margin-top: 20px;
	display:block;
}
.play_txt_img img{
	max-width:200px;
	height:auto;
}
@media screen and (max-width: 768px) {
	.play_txt {
		font-size:16px;
	}
}

.play .flex_naka.image.left{
	transform: rotate(-8deg);
	-moz-transform: rotate(-8deg);
	-webkit-transform: rotate(-8deg);
}
.play .flex_naka.image.right{
	transform: rotate(8deg);
	-moz-transform: rotate(8deg);
	-webkit-transform: rotate(8deg);
}
.play .flex_naka.image.first img{
	box-shadow: 0 0 0 rgba(0,0,0,0);
}
@media screen and (max-width: 768px) {
	.play .flex_naka {
		width:100%;
	}
	.play .flex_naka.image{
		position:relative;
		z-index:2;
	}
	.play .flex_naka.text{
		position:relative;
		margin-top: 20px;
		z-index:1;
	}
	.play .flex img{
		max-height:350px;
	}
	.play .flex_naka.image.left{
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	.play .flex_naka.image.right{
		transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
	}
	.play_txt_img img{
		max-width:150px;
		height:auto;
	}
}
@media screen and (max-width: 480px) {
	.play .flex img{
		max-height:300px;
	}
}