@charset "utf-8";
/* =============================================================
 * 家づくりの流れ
 * ============================================================= */
.content .headline {
	margin: 0 auto 5%;
	width: 75%;
}
.content .type01 {
	margin: 0 auto -1%;
	width: 80%;
	text-align: right;
}
.content .type02 {
	margin: 0 auto -1%;
	width: 80%;
	text-align: left;
}
.content .type03 {
	margin: 0 auto -1%;
	width: 80%;
	text-align: right;
}
.content .type04 {
	margin: 0 auto -1%;
	width: 80%;
	text-align: left;
}
.content .type05 {
	margin: 0 auto -1%;
	width: 80%;
	text-align: right;
}
.content .type01 img {
	width: 30%;
}
.content .type02 img {
	width: 35%;
}
.content .type03 img {
	width: 33%;
}
.content .type04 img {
	width: 27%;
}
.content .type05 img {
	width: 35%;
}
.content .type-wrap01 {
	margin: 0 auto 3%;
	width: 80%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 1%;
	box-sizing: border-box;
	background-color: #FFFFFF;
	color: #000000;
}
.content .type-wrap02 {
	margin: 0 auto 3%;
	width: 80%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 1%;
	box-sizing: border-box;
	background-color: #E5DDD9;
	color: #000000;
}
.type-wrap01 .box01 {
	width: 50%;
	float: right;
}
.type-wrap02 .box01 {
	width: 50%;
	float: left;
}
.type-wrap01 .name {
	width: 90%;
	border-bottom: 1px dotted #000000;
	font-size: 2.3vw;
	margin: 0 0 2%;
	font-weight: bold;
}
.type-wrap02 .name {
	width: 100%;
	border-bottom: 1px dotted #000000;
	font-size: 2.3vw;
	margin: 0 0 2%;
	font-weight: bold;
}
.type-wrap01 .txt {
	width: 90%;
}
.type-wrap02 .txt {
	width: 100%;
}
.type-wrap01 .image01 {
	width: 45%;
	float: left;
	line-height: 0;
}
.type-wrap02 .image01 {
	width: 45%;
	float: right;
	line-height: 0;
}
.type-wrap01 .image02 {
	width: auto;
	line-height: 0;
}
.type-wrap01 .photo-box {
	width: 54%;
	margin: 7.2% 0 0;
	float: right;
}
.type-wrap02 .photo-box {
	margin: 18.4% 0 0;
	width: 54%;
}
.photo-box .image02 {
	width: 32%;
	margin: 0 2% 0 0;
	float: left;
	line-height: 0;
}
.photo-box .image03 {
	width: 32%;
	margin: 0 2% 0 0;
	float: left;
	line-height: 0;
}
.photo-box .image04 {
	width: 32%;
	float: left;
	line-height: 0;
}

/* 
=============================
　　　　スマホ
=============================
*/
@media screen and (max-width: 699px) {
.content .headline {
  width: 90%;
}
.content .type-wrap01 {
	margin: 0 auto 10%;
  width: 90%;
	padding: 4%;
}
.content .type-wrap02 {
	margin: 0 auto 10%;
  width: 90%;
	padding: 4%;
}
.type-wrap01 .box01 {
  width: 100%;
  float: none;
}
.type-wrap02 .box01 {
  width: 100%;
  float: none;
}
.type-wrap01 .name {
  width: 100%;
  font-size: 18px;
}
.type-wrap02 .name {
  width: 100%;
  font-size: 18px;
}
.type-wrap01 .txt {
  width: 100%;
  margin: 0 0 5%;
}
.type-wrap02 .txt {
  width: 100%;
  margin: 0 0 5%;
}
.type-wrap01 .photo-box {
  width: 100%;
  margin: 0;
  float: none;
}
.type-wrap02 .photo-box {
  width: 100%;
  margin: 0;
  float: none;
}
.type-wrap01 .image01 {
  width: 48%;
	margin: 0 0 4%;
  float: left;
}
.type-wrap02 .image01 {
  width: 48%;
	margin: 0 0 4%;
  float: left;
}
.photo-box .image02 {
  width: 48%;
  margin: 0 0 4%;
  float: right;
}
.photo-box .image03 {
  width: 48%;
  float: left;
}
.photo-box .image04 {
  width: 48%;
  float: right;
}
.content .type01 {
	margin: 0 auto -2%;
	width: 80%;
	text-align: left;
}
.content .type02 {
	margin: 0 auto -2%;
	width: 80%;
	text-align: left;
}
.content .type03 {
	margin: 0 auto -2%;
	width: 80%;
	text-align: left;
}
.content .type04 {
	margin: 0 auto -2%;
	width: 80%;
	text-align: left;
}
.content .type05 {
	margin: 0 auto -2%;
	width: 80%;
	text-align: left}
.content .type01 img {
	width: 60%;
}
.content .type02 img {
	width: 70%;
}
.content .type03 img {
	width: 65%;
}
.content .type04 img {
	width: 60%;
}
.content .type05 img {
	width: 70%;
}
}