:root {
	--mmScrlOffset: 0px;
}

.mmWrap {
	--mmPad: 10vw;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10010;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;
	opacity: 0;
	transition: .2s opacity;
	background: rgba(1,104,184,0.8);
}

.mmWrap.-ready {
	opacity: 1;
}

.mmInner {
	position: relative;
	width: 100%;
	max-height: fit-content;
	padding: var(--mmPad);
	overflow: auto;
}

@media print, screen and (max-width: 769px) {
	.mmInner {
		padding: 10vw 5vw;
	}
}

@media print, screen and (min-height: 1075px) and (min-width: 1000px) {
	.mmInner {
		padding-top: calc((100vh - 800px) / 2);
		padding-bottom: calc((100vh - 800px) / 2);
	}
}

.mmScreen {
	position: fixed;
	left: 0;
	top: 0;
	width: calc(100% - 17px);
	height: 100%;
}

.mmCnt {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.2);
}

.mmCnt>img:only-child {
	max-width: 100%;
	max-height: calc(100vh - 8vw);
}

.mmWrap[data-mm-type="iframe"] iframe {
	width: 100vw;
	max-width: 100%;
	height: calc(100vh - var(--mmPad) * 2);
}

@media print, screen and (min-height: 1075px) and (min-width: 1000px) {
	.mmWrap[data-mm-type="iframe"] iframe {
		height: 800px;
	}
}

.mmWrap[data-mm-type="YouTube"] .mmCnt {
	width: 100%;
	background: unset;
}

.mmWrap[data-mm-type="YouTube"] iframe {
	width: 100%;
	aspect-ratio: 16/9;
}

.mmCaption {
	position: relative;
	color: #fff;
}

.mmCaption:not(:empty) {
	margin-top: 1rem;
	text-align: center;
}

.mmClose,
.mmPrev,
.mmNext {
	all: unset;
	position: fixed;
	overflow: hidden;
	border-radius: 50%;
	white-space: nowrap;
	text-indent: 100%;
	cursor: pointer;
}

.mmClose {
	right: 11vw;
	top: 11vw;
	height: 30px;
	width: 30px;
	background-color: #0068b7;
	border-radius: 50%;
}

@media print, screen and (max-width: 769px) {
	.mmClose {
		right: 7vw;
		top: 11vw;
		height: 30px;
		width: 30px;
	}
}

@media print, screen and (min-height: 1075px) and (min-width: 1000px) {
	.mmClose {
		right: 11vw;
		top: calc((100vh - 800px) / 2 + 1vw);
		height: 30px;
		width: 30px;
	}
}

.mmClose:before,
.mmClose:after {
	content: "";
	display: block;
	width: 50%;
	height: 2px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: #fff;
	translate: -50% -50%;
}

.mmClose:before {
	rotate: 45deg;
}

.mmClose:after {
	rotate: -45deg;
}

.mmPrev,
.mmNext {
	top: 50%;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #888b;
}

.mmPrev:before,
.mmNext:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 35%;
	aspect-ratio: 1/1;
	border: #fff solid;
	border-width: 3px 0 0 3px;
	translate: -50% -50%;
}

.mmPrev {
	left: 1.5vw;
}

.mmPrev:before {
	rotate: -45deg;
	margin-left: 2px;
}

.mmNext {
	right: calc(1.5vw + var(--mmScrlOffset));
}

.mmNext:before {
	rotate: 135deg;
	margin-left: -2px;
}