/* CMS単体公開する固定ページと問い合わせフォームだけに適用する標準スタイル。 */
@layer rebuild-studio.public {
  :root {
    --rs-public-color-text: #202820;
    --rs-public-color-muted: #626c62;
    --rs-public-color-border: #d6dcd3;
    --rs-public-color-surface: #fff;
    --rs-public-color-background: #f4f6f3;
    --rs-public-color-link: #34583e;
    --rs-public-container: 67.5rem;
    --rs-public-content: 52rem;
    --rs-public-radius: 4px;
  }

  .rs-public {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    color: var(--rs-public-color-text);
    background: var(--rs-public-color-background);
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
    font-size: 1rem;
    line-height: 1.8;
  }

  .rs-public *,
  .rs-public *::before,
  .rs-public *::after {
    box-sizing: border-box;
  }

  .rs-public a {
    color: var(--rs-public-color-link);
    text-underline-offset: .2em;
  }

  .rs-public img {
    max-width: 100%;
    height: auto;
  }

  .rs-public-container {
    flex: 1;
    width: min(calc(100% - 40px), var(--rs-public-container));
    margin-inline: auto;
    padding-block: clamp(36px, 6vw, 72px);
  }

  .rs-public-card {
    width: min(100%, var(--rs-public-content));
    margin-inline: auto;
    padding: clamp(24px, 5vw, 56px);
    border: 1px solid var(--rs-public-color-border);
    border-radius: var(--rs-public-radius);
    background: var(--rs-public-color-surface);
  }

  .rs-public-preview-notice {
    width: min(100%, var(--rs-public-content));
    margin: 0 auto 1.5rem;
    padding: 1rem;
    border: 1px dashed var(--rs-public-color-border);
    border-radius: var(--rs-public-radius);
    background: var(--rs-public-color-surface);
    font-size: .875rem;
  }

  .rs-public-preview-notice p {
    margin: .5rem 0;
  }

  .rs-public-heading {
    margin-bottom: 32px;
  }

  .rs-public-heading h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3rem);
    line-height: 1.3;
  }

  .rs-public-form .rs-public-heading h1 {
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 700;
    letter-spacing: .04em;
  }

  .rs-public-heading p {
    margin: .75rem 0 0;
    color: var(--rs-public-color-muted);
  }

  .rs-public-image {
    display: block;
    width: 100%;
    margin-bottom: 2rem;
    border-radius: calc(var(--rs-public-radius) / 2);
  }

  .rs-public-content > :first-child {
    margin-top: 0;
  }

  .rs-public-content > :last-child {
    margin-bottom: 0;
  }

  .rs-public-content h2,
  .rs-public-content h3 {
    margin-top: 2em;
    line-height: 1.4;
  }

  .rs-public-content pre,
  .rs-public-content table {
    max-width: 100%;
    overflow-x: auto;
  }

  .rs-public-content pre {
    padding: 1rem;
    border-radius: .375rem;
    background: #eef1f5;
  }

  .rs-public-content table {
    display: block;
    border-collapse: collapse;
  }

  .rs-public-content th,
  .rs-public-content td {
    padding: .625rem;
    border: 1px solid var(--rs-public-color-border);
  }

  @media (max-width: 40rem) {
    .rs-public-container {
      width: min(calc(100% - 24px), var(--rs-public-container));
      padding-block: 28px;
    }

    .rs-public-card {
      padding: 24px 18px;
    }
  }
}