/* -------------------------------------------------------------------------- */
/*                                  Variables                                 */
/* -------------------------------------------------------------------------- */
:root {
  --clr-main: #0088ff;
  --clr-secondary: #27dbeb;
  --clr-accent: #ffbaba;
  --clr-text: #333333;
  --clr-text-light: #ffffff;
  --clr-bg: #ffffff;
  --clr-bg2: #e8f5f5;
  --clr-bg3: #e5f4f7;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  --sp-05: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-10: 80px;

  --fz-h1: 42px;
  --fz-h2: 34px;
  --fz-h3: 32px;
  --fz-h4: 24px;
  --fz-h5: 20px;
  --fz-h6: 18px;

  --fz-base: 16px;
  --fz-small: 14px;
  --fz-smallest: 12px;

  --ff-default: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ",
    "Meiryo", "游ゴシック", "YuGothic", "sans-serif";

  --ls-default: 0;
  --ls-wide: 0.04em;
}

/* ---------------------------------- Style --------------------------------- */
body .sx-content {
  box-sizing: border-box;

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  h5 {
    line-height: 1.5;
  }
}

.sx-content {
  min-width: 1200px;
  line-height: 1.5;
  color: var(--clr-text);
  font-size: var(--fz-base);
  letter-spacing: var(--ls-wide);
  font-family: var(--ff-default);
  font-weight: var(--fw-regular);
  background-color: var(--clr-bg);
  overflow-x: hidden;

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