@media (max-width: 768px) {
    .btn-smartphone {
        font-size: 12px; 
        margin: 2px;
        text-wrap: nowrap;
    }
    .menu-title,
    .menu-details {
        display: block;
    }

    .footer-link {
        display: block; 
        margin: 10px 0; 
        font-size: 0.9rem;
    }

    .mobile-hidden {
        display: none;
    }
    .text-smartphone {
        font-size: 12px;
    }

    .text-smartphone-sm {
        font-size: 8px;
    }   
}
.card-body {
    background-color: #FFFFFF;
}
.fas, .far {
    color: gold;  
}

.shadow-hover:hover {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.scrollable-container {
    padding-top: 16px;
    padding-bottom: 16px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}
/* スクロールバーのスタイルをカスタマイズ */
.scrollable-container::-webkit-scrollbar {
    height: 5px; /* 高さを設定 */
}
.scrollable-container::-webkit-scrollbar-thumb {
    background: #b5babd; /* スクロールバーの色 */
}

.bg-therapist-color {
    background-color: #ff9f89;
}

.bg-h3-color {
    background-color: #f8d7da;
}


/* チャットのスタイル */
.chat-container {
    width: 100%;
    margin-top: 20px;
    height: 60vh;
    overflow-y: auto; 
}

.bubble {
    width: fit-content;
    max-width: 60%;
    padding: 10px 20px;
    border-radius: 20px;
    position: relative;
}

.bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

.partner .bubble {
    background-color: lightgray;
    margin-left: 20px;
    align-self: flex-start;
}

.partner .bubble::after {
    left: -16px;
    border-right-color: lightgray;
    transform: translateY(-50%);
}

.auth .bubble {
    background-color: lightgray;
    margin-right: 20px;
    text-align: left;
    align-self: flex-end;
    margin-left: auto;
}

.auth .bubble::after {
    right: -16px;
    border-left-color: lightgray;
    transform: translateY(-50%);
}
/* チャットスタイルここまで */

.btn-notification {
    position: relative;
}
.btn-notification .badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 0.2em 0.6em;
    font-size: 0.75em;
}

.citiesContainer {
    display: flex;
    flex-wrap: wrap;
}

.citiesContainer .form-check {
    flex: 1 1 25%; /* 各チェックボックスの幅を調整 */
}

/* スマホ対応 */
@media (max-width: 768px) {
    .citiesContainer .form-check {
        flex: 1 1 50%; /* スマホの時は幅を100%に */
    }
}

.text-outline-danger {
    color: #dc3545;
}

.btn-outline-danger:hover .text-outline-danger {
    color: #fff;
}

.welcome_a:hover {
    opacity: .5
}

.welcome_a:link {
    text-decoration: none;
    color: #3d3732;
    outline: none
}

.welcome_a:active {
    text-decoration: none;
    color: #3d3732;
    outline: none
}

.welcome_a:visited {
    text-decoration: none;
    color: #3d3732;
    outline: none
}

.welcome_a:hover {
    text-decoration: none;
    color: #3d3732;
    outline: none
}

::-moz-selection {
    background: #fcf9f5;
    color: #3d3732
}

::selection {
    background: #fcf9f5;
    color: #3d3732
}

::-moz-selection {
    background: #fcf9f5;
    color: #3d3732
}