/* Nine product details: one header cell and two content cells per product. */
.item-details__section {
  position: relative;
  scroll-margin-top: calc(110 * var(--u));
}

/* Keep the lineup-to-details boundary and later item boundaries free of top rules. */
.page main > #items > .item-details__section,
#items + .notice-area { border-top: 0; }

.item-details__header {
  height: calc(284 * var(--u));
  padding: 0 calc(var(--gutter) + var(--pad)) calc(38 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pad);
  border-bottom: 1px solid var(--ink);
}

.item-details__header .section-title { margin: 0; }
.item-details__section:not(:first-child) .item-details__header { justify-content: flex-end; }
.item-details__section.is-reverse .item-details__header { justify-content: flex-start; }
@media (min-width: 768px) {
  .item-details__section:not(:first-child) .item-details__header {
    height: calc(459 * var(--u));
  }
}
.item-details__number {
  flex: none;
  font-size: calc(40 * var(--u));
  line-height: 1;
  letter-spacing: .1em;
}

.item-details__layout {
  min-height: calc(2 * var(--cell));
  margin-inline: var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.item-details__visual,
.item-details__info { min-width: 0; grid-row: 1; }

.item-details__visual {
  grid-column: 1 / 3;
  padding: var(--pad);
  scroll-margin-top: clamp(0px, calc((100svh - 2 * var(--cell)) / 2), calc(110 * var(--u)));
}

.item-details__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.item-details__info {
  grid-column: 3 / 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad);
}

.item-details__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: calc(18 * var(--u));
  row-gap: calc(8 * var(--u));
}

.item-details__name h3 {
  display: flex;
  align-items: center;
  gap: calc(15 * var(--u));
  font-size: calc(40 * var(--u));
  line-height: 1.12;
  letter-spacing: .07em;
}

.item-details__name .cross {
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
}

.item-details__subtitle {
  font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  letter-spacing: .05em;
}

.item-details__description {
  margin-top: calc(26 * var(--u));
  font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-size: calc(15 * var(--u));
  line-height: 1.75;
  letter-spacing: .06em;
}

.item-details__price {
  margin-top: calc(48 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  letter-spacing: .05em;
}

.item-details__price-type {
  font-size: calc(15 * var(--u));
  white-space: nowrap;
}

.item-details__note {
  margin-top: 10px;
  color: #777;
  font-family: "Zen Kaku Gothic New", "Yu Gothic", sans-serif;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
}

.item-details__note + .item-details__price { margin-top: calc(24 * var(--u)); }

.item-details__section.is-reverse .item-details__visual { grid-column: 3 / 5; }
.item-details__section.is-reverse .item-details__info { grid-column: 1 / 3; }

@media (min-width: 768px) and (max-width: 1199px) {
  .item-details__name h3 { font-size: clamp(20px, 2.1vw, 32px); }
  .item-details__subtitle { font-size: clamp(11px, 1.1vw, 16px); }
  .item-details__description { font-size: clamp(12px, 1.2vw, 15px); }
  .item-details__price { font-size: clamp(18px, 1.8vw, 24px); }
}

@media (max-width: 767px) {
  .item-details__section { scroll-margin-top: 19vw; }
  .item-details__header {
    height: 46vw;
    padding: 0 8vw 5vw;
  }
  .item-details__section:not(:first-child) .item-details__header { height: 40vw; }
  .item-details__number { font-size: 5vw; }
  .item-details__layout {
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-inline: 4vw;
  }
  .item-details__visual { padding: 4vw; scroll-margin-top: 19vw; }
  .item-details__info { padding: 6vw 4vw 10vw; }
  .item-details__name { column-gap: 2vw; row-gap: 1vw; }
  .item-details__name h3 {
    gap: 2vw;
    font-size: clamp(20px, 5.5vw, 32px);
    letter-spacing: .04em;
  }
  .item-details__name .cross { width: 4vw; height: 4vw; }
  .item-details__subtitle { font-size: clamp(11px, 3vw, 15px); }
  .item-details__description {
    margin-top: 5vw;
    font-size: clamp(13px, 3.4vw, 17px);
    line-height: 1.8;
  }
  .item-details__price {
    margin-top: 7vw;
    font-size: clamp(18px, 5vw, 26px);
  }
  .item-details__price-type { font-size: clamp(12px, 3vw, 15px); }
  .item-details__note + .item-details__price { margin-top: 5vw; }
}