@media (max-width: 767px) {
    body {
        font-size: 12px; /* スマートフォン向けにフォントサイズを小さくする */
    }
    .heading {
        font-size: 10px; /* 見出しのフォントサイズを調整 */
    }
    .btn-smartphone {
        font-size: 12px; /* フォントサイズを小さくする */
        margin: 2px;
        text-wrap: nowrap;
    }
    .input-smartphone {
        width: 160px;
    }
    .font-smartphone {
        font-size: 0.875rem; /* スマホサイズのフォントサイズ */
    }
    .smartphone-x-overflow {/* スマホサイズのとき横に突き抜ける */
        overflow-x: auto;
    }
}

@media (min-width: 768px) {
    .custom-flex {
        display: flex;
        align-items: center;
    }
    .custom-mx-2
    {
        margin-left: 3px;
        margin-right: 3px;
    }  
}
.table-text-center {
    text-align: center;
    vertical-align: middle;
}

.btn-orange {
    background-color: orange;
    border : solid 1px;
}
.btn-orange:hover{
    background-color: rgb(255, 157, 0);
    border : solid 1px;
}

#card-element {
    border-radius: 4px;
    padding: 12px;
    border: 1px solid rgba(50, 50, 93, 0.1);
    height: 44px;
    width: 100%;
    background: white;
}

.nav-hover-item:hover {
    background-color: #e9ecef; /* ホバー時の背景色（薄いグレー） */
    border-color: #ced4da; /* ホバー時のボーダー色（やや濃いグレー） */
}