@charset "utf-8";

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  font-family:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    "Noto Sans JP", sans-serif;
  font-size: clamp(14px, calc(13.6px + 0.125vw), 16px);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

:root {
  --warm1: oklch(from #f9c54e l c h);
  --warm2: oklch(from #f9a94e l c h);
  --warm3: oklch(from #f98339 l c h);
  --warm4: oklch(from #f3712b l c h);
  --warm5: oklch(from #f94346 l c h);
  --ink: oklch(from #333 l c h);
  --paper: oklch(from #fbfbfb l c h);
  --shadow: 0 18px 40px oklch(from #000 l c h / 0.12);
  --radius: 18px;
}

.skipLink {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid oklch(from #333 l c h / 0.18);
  transform: translateY(-160%);
  z-index: 9999;
}

.skipLink:focus {
  transform: translateY(0);
}

@media (width < 768px) {
  body {
    font-size: clamp(14px, calc(13.6px + 0.125vw), 16px);
  }
}