@charset "UTF-8";
/* CSS Document */

/*=================================
aboutArea
=================================*/
.aboutArea .sectionText{
	text-align: center;
}
.aboutArea .sectionText p+p{
	margin-top: 15px;
}
.aboutArea .step{
	margin-top: 50px;
}
.stepTitle{
  display:table;
  width:100%;
  overflow:hidden;
margin-bottom: 30px;
}
.stepTitle li{
  display:table-cell;
  position:relative;
  width: 33.3333%;
	padding: 10px 30px;
  color: #fff;
}
.stepTitle li:nth-child(1){background: #9edad0;}
.stepTitle li:nth-child(2){background: #69bfb1;}
.stepTitle li:nth-child(3){background: #47a092;}
.stepTitle li:last-child:before,
.stepTitle li:last-child:after{
  display:none;
}
.stepTitle li:before,
.stepTitle li:after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
	transform: translateY(-50%);
	top: 50%;
}
.stepTitle li:before{  
	right: -18px;
    border-style: solid;
    border-color: transparent transparent transparent #f5fffd;
    border-width: 40px 0 40px 30px;
    z-index: 10;
}
.stepTitle li:after{
    right: -15px;
    border-style: solid;
    border-color: transparent transparent transparent #9edad0;
    border-width: 40px 0 40px 30px;
    z-index: 10;
}
.stepTitle li:nth-child(2):after{
    border-color: transparent transparent transparent #69bfb1;
}
.aboutArea .stepTitle h4{
	font-size: 1.8rem;
    font-weight: 500;
	font-family: 'Noto Sans JP', sans-serif;
}
.aboutArea .stepList li{
	position: relative;
	opacity: 0;
	transform: translateX(-30px);
	z-index: 3;
}
.aboutArea .stepList li+li{
	z-index: 2;
}
.aboutArea .stepList li+li+li{
	z-index: 1;
}
.aboutArea .stepList li.inview{
	opacity: 1;
	transform: translateX(0);
}
.aboutArea .stepList li::after{
	content: "";
}
.aboutArea .stepList li .inner{
	position: relative;
}
.aboutArea .stepList .point{
	font-size: 1.8rem;
    font-weight: 500;
    margin: 20px auto 20px;
    line-height: 1.6;
}
@media only screen and (max-width: 767px) {
	.aboutArea .sectionText{
		text-align: left;
	}
	.stepTitle{display: none;}
	.aboutArea .stepList li{
		position: relative;
		opacity: 0;
		transform: translate(0,-30px);
	}
	.aboutArea .stepList li.inview{
		transform: translateY(0,0);
	}
	.aboutArea .stepList li:nth-child(-n+2){
		padding-bottom: 50px;
	}
	.aboutArea .stepList li::before{
		content: "";
		position: absolute;
		top: 0;
		right: 15px;
		display: block;
		width: 30px;
		height: 100%;
		line-height: 30px;
		-ms-writing-mode: tb-rl;
    	writing-mode: vertical-rl;
		font-weight: 500;
    	font-family: 'Noto Sans JP', sans-serif;
		font-size: 1.6rem;
    	padding-top: 15px;
		color: #fff;
	}
	.aboutArea .stepList li+li::before{
    	padding-top: 30px;
	}
	.aboutArea .stepList li:nth-child(1)::before{
		content: "購入";
    	background: #9edad0;
	}
	.aboutArea .stepList li:nth-child(2)::before{
		content: "リノベーション";
    	background: #69bfb1;
	}
	.aboutArea .stepList li:nth-child(3)::before{
		content: "販売・アフターサービス";
    	background: #47a092;
	}
	.aboutArea .stepList li:nth-child(-n+2)::after{
		    content: "";
			position: absolute;
			bottom: -10px;
			right: 20px;
			border-style: solid;
			border-color: transparent #9edad0 transparent transparent;
			border-width: 20px 20px 0px 0px;
			transform: rotate(45deg);
			z-index: 5;
	}
	.aboutArea .stepList li:nth-child(2)::after{
			border-color: transparent #69bfb1 transparent transparent;
	}
	.aboutArea .stepList li .inner {
		padding-right: 45px;
	}
	.aboutArea .stepList .point {
		font-size: 1.6rem;
		line-height: 1.4;
		margin: 15px auto;
	}
	.aboutArea .stepList p{
		line-height: 1.4;
	}
}
/*=================================
copyArea
=================================*/
.contentsWrap .copyArea{
	margin-top: 0;
}
.copyArea .sectionWrap{
	padding-top: 150px;
}
.copyArea .loopslider{
	position: absolute;
	z-index: -2;
	top: 0;
	width: calc(100% - 80px);
	overflow: hidden;
	height: 400px;
	margin: 40px auto 0;
	left: 0;
	right: 0;
}
.loopslider_wrap{
	display: flex;
	height: 400px!important;
	overflow: hidden;
}
.copyArea .loopslider ul{
	display: flex;
	height: 100%;
}
.copyArea .loopslider li{
    position: relative;
    width: 570px;
	height: 100%;
}
.copyArea .loopslider li figure{
    position: relative;
	height: 100%;
}
.copyArea .message{
    background: rgba(255,255,255,.925);
    width: 970px;
    margin: 0 auto;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 5%);
    padding: 6% 4%;
}
.messageImg{
	position: absolute;
	z-index: -1;
}
.copyArea h3{
	font-size: 3.2rem;
    font-weight: 500;
    line-height: 2;
    text-align: center;
}
.copyArea p{
	margin-top: 60px;
	font-family: YakuHanMP_Noto, "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;	
	line-height: 2.6;
    font-size: 1.5rem;
	padding: 0 4%;
}
.copyArea p+p{
	margin-top: 30px;
}

#canvasWave_footer {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
	z-index: -1;
}
@media only screen and (max-width: 1240px) {
	.copyArea .loopslider li{
		position: relative;
		width: 470px;
		height: 100%;
	}
	.copyArea .message{
		width: 92%;
		padding: 8%;
		margin: 0 auto;
	}
	.copyArea h3 {
		line-height: 1.6;
	}
	.copyArea p{
		padding: 0;
	}
}
@media only screen and (max-width: 991px) {
	.copyArea h3 {
		font-size: 3rem;
	}
	.copyArea p br{
		display: none;
	}
}
@media only screen and (max-width: 767px) {
	.copyArea .loopslider{
		width: 88%;
		height: 280px;
	}
	.loopslider_wrap{
		height: 280px!important;
	}
	.copyArea h3 {
		font-size: 2.4rem;
		text-align: left;
	}
	.copyArea p{
		line-height: 2;
	}
	.copyArea p{
		margin-top: 30px;
		text-align: left;
	}
	.copyArea p+p{
		margin-top: 15px;
	}
}
@media only screen and (max-width: 320px) {}
/*ie*/
@media all and (-ms-high-contrast: none) {
}