@charset "UTF-8";

/* common style
--------------------------------------------------------------- */
*, *:before, *:after{
	box-sizing:border-box;
}
img {
	max-width:100%;
	hieght:auto;
	vertical-align: top;
	font-size:0;
	line-height: 0;
}
li {
	list-style:none;
	display:inline-block;
}
/*crearfix*/
 .clearfix:after
 .row:after {
    content:" ";
    display:block;
    clear:both;
}
html {
	font-size:62.5%;
}
body {
	width:100%;
	height:100%;
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size:1.4rem;
	font-size:14px;
	margin:0;
	background:#f5f4f4;
}
.wrapper {
	width:100%;
	max-width:960px;
	margin:0 auto;
}

/* columns
--------------------------------------------------------------- */
.columnWrap {
	width:100%;
	float:left;
}
.columnBox {
	float:left;
	margin-right:4%;
}
.columnBox:last-child {
	float:right;
	margin-right:0;
}
.column01 {
	width: 100%;
}
.column02 {
	width: 48%;
}
.column03 {
	width:30.2272727%;
}
.column04 {
	width:21.5909091%;
}
.column05 {
	width:16.3649721%;
}
.columnGaikan {
	width:65%;
}
.column_madori01 {
	width:60%;
}
.column_madori02 {
	width:36%;
}

/* header & Navigation
--------------------------------------------------------------- */
#header {
	width:100%;
	max-width:960px;
	float:left;
	margin:0;
	padding:0;
}
#header img {
	float:left;
}


/* section01
--------------------------------------------------------------- */
.section01 {
	width:100%;
	float:left;
	display:block;
	margin:0;
	padding:0;
	text-align:center;
	background:#ffffff;
}
.section01 .modelhouse {
	width:100%;
	margin-bottom:40px;
	padding:40px ;
	float:left;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	text-align:center;
	background-image:url(../images/bnr_bg.png);
	background-repeat:repeat;
}
.section01 a {
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.section01 a:hover {
	opacity:0.7;
}

/* section02
--------------------------------------------------------------- */
.section02 {
	background:#ffffff;
	padding:40px;
	float:left;
}
.section02 .example {
	width:100%;
	margin-bottom:40px;
	border-bottom:1px solid #666666;
}
.section02 .example p {
	padding:6px 20px;
	display:inline-block;
	border-top:1px solid #666666;
	border-left:1px solid #666666;
	border-right:1px solid #666666;
	margin:0;
	font-size:1.8rem;
	font-weight:bold;
}
.sec02Box:last-child {
	margin-right:0;
}
.specArea {
	margin-bottom:40px;
	position:relative;
}
.specArea ul li {
	margin-right:1rem;
	padding:0 0 0 4px;
	margin-bottom:20px;
	border-right:1px solid #000000;
}
.specArea ul li:last-child {
	border-right:none;
}
.spec .plan {
	font-size:2.4rem;
	font-weight:bold;
	color:#006835;
	margin:0 1rem 0 0;
	padding:0;
	float:left;
}
.spec .value {
	font-size:1.6rem;
	font-weight:bold;
	margin:0;
	padding:6px 0 0;
	float:left;
}
.spec .kw {
	margin:0 20px 0 0;
	padding:10px 20px 0;
	float:left;
	position:relative;
	top:0px;
	left:20px;
}
.spec .kw img {
	padding:4px 0 0 0;
	float:left;
	position:relative;
	top:-10px;
}
.spec .orange {
	font-size:2.4rem;
	font-weight:bold;
	color:#f39800;
	padding:0 6px 0;
	float:left;
	position:relative;
	top:-10px;
}
.specNote {
	margin:0;
	padding:10px 0px 0;
	float:left;
}
.specLine {
	width:100%;
	margin-top:10px;
	border-bottom:1px solid #006835;
	float:left;
}
.spec ul {
	padding:0;
	float:left;
}
.spec ul li {
	padding:6px 0;
}
.gaikanBox {
	text-align:center;
}
.sec02Box .gaikan {
	margin-bottom:60px;
}
.roomColor {
	width:100%;
	float:left;
	margin:30px 0 0 0;
}
.roomColor img {
	float:left;
}
.roomColor ul {
	margin:0;
	padding:0;
}
.roomColor ul li {
	display:block;
	margin:0 0 28px 0;
}
.roomColor ul li .color01 {
	background-color:#f4dcc7;
	border:1px solid #aaa;
	width:80px;
	height:24px;
	float:left;
	margin-right:20px;
}
.roomColor ul li .color02 {
	background-color:#fef4e0;
	border:1px solid #aaa;
	width:80px;
	height:24px;
	float:left;
	margin-right:20px;
}
.roomColor ul li .color03 {
	background-color:#eeefef;
	border:1px solid #aaa;
	width:80px;
	height:24px;
	float:left;
	margin-right:20px;
}

/* section03
--------------------------------------------------------------- */
.section03 {
	margin:0;
	padding:40px;
	float:left;
	border-bottom:1px solid #ddd;
	border-top:1px solid #ddd;
	text-align:center;
	background-image:url(../images/bnr_bg.png);
	background-repeat:repeat;
}
.section03 a {
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}
.section03 a:hover {
	opacity:0.7;
}

/* section04
--------------------------------------------------------------- */
.section04 {
	width:100%;
	background:#fff;
	padding:20px;
}
.section04 ul {
	margin:0;
	padding:0;
}
.section04 ul li {
	margin:0;
	padding: 6px 0;
	font-size:1.2rem;
}
.section04 ul li ul li {
	padding:0;
}



/* footer
--------------------------------------------------------------- */
footer {
	width:100%;
	float:left;
	background:#006835;
	color:#fff;
	text-align:center;
}
.copyRight {
	padding:10px 0;
}

@media screen and (max-width: 768px) {
	/* columns
	--------------------------------------------------------------- */
	.columnWrap {
		width:100%;
		float:left;
	}
	.columnBox {
		float:left;
		margin-right:4%;
	}
	.columnBox:last-child {
		float:right;
		margin-right:0;
	}
	.column01 {
		width: 100%;
	}
	.column02 {
		width: 100%;
	}
	.column03 {
		width:100%;
	}
	.column04 {
		width:100%;
	}
	.columnGaikan {
		width:100%;
		margin:20px 0 0 0;
	}
	.column_madori01 {
		width:100%;
		text-align:center;
		margin:20px 0;
	}
	.column_madori02 {
		width:100%;
		text-align:center;
		margin:20px 0;
	}
	.column_madori02 img {
		width:100%;
		max-width:338px;
	}
	
	/* section01
	--------------------------------------------------------------- */
	.section01 {
		padding:0;
		margin-top:0px;	
	}
	.section01 .modelhouse {
		padding:4%;
	}
	
	/* section02
	--------------------------------------------------------------- */
	.section02 {
		padding:4%;
	}
	.section02 .example {
		margin-bottom:20px;
	}
	.section02 .example p {
		padding:6px 20px;
	}
	.specArea {
	margin-bottom:0;
}
	.specArea ul li {
		display:block;
		border:none;
	}
	.section02 .spec {
		margin:0 auto;
	}
	.spec .plan {
		float:none;
	}
	.spec .value {
		float:none;
	}
	.spec .kw {
		padding:10px 0px 0;
		float:none;
		left:0px;
	}
	.spec .kw img {
		padding:4px 0 0 0;
		float:left;
		position:relative;
		top:0px;
	}
	.spec .orange {
		padding:0 6px 0;
		float:none;
		position:relative;
		top:0px;
	}
	.specNote {
		margin:0;
		padding:10px 0 0px 0;
		float:none;
	}
	.spec img {
		float:left;
	}
	.spec .planNumber {
		margin-right:20px;
		margin-bottom:40px;
		position:relative;
		top:20px;
	}
	.roomColor {
		margin:20px 0 20px 0;
	}
	
	/* section03
	--------------------------------------------------------------- */
	.section03 {
		margin:0;
		padding:4%;
	}
	
	/* section04
	--------------------------------------------------------------- */
	.section04 {
		padding:4%;
	}
	
	/* footer
	--------------------------------------------------------------- */
	footer {
		float:left;
	}
	.copyRight {
		text-align:center;
		font-size:1.2rem;
	}
}