/* ボタンの基本スタイル */
.custom-btn {
    display: inline-block; /* インライン要素として表示 */
    font-weight: 400; /* テキストの太さ */
    color: #fff; /* テキストカラー */
    background-color: #A62700; /* 背景色 */
    border: 1px solid #A62700; /* ボーダー */
    padding: 0.375rem 0.75rem; /* パディング */
    font-size: 1rem; /* フォントサイズ */
    line-height: 1.5; /* 行の高さ */
    border-radius: 0.25rem; /* 角丸 */
    text-align: center; /* 中央寄せ */
    text-decoration: none; /* 下線を消す */
    cursor: pointer; /* マウスカーソルをポインタに */
    transition: all 0.2s; /* スムーズなエフェクト */
}

/* ホバー時 */
.custom-btn:hover {
    background-color: #721c24; /* 少し濃い色 */
    border-color: #721c24;
    text-decoration: none; /* 下線なし */
}

/* フォーカス時 */
.custom-btn:focus {
    outline: none; /* デフォルトのフォーカスリングを消す */
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5); /* アクセシビリティリング */
}

/* アクティブ時 */
.custom-btn:active {
    background-color: #dba899; /* さらに濃い色 */
    border-color: #dba899;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /* 内側のシャドウ */
}

/* 無効状態 */
.custom-btn:disabled {
    opacity: 0.65; /* 薄くする */
    cursor: not-allowed; /* マウスカーソルを変更 */
    background-color: #6c757d;
    border-color: #6c757d;
}