@charset "UTF-8";

html {
    font-size: 62.5%;
}

body {
    position: relative;
}

body::before {
    position: absolute;
    content: "";
    background-image: url(img/background.svg);
    background-repeat: repeat;
    inset: 0;
    opacity: 0.7;
    z-index: -9999;
}

a {
    text-decoration: none;
    color: #222;
}

/*================
=================*/
@media (max-width: 899px) {
    body::before {
        opacity: 0.3;
    }
}

.hachi-maru-pop-regular {
    font-family: "Hachi Maru Pop", cursive;
    font-weight: 400;
    font-style: normal;
}

.cherry-bomb-one-regular {
    font-family: "Cherry Bomb One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.zen-maru-gothic-regular {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}


h1 {
    font-family: "Hachi Maru Pop", cursive;
}

h2,
h4,
h5 {
    font-family: "Cherry Bomb One", system-ui;
}

h3,
h6,
p {
    font-family: "Zen Maru Gothic", sans-serif;
}

h1,
h3,
p {
    color: #222;
}

p {
    font-size: 1.6rem;
    font-weight: bold;
}

h1 {
    font-size: 5rem;
}



h2 {
    font-size: 4rem;
    color: #57544D;
}

h3 {
    font-size: 2.8rem;
}

h4 {
    font-size: 4rem;
    color: #FFFCF3;
}

h5 {
    font-size: 4rem;
    font-weight: 500;
    color: #57544D;
}

dl {
    font-size: 1.6rem;
}

dt {
    font-weight: 500;
}

@media (max-width: 1099px) {
    .site-title h1 {
        font-size: 3rem;
    }

    .site-title h3 {
        font-size: 2rem;
    }
}

/*==================
media
==================*/

@media (max-width: 899px) {
    h1 {
        font-size: 3rem;
    }

    h2 {
        font-size: 3rem;
        color: #57544D;
    }

    h3 {
        font-size: 1.8rem;
    }

    h4 {
        font-size: 3rem;
        color: #FFFCF3;
    }

    h5 {
        font-size: 3rem;
        font-weight: 500;
        color: #57544D;
    }
}

@media (max-width: 699px) {
    p {
        font-size: 1.5rem;
    }
}