@charset "UTF-8";/* 2024.12.06 */

.category {
  margin: -10px 0 10px 14px;
  padding-left: 10px;
  width: 188px;
  position: relative;
  z-index: 2;
}
#works_page {
  margin: 5rem auto 10rem;
}
.works_tab_wrap {
  margin-bottom: 5rem;
  border: none;
}
.works_tab_wrap li {
  width: 25%;
  border-top: solid #ccc 1px;
  border-left: solid #ccc 1px;
  text-align: center;
  margin-bottom: 0;
}
.works_tab_wrap li:last-child {
  border-right: solid #ccc 1px;
}
.works_tab_wrap li > a {
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  color: #000;
  padding: 1.5rem 0 2rem;
  position: relative;
}
.works_tab_wrap li > a::after {
  color: var(--main);
  content: "\f107";
  font-family: 'font Awesome 5 free';
  font-weight: 900;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.works_tab_wrap li > .active::after {
  color: #fff;
}
.works_tab_wrap li > .active {
  background: var(--main) !important;
  color: #fff !important;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: solid var(--main) 1px !important;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.works_box_p {
  padding: 0;
  width: 100%;
  margin: 3rem auto 4rem;
}
.w_img_wrap {
  position: relative;
  width: 100%;
  padding: 0;
}
.w_img_wrap a {
  position: relative;
  display: block;
  height: 25rem;
}
.w_img_wrap a > img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}
.mans_reform::after {
  content: "";
  background: url("../images/works/bnr_reform_cate01.gif") no-repeat bottom;
  background-size: contain;
  position: absolute;
  height: 60%;
  width: 60%;
  bottom: -7%;
  left: 5%;
  pointer-events: none;
}
.hause_reform::after {
  content: "";
  background: url("../images/works/bnr_reform_cate02.gif") no-repeat bottom;
  background-size: contain;
  position: absolute;
  height: 60%;
  width: 60%;
  bottom: -7%;
  left: 5%;
  pointer-events: none;
}
.house_new::after {
  content: "";
  background: url("../images/works/bnr_reform_cate03.gif") no-repeat bottom;
  background-size: contain;
  position: absolute;
  height: 60%;
  width: 60%;
  bottom: -7%;
  left: 5%;
  pointer-events: none;
}
.tochi_bunjyo::after {
  content: "";
  background: url("../images/works/bnr_reform_cate04.gif") no-repeat bottom;
  background-size: contain;
  position: absolute;
  height: 60%;
  width: 60%;
  bottom: -7%;
  left: 5%;
  pointer-events: none;
}
.works_p_note {
  margin-bottom: 6rem;
  text-overflow: ellipsis;
  overflow: hidden;
  text-indent: -1em;
  padding-left: 1em;
  height: 3em;
}
@media (max-width: 767px) {
  .works_tab_wrap li {
    width: calc(100% / 2);
    border-right: solid #ccc 1px;
  }
}
@media (max-width: 480px) {
  .works_tab_wrap li > a {
    font-size: 1.4rem;
  }
}
/*----------------------
　　　Works Deatail
----------------------*/
#works_page_detail {
  margin: 5rem auto 5rem;
}
.w_d_tit_wrap {
  margin: auto;
}
.w_d_tit_wrap img {
  width: 18rem;
  margin-bottom: 1rem;
}
.w_d_tit {
  font-size: 2.3rem;
  font-weight: 700;
  margin: 1rem auto 3rem;
  border-bottom: solid #ccc 1px;
  padding-bottom: 2rem;
}
.mansion_re_bnr {
  width: 188px;
  height: 30px;
  margin: 10px 0 20px;
  padding: 0 10px;
  font-size: 1.2rem;
  font-weight: normal;
  background-color: var(--main);
  color: #fff;
  display: flex;
  align-items: center;
}
.w_d_img_wrap {
  margin: 1rem auto 5rem;
}
.works_img {
  padding-left: 0;
}
.works_img li {
  width: 100%;
  height: 53rem;
  display: block;
  background: #f6f6f4;
}
.works_img li > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.works_img_thumbs {
  padding-left: 0;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.works_img_thumbs .slick-track,
.works_img_thumbs .draggable > div {
  transform: unset !important;
  width: 100% !important;
}
.works_img_thumbs li {
  width: calc(100% / 7) !important;
  /*height: 8rem;*/
}
.works_img_thumbs li > img {
  width: 100%;
  padding: .3rem;
  object-fit: cover;
}
.next-arrow02 {
  position: absolute;
  top: 50%;
  right: 3%;
  width: 4rem;
  height: 4rem;
}
.prev-arrow02 {
  position: absolute;
  top: 50%;
  left: 3%;
  width: 4rem;
  height: 4rem;
  z-index: 1;
}
.w_d_note_wrap {
  margin: auto;
}
.detail_outline caption {
  caption-side: top;
  font-size: 1.8rem;
  font-weight: bold;
  color: #000;
}
.detail_outline caption > span {
  font-size: 1.3rem;
  margin-left: 1em;
}
.detail_outline tr {
  border-bottom: solid #fff 1px;
}
.detail_outline th {
  background: var(--main);
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  border: none;
}
.detail_outline td {
  font-size: 1.3rem;
  background: #f1f8ee;
  border: none;
}
#works_page02 {
  margin: 5rem auto 10rem;
  position: relative;
}
#works_page02::before {
  content: "";
  background: #f1f8ee;
  width: 100vw;
  height: 65%;
  position: absolute;
  top: 0;
  z-index: -1;
}
.w_sub_tit {
  font-size: 3rem;
  color: var(--main);
  font-family: "Manrope", serif;
  font-weight: bold;
  position: relative;
  padding-top: 5rem;
}
.w_sub_tit::before {
  content: '｜';
  transform: rotate(-90deg);
  display: inline-block;
  font-weight: 200;
}
.w_tit_wrap p {
  margin-bottom: 3rem;
}
.before_after_wrap {
  margin: 3rem auto;
}
.before_after_wrap {
  display: flex;
}
.before_after_wrap {
  margin: 1rem auto 6rem;
}
.before, .after {
  height: 20rem;
  position: relative;
  display: block;
  width: 100%;
}
@media (min-width: 768px) {
  .before, .after {
    height: 35rem;
  }
}
.op_img {
  margin-bottom: 0;
}
.before .op_img, .after .op_img {
  width: 100%;
  height: 100%;
}
.before .op_img img, .after .op_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.before::before, .after::before {
  content: "";
  background: url("../images/works/zoom.gif") no-repeat bottom right;
  position: absolute;
  background-size: contain;
  display: inline-block;
  width: 10%;
  height: 10%;
  bottom: 0%;
  right: 0;
  pointer-events: none;
  opacity: .8;
  z-index: 2;
}
.before::after,
.after::after {
  font-size: 16px;
  font-family: "Manrope", serif;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 180px;
  height: 34px;
  bottom: -3%;
  left: 5%;
  pointer-events: none;
  z-index: 3;
}
.before::after {
  content: 'BEFORE';
  background-color: var(--main);
  color: #fff;
}
.after::after {
  content: 'AFTER';
  background-color: #fff;
  color: var(--main);
  border: solid 1px var(--main)
}
.before_after_wrap .arrow {
  display: inline-block;
  padding: 0;
  text-align: center;
  margin: auto;
}
@media (max-width: 500px) {
  .before_after_wrap .arrow {
    width: 25%;
  }
}
.before_after_wrap .arrow > img {
  width: 55%;
}

.news_btn_wrap {
  text-align: center;
  margin: auto;
}
.news_btn {
  position: relative;
  border: solid #000 1px;
  width: 250px;
  max-width: 70%;
  height: 56px;
  display: inline-block;
}
.news_btn a {
  text-decoration: none;
  color: #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.news_btn::after {
  position: absolute;
  content: '';
  top: 40%;
  right: 0;
  width: 40px;
  height: 8px;
  transform: translateY(-50%, 0%);
  background: url(../images/arrow.gif) no-repeat;
  background-size: contain;
  transition: all 0.3s ease-out, opacity 0.3s ease-out;
}
.news_btn:hover::after {
  right: -8px;
}



/*popup表示させたいコンテンツのレイアウトと位置*/
#popup00, #popup01, #popup02, #popup03 {
  width: 50%;
  /*    height: 70%;*/
  line-height: 100px;
  background: rgba(0, 0, 0, 0.8);
  padding: 3%;
  box-sizing: border-box;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 9;
}
@media (max-width: 500px) {
  #popup00, #popup01, #popup02, #popup03 {
    width: 80%;
  }
}
#popup00::before, #popup01::before, #popup02::before, #popup03::before {
  content: "\f055";
  bottom: 9%;
  left: 6%;
  color: #fff;
  position: absolute;
  height: 5rem;
  width: 5rem;
  font-family: 'font Awesome 5 free';
  font-weight: 900;
  font-size: 3.5rem;
  opacity: .8;
  z-index: 99;
}
#popup00 img, #popup01 img, #popup02 img, #popup03 img {
  width: 100%;
  object-fit: contain;
}
label {
  display: block;
}
/*ボタンの装飾*/
label span {
  display: block;
  background-color: #01b6ed;
  color: #fff;
  width: 200px;
  line-height: 40px;
  border-radius: 4px;
  text-align: center;
}
label span:hover {
  cursor: pointer;
}
input[type="checkbox"] {
  display: none;
}
/*checkboxがチェックの状態になったらpopupを表示させる*/
input[type="checkbox"]:checked + #popup00 {
  display: block;
}
input[type="checkbox"]:checked + #popup01 {
  display: block;
}
input[type="checkbox"]:checked + #popup02 {
  display: block;
}
input[type="checkbox"]:checked + #popup03 {
  display: block;
}
@media (max-width: 991px) {
  .before::before, .after::before {
    width: 15%;
    height: 15%;
  }
  .before_after_wrap .arrow > img {
    width: 40%;
  }
}
@media (max-width: 767px) {
  .works_img_thumbs li {
    width: calc(100% / 5) !important;
  }
  .before::after, .after::after {
    width: 12rem;
    bottom: -6%;
  }
  .before::before, .after::before {
    width: 20%;
    height: 20%;
  }
}