:root {
    --color-main: #ff79af;
    --color-sub: #ffa8cc;
    --color-text: #71596d;
    --color-base: #fceff2;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-youtube: #ff0033;
    --font-heading: "Kiwi Maru", serif;
    --font-rounded: "M PLUS Rounded 1c", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-base);
    color: var(--color-text);
    font-family: var(--font-rounded);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

button {
    font: inherit;
}

.u-sp-only {
    display: none !important;
}

.site {
    min-height: 100vh;
    background: var(--color-base);
}

.site-main {
    overflow: hidden;
    background-color: var(--color-base);
    background-image: url("../images/common/bg_pattern-white.png");
    background-size: 264px 264px;
    animation: bgMove 8800ms linear infinite;
}

@keyframes bgMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 264px -264px;
  }
}

@media (max-width: 767px) {
    .u-pc-only {
        display: none !important;
    }

    .u-sp-only {
        display: revert !important;
    }

    .site-main {
        background-size: 176px 176px;
        animation: bgMove 14000ms linear infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}