/* CSS Document */
/*ページタイトル*/
.page_title > h2::before{
  content: "WORKS";
}
/*コンテンツ*/
.work_wrap{
  padding: var(--headerHeight) 0;
  box-sizing: border-box;
}
body[wc-view-code="sp"] .work_wrap{
  padding: var(--headerHeight) 1rem;
}
body[wc-view-type="tb"] .work_wrap{
  padding: var(--headerHeight) 3vw;
}
body[wc-view-type="tb-l"] .work_wrap{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-code="pc"] .work_wrap{
  padding: var(--headerHeight) calc((100vw - 1000px) / 2);
}
.work_wrap > article{
  box-sizing: border-box;
}
.work_wrap > article .c_top{
	box-sizing: border-box;
	padding-bottom: 1rem;
}
body[wc-view-code="sp"] .work_wrap > article .c_top{
	padding: 0 0 1rem 0;
}
.work_wrap > article .c_top h2{
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.work_wrap > article .c_top .c_top_in{
  display: flex;
}
body[wc-view-type="sp"] .work_wrap > article .c_top .c_top_in{
  flex-direction: column;
	padding-bottom: 0.5rem;
}
body:not([wc-view-type="sp"]) .work_wrap > article .c_top .c_top_in{
  margin:0 0 0.55rem 0;
}
.work_wrap > article .c_top .w_c_list{
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	gap: 0.35rem;
  margin-top: 0.35rem;
}
.work_wrap > article .c_top .w_c_list li{
	flex: none;
  font-size: 0.85rem;
  color: #fff;
	color: rgba(25,40,66,0.5);
  line-height: 1em;
  padding: 0.1rem;
  background-color: rgba(25,40,66,0.1);
}
.work_wrap > article .c_top .w_c_list li a{
  padding: 0.3rem 0.35rem;
  color: var(--defColor);
  text-decoration: none;
  display: block;
}
.work_wrap > article .construction_inbox{
}
.work_wrap > article .construction_inbox .b_a_img{
	display: flex;
	gap:1px;
}
body[wc-view-code="sp"] .work_wrap > article .construction_inbox .b_a_img{
	flex-direction: column;
}
.work_wrap > article .construction_inbox .b_a_img figure{
	position: relative;
	z-index: 1;
}
body:not([wc-view-code="sp"]) .work_wrap > article .construction_inbox .b_a_img figure{
  width: calc(50% - 0.5px);
}
.work_wrap > article .construction_inbox .b_a_img figure::before{
	padding: 0.25rem 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 75px;
  box-sizing: border-box;
  letter-spacing: 1px;
}
.work_wrap > article .construction_inbox .b_a_img .w_before::before{
	content: "Before";
	background-color: var(--defColor);
}
.work_wrap > article .construction_inbox .b_a_img .w_after::before{
	content: "After";
	background-color: var(--accentColor);
}
.work_wrap > article .construction_inbox .b_a_img figure img{
	aspect-ratio:1.414/1;
}
.work_wrap > article .construction_inbox p{
	padding: 1rem 0.5rem;
	box-sizing: border-box;
}
body[wc-view-type="tb-l"] .work_wrap > article .construction_inbox p,
body[wc-view-code="pc"] .work_wrap > article .construction_inbox p{
	padding: 1.5rem 1rem;
}