@charset "utf-8";
/* CSS Document */

html,
body{
	margin:0;
	padding:0;
}

.clear{ clear:both; }

article#frmMain{
	z-index:2;
	position:relative;
	width:100%;
}

canvas {
	z-index:1;
	top:0;
	position:fixed;
}
#rbody{
  background-color:#fff;
}

	#frmHeader{
		z-index:10;
		width:100%;
		background-color:rgba(0,0,0, 0.9);
		color:#ffffff;
		height:46px;
		position:fixed;
		bottom:0;
	}
		#headermenu{
			zoom:1;
			padding:2px 0 0 0;
			height:44px;
			margin:0;
			text-align:left;
			background:url(../images/bgheader.png) left top no-repeat;
		}
		#headermenu:after{
			clear:both;
			content:"";
		}
			#frmHeader h1{
				width:125px;
				height:32px;
				overflow:hidden;
				margin:0;
				padding:0;
				float:left;
			}
				#frmHeader h1 a{
					display:block;
					width:125px;
					height:0;
					overflow:hidden;
					margin:0;
					padding:32px 0 0;
					background:url(../images/lbl_cttl.png) left top no-repeat;
				}
			#frmHeader nav{
				width:400px;
				float:right;
				text-align:left;
				height:32px;
			}
				#frmHeader nav ul,
				#frmHeader nav ul li{
					list-style-type:none;
					list-style-position:outside;
				}
	
				#frmHeader nav ul{
					zoom:1;
					display:block;
					margin:0;
					padding:0;
				}
				#frmHeader nav ul:after{
					content:"";
					display:block;
					clear:both;
				}
				#frmHeader nav ul li{
					display:block;
					float:left;
					width:128px;
					margin:-5px 5px 0 0;
					padding:0;
				}
					#frmHeader nav ul li a{
						display:block;
						height:100%;
						overflow:hidden;
						font-family: "source-han-sans-japanese",sans-serif;
						font-style: normal;
						font-weight: 100;
						font-size:10px;
						color:#ffffff;
					}
						#frmHeader nav ul li a span{
							display:block;
							padding:11px 0 11px 34px;
							text-align:left;
							overflow:hidden;
						}
							#frmHeader nav ul li a#tab-about span{     background:url(../images/ico_about.png) left center no-repeat; }
							#frmHeader nav ul li a#tab-portfolio span{ background:url(../images/ico_portfolio.png) left center no-repeat; }
							#frmHeader nav ul li a#tab-contact span{   background:url(../images/ico_contact.png) left center no-repeat; }

							#frmHeader nav ul li a span span{
								padding:0;
								overflow:visible;
							}
							#frmHeader nav ul li a#tab-about span span,
							#frmHeader nav ul li a#tab-portfolio span span,
							#frmHeader nav ul li a#tab-contact span span{
								background:transparent;
							}
	
						@-webkit-keyframes iconover{
						0%{
							opacity: 0.6;
						}
						100%{
							opacity: 1;
						}
						}
						@keyframes iconover{
						0%{
							opacity: 0.6;
						}
						100%{
							opacity: 1;
						}
						}
						@-webkit-keyframes iconout{
						0%{
							opacity: 1;
						}
						100%{
							opacity: 0.6;
						}
						}
						@keyframes iconout{
						0%{
							opacity: 1;
						}
						100%{
							opacity: 0.6;
						}
						}
						
						#frmHeader nav ul li a span,
						#frmHeader nav ul li a.sel span,
						#frmHeader nav ul li a:hover span{
							-webkit-animation-duration: 0.3s;
							animation-duration: 0.3s;
							-webkit-animation-fill-mode: both;
							animation-fill-mode: both;
						}
						#frmHeader nav ul li a span{
						  -webkit-animation-name: iconout;
						  animation-name: iconout;
						}
						#frmHeader nav ul li a:hover span,
						#frmHeader nav ul li a.sel span{
						  -webkit-animation-name: iconover;
						  animation-name: iconover;
						}

@media screen and (max-width: 525px){
		#frmHeader{
			height:40px;
			display:table;
			width:100%;
		}
		#headermenu{
			height:36px;
			text-align:left;
		}
		#headermenu:after{
			clear:both;
			display:block;
			content:"";
		}
			#frmHeader h1{
				display:table-cell;
				width:50%;
				height:32px;
				table-layout:fixed;
				overflow:hidden;
				margin:0;
				padding:2px 0 0;
				float:left;
			}
				#frmHeader h1 a{
					display:block;
					height:32px;
					overflow:hidden;
					margin:0;
					padding:0;
					text-indent:-9999px;
					background:url(../images/lbl_cttl.png) center center no-repeat;
				}

			#frmHeader nav{
				float:right;
				margin:0;
				padding:0;
				display:table-cell;
				width:50%;
				table-layout:fixed;
			}
	
				#frmHeader nav ul{
					display:table;
					width:100%;
					height:32px;
					margin:0;
					padding:0;
				}
				#frmHeader nav ul:after{
					content:normal;
					display:inline;
					clear:none;
				}

				#frmHeader nav ul li{
					display:table-cell;
					table-layout:fixed;
					float:none;
					width:33%;
					height:100%;
					margin:0;
					padding:0;
				}
					#frmHeader nav ul li a{
						display:block;
						float:left;
						width:100%;
						height:100%;
					}
						#frmHeader nav ul li a span{
							display:block;
							height:32px;
							margin:2px 0 0;
							padding:0;
							text-align:left;
							overflow:hidden;
							text-indent:-9999px;
						}
							#frmHeader nav ul li a#tab-about span{     background:url(../images/ico_about.png) center center no-repeat; }
							#frmHeader nav ul li a#tab-portfolio span{ background:url(../images/ico_portfolio.png) center center no-repeat; }
							#frmHeader nav ul li a#tab-contact span{   background:url(../images/ico_contact.png) center center no-repeat; }
	
}

		.pages{
			padding-bottom:50px;
		}

	#frmFooter{
		z-index:11;
		bottom: 0;
		position: fixed;
		display:block;
		width:100%;
		height:40px;
		text-align:right;
		background-color:rgba(0,0,0, 0.9);
		color:#eeeeee;
	}
		#frmFooter address{
			font-family:Arial, Helvetica, sans-serif;
			font-style:normal;
			font-size:0.9em;
			padding:3px;
		}

	#pagetotop{
		position:fixed;
		z-index:999;
		left:0;
		top:-48px;
		width:180px;
		height:48px;
		cursor:pointer;
	}
		#pagetotop span{
			display:block;
			overflow:hidden;
			text-indent:-9999px;
			height:100%;
		}


@media screen and (min-width: 900px){
	#headermenu,
	#footermenu,
	.pages .column{
		width:900px;
		margin:0 auto;
	}
}