@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&family=Outfit:wght@400;500;700;800&display=swap');

/* =========================================
   1. Design Tokens & Variables
   ========================================= */
:root {
  /* Colors */
  --color-navy: #0F172A;
  --color-navy-light: #1E293B;
  --color-orange: #F97316;
  --color-orange-hover: #EA580C;
  --color-bg: #F8FAFC;
  --color-text: #334155;
  --color-text-light: #64748B;
  --color-white: #FFFFFF;
  --color-border: #E2E8F0;

  /* Layout */
  --container-width: 1280px;
  --header-height: 80px;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
}

/* Font Family Utilities */
/* Font Family Utilities */
.font-\[\'Outfit\'\] {
  font-family: 'Outfit', sans-serif;
}

/* Layout Utilities */
.container-custom {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  width: 100%;
}

/* Custom Utilities */
.btn-primary {
  display: inline-block;
  background-color: var(--color-orange);
  color: var(--color-white);
  text-align: center;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background-color: var(--color-orange-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.card-shadow {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-shadow:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.2);
}