/*==================================================
11 Utility
==================================================*/

/*======== Display ========*/

.u-block{

    display:block;

}

.u-inline{

    display:inline;

}

.u-inline-block{

    display:inline-block;

}

.u-flex{

    display:flex;

}

.u-grid{

    display:grid;

}

.u-none{

    display:none;

}

/*======== Flex ========*/

.u-flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.u-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.u-column{

    display:flex;

    flex-direction:column;

}

.u-wrap{

    flex-wrap:wrap;

}

/*======== Text ========*/

.u-text-left{

    text-align:left;

}

.u-text-center{

    text-align:center;

}

.u-text-right{

    text-align:right;

}

/* Small */

.it-text-xxs{

    font-size:0.7rem;

    line-height:1.8;

}

.it-text-sm{

    font-size:0.9rem;

    line-height:1.8;

}


/* Normal */

.it-text-md{

    font-size:1rem;

    line-height:1.9;

}


/* Large */

.it-text-lg{

    font-size:1.15rem;

    line-height:1.9;

}

.it-text-xlg{

    font-size:1.3rem;

    line-height:1.9;

}

/*======== Width ========*/

.u-w-100{

    width:100%;

}

.u-w-auto{

    width:auto;

}

/*======== Margin Top ========*/

.u-mt-0{

    margin-top:0;

}

.u-mt-1{

    margin-top:var(--space-1);

}

.u-mt-2{

    margin-top:var(--space-2);

}

.u-mt-3{

    margin-top:var(--space-3);

}

.u-mt-4{

    margin-top:var(--space-4);

}

.u-mt-5{

    margin-top:var(--space-5);

}

.u-mt-6{

    margin-top:var(--space-6);

}

.u-mt-7{

    margin-top:var(--space-7);

}

/*======== Margin Bottom ========*/

.u-mb-0{

    margin-bottom:0;

}

.u-mb-1{

    margin-bottom:var(--space-1);

}

.u-mb-2{

    margin-bottom:var(--space-2);

}

.u-mb-3{

    margin-bottom:var(--space-3);

}

.u-mb-4{

    margin-bottom:var(--space-4);

}

.u-mb-5{

    margin-bottom:var(--space-5);

}

.u-mb-6{

    margin-bottom:var(--space-6);

}

.u-mb-7{

    margin-bottom:var(--space-7);

}

/*======== Padding ========*/

.u-p-0{

    padding:0;

}

.u-p-3{

    padding:var(--space-3);

}

.u-p-4{

    padding:var(--space-4);

}

.u-p-5{

    padding:var(--space-5);

}

.u-p-6{

    padding:var(--space-6);

}

/*======== Gap ========*/

.u-gap-2{

    gap:var(--space-2);

}

.u-gap-3{

    gap:var(--space-3);

}

.u-gap-4{

    gap:var(--space-4);

}

.u-gap-5{

    gap:var(--space-5);

}

.u-gap-6{

    gap:var(--space-6);

}

/*======== Color ========*/

.u-primary{

    color:var(--primary);

}

.u-white{

    color:#fff;

}

.u-light{

    color:var(--text-light);

}


/*==================================================
 Button Alignment Utility
==================================================*/

/* 左寄せ（デフォルト） */
.u-button-left{

    display:flex;
    justify-content:flex-start;

}

/* 中央 */
.u-button-center{

    display:flex;
    justify-content:center;

}

/* 右寄せ */
.u-button-right{

    display:flex;
    justify-content:flex-end;

}