.color-palette {
  margin-top: 5px;
}
.color-palette button {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 8px; /* 角を丸くする */
}
.finger_1 { background-color: #A133FF; }
.finger_2 { background-color: #FFC733; }
.finger_3 { background-color: #33FF57; }
.finger_4 { background-color: #33A1FF; }
.finger_5 { background-color: #FF5733; }
.finger_6 { background-color: #FF9A73; }
.finger_7 { background-color: #73C1FF; }
.finger_8 { background-color: #73FF9A; }
.finger_9 { background-color: #FFE173; }
.finger_0 { background-color: #C173FF; }
.foot_1   { background-color: #FF3399; }
.foot_2   { background-color: #33FFD1; }
.etc_1    { background-color: #D1FF33; }
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flex-item {
  margin-right: 20px;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
}
.flex-container {
    display: flex;
	flex-wrap: wrap;
}
.flex-item {
    margin: 5px; /* 距離を縮めるためにmarginを小さく設定 */
}
.title-input {
    width: 400px;
}
.description-input {
    width: 800px;
    height: 50px;
}
.form-container {
    display: flex;
    align-items: flex-start;
	margin-bottom: 5px;
	margin-top: 5px;
}
.form-container .description-input {
    margin-right: 100px;
}
.form-container .save-button {
    align-self: flex-end;
}
.description-container {
    display: flex;
    margin-right: 10px;
}
.description-container label {
    align-self: flex-start;
}
.canvas-container {
    margin-top: 10px;
}

#keyboardName {
    width: 550px !important;
}




.color-palette-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.palette-group {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
  background-color: #f9f9f9;
}

.palette-label {
  font-weight: bold;
  margin-bottom: 5px;
  font-size: 16px;
}



.ten-finger-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.finger {
  width: 60px;
  border: none;
  color: white;
  font-weight: bold;
  border-radius: 20px;
  cursor: pointer;

  /* 縦書き */
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: center;
  padding: 5px 0;
}

/* 指ごとの高さ */
.finger.middle { height: 130px; }
.finger.ring   { height: 120px; }
.finger.index  { height: 110px; }
.finger.pinky  { height: 100px; }
.finger.thumb  { height: 80px;  }

/* 左手の色 */
.finger-left.pinky { background-color: #A133FF; }
.finger-left.ring  { background-color: #FFC733; }
.finger-left.middle{ background-color: #33FF57; }
.finger-left.index { background-color: #33A1FF; }
.finger-left.thumb { background-color: #FF5733; }

/* 右手の色 */
.finger-right.thumb { background-color: #FF9A73; }
.finger-right.index { background-color: #73C1FF; }
.finger-right.middle{ background-color: #73FF9A; }
.finger-right.ring  { background-color: #FFE173; }
.finger-right.pinky { background-color: #C173FF; }

/* 親指の間のスペース用 */
.finger-gap {
  width: 20px;  /* 中央や右端のスペース幅 */
}

/* 足・その他ボタン */
.foot-button {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  font-weight: bold;
  color: white;
  border: none;
  cursor: pointer;
}
.left-foot { background-color: #FF3399; }
.right-foot { background-color: #33FFD1; }
.foot-button.etc { background-color: #D1FF33; }

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.left-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.button-row {
    width: 917px; /* canvasと同じ幅 */
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.spacer {
    flex-grow: 1;
}


.thumbnail-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 左詰め */
    gap: 20px; /* サムネイル同士の隙間 */
}

.thumbnail-card {
    width: 150px; /* 1枚の横幅（サムネイルサイズに合わせる） */
    text-align: center;
}


.home-circle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #DC143C;
    background-color: rgba(106, 141, 146, 0.2);
    box-sizing: border-box;
    cursor: grab;
    z-index: 10;
}


.home-circle-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Azuki', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: #DC143C;
  pointer-events: none;
}

.finger-wrapper {
  position: relative;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.finger-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
}