@charset "UTF-8";
/* works-detail.css - 施工事例詳細ページ */
/* --------------------------------------------
   Works Detail page styles
-------------------------------------------- */

.p-worksDetail {
  --layout-width: min(996px, calc(100vw - 40px));
  --hero-width: var(--layout-width);
  --hero-image-height: calc(var(--hero-width) * 560 / 996);
  --hero-gray-cut: calc(60px + var(--hero-image-height) * 470 / 560);
  --hero-overlap: calc(var(--hero-width) * 90 / 996);
  background-color: var(--color-bg);
}

/* Hero */
.p-worksDetail__hero {
  display: flex;
  justify-content: center;
  padding-block-start: 60px;
  position: relative;
  z-index: 2;
}
.p-worksDetail__hero::before {
  background-color: var(--color-bg);
  border-block-end: 1px solid var(--color-border);
  content: "";
  height: var(--hero-gray-cut);
  inset-block-start: 0;
  inset-inline: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.p-worksDetail__heroImg {
  box-sizing: border-box;
  flex-shrink: 0;
  width: var(--layout-width);
  aspect-ratio: 996/560;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.p-worksDetail__heroImg img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  width: 100%;
}
@media (max-width: 767.98px) {
  .p-worksDetail {
    --hero-width: 100vw;
    --hero-image-height: calc(var(--hero-width) * 9 / 16);
    --hero-gray-cut: calc(40px + var(--hero-image-height) * 470 / 560);
    --hero-overlap: calc(var(--hero-image-height) * 90 / 560);
  }
  .p-worksDetail__hero {
    padding-block-start: 40px;
  }
  .p-worksDetail__heroImg {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* Heading + Data */
.p-worksDetail__heading {
  background-color: #fff;
  border-block-end: 1px solid var(--color-border);
  margin-block-start: calc(var(--hero-overlap) * -1);
  padding-block: 150px 100px;
  position: relative;
  z-index: 1;
}

.p-worksDetail__headingInner {
  display: flex;
  gap: 40px;
  justify-content: space-between;
}
@media (max-width: 767.98px) {
  .p-worksDetail__headingInner {
    flex-direction: column;
  }
}

/* Title */
.p-worksDetail__title {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 500px;
}

.p-worksDetail__titleTxt {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-worksDetail__titleLine span {
  border-block-end: 1px solid #222;
  display: inline-block;
  font-feature-settings: "palt" on;
  font-size: clamp(var(--fs-32), 3.125vw, 2.8125rem);
  font-weight: 500;
  letter-spacing: 2.25px;
  line-height: 1.5;
  padding-block-end: 5px;
}
@media (max-width: 767.98px) {
  .p-worksDetail__titleLine span {
    font-size: var(--fs-28);
  }
}

.p-worksDetail__lead {
  color: #222;
  font-feature-settings: "palt" on;
  font-weight: 500;
  letter-spacing: 0.75px;
  line-height: 2.3;
}
.p-worksDetail__lead p + p {
  margin-block-start: 0;
}

/* Data card */
.p-worksDetail__data {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  flex-shrink: 0;
  padding: 40px;
}

.p-worksDetail__dataTtl {
  align-items: center;
  color: #222;
  display: flex;
  gap: 20px;
  margin-block-end: 20px;
}
.p-worksDetail__dataTtl .en {
  font-family: var(--font-family-en);
  font-size: var(--fs-28);
  font-weight: 500;
  letter-spacing: 1.4px;
  line-height: 1;
}
.p-worksDetail__dataTtl .jp {
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: 0.75px;
  line-height: 1.8;
}

.p-worksDetail__dataList {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(2, 160px);
}
@media (max-width: 767.98px) {
  .p-worksDetail__dataList {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-worksDetail__dataItem {
  border-block-end: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-block: 10px;
}
.p-worksDetail__dataItem dt {
  color: var(--color-sub);
  font-feature-settings: "palt" on;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 0.65px;
  line-height: 1.6;
}
.p-worksDetail__dataItem dd {
  color: #222;
  font-feature-settings: "palt" on;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: 0.75px;
  line-height: 1.6;
}

/* Content body */
.p-worksDetail__body {
  background-color: var(--color-bg);
  padding-block: 100px 150px;
}

@media (min-width: 768px) {
  .p-worksDetail__body {
    align-items: center;
    display: flex;
    flex-direction: column;
  }
}

.p-worksDetail__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-inline: auto;
  padding-inline: 0;
}
@media (min-width: 768px) {
  .p-worksDetail__content {
    flex-shrink: 0;
    min-width: 0;
    width: var(--layout-width);
  }
}
@media (max-width: 767.98px) {
  .p-worksDetail__content {
    gap: 50px;
    padding-inline: 20px;
    width: 100%;
  }
}

.p-worksDetail__txt {
  color: #222;
  font-feature-settings: "palt" on;
  font-size: var(--fs-15);
  font-weight: 500;
  letter-spacing: 0.75px;
  line-height: 2.3;
  text-align: center;
}
@media (max-width: 767.98px) {
  .p-worksDetail__txt {
    text-align: left;
  }
}

.p-worksDetail__images {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.p-worksDetail__img {
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
.p-worksDetail__img img {
  display: block;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}
.p-worksDetail__img--ratio43 {
  aspect-ratio: 4 / 3;
}
.p-worksDetail__img--standard {
  aspect-ratio: 786 / 590;
}
.p-worksDetail__img--portrait {
  aspect-ratio: 786 / 1048;
}

.p-worksDetail__navItem--prev.is-disabled {
  background-color: #f5f5f5;
}
.p-worksDetail__navItem--prev.is-disabled .p-worksDetail__navArw {
  transform: rotate(180deg);
}

/* Prev / Next navigation */
.p-worksDetail__nav {
  background-color: var(--color-bg);
  border-block-start: 1px solid #c8c8c8;
  overflow-x: auto;
}

.p-worksDetail__navInner {
  --nav-h: clamp(110px, 12.5vw, 180px);
  --nav-gap: clamp(10px, 2.083vw, 30px);
  --nav-thumb-w: clamp(70px, 10.417vw, 150px);
  --nav-thumb-h: clamp(53px, 7.847vw, 113px);
  --nav-txt-w: clamp(88px, 13.889vw, 200px);
  --nav-font: clamp(11px, 1.042vw, 15px);
  --nav-list-px: clamp(14px, 5.694vw, 82px);
  --nav-side-px: clamp(12px, 8.333vw, 120px);
  --nav-arw-w: clamp(10px, 1.042vw, 15px);
  --nav-arw-h: clamp(9px, 0.92vw, 13.246px);
  align-items: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  min-height: var(--nav-h);
  min-width: 320px;
}

.p-worksDetail__navItem {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  gap: var(--nav-gap);
  height: var(--nav-h);
  min-width: 0;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.p-worksDetail__navItem:hover {
  background-color: #f0f0f0;
}
.p-worksDetail__navItem--prev {
  border-inline-end: 1px solid #d5d5d5;
  grid-column: 1;
  grid-row: 1;
  justify-self: stretch;
  max-width: none;
  padding-inline-start: var(--nav-side-px);
  width: 100%;
}
.p-worksDetail__navItem--next {
  background-color: #f5f5f5;
  border-block-start: 1px solid #d5d5d5;
  border-inline-start: 1px solid #d5d5d5;
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
  justify-self: stretch;
  max-width: none;
  padding-inline-end: var(--nav-side-px);
  width: 100%;
}
.p-worksDetail__navItem.is-disabled {
  cursor: default;
  pointer-events: none;
}
.p-worksDetail__navItem.is-disabled .p-worksDetail__navTxt {
  color: #c8c8c8;
}
.p-worksDetail__navItem.is-disabled .p-worksDetail__navThumb.is-empty {
  background-color: #e5e8ea;
}

.p-worksDetail__navArw {
  flex-shrink: 0;
  height: var(--nav-arw-h);
  width: var(--nav-arw-w);
}
.p-worksDetail__navArw img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.p-worksDetail__navItem--prev .p-worksDetail__navArw {
  transform: rotate(180deg);
}

.p-worksDetail__navThumb {
  border-radius: 0;
  flex-shrink: 0;
  height: var(--nav-thumb-h);
  overflow: hidden;
  width: var(--nav-thumb-w);
}
.p-worksDetail__navThumb img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.p-worksDetail__navTxt {
  color: #222;
  flex-shrink: 1;
  font-feature-settings: "palt" on;
  font-size: var(--nav-font);
  font-weight: 500;
  letter-spacing: 0.75px;
  line-height: 1.8;
  min-width: 0;
  text-align: justify;
  width: var(--nav-txt-w);
}

.p-worksDetail__navList {
  align-items: center;
  border-inline: 1px solid #d5d5d5;
  box-sizing: border-box;
  color: #222;
  display: flex;
  font-feature-settings: "palt" on;
  font-size: var(--nav-font);
  font-weight: 500;
  grid-column: 2;
  grid-row: 1;
  height: var(--nav-h);
  justify-content: center;
  justify-self: center;
  letter-spacing: 0.75px;
  line-height: 1.8;
  padding-inline: var(--nav-list-px);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}
.p-worksDetail__navList:hover {
  background-color: #f0f0f0;
}

/* Navigation responsive */
@media (max-width: 767.98px) {
  .p-worksDetail__heading {
    padding-block: 80px 60px;
  }
  .p-worksDetail__body {
    padding-block: 60px 80px;
  }

  .p-worksDetail__nav {
    background-color: #fff;
    overflow-x: visible;
  }
  .p-worksDetail__navInner {
    border-block: 0.5px solid #d5d5d5;
    min-height: 0;
    min-width: 0;
  }
  .p-worksDetail__navItem {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    height: auto;
  }
  .p-worksDetail__navItem--prev {
    background-color: #fff;
    border-inline-end: 0.5px solid #d5d5d5;
    padding: 20px 10px 10px 20px;
  }
  .p-worksDetail__navItem--prev.is-disabled {
    background-color: #f5f5f5;
  }
  .p-worksDetail__navItem--next {
    align-items: flex-end;
    background-color: #fff;
    border-block-start: none;
    border-inline-start: 0.5px solid #d5d5d5;
    padding: 20px 20px 10px 10px;
  }
  .p-worksDetail__navItem--next.is-disabled {
    background-color: #f5f5f5;
  }
  .p-worksDetail__navArw {
    height: 8.831px;
    order: 1;
    width: 10px;
  }
  .p-worksDetail__navTxt {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    flex-shrink: 0;
    font-size: var(--fs-13);
    height: 45px;
    letter-spacing: 0.65px;
    line-height: 1.6;
    order: 2;
    overflow: hidden;
    text-align: justify;
    text-overflow: ellipsis;
    width: 100%;
  }
  .p-worksDetail__navItem--next .p-worksDetail__navTxt {
    text-align: right;
  }
  .p-worksDetail__navThumb {
    aspect-ratio: 150 / 113;
    height: auto;
    order: 3;
    width: 100%;
  }
  .p-worksDetail__navList {
    align-self: stretch;
    border-inline: 0.5px solid #d5d5d5;
    font-size: var(--fs-12);
    height: auto;
    letter-spacing: 0.6px;
    line-height: 2.3;
    padding-inline: 20px;
  }
}