/* CSS Document */
.page_title h2::before{
  content: "WORKS";
}
/*コンテンツ*/
.work_wrap{
  padding: calc(var(--headerHeight) / 2) 0 0 0;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .work_wrap{
  padding: calc(var(--headerHeight) / 2) 6vw;
}
body[wc-view-type="tb"] .work_wrap,
body[wc-view-type="tb-l"] .work_wrap{
  padding: calc(var(--headerHeight) / 2) 4.5vw;
}
body[wc-view-type="pc"] .work_wrap{
  padding: calc(var(--headerHeight) / 2) calc((100vw - 1100px) / 2);
}
.work_in_block{
  padding: 1rem 1rem 0 1rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap:1rem;
}
body[wc-view-type="tb"] .work_in_block,
body[wc-view-type="tb-l"] .work_in_block{
  gap:1.5rem;
}
body[wc-view-type="tb-l"] .work_in_block{
  padding: 1rem 0 0 0;
}
.work_wrap a{
  display: block;
  text-decoration: none;
  transition: opacity 600ms ease;
  opacity: 0;
}
.work_wrap a[inview-state="true"]{
  opacity: 1;
}
body[wc-view-type="sp"] .work_wrap a{
  width: calc(88vw - 2rem);
}
body[wc-view-type="tb"] .work_wrap a{
  width: calc(45.5vw - 3rem);
}
body[wc-view-type="tb-l"] .work_wrap a{
  width: calc((91vw / 3) - 1rem);
}
body[wc-view-type="pc"] .work_wrap a{
  width: calc((1100px / 4) - 1.5rem);
}
.work_wrap a article{
  display: flex;
  flex-direction: column-reverse;
}
.work_wrap a article .w_t_top{
  display: flex;
  flex-wrap: wrap;
}
.work_wrap a article .w_t_top .genre{
  order: 1;
  display: flex;
  overflow: hidden;
  gap: 0.2rem;
  box-sizing: border-box;
  -webkit-mask-image: linear-gradient(to right, transparent 0,black 0,black calc( 100% - 1rem),transparent calc( 100% - 0.125rem));
  mask-image: linear-gradient(to right, transparent 0,black 0,black calc( 100% - 1rem),transparent calc( 100% - 0.125rem));
	width: 100%;
}
/*日付が必要になれば下記2行追加
.work_wrap a article .w_t_top .genre{
  width: calc(100% - (85px + 0.5rem));
  margin-right: auto;
}*/
.work_wrap a article .w_t_top .genre h3{
  padding: 0.25rem 0.5rem 0.35rem;
  border-radius: 1rem;
  font-size: 0.83rem;
  font-weight: 700;
  background-color: #2277ca;
  color: #fff;
  letter-spacing: 0.5px;
  line-height: 1em;
  white-space: nowrap;
}
/*
.work_wrap a article .w_t_top time{
  order: 2;
  font-family: "inter";
  letter-spacing: 1px;
  width: 85px;
  font-size: 0.95rem;
  color: #121823;
}*/
.work_wrap a article .w_t_top h2{
  order: 3;
  font-size: 1.15rem;
  font-weight: 700;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-right: 1rem;
  box-sizing: border-box;
  padding-top: 0.25rem;
  color: #121823;
  position: relative;
  z-index: 1;
}
.work_wrap a article .w_t_top h2::after{
  content: "";
  position: absolute;
  right: 0;
  top: 57%;
  transform: translateY(-50%);
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  background-color: #121823;
  -webkit-mask-image: var(--wciconsrc);
  mask-image: var(--wciconsrc);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}
.work_wrap a article .w_t_top{
  padding: 0.75rem;
  box-sizing: border-box;
  padding-bottom: 0;
}
.work_wrap a article figure{
}
.work_wrap a article figure img{
  aspect-ratio:1.414/1;
  border-radius: 1rem;
}