.p-area-group {
  border-bottom: 1px solid #ccc;
}

.p-area-heading {
  display: grid;
  grid-template-columns: 1fr max-content;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 15px 10px;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  color: #006E00;
  /* border-bottom: 1px solid #ccc; */
}

.p-area-heading::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
}

.p-area-heading.is-active::after {
  content: "\f077";
}

.p-area-body {
  display: none;
}

.is-active+.p-area-body {
  margin-bottom: 30px;
}

.p-area-table-wrap {
  position: relative;
  font-size: 0.9rem;
}

@media (width < 768px) {
  .p-area-table-wrap {
    overflow-y: auto;
    overflow-x: scroll;
    font-size: 0.8rem;
  }

  .p-area-table-wrap .p-area-table {
    min-width: 100%;
    white-space: nowrap;
  }
}

.p-area-table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
}

@media (width < 768px) {
  .p-area-table {
    margin-bottom: 5px;
  }
}

.p-area-table th,
.p-area-table td {
  padding: 10px 15px;
  line-height: 1.6;
  border: 1px solid;
}

.p-area-table thead th {
  color: #fff;
  background: #006E00;
}

.p-area-table tbody th {
  color: #fff;
  background: #70A000;
}

.p-area-table tbody td {
  background: #D1FB6A;
}

/* .p-area-table thead {
  @media (width < 768px) {
    position: sticky;
    top: 0;
    left: 1px;
    z-index: 1;
  }
} */

.-theme-sapporo .p-area-heading {
  color: #46990b;
}

.-theme-sapporo .p-area-table thead {
  border-top: 1px #74B347 solid;
  border-left: 1px #74B347 solid;
  border-right: 1px #74B347 solid;
}

.-theme-sapporo .p-area-table thead th {
  background: #74B347;
}

.-theme-sapporo .p-area-table tbody th {
  background: #E2EFD9;
  color: black;
  border: 1px #A8D08D solid;
  width: 150px;
}

.-theme-sapporo .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #A8D08D solid;
  width: 450px;
}

.-theme-ishikari .p-area-heading {
  color: #0B992E;
}

.-theme-ishikari .p-area-table thead {
  border-top: 1px #47B362 solid;
  border-left: 1px #47B362 solid;
  border-right: 1px #47B362 solid;
}

.-theme-ishikari .p-area-table thead th {
  background: #47B362;
}

.-theme-ishikari .p-area-table tbody th {
  background: #DAF0E0;
  color: black;
  border: 1px #8ED19F solid;
  width: 150px;
}

.-theme-ishikari .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #8ED19F solid;
  width: 450px;
}

.-theme-otaru .p-area-heading {
  color: #0B998D;
}

.-theme-otaru .p-area-table thead {
  border-top: 1px #47B3AA solid;
  border-left: 1px #47B3AA solid;
  border-right: 1px #47B3AA solid;
}

.-theme-otaru .p-area-table thead th {
  background: #47B3AA;
}

.-theme-otaru .p-area-table tbody th {
  background: #DAF0EE;
  color: black;
  border: 1px #8ED1CC solid;
  width: 150px;
}

.-theme-otaru .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #8ED1CC solid;
  width: 450px;
}

.-theme-tomakomai .p-area-heading {
  color: #0B4699;
}

.-theme-tomakomai .p-area-table thead {
  border-top: 1px #4774B3 solid;
  border-left: 1px #4774B3 solid;
  border-right: 1px #4774B3 solid;
}

.-theme-tomakomai .p-area-table thead th {
  background: #4774B3;
}

.-theme-tomakomai .p-area-table tbody th {
  background: #DAE3F0;
  color: black;
  border: 1px #8EAAD1 solid;
  width: 150px;
}

.-theme-tomakomai .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #8EAAD1 solid;
  width: 450px;
}

.-theme-iwamizawa .p-area-heading {
  color: #2E0B99;
}

.-theme-iwamizawa .p-area-table thead {
  border-top: 1px #6247B3 solid;
  border-left: 1px #6247B3 solid;
  border-right: 1px #6247B3 solid;
}

.-theme-iwamizawa .p-area-table thead th {
  background: #6247B3;
}

.-theme-iwamizawa .p-area-table tbody th {
  background: #E0DAF0;
  color: black;
  border: 1px #9F8ED1 solid;
  width: 150px;
}

.-theme-iwamizawa .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #9F8ED1 solid;
  width: 450px;
}

.-theme-hakodate .p-area-heading {
  color: #8D0B99;
}

.-theme-hakodate .p-area-table thead {
  border-top: 1px #AA47B3 solid;
  border-left: 1px #AA47B3 solid;
  border-right: 1px #AA47B3 solid;
}

.-theme-hakodate .p-area-table thead th {
  background: #AA47B3;
}

.-theme-hakodate .p-area-table tbody th {
  background: #E0DAF0;
  color: black;
  border: 1px #CC8ED1 solid;
  width: 150px;
}

.-theme-hakodate .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #CC8ED1 solid;
  width: 450px;
}

.-theme-asahikawa .p-area-heading {
  color: #990B46;
}

.-theme-asahikawa .p-area-table thead {
  border-top: 1px #B34774 solid;
  border-left: 1px #B34774 solid;
  border-right: 1px #B34774 solid;
}

.-theme-asahikawa .p-area-table thead th {
  background: #B34774;
}

.-theme-asahikawa .p-area-table tbody th {
  background: #EEDAF0;
  color: black;
  border: 1px #D18EAA solid;
  width: 150px;
}

.-theme-asahikawa .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #D18EAA solid;
  width: 450px;
}

.-theme-obihiro .p-area-heading {
  color: #992E0B;
}

.-theme-obihiro .p-area-table thead {
  border-top: 1px #B36247 solid;
  border-left: 1px #B36247 solid;
  border-right: 1px #B36247 solid;
}

.-theme-obihiro .p-area-table thead th {
  background: #B36247;
}

.-theme-obihiro .p-area-table tbody th {
  background: #F0E0DA;
  color: black;
  border: 1px #D19F8E solid;
  width: 150px;
}

.-theme-obihiro .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #D19F8E solid;
  width: 450px;
}

.-theme-kushiro .p-area-heading {
  color: #998D0B;
}

.-theme-kushiro .p-area-table thead {
  border-top: 1px #B3AA47 solid;
  border-left: 1px #B3AA47 solid;
  border-right: 1px #B3AA47 solid;
}

.-theme-kushiro .p-area-table thead th {
  background: #B3AA47;
}

.-theme-kushiro .p-area-table tbody th {
  background: #F0EEDA;
  color: black;
  border: 1px #D1CC8E solid;
  width: 150px;
}

.-theme-kushiro .p-area-table tbody td {
  background: #fff;
  color: black;
  border: 1px #D1CC8E solid;
  width: 450px;
}

.ip1r {
  padding-left: 1rem;
}

.ip2r {
  padding-left: 2rem;
}

.ip3r {
  padding-left: 3rem;
}

.ip4r {
  padding-left: 4rem;
}

.ip5r {
  padding-left: 5rem;
}

.ip6r {
  padding-left: 6rem;
}

.ip7r {
  padding-left: 7rem;
}

.ip8r {
  padding-left: 8rem;
}

.ip9r {
  padding-left: 9rem;
}

.ip10r {
  padding-left: 10rem;
}