@charset "UTF-8";

body {
	background-repeat: repeat-x;
	background-position: center 0%;
	background-image: url(../common_img/head_bg.png);
}

html {
	font-family:  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	-webkit-text-size-adjust: 100%;
	-webkit-text-size-adjust: none;
	font-size: 14px;
	
}

.clear {
	clear: both;
	height: 0px;
}

/*=============================================================
	COMMON BASE
==============================================================*/

#wrapper {
	width: 960px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#header {
	float: left;
	height: 101px;
	width: 960px;
	background-image: url(../common_img/head_green.gif);
	background-repeat: repeat-x;
}


#title-logo {
	width: 345px;
	height: 55px;
	margin-top: 25px;
	margin-left: 5px;
	float: left;
}

#head-copy {
	width: 590px;
	float: right;
	text-align: right;
	margin-top: 65px;
	font-size: 14px;
	color: #666666;
	line-height: 100%;
}

#navi {
	height: 55px;
	clear: both;
	float: left;
	width: 960px;
}

#navi ul li {
	float: left;
}


#contents {
	clear: both;
	float: left;
	width: 960px;
	background-color: #FFFFFF;
}


#footer {
	background-image: url(../common_img/foot_bg.png);
	background-repeat: repeat-x;
	width: 100%;
	height: 86px;
	clear: both;
	color: #FFFFFF;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	float: left;
	display: block;
}

#footer-wrap {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}

#footer-info {
	height: 50px;
	width: 960px;
}

#footer-left {
	width: 700px;
	float: left;
	margin-top: 20px;
	font-size: 12px;
	line-height: 100%;
}

#footer-right {
	float: right;
	font-size: 16px;
	font-weight: bold;
	width: 180px;
	text-align: right;
	margin-top: 20px;
	line-height: 100%;
}


#copyright {
	width: 960px;
	height: 35px;
	font-size: 10px;
	text-align: right;
	line-height: 35px;
	margin-top: 1px;
}


/*-- viewer -------------------------------*/

#viewer {
	width: 960px;
	height: 380px;
	text-align: left;
	overflow: hidden;
	position: relative;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-color: #FFFFFF;
}

#viewer img {
	top: 0;
	left: 0;
	position: absolute;
}


/*---------------------------------------------------------------
	PAGE TOP
----------------------------------------------------------------*/
#page-top {
	width: 54px;
	height: 55px;
	position: fixed;
	bottom: 30px;
	right: 40px;
	font-size: 100%;
}

#page-top a {
	width: 54px;
	height: 55px;
}

/*=============================================================
	CONTENTS
==============================================================*/

#title {
	width: 960px;
	height: 55px;
	float: left;
}

#main {
	width: 880px;
	float: left;
	margin-left: 40px;
	margin-top: 40px;
	margin-bottom: 40px;
	margin-right: 40px;
}

#main a:hover img {
	opacity:0.7;
    filter:alpha(opacity=70);
	-moz-opacity:0.7;
    -ms-filter: "alpha( opacity=70 )";
}

/*---------------------------------------------------------------
	嵯峨苑について
----------------------------------------------------------------*/

/*---------------------------------------------------------------
	事業内容
----------------------------------------------------------------*/

.act-contents-wrap {
	float: left;
	width: 880px;
	margin-bottom: 40px;
	margin-top: 20px;
	clear: both;
}

.left-photo {
	float: left;
	height: 220px;
	width: 310px;
}

.act-right-wrap {
	float: right;
	width: 540px;
}

.act-subject {
	color: #a66d46;
	font-size: 24px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	width: 540px;
	margin-bottom: 20px;
	float: left;
	border-bottom: 1px solid #BBBBBB;
}

.act-text {
	font-size: 14px;
	line-height: 200%;
}

#act-btn {
	width: 100%;
	float: left;
	text-align: center;
}

/*---------------------------------------------------------------
	施工例
----------------------------------------------------------------*/

#portfolio-list {
	width: 880px;
	float: left;
	overflow-x: hidden;
	overflow-y: hidden;
	margin-top: 50px;
}

#portfolio-list ul {
	width: 940px;
}

#portfolio-list ul li {
	width: 420px;
	height: 120px;
	margin-right: 40px;
	margin-bottom: 40px;
	float: left;
}

#main2 {
	width: 900px;
	float: left;
	margin-left: 30px;
	margin-top: 30px;
	margin-bottom: 30px;
	margin-right: 30px;
}

#linkback {
	width: 920px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right: 20px;
	float: left;
	border-bottom: 2px solid #99CC00;
	padding-bottom: 10px;
}

#linkback a {
	color: #0088FF;
	text-decoration: none;
}

#linkback a:hover {
	color: #99cc00;
}

#main2 a {
	color: #0088FF;
	text-decoration: none;
}

#main2 a:hover {
	color: #99cc00;
}

#example-info {
	width: 900px;
	float: left;
}

#example-left {
	width: 440px;
	float: left;
}

#example-name {
	width: 440px;
	font-size: 22px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	padding-bottom: 10px;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 20px;
}
#example-text {
	font-size: 14px;
	line-height: 180%;
}

.example-orange {
	font-size: 14px;
	color: #FF8B00;
	font-weight: bold;
}

#example-right {
	width: 440px;
	float: right;
	margin-top: 40px;
}

#example-right img {
	border: 1px solid #CCCCCC;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
}

#example-list   {
	width: 900px;
	float: left;
	clear: both;
	margin-top: 40px;
	overflow-x: hidden;
	overflow-y: hidden;
}

#example-list ul {
	width: 930px;
	float: left;
}

#example-list li {
	width: 198px;
	height: 132px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	border: 1px solid #CCCCCC;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
}

#warning {
	color: #FF0000;
	font-size: 14px;
	float: left;
	clear: both;
	width: 900px;
	margin-top: 10px;
}

/*---------------------------------------------------------------
	お問い合わせ
----------------------------------------------------------------*/

#contact-left {
	width: 400px;
	float: left;
	margin-top: 40px;
}

#contact-right {
	width: 430px;
	float: right;
	margin-top: 40px;
}


#company-name {

}

#contact-right a {
	color: #0088FF;
	text-decoration: none;
}

#contact-right a:hover {
	color: #99cc00;
}

#company-name {
	font-size: 20px;
}
#contact-map {
	width: 880px;
	clear: both;
	float: left;
	margin-top: 40px;
}

/*---------------------------------------------------------------
	ニュース
----------------------------------------------------------------*/
#news {
	width: 880px;
	float: left;
	margin-bottom: 20px;
}



#news dl {
	margin-bottom: 10px;
	margin-left: 12px;
}

#news dt {
	clear: left;
	float: left;
	padding-left: 0px;
	color: #669900;
	background-image: url(../images/arrow_red.gif);
	background-repeat: no-repeat;
	background-position: 0px;
	line-height: 14px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 20px;
	margin-left: 0px;
}

#news dd {
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 100px;
	line-height: 14px;
}

#news a {
	color: #3388DD;
	text-decoration: none;
}

#news a:hover {
	color: #3388DD;
	text-decoration: underline;
}


#main .news {
	width: 880px;
	float: left;
	clear: both;
}

#main .news img {
	width: 100%;
	height: auto;
}