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

/* 画面幅による並び替え */
@media (min-width: 769px){
  .btn-container{ grid-template-columns: repeat(2, var(--btn-width)); }
}

@media (max-width: 768px){
  .btn-container{
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: auto;
  }
}

/* 共通ボタンスタイル */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: 600;
  color: #0b2073;
  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;
}

/* ▼ ボタン別デザイン ▼ */

/* 青ボタン */
.btn1{
  width: 200px;
  gap: 15px;
  background: linear-gradient(#f9ffff, #c9ffff);
}
.btn1:hover{
  background: linear-gradient(#f9ffff, #e0ffff);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* 茶ボタン */
.btn7{
  width: 480px;
  gap: 15px;
  background: linear-gradient(#fff8f0, #ffc88e);
}
.btn7:hover{
  background: linear-gradient(#fff8f0, #ffdfbf);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* ベージュボタン */
.btn5{
  width: 200px;
  gap: 15px;
  background: linear-gradient(#ffffe8, #ffecb3);
}
.btn5:hover{
  background: linear-gradient(#fffff0, #fff6d9);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* 淡緑ボタン */
.btn2{
  width: 480px;
  gap: 15px;
  background: linear-gradient(#f8fff8, #8ce68c);
}
.btn2:hover{
  background: linear-gradient(#f8fff8, #b3ffb3);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}
/* 淡赤ボタン */
.btn2b{
  width: 480px;
  gap: 15px;
  background: linear-gradient(#fff8fa, #ffbfcf);
}
.btn2b:hover{
  background: linear-gradient(#fff, #ffd3de);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}

/* 赤：警告・重要操作 */
.btn3{
  width: 480px;
  gap: 15px;
  background: linear-gradient(#f5f5f5, #dddddd);
}
.btn3:hover{
  background: linear-gradient(#fefefe, #e6e6e6);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.25);
}

/* グレー：補助・キャンセル */
.btn4{
  width: 200px;
  gap: 15px;
  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);
}

/* 白：標準ボタン */
.btn6{
  width: 200px;
  gap: 15px;
  background: linear-gradient(#fff, #d7d7d7);
}
.btn6:hover{
  background: linear-gradient(#fff, #e6e6e6);
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0,0,0,0.2);
}