/* Base CSS: CSS変数とグローバルなリセット/基盤スタイル */
:root {
  --cb-bg: #DCE4EA;
  --cb-dark: #2F3A4F;
  --cb-gray: #8FA3B8;
  --cb-teal: #A8CFC4;
  --cb-teal-text: #6F9E91;
  --cb-gold: #C9C6A3;
  --cb-gold-text: #8F8B5E;
  --cb-white: #FDFEFF;
  --font-jp: 'Noto Sans JP', sans-serif;
  --font-en: 'Montserrat', sans-serif;
}

/* Base fonts */
body {
  font-family: var(--font-jp);
  color: var(--cb-dark);
  background-color: var(--cb-bg);
}

.font-en {
  font-family: var(--font-en);
}

/* Animation Utilities (base) */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fade-in-section.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero overlay baseline (kept minimal;増やす場合は utilities.css/ components.css に分割) */
.hero-bg { /* placeholder; 実際のクラスは index.html 側で利用される */ }

/* Simple image blend helper (拡張時に移動可能) */
.soft-img { filter: grayscale(20%) contrast(90%); transition: filter 0.5s ease; }
.soft-img:hover { filter: grayscale(0%) contrast(100%); }