/*css of WORKS page*/
::-webkit-scrollbar {
  display: none;
}

.switchlang {
  background-color: white;
  position        : absolute;
  right           : 0;
  top             : 3.7rem;
  font-size       : 2.2rem;
  padding-left    : .3rem;
  font-family     : "Futura",
    "YuGo",
    sans-serif;
  font-weight: 200;
}

.switchlang a {
  display    : none;
  cursor     : pointer;
  white-space: nowrap;
  color      : var(--titleblack);
}

.switchlang a:hover,
.switchlang a:active {
  color           : var(--linkhoverblue);
  transform       : scale(1.1);
  transform-origin: center right;
}

/* visited設定は必要かな？ */


.contents_wrapper {
  width              : calc(100% - 0.6rem);
  margin-left        : 0.6rem;
  display            : flex;
  justify-content    : start;
  flex-wrap          : wrap;
  margin-top         : 7.4rem;
  /* background-color: red; */
}

.thumbnail_box {
  width                    : calc(50% - 0.4rem);
  margin-right             : 0.2rem;
  margin-bottom            : 0.2rem;
  /* position              : relative; */
  cursor                   : pointer;
  height                   : auto;
  display                  : inline-block;
}


.thumbnail {
  /* background-image   : url("../img/exhibs.jpg"); */
  background-size    : cover;
  background-position: center;
  background-repeat  : no-repeat;
  width              : 100%;
  position           : relative;
}

.thumbnail::before {
  content    : "";
  display    : block;
  padding-top: 100%;
}

.thumbnail_box img {
  width: 100%;
}

.thumbnail_filter {
  position        : absolute;
  width           : 100%;
  height          : 100%;
  top             : 0;
  left            : 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index         : 1;
  transition      : 0.3s;
  opacity         : 0;
}

.thumbnail_box:hover .thumbnail_filter {
  opacity: 1;
}

.thumbnail_box:hover .thumbnail_title {
  opacity: 1;
}

.thumbnail_title {
  position      : absolute;
  text-align    : center;
  width         : 100%;
  height        : auto;
  margin-top    : -50%;
  margin-left   : 50%;
  transform     : translate(-50%, -50%);
  color         : var(--basewhite) !important;
  font-size     : 1.2rem;
  font-weight   : 500;
  letter-spacing: 0.05rem;
  line-height   : 2.4rem;
  z-index       : 2;
  text-shadow: 0rem 0rem 0.5rem rgba(20,19,28,0.8);
}

.document_wrapper {
  width           : calc(100% - 0.6rem);
  height          : auto;
  /* color        : white; */
  margin-top      : 12rem;
  margin-bottom   : 12rem;
  padding         : 3rem 0;
  text-align      : center;
  position        : relative;
}

.document_wrapper::after {
  content            : "";
  position           : absolute;
  top                : 0;
  left               : -0.6rem;
  /* background-color: rgb(244, 0, 53); */
  width              : calc(100% + 1.2rem);
  height             : 100%;
  z-index            : -1;
  /* box-shadow      : 0 0 0.5rem 0.5rem rgb(244, 0, 53); */
}

.document_container {
  /* background-color: blue; */
  display   : inline-block;
  width     : 100%;
  height    : auto;
  text-align: left;
}

.document_topmedia img {
  width     : 100%;
  max-height: 70vh;
  object-fit: scale-down;
}

.style_caption {
  font-size  : 1.2rem;
  line-height: 1.4rem;
  font-family: "Futura", "YuGo", sans-serif;
  font-weight: 200;
}

.description_box {
  margin-top         : 1rem;
  width              : auto;
  height             : auto;
  /* background-color: red; */
  float              : right;
}


.work_title {
  font-family   : "TitleFutura", "Gothic", sans-serif;
  font-weight   : 600;
  font-size     : 2.2rem;
  line-height   : 3.5rem;
  letter-spacing: 0.1rem;
  margin-bottom : 0.5rem;
}

.work_credit {
  margin-bottom: 0.5rem;
}

.description_end {
  /*foatの高さ対策*/
  width   : 100%;
  overflow: hidden;
}

.work_description {
  margin-top    : 4rem;
  width         : 100%;
  max-width     : 60rem;
  font-size     : 1.2rem;
  font-weight   : 500;
  letter-spacing: 0;
  line-height   : 1.8rem;
  text-align    : justify;
}

.work_imgbox {
  display            : flex;
  flex-wrap          : wrap;
  justify-content    : space-around;
  width              : 100%;
  /* background-color: red; */
}

.work_imgbox img {
  display               : inline-block;
  max-width             : 100%;
  height                : auto;
  max-height            : 36vh;
  object-fit            : contain;
  margin-top            : 0.6rem;
  /* background-color   : blue; */
}

.video {
  position   : relative;
  height     : 0;
  padding    : 30px 0 56.25%;
  /* overflow: hidden; */
}

.video iframe {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
}

.border {
  margin       : 8rem 0;
  border-bottom: 1px solid var(--neutralgray);
}

.copyright {
  color: var(--titleblack) !important;
}

@media screen and (min-width: 480px) {

  /*タブレットサイズ以降*/
  .switchlang {
    top      : 4.6rem;
    font-size: 2.5rem;
  }

  .thumbnail_box {
    width           : calc(100% / 3 - (1rem / 3));
    /* margin-bottom: 0.2rem; */
  }

  .document_wrapper {
    margin-top   : 16rem;
    margin-bottom: 16rem;
  }
}

@media screen and (min-width: 896px) {

  /*PCサイズ以降*/
  .thumbnail_box {
    width: calc(25% - 0.3rem);
  }

  .thumbnail_title {
    font-size  : 1.6rem;
    line-height: 3.2rem;
    transition : .3s;
    opacity    : 0;
  }

  .document_wrapper {
    margin-top   : 20rem;
    margin-bottom: 20rem;
  }

  .document_container {
    width: 70%;
  }

  .style_caption {
    font-size  : 1.6rem;
    line-height: 1.9rem;
  }

  .work_title {
    font-size     : 3rem;
    line-height   : 3.5rem;
    letter-spacing: 0.1rem;
    margin-bottom : 0.5rem;
  }

  .work_description {
    font-size          : 1.6rem;
    line-height        : 2.6rem;
    /* background-color: red; */
    margin-top         : 12rem;
  }

  .work_imgbox img {
    margin-top: 4rem;
  }
}