@charset "utf-8";
.topSec h2{line-height:1.5;}
.fgSec{width:100%;}
.fgSec figcaption{text-align:left;}
.fgSec h2{
	position:relative;
	line-height:1.666;
}
.fgSec h2 strong{
	position:relative;
	white-space:nowrap;
	z-index:1;
}
.fgSec h2 span{
	position:absolute;
	color:var(--pale-color);
	white-space:nowrap;
	opacity:0;
	transition:opacity 1.2s cubic-bezier(0.215,0.61,0.355,1),transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
	z-index:0;
}
#house h2 span{transform:translateX(100%);}
#living h2 span{transform:translateX(-100%);}
#house h2.show span,
#living h2.show span{
	transform:translateX(0);
	opacity:1;
}
.fgSec h3{
	line-height:2.0;
	font-weight:normal;
}
#living .fg > *{display:block;}
#growth{
	margin:0 auto;
	text-align:left;
}
#growth .doubleTtl strong{line-height:1.6;}
#mvv{
	width:100%;
	background-color:#f0f6f7;
	overflow:hidden;
}
#mvv .doubleTtl{
	position:relative;
	margin:0 auto;
	text-align:left;
}
#mvv .doubleTtl small,
#mvv .doubleTtl strong{
	position:relative;
	z-index:1;
}
#mvv .doubleTtl span{
	position:absolute;
	z-index:1;
	color:#edeee1;
	opacity:0;
	transition:opacity 1.2s cubic-bezier(0.215,0.61,0.355,1),transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
	transform:translateX(-100%);
}
#mvv .doubleTtl.show span{
	transform:translateX(0);
	opacity:1;
}
#mvv .fg{display:block;}
.mvvSec,
.mvvShipSec{
	margin:0 auto;
	background-color:#fff;
	text-align:left;
}
.mvvTtl > *{display:block;}
.mvvSec .mvvTtl{color:var(--main-color);}
.mvvSec .mvvTtl strong{line-height:1.0;}
.mvvSec .mvvTtl small{
	line-height:2.142;
	font-weight:normal;
}
.mvvShipSec .mvvTtl{line-height:1.0;}
.sysSec{position:relative;}
.sysSec:before{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	display:block;
	width:100%;
	z-index:0;
}
.sysSec > *{
	position:relative;
	z-index:1;
}
.sysSec .sysTtl{
	width:100%;
	display:block;
	line-height:1.0;
}
.sysFg{
	position:relative;
	text-align:left;
}
#human:before{background-color:#eef8f5;}
#human .sysTtl{color:#488b5a;}
#specialist:before{background-color:#fefaea;}
#specialist .sysTtl{color:#d6a93a;}
#etc:before{background-color:#f1f3f7;}
#etc .sysTtl{color:#2d303b;}
.sysFg h4{
	display:block;
	line-height:1.0;
}
#benefit .doubleTtl{position:relative;}
#benefit .doubleTtl > *{
	position:relative;
	z-index:1;
}
#benefit .doubleTtl:before{
	content:attr(data-attr);
	display:block;
	position:absolute;
	line-height:1.0;
	font-family:"Radley", serif;
	font-weight:400;
	font-style:normal;
	color:var(--pale-color);
	opacity:0;
	transition:opacity 1.2s cubic-bezier(0.215,0.61,0.355,1),transform 1.2s cubic-bezier(0.215,0.61,0.355,1);
	transform:translateX(-100%);
	z-index:0;
}
#benefit.show .doubleTtl:before{
	transform:translateX(0px);
	opacity:1;
}
.benefitLink{margin:0 auto;}
.benefitLink li{
	display:grid;
	grid-template-columns:auto auto;
	grid-template-rows:auto;
}
.benefitLink li .txt{text-align:left;}
.benefitTtl,
.benefitTtl > *{
	display:block;
	line-height:1.0;
}
@media screen and (max-width:767.98px){/*390px*/
	.topSec h2{
		margin-bottom:4.6154vw;
		font-size:3.3333rem;
	}
	.fgSec figcaption{margin:0 5.1282vw;}
	.fgSec h2{text-align:center;}
	.fgSec h2 strong{
		margin:0 auto;
		font-size:2.5rem;
	}
	.fgSec h2 span{font-size:8.3333rem;}
	.fgSec h3{
		margin-top:6.6667vw;
		font-size:1.3333rem;
	}
	.fgSec p{margin-top:5.8974vw;}
	#house{margin-top:14.8718vw;}
	#house h2 span{
		top:-18.7179vw;
		left:calc(50% - 18.4615vw);
	}
	#house figcaption{padding:77px 0 62px;}
	#living{
		display:flex;
		flex-direction:column;
	}
	#living figcaption{
		order:1;
		padding:17.9487vw 0 15.3846vw;
		border-top:1px solid #f8f2e2;
	}
	#living h2 span{
		top:-17.1795vw;
		left:calc(50% - 55.2821vw);
	}
	#living .fg{
		order:2;
		display:grid;
		grid-template-columns:65.3846% 34.6154%;
		grid-template-rows:auto;
	}
	#growth{padding:0 5.1282vw 30.2564vw;}
	#growth .doubleTtl{margin-bottom:9.7436vw;}
	#growth .doubleTtl strong{
		margin-top:20.5128vw;
		font-size:3.3333rem;
	}
	#growth .doubleTtl small{
		margin-top:3.3333vw;
		font-size:1.1667rem;
	}
	#growth p+p{margin-top:10.2564vw;}
	#mvv{padding:22.5641vw 5.1282vw 13.3333vw;}

	#mvv .doubleTtl small{font-size:1.1667rem;}
	#mvv .doubleTtl strong{
		font-size:2.0rem;
		line-height:1.666;
	}
	#mvv .doubleTtl span{font-size:3.6667rem;}
	#mvv .fg{
		width:calc(100% + 10.2564vw);
		margin:8.9744vw -5.1282vw 8.2051vw;
	}
	.mvvSec,
	.mvvShipSec{
		margin-top:4.1026vw;
		padding:8.2051vw 6.1538vw;
	}
	.mvvSec .mvvTtl,
	.mvvShipSec .mvvTtl{text-align:center;}
	.mvvSec .mvvTtl strong{font-size:4.1667rem;}
	.mvvSec .mvvTtl small{margin-top:2.5641vw;}
	.mvvSec .mvvSttl{
		margin-top:8.9744vw;
		font-size:1.875rem;
		line-height:1.833;
	}
	.mvvSec .mvvTxt{margin-top:4.1026vw;}
	.mvvShipSec .mvvTtl{
		align-self:center;
		font-size:2.0rem;
	}
	.mvvShipSec .mvvTxt{
		margin-top:6.6667vw;
		font-size:1.1667rem;
		text-align:center;
	}
	#system{margin-top:17.9487vw;}
	#system .doubleTtl{margin-bottom:16.9231vw;}
	.sysSec+.sysSec{margin-top:21.0256vw;}
	.sysSec:before{height:calc(100% - 25.8974vw);}
	.sysSec .sysTtl{
		margin-bottom:11.5385vw;
		font-size:1.6667rem;
	}
	.sysFg{
		width:100%;
		padding:0 5.1282vw 10.5128vw;
	}
	.sysFg figcaption{margin-top:6.1538vw;}
	.sysFg h4{font-size:1.5rem;}
	.sysFg p{margin-top:3.8462vw;}
	#benefit{padding:16.6667vw 5.1282vw 27.6923vw;}
	#benefit .doubleTtl{margin-bottom:15.3846vw;}
	#benefit .doubleTtl:before{
		bottom:-10.7692vw;
		left:calc(50% - 40.7692vw);
		font-size:8.3333rem;
	}
	
	.benefitLink{margin-top:14.359vw;}
	.benefitLink li{
		width:100%;
		grid-template-columns:22.857% 72.0%;
		column-gap:5.143%;
		padding-bottom:7.1795vw;
		border-bottom:1px solid #f8f2e2;
	}
	.benefitLink li+li{margin-top:10vw;}
	.benefitTtl{font-size:1.6667rem;}
	.benefitTtl small{
		margin-top:2.8205vw;
		font-size:1.0rem;
	}
	.benefitLink li .txt p{margin-top:1.7949vw;}
}
@media screen and (min-width:768px){
	.topSec h2{font-size:3.125rem;}
	.fgSec,
	#growth{
		display:flex;
		justify-content:space-between;
		align-items:flex-start;
	}
	#living{flex-direction:row-reverse;}
	.fgSec > *{width:50%;}
	.fgSec h2 strong{font-size:2.5rem;}
	.fgSec h2 span{font-size:9.375rem;}
	.fgSec h3{font-size:1.25rem;}
	#living .fg02{margin-top:4.63768%;}
	#growth .doubleTtl strong{font-size:3.125rem;}
	#growth .doubleTtl small{font-size:1.25rem;}
	#mvv .doubleTtl small{font-size:1.25rem;}
	#mvv .doubleTtl strong{font-size:2.5rem;}
	#mvv .doubleTtl span{font-size:9.375rem;}
	.mvvSec,
	.mvvShipSec{display:grid;}
	.mvvSec{
		grid-template-columns:46.024% 53.976%;
		grid-template-rows:auto auto;
	}
	.mvvSec .mvvTtl{
		grid-column:1 / 2;
		grid-row:1 / 3;
	}
	.mvvSec .mvvTtl strong{font-size:3.75rem;}
	.mvvSec .mvvTtl strong:after{
		content:"";
		display:inline-block;
		height:1px;
		background-color:var(--main-color);
		vertical-align:middle;
	}
	.mvvSec .mvvTtl small{font-size:0.875rem;}
	.mvvSec .mvvSttl{
		grid-column:2 / 3;
		grid-row:1 / 2;
		font-size:1.875rem;
		line-height:1.666;
	}
	.mvvSec .mvvTxt{
		grid-column:2 / 3;
		grid-row:2 / 3;
	}
	.mvvShipSec{
		grid-template-columns:37.349% 62.651%;
		grid-template-rows:auto;
	}
	.mvvShipSec .mvvTtl{
		grid-column:1 / 2;
		align-self:center;
		font-size:1.875rem;
	}
	.mvvShipSec .mvvTxt{
		grid-column:2 / 3;
		font-size:1.25rem;
	}
	.sysSec{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.sysSec .sysTtl{font-size:2.125rem;}
	.sysFg{width:47.7%;}
	.sysFg h4{font-size:1.5rem;}
	#benefit .doubleTtl:before{font-size:8.125rem;}
	.benefitLink{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	.benefitLink li{
		width:48.913%;
		grid-template-columns:24.9% 75.1%; 
	}
	.benefitLink li .txt{padding-left:2.9739%;}
	.benefitTtl{font-size:1.875rem;}
	.benefitTtl small{font-size:1.5rem;}
}
@media screen and (min-width:768px) and (max-width:1219.98px){
	.topSec{margin-bottom:8.8333vw;}
	.topSec p{margin-top:4.3333vw;}
	.fgSec figcaption{padding-top:5.25vw;}
	.fgSec h3{margin-top:3.5833vw;}
	.fgSec p{margin-top:0.8333vw;}
	#living{margin-top:7.0833vw;}
	#growth{
		margin-top:12.5vw;
		padding:0 2vw;
	}
	#growth > *{width:50%;}
	#growth .doubleTtl strong{margin-top:6.25vw;}
	#growth .doubleTtl small{margin-top:2.5vw;}
	#growth .txt{padding-left:2.3333vw;}
	#growth .txt p+p{margin-top:3.3333vw;}
	#mvv{
		margin-top:11.5vw;
		padding:10.8333vw 0 5.6667vw;
	}
	#mvv .doubleTtl{padding:0 2vw;}
	#mvv .doubleTtl strong{margin-top:2.5vw;}
	#mvv .doubleTtl span{
		left:-5vw;
		top:-12.2vw;
	}
	#mvv .fg{margin-top:4.6667vw;}
	.mvvSec,
	.mvvShipSec{
		width:77.1667vw;
		margin-top:2.0vw;
		padding:4.5vw 4.0vw 3.0vw;
	}
	.mvvSec .mvvTtl strong:after{
		width:9.3333vw;
		margin-left:3.3333vw;
	}
	.mvvSec .mvvTxt{margin-top:0.8333vw;}
	#system{padding:9.8333vw 2vw 13.5833vw;}
	.sysSec{
		margin-top:7.5vw;
		padding:0 6.3333vw 7.1667vw;
	}
	.sysSec:before{height:calc(100% - 11.6667vw);}
	.sysSec .sysTtl{margin-bottom:5.3333vw;}
	.sysFg h4{margin-top:1.8333vw;}
	.sysFg p{margin-top:1.0vw;}
	#benefit .doubleTtl{margin-bottom:4.5vw;}
	#benefit .doubleTtl:before{
		bottom:-3.9167vw;
		left:calc(50% - 17.1667vw);
	}
	.benefitLink{margin:4.5vw 2vw 0;}
	.benefitLink li:nth-child(n+3){margin-top:4.5vw;}
	.benefitTtl small{margin-top:1.5vw;}
	.benefitLink li .txt p{margin-top:1.1667vw;}
}
@media screen and (min-width:768px) and (max-width:1399.98px){
	#house figcaption{
		padding-left:6.9565%;
		padding-right:6.521739%;
	}
	#house h2 span{
		left:16.0833vw;
		top:-8.1667vw;
	}
	#living .fg{padding-left:4.0579%;}
	#living figcaption{
		padding-left:6.521739%;
		padding-right:6.9565%;
	}
	#living h2 strong{margin-right:-4.6667vw;}
	#living h2 span{
		left:-9.5833vw;
		top:-8.1667vw;
	}
}
@media screen and (min-width:1220px){
	.topSec{margin-bottom:106px;}
	.topSec p{margin-top:52px;}
	.fgSec figcaption{padding-top:63px;}
	.fgSec h3{margin-top:43px;}
	.fgSec p{margin-top:10px;}
	#living{margin-top:85px;}
	#growth{
		margin-top:150px;
		padding-right:calc(50% - 600px);
		padding-left:calc(50% - 600px);
	}
	#growth .doubleTtl strong{margin-top:75px;}
	#growth .doubleTtl small{margin-top:30px;}
	#growth .txt{padding-left:28px;}
	#growth .txt p+p{margin-top:40px;}
	#mvv{
		margin-top:138px;
		padding:130px 0 68px;
	}
	#mvv .doubleTtl{
		padding-right:calc(50% - 600px);
		padding-left:calc(50% - 600px);
	}
	#mvv .doubleTtl strong{margin-top:30px;}
	#mvv .doubleTtl span{
		left:calc(50% - 690px);
		top:-145px;
	}
	#mvv .fg{margin:56px auto;}
	.mvvSec,
	.mvvShipSec{
		width:926px;
		margin-top:24px;
		padding:54px 48px 36px;
	}
	.mvvSec .mvvTtl strong:after{
		width:112px;
		margin-left:40px;
	}
	.mvvSec .mvvTtl small{margin-top:11px;}
	.mvvSec .mvvTxt{margin-top:10px;}
	#system{
		padding:118px 0 164px;
		padding-right:calc(50% - 600px);
		padding-left:calc(50% - 600px);
	}
	.sysSec{
		margin-top:90px;
		padding:0 76px 86px;
	}
	.sysSec:before{height:calc(100% - 140px);}
	.sysSec .sysTtl{margin-bottom:64px;}
	.sysFg h4{margin-top:22px;}
	.sysFg p{margin-top:12px;}
	#benefit .doubleTtl{margin-bottom:54px;}
	#benefit .doubleTtl:before{
		bottom:-47px;
		left:calc(50% - 206px);
	}
	.benefitLink{
		width:1104px;
		margin-top:54px;
	}
	.benefitLink li:nth-child(n+3){margin-top:54px;}
	.benefitTtl small{margin-top:18px;}
	.benefitLink li .txt p{margin-top:14px;}
}
@media screen and (min-width:1400px){
	#house .fg{padding-left:calc(50% - 690px);}
	#house figcaption{
		padding-left:8.0vw;
		padding-right:calc(50% - 600px);
	}
	#house h2 span{
		left:193px;
		top:-98px;
	}
	#living .fg{
		padding-right:calc(50% - 690px);
		padding-left:56px;
	}
	#living figcaption{
		padding-left:calc(50% - 600px);
		padding-right:8.0vw;
	}
	#living h2 strong{margin-right:-56px;}
	#living h2 span{
		left:-115px;
		top:-98px;
	}
}