/*===========================================================================*/
/*  function  */
/*===========================================================================*/
/*===========================================================================*/
/*  mixin  */
/*===========================================================================*/
.works {
  background-color: #ffead1;
  /*===========================================================================*/
  /*  works_mainvisual  */
  /*===========================================================================*/
  /*===========================================================================*/
  /*  works__support  */
  /*===========================================================================*/
  /*===========================================================================*/
  /*  works_content  */
  /*===========================================================================*/
}
.works__mainvisual {
  position: relative;
  z-index: 2;
  background: url(../../images/works/works_mainvisual.jpg) no-repeat center center/cover;
}
.works__mainvisual__title {
  text-align: center;
  padding-top: clamp(100px, 21.3061825319px + 8.7340529931vw, 189px);
  padding-bottom: clamp(100px, 16.8851815505px + 9.2247301276vw, 194px);
  font-size: clamp(30px, 12.3159960746px + 1.9627085378vw, 50px);
  line-height: 1;
  font-weight: 900;
}
.works__mainvisual__title span {
  display: block;
  color: #ff883a;
  margin-bottom: 28px;
}
.works__support {
  position: relative;
  padding-top: clamp(60px, 24.6319921492px + 3.9254170756vw, 100px);
  padding-bottom: clamp(60px, 24.6319921492px + 3.9254170756vw, 100px);
}
@media (max-width: 900px) {
  .works__support {
    padding-top: clamp(30px, 15.7142857143px + 3.8095238095vw, 50px);
    padding-bottom: clamp(30px, 15.7142857143px + 3.8095238095vw, 50px);
  }
}
.works__support::before {
  content: "";
  position: absolute;
  width: 171px;
  height: 171px;
  background-color: #ffd6b3;
  border-radius: 50%;
  top: 136px;
  right: calc(50% + 142px);
  z-index: 0;
}
@media (max-width: 900px) {
  .works__support::before {
    width: 100px;
    height: 100px;
    top: 70px;
    right: calc(50% + 60px);
  }
}
.works__support::after {
  content: "";
  position: absolute;
  width: 371px;
  height: 371px;
  background-color: #ffd6b3;
  border-radius: 50%;
  top: -50px;
  left: calc(50% - 21px);
  z-index: 0;
}
@media (max-width: 900px) {
  .works__support::after {
    width: 170px;
    height: 170px;
    top: -62px;
    left: 50%;
  }
}
.works__support__box {
  position: relative;
  z-index: 2;
}
.works__support__title {
  line-height: 1.75;
  font-size: clamp(24px, 9.8527968597px + 1.5701668302vw, 40px);
  font-weight: 900;
  text-align: center;
}
@media (max-width: 900px) {
  .works__support__title {
    font-size: clamp(16px, 13.1428571429px + 0.7619047619vw, 20px);
    letter-spacing: 0.04em;
    line-height: 1.8;
  }
}
.works__support__title span {
  font-size: clamp(30px, 12.3159960746px + 1.9627085378vw, 50px);
  line-height: 1.4;
  vertical-align: bottom;
  background-image: linear-gradient(to top, #ff883a 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0px 80%;
}
@media (max-width: 900px) {
  .works__support__title span {
    font-size: clamp(22px, 16.2857142857px + 1.5238095238vw, 30px);
    background-position: 0px 85%;
  }
}
.works__content {
  position: relative;
}
.works__content__inner {
  background-color: #fff;
  border-radius: 20px 20px 0 0;
}
.works__content__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, -57.2620215898px + 10.7948969578vw, 150px);
  padding-top: clamp(24px, 18.6947988224px + 0.5888125613vw, 30px);
  padding-bottom: clamp(24px, 18.6947988224px + 0.5888125613vw, 30px);
  padding-left: clamp(16px, 8.9263984298px + 0.7850834151vw, 24px);
  padding-right: clamp(16px, 8.9263984298px + 0.7850834151vw, 24px);
  background-color: #d8e480;
  border-radius: 20px 20px 0 0;
}
@media (max-width: 900px) {
  .works__content__buttons {
    flex-wrap: wrap;
    column-gap: 4%;
    row-gap: 12px;
    padding-top: clamp(16px, 10.2857142857px + 1.5238095238vw, 24px);
    padding-bottom: clamp(16px, 10.2857142857px + 1.5238095238vw, 24px);
  }
}
.works__content__button {
  width: 100%;
  max-width: 250px;
  background-color: #fff;
  padding-top: clamp(8px, 6.2315996075px + 0.1962708538vw, 10px);
  padding-bottom: clamp(9px, 7.2315996075px + 0.1962708538vw, 11px);
  font-size: clamp(16px, 12.4631992149px + 0.3925417076vw, 20px);
  font-weight: 900;
  border: 3px solid #511f20;
  border-radius: 24px;
  text-align: center;
}
@media (max-width: 900px) {
  .works__content__button {
    width: 48%;
    font-size: clamp(14px, 12.2315996075px + 0.1962708538vw, 16px);
  }
}
.works__content__button[aria-selected="true"] {
  background-color: #ff883a;
}
.works__content__button.all {
  color: #f345b3;
}
.works__content__button.naiso {
  color: #7ea103;
}
.works__content__button.mizumawari {
  color: #007dbf;
}
.works__content__button.sotomawari {
  color: #c1a804;
}
.works__content__list {
  padding-top: clamp(60px, 24.6319921492px + 3.9254170756vw, 100px);
  padding-bottom: clamp(52px, 16.6319921492px + 3.9254170756vw, 92px);
  padding-left: clamp(24px, 2.7791952895px + 2.3552502453vw, 48px);
  padding-right: clamp(24px, 2.7791952895px + 2.3552502453vw, 48px);
}
@media (max-width: 900px) {
  .works__content__list {
    padding-top: clamp(24px, -1.7142857143px + 6.8571428571vw, 60px);
    padding-bottom: clamp(18px, -6.2857142857px + 6.4761904762vw, 52px);
    padding-left: clamp(16px, 10.2857142857px + 1.5238095238vw, 24px);
    padding-right: clamp(16px, 10.2857142857px + 1.5238095238vw, 24px);
  }
}
.works__content__list:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: clamp(60px, 42.3159960746px + 1.9627085378vw, 80px);
  column-gap: 16px;
}
@media (max-width: 900px) {
  .works__content__list:not([hidden]) {
    grid-template-columns: 1fr;
    row-gap: clamp(24px, -1.7142857143px + 6.8571428571vw, 60px);
  }
}
.works__content__item a {
  display: block;
}
.works__content__item figure {
  margin-bottom: clamp(22px, 9.6211972522px + 1.3738959764vw, 36px);
}
@media (max-width: 900px) {
  .works__content__item figure {
    margin-bottom: clamp(14px, 8.2857142857px + 1.5238095238vw, 22px);
    min-width: 228px;
  }
}
.works__content__item time,
.works__content__item h3 {
  font-size: clamp(14px, 5.1579980373px + 0.9813542689vw, 24px);
  font-weight: bold;
}
@media (max-width: 900px) {
  .works__content__item time,
  .works__content__item h3 {
    font-size: clamp(12px, 10.5714285714px + 0.380952381vw, 14px);
  }
}
.works__content__item time {
  display: block;
  margin-bottom: clamp(8px, 0.9263984298px + 0.7850834151vw, 16px);
}
@media (max-width: 900px) {
  .works__content__item time {
    margin-bottom: 8px;
  }
}
.works__content__item h3 {
  margin-bottom: clamp(10px, -0.6104023553px + 1.1776251227vw, 22px);
}
@media (max-width: 900px) {
  .works__content__item h3 {
    margin-bottom: 10px;
  }
}
.works__content__item .tags {
  display: flex;
  align-items: center;
  gap: clamp(6px, -1.9578017664px + 0.883218842vw, 15px);
  font-size: clamp(12px, 10.2315996075px + 0.1962708538vw, 14px);
  font-weight: bold;
}
@media (max-width: 900px) {
  .works__content__item .tags {
    gap: clamp(6px, 4.2315996075px + 0.1962708538vw, 8px);
    font-size: 12px;
  }
}
.works__content__item .tags .tag {
  padding: 8px 0;
  background-color: #fff;
  border: 3px solid #511f20;
  border-radius: 24px;
  text-align: center;
  width: clamp(120px, 49.2639842983px + 7.8508341511vw, 200px);
}
@media (max-width: 900px) {
  .works__content__item .tags .tag {
    padding: 2px 0;
  }
}
.works__content__item .tags .tag.sotomawari {
  color: #c1a804;
}
.works__content__item .tags .tag.mizumawari {
  color: #007dbf;
}
.works__content__item .tags .tag.naisou {
  color: #7ea103;
}
.works__content__item .tags .hash {
  display: flex;
  align-items: center;
  gap: clamp(6px, -1.9578017664px + 0.883218842vw, 15px);
}
.works-detail {
  margin-top: clamp(60px, 24.6319921492px + 3.9254170756vw, 100px);
}
@media (max-width: 900px) {
  .works-detail {
    margin-top: clamp(40px, 25.7142857143px + 3.8095238095vw, 60px);
  }
}
.works-detail__inner {
  padding-top: clamp(40px, 4.6319921492px + 3.9254170756vw, 80px);
  background-color: #fff;
  border-radius: 20px;
}
@media (max-width: 900px) {
  .works-detail__inner {
    padding-top: clamp(24px, 12.5714285714px + 3.0476190476vw, 40px);
    border-radius: 16px;
  }
}
.works-detail__content {
  display: flex;
  align-items: flex-start;
  gap: clamp(20px, -25.9784102061px + 5.1030421982vw, 72px);
  margin-bottom: clamp(40px, -2.441609421px + 4.7105004907vw, 88px);
  padding-left: clamp(40px, 4.6319921492px + 3.9254170756vw, 80px);
  padding-right: clamp(40px, 4.6319921492px + 3.9254170756vw, 80px);
}
@media (max-width: 900px) {
  .works-detail__content {
    flex-direction: column;
    gap: clamp(20px, 17.1428571429px + 0.7619047619vw, 24px);
    margin-bottom: clamp(24px, 12.5714285714px + 3.0476190476vw, 40px);
    padding-left: clamp(16px, -1.1428571429px + 4.5714285714vw, 40px);
    padding-right: clamp(16px, -1.1428571429px + 4.5714285714vw, 40px);
  }
}
.works-detail__content__date {
  font-size: clamp(18px, 11.8105986261px + 0.6869479882vw, 25px);
  font-weight: 900;
  line-height: 1.25;
  margin-bottom: clamp(10px, 5.5789990186px + 0.4906771344vw, 15px);
  display: block;
}
@media (max-width: 900px) {
  .works-detail__content__date {
    font-size: clamp(16px, 11.7142857143px + 1.1428571429vw, 22px);
    margin-bottom: clamp(10px, 7.1428571429px + 0.7619047619vw, 14px);
  }
}
.works-detail__content__title {
  font-size: clamp(18px, 11.8105986261px + 0.6869479882vw, 25px);
  margin-bottom: clamp(10px, 5.5789990186px + 0.4906771344vw, 15px);
  font-weight: 900;
  line-height: 1.25;
}
@media (max-width: 900px) {
  .works-detail__content__title {
    font-size: clamp(16px, 11px + 1.3333333333vw, 23px);
    margin-bottom: clamp(14px, 9.7142857143px + 1.1428571429vw, 20px);
  }
}
.works-detail__content__img {
  width: 52.7356624918%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(10px, 2.9263984298px + 0.7850834151vw, 18px);
}
@media (max-width: 900px) {
  .works-detail__content__img {
    gap: clamp(6px, 3.1428571429px + 0.7619047619vw, 10px);
    width: 100%;
  }
}
.works-detail__content__before {
  width: 36%;
}
.works-detail__content__before p {
  font-size: clamp(21px, 13.0421982336px + 0.883218842vw, 30px);
  line-height: 1.25;
  margin-bottom: clamp(6px, 2.4631992149px + 0.3925417076vw, 10px);
  color: #888;
  text-align: center;
  font-weight: 900;
}
@media (max-width: 900px) {
  .works-detail__content__before p {
    font-size: clamp(16px, 11.7142857143px + 1.1428571429vw, 22px);
    margin-bottom: clamp(6px, 3.1428571429px + 0.7619047619vw, 10px);
  }
}
.works-detail__content__before img {
  border-radius: 20px;
}
@media (max-width: 900px) {
  .works-detail__content__before img {
    border-radius: 16px;
  }
}
.works-detail__content__after {
  width: 63%;
  margin-top: clamp(24px, 14.273797841px + 1.0794896958vw, 35px);
}
.works-detail__content__after p {
  font-size: clamp(21px, 13.0421982336px + 0.883218842vw, 30px);
  line-height: 1.25;
  margin-bottom: clamp(6px, 2.4631992149px + 0.3925417076vw, 10px);
  color: #ff883a;
  text-align: center;
  font-weight: 900;
}
@media (max-width: 900px) {
  .works-detail__content__after p {
    font-size: clamp(16px, 11.7142857143px + 1.1428571429vw, 22px);
    margin-bottom: clamp(6px, 3.1428571429px + 0.7619047619vw, 10px);
  }
}
.works-detail__content__after img {
  border-radius: 20px;
}
@media (max-width: 900px) {
  .works-detail__content__after img {
    border-radius: 16px;
  }
}
.works-detail__content__text {
  width: 46.8029004614%;
}
@media (max-width: 900px) {
  .works-detail__content__text {
    width: 100%;
  }
}
.works-detail__content__box {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: clamp(20px, 11.1579980373px + 0.9813542689vw, 30px);
  row-gap: 10px;
}
@media (max-width: 900px) {
  .works-detail__content__box {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
  }
}
.works-detail__content__box div {
  display: flex;
  align-items: center;
  gap: clamp(20px, 11.1579980373px + 0.9813542689vw, 30px);
}
@media (max-width: 900px) {
  .works-detail__content__box div {
    gap: clamp(10px, 6.4285714286px + 0.9523809524vw, 15px);
  }
}
.works-detail__content__cost {
  font-size: clamp(20px, 6.7369970559px + 1.4720314033vw, 35px);
  padding-top: clamp(10px, 7.3473994112px + 0.2944062807vw, 13px);
  padding-bottom: clamp(8px, 5.3473994112px + 0.2944062807vw, 11px);
  padding-right: clamp(9px, 6.3473994112px + 0.2944062807vw, 12px);
  padding-left: clamp(9px, 6.3473994112px + 0.2944062807vw, 12px);
  background-color: #d8e480;
  font-weight: 900;
  line-height: 1.25;
  display: inline-block;
}
.works-detail__content__tag {
  font-size: clamp(12px, 10.2315996075px + 0.1962708538vw, 14px);
  padding-top: clamp(5px, 2.3473994112px + 0.2944062807vw, 8px);
  padding-bottom: clamp(5px, 2.3473994112px + 0.2944062807vw, 8px);
  padding-right: clamp(28px, 19.1579980373px + 0.9813542689vw, 38px);
  padding-left: clamp(28px, 19.1579980373px + 0.9813542689vw, 38px);
  border: 3px solid #511f20;
  border-radius: 40px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}
.works-detail__content__tag.naiso {
  color: #7ea103;
}
.works-detail__content__tag.mizumawari {
  color: #007dbf;
}
.works-detail__content__tag.sotomawari {
  color: #c1a804;
}
.works-detail__content__hash {
  font-size: clamp(12px, 8.4631992149px + 0.3925417076vw, 16px);
  font-weight: 900;
  line-height: 1.25;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.works-detail__content__hash li + li {
  margin-left: 10px;
}
.works-detail__content__in {
  font-size: clamp(18px, 11.8105986261px + 0.6869479882vw, 25px);
  margin-bottom: clamp(16px, 8.0421982336px + 0.883218842vw, 25px);
  margin-top: clamp(16px, 8.0421982336px + 0.883218842vw, 25px);
  font-weight: 900;
  line-height: 1.25;
}
@media (max-width: 900px) {
  .works-detail__content__in {
    margin-top: clamp(20px, 11.1579980373px + 0.9813542689vw, 30px);
    font-size: clamp(16px, 11.7142857143px + 1.1428571429vw, 22px);
  }
}
.works-detail__content__description {
  font-size: clamp(14px, 12.2315996075px + 0.1962708538vw, 16px);
  font-weight: 900;
  line-height: 1.8;
}
@media (max-width: 900px) {
  .works-detail__content__description {
    font-size: clamp(13px, 11.5714285714px + 0.380952381vw, 15px);
  }
}
.works-detail__content__voice {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: clamp(30px, 14.9685966634px + 1.6683022571vw, 47px);
  gap: clamp(14px, 10.4631992149px + 0.3925417076vw, 18px);
}
@media (max-width: 900px) {
  .works-detail__content__voice {
    margin-top: clamp(16px, 9.5714285714px + 1.7142857143vw, 25px);
    gap: clamp(10px, 5.7142857143px + 1.1428571429vw, 16px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
.works-detail__content__voice__img {
  width: clamp(84px, 52.1687929342px + 3.532875368vw, 120px);
}
@media (max-width: 900px) {
  .works-detail__content__voice__img {
    width: clamp(60px, 45.7142857143px + 3.8095238095vw, 80px);
  }
}
.works-detail__content__voice__in {
  width: calc(100% - 134px);
  padding-top: clamp(16px, 7.1579980373px + 0.9813542689vw, 26px);
  padding-bottom: clamp(16px, 7.1579980373px + 0.9813542689vw, 26px);
  padding-right: clamp(20px, 9.3895976447px + 1.1776251227vw, 32px);
  padding-left: clamp(20px, 9.3895976447px + 1.1776251227vw, 32px);
  border-radius: 50px;
  background-color: #ffead1;
}
@media (max-width: 900px) {
  .works-detail__content__voice__in {
    width: 100%;
    padding-top: clamp(14px, 8.6947988224px + 0.5888125613vw, 20px);
    padding-bottom: clamp(14px, 8.6947988224px + 0.5888125613vw, 20px);
    padding-right: clamp(16px, 8.9263984298px + 0.7850834151vw, 24px);
    padding-left: clamp(16px, 8.9263984298px + 0.7850834151vw, 24px);
    border-radius: 20px;
  }
}
.works-detail__content__voice__in h4 {
  font-size: clamp(16px, 8.0421982336px + 0.883218842vw, 25px);
  margin-bottom: clamp(16px, 8.9263984298px + 0.7850834151vw, 24px);
  font-weight: 900;
  line-height: 1.25;
}
@media (max-width: 900px) {
  .works-detail__content__voice__in h4 {
    font-size: clamp(16px, 13.1428571429px + 0.7619047619vw, 20px);
    margin-bottom: clamp(16px, 13.1428571429px + 0.7619047619vw, 20px);
    text-align: center;
  }
}
.works-detail__content__voice__in p {
  font-size: clamp(14px, 12.2315996075px + 0.1962708538vw, 16px);
  font-weight: 900;
  line-height: 1.8;
}
@media (max-width: 900px) {
  .works-detail__content__voice__in p {
    font-size: clamp(14px, 11.1428571429px + 0.7619047619vw, 18px);
  }
}
.works-detail__content__button {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 12.5714285714px + 3.0476190476vw, 40px);
  padding-left: clamp(16px, -1.1428571429px + 4.5714285714vw, 40px);
  padding-right: clamp(16px, -1.1428571429px + 4.5714285714vw, 40px);
}
.works-detail__content__button a {
  font-size: clamp(18px, 10.9263984298px + 0.7850834151vw, 26px);
}