* {  box-sizing: border-box; }
:root {
  --main-color: hsl(194, 80%, 50%);
  --body-color: hsl(194, 80%, 95%);
  --bac1-color: hsl(194, 80%, 80%);
  --bac2-color: hsl(194, 80%, 90%);
  --line-color: hsl(194, 80%, 30%);
}
body {  
  background-color: var(--body-color);
}
.container {
  margin-top: 2rem;
  max-width: none;
  width: 100%;
  display: flex;
  align-items: flex-start;          /* 上端を揃える */
  gap: 20px;                        /* 左右のすき間 */
}

#dragdrop {
  display: flex;
  flex: 1;                          /* 左側を可変幅にする */
  flex-direction: column;           /* 縦に積む */
  align-items: center;              /* 中央揃えの基準を作る */
}
#thumbGroup {
  padding: 8px 8px 5px 8px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  background-color: var(--bac1-color);
  border: 1px var(--line-color) solid;
  border-radius: 8px;
}
.thumb {
  width:90px;
  height:auto;
  object-fit: contain;
  cursor: pointer; 
}  
#mainimg-wrapper {
  display: inline-block;
  width: 100%;max-width:640px;
  height: auto;  
  background-color: var(--bac1-color);
  border: 1px var(--line-color) solid;
  border-radius: 8px;
  padding: 8px 8px 5px 8px;
}
#mainimg-wrapper img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
#dragdrop img .mainimg {
  margin: 0;        /* auto を消す */
}
#effect {
  width: 420px;                     /* 右パネルの幅を固定 */
  flex-shrink: 0;                   /* 右側が押しつぶされないようにする */
  background-color: var(--bac2-color);
  border: 1px var(--line-color) solid;
  border-radius: 8px;
  padding: 10px 10px 20px 10px;
}
#button_hide,#button_show {
  width: 80px;height: 28px;
}
#opnspinner,#clsspinner {
 width: 30px;height: 20px;
}
#effectbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  margin-left: 20px;
}