/* ================================================================== */
/*                                                                    */
/* ! Salon Search */
/*                                                                    */
/* ------------------------------------------------------------------
*
*    1. Common
*       1.1. Area Search（トップ・下層）
*
*    2. Keyword Search（サロン検索 トップページ）
*
*    3. Result
*       3.1. Result - Keyword Search
*       3.2. Result - Area Search
*
*    4. Side Area
*
* =================================================================== */


/* ================================================================== */
/*                                                                    */
/* ! 1. Common */
/*                                                                    */
/* ================================================================== */

#slideBox {
	width: 464px;
	margin-left: 493px;
}

#mainHeader h1 a {
	width: 258px;
	height: 22px;
	background: url(/salon/images/title.png) no-repeat;
}

#catchDesc { /* base on core.css */
	background: url(/salon/images/header_desc.png) no-repeat;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 1.1. Area Search（トップ・下層） */
/*                                                                    */
/* ------------------------------------------------------------------ */

#areaSearch {
	position: relative;
	padding-top: 16px;
	padding-bottom: 16px;
}

	body.result #areaSearch {
		width: 790px;
		padding: 16px;
		overflow: hidden;
	}

body.index #areaSearch h2,
body.result #areaSearch h3 {
	position: absolute;
	top: 32px;
	width: 176px;
	height: 20px;
	margin-bottom: 32px;
	background: url(/salon/images/area_ttl.gif) no-repeat;
}

#areaSearch article {
	text-align: center;
}

#areaSearch .desc {
	position: absolute;
	left: 16px;
	top: 84px;
	text-align: left;
}


/* ---------------------------------
*    Prefecture Table
*/

body.index #map {
	margin: 0 0 0 62px;
}

#prefTable { background: url(/salon/images/area_preftable_bg2.gif) 0 0 repeat-y; }

	body.result #prefTable { background-position: -62px 0 }

body.index #prefTable ul {
	width: 853px;
	padding-right: 63px;
	background: url(/salon/images/area_preftable_bg1.gif) no-repeat;
}

	body.result #prefTable ul {
		width: 791px;
		overflow: hidden;
		background: url(/salon/images/area_preftable_bg1.gif) -62px 0 no-repeat;
	}

#prefTable li {
	float: right;
	width: 78px;
	margin-right: 1px;
}

#prefTable dl { width: 78px; padding-bottom: 10px; }

#prefTable dt {
	width: 78px;
	height: 20px;
	overflow: hidden;
	margin-bottom: 12px;
	text-align: center;
}
#prefTable dt img { vertical-align: bottom; }

#prefTable dd {
	width: 54px;
	padding: 0 0 2px 16px;
	background: url(/common/images/li_arrow.gif) 4px 0 no-repeat;
	text-align: left;
	color:#FFFFFF;
}
#prefTable a {
	color:#666666;
}


/* ---------------------------------
*    Link Color
*/

body.result #areaSearch a         { color: #444444; text-decoration: none; }
body.result #areaSearch a:visited { color: #444444; text-decoration: none; }
body.result #areaSearch a:hover   { color: #D20022; text-decoration: underline; }
body.result #areaSearch a:active  { color: #D20022; text-decoration: underline; }


/* ================================================================== */
/*                                                                    */
/* ! 2. Keyword Search（サロン検索 トップページ） */
/*                                                                    */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.1. キーワードでさがす */
/*                                                                    */
/* ------------------------------------------------------------------ */

body.index #keywordSearch {
	border-bottom: #CCCCCC 1px solid;
}

body.index #keywordSearch .contL {
	float: left;
	width: 294px;
}

body.index #keywordSearch .contR {
	float: right;
	width: 616px;
}

body.index #keyword-area {
	height: 60px;
	padding: 28px 0;
	background: url(/common/images/bg_dddddd_dot.gif);
}

body.index #keywordSearch h2 {
	width: 221px;
	height: 20px;
	margin-bottom: 32px;
	background: url(/salon/images/key_ttl.png) no-repeat;
}

body.index #keywordSearch form {
	position: relative;
	width: 608px;
	height: 52px;
	overflow: hidden;
	padding: 4px;
	background: url(/salon/images/key_search_big_bg.gif) center top no-repeat;
}

body.index #keywordContainer {
	display: inline;
	float: left;
	width: 392px;
	height: 52px;
	margin-left: 12px;
	background: url(/salon/images/key_search_big_box.gif) no-repeat;
}

body.index #keywordSearch form input#keyword {
	width: 368px;
	height: 28px;
	border: 0;
	padding: 12px;
	font-size: 24px !important;
	line-height: 24px;
	color: #333333;
	background: transparent;
}
* html body.index #keywordSearch form input#keyword {
	height: 24px;
}

body.index #keywordSearch form #submit {
	float: right;
	margin-right: 12px;
}


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 2.2. イマココ入力 */
/*                                                                    */
/* ------------------------------------------------------------------ */

/* ---------------------------------
*    イマココボタン
*/

body.index #geoBtn {
	position: absolute;
	left: 26px;
	top: 13px;
	width: 33px;
	height: 33px;
}

body.index #geoBtn a {
	width: 33px;
	height: 33px;
	background: url(/salon/images/key_search_btn_geo.jpg) 0 -66px no-repeat;
}
body.index #geoBtn a:hover  { background-position: 0 -33px; }
body.index #geoBtn a:active { background-position: 0 0; }

body.index #keywordSearch .help {
	height: 16px;
	padding: 16px 16px 0 34px;
	line-height: 16px;
	vertical-align: middle;
	text-align: right;
}

body.result #geoBtn {
	position: absolute;
	left: 4px;
	top: 4px;
	width: 24px;
	height: 24px;
}

body.result #geoBtn a {
	width: 24px;
	height: 24px;
	background: url(/salon/images/key_search_btn_geo.jpg) -33px -66px no-repeat;
}
body.result #geoBtn a:hover  { background-position: -33px -33px; }
body.result #geoBtn a:active { background-position: -33px 0; }

body.result .help {
	position: absolute;
	left: -31px;
	top: 5px;
	width: 16px;
	height: 16px;
}


/* ---------------------------------
*    イマココインフォメーション
*/

#geoHelp {
	width: 560px;
}

#geoHelp h4 {
	padding: 20px 16px;
	background: #DDDDDD;
}

#geoHelp .desc {
	padding: 32px 16px 22px 16px;
}

#geoHelp .desc p {
	padding-bottom: 10px;
}

#geoHelp .footnote {
	padding-top: 14px;
	color: #666666;
}


/* ================================================================== */
/*                                                                    */
/* ! 3. Result */
/*                                                                    */
/* ================================================================== */

#mainHeader { /* base on core.css */ position: relative; }


/* ---------------------------------
*    Keyword Search Box
*/

#mainHeader form {
	position: absolute;
	left: 616px;
	top: -2px;
	width: 300px;
	height: 32px;
}

#mainHeader #keywordContainer {
	display: inline;
	float: left;
	width: 200px;
	height: 32px;
	overflow: hidden;
	background: url(/salon/images/key_search_box.gif) no-repeat;
}

#mainHeader #keyword {
	width: 176px;
	height: 28px;
	padding: 2px 12px 0 12px;
	border: none;
	background: transparent;
	color: #FBFBFB;
}

	* html #mainHeader #keyword { margin-top: 4px; }
	*:first-child+html #mainHeader #keyword { margin-top: 4px; }

#mainHeader #submit {
	float: right;
}


/* ---------------------------------
*    Contents Area
*/

.contentHeader { /* base on core.css */
	width: 600px;
	padding-bottom: 14px;
}

.contentHeader h2 {
	height: 20px;
	width: 600px;
}

	body.keyword .contentHeader h2 { background: url(/salon/images/key_ttl.png) no-repeat; }
	body.area    .contentHeader h2 { background: url(/salon/images/area_ttl.png) no-repeat; }


/* ---------------------------------
*    Result Title
*/

#resultTitle {
	width: 600px;
	padding: 23px 16px 11px 16px;
	border-bottom: #CCCCCC 1px solid;
	background: #282828 url(/salon/images/area_result_ttl_bg.gif) no-repeat;
}

#resultTitle h3 { color: #FBFBFB; vertical-align: bottom; }
#resultTitle b { margin-right: 6px; padding: 4px 8px 2px 8px; background: #D20022; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.1. Result - Keyword Search */
/*                                                                    */
/* ------------------------------------------------------------------ */

#salonTree {
	width: 632px;
}

#salonTree li {
	position: relative;
	width: 632px;
	padding: 24px 0 16px 0;
	border-bottom: #CCCCCC 1px solid;
}

	* html #salonTree li { float: left; }
	*:first-child+html #salonTree li { float: left; }

#salonTree article {
	width: 632px;
}

#salonTree article header {
	width: 600px;
	padding: 0 16px;
}

#salonTree article .cm {
	position: relative;
	float: right;
	margin: -1px -4px 0 16px;
}

#salonTree article h4 {
	display: inline;
	font-weight: bold;
	color: #000000;
}

#salonTree article .hm {
	clear: both;
	width: 600px;
	margin: 16px 0 0 -2px;
}

#salonTree article .hm img {
	margin-right: 6px;
}

/* ---------------------------------
*    Salon Details
*/

dl.salonItem {
	clear:both;
	width:600px;
	margin:16px 0 0 0;
	padding: 0 16px;
}

.salonItem dt {
	clear: both;
	float: left;
	width: 20px;
	height: 13px;
	padding: 0 0 8px 0;
}

.salonItem dd {
	width: 574px;
	padding: 2px 0 6px 0;
	overflow: hidden;
}

.salonItem .address { background: url(/salon/images/result_icon_address.gif) no-repeat; }
.salonItem .tel     { background: url(/salon/images/result_icon_tel.gif) no-repeat; }
.salonItem .time    { background: url(/salon/images/result_icon_time.gif) no-repeat; }
.salonItem .holiday { background: url(/salon/images/result_icon_cal.gif) no-repeat; }
.salonItem .station { background: url(/salon/images/result_icon_train.gif) no-repeat; }


/* ---------------------------------
*    Button Container
*/

#salonTree .btnCont {
	position: absolute;
	bottom: 20px;
	width: 632px;
	height: 21px;
	overflow: hidden;
	text-align: right;
}

#salonTree .btnCont img { margin-left: 1px; }


/* ------------------------------------------------------------------ */
/*                                                                    */
/* ! 3.2. Result - Area Search */
/*                                                                    */
/* ------------------------------------------------------------------ */

#cityTree {
	width: 492px;
	padding: 32px 16px 0 124px;
}

#cityTree li { clear: both; }

#cityTree header {
	float: left;
	width: 18px;
	padding: 17px 0 0 0;
	background: url(/common/images/bdr_999999_dot_1px.gif) repeat-x;
}

#cityTree .cityList {
	float: right;
	width: 442px;
	padding: 17px 0 32px 0;
	background: url(/common/images/bdr_999999_dot_1px.gif) repeat-x;
}

.cityList ul { width: 100%; }

.cityList li { display: inline-table; }

	* html .cityList li { display: inline; word-break: keep-all; }
	*:first-child+html .cityList li { display: inline; word-break: keep-all; }

.cityList li a {
	padding: 0 0 0 16px;
	background: url(/common/images/li_arrow.gif) 0 -200px no-repeat;
	line-height: 165%;
}
.cityList li a:hover { background-position: 0 -250px; }


/* ================================================================== */
/*                                                                    */
/* ! 4. Side Area */
/*                                                                    */
/* ================================================================== */

#bnrMap {
	position: relative;
}

#bnrMap #bnrMapPlus {
	position: relative;
	left: -12px;
	top: -187px;
}

#info {
	width: 272px;
	margin: 0 27px 23px 16px;
	padding: 24px 0 24px 0;
	border-top: #444444 3px solid;
	border-bottom: #444444 3px solid;
}

#info h4 {
	height: 17px;
	margin-bottom: 24px;
	background: url(/salon/images/info_about_icon_ttl.gif) no-repeat;
}

#info-cm .logo {
	margin-bottom: 24px;
}

#info-cm h5 {
	font-weight: bold;
	color: #CCCCCC;
}

#info-cm p {
	padding: 8px 0 0 0;
	color: #999999;
}

#info-product {
	width: 272px;
	margin-top: 24px;
	padding-top: 16px;
	background: url(/common/images/bdr_666666_dot_1px.gif) repeat-x;
}

#info-product li {
	width: 272px;
	margin-top: 8px;
	height: 26px;
	line-height: 26px;
	vertical-align: middle;
	color: #999999;
}

/* 「アイコンについて」エリアから「キャンペーン参加サロン」アイコンを非表示 */
#info-product li:nth-child(3) {
	display: none;
}