@charset "UTF-8";


/* サイト共通基本設定
---------------------------------------------- */

body {
	height:100%;
	margin : 0 auto ;
	padding : 0 ;
	font-size:95%;
	font-family : "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif ;
	text-align : center ;
	background-color: #ece9da ;
}

h1, h2, h3, h4, h5, h6, ul, ol, li, dl, form {
	font-size : 100% ;
	margin : 0 ;
	padding : 0 ;
}

p{
	font-size : 100% ;
	margin : 0 ;
	padding : 0 ;
	line-height : 1.4;
}

table, th, td {
	font-size : 97% ;
	border : none ;
	margin:0;
	color:#333333;
}

img { border : none ; }

a {
	text-decoration : none ;
	color:#FF6600
}

a:visited { 
	text-decoration : underline ;
	color:#FF6600;
}

a:hover { 
	text-decoration : underline ;
	color:#0099FF;
}

.none { display : none ; }

.clear { clear : both ;}

.clr {
	clear:both;
}

.bar {
	width: 376px;
	margin:0px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #C1D6FF;
	line-height: 5px;
}


/* フォントサイズ */
.small_01 { font-size : 95% ; }
.text01{ line-height:1.4;
	padding-bottom:0.5em;
}


/* clearfix */
.clearfix:after {
	content : "." ;
	display : block ;
	height : 0 ;
	clear : both ;
	visibility : hidden ;
}
.clearfix { display : inline-block ; }
/* Hides from IE-Mac \*/
*html .clearfix { height : 1% ; }
.clearfix { display : block ; }
/* End hide from IE-mac */


li,
ul {
	list-style: none;
	line-height:1.5em;
	display:none;
	display:inline;
}

.title {

	text-align:left;
	float:left;
	padding:20px 5px 5px 5px;

}

.date {

	text-align:right;
	azimuth:right;
	padding:77px 5px 5px 0;
	height:18px;

}

.titlebar {

	color:#666666;
	background-color:#FFFFFF;
	font-weight:bold;
	width:850px;
	height:100px;

}


/* 基本レイアウト 
------------------------------------------*/




/* ヘッダー
------------------------------------------*/
#header {
	margin:0;
	padding : 0;
	background-color:#FFFFFF;
}

.head_right {
	float : right;
	width : 260px;
	margin : 0;
	background-color:#FFFFFF;
	padding:77px 20px 5px 0;
	text-align:right;
}

.head_left {
	float : left;
	width : 450px;
	margin : 0;
	padding:20px 5px 5px 30px;
	background-color:#FFFFFF;
	text-align:left;
}

#header table {
	margin:0;
}


.move .Right_box {
	width : 180px;
}


/* メイン
------------------------------------------*/
#container {
	width:850px;
	margin:0 auto;
	text-align:left;
	border-right-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: #CCCCCC;
	border-left-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

#content{
	padding:10px 0 0 0;
}

#left {
	float : left;
	width:750px;
}

.navi{
	width:145px;
	float:left;
	background-image: url("../imgs/bg_naviLeft.jpg");
	background-repeat:no-repeat;
	background-position:left top;
	padding-top:20px;
}
* html .navi{
	width:144px ;
}
.naviHead{
	background-image: url("../imgs/Title.gif");	
	background-repeat:no-repeat;
	padding:6px 0px 6px 3px;
}
* html .naviHead{
	width:142px;
}
.column1 .naviHead,.column2 .naviHead,.bottom .naviHead{
	width:auto;
	padding:6px 0px 6px 8px;
}
.naviHead img{
	vertical-align:bottom;
}
.navi ul{
	background-color:white;
}
.navi ul li{
	background-image: url("../imgs/navi_t_title.gif");
	background-repeat:repeat-x; 
	background-position:0 3px;
	background-color:white;
}
.navi ul li a{
	color:#4f4f51;
	display:block;
	padding:2px 0 2px 10px;
	font-weight:bold;
	font-size:80%;
	width:133px;
	border-bottom:1px #666 solid;
	border-top:1px #f5f5f5 solid;
	border-left:1px #ccc solid;
	border-right:1px #ccc solid;
}
* html .navi ul li a{
	padding:3px 0 3px 10px;
}
.navi ul li ul li{
	background-image: url("../imgs/navi_bg.gif");
	background-position:0 bottom;
	border-top:1px #f5f5f5 solid;
	border-bottom:1px #ccc solid;
	border-left:1px #ccc solid;
	border-right:1px #ccc solid;
}
.navi ul li ul li a{
	color:#555555;
	padding:6px 17px;
	font-weight:normal;
	font-size:65%;
	border-bottom:0px #666 solid;
	border-top:0px #f5f5f5 solid;
	border-left:0px #ccc solid;
	border-right:0px #ccc solid;
	width:110px;
	background-image: url("../imgs/arrow.gif");
	background-position:5px center;
	background-repeat:no-repeat;
}
.navi ul li ul li a:hover{
	background-color:#f5daa3;
}
* html .navi ul li ul li a{
	width:126px;
	padding:6px 0 6px 17px;
}
.navi ul li ul li a:hover{
	color:#000;
}
.center ul li{
	line-height:1em;
	border-bottom: 1px dotted #000;
}
ul li.material{
	background-image: url("../imgs/mat_navi_bg.gif") !important;
	margin:6px 0 0 0;
	background-position:0 bottom;
	border:1px #ccc solid;
}

#right{
	float : right;
	width : 145px;
}




/* フッター
------------------------------------------*/
#footer {
	margin : 0 0 3px 0;
	height:130px;
	width:850px;
	text-align:center;
	background-color:#FFFFFF;
}

#footer p {
	float : left;
	margin : 0 10px 0 0;
}






/* 文字サイズボタン
--------------------------------------------------------*/




/* ボタン
--------------------------------------------------------*/
.english a{
	float : right;
	margin : 0 8px 0 0;
	display : block ;
	width : 69px;
	height : 18px;
	text-indent : -9999px;
	background : url(../img/btn_english.gif) left top no-repeat;
}

.english a:hover {ottom no-repeat;
	background : url(../img/btn_english.gif) left b
}

.sitemap a{
	float : right;
	margin : 0 10px 0 0;
	display : block ;
	width : 87px;
	height : 18px;
	text-indent : -9999px;
	background : url(../img/btn_sitemap.gif) left top no-repeat;
}

.sitemap a:hover {
	background : url(../img/btn_sitemap.gif) left bottom no-repeat;
}

.contact a{
	float : right;
	display : block ;
	width : 62px;
	height : 18px;
	text-indent : -9999px;
	background : url(../img/btn_contact.gif) left top no-repeat;
}

.policy a{
	display : block ;
	width : 103px;
	height : 24px;
	text-indent : -9999px;
	background : url(../img/btn_policy.gif) left top no-repeat;
}

.link a{
	display : block ;
	width : 72px;
	height : 24px;
	text-indent : -9999px;
	background : url(../img/btn_link.gif) left top no-repeat;
}

.link a:hover {
	background : url(../img/btn_link.gif) left bottom no-repeat;
}


h5 {
	font-size : 90%;
	width:250px;
	height:20px;
	margin:0;
	float:right;
	padding : 0;
}

#pan {
	font-size : 80%;
	width:380px;
	height:20px;
	margin:0 0 0 10px;
	padding : 0;
}

#pan a {
	color : #000000;
	text-decoration:underline;
}

#pan a:hover { 
	text-decoration : underline ;
	color:#0099FF;
	}






/* オレンジ
---------------------------------------------- */
#orange #title {
	background:url(../img/bg_orange.gif) left top repeat-x ;
	border : 1px solid #ccc;
	padding : 12px 10px ;
}

#orange h3 {
	border-left : 3px solid #FAA72F;
	color : #FAA72F;
	padding : 0 0 0 5px;
	margin : 0 0 10px;
}

#orange .box {
	margin : 0 70px 0 20px;
}

#purple #title {
	background:url(../img/bg_pulple.gif) left top repeat-x ;
	border : 1px solid #ccc;
	padding : 12px 10px ;
}

/* blue
---------------------------------------------- */
#blue {
	float : right;
	width : 656px;
}

#blue #title {
	background:url(../img/bg_blue.gif) left top repeat-x ;
	border : 1px solid #ccc;
	padding : 12px 10px ;
}





.pagenav_prev ,.pagenav_next {
padding:5px;
height:1.5em;
border:1px solid #ccc;
background:#fff;
}


/* RULES FOR THE "MENUDIV" OBJECT */


/* An absolutely positioned and hidden DIV (treated as a layer in NS4). */
.menudiv {
 position: absolute;
 visibility: hidden;
 z-index: 1000;
 border: 2px outset #FFFFCC;
 /* Borders:     Top    Right  Bottom    Left   */
 border-color: #FFFFCC #666633 #666633 #FFFFCC;
 background-color: #CCCC99;
 /* layer-background-color is non-standard and NS4 only. */
 layer-background-color: #CCCC99;
 padding: 5px;
 font: 14px/22px Arial, Helvetica, sans-serif;
 /* Here's a cool effect, try uncommenting this, althought it's non-standard: */
 /* filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8 */
}


/* Formatting to apply to the elements inside the "menudiv" class elements. */
/* Of course, you can put whatever you want within the menu divs, these are just examples. */

.menudiv .header {
 width: 100%;
 font-weight: bold;
 text-align: center;
 border-bottom: 2px dashed #999966;
 margin-bottom: 5px;
}

.menudiv a {
 display: block;
 /* I've specified borders for each side individually so NS4 ignores this setting */
 border-top: 1px solid #CCCC99;
 border-right: 1px solid #CCCC99;
 border-bottom: 1px solid #CCCC99;
 border-left: 1px solid #CCCC99;
 color: #003333;
 text-indent: 5px;
 text-decoration: none;
}

/* I'm using :hover and :active pseudo-classes for link mouse effects. */
.menudiv a:hover {
 border: 1px solid #336699;
 border-color: #6699CC #003366 #003366 #6699CC;
 background-color: #336699;
 color: #FFFFFF;
}
.menudiv a:active {
 border: 1px solid #003366;
 border-color: #000000 #3366CC #3366CC #000000;
 background-color: #003366;
 color: #FFFFFF;
}

/*
The script will automatically assign a class of "highlighted" to elements that currently
have an active submenu, so here's a little CSS to format links within a .menudiv element.
*/
.menudiv .highlighted {
 background-color: #336699;
 border-color: #336699;
 color: #FFFFFF;
}

/* The links in the upper-left that pop out 'divMenu' menus. */
.trigger a {
 font: Bold 14px Arial, Helvetica, sans-serif;
 color: #003366;
 text-decoration: none;
}

/* Likewise, style active trigger links */
.trigger a.highlighted {
 color: #CC9966;
}

/*

Here's a demo stylesheet used to format a menu and its content.
Feel free to alter the menu layout however you want!
All you have to do is ensure the script has the correct CSS property name
(like 'visibility' or 'display') that changes to show/hide menus.

If you want to extend this layout, one good resource for UL/LI formatting is:
    http://www.alistapart.com/articles/taminglists/
Alternatively, you can use any other CSS dropdown layout instead. More here:
    http://www.alvit.de/css-showcase/
Consult your favourite CSS reference for customising fonts/borders/etc.

Otherwise, you can just change the #RGB border/background colours where
suitable to customise for your site -- easy :).

*/



/* HORIZONTAL FREESTYLE MENU LAYOUT */


/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
 display: none;
 position: absolute;
 top: 45px; margin-top: 0 ; /* I'm using ems and px to allow people to zoom their font */
 left: -1px;
 width: 168px;
}

/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
 top: -1.5px; margin-top: 0;
 left: 148px;
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
 float: left;
 display: block;
 position: relative;
 background: #ffe5c0;
 margin-right: -1px;
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
 float: none;
 margin: 0;
 margin-bottom: -1px;
}
.menulist ul>li:last-child {
 margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
.menulist a {
 display: block;
 padding: 0px;
 color: #000;
 text-decoration: none;
}
.menulist li li a {
 font-size:11px;
 color : #666 ;
 padding: 5px ;
 border:1px solid #444;
}

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #fff;
 background-color: #ec8600;
}
.menulist a.highlighted {
 color: #000;
 background-color: #FFE300;
}

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
.menulist a .subind {
 display: none;
}
.menulist ul a .subind {
 display: block;
 float: right;
}




/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.menulist ul a {
 float: none;
}
/* \*/
.menulist a {
 float: none;
}
/* */


/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist ul li {
 float: left;
 width: 100%;
}

/*
.color_orange a{
	color : #F39700;
	padding :4px 23px 4px 0;
	overflow : hidden;
	background:transparent url(../img/link_orange.jpg) center right no-repeat;
	display:inline-block;
	text-decoration : none;
}
*/

/*　イエロー
-------------------- */

#yellow h3 {
	color : #FFCC00;
	font-size : 120%;
	border-left : 4px solid #FFCC00;
	padding : 0 0 0 3px;
	margin : 15px 0 5px;
}

#yellow h4 {
	color : #FFCC00;
	font-size : 110%;
	border-bottom : 1px solid #FFCC00;
	padding : 0 0 0 13px;
	overflow : hidden;
	background:transparent url(../img/point_yellow.jpg) center left no-repeat;
	display:inline-block;
	margin : 10px 0 5px;
}

#yellow h5 {
	color : #FFCC00;
}

/*
.color_yellow a{
	color : #FFCC00;
	padding :4px 23px 4px 0;
	overflow : hidden;
	background:transparent url(../img/link_yellow.jpg) center right no-repeat;
	display:inline-block;
	text-decoration : none;
}
*/


/*　緑
-------------------- */

#green h3 {
	color : #009041;
	font-size : 120%;
	border-left : 4px solid #009041;
	padding : 0 0 0 3px;
	margin : 15px 0 5px;
}

#green h4 {
	color : #009041;
	font-size : 110%;
	border-bottom : 1px solid #009041;
	padding : 0 0 0 13px;
	overflow : hidden;
	background:transparent url(../img/point_green.jpg) center left no-repeat;
	display:inline-block;
	margin : 10px 0 5px;
}

#green h5 {
	color : #009041;
}

/*
.color_green a{
	color : #009041;
	padding :4px 23px 4px 0;
	overflow : hidden;
	background:transparent url(../img/link_green.jpg) center right no-repeat;
	display:inline-block;
	text-decoration : none;
}
*/



/*　紫
-------------------- */

.color_purple h3 {
	color : #7C2289;
	font-size : 120%;
	border-left : 4px solid #7C2289;
	padding : 0 0 0 6px;
	margin : 15px 0 5px;
}

#pulple h4 {
	color : #7C2289;
	font-size : 110%;
	border-bottom : 1px solid #7C2289;
	padding : 10px 0 0 13px;
	overflow : hidden;
	background:transparent url(../img/point_pulple.jpg) center left no-repeat;
	display:inline-block;
	margin : 0 0 5px;
}

#pulple h5 {
	color : #7C2289;
}

/*
.color_purple a{
	color : #7C2289;
	padding :4px 23px 4px 0;
	overflow : hidden;
	background:transparent url(../img/link_pulple.jpg) center right no-repeat;
	display:inline-block;
	text-decoration : none;
}
*/


/*　赤
-------------------- */

.color_red h3 {
	color : #ff0000;
	font-size : 120%;
	border-left : 4px solid #ff0000;
	padding : 0 0 0 3px;
}

.color_red h4 {
	color : #ff0000;
	font-size : 110%;
	border-bottom : 1px solid #ff0000;
	padding : 0 0 0 13px;
	overflow : hidden;
	background:transparent url(../img/point_red.jpg) center left no-repeat;
	display:inline-block;
	margin : 10px 0 5px;
}

.color_red h5 {
	color : #ff0000;
}

/*
.color_red a{
	color : #ff0000;
	padding :4px 23px 4px 0;
	overflow : hidden;
	background:transparent url(../img/link_red.jpg) center right no-repeat;
	display:inline-block;
	text-decoration : none;
}
*/


#lightbox {
	background-color:#EEEEEE;
	border-bottom:2px solid #666666;
	border-right:2px solid #666666;
	padding:10px;
}
#lightboxDetails {
	font-size:0.8em;
	padding-top:0.4em;
}
#lightboxCaption {
	float:left;
	text-align:left;
}
#keyboardMsg {
	float:right;
	display:block;
}
#closeButton {
	right:5px;
	top:5px;
}
#lightbox img {
	border:medium none;
	clear:both;
}

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: normal; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}	
	



.bottom{
	width:100% !important;
}
.bottom .naviHead{
	background-image:url(../imgs/titleN.gif);
}
.bottomLeft{
	width:200px;
	float:left;
	margin:0 0 0 4px;
	position: relative; top: 0px; z-index: 1;
}
* html .bottomLeft{
	left:-3px;
}
.bottomLeft ul{
	margin:0 0 0 5px;
}
.bottomLeft ul li{
	/*height:26px;*/
}
* html .bottomLeft ul li{
	
}
.bottomLeft ul li a{
	color:#575759;
	background-image: url("../imgs/bg_menu.gif") ;
	background-repeat:no-repeat;
	padding:4px 18px 4px 8px;
	display:block;
}

* html .bottomLeft ul li a{
	width:175px;
	padding:4px 15px 4px 5px;
}
* html .bottomLeft ul li a img{
	vertical-align:middle;
}
.bottomLeft ul li.last a{
	background-image: url("../imgs/bg_menuLast.gif") ;
}
.bottomLeft ul li.last a{
	padding:5px 15px 10px 5px;
}
.bottomLeft ul li a:hover,.bottomLeft ul li a.current{
	background-image: url("../imgs/bg_menu2.gif");
	background-repeat:no-repeat;
}
.bottomRight{
	padding:10px 0 10px 15px;
	width:531px;
	float:left;
	background-image: url("../imgs/bg_bottomRight.gif");
	background-repeat:repeat-y;
	background-position:3px top;
	position: relative; left:-13px;top:0; z-index: 0;
}
* html .bottomRight{
	width:527px;
	background-position:-1px top;
}
.article{
	width:165px;
	float:left;
	margin:0 0 0 8px;
}
* html .article{
	width:162px;
}
.article p{
	margin:7px 0 0 0;
}
 .date{
	font-size:80%;
	color:#9d5200;	
}
.title a{
	color:#16569d;
	display:block;
	font-size:90%;
	line-height:1.5em;
}
.continue a{
	color:#16569d;
	display:block;
	font-size:85%;
	text-align:right;
}
.summary{
	font-size:90%;
	line-height:1.2em;
}
.related{
	display:block;
	text-align:right;
}
.underLine{
	width:545px;
	background-image: url("../imgs/bg_underLine.gif");
	background-repeat:no-repeat;
	margin:0 0 10px 193px;
}
.right{
	width:146px;
	float:left;
	margin-left:4px;
}
* html .right{
	margin-left:1px;
	width:144px;
}
.footer{
border:1px solid #ccc;
}
.copyright{
	height:25px;
	text-align:center;
	background-color:#ff883a;
	color:#fff;
	font-size:65%;
}
*html .copyright{
	font-size:75%;
}
.copyright p{
	padding:5px 0 0 0;
}
a:hover{
	text-decoration:underline;
}
.navi a:hover ,.bottomLeft a:hover{
	text-decoration:none;
}



/*content.html*/

.main{
	margin:23px 0 0;
}
.left_in{
	float:left;
}
.left_in .navi{
	background-image:none;
	padding:0;
	width:165px;
}
.left_in .navi ul li a {
width:153px;
}
* html .left_in .navi ul li a {
width:153px;
}
* html .left_in .naviHead{
	width:162px;
}
* html .left_in .navi ul li ul li a{
	width:126px;
	padding:6px 0 6px 17px;
}
.left_in ul li.material{
	background-image: url("../imgs/mat_navi_bg_content.gif") !important;
	margin:6px 0 0 0;
	background-position:0 bottom;
	border:1px #ccc solid;
}
.right_in{
	width:720px;
	float:right;
	font-size:90%;
}
* html .right_in p{
	line-height:1.3em;
}
.right_in li {
line-height:1.4;
margin:0 0 7px;
}