/* ==========================================================================
   Foundation - Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-size: clamp(16px, 100%, 20px);
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;

  --container-gutter: max(
    32px,
    calc(32px + (100vw - 1199px) * 240 / 721),
    calc((100vw - var(--container-max-width)) / 2)
  );
  --container-gutter-wide: max(
    32px,
    calc(32px + (100vw - 1199px) * 88 / 721),
    calc((100vw - var(--container-max-width-wide)) / 2)
  );
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   Foundation - Variables
   ========================================================================== */
:root {
  --color-body: #F2EEE9;
  --color-accent-red: #A50000;
  --color-accent-red-dark: #7A0000;
  --color-page-head: color-mix(in srgb, var(--color-accent-red) 88%, var(--color-base-white));
  --color-page-head-overlay: color-mix(in srgb, var(--color-base-white) 10%, transparent);
  --color-accent-gold: #B68D4C;
  --color-accent-gold-light: #E8CB9D;
  --color-header-border: #D6C9B9;
  --color-text: #272420;
  --color-dark: #1E1C19;
  --color-base-white: #F9F9F9;
  --color-white: #FFFFFF;
  --color-watermark: #EDE7E0;
  --color-zabuton: #EADDC8;
  --color-border: #DEDAD3;
  --color-label-bg: #D5D5D5;
  --color-scrollbar-thumb: #9F9F9F;
  --color-line-green: #06C755;
  --color-link: #0066c0;

  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en-large: 'Cormorant Garamond', serif;
  --font-en-small: 'Inter', sans-serif;

  --container-max-width: 1376px;
  --container-max-width-wide: 1680px;

  --layout-main-width: 976;

  --floating-banner-pc-width: 120px;
  --floating-banner-pc-right-max: 80px;
  --floating-banner-pc-right-min: 12px;
  --floating-banner-pc-switch: 1624px;
  --floating-banner-close-size: 24px;
  --design-pc-width: 1920px;

  --fixed-ui-right: calc(
    min(
      var(--floating-banner-pc-right-max),
      max(
        var(--floating-banner-pc-right-min),
        calc(
          var(--floating-banner-pc-right-min)
          + (min(100vw, var(--design-pc-width)) - var(--floating-banner-pc-switch)) * 68 / 296
        )
      )
    )
    + max(0px, (100vw - var(--design-pc-width)) / 2)
  );

  --hover-opacity: 0.6;
  --pagetop-width: 124px;
  --scrollbar-compensate: 0px;

  --header-height: 96px;
  --scroll-margin-header: calc(var(--header-height) + 24px);
}

@media (max-width: 1623px) {
  :root {
    --fixed-ui-right: 16px;
    --fixed-ui-left: 16px;
    --pagetop-width: 124px;
    --fixed-ui-bottom-offset: 16px;
    --fixed-ui-bottom-gap: 16px;
    --pagetop-height: calc(var(--pagetop-width) * 136 / 124);
    --floating-banner-sp-height: calc(
      min(
        660px,
        calc(100% - var(--fixed-ui-left) - var(--fixed-ui-right) - var(--pagetop-width) - 20px)
      ) * 220 / 1320
    );
    --fixed-ui-bottom-bar: max(var(--floating-banner-sp-height), var(--pagetop-height));
    --fixed-ui-bottom-space: calc(
      var(--fixed-ui-bottom-offset) + var(--fixed-ui-bottom-bar) + var(--fixed-ui-bottom-gap)
    );
  }
}

@media (max-width: 767px) {
  :root {
    --container-gutter: 16px;
    --container-gutter-wide: 16px;
    --pagetop-width: 96px;
    --pagetop-height: calc(var(--pagetop-width) * 208 / 192);
    --floating-banner-sp-bottom: 16px;
    --floating-banner-pagetop-gap: 24px;
    --floating-banner-sp-height: calc((100vw - 32px) * 240 / 960);
    --fixed-ui-bottom-bar: var(--floating-banner-sp-height);
    --fixed-ui-bottom-space: calc(
      var(--floating-banner-sp-bottom) + var(--fixed-ui-bottom-bar) + var(--fixed-ui-bottom-gap)
    );
  }
}

/* ==========================================================================
   Foundation - Base
   ========================================================================== */
body {
  width: 100%;
  font-family: var(--font-jp);
  color: var(--color-text);
  background-color: var(--color-body);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
  overflow-x: clip;
}

@media (max-width: 767px) {
  :root {
    --header-height: 0px;
    --scroll-margin-header: 24px;
  }

  body {
    padding-top: var(--header-height);
  }
}

:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}