@charset "UTF-8";
@media screen and (min-width: 821px) {
  .WorksListTop {
    margin-inline: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop {
    margin-inline: 3.75rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop {
    margin-inline: 1.875rem;
  }
}
@media screen and (min-width: 821px) {
  .WorksListTop {
    margin-bottom: 5.625rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop {
    margin-bottom: 11rem;
  }
}
.WorksListTop .parent {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 821px) {
  .WorksListTop .parent {
    grid-column-gap: 1.25rem;
    grid-row-gap: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .parent {
    grid-column-gap: 0.875rem;
    grid-row-gap: 3.25rem;
  }
}
@media screen and (min-width: 821px) {
  .WorksListTop .child {
    flex: 0 0 20.3125rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .child {
    flex: 0 0 21rem;
  }
}
@media screen and (min-width: 821px) {
  .WorksListTop .parent > .child:nth-child(3),
  .WorksListTop .parent > .child:nth-child(4),
  .WorksListTop .parent > .child:nth-child(9) {
    flex: 0 0 41.875rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .parent > .child:nth-child(3),
  .WorksListTop .parent > .child:nth-child(4),
  .WorksListTop .parent > .child:nth-child(9) {
    flex: 0 0 42.875rem;
  }
}
.WorksListTop .thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.WorksListTop .thumb:before {
  content: "";
  display: block;
  padding-bottom: 135.384615%;
}
.WorksListTop .thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.WorksListTop .parent > .child:nth-child(6n-3) .thumb:before,
.WorksListTop .parent > .child:nth-child(6n-2) .thumb:before {
  padding-bottom: 65.672%;
}
.WorksListTop .info {
  position: relative;
}
@media screen and (min-width: 821px) {
  .WorksListTop .info {
    padding-top: 1.25rem;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .info {
    padding-top: 2.5rem;
  }
}
.WorksListTop .info:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 2px;
  background-color: #272727;
}
@media screen and (min-width: 821px) {
  .WorksListTop .tag {
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 821px) and (max-width: 1200px) {
  .WorksListTop .tag {
    font-size: 10px;
  }
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .tag {
    font-size: 1.5rem;
  }
}
.WorksListTop .name {
  word-break: break-all;
}
@media screen and (max-width: 820.98px) {
  .WorksListTop .toListLink {
    display: flex;
    justify-content: flex-end;
    margin-top: 4.75rem;
  }
}
.Kv {
  position: relative;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 821px) {
  .Kv {
    padding-top: 13.375rem;
    margin-bottom: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv {
    padding-top: 38.25rem;
  }
}
@media screen and (min-width: 821px) {
  .Kv .kvInner {
    margin-inline: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .kvInner {
    margin-inline: 3.75rem;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .kvInner {
    margin-inline: 1.875rem;
  }
}
.Kv .parent {
  display: grid;
  grid-auto-rows: auto;
  align-items: start;
  width: 100%;
}
@media screen and (min-width: 821px) {
  .Kv .parent {
    grid-template-columns: 52.875rem repeat(2, 14.8125rem);
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-column-gap: 1.25rem;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .parent {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-column-gap: 0.875rem;
  }
}
@media screen and (min-width: 821px) {
  .Kv .parent > *:nth-child(1) {
    grid-area: 1/1/2/2;
  }
  .Kv .parent > *:nth-child(2) {
    grid-area: 2/1/3/2;
  }
  .Kv .parent > *:nth-child(3) {
    grid-area: 3/1/4/2;
  }
  .Kv .parent > *:nth-child(4) {
    grid-area: 1/2/2/3;
  }
  .Kv .parent > *:nth-child(5) {
    grid-area: 2/2/3/3;
  }
  .Kv .parent > *:nth-child(6) {
    grid-area: 3/2/4/3;
  }
  .Kv .parent > *:nth-child(7) {
    grid-area: 1/3/2/4;
  }
  .Kv .parent > *:nth-child(8) {
    grid-area: 2/3/3/4;
  }
  .Kv .parent > *:nth-child(9) {
    grid-area: 3/3/4/4;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .parent > *:nth-child(1) {
    grid-area: 1/1/2/3;
  }
  .Kv .parent > *:nth-child(2) {
    grid-area: 2/1/3/3;
  }
  .Kv .parent > *:nth-child(3) {
    grid-area: 3/1/4/3;
  }
  .Kv .parent > *:nth-child(4) {
    grid-area: 4/1/5/2;
  }
  .Kv .parent > *:nth-child(5) {
    grid-area: 5/1/6/2;
  }
  .Kv .parent > *:nth-child(6) {
    grid-area: 6/1/7/2;
  }
  .Kv .parent > *:nth-child(7) {
    grid-area: 4/2/5/3;
  }
  .Kv .parent > *:nth-child(8) {
    grid-area: 5/2/6/3;
  }
  .Kv .parent > *:nth-child(9) {
    grid-area: 6/2/7/3;
  }
}
.Kv .thumb {
  position: relative;
  width: 100%;
  margin-top: auto;
  overflow: hidden;
}
.Kv .thumb:before {
  content: "";
  display: block;
  padding-bottom: 133.33333%;
}
.Kv .thumb:first-child:before {
  padding-bottom: 66.6667%;
}
.Kv .image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.Kv .tag {
  align-self: start;
}
@media screen and (min-width: 821px) {
  .Kv .tag {
    font-size: 0.75rem;
    padding-top: 1.125rem;
  }
}
@media screen and (min-width: 821px) and (max-width: 1200px) {
  .Kv .tag {
    font-size: 10px;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .tag {
    font-size: 1.5rem;
    padding-top: 2.25rem;
  }
}
.Kv .name {
  align-self: start;
  word-break: break-all;
}
@media screen and (max-width: 820.98px) {
  .Kv .name {
    padding-bottom: 3.25rem;
  }
}
.Kv .title {
  font-family: ten-mincho, YuMincho, 游明朝, Times New Roman,
    Hiragino Mincho ProN, HGS明朝B, ＭＳ Ｐ明朝, serif;
  letter-spacing: 0.2em;
}
@media screen and (min-width: 821px) {
  .Kv .title {
    font-size: 2.25rem;
    line-height: 1.8;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .title {
    font-size: 3.75rem;
    line-height: 1.8;
  }
}
@media screen and (min-width: 821px) {
  .Kv .title {
    position: absolute;
    bottom: 0;
    left: 2.5rem;
    bottom: 3.125rem;
  }
}
@media screen and (max-width: 820.98px) {
  .Kv .title {
    margin-bottom: 6.5rem;
  }
}
@media screen and (max-width: 820.98px) and (min-width: 821px) {
  .Kv .title {
    margin-left: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) and (max-width: 820.98px) {
  .Kv .title {
    margin-left: 3.75rem;
  }
}
.TopTopics .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (min-width: 821px) {
  .TopTopics .header {
    margin-inline: 2.5rem 9.375rem;
  }
}
@media screen and (max-width: 820.98px) {
  .TopTopics .header {
    margin-inline: 2rem;
  }
}
.TopTopics .title {
  font-family: classico-urw, dnp-shuei-gothic-gin-std, Noto Sans JP, YuGothic,
    游ゴシック, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (min-width: 821px) {
  .TopTopics .title {
    font-size: 1.875rem;
    padding-left: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .TopTopics .title {
    font-size: 3.75rem;
    padding-left: 2rem;
  }
}
.TopTopics .slider {
  overflow: hidden;
}
@media screen and (min-width: 821px) {
  .TopTopics .slider {
    margin-top: 3rem;
    /* padding-bottom: 8rem; */
    padding-left: 2.5rem;
  }
}
@media screen and (max-width: 820.98px) {
  .TopTopics .slider {
    margin-top: 4rem;
    padding-left: 2rem;
    /* padding-bottom: 14.5rem; */
  }
}
.TopTopics .list {
  display: flex;
}
.TopTopics .item {
  flex-shrink: 0;
}
@media screen and (min-width: 821px) {
  .TopTopics .item {
    margin-right: 1.25rem;
  }
}
@media screen and (max-width: 820.98px) {
  .TopTopics .item {
    margin-right: 2.5rem;
  }
}

.ToListLink.-top {
  display: flex;
  justify-content: flex-end;
}
@media screen and (min-width: 821px) {
  .ToListLink.-top {
    margin-top: 4.75rem;
    margin-right: 6.875rem;
    margin-left: auto;
  }
}
@media screen and (max-width: 820.98px) {
  .ToListLink.-top {
    margin-top: 4.75rem;
    margin-right: 1.0625rem;
    margin-left: auto;
  }
}
@media screen and (min-width: 821px) {
  .TopTopics .ToListLink.-top {
    margin-right: 9.375rem;
  }
}
@media screen and (max-width: 820.98px) {
  .TopTopics .ToListLink.-top {
    margin-right: 4rem;
  }
}