/* ==========================================================================
   body.home
   ========================================================================== */
body.home {
  h2 {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: 0.04em;
  }
  /* ==========================================================================
     Featured work
     ========================================================================== */
  .workTitle {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 33px;
    @media (width > 1400px) {
      margin-bottom: 52px;
    }
    @media (width <= 659px) {
      display: block;
      margin-bottom: 29px;
      padding: 0 var(--sp-inner-padding);
    }
    @media (width <= 499px) {
      margin-bottom: 24px;
    }
    .titleAndCat {
      display: flex;
      flex-wrap: wrap;
      @media (width <= 659px) {
        flex-direction: column;
      }
    }
    h1 {
      font-size: 1.4rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      @media (width <= 659px) {
        margin-bottom: 15px;
      }
    }
    .cat {
      font-size: 1.4rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      position: relative;
      padding-left: 105px;
      color: rgba(0,0,0,0.5);
      @media (width <= 659px) {
        position: static;
        padding-left: 0;
      }
      &::before {
        content: '';
        display: block;
        width: 75px;
        height: 1px;
        background-color: rgba(0,0,0,0.09);
        position: absolute;
        top: 6px;
        left: 15px;
        @media (width <= 659px) {
          display: none;
        }
      }
    }
  }
  #featuredWork {
    margin-top: 131px;
    @media (width > 1400px) {
      margin-top: 127px;
    }
    .title {
      @media (width <= 659px) {
        padding: 0 var(--sp-inner-padding);
      }
    }
    .items {
      margin-top: 44px;
      @media (width <= 659px) {
        margin-top: 38px;
        position: relative;
        &::before {
          content: '';
          display: block;
          width: 17px;
          height: 1px;
          background-color: #b7b7b7;
          position: absolute;
          left: 13px;
        }
      }
      @media (width <= 499px) {
        margin-top: 29px;
        &::before {
          left: 11px;
        }
      }
    }
    .item {
      &:first-of-type {
        @media (width <= 659px) {
          padding-top: 33px;
        }
      }
      &:nth-of-type(n+2) {
        margin-top: 57px;
        @media (width > 1400px) {
          margin-top: 63px;
        }
        @media (width <= 989px) {
          margin-top: 60px;
        }
        @media (width <= 659px) {
          margin-top: 62px;
        }
      }
      a:hover {
        opacity: 1;
      }
    }
    .image {
      width: 100%;
      height: auto;
    }
    .trimImage {
      width: 100%;
      height: auto;
      background-size: cover;
      background-position: center;
    }
    .dummyImage {
      width: 100%;
      height: auto;
      visibility: hidden;
    }
  }
  /* ==========================================================================
     About us
     ========================================================================== */
  #aboutUs {
    margin-top: 112px;
    @media (width > 1400px) {
      margin-top: 98px;
    }
    @media (width <= 989px) {
      margin-top: 114px;
    }
    @media (width <= 659px) {
      padding: 0 var(--sp-inner-padding);
      margin-top: 124px;
    }
    .textBlock {
      width: var(--col-66);
      margin-top: 50px;
      margin-bottom: 67px;
      padding-left: 2px;
      @media (width > 1400px) {
        width: var(--col-50);
        margin-top: 48px;
        margin-bottom: 74px;
      }
      @media (width <= 989px) {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin-top: 35px;
        margin-bottom: 33px;
        padding-left: 0;
      }
      @media (width <= 768px) {
        display: block;
      }
      @media (width <= 659px) {
        margin-top: 33px;
      }
    }
    .text {
      font-size: 1.4rem;
      letter-spacing: -0.02em;
      line-height: calc(27 / 14);
      @media (width > 1400px) {
        letter-spacing: 0.02em;
        line-height: calc(30 / 14);
      }
      @media (width <= 989px) {
        width: var(--col-50);
      }
      @media (width <= 768px) {
        width: 100%;
      }
      &:nth-of-type(n+2) {
        margin-top: 27px;
        @media (width > 1400px) {
          margin-top: 30px;
        }
        @media (width <= 989px) {
          margin-top: 0;
        }
        @media (width <= 768px) {
          margin-top: 28px;
        }
      }
    }
    .link {
      padding-left: 2px;
      font-size: 1.4rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      @media (width <= 989px) {
        padding-left: 0;
      }
    }
  }
  /* ==========================================================================
     Recent work
     ========================================================================== */
  #recentWork {
    margin-top: 136px;
    margin-bottom: 116px;
    @media (width <= 989px) {
      margin-bottom: 131px;
    }
    @media (width <= 659px) {
      margin-top: 121px;
      margin-bottom: 128px;
    }
    > .title {
      margin-bottom: 51px;
      @media (width <= 659px) {
        margin-bottom: 40px;
        padding: 0 var(--sp-inner-padding);
      }
    }
  }
  /* ==========================================================================
     Recent news
     ========================================================================== */
  .recentNews {
    @media (width <= 659px) {
      padding: 0 var(--sp-inner-padding);
    }
  }
}