body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
}

#layer {
    position: relative;
    width: 100%;
    max-width: 600px;
    /* 中央寄せのために幅制限 */
    aspect-ratio: 3 / 4;
    /* 高さを自然に調整（768x1024相当） */
    margin: 20px auto;
}

#layer>canvas,
#highlights,
#line
 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 3px solid black;
}

.palette1,
.palette2 {
    display: flex;
    flex-wrap: wrap;
    /* スマホ対応 */
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 630px;
    margin: 10px auto;
}

.palette1 img,
.palette2 img {
    height: 40px;
    width: auto;
    cursor: pointer;
}

#saveButton {
margin-top: 20px; /* 上部に余白 */
    padding: 5px 20px; /* 内側の余白 */
    font-size: 16px; /* フォントサイズ */
    border-radius: 5px; /* 角を丸くする */
}