:root {
  --color-white: #fff;
  --color-txt: #4b4b4b;
  --color-main: #9b51e0;
  --color-sub: #f6edff;
  --color-sub02: #ebc8ff;
  --color-sub03: #c699e2;
  --color-gray: #adadad;
  --color-accent: #ff62b6;
}

/* =======================================================
law
======================================================= */
.p-law .c-hgroup {
  padding: 2.375rem 0 4rem;
}
@media screen and (max-width: 767px) {
  .p-law .c-hgroup {
    padding: 0.3125rem 0 2.8125rem;
  }
}
@media screen and (min-width: 768px) {
  .p-law__def {
    display: grid;
    grid-template-columns: auto 1fr;
  }
}
.p-law__dttl {
  padding: 1em;
  font-weight: 700;
  color: var(--color-main);
  background: var(--color-sub);
}
@media screen and (min-width: 768px) {
  .p-law__dttl {
    padding-right: 3em;
  }
}
@media screen and (min-width: 768px) {
  .p-law__dttl {
    border-top: 1px solid var(--color-main);
    border-left: 1px solid var(--color-main);
  }
}
@media screen and (max-width: 767px) {
  .p-law__dttl {
    border: 1px solid var(--color-main);
  }
}
@media screen and (min-width: 768px) {
  .p-law__dttl:last-of-type {
    border-bottom: 1px solid var(--color-main);
  }
}
.p-law__ditem {
  display: grid;
  gap: 1em;
  align-items: center;
  padding: 1em;
  border-right: 1px solid var(--color-main);
  border-left: 1px solid var(--color-main);
}
@media screen and (min-width: 768px) {
  .p-law__ditem {
    border-top: 1px solid var(--color-main);
  }
}
@media screen and (max-width: 767px) {
  .p-law__ditem {
    padding-bottom: 1.25em;
  }
}
.p-law__ditem:last-of-type {
  border-bottom: 1px solid var(--color-main);
}
@media screen and (max-width: 767px) {
  .p-law__ditem-inner.--gap {
    display: grid;
    gap: 0.5em;
  }
}
.p-law__ditem a {
  color: var(--color-main);
  text-decoration: underline;
}