@charset "utf-8";

/*投稿*/
.two-column #primary {
	padding-top: 60px;
	padding-bottom: 60px;
}

/*.archive-ttl-wrapper img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
}*/

.single-page-navi li {
	margin: 0 20px;
}
.single-page-navi {
	margin-top: 50px;
	font-weight: 400;
	color: #64B4C3;
}

.single-page-navi li a {
	display: inline-block;
	position: relative;
	font-family: 'Barlow', sans-serif;
	transition: .2s;
}
.single-prev a:before {
	content: url(../images/prev-arrow.svg);
	position: absolute;
	bottom: -10px;
	right: 0;
}
.single-next a:before {
	content: url(../images/next-arrow.svg);
	position: absolute;
	bottom: -10px;
	left: 0;
}

@media(min-width:768px){
.single-prev a:hover {
	transform: translateX(-5px);
}
.single-next a:hover {
	transform: translateX(5px);
}
.single-cotegory a:hover {
	opacity: 0.8;
	transform: translateY(-3px);
}

}

.single-post h1 {
	padding-bottom: 0.6em;
	margin-bottom: 0.4em;
}

.single-cotegory {
	margin-top: 5px;
}
.single-cotegory a {
	display: inline-block;
	line-height: 1.6;
	font-size: 13px;
	padding: 0 10px 1px;
	border-radius: 11px;
	color: #fff !important;
	background: #005AB7;
	transition: .3s;
}

@media(max-width:767px){
	.two-column #primary {
		padding-top: 30px;
		padding-bottom: 0;}
}


/*Side Bar*/
.two-column #secondary {
	margin-top: 60px;
	padding-bottom: 60px;
}

.searchform {
  position: relative;
  max-width: 250px;
  border: solid 1px #bbb !important;
  border-radius: 2px !important;
  background-color: #fff;
}
 
.searchfield {
  font-size: 14px;
  width: calc( 100% - 37px);
  margin: 3px;
  padding: 10px !important;
  border: none !important;
}
.searchsubmit {
	width: 30px;
	height: 30px;
	background: url(../images/search-icon.png);
	background-size: cover;
	position: absolute;
	top: 4px;
	right: 5px;
	cursor: pointer;
	border: none;
	color: transparent;
}
.widget_search h2 {
	display: none;
}
.widget {
	margin-bottom: 20px;
}


.widget-area {
	font-size: 14px;
}
.widget-area h2, .searchform {
	font-size: 16px;
}

.widget-title {
	font-weight: 600;
	color: #1871AB;
}
section.widget ul {
	padding-left: 1em;
	font-weight: 400;
}
section.widget ul li a{
	display: inline-block;
	transition: .3s;
}

@media(min-width:768px){
	section.widget ul li a:hover {
		transform: translateX(5px);
		opacity: 0.8;
	}
}


/*Archive*********************************************/
.archive.two-column .page-header, .blog.two-column .page-header {
	background: url(../images/blog_header.jpg) center;
	background-size: cover;
	margin-top: 100px;
}






/**ページネーション**/
.nav-links {
	margin-top: 50px;
	display: flex;
	justify-content: center;
}
.page-numbers {
	color: #64B4C3 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid #64B4C3;
	margin: 0 4px;
	font-weight: 400;
	border-radius: 2px;
	transition: .2s;
}
.prev.page-numbers, .next.page-numbers {
	width: auto;
	border: none;
	background: none;
	color: #64B4C3 !important;
	font-family: 'Barlow', sans-serif;
	position: relative;
}
.prev.page-numbers:before {
	content: url(../images/prev-arrow.svg);
	position: absolute;
	bottom: -6px;
	right: 0;
}
.next.page-numbers:before {
	content: url(../images/next-arrow.svg);
	position: absolute;
	bottom: -6px;
	left: 0;
}

.page-numbers.current {
	color: #fff !important;
	background-color: #64B4C3;
	border-color: #64B4C3;
}

@media(min-width:768px){
	a.page-numbers:hover {
		background-color: #E9F9FF;}
	a.prev.page-numbers:hover {
		background-color: transparent;
		transform: translateX(-5px);}
	a.next.page-numbers:hover {
		background-color: transparent;
		transform: translateX(5px);}
}


/**Search*********************************************/
.search .searchform {
	margin-top: 50px;
}



/*****************************************************
募集要項
******************************************************/

.post-type-archive-recruit .page-header {
	background: url(../images/recruit-header.jpg) center 25%;
	background-size: cover;
}

.ttl_side_border2 {
	line-height: 1.3;
	padding-left: 0.4em;
	border-left: 4px solid #019FE6;
	letter-spacing: 0.15em;
}
.table_01 li {
	border-bottom: 1px dotted #019FE6;
	display: flex;
	flex-wrap: wrap;
}
.table_01 li:last-child {
	border-bottom: none;
}
.table_01 {
	border-top: 2px solid #019FE6;
	border-bottom: 2px solid #019FE6;
}
.table_01 .label {
	color: #019FE6;
	font-weight: 600;
	width: 30%;
	background: rgba(40,197,250,0.1);
	padding: 10px 30px;
}
.table_01 .value {
	width: 70%;
	padding: 10px 30px;
}
article.recruit-item {
	margin-bottom: 60px;
}
article.recruit-item:last-child {
	margin-bottom: 0;
}

/**エントリーボタン***********************/
#entry-btn {
	display: inline-block;
	width: 150px;
	height: auto;
	position: fixed;
	bottom: 30px;
	right: 30px;
	opacity: 1;
	transition: 0.5s ease 0.2s;
}
.btn-off #entry-btn {
	opacity: 0;
  pointer-events: none;
}
.hide-display #entry-btn {
  display: none;
}

@media(min-width:768px){
	#entry-btn:hover {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

@media(max-width:767px){
	.table_01 .label {
		width: 100%;
		padding: 10px 10px;
	}
	.table_01 .value {
		width: 100%;
		padding: 10px 10px;
	}
	#entry-btn {
		width: 90px;
		bottom: 30px;
		right: 10px;
	}
}



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

.post-type-archive-works .page-header, .tax-works-type .page-header {
	background: url(../images/works_header.jpg) center;
	background-size: cover;
}

.works-list {
	row-gap: 40px;
	column-gap: 3.5%;
}
.works-list li {
	width: 31%;
	position: relative;
}

.thumbnail_01_wrapper {
	display: block;
	border-radius: 12px;
	box-shadow: 0 6px #2B588C;
	margin-bottom: 20px;
}

.thumbnail_01{
	width: 100%;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 12px;
}

.thumbnail_01 img {
	width:100%;
	height: 100%;
	object-fit: cover;
	transition: .5s;
}


.works-list li h2 {
	line-height: 1.4;
	margin-bottom: 3px;
}

/**カテゴリーリスト********/
.works-type-list {
	column-gap: 10px;
	row-gap: 10px;
}
.works-type-list li {
	width: 250px;
	height: 60px;
}
.works-type-list li a {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px 10px;
	font-weight: 500;
	line-height: 1.4;
	width: 100%;
	height: 100%;
	border-radius: 30px;
	border: 2px solid #64B4C3;
	color: #64B4C3 !important;
	
}
.works-type-list li.current a {
	color: #fff !important;
	background-color: #64B4C3;
	pointer-events: none;
	cursor: default; 
}

@media (min-width: 768px) {
	.works-list li:hover img {
		transform: scale(1.05);
		opacity: 0.8;
	}
}

@media (max-width: 991px) {
	.works-list li {
		width: 48%;
		column-gap: 4%;
		row-gap: 30px;}
	.works-type-list {
		gap: 10px;
	}
	.works-type-list {
		column-gap: 2%;
	}
	.works-type-list li {
		width: 32%;
		height: 60px;
	}
}
@media (max-width: 767px) {
	.works-type-list li {
		height: 50px;
	}
	.works-type-list li a {
		font-size: 14px;
		padding: 3px 7px;
		border-radius: 25px;
	}
}
@media (max-width: 500px) {
	.works-list li {
		width: 100%;
	}
	
}


/**施工事例single******************/

.before-after {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.before-after .before,
.before-after .after {
  container-type: inline-size; /* 親の幅を基準にcqwが使えるようにする */
  text-align: center;          /* 万が一のため中央寄せ補完 */
}

/* 画像の比率を保ちながら、縦長時は高さ制限。横幅が100%未満なら中央寄せ */
.image-wrapper {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	border-radius: 12px;
	max-width: 100%;
	max-height: 100cqw;
}

.image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 100cqw;
	object-fit: contain;
}

.before-after .before {
	width: 35%;
}
.before-after .after {
	width: 55%;
}
.before-after .arrow {
	width: 10%;
	position: relative;;
}
.before-after .arrow img {
	width: 100%;
	height: auto;
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 0 auto;
	transform: translateY(-50%);
}

.works-info li {
	padding: 15px;
	border-bottom: dashed 1px #64B4C3;
}
.works-info li:first-child {
	border-top: dashed 1px #64B4C3;
}

.works-info li .item-name {
	width: 30%;
}
.works-info li .item-content {
	width: 70%;
}

.to-list {
	color: #64B4C3;
	text-decoration: underline;
	font-weight: 500;
}