/* =======================================================
brand
======================================================= */
.p-brand {
  position: relative;
  padding: calc(79/16 * 1rem) 0 calc(95/16 * 1rem);
  background-color: var(--color-brightest);
}
.p-brand__ttl {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1px;
  margin-bottom: 2rem;
  font-size: 1.2em;
  font-weight: 700;
  color: var(--color-brightest);
}
.p-brand__ttl::before, .p-brand__ttl::after {
  width: 0.75em;
  content: "";
  background-color: #ae000d;
}
.p-brand__ttl-inner {
  --_padding-block: 0.5em;
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
  padding-left: 1em;
  background-color: #333;
}
.p-brand__subttl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  margin-bottom: 4rem;
  font-size: 1.1em;
  font-weight: 700;
}
.p-brand__subttl::before {
  width: 0.5em;
  content: "";
  background-color: #343434;
}
.p-brand__subttl-inner {
  --_padding-block: 0.25em;
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
}
.p-brand__bnr-wrapper {
  display: grid;
  gap: calc(31/16 * 1rem) calc(26/16 * 1rem);
  margin-inline: auto;
  margin-bottom: calc(61/16 * 1rem);
}
@media (width >= 768px) {
  .p-brand__bnr-wrapper {
    grid-template-columns: repeat(3, 1fr);
    max-width: 90%;
  }
}
@media (width <= 767px) {
  .p-brand__bnr-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-brand__bnr:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .p-brand__bnr:hover {
    opacity: 0.7;
  }
}
.p-brand__btn-wrapper {
  display: grid;
  gap: 0.5em;
  align-items: center;
  margin-inline: auto;
}
@media (width >= 768px) {
  .p-brand__btn-wrapper {
    grid-template-columns: repeat(4, 1fr);
    max-width: 90%;
  }
}
@media (width <= 767px) {
  .p-brand__btn-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
  }
}
.p-brand__btn {
  --_padding-block: 0.5em;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 100%;
  padding-block: calc(var(--_padding-block) - var(--font-base-offset-top)) calc(var(--_padding-block) + var(--font-base-offset-top));
  padding-inline: 1em;
  font-weight: 700;
  text-align: center;
  border: 1px solid #f4f3f4;
  border-radius: 8px;
  gap: 0.25em;
}
@media (width <= 767px) {
  .p-brand__btn {
    border-width: 2px;
    --_padding-block: 1em;
  }
}
.p-brand__btn:focus-visible {
  color: var(--color-brightest);
  background-color: #333;
}
.p-brand__btn:focus-visible::after {
  border-color: var(--color-brightest);
}
@media (any-hover: hover) {
  .p-brand__btn:hover {
    color: var(--color-brightest);
    background-color: #333;
  }
  .p-brand__btn:hover::after {
    border-color: var(--color-brightest);
  }
}
.p-brand__btn::before, .p-brand__btn::after {
  content: "";
}
.p-brand__btn::after {
  align-self: center;
  width: 6px;
  height: 6px;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  rotate: 45deg;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration);
  transition-property: border-color;
  will-change: border-color;
}