@charset "UTF-8";
/* ------------------------------------
	メインビジュアル領域 ムービー／カルーセル切替
--------------------------------------*/
#mvArea {
	position: relative;
}

/*movie*/
#movie {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding-top: 56.25%;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

#movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*carousel*/
#carousel {
	position: relative;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

/*close btn*/
.jy-modalCloseBtn {
	position: absolute;
	top: -20px;
	right: -20px;
	z-index: 200001;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #000000;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;

	-webkit-appearance: none;

	   -moz-appearance: none;

	        appearance: none;
}

.jy-modalCloseBtn::before {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	content: "";
	background: url(/railway/joyful/img/icon_close_wh.svg) no-repeat;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.jy-modalCloseBtn:hover {
	border-color: #000000;
	background: #ffffff;
}

.jy-modalCloseBtn:hover::before {
	background: url(/railway/joyful/img/icon_close.svg) no-repeat;
}

.jy-closeMvBtn {
	display: block;
	position: absolute;
	top: -20px;
	right: -20px;
	z-index: 10;
	width: 60px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 2px solid #ffffff;
	border-radius: 50%;
	background: #000000;
	cursor: pointer;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;

	-webkit-appearance: none;

	   -moz-appearance: none;

	        appearance: none;
}

.jy-closeMvBtn::before {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	content: "";
	background: url(/railway/joyful/img/icon_close_wh.svg) no-repeat;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
}

.jy-closeMvBtn:hover {
	border-color: #000000;
	background: #ffffff;
}

.jy-closeMvBtn:hover::before {
	background: url(/railway/joyful/img/icon_close.svg) no-repeat;
}

.is-hideMovie .jy-closeMvBtn {
	display: none;
}

#home .jy-closeMvBtn {
	top: -20px;
	right: 0;
}

@media only screen and (max-width: 950px) {
	.jy-closeMvBtn {
		top: -20px;
		right: 0;
	}
}

/*SP*/
@media only screen and (max-width: 640px) {
	.jy-closeMvBtn {
		width: 40px;
		height: 40px;
	}
	.jy-closeMvBtn::before {
		width: 20px;
		height: 20px;
	}
}

/*表示制御*/
#mvArea {
	padding-top: 56.25%;
}

#carousel {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#mvArea.is-hideMovie {
	overflow: visible;
	padding-top: 0;
}

#mvArea.is-hideMovie #carousel {
	opacity: 1;
	position: relative;
}

#mvArea.is-hideMovie #movie {
	display: none;
}

#mvArea.no-movie {
	overflow: visible;
	padding-top: 0;
}

#mvArea.no-movie #carousel {
	opacity: 1;
	position: relative;
}

#mvArea.no-movie #movie {
	display: none;
}

#mvArea.no-movie .jy-closeMvBtn {
	display: none;
}