body {
    font-family: 'Roboto', 'Noto Sans JP';
  }

.bg-transparent {
    background-color: transparent !important;
}

.bg-img-top {
    background-color: rgb(3, 30, 34);
}

.bg-dark-c {
    background-color: rgb(3, 30, 34);
}

.bg-dark-footer {
    background-color: rgb(3, 30, 34) !important;
}

.link-card {
    cursor: pointer;
    transition: all 0.5s ease;
}

.link-card:hover {
    scale: 103%;
}

.link-icon {
    cursor: pointer;
    transition: all 0.5s ease;
}

.link-icon:hover {
    scale: 110%;
}

.pb-7 {
    padding-bottom: 6rem !important;
}

ul {
    padding-left: 10px;
}

ul li {
    list-style: none;
}

ul li::before {
    content: '>';
    margin-right: 8px;
    font-weight: 300;
}

.custom-atag {
    color: #002050;
}

@media (max-width: 576px) {
    .pb-6 {
        padding-bottom: 3rem !important;
    }
    .pb-8 {
        padding-bottom: 3rem !important;
    }
}

@media (min-width: 576px) {
    .pb-6 {
        padding-bottom: 4.5rem !important;
    }

    .pb-8 {
        padding-bottom: 7.5rem !important;
    }
}

.animation-box-h1 {
    height: 50px;
    /* overflow: hidden; */
}

.animation-box-p {
    height: 30px;
    overflow: hidden;
}

.animation-box-p-3 {
    height: 96px;
    /* overflow: hidden; */
}

.animation-right {
    animation-name: slideRight;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.animation-bottom {
    animation-name: slideBottom;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}



.animation-delay-1s {
    animation-delay: 1s;
}

.animation-delay-2s {
    animation-delay: 2s;
}

.animation-delay-3s {
    animation-delay: 3s;
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideBottom {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}