/* ===========================
   スペーシング
   =========================== */

.mb-48 {
    margin-bottom: 48px; /* 3rem */
}

/* ===========================
   色関連
   =========================== */

/* プライマリブルー */
.text-blue-600 {
    color: #274dea;
}

/* ===========================
   Flexbox関連
   =========================== */

.flex {
    display: flex;
}

.align-items-start {
    align-items: flex-start;
}

.gap-16 {
    gap: 16px;
}

.flex-wrap-nowrap {
    flex-wrap: nowrap;
}

/* タブレット以下で縦並び */
@media screen and (max-width: 1024px) {
    .tablet\:flex-direction-col {
        flex-direction: column;
    }
}

/* ===========================
   表示・サイズ関連
   =========================== */

.block {
    display: block;
}

.w-auto {
    width: auto;
}

.max-w-45 {
    max-width: 45%;
}

.h-auto {
    height: auto;
}

.h-500 {
    height: 500px;
}

.h-700 {
    height: 700px;
}

.object-fit-contain {
    object-fit: contain;
}

.object-fit-cover {
    object-fit: cover;
}

.object-position-top {
    object-position: top;
}

/* タブレット以下で全幅 */
@media screen and (max-width: 1024px) {
    .tablet\:w-100 {
        width: 100%;
    }
    
    .tablet\:max-w-100 {
        max-width: 100%;
    }
    
    .tablet\:h-auto {
        height: auto;
    }
}