.magazine-viewport{
	position: relative;
}

.magazine-viewport .container{
	position: absolute;
	top: 50%;
	left: 50%;
}

.magazine-viewport .magazine{
	/* width: 984px;
	height: 700px; */
	width: 80vw;
	height: 57vw;
	transform: translateY(-50%) translateX(-50%);
}

_:-ms-lang(x)::-ms-backdrop, .magazine-viewport .magazine {
	top: 0!important;
	left: 0!important;
}

.magazine .page{
	box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.magazine-viewport .page img{
	max-width: 100%;
	-webkit-touch-callout: none;
	user-select: none;
	cursor: pointer!important;
}

.magazine .even .gradient{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:linear-gradient(left, rgba(0,0,0,0) 95%, rgba(0,0,0,0.2) 100%);
}

.magazine .odd .gradient{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image:linear-gradient(right, rgba(0,0,0,0) 95%, rgba(0,0,0,0.15) 100%);
}

/* .magazine-viewport .loader{
	background-image:url(../pics/loader.gif);
	width:22px;
	height:22px;
	position: absolute;
	top:280px;
	left:219px;
} */

.magazine-viewport .shadow{
	box-shadow:0 0 20px #ccc;
}

/* .exit-message{
	position: absolute;
	top:10px;
	left: 0;
	width: 100%;
	height:40px;
	z-index:10000;
}

.exit-message > div{
	width:140px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
} */

.zoom-icon{
	position: absolute;
	z-index:1000;
	width:22px;
	height:22px;
	top:10px;
	right:10px;
	background-image:url(/my/uoplus/book/images/common/zoom-icons.png);
	background-size:88px 22px;
}

.zoom-icon-in{
	background-position:0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
	background-position:-22px 0;
	cursor: pointer;
}

.zoom-icon-out{
	background-position:-44px 0;
}

.zoom-icon-out.zoom-icon-out-hover{
	background-position:-66px 0;
	cursor: pointer;
}

.bottom{
	position: absolute;
	left: 0;
	bottom: 15px;
	width: 100%;
}

.turnjs-slider{
	width: 600px;
	height: 8px;
	margin: 0 auto;
	background: rgba(0,0,0, 0.2);
	border-radius: 5px;
}





.ui-state-disabled {
	cursor: default;
}

.turnjs-slider .ui-widget-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.turnjs-slider .ui-slider {
	position: relative;
	text-align: left;
}

.turnjs-slider .ui-slider-handle{
	position: absolute;
	z-index:0;
	width: 10%; /* 100 / (総ページ数 + 2P) */
	height: 8px;
	display:block;
	cursor: pointer;
	border-radius: 5px;
	background-color:black;
	opacity:0.2;
	transition: opacity 0.2s;
}

.turnjs-slider .ui-slider-horizontal {
	height: 8px;
	width: calc(100% - 9.5%);
}

.turnjs-slider .ui-slider-horizontal .ui-slider-handle {
	margin-left: 0;
	margin-top:-1px;
}

/* Interaction states
----------------------------------*/
.turnjs-slider .ui-state-hover{
	opacity:0.4;
}

.turnjs-slider .ui-state-active{
	opacity:1;
}



/* next prevボタン */
.magazine-viewport .next-button,
.magazine-viewport .previous-button{
	width: 44px;
	height: 100%;
	position:absolute;
	top:0;
}

.magazine-viewport .next-button{
	right: -44px;
	border-radius: 0;
	z-index: 99999999;
}

.magazine-viewport .previous-button{
	left: -44px;
	border-radius: 0;
	z-index: 99999999;
}

.magazine-viewport .previous-button-hover,
.magazine-viewport .next-button-hover{
	background-color:rgba(0,0,0, 0.2);
}

.magazine-viewport .previous-button-down,
.magazine-viewport .next-button-down{
	background-color:rgba(0,0,0, 0.4);
}

.magazine-viewport .previous-button-hover::after,
.magazine-viewport .previous-button-down::after,
.magazine-viewport .next-button-hover::after,
.magazine-viewport .next-button-down::after{
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-50%) translateX(-50%);
	background-image:url(/my/uoplus/book/images/common/icon_arrowR.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 21px;
	height: 35px;
}

.magazine-viewport .previous-button-hover::after,
.magazine-viewport .previous-button-down::after{
	background-image:url(/my/uoplus/book/images/common/icon_arrowL.svg);
}

.magazine-viewport .next-button-hover::after,
.magazine-viewport .next-button-down::after{
	background-image:url(/my/uoplus/book/images/common/icon_arrowR.svg);
}

/* .magazine-viewport .previous-button-hover,
.magazine-viewport .previous-button-down{
	background-image:url(images/common/icon_arrowL.svg);
	background-position: center center;
	background-repeat: no-repeat;
}

.magazine-viewport .next-button-hover,
.magazine-viewport .next-button-down{
	background-image:url(images/common/icon_arrowR.svg);
	background-position: center center;
	background-repeat:no-repeat;
} */

.magazine-viewport .zoom-in .next-button,
.magazine-viewport .zoom-in .previous-button{
	display:none;
}



/* @media screen */
@media screen and (max-width: 1024px){
	.magazine-viewport .container{
		position: absolute;
		top: 50%;
		left: 50%;
	}

	.magazine-viewport .magazine{
		width: 100vw;
		height: 142.400vw; /* 375 * 100% = 375       2185:3110 比率 375:534        534を375のvw = 534vw */
		top: 0!important;
		left: 0!important;
		transform: translateY(-50%) translateX(-50%);
	}

	.magazine .page{
		box-shadow:0 0 5px rgba(0,0,0,0.2);
	}

	.magazine-viewport .shadow{
		box-shadow:0 0 5px #ccc;
	}

	.turnjs-slider{
		width: 300px;
		height: 8px;
		margin: 0 auto;
		background: rgba(0,0,0, 0.2);
		border-radius: 5px;
	}

	.zoom-icon{
		display: none;
	}

	.magazine-viewport .next-button{
		right: 0;
	}

	.magazine-viewport .previous-button{
		left: 0;
	}
}
/* @media screen */
/* @media screen and (max-width: 639px){
	.magazine-viewport .container{
		position: absolute;
		top: 0%;
		left: 0%;
	}

	.magazine-viewport .magazine{
		width: 100vw;
		height: 142.400vw;
		top: 10vw!important;
		left: 0!important;
		transform: translateY(0) translateX(0);
	}

	.magazine .page{
		box-shadow:0 0 5px rgba(0,0,0,0.2);
	}
	.magazine-viewport .shadow{
		box-shadow:0 0 5px #ccc;
	}
	.turnjs-slider{
		width: 300px;
		height: 8px;
		margin: 0 auto;
		background: rgba(0,0,0, 0.2);
		border-radius: 5px;
	}
} */