@charset "utf-8";

/* Reset Css
----------------------------------------------------------- */
body, div,
dl, dt, dd,
ul, ol, li, 
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, 
form, fieldset, input, textarea,
th, td {  
	margin: 0; 
	padding: 0; 
} 
table { 
	border-collapse: collapse; 
	border-spacing: 0; 
} 
fieldset, img {  
	border: 0; 
} 
address, caption, cite, code, dfn,
em, strong, th, var { 
	font-style: normal; 
	font-weight: normal; 
} 
ol, ul { 
	list-style: none; 
} 
caption, th { 
	text-align: left; 
} 
h1, h2, h3, h4, h5, h6 { 
	font-size: 100%; 
	font-weight: normal; 
} 
q:before, q:after { 
	content:''; 
} 
abbr, acronym { 
	border: 0; 
}

/* html5 fix 
------------------------------------------------------------ */
article, aside, figure, figcaption, footer, header,
hgroup, nav, section, summary { display: block; }


/* clearfix 
------------------------------------------------------------ */
/* Modern browsers like Firefox, Safari, Opera */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
/* IE 7 and MacIE*/
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */


/* Common Setteing
----------------------------------------------------------- */
/* full screen */
html,
body {
	height: 100%;
}

/* body */
body {
 	background-color:#222 ;
	line-height: 1.2;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	font-size: 84%;
}
/* Link Color */
a			{ text-decoration: none;}
a:link		{ color: #888;}
a:visited	{ color: #888;}
a:hover		{ color: #ccc; text-decoration: underline;}
a:active	{ color: #888;}

/* font-size fix for textarea */
textarea { font-size: 84%; }

/* bottom space fix for img */
img { vertical-align: bottom; }


/* hr */
hr { 
	clear: both;
	display: none;
	overflow: hidden;
	height: 1px;
	margin: 9px 0 10px;
	border: solid #dbdad5;
	border-width: 1px 0 0 0;
}

/* jastify fix */
p {	text-align: justify;}

#scrwindow {
	height: 100%;
	width: 100%;
	overflow: hidden;
}
/* sub screen
----------------------------------------------------------- */
#sub_scrwindow {
    z-index: 100;
    display:none;
	position: absolute; 
    top: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	/*
    min-width: 980px;
	min-height: 500px;
    */
}
#sub_scrwindow .mask_layer{
    z-index: 9990;
}


/* sub_contents_frame 
----------------------------------------------------------- */
#sub_contents_frame {
	position: relative; 
    z-index: 9999;
	/*
    min-width: 830px;
    */
	padding: 0px 75px;
	height:100%;
	overflow-y:auto;
}


/* page
----------------------------------------------------------- */
#page {
	z-index: 1;
	position: absolute;
	width: 100%;
	height: 100%;
	margin-bottom: -50px;
}
#page .spacer {
	width: 100%;
	height: 50px;
}

#stage {
	display: block;
	position: relative;
	overflow: hidden;
	height: 100%;
	margin: 0px;
	padding: 0px;
}
#canvas_base {
	margin-top:0px;
}
#canvas {
	z-index: 15;
	position: relative;
	display: block;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
}
#canvas_base canvas{
    z-index: 10; position: absolute; padding: 0px; margin: 0px;
}
/* close - back */
.close {
	padding: 10px 0 0;
	height: 30px;
}


.menu_back {
	float: right;
	width: 75px;
	height: 28px;
}
.menu_back a {
	display: block;
	/*\*/overflow: hidden;/**/
	width: 100%;
	height: 100%;
	background-image: url(../image/cmn/btn_ctrl.png);
	background-repeat: no-repeat;
	background-position: 0 -28px;
	text-indent: -9999px;
}
* html .menu_back a {
	background-image: url(../image/cmn/btn_ctrl.gif);
}
.menu_back a:hover {	background-position: -75px -28px;}


#row_page{
	padding: 0px;
	margin: 0px auto;
	display: block;
	z-index: 15;
	position: relative;
	overflow: hidden;
	text-align:center;
}
#row_page .page_left,#row_page .page_right{
    display:none;
	padding: 0px;
	margin: 0px;
	display: block;
	z-index: 15;
	position: relative;
	overflow: hidden;
	float:left;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url(../image/cmn/spinner_32.gif); 
    background-color: transparent;
}
#row_page .page_right{
	float:right;
}
#row_page img{
	padding: 0px 0px;
	margin: 0px 0px;
	border: 0px;
}
#row_page .bookmark {
    display:none;
	position: absolute;
	top: -1px;
	width: 26px;
	height: 64px;
	background-image: url(../image/cmn/bookmark_thumb.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}
* html #row_page .bookmark {
	background-image: url(../image/cmn/bookmark_thumb.gif);
}

#row_page .page_left  .bookmark{
	left: 10px;
}
#row_page .page_right  .bookmark{
	right: 10px;
}
#row_page .hit_area {
	position: absolute;
	padding: 0px;
	margin: 0px;
	display: block;
	z-index: 999;
	overflow: hidden;
	top:0px;
	cursor:pointer;
	border:1px solid #0f0;
	background-color: #888;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
}
#row_page  .page_left  .hit_area{
	left: 0px;
}
#row_page  .page_right  .hit_area{
	right: 0px;
}

/* ctrl_header
----------------------------------------------------------- */
#ctrl_header {
	z-index: 999;
	position: absolute;
}
#ctrl_header .leftpage {
	float: left;
	cursor: pointer;
	display: none;
}
#ctrl_header .rightpage {
	float: right;
	cursor: pointer;
	display: none;
}
#ctrl_header ul li {
	margin-top: 24px;
	float: left;
	width: 75px;
	height: 28px;
}
#ctrl_header ul li a {
	display: block;
	/*\*/overflow: hidden;/**/
	width: 100%;
	height: 100%;
	background-image: url(../image/cmn/btn_ctrl.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}
* html #ctrl_header ul li a {
	background-image: url(../image/cmn/btn_ctrl.gif);
}
#ctrl_header .leftpage .menu_bookmark a {	background-position: 0 -56px;}
#ctrl_header .leftpage .menu_zoom a {		background-position: 0 0;}

#ctrl_header .leftpage .menu_bookmark a:hover {	background-position: -75px -56px;}
#ctrl_header .leftpage .menu_zoom a:hover {		background-position: -75px 0;}

#ctrl_header .rightpage .menu_bookmark a {	background-position: 0  -84px;}
#ctrl_header .rightpage .menu_zoom a {		background-position: 0 0;}

#ctrl_header .rightpage .menu_bookmark a:hover {	background-position: -75px  -84px;}
#ctrl_header .rightpage .menu_zoom a:hover {		background-position: -75px 0;}


/* ctrl_footer
----------------------------------------------------------- */
#ctrl_footer {
    display:none;
	z-index: 11;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-image: url(../image/cmn/menu_bgrep.gif);
	background-repeat: repeat-x;
	background-position: left top;
}
#ctrl_footer_inner {
	position: relative;
	min-width: 300px;
	width: 100%;
	height: 50px;
}

#navi {
	width: 460px;
	height: 50px;
	margin: 0 auto;
	padding: 0px;
	padding-right: 1px;
	cursor:pointer;
}
* html #navi {
	width: 460px;
}

#navi li {
	float: left;
	width: 60px;
	height: 50px;
	padding-left: 2px;
	background-image: url(../image/cmn/separator.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#navi li a {
	display: block;
	/*\*/overflow: hidden;/**/
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	text-indent: -9999px;
}
.navi_left li a {
	background-image: url(../image/cmn/btn_navi_left_binding.gif);
}
.navi_right li a {
	background-image: url(../image/cmn/btn_navi_right_binding.gif);
}
#navi li#menu_page_jump {	width: 80px;}

#navi li#menu_index_page a {	background-position: 0 0;}
#navi li#menu_list_page a {		background-position: -60px 0;}
#navi li#menu_page_top a {		background-position: -120px 0;}
#navi li#menu_page_prev a {		background-position: -180px 0;}
#navi li#menu_page_next a {		background-position: -240px 0;}
#navi li#menu_page_last a {		background-position: -300px 0;}
#navi li#menu_auto_play a {		background-position: -360px 0;}
#navi li#menu_print a {			background-position: -500px 0;}
#navi li#end_dummy a {			background: none;}
#navi li#end_dummy {			width:1px;}

#navi li#menu_index_page a:hover {	background-position: 0 -50px;}
#navi li#menu_list_page a:hover {	background-position: -60px -50px;}
#navi li#menu_page_top a:hover {	background-position: -120px -50px;}
#navi li#menu_page_prev a:hover {	background-position: -180px -50px;}
#navi li#menu_page_next a:hover {	background-position: -240px -50px;}
#navi li#menu_page_last a:hover {	background-position: -300px -50px;}
#navi li#menu_auto_play a:hover {	background-position: -360px -50px;}
#navi li#menu_print a:hover {		background-position: -500px -50px;}

#navi li#menu_auto_play.now_playing a {	background-position: -360px -50px;}


#pager_bar_pagelist {
	z-index: 10;
	position: absolute;
	display: block;
	float: none;
	width: 80px;
	height: 46px;
	margin: 0;
	padding: 0;
	background-image: url(../image/cmn/btn_navi_left_binding.gif);
	background-repeat: no-repeat;
	text-align: center;
}
* html #pager_bar_pagelist {
	width: 80px;
	height: 40px;
	padding-top: 4px;
}

#pager_bar_pagelist {	background-position: -420px 0;}
#pager_bar_pagelist:hover {	background-position: -420px -50px;}

#pager_bar_pagelist select {
	height: 20px;
	margin: 8px auto;
	padding: 1px 2px;
	text-align: center;
}
* html #pager_bar_pagelist select {
	margin: 0px auto;
	padding: 0px 2px;
}
#page_title {
	position: absolute;
	left : 15px;
	top: 0;
	width: 140px;
	height: 12px;
	margin-top: 8px;
	padding: 8px;
	background-image: url(../image/cmn/title_bg.gif);
	background-repeat: no-repeat;
	background-position: left top;
	line-height: 1;
	font-size: 12px;
	overflow:hidden;
}
#page_title span{
	height: 12px;
	width: 140px;
	overflow:hidden;
    display:block;
    white-space:nowrap;
}
#poweredby {
	position: absolute;
	right : 0;
	top: 0;
	height: 12px;
	margin: 2px 0;
	padding: 17px;
	background-image: url(../image/cmn/separator.gif);
	background-repeat: no-repeat;
	background-position: left center;
	line-height: 1;
	font-size: 12px;
	color:#ccc;
}


/* print_area
----------------------------------------------------------- */
.mask_layer {
	z-index: 9900;
	position: absolute;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: #111111;
	filter: alpha(opacity=90);
	-moz-opacity: 0.90;
	opacity: 0.90;
}
#print_layer {
	z-index: 9999;
	position: absolute;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
}
#print_area {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -110px;
	margin-left: -150px;
	width: 298px;
	height: 218px;
	background-color: #080808;
	border: 1px solid #707070;
}
#print_area #select_area {
	width: 260px;
	margin: 9px auto;
}
#print_area #select_area li {
	padding-top: 6px;
}
#print_area #print_all {
	width: 260px;
}
#print_area #print_left {
	float: left;
	width: 125px;
}
#print_area #print_right {
	float: right;
	width: 125px;
}
#print_area #select_area li a {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #707070;
	background-color: #4d4d4d;
}
#print_area #select_area li.select a,
#print_area #select_area li a:hover {
	border: 1px solid #219ec5;
}


#ctrl_print {
	clear: both;
	position:absolute;
	bottom:4px;
	width: 260px;
	margin: 0 14px;
	padding: 6px;
}
#ctrl_print li {
    position:relative;
	width: 75px;
	height: 28px;
}
#ctrl_print li.cancel {float: left;}
#ctrl_print li.print {	float: right;}

#ctrl_print li a {
    position:relative;
	display: block;
	/*\*/overflow: hidden;/**/
	width: 75px;
	height: 25px;
	background-image: url(../image/cmn/btn_ctrl.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
}
* html #ctrl_print li a {
	background-image: url(../image/cmn/btn_ctrl.gif);
}
#ctrl_print li.cancel a {	background-position: 0 -112px;}
#ctrl_print li.print a {	background-position: 0 -140px;}

#ctrl_print li.cancel a:hover {	background-position: -75px -112px;}
#ctrl_print li.print a:hover {	background-position: -75px -140px;}

#print_page{
	position: relative;
	display: none;
	width: 1024px;
}
#print_page .page_left,#print_page .page_right{
	position: relative;
	display: block;
	float: left;
}

#print_page img,#print_page img{
	width: 500px;
}


/* contents header 
----------------------------------------------------------- */
/* contents navi */
#contents_navi {
	float: left;
	margin: 10px 0 0;
}
#contents_navi ul {
	margin: 0;
}
#contents_navi li {
	float: left;
	width: 75px;
	height: 33px;
	margin: 0 5px 0 0;
}
#contents_navi a {
	display: block;
	/*\*/overflow: hidden;/**/
	width: 75px;
	height: 24px;
	padding: 8px 0 0;
	background-image: url(../image/cmn/btnbg.png);
	background-repeat: no-repeat;
	background-position: left top ;
	text-align: center;
	font-size: 12px;
	color: #ababab;
}
* html #contents_navi a {
	background-image: url(../image/cmn/btnbg.gif);
	background-color:#333;
}
#contents_navi a:hover ,
#contents_navi a.active{
	background-position: -75px 0;
	color: #FFFFFF;
}

/* searcher */
#searcher {
	float: right;
	width: 400px;
	padding-top:4px;
}
#searcher p {
	margin: 20px 0 0;
	color: #FFFFFF;
}
#searcher div {
	position: relative;
	height: 34px
}
#keywords {
	position: absolute;
	left: 0;
	top: 0;
	width: 319px;  
	height: 34px;  
	background: #FFFFFF;  
	border: 1px solid #383838;
	border-right: none;  
	font-size: 16px;
	color: #000000;  
}
#btn_search {
	position: absolute;
	left: 320px;
	top: 0;
}
#btn_clear {
	position: absolute;
	left: 368px;
	top: 6px;
}

/* pager
----------------------------------------------------------- */
#pager {
	clear: both;
	border-top: 1px solid #656565;
	font-size: 1.2em;
	color: #ababab;
}

/* page number */
#num_page {
	float: left;
}
#num_page p {
	float: left;
	margin: 15px 0 0;
}
#num_page ul {
	display: inline;
	float: left;
	margin: 15px 0 0 25px;
}
#num_page ul li {
	display: inline;
	padding: 0 2px;
	font-size: 1.2em;
}
#num_page ul li a {
	color: #009bdb;
}

/* number of items */
#num_item {
	float: right;
	margin: 10px 0 0;
}

/* canvas */
#l_canvas{
    top:0px;
    width: 100%;
    z-index:100;
    position: absolute; 
    padding: 0px;
    margin:0px auto;
    display: none;
}
#l_canvas #l_canvasbase{
	display:block;
	width:100%;
    margin-top: 0px;
    height: 100%;
    background-repeat: no-repeat; 
    background-position: center center; 
    background-image: url(../image/cmn/spinner_32.gif); 
    background-color: transparent;
    cursor:move;
}
#l_canvasimg{
    overflow: hidden;
    display: block; 
    position: relative; 
    margin-top: 0px; 
    height: 100%;
}
#l_img{
    display: block;
    position: relative;
}

#l_canvas .close{
	background-color: #000;
}
/* peephole
----------------------------------------------------------- */
#zoommap_wind {
    z-index: 9999;
    position: absolute;
    right: 30px;
    bottom: 30px;
    background-color: #555;
    border: 1px solid #222;
    padding:15px 5px 5px 5px;
	filter: alpha(opacity=90);
	-moz-opacity:0.90;
	opacity:0.90;
	top:0px;
	left:0px;
	display:none;
}
#zoommap_wind img {
	background-repeat: no-repeat;
	background-position: left top;
    position: absolute;
    display:block;
	filter: alpha(opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
    padding:0px;
    margin:0px;
}
#zoommap_wind #zoom_targetgrid{
    position: relative;
    display:block;
    width: 100px;
    height: 100px;
    background-color: #444;
    padding:0px;
    margin:0px;
	filter: alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}


/* progressbar
----------------------------------------------------------- */
.ui-progressbar-value {
	background-image: url(../image/cmn/pbar.gif);
	height:16px;
}

#progressbar{
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

/* contents list 
----------------------------------------------------------- */
#contents_thumblist {
	clear: both;
}
#contents_thumblist ul {
	min-width: 860px;
	margin-left:-10px;
}
* html #contents_thumblist ul {
	width: 860px;
}
#contents_thumblist ul li div{
	position: relative;
	display:block;
	padding:0px 0;
	margin:0 auto;
	overflow:hidden;

}
#contents_thumblist ul li {
	position: relative;
	float: left;
	width: 150px;
	margin: 16px 10px 10px 10px;
}
#contents_thumblist ul li a.page_img {
	display: block;
	width: 128px;
	height: 96px;
	padding: 12px 10px;
	border: 1px solid #656565;
	background-color: #2a2a2a;
	background-image: url(../image/cmn/contents_listbg.gif);
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	vertical-align:middle;
	position:relative;
	overflow:hidden;
}
#contents_thumblist ul li a.page_img:hover {
	border: 1px solid #39aee5;
}
#contents_thumblist ul li a.page_img img.page_left,
#contents_thumblist ul li a.page_img img.page_right {
    max-width:64px;
    max-height:96px;
}
#contents_thumblist ul li a.page_img img.page_left {
	display:block;
    float:left;
}
#contents_thumblist ul li a.page_img img.page_right {
    float:right;
}
#page_thumb_base .bookmark ,
#contents_thumblist ul li .bookmark {
	position: absolute;
	left: 10px;
	top: -1px;
	width: 26px;
	height: 64px;
	background-image: url(../image/cmn/bookmark_thumb.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}
* html #page_thumb_base .bookmark ,
* html #contents_thumblist ul li .bookmark {
	background-image: url(../image/cmn/bookmark_thumb.gif);
}
#page_thumb_base .bookmarkr ,
#contents_thumblist ul li .bookmarkr {
	position: absolute;
	right: 10px;
	top: -1px;
	width: 26px;
	height: 64px;
	background-image: url(../image/cmn/bookmark_thumb.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}
* html #page_thumb_base .bookmarkr ,
* html #contents_thumblist ul li .bookmarkr {
	background-image: url(../image/cmn/bookmark_thumb.gif);
}
#page_thumb_base p ,
#contents_thumblist ul li p {
	line-height: 16px;
	height: 16px;
	overflow:hidden;
	margin: 0px 0 0;
	padding: 0 14px 0 0;
	background-image: url(../image/cmn/bullet_thumb.png);
	background-repeat: no-repeat;
	background-position: right 2px;
}
* html #page_thumb_base p ,
* html #contents_thumblist ul li p {
	background-image: url(../image/cmn/bullet_thumb.gif);
}
#contents_thumblist ul li p a.page_title {
	font-size: 10px;
	line-height: 16px;
	color: #ababab;
}
#contents_thumblist ul li p a.page_title span {
	padding-right: 5px; 
}


/* contents list 
----------------------------------------------------------- */
#contents_list {
	clear:both;
	padding: 4px 0 0;
	display: block;
}
#xcontents_list:after{
	content:'.';
	visibility:hidden;
	clear:both;
	height:1px;
	display:block;
}
#contents_list .column {
	float: left;
	width: 50%;
}

#contents_list ul {
	padding: 0 ;
	display: block;
	position: relative;
	width:100%;
}
#contents_list ul span{
    display:inline;
    position:relative;
}
#contents_list ul li {
	position: relative;
	display: block;
	float: left;
	width: 44%;
	height: 25px;
	margin: 11px 0 0 20px;
}
#page_list_base a ,
#contents_list ul li a {
	overflow:hidden;
	margin: 0px 0 0;
	display: block;
	height: 23px;
	padding: 0 20px 0 30px;
	background-color: #2a2a2a;
	border: 1px solid #656565;
	background-image: url(../image/cmn/bullet_list.png);
	background-repeat: no-repeat;
	background-position: right center;
	line-height: 23px;
	color: #ababab;
}
* html #page_list_base a ,
* html #contents_list ul li a {
	background-image: url(../image/cmn/bullet_list.gif);
}
#contents_list ul li a:hover {
	border: 1px solid #39aee5;
}

#page_list_base .bookmark ,
#contents_list ul li .bookmark {
	position: absolute;
	left: 4px;
	top: -1px;
	width: 13px;
	height: 32px;
	background-image: url(../image/cmn/bookmark_list.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}
* html #page_list_base .bookmark ,
* html #contents_list ul li .bookmark {
	background-image: url(../image/cmn/bookmark_list.gif);
}


/* contents list 
----------------------------------------------------------- */
#narrowContentsPageList {
	clear: both;
	padding: 19px 0 ;
	overflow:auto;
	height:auto;
}
#narrowContentsPageList ul {
	padding: 0 2% 0 2%;
}
#narrowContentsPageList ul span{
    position:relative;
}
#narrowContentsPageList ul li {
	position: relative;
	width: 100%;
	height: 25px;
	margin: 11px 0 0 0;
}
#narrowContentsPageList ul li a {
	overflow:hidden;
	margin: 0px 0 0;
	display: block;
	height: 23px;
	padding: 0 20px 0 30px;
	background-color: #2a2a2a;
	border: 1px solid #656565;
	background-image: url(../image/cmn/bullet_list.png);
	background-repeat: no-repeat;
	background-position: right center;
	line-height: 23px;
	color: #ababab;
}
* html #narrowContentsPageList ul li a {
	background-image: url(../image/cmn/bullet_list.gif);
}
#narrowContentsPageList ul li a.active {
	border: 1px solid #39aee5;
}

#narrowContentsPageList ul li .bookmark {
	position: absolute;
	left: 4px;
	top: -1px;
	width: 13px;
	height: 32px;
	background-image: url(../image/cmn/bookmark_list.png);
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: -9999px;
}
* html #narrowContentsPageList ul li .bookmark {
	background-image: url(../image/cmn/bookmark_list.gif);
}

/* html5 toolbar style
----------------------------------------------------------- */
@media screen and (max-width: 1000px) {
	.html5  ul#navi ,
	ul#navi {
		padding-left: 160px;
	}
}

.html5 #ctrl_footer {
	overflow: hidden;
}
.html5 #navi {
	width: auto;
	height: 50px;
	margin: 0 auto;
	padding: 0px;
	padding-right: 1px;
	cursor: default;
}
#navi li#menu_download {
	display: none;
}
#navi li.disable {
	opacity: 0.3;
}
.html5 #navi li:hover {
	background-color: rgba(255,255,255,0.2);
}
.html5 #navi li.disable:hover, #navi li.disable:hover {
	background-color: transparent;
}
#navi li.disable, #navi li.disable a {
	cursor: default;
}
.html5 #navi li {
	float: left;
	width: 60px;
	height: 50px;
	padding-left: 2px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.html5 #navi li a {
	display: block;
	text-indent: 0px;
	position: relative;
	width: 60px;
	height: 50px;
	background-image: none;
	opacity: 0.8;
}
.html5 #navi li a:hover:before, .html5 #navi li a:hover:after, .html5 #navi li a:hover {
	text-decoration: none;
}
.html5 #pager_bar_pagelist:after, .html5 #navi li a:before, .html5 #navi li a:after {
	margin: 0;
	padding: 0;
	border: 0;
	clear: both;
	display: block;
	position: absolute;
}
.html5 #navi li a:before {
	content: '';
	top: 4px;
	background-image: url(../image/cmn/btn_navi_base2.png);
	background-position: 0 0px;
	width: 32px;
	height: 32px;
	text-align: center;
	margin: 0 14px;
	background-size: auto 32px;
}
.html5 #pager_bar_pagelist:after, .html5 #navi li a:after {
	content: '';
	height: 12px;
	width: 60px;
	color: #fff;
	line-height: 11px;
	font-size: 11px;
	font-weight: 500;
	bottom: 3px;
	text-align: center;
}
.html5 #navi li#end_dummy {
	background: none;
	overflow: hidden;
}
.html5 #navi li#end_dummy a:hover, .html5 #navi li#end_dummy a {
	cursor: default;
}

.html5 #navi li#menu_index_page a:before {
	background-position: -160px 0;
}
.html5 #navi li#menu_list_page a:before {
	background-position: -192px 0;
}

.html5 #navi li#menu_page_top a:before {
	background-position: 0px 0;
}
.html5 #navi li#menu_page_prev a:before {
	background-position: -32px 0;
}
.html5 #navi li#menu_page_next a:before {
	background-position: -64px 0;
}
.html5 #navi li#menu_page_last a:before {
	background-position: -96px 0;
}
.html5 #navi li#menu_auto_play a:before {
	background-position: -128px 0;
}
.html5 #navi li#menu_print a:before {
	background-position: -256px 0;
}
.html5 #navi li#menu_download a:before {
	background-position: -224px 0;
}

.html5 #navi li#menu_page_jump span:after {
	content: 'Jump';
}

.html5 #navi li#menu_index_page a:after {
	content: 'Index';
}
.html5 #navi li#menu_list_page a:after {
	content: 'List';
}

.html5 #navi li#menu_page_top a:after {
	content: 'Top';
}
.html5 #navi li#menu_page_prev a:after {
	content: 'Prev';
}
.html5 #navi li#menu_page_next a:after {
	content: 'Next';
}
.html5 #navi li#menu_page_last a:after {
	content: 'Last';
}
.html5 #navi li#menu_auto_play a:after {
	content: 'Play';
}
.html5 #navi li#menu_print a:after {
	content: 'Print';
}
.html5 #navi li#menu_download a:after {
	content: 'Download';
}

.html5 .navi_right li#menu_page_top a:after {
	content: 'Last' !important;
}
.html5 .navi_right li#menu_page_prev a:after {
	content: 'Next' !important;
}
.html5 .navi_right li#menu_page_next a:after {
	content: 'Prev' !important;
}
.html5 .navi_right li#menu_page_last a:after {
	content: 'Top' !important;
}

.html5 #navi li#menu_auto_play.now_playing {
	background-color: rgba(255,255,255,0.2);
}
.html5 #navi li#menu_page_jump {
	width: 80px;
	overflow: hidden;
}

.html5 #pager_bar_pagelist {
	z-index: 10;
	margin: 0;
	padding: 0;
	position: relative;
	display: block;
	width: 80px;
	height: 50px;
	text-align: center;
	background: none;
}
.html5 #pager_bar_pagelist:after {
	width: 80px !important;
}


.html5 #pager_bar_pagelist select {
	height: 20px;
	margin: 8px auto;
	padding: 1px 2px;
	text-align: center;
}

.html5 #page_title {
	position: absolute;
	left: 15px;
	top: 0;
	width: 140px;
	height: 12px;
	margin-top: 8px;
	padding: 8px;
	line-height: 1;
	font-size: 12px;
	overflow: hidden;
}
.html5 #page_title span {
	height: 12px;
	width: 140px;
	overflow: hidden;
	display: block;
	white-space: nowrap;
}
.html5 #poweredby {
	position: absolute;
	background-repeat: no-repeat;
	background-position: left center;
}
#navi li#menu_download a {			background-position: -560px 0;}
#navi li#menu_download a:hover {		background-position: -560px -50px;}

/* added style
----------------------------------------------------------- */

/* link map sample class */
.linkmapclass {
	z-index: 999;
	border: none;
	background-color: #337733;
	-moz-opacity: 0.1;
	opacity: 0.1;
	cursor: pointer;
}
._clickhover {
	z-index: 9999;
	border: none;
	background-color: #777777;
	-moz-opacity: 0.30;
	opacity: 0.30;
	cursor: pointer;
}
.linkmapclass{
	filter: alpha(opacity=20);	
}
._clickhover{
	filter: alpha(opacity=30);	
}
.youtube_rect{
	filter: alpha(opacity=100);
	opacity: 1;
}

/* optional layer
---------------------------------------------------------------*/
.disp_optional_layer #sub_contents_frame {
	display: none !important;
}
.disp_optional_layer #sub_contents_block {
	display: block !important;
}
.disp_optional_layer #download_frame {
	display: none !important;
}
.disp_optional_layer .mask_layer {
	display: block !important;
}
.disp_sub_frame_layer #sub_contents_frame {
	display: block !important;
}
.disp_sub_frame_layer #sub_contents_block {
	display: none !important;
}
.disp_sub_frame_layer .mask_layer {
	display: block !important;
}
#sub_contents_block {
	position: absolute;
	z-index: 10000;
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#sub_contents_block .close {
	position: absolute;
	z-index: 10000;
	top: 4%;
	right: 5%;
	width: 75px;
	height: 28px;
	padding: 0;
	margin: 0;
}

#sub_contents_block_area {
	position: absolute;
	margin: 0 auto;
	padding: 5%;
	width: 90%;
	height: 80%;
}


/* download layer
---------------------------------------------------------------*/
.disp_download_layer #sub_contents_frame {
	display: none ;
}
.disp_download_layer #sub_contents_block_area{
	display: none ;
}
.disp_download_layer #sub_contents_block .close {
	display: none ;
}
.disp_download_layer #sub_contents_block {
	display: block !important;
}
.disp_download_layer .mask_layer {
	display: block !important;
}
.disp_download_layer #download_frame {
	display: block;
}

#download_frame {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -110px;
	margin-left: -150px;
	width: 298px;
	height: 188px;
	background-color: #080808;
	border: 1px solid #707070;
}

#download_area {
	width: 260px;
	margin: 9px auto;
}

#download_select_area .download_select2 {
	width: 260px;
}

#download_select_area li {
	padding-top: 6px;
}

#download_select_area .download_select {
	width: 125px;
	height: 73px;
}
#download_select_area #download_left {
	float: left;
}
#download_select_area #download_right {
	float: right;
}

#download_select_area li.download_select2 {
	clear: both;
	padding-top: 8px;
}

#download_select_area .download_select2 a {
	display: block;
	line-height: 30px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-align: center;
}

#download_select_area .download_select2 a:link, #download_select_area .download_select2 a:visited {
	text-decoration: none;
}

#download_select_area {
	width: 260px;
	margin: 9px auto;
}

#download_select_area li a {
	display: block;
	width: 100%;
	height: 100%;
	border: 1px solid #707070;
	background-color: #4D4D4D;
}

#download_select_area li.select a, #download_select_area li a:hover {
	border: 1px solid #219EC5;
}

#download_ctrl {
	clear: both;
	position: absolute;
	bottom: 4px;
	width: 260px;
	margin: 0 14px;
	padding: 6px;
}

#download_ctrl li {
	text-align: center;
	width: auto;
	height: 25px;
}

#download_ctrl li.download_cancel {
	float: left;
}

#download_ctrl li.download_submit {
	float: right;
}

#download_ctrl li a {
	display: block;
	width: 90px;
	height: 25px;
	border: #c0c0c0 1px solid;
	background: #f0f0f0;
	color: #484848;
	font-size: 11px;
	font-weight: bold;
	line-height: 25px;
	text-indent: 0;
}

#download_ctrl li a:link, #download_ctrl li a:visited {
	text-decoration: none;
}

body.resize {
	overflow:hidden;
	height: 100%;
	width: 100%;
	zoom: 1;
	display:block;
}
body.resize scrwindow ,
body.resize sub_scrwindow {
	display: none;
}

/**/

.html5 #ctrl_print .cancel a,
.html5 #ctrl_print .print a,
.html5 .menu_back a,
.html5 .button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f7f7f7), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #f7f7f7 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#dfdfdf');
	background-color:#f7f7f7;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	border:1px solid #dcdcdc;
	display:inline-block;
	color:#777777;
	font-family:arial;
	font-size:11px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:1px 1px 0px #ffffff;
	background-image:none !important;
	position:relative;
}
.html5 #download_ctrl a:hover,
.html5 #ctrl_print .cancel a:hover,
.html5 #ctrl_print .print a:hover,
.html5 .close .menu_back a:hover,
.html5 .classname:hover {
	background-color:#d8d8d8;
}

.html5 #ctrl_print .cancel a,
.html5 #ctrl_print .print a,
.html5 .close .menu_back a
{
	height:20px !important;
	width:66px !important;
}

.html5 #ctrl_print .cancel a:after,
.html5 #ctrl_print .print a:after,
.html5 .close .menu_back a:after{
	display:block;
	position:absolute;
	height:20px !important;
	width:66px !important;
	bottom:2px;
	left:0px;
	text-align:center;
	vertical-align:baseline;
	color:#777777;
	text-indent:0;
	font-size:12px;
	line-height:24px;
}
.html5 .close .menu_back a:after{
	content:'Back';
}
.html5 #ctrl_print .cancel a:after{
	content:'Cancel';
}
.html5 #ctrl_print .print a:after{
	content:'Print';
}

/**/

.html5 #navi_menu_thumb a,
.html5 #navi_menu_list a{
	background:none !important;
	border-top:2px solid #aaaaaa;
}
.html5 #navi_menu_thumb a.active,
.html5 #navi_menu_list a.active{
	border-top:2px solid #1090c5;
}
.html5 #navi_menu_thumb,
.html5 #navi_menu_list{
	background: rgb(109,109,109);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZkNmQ2ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
	background: -moz-linear-gradient(top,  rgba(109,109,109,1) 0%, rgba(14,14,14,1) 60%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,109,109,1)), color-stop(60%,rgba(14,14,14,1)));
	background: -webkit-linear-gradient(top,  rgba(109,109,109,1) 0%,rgba(14,14,14,1) 60%);
	background: -o-linear-gradient(top,  rgba(109,109,109,1) 0%,rgba(14,14,14,1) 60%);
	background: -ms-linear-gradient(top,  rgba(109,109,109,1) 0%,rgba(14,14,14,1) 60%);
	background: linear-gradient(to bottom,  rgba(109,109,109,1) 0%,rgba(14,14,14,1) 60%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d6d6d', endColorstr='#0e0e0e',GradientType=0 );
}
.html5 #page_list_base a, 
.html5 #contents_list ul li a,
.html5 #page_thumb_base p, 
.html5 #contents_thumblist ul li p{
	background:none !important;
}

.html5 #download_select_area #download_left a img,
.html5 #download_select_area #download_right a img {
	display:none;
}
.html5 #download_select_area #download_left a {
	background: url(../image/cmn/print_area_left_2.gif) no-repeat 0 0;
	background-size:cover;
}
.html5 #download_select_area #download_right a {
	background: url(../image/cmn/print_area_right_2.gif) no-repeat 0 0;
	background-size:cover;
}
.html5 #print_area #print_all a img,
.html5 #print_area #print_left a img,
.html5 #print_area #print_right a img{
	display:none;
}

.html5 #print_area #print_left a,
.html5 #print_area #print_right a{
	background-size:cover;
	
	background-position:0 0;
	background-repeat:no-repeat;
	width:125px;
	height:73px;
}
.html5 #print_area #print_left a{
	background-image: url(../image/cmn/print_area_left_2.gif) ;
}
.html5 #print_area #print_right a{
	background-image: url(../image/cmn/print_area_right_2.gif) ;
}
.html5 #print_area #print_all a{
	background-image: url(../image/cmn/print_area_all_2.gif) ;
	background-size:cover;
	height:73px;
	width:100%;
}

/*.html5 li.menu_bookmark a,
.html5 li.menu_zoom a,*/
/*.html5 li.menu_bookmark a:after,
.html5 li.menu_zoom a:after,*/

.html5 li.menu_bookmark a,
.html5 li.menu_zoom a{
	height:28px !important;
	width:48px !important;
	background-color:rgba(44,44,44,0.8);
	border-radius:1px;
	border:1px solid #000;
	display:inline-block;
	color:#777777;
	text-decoration:none;
	background-image:none !important;
	position:relative;
}
.html5 #ctrl_header .rightpage li a{
	margin-left:7px;
}
.html5 #ctrl_header .leftpage li a{
	margin-left:0px;
}

.html5 li.menu_bookmark a:hover,
.html5 li.menu_zoom a:hover{
	background-color: rgba(99,99,99,0.8);
}

.html5 li.menu_bookmark a:after,
.html5 li.menu_zoom a:after{
	content:' ';
	background-image: url(../image/cmn/btn_navi_base2.png);
	background-size: auto 28px;
	background-repeat:no-repeat;
	width: 28px;
	height: 28px;
	left:10px;
	top:0px;
	display:block;
	position:absolute;
	opacity:0.8;
}
.html5 li.menu_bookmark a:after{
	background-position: -308px -1px;
}
.html5 li.menu_zoom a:after{
	background-position: -252px -1px;
}

.html5 #ctrl_header ul li {
	margin-top: 6px;
	float: left;
	width: 56px;
	height: 30px;
}

.html5 #l_canvas .close{
	background-color: rgba(0,0,0,0.6);
}

/**/
#zoom_slider{
	position:relative;
	margin:0px ;
	padding: 0px 0px;
	left:20px;
	top:-5px;
	float:left;
	width:430px;
}
#zoom_slider .zoomin_icon,
#zoom_slider .zoomout_icon{
	position:relative;
	display:block;
	margin:0;
	padding:0;
	cursor: pointer;
	background-image: url(../image/cmn/btn_navi_base2.png);
	background-repeat:no-repeat;
	width:56px;
	height:56px;
	zoom:0.5;
	margin-top: -2px;
	float:left;
	overflow: hidden;
	text-indent: 60px;
}
* html #zoom_slider .zoomin_icon,
* html #zoom_slider .zoomout_icon{
	text-indent: 0;
	background-image:none;
	background-color: #fff;
	border: 0;
	margin: 4px;
	color:#000;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	width:20px;
	height:20px;
	zoom:1;
}
.html5 #zoom_slider .zoomin_icon,
.html5 #zoom_slider .zoomout_icon{
	width:27px;
	height:28px;
	background-size: auto 28px;
	zoom:1;
	margin-top: 0px;
}
#zoom_slider .zoomin_icon{
	background-position: -646px 0px;
}
#zoom_slider .zoomout_icon{
	background-position: -580px 0px;
}
.html5 #zoom_slider .zoomin_icon{
	background-position: -284px -1px;
}
.html5 #zoom_slider .zoomout_icon{
	background-position: -252px -1px;
}

#zoom_slider .slider_wrap { 
	margin:0 6px;
	position: relative;
	padding: 0px;
	padding-right: 28px;
	background-color:#ADADAD;
	height:28px; 
	width:300px;
	text-align: left; 
	cursor:pointer;
	float:left;
}
#zoom_slider .slider_wrap .slider_handle {
	display: block;
	position: absolute; 
	z-index: 2; 
	width: 28px; 
	height: 28px; 
	background: #eee;
	border: none;
	top: 0px; 
	cursor:move;
	zoom:1;
}
#zoom_slider .slider_wrap .slider_range {
	position: absolute;
	z-index: 1;
	display: block;
	border: 0;
	background-position: 0 0;
	background-color: #007AAD;
	top: 0; 
	height: 28px; 
}
/* narrow mode style
----------------------------------------------------------- */

html {
	overflow: hidden;
	-ms-content-zooming: none; /* Disable pan/zoom */
}

#narrowTools{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:100;
	background:rgba(0,0,0,0.4);
	display:block;
	zoom:1.0;
}
#narrowTools_b_left ,
#narrowTools_b_right {
	position:absolute;
	top:0;
	margin-top:0px
}
#narrowTools_b_top,
#narrowTools_b_bottom{
	position:absolute;
}
#narrowTools_b_top	{	top:0;}
#narrowTools_b_left	{	left:0;}
#narrowTools_b_right{	right:0;}
#narrowTools_b_bottom{	bottom:0;}
#narrowTools ul{
	margin: 0 auto;
	padding: 0px;
	position:relative;
	margin:0;
	border:none;
}
#narrowTools li{
	cursor:pointer;
	float: left;
	width: 48px;
	height: 48px;
	position:relative;
	overflow:hidden;
	border:none;
	margin:8px;
	padding:0px;
	position:relative;
}
#narrowTools li:after{
	content:"";
	display:block;
	position:absolute;
	background-image: url(../image/cmn/btn_navi_base2.png);
	padding:0px;
	margin:0px;
	width: 48px;
	height: 48px;
	background-size:auto 48px;
	background-repeat:no-repeat;
	top:0px;
	left:0px;
}
#narrowTools li.disable{
	opacity:0.1;
	cursor:default;
}
#narrowTools .narrowTools_h_item_1{
	width:64px;
}
#narrowTools .narrowTools_h_item_2{
	width:160px;
}
#narrowTools .narrowTools_h_item_3{
	width:240px;
}
#narrowTools .narrowTools_v_item_1{
	height:80px;
}
#narrowTools .narrowTools_v_item_2{
	height:160px;
}
#narrowTools .narrowTools_v_item_3{
	height:240px;
}

#narrowTools_b_left ul,
#narrowTools_b_right ul{
	width: 64px;
	height:100%;
	margin: 0;
}
#narrowTools_b_top ,
#narrowTools_b_bottom {
	width:100%;
}
#narrowTools_b_top ul,
#narrowTools_b_bottom ul{
	height: 64px;
	margin:0 auto;
}
.narrowTools_fix
#narrowTools_b_bottom ul{
}

#narrowTools_b_top ul{
	width:64px;
}
.narrowTools_zoom
#narrowTools_b_bottom ul{
	display:none;
}


li#narrowTools_top:after	{	background-position:    0px 0;}
li#narrowTools_left			{	top:50%;margin-top:-48px;	position:fixed;left:0;}
li#narrowTools_left:after	{	background-position:  -48px 0;}
li#narrowTools_right		{	top:50%;margin-top:-48px;	position:fixed;right:0;}
li#narrowTools_right:after	{	background-position: -96px 0;}
li#narrowTools_last:after	{	background-position: -144px 0;}
li#narrowTools_play:after	{	background-position: -192px 0;}
li#narrowTools_index:after	{	background-position: -240px 0;}
li#narrowTools_list:after	{	background-position: -288px 0;}
li#narrowTools_download:after{	background-position: -336px 0;}
li#narrowTools_print:after	{	background-position: -384px 0;}
li#narrowTools_zoomin:after	{	background-position: -432px 0;}
li#narrowTools_zoomout:after{	background-position: -480px 0;}

.narrowTools_fix	#narrowTools_zoomout{display:none;}

.narrowTools_zoom	#narrowTools_zoomin	{display:none;}
.narrowTools_zoom	#narrowTools_list	{display:none;}
.narrowTools_zoom	#narrowTools_download{display:none;}



/* toolbar added style
----------------------------------------------------------- */

.html5 #ctrl_footer {
	background: rgba(44,44,44,0.8);
	border-top:1px solid black;
}
.html5 #navi li ,
.html5 .navi_left li a ,
.html5 .navi_right li a ,
.html5 #pager_bar_pagelist {
	background-image: none;
}
.html5 #navi li {
	border-left:1px solid rgba(0,0,0,0.2);
}
.html5 #page_title {
	background-image: none;
	border : 1px solid #2f2f2f;
	margin:10px;
	padding : 0px;
	width : 153px;
	height : 29px;
}
.html5 #page_title span{
	background : #efefef;
	border : 1px solid #8e8e8e;
	width : 143px;
	height : 15px;
	margin:0px;
	padding : 6px 4px;
	color: #000;
	font-size:12px;
	line-height:12px;
	background-image: none;
	overflow:hidden;
	display:block;
}
.html5 #poweredby {
	background-image: none;
	height:50px;
	padding:0;
	margin:0;
	overflow:hidden;
	border-left:1px solid rgba(0,0,0,0.5);
}
.html5 #poweredby a{
	vertical-align:middle;
	display:block;
	position:relative;
	height:50px;
	padding:20px;
	margin:0;
	text-align:center;
	font-size:12px;
	color:#fff;
	background-position: center center;
	background-repeat: no-repeat;
	overflow:hidden;
}
.html5 #poweredby span{
	display:none;
}