/* CSS Document */
@keyframes grayscale {
  0%{
    filter:grayscale(100%);
  }
  100%{
    filter:grayscale(0);
  }
}

.case_block a[inview-state="true"] article figure{
  animation: grayscale 0.75s ease 0.5s forwards;
}
/*ページタイトル*/
.page_title h2::before{
  content: "Case";
}
/*コンテンツ*/
.case_wrap{
  background-color: #000;
  box-sizing: border-box;
}
body[wc-view-type="sp"] .case_wrap{
  padding: var(--headerHeight) 7vw;
}
body[wc-view-type="tb"] .case_wrap{
  padding: var(--headerHeight) 5vw;
}
body[wc-view-type="tb-l"] .case_wrap{
  padding: var(--headerHeight) 10vw;
}
body[wc-view-type="pc"] .case_wrap{
  padding: var(--headerHeight) calc((100vw - 1100px) / 2);
}
.case_block{
  display: flex;
  flex-wrap: wrap;
  gap:1.5rem;
}
.case_block a{
  display: flex;
  flex-direction: column-reverse;
  text-decoration: none;
}
body[wc-view-type="sp"] .case_block a{
  width: 100%;
}
body[wc-view-type="tb"] .case_block a{
  width: calc(50% - 0.75rem);
}
body[wc-view-type="tb-l"] .case_block a,
body[wc-view-type="pc"] .case_block a{
  width: calc((100% / 3) - 1rem);
}
.case_block a article{
  display: flex;
  flex-direction: column-reverse;
}
.case_block a article figure{
  filter: grayscale(100%);
}

.case_block a article figure img{
  aspect-ratio:1.414/1;
  width: 100% !important;
  height: auto !important;
  border-radius: 1rem;
}
.case_block a article .c_slider_box{
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column-reverse;
}
.case_block a article .c_slider_box > h2{
  color: #fff;
  font-weight: 700;
  white-space: nowrap; /* 横幅のMAXに達しても改行しない */
  overflow: hidden; /* 溢れた部分を隠す */
  text-overflow: ellipsis; /* 「…」と省略 */
  -webkit-text-overflow: ellipsis; /* Safari用 */
  -o-text-overflow: ellipsis; /* Opera用 */
}
.case_block a article .c_slider_box > h2 .cs_title{
  display: table;
  padding: 0 1rem;
  font-size: 0.9rem;
  border-radius: 1rem;
  border: solid 1px #fff;
  box-sizing: border-box;
  margin-bottom: 0.25rem;
}
.case_block a article .c_slider_box > time{
  line-height: 1em;
  font-family: "Oswald";
  letter-spacing: 2px;
  color: #fff;
  font-weight: 700;
  text-align: right;
  margin-bottom: 0.45rem;
}
.case .btn{
  margin-top: 2rem;
}