@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

:root {
  --light: #f6f6f4;
  --egg: #ffbb00;
  --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 (max-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 {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding-inline-start: var(--commonPad);
  padding-inline-end: var(--commonPad);
  max-width: var(--mainWidth);
  width: 100%;
  min-height: 100vh;
  font-size: var(--bodyFontSize);
  font-family: "Noto Sans JP", sans-serif;
}

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

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

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

svg {
  vertical-align: top;
}

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

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

footer {
  margin-block-start: calc(var(--commonPad) * 5);
  padding-block-end: var(--commonPad);
}

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

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