@charset "utf-8";

#mainArea ul,
#mainArea li {
	list-style-type: none;
}
#mainArea img {
	width: 100%;
}

/* main_head
---------------------------- */
.main_head {
	position: relative;
	z-index: 1;
}
.main_head .main_titleBox {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 100%;
	height: 230px;
	padding: 0 2.5%;
}
.main_head .main_title {
	padding: 0;
	margin: 0;
	font-size: 3rem;
	line-height: 1.6;
}
.main_head .main_title span {
	font-size: 1.6rem;
	font-weight: 400;
	display: block;
}
.main_head .main_lead {
	padding: 40px 0 0 0;
	margin: 0;
	font-size: 3.4rem;
	line-height: 1.5;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-weight: 600;
	text-shadow: 0px 0px 30px #fff;
}
@media screen and (min-width:1080px) {
	.main_head .main_titleBox {
		width: 1080px;
		height: 255px;
		padding: 0 2.5%;
	}
	.main_head .main_lead {
		font-size: 5rem;
	}
}
@media screen and (max-width:767px){
	.main_head .main_titleBox {
		width: 100%;
		height: 50px;
		padding: 0 6%;
	}
	.main_head .main_title {
		font-size: 2.2rem;
	}
	.main_head .main_title span {
		font-size: 1.2rem;
	}
}

/* section_lead
---------------------------- */
#section_lead {
	padding: 100px 0;
	text-align: center;
}
#section_lead .text {
	padding: 0;
	margin: 0;
	font-size: 2rem;
	line-height: 2;
	font-weight: 400;
}
@media screen and (min-width:1000px) {
	#section_lead .text {
		font-size: 2.6rem;
	}
}
@media screen and (max-width:767px){
	#section_lead {
		padding: 12vw 0 0 0;
		text-align: center;
	}
	#section_lead .main_lead {
		padding: 0;
		margin: 0;
		font-size: 2.4rem;
		line-height: 1.8;
		font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
		font-weight: 600;
	}
	#section_lead .text {
		padding: 7vw 0 13vw 0;
		text-align: left;
		font-size: 1.6rem;
		line-height: 1.8;
	}
}

/* promise
---------------------------- */
.promise {
	padding: 0 0 100px;
}
.promise .main_title {
	padding: 0;
	margin: -100px 0 0;
	color: #01b8be;
	font-weight: 700;
	font-size: 5.2rem;
}
.promise .main_title .en {
	font-size: 1.8rem;
	line-height: 1;
	display: block;
	position: relative;
	font-weight: 400;
	padding-bottom: 30px;
}
.promise .main_title .en::after{
  position: absolute;
  left: 0;
  bottom: 15px;
  content: "";
  width: 50px;
  height: 1px;
  background-color: #01b8be;
}
.promise .main_title .small {
	font-size: 3.4rem;
	display: block;
}
.promise .main_title .big {
	font-size: 10rem;
	line-height: 0.8;
}
.promise .main_lead {
	padding: 70px 0 180px;
	margin: 0;
	font-size: 1.8rem;
	line-height: 2;
	position: relative;
}
.promise .main_lead .bg {
	position: absolute;
	bottom: -50px;
	right: -80px;
	width: 326px !important;
}
.promise .promise_item {
	padding: 0;
	margin: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.promise .promise_item li {
	width: 47.5%;
	background-color: #fff;
	padding: 30px 30px 30px;
	box-shadow: 0px 4px 10px 0px #d6d6d6;
	position: relative;
}
.promise .promise_item li::after{
  position: absolute;
  right: -33px;
  bottom: -33px;
  content: "";
  width: 80px;
  height: 80px;
  background: url('../img/service/renovation/promise_item_parts.png') center no-repeat;
  background-size: contain;
}
.promise .promise_item li.item_r {
	margin: -200px 0 0 0;
}
.promise .promise_item li.item_l {
	margin: 100px 0 0 0;
}
.promise .promise_item .num {
	position: absolute;
	top: -15px;
	left: -15px;
	font-size: 1.4rem;
	line-height: 1;
	color: #fff;
	background-color: #01b8be;
	border-radius: 10px;
	text-align: center;
	width: 100px;
	height: 100px;
	box-sizing: border-box;
	padding-top: 20px;
}
.promise .promise_item .num span {
	font-size: 4rem;
	font-weight: 700;
	display: block;
	padding-top: 5px;
}
.promise .promise_item .text {
	padding: 30px 0 0;
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
}
.promise .promise_item .text_line01 {
	height: 2em;
}
.promise .promise_item .text span {
	font-size: 1.6rem;
}
@media screen and (min-width:1000px) {
	.promise .promise_item .text {
	  font-size: 2rem;
	}
}
@media screen and (max-width:767px){
	.promise {
		padding: 0 0 15vw;
	}
	.promise .main_title {
		margin: 10vw 0 0;
		font-size: 3.6rem;
	}
	.promise .main_title .en {
		font-size: 1.4rem;
		padding-bottom: 25px;
	}
	.promise .main_title .en::after{
	  bottom: 15px;
	}
	.promise .main_title .small {
		font-size: 2rem;
		line-height: 1;
	}
	.promise .main_title .big {
		font-size: 5rem;
	}
	.promise .main_lead {
		padding: 5vw 0 150px;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.promise .main_lead .bg {
		position: absolute;
		bottom: -20px;
		right: 0;
		width: 200px !important;
	}
	.promise .promise_item {
		padding: 0 5%;
	}
	.promise .promise_item li {
		width: 100%;
		padding: 3vw 3vw 5vw;
	}
	.promise .promise_item li::after{
	  right: -26px;
	  bottom: -26px;
	  width: 60px;
	  height: 60px;
	}
	.promise .promise_item li.item_r {
		margin: 10vw 0 0 0;
	}
	.promise .promise_item li.item_l {
		margin: 10vw 0 0 0;
	}
	.promise .promise_item .num {
		top: -15px;
		left: -15px;
		font-size: 1.3rem;
		border-radius: 8px;
		width: 70px;
		height: 70px;
		padding-top: 10px;
	}
	.promise .promise_item .num span {
		font-size: 3rem;
		padding-top: 5px;
	}
	.promise .promise_item .text {
		padding: 5vw 4vw 0;
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.promise .promise_item .text_line01 {
		height: auto;
	}
	.promise .promise_item .text span {
		font-size: 1.2rem;
	}
}

/* step
---------------------------- */
.step {
	padding: 200px 0 0;
  background: url('../img/service/renovation/step_bg.jpg') top center no-repeat;
  background-size: 100%;
}
.step .main_title {
	padding: 0 0 50px;
	margin: 0;
	color: #01b8be;
	font-weight: 700;
	font-size: 4rem;
	text-align: center;
}
.step .main_title span {
	font-weight: 400;
	font-size: 1.8rem;
	display: block;
	position: relative;
	padding-bottom: 15px;
}
.step .main_title span::after{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 8px;
  content: "";
  width: 50px;
  height: 1px;
  background-color: #01b8be;
}
.step .whiteBox {
	background: rgba(255,255,255,0.8);
	box-shadow: 0px 5px 20px 0px #d6d6d6;
	padding: 90px 70px 20px;
}
.step .whiteBox .step_item {
	padding: 0 0 40px;
	margin: 0;
}
.step .whiteBox .step_item li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 50px;
	position: relative;
}
.step .whiteBox .step_item li::after{
  position: absolute;
  left: 9%;
  top: 74px;
  content: "";
  width: 10px;
  height: 100%;
  font-size: 5px;
  writing-mode: vertical-rl;
  letter-spacing: 15px;
}
.step .whiteBox .step_item li.item_01::after { color: #01b8be; content: "●●●●●●";}
.step .whiteBox .step_item li.item_02::after { color: #01b8be; content: "●●●●●";}
.step .whiteBox .step_item li.item_03::after { color: #01a2b1; content: "●●●●●";}
.step .whiteBox .step_item li.item_04::after { color: #008ca4; content: "●●●●●●●●"; top: 72px;}
.step .whiteBox .step_item li.item_05::after { color: #00719b; content: "●●●"; top: 76px;}
.step .whiteBox .step_item li.item_06::after { display: none; }

.step .whiteBox .step_item li .numBox {
	width: 23%;
}
.step .whiteBox .step_item li .numBox .num {
	font-size: 1.4rem;
	color: #fff;
	text-align: center;
	padding: 8px 30px 8px 0;
}
.step .whiteBox .step_item li.item_01 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #01b8be 0); }
.step .whiteBox .step_item li.item_02 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #01b8be 0); }
.step .whiteBox .step_item li.item_03 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #01a2b1 0); }
.step .whiteBox .step_item li.item_04 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #008ca4 0); }
.step .whiteBox .step_item li.item_05 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #00719b 0); }
.step .whiteBox .step_item li.item_06 .numBox .num { background:linear-gradient(-125deg, transparent 41px, #00629b 0); }

.step .whiteBox .step_item li .numBox .num span {
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
	padding-left: 5px;
}
.step .whiteBox .step_item li .textBox {
	width: 73%;
	padding-top: 5px;
}
.step .whiteBox .step_item li .textBox .title {
	padding: 0;
	margin: 0;
	font-size: 2.4rem;
	font-weight: 700;
}
.step .whiteBox .step_item li.item_01 .textBox .title { color: #01b8be; }
.step .whiteBox .step_item li.item_02 .textBox .title { color: #01b8be; }
.step .whiteBox .step_item li.item_03 .textBox .title { color: #01a2b1; }
.step .whiteBox .step_item li.item_04 .textBox .title { color: #008ca4; }
.step .whiteBox .step_item li.item_05 .textBox .title { color: #00719b; }
.step .whiteBox .step_item li.item_06 .textBox .title { color: #00629b; }

.step .whiteBox .step_item li .textBox .text {
	padding: 10px 0 0;
	margin: 0;
	font-size: 1.6rem;
}
.step .aftercare {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	border-top: 1px dashed #afafaf;
	padding: 70px 0;
}
.step .aftercare .img {
	width: 22%;
	text-align: center;
}
.step .aftercare .img img {
	max-width: 180px;
}
.step .aftercare .textBox {
	width: 73%;
	padding-right: 27%;
	position: relative;
}
.step .aftercare .textBox .title {
	padding: 0;
	margin: 0;
	font-size: 3rem;
	color: #01b8be;
	font-weight: 700;
}
.step .aftercare .textBox .text {
	padding: 0;
	margin: 0;
	font-size: 1.6rem;
}
.step .aftercare .textBox .bg{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	width: 31%;
	height: 165%;
}
@media screen and (max-width:767px){
	.step {
		padding: 23vw 0 0;
	}
	.step .main_title {
		padding: 0 0 5vw;
		font-size: 2.8rem;
	}
	.step .main_title span {
		font-size: 1.4rem;
	}
	.step .whiteBox {
		padding: 5vw 5vw 5vw;
	}
	.step .whiteBox .step_item {
		padding: 0 0 5vw;
	}
	.step .whiteBox .step_item li {
		padding-bottom: 7vw;
	}
	.step .whiteBox .step_item li::after{
	  left: 5%;
	  top: 11vw;
	  font-size: 4px;
	}
	.step .whiteBox .step_item li.item_01::after { color: #01b8be; content: "●●●●●●●●";}
	.step .whiteBox .step_item li.item_02::after { color: #01b8be; content: "●●●●●●●●";}
	.step .whiteBox .step_item li.item_03::after { color: #01a2b1; content: "●●●●●"; top: 12vw;}
	.step .whiteBox .step_item li.item_04::after { color: #008ca4; content: "●●●●●●●●●●●●●"; top: 12vw;}
	.step .whiteBox .step_item li.item_05::after { color: #00719b; content: "●●●"; top: 17vw;}
	.step .whiteBox .step_item li.item_06::after { display: none; }

	.step .whiteBox .step_item li .numBox {
		width: 27%;
	}
	.step .whiteBox .step_item li .numBox .num {
		font-size: 1.1rem;
		padding: 5px 34px 8px 0;
	}
	.step .whiteBox .step_item li.item_01 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #01b8be 0); }
	.step .whiteBox .step_item li.item_02 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #01b8be 0); }
	.step .whiteBox .step_item li.item_03 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #01a2b1 0); }
	.step .whiteBox .step_item li.item_04 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #008ca4 0); }
	.step .whiteBox .step_item li.item_05 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #00719b 0); }
	.step .whiteBox .step_item li.item_06 .numBox .num { background:linear-gradient(-115deg, transparent 41px, #00629b 0); }

	.step .whiteBox .step_item li .numBox .num span {
		font-size: 2rem;
		padding-left: 0;
		display: block;
	}
	.step .whiteBox .step_item li .textBox {
		width: 73%;
		padding-top: 5px;
	}
	.step .whiteBox .step_item li .textBox .title {
		font-size: 2rem;
	}
	.step .whiteBox .step_item li .textBox .text {
		padding: 5px 0 0;
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.step .aftercare {
		padding: 10vw 0 5vw;
	}
	.step .aftercare .img {
		width: 100%;
		text-align: left;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.step .aftercare .img img {
		width: 30% !important;
	}
	.step .aftercare .img .title {
		padding: 0;
		margin: 0;
		width: 65%;
		font-size: 2rem;
		font-weight: 700;
		color: #01b8be;
	}
	.step .aftercare .textBox {
		width: 100%;
		padding-right: 0;
	}
	.step .aftercare .textBox .text {
		font-size: 1.4rem;
		line-height: 1.6;
		padding: 5vw 30vw 5vw 0;
	}
	.step .aftercare .textBox .bg{
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		right: 0;
		width: 31%;
		height: 70%;
	}
}