@charset "UTF-8";
/*　////////////////////////////////
ブレイクポイント
//////////////////////////////////　*/
/*　////////////////////////////////
ベースフォント
//////////////////////////////////　*/
/*　////////////////////////////////
カラー
//////////////////////////////////　*/
/*　////////////////////////////////
clearfix[@extend .clearfix];
//////////////////////////////////　*/
/*　////////////////////////////////////////////////////////////////////////////////////////////////
flex include
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*　////////////////////////////////////////////////////////////////////////////////////////////////
初期値top:50%; left:50%;
[@include set-top();] [@include set-left();]
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*縦中央*/
/*横中央*/
/* -----上下左右中央、%指定で調整可能----- */
/*　////////////////////////////////
flex 設定
//////////////////////////////////　*/
/*　////////////////////////////////////////////////////////////////////////////////////////////////
font-size
//////////////////////////////////////////////////////////////////////////////////////////////////　*/
/*　////////////////////////////////
汎用style
//////////////////////////////////　*/
/*　////////////////////////////////
メイン画像
//////////////////////////////////　*/
.webp .lower-title-wrap .img-area.works_bg {
  background-image: url("/img/works/webp/works_main.webp");
}

.no-webp .lower-title-wrap .img-area.works_bg {
  background-image: url("/img/works/works_main.jpg");
}

/*----- .works-list --------------------*/
.works-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(30px, 25.4545454545px + 1.2121212121vw, 40px) 3%;
}
.works-list .works-item {
  width: 100%;
}
.works-list .works-link {
  display: block;
}
.works-list .works-thumb {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 250px;
  width: 100%;
  position: relative;
  margin-bottom: 10px;
}
.works-list .works-category {
  position: absolute;
  display: inline-block;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 140px;
  width: 100%;
  left: 0;
  top: 0;
  line-height: 1;
  padding: 5px 10px;
  background: #5b4636;
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
}
.works-list .works-date {
  margin-bottom: 5px;
  font-size: clamp(1.6rem, 15.2682926829px + 0.1951219512vw, 1.8rem);
}
.works-list .works-title {
  font-size: clamp(1.6rem, 15.2682926829px + 0.1951219512vw, 1.8rem);
  font-weight: normal;
  line-height: 1.4;
}

@media (min-width: 480px) {
  .works-list .works-item {
    width: 48.5%;
  }
}
@media (min-width: 768px) {
  .works-list .works-item {
    width: 31.33%;
  }
}
/*----- .works-single --------------------*/
.works-single {
  margin-bottom: clamp(80px, 61.8181818182px + 4.8484848485vw, 120px);
}
.works-single .works-date {
  text-align: right;
  margin-bottom: clamp(25px, 18.1818181818px + 1.8181818182vw, 40px);
}
.works-single .works-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 30px 3%;
  margin-bottom: clamp(45px, 38.1818181818px + 1.8181818182vw, 60px);
}
.works-single .works-main .works-main-image, .works-single .works-main .works-description {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
}
.works-single .works-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(20px, 15.4545454545px + 1.2121212121vw, 30px) 3%;
  margin-bottom: clamp(60px, 41.8181818182px + 4.8484848485vw, 100px);
}
.works-single .works-gallery li {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 48.5%;
  height: clamp(150px, 104.5454545455px + 12.1212121212vw, 250px);
}
.works-single .works-gallery li .gallery-lightbox {
  display: block;
  height: 100%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (min-width: 768px) {
  .works-single .works-main .works-main-image {
    width: 47%;
  }
  .works-single .works-main .works-description {
    padding-top: 25px;
    width: 50%;
  }
  .works-single .works-gallery li {
    width: 31.33%;
  }
}
/*----- .works-ba-list --------------------*/
.works-ba-list {
  margin-bottom: clamp(40px, 30.9090909091px + 2.4242424242vw, 60px);
}

.works-ba-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 60px 5%;
}
.works-ba-item .ba-before, .works-ba-item .ba-after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  position: relative;
}
.works-ba-item .ba-before::after {
  content: "";
  position: absolute;
  height: 20px;
  width: 35px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  bottom: -35px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #d4d4d4;
}
.works-ba-item .ba-lightbox {
  height: clamp(250px, 181.8181818182px + 18.1818181818vw, 400px);
  width: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.works-ba-item .ba-label {
  text-align: center;
  margin-top: 10px;
  font-size: clamp(2rem, 18.1707317073px + 0.487804878vw, 2.5rem);
  font-weight: bold;
}

@media (min-width: 768px) {
  .works-ba-item .ba-before, .works-ba-item .ba-after {
    width: 47.5%;
  }
  .works-ba-item .ba-before::after {
    height: 35px;
    width: 20px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    bottom: initial;
    left: initial;
    right: -7%;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
}