@charset "utf-8";

/*-------------------------------------------------------------------------

エムアンドアールのベース及びテンプレート部分のcssです

-------------------------------------------------------------------------*/


/*----------------------------------------------------
	リセット
----------------------------------------------------*/

html {
	overflow-y:scroll;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
	margin:0;
	padding:0;
}

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

table {
	border-collapse:collapse;
	border-spacing:0;
}

object,embed {
	vertical-align:top;
}

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

img,abbr,acronym,fieldset {
	border:0;
}

li {
	list-style-type:none;
}

img {
	vertical-align:bottom;
}


/*----------------------------------------------------
	フォントの設定　デフォルトは12pxの#000
----------------------------------------------------*/

body {
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-size:12px;
	color:#000;
}

* html body   {font-size: 75%;}/*IE6*/
* + html body {font-size: 75%;}/*IE7*/

/*リンク*/
a         {text-decoration:underline; color:#00F;}
a:hover   {color:#06F;}


/*----------------------------------------------------
	ボディ
----------------------------------------------------*/

body {
	text-align:center;
}

body.home    {background:url(../img/body-bg-top.jpg) repeat-x center 250px;}
body.company {background:url(../img/body-bg-company.jpg) repeat-x center 160px;}
body.clients {background:url(../img/body-bg-clients.jpg) repeat-x center 160px;}
body.staffs  {background:url(../img/body-bg-staffs.jpg) repeat-x center 160px;}


/*----------------------------------------------------
	ヘッダー
----------------------------------------------------*/

#header {
	padding:8px 0 10px;
	border-top:4px solid #5f77d0;
}

/* ページによってヘッダー下の点線を切り替える */
body.home    #header {background:url(../img/header-border-blue.gif) repeat-x bottom;}/* トップページ */
body.company #header {background:url(../img/header-border-blue.gif) repeat-x bottom;}/*  */
body.clients #header {background:url(../img/header-border-green.gif) repeat-x bottom;}/*  */
body.staffs  #header {background:url(../img/header-border-pink.gif) repeat-x bottom;}/*  */

#header div.inner {
	margin:0 auto;
	width:900px;
	height:70px;
}

#header h1 {
	float:left;
}

#header p.discription {
	float:left;
	display:inline;
	margin:15px 0 0 -150px;
	font-size:150%;
	color:#4769b0;
}

#header a.contact {
	float:right;
	display:block;
	padding-left:6px;
	width:194px;
	height:43px;
	background:url(../img/header-contact-in.gif) no-repeat 0 0;
	/*transition: all 0.2s ease-in-out;*/
}

/* js off時の設定 */
#header a.contact:hover {
	padding-left:26px;
}

/* jsでhover要素にアニメーションを付けていて、cssでのhoverが効いてると挙動がおかしくなるのでjs on時は消す */
body.on-js #header a.contact:hover {
	padding-left:6px;
}

#header img.tel {
	clear:right;
	float:right;
	margin:5px 0 0 0;
	_margin-right:16px;
}


/*----------------------------------------------------
	コンテント
----------------------------------------------------*/

#content {
	margin:0 auto;
	width:910px;
	text-align:left;
}

#content:after {
	content:"";
	clear:both;
	display:block;
}

body.company #content {background:url(../img/sidebar-bg-company.jpg) repeat-y right;}
body.clients #content {background:url(../img/sidebar-bg-clients.jpg) repeat-y right;}
body.staffs  #content {background:url(../img/sidebar-bg-staffs.jpg) repeat-y right;}


/*----------------------------------------------------
	コンテントヘッダー
----------------------------------------------------*/

#content-header {
	width:910px;
	height:153px;
	position:relative;
}

body.home #content-header {
	height:auto;
}

#content-header h2 {
	width:910px;
	height:153px;
}

#content-header h2 span {
	display:block;
	padding:120px 0 0 20px;
	background-repeat:no-repeat;
	font-size:200%;
	line-height:1.2;
	font-weight:bold;
	color:#FFF;
}

body.company #content h2 {background-image:url(../img/h2-bg-company.jpg);}
body.clients #content h2 {background-image:url(../img/h2-bg-clients-0.jpg);}
body.staffs  #content h2 {background-image:url(../img/h2-bg-staffs-0.jpg);}
body.company #content h2.random,
body.clients #content h2.random,
body.staffs  #content h2.random {
	background-image:none;
}



/*----------------------------------------------------
	トップページ フラッシュ
----------------------------------------------------*/

#top-flash {
	margin:0;
}

/*----------------------------------------------------
	トップページ グローバルナビゲーション
----------------------------------------------------*/

#top-navi {
	height:110px;/* 下のコンテンツとの余白を含む */
}

#top-navi li {
	float:left;
	margin-left:3px;
	height:90px;
	position:relative;
}

#top-navi li.staffs {
	width:299px;
}

#top-navi li.clients {
	width:298px;
}

#top-navi li.company {
	width:299px;
}

#top-navi li a {
	display:block;
	position:absolute;
	bottom:0px;
	padding-top:10px;
	/*transition: all 0.2s ease-in-out;*/
}

#top-navi li.staffs  a {background:url(../img/top-gn-staffs-in.gif) no-repeat 0 0;}/* お仕事をお探しの方へ */
#top-navi li.clients a {background:url(../img/top-gn-clients-in.gif) no-repeat 0 0;}/* 法人のお客様へ */
#top-navi li.company a {background:url(../img/top-gn-company-in.gif) no-repeat 0 0;}/* 会社情報 */

/* マウスオンですが、通常はcssでなくjsでアニメーション表示させます */
#top-navi li.staffs  a:hover {padding-top:28px;}/* お仕事をお探しの方へ */
#top-navi li.clients a:hover {padding-top:29px;}/* 法人のお客様へ */
#top-navi li.company a:hover {padding-top:27px;}/* 会社情報 */

/* cssでのhoverが効いてると挙動がおかしくなるのでjs on時は消す */
body.on-js #top-navi li.staffs  a:hover {padding-top:10px;}/* お仕事をお探しの方へ */
body.on-js #top-navi li.clients a:hover {padding-top:10px;}/* 法人のお客様へ */
body.on-js #top-navi li.company a:hover {padding-top:10px;}/* 会社情報 */


/*----------------------------------------------------
	第二階層以下のグローバルナビゲーション
----------------------------------------------------*/

#globalnavi {
	width:467px;
	height:60px;
	position:absolute;
	right:0;
	bottom:0;
}

#globalnavi li {
	float:left;
	margin-left:3px;
	height:60px;
	position:relative;
}

#globalnavi li {
	width:135px;
}


#globalnavi li a {
	display:block;
	position:absolute;
	bottom:0;
	padding-top:6px;
	/*transition: all 0.2s ease-in-out;*/
}

#globalnavi li.staffs  a {background:url(../img/gn-staffs-in.png) no-repeat 50% 0;}/* お仕事をお探しの方へ */
#globalnavi li.clients a {background:url(../img/gn-clients-in.png) no-repeat 50% 0;}/* 法人のお客様へ */
#globalnavi li.company a {background:url(../img/gn-company-in.png) no-repeat 50% 0;}/* 会社情報 */

/* マウスオンですが、通常はcssでなくjsでアニメーション表示させます */
#globalnavi li a:hover {padding-top:21px;}

/* cssでのhoverが効いてると挙動がおかしくなるのでjs on時は消す */
body.on-js #globalnavi li a:hover {padding-top:6px;}

/* 現在ページ */
#globalnavi li.current         {width:185px;}
#globalnavi li.current a       {padding-top:0;}
#globalnavi li.current a:hover {padding-top:0;}


/*----------------------------------------------------
	お仕事をお探しの方へにあるナビゲーション
----------------------------------------------------*/

#staffnavi {
	width:457px;
	height:50px;
	position:absolute;
	right:0;
	top:25px;
	background:url(../img/staffnavi-bg.gif) no-repeat;
}


#staffnavi li {
	float:left;
	margin:7px 0 0 14px;
	_margin-left:9px;
}

/*----------------------------------------------------
	メイン
----------------------------------------------------*/

body.home #main {
	width:630px;
}

#main {
	clear:both;
	float:left;
	width:647px;
	line-height:1.66;
}


/*----------------------------------------------------
	サイドバー
----------------------------------------------------*/

/* 共通 */
#sidebar {
	float:right;
	padding:15px 0;
	width:233px;
}

/* トップページ */
body.home #sidebar {
	float:right;
	padding-top:0;
	width:260px;
}

/* バナー */
#sidebar div.bannar {
	margin-bottom:15px;
	text-align:center;
}

/* ベリサイン */
#sidebar div.verisign {
	text-align:center;
}

#sidebar div.verisign object {
	margin:0 auto;
}

#sidebar h3 {
	margin:10px 0 0 5px;
}

#sidebar ul {
	margin:0 0 5px;
	text-align:center;
}

#sidebar ul.last-child {
	margin-bottom:15px;
}

#sidebar ul li {
	position:relative;
}

/* 現在ページを示すクリップ */
#sidebar ul li span.clip {
	display:block;
	width:244px;
	height:46px;
	position:absolute;
	top:0;
	left:-6px;
}

body.company #sidebar ul li span.clip {background:url(../img/clip-company.png) no-repeat 0 6px;}
body.clients #sidebar ul li span.clip {background:url(../img/clip-clients.png) no-repeat 0 6px;}
body.staffs  #sidebar ul li span.clip {background:url(../img/clip-staffs.png) no-repeat 0 6px;}

/* ボタンの上の点線 */
#sidebar ul.faq2 {
	margin-top: -11px;
	padding-top:12px;
	background:url(../img/sn-hr.png) no-repeat center top;
}

/* ボタンの下のアキなし */
#sidebar ul.faq3 {
	margin: -11px 0 0 0;
	padding-top:12px;
	background:url(../img/sn-hr.png) no-repeat center top;
}

/* ステッチ */
#sidebar h3.stitch {
	margin-top:0;
	padding-top:15px;
	background:url(../img/sn-hr.png) no-repeat center top;
}

#sidebar ul.stitch {
	padding-top:10px;
	background:url(../img/sn-hr.png) no-repeat center top;
}

/* お仕事をお探しの方へ */
body.staffs #sidebar {
	background:url(../img/sidebar-bg-staffs-top.jpg) no-repeat;
}

body.staffs #sidebar div.search {
	margin:5px;
	padding:6px 0 3px;
	border:1px solid #ff8673;
	text-align:center;
}

body.staffs #sidebar div.search h3 {
	margin:0 0 3px;
}

body.staffs #sidebar div.search ul {
	margin:0;
}

/* 仕事お探しの方へのバナー */
body.staffs #sidebar div.bannar {
	margin-left:7px;
}

/* 仕事お探しの方へのベリサイン */
body.staffs #sidebar div.verisign {
	margin-left:7px;
	text-align:center;
}


/*----------------------------------------------------
	フッター
----------------------------------------------------*/

#footer {
	clear:both;
	background:url(../img/footer-bg.jpg) repeat-x top;
}

#footer div.inner {
	margin:0 auto;
	padding:20px 0 0;
	width:900px;
	_height:1%;
	text-align:left;
	line-height:1.4;
	color:#00F;
}

#footer ul.navi1 {
	float:left;
	overflow:hidden;
}

#footer ul.navi1 li {
	display:inline;
	margin-left:-1px;
	border-left:1px solid #000;
	padding-left:0.5em;
	margin-right:0.5em;
}

#footer ul.navi2 {
	float:right;
}

#footer ul.navi2 li {
	display:inline;
	margin:0 1em 0 0;
	font-weight:bold;
}

#copyright {
	clear:both;
	padding:1em;
	text-align:right;
}
/*----------------------------------------------------
	クリアフィックス
----------------------------------------------------*/
.group{
overflow:hidden;
}
.group{
	/height:1%;
	/zoom:1;
	}