@charset "utf-8";
/* archives  */
#catLinker{
	display:flex;
	justify-content:center;
}
#catLinker li,
#catLinker li > *{display:block;}
#catLinker li > *{border-radius:50%;}
#catLinker li a:hover,
#catLinker li a.noActive{opacity:0.3;}
#catLinker .newhouse{background-color:#bcceb6;}
#catLinker .reform{background-color:#e6cc76;}
#listGallery{
	max-width:1100px;
	width:96%;
}
#listGallery{
	display:flex;
	flex-wrap:wrap;
	margin:0 auto;
}
#listGallery li[data-new] a{position:relative;}
#listGallery li[data-new] a:after{
	content:"";
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url("../img/blog/new-icon.svg") no-repeat;
}


/* single */
.exGallery,
#recommendGallery{
	display:block;
	width:min(100%,1280px);
	margin:0 auto;
}
.exGallery .swiper-slide{
	height:auto;
	opacity:0.7;
}
.exGallery .swiper-slide-active{opacity:1.0;}
.exGallery .swiper-slide img{
	display:block;
	aspect-ratio:3 / 2;
	object-position:center center;
	object-fit:cover;
	line-height:0;
}
.exGallery .sw-arrow{
	position:absolute;
	cursor:pointer;
}
.exGallery .sw-arrow:after{content:none;}
.exGallery .sw-arrow svg{filter:drop-shadow(0px 3px 3px rgba(0,0,0,0.1));}
.exGallery .sw-arrow svg use{
	fill:#fff;
	transition:fill 0.4s;
}
.exGallery .sw-arrow:hover svg use{fill:#dcdcdd;}
.exGallery .swiper-pagination{
	position:static;
	line-height:0;
}
.exGallery .swiper-pagination-bullet{
	background-color:#dcdcdd;
	vertical-align:top;
	line-height:1.0;
	opacity:1;
	cursor:pointer;
}
#newhousePage .exGallery .swiper-pagination-bullet:hover,
#newhousePage .exGallery .swiper-pagination-bullet-active{background-color:#006039;}
#reformPage .exGallery .swiper-pagination-bullet:hover,
#reformPage .exGallery .swiper-pagination-bullet-active{background-color:#c46800;}
.caseBox .inner{
	position:relative;
	margin:0 auto;
	background-color:#fbf8ec;
}
.caseHeader{font-weight:bold;}
.caseHeader *{display:block;}
.caseHeader .caseTag{position:absolute;}
.caseHeader .constName{position:absolute;}
.caseHeader h2{line-height:1.88;}
.caseHeader .houseName{line-height:1.0;}
.caseHeader .houseAddress{line-height:1.0;}
body[data-cat="newhouse"] .caseContent strong.ttl{color:#006039;}
body[data-cat="reform"] .caseContent strong.ttl{color:#c46800;}
#recommendGallery .swiper-wrapper{transition-timing-function: linear !important;}
.buildSpecList{
	display:flex;
	flex-wrap:wrap;
	margin-left:auto;
}
.buildSpecList *{
	display:block;
	line-height:2.066;
}
.buildSpecList dt{
	position:relative;
	letter-spacing:1px;
	white-space:nowrap;
}
.buildSpecList dt:before{
	content:"：";
	display:block;
	position:absolute;
	top:0;
}
.buildSpecList dt.indent3:before{right:-9px;}
#reformPage .buildSpecList dt:first-of-type{letter-spacing:0;}
#beforeAfter .baBtn{
	display:block;
	position:relative;
	margin:0 auto;
}
#beforeAfter .baBtn:hover{opacity:0.5;}
#beforeAfter .baBtn:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:100%;
	background:url("../img/our_works/reform/ba-shadow.png") no-repeat left top;
	background-size:420px auto;
	z-index:0;
}
#beforeAfter .baBtn span{
	display:block;
	position:relative;
	background:url("../img/our_works/reform/ba-close-btn.svg") no-repeat center center;
	background-size:contain;
	z-index:1;
}
#beforeAfter .baBtn img{
	opacity:1;
	transition:opacity 0.4s ease;
}
#beforeAfter #bfCheck:checked ~ .baBtn img{opacity:0;}
#beforeAfter .accordionBox{
	display:grid;
	width:100%;
	grid-template-columns:100%;
	grid-template-rows:0fr;
	transition:all 0.4s ease;
	overflow:hidden;
}
#beforeAfter #bfCheck:checked ~ .accordionBox{grid-template-rows:1fr;}
#exampleGallery2{
	width:min(720px,100%);
}
#exampleGallery2 .swiper-wrapper{height:auto;}
.interviewBnr{text-align:center;}
.interviewBnr a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 0 0 auto;
	background-color:#fff;
	border-bottom-left-radius:26px;
	line-height:1.0;
	overflow:hidden;
}
.interviewBnr a:hover{
	background-color:#006039;
	color:#fff;
}
.interviewBnr span{display:block;}
.intervieTxt{
	position:relative;
	text-align:left;
}
.intervieTtl{font-weight:bold;}
.intervieTxt svg{
	display:block;
	margin:0 0 0 auto;
	transition:all 0.4s ease;
}
.interviewBnr a:hover .intervieTxt svg{transform: translateX(10px);}
.interviewBnr a:hover .intervieTxt svg use{fill:#fff;}
@media (max-width:768.98px){
	#catLinker li{width:120px;}
	#catLinker li + li{margin-left:60px;}
	#listGallery{margin-top:60px;}
	#listGallery li{width:294px;}
	#listGallery li[data-new] a:after{
		background-position:right 17px;
		background-size:21px auto;
	}
	#listGallery li h3{font-size:calc(15 / 16 * 1rem);}
	#pager{margin-top:112px;}
	
	.exGallery .sw-arrow{
		width:10vw;
		height:100%;
		top:0;
	}
	.exGallery .swiper-button-prev{
		left:0;
		margin:-16px 0 0 -7px;
	}
	.exGallery .swiper-button-next{
		right:0;
		margin:-16px -7px 0 0;
	}
	.exGallery .sw-arrow svg{width:9px;}
	.exGallery .swiper-pagination{margin-top:25px;}
	.exGallery .swiper-pagination-bullet{
		width:6px;
		height:6px;
		margin:0 5px;
	}
	.caseBox{margin-top:43px;}
	.caseBox .inner{
		width:100%;
		padding:37px 8vw 90px;
	}
	.caseHeader{padding-right:74px;}
	.caseHeader .caseTag{
		width:68px;
		height:68px;
		top:-11px;
		right:8vw;
	}
	.caseHeader .caseTag.newhouse{font-size:calc(14.666 / 16 * 1rem);}
	.caseHeader .caseTag.reform{font-size:calc(13 / 16 * 1rem);}
	.caseHeader .caseTag.newhouse span{
		letter-spacing:16px;
		text-indent:16px;
	}
	.caseHeader .caseTag.reform span{
		margin-right:2px;
		letter-spacing:-2px;
	}
	.caseHeader .constName{
		width:68px;
		top:76px;
		right:8vw;
	}
	.caseHeader .caseInt img{
		width:auto;
		height:24px;
	}
	.caseHeader h2{
		margin-top:21px;
		font-size:calc(20 / 16 * 1rem);/***19>20***/
		letter-spacing:2px;
	}
	.caseHeader .houseName{
		margin-top:22px;
		font-size:calc(20 / 16 * 1rem);
		letter-spacing:4px;
	}
	.caseHeader .houseAddress{
		margin-top:32px;
		font-size:calc(17 / 16 * 1rem);
		letter-spacing:2px;
	}
	.caseContent,
	.caseContent p{line-height:1.92;}
	.caseContent{margin-top:35px;}
	.caseContent p{
		font-size:calc(14 / 16 * 1rem);/********sp upset************/
		letter-spacing:1.1px;
	}
	.caseContent p+p{margin-top:26px;}
	#recommendGallery{margin-top:80px;}
	#recommendGallery .swiper-slide{margin:0 12px;}
	.buildSpec{margin-top:54px;}/*36>54*/
	.buildSpecList{width:230px;}/*200px→230px*/
	body[data-cat="newhouse"] .buildSpecList{width:224px;}
	body[data-cat="reform"] .buildSpecList{width:198px;}
	.buildSpecList dt{width:70px;}
	.buildSpecList dt.indent3{letter-spacing:8px;}
	.buildSpecList dt:before{right:-1px;}
	.buildSpecList dt.indent3:before{right:-9px;}
	.buildSpecList dd{width:calc(100% - 70px);}
	#beforeAfter{margin-top:40px;}
	#beforeAfter .baBtn{width:200px;}
	#beforeAfter .baBtn:after{transform:translate(6px,6px);}
	#beforeAfter #bfCheck:checked ~ .accordionBox{padding-top:70px;}
	.interviewBnr{margin-top:48px;}
	.interviewBnr a{width:250px;}
	.interviewBnr img{width:83px;}
	.intervieTxt{
		width:calc(100% - 83px);
		padding:7.5px 16px 4px 19px;
	}
	.intervieTtl{
		margin-right:-4px;
		font-size:calc(13 / 16 * 1rem);
		letter-spacing:1.333px;
	}
	.intervieEn{
		margin:9px 0 7px;
		font-size:calc(5.833 / 16 * 1rem);
		letter-spacing:2.5px;
	}
	.intervieTxt svg{width:25px;}
}
@media (min-width:640px) and (max-width:768.98px){
	#listGallery{max-width:603px;}
	#listGallery li:nth-child(even){margin-left:15px;}
	#listGallery li:nth-child(n+3){margin-top:56px;}
	#listGallery li:nth-child(odd):last-child{margin-right:304px;}
}
@media (max-width:639.98px){
	#listGallery{display:block;}
	#listGallery li{
		margin-right:auto;
		margin-left:auto;
	}
	#listGallery li+li{margin-top:56px;}
}
@media (min-width:769px){
	/*archive*/
	#catLinker{margin-top:94px;}
	#listGallery{margin-top:90px;}
	#listGallery li[data-new] a:after{
		background-position:right 20px;
		background-size:25px auto;
	}
	#catLinker li{width:180px;}
	#catLinker li + li{margin-left:98px;}
	#pager{margin-top:142px;}

	/*single*/
	
	.exGallery .swiper-slide{width:720px;}
	#exampleGallery .swiper-slide{margin:0 25px;}
	#exampleGallery2 .swiper-slide{margin:0;}
	.exGallery .sw-arrow{
		width:14px;
		top:calc(50% - 20.5px);
	}
	.exGallery .swiper-button-prev{left:calc(50% - 344px);}
	.exGallery .swiper-button-next{right:calc(50% - 344px);}
	.exGallery .swiper-pagination{margin-top:33px;}
	.exGallery .swiper-pagination-bullet{
		width:7px;
		height:7px;
		margin:0 6px;
	}
	#exampleGallery{margin-top:140px;}
	.caseBox{margin-top:60px;}
	.caseBox .inner{
		width:720px;
		padding:67px 90px 114px;
		border-bottom-left-radius:78px;
	}
	.caseHeader{padding-right:48px;}
	.caseHeader .caseTag{
		width:90px;
		height:90px;
		top:40px;
		right:40px;
	}
	.caseHeader .caseTag.newhouse{font-size:calc(20 / 16 * 1rem);}
	.caseHeader .caseTag.reform{font-size:calc(18 / 16 * 1rem);}
	.caseTag.reform span{
		letter-spacing:-2.5px;
		text-indent:-2.5px;
	}
	.caseHeader .caseTag.newhouse span{
		letter-spacing:22px;
		text-indent:22px;
	}
	.caseHeader .constName{
		width:90px;
		top:154px;
		right:40px;
	}
	.caseHeader .caseInt img{width:80px;}
	.caseHeader h2{
		margin-top:27px;
		font-size:calc(25 / 16 * 1rem);
		letter-spacing:2.8px;
	}
	.caseHeader .houseName{
		margin-top:30px;
		font-size:calc(25 / 16 * 1rem);
		letter-spacing:5.5px;
	}
	.caseHeader .houseAddress{
		margin-top:42px;
		font-size:calc(19 / 16 * 1rem);
		letter-spacing:3px;
	}
	.caseContent,
	.caseContent p{line-height:2.066;}
	.caseContent{margin-top:50px;}
	.caseContent p{
		font-size:calc(15 / 16 * 1rem);
		letter-spacing:0.7px;
	}
	.caseContent p+p{margin-top:30px;}
	#recommendGallery{margin-top:223px;}
	#recommendGallery .swiper-slide{
		width:340px;
		margin:0 15px;
	}
	.buildSpec{margin-top:54px;}/*36px*/
	body[data-cat="newhouse"] .buildSpecList{width:245px;}
	body[data-cat="reform"] .buildSpecList{width:220px;}/*214px*/
	.buildSpecList dt{width:80px;}
	.buildSpecList dt.indent3{letter-spacing:9px;}
	.buildSpecList dt:before{right:0;}
	.buildSpecList dt.indent3:before{right:-9px;}
	.buildSpecList dd{width:calc(100% - 80px);}
	#beforeAfter{margin-top:83px;}
	#beforeAfter .baBtn{width:421px;}
	#beforeAfter .baBtn:after{transform:translate(12px,12px);}
	#beforeAfter #bfCheck:checked ~ .accordionBox{padding-top:140px;}
	.interviewBnr{margin-top:60px;}
	.interviewBnr a{width:300px;}
	.interviewBnr img{width:100px;}
	.intervieTxt{
		width:calc(100% - 100px);
		padding:9px 20px 5px 23px;
	}
	.intervieTtl{
		margin-right:-5px;
		font-size:calc(16 / 16 * 1rem);
		letter-spacing:1.6px;
	}
	.intervieEn{
		margin:11px 0 9px;
		font-size:calc(7 / 16 * 1rem);
		letter-spacing:3px;
	}
	.intervieTxt svg{width:25px;}
}
@media (min-width:769px) and (max-width:1279.98px){
	#listGallery{width:720px;}
	#listGallery li:nth-child(even){margin-left:40px;}
	#listGallery li:nth-child(n+3){margin-top:72px;}
	#listGallery li:nth-child(odd):last-child{margin-right:380px;}
	#pager{width:720px;}
}
@media (min-width:1280px){
	#listGallery li:not(:nth-child(3n+1)){margin-left:40px;}
	#listGallery li:nth-child(n+4){margin-top:72px;}
	#pager{width:1100px;}
}