/* top */
.top {
    .fv {
      height: 100vh;
  
      .inner {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #fff;
  
        h1 {
          font-size: 8rem;
          font-weight: 700;
          margin-bottom: 24px;
          font-family: "Marcellus SC", serif;
          @media screen and (max-width: 767px) {
          font-size: 17vw;
          }
        }
        p {
          font-size: 2rem;
        }
      }
    }
  
    .aboutme {
      padding: 100px 0;
      h1 {
        color: #fff;
        font-size: 5rem;
        font-weight: 700;
        margin-bottom: 24px;
        font-family: "Marcellus SC", serif;
      }
      h2 {
        color: #fff;
        font-size: 3rem;
        margin-bottom: 24px;
        display: flex;
        align-items: center;
        gap: 15px;
        font-family: "Marcellus SC", serif;
  
        &::before {
          content: "";
          width: 50px;
          height: 1px;
          background-color: #fff;
          display: inline-block;
        }
      }
      p {
        color: #fff;
        font-size: 1.6rem;
      }
  
      .btn {
        margin-top: 40px;
        a {
          display: inline-block;
          color: #fff;
          background: #000;
          padding: 13px 75px;
          font-size: 1.4rem;
          border-radius: 3px;
        }
      }
    }
  
    .work {
      padding-top: 55px;
      background-color: #f8f7f6;
      .title_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        h2 {
          font-size: 5rem;
          font-weight: 700;
          font-family: "Marcellus SC", serif;
        }
  
        a{
          font-size: 1.5rem;
          color: #099DF0;
          font-family: "Marcellus SC", serif;
        }
      }
  
      .worklist {
        margin-top: 65px;
        .workitems {
          display: flex;
          flex-direction: row;
          @media screen and (max-width: 767px) {
            flex-direction: column;
          }

          img {
            width: 100%;
            height: auto;
          }

          .noimage{
            aspect-ratio: 640 / 380;
            width: 100%;
            height: 100%;
            display: flex;
            background-color: #fff;
            justify-content: center;
            align-items: center;

            img{
              width: 20%;
              height: auto;
            }
          }
  
          &:nth-child(2n) {
            flex-direction: row-reverse;
            @media screen and (max-width: 767px) {
              flex-direction: column;
            }
          }
  
          & + li {
            margin-top: 150px;
          }
  
          .box_left {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            @media screen and (max-width: 767px) {
              width: 100%;
            }
          }
  
          .box_right {
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            box-sizing: border-box;
            padding-left: 10%;
            padding-right: 10%;
            @media screen and (max-width: 767px) {
              width: 100%;
              margin-top: 50px;
            }
          }
  
          h2 {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 24px;
          }
  
          p {
            font-size: 1.6rem;
            margin-bottom: 24px;
          }
  
          img {
            max-width: 100%;
          }
  
          .btn {
            display: inline-block;
            color: #fff;
            background: #000;
            padding: 13px 75px;
            font-size: 1.4rem;
            border-radius: 3px;
          }
        }
      }
    }
  
    .news {
      padding-top: 55px;
      padding-bottom: 100px;
      background-color: #f8f7f6;
      .title_area {
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        h2 {
          font-size: 5rem;
          font-weight: 700;
          font-family: "Marcellus SC", serif;
        }
  
        a {
          font-size: 1.5rem;
          color: #099DF0;
          font-family: "Marcellus SC", serif;
          }
      }
  
      ul.newslist {
        margin-top: 70px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 55px;

        @media screen and (max-width: 767px) {
          gap: 50px;
          grid-template-columns: repeat(1, 1fr);
          }

        .noimage{
          aspect-ratio: 640 / 380;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 20%;
            height: auto;
          }
        }
  
        li.newsitems {
          padding: 20px;
          gap: 50px;
          background-color: #fff;
          border-radius: 10px;
          box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

          >img{
            width: 100%;
            aspect-ratio: 640 / 380;
            height: auto;
            object-fit: cover;
          }
  
          .category {
            padding: 7px 30px;
            background: #099df0;
            font-size: 1rem;
            border-radius: 50px;
            color: #fff;
            font-weight: 700;
            margin-bottom: 20px;
            width: fit-content;
            margin-top: 15px;
          }
  
          .title {
            margin-bottom: 30px;
            font-size: 1.6rem;
            color: #000;
            font-weight: 700;
          }
  
          .time {
            font-size: 1rem;
            color: #000;
          }
        }
      }
    }
  }