body{
    padding:0;
    margin:0;
}

.inner{
    width:100%;
    max-width:820px;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
}

/* wrapper
-----------------------------------------------*/
#wrapper{
    width:calc(100vw - 20px);
    max-width:800px;
    height:calc((100vw - 20px) * (9 / 16));
    max-height:450px;
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    position:relative;
    overflow:hidden;
}
/*
#wrapper #board{
    width:100%;
    height:100%;
    display:block;
}*/

#wrapper > div:hover{
    cursor:move;
}

#wrapper > #asvg:hover,
#wrapper > #background.ui-resizable:hover{
    border:1px solid #000;
}

#wrapper .border{
    position:absolute;
    z-index:10000;
    background:none;
}

/* wrapperのボーダーライン */
#wrapper .border.top{width:100%;height:0px;top:0;left:0;border-top:1px dashed #CCC;}
#wrapper .border.right{width:1px;height:100%;top:0;right:0;border-right:1px dashed #CCC;}
#wrapper .border.bottom{width:100%;height:1px;bottom:0;right:0;border-bottom:1px dashed #CCC;}
#wrapper .border.left{width:0px;height:100%;bottom:0;left:0;border-left:1px dashed #CCC;}

/* 描画領域の設定 */
#amaview,
#preview{
    box-sizing:border-box;
    width:100%;
    margin:0 auto;
}

/* オブジェクトの初期状態 */
#asvg,
#background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
}

/* シャエアボタン
---------------------------------------------*/
#share-button p{
    text-align:center;
}

/* アマビエ画像 一覧
----------------------------------------*/
#amabie{
    position:fixed;
    bottom:130%;
    height:100vh;
    left:0;
    width:100%;
    background:#FFF;
    z-index:10001;
}

#amabie #close{
    text-align:right;
}

#amabie.active{
    bottom:0;
}

#amabie .inner{
    max-width:580px;
    width:100%; 
    height:100%;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

/* amabie new
-----------------------------------------*/
#amabie ul{
    display:block;
    width:100%;
    list-style:none;
    padding:0;
    margin:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content:space-around;
}

#amabie ul li{
    width:calc((100% / 4) - 20px);
    max-width:150px;
    min-width:100px;
    margin:10px;
}

#amabie ul li img{
    width:100%;
    margin:0;
    padding:0;
}

/*#########################  580以下  #########################*/
@media(max-width:579px){
#amabie{
    overflow-y:scroll;
}

}

/* 文字入力
-------------------------------------------*/
#textbox{
    position:absolute;
    top:20px;
    left:20px;
    width:calc(100% - 40px);
    padding:0;
    margin:0;
}

#textbox.move{
    border:none;
}
/*
#textbox.move:hover{
    border:1px dotted #f4f4f4;
}

#textbox.move #texteditor{
    display:none;
}*/

#textbox.move textarea{
    pointer-events:none;
}

#texteditor select,
#texteditor button{
    margin:0 0 0 20px;
    display:inline-block;
    border-radius:0;
    font-size:16px;
    background:#333;
    color:#FFF;
    padding:5px 20px;
    box-sizing:border-box;
    vertical-align:bottom;
    height:40px;
}

#end{
    padding-top:20px;
}

#texteditor input[type="color"]{
    margin:0 20px;
    height:40px;
    width:100px;
    vertical-align:bottom;
}

#texteditor{
    display:block;
}

/*#########################  580以下  #########################*/
@media(max-width:579px){
#textbox{
    max-width:480px;
    min-width:auto !important;
}
#text{
    width:100%;
}

}

#asvg.lock{
/*    width:100% !important;
    top:0 !important;
    left:0 !important;
    height:100% !important;*/
	pointer-events:none;
}

#background:hover + #asvg.lock{
	opacity:0.3;
}

/* ハンドルイメージ */
#asvg span,
#background.ui-resizable span{
    content:"";
    width:5px;
    height:5px;
    background:#FFF;
    border:1px solid #000;
    position:absolute;
    display:none;
}

/* ハンドル表示 */
#asvg:hover span,
#background.ui-resizable:hover span{
    display:block;
}

/* リサイズハンドル */
#asvg.free span.s1,#background.ui-resizable span.s1{top:50%;right:-3px;}
#asvg.free span.s2,#background.ui-resizable span.s2{bottom:-3px;left:50%;}
#asvg.free span.s3,#background.ui-resizable span.s3{bottom:-3px;right:-3px;}
/*#asvg.lock*/

.ui-icon, .ui-widget-content .ui-icon{
    opacity:0 !important;
}

#amaview{
    position:absolute;
    top:0;
    left:0;
    text-align:center;
    width:100%;
    height:100%;
}

#aamaview,
#asvg img{
    width:100%;
    height:100%;
    display:block;
}

#textbox{
    min-width:300px !important;
    min-height:20px;
}

#text:hover{
    border:1px solid #CCC;
}

#text[contenteditable='true']{
    border:1px solid #000;
}