:root {
  /* ==================================================
      Font family (Google Fonts)
  ================================================== */
  --font_sans: "Noto Sans JP", sans-serif;
  --font_shippori: "Shippori Mincho B1", serif;
  --font_marcellus: "Marcellus", serif;

  /* ==================================================
      Base unit
  ================================================== */
  --px: 0.0625rem; /* 1px */

  /* ==================================================
      Spacing tokens (px scale)
  ================================================== */
  --2: 0.125rem;
  --4: 0.25rem;
  --6: 0.375rem;
  --8: 0.5rem;
  --10: 0.625rem;
  --12: 0.75rem;
  --16: 1rem;
  --18: 1.125rem;
  --20: 1.25rem;
  --24: 1.5rem;
  --28: 1.75rem;
  --30: 1.875rem;
  --32: 2rem;
  --36: 2.25rem;
  --40: 2.5rem;
  --44: 2.75rem;
  --48: 3rem;
  --50: 3.125rem;
  --60: 3.75rem;
  --64: 4rem;

  /* ==================================================
      Font size tokens (px scale)
  ================================================== */
  --fs-10: 0.625rem;
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-36: 2.25rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-64: 4rem;

  /* ==================================================
      Layout
  ================================================== */
  --layout-content-width: 954px;
  --layout-section-padding-x: 35px;
  --layout-section-max: calc(
    var(--layout-content-width) + (var(--layout-section-padding-x) * 2)
  );
  --layout-section-padding-x-sp: 16px;

  /* ==================================================
      Viewport scale (SP 390px 基準)
      calc(ピクセル値 * var(--vw-sp)) 
  ================================================== */
  --base-sp: 390;
  --vw-sp: calc(100vw / var(--base-sp));

  /* ==================================================
      Color
  ================================================== */
  --color_base: #f4efe2;
  --color_page_bg: #fdfcf9;
  --color_bg_pc: #e8e8e8;
  --color_main: #332e24;
  --color_main_80: rgba(51, 46, 36, 0.8);
  --color_works_bg: rgba(51, 46, 36, 0.9);
  --color_nav: rgba(51, 46, 36, 0.5);
  --color_footer_muted: #7c7c7a;
  --color_footer_map_underline: rgba(124, 124, 122, 0.3);
  --color_footer_copyright: rgba(124, 124, 122, 0.5);
  --color_footer_link: rgba(51, 46, 36, 0.8);
  --color_footer_icon: rgba(124, 124, 122, 0.5);
  --color_accent: #ff7619;
  --color_accent_lime: #f1f200;
  --color_top_contact_overlay: rgba(51, 46, 36, 0.9);
  --color_top_contact_line: rgba(255, 255, 255, 0.5);
  --color_top_contact_note: rgba(255, 255, 255, 0.7);
  --color_header_bg: var(--color_page_bg);
  --color_white: #ffffff;
  --color_text: rgba(0, 0, 0, 0.8);
  --color_text_sub: rgba(0, 0, 0, 0.5);
  --color_border: rgba(0, 0, 0, 0.1);

  /* ==================================================
      Letter spacing (site default)
  ================================================== */
  --letter-spacing: 0.15em;
}

html {
  font-family: var(--font_sans);
  font-feature-settings: "palt";
  background-color: var(--color_page_bg);
}

body {
  background-color: var(--color_page_bg);
}

*,
*::before,
*::after {
  letter-spacing: var(--letter-spacing);
}

@media (any-hover: hover) {
  a[href] {
    transition: opacity 0.1s;
  }
  a[href]:hover {
    transition: opacity 0.2s;
    opacity: 0.7;
  }
}

span.br {
  display: inline-block;
}

/* Text edge trim utilities */
.u-text-shift-left {
  margin-left: -0.5em;
}

.u-text-shift-right {
  margin-right: -0.5em;
}

.u-text-shift-both {
  margin-inline: -0.25em;

}