@charset "utf-8";

/* ****************************************************************************

　目次

-------------------------------------------------------------------------------

　00. base
　01. わが家に合う二世帯同居のスタイルは？
　02. 快適な二世帯住宅をつくるためのヒント
　03. こんな暮らし方も…


******************************************************************************* */



/* ==

　00. base

=============================================================================== */
#main div:after{ content:''; display:block; clear:both; }

#main h2{ margin-bottom:10px; }
#main h3{ margin-bottom:10px; }

p em{ font-weight:bold; }
#main p.leadTxt{ padding:45px 0 50px; text-align:center; }
#main p.leadTxt.mobile{ padding:15px 0 30px; font-weight:bold; }


#main p.hdTxt{ margin-bottom:10px; }





/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 600px) {
	#main p.leadTxt.mobile{ padding:20px 0 40px; text-align:left; }
}









/* ==

　01. わが家に合う二世帯同居のスタイルは？

=============================================================================== */
#main .ftr_nisetai{ position:relative; zoom:1; clear:both; z-index:10; }
#main .ftr_nisetai h2{ margin-bottom:30px; text-align:center; }




#main .ftr_nisetai .colL{
	width:29.5%;
	float:left;
	z-index:11;
}

#main .ftr_nisetai .colR{
	width:58.5%;
	padding:30px 30px 10px;
	border:3px solid #f5a460;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
	position:relative;
	float:right;
	z-index:12;
}

#main .ftr_nisetai #nisetai_arw{
	width:7.5%;
	height:auto;
	text-align:center;
	left:28.25%;
	top:50%;
	position:absolute;
	display:block;
	z-index:15;
}



/* 〇〇同居 */
#main .ftr_nisetai .colL div{
	margin-bottom:30px;
}
#main .ftr_nisetai .colL div p em{ font-size:110%; line-height:1.4; }
#main .ftr_nisetai .colL div.style01_1,
#main .ftr_nisetai .colL div.style01_3{ padding:0 5px 0 0; }
#main .ftr_nisetai .colL div.style01_2{
	padding:15px;
	border:3px solid #f5a460;
	border-radius:20px;
	-webkit-border-radius:20px;
	-moz-border-radius:20px;
}



/* 〇〇型家族 */
#main .ftr_nisetai .colR div{
	margin:0 0 20px;
	padding:20px 0 0;
	border-top:1px solid #ddd;
	text-align:center;
	clear:both;
}
#main .ftr_nisetai .colR div:first-child{ padding-top:0; border-top:none; }

#main .ftr_nisetai .colR dl{
	width:50%;
	float:left;
}
#main .ftr_nisetai .colR dt{
	margin:0 0 5px;
	font-size:134%;
	text-align:left;
}
#main .ftr_nisetai .colR dt em{ font-weight:bold; }
#main .ftr_nisetai .colR dd{
	font-size:117%;
	text-align:left;
}


#main .ftr_nisetai .colR img{
	float:right;
}


/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
	#main .ftr_nisetai .colR img{
		width:43.5%;
		height:auto;
	}
}
@media only screen and (max-width: 900px) {
	#main .ftr_nisetai .colR dl{ width:45%; }
	#main .ftr_nisetai .colR img{ width:48.5%; }
}
@media only screen and (max-width: 810px) {
	#main .ftr_nisetai .colL{ width:35%; }
	#main .ftr_nisetai .colR{ width:54%; margin-bottom:30px; padding:20px 20px 10px; }
	#main .ftr_nisetai #nisetai_arw{ width:9.5%; top:42%; left:32.5%; }

	#main .ftr_nisetai .colR dl{ width:auto; margin-bottom:10px; float:none; }
	#main .ftr_nisetai .colR img{ width:auto; float:none; }
}
@media only screen and (max-width: 680px) {
	#main .ftr_nisetai .colL{ width:42%; }
	#main .ftr_nisetai .colR{ width:44%; }
	#main .ftr_nisetai #nisetai_arw{ top:40%; left:40%; }
	#main .ftr_nisetai .colL div{ margin-bottom:40px; }
}
@media only screen and (max-width: 600px) {
	#main .ftr_nisetai #nisetai_arw{ top:45%; }
}
@media only screen and (max-width: 460px) {
	#main .ftr_nisetai .colR{ padding:15px 15px 10px; }
}




/* ==

　02. 快適な二世帯住宅をつくるためのヒント

=============================================================================== */
.ftr_hint{
	margin:0 0 50px;
	padding-top:30px;
	border-top:1px dotted #ccc;
	zoom:1;
	clear:both;
}


#main .ftr_hint .hint01,
#main .ftr_hint .hint02,
#main .ftr_hint .hint03,
#main .ftr_hint .hint04{
	width:48.5%;
	/width:48%;
	margin:0 0 20px;
	float:left;
}

#main .ftr_hint .hint01{
	margin-right:3%;
	padding:0 0 20px;
	border-bottom:1px dotted #ccc;
}
#main .ftr_hint .hint02{
	padding:0 0 20px;
	border-bottom:1px dotted #ccc;
}
#main .ftr_hint .hint03{ margin-right:3%; }




#main .ftr_hint .hint01 .colTxt{
	width:43%;
	float:left;
}
#main .ftr_hint .hint01 .colImg{
	width:52.5%;
	padding-top:10px;
	float:right;
}

#main .ftr_hint .hint02 .colImg{ padding-top:15px; text-align:center; }

#main .ftr_hint .hint02 .colImg li{ width:47%; margin-left:6%; display:inline; float:left; }
#main .ftr_hint .hint02 .colImg li:first-child{ margin-left:0; }


#main .ftr_hint .hint03 .colImg{ padding-top:15px; text-align:center; }

#main .ftr_hint .hint04 .colTxt{
	width:45.5%;
	float:left;
}
#main .ftr_hint .hint04 .colImg{
	width:52%;
	padding-top:10px;
	float:right;
}




/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 970px) {
	#main .ftr_hint .hint01 .colTxt{ width:auto; float:none; }
	#main .ftr_hint .hint01 .colImg{ width:auto; padding-top:20px; text-align:center; float:none; }

	#main .ftr_hint .hint02 .colImg li{ width:auto; margin-left:0; display:block; float:none; }
	#main .ftr_hint .hint02 .colImg li:first-child{ margin-bottom:10px; }

	#main .ftr_hint .hint04 .colTxt{ width:auto; float:none; }
	#main .ftr_hint .hint04 .colImg{ width:auto; text-align:center; float:none; }
}
@media only screen and (max-width: 600px) {
	#main .ftr_hint .hint01,
	#main .ftr_hint .hint02,
	#main .ftr_hint .hint03,
	#main .ftr_hint .hint04{
		width:auto;
		/width:auto;
		height:auto !important;
		float:none;
	}
	#main .ftr_hint .hint01{
		margin-right:0;
	}
	#main .ftr_hint .hint03{
		margin-right:0;
		padding:0 0 20px;
		border-bottom:1px dotted #ccc;
	}

	#main .ftr_hint .hint02 .colImg li{ width:47%; margin-left:6%; display:inline; float:left; }
	#main .ftr_hint .hint02 .colImg li:first-child{ margin-left:0; }
}
@media only screen and (max-width: 460px) {
	#main .ftr_hint .hint02 .colImg li{ width:auto; margin-left:0; display:block; float:none; }
	#main .ftr_hint .hint02 .colImg li:first-child{ margin-bottom:10px; }
}





/* ==

　03. こんな暮らし方も…

=============================================================================== */
.ftr_kinkyoikumago{
	padding:20px;
	border:1px solid #ccc;
	zoom:1;
	position:relative;
	clear:both;
}
#main .ftr_kinkyoikumago p.hdTxt{ position:absolute; top:-18px; left:20px; }

#main .ftr_kinkyoikumago h3{
	margin-bottom:20px;
	font-size:150%;
	color:#21b7a9;
}
#main .ftr_kinkyoikumago h3 span{ font-size:14px; color:#21b7a9; }

#main .ftr_kinkyoikumago .colTxt{
	width:32%;
	padding-top:30px;
	float:left;
}
#main .ftr_kinkyoikumago .colImg{
	width:63%;
	float:right;
}
#main .ftr_kinkyoikumago .colImg p{ font-size:100%; }




/* メディアクエリー
------------------------------------------------------------------------------- */
@media only screen and (max-width: 1205px) {
}
@media only screen and (max-width: 950px) {

	#main .ftr_kinkyoikumago h3 br{ display:none; }

}
@media only screen and (max-width: 800px) {

	#main .ftr_kinkyoikumago .colTxt{
		width:auto;
		margin-bottom:15px;
		float:none;
	}
	#main .ftr_kinkyoikumago .colImg{
		width:auto;
		text-align:center;
		float:none;
	}
	#main .ftr_kinkyoikumago .colImg p{ text-align:left; }

}
@media only screen and (max-width: 600px) {
}