/*///// COMMON.CSS /////*/
/* Last Update 2010-04-14 */

/*///// CONTENT /////*/
/*
1. RESET.CSS
2. BASIC SETTINGS
3. LAYOUT
	3-1. HEADER
	3-2. GLOBAL MENU
	3-3. MAIN
	3-4. FOOTER

98. GENERAL SETTINGS
99. FOR PRINTINGS
*/


/*///// 1. RESET.CSS /////*/
/*
    reset.css - resets default browser styling
    http://tantek.com/log/2004/09.html#d06t2354
    http://www.vox.com/.shared/css/base.css
    http://developer.yahoo.com/yui/reset/
*/

:link,:visited {
    text-decoration:none;
}
html,body,div,
ul,ol,li,dl,dt,dd,
form,fieldset,input,textarea,
h1,h2,h3,h4,h5,h6,pre,code,p,blockquote,hr,
th,td {
    margin:0;
    padding:0;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
table {
    border-spacing:0;
}
fieldset,img,abbr,acronym {
    border:0;
} 
address,caption,cite,code,dfn,em,strong,b,u,s,i,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
q:before,q:after {
    content:'';
}
a {
    text-decoration:underline;
    outline:none;
}
hr {
    border:0;
    height:1px;
    background-color:#000;
    color:#000;
}
a img,:link img,:visited img {
    border:none;
}
address {
    font-style:normal;
}


/*///// 2. BASIC SETTINGS /////*/
html {
	background: #000;
	color: #FFF;
}
body {
	text-align: center; /* forIE5 */
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
/* IE7- */
*+html body {padding-left:1px;}
* html body {padding-left:1px;}
/* IE7- */

div.content a,
div#subMenu a {
	border-bottom: 1px dotted #FFF;
}
div.content a:link,
div#subMenu a:link {
 	color: #FFF;
}
div.content a:active,
div#subMenu a:active {
	color: #FFF;
}
div.content a:visited,
div#subMenu a:visited {
	color: #FFF;
}
div.content a:hover,
div#subMenu a:hover {
	color: #FFF;
	border-bottom-color: #F00;
}

div.content {
	line-height: 1.5;
}


/*///// 3. LAYOUT /////*/
	/*/// 3-1. ALL BLOCK ///*/
	.logo,
	div.page {
		width: 960px;
		margin: 0 auto;
		position: relative;
		text-align: left; /* forIE5 */
	}

	/*/// 3-2. LOGO ///*/
	.logo img {
		vertical-align: bottom;
	}

	/*/// 3-3. EACH "PAGE" ///*/
	div.page {
		height: 593px;
		background: url(../common/images/pageBg.jpg) no-repeat right top;
	}
		body#index div.page {
		margin-bottom: 500px;
		}
	div#intro {
		background: url(../images/topBg.jpg) no-repeat right top;
	}
		body#index div.page h1,
		body.bbs div.page h1,
		body.blog div.page h1,
		div.page p#catTitle {
		width: 186px;
		position: absolute;
		top: 227px;
		right: 533px;
		text-align: right;
		z-index: 15;
		}
		p#logoWvj {
		position: absolute;
		top: -23px;
		left: 770px;
		}

	/*/// 3-4. GLOBAL MENU ///*/
		ul.globalMenu {
		width: 376px;
		height: 27px;
		position: absolute;
		top: 367px;
		z-index: 20;
		background: #000;
		}
			ul.globalMenu li {
			display: inline;
			margin-left: 7px;
			}
			ul.globalMenu li.first {
			margin-left: 0;
			}
				ul.globalMenu li img {
				margin-top: 5px;
				vertical-align: top;
				}
	/*/// 3-5. CONTENT ///*/
		div.content {
		width: 493px;
		height: 543px;
		position: absolute;
		top: 20px;
		left: 447px;
		z-index: 10;
		overflow: auto;
		}
			/*// for Index //*/
			div#intro div.content {
			top: 384px;
			left: 604px;
			width: 347px;
			height: 190px;
			}

			/*// for works//*/
			p.worksPhoto {
			text-align: center;
			margin-top: 80px;
			}
			
			/*// for BBS //*/
			body#bbs div.content {
			height: auto;
			}
				/*// 03.BBS Detail //*/
				body#bbs div.allTitle {
				background: #333;
				padding: 0.5em;
				margin: 1em 0;
				}
				body#bbs table.form td {
				padding-bottom: 0.5em;
				}
				body#bbs div.entry {
					background: #333;
					padding: 0.5em;
					margin: 0.5em 0.5em 2em;
				}
				body#bbs .entTitle {
				background: url(../common/images/document.gif) no-repeat left center;
				padding-left: 20px;
				margin-bottom: 0;
				}
				body#bbs .entInf {
				text-align: right;
				}
				body#bbs .entBody {
				margin-bottom: 1em;
				margin-left: 20px;
				}
				body#bbs .entRes {
					margin-top: 1em;
					margin-left: 1em;
					padding-top: 1em;
					border-top: 1px dotted #FFF;
				}
			
			/*// for Blog //*/
			body#blog div.content {
			height: 483px;
			}
				/*// 04.Blog Detail //*/
				body#blog div.entry {
					padding-bottom: 1em;
					border-bottom: 1px dotted #333;
					margin-bottom: 1.5em;
				}
				body#blog .entTitle {
				background: url(../common/images/document.gif) no-repeat left center;
				padding-left: 20px;
				}
				body#blog div#communicationInfo {
				}
				body#blog ul#leaveComment {
				list-style-image: url(../common/images/comment.gif);
				margin-bottom: 1em;
				}
				body#blog div#comments {
				margin-bottom: 1em;
				padding-bottom: 1em;
				border-bottom: 1px dotted #333;
				}
					div.comment {
					background: #000;
					filter: alpha(opacity=70);
					-moz-opacity:0.7;
					opacity:0.7;
					padding: 0.5em;
					margin: 0.5em 2em 0.5em 1em;
					border-bottom: 1px solid #000;
					}
					div.comment p {
					color: ;
					}
				/*// 04.Blog Monthly Archive List //*/
				.rb_toggle span {
					cursor: hand;
					cursor: pointer;
					height: 1.3em;
					line-height: 1.3;
				}
				.rb_toggle span.hover {
					color: red;
				}
				.rb_menu {
					position: absolute;
					left: 100px;
					top: 0;
				}
				div.content .rb_menu ul {
					margin-bottom: 0;
				}
				.rb_menu li {
					float: left;
					height: 25px;
					height: 1.3em;
					line-height: 1.3;
					padding: 5px 10px 0 0;
					background: #333;
				}
				body#blog div#subMenu {
				width: 493px;
				height: 31px;
				position: absolute;
				top: 503px;
				left: 447px;
				border-top: 1px #EEE dotted;
				padding-top: 5px;
				z-index: 1;
			}
			
	/*/// 3-6. INNER NAVIGATION ///*/
		div.nav {
		position: absolute;
		top:563px;
		right: 0;
		}
			div.nav ul.back a,
			div#nav ul.back a {
				color:#FFF;
				border-bottom: 1px dotted #FFF;
			}
			body#bbs div#nav {
				margin-top: 1em;
				float: right;
			}
			body#blog div.nav {
				margin-top: -1em;
			}


/*///// 98. GENERAL SETTINGS /////*/
	/*//// NAVIGATION ////*/
	div.nav ul,
	div#nav ul {
	list-style: url(../common/images/arrowBack.gif);
	}
		div.nav ul li
		div#nav ul li {
		margin-left: 16px;
		}
	div.anchor {
	height: 0!important;
	overflow: hidden;
	}
	
	/*//// PHOTO ////*/
	img.photoL {
	float: left;
	margin: 0 1em 0.5em 0;
	}
	img.photoR {
	float: right;
	margin: 0 0.5em 1em;
	}
	img.thumbL {
	float: left;
	margin: 0 1em 0.5em 0;
	}
	img.thumbR {
	float: right;
	margin: 0 0 0.5em 1em;
	}

	/*//// ARROW ////*/
	div.content ul {
	list-style: url(../common/images/arrow.gif);
	}
		/*ul.arrow ul {
		list-style: url(../common/arrow.gif);
		}*/
		div.content ul li {
		margin-left: 16px;
		}
	.sounds a {
	background: url(../common/sounds.gif) no-repeat left center;
	padding-left: 18px;
	}

	/*//// MARGIN ////*/
	div.content h1,
	div.content h2,
	div.content h3,
	div.content h4,
	div.content h5,
	div.content h6,
	div.content p,
	div.content ul,
	div.content ol,
	div.content dl,
	div.content table {
	margin-bottom: 0.7em;
	}
	div.content dl dd {
	padding-left: 16px;
	background: url(../common/images/arrow.gif) no-repeat 0 3px;
	}
	
	/*//// FONT SIZE ////*/
		/*/// 120% ///*/
		h1,
		h2,
		h3 {
		font-size: 120%;
		}

		/*/// 110% ///*/
		body#bbs p.entTitle,
		body#blog ul#leaveComment {
		font-size: 110%;
		}

		/*/// 90% ///*/
		body#blog .meta {
		font-size: 90%;
		}
		
		/*/// 80% ///*/
		div.content,
		div#subMenu,
		div.nav {
		font-size: 80%;
		}
		
	/*//// FONT WEIGHT ////*/
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	dt {
	font-weight: bold;
	}

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}

/* Hides from IE-mac \*/
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;}
/* End hide from IE-mac */
	
/*///// 99. FOR PRINTINGS /////*/
@media print {
	div.page { width: 98%; }
}