:root {
  color:#223936;
  background:#fff8e8;
  font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic","Noto Sans JP",sans-serif;
  font-synthesis:none;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }

body {
  padding:0 clamp(20px,6vw,88px);
  background:linear-gradient(90deg,rgba(201,83,12,.045),transparent 22%),#fff8e8;
}

.site-header {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  border-bottom:1px solid #d5c4a8;
}

.logo {
  display:block;
  color:#223936;
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.12em;
  text-decoration:none;
}

.back-link {
  color:#ad470d;
  font-size:.82rem;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding:.55rem 0;
}

main {
  width:min(100%,960px);
  margin:0 auto;
  padding:clamp(64px,10vw,130px) 0 80px;
}

.title-block {
  display:grid;
  grid-template-columns:minmax(180px,280px) minmax(0,1fr);
  column-gap:clamp(40px,8vw,110px);
  align-items:start;
  margin-bottom:clamp(70px,10vw,120px);
}

.eyebrow {
  grid-column:1/-1;
  margin:0 0 1.2rem;
  color:#c9530c;
  font-size:.7rem;
  letter-spacing:.2em;
}

h1 {
  margin:0;
  font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  font-size:clamp(3.8rem,9vw,7rem);
  font-weight:700;
  line-height:.95;
  color:#223936;
}

.lead {
  margin:.35rem 0 0;
  color:#566965;
  font-size:clamp(.95rem,1.6vw,1.08rem);
  line-height:2;
}

section {
  display:grid;
  grid-template-columns:minmax(150px,230px) minmax(0,1fr);
  gap:clamp(30px,7vw,90px);
  padding:42px 0;
  border-top:1px solid #d5c4a8;
}

h2 {
  margin:0;
  color:#c9530c;
  font-size:.82rem;
  letter-spacing:.14em;
}

section p { margin:0 0 1rem; line-height:1.9; }
.credits { margin:0; display:grid; gap:2.3rem; }

.credits div {
  display:grid;
  grid-template-columns:minmax(90px,130px) minmax(0,1fr);
  gap:.65rem 1.5rem;
}

dt {
  grid-row:1/4;
  color:#566965;
  font-size:.8rem;
}

dd { margin:0; }
a { color:#2d78b6; text-underline-offset:.22em; }

.note {
  margin:48px 0 0;
  color:#6b7774;
  font-size:.82rem;
}

footer {
  width:min(100%,960px);
  margin:0 auto;
  padding:28px 0 44px;
  border-top:1px solid #d5c4a8;
  color:#7a8582;
  font-size:.72rem;
}

footer p { margin:0; }

@media(max-width:680px) {
  body { padding:0 18px; }
  .site-header { min-height:92px; }
  main { padding:54px 0 60px; }

  .title-block,section { grid-template-columns:1fr; }

  .title-block {
    gap:1.8rem;
    margin-bottom:64px;
  }

  h1 { font-size:4.4rem; }

  section {
    gap:1.6rem;
    padding:34px 0;
  }

  .credits div {
    grid-template-columns:1fr;
    gap:.65rem;
  }

  dt { grid-row:auto; margin-bottom:.2rem; }
}