@charset "utf-8";

/*----------------------------------------------------------------*/
/* JOOX 仙台スカイキャンドルムービー表示 (2026/04/29 update)  */
/*----------------------------------------------------------------*/

/* movie設定 -------------------------------------------*/

/* Playボタン ------------------*/
.video-btn{
	position:absolute;
	margin:10px 0px 0px 80px;
	border:none;
	background:none;
	padding:0;
	cursor:pointer;
	}

.video-btn img{
	display:block;
	transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
	}

/* hover (PC only) -------------*/
@media (hover: hover){
	.video-btn:hover img{
		transform:translateY(5px) scale(1.00);
		opacity:1.00;
/*		filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));*/
		}
	}

/* active (PC only) ------------*/
.video-btn:active img{
	transform:translateY(0px) scale(1.00);
	opacity:1.00;
	filter:drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
	}

/* focus (Keyboard) ------------*/
.video-btn:focus-visible img{
	outline:3px solid #0099ff;
	transform:translateY(5px);
	}

/* display ---------------------*/
.modal[hidden] {
	display:none;
	}

.modal{
	position:fixed;
	inset:0;
	z-index:1000;
	}

/* display_background ----------*/
.overlay{
	position:absolute;
	inset:0;
	background:rgba(255,255,255,0.85);
	backdrop-filter:blur(3px);
	}

/* display_window --------------*/
.modal-content{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%) scale(0.95);
	background:#ffffff;
	margin:0px 0px 0px 0px;
	padding:50px 0px 0px 25px;
  display: flex;         /* ←追加 */
  flex-direction: column;
	width:840px;
	height:600px;
	max-width:90%;
	border-radius:10px;

/* display_dropshadow ----------*/
	filter:drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
	opacity:0;
	transition:all 0.25s ease;
	overflow:hidden;
	}


.modal-body {
  width: 100%;
  height: 100%;
  flex: 1;               /* ←これが超重要 */
}

.external-frame {
  width: 100%;
  height: 100%;
  display: block; /* ←これも効く */
}


/* display_position ------------*/
.modal.active .modal-content{
	transform:translate(-50%, -50%) scale(1);
	opacity:1;
	}

/* display_close_button --------*/
.close-btn{
	position:absolute;
	top:10px;
	right:15px;
	background:#3388aa;
	color:#ffffff;
	border:none;
	padding:6px 12px;
	cursor:pointer;
	}

/* display_movie ---------------*/
.video-wrapper{
	position:relative;
	padding-top:56.25%;
width:820px;
height:600px;
	}

.video-wrapper iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	}

/* display_no-scroll -----------*/
body.no-scroll{
	overflow:hidden;
	}