/* 全要素のサイズをborderのサイズに統一 */
*{
box-sizing:border-box;
}
body{
margin:0;
padding:0;
font-family:Meiryo,sans-serif;
background:#f5f5f5;
}
h2 {
margin: 0;
color: #5b5b5b;
font-size: 16pt;
font-weight: bold;
}
a {
  text-decoration: none; /* 下線を消す */
  color: inherit;        /* 親要素の文字色を使う */
}
input, select{
    border:1px solid #d0d7de;
    border-radius:8px;
    padding:6px 10px;
    box-sizing:border-box;
    background:#fff;
}
/* 画面構成 */
.container{
display:flex;
height:100vh;
}
.left-panel{
flex:1;
padding:20px;
overflow:auto;
}
.right-panel{
width:360px;
background:#dcdcdc;
border-left:1px solid #cccccc;
padding:20px;
}

@media (max-width: 900px){

    .container{
        flex-direction:column;
        height:auto;
    }

    .right-panel{
        width:100%;
        border-left:none;
        border-top:1px solid #cccccc;
        box-sizing:border-box;
    }
}

/* 名刺編集画面 */
.canvas-wrapper{
background:white;
padding:20px;
border:1px solid #cccccc;
display:inline-block;
border-radius: 10px; /* 15px */
box-shadow: 0 9px 21px rgba(0, 0, 0, 0.5);
}
#cardCanvas{
border:1px solid #999999;
}


/* プロパティ */
.property-group{
display:flex;
margin-bottom:4px;
}
.property-group label{
margin-right:auto;
font-size:14px;
}
.property-group input,
.property-group select{
margin-right:right;
width:60%;
padding:6px;
}
.color-picker{
    width:120px;
    height:36px;
    padding:0;
    border:1px solid #ccc;
    border-radius:4px;
    cursor:pointer;
    background:none;
}

/* ボタン */
button{
padding:6px;
cursor:pointer;
font-size: 16px;
line-height: 1.4;
background-color: #bb0000;
color: #fff;
border: 2px solid #bb0000;
border-radius: 10px;
}
.save-area{
display:flex;
}
#btnSaveJson, #btnResizeCard{
margin-left:auto;
background-color: #0078D4;
border: 2px solid #0078D4;
}
#btnLoadJson{
margin-left:left;
background-color: #0078D4;
border: 2px solid #0078D4;
}
#btnPrint{
background-color: #0078D4;
border: 2px solid #0078D4;
}
.toolbar{
margin-bottom:15px;
}
.toolbar button{
margin-right:5px;
margin-bottom:5px;
padding:8px 12px;
cursor:pointer;
}

#btnBold{
color: #bb0000;
background:#f5f5f5;
border: 2px solid #bb0000;
}
#btnBold.active{
color: #fff;
background:#bb0000;
border: 2px solid #bb0000;
}