.flowchart-wrap {
  width:90%;
  max-width:850px;
  margin:60px auto;
  font-family:"Noto Sans JP",sans-serif;
  text-align:center;
}

/* タイトル */
.flowchart-hero h2 {
  font-size:clamp(34px,6vw,50px);
  font-weight:900;
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,0.8),0 0 20px rgba(43,108,176,0.8);
  letter-spacing:0.05em;
  margin-bottom:20px;
}
.flowchart-hero p {
  font-size:clamp(25px,4vw,28px);
  font-weight:600;
  color:#eaf2ff;
  margin-bottom:30px;
}

/* 流れるライン */
.flowchart-line {
  width:100%;
  height:6px;
  background:linear-gradient(90deg,#ffffff,#2B6CB0,#ffffff);
  background-size:200% 100%;
  animation:shine 4s linear infinite;
  margin:20px 0 35px;
  border-radius:999px;
}
@keyframes shine {
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ステップ */
.flowchart-container {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}
.flowchart-step {
  width:260px;
  background:rgba(255,255,255,0.1);
  border:3px solid rgba(255,255,255,0.2);
  border-radius:22px;
  padding:50px 25px;
  position:relative;
  overflow:hidden;
  opacity:0.6;
  transform:scale(0.9);
  transition:all 0.7s ease;
  cursor:pointer;
}
.flowchart-step::before {
  content:attr(data-icon);
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  font-size:130px;
  color:rgba(255,255,255,0.25);
  z-index:0;
}
.flowchart-step.active {
  opacity:1;
  transform:scale(1.07);
  box-shadow:0 0 40px rgba(255,255,255,0.5);
  border-color:rgba(255,255,255,0.6);
}
.flowchart-step .title {
  font-size:40px;
  font-weight:900;
  color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,0.9);
  z-index:1; position:relative;
}
.flowchart-step .desc {
  font-size:27px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 8px rgba(255,255,255,0.8);
  z-index:1; position:relative;
}

/* モバイル */
@media (max-width:850px){
  .flowchart-container {
    flex-direction:column;
    align-items:center;
  }
  .flowchart-step {
    width:95%;
    padding:60px 25px;
  }
}

/* ====== タップ可能アニメーション効果 ====== */
.flowchart-step {
  position: relative;
  cursor: pointer;
}

/* 指マーク（右下に小さく出す） */
.flowchart-step::after {
  content: ""; /* ← \A が改行 */
  white-space: pre;        /* ← 改行を有効にする */
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-size: 30px;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
  opacity: 0.8;
}

/* ホバー時（PC用）・タップ前の注目 */
.flowchart-step:hover::after,
.flowchart-step.active::after {
  opacity: 1;
  transform: translateY(0);
}

/* ふわっと浮くエフェクト */
.flowchart-step:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(255,255,255,0.3);
  transition: all 0.4s ease;
}

@keyframes tapHint {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* 常に軽く動かす */
.flowchart-step::after {
  animation: tapHint 1.2s ease-in-out infinite;
}