:root {

  --color-brand: #004fa1;
  --color-accent: #e75387;
  --color-text: #222;
  --color-text-sub: #666;
  --color-text-muted: #999;
  --color-border: #e2e2e2;
  --color-bg: #fff;
  --color-page-bg: #f3f3f3;
  --color-card-bg: #edf6ff;
  --color-article-text: #102102;

  --color-cat-yakuji: #e38b00;
  --color-cat-kinousei: #298beb;
  --color-cat-iryou: #df3674;
  --color-cat-keihyou: #0b586f;
  --color-cat-premium: #b69610;
  --color-cat-pro: #8f48ba;

  --color-video-long: #d0e6fb;
  --color-video-short: #f9d7e3;

  --color-video-card-hover: #eef4fb;

  --width-header: 1440px;

  --width-content-outer: 1200px;
  --width-content-padding: 100px;
  --width-content: 1000px;

  --font-family-base: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Lucida Grande",
    "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "HGPゴシックM-PRO", sans-serif;
  --font-size-base: 14px;

  --header-height: 100px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-page-bg);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

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

button {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

.u-sp-break {
  display: none;
}

@media (max-width: 767px) {
  .u-sp-break {
    display: inline;
  }
}

.u-pc-break {
  display: none;
}

@media (min-width: 768px) {
  .u-pc-break {
    display: inline;
  }
}