@media (min-width: 576px) {
    .modal-dialog {
        max-width: 90%;
    }
}
@media (min-width: 870px) {
    .modal-dialog {
        max-width: 75%;
    }
}
.modal-body{
    overflow: auto;
}

.card-header{
    background-color: var(--main-color);
}

.card-primary.card-outline{
    border-top-color: var(--accent-color);
}

.game_card .card-title{
    font-weight: bold;
    margin-bottom: 0.75rem;
    background: linear-gradient(165deg, white 52%, var(--main-color-light) 100%);
}

.card{
    overflow: auto;
}
.card-body {
    padding: 1rem;
}

.btn {
    transition: .3s ease;
    box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.5); /* 境界線の色を指定してください */
}

.btn:hover {
    transform: translateY(2px);
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); /* 境界線の色を指定してください */
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-dark,
.btn-outline-info{
    background-color: white;
}

/*.btn:hover {*/
/*    animation: anima-button-030 1s;*/
/*}*/

/*@keyframes anima-button-030 {*/
/*    0% {*/
/*        box-shadow: 0 0 0 0 var(--button-hover-shadow-color);*/
/*    }*/
/*    100% {*/
/*        box-shadow: 0 0 0 1.2em rgb(0 0 0 / 0%);*/
/*    }*/
/*}*/

/* iCheck */
[class*=icheck-]>label:not(.form-check-label):not(.custom-file-label){
    font-weight: normal;
}

.table td, .table th {
    vertical-align: middle;
}

[class*=icheck-]>input:first-child+input[type=hidden]+label::before,
[class*=icheck-]>input:first-child+label::before{
    background-color: white;
}

/* table */
.table{
    box-shadow: 3px 4px 15px -6px var(--main-color);
}

/* button */
.btn {
    padding: 0.2rem 0.75rem;
}