@CHARSET "UTF-8";
/******************************************************************************
 * 中島木材株式会社 涼温な家用スタイル
 * WEB SITE ver.2016
 * RESPONSIVE
 * PC width min-width:1025px
 * SP width max-width:1024px
******************************************************************************/
@import url(html5-doctor-reset-stylesheet.min.css);
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css);
@import url(base.css);

/******************************************************************************
 * COMMON
******************************************************************************/
em { font-style: normal;}
/******************************************************************************
 * HEADER
******************************************************************************/
body>header{}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
body>header>div{ height: 130px; overflow: hidden;}	
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	
}

/******************************************************************************
 * ARTICLE
******************************************************************************/
body>article {}
body>article>* {clear: both; color:#333;}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	body>article {
		/*ヘッダーイメージなし*/
		padding-top: 60px;
		padding-bottom: 60px;
		
		
		/*ヘッダーイメージあり*/
		/* padding-bottom: 60px; */
		/*#headerImg にmargin-bottomを指定*/
	}
	body>article>*:not(#pagetop) {
		margin-left: auto;
		margin-right: auto;
	}
}

/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	body>article {
		/*ヘッダーイメージなし*/
		padding-top: 30px;
		padding-bottom: 30px;
		
		/*ヘッダーイメージあり*/
		/* padding-top: 16px;
		padding-bottom: 30px; */
	}
}

/******************************************************************************
 * H1
******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	body>article>h1 {
		color:#666;
		font-size: 24px;
		line-height: 1.2;
		text-align: center;
		margin-bottom: 20px;
		letter-spacing: 1px;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	body>article>h1 {
		text-align: center;
		color: #000000;
		font-size: 14px;
		line-height: 1.2;
		letter-spacing: 1px;
	}
}

/******************************************************************************
 * PAGE NAV
******************************************************************************/
body>article>#pageNav{}
body>article>#pageNavFoot{}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	#pageNav>ul,
	#pageNavFoot>ul{
		width: 940px;
		margin:0 auto;
		text-align: justify;
		text-justify: distribute-all-lines;
	}
	#pageNav>ul:after ,
	#pageNavFoot>ul:after {
		content:"";
		display: inline-block;
		width: 100%;
		line-height:0;
		height: 0;
	}
	#pageNav>ul>li,
	#pageNavFoot>ul>li{
		width:302px;
		height: 45px;
		display: inline-block;
		border: 1px solid #000;
		font-size: 20px;
		text-align:center;
		background:#FFF;
	}
	#pageNav>ul>li>a,
	#pageNavFoot>ul>li>a{
		color:#000;
		display: block;
		width: 100%;
		height:100%;
		padding-top: 12px;
	}
	#pageNav>ul>li>a:hover,
	#pageNavFoot>ul>li>a:hover{
		color:#FFF;
		background:#333;
	}
	#pageNav>ul>li>a.active,
	#pageNavFoot>ul>li>a.active{
		color:#FFF;
		background:#333;
	}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	#pageNav{
		display:none;
	}
	#pageNav>ul,
	#pageNavFoot>ul{
		width: 100%;
		max-width: 640px;
		padding-left: 10px;
		padding-right: 10px;
		margin:auto;
	}
	#pageNav>ul>li,
	#pageNavFoot>ul>li{
		width:100%;
		height: 45px;
		font-size: 20px;
		text-align:center;
		background:#FFF;
		border: 1px solid #000;
		border-bottom: 0px;
	}
	#pageNav>ul>li:last-child,
	#pageNavFoot>ul>li:last-child{
		border-bottom: 1px solid #000;
	}
	#pageNav>ul>li>a,
	#pageNavFoot>ul>li>a{
		color:#000;
		display: block;
		position: relative;
		width: 100%;
		height:100%;
		padding-top: 12px;
	}
	#pageNav>ul>li>a:after ,
	#pageNavFoot>ul>li>a:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #333;
		border-right: solid 2px #333;
		-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
	}
}

/******************************************************************************/
/* h2
/******************************************************************************/
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	body>article>h2{
		margin: 50px auto 60px;
		text-align:center;
	}
	body>article>h2>img{
		width:326px;
	}
}

/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	body>article>h2{
		text-align:center;
		margin:30px 0 20px;
		padding:0 10px;
	}
	body>article>h2>img{
		width:70%;
		padding:0 20px;
	}
}


/******************************************************************************
 * #sashe-summary
******************************************************************************/
body>article>#sashe-summary {}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	#sashe-summary {
		width:900px;
		margin:0 auto 50px;
		text-align: center;
		letter-spacing:1.5px;
	}
	#sashe-summary>h3 {
		color: #777;
		font-size: 30px;
		margin-bottom:20px;
	}
	#sashe-summary>h4 {
		color: #777;
		font-size: 38px;
		margin-bottom: 40px;
		line-height: 1.6;
	}
	#sashe-summary>h5{
		color: #000;
		font-size: 30px;
		line-height: 1.6;
		margin:30px 0;
	}
	#sashe-summary>h5>span.catchRed{color:#EC6D34;}
	#sashe-summary>h5>span.catchBlue{color:#0DB7D6;}
	#sashe-summary>p{
		color: #000;
		font-size: 20px;
		line-height:2;
	}
	/*住み心地感想へのリンク*/
	#sashe-summary>figure{
		width:900px;
		margin:50px 0 70px;
		text-align:center;
		overflow: hidden; 
		position:relative;
	}
	#sashe-summary>figure>img{
		vertical-align:middle;
	}
	#sashe-summary figcaption{
		position:absolute;
		bottom:0;
		right:0;
		background:rgba(113,93,78,0.5);
		color:#FFF;
		border-top: dotted 1px #FFF;
		font-size:18px;
		padding:8px 40px 8px;
	}
	#sashe-summary figcaption>img{
		width:30px;
		height:25px;
		padding-right:6px;
		vertical-align: text-top;
	}
	#sashe-summary>figure a>img{transition: 0.2s;}
	#sashe-summary>figure a:hover>img{
		-moz-transform: scale(1.03);
  		-webkit-transform: scale(1.03);
 		 -o-transform: scale(1.03);
  		-ms-transform: scale(1.03);
		transition-duration: 0.2s;
		opacity: 0.8;
	}
	#sashe-summary>figure a:hover>figcaption{background:rgba(113,93,78,0.3);}
	#sashe-summary em{color: #DC3931;}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	#sashe-summary {
		width:100%;
		max-width:640px;
		text-align:center;
		margin:40px auto 0;
	}
	#sashe-summary>h3 {
		color: #777;
		font-size:20px;
		margin-bottom:15px;
	}
	#sashe-summary>h4 {
		color: #777;
		font-size:23px;
		margin-bottom: 30px;
		line-height: 1.3;
	}
	#sashe-summary>h5{
		color: #000;
		font-size: 20px;
		line-height: 1.6;
		margin:20px 0;
	}
	#sashe-summary>h5>span.catchRed{color:#EC6D34;}
	#sashe-summary>h5>span.catchBlue{color:#0DB7D6;}
	#sashe-summary>p{
		color: #000;
		font-size: 18px;
		line-height:2;
	}
	/*住み心地感想へのリンク*/
	#sashe-summary>figure{
		margin:20px 0;
		overflow: hidden; 
		position:relative;
	}
	#sashe-summary>figure>img{
		vertical-align:middle;
	}
	#sashe-summary>figure figcaption{
		position:absolute;
		bottom:0;
		right:0;
		background:rgba(113,93,78,0.5);
		color:#FFF;
		border-top: dotted 1px #FFF;
		font-size:14px;
		padding:7px 13px 5px;
	}
	#sashe-summary>figure figcaption>img{
		width:25px;
		height:20px;
		padding-right:6px;
	}
	#sashe-summary>figure img{
		width:100%;
	}
	#sashe-summary em{color: #DC3931;}

}

/******************************************************************************
 * #sashe-system
******************************************************************************/
body>article>#sashe-system {}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	#sashe-system {
		background:url(../img/housing/housing_ryouon/border.png) repeat-x top;		
		width:900px;
		margin:0 auto;
		padding:50px 0 0;
		text-align: center;
		letter-spacing:1.5px;
	}
	#sashe-system>h3{
		display:block;
		text-align:center;
		margin:0 auto 80px;
	}
	#sashe-system>h3>img{
		width:440px;
	}
	/***/
	#sashe-system>div{
		border-bottom:#EC6D34 dotted 2px;
		display:flex;
		justify-content: space-between;
		margin:50px auto 70px;
		padding-bottom:20px;
	}
	#sashe-system>div img{
		height:auto;
		width:100%;
	}
	#sashe-system>div>figure:first-child{
		width:430px;
	}
	#sashe-system>div>figure:last-child{
		width:440px;
		margin-top:20px;
	}
	#sashe-system>div>figure>figcaption{
		font-size:25px;
		font-weight:bold;
		margin-top:28px;
		color:#EC6D34;
	}
	/****/
	#sashe-system>h4{
		display:table;
		margin:20px auto 0;
		padding:22px 30px 20px;
		border:#EC6D34 solid 2px;
		border-radius: 5px;
		color:#EC6D34;
		font-size:25px;
	}

}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	#sashe-system {
		width:100%;
		max-width:640px;
		background:url(../img/housing/housing_ryouon/border.png) repeat-x top;
		text-align:center;
		margin:30px auto 0;
		padding-top:30px;
	}
	#sashe-system>h3{
		display:block;
		margin-bottom:30px;
	}
	#sashe-system>h3>img{
		width:230px;
		margin:5px auto 0;
	}
	/***/
	#sashe-system>div{
		margin:50px auto 30px;
		padding:0 10px;
	}
	#sashe-system>div img{
		height:auto;
		width:100%;
	}
	#sashe-system>div>figure{		
		border-bottom:#EC6D34 dotted 2px;
		padding-bottom:20px;
		margin-bottom:30px;
	}
	#sashe-system>div>figure>figcaption{
		font-size:18px;
		font-weight:bold;
		margin-top:24px;
		color:#EC6D34;
	}
	/****/
	#sashe-system>h4{
		display:table;
		margin:40px auto 0;
		padding:15px 30px;
		border:#EC6D34 solid 2px;
		border-radius: 5px;
		color:#EC6D34;
		font-size:18px;
		line-height:1.5;
	}
}

/******************************************************************************
 * #sashe-merit
******************************************************************************/
body>article>#sashe-merit {}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	#sashe-merit {
		width:900px;
		margin:180px auto 300px;
		text-align: center;
		letter-spacing:1.5px;
		padding-bottom:1px;
		background:url(../img/housing/housing_ryouon/border.png) repeat-x bottom;
	}
	#sashe-merit>h3 {
		display:table;
		margin:0 auto;
		padding:25px 30px 20px;
		color: #0DB7D6;
		font-size: 55px;
		margin-bottom: 30px;
	}
	#sashe-merit>h4 {
		color: #4E4E4E;
		font-size: 26px;
		margin-bottom: 40px;
		line-height: 1.2;
		display:flex;
		justify-content: center;
		text-align:left;
	}
	#sashe-merit>h4>em {
		font-size:56px;
		margin-right:20px;
	}
	#sashe-merit>ul{
		margin-top:70px;
		padding-bottom:100px;
		background:url(../img/housing/housing_ryouon/border.png) repeat-x bottom;
	}
	#sashe-merit>ul>li {
		font-size:25px;
		line-height:2;
		letter-spacing:1.5px;
		color: #000;
		margin-bottom:100px;
	}
	#sashe-merit>ul>li:last-child{margin-bottom:0;}
	#sashe-merit>ul>li>em{
		font-size:40px;
		font-weight:bold;
	}
	#sashe-merit>ul>li>span{
		display:block;
		margin:0 auto 15px;
		background: url(../img/housing/housing_ryouon/border.png) repeat-x center;
	}
	#sashe-merit>ul>li>span>img{
		width:72px;
		height:auto;
	}
	#sashe-merit>ul>li:nth-of-type(1)>span{width:300px;}
	#sashe-merit>ul>li:nth-of-type(2)>span{width:280px;}
	#sashe-merit>ul>li:nth-of-type(3)>span{width:360px;}
	#sashe-merit>p *{
		transition:0.5s;
	}
	#sashe-merit>p>a{
		display:block;
		color:#000;
		font-size:28px;
		line-height:1.3;
		font-weight:bold;
		padding:80px 0;
	}
	#sashe-merit>p:last-of-type>a{ font-size:35px; line-height:1.6;}
	#sashe-merit>p>a>span{
		display:block;
		font-size:18px;
		margin-top:30px;
		font-weight:normal;
	}
	#sashe-merit>p:last-of-type>a>span{ font-size:23px;}
	#sashe-merit>p>a:hover{
		background:#f2eadc;
	}
	#sashe-merit>p:hover *{
		color:#9c7751;
	}
	/*住み心地感想へのリンク*/
	#sashe-merit>figure{
		width:900px;
		text-align:center;
		overflow: hidden; 
		position:relative;
	}
	#sashe-merit>figure>img{
		vertical-align:middle;
	}
	#sashe-merit figcaption{
		position:absolute;
		bottom:0;
		right:0;
		background:rgba(113,93,78,0.5);
		color:#FFF;
		border-top: dotted 1px #FFF;
		font-size:18px;
		padding:8px 40px 8px;
	}
	#sashe-merit figcaption>img{
		width:30px;
		height:25px;
		padding-right:6px;
		vertical-align: text-top;
	}
	#sashe-merit>figure a>img{transition: 0.2s;}
	#sashe-merit>figure a:hover>img{
		-moz-transform: scale(1.03);
  		-webkit-transform: scale(1.03);
 		 -o-transform: scale(1.03);
  		-ms-transform: scale(1.03);
		transition-duration: 0.2s;
		opacity: 0.8;
	}
	#sashe-merit>figure a:hover>figcaption{background:rgba(113,93,78,0.3);}
	#sashe-merit em{color: #DC3931;}
}
/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	body>article>#sashe-merit {
		max-width:640px;
		margin:0 auto;
		margin:100px auto 150px;
		text-align: center;
		letter-spacing:1.5px;
		background:url(../img/housing/housing_ryouon/border.png) repeat-x bottom;
	}
	#sashe-merit>h3 {
		margin:0 auto 20px;
		color: #0DB7D6;
		font-size: 32px;
		line-height:1.3;
	}
	#sashe-merit>h4 {
		color: #4E4E4E;
		font-size:18px;
		margin-bottom: 40px;
		line-height: 1.2;
		display:flex;
		justify-content: center;
		align-items: center;
		text-align:left;
	}
	#sashe-merit>h4>em {
		font-size:32px;
		margin-right:10px;
	}
	#sashe-merit>ul{
		margin-top:40px;
		padding:0 10px 1px;
		background:url(../img/housing/housing_ryouon/border.png) repeat-x bottom;
	}
	#sashe-merit>ul>li {
		font-size:20px;
		line-height:2;
		color: #000;
		margin-bottom:40px;
	}
	#sashe-merit>ul>li>em{
		font-size:26px;
		font-weight:bold;
	}
	#sashe-merit>ul>li>span{
		display:block;
		margin:0 auto 15px;
		background: url(../img/housing/housing_ryouon/border.png) repeat-x center;
	}
	#sashe-merit>ul>li>span>img{
		width:60px;
		height:auto;
	}
	#sashe-merit>ul>li:nth-of-type(1)>span{width:250px;}
	#sashe-merit>ul>li:nth-of-type(2)>span{width:230px;}
	#sashe-merit>ul>li:nth-of-type(3)>span{width:230px;}
	#sashe-merit>p>a{
		display:block;
		color:#000;
		font-size: 18px;
		line-height:1.5;
		font-weight:bold;
		padding:30px 0;
	}
	#sashe-merit>p:last-of-type>a{ font-size:20px; line-height:1.6;}
	#sashe-merit>p>a>span{
		display:block;
		font-size:15px;
		margin-top:15px;
		font-weight:normal;
	}
	#sashe-merit>p:last-of-type>a>span{ font-size:17px;}
	
	/*住み心地感想へのリンク*/
	#sashe-merit>figure{
		overflow: hidden; 
		position:relative;
	}
	#sashe-merit>figure>img{
		vertical-align:middle;
	}
	#sashe-merit>figure figcaption{
		position:absolute;
		bottom:0;
		right:0;
		background:rgba(113,93,78,0.5);
		color:#FFF;
		border-top: dotted 1px #FFF;
		font-size:14px;
		padding:7px 13px 5px;
	}
	#sashe-merit>figure figcaption>img{
		width:25px;
		height:20px;
		padding-right:6px;
	}
	#sashe-merit>figure img{
		width:100%;
	}
	#sashe-merit em{color: #DC3931;}

}

/******************************************************************************
 * section#contact お問い合わせ
******************************************************************************/
body>article>section#contact {}
/** PC ***********************************************************************/
@media screen and (min-width:1025px),print{
	body>article>section#contact {
		width:940px;
		text-align: left;
		padding: 20px 0 30px 0;
		overflow: hidden;
	}
	#contact>figure{
		float: left;
		margin-right: 30px;
	}
	#contact>ul {
		margin: auto;
		height: 80px;
		display: table;
		margin-top: 30px;
	}
	#contact>ul>li {
		vertical-align: middle;
		display: table-cell;
		display: block;
	}
	#contact>ul>li:nth-child(1) {
		font-size: 28px;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	#contact>ul>li:nth-child(1) span{
		color:#FF6030;
	}
	#contact>ul>li:nth-child(2) >b.freeDial {
		color:#000;
		font-size:30px;
		padding-left: 30px;
		margin-left: 10px;
		margin-right: 20px;
		background: url(./img/mrk_freedial.png) no-repeat left center;
	}

	#contact>ul>li:nth-child(3) {
		width:45%;
		margin-top: 24px;
		font-size: 20px;
		background:#4D4D4D;
		text-align: center;
	}
	#contact>ul>li:nth-child(3) a{
		color:#FFF;
		display:block;
		padding: 10px 20px;
	}
	#contact>ul>li:nth-child(3) a:hover{
		background-color: #999;
	}

}

/** SMART PHONE **************************************************************/
@media screen and (max-width:1024px){
	body>article>section#contact{
		text-align: center;
		padding: 20px 10px 30px 10px;
		margin: auto;

	}
	#contact>figure{
		text-align: center;
		margin: auto;
	}
	#contact>figure>img{
		margin-left: 20px;
	}
	#contact>ul {
		margin: auto;
		height: 80px;
		display: table;
		margin-top: 30px;
	}
	#contact>ul>li {
		vertical-align: middle;
		display: table-cell;
		display: block;
	}
	#contact>ul>li:nth-child(1) {
		font-size: 24px;
		line-height: 1.2;
		margin-bottom: 20px;
	}
	#contact>ul>li:nth-child(1) span{
		color:#FF6030;
	}
	#contact>ul>li:nth-child(2) >b.freeDial {
		color:#000;
		font-size:30px;
		padding-left: 30px;
		margin-left: 10px;
		margin-right: 20px;
		background: url(./img/mrk_freedial.png) no-repeat left center;
	}
	#contact>ul>li:nth-child(2) a{
		color: #000;
		}

	#contact>ul>li:nth-child(3) {
		margin-top: 24px;
		font-size: 20px;
		background:#4D4D4D;
		text-align: center;
		height: 44px;
	}
	#contact>ul>li:nth-child(3) a{
		color:#FFF;
		display:block;
		padding: 10px 20px;
	}

}

/******************************************************************************
 * LOOK
 * ver 1.0 2016
******************************************************************************/