/* FV START */
canvas {
  position: absolute;
  content: "";
  top: 0;
  inset: 0;
  width: 100%;
  display: block;
  z-index: -1;
}

.link {
  position: relative;
}

.link::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-size: contain;
  background-image: url(../images/ground.png);
  background-repeat: no-repeat;
  background-position: bottom;
  z-index: -1;
}

ul.link__list--pc {
  display: flex;
  justify-content: space-between;
}

li.link__list--item {
  width: calc((100% - var(--space-16)) / 3);
  text-align: center;
  transition: transform 0.3s ease;
}

.link__list--item .item-img img {
  transition: transform 0.3s ease;
  /* 拡大アニメーション */
}

.top__link--btn {
  display: inline-block;
  position: relative;
  color: var(--color-neutral-black);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  padding-block: var(--space-24);
  padding-inline: var(--space-32) var(--space-56);
  background-color: var(--color-background-base);
  border: solid 1px var(--color-neutral-black);
  border-radius: var(--radius-full);
  transition: 0.3s;
  cursor: pointer;
}

.top__link--btn::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: var(--space-24);
  height: var(--space-24);
  background-color: var(--color-neutral-black);
  -webkit-mask: url(../images/icon/arrow.svg) no-repeat center / contain;
  mask: url(../images/icon/arrow.svg) no-repeat center / contain;
  top: 50%;
  right: 5%;
  transform: translate(-5%, -50%);
  transition: 0.3s;
}

.top__link--btn:hover {
  color: var(--color-neutral-white);
  background-color: var(--color-primary-main);
  transition: 0.3s;
}

.top__link--btn:hover::after {
  background-color: var(--color-neutral-white);
  transition: 0.3s;
}

/* .link__list--item a.top__link--btn:hover+.item-img img,
.link__list--item a.top__link--btn:hover~.item-img img,
.link__list--item:hover .item-img img {
    transform: scale(1.1);
} */
@media (hover: hover) and (pointer: fine) {
  .link__list--item:hover .item-img img {
    transform: scale(1.1);
  }

  .top__link--btn:hover {
    color: var(--color-neutral-white);
    background-color: var(--color-primary-main);
  }

  .top__link--btn:hover::after {
    background-color: var(--color-neutral-white);
  }
}

ul.link__list--sp {
  display: none;
}

@media screen and (max-width: 1200px) {
  .top__link--btn {
    font-size: var(--font-size-md);
    padding-inline: var(--space-24) var(--space-48);
  }
}

@media screen and (max-width: 1000px) {
  section.main {
    width: 96%;
    padding-top: var(--space-80);
  }

  .top__link--btn.pc {
    display: none;
  }

  .link {
    overflow-x: hidden;
  }

  .link::before {
    content: none;
  }

  ul.link__list--pc {
    padding-bottom: var(--space-16);
    margin-bottom: var(--space-24);
    position: relative;
    width: 115%;
    left: 50%;
    transform: translate(-50%, 0);
  }

  ul.link__list--pc::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-size: contain;
    background-image: url(../images/ground.png);
    background-repeat: no-repeat;
    background-position: bottom;
    z-index: -1;
  }

  ul.link__list--sp {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    width: 90%;
    margin: 0 auto;
  }

  ul.link__list--pc li.link__list--item {
    width: calc(100% / 3);
  }

  ul.link__list--sp li.link__list--item {
    width: 100%;
    margin-bottom: var(--space-24);
  }

  ul.link__list--sp li.link__list--item .top__link--btn {
    padding-block: var(--space-16);
    width: 100%;
    pointer-events: auto;
  }
}

/* FV END */