@charset "utf-8";

/*-------------------------------
	メインビジュアル
-------------------------------*/

.Mainvisual{
	width: 100%;
}
.Mainvisual__inner-wrap{
	width: 100%;
	height: calc(100vh - 9rem);
	position: relative;
}
.Mainvisual__inner{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.Mainvisual-block{
	border-right: 2px solid var(--subcolor);
	width: 48.5rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}
.Mainvisual-block__inner::before{
	content: "";
	display: block;
	width: 100%;
	height: 7.1rem;
	margin-bottom: .5rem;
	background-image: url(../images/index/icon_mainvisual-title.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.Mainvisual-block__inner{
	width: 30rem;
}
.Mainvisual-block__title{
	font-size: 4.2rem;
	margin-bottom: 2.2rem;
	font-weight: 700;
	line-height: calc(6.9 / 4.2);
	letter-spacing: .22em;
	white-space: nowrap;
	text-align: center;
}
.Mainvisual-block__en{
	font-family: var(--en);
	margin-bottom: 4.5rem;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .526em;
	display: block;
	text-align: center;
}
.Mainvisual-block__text{
	font-size: 1.9rem;
	letter-spacing: .2em;
	line-height: calc(3.5 / 1.9);
	font-weight: 700;
	text-align: center;
}
.Mainvisual-block__text span{
	line-height: 1;
	position: relative;
}
.Mainvisual-block__text span::after{
	background: var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: .3rem;
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
}
.Mainvisual-slider{
	/* width: 50%;
	width: calc(50% + ((var(--largewidth-number) / 2) - 38rem)); */
	width: calc(100% - 48.5rem);
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: auto;
}
.Mainvisual-slider__inner{
	z-index: auto;
}
.Mainvisual-slider__image{
	width: 100%;
	overflow: hidden;
}
.Mainvisual-slider__image picture{
	width: 100%;
	height: 100%;
	display: block;
}
.Mainvisual-slider__image img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 8s linear;
}
.Mainvisual-slider__image.swiper-slide-active img{
	transform: scale(1.1);
}
.Mainvisual-slider__arrow{
	width: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 6000;
}
.Mainvisual-slider__arrow-item{
	transition: var(--transition);
	background: var(--subcolor);
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.Mainvisual-slider__arrow-item::before{
	content: "";
	display: block;
	width: 1rem;
	height: 1.5rem;
	background-image: url(../images/common/icon_arrow2-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.Mainvisual-slider__arrow-item.-prev::before{
	transform: scale(-1,1);
}
.Mainvisual-slider__arrow-item:hover{
	opacity: .7;
}
.Mainvisual-flowing{
	border-top: 2px solid var(--subcolor);
	border-bottom: 2px solid var(--subcolor);
	height: 7.6rem;
}
.Mainvisual-flowing__inner{
	transition-timing-function: linear;
}
.Mainvisual-flowing__item{
	font-family: var(--en);
	width: 47.5rem;
	font-size: 2.2rem;
	padding-left: 3rem;
	font-weight: 600;
	letter-spacing: .47em;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}
.Mainvisual-flowing__item::before{
	background: var(--maincolor);
	content: "";
	display: block;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Mainvisual-block{
		width: 38.5rem;
	}
	.Mainvisual-slider{
		width: calc(100% - 38.5rem);
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Mainvisual__inner{
		height: auto;
		padding-left: 0;
		position: relative;
		z-index: 6000;
		align-items: flex-start;
	}
	.Mainvisual-block{
		border-bottom: 2px solid var(--subcolor);
		border-left: 2px solid var(--subcolor);
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
		height: auto;
		background: #fff;
		justify-content: center;
	}
	.Mainvisual-slider{
		width: 100%;
	}

}
@media screen and (max-width:768px){

	.Mainvisual__inner-wrap{
		height: 37.5rem;
		position: relative;
		display: flex;
        align-items: flex-end;
        justify-content: flex-end;
	}
	.Mainvisual__inner{
		height: auto;
		padding-bottom: 2rem;
		padding-right: 1.5rem;
		align-items: flex-end;
		justify-content: flex-end;
		position: relative;
        z-index: 6000;
	}
	.Mainvisual-block{
		border: none;
		width: auto;
		background: none;
	}
	.Mainvisual-block__inner::before{
		height: 3rem;
		background-image: url(../images/index/sp_icon_mainvisual-title.svg);
		filter: drop-shadow(0 0 .3rem rgba(0, 0, 0, .75));
	}
	.Mainvisual-block__inner{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		text-shadow: 0 0 .3rem rgba(0,0,0,.75);
	}
	.Mainvisual-block__title{
		font-size: 1.8rem;
		margin-bottom: .5rem;
		line-height: calc(2.8 / 1.8);
		color: #fff;
	}
	.Mainvisual-block__en{
		margin-bottom: 0;
		font-size: .6rem;
		color: #fff;
	}
	.Mainvisual-block__text{
		display: none;
	}
	.Mainvisual-slider{
		width: 100%;
	}
	.Mainvisual-slider__arrow{
		width: 4.6rem;
	}
	.Mainvisual-slider__arrow-item{
		width: 2.3rem;
		height: 2.3rem;
	}
	.Mainvisual-slider__arrow-item::before{
		width: .8rem;
		height: .8rem;
	}
	.Mainvisual-flowing{
		border-top: 2px solid var(--subcolor);
		border-bottom: 2px solid var(--subcolor);
		height: 3.8rem;
	}
	.Mainvisual-flowing__item{
		width: 28.5rem;
		font-size: 1.3rem;
		padding-left: 2rem;
		padding-top: .4rem;
	}
	.Mainvisual-flowing__item::before{
		width: .6rem;
		height: .6rem;
	}

}



/*-------------------------------
	メッセージ
-------------------------------*/

.MessageMenu-wrap{
	overflow: hidden;
}
.Message{
	padding-bottom: 5rem;
	position: relative;
}
.Message::before{
	font-family: var(--en);
	content: "HOUSIS";
	display: block;
	font-size: 14rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2em;
	color: #e6e6e6;
	position: absolute;
	right: 0;
	top: 0;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	z-index: -1;
}
.Message-block{
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.Message-block__body{
	width: calc(100% - 36rem);
	padding-right: 2.5rem;
}
.Message-block__title{
	width: 100%;
	margin-bottom: 2.6rem;
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: .15em;
	line-height: 1;
	display: flex;
	align-items: flex-start;
	justify-items: flex-start;
	flex-direction: column;
	position: relative;
}
.Message-block__title::before{
	background: var(--maincolor);
	content: "";
	display: block;
	width: 5.8rem;
	height: 5.8rem;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-47.5%,-40%);
}
.Message-block__title span{
	line-height: calc(6 / 3.5);
	display: inline-block;
	position: relative;
}
.Message-block__title span::after{
	background: var(--subcolor);
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	position: absolute;
	left: 0;
	bottom: .2rem;
	right: 0;
}
.Message-block__title span:nth-of-type(1)::after{
	width: calc(100% - .6em);
}
.Message-block__title span:nth-of-type(2)::after{
	width: calc(100% - .2em);
}
.Message-block__text{
	margin-bottom: 2.8rem;
}
.Message-block .C-Button{
	margin-left: 0;
}

.Message-block__image{
	width: 36rem;
}
.Message-block__image img{
	width: 100%;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Message{
		padding-bottom: 3.5rem;
	}
	.Message::before{
		font-size: 8rem;
		padding-top: 1rem;
	}
	.Message-block{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		flex-direction: column;
	}
	.Message-block__body{
		width: 100%;
		padding-right: 0;
	}
	.Message-block__title{
		margin-bottom: 2.4rem;
		font-size: 1.7rem;
		letter-spacing: .13em;
		flex-direction: row;
	}
	.Message-block__title::before{
		width: 2.8rem;
		height: 2.8rem;
		transform: translate(-47.5%,-50%);
	}
	.Message-block__title span{
		padding-bottom: .6rem;
		line-height: 1;
	}
	.Message-block__title span::after{
		bottom: 0;
	}
	.Message-block__title span:nth-of-type(1)::after{
		width: 100%;
	}
	.Message-block__text-image{
		width: 100%;
		margin-bottom: 3.7rem;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.Message-block__text{
		width: calc(100% - 10rem);
		margin-bottom: 0;
		padding-right: 1.2rem;
		text-align: left;
	}
	.Message-block__image{
		width: 10rem;
	}
	.Message-block .C-Button{
		margin-left: auto;
	}

}



/*-------------------------------
	リフォーム・リノベーションメニュー
-------------------------------*/

.Menu .C-Title{
	margin-bottom: 3rem;
}
.Menu-block-wrap{
	width: 100%;
	gap: 3.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.Menu-block{
	width: calc((100% - (3.3rem * 4)) / 5);
}
.Menu-block a{
	opacity: 1 !important;
}
.Menu-block__image{
	width: 100%;
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.Menu-block__image img{
	transition: var(--transition);
	width: 100%;
}
.Menu-block__text{
	width: 100%;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Menu-block__text-inner{
	line-height: 1;
	display: block;
}

.Menu-block a:hover .Menu-block__image img{
	transform: scale(1.1);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Menu-block{
	width: calc((100% - (3.3rem * 2)) / 3);
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Menu{
		padding-top: 3.5rem;
		padding-bottom: 7rem;
	}
	.Menu .C-Title{
		margin-bottom: 2.5rem;
	}
	.Menu-block-wrap{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		gap: 0;
	}
	.Menu-block{
		border-bottom: 1px solid var(--subcolor);
		width: 100%;
	}
	.Menu-block a{
		width: 100%;
		padding-bottom: 1rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		opacity: 1 !important;
	}
	.Menu-block:not(:first-child){
		padding-top: 1rem;
	}
	.Menu-block__image{
		width: 8rem;
		margin-bottom: 0;
	}
	.Menu-block__text{
		width: calc(100% - 8rem);
		padding-left: 2rem;
		font-size: 1.6rem;
	}

}



/*-------------------------------
	コンセプト
-------------------------------*/

.Concept{
	padding-bottom: 0;
	position: relative;
}
.Concept::before{
	transition: var(--transition);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}
.Concept::after{
	font-family: var(--en);
	transition: var(--transition);
	content: "";
	display: block;
	font-size: 12rem;
	line-height: 1;
	font-weight: 600;
	letter-spacing: .2em;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: -1;
	color: #fff;
	opacity: 0;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
.Concept.-on::before{
	background: var(--graycolor);
}
.Concept.-on::after{
	opacity: 1;
}
.Cencept__title{
	font-size: 3.5rem;
	font-weight: 700;
	letter-spacing: .15em;
	line-height: 1;
	text-align: center;
}
.Cencept__title::before{
	content: "";
	display: block;
	width: 10.5rem;
	height: 4.7rem;
	margin-bottom: 1.5rem;
	margin-left: auto;
	margin-right: auto;
	background-image: url(../images/common/obj_title.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}
.Concept__inner{
	/* height: 400vh; */
	padding-top: 2.5rem;
	height: 300vh;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.Concept__image-wrap{
	width: calc(100% - 40.5rem);
	max-width: 33.6rem;
	height: 100vh;
	position: sticky;
	top: 0;
	left: 0;
	/* top: 9rem;
	padding-top: 50vh;
	transform: translateY(-25%); */
	margin-left: 0;
	overflow: visible;
}
.Concept__image{
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: auto;
}
.Concept__image-item{
	width: 100%;
	position: relative;
}
.Concept__image-item img{
	width: 100%;
	/* transform: rotate(-7deg); */
	transform: rotate(0deg);
	box-shadow: 0 0 1.1rem rgba(0,0,0,.1);
	opacity: 0;
	transition: var(--transition);
}
.Concept__image-item::before{
	background: var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	transform: rotate(0deg);
	opacity: 0;
	transition: var(--transition);
}
.swiper-slide-active.Concept__image-item img{
	transform: rotate(-7deg);
	opacity: 1;
}
.swiper-slide-active.Concept__image-item::before{
	transform: rotate(7deg);
	opacity: 1;
	width: calc(100% + 1rem);
	height: calc(100% + 1.2rem);
	left: 3.2rem;
	top: -.7rem;
}
.Concept-block-wrap{
	width: 42.5rem;
	height: 100%;
	/* padding-bottom: 4.5rem; */
}
.Concept-block-wrap__inner{
	height: 100%;
	/* padding-bottom: 6.5rem; */
}
.Concept-block{
	width: 100%;
	height: calc(100% / 3);
	display: flex;
	align-items: center;
    flex-direction: column;
    justify-content: center;
}
.Concept-block .Concept__image{
	display: none;
}
.Concept-block__category{
	width: 100%;
	margin-bottom: 1.5rem;
	gap: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	counter-reset: number 0;
}
.Concept-block__category-item{
	width: calc((100% - (1rem * 2)) / 3);
	max-width: 12.2rem;
	height: 3.3rem;
	line-height: 1;
	border-radius: 1.7rem;
	font-weight: 700;
	color: #fff;
	background: #999;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Concept-block__category-item.-current{
	background: var(--maincolor);
	color: var(--blackcolor);
}
.Concept-block__category-item::before{
	counter-increment: number 1;
	content: counter(number,decimal-leading-zero) "";
	line-height: 1;
	margin-right: .5rem;
}
.Concept-block__title{
	width: 100%;
	font-size: 3rem;
	margin-bottom: 3rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .05em;
	display: flex;
    align-items: flex-start;
    justify-items: flex-start;
    flex-direction: column;
    position: relative;
}
.Concept-block__title span{
	line-height: calc(5.8 / 3);
	display: inline-block;
    position: relative;
}
.Concept-block__title span::after{
	background: var(--subcolor);
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: .2rem;
    right: 0;
}
.Concept-block__text{
	margin-bottom: 3rem;
}
.Concept-block__button{
	width: auto;
	margin-left: 0;
}
.Concept-block__button a{
	padding-left: 2.5rem;
	padding-right: 1.8rem;
}

/*----- 01 people */
.Concept:has(.Concept__image-item.-people.swiper-slide-active)::after{
	content: "PEOPLE";
}
.Concept-block.-people .Concept-block__title span:nth-of-type(1)::after{
	width: calc(100% - .6em);
}

/*----- 02 Ecology */
.Concept:has(.Concept__image-item.-ecology.swiper-slide-active)::after{
	content: "ECOLOGY";
}

/*----- 03 Cost-cut */
.Concept:has(.Concept__image-item.-cost.swiper-slide-active)::after{
	content: "COST-CUT";
}


@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Concept::after{
		top: 12rem !important;
	}
	.Concept__image{
		width: 34rem !important;
	}
	.Concept-block__button{
		width: 36rem !important;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

	/* .Concept__image-wrap{
		width: 32.5%;
		max-width: 32.5%;
		transform: translateY(-12.5%);
	}
	.swiper-slide-active.Concept__image-item img{
		transform: rotate(-5deg);
	}
	.swiper-slide-active.Concept__image-item::before{
		transform: rotate(5deg);
	}
	.Concept-block-wrap{
		width: 67.5%;
		padding-left: 7.5rem;
	} */

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Concept{
		padding-top: 0;
		position: relative;
		margin-bottom: 0 !important;
	}
	.Concept::after{
		font-size: 7rem;
		top: 6.2rem;
		bottom: unset;
	}
	/* .Cencept__title{
		font-size: 2.3rem;
		margin-bottom: 2.8rem;
	}
	.Cencept__title::before{
		width: 7.3rem;
		height: 3.3rem;
		margin-bottom: 1.2rem;
	} */
	.Concept__inner{
		height: auto;
		margin-top: 0 !important;
	}
	.Concept__image-wrap{
		display: none;
	}
	.Concept-block .Concept__image{
		display: block;
	}
	.Concept__image{
		width: 21.6rem;
		height: 26.2rem;
		margin-bottom: 6.8rem;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		position: static;
		transform: translateY(0);
	}
	.Concept__image-item img{
		opacity: 1;
	}
	.Concept__image-item::before{
		opacity: 1;
	}
	.Concept-block.-on .Concept__image-item img{
		transform: rotate(-7deg);
		opacity: 1;
	}
	.Concept-block.-on .Concept__image-item::before{
		transform: rotate(4.2deg);
		opacity: 1;
		width: calc(100% + .6rem);
		height: calc(100% + .8rem);
		left: 2rem;
		top: -.5rem;
	}
	.Concept-block-wrap{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		width: 100%;
		height: 100%;
		/* padding-bottom: 4.5rem; */
		/* height: 400vh; */
		height: 200vh;
	}
	.Concept-block-wrap__inner{
		position: sticky;
		top: 0;
		/* height: calc(100% / 4); */
		height: 100vh;
		padding-bottom: 0;
	}
	.Concept-block{
		transition: var(--transition);
		width: 100%;
		/* height: calc(100% / 4); */
		height: 100%;
		padding-top: 6.2rem;
		/* position: sticky;
		top: 0; */
		align-items: flex-start;
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
	}
	.Concept-block.-on{
		opacity: 1;
	}
	.Concept-block__category{
		margin-bottom: 1.5rem;
		gap: .7rem;
		justify-content: flex-start;
	}
	.Concept-block__category-item{
		width: calc((100% - (.7rem * 2)) / 3);
		max-width: 8.5rem;
		height: 2.3rem;
		border-radius: 1.2rem;
		font-size: 1.1rem;
	}
	.Concept-block__title{
		font-size: 2.1rem;
		margin-bottom: 2.2rem;
	}
	.Concept-block__title span{
		line-height: calc(5.8 / 3);
	}
	.Concept-block__button{
		width: 27.6rem;
		margin-left: auto;
	}
	.Concept-block__button a{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

	/*----- 01 people */
	.Concept:has(.Concept-block.-people.-on)::after{
		content: "PEOPLE";
	}

	/*----- 02 Ecology */
	.Concept:has(.Concept-block.-ecology.-on)::after{
		content: "ECOLOGY";
	}

	/*----- 03 Cost-cut */
	.Concept:has(.Concept-block.-cost.-on)::after{
		content: "COST-CUT";
	}

}
@media screen and (max-width: 1100px) and (min-width: 769px) and (max-height: 700px){

	/* .Concept__inner{
		padding-top: 10rem;
	} */
	.Concept__image{
		width: 17.5rem !important;
		margin-bottom: 2.5rem;
	}
	.Concept-block{
		padding-top: 1.5rem;
	}

}
@media screen and (max-width: 1100px) and (min-width: 769px) and (max-height: 500px){

	.Concept__inner{
		padding-top: 20rem;
	}

}
@media screen and (max-width:768px){

	.Concept{
		padding-top: 0;
		position: relative;
		margin-bottom: 0 !important;
	}
	.Concept::after{
		font-size: 7rem;
		top: 6.2rem;
		bottom: unset;
	}
	.Cencept__title{
		font-size: 2.3rem;
		margin-bottom: 2.8rem;
	}
	.Cencept__title::before{
		width: 7.3rem;
		height: 3.3rem;
		margin-bottom: 1.2rem;
	}
	.Concept__inner{
		padding-left: calc(var(--padding-leftright) * 2);
		padding-right: calc(var(--padding-leftright) * 2);
		padding-top: 0;
		height: auto;
		margin-top: 0 !important;
	}
	.Concept__image-wrap{
		display: none;
	}
	.Concept-block-wrap{
		width: 100%;
		height: auto;
	}
	.Concept-block-wrap__inner{
		height: auto;
	}
	.Concept-block{
		padding-top: var(--padding-top);
		padding-bottom: var(--padding-bottom);
		height: auto;
	}
	.Concept-block .Concept__image{
		display: block;
	}
	.Concept__image{
		width: 21.6rem;
		height: 26.2rem;
		margin-bottom: 6.8rem;
		height: auto;
		margin-left: auto;
		margin-right: auto;
		position: static;
		transform: translateY(0);
	}
	.Concept__image-item img{
		opacity: 1;
	}
	.Concept__image-item::before{
		opacity: 1;
	}
	.Concept-block.-on .Concept__image-item img{
		transform: rotate(-7deg);
		opacity: 1;
	}
	.Concept-block.-on .Concept__image-item::before{
		transform: rotate(4.2deg);
		opacity: 1;
		width: calc(100% + .6rem);
		height: calc(100% + .8rem);
		left: 2rem;
		top: -.5rem;
	}
	.Concept-block__category{
		margin-bottom: 1.5rem;
		gap: .7rem;
		justify-content: flex-start;
	}
	.Concept-block__category-item{
		width: calc((100% - (.7rem * 2)) / 3);
		max-width: 8.5rem;
		height: 2.3rem;
		border-radius: 1.2rem;
		font-size: 1.1rem;
	}
	.Concept-block__title{
		font-size: 2.1rem;
		margin-bottom: 2.2rem;
		letter-spacing: .15em;
		white-space: nowrap;
	}
	.Concept-block__title span{
		line-height: calc(5.8 / 3);
	}
	.Concept-block__button{
		width: 27.6rem;
		margin-left: auto;
	}
	.Concept-block__button a{
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}

}



/*-------------------------------
	施工事例
-------------------------------*/

.C-Works-block-wrap,
.Works .No-data{
	margin-bottom: 6rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.C-Works-block-wrap,
	.Works .No-data{
		margin-bottom: 2.5rem;
	}
	
}


/*-------------------------------
	暮らしの声
-------------------------------*/

.Voice__inner-wrap{
	position: relative;
	z-index: 5000;
}
.Voice__inner-wrap::before{
	background: var(--maincolor);
	content: "";
	display: block;
	width: calc((100% - var(--maxwidth-number)) / 2);
	min-width: var(--padding-leftright);
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
}
.Voice-header{
	background: var(--maincolor);
	padding-top: 6rem;
	padding-bottom: 6rem;
	width: 44.6rem;
}
.Voice-header .C-Title{
	margin-bottom: 1.5rem;
}
.Voice-header__text{
	margin-bottom: 3.6rem;
}
.Voice-header .C-Button{
	margin-left: 0;
}
.Voice-header .C-Button a{
	border: 1px solid var(--subcolor);
}
.Voice__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.Voice-block-wrap{
	width: calc(100% - 44.6rem);
	padding-left: 6.4rem;
}
.Voice-block{
	border-bottom: 2px solid var(--subcolor);
}
.Voice-block a{
	width: 100%;
	padding-top: 2.2rem;
	padding-bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 1 !important;
}
.Voice-block__body{
	padding-right: 5rem;
	line-height: 1;
}
.Voice-block__category{
	border: 2px solid var(--subcolor);
	font-size: 1.4rem;
	margin-bottom: 1rem;
	padding: .3rem .7rem .4rem;
	font-weight: 700;
	line-height: 1;
	display: inline-block;
}
.Voice-block__category span{
	line-height: 1;
}
.Voice-block__category span::before{
	line-height: 1;
	margin-left: -.3em;
}
.Voice-block__category-area + .Voice-block__category-age::before,
.Voice-block__category-area + .Voice-block__category-family::before{
	content: "/";
}
.Voice-block__category-age + .Voice-block__category-family::before{
	content: "・";
}
.Voice-block__title{
	line-height: 1.35;
	font-weight: 700;
}
.Voice-block__body{
	width: calc(100% - 3.2rem);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

	.Voice-header{
		width: 50%;
	}
	.Voice-header .C-Title{
		flex-direction: column;
		align-items: flex-start;
	}
	.Voice-header .C-Title__en{
		margin-right: 0;
	}
	.Voice-block-wrap{
		padding-left: var(--padding-leftright);
		width: 50%;
	}

}
@media screen and (max-width:768px){

	.Voice{
		padding-top: 0;
	}
	.Voice__inner-wrap::before{
		display: none;
	}
	.Voice-header{
		padding-top: 4rem;
		padding-bottom: 4rem;
		margin-bottom: 2rem;
		/* width: 32rem; */
		width: 100%;
		background: none;
		position: relative;
		z-index: 5000;
	}
	.Voice-header::before{
		background: var(--maincolor);
		content: "";
		display: block;
		width: var(--padding-leftright);
		height: 100%;
		position: absolute;
		left: calc(var(--padding-leftright) * -1);
		top: 0;
		bottom: 0;
		z-index: -1;
	}
	.Voice-header::after{
		background: var(--maincolor);
		content: "";
		display: block;
		width: 32rem;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		position: absolute;
		z-index: -1;
	}
	.Voice-header .C-Title{
		margin-bottom: 2.2rem;
	}
	.Voice-header__text{
		padding-left: var(--padding-leftright);
		max-width: 25.5rem;
		margin-bottom: 3.2rem;
		text-align: left;
	}
	.Voice-header .C-Button{
		margin-left: auto;
	}
	.Voice__inner{
		flex-direction: column;
		align-items: flex-start;
	}
	.Voice-block-wrap{
		width: 100%;
		padding-left: 0;
	}
	.Voice-block a{
		padding-top: 1.8rem;
		padding-bottom: 1rem;
	}
	.Voice-block__body{
		padding-right: 2.5rem;
	}
	.Voice-block__category{
		border-width: 1px;
		font-size: 1.1rem;
		margin-bottom: 1rem;
		padding: .3rem .5rem .4rem;
	}
	.Voice-block__body{
		width: calc(100% - 2.2rem);
	}
	.Voice-block .C-Arrow{
		width: 2.2rem;
		height: 2.2rem;
	}
	.Voice-block .C-Arrow::after{
		width: .8rem;
		height: .5rem;
	}

}



/*-------------------------------
	わたしたちについて
-------------------------------*/

.About{
	background: var(--graycolor);
	overflow: hidden;
}
.About-block{
	width: 100%;
	margin-bottom: 6.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.About-block__body{
	width: 100%;
	max-width: 55.7rem;
	padding-right: 2.5rem;
}
.About .C-Title{
	margin-bottom: 2rem;
}
.About-block__text{
	margin-bottom: 3rem;
}
.About-block-banner{
	width: 100%;
	max-width: 53.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.About-block-banner__item{
	background: var(--subcolor);
	width: calc((100% - 1.2rem) / 2);
	height: 11.4rem;
	padding: .7rem;
	font-weight: 700;
	color: #fff;
}
.About-block-banner__item-text{
	border: 2px solid var(--maincolor);
	width: 100%;
	height: 100%;
	padding-bottom: .4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.About-block-banner__item-text::before{
	content: "";
	display: block;
	width: 3.5rem;
	height: 3rem;
	margin-bottom: .5rem;
	background-image: url(../images/index/icon_about-crown.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}
.About-block-banner__item-text span{
	line-height: calc(2.2 / 1.6);
	display: block;
	text-align: center;
}
.About-block__image{
	width: 46.1%;
	max-width: 53.2rem;
}
.About-block__image img{
	width: calc(100% + 5.6rem);
	max-width: 58.8rem;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.About-block{
		flex-direction: column;
	}
	.About-block__body{
		max-width: 100%;
		margin-bottom: 5rem;
		padding-right: 0;
	}
	.About-block-banner{
		margin-left: auto;
		margin-right: auto;
	}
	.About-block__image img{
		width: 100%;
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.About-block{
		margin-bottom: 4rem;
		flex-direction: column;
	}
	.About-block__body{
		width: 100%;
		max-width: 100%;
		padding-right: 0;
		margin-bottom: 4rem;
	}
	.About .C-Title{
		margin-bottom: 2.5rem;
	}
	.About-block__text{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		margin-bottom: 1.6rem;
	}
	.About-block-banner{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		max-width: 100%;
	}
	.About-block-banner__item{
		width: calc((100% - 1.2rem) / 2);
		height: 9.3rem;
		padding: .3rem;
	}
	.About-block-banner__item-text{
		padding-bottom: .4rem;
		font-size: 1rem;
	}
	.About-block-banner__item-text::before{
		width: 2rem;
		height: 1.6rem;
	}
	.About-block-banner__item-text span{
		width: 100%;
		height: calc((1em * (1.4 / 1)) * 3);
		line-height: calc(1.4 / 1);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.About-block__image{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		width: 100%;
		max-width: 100%;
	}
	.About-block__image img{
		width: 100%;
		max-width: 100%;
	}

}



/*-------------------------------
	お知らせ・イベント
-------------------------------*/

.News-block-wrap__inner{
	margin-bottom: 6.5rem;
}
.News-block{
	border-bottom: 2px solid var(--subcolor);
}
.News-block a{
	width: 100%;
	padding-top: 2rem;
	padding-bottom: 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	opacity: 1 !important;
}
.News-block__inner{
	width: calc(100% - 3.2rem);
	padding-right: 2.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.News-block__time{
	margin-right: 1.5rem;
	font-weight: 700;
	line-height: 1;
	display: block;
}
.News-block__category{
	background: var(--subcolor);
	width: 7.2rem;
	height: 2.3rem;
	font-size: 1.3rem;
	margin-right: 1.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.News-block__title{
	width: calc(100% - 18.8rem);
	line-height: 1.8;
	font-weight: 700;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.News .C-Title{
		margin-bottom: 2rem;
	}
	.News-block-wrap__inner{
		margin-bottom: 4rem;
	}
	.News-block a{
		padding-top: 2.2rem;
		padding-bottom: 1.8rem;
	}
	.News-block__inner{
		width: calc(100% - 2.2rem);
		padding-right: 2.5rem;
		flex-wrap: wrap;
	}
	.News-block__time{
		margin-right: 1.2rem;
	}
	.News-block__category{
		width: 5.8rem;
		height: 1.8rem;
		font-size: 1rem;
		margin-right: 0;
	}
	.News-block__title{
		width: 100%;
		line-height: 1.5;
		margin-top: 1rem;
	}
	.News-block .C-Arrow{
		width: 2.2rem;
		height: 2.2rem;
	}
	.News-block .C-Arrow::after{
		width: .8rem;
		height: .6rem;
	}

}



/*-------------------------------
	住宅コラム
-------------------------------*/

.Column{
	background: var(--graycolor);
}
.Column__text{
	margin-bottom: 4.5rem;
}
.Column-block-wrap{
	margin-bottom: 6.8rem;
}
.C-Column-block.swiper-slide-active::before{
	border: 2px solid var(--maincolor);
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 4000;
}
.C-Column-block a{
	position: relative;
	z-index: 6000;
}

.Column-arrow{
	width: 3.2rem;
	height: 3.2rem;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 6000;
}
.Column-arrow__item{
	transition: var(--transition);
	background: var(--subcolor);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	cursor: pointer;
}
.Column-arrow__item::after{
	content: "";
	display: block;
	width: 1.1rem;
	height: 1.7rem;
	background-image: url(../images/common/icon_arrow2-white.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.Column-arrow__item.-prev{
	left: calc(var(--maxwidth-number) / 2);
	transform: translateX(1rem);
}
.Column-arrow__item.-next{
	right: calc(var(--maxwidth-number) / 2);
	transform: translateX(-1rem);
}
.Column-arrow__item.-next::after{
	transform: scale(-1,1);
}
.Column-arrow__item:hover{
	opacity: .7;
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Column__text{
		padding-left: var(--padding-leftright);
		padding-right: var(--padding-leftright);
		margin-bottom: 2.8rem;
		text-align: left;
	}
	.Column-block-wrap{
		width: calc(100% + (var(--padding-leftright) * 2));
		margin-left: calc(var(--padding-leftright) * -1);
		margin-bottom: 4rem;
	}

	.Column-arrow{
		width: 2.4rem;
		height: 2.4rem;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.Column-arrow__item::after{
		width: .6rem;
		height: 1rem;
	}
	.Column-arrow__item.-prev{
		left: calc((26.4rem) / 2);
		transform: translateX(3.2rem);
	}
	.Column-arrow__item.-next{
		right: calc((26.4rem) / 2);
		transform: translateX(-3.2rem);
	}

}



/*-------------------------------
	ピックアップ
-------------------------------*/

.Pickup-block-wrap{
	gap: 3.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}
.Pickup-block{
	width: calc((100% - (3.6rem * 2)) / 3);
	aspect-ratio: 1 / .69;
}
.Pickup-block a{
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	position: relative;
	display: block;
	opacity: 1 !important;
}
.Pickup-block a::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5000;
	background: rgba(0,0,0,.5);
}
.Pickup-block__inner{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.Pickup-block__title{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	z-index: 6000;
	color: #fff;
}
.Pickup-block__title-en{
	font-family: var(--en);
	font-size: 4rem;
	margin-bottom: 1.2rem;
	letter-spacing: .2em;
	line-height: 1;
	font-weight: 700;
	display: block;
}
.Pickup-block__title-jp{
	width: 15.5rem;
	height: 3.5rem;
	font-size: 1.8rem;
	padding-bottom: .2rem;
	font-weight: 700;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.Pickup-block__image{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 4000;
}
.Pickup-block__image img{
	transition: var(--transition);
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.Pickup-block .C-Arrow{
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 6000;
}

.Pickup-block a:hover .Pickup-block__image img{
	transform: scale(1.1);
}

@media screen and (min-width:769px) , print{

}
@media screen and (max-width:1240px) and (min-width: 769px){

}
@media screen and (max-width:1100px) and (min-width: 769px){

	.Pickup-block{
		width: calc((100% - (3.6rem * 1)) / 2);
	}

}
@media screen and (max-width:960px) and (min-width: 769px){

}
@media screen and (max-width:768px){

	.Pickup-block-wrap{
		gap: 1.4rem;
		flex-direction: column;
	}
	.Pickup-block{
		width: 100%;
		max-width: 30rem;
		height: 16.7rem;
	}
	.Pickup-block a{
		padding: 1rem 1.2rem;
	}
	.Pickup-block__title-en{
		font-size: 2.8rem;
		margin-bottom: .8rem;
	}
	.Pickup-block__title-jp{
		width: 11.6rem;
		height: 2.8rem;
		font-size: 1.4rem;
		padding-bottom: .2rem;
		border-top-width: 1px;
		border-bottom-width: 1px;
	}

}