@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

.sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* フェードイン(初期値) */
.fadein {
  opacity: 0;
  /* 最初は非表示 */
  transform: translateY(30px);
  /* 下に30pxの位置から */
  transition: opacity 0.8s, transform 0.8s;
  /* 透過率と縦方向の移動を0.8秒 */
}

/* フェードイン(スクロールした後) */
.fadein.is-inview {
  opacity: 1;
  /* 表示領域に入ったら表示 */
  transform: translateY(0);
  /* 30px上に移動する */
  transition-delay: 0.5s;
  /* フェード開始を0.5秒遅らせる */
}

header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 99;
}
header .header_top {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #C9C9C9;
  height: 110px;
  position: relative;
}
header .header_top h1 {
  font-size: 1.6rem;
  text-align: center;
}
header .header_top .header_logo {
  position: absolute;
  top: 20px;
  left: 50px;
  width: 58px;
  height: 68px;
}
header .header_top .header_logo img {
  width: 100%;
  height: 100%;
}
header nav {
  display: flex;
  justify-content: center;
}

footer {
  padding: 40px 0;
  position: relative;
  background: rgba(0, 0, 0, 0.7);
}
footer .copy {
  text-align: center;
  font-size: 1.1rem;
  font-family: "SUSE", sans-serif;
  color: #fff;
}

.home h2 {
  font-family: "Anton", sans-serif;
  font-size: 8.5rem;
  letter-spacing: 5px;
  color: transparent;
  -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color: #fff;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .home h2 {
    font-size: 7.2rem;
    -webkit-text-stroke-width: 0.5px;
  }
}
.home .work {
  padding-top: 300px;
}
.home .work .inner {
  max-width: 1070px;
  margin: 0 auto;
}
.home .work .work_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px 20px;
}
.home .work .work_list .work_item a .img {
  position: relative;
}
.home .work .work_list .work_item a .img::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
}
.home .work .work_list .work_item a .img img {
  width: 100%;
  height: auto;
}
.home .work .work_list .work_item a .text_area .tags {
  margin-top: 10px;
  margin-right: 20px;
}
.home .work .work_list .work_item a .text_area .tags .tags_list {
  font-size: 1.3rem;
  color: #000;
}
.home .work .work_list .work_item a:hover, .home .work .work_list .work_item a:hover * {
  opacity: 1;
}
.home .work .work_list .work_item a:hover .img, .home .work .work_list .work_item a:hover * .img {
  transition: 0.5s;
}
.home .work .work_list .work_item a:hover .img::before, .home .work .work_list .work_item a:hover * .img::before {
  opacity: 0.3;
}
@media screen and (max-width: 768px) {
  .home .work {
    padding-top: 150px;
  }
  .home .work h2 {
    margin-bottom: 70px;
  }
  .home .work .inner {
    width: 90%;
  }
  .home .work .work_list .work_item {
    margin-bottom: 70px;
  }
  .home .work .work_list .work_item a {
    flex-direction: column;
  }
  .home .work .work_list .work_item a .img {
    width: 100%;
  }
  .home .work .work_list .work_item a .text_area {
    width: 100%;
    margin-left: 0;
    margin-top: 20px;
  }
  .home .work .work_list .work_item a .text_area h3 {
    font-size: 2rem;
  }
  .home .work .work_list .work_item a .text_area .tags {
    margin-top: 15px;
  }
}/*# sourceMappingURL=style.css.map */