/* CSS Document */
#header-img {
  background: url("../img/03-header.jpg") center/cover no-repeat; }

#works-menu {
  margin-top: 10rem; }
  #works-menu .category {
    margin-bottom: 5rem; }
    #works-menu .category h2 {
      text-align: justify; }
      @media screen and (max-width: 767px) {
        #works-menu .category h2 {
          font-size: 24px;
          font-size: 2.4rem; } }
    #works-menu .category ul li {
      line-height: 2rem;
      margin-bottom: 1.5rem;
      cursor: pointer;
      transition: 0.3s; }
      #works-menu .category ul li:hover {
        opacity: 0.7; }
      #works-menu .category ul li i {
        margin-right: 0.5rem; }
      #works-menu .category ul li p {
        display: inline; }
    #works-menu .category ul .hosou, #works-menu .category ul .doboku {
      margin-left: 1rem; }
    #works-menu .category ul .is_active {
      color: #003685;
      font-weight: 600; }
      #works-menu .category ul .is_active p {
        text-decoration: underline; }
  #works-menu #itemlist .box {
    margin-bottom: 5rem; }
    #works-menu #itemlist .box .img-box {
      overflow: hidden; }
      #works-menu #itemlist .box .img-box img {
        transition: 0.3s; }
    #works-menu #itemlist .box dl {
      margin-top: 1.5rem; }
      #works-menu #itemlist .box dl dt {
        font-weight: 500;
        font-size: 14px;
        font-size: 1.4rem;
        background: #003685;
        display: inline-block;
        padding: 0 1rem;
        margin-bottom: 0.75rem;
        color: #fff;
        transition: .3s; }
      #works-menu #itemlist .box dl dd {
        color: #333333;
        font-weight: 600;
        line-height: 2rem;
        transition: .3s; }
  #works-menu #itemlist .hosou dd, #works-menu #itemlist .doboku dd {
    text-decoration: underline; }
  #works-menu #itemlist .hosou:hover img, #works-menu #itemlist .doboku:hover img {
    transform: scale(1.1, 1.1); }
  #works-menu #itemlist .hosou:hover dt, #works-menu #itemlist .doboku:hover dt {
    opacity: 0.7; }
  #works-menu #itemlist .hosou:hover dd, #works-menu #itemlist .doboku:hover dd {
    opacity: 0.7; }

#works-contents {
  margin-top: 10rem; }
  #works-contents dt {
    font-weight: 500;
    font-size: 14px;
    font-size: 1.4rem;
    background: #003685;
    display: inline-block;
    padding: 0 1rem;
    margin-bottom: 0.75rem;
    color: #fff; }
  #works-contents dd {
    font-size: 25px;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 3rem; }
  #works-contents img {
    margin-bottom: 2rem; }
    @media screen and (max-width: 767px) {
      #works-contents img {
        height: 350px;
        object-fit: cover; } }
    @media screen and (max-width: 575px) {
      #works-contents img {
        height: 250px; } }
  #works-contents table {
    margin: 3rem auto 7rem;
    width: 50%; }
    @media screen and (max-width: 991px) {
      #works-contents table {
        width: 70%; } }
    @media screen and (max-width: 767px) {
      #works-contents table {
        margin: 2rem auto 5rem;
        width: 100%; } }
    #works-contents table th {
      width: 30%;
      padding: 1rem;
      font-weight: 100;
      border-bottom: 1px solid #003685; }
    #works-contents table td {
      border-bottom: 1px solid #C8C8C8;
      padding: 1rem 2rem; }
  #works-contents .link-box {
    text-align: center;
    margin-bottom: 10rem; }
    @media screen and (max-width: 767px) {
      #works-contents .link-box {
        margin-bottom: 7rem; } }