@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* 通用 */
:root {
    --text-Primary-400: #57A203;
    --text-neutral-white: #ffffff;
    --text-neutral-300: #DEE2E6;
    --text-neutral-600: #6C757D; 
    --text-neutral-900: #212529;
    --bg-Primary-100: #F5FEE7;
    --bg-neutral-100:#F8F9FA;
}

/* 盒模型多少寬度就算多少 */
*,
*::before,
*::after {
    box-sizing: border-box;
}



/* 標題 */
.h1 {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
}

.h3 {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
}

.h4 {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 700;
}

.h5 {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

/* 字體顏色 */
.text-neutral-white {
    color: var(--text-neutral-white);
}

.text-neutral-300 {
    color: var(--text-neutral-300);
}

.text-neutral-600 {
    color: var(--text-neutral-600);
}

.text-neutral-900 {
    color: var(--text-neutral-900);
}

.text-Primary-400 {
    color: var(--text-Primary-400);
}

.bg-Primary-100 {
    background-color: var(--bg-Primary-100);
}

.bg-neutral-100{
 background-color: var(--bg-neutral-100);
}


/* 間距 */

.ptb-64 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.ptb-8 {
    padding-top: 8px;
    padding-bottom: 8px;
}

.p-32 {
    padding: 32px;
}

.pr-8 {
    padding-right: 8px;
}

.pb-48 {
    padding-bottom: 48px;
}


.mb-48 {
    margin-bottom: 48px;
}

.mb-24 {
    margin-bottom: 24px;
}

.mb-16 {
    margin-bottom: 16px;
}

.mb-12 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 4px;
}