.brand-page {
  --brand-margin: max(6vw, calc((100% - 1280px) / 2));
}
.brand-page .phead {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.45fr);
  grid-template-rows: auto 1fr auto 1fr;
  padding: clamp(28px, 4vw, 64px) var(--brand-margin);
  gap: 20px clamp(32px, 5vw, 96px);
  border: 0;
}
.brand-page .crumbs { grid-column: 1 / -1; margin-bottom: 12px; }
.brand-page .phead h1 { grid-area: 2 / 1; align-self: end; margin: 0; }
.brand-page .phead .section-heading__en { font: 500 clamp(52px, 6.8vw, 104px)/.98 var(--ff-en); letter-spacing: -.05em; }
.brand-page .phead__lead { grid-area: 3 / 1; margin: 0; line-height: 1.95; color: #d0cdca; }
.brand-page .phead > img { grid-area: 2 / 2 / 5; width: 100%; align-self: center; height: auto; }
.brand-origins, .brand-story, .brand-insole, .brand-company {
  padding: clamp(64px, 7.5vw, 120px) var(--brand-margin);
}
.brand-origins { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.brand-origins > .feature { display: flex; flex-direction: column; align-items: start; justify-content: start; gap: 20px; }
.brand-page .feature__txt p, .brand-page .spec dd { color: #d0cdca; }
.brand-story { background: #e8e4da; color: #24211d; }
.brand-story > h2 { margin-bottom: clamp(32px, 4vw, 64px); }
.brand-story h3 { font: 500 clamp(22px, 2vw, 32px)/1.55 var(--ff-mincho); margin-bottom: 18px; }
.brand-story p { line-height: 1.95; max-width: 39em; }
.brand-story p + p { margin-top: 12px; }
.story-opening { display: grid; grid-template-columns: 1.18fr 1fr; gap: 6vw; align-items: center; }
.story-opening figure { margin: 0; }
.story-opening img { display: block; width: 100%; height: auto; }
.story-ending { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; margin-top: clamp(40px, 5vw, 80px); padding-top: 36px; border-top: 1px solid #aaa69c; }
.brand-insole .feature, .brand-company .split { display: grid; grid-template-columns: 2fr 3fr; gap: 6vw; align-items: start; }
.brand-company { border-top: 1px solid var(--c-line); }
@media(max-width: 800px) {
  .brand-page { --brand-margin: clamp(20px, 5vw, 40px); }
  .brand-page .phead, .brand-origins, .story-opening, .story-ending, .brand-insole .feature, .brand-company .split { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .brand-page .phead h1 { align-self: start; }
  .brand-page .phead > img { order: 1; }
  .brand-page .phead__lead { order: 2; }
  .brand-origins { padding-top: 32px; gap: 48px; }
  .story-ending { gap: 32px; }
}