html, body {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	background: #CCC;
}
body {
	/* text選択回避 */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.wrap {
	position: absolute;
	height: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #EEEAD9;
	border: solid 6px #fff;
	margin: 12px;
	/*padding: 80px;*/
	overflow: hidden;
}
.canvas_max {
	width: 100%;
	height: 100%;
    overflow: scroll;
    padding-bottom: 17px;
    padding-right: 17px;
}

/* cursor: grab */
.canvas_max {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.canvas_max.grabbing {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.canvas_wrap {
	margin: 0 auto;
	display: none;
}
.pdf_canvases {
	float: left;
	overflow: hidden;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
}
#pdf_canvas_left {
}
#pdf_canvas_right {
}
.pdf_canvases.inv {
	visibility: hidden;
}
.now_loading {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #fff;
	opacity: 0.4;
}
.now_loading span {
	position: absolute;
	top: 40%;
	width: 100%;
	color: #999;
	display: block;
	font-size: 0.9em;
	text-align: center;
}

/* -------------------------- page-control -------------------------- */
.pctl {
	z-index: 50;
	cursor: pointer;
}
.pctl img {
	opacity: 0.6;
	cursor: pointer;
}
.pctl img:hover {
	opacity: 1;
	cursor: pointer;
}
.pctl.pending img {
	opacity: 0.2;
	cursor: wait;
}
.pctl.pending img:hover {
	opacity: 0.2;
}
.pctl img.disabled {
	opacity: 0.1;
	cursor: not-allowed;
}
.pctl img.disabled:hover {
	opacity: 0.1;
}
.pctl .menu {
	position: absolute;
	top: 20px;
	left: 20px;
}
.pctl .close {
	position: absolute;
	top: 20px;
	right: 20px;
}
.pctl .prev {
	position: absolute;
	left: 0;
	top: 48%;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.pctl .next {
	position: absolute;
	right: 0;
	top: 48%;
	box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.3);
}
.pctl .zoomin {
	position: absolute;
	right: 60px;
	bottom: 20px;
}
.pctl .zoomtext {
    bottom: 6px;
    font-size: 0.6em;
    position: absolute;
    right: 46px;
    text-align: right;
    color: #666;
}
.pctl .zoomout {
	position: absolute;
	right: 12px;
	bottom: 20px;
}
.pctl .page {
	position: absolute;
	bottom: 15px;
	left: 0;
	background: #fff;
	box-shadow: 0 0 2px #999;
	border-radius: 20px;
	width: 100px;
	height: 30px;
	font-size: 0.8em;
	text-align: center;
	line-height: 30px;
}


/* -------------------------- menu -------------------------- */ 
.menu_window {
	position: fixed;
	background: #fff;
	left: 0;
	/* top: 12px;
	bottom: 12px; */
	top: 0;
	height: 100%;
	box-shadow: 3px 2px 5px rgba(0, 0, 0, 0.6);
	z-index: 100;
	width: 0;
	transition: width 0.3s ease-out;
}
.menu_window.open {
	transition: width 0.3s ease-out;
	width: 320px;
}
.menu_window .tool_bar {
	position: absolute;
	right: 0;
	top: 0;
	width: 60px;
	height: 100%;
	border-left: solid 1px #E5E5E5;
}
.menu_window .thumbnails {
	position: absolute;
	right: 60px;
	left: 0;
	top: 0;
	height: 100%;
	overflow-y: auto; 
}
.menu_window .tool_bar img {
	position: absolute;
	right: 18px;
	cursor: pointer;
}
.menu_window .tool_bar .menu_close {
	top: 30px;
}
.menu_window .tool_bar .menu_download {
	top: 45%;
}
.menu_window .tool_bar .menu_print {
	top: 55%;
}
.menu_window .thumbnails .thumb {
	border: solid 10px #f2f2f2;
	width: 142px;
	height: 100px;
	margin-top: 42px;
	margin-left: 50px;
	margin-right: 42px;
	position: relative;
	cursor: pointer;
}
.menu_window .thumbnails .thumb:hover {
	transition: border-color 0.2s;
	border-color:#e5e5e5;
}
.menu_window .thumbnails .thumb.active {
	border-color:#ccc;
}
.menu_window .thumbnails .thumb canvas {
	width: 50%;
	height: 100%;
}
.menu_window .thumbnails .thumb span {
	position: absolute;
	bottom: -30px;
	font-size: 0.7em;
	color: #333;
}
.menu_window .thumbnails .thumb span.inv {
	visibility: hidden;
}
.menu_window .thumbnails .thumb .thumb_page_left {
	left: 25%;
}
.menu_window .thumbnails .thumb .thumb_page_right {
	right: 25%;
}
.dummy {
	display: none;
	width: 0;
	height: 0;
}

/* -------------------------- PC以外 -------------------------- */
@media screen and (max-width: 640px) {
    #pdf_canvas_left,
    .menu_window .thumbnails .thumb .thumb_canvas_left, 
    .menu_window .thumbnails .thumb .thumb_page_left {
    	display: none;
    }
    .wrap {
    	margin: 0;
    	padding: 12px;
    }
	.canvas_max {
	    overflow: auto;
	    padding-bottom: 0;
	    padding-right: 0;
	}
	.pctl * {
		opacity: 0.8;
	}

	.menu_window.open {
		width: 250px;
	}
	.menu_window .thumbnails .thumb {
		width: 71px;
	}
	.menu_window .thumbnails .thumb canvas {
		width: 100%;
	}
	.menu_window .thumbnails .thumb .thumb_page_right {
		left: 45%;
	}
}