@charset "utf-8";

/*////////////////////////////////////////////////////////////

	[home.css]
	
  1. image replacement
  2. header
  3. content
	4. navi
	5. theme
	6. explanation
	7. noscript
	
////////////////////////////////////////////////////////////*/


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

	1. image replacement

------------------------------------------------------------*/
h2#theme,
div#explanation h3,
div#explanation p,
ul#navi li {
	overflow: hidden;
	text-indent: -9999px;
}

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

	2. header

------------------------------------------------------------*/
div#header div.wrapper {
	position: relative;
}

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

	3. content

------------------------------------------------------------*/
div#content div.wrapper {
	position: relative;
	width: 900px;
	height: 518px;
	margin: 50px auto;
	padding: 0;
	background: #FFF url(../img/bg.jpg) no-repeat;
}
* html div#content div.wrapper {
	text-align: left;
}

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

	4. navi

------------------------------------------------------------*/
ul#navi {
	list-style: none;
}

ul#navi li {
	position: absolute;
	height: 22px;
}

ul#navi li.recruit {
	left: 640px;
	top: 140px;
}

ul#navi li.interview {
	left: 640px;
	top: 192px;
}

ul#navi li.company {
	left: 640px;
	top: 244px;
}

ul#navi li.entry {
	left: 640px;
	top: 296px;
}

ul#navi li.link {
	left: 640px;
	top: 348px;
}

ul#navi li a {
	overflow: hidden;
	display: block;
	height: 22px;
	background-position: 0 0;
	background-repeat: no-repeat;
}
					
ul#navi li.recruit a {
	width: 107px;
	background-image: url(../img/recruit.gif);
}

ul#navi li.interview a {
	width: 129px;
	background-image: url(../img/interview.gif);
}

ul#navi li.company a {
	width: 124px;
	background-image: url(../img/company.gif);
}

ul#navi li.entry a {
	width: 85px;
	background-image: url(../img/entry.gif);
}

ul#navi li.link a {
	width: 60px;
	background-image: url(../img/link.gif);
}

ul#navi li a:hover {
	background-position: 0 -22px;
}

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

	5. theme

------------------------------------------------------------*/
h2#theme {
	position: absolute;
	left: 147px;
	top: 129px;
	width: 249px;
	height: 254px;
}

h2#theme a {
	display: block;
	width: 249px;
	height: 254px;
	background-image: url(../img/theme.jpg);
	background-position: 0 0;
	background-repeat: no-repeat;
}

h2#theme a:hover {
	background-position: -249px 0;
}

h2#theme a.select {
	cursor: default;
	background-position: -498px 0; 
}

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

	6. explanation

------------------------------------------------------------*/
div#explanation {
	display: none;
	position: absolute;
	top: 67px;
	left: 600px;
	width: 300px;
	height: 360px;
	background: url(../img/explanation-bg.gif) no-repeat;
}

div#explanation p#close {
	position: absolute;
	left: 270px;
	top: 330px;
	width: 20px;
	height: 20px;
	line-height: 1;
}

div#explanation p#close a {
	display: block;
	width: 20px;
	height: 20px;
	background-image: url(../img/close-icon.gif);
	background-position: 0 0;
	background-repeat: no-repeat;
}

div#explanation p#close a:hover {
	background-position: -20px 0;
}

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

	7. noscript

------------------------------------------------------------*/
p#noscript {
	position: absolute;
	right: 0;
	bottom: 6px;
	width: 200px;
	padding: 0.25em 0;
	border: 1px solid #F00;
	color: #F00;
	text-align: center;
}
* html p#noscript {
	width: 198px;
	right: 0;
	bottom: 12px;
}
*:first-child+html p#noscript {
	right: 0;
	bottom: 12px;
}