@layer layout {
  /* ---------- Container ---------- */
  .container {
    inline-size: 100%;
    max-inline-size: var(--layout-max-width);
    margin-inline: auto;
    padding-inline: var(--layout-gutter-inline);
  }

  .container--content {
    max-inline-size: var(--layout-content-width);
  }

  .container--reading {
    max-inline-size: var(--layout-reading-width);
  }

  .container--narrow {
    max-inline-size: var(--layout-narrow-width);
  }

  /* ---------- Header ---------- */
  /* ヘッダーはページと連続した明るいクリーム地で、本文との境界だけを影で示す。 */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    background-color: var(--color-bg-base);
    box-shadow: var(--shadow-header);
  }

  .site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    block-size: var(--header-height);
    gap: var(--space-5);
  }

  /* ---------- Sections ---------- */
  .section {
    padding-block: var(--section-padding-block);
  }

  /* ご利用できる方セクション：淡いセージからミントへつなぎ、福祉らしい安心感を残す。 */
  .section--users {
    position: relative;
    background-image: linear-gradient(
      to bottom,
      var(--color-bg-users-grad-top),
      var(--color-bg-users-grad-bottom)
    );
    padding-block-start: calc(var(--section-padding-block) + var(--space-4));
  }

  .section--users::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: clamp(var(--size-wave-height-min), 6vw, var(--size-wave-height-max));
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20397.5%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20H397.5%20V25.9376%20C364.5%2022.5%20328%200%20274%200%20C220%200%20192.5%2025.9376%20123%2025.9376%20C61.5%2025.9376%2022%207%200%207%20Z'%20fill='%23fbf8f1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* こんなお困りごとセクション：ブルー系の淡い面で情報の区切りを作る。 */
  .section--worries {
    position: relative;
    background-image: linear-gradient(
      to bottom,
      var(--color-bg-worries-grad-top),
      var(--color-bg-worries-grad-mid) 45%,
      var(--color-bg-worries-grad-bottom)
    );
    padding-block-start: calc(var(--section-padding-block) + var(--space-4));
  }

  /* 波の塗りは直上「ご利用できる方」の下端色。data-URI 内では var() を使えないため hex を保持する。 */
  .section--worries::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: clamp(var(--size-wave-height-min), 6vw, var(--size-wave-height-max));
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20397.5%2026'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0%200%20H397.5%20V25.9376%20C364.5%2022.5%20328%200%20274%200%20C220%200%20192.5%2025.9376%20123%2025.9376%20C61.5%2025.9376%2022%207%200%207%20Z'%20fill='%23d8efd7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  /* サービス内容セクション：最優先コンテンツとして、白から淡いピーチへ面を明るく変える。 */
  .section--service {
    background-image: linear-gradient(
      to bottom,
      var(--color-bg-service-grad-top),
      var(--color-bg-service-grad-mid) 29%,
      var(--color-bg-service-grad-bottom)
    );
  }

  /* ---------- Footer ---------- */
  /* フッターはページと連続したクリーム地＋濃色テキスト。コピーライト帯だけ温かい面で区切る。 */
  .site-footer {
    background-color: var(--color-footer-bg);
    color: var(--color-text-primary);
  }

  .site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-7);
  }

  .site-footer__copyright {
    background-color: var(--color-footer-copyright-bg);
    color: var(--color-text-primary);
    padding-block: var(--space-1);
  }

  .site-footer__copyright small {
    font-size: var(--font-size-2xs);
    line-height: 1;
    letter-spacing: var(--letter-spacing-base);
  }
}