/* ===========================
   色関連（用途ベース）
   =========================== */

/* リンクの色 */
.text-color-link {
    color: #378ef2;
}

.hover\:text-color-link-dark:hover {
    color: #364f6b;
}

/* ===========================
   スペーシング（margin-bottom）
   =========================== */

.margin-bottom-10 {
    margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
    .sp\:margin-bottom-10 {
        margin-bottom: 10px;
    }
}

.margin-bottom-15 {
    margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
    .sp\:margin-bottom-15 {
        margin-bottom: 15px;
    }
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
    .sp\:margin-bottom-20 {
        margin-bottom: 20px;
    }
}

/* ===========================
   表示関連
   =========================== */

.block {
    display: block;
}

@media screen and (max-width: 767px) {
    .sp\:block {
        display: block;
    }
}

.hidden {
    display: none;
}

/* PC表示時に非表示 */
@media screen and (min-width: 768px) {
    .pc\:hidden {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .sp\:w-25 {
        width: 25%;
    }

    .sp\:w-50 {
        width: 50%;
    }

    .sp\:w-75 {
        width: 75%;
    }

    .sp\:w-100 {
        width: 100%;
    }

    .sp\:h-25 {
        height: 25%;
    }

    .sp\:h-50 {
        height: 50%;
    }

    .sp\:h-75 {
        height: 75%;
    }

    .sp\:h-25 {
        height: 100%;
    }

    .sp\:h-auto {
        height: auto;
    }
}

/* PC以上 (1024px~) */
@media (min-width: 1024px) {
    .pc\:w-25 {
        width: 25%;
    }

    .pc\:w-50 {
        width: 50%;
    }

    .pc\:w-75 {
        width: 75%;
    }

    .pc\:w-100 {
        width: 100%;
    }

    .pc\:h-25 {
        height: 25%;
    }

    .pc\:h-50 {
        height: 50%;
    }

    .pc\:h-75 {
        height: 75%;
    }

    .pc\:h-100 {
        height: 100%;
    }


    .pc\:h-auto {
        height: auto;
    }
}