@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-image: url(../image/cmn/bgrep.gif);
	background-repeat: repeat;
	background-position: left top;
	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;}


/* 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: 24px 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;
}
#contents_navi ul {
	margin: 26px 0 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:20px;
}
#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;
	background-image: url(../image/cmn/scrbg.gif);
	background-repeat: repeat;
    background-color: transparent;
}
#l_canvas #l_canvasbase{
    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;
}
/* 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:20px;
}



/* 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: 30px 10px 0px 10px;
}
#contents_thumblist ul li a.page_img {
	display: block;
	width: 128px;
	height: 96px;
	padding: 26px 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 {
	padding: 19px 0 0;
}
#contents_list:after{
	content:'.';
	visibility:hidden;
	clear:both;
	height:1px;
	display:block;
}
#contents_list .column {
	float: left;
	width: 50%;
}

#contents_list ul {
	padding: 0 15px 0 20px;
}
#contents_list ul span{
    display:inline;
    position:relative;
}
#contents_list ul li {
	position: relative;
	float: left;
	width: 360px;
	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);
}
* html .linkmapclass{
	z-index: 999;
	border: 2px solid #fff;
	background-color: #111;
	filter: alpha(opacity=1);
	-moz-opacity: 0.01;
	opacity: 0.01;
}



/* 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);
}