@charset "UTF-8";
.page-template-default,
body.archive {
  background: var(--color-white);
}
@media screen and (min-width: 768px) {
  .sp {
    display: none;
  }
}
.p-topicsarchive-inner {
  margin-inline: auto;
  padding-inline: calc(var(--to-rem) * 20);
  width: 100%;
  max-width: 1080px;
}
@media screen and (min-width: 768px) {
  .p-topicsarchive-inner {
    /* inline-size: min(100%, var(--075) * 1040); */
  }
}
.p-topics {
  background: #fff;
  padding-block: calc(var(--to-rem) * 40);
}

@media screen and (min-width: 768px) {
  .p-topics {
    padding-block: calc(var(--to-rem) * 140);
  }
}
.p-single__contact {
  display: block;
  color: #fff !important;
  background: var(--color-blue);
  font-weight: 700;
  text-align: center;
  width: 100%;
  text-decoration: none !important;
  padding: 10px;
  margin-top: 1em;
  border-radius: 6px;
}

.p-single__contact:hover {
  opacity: 0.8;
}

.kakomi {
  line-height: 1.5;
  padding: 1em;
  margin-top: 1em;
  background-color: #ececec;
}
.howto ol li {
  line-height: 1.5;
  padding-left: 1.5em;
  counter-increment: namae;
  position: relative;
  margin-bottom: 0.8em;
}
.howto ol {
  margin-left: 0;
}
.howto ol li {
  list-style: none;
}
.howto ol li:before {
  line-height: 1.2;
  content: counter(namae);
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.7em;
  background-color: #f08300;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #fff;
}

.p-topics-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--to-rem) * 40);
  gap: 20px;
}

.p-topics-pagination * {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 20px;
}
.p-topics-pagination a {
  color: var(--color-blue);
}
.p-topics-pagination__arrow {
  border: 1px solid var(--color-blue);
  width: 45px;
  height: 45px;
  border-radius: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-numbers.current {
  background: var(--color-blue);
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 100px;
}

.dli-chevron-round-left {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-blue);
  line-height: 1;
  position: relative;
  width: 12px;
  height: 12px;
  transform: translateX(25%) rotate(-135deg);
}

.dli-chevron-round-left::before,
.dli-chevron-round-left::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.dli-chevron-round-left::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.dli-chevron-round-left::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}
.dli-chevron-round-right {
  display: inline-block;
  vertical-align: middle;
  color: var(--color-blue);
  line-height: 1;
  position: relative;
  width: 12px;
  height: 12px;
  transform: translateX(-25%) rotate(45deg);
}

.dli-chevron-round-right::before,
.dli-chevron-round-right::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 0.1em;
}

.dli-chevron-round-right::before {
  top: 0;
  left: 0;
  right: 0;
  height: 0.1em;
}

.dli-chevron-round-right::after {
  top: 0;
  right: 0;
  bottom: 0;
  width: 0.1em;
}

.p-front-topics__item-meta {
  gap: 10px;
}

.p-front-topics__item-title span,
.p-front-topics__item-title {
  width: 100%;
  white-space: unset;
}

.p-front-topics__filter {
  flex: 1 0;
}