@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(--hp-color-background-cta);

      --hp-font-serif-jp: "Shippori Mincho", "Hiragino Mincho ProN", serif;
      --hp-font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
      --hp-font-serif-en: "Bodoni Moda", serif;
      --hp-font-script-en: "Kapakana", cursive;

      --hp-color-background: var(--hp-color-tertiary);
      --hp-color-background-rgb: var(--hp-color-tertiary-rgb);
      --hp-color-background-body: var(--hp-color-white);
      --hp-color-background-body-rgb: var(--hp-color-white-rgb);
      --hp-color-background-cta: var(--hp-color-primary-default);
      --hp-color-background-cta-rgb: var(--hp-color-primary-default-rgb);
      --hp-color-background-accent: var(--hp-color-tertiary);
      --hp-color-background-accent-rgb: var(--hp-color-tertiary-rgb);
      --hp-color-background-disabled: var(--hp-color-secondary);
      --hp-color-background-disabled-rgb: var(--hp-color-secondary-rgb);
      --hp-color-text: var(--hp-color-secondary);
      --hp-color-text-rgb: var(--hp-color-secondary-rgb);
      --hp-color-text-body: var(--hp-color-secondary);
      --hp-color-text-body-rgb: var(--hp-color-secondary-rgb);
      --hp-color-text-cta: var(--hp-color-secondary);
      --hp-color-text-cta-rgb: var(--hp-color-secondary-rgb);
      --hp-color-text-cta-secondary: var(--hp-color-white);
      --hp-color-text-cta-secondary-rgb: var(--hp-color-white-rgb);
      --hp-color-text-accent: var(--hp-color-primary-default);
      --hp-color-text-accent-rgb: var(--hp-color-primary-default-rgb);
      --hp-color-text-accent-secondary: var(--hp-color-quaternary);
      --hp-color-text-accent-secondary-rgb: var(--hp-color-quaternary-rgb);
      --hp-color-text-weak: var(--hp-color-quinary);
      --hp-color-text-weak-rgb: var(--hp-color-quinary-rgb);
      --hp-color-text-disabled: var(--hp-color-secondary);
      --hp-color-text-disabled-rgb: var(--hp-color-secondary-rgb);

      --hp-size-0: 4px;
      --hp-size-1: 8px;
      --hp-size-2: 16px;
      --hp-size-3: 24px;
      --hp-size-4: 32px;
      --hp-size-5: 40px;
      --hp-size-6: 48px;
      --hp-size-7: 56px;
      --hp-size-8: 64px;
      --hp-size-9: 72px;
      --hp-size-10: 80px;
      --hp-z-index-header: 2;
      --hp-mobile-width: 400px;
      --hp-radius-default-max: 100vmax;

      /*-----------------------------------
      primary / secondary / tertiary ...
      -----------------------------------*/
      --hp-color-primary-default: #6C9D9C;
      --hp-color-primary-default-rgb: 108, 157, 156;
      --hp-color-secondary: #2C2C2C;
      --hp-color-secondary-rgb: 62, 52, 52;
      --hp-color-tertiary: #EEF5F6;
      --hp-color-tertiary-rgb: 236, 233, 233;
      --hp-color-quaternary: #BBA982;
      --hp-color-quaternary-rgb: 67, 42, 40;
      --hp-color-quinary: #666666;
      --hp-color-quinary-rgb: 60, 52, 52;

      /*-----------------------------------
      basic color
      -----------------------------------*/
      --hp-color-black: #000000;
      --hp-color-black-rgb: 0, 0, 0;
      --hp-color-white: #ffffff;
      --hp-color-white-rgb: 255, 255, 255;
    }
  }

  body {
    &:has(.pg-top) {
      --color01: #DAE8E4;
      --color02: #EEF5F6;

      font-family: var(--hp-font-sans-jp);
      font-weight: 400;
      background-color: var(--color01);

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

      .l-header#js-header,
      .cta_fixed,
      .p-shop__footer {
        display: none !important;
      }
    }
  }
}