@charset "UTF-8";




/* =======================================

	Print CSS

========================================== */


/* 1.Reset
========================================== */
body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,code,form,fieldset,legend,
p,blockquote,table,th,td {margin: 0; padding: 0;}

html,body {background: #FFF; color: #333;}

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 1;
}
* html body {font-size: 12px;}
*:first-child+html body {font-size: 12px;}

img {border: 0; vertical-align: top;}

h1,h2,h3,h4,h5,h6 {clear: both; font-size: 100%; font-weight: normal;}

ul,dl,ol {text-indent: 0;}
li {list-style: none;}

address,caption,cite,code,dfn,em,strong,th,var {font-style: normal; font-weight: normal;}

sup {vertical-align: text-top;}
sub {vertical-align: text-bottom;}

input,textarea,select {font-family: inherit; font-size: inherit; font-weight:inherit;}
* html input,* html textarea,* html select {font-size: 100%;}
*:first-child+html+input,*:first-child html+textarea,*:first-child+html select {font-size: 100%;}

table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th,td {text-align: left; vertical-align: top;}
caption {text-align: left;}

pre,code,kbd,samp,tt {font-family: monospace;}
* html pre,* html code,* html kbd,* html samp,* html tt {font-size: 100%; line-height: 100%;}
*:first-child+html pre,*:first-child html+code,*:first-child html+kbd,*:first-child+html+samp,*:first-child+html tt {font-size: 108%; line-height: 100%;}

input,select,textarea {font-size: 100%; font-family: Verdana, Helvetica, sans-serif;}


/* =======================================

	Text Decorations CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Titles
	
	2.Prain Text Decorations
	
	3.Topicpath

========================================== */

/* 1.Titles
========================================== */
#contents h2 {}

#contents h3 {}

#contents h4 {
	font-weight: bold;
	font-size: 107.8%;
	line-height: 2;
	color: #333;
}

#contents h5 {
	font-weight: bold;
	font-size: 100%;
	line-height: 1.8;
	border-bottom: #999 1px dotted;
	margin-bottom: 10px;
}

/* 2.Prain Text Decorations
========================================== */
#contents p, #contents address, #contents th, #contents td {
	font-size: 100%;
	line-height: 1.8;
}

#contents li, #contents dt, #contents dd {
	font-size: 100%;
	line-height: 1.335;
}

/* Inner Reset  */
#contents th p, #contents th li, #contents th dt, #contents th dd,
#contents td p, #contents td li, #contents td dt, #contents td dd,
#contents li p, #contents li li, #contents li dt, #contents li dd,
#contents dt p, #contents dt li, #contents dt dt, #contents dt dd,
#contents dd p, #contents dd li, #contents dd dt, #contents dd dd {
	font-size: 100%;
}

#contents strong {
	font-weight: bold;
}

#contents em {
	font-style: italic;
}

#contents p, #contents ul, #contents dl, #contents table {
	margin: 0;
}

#contents p.attention {
	font-size: 92.4%;
	font-weight: bold;
	color: #C00;
	line-height: 1.335;
}

#contents .annotation {
	font-size: 88%;
	color: #999;
	line-height: 1.5;
}

#contents a {
	color: #36BCED;
	text-decoration: underline;
}

#contents a:hover {
	text-decoration: none;
}


#footer #info p.update {
	padding: 16px 0 0 85px;
	font-size: 88%;
	color: #FFF;
}
#footer #info p.update a { color: #FFF; text-decoration: underline;}
#footer #info p.update a:hover { color: #6CF; text-decoration: underline;}

/* 3.Topicpath
========================================== */
#contents p.topicpath {
	margin: 0 10px 17px;
	font-size: 92.4%;
	line-height: 1.335;
}

#contents p.topicpath a {
}





/* =======================================

	Global CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Structure
	
	2.Header
	
	3.Globalnavi
	
	4.Localnavi
		
	5.Contents
	
	6.Footer

========================================== */


/* 1.Structure
========================================== */
html, body {}

#document {
	margin: 0 auto;
	width: 100%;
}

#fade {
	position: absolute; /* ie6 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #FFF;
	z-index: 999;
}

#mainvisual {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 572px;
	background: #000;
}
#mainvisualwrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 572px;
	z-index: 11;
	background: url(../images/bgimg_dots.gif) repeat left top;
}

#header { width: 900px; height: 50px; margin: 0 auto;}
#footer { width: 100%; height: 120px; margin: 0 auto;}
#contents { width: 100%; margin: 0 auto;}
#contents:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

/* 2.Header
========================================== */
#header {
	position: absolute;
	top: 30px;
	left: 50%;
	margin-left: -450px;
	z-index: 15;
	background: url(../images/header_bar.png) no-repeat top left;
}

#headerInner {
	position: relative;
	zoom: 1;
	width: 900px;
	margin: 0 auto;
}

#header h1#siteTitle {
	position: absolute;
	top: 17px;
	left: 17px;
}

/* IE6
*html #top #document #contents h1#siteTitle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 700px;
	margin: -70px 0 0 -275px;
} */


/* 3.Globalnavi
========================================== */
#header ul#globalnavi {
	position: absolute;
	top: 20px;
	right: 35px;
	width: 429px;
}
ul#globalnavi:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

ul#globalnavi li {
	float: left;
	display: inline;
	margin-right: 35px;
}

ul#globalnavi li a {
	display: block;
}
ul#globalnavi li.home { margin: 0 35px 0 0;}
ul#globalnavi li.mail { margin: 0;}


/* 4.Localnavi
========================================== */
#contents ul#localnavi {
	width: 900px;
	margin: 0 auto;
	padding: 30px 0 50px;
}
#contents ul#localnavi:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#contents ul#localnavi h2 {
	margin-bottom: 7px;
	line-height: 1;
}

ul#localnavi li { float: left; display: inline;}
ul#localnavi li a {	display: block}
ul#localnavi li.company,li.works { margin: 0 30px 0 0;}
ul#localnavi li.photo { margin: 0;}


#contents ul#pagenavi {
	border-top: #999 1px dotted;
	width: 160px;
}
ul#pagenavi li {
	border-bottom: #999 1px dotted;
	padding: 10px 0;}

ul#pagenavi li a {
	display: block;
	color: #333;
	text-decoration: none;
}
ul#pagenavi li a:hover {
	display: block;
	color: #36BCED;
	text-decoration: none;
}


/* 6.Footer
========================================== */
#footer {
	background: url(../images/bgimg.png) repeat center top;
}

#footerInner {
	width: 900px;
	height: 120px;
	margin: 0 auto;
	background: url(../images/bgimg_footer.png) no-repeat left top;
	position: relative;
	zoom: 1;
}

#footer ul#footernavi {
	width: 361px;
	position: absolute;
	top: 20px;
	left: 20px;
}
#footer ul#footernavi:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#footer ul#footernavi ul#footermenu01 {
	float: left;
	width: 200px;
}

#footer ul#footernavi ul#footermenu02 {
	float: left;
	width: 161px;
}
/* IE7 */
*:first-child+html #footer ul#footernavi ul#footermenu02 {
	margin-top: -19px;
}

#footer ul#footernavi ul#footermenu01 li,ul#footermenu02 li { padding-bottom: 10px;}
#footer ul#footernavi ul#footermenu01 li.company { padding-left: 8px; padding-bottom: 6px;}

#footer h3 {
	position: absolute;
	top: 20px;
	left: 620px;
}
#footer p.address {
	position: absolute;
	top: 43px;
	left: 620px;
	color: #FFF;
	font-size: 80%;
}
#footer small#copyright {
	position: absolute;
	top: 80px;
	right: 0;
}





/* =======================================

	Contents CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Contents

========================================== */


/* 1.Contents
========================================== */
#contents { background: #FFF; padding-top: 110px;}

#top #contents { background: #FFF; margin-top: 580px; padding: 0;}

#contents #division {
	width: 900px;
	margin: 0 auto;
	padding: 0 0 20px;
	position: relative;
	zoom: 1;
}

#contents #division #sidebar {
	position: absolute;
	top: 50px;
}

/* IE7
*:first-child+html #contents #division #sidebar {
	position: fixed;
	top: 190px;
	margin-left: -300px;
} */

/* IE6
*html #contents #division #sidebar {
	position: absolute;
	top: 74px;
	margin-left: -300px;
} */

#contents #division #field { margin-left: 300px;}

#contents #division h2 { margin-bottom: 30px;}
#contents #division h3 { margin-bottom: 40px;}

#contents div.seciton { padding: 50px 0 100px 0;}

/* IE6 */
*html #contents div.seciton { padding: 74px 0;}

#contents p.article { padding: 20px 0;}

#contents table.table01 { border-collapse:collapse; width: 600px;}
#contents table.table01 th { padding: 10px 50px 0 0; line-height: 1.5; border-bottom: #999 1px dotted;}
#contents table.table01 td { padding: 10px 0; line-height: 1.5; border-bottom: #999 1px dotted;}

#contents table.table02 { margin-top: 30px; border-collapse:collapse; width: 600px; border-top: #999 1px dotted;}
#contents table.table02 th { width: 100px; padding: 15px 0; line-height: 1.5; border-bottom: #999 1px dotted; vertical-align: middle;}
#contents table.table02 td { padding: 15px 0; border-bottom: #999 1px dotted; vertical-align: middle;}

#contents table.table03 { border-collapse:collapse; width: 600px; border-top: #999 1px dotted;}
#contents table.table03 th { width: 100px; padding: 15px 0; line-height: 1.5; border-bottom: #999 1px dotted; vertical-align: middle;}
#contents table.table03 td { padding: 15px 0; border-bottom: #999 1px dotted; vertical-align: middle;}

#contents #pagetop {
	position: absolute;
	right: 0;
	bottom: 20px;
}

#sharebtn {
	position: relative;
	zoom: 1;
}
#sharebtn #tweetbtn {
	position: absolute;
	top: 15px;
	left: 15px;
}
#sharebtn #fbbtn {
	position: absolute;
	top: 15px;
	left: 105px;
}



/* =======================================

	Gallery CSS
	
========================================== */

#gallery {
	width: 900px;
	margin: 30px 0 60px 0;
}
#gallery:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#gallery ul#thumbnail{}
#gallery ul#thumbnail:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#gallery ul#thumbnail li {
	float: left;
	display: inline;
	margin: 0 30px 30px 0;
}

#gallery ul#thumbnail li a {
	display: block;
}
#gallery ul#thumbnail li.last { margin: 0 0 30px 0;}


#gallery ul#thumbnail h3 {
	margin: 5px 0 0;
	font-size: 88%;
	line-height: 1.5;
	color: #333;
}
#gallery ul#thumbnail small {
	margin: 5px 0;
	font-size: 70%;
	font-weight: bold;
	line-height: 1;
}

#gallery table.table01 { border-collapse:collapse; width: 280px; color: #666; border-top: #000 1px solid; margin-top: 5px;}
#gallery table.table01 th { height: 23px; width: 50px; padding: 0 10px 0 0; margin: 0; line-height: 1.0; vertical-align: middle; border-bottom: #999 1px dotted; font-size: 70%;}
#gallery table.table01 td { height: 23px; padding: 0; margin: 0; vertical-align: middle; line-height: 1.0; border-bottom: #999 1px dotted; font-size: 80%;}

#gallery ul#number{ margin: 5px 0 10px 0;}
#gallery ul#number:after { /* for Modern Browser */
	content: "."; display: block; clear: both; height: 0; visibility: hidden; font-size: 0;
}

#gallery ul#number li {
	float: left;
	display: inline;
	width: 15px;
	height: 5px;
	background: #000;
	margin: 0 3px 0 0;
}

#gallery ul#number li a {
	display: block;
}
#gallery ul#number li.last { margin: 0;}




/* =======================================

	Slider CSS

 -----------------------------------------
	INDEX
 -----------------------------------------
 	1.Structure
	
	2.Controls

========================================== */

/* 1.Structure
========================================== */
#supersized-loader { 
	position: absolute;
	top: 260px;
	left: 50%;
	z-index: 0;
	width: 60px;
	height: 60px;
	margin: 0 0 0 -30px;
	text-indent: -999em;
	background: url(../images/slider_progress.gif) no-repeat center center;
}
	
#supersized {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	height: 580px;
	width: 100%;
	z-index: 10;
}

#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none;}
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
		
#supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:580px; background:#111; }
#supersized a { width:100%; height:580px; display:block; }
#supersized li.prevslide { z-index:-20; }
#supersized li.activeslide { z-index:-10; }
#supersized li.image-loading { background:#111 url(../images/slider_progress.gif) no-repeat center center; width:100%; height:100%; }
#supersized li.image-loading img{ visibility:hidden; }
#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }


/* 2.Controls
========================================== */

/* Controls Bar
----------------------------*/
#controls-wrapper { margin:0 auto; height:42px; width:100%; top: 530px; left:0; z-index:11; position: absolute; }
	#controls { overflow:hidden; height:100%; position:relative; text-align:left; z-index:12; }
			
			#prevslide, #nextslide{ position:absolute; height:43px; width:43px; top: 268px; opacity:0.6; }
				#prevslide{ left:30px; background:url('../images/slider_back.png'); z-index:11; }
				#nextslide{ right:30px; background:url('../images/slider_forward.png'); z-index:11; }
				
					#prevslide:hover, #nextslide:hover{ cursor:pointer; }
			
			ul#slide-list{ padding:15px 0; float:left; position:absolute; left:50%; }
				ul#slide-list li{ list-style:none; width:12px; height:12px; float:left; margin:0 15px 0 0; }
					ul#slide-list li.current-slide a, ul#slide-list li.current-slide a:hover{ background-position:0 0px; }
					ul#slide-list li a{ display:block; width:12px; height:12px; background:url('../images/slider_nav-dot.png') no-repeat 0 -24px; }
						ul#slide-list li a:hover{ background-position:0 -12px; cursor:pointer; }		
	
/* Progress Bar
----------------------------*/					
#progress-back{ z-index:11; position: absolute; top:572px; left:0; height:8px; width:100%; background:url('../images/slider_progress-back.png') repeat-x; }
	#progress-bar{ position:relative; height:8px; width:100%; background:url('../images/slider_progress-bar.png') repeat-x; }