<div class="col-md-8 offset-md-2 mb-3" id="flowchart">
<div class="row">
<ul class="col-12">
<li class="flow-step flow-form"><a href="/jp/study/courses/area/?t=2" class="btn btn-default">上級講座にお申し込み</a></li>
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>主催者から連絡</li>
<li class="flow-step">受講料の入金</li>
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>主催者から連絡</li>
<li class="flow-step flow-lms">事前課題を提出</li>
<li class="flow-arrow"><i class="fas fa-arrow-down"></i></li>
<li class="flow-step flow-fb">講座（DAY1）</li>
<li class="flow-arrow"><i class="fas fa-arrow-down"></i></li>
<li class="flow-step flow-lms">中間課題を提出</li>
<li class="flow-arrow"><i class="fas fa-arrow-down"></i></li>
<li class="flow-step flow-fb">講座（DAY2）</li>
<li class="flow-arrow"><i class="fas fa-arrow-down"></i></li>
<li class="flow-step flow-lms">修了テスト実施</li>
</ul>
<ul class="col-6">
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>合格</li>
<li class="flow-step flow-lms">修了レポートを提出</li>
<li class="flow-arrow"><i class="fas fa-arrow-down"></i></li>
<li class="flow-step flow-lms">事前課題・中間課題・修了レポート最終提出</li>
</ul>
<ul class="col-6">
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>不合格<i class="fas fa-arrow-up ml-2"></i></li>
<li class="flow-step flow-gray">再テスト（無料）</li>
</ul>
<ul class="col-12">
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>協会事務局から連絡</li>
<li class="flow-step">合否結果のメールを受信</li>
</ul>
<ul class="col-6">
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>合格</li>
<li class="flow-step">上級ウェブ解析士に認定</li>
</ul>
<ul class="col-6">
<li class="flow-arrow"><i class="fas fa-arrow-down mr-2"></i>不合格</li>
<li class="flow-step flow-gray">認定講座に再申込</li>
</ul>
</div>
</div>
#flowchart ul {
margin: 0;
}
#flowchart ul > li {
list-style: none;
font-weight: 600;
}
#flowchart .flow-step {
text-align: center;
padding: 20px;
background: #def1e5;
color: #142;
}
#flowchart .flow-step.flow-form {
padding: 0;
}
#flowchart .flow-step.flow-lms {
color: #146;
background: #ACD;
}
#flowchart .flow-step.flow-fb {
color: #FFF;
background: #60b0cb;
}
#flowchart .flow-step a {
text-align: center;
display: block;
padding: 20px;
font-weight: 700;
}
#flowchart .flow-arrow {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 1.4rem;
color: #666;
}
#flowchart .flow-arrow i {
font-size: 3rem;
color: #ccc;
}
#flowchart .flow-jump {
display: block;
}
#flowchart .flow-jump:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "|\A|\A|\A|\A|\A|\A|\A|";
white-space: pre;
color: #ccc;
font-size: 3.3rem;
line-height: 0.8em;
display: block;
}
#flowchart .flow-gray {
color: #444;
background: #eee;
}
#flowchart .flow-arrow {
font-size: .8em;
}
