@charset "UTF-8";
/**************************************************************
【色追加方法】

《1》:rootに下記項目を追加
「****」はカラー名
filterは下記サイトにてプライマリーカラーをfilter化してください。
https://angel-rs.github.io/css-color-filter-generator/

  --color-****-primary: #******;
  --color-****-primary-dark: #******;
  --color-****-primary-light: #******;
  --color-****-accent: #******;
  --color-****-accent-dark: #******;
  --color-****-secondary: #******;
  --color-****-secondary-sub: #******;
  --color-****-open: orange;
  --color-****-nairan: green;
  --color-****-filter: ******; 

《2》rootで設定したカラーをdata-themeとして登録
body:where([data-theme=****]) {
  --color-primary: var(--color-****-primary);
  --color-primary-dark: var(--color-****-primary-dark);
  --color-primary-light: var(--color-****-primary-light);
  --color-accent: var(--color-****-accent);
  --color-accent-dark: var(--color-****-accent-dark);
  --color-secondary: var(--color-****-secondary);
  --color-secondary-sub: var(--color-****-secondary-sub);
  --color-open: var(--color-****-open);
  --color-nairan: var(--color-****-nairan);
  --color-image-filter: var(--color-****-filter);
}

《3》/inc/color.incに《1》で設定したカラー名を入力

**************************************************************/
/* カラー値 */
:root {
  --color-blue-primary: #1e91e6;
  --color-blue-primary-dark: #0064aa;
  --color-blue-primary-light: #1e91e6;
  --color-blue-accent: #ff9600;
  --color-blue-accent-dark: #ff6900;
  --color-blue-secondary: #e8e8e8;
  --color-blue-secondary-sub: #c8c8c8;
  --color-blue-open: orange;
  --color-blue-nairan: green;
  --color-blue-filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(797%) hue-rotate(173deg)
    brightness(97%) contrast(86%);
  --color-brown-primary: #aa5e20;
  --color-brown-primary-light: #c19b50;
  --color-brown-primary-dark: #854d14;
  --color-brown-accent: #ffbe00;
  --color-brown-accent-dark: #ffaa01;
  --color-brown-secondary: #e8e8e8;
  --color-brown-secondary-sub: #c8c8c8;
  --color-brown-open: orange;
  --color-brown-nairan: green;
  --color-brown-filter: brightness(0) saturate(100%) invert(36%) sepia(71%) saturate(490%) hue-rotate(345deg)
    brightness(100%) contrast(99%);
  --color-gray-primary: #a8a8a8;
  --color-gray-primary-light: #b6b6b6;
  --color-gray-primary-dark: #828282;
  --color-gray-accent: #3cbef0;
  --color-gray-accent-dark: #0297c0;
  --color-gray-secondary: #e8e8e8;
  --color-gray-secondary-sub: #c8c8c8;
  --color-gray-open: orange;
  --color-gray-nairan: green;
  --color-gray-filter: brightness(0) saturate(100%) invert(67%) sepia(46%) saturate(10%) hue-rotate(357deg)
    brightness(94%) contrast(83%);
  --color-green-primary: #8cc800;
  --color-green-primary-light: #98de47;
  --color-green-primary-dark: #50aa14;
  --color-green-accent: #ff9600;
  --color-green-accent-dark: #ff6900;
  --color-green-secondary: #e8e8e8;
  --color-green-secondary-sub: #c8c8c8;
  --color-green-open: orange;
  --color-green-nairan: green;
  --color-green-filter: brightness(0) saturate(100%) invert(71%) sepia(89%) saturate(1504%) hue-rotate(30deg)
    brightness(92%) contrast(102%);
  --color-orange-primary: #ffb13c;
  --color-orange-primary-light: #fed16a;
  --color-orange-primary-dark: #ff8e44;
  --color-orange-accent: #72c752;
  --color-orange-accent-dark: #57ab29;
  --color-orange-secondary: #e8e8e8;
  --color-orange-secondary-sub: #c8c8c8;
  --color-orange-open: orange;
  --color-orange-nairan: green;
  --color-orange-filter: brightness(0) saturate(100%) invert(86%) sepia(14%) saturate(5919%) hue-rotate(329deg)
    brightness(104%) contrast(101%);
  --color-pink-primary: #fab4bf;
  --color-pink-primary-light: #fdb6b2;
  --color-pink-primary-dark: #f58c9b;
  --color-pink-accent: #50b2cc;
  --color-pink-accent-dark: #1ebfdc;
  --color-pink-secondary: #e8e8e8;
  --color-pink-secondary-sub: #c8c8c8;
  --color-pink-open: orange;
  --color-pink-nairan: green;
  --color-pink-filter: brightness(0) saturate(100%) invert(97%) sepia(78%) saturate(4834%) hue-rotate(287deg)
    brightness(99%) contrast(110%);
}

body:where([data-theme=blue]) {
  --color-primary: var(--color-blue-primary);
  --color-primary-dark: var(--color-blue-primary-dark);
  --color-primary-light: var(--color-blue-primary-light);
  --color-accent: var(--color-blue-accent);
  --color-accent-dark: var(--color-blue-accent-dark);
  --color-secondary: var(--color-blue-secondary);
  --color-secondary-sub: var(--color-blue-secondary-sub);
  --color-open: var(--color-blue-open);
  --color-nairan: var(--color-blue-nairan);
  --color-image-filter: var(--color-blue-filter);
}

body:where([data-theme=brown]) {
  --color-primary: var(--color-brown-primary);
  --color-primary-dark: var(--color-brown-primary-dark);
  --color-primary-light: var(--color-brown-primary-light);
  --color-accent: var(--color-brown-accent);
  --color-accent-dark: var(--color-brown-accent-dark);
  --color-secondary: var(--color-brown-secondary);
  --color-secondary-sub: var(--color-brown-secondary-sub);
  --color-open: var(--color-brown-open);
  --color-nairan: var(--color-brown-nairan);
  --color-image-filter: var(--color-brown-filter);
}

body:where([data-theme=gray]) {
  --color-primary: var(--color-gray-primary);
  --color-primary-dark: var(--color-gray-primary-dark);
  --color-primary-light: var(--color-gray-primary-light);
  --color-accent: var(--color-gray-accent);
  --color-accent-dark: var(--color-gray-accent-dark);
  --color-secondary: var(--color-gray-secondary);
  --color-secondary-sub: var(--color-gray-secondary-sub);
  --color-open: var(--color-gray-open);
  --color-nairan: var(--color-gray-nairan);
  --color-image-filter: var(--color-gray-filter);
}

body:where([data-theme=green]) {
  --color-primary: var(--color-green-primary);
  --color-primary-dark: var(--color-green-primary-dark);
  --color-primary-light: var(--color-green-primary-light);
  --color-accent: var(--color-green-accent);
  --color-accent-dark: var(--color-green-accent-dark);
  --color-secondary: var(--color-green-secondary);
  --color-secondary-sub: var(--color-green-secondary-sub);
  --color-open: var(--color-green-open);
  --color-nairan: var(--color-green-nairan);
  --color-image-filter: var(--color-green-filter);
}

body:where([data-theme=orange]) {
  --color-primary: var(--color-orange-primary);
  --color-primary-dark: var(--color-orange-primary-dark);
  --color-primary-light: var(--color-orange-primary-light);
  --color-accent: var(--color-orange-accent);
  --color-accent-dark: var(--color-orange-accent-dark);
  --color-secondary: var(--color-orange-secondary);
  --color-secondary-sub: var(--color-orange-secondary-sub);
  --color-open: var(--color-orange-open);
  --color-nairan: var(--color-orange-nairan);
  --color-image-filter: var(--color-orange-filter);
}

body:where([data-theme=pink]) {
  --color-primary: var(--color-pink-primary);
  --color-primary-dark: var(--color-pink-primary-dark);
  --color-primary-light: var(--color-pink-primary-light);
  --color-accent: var(--color-pink-accent);
  --color-accent-dark: var(--color-pink-accent-dark);
  --color-secondary: var(--color-pink-secondary);
  --color-secondary-sub: var(--color-pink-secondary-sub);
  --color-open: var(--color-pink-open);
  --color-nairan: var(--color-pink-nairan);
  --color-image-filter: var(--color-pink-filter);
}

* {
  margin: 0px;
  padding: 0;
  font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", Verdana, "ＭＳ Ｐゴシック", "MS P Gothic", Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  padding: 0;
  margin: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset, img {
  border: 0;
}

img,
embed,
object,
iframe {
  vertical-align: bottom;
}

address, caption, cite, code, dfn, em, strong, th, var {
  font-weight: normal;
  font-style: normal;
}

ol, ul {
  list-style: none;
}

caption, th {
  text-align: left;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  padding: 0px;
}

q:before, q:after {
  content: "";
}

abbr, acronym {
  border: 0;
}

/***IE7~***/
*:first-child + html img {
  display: block;
}