@charset "UTF-8";

/* CSS Infomation --------------------

Website: 有限会社 賃貸倶楽部
Design office: contrast - http://www.cs321.jp/

File name: home.css
Description: トップページのスタイルです。
Date: 2010/07/24
Editors: Wataru Shitami

Table of contents:

  1. 各エリアトップページへのリンク
	2. 3カラムレイアウト
	3. 共通スタイル
		3.1. 見出し
		3.2. サムネイル

Grid System:

  Full width: 960px
  Content width: 940px
  Column width: 40px
  Columns: 16
  Margin: 20px

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



/* Update history --------------------

Version: 2.0.0
Date: 2010/07/24
Last editor: Wataru Shitami
Contents of update: -

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



/* 1. 各エリアトップページへのリンク --------------------*/

#area-link {
	width: 940px;
	padding-top: 40px;
	margin-bottom: 40px;
}

#area-link h2 {
	padding-left: 17px;
	background: url(../img/icon-winter-s.png) no-repeat 0 2px;
	font-size: 11px;
	font-weight: bold;
	margin-bottom: 5px;
}

#area-link ul {
	width: 960px;
	margin-right: -20px;
}

#FreeRent {
	width: 940px;
	margin-bottom: 40px;
}

#FreeRent ul {
	width: 960px;
	margin-right: -20px;
}

#FreeRent li {
	float: left;
	margin-right: 20px;
	display: inline;
}

/* 2. 3カラムレイアウト --------------------*/

#container {
	margin: 0 auto 100px;
}

#left,
#center,
#right { overflow: hidden; }

#left,
#right { width: 220px; }

#left,
#center {
	float: left;
	margin-right: 20px;
	display: inline;
}

#center { width: 460px; }

#right { float: right; }

/* 3. 共通スタイル --------------------*/

/* 3.1. 見出し */

#left h2,
#center h2,
#right h2 {
	padding-left: 28px;
	background: url(../img/icon-winter-l.png) no-repeat 0 1px;
	border-bottom: 1px dotted #CCC;
	font-size: 116%; /*15px*/
	margin-bottom: 20px;
	position: relative;
}

#left h2,
#right h2 { width: 197px; }

#center h2 { width: 437px; }

.update {
	display: inline-block;
	padding-left: 18px;
	background: url(../../img/update.png) no-repeat 0 3px;
	font-size: 13px;
	font-weight: bold;
	position: absolute;
	right: 10px;
	bottom: 1px;
}

/* 3.2. サムネイル */

.thumb-latest,
.thumb-first {
	width: 290px;
	height: 140px;
	padding: 10px 10px 10px 160px;
	background-color: #E6E6E6;
	margin-bottom: 20px;
	position: relative;
	cursor: pointer;
}

.thumb-latest:hover,
.thumb-first:hover { background-color: #D9D9D9; }

.thumb-latest h3,
.thumb-first h3 {
	padding-left: 50px;
	font-size: 116%; /*15px*/
	margin: 3px 0 10px;
}

.thumb-latest h3 { background: url(../img/new.png) no-repeat 0 2px; }

.thumb-first h3 { background: url(../img/first.png) no-repeat 0 7px; }

.thumb-latest h3 span,
.thumb-first h3 span {
	font-size: 13px;
	font-weight: bold;
}

.thumb-latest ul,
.thumb-first ul { margin-left: 5px; }

.room-more {
	width: 2em;
	padding-right: 15px;
	background: url(../img/arrow-m.png) no-repeat right 6px;
	position: absolute;
	bottom: 10px;
	right: 25px;
}

.room-img {
	position: absolute;
	top: 10px;
	left: 10px;
}

.thumb-outline {
	width: 110px;
	height: 80px;
	overflow: hidden;
	padding: 10px 10px 10px 100px;
	background-color: #E6E6E6;
	font-size: 85%;
	line-height: 1.8;
	margin: 0 20px 20px 0;
	float: left;
	display: inline;
	position: relative;
	cursor: pointer;
}

.thumb-outline:hover { background-color: #D9D9D9; }

.thumb-outline li span {
	color: #F00;
	margin-left: 0.5em;
}

.thumb-outline p {
	position: absolute;
	top: 10px;
	left: 10px;
}

/* 4. 左カラム --------------------*/

/* 4.1. 地図で探す */

#map { margin-bottom: 40px; }

#map-img a {
	display: block;
	width: 220px;
	height: 220px;
	overflow: hidden;
	position: relative;
	margin-bottom: 5px;
}

#map-img img {
	position: absolute;
	top: 0;
	left: 0;
}

#map-link a {
	display: block;
	width: 197px;
	padding: 2px 23px 2px 0;
	background: url(../img/arrow-m.png) #E6E6E6 no-repeat 202px 8px;
	color: #000;
	text-align: right;
}

#map-link a:hover {
	background-color: #D9D9D9;
	text-decoration: none;
}

/* 4.2. 地域で探す */

#area { margin-bottom: 40px; }

#area-img { margin-bottom: 10px; }

#area-img a {
	display: block;
	width: 220px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

#area-img img {
	position: absolute;
	top: -220px;
	left: 0;
}

#area ul {
	width: 228px;
	margin-right: -8px;
}

#area li {
	width: 69px;
	margin-right: 7px;
	float: left;
	display: inline;
}

#area li a {
	display: inline-block;
	padding-left: 13px;
	background: url(../img/arrow-s.png) no-repeat 0 5px;
	font-size: 85%; /*11px*/
}

/* 4.3. カテゴリーで探す */

#category { margin-bottom: 40px; }

#category a {
	display: block;
	width: 190px;
	height: 20px;
	padding: 6px 0 4px 30px;
	border-bottom: 1px dotted #CCC;
	background: url(../img/category.png) no-repeat;
	font-size: 85%; /*11px*/
	color: #000;
}

#category a:hover {
	background-color: #EFEFEF;
	text-decoration: none;
}

#family a { background-position: 5px 5px; }

#couple a { background-position: 5px -25px; }

#single a { background-position: 5px -55px; }

#convenient a { background-position: 5px -85px; }

#suburban a { background-position: 5px -115px; }

#japanese a { background-position: 5px -145px; }

#closet a { background-position: 5px -175px; }

#rc a { background-position: 5px -205px; }

#tv a { background-position: 5px -235px; }

#secure a { background-position: 5px -265px; }

#new a { background-position: 5px -295px; }

#designers a { background-position: 5px -355px; }

#pet a { background-position: 5px -325px; }

/* 4.4. 条件を指定して探す */

#condition { margin-bottom: 40px; }

#condition li a {
	display: block;
	width: 220px;
	height: 100px;
	overflow: hidden;
	position: relative;
}

#apamanshop { margin-bottom: 10px; }

#condition img {
	position: absolute;
	left: 0;
}

#apamanshop img { top: 0; }

#apamanshop img:hover { top: -100px; }

#search img { top: -440px; }

#search img:hover { top: -500px; }

#condition p {
	font-size: 84.6%;
}

/* 4.4. 条件を指定して探す */

#review { margin-bottom: 40px; }

/* 4.5. お客様サポート */

#support { margin-bottom: 40px; }

#tips { margin-bottom: 10px; }

#support a {
	display: block;
	width: 214px;
	height: 54px;
	padding: 2px;
	border: 1px dotted #CCC;
	position: relative;
}

#support a:hover { border-color: #666; }

#support a span {
	display: inline-block;
	width: 214px;
	height: 54px;
	overflow: hidden;
	position: relative;
}

#support img {
	position: absolute;
	left: 0;
}

#tips img { top: -560px; }

#service img { top: -614px; }

#support p {
	width: 214px;
	font-size: 85%; /*11px*/
	margin: 0 3px;
}

/* 5. 中央カラム --------------------*/

/* 5.1. 新着情報 */

#info {
	margin-bottom: 20px;
}

.InfoShop {
	width: 460px;
}

.InfoShop h4 {
	padding-left: 17px;
	background: url(../../img/icon-winter-s.png) no-repeat 0 2px;
	font-weight: bold;
	font-size: 85%;
	margin-bottom: 5px;
	float: left;
}

.InfoMore {
	float: right;
}

.InfoMore a {
	display: inline-block;
	padding-left: 13px;
	background: url(../img/arrow-s.png) no-repeat 0 5px;
	font-size: 85%;
}

#info ol {
	width: 480px;
	margin-right: -20px;
}

#info-list {
	width: 220px;
	font-size: 85%; /*11px*/
	float: left;
}

#info-list dl { overflow: hidden; }

#info-list dt { font-weight: bold; }

#info-list dt span {
	color: #F00;
	margin-left: 0.5em;
}

#info-list dt span.topic { color: #F39800; }

#info-list dd { margin-bottom: 10px; }

#info-list dd span { font-weight: bold; }

#info-list dd a { margin-left: 0.5em; }

#info-list .thumb-outline { font-size: 100%; }

.date { font-weight: bold; }

.title { line-height: 1.4; }

#info-list h3 {
	padding-left: 17px;
	background: url(../../img/icon-winter-s.png) no-repeat 0 2px;
	font-weight: bold;
	margin-bottom: 10px;
}

#twitter {
	width: 220px;
	height: 340px;
	float: right;
}

/* 5.2. 新着空室物件 */

#vacancy { margin-bottom: 20px; }

#vacancy ol {
	width: 480px;
	margin-right: -20px;
}

/* 5.3. オススメ物件 --------------------*/

#recommend { margin-bottom: 20px; }

#recommend ul {
	width: 480px;
	margin-right: -20px;
}

.shop {
	font-weight: bold;
	color: #999;
	line-height: 1.4;
}

.room-name {
	font-size: 13px;
	font-weight: bold;
}

/* 5.4. 人気物件ランキング --------------------*/

#popular { margin-bottom: 20px; }

#popular ol {
	width: 480px;
	margin-right: -20px;
}

.pv { display: block; }

.pv span {
	color: #F00;
	margin-left: 0.5em;
}

#second,
#third { font-weight: bold; }

#second .pv,
#third .pv {
	padding-left: 25px;
	font-weight: bold;
}

#second { background: url(../../img/second.png) no-repeat 0 1px; }

#third { background: url(../../img/third.png) no-repeat 0 1px; }

/* 5.5. トピックス */

#topics { margin-bottom: 20px; }

#topic-list {
	width: 280px;
	font-size: 85%; /*11px*/
	float: left;
}

#topic-list dl { margin-bottom: 20px; }

#topics dt { font-weight: bold; }

#topics dt span {
	color: #F00;
	margin-left: 0.5em;
}

#topics dd { margin-bottom: 10px; }

#topics dd a {
	display: block;
	font-size: 13px;
}

#new-topic {
	width: 160px;
	height: 250px;
	float: right;
	display: inline;
	position: relative;
}

#new-topic h3 {
	width: 160px;
	height: 80px;
	position: absolute;
	top: 170px;
}

#new-topic h3 .date { display: block; }

.date span {
	color: #F00;
	margin-left: 0.5em;
}

#new-topic p a {
	display: block;
	width: 140px;
	height: 140px;
	padding: 10px;
	background-color: #E6E6E6;
}

#new-topic p a:hover { background-color: #D9D9D9; }

/* 6. 右カラム --------------------*/

/* 6.1. お店に行く */

#shop { margin-bottom: 20px; }

.shop-outline { margin-bottom: 20px; }

#area-link .thumb-outline, .shop-outline .thumb-outline {
	background-image: url(../img/arrow-m.png);
	background-repeat: no-repeat;
	background-position: 200px 80px;
	margin-bottom: 10px;
}

#area-link h3, .shop-outline h3 {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 6px;
}

.tel {
	font-weight: bold;
	color: #E4007F;
}

.contact,
.reserve {
	width: 88px;
	height: 24px;
	float: left;
	margin-right: 10px;
	display: inline;
}

.contact a,
.reserve a {
	display: block;
	width: 88px;
	height: 24px;
	overflow: hidden;
	position: relative;
}

.contact img,
.reserve img {
	position: absolute;
	top: 0;
	left: -220px;
}

.contact img { left: -220x; }

.reserve img { left: -308px; }

.contact img:hover,
.reserve img:hover { top: -24px; }

.twitter {
	width: 24px;
	height: 24px;
	float: left;
}

.twitter a {
	display: block;
	width: 24px;
	height: 24px;
	overflow: hidden;
	position: relative;
}

.twitter img {
	position: absolute;
	top: 0;
}

#twitter-n img { left: -396px; }

#twitter-h img {
	top: -24px;
	left: -396px;
}

#twitter-i img { left: -420px; }

#twitter-o img {
	top: -24px;
	left: -420px;
}

/* 6.2. スタッフ */

#staff { margin-bottom: 40px; }

#staff .thumb-outline {
	background-image: url(../img/morimori-m.gif);
	background-repeat: no-repeat;
	background-position: 100px 14px;
}

#staff .shop,
.staff-name { padding-left: 30px; }

.staff-name {
	font-size: 13px;
	font-weight: bold;
}

#staff-link a {
	display: block;
	width: 197px;
	padding: 2px 23px 2px 0;
	background: url(../img/arrow-m.png) #E6E6E6 no-repeat 202px 8px;
	color: #000;
	text-align: right;
}

#staff-link a:hover {
	background-color: #D9D9D9;
	text-decoration: none;
}

/* 6.3. 関連リンク */

#link li { margin-bottom: 10px; }

#link a {
	display: block;
	width: 220px;
	overflow: hidden;
	position: relative;
}

#link img {
	position: absolute;
	left: -220px;
}

#housing-lobby a { height: 100px; }

#housing-lobby img { top: -48px; }

#recruit a,
#owner a,
#oleth a,
#agent a { height: 60px; }

#recruit img { top: -148px; }

#recruit img:hover { top: -208px; }

#owner img { top: -268px; }

#owner img:hover { top: -328px; }

#oleth img { top: -388px; }

#oleth img:hover { top: -448px; }

#gallery-hexa a { height: 160px; }

#gallery-hexa img { top: -508px; }

#agent img { top: -668px; }

#agent img:hover { top: -728px; }