.ribbon {
    position: absolute;
    left: -5px; 
    top: -5px;
    z-index: 9999999;
    overflow: hidden;
    width: 75px; height: 75px;
    text-align: right;
}
.ribbon span {
    font-size: 9px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    /*background: linear-gradient(#F70505 0%, #8F0808 100%);*/
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -5px;
}

.ribbon.big {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 9999999;
    overflow: hidden;
    width: 110px;
    height: 110px;
    text-align: right;
}
.ribbon.big span {
    font-size: 12px;
    font-weight: bold;
    color: #000;
    text-transform: uppercase;
    text-align: center;
    line-height: 27px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 156px;
    display: block;
    background: #79A70A;
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 31px;
    right: -12px;
}








.ribbon span::before {
    content: "";
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid #8F0808;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #8F0808;
}
.ribbon span::after {
    content: "";
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid #8F0808;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #8F0808;
}


.ribbon.blue span{
    background: #2E2EFF;
    background: linear-gradient(#2E2EFF 0%, #0404C1 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);    
}
.ribbon.blue span::before{
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #1e5799;
}
.ribbon.blue span::after{
    border-left: 3px solid transparent;
    border-right: 3px solid #1e5799;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #1e5799;
}


.ribbon.orange span{
    background: #ff671b;
    background: linear-gradient(#ff671b 0%, #ff671b 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);    
}
.ribbon.orange span::before{
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #ff671b;
}
.ribbon.orange span::after{
    border-left: 3px solid transparent;
    border-right: 3px solid #ff671b;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #ff671b;
}

.ribbon.green span{
    background: #99B714;
    background: linear-gradient(#99B714 0%, #99B714 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);    
}
.ribbon.green span::before{
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #99B714;
}
.ribbon.green span::after{
    border-left: 3px solid transparent;
    border-right: 3px solid #99B714;
    border-bottom: 3px solid transparent;
    border-top: 3px solid #99B714;
}





.wrapBurst{
    z-index: 9999;
    position: relative;
    margin: 8px 18px 18px 15px;
}


/* -------------------- トゲトゲ 36 -------------------- */
.burst-36 {
    position: relative;
    text-align: center;
    text-transform:uppercase;
    color:#fff;
    -webkit-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    transform: rotate(-60deg);
    z-index: 1;
}
.burst-36, .burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
    height: 3.5em;
    width: 3.5em;
    background: #BD0000;
}
.burst-36.isok, .burst-36.isok:before, .burst-36.isok:after, .burst-36.isok div, .burst-36.isok div:before, .burst-36.isok div:after {
    height: 111px;
    width: 111px;
    background: #FED14D;
    color: #000;
    font-size: 52px;

}
.burst-36.isok > div > div {
    padding-top: 16px;
}

.burst-36:before, .burst-36:after, .burst-36 div, .burst-36 div:before, .burst-36 div:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -100;
}
.burst-36:before, .burst-36 div:before {
    -webkit-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
    transform: rotate(10deg);
}
.burst-36:after, .burst-36 div:after {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}
.burst-36 div {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
    z-index:2;
}
.burst-36 > div > div {
    display:table;
}
.burst-36 span {
    /*    display:table-cell;
        vertical-align:middle;
        transform: rotate(-21deg);
        font-size: 11px;*/
}
.burst-36 i {
    display:table-cell;
    vertical-align:middle;
    font-size: 34px;
}