@charset "UTF-8";

/*--------------------------------------------------------------------
body
----------------------------------------------------------------------*/
body.otherworks {
  background-color: #e4e3e0;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

/*--------------------------------------------------------------------
sectionBox override (wider for 3-column layout)
----------------------------------------------------------------------*/
body.otherworks .sectionBox {
  width: 900px;
  max-width: calc(100% - 80px);
  padding: 160px 0 100px;
}

/*--------------------------------------------------------------------
3-column project grid
----------------------------------------------------------------------*/
.box_projects {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 48px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/*--------------------------------------------------------------------
individual project card
----------------------------------------------------------------------*/
.box_project {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: visible;
}

/*--------------------------------------------------------------------
artwork image area
----------------------------------------------------------------------*/
.box_artwork {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #d5d3cf;
  margin-bottom: 28px;
  overflow: hidden;
}

.box_artwork img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/*--------------------------------------------------------------------
genre label
----------------------------------------------------------------------*/
.genre {
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: #999;
  font-weight: 300;
  margin-bottom: 12px;
}

/*--------------------------------------------------------------------
project name
----------------------------------------------------------------------*/
.project_name {
  font-size: 2.6rem;
  font-weight: 300;
  color: #333;
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}

/*--------------------------------------------------------------------
horizontal rule
----------------------------------------------------------------------*/
.project_rule {
  width: 22px;
  border: none;
  border-top: 1px solid #aaa;
  margin: 0 auto 26px;
}

/*--------------------------------------------------------------------
description
----------------------------------------------------------------------*/
.project_desc {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 32px;
}

.project_desc p {
  font-size: 1.2rem;
  line-height: 2.2em;
  color: #555;
  font-weight: 300;
}

/*--------------------------------------------------------------------
link button
----------------------------------------------------------------------*/
body.otherworks .linkBtn {
  margin: 0 auto;
  display: inline-block;
  overflow: visible;
}

body.otherworks .linkBtn a {
  color: #333;
}

body.otherworks .linkBtn a:hover {
  color: #7d0032;
}

/*--------------------------------------------------------------------
Media Query
----------------------------------------------------------------------*/
@media screen and (max-width: 960px) {

  body.otherworks .sectionBox {
    width: 100%;
    max-width: 100%;
    padding: 60px 0 80px;
  }

  .box_projects {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 70px;
    padding: 0 40px;
  }

  .box_artwork {
    width: 72%;
    margin: 0 auto 28px;
  }

  .project_name {
    font-size: 2.8rem;
  }

  .project_desc p {
    font-size: 1.4rem;
  }

}