/****************************************

          Serif

*****************************************/

.serif01,
.serif02,
.serif03,
.serif04,
.serif05,
.serif06,
.serif07 {
    border-top: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
}

    /* beforeで枠線の三角を表現 */
.serif01::before,
.serif02::before,
.serif03::before,
.serif04::before,
.serif05::before,
.serif06::before,
.serif07::before {
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
    top: -16px;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #DDDDDD;
    /**ボーダーと同色に設定**/
    border-left: 16px solid transparent;
}

    /* beforeで本体の三角を表現 */
.serif01::after,
.serif02::after,
.serif03::after,
.serif04::after,
.serif05::after,
.serif06::after,
.serif07::after {
    width: 0;
    height: 0;
    content: '';
    display: block;
    position: absolute;
    top: -14px;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #FFFFFF;
    /**ここは背景色(白など)に設定**/
    border-left: 16px solid transparent;
}

    /***個別設定(Absolute)***/
.serif01::before {
    left: 55px;
}

.serif01::after {
    left: 55px;
}

.serif02::before {
    left: 185px;
}

.serif02::after {
    left: 185px;
}

.serif03::before {
    left: 328px;
}

.serif03::after {
    left: 328px;
}

.serif04::before {
    left: 465px;
}

.serif04::after {
    left: 465px;
}

.serif05::before {
    left: 605px;
}

.serif05::after {
    left: 605px;
}

.serif06::before {
    left: 741px;
}

.serif06::after {
    left: 741px;
}

.serif07::before {
    left: 881px;
}

.serif07::after {
    left: 881px;
}
    /***個別設定(Absolute)***/