/* Scss Document */
/* Scss Document */
#page_ttl {
  background: url("../images/works/page_ttl_bg_l.jpg") top center no-repeat;
}
#page_ttl .inner {
  background: url("../images/works/page_ttl_bg.jpg") top center no-repeat;
}

.works_lttl {
  margin-bottom: 30px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .1em;
  text-indent: .1em;
  text-align: center;
}
.works_lttl .en {
  color: #DDD;
  font-family: "Times New Roman", Times, "serif";
  font-size: 5.0rem;
}
.works_lttl .jp {
  color: #0A3190;
  font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
  font-size: 2.0rem;
}

#latest .latest_content {
  background: linear-gradient(65deg, transparent 0%, transparent 2%, #094 2%, #094 27%, transparent 27%, transparent 100%), linear-gradient(120deg, transparent 0%, transparent 50%, rgba(240, 240, 225, 0.5) 50%, rgba(240, 240, 225, 0.5) 70%, transparent 70%, transparent 100%);
  border-bottom: #CCC 5px solid;
}
#latest .works_mttl {
  position: relative;
  width: 100%;
  margin-bottom: 60px;
  font-size: 2.0rem;
  font-weight: 500;
  text-align: center;
  letter-spacing: .15em;
  text-indent: .15em;
}
#latest .works_mttl:after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 212px;
  height: 4px;
  background: #094;
}
#latest .works {
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: flex-start;
  -moz-align-items: flex-start;
  -ms-align-items: flex-start;
  -o-align-items: flex-start;
  align-items: flex-start;
  justify-content: space-between;
  padding: 50px 0;
}
#latest .works .works_deta {
  clear: both;
  overflow: hidden;
  width: 250px;
  padding: 20px;
  background: #0A3190;
  color: #FFF;
  font-size: 1.6rem;
  letter-spacing: 0;
}
#latest .works .works_deta dt {
  float: left;
}
#latest .works .works_deta dd {
  padding-left: 4em;
}
#latest .works .works_slide {
  -webkit-display: flex;
  -moz-display: flex;
  -ms-display: flex;
  -o-display: flex;
  display: flex;
  justify-content: space-between;
  width: 830px;
}
#latest .works .works_slide .bx-wrapper {
  order: 2;
  width: 700px;
}
#latest .works .works_slide .thumb {
  order: 1;
  width: 120px;
}
#latest .works .works_slide .thumb li {
  margin-bottom: 7px;
}
#latest .works .bx-wrapper {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  margin: 0;
  background: none;
  border: none;
}
#latest .works .bx-wrapper .bx-controls-direction a {
  width: 30px;
  height: 50px;
  margin-top: -25px;
}
#latest .works .bx-wrapper .bx-prev {
  left: 0;
  background: url("../images/works/arrow_prev.png") no-repeat 0 0;
}
#latest .works .bx-wrapper .bx-next {
  right: 0;
  background: url("../images/works/arrow_next.png") no-repeat 0 0;
}
#latest .pager {
  text-align: center;
}
#latest .pager li {
  display: inline-block;
}
#latest .pager li a, #latest .pager li .active {
  display: block;
  width: 30px;
  height: 50px;
  background: #FFF;
  border: #094 1px solid;
  color: #094;
  font-size: 2.0rem;
  line-height: 50px;
  letter-spacing: .2em;
  text-indent: .2em;
  text-align: center;
}
#latest .pager li .active {
  background: #094;
  border: #094 1px solid;
  color: #FFF;
}

#past .past_content {
  background: linear-gradient(300deg, #094 0%, #094 20%, transparent 20%, transparent 100%), linear-gradient(60deg, transparent 0%, transparent 30%, rgba(240, 240, 225, 0.5) 30%, rgba(240, 240, 225, 0.5) 55%, transparent 55%, transparent 100%);
}
#past .past_table {
  width: 100%;
  margin-bottom: 40px;
  border-top: #CCC 1px solid;
}
#past .past_table tr {
  border-bottom: #CCC 1px solid;
}
#past .past_table th, #past .past_table td {
  padding: .8em 1em;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: left;
}

@media screen and (max-width: 640px) {
  #page_ttl {
    background: none;
  }
  #page_ttl .inner {
    background-size: auto 100%;
  }

  .works_lttl {
    margin-bottom: 5.2631578947vw;
    /*(40/760)*100vw*/
  }
  .works_lttl .en {
    font-size: 4vw;
    /*(30/750)*100vw*/
  }
  .works_lttl .jp {
    font-size: 5.2631578947vw;
    /*(40/760)*100vw*/
  }

  #latest .latest_content {
    background: none;
  }
  #latest .works_mttl {
    margin-bottom: 7.8947368421vw;
    /*(60/760)*100vw*/
    font-size: 5.2631578947vw;
    /*(40/760)*100vw*/
    line-height: 1.2;
  }
  #latest .works_mttl:after {
    bottom: -2.6315789474vw;
    /*(-20/760)*100vw*/
    width: 27.8947368421vw;
    /*(212/760)*100vw*/
    height: 2px;
  }
  #latest .works {
    padding: 6.5789473684vw 0;
  }
  #latest .works .works_deta {
    width: 80vw;
    margin: 0 auto 3vw;
    padding: 3vw;
    font-size: 3.1578947368vw;
  }
  #latest .works .works_slide {
    display: block;
    width: 100%;
  }
  #latest .works .works_slide .bx-wrapper {
    width: 100%;
    margin-bottom: 2.6315789474vw;
    /*(20/760)*100vw*/
  }
  #latest .works .works_slide .thumb {
    width: 100%;
  }
  #latest .works .works_slide .thumb li {
    display: inline-block;
    width: 20.3947368421vw;
    /*(155/760)*100vw*/
    margin: 0.6578947368vw;
  }
  #latest .works .bx-wrapper .bx-controls-direction a {
    width: 3.9473684211vw;
    /*(30/760)*100vw*/
    height: 6.5789473684vw;
    /*(50/760)*100vw*/
    margin-top: -3.2894736842vw;
    /*(-25/760)*100vw*/
  }
  #latest .works .bx-wrapper .bx-prev {
    background-size: cover;
  }
  #latest .works .bx-wrapper .bx-next {
    background-size: cover;
  }
  #latest .pager li a, #latest .pager li .active {
    width: 5.2631578947vw;
    /*(40/760)*100vw*/
    height: 6.5789473684vw;
    /*(50/760)*100vw*/
    font-size: 3.9473684211vw;
    /*(30/760)*100vw*/
    line-height: 6.5789473684vw;
    /*(50/760)*100vw*/
  }

  #past .past_content {
    background: linear-gradient(35deg, #094 0%, #094 15%, transparent 15%, transparent 100%), linear-gradient(-55deg, transparent 0%, transparent 50%, rgba(240, 240, 225, 0.5) 50%, rgba(240, 240, 225, 0.5) 80%, transparent 80%, transparent 100%);
  }
  #past .past_table {
    display: block;
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 5.2631578947vw;
    /*(40/760)*100vw*/
  }
  #past .past_table th, #past .past_table td {
    font-size: 3.1578947368vw;
    /*(24/760)*100vw*/
  }
}