.p-project-detail {
  --project-inner: calc(1040 * var(--to-rem));
  --project-heading-color: #1f1f1f;
  --project-text-color: #555;
  --project-text-sub: #666;
  --project-label-color: #8a8a8a;
  --project-value-color: #444;
  --project-border: #e2e2e2;
  --project-border-light: #eee;
  --project-border-button: #d4d4d4;
  --project-band-bg: #f4f3f1;
  overflow-x: clip;
  background-color: var(--color-white);
}

.p-project-detail[data-alt-background=off] {
  --project-band-bg: var(--color-white);
}

.p-project-detail__inner {
  width: 100%;
  max-width: var(--project-inner);
  margin-inline: auto;
}
@media screen and (max-width: 767px) {
  .p-project-detail__inner {
    padding-inline: calc(24 * var(--to-rem));
  }
}

.p-project-hero {
  --project-hero-en-color: #e8ebf0;
  --project-hero-location-color: #d7dbe2;
  --project-hero-border: rgb(255 255 255 / 55%);
  --project-hero-shadow: rgb(0 0 0 / 35%);
  --project-hero-overlay: linear-gradient(180deg, rgb(20 26 38 / 35%) 0%, rgb(20 26 38 / 0%) 32%, rgb(20 26 38 / 15%) 60%, rgb(20 26 38 / 72%) 100%);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 92vh;
  min-height: calc(600 * var(--to-rem));
}

.p-project-hero__image {
  position: absolute;
  inset: 0;
}

.p-project-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-project-hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--project-hero-overlay);
}

.p-project-hero__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: calc(1600 * var(--to-rem));
  margin-inline: auto;
  padding-block-end: calc(72 * var(--to-rem));
  padding-inline: calc(44 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-hero__body {
    padding-inline: calc(24 * var(--to-rem));
  }
}

.p-project-hero__en {
  margin-block-end: calc(18 * var(--to-rem));
  color: var(--project-hero-en-color);
  font-family: var(--font-en);
  font-size: calc(19 * var(--to-rem));
  font-weight: var(--fw-light);
  line-height: 1.4;
  letter-spacing: 0.32em;
}
@media screen and (max-width: 767px) {
  .p-project-hero__en {
    font-size: calc(15 * var(--to-rem));
    letter-spacing: 0.24em;
  }
}

.p-project-hero__title {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: calc(64 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-shadow: 0 calc(2 * var(--to-rem)) calc(24 * var(--to-rem)) var(--project-hero-shadow);
}
@media screen and (max-width: 767px) {
  .p-project-hero__title {
    font-size: calc(40 * var(--to-rem));
  }
}

.p-project-hero__categories {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 * var(--to-rem));
  margin: 0;
  margin-block-start: calc(26 * var(--to-rem));
  padding: 0;
  list-style: none;
}

.p-project-hero__category {
  padding-block: calc(8 * var(--to-rem));
  padding-inline: calc(18 * var(--to-rem));
  border: 1px solid var(--project-hero-border);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.08em;
  backdrop-filter: blur(calc(4 * var(--to-rem)));
}

.p-project-hero__location {
  margin-block-start: calc(24 * var(--to-rem));
  color: var(--project-hero-location-color);
  font-family: var(--font-body);
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.14em;
}

.p-project-hero__scroll {
  position: absolute;
  bottom: calc(26 * var(--to-rem));
  left: 50%;
  color: rgba(255, 255, 255, 0.85);
  translate: -50% 0;
  animation: p-project-hero-float 2.4s ease-in-out infinite;
}

@keyframes p-project-hero-float {
  0%, 100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% calc(8 * var(--to-rem));
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-project-hero__scroll {
    animation: none;
  }
}
body.single-project .p-header.is-lower .p-header__logo-img--light {
  visibility: visible;
  opacity: 1;
}

body.single-project .p-header.is-lower .p-header__logo-img--dark {
  visibility: hidden;
  opacity: 0;
}

body.single-project .p-header.is-lower .p-header__nav-link {
  color: var(--color-white);
}

body.single-project .p-header.is-lower .p-header__menu {
  color: var(--color-white);
}

body.single-project .p-header.is-lower .p-header__menu-lines span {
  background-color: var(--color-white);
}

.p-project-concept {
  padding-block: calc(130 * var(--to-rem)) calc(120 * var(--to-rem));
  background-color: var(--color-bg-dark);
  text-align: center;
}

.p-project-concept__label {
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--to-rem));
  align-items: center;
  margin-block-end: calc(36 * var(--to-rem));
}

.p-project-concept__line {
  width: 1px;
  height: calc(48 * var(--to-rem));
  background-color: var(--color-white);
}

.p-project-concept__en {
  color: var(--color-white);
  font-family: var(--font-en);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.p-project-concept__lead {
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: calc(27 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 2;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-project-concept__lead {
    font-size: calc(21 * var(--to-rem));
  }
}

.p-project-concept__text {
  margin-block-start: calc(34 * var(--to-rem));
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 2.2;
  letter-spacing: 0;
}

.p-project-aerial__image {
  width: 100%;
  height: calc(640 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-aerial__image {
    height: calc(300 * var(--to-rem));
  }
}

.p-project-aerial__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p-project-features {
  margin-block-start: calc(120 * var(--to-rem));
}

.p-project-features__item {
  --feature-image-basis: 50%;
  --feature-body-basis: 50%;
}

.p-project-features__item:nth-child(even) {
  background-color: var(--project-band-bg);
}

.p-project-features__item[data-ratio="3-7"] {
  --feature-image-basis: 30%;
  --feature-body-basis: 70%;
}

.p-project-features__item[data-ratio="4-6"] {
  --feature-image-basis: 40%;
  --feature-body-basis: 60%;
}

.p-project-features__item[data-ratio="6-4"] {
  --feature-image-basis: 60%;
  --feature-body-basis: 40%;
}

.p-project-features__item[data-ratio="7-3"] {
  --feature-image-basis: 70%;
  --feature-body-basis: 30%;
}

.p-project-features__row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .p-project-features__row {
    flex-direction: column;
  }
}

.p-project-features__item[data-layout=image-right] .p-project-features__row {
  flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
  .p-project-features__item[data-layout=image-right] .p-project-features__row {
    flex-direction: column;
  }
}

.p-project-features__item[data-layout=center] .p-project-features__row {
  flex-direction: column;
}

.p-project-features__image {
  position: relative;
  flex: 0 1 var(--feature-image-basis);
  align-self: stretch;
  min-height: 0;
  overflow: visible;
}
@media screen and (max-width: 767px) {
  .p-project-features__image {
    flex: none;
    align-self: auto;
    width: 100%;
  }
}

.p-project-features__item[data-layout=center] .p-project-features__image {
  flex: none;
  align-self: auto;
  width: 100%;
}

.p-project-features__image img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .p-project-features__image img {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-height: none;
    transform: none;
  }
}

.p-project-features__item[data-layout=center] .p-project-features__image img {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  max-height: none;
  transform: none;
}

.p-project-features__item[data-image-height=auto] .p-project-features__image {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.p-project-features__item[data-image-height=auto] .p-project-features__image img {
  position: static;
  top: auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100vh;
  transform: none;
}

.p-project-features__item[data-image-height=half] .p-project-features__image,
.p-project-features__item[data-image-height=full] .p-project-features__image {
  overflow: hidden;
}

.p-project-features__item[data-image-height=half] .p-project-features__image {
  height: 50vh;
  min-height: 0;
}

.p-project-features__item[data-image-height=full] .p-project-features__image {
  height: 100vh;
  min-height: 0;
}

.p-project-features__item[data-image-height=half] .p-project-features__image img,
.p-project-features__item[data-image-height=full] .p-project-features__image img {
  position: absolute;
  inset: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  transform: none;
}

.p-project-features__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 var(--feature-body-basis);
  flex-direction: column;
  justify-content: center;
  padding-block: calc(88 * var(--to-rem));
  padding-inline: calc(72 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-features__body {
    flex: none;
    width: 100%;
    padding-block: calc(40 * var(--to-rem));
    padding-inline: calc(24 * var(--to-rem));
  }
}

.p-project-features__item[data-layout=center] .p-project-features__body {
  flex: none;
  width: 100%;
}

.p-project-features__label {
  display: flex;
  gap: calc(14 * var(--to-rem));
  align-items: center;
  margin-block-end: calc(22 * var(--to-rem));
}

.p-project-features__number {
  color: var(--accent);
  font-family: var(--font-en);
  font-size: calc(34 * var(--to-rem));
  font-weight: var(--fw-light);
  line-height: 1;
  letter-spacing: 0;
}

.p-project-features__en {
  color: var(--accent);
  font-family: var(--font-en);
  font-size: calc(12 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.p-project-features__title {
  color: var(--project-heading-color);
  font-family: var(--font-body);
  font-size: calc(30 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 767px) {
  .p-project-features__title {
    font-size: calc(26 * var(--to-rem));
  }
}

.p-project-features__text {
  margin-block-start: calc(26 * var(--to-rem));
  color: var(--project-text-color);
  font-family: var(--font-body);
  font-size: calc(16 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 2.15;
  letter-spacing: 0;
}

.p-project-heading {
  display: flex;
  flex-wrap: wrap;
  gap: calc(14 * var(--to-rem));
  justify-content: center;
  align-items: center;
  margin-block-end: calc(44 * var(--to-rem));
  text-align: center;
}

.p-project-heading__en {
  color: var(--accent);
  font-family: var(--font-en);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.p-project-heading__ja {
  flex-basis: 100%;
  margin-block-start: calc(8 * var(--to-rem));
  color: var(--project-heading-color);
  font-family: var(--font-body);
  font-size: calc(30 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.45;
  letter-spacing: 0.06em;
}

.p-project-gallery {
  padding-block: calc(120 * var(--to-rem));
  background-color: var(--color-bg-dark);
}

.p-project-gallery .p-project-heading__en,
.p-project-gallery .p-project-heading__ja {
  color: var(--color-white);
}

.p-project-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(16 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.p-project-gallery__item {
  overflow: hidden;
  aspect-ratio: 4/3;
}

.p-project-gallery__item:nth-child(1) {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

.p-project-gallery__item:nth-child(6) {
  grid-column: span 2;
  aspect-ratio: 16/9;
}

.p-project-gallery__item:nth-child(2),
.p-project-gallery__item:nth-child(7) {
  position: relative;
  aspect-ratio: auto;
}

@media screen and (max-width: 767px) {
  .p-project-gallery__item:nth-child(7) {
    aspect-ratio: 4/3;
  }
}

.p-project-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: scale;
  transition: scale var(--duration);
}

.p-project-gallery__item:nth-child(2) img,
.p-project-gallery__item:nth-child(7) img {
  position: absolute;
  inset: 0;
}

@media (any-hover: hover) and (prefers-reduced-motion: no-preference) {
  .p-project-gallery__item:hover img {
    scale: 1.05;
  }
}
.p-project-data {
  padding-block: calc(120 * var(--to-rem));
}

.p-project-data__table {
  width: 100%;
  border-collapse: collapse;
}

.p-project-data__label {
  width: 26%;
  padding-block: calc(20 * var(--to-rem));
  padding-inline: calc(20 * var(--to-rem)) calc(8 * var(--to-rem));
  border-block-end: 1px solid var(--project-border);
  border-inline-start: 2px solid var(--accent);
  color: var(--project-heading-color);
  font-family: var(--font-body);
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-medium);
  line-height: 1.45;
  vertical-align: top;
  letter-spacing: 0.04em;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .p-project-data__label {
    width: 36%;
  }
}

.p-project-data__value {
  padding-block: calc(20 * var(--to-rem));
  padding-inline: calc(24 * var(--to-rem));
  border-block-end: 1px solid var(--project-border);
  color: var(--project-text-color);
  font-family: var(--font-body);
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.9;
  vertical-align: top;
  letter-spacing: 0;
}

.p-project-data__table tr:first-child .p-project-data__label,
.p-project-data__table tr:first-child .p-project-data__value {
  border-block-start: 1px solid var(--project-border);
}

.p-project-data__table tr:last-child .p-project-data__value {
  line-height: 2.1;
}

.p-project-data__sub {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(14 * var(--to-rem)) calc(40 * var(--to-rem));
  margin-block-start: calc(44 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-data__sub {
    grid-template-columns: 1fr;
  }
}

.p-project-data__sub-item {
  display: flex;
  gap: calc(16 * var(--to-rem));
  padding-block: calc(14 * var(--to-rem));
  border-block-end: 1px solid var(--project-border-light);
}

.p-project-data__sub-label {
  flex: 0 0 calc(96 * var(--to-rem));
  color: var(--project-label-color);
  font-family: var(--font-body);
  font-size: calc(13 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0;
}

.p-project-data__sub-value {
  color: var(--project-value-color);
  font-family: var(--font-body);
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0;
}

.p-project-back {
  padding-block-end: calc(130 * var(--to-rem));
  text-align: center;
}

.p-project-back .p-project-detail__inner {
  padding-inline: calc(44 * var(--to-rem));
}
@media screen and (max-width: 767px) {
  .p-project-back .p-project-detail__inner {
    padding-inline: calc(24 * var(--to-rem));
  }
}

.p-project-back__text {
  color: var(--project-text-sub);
  font-family: var(--font-body);
  font-size: calc(15 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.p-project-back__button {
  margin-block-start: calc(26 * var(--to-rem));
}

.p-project-back__link {
  display: inline-flex;
  gap: calc(12 * var(--to-rem));
  align-items: center;
  padding-block: calc(18 * var(--to-rem));
  padding-inline: calc(44 * var(--to-rem));
  border: 1px solid var(--project-border-button);
  transition: background-color var(--duration), border-color var(--duration);
}

.p-project-back__icon {
  display: flex;
}

.p-project-back__icon svg {
  stroke: var(--accent);
  transition: stroke var(--duration);
}

.p-project-back__label {
  color: var(--project-heading-color);
  font-family: var(--font-en);
  font-size: calc(14 * var(--to-rem));
  font-weight: var(--fw-regular);
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color var(--duration);
}

@media (any-hover: hover) {
  .p-project-back__link:hover {
    border-color: var(--accent);
    background-color: var(--accent);
  }
  .p-project-back__link:hover .p-project-back__icon svg {
    stroke: var(--color-white);
  }
  .p-project-back__link:hover .p-project-back__label {
    color: var(--color-white);
  }
}