@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 400;
  src: local(Noto Sans JP), local(Noto Sans CJK JP), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2") format("woff2"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff") format("woff"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf") format("opentype");
}

@font-face {
  font-family: Noto Sans JP;
  font-style: normal;
  font-weight: 700;
  src: local(Noto Sans JP), local(Noto Sans CJK JP), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff2") format("woff2"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.woff") format("woff"), url("//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Bold.otf") format("opentype");
}

:root {
  --light: #f6f6f4;
  --egg: #fb0;
  --shadow: #dbdbb1;
  --scorch: #554e3b;
  --accent: var(--egg);
  --bgBase: var(--light);
  --textBase: var(--scorch);
  --textLink: var(--scorch);
  --commonPad: 1rem;
  --mainWidth: 67.5rem;
  --bodyFontSize: 1.25rem;
  --gridGap: calc(var(--commonPad) / 2);
}

@media (width <= 1079px) {
  :root {
    --gridGap: calc(var(--commonPad) / 2.5);
  }
}

*, :before, :after {
  box-sizing: border-box;
}

a:link, a:visited, a:hover, a:active {
  color: var(--textLink);
  text-underline-position: under;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  color: var(--textBase);
  background-color: var(--bgBase);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  max-width: var(--mainWidth);
  width: 100%;
  min-height: 100vh;
  font-size: var(--bodyFontSize);
  grid-template-rows: auto auto 1fr auto;
  margin-left: auto;
  margin-right: auto;
  font-family: Noto Sans JP, sans-serif;
  display: grid;
}

body:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
  padding-left: var(--commonPad);
  padding-right: var(--commonPad);
}

body:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
  padding-right: var(--commonPad);
  padding-left: var(--commonPad);
}

h1 {
  margin-top: calc(var(--commonPad) * 2);
}

h1 path {
  fill: var(--accent);
}

h1 + p {
  font-size: var(--bodyFontSize);
  font-weight: normal;
}

svg {
  vertical-align: top;
}

img {
  vertical-align: top;
  border-radius: .5rem;
  width: 100%;
}

section {
  margin-top: calc(var(--commonPad) * 5);
}

footer {
  margin-top: calc(var(--commonPad) * 5);
  padding-bottom: var(--commonPad);
}

.grid {
  gap: var(--gridGap);
  grid-template-columns: repeat(auto-fill, 168px);
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
}

.extra {
  margin-top: calc(var(--commonPad) * 5);
}