@charset "UTF-8";
.is-quality .u-title__hi + * {
	margin-top: 100px;
}
#quality02 .u-section-title__hi {
	color: #99c944;
	border-color: #99c944;
	letter-spacing: -.05em;
}
#quality03 .u-section-title__hi {
	color: #5dc1cf;
	border-color: #5dc1cf;
}
#quality04 .u-section-title__hi {
	color: #81a3bb;
	border-color: #81a3bb;
}
#quality05 .u-section-title__hi {
	color: #8664bf;
	border-color: #8664bf;
}


/* ------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* REASON */
.is-quality .reason {
	margin: 150px auto 210px;
}

/* SECTION */
.section-wrap {
	width: 76%;
	min-width: 1100px;
}
.section-wrap:before {
	content: "";
	display: block;
	height: 138px;
	width: 138px;
	background: #fff;
	border-top: 138px solid #faf8f0;
  border-right: 138px solid #faf8f0;
  border-bottom: 138px solid transparent;
  border-left: 138px solid transparent;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}
.section__right .section-wrap:before {
	border-top: 138px solid #faf8f0;
	border-right: 138px solid transparent;
	border-bottom: 138px solid transparent;
	border-left: 138px solid #faf8f0;
	right: auto;
	left: 0;
}
#quality02.section__right .section-wrap:nth-child(2):before {
	border: none;
	background: none;
}
#quality02 .section-wrap:nth-child(1):after {
	border-radius: 70px 0 0 0;
}
#quality02 .section-wrap:nth-child(2):after {
	border-radius: 0 0 0 70px;
}
.section-inner {
	max-width: 960px;
	padding: 80px 80px 110px 80px;
}
#quality02 .section-wrap:nth-child(1) .section-inner {
	padding-bottom: 60px;
}
#quality02 .section-wrap:nth-child(2) .section-inner {
	padding-top: 50px;
	padding-left: 70px;
}
#quality02 .section-title,
#quality04 .section-title {
	/*padding-left: 20%;*/
	padding-left: 150px;
}
.section-title h3 {
	font-size: 0;
	margin: 0;
	width: auto;
	position: absolute;
	right: 0;
	top: 0;
}
#quality02 .section-title h3,
#quality04 .section-title h3 {
	right: auto;
	left: 0;
}
.section-title h3:before {
	content: "";
	display: block;
	width: 261px;
	height: 291px;
	background: url(../image/quality/section01_title.png) no-repeat center/ contain;
	position: absolute;
	right: -40px;
	top: -60px;
	z-index: 2;
}
#quality02 .section-title h3:before {
	background-image: url(../image/quality/section02_title.png);
	right: auto;
	left: -50px;
}
#quality03 .section-title h3:before {
	background-image: url(../image/quality/section03_title.png);
}
#quality04 .section-title h3:before {
	background-image: url(../image/quality/section04_title.png);
	right: auto;
	left: -50px;
}
#quality05 .section-title h3:before {
	background-image: url(../image/quality/section05_title.png);
}
.section-title h3:after {
	font-family: 'Inter', sans-serif;
	font-size: 30px;
	font-weight: 500;
	color: #4ba674;
	letter-spacing: 0.16em;
	line-height: 1;
	white-space: nowrap;
	writing-mode: vertical-lr;
	content: attr(data-en)'';
	display: block;
	position: absolute;
	top: calc(276px + 30px);
	left: calc(100% + 10px);
	z-index: 2;
}
#quality02 .section-title h3:after {
	color: #99c944;
	left: auto;
	right: calc(100% + 20px);
}
#quality03 .section-title h3:after {
	color: #5dc1cf;
}
#quality04 .section-title h3:after {
	color: #81a3bb;
	left: auto;
	right: calc(100% + 20px);
}
#quality05 .section-title h3:after {
	color: #8664bf;
}
#quality01 .section-item:nth-child(1) .section-item-childL {
	display: flex;
	justify-content: flex-end;
}
#quality01 .section-item:nth-child(2) .section-item-childL:nth-child(1) {
	padding-right: 0;
}
#quality01 .section-item:nth-child(2) .section-item-childL:nth-child(2) {
	right: -80px;
	display: flex;
	justify-content: flex-end;
}
#quality03 .section-item-childL {
	padding-left: 0;
}
#quality04 .section-item-childL {
	padding-right: 0;
}
#quality04 .section-item-img.is-imgBg img {
	box-shadow: 18px 18px 0px 0 #dfe8ee;
}
#quality05 .section-item-img.is-imgBg img {
	box-shadow: 18px 18px 0px 0 #e2daf0;
}


/* ILLUST */
.l-illust p {
	position: absolute;
	z-index: 1;
}
#quality01 .l-illust p:nth-child(1) {
	bottom: -60px;
	left: 31%;
}
#quality02 .l-illust p:nth-child(1) {
	top: -50px;
	right: 0;
}
#quality02 .l-illust p:nth-child(2) {
	bottom: 50px;
	left: -60px;
}
#quality03 .l-illust p:nth-child(1) {
	top: 48%;
	right: -55px;
}
#quality03 .l-illust p:nth-child(2) {
	bottom: -20px;
	left: -30px;
}
#quality04 .l-illust p:nth-child(1) {
	top: -80px;
	right: -25px;
}
#quality04 .l-illust p:nth-child(2) {
	top: 64%;
	right: -40px;
}
#quality04 .l-illust p:nth-child(3) {
	bottom: -36px;
	left: 50%;
}
#quality05 .l-illust p:nth-child(1) {
	top: 38%;
	right: -65px;
}

/* DEMO */
.l-demo {
	margin-top: 40px;
}
.l-demo-title {
	display: flex;
	align-items: center;
	font-weight: bold;
	background: url(../image/quality/border.png) repeat-x bottom left/ 12px 2px;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
#housingPage .l-demo-title img {
	margin-right: 0.5em;
}
.l-demo-text {
	text-align: center;
	margin-bottom: 20px;
}
.l-demo-list ul {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.l-demo-list ul > * {
	font-size: 14px;
	position: relative;
}
.l-demo-list ul li:first-child {
	width: 52px;
	text-align: center;
}
.l-demo-list-title {
	color: #fff;
	text-align: center;
	line-height: 26px;
	background: #99c944;
	border-radius: 13px;
	margin: 0 auto 5px;
	width: 130px;
}
.l-demo-list-title.l-demo-list-title__in {
	color: #363636;
	background: #ddb871;
}
.l-demo-list-text {
	font-weight: bold;
	line-height: 1.35;
	text-align: center;
	color: #ea613b;
	background: #fff;
	border: 1px solid #ea613b;
	border-radius: 8px;
	padding: 0.75em 0;
	width: calc(100% - 52px);
}
.l-demo-list-time {
	font-family: 'Inter', sans-serif;
	font-size: 18px !important;
	margin-top: 15px;
}
.l-demo-list-time:before {
	content: "";
	display: block;
	background: url(../image/quality/demo_time8.png) no-repeat center/ contain;
	width: 52px;
	height: 52px;
}
.l-demo-list-time.l-demo-list-time__10:before {
	background-image: url(../image/quality/demo_time10.png);
}
.l-demo-list-time.l-demo-list-time__13:before {
	background-image: url(../image/quality/demo_time13.png);
}
.l-demo-list-time.l-demo-list-time__23:before {
	background-image: url(../image/quality/demo_time23.png);
}
.l-demo-list-time.l-demo-list-time__9:before {
	background-image: url(../image/quality/demo_time9.png);
}
.l-demo-list-img {
	width: calc((100% - 52px) / 2);
}
.l-demo-list__summer .l-demo-list-img:after {
	content: "";
	display: block;
	background: url(../image/quality/arrow__green.png) no-repeat center/ contain;
	width: 100%;
	height: 19px;
	margin: 14px 0;
}
.l-demo-list__summer .l-demo-list-img__in:after {
	background-image: url(../image/quality/arrow__orange.png);
}
.l-demo-list__winter .l-demo-list-img:after {
	content: "";
	display: block;
	background: url(../image/quality/arrowL__green.png) no-repeat center/ contain;
	width: 100%;
	height: 41px;
	margin: 14px 0;
}
.l-demo-list__winter .l-demo-list-img__in:after {
	background-image: url(../image/quality/arrowL__orange.png);
}
.l-demo-list-img.is-noArrow:after {
	display: none;
}
#housingPage .l-demo-list .e-comment01,
#housingPage .l-demo-list .e-comment02,
#housingPage .l-demo-list .e-comment03,
#housingPage .l-demo-list .e-comment04,
#housingPage .l-demo-list .e-comment05 {
	width: 106px;
	height: auto;
	position: absolute;
	z-index: 1;
}
.l-demo-list .e-comment01 {
	right: calc(50% - 25px);
	bottom: calc(100% - 18px);
}
.l-demo-list .e-comment02 {
	left: calc(50% + 5px);
	bottom: calc(100% - 22px);
}
.l-demo-list .e-comment03 {
	left: calc(50% + 10px);
	bottom: calc(50% - 10px);
}
.l-demo-list .e-comment04 {
	left: calc(50% - 55px);
	top: calc(50% - 8px);
}
.l-demo-list .e-comment05 {
	right: calc(50% + 15px);
	top: calc(50% - 28px);
}


/* LIST */
.l-list {
	margin-top: 20px;
	width: 100%;
}
.l-list > * {
	text-align: center;
}
.l-list figcaption {
	font-size: 16px;
	font-weight: bold;
	line-height: 1.25;
	margin-top: 1em;
}
.l-list img {
	height: 65px;
}



@media screen and (min-width: 768px) and ( max-width: 1120px) {
	.section-wrap {
		width: 94%;
		/*width: 86%;*/
		min-width: auto;
	}
	.section-inner {
		/*width: 94%;*/
		width: 100%;
    padding: 10% 6%;
	}
	#quality02 .section-wrap:nth-child(2) .section-inner {
		padding: 10% 4%;
	}
	
}


@media screen and (min-width: 320px) and ( max-width: 767px) {
	.is-quality .u-title__hi + * {
		margin-top: 50px;
	}


/* ------------------------------------------------------------
	CONTENTS
------------------------------------------------------------ */
/* REASON */
	.is-quality .reason {
		margin: 110px auto 90px;
	}

/* SECTION */
	.section-wrap {
		width: 94%;
		min-width: auto;
	}
	.section-wrap:before {
		height: 40px;
		width: 120px;
		border-top: 20px solid #faf8f0;
		border-right: 60px solid #faf8f0;
		border-bottom: 20px solid transparent;
		border-left: 60px solid transparent;
	}
	.section__right .section-wrap:before {
		border-top: 20px solid #faf8f0;
		border-right: 60px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 60px solid #faf8f0;
	}
	#quality02 .section-wrap:nth-child(1):after {
		border-radius: 35px 0 0 0;
	}
	#quality02 .section-wrap:nth-child(2):after {
		border-radius: 0 0 0 35px;
	}
	.section-inner {
		/*padding: 22% 10%;*/
		padding: 15% 10%;
	}
	#quality02 .section-wrap:nth-child(1) .section-inner {
		padding-bottom: 15%;
	}
	#quality02 .section-wrap:nth-child(2) .section-inner {
		padding-top: 15%;
		padding-left: 7%;
		padding-right: 7%;
	}
	#quality02 .section-title,
	#quality04 .section-title {
		padding-left: 0;
	}
	.section-title h3:before {
		width: 115px;
		height: 129px;
		right: -15px;
		top: -30px;
	}
	#quality02 .section-title h3:before,
	#quality04 .section-title h3:before {
		left: -15px;
		top: -75px;
	}
	.section-title h3:after {
		font-size: 12px;
		top: 100px;
		left: calc(100% + 5px);
	}
	#quality02 .section-title h3:after,
	#quality04 .section-title h3:after {
		right: calc(100% + 5px);
		top: 60px;
	}
	#quality01 .section-item:nth-child(1) .section-item-childL {
		left: -63%;
	}
	#quality01 .section-item:nth-child(1) .section-item-childL img {
		width: 163% !important;
	}
	#quality01 .section-item:nth-child(2) .section-item-childL:nth-child(2) {
		right: auto;
		left: 0;
	}
	#quality01 .section-item:nth-child(2) .section-item-childL:nth-child(2) img {
		width: 113% !important;
	}
	#quality03 .section-item-child.section-item-childL img {
		width: 100% !important;
	}
	#quality03 .section-item-img.is-imgBg img {
		box-shadow: 10px 10px 0px 0 #d6eff3;
	}
	#quality04 .section-item-img.is-imgBg img {
		box-shadow: 10px 10px 0px 0 #dfe8ee;
	}
	#quality05 .section-item-img.is-imgBg img {
		box-shadow: 10px 10px 0px 0 #e2daf0;
	}


/* ILLUST */
	#quality01 .l-illust p:nth-child(1) {
		bottom: -40px;
	}
	#quality02 .l-illust p:nth-child(1) {
		right: 20px;
	}
	#quality02 .l-illust p:nth-child(2) {
		bottom: 0;
		left: -15px;
	}
	#quality03 .l-illust p:nth-child(1) {
		top: 55%;
    right: -15px;
	}
	#quality03 .l-illust p:nth-child(2) {
		bottom: -20px;
    left: 66%;
	}
	#quality04 .l-illust p:nth-child(1) {
    top: -60px;
    right: 20px;
	}
	#quality04 .l-illust p:nth-child(2) {
		top: 70%;
    right: auto;
    left: -15px;
	}
	#quality04 .l-illust p:nth-child(3) {
		bottom: -35px;
    left: 20%;
	}
	#quality05 .l-illust p:nth-child(1) {
    top: 51%;
    right: -20px;
	}
	#quality01 .l-illust p:nth-child(1) img {
		width: calc(161px * 0.7) !important;
	}
	#quality02 .l-illust p:nth-child(1) img {
		width: calc(55px * 0.7) !important;
	}
	#quality02 .l-illust p:nth-child(2) img {
		width: calc(111px * 0.7) !important;
	}
	#quality03 .l-illust p:nth-child(1) img {
		width: calc(126px * 0.7) !important;
	}
	#quality03 .l-illust p:nth-child(2) img {
		width: calc(93px * 0.7) !important;
	}
	#quality04 .l-illust p:nth-child(1) img {
		width: calc(135px * 0.7) !important;
	}
	#quality04 .l-illust p:nth-child(2) img {
		width: calc(70px * 0.7) !important;
	}
	#quality04 .l-illust p:nth-child(3) img {
		width: calc(202px * 0.7) !important;
	}
	#quality05 .l-illust p:nth-child(1) img {
		width: calc(193px * 0.7) !important;
	}

	
/* DEMO */
	.l-demo {
		flex-wrap: wrap;
	}
	.l-demo > * {
		margin-bottom: 50px;
	}
	.l-demo > *:last-child {
		margin-bottom: 0;
	}
	.l-demo-list:last-child {
		margin-bottom: 0;
	}
	.l-demo-title {
		font-size: 15px;
		margin-bottom: 10px;
		padding-bottom: 10px;
	}
	.l-demo-title img {
		/*width: 70px !important;
    height: 70px;*/
	}
	.l-demo-text {
		font-size: 15px;
	}
	.l-demo-list {
	}
	.l-demo-list ul {
		gap: 5px;
	}
	.l-demo-list ul > * {
		font-size: 12px;
	}
	.l-demo-list ul li:first-child {
		width: 42px;
	}
	.l-demo-list-title {
		width: calc((100% - 42px) / 2);
		line-height: 22px;
	}
	.l-demo-list-title.l-demo-list-title__in {
	}
	.l-demo-list-text {
		padding: 0.5em 0;
		width: calc(100% - 42px);
	}
	.l-demo-list-time {
		font-size: 13px !important;
		margin-top: 10px;
	}
	.l-demo-list-time:before {
		width: 42px;
		height: 42px;
	}
	.l-demo-list-img {
		width: calc((100% - 42px) / 2);
	}
	.l-demo-list__summer .l-demo-list-img:after {
		margin: 10px 0;
	}
	.l-demo-list__summer .l-demo-list-img__in:after {
	}
	.l-demo-list__winter .l-demo-list-img:after {
		margin: 10px 0;
	}
	.l-demo-list__winter .l-demo-list-img__in:after {
	}
	#housingPage .l-demo-list .e-comment01,
	#housingPage .l-demo-list .e-comment02,
	#housingPage .l-demo-list .e-comment03,
	#housingPage .l-demo-list .e-comment04,
	#housingPage .l-demo-list .e-comment05 {
		width: 85px;
	}
	.l-demo-list .e-comment01 {
    right: calc(50% - 18px);
    bottom: calc(100% - 12px);
	}
	.l-demo-list .e-comment02 {
		bottom: calc(100% - 20px);
	}
	.l-demo-list .e-comment03 {
    left: calc(100% - 55px);
    bottom: 50%;
	}
	.l-demo-list .e-comment04 {
		left: calc(50% - 36px);
    top: calc(50% - 12px);
	}
	.l-demo-list .e-comment05 {
		top: calc(50% - 15px);
	}


/* LIST */
	.l-list {
		width: 90%;
    margin: 10px auto 0;
	}
	.l-list > * {
	}
	.l-list figcaption {
		font-size: 11px;
		margin-top: 0.5em;
	}
	.l-list img {
		height: 59px;
	}
}