:root {
  --bg: #ffffff;
  --ink: #3b3d37;
  --mute: #9b9d95;
  --hush: #f1f2ee;
  --leaf: #5f6d4f;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 12px/1.8 Verdana, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--leaf); text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible { outline: 1px solid var(--leaf); outline-offset: 4px; }

.site, main, .nav { padding-left: 2.5vw; padding-right: 2.5vw; }  /* 左右2.5%ずつ空けて、写真は横幅95% */

.site { padding-top: 32px; display: flex; justify-content: space-between; align-items: baseline; }
.site .menu { font-size: 11px; color: var(--mute); }
.site h1 { margin: 0; font-size: 13px; font-weight: 400; }

main { padding-top: 48px; }

.photo { display: block; margin: 0 0 32px; }
.photo img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hush);
}

.text {
  max-width: 34em;
  font-size: 14px;
  line-height: 2;
  letter-spacing: .03em;
}
.text p { margin: 0 0 1.4em; }

.date { margin: 24px 0 0; color: var(--mute); font-size: 10px; letter-spacing: .06em; }

.nav {
  display: flex;
  padding-top: 40px;
  padding-bottom: 64px;
  font-size: 11px;
  color: var(--mute);
}
.nav .next { margin-left: auto; }

@media (max-width: 600px) {
  .site { padding-top: 20px; }
  main { padding-top: 28px; }
  .photo { margin-bottom: 24px; }
}

/* about */
.about { padding-bottom: 96px; }
.about .text { margin-bottom: 56px; }
.about [lang="zh-Hans"] { font-family: Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
.about-link { margin: 6px 0 0; color: var(--mute); font-size: 10px; letter-spacing: .06em; }
.credit { color: var(--mute); font-size: 11px; letter-spacing: .06em; }
.notice { margin-top: 56px; color: var(--mute); font-size: 11px; }
.notice p { margin: 0 0 1.6em; }
.notice [lang="zh-Hans"] { font-family: Verdana, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }

/* メッセージ欄 */
.message { margin-top: 72px; max-width: 34em; }
.message h2 { margin: 0 0 20px; font-size: 11px; font-weight: 400; color: var(--mute); letter-spacing: .06em; }
.message form { display: grid; gap: 16px; }
.message label { display: grid; gap: 6px; font-size: 10px; color: var(--mute); letter-spacing: .04em; }
.message input, .message textarea, .message button { font: inherit; color: var(--ink); }
.message input, .message textarea { font-size: 14px; border: 1px solid #d6d8d0; border-radius: 0; padding: 8px 10px; background: #fff; width: 100%; }
.message textarea { line-height: 1.9; resize: vertical; }
.message input:focus-visible, .message textarea:focus-visible, .message button:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.message button { justify-self: start; border: 1px solid var(--ink); background: var(--ink); color: #fff; padding: 7px 20px; font-size: 11px; cursor: pointer; }
.message button:hover { background: var(--leaf); border-color: var(--leaf); }
.message .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message .sent, .message .error { font-size: 12px; line-height: 2; }
.message .error { color: #9a4a3a; }