@charset "UTF-8";

.about {
  width: 100%;
  padding: var(--sp-spacing-16) 0 var(--sp-spacing-40);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column
}

@media (min-width: 961px) {
  .about {
    padding: var(--sp-spacing-24) 0 var(--sp-spacing-64)
  }
}

.about__head {
  padding-bottom: var(--sp-spacing-20);
  font-size: 32px;
  line-height: 125%;
  font-weight: 600
}

@media (min-width: 961px) {
  .about__head {
    padding-bottom: var(--sp-spacing-24);
    font-size: 40px;
    line-height: 100%;
    font-weight: 600
  }
}

.about__read {
  padding-bottom: var(--sp-spacing-24);
  font-size: 16px;
  line-height: 150%;
  font-weight: 400;
  color: var(--clr-text-sub)
}

.about__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: var(--sp-spacing-24)
}

.about__link-inner {
  padding-top: var(--sp-spacing-40);
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--sp-spacing-40) var(--sp-spacing-64)
}

@media (min-width: 961px) {
  .about__link-inner {
    grid-template-columns: repeat(2, 1fr)
  }
}

.about__link {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start
}

@media (min-width: 961px) {
  .about__link:hover .text-link {
    color: var(--clr-text-red)
  }

  .about__link:hover .text-link:after {
    background: var(--clr-text-red)
  }

  .about__link:hover .about__link-image img {
    width: 110%;
    height: 110%
  }
}

.about__link .text-link {
  gap: var(--sp-spacing-10)
}

.about__link-image {
  width: 100%;
  height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: var(--rd-radius-Lv1);
  overflow: hidden
}

.about__link-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover
}