:root {
  color-scheme: light;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  color: #292332;
  background: #faf5f3;
  line-height: 1.8;
}

body { margin: 0; }

header, main {
  max-width: 42rem;
  margin: 0 auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

header {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 1rem;
  border-bottom: 1px solid #decfdc;
}

a { color: #674477; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #674477; outline-offset: 4px; }
.brand { font-size: 1.25rem; font-weight: 750; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .9rem; }
nav a[aria-current="page"] { font-weight: 700; }

main { padding-block: clamp(2rem, 7vw, 4rem); }
h1 { margin: 0; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.35; }
.intro { color: #554b61; margin: .8rem 0 2.4rem; }
section { border-top: 1px solid #decfdc; padding-block: 1.15rem; }
h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
p { margin: 0 0 .75rem; }
dl { margin: 0; }
dt { font-weight: 700; }
dd { margin: 0 0 1rem; }
.contact { display: inline-block; overflow-wrap: anywhere; }