/* リセットと基本要素。色は colors.css の変数のみ使う。 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-wrap: anywhere;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.4; color: var(--color-main); font-weight: 700; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--color-bg); color: var(--color-main); }

/* PCとスマホの出し分け。部品側の display に負けないよう !important を使う */
.u-sp, .u-sp-block, .u-sp-grid { display: none !important; }
@media (min-width: 769px) {
  .u-pc-flex { display: flex !important; }
  .u-pc-grid { display: grid !important; }
}
@media (max-width: 768px) {
  .u-pc, .u-pc-flex, .u-pc-grid { display: none !important; }
  .u-sp { display: inline !important; }
  p.u-sp, div.u-sp { display: block !important; }
  .u-sp-block { display: block !important; }
  .u-sp-grid { display: grid !important; }
}