@charset "utf-8";
/* =============================================================
 * 家づくりの流れ
 * ============================================================= */
.content {
 	padding: 5% 0;
  color: #FFF;
}
.step-area {
	margin: 0 auto 2%;
	width: 80%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #FFFFFF;
	padding: 3%;
	color: #000;
}
.step-area .box01 {
	width: 40%;
	float: left;
}
.box01 .step-box {
	width: 100%;
	margin: 0 0 3%;
	display: table;
}
.step-box .step {
	display: table-cell;
	width: 20%;
}
.step-box .headline {
	font-size: 2vw;
	font-weight: bold;
	vertical-align: middle;
	padding: 0 0 0 5%;
	display: table-cell;
}
.step-area .box01 .txt {
	margin: 0 0 3%;
	font-size: 1.2vw;
}
.step-area .box02 .txt {
	margin: 0 0 3%;
	font-size: 1.2vw;
}
.box01 .btn01  {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #00003A;
	font-weight: bold;
	background-image: url(../img/flow/btn01.png);
	background-repeat: no-repeat;
	background-size: 30%;
	background-position: 97%;
	font-size: 1.2vw;
}
.box01 .btn01 a {
	color: #FFFFFF;
	padding: 2%;
	display: block;
}
.step-area .box02 {
	width: 45%;
	float: right;
}
.step-area .point-txt  {
	width: 95%;
	clear: both;
	font-size: 1.4vw;
	padding: 4% 5% 3%;
	background-color: #E5DDD9;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 13% auto 0;
	font-weight: bold;
	top: auto;
	position: relative;
}
.step-area .point  {
	width: 15%;
	position: absolute;
	top: -20%;
	left: 2%;
}
.box01 .btn02  {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #00003A;
	font-weight: bold;
	font-size: 1.2vw;
	text-align: center;
	width: 80%;
	margin: 10% 0 0;
}
.box01 .btn02 a {
	color: #FFFFFF;
	padding: 2%;
	display: block;
}
.triangle {
  width: 0;
  height: 0;
  border-left: 4rem solid transparent;
  border-right: 4rem solid transparent;
  border-top: 2.5rem solid #808080;
	text-align: center;
	margin: 0 auto 2%;
}
/* 
=============================
　　　　スマホ
=============================
*/
@media screen and (max-width: 699px) {
.step-area {
  margin: 0 auto 5%;
  width: 90%;
}
.step-area .box01 {
  width: 100%;
  float: none;
}
.step-area .box02 {
  width: 100%;
  float: none;
}
.step-box .step {
  width: 15%;
}
.step-box .headline {
  font-size: 16px;
}
.step-area .box01 .txt {
  font-size: 14px;
}
.box01 .btn01 {
  margin: 0 0 5%;
  font-size: 14px;
}
.triangle {
  margin: 0 auto 5%;
}
.step-area .box02 .txt {
  font-size: 14px;
}
.step-area .point-txt {
  font-size: 14px;
}
.step-area .point {
  width: 25%;
  top: -13%;
}
.box01 .btn02 {
	width: 90%;
  font-size: 14px;
	margin: 0 auto 5%;
}
}