@charset "UTF-8";

html {
  --my-rem: 10px;
  --my-base-font-size: var(--my-rem);
  --my-site-width: 1200px;
}

body{
  
  --my-color-base:       #ffffff;
  --my-color-base-font:  #3d3d3d;
  --my-color-base-weak1: #bebebe;
  --my-color-base-weak2: #d8d8d8;
  --my-color-base-weak3: #e9e9e9;
  --my-color-base-link:  #3366cc;
  --my-color-base-hover: #ff6633;
  --my-color-main:       #8cb4c5;
  --my-color-main-font:  #1f1f1f;
  --my-color-main-weak1: #68828e;
  --my-color-main-weak2: #7696a4;
  --my-color-main-weak3: #80a3b3;
  --my-color-main-link:  #1a3366;
  --my-color-main-hover: #992600;
  --my-color-sub1:       #b1b9d8;
  --my-color-sub1-font:  #1f1f1f;
  --my-color-sub1-weak1: #80869a;
  --my-color-sub1-weak2: #949ab3;
  --my-color-sub1-weak3: #a1a8c3;
  --my-color-sub1-link:  #1a3366;
  --my-color-sub1-hover: #992600;
  --my-color-sub2:       #c5e2dc;
  --my-color-sub2-font:  #1f1f1f;
  --my-color-sub2-weak1: #8ea19d;
  --my-color-sub2-weak2: #a4bbb6;
  --my-color-sub2-weak3: #b3ccc7;
  --my-color-sub2-link:  #3366cc;
  --my-color-sub2-hover: #992600;
  --my-color-sub3:       #e8f0f3;
  --my-color-sub3-font:  #2e2e2e;
  --my-color-sub3-weak1: #aaafb1;
  --my-color-sub3-weak2: #c3c9cc;
  --my-color-sub3-weak3: #d3dadd;
  --my-color-sub3-link:  #3366cc;
  --my-color-sub3-hover: #ff6633;
  --my-color-sub4:       #f4f8f9;
  --my-color-sub4-font:  #363636;
  --my-color-sub4-weak1: #b5b7b8;
  --my-color-sub4-weak2: #ced1d2;
  --my-color-sub4-weak3: #dfe2e3;
  --my-color-sub4-link:  #3366cc;
  --my-color-sub4-hover: #ff6633;
  --my-color-acc1:       #783a66;
  --my-color-acc1-font:  #f0f0f0;
  --my-color-acc2:       #784d3a;
  --my-color-acc2-font:  #f0f0f0;
  --my-color-acc3:       #66783a;
  --my-color-acc3-font:  #f0f0f0;

  --my-font-family-sans: "Helvetica Neue", "Helvetica", "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Meiryo", sans-serif;
  --my-font-family-serif: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "BIZ UDPMincho", "Yu Mincho", "MS PMincho", serif;

  --my-font-family: var(--my-font-family-sans);
  --my-font-size: 1.6rem;
  --my-font-weight: 400;
  --my-line-height: 1.5625;
  --my-letter-spacing: 0px;
  
  /* input */
  --my-input-font-size: 1.6rem;
  --my-input-font-color: var(--my-color-base-font);
  --my-input-accent-color: #06c;
  --my-input-background-color: #fff;
  --my-input-border-color: #bbb;
  --my-input-focus-font-color: #555;
  --my-input-focus-background-color: #fffff0;
  --my-input-focus-border-color: #09f;
  
  /* ボタン */
  --my-button-font-size: 1.6rem;
  --my-button-font-color: #555;
  --my-button-background-color: #f7f7f7;
  --my-button-border-color: #bbb;
  --my-button-hover-font-color: #333;
  --my-button-hover-background-color: #f7f7f7;
  --my-button-hover-border-color: #888;
  --my-button-primary-font-color: #fff;
  --my-button-primary-background-color: #3be;
  --my-button-primary-border-color: #3be;
  --my-button-primary-hover-font-color: #fff;
  --my-button-primary-hover-background-color: #2ad;
  --my-button-primary-hover-border-color: #2ad;

  /* カラムレイアウト lg(large) */
  --my-lg-sidebar1-width: 340px;
  --my-lg-sidebar2-width: 240px;
  --my-lg-layout-padding-x: 2rem;
  --my-lg-layout-margin-x: 0px;

  /* カラムレイアウト xl(extra large) */
  --my-xl-sidebar1-width: 340px;
  --my-xl-sidebar2-width: 240px;
  --my-xl-layout-padding-x: 2rem;
  --my-xl-layout-margin-x: 0px;

  
}