@charset "utf-8";

.pick {
  padding-block: 410px 300px;
}
.pick__content {
  max-width: 1550px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.pick__content__item {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  grid-template-columns: auto;
  place-content: center;
  place-items: center;
  box-sizing: border-box;
  padding: 10px;
}
.pick__content__item--0 {
  grid-column: 2;
  grid-row: 1;
  align-content: start;
}
.pick__content__item__heading {
  font-size: clamp(18px, calc(28 / 1200 * 100vw), 28px);
  line-height: 2.142857143;
  writing-mode: vertical-rl;
  text-orientation: upright;
  translate: 0 -100px;
  white-space: nowrap;
}
.pick__content__item--1 {
  grid-column: 1;
  grid-row: 1;
}
.pick__content__item__photo {
  position: absolute;
  z-index: -1;
  inset: 0;
}
.pick__content__item__photo img {
  height: 100%;
  object-fit: cover;
}
/* .pick__content__item__desc {
} */
.pick__content__item__desc__copy {
  font-size: clamp(14px, calc(24 / 1200 * 100vw), 24px);
  line-height: 1.75;
  text-shadow: 0 0 10px #000, 0 0 10px #000;
}
.pick__content__item__desc__caution {
  font-size: clamp(10px, calc(11 / 1200 * 100vw), 11px);
  line-height: 2.181818182;
  text-shadow: 0 0 10px #000, 0 0 10px #000;
  --margin-top: calc(30 / 11 * 1em);
}
@media screen and (max-width: 768px){
  .pick {
    padding-block: 140px 80px;
  }
  .pick__content {
    max-width: 560px;
    grid-template-columns: 100%;
    gap: 1px 0;
  }
  .pick__content__item {
    aspect-ratio: 300 / 200;
  }
  .pick__content__item--0 {
    grid-column: 1;
    aspect-ratio: initial;
    padding-bottom: 80px;
  }
  .pick__content__item__heading {
    font-size: min(calc(20 / 375 * 100vw), 20px);
    line-height: 1.5;
    translate: 0;
  }
  .pick__content__item--1 {
    grid-row: auto;
  }
  .pick__content__item__desc__copy {
    font-size: min(calc(18 / 375 * 100vw), 18px);
    line-height: 1.666666667;
    text-shadow: 0 0 5px #000, 0 0 5px #000;
  }
  .pick__content__item__desc__caution {
    font-size: min(calc(10 / 375 * 100vw), 10px);
    line-height: 2;
    text-shadow: 0 0 5px #000, 0 0 5px #000;
    --margin-top: calc(20 / 10 * 1em);
  }
}



.gallery {
  padding-block: 0 100px;
}
/* .gallery__content {
}
.gallery__content__photo {
}
.gallery__content--1 {
} */
.gallery__content--2 {
  margin-top: calc(200 / 1920 * 100%);
  grid-template-columns: minmax(0, calc(185 / 1920 * 100%)) minmax(0, calc(570 / 1920 * 100%)) minmax(0, calc(100 / 1920 * 100%)) minmax(0, calc(880 / 1920 * 100%)) minmax(0, calc(185 / 1920 * 100%));
  align-items: start;
}
.gallery__content--2 .gallery__content__photo--1 {
  grid-column: 2;
  margin-top: calc(200 / 570 * 100%);
}
.gallery__content--2 .gallery__content__photo--2 {
  grid-column: 4;
}
.gallery__content--3 {
  margin-top: calc(100 / 1920 * 100%);
  grid-template-columns: minmax(0, calc(515 / 1920 * 100%)) minmax(0, calc(1220 / 1920 * 100%)) minmax(0, calc(185 / 1920 * 100%));
  align-items: start;
}
.gallery__content--3 .gallery__content__photo--1 {
  grid-column: 2;
}
.gallery__content--4 {
  margin-top: calc(100 / 1920 * 100%);
  grid-template-columns: minmax(0, calc(185 / 1920 * 100%)) minmax(0, calc(880 / 1920 * 100%)) minmax(0, calc(100 / 1920 * 100%)) minmax(0, calc(570 / 1920 * 100%)) minmax(0, calc(185 / 1920 * 100%));
  align-items: start;
}
.gallery__content--4 .gallery__content__photo--1 {
  grid-column: 2;
  margin-top: calc(200 / 880 * 100%);
}
.gallery__content--4 .gallery__content__photo--2 {
  grid-column: 4;
}
@media screen and (max-width: 768px){
  .gallery {
    padding-block: 0;
  }
  .gallery__content--2 {
    margin-top: calc(42 / 380 * 100%);
    grid-template-columns: minmax(0, calc(140 / 380 * 100%)) minmax(0, calc(24 / 380 * 100%)) minmax(0, calc(216 / 380 * 100%));
  }
  .gallery__content--2 .gallery__content__photo--1 {
    grid-column: 1;
    margin-top: calc(50 / 140 * 100%);
  }
  .gallery__content--2 .gallery__content__photo--2 {
    grid-column: 3;
  }
  .gallery__content--3 {
    margin-top: calc(24 / 380 * 100%);
    grid-template-columns: minmax(0, 1fr) minmax(0, calc(300 / 380 * 100%));
  }
  .gallery__content--4 {
    margin-top: calc(24 / 380 * 100%);
    grid-template-columns: minmax(0, calc(216 / 380 * 100%)) minmax(0, calc(24 / 380 * 100%)) minmax(0, calc(140 / 380 * 100%));
  }
  .gallery__content--4 .gallery__content__photo--1 {
    grid-column: 1;
    margin-top: calc(50 / 216 * 100%);
  }
  .gallery__content--4 .gallery__content__photo--2 {
    grid-column: 3;
  }
}



.equip {
  padding-block: 200px 100px;
}
.equip__content {
  grid-template-columns: 100%;
  align-items: start;
  gap: 200px 0;
}
.equip__content__item {
  grid-template-columns: max(2.5%, calc(100% - 1730px)) minmax(0, 1fr) minmax(0, calc(140 / 1920 * 100%)) minmax(0, calc(550 / 1920 * 100%));
  align-items: start;
}
.equip__content__item__head {
  grid-column: 4;
  grid-row: 1;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
  top: calc(var(--header-height) + 20px);
  right: 0;
}
.equip__content__item__head__heading {
  font-size: clamp(18px, calc(28 / 1200 * 100vw), 28px);
}
.equip__content__item__head__kv {
  margin-top: 45px;
  overflow: hidden;
}
.equip__content__item__head__kv img {
  height: 100%;
  max-height: calc(45vh - var(--header-height));
  object-fit: cover;
}
.equip__content__item__nav {
  margin-top: 100px;
  grid-template-columns: auto;
  justify-content: center;
  justify-items: end;
  align-items: start;
  gap: 35px 0;
}
.equip__content__item__nav__item {
  font-size: clamp(14px, calc(20 / 1200 * 100vw), 20px);
  color: #b9b9b9;
  transition: color .4s;
}
.equip__content__item--kitchen .equip__content__item__nav__item[href="#kitchen"],
.equip__content__item--powderroom .equip__content__item__nav__item[href="#powderroom"],
.equip__content__item--bathroom .equip__content__item__nav__item[href="#bathroom"],
.equip__content__item--other .equip__content__item__nav__item[href="#other"] {
  color: #151515;
  pointer-events: none;
}
.equip__content__item__body {
  grid-column: 2;
  grid-row: 1;
}
.equip__content__item__body__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 60px calc(80 / 1040 * 100%);
}
.equip__content__item__body__list__item {
  grid-template-columns: 100%;
  align-items: start;
  gap: 20px 0;
}
/* .equip__content__item__body__list__item__photo {
}
.equip__content__item__body__list__item__desc {
} */
.equip__content__item__body__list__item__desc__name {
  font-size: clamp(12px, calc(18 / 1200 * 100vw), 18px);
  line-height: 1.636363636;
}
.equip__content__item__body__list__item__desc__type {
  max-width: fit-content;
  margin-block: 15px 0 !important;
  box-sizing: border-box;
  padding: calc(6 / 13 * 1em) .6em;
  font-size: clamp(10px, calc(13 / 1200 * 100vw), 13px);
  letter-spacing: -.1em;
}
.equip__content__item__body__list__item__desc__type--color1 {
  background: #DBE8E4;
}
.equip__content__item__body__list__item__desc__type--color2 {
  background: #EAE6F0;
}
.equip__content__item__body__list__item__desc__type--color3 {
  background: #EEEAE4;
}
.equip__content__item__body__list__item__desc__type sup {
  font-size: calc(10 / 13 * 100%);
}
.equip__content__item__body__list__item__desc__logo {
  margin-top: 15px;
}
.equip__content__item__body__list__item__desc__logo--miele {
  max-width: 110px;
}
.equip__content__item__body__list__item__desc__logo--grohe {
  max-width: 190px;
}
.equip__content__item__body__list__item__desc__logo--jaxson {
  max-width: 120px;
}
.equip__content__item__body__list__item__desc__logo--enefarm {
  margin-top: 40px;
  max-width: 200px;
}
.equip__content__item__body__list__item__desc__copy {
  --margin-top: 30px;
}
.equip__content__item__body__list__item__desc__caution {
  font-size: clamp(10px, calc(11 / 1200 * 100vw), 11px);
  line-height: 2.181818182;
  --margin-top: 15px;
}
.equip__content__item__body__list__item__desc__list {
  margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  align-items: stretch;
  gap: 10px;
}
.equip__content__item__body__list__item__desc__list__item {
  box-sizing: border-box;
  padding: 13px 10px;
  place-items: center;
  background: #F3F3F3;
}
.equip__content__item__body__list__item__desc__list__item__copy {
  font-size: clamp(10px, calc(14 / 1200 * 100vw), 14px);
  line-height: 1.428571429;
}
.equip__content__item__body__list__item__desc__list__item__copy sup {
  font-size: calc(10 / 14 * 100%);
}
.equip__content__item--other .equip__content__item__body__list {
  grid-template-columns: 100%;
  gap: 64px 0;
}
.equip__content__item--other .equip__content__item__body__list__item {
  grid-template-columns: calc(480 / 1040 * 100%) minmax(0, 1fr);
  align-items: center;
  gap: 50px calc(70 / 1040 * 100%);
}
.equip__content__item--other .equip__content__item__body__list__item__photo {
  align-self: start;
}
.equip__content__item--other .equip__content__item__body__list__item__desc__name {
  font-size: clamp(15px, calc(22 / 1200 * 100vw), 22px);
}
.equip__content__item--other .equip__content__item__body__list__item__desc__copy + .equip__content__item__body__list__item__desc__caution {
  --margin-top: 30px;
}
@media (any-hover: hover){
  .equip__content__item__nav__item:hover {
    color: #151515;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .equip__content__item__body__list__item__desc__list {
    grid-template-columns: 100%;
  }
}
@media screen and (max-width: 768px){
  .equip {
    padding-block: 100px 80px;
  }
  .equip__content {
    gap: 100px 0;
  }
  .equip__content__item {
    grid-template-columns: minmax(0, 1fr) calc(300 / 380 * 100%) minmax(0, 1fr);
    gap: 40px 0;
  }
  .equip__content__item__head {
    grid-column: 2;
    position: relative;
    top: 0;
  }
  .equip__content__item__head__heading {
    font-size: min(calc(28 / 375 * 100vw), 28px);
  }
  .equip__content__item__head__kv {
    margin-top: 30px;
    margin-inline: calc(50% - var(--window-half-width));
  }
  .equip__content__item__head__kv img {
    max-height: calc(266 / 380 * 100vw);
  }
  .equip__content__item__nav {
    margin-top: 40px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: start;
    justify-items: stretch;
    gap: 1px;
  }
  .equip__content__item__nav__item {
    font-size: min(calc(12 / 375 * 100vw), 12px);
    transition: none;
    text-align: center;
    box-sizing: border-box;
    padding: calc(16 / 12 * 1em) .5em;
    background: #F3F3F3;
  }
  .equip__content__item--kitchen .equip__content__item__nav__item[href="#kitchen"],
  .equip__content__item--powderroom .equip__content__item__nav__item[href="#powderroom"],
  .equip__content__item--bathroom .equip__content__item__nav__item[href="#bathroom"],
  .equip__content__item--other .equip__content__item__nav__item[href="#other"] {
    background: #E8E8E8;
  }
  .equip__content__item__body {
    grid-row: 2;
  }
  .equip__content__item__body__list {
    grid-template-columns: 100%;
    gap: 45px 0;
  }
  .equip__content__item__body__list__item__desc__name {
    font-size: min(calc(16 / 375 * 100vw), 16px);
    line-height: 1.5;
  }
  .equip__content__item__body__list__item__desc__type {
    margin-block: 10px 0 !important;
    padding: calc(4 / 12 * 1em) .6em;
    font-size: min(calc(12 / 375 * 100vw), 12px);
  }
  .equip__content__item__body__list__item__desc__type sup {
    font-size: calc(10 / 12 * 100%);
  }
  .equip__content__item__body__list__item__desc__logo {
    margin-top: 10px;
  }
  .equip__content__item__body__list__item__desc__logo--miele {
    max-width: 77px;
  }
  .equip__content__item__body__list__item__desc__logo--grohe {
    max-width: 150px;
  }
  .equip__content__item__body__list__item__desc__logo--jaxson {
    max-width: 84px;
  }
  .equip__content__item__body__list__item__desc__logo--enefarm {
    margin-top: 30px;
    max-width: 160px;
  }
  .equip__content__item__body__list__item__desc__copy {
    font-size: min(calc(14 / 375 * 100vw), 14px);
    --margin-top: 15px;
  }
  .equip__content__item__body__list__item__desc__caution {
    font-size: min(calc(10 / 375 * 100vw), 10px);
    line-height: 2.4;
  }
  .equip__content__item__body__list__item__desc__list {
    margin-top: 10px;
    grid-template-columns: 100%;
    gap: 5px 0;
  }
  .equip__content__item__body__list__item__desc__list__item__copy {
    font-size: min(calc(14 / 375 * 100vw), 14px);
  }
  .equip__content__item--other .equip__content__item__body__list {
    gap: 45px 0;
  }
  .equip__content__item--other .equip__content__item__body__list__item {
    grid-template-columns: 100%;
    align-items: start;
    gap: 20px 0;
  }
  .equip__content__item--other .equip__content__item__body__list__item__desc__name {
    font-size: min(calc(16 / 375 * 100vw), 16px);
  }
  .equip__content__item--other .equip__content__item__body__list__item__desc__copy + .equip__content__item__body__list__item__desc__caution {
    --margin-top: 20px;
  }
}