/*
  /asset/css/utility/u-common.css
  共通スタイル調整用CSS
*/

/* 色の変数定義 */
:root {
  /* 共通 */
  --black: #323232;
  --white: #fff;
  --link: #1558d6;
  --gray-bg-01: #e6e6e6;
  --gray-bg-02: #f6f6f6;

  /* グレースケール */
  --gray-01: #464646;
  --gray-02: #5a5a5a;
  --gray-03: #6e6e6e;
  --gray-04: #828282;
  --gray-05: #969696;
  --gray-06: #aaaaaa;
  --gray-07: #bebebe;
  --gray-08: #d2d2d2;
  --gray-09: #fafafa;

  /* 精算 */
  --rseisan-primary: #007bc7;
  --rseisan-light: #73c4ff;
  --rseisan-medium: #0095f4;
  --rseisan-dark: #005a95;
  --rseisan-bg-main: #46affa;
  --rseisan-bg-sub-01: #74c3fb;
  --rseisan-bg-sub-02: #a3d7fd;
  --rseisan-bg-sub-03: #edf7ff;
  --rseisan-cta: #ff852b;
  --rseisan-accent: #fae58e;

  /* 明細 */
  --rmeisai-primary: #267d00;
  --rmeisai-light: #86e026;
  --rmeisai-medium: #66bd1e;
  --rmeisai-dark: #419600;
  --rmeisai-bg-main: #68ad33;
  --rmeisai-bg-sub-01: #8ec266;
  --rmeisai-bg-sub-02: #b4d699;
  --rmeisai-bg-sub-03: #f4f9f1;
  --rmeisai-cta: #e55927;
  --rmeisai-accent: #f7d65b;

  /* 債権管理 */
  --rsaikenkanri-primary: #00ad0e;
  --rsaikenkanri-light: #86e086;
  --rsaikenkanri-medium: #2fc24c;
  --rsaikenkanri-dark: #008a33;
  --rsaikenkanri-bg-main: #5cc463;
  --rsaikenkanri-bg-sub-01: #8ad98f;
  --rsaikenkanri-bg-sub-02: #b5e7b9;
  --rsaikenkanri-bg-sub-03: #edf9ee;
  --rsaikenkanri-cta: #ed7a0e;
  --rsaikenkanri-accent: #fae167;

  /* 電子保存 */
  --rdenshihozon-primary: #a43fd1;
  --rdenshihozon-light: #d078ff;
  --rdenshihozon-medium: #8905ce;
  --rdenshihozon-dark: #5e1091;
  --rdenshihozon-bg-main: #c96ef9;
  --rdenshihozon-bg-sub-01: #d7aef4;
  --rdenshihozon-bg-sub-02: #d8c6f4;
  --rdenshihozon-bg-sub-03: #f6f2fc;
  --rdenshihozon-cta: #11cbac;
  --rdenshihozon-accent: #fff980;

  /* 販売 */
  --rhanbai-primary: #f53c20;
  --rhanbai-light: #ff8181;
  --rhanbai-medium: #aa0000;
  --rhanbai-dark: #6a001e;
  --rhanbai-bg-main: #faa79b;
  --rhanbai-bg-sub-01: #fbbdb4;
  --rhanbai-bg-sub-02: #fdd3cd;
  --rhanbai-bg-sub-03: #fff6f5;
  --rhanbai-cta: #00b383;
  --rhanbai-accent: #f5e673;

  /* 勤怠 */
  --rkintai-primary: #2531b7;
  --rkintai-light: #96a5fd;
  --rkintai-medium: #4a4aff;
  --rkintai-dark: #312b7c;
  --rkintai-bg-main: #6c80ff;
  --rkintai-bg-sub-01: #91a0ff;
  --rkintai-bg-sub-02: #b6c0ff;
  --rkintai-bg-sub-03: #f0f2ff;
  --rkintai-cta: #ffaa3c;
  --rkintai-accent: #edeb4e;

  /* 請求 */
  --rseikyu-primary: #0ba578;
  --rseikyu-light: #7adaa9;
  --rseikyu-medium: #008278;
  --rseikyu-dark: #005f50;
  --rseikyu-bg-main: #70d1b3;
  --rseikyu-bg-sub-01: #94ddc6;
  --rseikyu-bg-sub-02: #b7e8d9;
  --rseikyu-bg-sub-03: #edfcf7;
  --rseikyu-cta: #ed6b00;
  --rseikyu-accent: #ffe91c;

  /* 他商材 */
  --keiriplus: #0068b7;
  --partner: #f6ad48;

  /* フォーム関連 */
  --form-error-color: #ed6c56;
  --form-error-bg: #fff1f3;
  --form-error-border: #ffdadf;
  --form-error-shadow: #eed4d2;
  --form-placeholder: #b7b6b6;
  --form-select-border: #706d6d;
  --form-radio: #0075ff;
  --form-radio-bg: #005cc8;
}

/* 階層の変数定義 z-index*/
:root {
  --z-index-front: 500;
  --z-index-pagetop: 700;
  --z-index-humberger: 800;
  --z-index-overlay: 990;
  --z-index-modal: 1000;
}

/* テキスト変更用 */
.u-text-left {
  text-align: left !important;
}
.u-text-center {
  text-align: center !important;
}
.u-text-right {
  text-align: right !important;
}
.u-text-bold {
  font-weight: 700 !important;
}
.u-text-underline {
  text-decoration: underline !important;
}
.u-text-highlighter {
  background: linear-gradient(transparent 75%, var(--rsaikenkanri-accent) 75%);
  background-position: 0 1.3em !important;
}
.u-text-annotation {
  font-size: 10px !important;
}
.u-text-nowrap {
  display: inline-block !important;
}
/* テキスト色変更用 */
.u-color-white {
  color: var(--white) !important;
}
.u-color-black {
  color: var(--black) !important;
}
.u-color-rseisan {
  color: var(--rseisan-primary) !important;
}
.u-color-rseikyu {
  color: var(--rseikyu-primary) !important;
}
.u-color-rmeisai {
  color: var(--rmeisai-primary) !important;
}
.u-color-rsaikenkanri {
  color: var(--rsaikenkanri-primary) !important;
}
.u-color-rdenshihozon {
  color: var(--rdenshihozon-primary) !important;
}
.u-color-rhanbai {
  color: var(--rhanbai-primary) !important;
}
.u-color-rkintai {
  color: var(--rkintai-primary) !important;
}
.u-color-seikyu {
  color: var(--rseikyu-primary) !important;
}
/* テキスト色変更用（CTAカラー） */
.u-color-cta-rseisan {
  color: var(--rseisan-cta) !important;
}
.u-color-cta-rmeisai {
  color: var(--rmeisai-cta) !important;
}
.u-color-cta-rsaikenkanri {
  color: var(--rsaikenkanri-cta) !important;
}
.u-color-cta-rdenshihozon {
  color: var(--rdenshihozon-cta) !important;
}
.u-color-cta-rhanbai {
  color: var(--rhanbai-cta) !important;
}
.u-color-cta-rkintai {
  color: var(--rkintai-cta) !important;
}
.u-color-cta-rseikyu {
  color: var(--rseikyu-cta) !important;
}
/* 背景色変更用 */
.u-color-bg-white {
  background-color: var(--white) !important;
}
.u-color-bg-gray {
  background-color: var(--gray-bg-02) !important;
}
.u-color-rseisan-bg-main-01 {
  background-color: var(--rseisan-bg-main) !important;
}
.u-color-rseisan-bg-main-02 {
  background-color: var(--rseisan-primary) !important;
}
.u-color-rseisan-bg-sub-01 {
  background-color: var(--rseisan-bg-sub-01) !important;
}
.u-color-rseisan-bg-sub-02 {
  background-color: var(--rseisan-bg-sub-02) !important;
}
.u-color-rseisan-bg-sub-03 {
  background-color: var(--rseisan-bg-sub-03) !important;
}
.u-color-rmeisai-bg-main-01 {
  background-color: var(--rmeisai-bg-main) !important;
}
.u-color-rmeisai-bg-main-02 {
  background-color: var(--rmeisai-primary) !important;
}
.u-color-rmeisai-bg-sub-01 {
  background-color: var(--rmeisai-bg-sub-01) !important;
}
.u-color-rmeisai-bg-sub-02 {
  background-color: var(--rmeisai-bg-sub-02) !important;
}
.u-color-rmeisai-bg-sub-03 {
  background-color: var(--rmeisai-bg-sub-03) !important;
}
.u-color-rsaikenkanri-bg-main-01 {
  background-color: var(--rsaikenkanri-bg-main) !important;
}
.u-color-rsaikenkanri-bg-main-02 {
  background-color: var(--rsaikenkanri-primary) !important;
}
.u-color-rsaikenkanri-bg-sub-01 {
  background-color: var(--rsaikenkanri-bg-sub-01) !important;
}
.u-color-rsaikenkanri-bg-sub-02 {
  background-color: var(--rsaikenkanri-bg-sub-02) !important;
}
.u-color-rsaikenkanri-bg-sub-03 {
  background-color: var(--rsaikenkanri-bg-sub-03) !important;
}
.u-color-rdenshihozon-bg-main-01 {
  background-color: var(--rdenshihozon-bg-main) !important;
}
.u-color-rdenshihozon-bg-main-02 {
  background-color: var(--rdenshihozon-primary) !important;
}
.u-color-rdenshihozon-bg-sub-01 {
  background-color: var(--rdenshihozon-bg-sub-01) !important;
}
.u-color-rdenshihozon-bg-sub-02 {
  background-color: var(--rdenshihozon-bg-sub-02) !important;
}
.u-color-rdenshihozon-bg-sub-03 {
  background-color: var(--rdenshihozon-bg-sub-03) !important;
}
.u-color-rhanbai-bg-main-01 {
  background-color: var(--rhanbai-bg-main) !important;
}
.u-color-rhanbai-bg-main-02 {
  background-color: var(--rhanbai-primary) !important;
}
.u-color-rhanbai-bg-sub-01 {
  background-color: var(--rhanbai-bg-sub-01) !important;
}
.u-color-rhanbai-bg-sub-02 {
  background-color: var(--rhanbai-bg-sub-02) !important;
}
.u-color-rhanbai-bg-sub-03 {
  background-color: var(--rhanbai-bg-sub-03) !important;
}
.u-color-rkintai-bg-main-01 {
  background-color: var(--rkintai-bg-main) !important;
}
.u-color-rkintai-bg-main-02 {
  background-color: var(--rkintai-primary) !important;
}
.u-color-rkintai-bg-sub-01 {
  background-color: var(--rkintai-bg-sub-01) !important;
}
.u-color-rkintai-bg-sub-02 {
  background-color: var(--rkintai-bg-sub-02) !important;
}
.u-color-rkintai-bg-sub-03 {
  background-color: var(--rkintai-bg-sub-03) !important;
}
.u-color-rseikyu-bg-main-01 {
  background-color: var(--rseikyu-bg-main) !important;
}
.u-color-rseikyu-bg-main-02 {
  background-color: var(--rseikyu-primary) !important;
}
.u-color-rseikyu-bg-sub-01 {
  background-color: var(--rseikyu-bg-sub-01) !important;
}
.u-color-rseikyu-bg-sub-02 {
  background-color: var(--rseikyu-bg-sub-02) !important;
}
.u-color-rseikyu-bg-sub-03 {
  background-color: var(--rseikyu-bg-sub-03) !important;
}

/* 表示非表示*/

@media screen and (max-width: 600px) {
  .u-600-down-display {
    display: block;
  }
  .u-600-up-display {
    display: none;
  }
}
@media screen and (min-width: 601px) {
  .u-600-down-display {
    display: none;
  }
  .u-600-up-display {
    display: block;
  }
}
@media screen and (max-width: 840px) {
  /* sp改行 */
  .u-840-down-display {
    display: block;
  }
  /* pc改行 */
  .u-840-up-display {
    display: none;
  }
}
@media screen and (min-width: 841px) {
  .u-840-down-display {
    display: none;
  }
  .u-840-up-display {
    display: block;
  }
}
@media screen and (max-width: 1024px) {
  .u-1024-down-display {
    display: block;
  }
  .u-1024-up-display {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  .u-1024-down-display {
    display: none;
  }
  .u-1024-up-display {
    display: block;
  }
}
@media screen and (max-width: 1280px) {
  .u-1280-down-display {
    display: block;
  }
  .u-1280-up-display {
    display: none;
  }
}
@media screen and (min-width: 1281px) {
  .u-1280-down-display {
    display: none;
  }
  .u-1280-up-display {
    display: block;
  }
}
/* overflow用 */
.u-overflow-hidden {
  overflow: hidden;
}

/* スクリーンリーダー読み取り時の空タグの非表示 */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}