.wrapper {
  overflow: hidden;
}

.splide__track {
  overflow: visible;
}

@media (width >= 768px) {
  .splide.is-initialized:not(.is-active) .splide__list {
    display: flex;
  }
}
@media (width < 768px) {
  .card-slider {
    margin: 0 -1rem;
  }

}

.splide__slide[aria-hidden=true] {
  display: block;
}

/*
* hero
*/

.hero {
  min-height: 31.75rem;
  position: relative;
  &::before {
    content: "";
    display: block;
    padding-top: 34.7945%;
  }
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(../images/index/bg-hero.svg) no-repeat center top / cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  &.is-active {
    &::after {
      opacity: 1;
      transition: opacity .5s 1.8s;
    }
    & .hero-vector {
      opacity: 1;
    }

    & .hero-headline {
      opacity: 1;
    }

    & .hero-lead {
      opacity: 1;
    }
  }
}

.hero-illust {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-vector {
  width: 105.8219%;
  min-width: 1545px;
  opacity: 0;
  position: absolute;
  top: -22.2441%;
  left: -172px;
  transition: opacity 1s;
  & svg {
    width: 100%;
    filter: drop-shadow(50px 30px 20px rgba(204, 204, 207, 0.15));
  }
}

.hero-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 79rem;
  gap: 1.625rem;
  padding: 0 2.4375rem max(8.2192%, 7.5rem);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: 1;
}

.hero-headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8844rem;
  line-height: 0;
  opacity: 0;
  transition: opacity .5s .5s;
}

.hero-headline-subcopy {
  font-size: 1.3303rem;
  line-height: 1.7;
  color: #B5B5CB;
  mix-blend-mode: multiply;
  margin: 0 0 0 .46rem;
}

.hero-lead {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--secondary-color);
  margin: 0 0 0 .375rem;
  opacity: 0;
  transition: opacity .5s .5s;
}

@media (width >= 1460px) {
  .hero-vector {
    left: -11.78082%;
  }
}

@media (width < 992px) {
  .hero {
    position: relative;
  }

  .hero-vector {
    width: 185%;
    min-width: inherit;
    top: -10.6963vw;
    left: auto;
    right: -47%;
  }

  .hero-lead {
    max-width: 600px;
    & br {
      display: none;
    }
  }
}

@media (width < 768px) {
  .hero {
    min-height: inherit;
    &::before {
      display: none;
    }
  }

  .hero-vector {
    width: 460%;
    max-width: 1794px;
    min-width: inherit;
    top: max(-31.7949vw, -7.75rem);
    left: auto;
    right: max(-143.5897%, -35rem)
  }

  .hero-container {
    padding: 4rem 0 2rem;
    max-width: 424px;
    min-height: 380px;
    position: relative;
  }

  .hero-headline {
    gap: 1.1581rem;
  }

  .hero-headline-subcopy {
    font-size: 0.8625rem;
  }
}

/*
* news
*/
.news {
  padding: 0 2rem 7.25rem;
  margin-top: -3.125rem;
  position: relative;
  overflow: hidden;
}

.news-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

/* 重要なお知らせ */
.notice {
  margin-bottom: -2rem;
}
.notice-link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.875rem 3.8125rem 1.875rem 1.875rem;
  background: #fff url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"><path d="M1.5 1L8.5 7.5L1.5 14" stroke="%23E11C45" stroke-width="2"/></svg>') no-repeat right 2rem center;
  border-radius: 0.5rem;
  border: 2px solid var(--attention-color);
  color: var(--attention-color);
  font-size: 1.125rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.5;
}

.notice-date {
  font-size: var(--font-size-s);
  color: #56565B;
  line-height: 1.2;
}

/* ニュース一覧 */
.news-bar-top {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 3.75rem;
  padding: 5.875rem 14rem 0 0;
}

.news-tab-list {
  display: flex;
  gap: 1rem;
}

.news-tab-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  height: 3.75rem;
  padding: 0.375rem 1.9375rem 0.4375rem 1.9375rem;
  border-radius: 2.875rem;
  border: solid 1px transparent;
  color: var(--secondary-color);
  font-weight: 700;
  font-variation-settings: "wght" 700;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    width: 0.5625rem;
    height: 0.5625rem;
    background: #CCCCCF;
    border-radius: 50%;
  }

  &[aria-selected=true] {
    background: var(--primary-color);
    color: #fff;
    pointer-events: none;
    &::before {
      background: #fff;
    }
  }
}

.news-link {
  margin: 0 0 0 auto;
  padding: .84rem 1.06rem;
  position: absolute;
  top: 6.875rem;
  right: 0;
}

.news-panel {
  padding: 0 0 2rem;
}

.news-panel-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-panel-link {
  --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"><path d="M1.5 1L8.5 7.5L1.5 14" stroke="%23808088" stroke-width="2"/></svg>');
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 2rem 3.94rem 2rem 2rem;
  background: #fff;
  border-radius: 0.5rem;
  box-shadow: var(--shadow);
  font-size: 1.125rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.2;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: var(--arrow-chevron), var(--arrow-chevron);
    background-repeat: no-repeat;
    background-position: left -2rem center, center center;
    background-size: 10px 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.6875rem;
    margin: auto;
  }
}

.news-panel-date {
  font-size: var(--font-size-s);
  color: var(--secondary-color);
  line-height: 1.2;
}

.news-bg {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  line-height: 0;
}

.news-bg-image {
  height: 23.4375rem;
  position: relative;
  & img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

@media (width >= 992px) {
  .news-tab-button {
    transition: .3s;
    &::before {
      transition: .3s;
    }
    &:hover {
      color: var(--primary-color);
      border-color: var(--primary-color);
      &::before {
        background: var(--primary-color);
      }
    }
  }
  .news-panel-link {
    transition: .3s;
    &:hover {
      --shadow: 0px 3px 25px 0px rgba(0,0,0,.15);
      --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"><path d="M1.5 1L8.5 7.5L1.5 14" stroke="%23f57" stroke-width="2"/></svg>');
      color: var(--primary-color);
      &::after {
        background-position: center center, right -2rem center;
        transition: .3s;
      }
    }
  }
}

@media (width < 992px) {
  .news-bar-top {
    padding-right: 0;
  }
  .news-tab-list {
    width: 100%;
  }
}

@media (width < 768px) {
  .news {
    padding: 4rem 0 7.25rem;
    margin-top: 0;
  }
  .news-bar-top {
    flex-direction: column;
    align-items: center;
    gap: 1.75rem;
    text-align: center;
  }

  .news-link {
    margin: .5rem auto 0;
    position: static;
  }

  .news-tab-list {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 2.2346%;
  }

  .news-tab-button {
    height: auto;
    padding: .5rem 0.5rem .5625rem 0.5rem;
    font-size: var(--font-size-s);
  }

  .news-panel {
    padding-bottom: 0;
  }

  .news-bg {
    height: 17.31rem;
    overflow: hidden;
  }
}

/*
* service
*/

.service {
  position: relative;
  &::before {
    content: "";
    display: block;
    width: 4696px;
    height: 2478px;
    background: url(../images/index/bg-service.svg) no-repeat center center / cover;
    position: absolute;
    top: -400px;
    left: 50%;
    transform: translateX(-50%);
    margin-left: -400px;
  }
}

.service-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.section-content-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}

.service-lead {
  line-height: 2;
  color: #6D6D75;
}

.service-card {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem 2%;
}

.service-card-item {
  flex: 1;
  max-width: 24rem;
  min-width: 18.5rem;
}

.service-card-link {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: solid 1px #fff;
  border-radius: .5rem;
  box-shadow: var(--shadow);
  padding: 2.25rem 2rem 2rem;
  height: 100%;
  &::after {
    margin: auto 0 0 auto;
  }
}

.service-koukaryoku-link {
  padding: 2.125rem 1.875rem 1.875rem;
  border-width: 2px;
}

.service-card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.875rem;
  margin: 0 0 .6875rem;
}

.service-card-text {
  color: #6D6D75;
  margin: 0 0 2.25rem;
  text-align: center;
}

.service-top {
  padding: 5rem 2rem 4.25rem;
  position: relative;
}

.service-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-top-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 1.5rem;
}

.service-top-desc {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.service-top-button {
  width: 16.5625rem;
}

.service-top-figure {
  width: 31.5625rem;
  line-height: 0;
  box-shadow: 0px 21px 42px 0px rgba(0,0,0,.15);
  border-radius: 0.5rem;
}

.service-initiative-heading {
  font-size: 1.0625rem;
  color: #6D6D75;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 2.35;
  margin: 0 0 .94rem;
}

.service-initiative-list {
  margin: 0 0 1.5rem;
}

.service-initiative-link {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 0.5rem;
  overflow: hidden;
  padding-bottom: 4.125rem;
  position: relative;
}

.service-initiative-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 2rem 0 1.5625rem;
  & svg {
    width: 6.25rem;
  }
}

.service-initiative-text {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 4.125rem;
  gap: .44rem;
  padding: 0 1.5rem;
  background: rgba(75, 75, 79, 0.90);
  color: #fff;
  line-height: 1.7;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .5s;

  & sup {
    font-size: var(--font-size-s);
  }

}

.service-initiative-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  flex-shrink: 0;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
  & span {
    flex: 1;
  }
  &::after {
    content: "";
    display: block;
    width: 10px;
    height: 16px;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16" fill="none"><path d="M1 1.5L8 8L1 14.5" stroke="white" stroke-width="2"/></svg>') no-repeat center center;
    background-size: 100% 100%;
  }
}

.service-middle {
  background: rgba(75, 75, 79, 0.7);
  padding: 3.5625rem 2rem 4.25rem;
  position: relative;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #1e1e1e;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.595
  }
  & .service-card-logo {
    & img {
      max-width: 204px;
    }
  }
  > * {
    position: relative;
    z-index: 1;
  }
}

.service-middle-head {
  color: #fff;

  & .headline {
    font-feature-settings: "palt";
  }

  & .service-lead {
    color: #fff;
  }
}

.service-bottom {
  padding: 3.875rem 2rem 5rem;
  position: relative;
}

.service-bottom-container {
  gap: 3.5rem
}

.service-bottom-button {
  align-self: center;
  width: 16.5625rem;
}

@media (width >= 992px) {
  .service-initiative-link {
    &:hover {
      .service-initiative-text {
        height: 100%;
        padding: .97rem 1.56rem;
      }

      .service-initiative-title {
        height: 4.375rem;
      }
    }
  }

  .service-card-link {
    transition: border .5s, box-shadow .5s;
    &:hover {
      --shadow: 0px 3px 25px 0px rgba(0,0,0,.15);
    }
  }

  .service-koukaryoku-link {
    &:hover {
      border-color: #6C6A6A;
    }
  }

  .service-rs-link {
    &:hover {
      border-color: var(--primary-color);
    }
  }

  .service-vps-link {
    &:hover {
      border-color: #0E9794;
    }
  }

  .service-server-link {
    &:hover {
      border-color: #3783E4;
    }
  }

}

@media (width < 768px) {
  .service {
    position: relative;
    &::before {
      width: 4696px;
      height: 2478px;
      top: -390px;
      left: 82%;
    }
  }
  .service-top {
    padding: 5rem 0 3.84rem;
  }

  .service-top-row {
    flex-direction: column-reverse;
    gap: 1.5rem;
  }

  .service-top-figure {
    width: 100%;
  }

  .service-top-button {
    width: 100%;
    gap: 0;
  }

  .service-card {
    flex-direction: column;
  }

  .service-card-item {
    max-width: 100%;
    min-width: inherit;
  }

  .service-card-link {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .service-card-logo {
    width: 100%;
  }

  .service-card-text {
    margin: 0;
    flex: 1;
  }

  .service-middle {
    padding: 3.91rem 0 3.5rem;
  }

  .service-bottom {
    padding: 2rem 0 5rem;
  }

  .service-bottom-button {
    width: 100%;
  }
}

/* セミナーイベント・キャンペーン共通 */
.informarion-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: .3s;
}

.informarion-figure {
  line-height: 0;
  overflow: hidden;
  background: #000;
  position: relative;
  &::before {
    content: "";
    display: block;
    padding-top: 52.3333%;
  }
  & img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s;
    position: absolute;
    top: 0;
  }
}

.informarion-text {
  flex: 1;
  padding: 1.25rem 15.625% 3.125rem 6.25%;
  line-height: 1.7;
  position: relative;
  &::after {
    --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.21973 1.06641L8.33354 7.29099L1.21973 13.5156" stroke="%23808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--arrow-chevron) no-repeat left -1.25rem center, var(--arrow-chevron) no-repeat center center;
    background-size: 10px 15px;
    position: absolute;
    bottom: 1.5rem;
    right: 6.25%;
  }
}

.informarion-date {
  line-height: 1.7;
  & span {
    font-weight: 700;
    font-variation-settings: "wght" 700;
  }
}

.informarion-date-num {
  font-size: 1.5rem;
}

.informarion-title {
  font-size: var(--font-size-s);
  font-weight: 400;
  font-variation-settings: "wght" 400;
}

@media (width >= 992px) {
  .informarion-link {
    &:hover {
      --shadow: 0px 3px 25px 0px rgba(0,0,0,.15);
      & .informarion-figure {
        & img {
          opacity: .95;
          transform: scale(1.05);
        }
      }
      & .informarion-text {
        &::after {
          --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.21973 1.06641L8.33354 7.29099L1.21973 13.5156" stroke="%23f57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
          background-position: center center, right -1.25rem center;
          transition: .3s;
        }
      }
    }
  }
}

@media (width >= 768px) {
  .informarion-card {
    flex-wrap: wrap;
    gap: 1.5rem 2%;
  }

  .informarion-item {
    width: 32%;
    max-width: 24rem;
  }
}

/* 導入事例 */
.case-layout {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
}

.case-headline {
  grid-column: 1 / 2;
}

.case-tab {
  grid-row: 2 / 2;
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.case-tab-list {
  display: flex;
  gap: 1rem;
}

.case-tab-item {
  flex: 1;
}

.case-tab-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 6.875rem;
  background: #fff;
  border-radius: 0.5rem;
  border: 1px solid #CCCCCF;
  cursor: pointer;
  padding: 1rem;
  &[aria-selected="true"] {
    border: 2px solid var(--primary-color);
    pointer-events: none;
  }
}

.case-tab-logo {
  max-width: 11.25rem;
  line-height: 0;
  & img {
    max-width: 100%;
    height: auto;
  }
}

.case-panel-item {
  &:not([hidden]) {
    animation: showPanel .5s ease forwards;
  }
}

.case-panel-content {
  display: flex;
  gap: 2.5rem;
  background: #fff;
  border-radius: 0.5rem;
  padding: 2rem 2.5rem;
}

.case-panel-figure {
  flex-shrink: 0;
  width: 49.6429%;
  line-height: 0;
  overflow: hidden;

  & img {
    transition: .3s;
  }
}

.case-panel-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem 0 0;
}

.case-panel-company {
  font-size: var(--font-size-s);
  line-height: 1.2;
  color: var(--color-gray-9);
  margin: 0 0 1rem;
}

.case-panel-title {
  font-size: 1.25rem;
  font-weight: 500;
  font-variation-settings: "wght" 500;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0 0 2rem;
}

.case-panel-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 2rem;
  & dt {
    font-size: var(--font-size-s);
  }
  & dd {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

.case-panel-tag {
  font-size: var(--font-size-s);
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.2;
  padding: 0.5rem 1.5rem;
  background: #F4F4FA;
  border-radius: 0.1875rem;
}

.case-panel-link {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
  font-weight: 600;
  font-variation-settings: "wght" 600;

  &::after {
    --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"><path d="M1 1L8 7.5L1 14" stroke="%23262629" stroke-width="2"/></svg>');
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--arrow-chevron) no-repeat left -1.25rem center, var(--arrow-chevron) no-repeat center center;
    background-size: 10px 15px;
  }
}

@keyframes showPanel {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (width >= 992px) {
  .case-tab-button {
    &:hover {
      border: 1px solid var(--primary-color);
      transition: border .3s;
    }
  }

  .case-panel-content {
    transition: .3s;
    &:hover {
      --shadow: 0px 3px 25px 0px rgba(0,0,0,.15);
      box-shadow: var(--shadow);
      & .case-panel-figure {
        & img {
          transform: scale(1.05);
        }
      }
      & .case-panel-link {
        &::after {
          background-position: center center, right -1.25rem center;
          transition: .3s;
        }
      }
    }
  }
}

@media (width < 768px) {
  .case-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .case-head {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }

  .case-tab {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .case-tab-list {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 0;
  }

  .case-tab-button {
    flex: 0 1 auto;
    width: 47.7654%;
    height: 5.25rem;
  }

  .case-tab-logo {
    max-width: 9rem;
  }

  .case-panel {
    margin: 0 -1rem;
  }

  .case-panel-content {
    flex-direction: column;
    gap: 2rem;
    border-radius: 0;
    padding: 1.5rem;
  }

  .case-panel-figure {
    width: 100%;
  }

  .case-panel-title {
    margin: 0 0 1.5rem;
  }

  .case-panel-tags {
    margin: 0 0 1rem;
  }
}

.document-layout {
  display: grid;
  grid-template-columns: 23rem 1fr;
  grid-template-rows: auto;
  gap: 2.5rem;
}

.document-slider {
  grid-column: 2 / 2;
  grid-row: 1 / 4;
}

.document-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: .5rem;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: .3s;
}

.document-figure {
  overflow: hidden;
  & img {
    transition: .3s;
  }
}

.document-text {
  padding: 1.06rem 2.56rem 1.19rem 1.5rem;
  text-align: center;
  position: relative;
  &::after {
    --arrow-chevron: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" viewBox="0 0 10 15" fill="none"><path d="M1 1L8 7.5L1 14" stroke="%23262629" stroke-width="2"/></svg>');
    content: "";
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--arrow-chevron) no-repeat left -1.25rem center, var(--arrow-chevron) no-repeat center center;
    background-size: 10px 15px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1.5rem;
    margin: auto;
  }
}

.document-title {
  font-weight: 500;
  font-variation-settings: "wght" 500;
  line-height: 1.7;
}

@media (width >= 768px) {
  .document-slider {
    flex: 1;
  }
  .document-card {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem 0;
    min-width: 520px;
  }

  .document-item {
    width: 48.4848%;
  }

  .document-head {
    width: 23rem;
  }
}

@media (width >= 992px) {
  .document-link {
    &:hover {
      --shadow: 0px 3px 25px 0px rgba(0,0,0,.15);
      & .document-figure {
        & img {
          transform: scale(1.05);
        }
      }
      & .document-text {
        &::after {
          background-position: center center, right -1.25rem center;
          transition: .3s;
        }
      }
    }
  }
}
@media (width < 992px) {
  .document-layout {
    grid-template-columns: 1fr auto;
  }
  .document-slider {
    grid-column: 1 / span 2;
    grid-row: 2 / 2;
  }
}
@media (width < 768px) {
  .document-layout {
    display: flex;
    flex-direction: column;
    & .link {
      align-self: center;
    }
  }
  .document-text {
    padding: .85rem 2.11rem .99rem 1.23rem;
    &::after {
      right: .875rem;
    }
  }
}

.pickup-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pickup-link {
  display: block;
  line-height: 1;
}

@media (width >= 992px) {
  .pickup-link {
    transition: opacity .3s;
    &:hover {
      opacity: .8;
    }
  }
}