@charset "UTF-8";

.works__main {
  margin: 143px 0 198px;
}
@media (max-width: 767px) {
  .works__main {
    margin: 67px 0 82px;
  }
}
/* ・位置修正 */
.text-center {
  text-combine-upright: all; /* 縦中横 */
}

/* 美術館 */

.works__1-top {
  display: grid;
  grid-template-columns: 63vw auto;
  grid-template-rows: 30px auto;
  margin-bottom: 219px;
  position: relative;
}
.works__1-top::after {
  content: "";
  width: 42%;
  aspect-ratio: 587 / 88;
  background: url(/assets/images/common/works__1_art-1-text.webp) right /
    contain no-repeat;
  position: absolute;
  z-index: -1;
  bottom: -185px;
  right: 0;
}
.works__1-top-p {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: end;
}
.works__1-top-p p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__1-top picture {
  grid-column: 1;
  grid-row: 2;
  width: 92%;
  max-height: 504px;
  aspect-ratio: 825 / 505;
  height: auto;
  position: relative;
}
.works__1-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__1-top picture::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(35deg, #c8c9c9 75%, #fbe01d);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: min(72px, 5.1vw);
  left: 8.7%;
}
.works__1-top-h2 {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(21vw, 307px);
  justify-self: normal;
  font-size: clamp(3.6rem, 5.5vw, 7.7rem);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}
.works__1-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  margin-bottom: 219px;
}
.works__1-bottom-p {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(1.3rem, 1.5vw, 2.1rem);
  width: min(485px, 34vw);
  text-align: justify;
  justify-self: end;
  margin-right: min(13px, 0.9vw);
  letter-spacing: 0.03em;
  line-height: 2;
}
.works__1-bottom picture {
  grid-column: 2;
  grid-row: 1;
  width: 66%;
  max-height: 351px;
  aspect-ratio: 467 / 351;
  height: auto;
  justify-self: end;
  position: relative;
}
.works__1-bottom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__1-bottom picture::after {
  content: "";
  width: 90%;
  max-height: 169px;
  aspect-ratio: 424 / 169;
  background: linear-gradient(53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  bottom: calc(-1 * min(47px, 3.3vw));
  left: -30%;
}

@media (max-width: 767px) {
  .works__1-top {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto auto calc(min(calc(100vw * 188 / 287), 188px) - 16px)
      auto;
    margin-bottom: 0;
  }
  .works__1-top::after {
    width: 63%;
    bottom: auto;
    right: -0.5%;
    top: -4%;
  }
  .works__1-top-h2 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    writing-mode: horizontal-tb;
    margin-left: 7.5vw;
    margin-bottom: 38px;
  }
  .works__1-top-p {
    grid-column: 1;
    grid-row: 4;
    justify-self: start;
    margin-left: 7.5vw;
  }
  .works__1-top picture {
    max-height: 360px;
    aspect-ratio: 360 / 235;
    justify-self: end;
  }
  .works__1-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    margin-bottom: 156px;
    margin-top: calc(-1 * min(calc(100vw * 188 / 287), 188px) - 16px);
  }
  .works__1-bottom-p {
    grid-column: 1;
    grid-row: 2;
    width: 85vw;
    margin-right: 0;
    justify-self: center;
    margin-top: 42px;
  }
  .works__1-bottom picture {
    grid-column: 1;
    grid-row: 1;
    width: 73%;
    max-height: 188px;
    aspect-ratio: 287 / 188;
  }
  .works__1-top picture::after {
    display: none;
  }
  .works__1-bottom picture::after {
    display: none;
  }
}

/* ホテル */

.works__2-top {
  display: grid;
  grid-template-columns: auto 63vw;
  grid-template-rows: 30px auto auto;
  margin-bottom: 120px;
  position: relative;
}
.works__2-top::after {
  content: "";
  width: 45%;
  aspect-ratio: 632 / 213;
  background: url(/assets/images/pc/works/works__2_spa-text-pc.webp) left /
    contain no-repeat;
  position: absolute;
  z-index: -1;
  bottom: 146px;
  left: 0;
}
.works__2-top-p {
  grid-column: 2;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: normal;
}
.works__2-top-p p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__2-top-img {
  width: 100%;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  display: grid;
  grid-template-rows: auto auto;
  gap: 20px;
  overflow: hidden;
}
.works__2-top-img picture:first-of-type {
  grid-column: 1;
  grid-row: 1;
  width: 92%;
  height: 100%;
  max-height: 504px;
  aspect-ratio: 825 / 505;
  justify-self: end;
  position: relative;
}
.works__2-top-img picture:last-of-type {
  grid-column: 1;
  grid-row: 2;
  width: 52%;
  max-height: 351px;
  aspect-ratio: 467 / 351;
  justify-self: end;
  height: auto;
  position: relative;
}
.works__2-top-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__2-top picture:first-of-type::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: min(72px, 5.1vw);
  right: 8.7%;
}
.works__2-top-h2 {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: min(21vw, 307px);
  justify-self: end;
  font-size: clamp(3.6rem, 5.5vw, 7.7rem);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: end;
}
.works__2-bottom {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 30px auto auto;
  margin-bottom: 336px;
  position: relative;
}
.works__2-bottom::before {
  content: "";
  width: 25%;
  max-height: 71px;
  aspect-ratio: 352 / 71;
  background: linear-gradient(-53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  bottom: -40px;
  right: 0;
}
.works__2-bottom-p-2 {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(1.3rem, 1.5vw, 2.1rem);
  width: min(485px, 34vw);
  text-align: justify;
  justify-self: start;
  margin-left: min(13px, 0.9vw);
  letter-spacing: 0.03em;
  line-height: 2;
}
.works__2-bottom-p-1 {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: end;
  margin-right: 2vw;
}
.works__2-bottom-p-1 p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__2-bottom-img {
  width: 100%;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  display: grid;
  grid-auto-columns: 100%;
  grid-template-rows: auto auto;
  gap: 20px;
}
.works__2-bottom-img picture:first-of-type {
  grid-column: 1;
  grid-row: 1;
  width: 91%;
  height: 100%;
  max-height: 393px;
  aspect-ratio: 642 / 393;
  justify-self: start;
  position: relative;
}
.works__2-bottom-img picture:last-of-type {
  grid-column: 1;
  grid-row: 2;
  width: 52%;
  max-height: 288px;
  aspect-ratio: 391 / 288;
  justify-self: start;
  margin-left: 5vw;
  height: auto;
  position: relative;
}
.works__2-bottom-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__2-bottom picture:last-of-type::after {
  content: "";
  width: 91%;
  max-height: 202px;
  aspect-ratio: 358 / 202;
  background: linear-gradient(53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: min(15vw, 215px);
  left: 52%;
}
@media (max-width: 767px) {
  .works__2-top {
    grid-template-columns: 1fr;
    grid-template-rows:
      auto auto auto
      auto;
    margin-bottom: 0;
  }
  .works__2-top::after {
    content: "";
    width: 68%;
    aspect-ratio: 273 / 111;
    background: url(/assets/images/sp/works/works__2_spa-text-sp.webp) left /
      contain no-repeat;
    bottom: auto;
    left: auto;
    right: -1.5%;
    top: -15%;
  }
  .works__2-top-h2 {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    writing-mode: horizontal-tb;
    margin-left: 7.5vw;
    margin-bottom: 38px;
    justify-self: auto;
  }
  .works__2-top-img {
    grid-column: 1;
    grid-row: 2;
    gap: 8px;
  }
  .works__2-top-img picture:first-of-type {
    max-height: 235px;
    aspect-ratio: 360 / 235;
    justify-self: start;
  }
  .works__2-top-img picture:last-of-type {
    width: 73%;
    max-height: 188px;
    aspect-ratio: 288 / 188;
    justify-self: start;
  }
  .works__2-top-p {
    grid-column: 1;
    grid-row: 3;
    margin-left: 7.5vw;
    margin-bottom: 15px;
    transform: translateY(-18px);
  }
  .works__2-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 156px;
  }
  .works__2-bottom-p-1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-left: 7.5vw;
    margin-bottom: 7px;
    transform: translateY(-18px);
  }
  .works__2-bottom-img {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
  }
  .works__2-bottom-img picture:first-of-type {
    max-height: 235px;
    aspect-ratio: 358 / 235;
    justify-self: end;
  }
  .works__2-bottom-img picture:last-of-type {
    width: 73%;
    max-height: 188px;
    aspect-ratio: 288 / 188;
    justify-self: end;
    margin-left: 0;
  }
  .works__2-bottom-p-2 {
    grid-column: 1;
    grid-row: 3;
    width: 85vw;
    justify-self: center;
  }
  .works__2-top picture::after {
    display: none;
  }
  .works__2-bottom picture::after {
    display: none;
  }
  .works__2-bottom::before {
    display: none;
  }
}

/* 病院 */

.works__3-top {
  display: grid;
  grid-template-columns: 63vw auto;
  grid-template-rows: 30px auto;
  margin-bottom: 277px;
  position: relative;
}
.works__3-top::after {
  content: "";
  width: 58%;
  aspect-ratio: 819 / 365;
  background: url(/assets/images/common/works__3_hp-text.webp) right / contain
    no-repeat;
  position: absolute;
  z-index: -1;
  bottom: -241px;
  right: 0;
}
.works__3-top-p {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: end;
}
.works__3-top-p p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__3-top picture {
  grid-column: 1;
  grid-row: 2;
  width: 92%;
  max-height: 505px;
  aspect-ratio: 825 / 505;
  height: auto;
  position: relative;
}
.works__3-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__3-top picture::after {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(35deg, #c8c9c9 75%, #fbe01d);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: min(72px, 5.1vw);
  left: 8.7%;
}
.works__3-top-h2 {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: min(21vw, 307px);
  justify-self: normal;
  font-size: clamp(3.6rem, 5.5vw, 7.7rem);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
}
.works__3-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 30px auto auto;
  margin-bottom: 297px;
}
.works__3-bottom-p-2 {
  grid-column: 1;
  grid-row: 2;
  font-size: clamp(1.3rem, 1.5vw, 2.1rem);
  width: min(485px, 34vw);
  text-align: justify;
  justify-self: end;
  margin-right: min(13px, 0.9vw);
  letter-spacing: 0.03em;
  line-height: 2;
}
.works__3-bottom-p-1 {
  grid-column: 2;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: start;
  margin-left: 13vw;
  transform: translateY(calc(-1 * min(70px, 5vw)));
}
.works__3-bottom-p-1 p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__3-bottom picture {
  grid-column: 2;
  grid-row: 2;
  width: 66%;
  max-height: 351px;
  aspect-ratio: 467 / 351;
  height: auto;
  justify-self: end;
  position: relative;
}
.works__3-bottom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__3-bottom picture::after {
  content: "";
  width: 90%;
  max-height: 169px;
  aspect-ratio: 424 / 169;
  background: linear-gradient(53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  bottom: calc(-1 * min(47px, 3.3vw));
  left: -30%;
}
@media (max-width: 767px) {
  .works__3-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 16px;
  }
  .works__3-top-h2 {
    grid-column: 1;
    grid-row: 1;
    width: 85vw;
    writing-mode: horizontal-tb;
    margin-left: 7.5vw;
    margin-bottom: 36px;
  }
  .works__3-top picture {
    max-height: 235px;
    aspect-ratio: 360 / 235;
  }

  .works__3-top picture::after {
    display: none;
  }
  .works__3-top-p {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-left: 7.5vw;
    transform: translateY(-18px);
  }
  .works__3-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 156px;
  }
  .works__3-bottom picture {
    grid-column: 1;
    grid-row: 1;
    width: 92%;
    max-height: 235px;
    aspect-ratio: 360 / 235;
  }
  .works__3-bottom picture::after {
    display: none;
  }
  .works__3-bottom-p-1 {
    grid-column: 1;
    grid-row: 2;
    margin-left: 7.5vw;
    transform: translateY(-18px);
    margin-bottom: 7px;
  }
  .works__3-bottom-p-2 {
    grid-row: 3;
    width: 85vw;
    justify-self: center;
    margin-right: 0;
  }
  .works__3-top::after {
    width: 88%;
    bottom: auto;
    right: -1%;
    top: -31%;
  }
}

/* 工場 */
.works__4-top {
  display: grid;
  grid-template-columns: auto 63vw;
  grid-template-rows: min(97px, 6.9vw) auto auto;
  margin-bottom: 45px;
  position: relative;
}
.works__4-top::after {
  content: "";
  width: 51%;
  aspect-ratio: 718 / 240;
  background: url(/assets/images/pc/works/works__4_pub-text-pc.webp) left /
    contain no-repeat;
  position: absolute;
  z-index: -1;
  bottom: -53px;
  left: 0;
}
.works__4-top::before {
  content: "";
  width: 25%;
  max-height: 63px;
  aspect-ratio: 353 / 63;
  background: linear-gradient(-53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: -54px;
  left: 0;
}
.works__4-top-p {
  grid-column: 2;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: start;
  margin-left: min(132px, 9.4vw);
}
.works__4-top-p p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__4-top picture {
  grid-column: 2;
  grid-row: 2;
  width: 56%;
  max-height: 702px;
  aspect-ratio: 505 / 702;
  justify-self: end;
  margin-right: 9vw;
  position: relative;
}
.works__4-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__4-top picture::after {
  content: "";
  width: 42%;
  height: 90%;
  background: linear-gradient(#fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  top: min(152px, 10vw);
  left: 30vw;
}
.works__4-top-h2 {
  grid-column: 1;
  grid-row: 2 / span 3;
  width: min(21vw, 307px);
  justify-self: end;
  font-size: clamp(3.6rem, 5.5vw, 7.7rem);
  letter-spacing: 0.05em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: end;
}
.works__4-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min(97px, 6.9vw) auto auto;
  margin-bottom: 278px;
}
.works__4-bottom-p-2 {
  grid-column: 2;
  grid-row: 2;
  font-size: clamp(1.3rem, 1.5vw, 2.1rem);
  width: min(485px, 34vw);
  text-align: justify;
  justify-self: start;
  margin-left: min(13px, 0.9vw);
  letter-spacing: 0.03em;
  line-height: 2;
}
.works__4-bottom-p-1 {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  position: relative;
  z-index: 1;
  justify-self: end;
  margin-right: 7.4vw;
}
.works__4-bottom-p-1 p {
  display: inline;
  font-size: clamp(2.5rem, 3vw, 4.3rem);
  line-height: 1.6;
  color: #fff;
  padding: 0 19px;
  background: linear-gradient(35deg, #333 75%, #bcaa60);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  white-space: nowrap;
}
.works__4-bottom picture {
  width: 91%;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  max-height: 351px;
  aspect-ratio: 643 / 351;
  position: relative;
}
.works__4-bottom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.works__4-bottom picture::after {
  content: "";
  width: 85%;
  height: 100%;
  background: linear-gradient(53deg, #fbe01d -15%, #c8c9c9 30%);
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  bottom: calc(-1 * min(80px, 5.7vw));
  left: 0;
}
@media (max-width: 767px) {
  .works__4-top::before {
    display: none;
  }
  .works__4-top picture::after {
    display: none;
  }
  .works__4-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 16px;
  }
  .works__4-top-h2 {
    grid-column: 1;
    grid-row: 1;
    width: 85vw;
    justify-self: start;
    writing-mode: horizontal-tb;
    margin-left: 7.5vw;
    margin-bottom: 36px;
  }
  .works__4-top picture {
    grid-column: 1;
    grid-row: 2;
    width: 63%;
    max-height: 343px;
    aspect-ratio: 245 / 343;
    justify-self: start;
    margin-right: 0;
  }
  .works__4-top-p {
    grid-column: 1;
    grid-row: 3;
    margin-left: 0;
    margin-left: 7.5vw;
    transform: translateY(-18px);
  }
  .works__4-top::after {
    width: 78%;
    aspect-ratio: 307 / 111;
    background: url(/assets/images/sp/works/works__4_pub-text-sp.webp) left /
      contain no-repeat;
    bottom: auto;
    left: auto;
    right: -1%;
    top: -18%;
  }
  .works__4-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin-bottom: 82px;
  }
  .works__4-bottom picture {
    width: 92%;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-height: 235px;
    aspect-ratio: 360 / 235;
  }
  .works__4-bottom picture::after {
    display: none;
  }
  .works__4-bottom-p-1 {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    margin-right: 0;
    margin-left: 7.5vw;
    transform: translateY(-18px);
    margin-bottom: 7px;
  }
  .works__4-bottom-p-2 {
    grid-column: 1;
    grid-row: 3;
    width: 85vw;
    justify-self: center;
    margin-left: 0;
  }
}