@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital@0;1&family=Zen+Kaku+Gothic+New:wght@500&display=swap");

@import url("./reset.css");

@import url("./base.css");

@import url("./component.css");

:root {
    --border: 1px solid var(--color-black);

    --wrapper: calc(100vw - 60px);
    --inner-large-val: 1200;
    --inner-large: calc(var(--inner-large-val) * 1px);
    --inner-medium-val: 1020;
    --inner-medium: calc(var(--inner-medium-val) * 1px);
    --inner-small-val: 930;
    --inner-small: calc(var(--inner-small-val) * 1px);
    --ff-jp: "Public Sans", "Zen Kaku Gothic New", sans-serif;
    --ff-en: "Public Sans", sans-serif;
    --text-sub: #757575;
    --text-main: #333333;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-red: #ffd9e0;
    --color-green: #99e7ba;
    --color-blue: #c6e6fb;
    --bg-mesh: url(../img/cmn/bg-mesh.svg) repeat top center / 504px;
    --margin-full: calc((var(--wrapper) - var(--inner-large)) / 2 * -1 - 30px);
    --ease: cubic-bezier(0.45, 1, 0.6, 1);
    /* --bg-border: linear-gradient(#333333, #333333) 0 100% / 0 1px no-repeat; */
    /* --bg-border-hover: linear-gradient(#333333, #333333) 0 100% / 100% 1px no-repeat; */
}

@media screen and (max-width: 1259.98px) {
    :root {
        --margin-full: -30px;
    }
}

@media screen and (max-width: 767.98px) {
    :root {
        --wrapper: calc(100vw - 12px);
    }
}

@keyframes pyon {
    0% {
        opacity: 0;
        transform: translateY(50%);
    }

    50% {
        opacity: 1;
        transform: translateY(-25%);
    }

    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}

@keyframes pyonpyon {
    0% {
        transform: translateY(0%);
    }

    50% {
        transform: translateY(-15%);
    }

    100% {
        transform: translateY(0%);
    }
}