:root {
  --primary-color: #ff7b7b;
  --primary-text-color: #4d4d4d;
  --secondary-text-color: #284b66;
  --third-text-color: #4e4e4e;
  --navy-blue: #2b4157;
  --yellow: #ffe566;
  --pink: #e4746c;
  --bg-pink: #fff5f5;
  --dark: #333;
  --gray: #93a5b2;
  --default-letter-spacing: 0.15em;
}

:root {
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.75rem;
  --font-4xl: 2rem;
  --font-5xl: 2.125rem;
  --font-6xl: 2.5rem;
}

:root {
  --final-transform: translateX(-300%);
  --carousel-duration: 25s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: var(--header-height, 80px); /* header.css で --header-height を定義する必要あり */
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: var(--primary-text-color);
  overscroll-behavior-x: auto;
  transition: background 0.5s cubic-bezier(0.4, 0, 1, 1);
}

.primary {
  color: var(--primary-color);
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}