@charset "utf-8";

/*-------------------------------
	Works 共通
-------------------------------*/

.Sub_keyvisual .maru_title span{
	padding-left: 0;
}
.Sub_keyvisual .maru_title span::before{
	display: none;
}
.Sub_keyvisual .works_cate_title {
	font-size:2.5rem;
	font-weight:600;
	line-height:1.5;
	font-family: var(--mincho);
	text-align: center;
	margin-top:0.15em;
}

.Works {
	background:#ECF2F7;
	border-radius: 3rem;
	position:relative;
}

.works_wrap {
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: flex-start;
}

.works_menu {
	width:28.5rem;
}

.works_contents {
	width:calc(100% - 28.5rem);
	max-width:72.6rem;
	padding-left:6rem;
}

/*-------------------------------
	works menu
-------------------------------*/

.works_menu h4 {
	font-size:2rem;
	font-weight:700;
	line-height:1.5;
	padding-bottom:0.25em;
	border-bottom:.1rem solid var(--blackcolor);
}

.works_search {
	margin-bottom:8.5rem;
}

.works_search h4 {
	border-bottom:none;
}

.works_search .form_wrap {
	background:#fff;
	border:.1rem solid #707070;
	border-radius: .5rem;
	position:relative;
	padding:0.4rem 4rem;
}

.works_search .form_wrap::before {
	content:"";
	display: block;
	width:2rem;
	height:2rem;
	background:url(../images/works/icon_search.svg) no-repeat center  / contain;
	position:absolute;
	left:1rem;
	top:50%;
	transform:translateY(-50%);
}

.works_search form,
.works_search input[type="text"] {
	line-height:1.5;
	display: block;
	font-size:1.8rem;
	font-weight:700;
}

.works_search input[type="text"]::placeholder {
	font-size:1.8rem;
	font-weight:700;
	color:#9D9D9D;
	letter-spacing: 0.01em;
}

/*-------------------------------
	works category
-------------------------------*/

.cate_block:not(:last-of-type) {
	margin-bottom:3.5rem;
}

.cate_list li {
	border-bottom:.1rem solid #DDDDDD;
}

.cate {
	display: block;
	position:relative;
	font-size:1.8rem;
	line-height:1.5;
	font-weight:500;
	color:var(--blackcolor);
	padding:1em 2.2em 1em 0;
	opacity: 1 !important;
}

.cate::after {
	transition: var(--transition);
	content:"";
	display: block;
	width:1.4rem;
	height:1.5rem;
	background:url(../images/common/icon_arrow-black-naked.svg) no-repeat center / contain;
	position:absolute;
	right:1.6rem;
	top:50%;
	transform:translateY(-50%);
}

.cate:hover{
	color: var(--maincolor);
}
.cate:hover::after{
	background:url(../images/common/icon_arrow-naked.svg) no-repeat center / contain;
}

/*-------------------------------
	works sort
-------------------------------*/

.works_sort_wrap {
	position:relative;
	z-index: 5;
}

.works_sort {
	display: block;
	width:15rem;
	height:4rem;
	line-height:3.8rem;
	border:.1rem solid var(--blackcolor);
	border-radius: 2rem;
	text-align: center;
	background:none;
	margin:0 0 2rem auto;
}

.works_sort span {
	font-size:1.6rem;
	font-weight:700;
	position:relative;
	padding-right:2.6rem;
}

.works_sort span::after {
	content:"";
	display: inline-block;
	width:1.9rem;
	height:1.6rem;
	background:url(../images/works/icon_sort.svg) no-repeat center / contain;
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
}

.sort_menu {
	display: none;
	background:#fff;
	position:absolute;
	top:4rem;
	right:1.5rem;
	z-index: 10;
	padding:1rem 0;
	visibility: hidden;
}

.sort_menu.active {
	display: block;
	visibility: visible;
}

.sort_menu h4 {
	color:#999;
	font-size:1.2rem;
	line-height:1.5;
	font-weight:600;
	padding:1rem 2rem;
}

.sort_menu button {
	display: block;
	width:100%;
	font-size:1.6rem;
	line-height:1.5;
	font-weight:600;
	padding:1rem 2rem;
}

#toggleSort{
	background: none !important;
}

.sort_menu button.-current{
	background: rgba(0,0,0,.1);
}

.sort_menu button:hover {
	background:#0000000d;
}

/*-------------------------------
	Works list
-------------------------------*/

.works_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.works_block {
	width:48.2%;
	max-width:31.6rem;
	margin-bottom:3rem;
}

.works_block a {
	display: flex;
	flex-direction: column;
	width:100%;
	height: 100%;
	border-radius: 1.5rem;
	border:.1rem solid var(--maincolor);
	overflow: hidden;
	opacity: 1 !important;
}

.works_block figure {
	overflow: hidden;
	width:100%;
	height:25rem;
}

.works_block figure img {
	transition:transform .3s;
	width:100%;
	height:100%;
	object-fit: cover;
}

.works_block a:hover figure img {
	transform:scale(1.1);
}

.works_txt {
	padding:2rem 3rem;
	background:var(--maincolor);
	color:#fff;
	flex-grow: 1;
}

.works_txt h3 {
	font-size:1.6rem;
	margin-bottom: .5rem;
	line-height: 1.35;
	font-weight:700;
}

.works_txt address {
	font-size:1.2rem;
	font-weight:500;
	line-height:1.5;
}

/*-------------------------------
	pager
-------------------------------*/

.pager_wrap {
	margin-top:6rem;
	display: flex;
	justify-content: center;
}

.wp-pagenavi {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}

.wp-pagenavi .current,
.wp-pagenavi .page  {
	display: block;
	width:4rem;
	height:4rem;
	line-height:4rem;
	font-size:1.8rem;
	font-weight:700;
	font-family: var(--en);
	text-align: center;
	border-radius: 50%;
	margin:0 .5rem 1rem;
}

.wp-pagenavi .current {
	color:#fff;
	background:#B0BAC4;
}

.wp-pagenavi .page {
	background:#fff;
	color:var(--blackcolor);
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	width:15rem;
	height:4rem;
	line-height:4rem;
	text-align: center;
	font-size:1.8rem;
	font-weight:700;
	color:#fff;
	position:relative;
	padding:0 4rem;
	background:var(--blackcolor);
	border-radius: 2rem;
	margin:0 1rem 1rem;
}

.wp-pagenavi .previouspostslink::after,
.wp-pagenavi .nextpostslink::after {
	content:"";
	display: block;
	width:1.4rem;
	height:1.5rem;
	background:url(../images/common/icon_arrow-white-naked.svg) no-repeat center / contain;
	position:absolute;
	right:1.8rem;
	top:50%;
	transform:translateY(-50%);
}
.wp-pagenavi .previouspostslink::after {
	right:auto;
	left:1.8rem;
	transform:translateY(-50%) scale(-1,1);
}

.wp-pagenavi .pages {
	width:100%;
	display: block;
	text-align: center;
	margin:1.5rem auto 0;
	font-weight:700;
	order: 999;
}

/*-------------------------------
	detail 施工実績詳細
-------------------------------*/

.detail_title {
	padding-bottom:1rem;
	margin-bottom:3rem;
	border-bottom:.1rem solid var(--blackcolor);
}

.detail_title h3 {
	font-size:2.8rem;
	font-weight:700;
	line-height:1.5;
	text-align: center;
}

.detail_thumb {
	width:100%;
	margin-bottom:7rem;
}

.detail_thumb img {
	width:100%;
	object-fit: contain;
}

.detail_txt {
	padding-bottom:3rem;
	margin-bottom:3rem;
	border-bottom:.1rem dashed var(--blackcolor);
}

.detail_catch {
	font-size:2.4rem;
	font-weight:600;
	font-family: var(--mincho);
	line-height:1.65;
	margin-bottom:5rem;
}

.detail_comment p:not(:last-of-type) {
	margin-bottom:1em;
}

.works_contents .dl_wrap {
	padding-top:3rem;
	display: flex;
	align-items: flex-start;
	flex-wrap:wrap;
	margin-bottom:7rem;
}

.detail_dl {
	display: flex;
	align-items: flex-start;
	flex-wrap:wrap;
}

.dl_left {
	width:60%;
	padding-right:1em;
}

.dl_right {
	width:40%;
}

.detail_dl dt {
	font-weight:700;
	line-height:1.5;
	padding:0.5em 0;
	width:6em;
}

.detail_dl dd {
	line-height:1.5;
	padding:0.5em 0;
	width:calc(100% - 6em);
}

.dl_right dt {
	width:8em;
}

.dl_right dd {
	width:calc(100% - 8em);
}

.works_img_list {
	display: flex;
	flex-wrap:wrap;
	align-items: flex-start;
	justify-content:space-between;
	position:relative;
}

.works_img {
	display:block;
	width:23.7%;
	max-width:17rem;
	height:auto;
	position:relative;
	padding-top:min(17.5%,12.6rem);
	margin-bottom:min(1.9%,1.3rem);
}

.works_img_list::before,
.works_img_list::after {
	content:"";
	display: block;
	width:23.7%;
	max-width:17rem;
	height:0;
	order:1;
}

.works_img img {
	width:100%;
	height:100%;
	object-fit: cover;
	position:absolute;
	left:0;
	top:0;
}

.ar_works .C-Button {
	margin:9rem auto 0;
}

.ar_works .C-Button a::after {
	right:auto;
	left:3.4rem;
	transform:translateY(-50%) scale(-1,1);
}

/*-------------------------------
	lity
-------------------------------*/

.lity-wrap {
	padding:6.5rem;
}

.lity-content {
	position:relative;
}

.lity-image img {
	border:1.8rem solid #fff;
	max-height: calc(100vh - 13rem)!important;
}

.lity-content:after {
	display: none;
}

.lity-close {
	position:absolute;
	right:-1rem!important;
	top:-1rem!important;
	left:auto;
	bottom:auto;
	width:3.2rem;
	height:3.2rem;
	line-height:3.2rem!important;
	border-radius:50%;
	border:.4rem solid #fff!important;
	color:transparent!important;
	font-size:0!important;
	text-shadow: none!important;
	background-color:var(--blackcolor)!important;
	background-image:url(../images/works/icon_close.svg)!important;
	background-repeat:no-repeat!important;
	background-size:1.4rem 1.4rem!important;
	background-position:center center!important;
	filter: drop-shadow(0px .3rem .3rem rgba(0,0,0,0.16));
}

/*-------------------------------

-------------------------------*/




/*-------------------------------

-------------------------------*/

/*-------------------------------
	responsive
-------------------------------*/

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

.dl_left,
.dl_right {
	width:100%;
	padding-right:0;
}

.detail_dl dt {
	width:8em;
}

.detail_dl dd {
	width:calc(100% - 8em);
}

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

.works_block {
	width:100%;
	max-width:100%;
}

.works_img {
	width:31.6%;
	padding-top:min(22.4%,11.2rem);
	margin-bottom:min(2.8%,1.3rem);
}

.works_img_list::before,
.works_img_list::after {
	width:31.6%;
}

} /* end 960px */
} /* end 1100px */

/*-------------------------------
	ver sp
-------------------------------*/

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

/*-------------------------------
	Works 共通
-------------------------------*/

.Sub_keyvisual .works_cate_title {
	font-size:3.6rem;
}

.works_menu {
	width:100%;
	order:1;
}

.works_contents {
	width:100%;
	max-width:100%;
	padding-left:0;
	margin-bottom:12rem;
}

/*-------------------------------
	works menu
-------------------------------*/

.works_menu h4 {
	font-size:3rem;
	border-bottom:.2rem solid var(--blackcolor);
}

.works_search {
	margin-bottom:10rem;
}

.works_search h4 {
	border-bottom:none;
}

.works_search .form_wrap {
	border:.2rem solid #707070;
	padding:1rem 6rem;
}

.works_search .form_wrap::before {
	width:3rem;
	height:3rem;
	left:1.5rem;
}

.works_search form,
.works_search input[type="text"] {
	font-size:2.8rem;
}

.works_search input[type="text"]::placeholder {
	font-size:2.8rem;
}

/*-------------------------------
	works category
-------------------------------*/

.cate_block:not(:last-of-type) {
	margin-bottom:6rem;
}

.cate_list li {
	border-bottom:.2rem solid #DDDDDD;
}

.cate {
	font-size:2.8rem;
	padding:1em 2.5em 1em 0;
}

.cate::after {
	width:2.9rem;
	height:3rem;
	right:3.2rem;
}

/*-------------------------------
	works sort
-------------------------------*/

.works_sort {
	width:26rem;
	height:7rem;
	line-height:6.6rem;
	border:.2rem solid var(--blackcolor);
	border-radius: 3.5rem;
	margin:0 0 5rem auto;
}

.works_sort span {
	font-size:2.8rem;
	padding-right:4.5rem;
}

.works_sort span::after {
	width:3.3rem;
	height:2.8rem;
}

.sort_menu {
	top:7rem;
	right:1rem;
	padding:1.75rem 0;
}

.sort_menu h4 {
	font-size:2.4rem;
	padding:1.75rem 5rem;
}

.sort_menu button {
	font-size:2.8rem;
	padding:1.75rem 5rem;
}

/*-------------------------------
	Works list
-------------------------------*/

.works_block {
	width:100%;
	max-width:100%;
	margin-bottom:6rem;
}

.works_block a {
	display:block;
	border:.2rem solid var(--maincolor);
}

.works_block figure {
	overflow: hidden;
	width:100%;
	height:49.8rem;
}

.works_txt {
	padding:3.5rem 5rem;
}

.works_txt h3 {
	font-size:3.2rem;
	margin-bottom: 1rem;
}

.works_txt address {
	font-size:2.8rem;
}

/*-------------------------------
	pager
-------------------------------*/

.pager_wrap {
	margin-top:10rem;
}

.wp-pagenavi .current,
.wp-pagenavi .page  {
	width:6rem;
	height:6rem;
	line-height:6rem;
	font-size:2.8rem;
	margin:0 1rem 2rem;
}

.wp-pagenavi .current {
	color:#fff;
	background:#B0BAC4;
}

.wp-pagenavi .page {
	background:#fff;
	color:var(--blackcolor);
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink {
	width:22.5rem;
	height:6rem;
	line-height:6rem;
	font-size:2.8rem;
	padding:0 6rem;
	border-radius: 3rem;
	margin:0 2rem 2rem;
}

.wp-pagenavi .previouspostslink::after,
.wp-pagenavi .nextpostslink::after {
	content:"";
	display: block;
	width:2.1rem;
	height:2.2rem;
	right:2.7rem;
}

.wp-pagenavi .pages {
	font-size:2.8rem;
	margin:3rem auto 0;
}

/*-------------------------------
	detail 施工実績詳細
-------------------------------*/

.detail_title {
	padding-bottom:2rem;
	margin-bottom:6rem;
	border-bottom:.2rem solid var(--blackcolor);
}

.detail_title h3 {
	font-size:4rem;
}

.detail_thumb {
	margin-bottom:12rem;
}

.detail_txt {
	padding-bottom:7rem;
	margin-bottom:7rem;
	border-bottom:.2rem dashed var(--blackcolor);
}

.detail_catch {
	font-size:3.6rem;
	margin-bottom:8rem;
}

.works_contents .dl_wrap {
	padding-top:4rem;
	margin-bottom:5rem;
}

.dl_left {
	width:100%;
	padding-right:0;
}

.dl_right {
	width:100%;
}

.detail_dl dt {
	font-weight:700;
	line-height:1.5;
	width:8em;
}

.detail_dl dd {
	width:calc(100% - 8em);
}

.works_img {
	width:calc((100% - 3rem) / 2);
	max-width:100%;
	padding-top:22.5rem;
	margin-bottom:2.5rem;
}

.works_img_list::before,
.works_img_list::after {
	display:none;
}

.ar_works .C-Button {
	margin:12rem auto 6rem;
}

.ar_works .C-Button a::after {
	right:auto;
	left:7.4rem;
	transform:translateY(-50%) scale(-1,1);
}

/*-------------------------------
	lity
-------------------------------*/

.lity-wrap {
	padding:6rem;
}

.lity-image img {
	border:1.8rem solid #fff;
	max-height: calc(100vh - 12rem)!important;
}

.lity-content:after {
	display: none;
}

.lity-close {
	position:absolute;
	right:-2rem!important;
	top:-2rem!important;
	left:auto;
	bottom:auto;
	width:6.4rem;
	height:6.4rem;
	line-height:6.4rem!important;
	border-radius:50%;
	border:.8rem solid #fff!important;
	color:transparent!important;
	font-size:0!important;
	text-shadow: none!important;
	background-color:var(--blackcolor)!important;
	background-image:url(../images/works/icon_close.svg)!important;
	background-repeat:no-repeat!important;
	background-size:2.8rem 2.8rem!important;
	background-position:center center!important;
	filter: drop-shadow(0px .6rem .6rem rgba(0,0,0,0.16));
}

} /* end 768px */