toolbar{background-color:#00b285 !important;}


toolbar .left:before{content:url('assets/images/pixi-j.png');position:absolute;}
toolbar .left .open-button{margin-left:150px;}

@media only screen and (max-width: 768px) {
toolbar .center:before{content:url('assets/images/pixi-j.png')}
toolbar .center span{display:none;}
toolbar .left:before{content:url('');}

}

resize-drawer{position: relative;}

resize-drawer:after{content:"参考サイズ：LINE＠1200×851/insta 1080×1080/Twitter 800×450/FB 1200×630　";
color:#999999;
position:absolute;
display:block;
width:100%;
text-align:center;
left: 0;
right: 0;
margin-top:-20px;
}


crop-drawer .aspect-ratios>.aspect-ratio {
    position: relative;
}

div[data-ratio="3:2"] + .name
,
div[data-ratio="16:9"] + .name 
,
div[data-ratio="1:1"] + .name 
,
div[data-ratio="1200:851"] + .name
,
div[data-ratio="1000:536"] + .name
,
div[data-ratio="1000:523"] + .name
{
    visibility: hidden;
}
div[data-ratio="1000:523"] + .name:after {
    font-size:12px;
    content: "Facebook";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}

div[data-ratio="3:2"] + .name:after {
    font-size:12px;
    content: "3:2";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}
div[data-ratio="1000:536"] + .name:after {
    font-size:12px;
    content: "TW-card";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}

div[data-ratio="1200:851"] + .name:after {
    font-size:12px;
    content: "LINE@";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}

div[data-ratio="16:9"] + .name:after {
    font-size:12px;
    content: "TW&LINE";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}
div[data-ratio="1:1"] + .name:after {
    font-size:12px;
    content: "正方形";
    display: block;
    visibility: visible;
    position: absolute;
    margin-top: -1.2em;
    width: 100%;
    left: 0;
    right: 0;
}

crop-drawer .preview{margin:0 auto;}