@charset "UTF-8";

.add-top-mv {
	position: relative;
	margin-bottom: 50px;
	overflow: hidden;
}
.add-top-mv::before {
	content: "";
	display: block;
	padding-top: 55%;
}
.add-top-mv-progress .add-top-mv-pc.dot::after,
.add-top-mv-progress .add-top-mv-sp.dot::after {
	display: block; 
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .1);
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC);
	background-size: 2px;
	content: "";
	opacity: .5;
	z-index: 20; 
}
.add-top-mv .add-top-mv-img-first,
.add-top-mv .add-top-mv-video,
.add-top-mv .add-top-mv-img-end {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: .3s;
}
.add-top-mv .add-top-mv-img-first {
	z-index: 10;
}
.add-top-mv .add-top-mv-video {
	z-index: 5;
}
.add-top-mv .show {
	opacity: 1;
}
.add-top-mv .add-top-mv-img-end.show {
	z-index: 15;
}


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

.add-top-mv {
	margin-bottom: 0;
}
.add-top-mv::before {
	padding-top: 170%;
}

}