@import url("https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* primitive */
  --color-warm-100: #e5e3df;
  --color-warm-300: #5b575c;
  --color-warm-950: #1a171c;
  --color-white-0: #ffffff;
  --color-alpha-white-30: rgba(255, 255, 255, 0.3);
  --color-alpha-warm-300-20: rgba(91, 87, 92, 0.2);

  /* semantic */
  --color-surface-page: var(--color-warm-300);
  --color-surface-card: var(--color-warm-100);
  --color-surface-inverse: var(--color-warm-950);
  --color-surface-track: var(--color-alpha-warm-300-20);
  --color-text-primary: var(--color-warm-950);
  --color-text-secondary: var(--color-warm-300);
  --color-text-on-inverse: var(--color-white-0);
  --color-text-on-muted: var(--color-warm-100);
  --color-border-default: var(--color-warm-300);
  --color-border-strong: var(--color-warm-950);
  --color-border-on-inverse: var(--color-warm-100);

  /* font family */
  --font-family-sans-en: "din-2014", "Inter", sans-serif;
  --font-family-sans-jp: "ryo-gothic-plusn", "Noto Sans JP", sans-serif;
  --font-family-serif-en: "cormorant-infant", "Cormorant Infant", serif;

  /* font size */
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  --font-size-5xl: 48px;
  --font-size-6xl: 72px;

  /* radius / layout */
  --radius-lg: 36px;
  --gap-outer: 6px;

  /* font weight */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* letter spacing */
  --letter-spacing-normal: 0;
  --section-py: clamp(72px, 11.25vw, 144px);
  --section-py-tight: clamp(48px, 9.4vw, 120px);
  --section-px: clamp(24px, 5vw, 64px);
  --card-padding-lg: clamp(24px, 2.8vw, 36px);
  --card-padding-md: clamp(20px, 2.3vw, 30px);
}

body {
  /* background-color: #49464a !important; */
  background-color: var(--color-warm-300) !important;
  font-family: var(--font-family-serif-en) !important;
}

.mign-block-section :where(.is-layout-flow)>* {
  margin-block-start: unset !important;
  margin-block-end: unset !important;
}

.mign-block-section {
  padding: 6px;
}

.mign-block-section>a {
  text-decoration: none;
}

.mign-block-section>a:hover {
  text-decoration: none;
}

.mign-block-container {
  border-radius: 36px;
  background-color: var(--color-surface-card);
}

.site-main.mign-full-with-main {
  max-width: 100% !important;
  width: 100% !important;
}

.site-footer {
  width: 100% !important;
  max-width: 100% !important;
}

.anim-frame {
  position: relative;
  overflow: hidden;
}

.anim-frame .layer {
  position: absolute;
  inset: 0;
}

.anim-frame .layer>div {
  width: 100%;
  height: 100%;
}

.anim-frame .lines-layer {
  filter: url(#ink-bleed);
}

.hero {
  width: 100%;
  aspect-ratio: 3840 / 1595;
  height: 100%;
}

.product-card {
  width: 100%;
  aspect-ratio: 3840 / 2353;
  cursor: pointer;
  position: relative;
  padding: 10px;
}

.anim-frame.is-fading {
  transition: opacity 0.25s ease;
  opacity: 0.85;
}

.product-title {
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}

.product-title span {
  color: #1a171c;
  font-family: "din-2014", "DIN 2014", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
  letter-spacing: 0;
  margin-right: 8px;
}

.product-title b {
  color: #1a171c;
  font-family: "Cormorant Infant";
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
}

.site-header--fixed {
  position: fixed !important;
  top: 0;
  z-index: 1000;
  background-color: transparent;
  width: 100% !important;
  max-width: 100% !important;
}

.site-header.site-header--fixed {
  padding-inline-end: 0 !important;
  padding-inline-start: 0 !important;
  padding-block-end: 0 !important;
  padding-block-start: 0 !important;
  mix-blend-mode: difference;
}

.site-header--fixed .container {
  width: 100%;
  padding: 0 60px;
}

.site-header--fixed .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 45px 0;
}

.site-header--fixed .site-branding {
  display: flex;
  align-items: center;
}

.site-header--fixed .site-branding img {
  width: 36px;
  height: auto;
}

.site-header--fixed .main-navigation {
  display: flex;
  align-items: center;
  width: 50%;
}

.site-header--fixed .main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
}

.site-header--fixed .main-navigation a {
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 130%;
  letter-spacing: 0;
  text-decoration: none;
}