body {
    font-family: 'Noto Sans JP', 'Noto Sans SC', sans-serif;
}

.logo {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

.font-xl {
    font-size: 1.75rem;
    font-weight: 500;
}

.font-lg {
    font-size: 1.5rem;
    font-weight: 400;
}

.font-md {
    font-size: 1rem;
    font-weight: 300;
}

.font-sm {
    font-size: 0.75rem;
}
.font-xs{
    font-size:.5em;
}

.article h1 {
    font-size: 1.75em;
    font-weight: 300;
}

.article h2 {
    font-size: 1.5em;
    font-weight: 300;
    padding-top: 75px;
}

.article h3 {
    font-size: 1.2em;
    font-weight: 300;
    padding-top: 55px;
}

.article h4 {
    font-size: 1.2em;
    font-weight: 300;
    padding-top: 45px;
}


main {
    margin-top: 50px;
}

.news-scroller {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
}

    .news-scroller::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .news-scroller .d-flex {
        display: flex;
        flex-wrap: nowrap;
    }

    .news-scroller .card {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

.error {
    color: red;
    font-size: 0.875rem; /* Optional: Adjust font size */
}


.breadcrumb {
    --bs-breadcrumb-divider: '\f054';
}

.breadcrumb-item a {
    text-decoration: none; /* Removes underline */
    color: var(--bs-muted-text, #6c757d); /* Default Bootstrap text-muted color */
}
.breadcrumb-item + .breadcrumb-item::before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    content: var(--bs-breadcrumb-divider);
}

.comment-content img{
    width:100%;
}

.custom-button {
    cursor: pointer;
   
    transition: background-color 0.3s ease; /* Optional: Adds a hover effect */
}