@charset "utf-8";
/*----------------------------------------------------
    Modal Window Style
----------------------------------------------------*/
#modal {
    display: none;
}
#modal #mField {
    background: url("/support/images/bg_movie.png") repeat;
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0;
    z-index:1001;
    width: 100%;
    height: 1000px;
}
#modal #mObject {
    z-index:1002;
    position: fixed;
    left: 50%;
    margin-left: -280px;
    _position: absolute;
}
#modal #mClose {
    text-align: right;
    color: #fff;
    font-weight: bold;
    padding-bottom: 5px;
    cursor: pointer;
}
/* YouTube Movie */
#modal #mMovie {
    width: 560px;
    height: 315px;
    background: #000;
}
#modal .mComment {
	padding:10px;
	font-size:0.9em !important;
	background:#fff;
	text-align:center;
}
/* Text Area */
#modal #mText {
    width: 560px;
    height: 315px;
	padding:15px;
    background: #fff;
}

.labelBox {
	border:1px dashed #ccc;
	padding:10px;
	margin:10px 0;
}
.labelBox p {
	margin-bottom:10px;
}
.labelBox li {
	margin-bottom:5px !important;
}

.leftBox {
	width:360px;
	float:left;
}

/* youtubeレスポンシブ */

	/* 参考
	<div class="movieWrap">
		<iframe width="560" height="315" src="" frameborder="0" allowfullscreen><!--YouTube Movie--></iframe>
	</div>
	*/

.movieWrap {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.movieWrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media only screen and (max-width: 767px){
	#modal #mMovie {
		width: 100%;
		height: auto;
	}
	#modal #mObject {
    left: 0;
    margin-left: 0;
	}
}