.pc {
    display: block;
}

.sp {
    display: none;
}

.inner {
    width: 1120px;
    margin: auto;
    max-width: 100%;
}

@media screen and (max-width: 767px) {
    html:focus-within {
        scroll-behavior: auto
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .inner {
        padding: 0 20px;
    }
}

/* =============================================
color
============================================= */

.c_pink {
    color: var(--pink);
}

.c_yellow {
    color: var(--yellow);
}

.c_blue {
    color: var(--blue);
}
.c_red {
    color: var(--red);
}

/* =============================================
fonts
============================================= */
.oswald {
    font-family: "Oswald", "Noto Sans JP";
}


/* =============================================
utility
============================================= */

.relative {
    position: relative;
}

.right {
    text-align: right;
}

.text-center {
    text-align: center;
}

/* =============================================
margin
============================================= */
.mt-30 {
    margin-top: 30px;
}

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

/* =============================================
flex, grid
============================================= */

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.grid {
    display: grid;
}