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

html {

    --col-theme: #ffffff;
    --col-pri: #ED2345;
    --col-sec1: #F18F01;
    --col-sec2: #ADCAD6;
    --col-txt-pri: #020300;

    --site-padding: 56px;

    background-color: var(--col-theme);
    height: 100%;
    overflow-x: hidden;
    background: url("/index/assets/mascot_bg.svg") no-repeat;
    background-size: contain;
    background-position: center;
}

body {

    margin: 0;
    overflow-x: hidden;
    width: 100%;
    height: 100%;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 300;
}

html, body, *, *::before, *::after {

    box-sizing: border-box;
}

#site-wrapper {

    position: relative;
    overflow-x: clip;
}

a, ul, li {

    text-decoration: none;
    list-style-type: none;
    margin: 0;
    width: auto;
}

h1, h2, h3, h4, h5, h6, p, a, ul, li {
    
    color: var(--col-txt-pri);
}

.body-txt {

    font-family: 'Noto Sans JP';
    font-weight: 300;
    font-size: 16px;
}

.bold-body-txt {

    font-weight: 700;
}

.medium-body-txt {

    font-weight: 500;
}

h1, h2, h3, h4, h5, h6, p {

    margin: 0;
    overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {

    font-family: "Noto Sans HK";
    font-weight: 900;
}

h1 {

    font-size: 48px;
}

h2 {

    font-size: 38px;
}

button {

    border: none;
    background-color: transparent;
    cursor: pointer;
    width: max-content;
    padding: 0;
}

input, textarea {

    border: none;
    padding: 0;
    background-color: transparent;
    resize: none;
}

input:focus-visible,
button:focus-visible,
textarea:focus-visible {

    outline: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1;
}

/*Remove Up and Down Arrows in input type=number*/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
  
    -moz-appearance: textfield;
    appearance: textfield;
}

span,
span::before,
span::after {

    display: inline-block;
}

img {

    object-fit: cover;
}

.padded-section {

    margin: 0 var(--site-padding);
}

.cta {

    padding: 8px 16px;
    border-radius: 4px;
    background-color: var(--col-pri);
    color: var(--col-theme);
    display: inline-block;
    font-weight: 900;
    font-size: 15px;

    transition: border-radius 0.24s ease-in-out;
}

.cta:hover,
.cta:focus,
.cta:active {

    border-radius: 8px;
}

/* ===== Responsive: Tablet ===== */
@media (max-width: 1024px) {
    html {
        --site-padding: 32px;
    }

    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 30px;
    }
}

/* ===== Responsive: Mobile ===== */
@media (max-width: 600px) {
    html {
        --site-padding: 16px;
        background-size: cover;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 20px;
    }

    h3 {
        font-size: 17px;
    }

    p {
        font-size: 15px;
        line-height: 1.55;
    }

    .body-txt {
        font-size: 15px;
    }

    button {
        width: auto;
    }

    .cta {
        padding: 12px 20px;
        font-size: 15px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .padded-section {
        margin: 0 var(--site-padding);
    }

    input, select, textarea {
        font-size: 16px;
    }
}