@charset "UTF-8";

/* ==========================================================================
   common_psi.css
   ========================================================================== */

/* reset */
/*---------------------------------------------------------- */
/* Scss Document _reset.scss */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

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

caption,
th,
td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q,
blockquote {
  quotes: none;
}

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

blockquote:before, blockquote:after {
  content: "";
  content: none;
}

img {
  vertical-align: bottom;
}

img,
video {
  width: 100%;
}

a {
  text-decoration: none;
  word-break: break-all;
}

a img {
  border: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  &:before, &:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

/*以下form専用 */

input,
button,
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
  resize: vertical;
}

input[type="checkbox"], input[type="radio"] {
  display: none;
}

input[type="submit"], input[type="button"] {
  cursor: pointer;
}

label,
button {
  cursor: pointer;
}

select {
  cursor: pointer;
  &::-ms-expand {
    display: none;
  }
}

/* 色の変数定義 */
/*---------------------------------------------------------- */

: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;

  /* クラウド */
  --rcloud-primary: #464646;
  --rcloud-bg-main: #4382fd;
  --rcloud-bg-main-02: #134fbf;
  --rcloud-bg-sub-01: #8db5ff;
  --rcloud-bg-sub-02: #bfd5fe;
  --rcloud-bg-sub-03: #eef4fe;
  --rcloud-cta: #ff850a;
  --rcloud-accent: #fcd456;

  /* 精算 */
  --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;

  /* 人事労務 */
  --rjinjiroumu-primary: #107de8;
  --rjinjiroumu-light: #9cdbf1;
  --rjinjiroumu-medium: #39b4fa;
  --rjinjiroumu-dark: #00508d;
  --rjinjiroumu-bg-main: #3091f1;
  --rjinjiroumu-bg-sub-01: #7cbaf6;
  --rjinjiroumu-bg-sub-02: #c9e2fb;
  --rjinjiroumu-bg-sub-03: #eff6fe;
  --rjinjiroumu-cta: #ff9233;
  --rjinjiroumu-accent: #fbdd72;

  /* ビジネスカード */
  --rbusinesscard-primary: #0a0a0a;
  --rbusinesscard-light: #828282;
  --rbusinesscard-medium: #464646;
  --rbusinesscard-dark: #323232;
  --rbusinesscard-bg-main: #1e1e1e;
  --rbusinesscard-bg-main-02: #134fbf;
  --rbusinesscard-bg-sub-01: #bebebe;
  --rbusinesscard-bg-sub-02: #dcdcdc;
  --rbusinesscard-bg-sub-03: #f6f6f6;
  --rbusinesscard-cta: #F08719;
  --rbusinesscard-accent: #f5c864;


  /* 他商材 */
  --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;
}

/* base */
/*---------------------------------------------------------- */

body {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  font-family: "IBM Plex Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Meiryo, YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, sans-serif;
  font-feature-settings: "palt" 1;
  text-align: left;
  padding-top: 105px;
  @media screen and (max-width: 768px) {
    padding-top: 50px;
  }
}

body._lp {
  padding-top: 0;
}

a {
  transition: 200ms ease all;
  color: var(--rmeisai-primary);
  color: var(--link);
  text-decoration: underline;
  &:hover {
    @media screen and (min-width: 769px) {
      text-decoration: none;
    }
  }
}

/* base-pc */
/*---------------------------------------------------------- */
/*文字スタイル */
/*---------------------------------------------------------- */

/*文字寄せ */

.f__common-text_left {
  text-align: left;
}

.f__common-text_center {
  text-align: center;
}

.f__common-text_right {
  text-align: right;
}

/*文字の状態 */

.f__common-text_bold {
  font-weight: 700;
}

.f__common-text_underline {
  text-decoration: underline;
}

.f__common-text_highlighter {
  text-decoration: underline;
  text-underline-offset: -0.15em;
  text-decoration-thickness: 0.35em;
  text-decoration-color: var(--rmeisai-accent);
}

/*注釈 */

.f__common-text_annotation {
  font-size: 10px;
  margin-bottom: 10px;
}

.f__common-text_nowrap {
  display: inline-block;
}

/*製品カラー */
/*---------------------------------------------------------- */

.f__common-color_seisan {
  color: var(--rmeisai-primary);
}

.f__common-color_meisai {
  color: var(--rmeisai-primary);
}

.f__common-color_hanbai {
  color: var(--rhanbai-primary);
}

.f__common-color_kintai {
  color: var(--rkintai-primary);
}

.f__common-color_seikyu {
  color: var(--rseikyu-primary);
}

/*背景 */
/*---------------------------------------------------------- */

.f__common-bgcolor_blue {
  background: var(--rmeisai-bg-sub-03);
}

.f__common-bgcolor_brand_background-color {
  background: var(--rmeisai-bg-main);
}

.f__common-bgcolor_gray {
  background: var(--gray-bg-02);
}

/* safari　ハック用 */
/*---------------------------------------------------------- */

_::-webkit-full-page-media,
_:future,
:root .f__common-text_highlighter {
  text-decoration: underline;
  text-underline-offset: 0.05em;
  text-decoration-thickness: 0.15em;
  text-decoration-color: var(--rmeisai-accent);
}

/* 右揃え　※親要素に要position:relative; */
/*---------------------------------------------------------- */

.fixed_bottom {
  position: absolute;
  bottom: 0;
}

/* animation */
/* ---------------------------------------------------------- */

@keyframes loop {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2237px 0;
  }
}