@charset "UTF-8";
/* =====================
	地区クラブ一覧ページ
 ======================= */

/** ------------------------ district-club ------------------------ **/
.district-club .group-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.78em;
  margin-bottom: 8.47%;
}

.district-club .group-item {
  background-color: #6f6f6f;
  border-radius: 11px;
}

.district-club .group-item a {
  font-size: 0.9375vw;
  font-weight: bold;
  color: var(--c_white);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5em 1.17em 0.5em 1.28em;
}

.district-club .group-item a::after {
  content: "";
  width: 1.11em;
  height: 0.61em;
  background-image: url(../img/common/icon-bent-arrow-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

/** ------------------------ group ------------------------ **/
.district-club .group:nth-of-type(n + 2) {
  margin-top: 8.71%;
}

.district-club .group .sec-ttl {
  font-size: 144.44%;
  font-weight: bold;
  color: var(--c_navy_blue);
  text-align: center;
  margin-bottom: 3.65%;
}

.district-club .group .district-club-table {
  margin-bottom: 100px;
}

.district-club .group .district-club-table .thead .tr {
  display: flex;
  align-items: center;
  border-top: 1px solid #4d4d4d;
  border-bottom: 1px dashed #4d4d4d;
}

.district-club .group .district-club-table .thead .tr .th {
  font-weight: 500;
  text-align: center;
  padding: 0.64em 0.5em 0.5em;
}

.district-club .group .district-club-table .tbody .tr {
  display: flex;
  border-bottom: 1px dashed #4d4d4d;
}

.district-club .group .district-club-table .tbody .tr .td {
  font-weight: 600;
  padding: 0.67em 0.5em;
}

.district-club .group .district-club-table .thead .tr .th:nth-child(1),
.district-club .group .district-club-table .tbody .tr .td:nth-child(1) {
  width: 3em;
}

.district-club .group .district-club-table .thead .tr .th:nth-child(2),
.district-club .group .district-club-table .tbody .tr .td:nth-child(2) {
  width: 10em;
}

.district-club .group .district-club-table .thead .tr .th:nth-child(3),
.district-club .group .district-club-table .tbody .tr .td:nth-child(3) {
  width: calc(100% - 3em - 10em);
}

.district-club .group .district-club-table .tbody .tr .td:nth-child(1) {
  text-align: center;
}

.district-club .group .district-club-table .tbody .tr .td:nth-child(2) {
  color: var(--c_navy_blue);
  display: flex;
  justify-content: center;
  column-gap: 0.5em;
}

.district-club .group .district-club-table .tbody .tr dl.td {
  display: grid;
  grid-template-columns: 5em 1fr;
  row-gap: 0.67em;
}

.district-club .group .district-club-table .tbody .tr .td .external-link-icon {
  width: 1.06em;
  height: 1.06em;
  transform: translateY(0.3em);
}

.district-club
  .group
  .district-club-table
  .tbody
  .tr
  .td
  .external-link-icon
  img {
  width: 100%;
}

/** -------------------- タブレット -------------------- **/
@media (max-width: 1280px) {
  /** ------------------------ district-club ------------------------ **/
  .district-club .group-item a {
    font-size: clamp(14px, 0.9375vw, 0.9375vw);
  }
}

/** -------------------- スマホ -------------------- **/
@media (max-width: 699px) {
  /** ------------------------ district-club ------------------------ **/
  .district-club .group-list {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 50px;
  }

  /** ------------------------ group ------------------------ **/
  .district-club .group:nth-of-type(n + 2) {
    margin-top: 100px;
  }

  .district-club .group .sec-ttl {
    font-size: 20px;
    margin-bottom: 25px;
  }

  .district-club .group .district-club-table .thead .tr {
    border-bottom: 1px solid #4d4d4d;
  }

  .district-club .group .district-club-table .tbody .tr {
    flex-wrap: wrap;
    border-bottom: 1px solid #4d4d4d;
  }

  .district-club .group .district-club-table .thead .tr .th:nth-child(2),
  .district-club .group .district-club-table .tbody .tr .td:nth-child(2) {
    width: calc(100% - 3em);
  }

  .district-club .group .district-club-table .thead .tr .th:nth-child(2) {
    text-align: left;
  }

  .district-club .group .district-club-table .thead .tr .th:nth-child(3) {
    display: none;
  }

  .district-club .group .district-club-table .tbody .tr .td:nth-child(1) {
    border-bottom: 1px dashed #4d4d4d;
  }

  .district-club .group .district-club-table .tbody .tr .td:nth-child(2) {
    border-bottom: 1px dashed #4d4d4d;
    justify-content: flex-start;
  }

  .district-club .group .district-club-table .tbody .tr .td:nth-child(3) {
    width: 100%;
  }
}