/* =========================================
   共通
========================================= */

/* .table-wrap {
  overflow-x: auto;
} */

.management-info {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}
/* .management-info tr:not(.finance-table tr) {border-bottom: 1px solid #000;} */
.management-info > tbody > tr {border-bottom: 1px solid #000;}
/* .management-info > tbody > tr:first-of-type {border-top: 1px solid #000;} */

.management-info th,
.management-info td {
  vertical-align: top;
}

.management-info > tbody > tr > th {
  width: 10em;
  text-align: left;
  font-weight: bold;
  white-space: nowrap;
  color: #343434;
}

/* =========================================
   社是
========================================= */

.creed-list {
  margin: 0;
}
.creed-item::before {
  display: inline-block;
  content: "1. ";
}
.creed-item + .creed-item {
  margin-top: .5rem;
}

/* =========================================
   主要株主
========================================= */

.management-info ol {
  margin: .5rem 0;
}

.management-info p {
  margin: 0;
}

.management-info p + ol,
.management-info ol + p {
  margin-top: .5rem;
}

/* =========================================
   役員構成・番組審議会委員
========================================= */

.officer-list,
.committee-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.officer-list li,
.committee-list li {
  display: grid;
  grid-template-columns: 9em 7em 1fr;
  gap: 1rem;
  padding: .375rem 0;
}

.role,
.name,
.affiliation {
  display: block;
}

/* =========================================
   財務情報
========================================= */

.finance-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 .5rem;
  font-weight: bold;
  background: #eee;
  padding: .25em;
  color: #343434;
}

.finance-title span {
  font-size: .875rem;
  font-weight: normal;
}

.finance-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  table-layout: fixed;
}

.finance-table th,
.finance-table td {
  padding: .25rem .5rem;
}

.finance-table th {
  text-align: left;
  font-weight: normal;
}

.finance-table td {
  text-align: right;
  white-space: nowrap;
}

.finance-table th[colspan="2"] {
  padding-top: 1rem;
  font-weight: bold;
  color: #343434;
}

.finance-table tr.total th,
.finance-table tr.total td {
  border-top: 3px solid #343434;
}

@media (min-width: 641px) {
  .financial-statement {
    width: 80%;
  }
  .management-info > tbody > tr > th,
  .management-info > tbody > tr > td {
    padding: 1rem;
    box-sizing: border-box;
  }
}

/* =========================================
   スマホ
========================================= */

@media (max-width: 640px) {
  .management-info > tbody > tr > th {
    width: auto;
    background: #ddd;
  }
  .management-info > tbody > tr > th,
  .management-info > tbody > tr > td {
    padding: .5em;
    box-sizing: border-box;
  }

  
  .officer-list li,
  .committee-list li {
    grid-template-columns: 8em 1fr;
    grid-template-areas:
      "role role"
      "name affiliation";
    gap: 0;
  }

  .role {
    grid-area: role;
    font-weight: bold;
    color: #343434;
  }

  .name {
    grid-area: name;
  }

  .affiliation {
    grid-area: affiliation;
  }

  .finance-title {
    flex-wrap: wrap;
  }

  .finance-table th,
  .finance-table td {
    padding: .25rem;
    box-sizing: border-box;
  }
  
  .finance-table .col-th {
    width: 40%;
  }
  .finance-table .col-td {
    width: 60%;
  }
  .management-info,
  .management-info > tbody,
  .management-info > tbody > tr,
  .management-info > tbody > tr > th,
  .management-info > tbody > tr > td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .management-info > tbody > tr > th {
    white-space: normal;
  }
  .finance-title span {
    margin-left: auto;
  }
}


@media screen and (max-width: 500px){
    /* 取締役会の開催状況 */
  .attendance-list li {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date date"
      "attendance rate";
    gap: .25rem;
  }

  .date {
    grid-area: date;
  }

  .attendance {
    grid-area: attendance;
  }

  .rate {
    grid-area: rate;
  }  
  .attendance-list li:not(:last-child) {
    margin-bottom: .75rem;
  }

  .attendance-list .date {
    font-weight: bold;
    color: #343434;
  }

}

@media screen and (max-width: 375px){
  .officer-list li, .committee-list li {
    grid-template-columns: 1fr;
    grid-template-areas:
    "role"
    "name"
    "affiliation";
  }
  .attendance-list li {
    grid-template-columns: 1fr;
    grid-template-areas:
      "date"
      "attendance"
      "rate";
    gap: 0;
    }
}