@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://
 * File name: contents.css
 * Summary:   ページ・コンテンツごとの固有スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home          トップページ
 *     =2    news          お知らせ
 *     =3    construction  新築
 *     =4    renovation    リフォーム
 *     =5    store         店舗
 *     =6    estate        不動産
 *     =7    example       施工例
 *     =8    company       会社案内
 *     =9    contact       お問い合わせ
 *     =10   privacy       プライバシーポリシー
 *
 * ===============================================================
*/



/** =1
 * ========================================
 * home - トップページ
 * ========================================
 */

/* main_image */
#home .main_image  {
	margin-bottom: 100px;
	height: 530px;
	background: none;
	overflow:hidden;
}
#home .main_image ul,
#home .main_image li {
	list-style: none;
	margin: 0;
	padding: 0;
	float: left;
	height: 265px;
}
#home .main_image li img {
	height: 100%;
	width: auto;
}
#home .main_image ul{
	position: relative;
	z-index: -1;
}
.slick-list { overflow:hidden; }
#home .main_image .textarea {
	max-width: 100%;
	width: 100%;
	text-align: center;
	font-size: 35px;
	font-weight: normal;
	text-shadow: 1px 2px 0px #ffffff;
	letter-spacing: 0.05em;
	padding: 25px 0;
	color: #4aa500;
	position: absolute;
	z-index: 9999;
	margin-top: 210px;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	background: -moz-linear-gradient(top,
				rgba(255,255,255,0.5),
				rgba(255,255,255,1),
				rgba(255,255,255,0.5)
				); /* Firefox用 */
	background: -webkit-gradient(linear, left top, left bottom,
				from(rgba(255,255,255,0.5)),
				color-stop(0.5,rgba(255,255,255,1)),
				to(rgba(255,255,255,0.5))
				); /* Safari,Google Chrome用 */
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#home .main_image  {
			margin-bottom: 60px;
			height: 300px;
			background: none;
		}
		#home .main_image ul,
		#home .main_image li {
			list-style: none;
			margin: 0;
			padding: 0;
			float: left;
			height: 150px;
		}
		#home .main_image .textarea {
			font-size: 4.5vw;
			padding: 2vw 0;
			margin-top: 115px;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 770px) and (max-width: 960px) {
		#home .main_image  {
			margin-bottom: 80px;
			height: 400px;
		}
		#home .main_image ul,
		#home .main_image li {
			height: 200px;
		}
		#home .main_image .textarea {
			padding: 20px 0;
			margin-top: 150px;
		}
	}



/* contents-title */
#home .l-article h3 .caption {
	font-size: 45%;
	letter-spacing: 0.1em;
	padding-left: 1em;
	position: relative;
	top: -0.4em;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#home .l-article h3 .caption {
			text-shadow: 1px 1px 0px #f2f2e9,-1px -1px 0px #f2f2e9,0px 0px 10px #f2f2e9;
		}
	}

/* contents-category */
#home .l-article.category .categoryBox{
	margin: 0 -1.75% -2em;
}
#home .l-article.category .categoryBox a {
	color: #594441;
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
#home .l-article.category .categoryBox a:hover {
	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	opacity: 0.60;
}
/* chome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#home .l-article.category .categoryBox a {
		transition: none;
	}
	#home .l-article.category .categoryBox a:hover {
		opacity: none;
	}
}
#home .l-article.category .categoryBox .thum{
	float: left;
	width: 30.3%;
	margin: 0 1.5% 2em;
	padding-bottom: 1.5em;
	background: #FFFFFF;
}
#home .l-article.category .categoryBox img{
	padding-bottom: 1.5em;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}
#home .l-article.category .categoryBox h4{
	font-size: 165%;
	letter-spacing: 0.1em;
}
#home .l-article.category .categoryBox p{
	margin: 1em 1.5em 0;
	line-height: 1.4;
}
#home .l-article.category .categoryBox .btn{
	padding: 1em 0;
	display: block;
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#home .l-article.category .categoryBox{
			margin: 0em 0 -2em;
		}
		#home .l-article.category .categoryBox .thum{
			float: none;
			width: 92%;
			margin: 0 2.5% 2em;
			padding-right: 3%;
			padding-bottom: 0;
		}
		#home .l-article.category .categoryBox img{
			float: left;
			width: 50%;
			padding-bottom: 0;
			-webkit-border-radius: 4px 0 0 4px;
			-moz-border-radius: 4px 0 0 4px;
			border-radius: 4px 0 0 4px;
		}
		#home .l-article.category .categoryBox h4,
		#home .l-article.category .categoryBox p{
			float: right;
			width: 46%;
		}
		#home .l-article.category .categoryBox h4{
			margin-top: 5vw;
			font-size: 4vw;
		}
		#home .l-article.category .categoryBox p{
			margin: 1em 0 0;
			font-size: 2.6vw;
		}
		#home .l-article.category .categoryBox .btn{
			font-size: 2.4vw;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 770px) and (max-width: 960px) {
		#home .l-article.category .categoryBox h4{
			font-size: 3vw;
		}
		#home .l-article.category .categoryBox p{
			font-size: 1.8vw;
		}
		#home .l-article.category .categoryBox .btn{
			font-size: 1.5vw;
		}
	}

/* contents-exampleBox */
#home .l-article.example .exampleBox{
	margin: 0 -1% -2em;
}
#home .l-article.example .thum{
	float: left;
	width: 23%;
	margin: 0 1% 2em;
}
#home .l-article.example .thum .photo{
	margin-bottom: 1.5em;
}
#home .l-article.example .thum .photo p{
	background: rgba(0,0,0,0.4);
	display: block;
	position: relative;
	z-index: 2;
	height: 3.5em;
	margin-top: -3.5em;
	color: #FFFFFF;
	font-size: 90%;
}
#home .l-article.example .thum .photo p span{
	margin: 0.2em 5% 0 5%;
	position: relative;
	overflow: hidden;
	line-height: 1.2;
}
#home .l-article.example .thum .photo p span.category{
	background: #FFFFFF;
	border: 1px solid #4aa500;
	color: #4aa500;
	font-size: 65%;
	padding: 0 1em;
	display: inline;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
#home .l-article.example .thum .photo p span.title{
	display: block;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#home .l-article.example .exampleBox{
			margin: 0 -1% -2em;
		}
		#home .l-article.example .thum{
			float: left;
			width: 48%;
			margin: 0 1% 2em;
		}
	}

/* contents-news */
#home .l-article.news .l-inner {
	max-width: 900px;
	margin: 0 auto;
}
#home .l-article.news a dl {
	color: #594441;
}
#home .l-article.news a:hover dd {
	color: #4aa500;
}
#home .l-article.news dl {
	border-bottom: 1px solid #dadada;
	padding: 1em 0.5em;
}
#home .l-article.news dl:hover {
	background-color: rgba(255,255,255,0.25);
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
#home .l-article.news dl dt {
	float: left;
	width: 8.5em;
	padding: 0.2em 0;
	font-size: 80%;
	font-weight: bold;
	background: url(../src/image/common/ico_arrow.svg) no-repeat right center;
	background-size: 0.9em;
}
#home .l-article.news dl dd.title {
	padding-left: 7.5em;
}
#home .l-article.news dl dd.title .new {
	color: #FFFFFF;
	background: #ff3333;
	padding: 0.1em 1em;
	font-size: 60%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	position: relative;
	top: -2px;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#home .l-article.news h3{
			margin-bottom: 20px;
		}
		#home .l-article.news dl dt {
			width: 100%;
			background: none;
			color: #4aa500;
		}
		#home .l-contents .news dl dd.title {
			padding-left: 0em;
		}
	}


/** =2
 * ========================================
 * news - お知らせ 
 * ========================================
 */

#news .main_image {	background-image: url(../src/image/news/mainimage.jpg) ;
}

#news .l-article.news .l-inner {
	max-width: 900px;
	margin: 0 auto;
}
#news .l-article.news a dl {
	color: #594441;
}
#news .l-article.news a:hover dd {
	color: #4aa500;
}
#news .l-article.news dl {
	border-bottom: 1px solid #dadada;
	padding: 1em 0.5em;
}
#news .l-article.news dl:hover {
	background-color: rgba(255,255,255,0.25);
	-moz-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
#news .l-article.news dl dt {
	float: left;
	width: 8.5em;
	padding: 0.2em 0;
	font-size: 80%;
	font-weight: bold;
	background: url(../src/image/common/ico_arrow.svg) no-repeat right center;
	background-size: 0.9em;
}
#news .l-article.news dl dd.title {
	padding-left: 7.5em;
}
#news .l-article.news dl dd.title .new {
	color: #FFFFFF;
	background: #ff3333;
	padding: 0.1em 1em;
	font-size: 60%;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	position: relative;
	top: -2px;
}

#news p.p_back {
	text-align:center;
	margin:20px;
	}
#news p.p_back a {
	color: #4aa500;
	}
/* PDFダウンロード */
#pdf{
	padding-top:2em;
	margin-bottom:2em;
}
#pdf p.pdf_download{
	background:url(../img/common/pdf.jpg) no-repeat 5px 0px;
	padding:0px 0px 0px 40px;
	margin-bottom:10px;
}
#pdf blockquote{
	border:1px solid #e6d7ce;
	background-color:#fefdf7;
	padding:1em;
}
#pdf blockquote img{
	width:111px;
	float:left;
	margin-right:40px;
}
#pdf blockquote .adobe{
	font-size:90%;
}

/** =3
 * ========================================
 * construction - 新築
 * ========================================
 */

/* mainimage */
#construction .main_image {	background-image: url(../src/image/construction/mainimage.jpg) ;}

/* contents */
#construction .l-article.flow dl dt{
	color: #4aa500;
}



/** =4
 * ========================================
 * renovation - リフォーム
 * ========================================
 */

/* mainimage */
#renovation .main_image {	background-image: url(../src/image/renovation/mainimage.jpg) ;}

/* contents */
#renovation .l-article.flow dl dt{
	color: #336699;
}



/** =5
 * ========================================
 * store - 店舗
 * ========================================
 */

/* mainimage */
#store .main_image {	background-image: url(../src/image/store/mainimage.jpg) ;}

/* contents */
#store .l-article.flow dl dt{
	color: #cc6633;
}



/** =6
 * ========================================
 * estate - 不動産
 * ========================================
 */

/* mainimage */
#estate .main_image {	background-image: url(../src/image/estate/mainimage.jpg) ;}

/* contents */
#estate .l-article.estate{
	background: #FFFFFF;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding-bottom: 1px;
}

/* contents-tab */
#estate .l-article.estate ul.link_tab li{
	width: 50%;
	float: left;
}
#estate .l-article.estate ul.link_tab li span{
	display: block;
	padding: 0.8em 0;
	font-size: 120%;
	letter-spacing: 0.1em;
	text-align: center;
	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
	cursor:pointer;
}
#estate.agency .l-article.estate ul.link_tab li.chintai span,
#estate.chintai .l-article.estate ul.link_tab li.agency span{
	background: #f6f6f0;
}
#estate .l-article.estate ul.link_tab li.agency span{
	color: #006699;
}
#estate .l-article.estate ul.link_tab li.chintai span{
	color: #4aa500;
}
#estate .l-article.estate ul.link_tab li span:hover{
	color: #FFFFFF;
}
#estate .l-article.estate ul.link_tab li.agency span:hover{
	background: #006699;
}
#estate .l-article.estate ul.link_tab li.chintai span:hover{
	background: #4aa500;
}

/* contents-title */
#estate .l-article.estate h3 {
	font-weight: bold;
	background: none;
	text-align: center;
	padding: 2em 0 0.5em ;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#estate .l-article.estate h3 {
			font-size: 130%;
			padding: 2em 0 0;
		}
	}


/* contents-section */
#estate .l-article.estate .l-section.list{
	border: 1px solid #e5e5e5;
	border-top: none;
	margin: 0 4% 3em ;
	padding-bottom: 2em ;
}
#estate .l-article.estate .l-section.list h4{
	color: #FFFFFF;
	font-size: 165%;
	font-weight: normal;
	padding: 5px 1em;
	margin-bottom: 1.5em;
	letter-spacing: 0.1em;
	border-bottom: 6px solid rgba(255,255,255,0.2);
}
#estate.agency .l-article.estate .l-section.list h4{
	background: #006699;
}
#estate.chintai .l-article.estate .l-section.list h4{
	background: #4aa500;
}
#estate .l-article.estate .l-section.list p.image{
	float: left;
	width: 44%;
	margin-left: 4%;
}
#estate .l-article.estate .l-section.list .detail{
	float: right;
	width: 44%;
	margin-right: 4%;
}
#estate .l-article.estate .l-section.list dl{
	border-top: 1px solid #bababa;
	margin: 0.5em 0 1.5em;
	font-size: 90%;
}
#estate .l-article.estate .l-section.list dt,
#estate .l-article.estate .l-section.list dd{
	padding: 0.5em 0;
	float: left;
	width: 70%;
	border-bottom: 1px solid #bababa;
}
#estate .l-article.estate .l-section.list dt{
	width: 25%;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding-left: 5%;
	letter-spacing: 0.05em;
}
#estate .l-article.estate .l-section.list dt::before,
#estate .l-article.estate .l-section.list dt::after{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	content: "";
	left: 4px;
	box-sizing: border-box;
	height: 2px;
	border: 3px solid transparent;
	border-left: 5px solid #594441;
}
#estate .l-article.estate .l-section.list dd sup{
	font-size:50%;
}
#estate .l-article.estate .l-section.list .pickup{
	color: #333333;
}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 639px) {
		#estate .l-article.estate .l-section.list{
			border: none;
			margin: 0 1em ;
		}
		#estate .l-article.estate .l-section.list h4{
			font-size: 145%;
			padding: 5px 0.8em;
			margin-bottom: 0;
		}
		#estate .l-article.estate .l-section.list p.image,
		#estate .l-article.estate .l-section.list .detail{
			float: none;
			width: 100%;
			margin: 0 0 2em;
		}
		#estate .l-article.estate .l-section.list dl{
			font-size: 85%;
		}
	}
	/* -- >>> styles for narrow layout ----- */
	@media screen and (min-width: 640px) and (max-width: 769px) {
		#estate .l-article.estate .l-section.list{
			margin: 0 2% 3em ;
		}
		#estate .l-article.estate .l-section.list h4{
			font-size: 155%;
		}
		#estate .l-article.estate .l-section.list p.image{
			width: 45%;
			margin-left: 3%;
		}
		#estate .l-article.estate .l-section.list .detail{
			width: 45%;
			margin-right: 3%;
		}
		#estate .l-article.estate .l-section.list dl{
			font-size: 88%;
		}
	}
	



.tab{overflow:hidden;}
.tab li{
}
.hide {display:none;}
	


/** =7
 * ========================================
 * example - 施工例
 * ========================================
 */

#example {
}



/** =8
 * ========================================
 * company - 会社案内
 * ========================================
 */

/* mainimage */
#company .main_image {	background-image: url(../src/image/company/mainimage.jpg) ;}

/* contents */
#company .l-article.greeting dl{
	max-width: 800px;
	margin: 0 auto;
}
#company {
}

	/* -- >>> styles for narrow layout ----- */
	@media screen and (max-width: 769px) {
		#company {
		}
	}

	/* -- >>> styles for wide layout ----- */
	@media screen and (min-width: 770px) {
		#company {
		}
	}



/** =9
 * ========================================
 * contact - お問い合わせ
 * ========================================
 */

#contact .main_image {	background-image: url(../src/image/contact/mainimage.jpg) ;
}


form input[type="text"],
form textarea {
	width:100%;
}
form input.short {
	width:4em;
}
form em {
	font-size:90%;
	color:#ff0000;	
}
form p.center {
	text-align:center;
	}

#php_form p {
	text-align:center;
	}


/** =10
 * ========================================
 * privacy - プライバシーポリシー
 * ========================================
 */


#privacy dl{
	height:320px;
	overflow:auto;
	padding:1em 0
}
#privacy dl dt{
	font-weight:bold;
	margin-bottom:0.5em;
}
#privacy dl dd{
	padding-bottom:1em;
	border-bottom:1px dashed #dedede;
	margin-bottom:1em;
}