/* p-contents
---------------------------------------------------------------------------- */
.p-contents-layout {
  display: grid;
  grid-template-columns: 1fr 37rem;
  gap: 6rem;
}

@media screen and (max-width: 767px) {
  .p-contents-layout {
    grid-template-columns: 1fr;
    gap: 18.6666666667vw;
  }
}
/* p-contents-aside
---------------------------------------------------------------------------- */
.p-contents-aside-box:not(:last-of-type) {
  margin-bottom: 4rem;
}

.p-contents-aside-ttl {
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;
  width: 100%;
  --line-height: 0.4rem;
  display: inline-block;
  padding-bottom: 1rem;
  border-bottom: var(--line-height) solid #f5f5f5;
  position: relative;
}

.p-contents-aside-ttl::before {
  content: "";
  width: 20%;
  height: var(--line-height);
  background-color: #26563b;
  position: absolute;
  top: 100%;
  left: 0;
}

.p-contents-aside-search {
  position: relative;
  width: 100%;
  margin-top: 2rem;
}

.p-contents-aside-search-input {
  width: 100%;
  height: 5rem;
  border-radius: 0.4rem;
  background: #fff;
  border: 1px solid #26563b;
  color: #333;
  padding-inline: 1rem;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 500;
}

.p-contents-aside-search-submit {
  width: 3rem;
  height: 3rem;
  background-image: url(../../images/common/icn_search.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 1rem;
  translate: 0 -50%;
  z-index: 1;
}

.p-contents-aside-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.p-contents-aside-category-link {
  --col-bg: #fff;
  --col-txt: #333;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-align: center;
  color: var(--col-txt);
  border: 1px solid #26563b;
  background-color: var(--col-bg);
  border-radius: 0.4rem;
  padding-block: 0.2rem;
  padding-inline: 1rem;
}

.p-contents-aside-category-link.is-current {
  --col-bg: #26563b;
  --col-txt: #fff;
  pointer-events: none;
  cursor: default;
}

@media (any-hover: hover) {
  .p-contents-aside-category-link:hover {
    --col-txt: #26563b;
    box-shadow: 0 0 0 2px #26563b;
  }
}
.p-contents-aside-tag-link {
  --col-bg: #fff;
  --col-txt: #333;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-align: center;
  color: var(--col-txt);
  border: 1px solid #26563b;
  background-color: var(--col-bg);
  border-radius: calc(infinity * 1px);
  padding-block: 0.2rem;
  padding-inline: 1rem;
}

.p-contents-aside-tag-link.is-current {
  --col-bg: #26563b;
  --col-txt: #fff;
  pointer-events: none;
  cursor: default;
}

@media (any-hover: hover) {
  .p-contents-aside-tag-link:hover {
    --col-txt: #26563b;
    box-shadow: 0 0 0 2px #26563b;
  }
}
@media screen and (max-width: 767px) {
  .p-contents-aside-box:not(:last-of-type) {
    margin-bottom: 8vw;
  }
  .p-contents-aside-ttl {
    font-size: 5.3333333333vw;
    width: 100%;
    --line-height: calc(4/375*100vw);
    padding-bottom: 2.6666666667vw;
    border-bottom: var(--line-height) solid #f5f5f5;
  }
  .p-contents-aside-category-list {
    gap: 2.6666666667vw;
    margin-top: 5.3333333333vw;
  }
  .p-contents-aside-category-link {
    font-size: 4.2666666667vw;
    border-radius: 1.0666666667vw;
    padding-block: 0.5333333333vw;
    padding-inline: 1.3333333333vw;
  }
  .p-contents-aside-tag-list {
    gap: 2.6666666667vw;
    margin-top: 5.3333333333vw;
  }
  .p-contents-aside-tag-link {
    font-size: 4.2666666667vw;
    padding-block: 0.5333333333vw;
    padding-inline: 1.3333333333vw;
  }
}