@charset "utf-8";
/* CSS Document */


/********** work **********/

main.work {
  .p-body {
    .p-chapter {
      .p-chapter__inner {
        max-width: 1600px;
        .workList {
          display: flex;
          flex-wrap: wrap;
          gap: 4rem;
          li {
            width: calc(100%/3 - 4rem*2/3);
            border: 2px solid var(--text);
            border-radius: 40px;
            overflow: hidden;
            &.none {
              border: none;
              width: 100%;
              text-align: center;
              font-size: 1.2em;
            }
            a {
              display: block;
              height: 100%;
              &:hover {
                .thumb {
                  img {
                    transform: scale(1.1);
                  }
                }
              }
              .thumb {
                width: 100%;
                aspect-ratio: 3/2;
                overflow: hidden;
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  transition: .3s;
                }
              }
              p {
                padding: 2rem;
                height: 100%;
                font-size: 1.6rem;
                font-weight: 700;
                background: var(--yellow);
              }
            }
          }
        }
        .pagination {
          margin: 8rem 0 0;
          ul.page-numbers {
            display: flex;
            justify-content: center;
            gap: .5em;
            li {
              &:has(.prev.page-numbers, .next.page-numbers) {
                display: none;
              }
              &:has(.dots.page-numbers) {
                span {
                  color: var(--text);
                  border: none;
                  background: none;
                }
              }
              a,span {
                display: grid;
                place-content: center;
                text-align: center;
                width: 2.2em;
                height: 2.2em;
                border-radius: 50%;
                border: 2px solid var(--text);
              }
              a {
                font-weight: 700;
                &:hover {
                  color: #fff;
                  background: var(--yellow);
                }
              }
              span {
                color: #fff;
                background: var(--yellow);
              }
            }
          }
        }
      }
    }
  }
}

main.work.article {
  .p-body {
    .p-chapter {
      .p-chapter__inner {
        max-width: 1000px;
        .category {
          display: flex;
          flex-wrap: wrap;
          gap: .5rem;
          margin: 0 0 1rem;
          span {
            display: inline-block;
            padding: .4rem .8rem;
            font-size: 1.2rem;
            line-height: 1.2;
            border: 2px solid #ccc;
            border-radius: 5px;
            &.renovation {
              color: #fff;
              background: #d17966;
              border-color: #d17966;
            }
            &.reform {
              color: #fff;
              background: #648dc1;
              border-color: #648dc1;
            }
            &.old-house {
              color: #fff;
              background: #5daca6;
              border-color: #5daca6;
            }
          }
        }
        .title {
          margin: 0 0 6rem;
          padding: 0 0 .3em;
          font-size: 2.7rem;
          line-height: 1.4;
          letter-spacing: .1em;
          border-bottom: 4px solid var(--yellow);
        }
        .container {
          p + p,
          figure + p {
            margin: 1.5em 0 0;
          }
          * + figure {
            margin: 1.5em 0 0;
          }
          figure {
            img {
              max-width: 100%;
            }
            figcaption {
              margin: .5em 0 0;
              font-size: .85em;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  main.work {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          .workList {
            li {
              width: calc(100%/2 - 4rem/2);
            }
          }
        }
      }
    }
  }
}

@media (max-width: 480px) {
  main.work {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          .workList {
            gap: 4rem;
            li {
              width: 100%;
              a {
                .category {
                  margin: 1.5rem 0 0;
                  span {
                    font-size: 1.1rem;
                  }
                }
              }
            }
          }
          .pagination {
            margin: 4rem 0 0;
          }
        }
      }
    }
  }
  main.work.article {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          .title {
            margin: 0 0 4rem;
            font-size: 2rem;
            border-bottom: 4px solid var(--yellow);
          }
        }
      }
    }
  }
}