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



          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)***/