:root {
  /* css変数 */
  --color-text: #333;
  --color-text2: #F0F0F0;
  --color-text3: #666666;
  --color-white: #fff;
  --color-dialog-bg: #999;
  --color-button-hover: #000;
  --color-black: #1a1a1a;
  --color-black2: #000;
  --color-bg: #f8f8f8;
  --color-bg-operation: #F5F8FA;
  --color-bg-operation-list: #F7F7F9;
  --color-emergency: #e80f00;
  --color-emergency-bg: #fef7f7;
  --color-icon-normal: #757575;
  --color-icon-normal-operation: #7E8093;
  --color-placeholder: #a7a7a7;
  --color-placeholder-operation: #7E8093;
  --color-selected: #186df5;
  /* button */
  --button-primary: #1A1A1A;
  --button-primary-operation: #2F3037;
  --button-secondary: transparent;
  --button-tertiary: #F8F8F8;
  --button-tertiary-border: #CBD6E2;
  --button-icon: var(--color-icon-normal);// 50%透過
  --button-icon-primary: var(--color-text2);
  /* line */
  --line-button_secondary: #1A1A1A;
  --line-button_tertiary: #CBD6E2;
  --line-list-primary: #D2D2D2;

  --font-size-base: 1.6rem;
  --line-height-base: 1.5;
  --letter-spacing-base: 0.04em;
}
/* ダークモード時のスタイル */
:root.dark {
  background-color: #232429;
  --color-black: #1a1a1a;
  --color-black-operation: #232429;
  --color-black-operation2: #2B2E36;
  --color-black-table-operation: #2B2E36;
  --color-black-search-operation: #18191A;
  --color-black2: #000;
  --color-black-table: #232429;
  --color-black-bg: #4D4D4D;
  --color-button-hover: #fff;
  --color-dialog-bg-operation: #000;
  --color-bg: #1A1A1A;
  --color-bg-selector-operation: #FFFFFF14;
  --color-white: #fff;
  --color-white-operation: #F0F0F0;
  --color-text: #fff;
  --color-text2: #333;
  --color-text-gray: #a7a7a7;
  --color-text-gray-operation: #9EA0B8;
  --color-emergency: #FF2819;
  --color-emergency-bg: #211A1A;
  --color-icon-normal: #a7a7a7;
  --color-icon-normal-operation: #757575;
  --color-placeholder: #757575;
  --color-placeholder-operation: #717481;
  --color-selected: #5F95ED;
  --color-link-selected: ##7AA7F0;
  /* button */
  --button-primary: #fff;
  --button-primary-dark: #f0f0f0;
  --button-secondary: transparent;
  --button-tertiary: #1A1A1A;
  --button-tertiary-dark: #2B2E36;
  --button-icon: var(--color-icon-normal);// 50%透過
  --button-icon-primary: var(--color-text2);
  /* line */
  --line-button_tertiary: #a7a7a7;
  --line-button_secondary: #9EA0B8;
  --line-button_gray: #4D4D4D;
  --line-button_gray-operation: #404557;
  /* checkbox */
  --checkbox:#9EA0B8;
  --line-button_tertiary_dark: #4D4D4D;
  /* opacity */
  /* 8% */
  --button-hover: #ffffff14;
  /* icon */
  --arrow-bg:#7E8093;
  --arrow-bg-operation:#9EA0B8;

  .sbdocs {
    /* 背景色を上書き */
    background-color: #232429;
  }
}

/* focus時の色を一律変更 */
:focus-visible {
  outline-color: var(--color-selected);
}

html {
  /* 各コンポーネントでフォントサイズでremを使うときに計算しやすくする */
  font-size: 62.5%;
  /* 共通のfont設定 */
  font-family: 'Helvetica Neue', 'Arial', 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
}

button {
  cursor: pointer;
}

.c-button,
.c-checkBox-wrap,
.c-radioButton-wrap,
.c-selector-wrap,
.c-textField-wrap,
.c-toggle-wrap,
.c-search-wrap {
  p,
  label,
  ul,
  ol,
  dl,
  dd,
  th,
  td,
  fieldset,
  legend,
  button,
  input,
  textarea,
  select,
  option {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    color: var(--color-text);
  }
}

.-align-left{
  text-align: start !important;
}