@charset "UTF-8";

/**
 * オリジナルcss
 */

.top_content_blog {
  background-image: url("../images/common/bg_bottom_building.png");
  background-repeat: repeat-x;
  background-position: bottom center;
  .more_link {
    margin-top: 80px;
    a {
      background-color: #e9a93a;
    }
  }
}

.blog_elements,
.archive_elements_blog {
  display: flex;
  flex-wrap: wrap;
  gap: 41px;
  .blog_element {
    width: calc((100% - 82px) / 3);
    text-decoration: none;
    background: var(--c2);
    .thumbnail {
      position: relative;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
      }
    }
    .thumbnail::before {
      content: "";
      display: block;
      padding-top: calc(32000% / 506);
    }
    .blog_element_info {
      padding: 32px;
      color: #fff;
      .date {
        font-size: 1.6rem;
        font-family: var(--en);
      }
      h3 {
        margin-top: 8px;
        font-size: 2.4rem;
        font-family: var(--go);
      }
      .terms {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 16px;
        .term {
          padding: 2px 16px;
          border-radius: 50px;
          width: fit-content;
          font-size: 1.6rem;
          font-family: var(--go);
          color: var(--c2);
          background: #fff;
        }
      }
    }
  }
}

@media screen and (max-width: 1110px) {
}
@media screen and (max-width: 740px) {
  .blog_elements,
  .archive_elements_blog {
    .blog_element {
      width: 100%;
      .blog_element_info {
        padding: 16px;
        .date {
          font-size: 1.2rem;
        }
        h3 {
          font-size: 1.6rem;
        }
        .terms {
          .term {
            font-size: 1rem;
          }
        }
      }
    }
  }
  .top_content_blog {
    .more_link {
      margin-top: 40px;
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}