@charset "utf-8";

/*=====================================================================================
	
	Document    : house.css
	Description : PC用（幅900px以上）
 
=====================================================================================*/

.hdS {
	background:url(../image/hd-photo.jpg) no-repeat center top;
}

.md {
	background:url("../../image/md-ic/reform.png") no-repeat center top;
	padding-top:60px;
}

@media screen and (max-width:420px) {
	.md {
		padding-top:36px;
		background-size:auto 28% !important;
	}
}

/*---------------------------------------------------------------------------

   introduction

---------------------------------------------------------------------------*/

.introduction p {
	text-align:left;
	padding-top:1em;
}


/*---------------------------------------------------------------------------

   ラインナップ

---------------------------------------------------------------------------*/

.lineup {
	position:relative;
}

.lineup .block {
	background:url(../../image/bg-black5.png) repeat center top;
	max-width:100% !important;
	position:relative;
}

.lineup-cut {
	width:100%;
	height:1300px;
	background:url(../image/cg-cut.png) no-repeat center top;
	position:absolute;
	left:0;
	top:50px;
	z-index:95;
}

.lineup h4,
.lineup p {
	position:relative;
}

.lineup-photo {
	padding-top:0 !important;
}

.lineup-photo h5 {
	border-top:5px solid #7ab9d8;
}

.lineup-list {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
}
.lineup-list div {
	width:calc(33.333% - 18px);
	padding:10px;
	background-color:#fff;
  box-sizing: border-box;
}
.lineup-list div img {
  display: block;
	margin-bottom:10px;
}
@media screen and (max-width:640px) {
  .lineup-list {
    gap: 28px;
  }
  .lineup-list div {
    width:calc(50% - 14px);
  }
}


/*---------------------------------------------------------------------------

   リフォームの流れ

---------------------------------------------------------------------------*/

.flow-list {
	max-width:1000px;
	margin-left:auto;
	margin-right:auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 27px;
}

.flow-box {
	width:calc(33.333% - 18px);
  box-sizing: border-box;
}

.flow-box h6 {
	background-color:#7ab9d8;
	color:#fff;
	padding:10px;
  margin-top: 0;
  margin-bottom: 12px;
}
.flow-box h6 .step {
  display: inline-block;
  font-size: 75%;
	color:#7ab9d8;
	background-color: #fff;
	padding: 8px 5px 5px;
  line-height: 1;
}
.flow-box h6 .text {
  display: block;
  margin-top: 7px;
}

.flow-box img {
  display: block;
  width: 100%;
  height: auto;
}

.flow-box ul {
	list-style: none;
  text-align: left;
  margin-bottom: 2em;
}
.flow-box ul li {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: .75em;
}
.flow-box ul li::before {
  content: "・";
}

@media screen and (max-width:640px) {
  .flow-list {
    max-width: 480px;
    gap: 28px;
  }
  .flow-box {
    width:100%;
  }
}