/* ytplayer
----------------------------------------------- */

.ytplayer {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 15;
}
.ytplayer__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
}
.ytplayer__mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 1;
}
.ytplayer__close {
	position: absolute;
	top: 0;
	right: 0;
	width: 80px;
	height: 80px;
	background-color: #000;
	cursor: pointer;
	z-index: 2;
}
.ytplayer__close span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -20px 0 0 -20px;
	width: 40px;
	height: 40px;
	transform: rotate(45deg);
}
.ytplayer__close span:before,
.ytplayer__close span:after {
	display: block;
	content: "";
	position: absolute;
	background-color: #fff;
}
.ytplayer__close span:before {
	top: 0;
	left: 20px;
	width: 1px;
	height: 40px;
}
.ytplayer__close span:after {
	top: 20px;
	left: 0;
	width: 40px;
	height: 1px;
}

.ytplayer__movie {
	background-color: #000;
}

/* loadmotion */

.ytplayer .loadmotion {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
}


/* pc
----------------------------------------------- */

@media print, screen and (min-width:1000px) {


	/* ytplayer
	----------------------------------------------- */

	.ytplayer__close span:before,
	.ytplayer__close span:after {
		transition-property: top, left, width, height;
		transition-duration: 0.25s;
		transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
	}

	/* hover */

	.ytplayer__close:hover span:before,
	.ytplayer__close:hover span:after {
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	.ytplayer__close:hover span:before {
		top: 10px;
		height: 20px;
	}
	.ytplayer__close:hover span:after {
		left: 10px;
		width: 20px;
	}

}


/* mobile
----------------------------------------------- */

@media only screen and (max-width:768px) {


	/* ytplayer
	----------------------------------------------- */

	.ytplayer__close {
		width: 60px;
		height: 60px;
	}
	.ytplayer__close span {
		margin: -15px 0 0 -15px;
		width: 30px;
		height: 30px;
	}
	.ytplayer__close span:before {
		left: 15px;
		height: 30px;
	}
	.ytplayer__close span:after {
		top: 15px;
		width: 30px;
	}


}