:root{
  --gap: 16px;
  --btn-width: 160px;
}

/* レイアウト（前回と同じ） */
.btn-container{
  display: grid;
  gap: var(--gap);
  justify-content: center;
  padding: 16px;
}

/* 画面幅による並び替え */
@media (min-width: 900px){
  .btn-container{ grid-template-columns: repeat(5, var(--btn-width)); }
}
@media (max-width: 899px) and (min-width: 600px){
  .btn-container{
    grid-template-columns: repeat(3, 1fr);
    max-width: calc(3 * var(--btn-width) + var(--gap));
    margin: auto;
  }
}
@media (max-width: 599px){
  .btn-container{
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: auto;
  }
}

/* 共通ボタンスタイル */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px 5px 15px;
  border-radius: 8px;
  font-weight: 600;
  line-height:130%;
  color: #fff;
  text-decoration: none;
  border: none;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

/* ▼ ボタン別デザイン ▼ ※グラデーションを避ければ今のまま背景色選択も可*/

/* 背景色選択対応 臙脂ボタン */
.btn10{
  border:1px solid #ff7f00;
  background: #ff7f00;
}
.btn10:hover{
  background: #fff6d9;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 背景色選択対応 緑青ボタン */
.btn11{
  border:1px solid #00bc95;
  background: #00bc95;
}
.btn11:hover{
  background: #fff6d9;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 背景色選択対応 茶ボタン */
.btn12{
  border:1px solid #992626;
  background: #992626;
}
.btn12:hover{
  background: #fff6d9;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 臙脂：優先ボタン */
.btn5{
  background: linear-gradient(#ff87a7, #de0047);
}
.btn5:hover{
  background: linear-gradient(#fff6d9, #ffca66);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 緑青：通常ボタン１ */
.btn6{
  background: linear-gradient(#44d7b5, #009973);
}
.btn6:hover{
  background: linear-gradient(#fff6d9, #ffca66);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 茶：通常ボタン２ */
.btn7{
  background: linear-gradient(#e65c5c, #992626);
}
.btn7:hover{
  background: linear-gradient(#fff6d9, #ffca66);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
  color: #4c3013;
}

/* 青：標準ボタン */
.btn1{
  background: linear-gradient(#3399ff, #0066cc);
}
.btn1:hover{
  background: linear-gradient(#4da6ff, #0073e6);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* 赤：警告・重要操作 */
.btn2{
  background: linear-gradient(#ff4d4d, #cc0000);
}
.btn2:hover{
  background: linear-gradient(#ff6666, #e60000);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}

/* 緑：承認・OK */
.btn3{
  background: linear-gradient(#2ecc71, #27ae60);
}
.btn3:hover{
  background: linear-gradient(#48d88a, #2ebf70);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* グレー：補助・キャンセル */
.btn4{
  background: linear-gradient(#b0b0b0, #808080);
}
.btn4:hover{
  background: linear-gradient(#c0c0c0, #999);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}