@layer base {
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  /*
   * 横はみ出しを止める指定。hiddenにするとhtmlがスクロールコンテナになり、
   * 子孫の position:sticky が効かなくなる（03 PLACE の昇るスクロールが止まる）。
   * clipはスクロールコンテナを作らずに切り落とすだけなので、stickyと両立する。
   */
  html,
  body {
    overflow-x: clip;
    max-width: 100%;
  }

  img,
  svg {
    max-width: 100%;
    height: auto;
  }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--msk-font-jp);
    font-weight: 500;
    line-height: var(--msk-lh);
    -webkit-font-smoothing: antialiased;
  }

  /*
   * 暗い面では antialiased が和文の線を必要以上に細く見せるため、
   * OS標準の描画へ戻して字面の強さを保つ。
   */
  .is-dark {
    -webkit-font-smoothing: auto;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--fg);
    font-weight: 900;
  }

  h1 {
    font-family: var(--msk-font-hero);
    font-size: var(--msk-step-h1);
    line-height: 1.35;
  }

  h2 {
    font-size: var(--msk-step-h2);
    line-height: 1.45;
  }

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

  /* 本文中のリンクは、色だけに依存せずリンクであることを伝える。 */
  main :where(p, dd) a,
  .msk-prose a,
  .msk-card__body a,
  .msk-form a {
    text-decoration-line: underline;
    text-decoration-thickness: .08em;
    text-underline-offset: .18em;
  }

  a:hover {
    text-decoration-thickness: .13em;
  }

  :focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
  }

  .msk-skip {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    background: var(--bg-raised);
    color: var(--fg);
  }

  .msk-skip:focus-visible {
    width: auto;
    height: auto;
    padding: 10px 16px;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }

  .msk-label {
    color: var(--fg-muted);
    font-family: var(--msk-font-mono);
    font-size: .68rem;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .msk-label .n {
    color: var(--fg);
    font-weight: 700;
  }

  .msk-mono,
  .u-mono {
    font-family: var(--msk-font-mono);
    font-weight: 400;
  }

  /* 利用可能なユーティリティはこの7個に限定する。 */
  .u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-nowrap {
    white-space: nowrap;
  }

  .u-wrap {
    width: 100%;
    max-width: var(--msk-maxw);
    margin-inline: auto;
    padding-inline: var(--msk-gutter);
  }

  .u-stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-space, 1.5rem);
  }

  .u-hide-sp {
    display: revert;
  }

  .u-hide-pc {
    display: none;
  }

  /*
   * JS起動時だけ .js が付く。JS失敗・無効時は初期状態を隠さないため、
   * 救済用の強制可視化ルールを後から足す必要がない。
   */
  .js .msk-reveal {
    opacity: 0;
    transform: translateY(20px);
  }

  .msk-reveal.is-in {
    animation: msk-rise .7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
  }

  .msk-clip {
    overflow: hidden;
  }

  .msk-clip > span {
    display: block;
  }

  .js .msk-clip > span {
    transform: translateY(110%);
  }

  .msk-clip.is-in > span {
    animation: msk-clip-rise .7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(.4s + var(--i, 0) * .14s);
  }

  @keyframes msk-rise {
    to {
      opacity: 1;
      transform: none;
    }
  }

  @keyframes msk-clip-rise {
    to {
      transform: none;
    }
  }

  @media (max-width: 900px) {
    .u-wrap {
      --msk-gutter: 22px;
    }

    .u-hide-sp {
      display: none;
    }

    .u-hide-pc {
      display: revert;
    }
  }

  @media (max-width: 560px) {
    .u-wrap {
      --msk-gutter: 18px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer overrides {
    .js .msk-reveal,
    .msk-reveal,
    .js .msk-clip > span,
    .msk-clip > span {
      animation: none;
      opacity: 1;
      transform: none;
    }

    /*
     * scrollTo の behavior:'auto' は「即時」ではなく scroll-behavior の計算値に従う。
     * ここを戻さないと、動きを減らす設定でもページ内移動が滑走してしまう。
     */
    html {
      scroll-behavior: auto;
    }
  }
}

@media (prefers-reduced-transparency: reduce) {
  @layer overrides {
    /* 透過表現を持つ各コンポーネントが、この利用者設定内で個別に代替面を定義する。 */
  }
}