/* =======================================================================
   about Page Styles
======================================================================= */

.about_top_image {
  /* maskで切り抜き（波・上下）*/
  --c: 78px;
  mask: radial-gradient(60% var(--c) at top, #0000 calc(100% - 1px), #000);

  @media (max-width: 1023px) {
    --c: 58px;

    @media (max-height: 500px) {
      --c: 33px;
    }
  }

  @media (max-width: 480px) {
    --c: 33px;
  }

  img {
    height: 25vmin !important;
    object-fit: cover;
    object-position: 50% 80%;
  }
}

.about_table {
  th,
  td {
    border: none;
    border-bottom: 1px solid var(--wp--preset--color--custom-blue);
    line-height: 1.7rem;
    padding: 1.5rem 1rem;
  }
  th {
    text-align: start;
    width: 20%;
  }
  td {
    width: 80%;
  }
}

/* リスト */
.about_list {
  text-indent: -1em;
  padding-left: 1em;
}

.about_list::first-letter {
  color: var(--wp--preset--color--custom-blue);
}

/* =======================================================================
   Googleマップ
======================================================================= */

.about_map {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9のアスペクト比 */
  height: 0;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* =======================================================================
   Media Query
======================================================================= */
@media (max-width: 768px) {
  .about_table {
    th,
    td {
      box-sizing: border-box;
      display: inline-block;
      width: 100%;
    }
    th {
      border: none;
      padding: 1rem 0.25rem 0.25rem;
    }
    td {
      padding: 0.25rem 0.25rem 1rem;
    }
  }
}