﻿@charset "utf-8";

/*
===========================================================
	heart.css ver 1 [2009/3/20]
	*Copyright (c) 2009, 池袋はぁと All rights reserved.
===========================================================
*/
/*  ------------------------------  */
/*  ---------body-----------------  */
/*  ------------------------------  */
body {
	background: #ffffff url(img/recruit_back.gif) repeat 20% top ;
	font-family: "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", sans-serif;
	width: 800px;
	margin:0 auto; 
	padding: 0;
}
body#index {
	background: #ffffff url(img/background_v1.jpg) center top repeat-x ;
}
/*  ------------------------------  */
/*  ---------hr-header------------  */
/*  ------------------------------  */
#hr-header {
	margin-top: 20px;
	width: 800px;
	height: 170px;
	float: left;
}
#header-left {
	display: block;
	float: left;
	width: 22px;
	height: 170px;
	background: url("img/header_left.jpg") 10px top no-repeat;
}
#header-center {
	display: block;
	float: left;
	width: 749px;
	height: 170px;
	background: url("img/header_center.jpg") left top repeat-x;
}
#header-right {
	display: block;
	width: 29px;
	height: 170px;
	float: left;
	_width: 19px;
	background: url("img/header_right.jpg") left top no-repeat;
}
#hr-header a #logo {
	margin-top: 2px;
	float: left;
}
#hr-header a:hover #logo {
	margin: 3px 0 0 1px;
	float: left;
}
#hr-header #banner {
	display: block;
	margin-top: 6px;
	float: right;
}
#hr-header a#banner {
	width: 474px;
	height: 88px;
	display: block;
	margin-top: 4px;
	float: right;
	background: url("img/header_banner.jpg") left top no-repeat;
}
#hr-header a:hover#banner {
	width: 474px;
	height: 88px;
	display: block;
	margin-top: 4px;
	float: right;
	background: url("img/header_banner_h.jpg") left top no-repeat;
}
#hr-header #banner em {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#hr-header #uke {
	display: block;
	margin: 2px 2px 0 0;
	float: right;
}
#hr-header a#tel {
	width: 455px;
	height: 27px;
	display: block;
	margin-top: 4px;
	float: right;
	background: url("img/header_tel.jpg") left top no-repeat;
}
#hr-header a:hover#tel {
	width: 455px;
	height: 27px;
	display: block;
	margin-top: 4px;
	float: right;
	background: url("img/header_mail.jpg") left top no-repeat;
}
#hr-header #tel em {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
/*  ------------------------------  */
/*  ---------index-main-------------  */
/*  ------------------------------  */
#index-main{
	margin: 0 auto;
	background: #ffffff url(img/back_index_v2.jpg) center top no-repeat ;
}
#index-main #space {
	margin: 0px 0 50px 0;
	height: 409px;
	width: 800px;
	font-size: 120%;
	color: #ff00ff;
	display: block;
}
#index-main #disclaimer p{
	padding-left: 300px;
}
#index-main #index-footer {
	margin-top: 30px;
	text-align: right;
	font-size: 100%;
	color: #555555;
	display: block;
}
#index-main #index-botton{
	margin-top: 30px;
	height: 117px;
	width: 800px;
}
#index-main img#kin{
	margin: 0 0 0 40px;
	float: left;
}
#index-main a#over18{
	display: block;
	height: 90px;
	width: 335px;
	margin: 27px 0 0 47px;
	float: left;
	background: url("img/over18.gif") no-repeat;
}
#index-main a:hover#over18{
	background: url("img/over18_h.gif") no-repeat;
}
#index-main a#under18{
	display: block;
	height: 46px;
	width: 171px;
	margin: 71px 0 0 40px;
	float: left;
	background: url("img/under18.gif") no-repeat;
}
#index-main a:hover#under18{
	background: url("img/under18_h.gif") no-repeat;
}
#index-main a em{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#index-main #index-footer{
	padding: 50px 50px 0 50px;
	height: 300px;
}
#index-main #index-footertxt {
	margin-top: 30px;
	text-align: left;
	font-size: 100%;
	color: #555555;
	display: block;
}
#index-main #index-footertxt {
	padding: 10px 20px 0 370px;
	height: 300px;
}
/*  ------------------------------  */
/*  ---------bar-------------  */
/*  ------------------------------  */
#hr-main #bar img{
	padding: 0;
	margin: 0 10px;
}
#hr-main #bar img#mls{
	margin-right: 20px;
}
#hr-main #bar p{
	padding: 0;
	margin: 0 10px 15px 10px;
	display: inline;
	float: left;
	text-align: center;
	color: #ff00ff;
}
#hr-main #bar p.b88{
	width: 88px;
}
#hr-main #bar p.b200{
	width: 200px;
	margin-right: 20px;
}
#hr-main #bar p.b250{
	width: 250px;
}
#hr-main #bar p.b300{
	width: 300px;
}
#hr-main #bar p.b468{
	width: 468px;
}
/*  ------------------------------  */
/*  ---------top-------------  */
/*  ------------------------------  */
.aaa{
	margin: 0;
	padding: 0;
	width: 550px;
	height: 120px;
	float: left;
	background-color: #ff00ff;
}
p.topics-title{
	width: 24%;
	float: left;
	color: #ffff00;
}
p.topics-text{
	display: block;
	width: 70%;
	float: left;
	color: #ff00ff; 
}
/*  ------------------------------  */
/*  ---------oubo-------------  */
/*  ------------------------------  */
table#rei{
	width: 50%;
	font-size: 120%;
	margin: 0 0 10px 30px;
}
th#th{
	width: 13%;
}
td#td1{
	width: 38%;
	text-align: right;
}
td#td2{
	width: 16%;
	text-align: center;
}
td#td3{
	width: 33%;
}
/*  ------------------------------  */
/*  ---------vector-------------  */
/*  ------------------------------  */
#hr-main p.vector{
	margin-bottom: 0px;
	padding-bottom: 60px;
	background: url("img/vector.gif") center bottom no-repeat;
}
/*  ------------------------------  */
/*  ---------hatena-------------  */
/*  ------------------------------  */
.hatena{
	background: url("img/hatena.jpg") center center no-repeat;
}
/*  ------------------------------  */
/*  ---------rai-------------  */
/*  ------------------------------  */
.rai{
	background: url("img/rai.jpg") center center no-repeat;
}
/*  ------------------------------  */
/*  ---------money-------------  */
/*  ------------------------------  */
.money{
	background: url("img/money.jpg") center center no-repeat;
}
/*  ------------------------------  */
/*  ---------backheart-------------  */
/*  ------------------------------  */
.backheart{
	background: url("img/backheart.jpg") center center no-repeat;
}
/*  ------------------------------  */
/*  ---------b-------------  */
/*  ------------------------------  */
#hr-main img.b{
	margin: 0 0 20px 0px;
}
/*  ------------------------------  */
/*  ---------hr-main-------------  */
/*  ------------------------------  */
#hr-main {
	margin: 8px 0;
	width: 600px;
	float: right;
}
#hr-main #main-frame-middle {
	background: url("img/main_middle.jpg") left repeat-y;
}
#hr-main #main-frame-top {
	background: url("img/main_top.jpg") left top no-repeat;
}
#hr-main #main-frame-bottom {
	height: 19px;
	background: url("img/main_bottom.jpg") left bottom no-repeat;
}
#hr-main #main-contents {
	padding: 2px 30px 20px 14px;
}
/*  ---------h--------------------  */
#hr-main h1{
	margin: 15px 0;
	padding: 10px 0;
	clear: both;
	background: url("img/h1_top.gif") no-repeat;
}
#hr-main h1 span.text{
	font-size: 180%;
	display: block;
	color: #ff00ff;
	font-weight: bold;
	padding: 0px 30px 14px 16px;
	background: url("img/h1_bottom.gif") left bottom no-repeat;
}
#hr-main h1 span.sub{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#hr-main h1.imgh{
	width: 550px;
	height: 44px;
	margin: 15px 0 15px 0;
	padding: 0;
}
#hr-main h1.kyuu{
	background: url("img/h1_kyuu.gif") left bottom no-repeat;
}
#hr-main h1.deri{
	background: url("img/h1_deri.gif") left bottom no-repeat;
}
#hr-main h1.oubo{
	background: url("img/h1_oubo.gif") left bottom no-repeat;
}
#hr-main h1.qand{
	background: url("img/h1_qand.gif") left bottom no-repeat;
}
#hr-main h1.flow{
	background: url("img/h1_flow.gif") left bottom no-repeat;
}
#hr-main h1.link{
	background: url("img/h1_link.gif") left bottom no-repeat;
}
#hr-main h1.otoi{
	background: url("img/h1_otoi.gif") left bottom no-repeat;
}
#hr-main h1.koji{
	background: url("img/h1_koji.gif") left bottom no-repeat;
}
#hr-main h1.top{
	background: url("img/h1_top.gif") left bottom no-repeat;
}

#hr-main h2{
	clear: both;
	padding-bottom: 10px;
	padding-top: 8px;
	background: url("img/h2_v4.gif") no-repeat;
}
#hr-main h2 span.text{
	font-size: 160%;
	display: block;
	color: #ff00ff;
	font-weight: bold;
	padding: 9px 30px 10px 20px;
}
#hr-main h3{
	margin-top: 0px;
	clear: both;
	padding-bottom: 10px;
	padding-top: 10px;
	background: url("img/h3.gif") 0 12px no-repeat;
}
#hr-main h3 span.text{
	margin-top: 0px;
	font-size: 130%;
	display: block;
	color: #ff00ff;
	font-weight: bold;
	padding: 4px 30px 0 18px;
}
#hr-main h3.topics-h{
	clear: left;
	width: 35%;
	padding: 10px 0 10px 0;
	background: url("img/h3.jpg") 0 12px no-repeat;
}
#hr-main h3.topics-h span.text{
	clear: left;
	font-size: 130%;
	display: block;
	color: #ff00ff;
	font-weight: normal;
	padding: 4px 30px 0 18px;
}
#hr-main h4{
	font-size: 130%;
	display: block;
	font-weight: bold;
	padding: 4px 30px 0 6px;
}
/*  ---------p--------------------  */
#hr-main p{
	font-size: 120%;
	display: block;
	color: #333333;
	margin: 0 0 20px 6px;
}
#hr-main p.kome{
	font-size: 110%;
}
/*  ---------img--------------------  */
#hr-main img{
	margin: 0 0 20px 28px;
}
#hr-main img.h1{
	margin: 0 0 0 0;
}
/*  ---------margin--------------------  */
.tmss{
	margin-top: 10px;
}
.tms{
	margin-top: 20px;
}
.tmm{
	margin-top: 30px;
}
.tml{
	margin-top: 40px;
}
.tmll{
	margin-top: 50px;
}
.tmxl{
	margin-top: 60px;
}


.ml-xsmall{
	margin-left: 25px;
}
.ml-small{
	margin-left: 50px;
}
.ml-normal{
	margin-left: 100px;
}
.ml-large{
	margin-left: 200px;
}
.ml-xlarge{
	margin-left: 300px;
}
.ml-xxlarge{
	margin-left: 400px;
}
.ml-xxlarge{
	margin-left: 500px;
}
hr.b1 {
	height: 10px;
	margin-bottom: 10px;
	display: block;
	width: 1px;
	clear: both;
	border: solid 1px transparent;
}
hr.b2 {
	height: 10px;
	margin-bottom: 20px;
	display: block;
	width: 1px;
	clear: both;
	border: solid 1px transparent;
}
hr.b3 {
	height: 10px;
	margin-bottom: 30px;
	display: block;
	width: 1px;
	clear: both;
	border: solid 1px transparent;
}
/*  ---------ul--------------------  */
#hr-main ul{
	font-size: 110%;
	margin-bottom: 20px;
	padding-left: 10px;
	list-style: none;
}
#hr-main li{
	margin: 0 0 6px 25px;
	list-style-type: disc;
}
#hr-main ul.heart{
	font-size: 110%;
	margin: 10px 0 0 0;
	list-style-type: none;
}
#hr-main ul.heart li{
	margin: 0 0 0 25px;
	list-style-type: none;
}
#hr-main ul.heart ul li{
	margin: 0 0 0 10px;
	list-style-type: none;
}

#hr-main ul.topli{
	font-size: 110%;
	margin: 0 0 20px 0;
	list-style-type: none;
	background: ;
}


/*  ---------banner--------------------  */
#hr-main a#banner {
	width: 207px;
	height: 43px;
	margin: 4px 0 0 165px;
	display: block;
	background: url("img/toi_button.gif") left top no-repeat;
}
#hr-main a:hover#banner {
	background: url("img/toi_button_h.jpg") left top no-repeat;
}
#hr-main #banner em {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
/*  ------------------------------  */
/*  ---------hr-leftnavi----------  */
/*  ------------------------------  */
#hr-leftnavi {
	margin-top: 10px;
	width: 200px;
	float: left;
}
#hr-leftnavi li{
	margin-left: 10px;
	margin-bottom: 4px;
	width: 180px;
	height: 50px;
}
#hr-leftnavi a,
#hr-leftnavi span{
	width: 180px;
	height: 50px;
	display: block;
}
#hr-leftnavi li em{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
#hr-leftnavi li#top a{
	background: url("img/navi_t_no.jpg") left top no-repeat;
}
#hr-leftnavi li#kyuu a{
	background: url("img/navi_0_no.jpg") left top no-repeat;
}
#hr-leftnavi li#deri a{
	background: url("img/navi_1_no.jpg") left top no-repeat;
}
#hr-leftnavi li#oubo a{
	background: url("img/navi_2_no.jpg") left top no-repeat;
}
#hr-leftnavi li#qand a{
	background: url("img/navi_3_no.jpg") left top no-repeat;
}
#hr-leftnavi li#flow a{
	background: url("img/navi_4_no.jpg") left top no-repeat;
}
#hr-leftnavi li#staff a{
	background: url("img/navi_6_no.gif") left top no-repeat;
}
#hr-leftnavi li#link a{
	background: url("img/navi_5_no.jpg") left top no-repeat;
}
#hr-leftnavi li#top a:hover{
	background: url("img/navi_t_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#kyuu a:hover{
	background: url("img/navi_0_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#deri a:hover{
	background: url("img/navi_1_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#oubo a:hover{
	background: url("img/navi_2_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#qand a:hover{
	background: url("img/navi_3_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#flow a:hover{
	background: url("img/navi_4_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#staff a:hover{
	background: url("img/navi_6_ho.gif") left top no-repeat;
}
#hr-leftnavi li#link a:hover{
	background: url("img/navi_5_ho.jpg") left top no-repeat;
}
#hr-leftnavi li#top span.current{
	background: url("img/navi_t_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#kyuu span.current{
	background: url("img/navi_0_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#deri span.current{
	background: url("img/navi_1_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#oubo span.current{
	background: url("img/navi_2_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#qand span.current{
	background: url("img/navi_3_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#flow span.current{
	background: url("img/navi_4_cu.jpg") left top no-repeat;
}
#hr-leftnavi li#staff span.current{
	background: url("img/navi_6_cu.gif") left top no-repeat;
}
#hr-leftnavi li#link span.current{
	background: url("img/navi_5_cu.jpg") left top no-repeat;
}
#hr-leftnavi img#qr {
	margin: 10px 0 0 50px; 
}
#hr-leftnavi p {
	margin-bottom: 12px;
	text-align: center;
	color: #ff00ff;
	font-weight: bold;
}
#hr-leftnavi a#tenpo{
	width: 180px;
	height: 50px;
	margin: 20px 0 2px 12px;
	display: block;
	background: url("img/leftnavi_tenpo.gif") left top no-repeat;
}
#hr-leftnavi a:hover#tenpo{
	margin: 22px 0 0 14px;
}
#hr-leftnavi a#tenpo em{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
/*  ------------------------------  */
/*  ---------hr-footer------------  */
/*  ------------------------------  */
#hr-footer {
	display: block;
	margin-bottom: 50px;
	width: 800px;
	height: 130px;
	float: left;
	_float: none;
	background: #ffffff left top no-repeat;
}
#hr-footer ul {
	margin: 22px 0 18px 0;
	width: 719px;
	height: 1em;
	padding-left: 30px;
	font-weight: bold;
}
#hr-footer ul li {
	padding: 0 10px;
	float: left;
	background: url("img/border.gif") left top repeat-y;
}
#hr-footer ul li a{
	text-decoration: none;
}
#hr-footer ul li.left {
	background: none;
}
#hr-footer p {
	color: #888888; 
	text-align: center;
	width: 739px;
	float: left;
	margin-bottom: 15px;
	height: 1em;
}
#footer-left {
	display: block;
	float: left;
	width: 22px;
	height: 130px;
	background: url("img/footer_left.jpg") 10px top no-repeat;
}
#footer-center {
	display: block;
	float: left;
	width: 749px;
	height: 130px;
	background: url("img/footer_center.jpg") left top repeat-x;
}
#footer-right {
	display: block;
	width: 19px;
	height: 130px;
	float: left;
	background: url("img/footer_right.jpg") left top no-repeat;
}
/*  ------------------------------  */
/*  ---------a--------------------  */
/*  ------------------------------  */
a img {
	border: none;
	vertical-align: bottom;
}
a:link { 
	color: #ff00ff; 
}
a:visited { 
	color: #ff00ff; 
}
a:hover { 
	color: #FF88FF; 
}
a:active { 
	color: #FF88FF; 
}
/*  ------------------------------  */
/*  ---------hr-index-link----------  */
/*  ------------------------------  */
#hr-index-link {
	margin-top: 10px;
	width: 200px;
	float: left;
}
#hr-index-link img#qr {
	margin: 10px 0 0 50px; 
}
#hr-index-link p {
	margin-bottom: 12px;
	text-align: left;
	color: #ff00ff;
	font-weight: bold;
}
#hr-index-link a#tenpo{
	width: 180px;
	height: 50px;
	margin: 20px 0 2px 12px;
	display: block;
	background: url("img/leftnavi_tenpo.gif") left top no-repeat;
}
#hr-index-link a:hover#tenpo{
	margin: 22px 0 0 14px;
}
#hr-index-link a#tenpo em{
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

