/* ベース設定 */
body {
  color: #334155;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}
.font-en { font-family: 'Outfit', sans-serif; }

/* =========================================
   ボタン＆リンクのアニメーション設定
   ========================================= */
   
.btn-anim-base {
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
  z-index: 1; 
}
.btn-anim-base::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1; 
}
.btn-anim-base:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* 1. ヒーローエリア用（デフォルト青背景、ホバーで白背景＋青文字に反転） */
.btn-blue {
  background-color: #0072cf;
  color: #ffffff;
  border-color: #0072cf;
}
.btn-blue::before { background-color: #ffffff; }
.btn-blue:hover { color: #0072cf; border-color: #0072cf; }

/* 2. Contactセクション用（ホバーで白背景、青文字） */
.btn-white {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-white::before { background-color: #ffffff; }
.btn-white:hover { color: #0072cf; border-color: #ffffff; }

/* ヘッダーナビ用 */
.header-nav-anim {
  position: relative;
  overflow: hidden;
  padding: 8px 20px;
  border-radius: 9999px;
  transition: color 0.4s ease;
  z-index: 1;
  color: #0f172a; 
}
.header-nav-anim::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #0072cf; 
  border-radius: 9999px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.header-nav-anim:hover { color: #ffffff !important; }
.header-nav-anim:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* 最下部スクロール時のヘッダー青モード用 */
.header-blue-mode .header-nav-anim {
  color: #ffffff; 
}
.header-blue-mode .header-nav-anim::before {
  background-color: #ffffff; 
}
.header-blue-mode .header-nav-anim:hover {
  color: #0072cf !important; 
}

/* ヘッダーテキスト色（ロゴ等）の制御用 */
.header-text-color {
  color: #0f172a;
  transition: color 0.5s ease;
}
.header-blue-mode .header-text-color {
  color: #ffffff;
}

/* フッターナビ用 */
.nav-link-anim {
  position: relative;
  overflow: hidden;
  padding: 8px 20px;
  border-radius: 9999px;
  transition: color 0.4s ease;
  z-index: 1;
}
.nav-link-anim::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: #ffffff;
  border-radius: 9999px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.nav-link-anim:hover { color: #0072cf !important; }
.nav-link-anim:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* 画像プレースホルダーエフェクト */
.img-wrap { overflow: hidden; }
.img-wrap img, .img-wrap .bg-placeholder {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.group:hover .img-wrap .bg-placeholder { transform: scale(1.05); }