/* =========================================
   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-left: 1.5rem;
  padding-right: 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);
}

/* =========================================
   2. お客様の声 – 吹き出しの尻尾
   ========================================= */
.comment-bubble {
  position: relative;
}

.comment-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 28px;
  border: 7px solid transparent;
  border-top-color: #f1f5f9;
  /* bg-slate-100 相当 */
}