/* POPUP部分の骨組み */



.popup-box {
	position:relative;
	background:#FFF;
	padding:20px;
	width:auto;
	max-width:500px;
	margin:20px auto;
	border-radius:8px;
}

.mfp-close-customed {
	position:fixed;
	top:20px;
	right:20px;
	cursor:pointer;
	/* 
	background:#ffffff;
	font-size:20px;
	*/
}




.gallery-arrow{
	position:absolute;
	top:50%;
	margin-top:-15px;
	background-color:#fff;
	display:block;
	width:30px;
	height:30px;
	border-radius:15px;
	text-align:center;
	line-height:30px;
	cursor:pointer;
	z-index:9999;
}
.gallery-arrow-left{
	left:30px;
}
.gallery-arrow-left:before{
	position:absolute;
	top:-2%;
	left:32%;
	content:'<';
	color:#000;
}
.gallery-arrow-right{
	right:30px;
}
.gallery-arrow-right:before{
	position:absolute;
	top:-2%;
	left:35%;
	content:'>';
	color:#000;
}

.gallery-arrow:hover{
	opacity:0.8;
	transition:all.3s ease-out;
}







/* Magnific Popup の表示時、フェード設定 */

/* オーバーレイ 初期状態 */
.mfp-fade.mfp-bg {
	opacity:0;

	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	transition:all.3s ease-out;
}
/* オーバーレイ 表示アニメーション */
.mfp-fade.mfp-bg.mfp-ready {
	opacity:0.8;
}
/* オーバーレイ 非表示アニメーション */
.mfp-fade.mfp-bg.mfp-removing {
	opacity:0;
}

/* コンテンツ 初期状態 */
.mfp-fade.mfp-wrap .mfp-content {
	opacity:0;

	-webkit-transition:all .3s ease-out;
	-moz-transition:all .3s ease-out;
	transition:all .3s ease-out;
}
/* コンテンツ 表示アニメーション */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity:1;
}
/* コンテンツ 非表示アニメーション */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity:0;
}






.my-video {
	width: 800px;
	height: auto; /* 縦横比を保持 */
	display: block; /* 必要に応じて中央寄せ用 */
	margin: 0 auto;
}


@media screen and (max-width: 768px) {
	.my-video {
		width: 100vw;       /* 画面幅いっぱいに */
		max-width: none;    /* 800px制限を解除 */
		height: auto;       /* アスペクト比維持 */
		display: block;
		margin-left: calc(-50vw + 50%); /* 親の中央寄せ分を打ち消して左端にフィット */
	}
	
	.mfp-close-customed {
	position: absolute;
		top: -40px;
		left: auto;
		right: 10px;
		width: 30px;
		margin-left: 0;
	}
	
	.mfp-close-customed img {
		width:100%;
	height:auto;
	}
	
}