/* ボタンの基本スタイル */
.custom-graybtn {
    display: inline-block; /* インライン要素として表示 */
    font-weight: 400; /* テキストの太さ */
    color: #333; /* テキストカラー */
    background-color: #ede6e4; /* 背景色 */
    border: 1px solid #b09289; /* ボーダー */
    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-graybtn:hover {
    background-color: #dbceca; /* 少し濃い色 */
    border-color: #dbceca;
    text-decoration: none; /* 下線なし */
}

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

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

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