/* ==========================================================================
   Colors - Design Tokens
   Generated from Figma Variables
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Primitive Colors
     -------------------------------------------------------------------------- */
  --color-brand: #01916d;
  --color-blue: #1a73e8;
  --color-white: #ffffff;
  --color-red: #fe0000;
  --color-red-lighter: #ff4d4d;
  --color-gold: #ceb447;
  --color-yellow: #ffd700;

  /* Gray Scale */
  --color-gray-95: #f6f6f6;
  --color-gray-90: #e1e1e1;
  --color-gray-86: #d0d0d0;
  --color-gray-80: #c2c2c2;
  --color-gray-60: #858585;
  --color-gray-50: #757575;
  --color-gray-40: #666666;
  --color-gray-30: #444444;
  --color-gray-20: #333333;
  --color-gray-7: #121212;

  /* --------------------------------------------------------------------------
     Semantic Colors - Light Mode
     -------------------------------------------------------------------------- */

  /* Brand */
  --color-brand-primary: var(--color-brand);
  --color-brand-primary-on-dark: var(--color-brand);

  /* Text */
  --color-text-default: var(--color-gray-7);
  --color-text-default-sub: var(--color-gray-30);
  --color-text-default-disabled: var(--color-gray-80);
  --color-text-default-on-dark: var(--color-white);
  --color-text-default-on-dark-transparent: rgba(255, 255, 255, 0.8);
  --color-text-subtle: var(--color-gray-40);
  --color-text-link: var(--color-blue);
  --color-text-alert: var(--color-red);
  --color-text-favorite: var(--color-red-lighter);

  /* Background */
  --color-bg-page: var(--color-white);
  --color-bg-accent: var(--color-gray-95);
  --color-bg-alert: #fff0f0;

  /* Button */
  --color-button-default: var(--color-gray-7);
  --color-button-default-disabled: var(--color-gray-60);
  --color-button-default-transparent: rgba(18, 18, 18, 0.85);
  --color-button-default-on-dark: var(--color-white);

  /* Border */
  --color-border-default: var(--color-gray-90);
  --color-border-selection: var(--color-brand-primary);

  /* Rank System */
  --color-rank-silver: #9E9E9E;
  --color-rank-silver-bg: #f0f0f0;
  --color-rank-gold: #8B6914;
  --color-rank-gold-bg: #fff4cc;
  --color-rank-platinum: #2e7da6;
  --color-rank-platinum-bg: #e0f0f8;

  /* Gold Variants */
  --color-gold-dark: #B89F3E;
  --color-gold-light: rgba(206, 180, 71, 0.15);
  --color-gold-border: rgba(206, 180, 71, 0.4);

  /* Brand Variants */
  --color-brand-primary-light: rgba(1, 145, 109, 0.1);
}
/* ==========================================================================
   Spacing - Design Tokens
   Generated from Figma Variables
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Primitive Spacing (TailwindCSS compatible)
     -------------------------------------------------------------------------- */
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-2-5: 10px;
  --spacing-3: 12px;
  --spacing-3-5: 14px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-7: 28px;
  --spacing-8: 32px;
  --spacing-9: 36px;
  --spacing-10: 40px;
  --spacing-11: 44px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-18: 72px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* --------------------------------------------------------------------------
     Semantic Spacing - Desktop (default)
     -------------------------------------------------------------------------- */

  /* Gutter */
  --gutter-x: var(--spacing-8);  /* 32px */
  --gutter-y: var(--spacing-6);  /* 24px */

  /* Margin */
  --margin-x: min(96px, 6.6667vw);  /* min(96px, 96/1440*100vw) */
  --margin-x-large: var(--margin-x);  /* Desktopはmargin-xと同値 */
  --margin-y: var(--spacing-8);    /* 32px */

  /* Spacing Scale */
  --space-0: var(--spacing-0);      /* 0px */
  --space-6xs: var(--spacing-0-5);  /* 2px */
  --space-5xs: var(--spacing-1);    /* 4px */
  --space-4xs: var(--spacing-1-5);  /* 6px */
  --space-3xs: var(--spacing-2);    /* 8px */
  --space-2xs: var(--spacing-2-5);  /* 10px */
  --space-xs: var(--spacing-3);     /* 12px */
  --space-sm: var(--spacing-4);     /* 16px */
  --space-md: var(--spacing-5);     /* 20px */
  --space-lg: var(--spacing-6);     /* 24px */
  --space-xl: var(--spacing-8);     /* 32px */
  --space-2xl: var(--spacing-10);   /* 40px */
  --space-3xl: var(--spacing-12);   /* 48px */
  --space-4xl: var(--spacing-14);   /* 56px */
  --space-5xl: var(--spacing-16);   /* 64px */
  --space-6xl: var(--spacing-20);   /* 80px */

  /* Border Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 100px;

  /* Grid */
  --grid-columns: 12;
}

/* --------------------------------------------------------------------------
   Semantic Spacing - Mobile Override
   Breakpoint: max-width 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    /* Gutter */
    --gutter-x: var(--spacing-2-5);  /* 10px */
    --gutter-y: var(--spacing-2-5);  /* 10px */

    /* Margin */
    --margin-x: max(10px, 2.5641vw);  /* max(10px, 10/390*100vw) */
    --margin-x-large: max(24px, 6.1538vw);  /* テキスト直置きセクション用 */
    --margin-y: var(--spacing-8);    /* 32px */

    /* Spacing Scale (Mobile - slightly smaller) */
    --space-6xl: var(--spacing-16);  /* 64px */
    --space-5xl: var(--spacing-14);  /* 56px */
    --space-4xl: var(--spacing-12);  /* 48px */
    --space-3xl: var(--spacing-10);  /* 40px */
    --space-2xl: var(--spacing-8);   /* 32px */
    --space-xl: var(--spacing-6);    /* 24px */
    --space-lg: var(--spacing-5);    /* 20px */
    --space-md: var(--spacing-4);    /* 16px */
    --space-sm: var(--spacing-3-5);  /* 14px */
    --space-xs: var(--spacing-3);    /* 12px */

    /* Grid */
    --grid-columns: 2;
  }
}
/* ==========================================================================
   Typography - Design Tokens
   Generated from Figma Variables
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     Font Family
     -------------------------------------------------------------------------- */
  --font-family-base: "Inter", "Noto Sans JP", system-ui, sans-serif;

  /* --------------------------------------------------------------------------
     Font Weight
     -------------------------------------------------------------------------- */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;

  /* --------------------------------------------------------------------------
     Primitive Text Sizes
     -------------------------------------------------------------------------- */
  --text-5xs: 9px;
  --text-4xs: 10px;
  --text-3xs: 11px;
  --text-2xs: 12px;
  --text-xs: 13px;
  --text-sm: 14px;
  --text-base: 15px;
  --text-base-plus: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-xl-plus: 22px;
  --text-2xl: 24px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-5xl: 36px;
  --text-6xl: 40px;
  --text-7xl: 48px;
  --text-8xl: 64px;
  --text-9xl: 80px;

  /* --------------------------------------------------------------------------
     Primitive Line Heights
     -------------------------------------------------------------------------- */
  --leading-5xs: 12px;
  --leading-4xs: 12px;
  --leading-3xs: 16px;
  --leading-2xs: 16px;
  --leading-xs: 18px;
  --leading-sm: 20px;
  --leading-base: 20px;
  --leading-base-plus: 20px;
  --leading-lg: 24px;
  --leading-xl: 28px;
  --leading-xl-plus: 30px;
  --leading-2xl: 32px;
  --leading-3xl: 36px;
  --leading-4xl: 40px;
  --leading-5xl: 48px;
  --leading-6xl: 52px;
  --leading-7xl: 60px;
  --leading-8xl: 80px;
  --leading-9xl: 96px;

  /* Loose line-heights (long-form body text, ~1.7x) */
  --leading-xl-plus-loose: 38px;   /* for text-xl-plus 22px */
  --leading-xl-loose: 34px;        /* for text-xl 20px */
  --leading-lg-loose: 32px;        /* for text-lg 18px */
  --leading-base-plus-loose: 28px; /* for text-base-plus 16px */
  --leading-base-loose: 26px;      /* for text-base 15px */
  --leading-sm-loose: 24px;        /* for text-sm 14px */
  --leading-xs-loose: 22px;        /* for text-xs 13px */
  --leading-2xs-loose: 20px;       /* for text-2xs 12px */

  /* --------------------------------------------------------------------------
     Semantic Typography - Desktop (default)
     -------------------------------------------------------------------------- */

  /* Heading */
  --heading-xl-size: var(--text-5xl); /* 36px */
  --heading-xl-leading: var(--leading-5xl); /* 48px */
  --heading-lg-size: var(--text-4xl); /* 32px */
  --heading-lg-leading: var(--leading-4xl); /* 40px */
  --heading-md-size: var(--text-3xl); /* 28px */
  --heading-md-leading: var(--leading-3xl); /* 36px */
  --heading-sm-size: var(--text-2xl); /* 24px */
  --heading-sm-leading: var(--leading-2xl); /* 32px */
  --heading-xs-size: var(--text-xl-plus); /* 22px */
  --heading-xs-leading: var(--leading-xl-plus); /* 30px */
  --heading-2xs-size: var(--text-xl); /* 20px */
  --heading-2xs-leading: var(--leading-xl); /* 28px */

  /* Body */
  --body-2xl-size: var(--text-2xl); /* 24px */
  --body-2xl-leading: var(--leading-2xl); /* 32px */
  --body-xl-size: var(--text-xl); /* 20px */
  --body-xl-leading: var(--leading-xl); /* 28px */
  --body-lg-size: var(--text-lg); /* 18px */
  --body-lg-leading: var(--leading-lg); /* 24px */
  --body-md-plus-size: var(--text-base-plus); /* 16px */
  --body-md-plus-leading: var(--leading-base-plus); /* 20px */
  --body-md-size: var(--text-base); /* 15px */
  --body-md-leading: var(--leading-base); /* 20px */
  --body-sm-size: var(--text-sm); /* 14px */
  --body-sm-leading: var(--leading-sm); /* 20px */
  --body-xs-size: var(--text-xs); /* 13px */
  --body-xs-leading: var(--leading-xs); /* 18px */
  --body-2xs-size: var(--text-2xs); /* 12px */
  --body-2xs-leading: var(--leading-2xs); /* 16px */

  /* Body Loose (long-form text, ~1.7x line-height) */
  --leading-body-xl-loose: var(--leading-xl-loose);             /* 34px */
  --leading-body-lg-loose: var(--leading-lg-loose);             /* 32px */
  --leading-body-md-plus-loose: var(--leading-base-plus-loose); /* 28px */
  --leading-body-md-loose: var(--leading-base-loose);           /* 26px */
  --leading-body-sm-loose: var(--leading-sm-loose);             /* 24px */
  --leading-body-xs-loose: var(--leading-xs-loose);             /* 22px */

  /* Label */
  --label-xl-size: var(--text-xl); /* 20px */
  --label-xl-leading: var(--leading-xl); /* 28px */
  --label-lg-size: var(--text-lg); /* 18px */
  --label-lg-leading: var(--leading-lg); /* 24px */
  --label-md-plus-size: var(--text-base-plus); /* 16px */
  --label-md-plus-leading: var(--leading-base-plus); /* 20px */
  --label-md-size: var(--text-base); /* 15px */
  --label-md-leading: var(--leading-base); /* 20px */
  --label-sm-size: var(--text-sm); /* 14px */
  --label-sm-leading: var(--leading-sm); /* 20px */
  --label-xs-size: var(--text-xs); /* 13px */
  --label-xs-leading: var(--leading-xs); /* 18px */
  --label-2xs-size: var(--text-2xs); /* 12px */
  --label-2xs-leading: var(--leading-2xs); /* 16px */
  --label-3xs-size: var(--text-3xs); /* 11px */
  --label-3xs-leading: var(--leading-3xs); /* 16px */
  --label-4xs-size: var(--text-4xs); /* 10px */
  --label-4xs-leading: var(--leading-4xs); /* 12px */
  --label-5xs-size: var(--text-5xs); /* 9px */
  --label-5xs-leading: var(--leading-5xs); /* 12px */

  /* Caption */
  --caption-sm-size: var(--text-3xs); /* 11px */
  --caption-sm-leading: var(--leading-3xs); /* 16px */
}

/* --------------------------------------------------------------------------
   Semantic Typography - Mobile Override
   Breakpoint: max-width 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    /* Heading - Mobile */
    --heading-xl-size: var(--text-3xl); /* 28px */
    --heading-xl-leading: var(--leading-3xl); /* 36px */
    --heading-lg-size: var(--text-2xl); /* 24px */
    --heading-lg-leading: var(--leading-2xl); /* 32px */
    --heading-md-size: var(--text-xl-plus); /* 22px */
    --heading-md-leading: var(--leading-xl-plus); /* 30px */
    --heading-sm-size: var(--text-xl); /* 20px */
    --heading-sm-leading: var(--leading-xl); /* 28px */
    --heading-xs-size: var(--text-lg); /* 18px */
    --heading-xs-leading: var(--leading-lg); /* 24px */
    --heading-2xs-size: var(--text-base-plus); /* 16px */
    --heading-2xs-leading: var(--leading-base-plus); /* 20px */

    /* Body - Mobile */
    --body-2xl-size: var(--text-xl-plus); /* 22px */
    --body-2xl-leading: var(--leading-xl-plus); /* 30px */
    --body-xl-size: var(--text-lg); /* 18px */
    --body-xl-leading: var(--leading-lg); /* 24px */
    --body-lg-size: var(--text-base-plus); /* 16px */
    --body-lg-leading: var(--leading-base-plus); /* 20px */
    --body-md-plus-size: var(--text-base); /* 15px */
    --body-md-plus-leading: var(--leading-base); /* 20px */
    --body-md-size: var(--text-sm); /* 14px */
    --body-md-leading: var(--leading-sm); /* 20px */
    --body-sm-size: var(--text-xs); /* 13px */
    --body-sm-leading: var(--leading-xs); /* 18px */
    --body-xs-size: var(--text-2xs); /* 12px */
    --body-xs-leading: var(--leading-2xs); /* 16px */
    --body-2xs-size: var(--text-3xs); /* 11px */
    --body-2xs-leading: var(--leading-3xs); /* 16px */

    /* Body Loose - Mobile */
    --leading-body-xl-loose: var(--leading-lg-loose);           /* 32px */
    --leading-body-lg-loose: var(--leading-base-plus-loose);    /* 28px */
    --leading-body-md-plus-loose: var(--leading-base-loose);    /* 26px */
    --leading-body-md-loose: var(--leading-sm-loose);           /* 24px */
    --leading-body-sm-loose: var(--leading-xs-loose);           /* 22px */
    --leading-body-xs-loose: var(--leading-2xs-loose);           /* 20px */

    /* Label - Mobile */
    --label-xl-size: var(--text-lg); /* 18px */
    --label-xl-leading: var(--leading-lg); /* 24px */
    --label-lg-size: var(--text-base-plus); /* 16px */
    --label-lg-leading: var(--leading-base-plus); /* 20px */
    --label-md-plus-size: var(--text-base); /* 15px */
    --label-md-plus-leading: var(--leading-base); /* 20px */
    --label-md-size: var(--text-sm); /* 14px */
    --label-md-leading: var(--leading-sm); /* 20px */
    --label-sm-size: var(--text-xs); /* 13px */
    --label-sm-leading: var(--leading-xs); /* 18px */
    --label-xs-size: var(--text-2xs); /* 12px */
    --label-xs-leading: var(--leading-2xs-loose); /* 20px */
    --label-2xs-size: var(--text-3xs); /* 11px */
    --label-2xs-leading: var(--leading-3xs); /* 16px */
    --label-3xs-size: var(--text-4xs); /* 10px */
    --label-3xs-leading: var(--leading-4xs); /* 12px */
    --label-4xs-size: var(--text-5xs); /* 9px */
    --label-4xs-leading: var(--leading-5xs); /* 12px */
    --label-5xs-size: var(--text-5xs); /* 9px */
    --label-5xs-leading: var(--leading-5xs); /* 12px */

    /* Caption - Mobile */
    --caption-sm-size: var(--text-4xs); /* 10px */
    --caption-sm-leading: var(--leading-4xs); /* 12px */
  }
}
/* ==========================================================================
   CSS Reset
   Modern minimal reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

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

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}
/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
  font-family: var(--font-family-base);
  font-size: var(--body-md-size);
  line-height: var(--body-md-leading);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-default);
  background-color: var(--color-bg-page);
}

/* --------------------------------------------------------------------------
   Heading Classes
   font-size / line-height / letter-spacing / font-weight
   -------------------------------------------------------------------------- */
.text-heading-xl {
  font-size: var(--heading-xl-size);
  line-height: var(--heading-xl-leading);
  letter-spacing: 0;
  font-weight: var(--font-weight-bold);
}

.text-heading-lg {
  font-size: var(--heading-lg-size);
  line-height: var(--heading-lg-leading);
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
}

.text-heading-md {
  font-size: var(--heading-md-size);
  line-height: var(--heading-md-leading);
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
}

.text-heading-sm {
  font-size: var(--heading-sm-size);
  line-height: var(--heading-sm-leading);
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
}

.text-heading-xs {
  font-size: var(--heading-xs-size);
  line-height: var(--heading-xs-leading);
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
}

.text-heading-2xs {
  font-size: var(--heading-2xs-size);
  line-height: var(--heading-2xs-leading);
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Body Classes
   font-size / line-height / letter-spacing
   -------------------------------------------------------------------------- */
.text-body-2xl {
  font-size: var(--body-2xl-size);
  line-height: var(--body-2xl-leading);
  letter-spacing: 0.04em;
}

.text-body-xl {
  font-size: var(--body-xl-size);
  line-height: var(--body-xl-leading);
  letter-spacing: 0.04em;
}

.text-body-lg {
  font-size: var(--body-lg-size);
  line-height: var(--body-lg-leading);
  letter-spacing: 0.04em;
}

/* NEW 2026/2/18 */
.text-body-md-plus {
  font-size: var(--body-md-plus-size);
  line-height: var(--body-md-plus-leading);
  letter-spacing: 0.04em;
}

.text-body-md {
  font-size: var(--body-md-size);
  line-height: var(--body-md-leading);
  letter-spacing: 0.04em;
}

.text-body-sm {
  font-size: var(--body-sm-size);
  line-height: var(--body-sm-leading);
  letter-spacing: 0.04em;
}

.text-body-xs {
  font-size: var(--body-xs-size);
  line-height: var(--body-xs-leading);
  letter-spacing: 0.04em;
}

.text-body-2xs {
  font-size: var(--body-2xs-size);
  line-height: var(--body-2xs-leading);
  letter-spacing: 0.04em;
}

/* Body Loose — ゆったり行間 (~1.7x) for multi-line descriptions */
.text-body-xl-loose {
  font-size: var(--body-xl-size);
  line-height: var(--leading-body-xl-loose);
  letter-spacing: 0.04em;
}

.text-body-lg-loose {
  font-size: var(--body-lg-size);
  line-height: var(--leading-body-lg-loose);
  letter-spacing: 0.04em;
}

.text-body-md-plus-loose {
  font-size: var(--body-md-plus-size);
  line-height: var(--leading-body-md-plus-loose);
  letter-spacing: 0.04em;
}

.text-body-md-loose {
  font-size: var(--body-md-size);
  line-height: var(--leading-body-md-loose);
  letter-spacing: 0.04em;
}

.text-body-sm-loose {
  font-size: var(--body-sm-size);
  line-height: var(--leading-body-sm-loose);
  letter-spacing: 0.04em;
}

.text-body-xs-loose {
  font-size: var(--body-xs-size);
  line-height: var(--leading-body-xs-loose);
  letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Label Classes
   font-size / line-height / letter-spacing / font-weight
   -------------------------------------------------------------------------- */
.text-label-xl {
  font-size: var(--label-xl-size);
  line-height: var(--label-xl-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-lg {
  font-size: var(--label-lg-size);
  line-height: var(--label-lg-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-md-plus {
  font-size: var(--label-md-plus-size);
  line-height: var(--label-md-plus-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-md {
  font-size: var(--label-md-size);
  line-height: var(--label-md-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-sm {
  font-size: var(--label-sm-size);
  line-height: var(--label-sm-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-xs {
  font-size: var(--label-xs-size);
  line-height: var(--label-xs-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-2xs {
  font-size: var(--label-2xs-size);
  line-height: var(--label-2xs-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-3xs {
  font-size: var(--label-3xs-size);
  line-height: var(--label-3xs-leading);
  letter-spacing: 0.02em;
  font-weight: var(--font-weight-bold);
}

.text-label-4xs {
  font-size: var(--label-4xs-size);
  line-height: var(--label-4xs-leading);
  letter-spacing: 0.01em;
  font-weight: var(--font-weight-bold);
}

.text-label-5xs {
  font-size: var(--label-5xs-size);
  line-height: var(--label-5xs-leading);
  letter-spacing: 0.01em;
  font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Caption
   font-size / line-height / letter-spacing
   -------------------------------------------------------------------------- */
.text-caption-sm {
  font-size: var(--caption-sm-size);
  line-height: var(--caption-sm-leading);
  letter-spacing: 0.04em;
  color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   Font Weight Utilities
   -------------------------------------------------------------------------- */
.text-normal { font-weight: var(--font-weight-normal); }
.text-medium { font-weight: var(--font-weight-medium); }
.text-bold { font-weight: var(--font-weight-bold); }

/* --------------------------------------------------------------------------
   Text Color Utilities
   -------------------------------------------------------------------------- */
.text-color-default { color: var(--color-text-default); }
.text-color-sub { color: var(--color-text-default-sub); }
.text-color-subtle { color: var(--color-text-subtle); }
.text-color-disabled { color: var(--color-text-default-disabled); }
.text-color-link { color: var(--color-text-link); }
.text-color-alert { color: var(--color-text-alert); }
.text-color-on-dark { color: var(--color-text-default-on-dark); }
.text-color-brand { color: var(--color-brand-primary); }

/* --------------------------------------------------------------------------
   Text Alignment
   -------------------------------------------------------------------------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* ==========================================================================
   Responsive Visibility Utilities
   ========================================================================== */

.sp-only { display: none !important; }
.pc-only {}

@media (max-width: 767px) {
  .sp-only { display: inline !important; }
  .pc-only { display: none !important; }
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.u-mt-auto { margin-top: auto; }
.u-text-center { text-align: center; }
/* ==========================================================================
   Grid System
   PC: 12 columns / SP: 2 columns
   ========================================================================== */

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.s26-container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--margin-x);
}

.s26-container--fluid {
  max-width: none;
}

/* --------------------------------------------------------------------------
   Grid Row
   -------------------------------------------------------------------------- */
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gutter-y) var(--gutter-x);
}

/* No gap variant */
.row--no-gap {
  gap: 0;
}

/* Horizontal gap only */
.row--gap-x {
  gap: 0 var(--gutter-x);
}

/* Vertical gap only */
.row--gap-y {
  gap: var(--gutter-y) 0;
}

/* --------------------------------------------------------------------------
   Desktop Columns (12 columns) - min-width: 768px
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .desktop-col-1 { grid-column: span 1; }
  .desktop-col-2 { grid-column: span 2; }
  .desktop-col-3 { grid-column: span 3; }
  .desktop-col-4 { grid-column: span 4; }
  .desktop-col-5 { grid-column: span 5; }
  .desktop-col-6 { grid-column: span 6; }
  .desktop-col-7 { grid-column: span 7; }
  .desktop-col-8 { grid-column: span 8; }
  .desktop-col-9 { grid-column: span 9; }
  .desktop-col-10 { grid-column: span 10; }
  .desktop-col-11 { grid-column: span 11; }
  .desktop-col-12 { grid-column: span 12; }

  /* Auto width */
  .desktop-col-auto { grid-column: auto; }

  /* Full width */
  .desktop-col-full { grid-column: 1 / -1; }

  /* Desktop column start (offset) */
  .desktop-col-start-1 { grid-column-start: 1; }
  .desktop-col-start-2 { grid-column-start: 2; }
  .desktop-col-start-3 { grid-column-start: 3; }
  .desktop-col-start-4 { grid-column-start: 4; }
  .desktop-col-start-5 { grid-column-start: 5; }
  .desktop-col-start-6 { grid-column-start: 6; }
  .desktop-col-start-7 { grid-column-start: 7; }
  .desktop-col-start-8 { grid-column-start: 8; }
  .desktop-col-start-9 { grid-column-start: 9; }
  .desktop-col-start-10 { grid-column-start: 10; }
  .desktop-col-start-11 { grid-column-start: 11; }
  .desktop-col-start-12 { grid-column-start: 12; }
}

/* --------------------------------------------------------------------------
   Mobile Columns (2 columns) - max-width: 767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mobile-col-1 { grid-column: span 1; }
  .mobile-col-2 { grid-column: span 2; }

  /* Full width */
  .mobile-col-full { grid-column: 1 / -1; }

  /* Mobile column start */
  .mobile-col-start-1 { grid-column-start: 1; }
  .mobile-col-start-2 { grid-column-start: 2; }
}

/* --------------------------------------------------------------------------
   Alignment Utilities
   -------------------------------------------------------------------------- */

/* Justify Items */
.row--justify-start { justify-items: start; }
.row--justify-center { justify-items: center; }
.row--justify-end { justify-items: end; }
.row--justify-stretch { justify-items: stretch; }

/* Align Items */
.row--align-start { align-items: start; }
.row--align-center { align-items: center; }
.row--align-end { align-items: end; }
.row--align-stretch { align-items: stretch; }

/* Individual column alignment */
.col--align-start { align-self: start; }
.col--align-center { align-self: center; }
.col--align-end { align-self: end; }
.col--align-stretch { align-self: stretch; }

/* --------------------------------------------------------------------------
   Flexbox Row Alternative
   For simpler layouts where CSS Grid is overkill
   -------------------------------------------------------------------------- */
.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter-y) var(--gutter-x);
}

.flex-row--nowrap {
  flex-wrap: nowrap;
}

.flex-row--center {
  justify-content: center;
  align-items: center;
}

.flex-row--between {
  justify-content: space-between;
}

.flex-row--around {
  justify-content: space-around;
}

/* Flex grow/shrink utilities */
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }