/* =======================================================
writer
======================================================= */
.bl-writer {
  padding: 32px;
  margin-top: 80px;
  background-color: var(--color-brightest);
  border: 1px solid var(--color-base);
}
.bl-writer-about {
  --_padding-block: 2px;
  width: fit-content;
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
  padding-inline: 8px;
  margin-bottom: 6px;
  font-size: 15px;
  line-height: calc(27/15);
  color: var(--color-brightest);
  background-color: var(--color-base);
}
@media (width <= 750px) {
  .bl-writer-about {
    margin-bottom: 24px;
  }
}
.bl-writer-box {
  display: grid;
  gap: 24px;
}
@media (width >= 751px) {
  .bl-writer-box {
    grid-template-columns: 156px 1fr;
    align-items: end;
  }
}
@media (width <= 750px) {
  .bl-writer-box {
    gap: 16px;
  }
}
.bl-writer-imgwrapper {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
}
@media (width <= 750px) {
  .bl-writer-imgwrapper {
    max-width: 75%;
    margin-inline: auto;
  }
}
.bl-writer-name {
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: calc(28/20);
}
.bl-writer-job {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: calc(22/14);
}
.bl-writer-txt {
  font-size: 15px;
  line-height: calc(24/15);
}

/* =======================================================
column
======================================================= */
.bl-column-cta {
  padding-block: 40px 48px;
  margin-top: 40px;
  background-color: var(--color-contrast);
}
@media (width <= 750px) {
  .bl-column-cta {
    --_padding-inline: 24px;
    padding-inline: var(--_padding-inline);
  }
}
.bl-column-cta-ttl {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
  line-height: calc(38/24);
}
.bl-column-cta-ttl::before {
  width: 50px;
  aspect-ratio: 1;
  content: "";
  background-image: url("../images/column/column-cta-ttl-deco.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.bl-column-cta-txt {
  margin-bottom: 32px;
}
@media (width >= 751px) {
  .bl-column-cta-txt {
    text-align: center;
  }
}
.bl-column-cta .c-btn {
  margin-inline: auto;
}