/**
 * Relocation Page CSS
 * オフィス・工場移転ページ専用スタイル
 * 高橋運輸興業 Webサイトリニューアル
 *
 * このファイルは relocation.html ページ専用のスタイルです。
 * フローチャートや凡例など、移転サービス特有の要素を定義します。
 */

/* ===================================
   カラー定義（このページ専用）
   =================================== */

:root {
  --flow-blue: #6b7add;     /* セカンダリブルー（明るい青） */
  --flow-green: #52b775;    /* グリーン（お客様対応） */
  --flow-red: #e85d6f;      /* 柔らかい赤（青・緑の彩度に合わせて調整） */
}

/* ===================================
   フローチャート
   作業工程を視覚的に表示
   =================================== */

/* フローアイテム */
.flow-item {
  min-width: 110px;
  text-align: center;
  flex-shrink: 0;
}

/* フローボックス（ステップ表示） */
.flow-box {
  padding: 0.8rem 0.3rem;
  border-radius: var(--border-radius-lg);
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: white;
  transition: transform var(--transition);
}

.flow-box:hover {
  transform: translateY(-2px);
}

/* カラーバリエーション */
.flow-box-blue {
  background: var(--flow-blue);
}

.flow-box-green {
  background: var(--flow-green);
}

.flow-box-orange {
  background: var(--flow-red);
}

/* ===================================
   凡例
   カラーの意味を説明
   =================================== */

/* 凡例アイテム */
.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 凡例ボックス（色見本） */
.legend-box {
  width: 20px;
  height: 20px;
  border-radius: var(--border-radius);
  flex-shrink: 0;
}

.legend-box-blue {
  background: var(--flow-blue);
}

.legend-box-green {
  background: var(--flow-green);
}

.legend-box-orange {
  background: var(--flow-red);
}

/* ===================================
   レスポンシブ対応
   =================================== */

@media (max-width: 768px) {
  .flow-item {
    min-width: 90px;
    flex-shrink: 0;
  }

  .legend-item {
    font-size: var(--text-sm);
  }

  .flow-box {
    font-size: 0.85rem;
    padding: 0.7rem 0.2rem;
  }
}

@media (max-width: 480px) {
  /* フローボックス */
  .flow-box {
    font-size: 0.8rem;
    padding: 0.6rem 0.2rem;
  }
}