@charset "UTF-8";

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  src: url(../webfonts/notosansjp/NotoSansJP-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 500;
  src: url(../webfonts/notosansjp/NotoSansJP-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 700;
  src: url(../webfonts/notosansjp/NotoSansJP-Bold.otf) format('opentype');
}


/* ==========================================================================
   テーマカラー
========================================================================== */
:root,
:root[theme='BLUE'] {
  /* メインカラー */
  --color-main: #4D5176;
  /* サブカラー */
  --color-sub: hsl(172deg 76% 29%);
  /* バッチカラー正常 */
  --color-batch-nomal: hsl(172deg 83% 38%);
  /* バッチカラー異常 */
  --color-batch-abnomal: hsl(0deg 80% 62%);
  /* バッチカラーラベル */
  --color-batch-label: hsl(208 90% 56%);

  /* メインカラーの明度を上げる */
  --color-mainBrightnessUp: hsl(234deg 21% 90%);
  /* メインカラー透過10％ */
  /* --color-mainOpacity01: hsl(234deg 21% 38% / 10%); */
  --color-mainOpacity01: hsl(240deg 13% 94%);

  /* メインカラー透過20％ */
  --color-mainOpacity02: hsl(234deg 21% 38% / 20%);
  /* サブカラー透過10％ */
  --color-subOpacity01: hsl(175deg 30% 93%);

  /* 警告用カラー */
  --color-red: hsl(0deg 75% 49%);
  /* 警告用カラー透過10％ */
  --color-redBackground: hsl(0deg 75% 49% / 10%);

  /* 背景色 */
  --color-background: hsl(202deg 22% 92%);
  /* ボタン上色 */
  --color-text-on-button: #fff;
  /* 奇数行色 */
  --color-row-odd: #fff;
  /* グレー */
  --color-gray: hsl(0deg 0% 96%);
  /* 削除色 */
  --color-delete: hsl(0deg 0% 70%);
  /* 大項目色 */
  --color-primaryItem: hsl(234deg 21% 90% / 100%);
  /* --color-primaryItem: hsl(202deg 22% 80%); */
  /* --color-primaryItem: hsl(0deg 0% 90%); */
  /* 中項目色 */
  --color-secondaryItem: hsl(234deg 21% 90% / 50%);
  /* --color-secondaryItem: hsl(202deg 22% 88%); */
  /* --color-secondaryItem: hsl(0deg 0% 96%); */
  /* 行選択背景色 */
  --color-selectedBg: hsl(56deg 95% 85%);
  
/* ==========================================================================
   フォントサイズ
========================================================================== */
  /*検索欄内のフォントサイズ*/
  --font-size-small: 12.8px;
  /*検索結果の表中のフォントサイズ*/
  --font-size-middle: 12.8px;
  
/* ==========================================================================
   各種コントロールのサイズ
========================================================================== */
  /*加盟店検索用テキストボックスの縦横サイズ*/
  --member-store-textbox-height: 22.52px;
  
  /*テキストボックスやセレクトボックスの角丸サイズ*/
  --inputbox-border-radius: 7px;
  
}