@media screen and (min-width: 768px) {
  .header--follow {
    overflow: hidden;
  }
  .header--follow .header__logo {
    position: relative;
    top: -80px;
    transition: top 0.5s ease-out;
  }
  .header--follow.js-scroll .header__logo {
    top: 0;
  }
  .page-top .wrapper {
    padding-top: 40px;
    padding-inline: 5.29%;
  }
  .page-top .contents__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.32vw;
  }
  .page-top .contents__item {
    background-color: #F3F3F3;
    aspect-ratio: 1/1;
  }
  .page-top .contents__item-link {
    display: grid;
    place-content: center;
    position: relative;
    aspect-ratio: 1/1;
    padding: 1.32vw;
    transition: background-color 0.5s ease-out;
  }
  .page-top .contents__item-imgbox {
    position: relative;
  }
  .page-top .contents__item-imgbox img {
    transition: opacity 0.5s ease-out;
  }
  .page-top .contents__item-info {
    display: grid;
    place-content: center;
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    padding: 1.8518518519vw;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-out;
  }
  .page-top .contents__item-info__name {
    position: relative;
    top: 130%;
    font-size: 1.1904761905vw;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transition: top 0.5s ease-out;
  }
  .page-top .contents__item-info__name span {
    display: block;
    position: relative;
    top: -100%;
    width: 100%;
    transition: top 0.5s ease-out;
  }
  .page-top .contents__item-info__client {
    position: relative;
    top: 101%;
    margin-top: 0.3306878307vw;
    height: 100%;
    min-height: 0.8597883598vw;
    font-size: 0.8597883598vw;
    letter-spacing: 0.1em;
    text-align: center;
    color: #fff;
    overflow: hidden;
    transition: top 0.5s ease-out;
  }
  .page-top .contents__item-info__client span {
    position: relative;
    top: -100%;
    transition: top 0.5s ease-out;
  }
  .page-top .contents__item-info__icon {
    position: relative;
    margin-top: 0.6613756614vw;
    margin-inline: auto;
    width: 0.9920634921vw;
    height: 0.9920634921vw;
    border-radius: 50%;
    background-color: #fff;
    transition: width 0.5s ease-out, height 0.5s ease-out;
  }
  .page-top .contents__item-info__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.7936507937vw;
    height: 0.7936507937vw;
    background-image: url("../images/icon_arrow.svg");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    translate: -180% -50%;
    transition: translate cubic-bezier(0.16, 1, 0.3, 1) 0.8s, opacity ease-out 0.2s;
    transition-delay: 0.35s;
  }
  .page-top .contents__item--cat {
    display: grid;
    place-content: center;
    position: relative;
    padding: 1.32vw;
    font-family: "Sulphur Point", sans-serif;
    font-size: 2.112vw;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .page-top .contents__item--cat .contents__item-ttl {
    position: relative;
  }
  .page-top .contents__item--cat .contents__item-ttl::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1.8vw;
    left: 50%;
    translate: -50% 0;
    width: 0.4vw;
    height: 0.4vw;
    border-radius: 50%;
    background-color: #009A4A;
  }
  .page-top .contents__item--project img {
    max-width: 18.52vw;
    max-height: 18.52vw;
  }
  .page-top .contents__item-link:hover {
    background-color: #009A4A;
  }
  .page-top .contents__item-link:hover .contents__item-imgbox::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 154, 74, 0.6);
    mix-blend-mode: multiply;
  }
  .page-top .contents__item-link:hover .contents__item-imgbox img {
    opacity: 0.5;
  }
  .page-top .contents__item-link:hover .contents__item-info {
    opacity: 1;
  }
  .page-top .contents__item-link:hover .contents__item-info__name {
    top: 0;
  }
  .page-top .contents__item-link:hover .contents__item-info__name span {
    top: 0;
  }
  .page-top .contents__item-link:hover .contents__item-info__client {
    top: 0;
  }
  .page-top .contents__item-link:hover .contents__item-info__client span {
    top: 0;
  }
  .page-top .contents__item-link:hover .contents__item-info__icon {
    width: max(2.380952381vw, 36px);
    height: max(2.3148148148vw, 35px);
  }
  .page-top .contents__item-link:hover .contents__item-info__arrow {
    opacity: 1;
    translate: -50% -50%;
  }
  .page-top .bottom {
    margin-top: 100px;
  }
  .page-top .band {
    margin-top: 80px;
  }
  .page-top .footer {
    margin-top: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
  .page-top .contents__list {
    grid-template-columns: repeat(3, 1fr);
  }
  .page-top .contents__item-info__name {
    font-size: 1.7857142857vw;
  }
  .page-top .contents__item-info__client {
    margin-top: 0.9920634921vw;
    min-height: 1.2896825397vw;
    font-size: 1.2896825397vw;
  }
  .page-top .contents__item-info__icon {
    margin-top: 1.3227513228vw;
    width: 2.9761904762vw;
    height: 2.9761904762vw;
  }
  .page-top .contents__item-info__arrow {
    width: 1.1904761905vw;
    height: 1.1904761905vw;
  }
  .page-top .contents__item--project img {
    max-width: 26.26vw;
    max-height: 26.26vw;
  }
  .page-top .contents__item--cat {
    font-size: 2.7vw;
  }
}
@media screen and (max-width: 767px) {
  .header--follow {
    overflow: hidden;
  }
  .header--follow .header__logo {
    position: relative;
    top: -17.9487179487vw;
    transition: top 0.5s ease-out;
  }
  .header--follow.js-scroll .header__logo {
    top: 0;
  }
  .page-top .wrapper {
    padding-top: 19.7435897436vw;
    padding-inline: 5.1282051282vw;
  }
  .page-top .contents__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5641025641vw;
  }
  .page-top .contents__item {
    display: grid;
    place-content: center;
    background-color: #F3F3F3;
  }
  .page-top .contents__item-link {
    display: grid;
    place-content: center;
    padding: 2.5641025641vw;
    aspect-ratio: 150/145;
  }
  .page-top .contents__item-info {
    display: none;
  }
  .page-top .contents__item--cat {
    position: relative;
    padding: 5.1282051282vw;
    font-family: "Sulphur Point", sans-serif;
    font-size: 5.1282051282vw;
    letter-spacing: 0.02em;
    text-align: center;
  }
  .page-top .contents__item--cat .contents__item-ttl {
    position: relative;
    top: -1.5384615385vw;
  }
  .page-top .contents__item--cat .contents__item-ttl::after {
    content: "";
    display: block;
    position: absolute;
    bottom: -5.5vw;
    left: 50%;
    translate: -50% 0;
    width: 1.5384615385vw;
    height: 1.5384615385vw;
    border-radius: 50%;
    background-color: #009A4A;
  }
  .page-top .contents__item--project img {
    max-width: 38.4615384615vw;
    max-height: 37.1794871795vw;
  }
  .page-top .bottom {
    margin-top: 20.5128205128vw;
  }
  .page-top .band {
    margin-top: 20.5128205128vw;
  }
  .page-top .footer {
    margin-top: 12.8205128205vw;
  }
}/*# sourceMappingURL=top.css.map */