@charset "utf-8";
/*--------------------------------------------------------------------------------
 
  about

--------------------------------------------------------------------------------*/
.about_ttl:not(:first-of-type) {
  margin-top: var(--space-l);
}
.about_img {
  align-self: flex-start;
}
@media (min-width: 801px) {
  .about_content { padding: var(--space-s) 0; }
  .about_content:has(.about_img) {
    display: grid;
    grid-template-columns: 1fr 40%;
    grid-template-areas: 
      "about_txt about_img";
    grid-column-gap: var(--space-m);
  }
  .about_txt { grid-area: about_txt; }
  .about_img { grid-area: about_img; }
}
@media (max-width: 800px) {
  .about_img { padding: var(--space-s) 0 1.5rem 0; }
}

/*--------------------------------------------------------------------------------
  .about_img
--------------------------------------------------------------------------------*/
@media (min-width: 801px) { :root { --about_img-aspect: inherit; } }
@media (max-width: 800px) { :root { --about_img-aspect: 3 / 1.5; } }
.about_img img {
  width: 100%;
  height: 100%;
  aspect-ratio: var(--about_img-aspect);
  object-fit: cover;
}

/*--------------------------------------------------------------------------------
  .about_list
--------------------------------------------------------------------------------*/
.about_list {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 2vw, 0.75rem);
}
.about_list li {
  font-size: 0.95rem;
  line-height: 1;
  background-color: var(--color-gray-lighter);
  padding: 0.65rem;
}