.StepBox1 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color:  #0094ff;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color:#ffffff;
     *zoom:1; 
}

.StepBox1::after {
        border-top: 30px solid #0094ff;
        border-left: 53px solid transparent;
        border-right: 53px solid transparent;
        content: "";
        position: absolute;
        bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
        left: 50%; /* 中央寄せに使用 */
        margin-left: -53px;
    }

.StepBox2 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #00ffff;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color: black;
     *zoom:1; 
}

.StepBox2::after {
    border-top: 30px solid #00ffff;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}

.StepBox3 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #00ff90;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color: black;
     *zoom:1; 
}

.StepBox3::after {
    border-top: 30px solid #00ff90;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}

.StepBox4 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #00ff15;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color: black;
     *zoom:1; 
}

.StepBox4::after {
    border-top: 30px solid #00ff15;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}

.StepBox5 {
    position: relative;
    margin: 0 0 33px;   
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #8fff00;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color:black;
     *zoom:1; 
}

.StepBox5::after {
    border-top: 30px solid #8fff00;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}

.StepBox6A {
    vertical-align:top;
    position: relative;
    margin: 0 0 33px;
    height:150px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #fffa00;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color:black;
    position: relative;
     *zoom:1; 
}

.StepBox6A::after {
    border-top: 30px solid #fffa00;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}
.StepBox6B {
    vertical-align:top;
    position: relative;
    margin: 0 0 100px;
    height:220px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #fffa00;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color:black;
    position: relative;
     *zoom:1; 
}

.StepBox6B::after {
    border-top: 100px solid #fffa00;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -100px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}

.StepBox7 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #ff7d00;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color: black;
     *zoom:1; 
}

.StepBox7::after {
    border-top: 30px solid #ff7d00;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}
.StepBox8 {
    position: relative;
    margin: 0 0 33px;
    width:100px;
    padding: 5px 0 0 5px;
    background-color: #ff7d00;
    font-size: xx-small; /* テキストの指定 */
    line-height:1.5;
    text-align:center;
    word-wrap:break-word;
    color: black;
     *zoom:1; 
}

.StepBox8::after {
    border-top: 30px solid #ff7d00;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    content: "";
    position: absolute;
    bottom: -30px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%; /* 中央寄せに使用 */
    margin-left: -53px;
}