@charset "UTF-8";
@layer reset, base;
@import url("reset.css") layer(reset);

@layer base {
  html {
    &:has(.pg-top) {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: var(--rm-color-background-cta);

      --rm-font-serif-jp: "Shippori Mincho",
        "Hiragino Mincho ProN",
        serif;
      --rm-font-sans-jp: "Zen Kaku Gothic New",
        "Hiragino Kaku Gothic ProN",
        sans-serif;
      --rm-font-display-en: "Playfair Display",
        serif;
      --rm-color-background: var(--rm-color-white);
      --rm-color-background-rgb: var(--rm-color-white-rgb);
      --rm-color-background-body: var(--rm-color-primary-tertiary);
      --rm-color-background-body-rgb: var(--rm-color-primary-tertiary-rgb);
      --rm-color-background-cta: var(--rm-color-primary-default);
      --rm-color-background-cta-rgb: var(--rm-color-primary-default-rgb);
      --rm-color-background-accent: var(--rm-color-primary-tertiary);
      --rm-color-background-accent-rgb: var(--rm-color-primary-tertiary-rgb);
      --rm-color-background-disabled: var(--rm-color-primary-secondary);
      --rm-color-background-disabled-rgb: var(--rm-color-primary-secondary-rgb);
      --rm-color-text: var(--rm-color-white);
      --rm-color-text-rgb: var(--rm-color-white-rgb);
      --rm-color-text-body: var(--rm-color-primary-secondary);
      --rm-color-text-body-rgb: var(--rm-color-primary-secondary-rgb);
      --rm-color-text-cta: var(--rm-color-white);
      --rm-color-text-cta-rgb: var(--rm-color-white-rgb);
      --rm-color-text-accent: var(--rm-color-primary-default);
      --rm-color-text-accent-rgb: var(--rm-color-primary-default-rgb);
      --rm-color-text-disabled: var(--rm-color-primary-secondary);
      --rm-color-text-disabled-rgb: var(--rm-color-primary-secondary-rgb);
      --rm-size-0: 4px;
      --rm-size-1: 8px;
      --rm-size-2: 16px;
      --rm-size-3: 24px;
      --rm-size-4: 32px;
      --rm-size-5: 40px;
      --rm-size-6: 48px;
      --rm-size-7: 56px;
      --rm-size-8: 64px;
      --rm-size-9: 72px;
      --rm-size-10: 80px;
      --rm-breakpoint-m: 768px;
      --rm-breakpoint-l: 1024px;
      --rm-z-index-header: 2;
      --rm-mobile-width: 390px;

      /*-----------------------------------
      primary / secondary / tertiary ...
      -----------------------------------*/
      --rm-color-primary-default: #A6625C;
      --rm-color-primary-default-rgb: 166,
        98,
        92;
      --rm-color-primary-secondary: #3E3434;
      --rm-color-primary-secondary-rgb: 62,
        52,
        52;
      --rm-color-primary-tertiary: #ECE9E9;
      --rm-color-primary-tertiary-rgb: 236,
        233,
        233;
      --rm-color-primary-quaternary: #432A28;
      --rm-color-primary-quaternary-rgb: 67,
        42,
        40;
      --rm-color-primary-quinary: #3C3434;
      --rm-color-primary-quinary-rgb: 60,
        52,
        52;
      /*-----------------------------------
      basic color
      -----------------------------------*/
      --rm-color-black: #000000;
      --rm-color-black-rgb: 0,
        0,
        0;
      --rm-color-white: #ffffff;
      --rm-color-white-rgb: 255,
        255,
        255;
    }
  }

  body {
    &:has(.pg-top) {
      font-family: var(--rm-font-sans-jp);
      font-weight: 400;
      background-color: var(--rm-color-background-body);

      &>div:not([class]) {
        width: min(100%, 500px);
        margin-inline: auto;
        box-shadow: 0 0 1em rgba(var(--rm-color-black-rgb), 0.5);
      }

      #js-header.header,
      .hamburger-menu {
        display: none;
      }
    }
  }
}