@charset "UTF-8";

/*
全ページ共通のスタイルのみ、ここに記述します。
コンテンツ毎のデザインは、それぞれのディレクトリに設置された、
専用のCSSを編集してください。
*/


/* ==============================
いろいろリセット
============================== */

* { margin: 0; padding: 0; border: 0; }


/* ==============================
文字サイズ
============================== */

body { font-size: small; }   /* For Windows IE */
html>/**/body { font-size: 13px; } /* Modern browsers only (not IE 7) */

/*
Win IE は font-size: small
それ以外は font-size: 13px
をベースのフォントサイズとして指定しています。
各要素の文字サイズ指定は、
下記の値で相対指定を行ってください。
--------------------
09px = 70%
10px = 77%
11px = 85%
12px = 93%
13px = 100%
14px = 108%
15px = 116%
16px = 123.5%
17px = 131%
18px = 138.5%
20px = 153.5%
24px = 183.5%
36px = 273.5%
--------------------
*/

/* ==============================
html, body
============================== */

html { height:100%; }

body {
	height:100%;
	background-color:#FFF;
	color:#333;
	font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, Verdana, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
	}


/* ==============================
疑似クラス
============================== */

.recreate a:link     { color: #333; background: #FDE; }
.recreate a:visited  { color: #333; background: #DDD; }
.recreate a:hover    { color: #333; background: #FBD; text-decoration: none; }
.recreate a:active   { color: #333; background: #FBD; position: relative; top:1px; } 

.recreate a img,
.recreate a:hover img { background: none !important; text-decoration: none !important;}

/* ==============================
float のクリア
============================== */

.clear { clear:both; }
.clear hr { display:none; }

/*
<div class="clear"><hr /></div>
と書くと、不要な <br/> や <div> で
クリアするよりキレイです。
*/

/* ==============================
WRAPPER
============================== */
#wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
	}

/* ==============================
HEADER
============================== */

#header { background:url(../img/navi_bg.gif) repeat-x; min-width:900px; height:50px;}
#header a:active { position:static;}

#header h1 { float:left; width:160px; height:50px; }
#header h1 a { display:block; width:160px; height:50px; text-indent:-9999px; overflow:hidden; outline:none; background:url(../img/navi.gif) no-repeat; }
#header h1 a:hover { background:url(../img/navi.gif) no-repeat 0 -50px; }

#navi { float:right; background: url(../img/navi.gif) -323px -100px; height:50px; white-space: nowrap; }
#navi li { display:block; height:50px; float:left; text-indent:-9999px; overflow:hidden; outline:none; text-align:left; white-space: nowrap; }
#navi a  { display:block; height:50px; background-color:transparent; }

#navi-news  { width:52px; }
#navi-prof  { width:62px; }
#navi-works { width:58px; }
#navi-media { width:58px; }
#navi-live  { width:47px; }
#navi-blog  { width:83px; }
#navi-staff { width:84px; }
#navi-voice { width:85px; }
#navi-photo { width:57px; }
#navi-mail  { width:84px; }
#navi-home  { width:40px; }

#navi-news  a { background: url(../img/navi.gif) no-repeat -290px 0; }
#navi-prof  a { background: url(../img/navi.gif) no-repeat -342px 0; }
#navi-works a { background: url(../img/navi.gif) no-repeat -404px 0; }
#navi-media a { background: url(../img/navi.gif) no-repeat -462px 0; }
#navi-live  a { background: url(../img/navi.gif) no-repeat -520px 0; }
#navi-blog  a { background: url(../img/navi.gif) no-repeat -567px 0; }
#navi-staff a { background: url(../img/navi.gif) no-repeat -650px 0; }
#navi-voice a { background: url(../img/navi.gif) no-repeat -734px 0; }
#navi-photo a { background: url(../img/navi.gif) no-repeat -819px 0; }
#navi-mail  a { background: url(../img/navi.gif) no-repeat -876px 0; }
#navi-home  a { background: url(../img/navi.gif) no-repeat -960px 0; }

#navi-news  a:hover { background: url(../img/navi.gif) no-repeat -290px -50px; }
#navi-prof  a:hover { background: url(../img/navi.gif) no-repeat -342px -50px; }
#navi-works a:hover { background: url(../img/navi.gif) no-repeat -404px -50px; }
#navi-media a:hover { background: url(../img/navi.gif) no-repeat -462px -50px; }
#navi-live  a:hover { background: url(../img/navi.gif) no-repeat -520px -50px; }
#navi-blog  a:hover { background: url(../img/navi.gif) no-repeat -567px -50px; }
#navi-staff a:hover { background: url(../img/navi.gif) no-repeat -650px -50px; }
#navi-voice a:hover { background: url(../img/navi.gif) no-repeat -734px -50px; }
#navi-photo a:hover { background: url(../img/navi.gif) no-repeat -819px -50px; }
#navi-mail  a:hover { background: url(../img/navi.gif) no-repeat -876px -50px; }
#navi-home  a:hover { background: url(../img/navi.gif) no-repeat -960px -50px; }

#navi-news  a.selected,
#navi-news  a.selected:hover { background: url(../img/navi.gif) no-repeat -290px -100px; }
#navi-prof  a.selected,
#navi-prof  a.selected:hover { background: url(../img/navi.gif) no-repeat -342px -100px; }
#navi-works a.selected,
#navi-works a.selected:hover { background: url(../img/navi.gif) no-repeat -404px -100px; }
#navi-media a.selected,
#navi-media a.selected:hover { background: url(../img/navi.gif) no-repeat -462px -100px; }
#navi-live  a.selected,
#navi-live  a.selected:hover { background: url(../img/navi.gif) no-repeat -520px -100px; }
#navi-blog  a.selected,
#navi-blog  a.selected:hover { background: url(../img/navi.gif) no-repeat -567px -100px; } 
#navi-staff a.selected,
#navi-staff a.selected:hover { background: url(../img/navi.gif) no-repeat -650px -100px; }
#navi-voice a.selected,
#navi-voice a.selected:hover { background: url(../img/navi.gif) no-repeat -734px -100px; }
#navi-photo a.selected,
#navi-photo a.selected:hover { background: url(../img/navi.gif) no-repeat -819px -100px; }
#navi-mail  a.selected,
#navi-mail  a.selected:hover { background: url(../img/navi.gif) no-repeat -876px -100px; }
#navi-home  a.selected,
#navi-home  a.selected:hover { background: url(../img/navi.gif) no-repeat -960px -100px; }



/* ==============================
CONTENT
============================== */
/* ver1 - 2 */
/*
#content{ background:url(../img/background_c.gif) repeat-x fixed; }
#content-inner1 { background:url(../img/background_l.gif) no-repeat fixed top left; }
#content-inner2 { background:url(../img/background_r.gif) no-repeat fixed top right; padding:50px 50px 80px; zoom:1; }
*/

/* ver3 */

#content-inner1 {  }
#content-inner2 { padding:50px 50px 80px; zoom:1; }



/* list style reset */
ul.reset,ol.reset {
	list-style: none;
}

/* basic Styles */
.sectionLv1 {}
.sectionLv2 {}

.titBasic {
	margin-top: 8px;
	margin-bottom: 25px;
	font-size: 153.5%;
	font-weight: bold;
}

.txtBasic {
	font-family: Georgia, serif;
	color: #999;
	font-weight: bold;
	font-style: italic;
}


.fItalic {
	font-family: Georgia, serif;
	font-style: italic;
}

/* basic dotted line */
.bgBorder {
	background: url(../img/line_dot_x.gif) repeat-x left bottom;
}


/* dl Styles */
.dlVaria {
	display: block;
	min-height: 1%;
}
.dlVaria:after {
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}
* html .dlVaria {
	height: 1%;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}
.dlVaria {}
	.dlVaria dt {
		float: left;
		margin-right: 1em;
	}

#content-main {
	position: relative;
}


/* pagetop */
.cmn_pagetop {
	overflow: hidden;
}
	.cmn_pagetop p {
		float: right;
		background: url(/images/recreatebox/ico_pagetop.gif) no-repeat left center;
		padding-left: 10px;
		font-size: 77%;
		font-family: Verdana;
		font-weight: normal;
	}
	.cmn_pagetop p a:link { color: #999; background-color: transparent;}
	.cmn_pagetop p a:visited { color: #999; background-color: transparent;}
	.cmn_pagetop p a:hover { color: #999; background-color: transparent; text-decoration: none;}
	.cmn_pagetop p a:active { color: #999; background-color: transparent; position: relative; top:1px;}


/* ==============================
FOOTER
============================== */
#footer {
	height: 30px;
	width:100%;
	background:#000;
	position: absolute;
	bottom: 0;
	bottom:expression(document.getElementById("wrapper").offsetHeight % 2 == 0 ? 0 : -1);
	}

#footer-inner {
	padding:5px 8px;
	color:#FEF;
	font-size: 77%;
	line-height: 2em;
	}
	
ul#footer-navi { float: left; }
ul#footer-navi li { display: inline; color: #228877; }
ul#footer-navi li a:link     { color: #FFF; background-color: transparent; }
ul#footer-navi li a:visited  { color: #FFF; background-color: transparent; }
ul#footer-navi li a:hover    { color: #FFF; background-color: transparent; text-decoration: none; }
ul#footer-navi li a:active   { color: #FFF; background-color: transparent; position: relative; top:1px; } 
p#footer-copyright { float: right; font-family:Verdana; color: #FFF;}