body {
  margin: 0;
  line-height: normal;
}

:root {
  /* fonts */
  --font-hiragino-sans: "Hiragino Sans";
  --font-oswald: Oswald;

  /* font sizes */
  --font-size-base: 16px;
  --font-size-9xl: 28px;
  --font-size-13xl: 32px;
  --font-size-21xl: 40px;
  --font-size-11xl: 30px;
  --font-size-lg: 18px;
  --font-size-91xl: 110px;
  --font-size-5xl: 24px;
  --font-size-xl: 20px;
  --font-size-3xl: 22px;

  /* Colors */
  --lipot-base: #ece9e4;
  --lipot-brown: #89632a;
  --white: #fff;
  --gray-222: #222;
  --lipot-black: #12212c;
  --lipot-yellow: #d9bc72;
  --lipot-green: #064a3a;
  --color-black: #000;
  --color-mediumseagreen: #04c97d;

  /* Paddings */
  --padding-5xl: 24px;
  --padding-121xl: 140px;

  /* border radiuses */
  --br-5xs: 8px;
}

.pc {
  display: block;
}
.sp {
  display: none;
}

@media screen and (max-width: 899px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  body {
    margin: 0;
    line-height: normal;
  }
  
  :root {
    /* fonts */
    --font-hiragino-sans: "Hiragino Sans";
    --font-oswald: Oswald;
  
    /* font sizes */
    --font-size-xs: 12px;
    --font-size-9xl: 28px;
    --font-size-base: 16px;
    --font-size-xl: 20px;
    --font-size-5xl: 24px;
    --font-size-37xl: 56px;
    --font-size-sm: 14px;
    --font-size-7xl: 26px;
    --font-size-lg: 18px;
    --font-size-13xl: 32px;
    --font-size-21xl: 40px;
    --font-size-11xl: 30px;
    --font-size-91xl: 110px;
    --font-size-3xl: 22px;
  
    /* Colors */
    --lipot-base: #ece9e4;
    --lipot-brown: #89632a;
    --white: #fff;
    --lipot-yellow: #d9bc72;
    --gray-222: #222;
    --lipot-black: #12212c;
    --color-gray-100: rgba(0, 0, 0, 0.4);
    --lipot-green: #064a3a;
    --color-black: #000;
    --color-mediumseagreen: #04c97d;
    --color-limegreen: #00b900;
  
    /* Gaps */
    --gap-xs: 12px;
    --gap-5xs: 8px;
  
    /* Paddings */
    --padding-5xl: 24px;
    --padding-121xl: 140px;
    --padding-xs: 12px;
  
    /* border radiuses */
    --br-9xs: 4px;
    --br-5xs: 8px;
  }
}