:root {
  --ink: #26383c;
  --soft-ink: #5e7276;
  --aqua: #dceff0;
  --pale: #f3f9f9;
  --line: rgba(38,56,60,.15);
  --serif: "Times New Roman", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Yu Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: var(--sans);
  line-height: 1.9;
  letter-spacing: .035em;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
.detail-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1240px, calc(100% - 48px));
  height: 88px;
  margin: 0 auto;
}
.brand { display: block; width: clamp(68px,7vw,92px); }
.brand img { width: 100%; height: auto; }
.back-link { font-size: .76rem; letter-spacing: .12em; color: var(--soft-ink); }
.back-link span { display: inline-block; margin-right: 8px; transition: transform .25s ease; }
.back-link:hover span { transform: translateX(-4px); }
.hero {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(480px,1.28fr);
  align-items: center;
  gap: clamp(50px,8vw,120px);
  width: min(1240px, calc(100% - 48px));
  min-height: calc(100vh - 88px);
  margin: 0 auto;
  padding: 40px 0 100px;
}
.eyebrow, .section-label, .step-tool {
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #739096;
}
.hero h1 {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: clamp(3.1rem,6.5vw,6.4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.025em;
}
.lead { max-width: 430px; margin-top: 36px; color: var(--soft-ink); }
.project-data { margin-top: 54px; border-top: 1px solid var(--line); }
.project-data div {
  display: grid;
  grid-template-columns: 100px 1fr;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: .78rem;
}
.project-data dt { color: #8ca0a3; }
.hero-visual { overflow: hidden; border-radius: 2px; box-shadow: 0 30px 80px rgba(55,93,99,.12); }
.concept {
  padding: clamp(100px,15vw,190px) max(24px,calc((100vw - 1040px)/2));
  background: var(--pale);
  text-align: center;
}
.section-no {
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #739096;
}
.concept h2, .section-heading h2 {
  font-family: var(--serif);
  font-size: clamp(2.3rem,5vw,4.5rem);
  font-weight: 400;
  line-height: 1.3;
}
.body-copy { max-width: 680px; margin: 40px auto 0; color: var(--soft-ink); }
.process { width: min(1120px,calc(100% - 48px)); margin: 0 auto; padding: clamp(100px,15vw,190px) 0; }
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: clamp(90px,12vw,150px);
}
.section-heading > p { max-width: 390px; color: var(--soft-ink); }
.process-step {
  display: grid;
  grid-template-columns: minmax(240px,.65fr) minmax(420px,1.35fr);
  align-items: center;
  gap: clamp(50px,9vw,120px);
  margin-top: clamp(100px,15vw,180px);
}
.process-step.is-reverse { grid-template-columns: minmax(420px,1.35fr) minmax(240px,.65fr); }
.process-step.is-reverse .step-copy { order: 2; }
.process-step.is-reverse .step-image { order: 1; }
.step-number { display: block; margin-bottom: 36px; font-family: var(--serif); font-size: 2.7rem; color: #bed2d5; }
.step-copy h3 { margin-top: 12px; font-family: var(--serif); font-size: clamp(1.7rem,3vw,2.6rem); font-weight: 400; }
.step-copy > p:last-child { margin-top: 25px; color: var(--soft-ink); }
.step-image { padding: clamp(18px,3vw,34px); background: var(--pale); }
.step-image.product-image { background: linear-gradient(135deg,#f2f8f8,#dfeff1); }
.step-image figcaption { margin-top: 13px; font-family: var(--serif); font-size: .68rem; letter-spacing: .16em; color: #8ca0a3; }
.final { padding: clamp(100px,14vw,180px) max(24px,calc((100vw - 1080px)/2)); background: #e9f4f5; text-align: center; }
.final .section-label { margin-bottom: 40px; }
.final img { box-shadow: 0 30px 80px rgba(55,93,99,.16); }
.bottom-nav {
  display: flex;
  justify-content: space-between;
  width: min(1080px,calc(100% - 48px));
  margin: 0 auto;
  padding: 70px 0;
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .1em;
}
footer { padding: 28px 24px; border-top: 1px solid var(--line); text-align: center; font-size: .68rem; color: #91a2a5; }
@media (max-width: 800px) {
  .detail-header { width: min(100% - 32px,1240px); height: 72px; }
  .hero { grid-template-columns: 1fr; width: min(100% - 32px,640px); min-height: auto; padding: 55px 0 100px; }
  .hero-visual { order: -1; }
  .concept { padding-inline: 24px; }
  .process { width: min(100% - 32px,640px); }
  .section-heading { display: block; }
  .section-heading > p { margin-top: 30px; }
  .process-step, .process-step.is-reverse { grid-template-columns: 1fr; gap: 42px; }
  .process-step.is-reverse .step-copy, .process-step.is-reverse .step-image { order: initial; }
  .step-image { padding: 16px; }
  .bottom-nav { width: calc(100% - 32px); }
}