@charset "UTF-8";


/*******************************
*　
********************************/
.pg_works{

}
.pg_works .section.sec1{

}
.pg_works .section.sec2{

}


/* カテゴリ */
.works_cat_nav{
  margin-bottom: 30px;
}
.works_cat_nav .webgene-blog{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px
}
.works_cat_nav .webgene-item{
  width: calc((100% - 10px) / 2);
}
.works_cat_nav .webgene-item a{
  display: block;
  background-image: -webkit-linear-gradient( 0deg, rgb(0,170,110) 0%, rgba(210,234,52,0.99608) 100%);
  border-radius: 25px;
  color: #FFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: left;
  padding: 9px 40px 10px 20px;
  position: relative;
  z-index: 1;
}
.works_cat_nav .webgene-item a:after{
  content: "";
  width: 24px;
  aspect-ratio: 1 / 1;
  background-image: url('https://brico-miyako.com/system_panel/uploads/images/icon_nav_arr.png');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  transition: 0.2s all;
}
.works_cat_nav .webgene-item a:hover{
  filter: brightness(1.1);
  /*background-image: -webkit-linear-gradient(90deg, rgb(0,170,110) 0%, rgba(210,234,52,0.99608) 100%);*/
}
.works_cat_nav .webgene-item a:hover:after{
  margin-right: -5px;
}

/* 一覧 */
.works_list{
  
}
.works_list .webgene-blog{
  display: flex;
  flex-wrap: wrap;
  gap: 30px 10px;
}
.works_list .webgene-item{
  width: 100%;
  border: 1px solid #00aa6e;
  border-radius: 15px;
  background: #FFF;
  padding: 15px 15px;
  box-shadow: 3.214px 3.83px 2.91px 0.09px rgba(59, 106, 84, 1);
}
.works_list .webgene-item .params{
  display: none;
}

/**/
.works_meta{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 10px;
}
.works_meta_category{
  display: flex;
  width: 100%;
}
.works_meta_category span{
  min-width: 112px;
  background: #00aa6e;
  color: #FFF;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.2;
  text-align: center;
  padding: 3px 10px 4px;
}
.works_meta_title{
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.025em;
  margin-top: 10px;
}

/* 画像 */
.works_imgs{
  display: flex;
  gap: 10px 10px;
}
.works_imgs_bf,
.works_imgs_af{
  width: calc((100% - 10px) / 2);
  border-radius: 10px;
  overflow: hidden;
}
.works_imgs_bf .img_fit:before,
.works_imgs_af .img_fit:before{
  padding-top: 79.36%;
}
.works_imgs_bf:after,
.works_imgs_af:after{
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  color: #FFF;
  padding: 5px 10px;
}
.works_imgs_bf:after{
  content: "Before";
  background: #70bea2;
}
.works_imgs_af:after{
  content: "After";
  background: #00aa6e;
}
.works_imgs_bf .img_fit,
.works_imgs_af .img_fit{
  background-image: url('https://brico-miyako.com/system_panel/uploads/images/no-photo.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 詳細 */
.works_details{
  
}
* + .works_details{
  margin-top: 15px;
}
.works_details_row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}
.works_details_row + .works_details_row{
  margin-top: 15px;
}
.works_details_row dt,
.works_details_row dd{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  margin: 0;
}
.works_details_row dt{
  width: 155px;
  width: 100%;
  background: #4a4a4a;
  color: #FFF;
  text-align: center;
  padding: 5px 5px 7px;
}
.works_details_row dd{
  width: calc(100% - 155px - 20px);
  width: 100%;
  padding-top: 5px;
}

/* コメント */
.works_comment{
  background: #ecf4e2;
  border-radius: 15px;
  padding: 15px 15px;
  min-height: 210px;
}
* + .works_comment{
  margin-top: 20px;
}
.works_comment_ttl{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  color: #00aa6e;
  margin-bottom: 10px;
}
.works_comment_ttl:after{
  content: "";
  display: block;
  width: 15px;
  height: 1px;
  background: currentColor;
  margin: 5px auto 0;
}
.works_comment_txt{
  font-size: 15px;
  font-weight: 500;
  line-height: 1.875;
  letter-spacing: 0.025em;
  text-align: justify;
}

@media (max-width:374px){

}
@media (min-width:375px){

}
@media (max-width:767px){

}
@media (min-width:768px){
  .pg_works .section.sec1{

  }
  .pg_works .section.sec2{

  }

  
  /* カテゴリ */
  .works_cat_nav{
    margin-bottom: 50px;
  }
  .works_cat_nav .webgene-blog{
    gap: 15px 20px
  }
  .works_cat_nav .webgene-item{
    width: calc((100% - 60px) / 4);
  }
  .works_cat_nav .webgene-item a{
    border-radius: 25px;
    /*font-size: 16px;*/
    /*padding: 12px 50px 14px 32px;*/
  }
  .works_cat_nav .webgene-item a:after{
    width: 24px;
    right: 10px;
  }

  /* 一覧 */
  .works_list{

  }
  .works_list .webgene-blog{
    gap: 50px 30px;
  }
  .works_list .webgene-item{
    /*width: calc((100% - 30px) / 2);*/
    border-radius: 30px;
    padding: 40px 50px;
    box-shadow: 3.214px 3.83px 2.91px 0.09px rgba(59, 106, 84, 1);
  }

  /**/
  .works_meta{
    margin-bottom: 20px;
  }
  .works_meta_category{
    width: 130px;
  }
  .works_meta_category span{
    min-width: 112px;
    font-size: 14px;
    padding: 3px 10px 4px;
  }
  .works_meta_title{
    width: calc(100% - 130px);
    font-size: 20px;
    margin-top: -3px;
  }

  /* 画像 */
  .works_imgs{
    gap: 10px 30px;
  }
  .works_imgs_bf,
  .works_imgs_af{
    width: calc((100% - 30px) / 2);
    border-radius: 15px;
  }
  .works_imgs_bf:after,
  .works_imgs_af:after{
    font-size: 20px;
    padding: 10px 10px;
  }

  /* 詳細 */
  .works_details{

  }
  * + .works_details{
    margin-top: 30px;
  }
  .works_details_row{
  }
  .works_details_row + .works_details_row{
    margin-top: 15px;
  }
  .works_details_row dt,
  .works_details_row dd{
    font-size: 16px;
  }
  .works_details_row dt{
    width: 155px;
    /*padding: 5px 5px 7px;*/
  }
  .works_details_row dd{
    width: calc(100% - 155px - 20px);
    /*padding-top: 5px;*/
  }

  /* コメント */
  .works_comment{
    border-radius: 15px;
    padding: 15px 50px 30px;
    min-height: 210px;
  }
  * + .works_comment{
    margin-top: 35px;
  }
  .works_comment_ttl{
    font-size: 16px;
    margin-bottom: 10px;
  }
  .works_comment_ttl:after{
  }
  .works_comment_txt{
    font-size: 16px;
    line-height: 2.25;
  }

}
@media (min-width:1024px){

  /* カテゴリ */
  .works_cat_nav{
    margin-bottom: 70px;
  }
  .works_cat_nav .webgene-blog{
    gap: 15px 30px
  }
  .works_cat_nav .webgene-item{
    width: calc((100% - 90px) / 4);
  }
  .works_cat_nav .webgene-item a{
    border-radius: 25px;
    font-size: 16px;
    padding: 12px 50px 14px 32px;
  }
  .works_cat_nav .webgene-item a:after{
    width: 30px;
    right: 10px;
  }
  
  /* 一覧 */
  .works_list{

  }
  .works_list .webgene-blog{
    gap: 50px 30px;
  }
  .works_list .webgene-item{
    width: calc((100% - 30px) / 2);
    padding: 20px 20px;
  }

}
@media (min-width:1200px){

  
  
}
@media (min-width:1470px){
  
  /* カテゴリ */
  .works_cat_nav{
    margin-bottom: 150px;
  }
  .works_cat_nav .webgene-blog{
    gap: 15px 105px
  }
  .works_cat_nav .webgene-item{
    width: calc((100% - 315px) / 4);
  }
  .works_cat_nav .webgene-item a{
    border-radius: 25px;
    font-size: 16px;
    padding: 12px 50px 14px 32px;
  }
  .works_cat_nav .webgene-item a:after{
    width: 30px;
    right: 10px;
  }
  
  /* 一覧 */
  .works_list{

  }
  .works_list .webgene-blog{
    gap: 50px 30px;
  }
  .works_list .webgene-item{
    width: calc((100% - 30px) / 2);
    padding: 40px 50px;
  }
  
  /**/
  .works_meta{
    margin-bottom: 20px;
  }
  .works_meta_category{
    width: 215px;
  }
  .works_meta_category span{
    min-width: 112px;
    font-size: 14px;
    padding: 3px 10px 4px;
  }
  .works_meta_title{
    width: calc(100% - 215px);
    font-size: 20px;
    margin-top: 0;
  }
  
}