@charset "UTF-8";
/* CSS Document */
/* 基本設定 */
/* 初期設定 */
/* ----------------------------------------------------------------------
aboutArea
---------------------------------------------------------------------- */
.worksArea {
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 500;
}
@media screen and (max-width: 520px) {
  .worksArea {
    font-size: 2rem;
    padding: 14rem 0 0;
  }
}

#worksArchive {
  padding: 17rem 0 0;
}
@media screen and (max-width: 520px) {
  #worksArchive {
    padding: 14rem 0 0;
  }
}
#worksArchive .inner {
  max-width: 120rem;
}
#worksArchive .inner .navList {
  font-size: 58.33%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 1em;
  margin-bottom: 4em;
}
#worksArchive .inner .navList > li a {
  display: block;
  color: #a2a8b0;
  padding: 0.5em 2em;
  border-radius: 999px;
  border: 1px solid #a2a8b0;
}
#worksArchive .inner .worksList {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: stretch;
  gap: 2em 1.5em;
}
#worksArchive .inner .worksList > li {
  width: calc((100% - 3em) / 3);
}
@media screen and (max-width: 520px) {
  #worksArchive .inner .worksList > li {
    width: 100%;
  }
}
#worksArchive .inner .worksList > li a {
  display: block;
}
#worksArchive .inner .worksList > li a .imgBox {
  width: 100%;
  aspect-ratio: 1;
  background-color: #f3f3f3;
  margin-bottom: 0.5em;
}
#worksArchive .inner .worksList > li a .imgBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-fit: contain;
}
#worksArchive .inner .worksList > li a .txtBox > p {
  font-size: 50%;
}
@media screen and (max-width: 520px) {
  #worksArchive .inner .worksList > li a .txtBox > p {
    font-size: 60%;
    margin-top: 0.1em;
  }
}

#worksSingle {
  padding: 18.2rem 0 0;
}
@media screen and (max-width: 520px) {
  #worksSingle {
    padding: 9rem 0 0;
  }
}
#worksSingle .mv {
  width: 100%;
}
#worksSingle .inner {
  padding: 8rem 0;
}
#worksSingle .inner .ttlBox {
  margin-bottom: 2em;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  row-gap: 3em;
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox {
    margin-bottom: 3em;
  }
}
#worksSingle .inner .ttlBox .leftTtl {
  width: 76.5%;
  border-right: 1px solid #333;
  padding-right: 2em;
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox .leftTtl {
    width: 100%;
    padding: 0;
    border: none;
  }
}
#worksSingle .inner .ttlBox .leftTtl > p {
  font-size: 58.33%;
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox .leftTtl > p {
    font-size: 60%;
  }
}
#worksSingle .inner .ttlBox .leftTtl > h2 {
  font-size: 166.66%;
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox .leftTtl > h2 {
    font-size: 125%;
  }
}
#worksSingle .inner .ttlBox .iconList {
  width: 23.5%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2%;
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox .iconList {
    justify-content: space-between;
    width: 60%;
  }
}
#worksSingle .inner .ttlBox .iconList li {
  width: 27.6%;
  filter: brightness(0) saturate(100%) invert(83%) sepia(57%) saturate(2%) hue-rotate(184deg) brightness(112%) contrast(73%);
}
@media screen and (max-width: 520px) {
  #worksSingle .inner .ttlBox .iconList li {
    width: 30%;
  }
}
#worksSingle .inner .ttlBox .iconList.design li.design, #worksSingle .inner .ttlBox .iconList.coding li.coding, #worksSingle .inner .ttlBox .iconList.direction li.direction {
  filter: none;
}
#worksSingle .inner > dl {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 1.3em;
  font-size: 90%;
  line-height: 1.9;
}
#worksSingle .inner > dl dt {
  width: 7em;
}
#worksSingle .inner > dl dd {
  width: calc(100% - 7em);
}
@media screen and (max-width: 520px) {
  #worksSingle .inner > dl dd {
    width: 100%;
    margin-bottom: 2em;
  }
}
#worksSingle .inner > dl dd:last-child {
  margin-bottom: 0;
}
#worksSingle .inner .worksImgArea {
  margin-top: 4em;
}
#worksSingle .inner .worksImgArea li {
  margin-top: 1em;
}
#worksSingle .inner .worksImgArea li img {
  max-width: initial;
  width: 100%;
}