@charset "UTF-8";

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

/* about */

.top_content_about {
  margin-top: 56px;
  padding-top: 80px;
  padding-bottom: 80px;
  background-color: #e7f7ff;
  background-image: url(../images/top/about_bg.png);
  background-repeat: no-repeat;
  background-position: top 20px left 4px;
  text-align: center;
}

.content_about {
  margin-top: 48px;
}

.about_titles {
  display: flex;
  flex-wrap: wrap;
  gap: 27px;
  justify-content: center;
  img {
  }
}

.about_points {
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  .about_point {
    width: calc((100% - 64px) / 3);
    border: 1px solid #c6dff6;
    background: #fff;
    padding: 24px;
    .about_point_num {
      margin: 24px auto 0 auto;
      color: #fff;
      background: #f26101;
      font-family: var(--font-en);
      font-size: 1.4rem;
      font-weight: 800;
      padding: 1px 3px;
      width: fit-content;
    }
    h3 {
      margin-top: 8px;
      font-size: 1.9rem;
      color: var(--color-theme);
    }
    p {
      margin-top: 16px;
      text-align: left;
    }
  }
}

/* service */

.top_content_service {
  margin-top: 80px;
  .content_header {
    position: relative;
    .more_link {
      position: absolute;
      right: 24px;
      bottom: 0;
    }
  }
}

/* news */

.top_content_news {
  margin-top: 80px;
}

.top_news_elements {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  .content_header {
    width: 170px;
  }
  .content_news {
    width: calc(100% - 220px);
    padding-top: 34px;
    display: flex;
    flex-flow: column;
    gap: 24px;
    a {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      text-decoration: none;
      border-bottom: 1px solid #dddddd;
      padding-bottom: 24px;
      .news_image {
        width: 200px;
        aspect-ratio: 200 / 133;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 10px;
        }
      }
      .news_text {
        width: calc(100% - 216px);
        .date_category {
          display: flex;
          gap: 14px;
          align-items: center;
          .date {
            color: var(--color-theme-sub);
            font-size: 1.2rem;
          }
          .category {
            display: flex;
            gap: 6px;
            list-style: none;
            margin: 0;
            padding: 0;
            li {
              padding: 3px 5px;
              font-size: 1.2rem;
              color: #fff;
              background: var(--color-theme);
              border-radius: 5px;
            }
          }
        }
        h3 {
          margin-top: 16px;
          font-size: 1.6rem;
          font-weight: 500;
        }
      }
    }
  }
}

@media screen and (max-width: 740px) {
  .top_content_about {
    margin-top: 0;
    background-position: top 2px left -44px;
    background-size: 60%;
  }
  .about_titles {
    display: grid;
    grid-template-columns: auto auto;
    gap: 12px 8px;
    justify-content: center;
    justify-items: center;
  }
  .about_titles img:first-child {
    grid-column: span 2;
  }
  .about_points {
    .about_point {
      width: 100%;
    }
  }
  .top_news_elements {
    gap: 40px;
    .content_header {
      width: 100%;
      .more_link {
        margin-left: auto;
        margin-right: auto;
      }
    }
    .content_news {
      width: 100%;
      padding-top: 0;
      a {
        .news_image {
          width: 100%;
        }
        .news_text {
          width: 100%;
        }
      }
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}