/* Global Styles */

:root {
  /* ========================================
     Font Families
     ======================================== */

  --font-family-en: "Figtree", system-ui, -apple-system, "Segoe UI", roboto, arial, sans-serif;
  --font-family-ja: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

  /* ========================================
     Colors
     ======================================== */

  /* Base Colors */
  --color-white: #fff;
  --color-black: #262522;

  /* Brand Colors */
  --color-primary: #00c4bf;
  --color-secondary: #f28500;
  --color-secondary-hover: #e35300;
  --color-blue: #3189a7;
  --color-primary-hover: #00a8a8;

  /* Accent Colors */
  --color-accent-yellow: #ffe55f;
  --color-accent-yellow-light: #ffd115;
  --color-orange-light: #ffb921;

  /* Background Colors */
  --color-cream: #fffbd2;
  --color-cream-light: #fff5c4;

  /* Text Colors */
  --color-text-gray: #6b6b68;
  --color-text-brown: #695b32;
  --color-text-light: #91918d;

  /* Border Colors */
  --color-border-light: #ecede6;
  --color-border-gray: #d6d6d0;
  --color-border-medium: #dbdbdb;
  --color-border-neutral: #c0c1bb;

  /* Gray Scale */
  --color-gray-dark: #1b1b1b;
  --color-gray: #838383;
  --color-gray-light: #e3e3e3;
  --color-gray-lighter: #d9d9d9;

  /* Amber */
  --color-amber: #ffae00;
  --color-amber-dark: #b07705;

  /* ========================================
     Spacing (for margin and padding)
     ======================================== */
  --spacing-0: 0;
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-7: 1.75rem; /* 28px */
  --spacing-8: 2rem; /* 32px */
  --spacing-10: 2.5rem; /* 40px */
  --spacing-12: 3rem; /* 48px */
  --spacing-14: 3.5rem; /* 56px */
  --spacing-18: 4.5rem; /* 72px */

  /* ========================================
     Size (for width and height)
     ======================================== */
  --size-4: 0.25rem; /* 4px */
  --size-6: 0.375rem; /* 6px */
  --size-10: 0.625rem; /* 10px */
  --size-12: 0.75rem; /* 12px */
  --size-14: 0.875rem; /* 14px */
  --size-16: 1rem; /* 16px */
  --size-17: 1.0625rem; /* 17px */
  --size-18: 1.125rem; /* 18px */
  --size-20: 1.25rem; /* 20px */
  --size-22: 1.375rem; /* 22px */
  --size-24: 1.5rem; /* 24px */
  --size-25: 1.5625rem; /* 25px */
  --size-26: 1.625rem; /* 26px */
  --size-30: 1.875rem; /* 30px */
  --size-32: 2rem; /* 32px */
  --size-36: 2.25rem; /* 36px */
  --size-40: 2.5rem; /* 40px */
  --size-46: 2.875rem; /* 46px */
  --size-48: 3rem; /* 48px */
  --size-60: 3.75rem; /* 60px */
  --size-70: 4.375rem; /* 70px */
  --size-72: 4.5rem; /* 72px */
  --size-80: 5rem; /* 80px */
  --size-104: 6.5rem; /* 104px */
  --size-168: 10.5rem; /* 168px */
  --size-200: 12.5rem; /* 200px */
  --size-300: 18.75rem; /* 300px */
  --size-320: 20rem; /* 320px */

  /* ========================================
     Max Widths (for containers)
     ======================================== */
  --max-width-sm: 492px;
  --max-width-md: 640px;
  --max-width-lg: 854px;
  --max-width-xl: 960px;
  --max-width-2xl: 1008px;
  --max-width-3xl: 1066px;
  --max-width-4xl: 1360px;

  /* ========================================
     Border Radius
     ======================================== */
  --radius-none: 0;
  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 3rem; /* 48px */
  --radius-full: 50vh;

  /* ========================================
     Font Weights
     ======================================== */
  --font-weight-normal: 500;
  --font-weight-bold: 700;

  /* ========================================
     Line Heights
     ======================================== */
  --line-height-none: 100%;
  --line-height-tight: 125%;
  --line-height-normal: 140%;
  --line-height-relaxed: 175%;

  /* ========================================
     Shadows
     ======================================== */
  --shadow-sm: 0 0.3125rem 1rem rgb(74 31 6 / 5%); /* 0px 5px 16px */

  /* ========================================
     Focus Styles
     ======================================== */
  --focus-ring-width: 0.125rem; /* 2px */
  --focus-ring-offset: 0.125rem; /* 2px */
  --focus-ring-color: var(--color-primary);

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
}

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

body {
  color: #262522;
  color: var(--color-black);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  -webkit-font-smoothing: antialiased;
  font-weight: 500;
  font-weight: var(--font-weight-normal);
  line-height: 140%;
  line-height: var(--line-height-normal);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Skip to main content link for keyboard navigation */
.skip-link {
  position: absolute;
  z-index: 1000;
  top: -100px;
  left: 0;
  padding: 0.5rem;
  padding: var(--spacing-2);
  border-radius: 0 0 0.375rem 0;
  border-radius: 0 0 var(--radius-sm) 0;
  background: #00c4bf;
  background: var(--color-primary);
  color: #fff;
  color: var(--color-white);
  font-size: 0.875rem;
  font-size: var(--size-14);
  font-weight: 700;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}
.skip-link:focus {
  top: 70px;
}
@media (max-width: 1208px) {
  .skip-link:focus {
    top: 56px;
  }
}

.main {
  width: 100%;
  flex: 1;
  padding-top: 70px;
}

@media (max-width: 1208px) {
  .main {
    padding-top: 56px;
  }
}

.container {
  max-width: 85rem; /* 1360px */
  padding: 2.5rem;
  padding: var(--spacing-10);
  margin: 0 auto;
}

.container h1 {
  margin-bottom: 1.5rem;
  margin-bottom: var(--spacing-6);
  color: #262522;
  color: var(--color-black);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
}

.container p {
  color: #6b6b68;
  color: var(--color-text-gray);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  font-family: var(--font-family-ja);
  font-size: 1rem; /* 16px */
  line-height: 1.75;
}

button,
a,
[role="button"] {
  touch-action: manipulation;
}