@charset "UTF-8";

/* ---------- 導入の流れ（例）：1列カード ---------- */
.flow-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 20px 0;
}
.flow-step {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: .95rem;
  line-height: 1.6;
}

/* ---------- よくある改善ポイント：3列カード ---------- */
.improve-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin: 20px 0;
  padding: 0;
}
.improve-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  font-size: .95rem;
  line-height: 1.6;
}
.improve-card strong {
  color: var(--accent, #1f8a3a);
}


.flow-step {
  background: #fff;
  border: 1px solid #e0e0e0;  /* ← ここを薄グレーで残すのはOK */
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);  /* ← 少し影を濃く */
  font-size: .95rem;
  line-height: 1.6;
  transition: transform .2s ease, box-shadow .2s ease;
}
.flow-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);  /* ← ホバーで浮く */
}

/* 強制的にカード感を出す（共通CSSより優先させる） */
.details .flow-grid .flow-step{
  border: none !important;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.10) !important;
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (hover:hover){
  .details .flow-grid .flow-step:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.14) !important;
  }
}

/* 改善ポイントも少しだけ持ち上げる */
.details .improve-card{
  box-shadow: 0 6px 18px rgba(0,0,0,.08) !important;
  border: none !important;
}
@media (hover:hover){
  .details .improve-card:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(0,0,0,.12) !important;
  }
}