@charset "UTF-8";

/* ===================================================================
 01_layout.css
 　レイアウト、各パーツデザイン
=================================================================== */


/*------------------------------------------------------------
 サイト全体のレイアウト
------------------------------------------------------------*/
body{
	background:url(../img/common/bg.png) repeat;
}

/* ヘッダ */
header{
	position:relative;
}

/* コンテンツ */
.content{
	width:1300px;
	padding:100px 150px 80px;
	margin:0 auto;
	background:#f6f5f3;
	position:relative;
	z-index:5;
}

/* コンテンツ：メインエリア */
.content .main{
	width:720px;
	padding:0 20px 20px 0;
	margin-right:30px;
	float:left;
}

/* コンテンツ：サイドエリア */
.content .side{
	width:250px;
	float:left;
}

.content:after,
.content .main:after,
.content .side:after {
	content: "";
	display: block;
	clear: both;
}

/* 下部バナーエリア */
.banner{
}

/* フッタ */
footer{
	padding:20px;
	position:relative;
}


@media print{
header,footer,
.side,.banner{
	display:none;
}
article header,article footer{
	display:block;
}
}



/* ===================================================================
 全ページ共通部分
=================================================================== */


/*------------------------------------------------------------
 ヘッダ
------------------------------------------------------------*/
header{
	background:url(../img/common/ill_town.png) no-repeat,url(../img/common/ill_town.png) no-repeat,#f2f1ee;
	background-size:220px 30px;
	background-position:calc(50% - 620px) 70px,calc(50% + 620px) 70px;
	position:relative;
	z-index:100;
}

header a{
	border-bottom:none;
}

header a img{
	-webkit-transition:opacity 0.2s;
			transition:opacity 0.2s;
}

header a:hover img{
	margin:0;
	opacity:0.7;
}

header .headmain{
	width:1000px;
	margin:0 auto;
	position:relative;
}



/* 最上部バー
----------------------------------------------- */
header .bar-headline{
	width:100%;
	height:20px;
	background:#4198a7;
	box-shadow:0 1px 2px 0 rgba(99,51,25,0.2);
}

header .bar-headline h2{
	margin-left:-70px;
	color:#ffffff;
	font-size:1.2rem;
	font-weight:normal;
	text-align:center;
	line-height:20px;
}


/* ロゴエリア
----------------------------------------------- */
header .headmain .headlogo{
	width:230px;
	height:230px;
	text-align:center;
	background:#f6f6f6;
	border:8px solid #595044;
	border-radius:115px;
	box-shadow:0px 2px 1px 0 rgba(99,51,25,0.3);
	position:absolute;
	top:-15px; left:0;
	z-index:10;
}

header .headmain .headlogo img.hl-ill{ /* 商人くん */
	width:60px;
	height:64px;
	margin-top:5px;
}

header .headmain .headlogo img.hl-logo{ /* 空き家ロゴ */
	width:190px;
	height:65px;
	border-bottom:none;
}

header .headmain .headlogo a{
	display:block;
	margin:4px auto;
	line-height:0;
}

header .headmain .headlogo small{
	color:#82776c;
}



/* グローバルナビ
----------------------------------------------- */
header nav{
	height:80px;
	position:relative;
	overflow:hidden;
}

header nav a{
	color:#595044;
	text-decoration:none;
}

header nav ul{
	width:780px;
	position:absolute;
	top:10px; left:230px;
}

header nav ul li{
	display:inline-block;
	width:190px;
	padding:5px;
	vertical-align:middle;
	font-weight:bold;
	font-size:15px;
	position:relative;
}

header nav ul li:after{
	content:"";
	height:40px;
	border-right:2px dashed #6a9d92;
	position:absolute;
	top:50%; right:0;
	margin-top:-20px;
}

header nav ul li:nth-last-child(1):after{
	content:none;
}


/* ----- ナビ：東近江市ロゴ ----- */
header nav ul li.h-logo{
	text-align:center;
	margin-top:-5px;
}

header nav ul li.h-logo a{
	color:#a5a5a5;
	font-size:1.1rem;
}

header nav ul li.h-logo img{
	width:150px;
}

header nav ul li.h-logo a:hover img{
	opacity:1;
}


/* ----- ナビ:基本メニュー ----- */
header nav ul li:not(:nth-last-child(1)) a{
	display:block;
	padding-left:65px;
	line-height:1.9rem;
	letter-spacing:2px;
	position:relative;
}

header nav ul li:not(:nth-last-child(1)) a:before{
	content:"";
	display:block;
	width:40px;
	height:40px;
	background-repeat:no-repeat;
	background-size:contain;
	vertical-align:middle;
	position:absolute;
	top:50%; left:10px;
	margin-top:-20px;
	-webkit-transition:background-image 0.3s;
			transition:background-image 0.3s;
}

header nav ul li:not(:nth-last-child(1)) a:hover{
	color:#352c21;
}

header nav ul li:not(:nth-last-child(1)):hover a:before{
	margin-top:-21px;
}


/* 空き家探しのご相談 */
header nav ul li:nth-child(1) a:before { 
	background-image:url(../img/common/nav_find.png); 
}
header nav ul li:nth-child(1) a:hover:before { 
	background-image:url(../img/common/nav_find-hov.png); 
}

/* 売りたい・貸したい */
header nav ul li:nth-child(2) a:before { 
	background-image:url(../img/common/nav_leave.png); 
}
header nav ul li:nth-child(2) a:hover:before { 
	background-image:url(../img/common/nav_leave-hov.png); 
}

/* 補助金・支援制度 */
header nav ul li:nth-child(3) a:before { 
	background-image:url(../img/common/nav_support.png); 
}
header nav ul li:nth-child(3) a:hover:before { 
	background-image:url(../img/common/nav_support-hov.png); 
}



/* パンくずエリア
----------------------------------------------- */
header .bar-bottom{
	width:100%;
	padding:10px;
	background:#dbd8d2;
	border-bottom:5px solid #da5317;
	box-shadow:0 2px 2px 0 rgba(99,51,25,0.2);
	position:relative;
}

header .bar-bottom .breadcrumbs{
	width:1000px;
	padding-left:250px;
	margin:0 auto;
	color:#726b65;
	font-size:1.1rem;
}

header .bar-bottom .breadcrumbs a{
	margin-right:5px;
	color:#726b65;
}

header .bar-bottom .breadcrumbs a:hover{
	color:#4198a7;
}




/*------------------------------------------------------------
 右サイドエリア
------------------------------------------------------------*/
.side{
}

.side a{
	border-bottom:none;
}

.side a img{
	max-width:100%;
	box-shadow:1px 1px 2px 0 rgba(99,51,25,0.2);
}

.side a:hover img{
	box-shadow:none;
}

.side section{
	margin-bottom:50px;
	text-align:center;
	position:relative;
}

.side section:after{
	content:"";
	display:block;
	width:230px;
	height:5px;
	background:url(../img/common/parts_border.png) repeat;
	background-size:contain;
	position:absolute;
	bottom:-25px; left:50%;
	margin-left:-115px;
}

.side section:nth-last-child(1):after{
	content:none;
}

.side section dl{
	margin-bottom:20px;
}

.side section:nth-last-child(1) li{
	margin-bottom:10px;
}

.side table{
	margin:0 auto;
}


/* ログイン時表示
----------------------------------------------- */
.side .login{
	padding: 3px 20px;
	text-align:center;
	color:#d95317;
	border:3px solid #d95317;
	border-radius: 2px;
	background:#ffffff;
}

.side .login p{
	font-size: 1.6rem;
	margin-bottom:5px;
}

.side .login a.btn{
	width:100%;
	margin:10px auto;
	padding: 4px 25px 4px 40px;
	font-size:1.4rem;
	background:#d95317;
	border-color:#d95317;
	-webkit-transition: opacity 0.3s;
	        transition: opacity 0.3s;
}

.side .login a.btn:nth-child(3){
	background:#9E9E9E;
	border-color:#9E9E9E;
}

.side .login a.btn:hover{
	color:#ffffff;
	opacity:0.7;
}

.side .login a.btn:hover:before{
	border-color:#ffffff;
}



/* 電話でのご相談
----------------------------------------------- */
.side .cntct-info{
	padding:0;
	border:none;
	background:none;
}

.side .cntct-info dl.tell{
	margin:0;
}

.side .cntct-info dl.tell dt{
	margin: 0 auto 10px;
	padding: 1px 8px;
	font-size: 1.5rem;
	border-radius: 10px;
}

.side .cntct-info dl.tell dd{
	font-size:2.8rem;
}

.side .cntct-info dl.tell dd.time{
	font-size:1.2rem;
	vertical-align:middle;
}

.side .cntct-info dl.tell dd.time span{
	border-radius:2px;
	vertical-align:middle;
}

.side .cntct-info dl.tell dd.time em{
	font-size:1.8rem;
	vertical-align:middle;
}

.side .cntct-info:after{
	content:none;
}


/* カウンター
----------------------------------------------- */
.side .counter{
	margin:20px 0;
	padding:10px;
	text-align:center;
	background:#ffffff;
	border:5px solid #d1cdc4;
	border-radius:2px;
}

.side .counter small{
	font-size:1.4rem;
}

.side .counter h3 em{
	margin:auto 5px;
	font-size:4.0rem;
	color:#d65317;
}


/* バナーエリア
----------------------------------------------- */
.banner{
	text-align:center;
}

.banner a{
    max-width:100%;
	display:inline-block;
	border-bottom:none;
}

.banner a img{
	display:inline-block;
}

.banner li.login-ban{ /* ログインバナー */
    margin-top: 20px;
}


/* サイドナビ最下部
----------------------------------------------- */
.side .side-other{
}

.side .side-other a{
	display:block;
}

.side .side-other table{
	margin-top:15px;
}



/* 空き家の調査ページ用サイドナビ
----------------------------------------------- */
.side .side-utilize{
	text-align:left;
}

.side .side-utilize li a img{
	width:80px;
	height:80px;
	margin-right:10px;
	box-shadow:none;
	float:left;
	-webkit-transition:opacity 0.3s;
			transition:opacity 0.3s;
}

.side .side-utilize li a:hover img{
	margin:0 10px 0 0;
	opacity:0.8;
}

.side .side-utilize dl:after{
	content: "";
	display:block;
	clear:both;
}

.side .side-utilize dt h3{
	font-size:1.8rem;
	line-height:1.2em;
}

.side .side-utilize dt.sub{
	margin-top:3px;
	font-size:12px;
	font-weight:normal;
}





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


/* フッタ前バナーエリア
----------------------------------------------- */
.footer-banner{
	margin-top:40px;
	padding:40px;
}

.footer-banner a{
	display:block;
	max-width:200px;
	margin:0 auto;
	border-bottom:none;
}



/* フッタ
----------------------------------------------- */
footer{
	color:#fff;
	background:#595044;
	box-shadow:0 -2px 2px 0 rgba(99,51,25,0.2);
}

footer:after{
	content:"";
	display:block;
	width:115px;
	height:100px;
	background:url(../img/common/ill_footer.png) no-repeat; 
	background-size:contain;
	box-shadow:none;
	position:absolute;
	top:0; left:70%;
	margin-top:-85px;
}

footer a{
	border-bottom:none;
}


/* フッタロゴ
----------------------------------------------- */
footer h1{
	width:300px;
	margin:5px auto;
}

footer h1 img{
	width:300px;
	height:auto;
	-webkit-transition:opacity 0.2s;
			transition:opacity 0.2s;
}

footer h1:hover img{
	margin:0;
	opacity:0.8;
}


/* 所在地・連絡先
----------------------------------------------- */
footer address{
	font-size:1.3rem;
	color:#d8d7d3;
	text-align:center;
}


/* フッタナビ
----------------------------------------------- */
footer nav{
	max-width:800px;
	margin:30px auto;
}

footer nav ul{
	width:200px;
	float:left;
}

footer nav ul li{
	margin:5px;
	padding:0 15px;
	font-size:12px;
}

footer nav ul li a{
	color:#ffffff;
	padding-left:10px;
	position:relative;
}

footer nav ul li a:hover{
	padding-left:12px;
	color:#d5d1c8;
}

footer nav ul li a:hover:before{
	content:"";
	width: 4px;
	height: 4px;
	border-top:2px solid #ffffff;
	border-right:2px solid #ffffff;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
	position:absolute;
	top:50%; left:0;
	margin-top:-3px;
}

/* コピーライト表記 */
footer small{
	display:block;
	text-align:center;
	font-size:11px;
	color:#fff;
}


/* Page top
----------------------------------------------- */
footer a.pagetop {
    display: block;
	width:105px;
	height:85px;
	background:url(../img/common/parts_gototop.png) no-repeat;
	background-size:contain;
    position: fixed;
    bottom: 20px; right: 20px;
	z-index:200;
	-webkit-transition:opacity 0.2s;
			transition:opacity 0.2s;
}

footer a.pagetop:hover {
    opacity:0.8;
}