/* CSS Document */
h2 {
  font-family: 'Cormorant Garamond', serif;
  color: #fff;
  font-size: 40px;
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 5rem;
  display: flex;
  align-items: center; }
  h2 span {
    font-family: 'NotoSerifJP', serif;
    font-size: 19px;
    font-size: 1.9rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    margin-left: 1rem; }
    h2 span span {
      font-size: 16px;
      font-size: 1.6rem; }

.inner {
  width: 87%;
  margin: 0 auto; }
  @media screen and (max-width: 991px) {
    .inner {
      width: 100%; } }

#top-img {
  background-image: url("../img/works-header.png"); }

#ul-works {
  padding: 3rem 0; }
  #ul-works .inner .row > div {
    margin-bottom: 8rem; }
    @media screen and (max-width: 767px) {
      #ul-works .inner .row > div {
        margin-bottom: 4rem; } }
  #ul-works .inner a {
    display: block; }
    #ul-works .inner a .works-img {
      position: relative;
      width: 100%;
      overflow: hidden; }
      #ul-works .inner a .works-img img {
        width: 100%;
        z-index: 1;
        transition: 1s;
        object-fit: cover;
        object-position: center; }
    #ul-works .inner a dl {
      margin: 2rem 0 1rem; }
      @media screen and (max-width: 767px) {
        #ul-works .inner a dl {
          margin: 1rem 0 1rem; } }
      #ul-works .inner a dl dt {
        font-family: 'Cormorant Garamond', serif;
        color: #fff;
        font-size: 50px;
        font-size: 5rem;
        font-style: italic;
        font-weight: 300;
        margin-bottom: 2rem; }
        @media screen and (max-width: 767px) {
          #ul-works .inner a dl dt {
            font-size: 40px;
            font-size: 4rem;
            margin-bottom: 1rem; } }
      #ul-works .inner a dl dd {
        font-family: 'NotoSerifJP', serif;
        font-size: 19px;
        font-size: 1.9rem;
        font-weight: 400;
        color: #fff;
        letter-spacing: 0.15em; }
        @media screen and (max-width: 767px) {
          #ul-works .inner a dl dd {
            font-size: 17px;
            font-size: 1.7rem;
            letter-spacing: 0.1em; } }
    #ul-works .inner a p {
      font-family: 'Cormorant Garamond', serif;
      color: #fff;
      font-size: 14px;
      font-size: 1.4rem;
      color: #b1b1b1;
      letter-spacing: 0.1em;
      transition: 0.3s; }
    #ul-works .inner a:hover .works-img img {
      transform: scale(1.05);
      opacity: 0.7; }
    #ul-works .inner a:hover p {
      color: #fff; }