/* ================================================

CSS

  ================================================ */
/*!
 * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * 2020.02.10
 */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../font/webfonts/fa-brands-400.eot");
  src: url("../font/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("../font/webfonts/fa-brands-400.woff2") format("woff2"),
       url("../font/webfonts/fa-brands-400.woff") format("woff"),
       url("../font/webfonts/fa-brands-400.ttf") format("truetype"),
       url("../font/webfonts/fa-brands-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("../font/webfonts/fa-regular-400.eot");
  src: url("../font/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
       url("../font/webfonts/fa-regular-400.woff2") format("woff2"),
       url("../font/webfonts/fa-regular-400.woff") format("woff"),
       url("../font/webfonts/fa-regular-400.ttf") format("truetype"),
       url("../font/webfonts/fa-regular-400.svg#fontawesome") format("svg");
}

@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../font/webfonts/fa-solid-900.eot");
  src: url("../font/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
       url("../font/webfonts/fa-solid-900.woff2") format("woff2"),
       url("../font/webfonts/fa-solid-900.woff") format("woff"),
       url("../font/webfonts/fa-solid-900.ttf") format("truetype"),
       url("../font/webfonts/fa-solid-900.svg#fontawesome") format("svg");
}


/* ===================================================================== */
/*  $0 - Root - CSS Variables                                            */
/* ===================================================================== */
:root {

    /* Typography - Size */
    --font-size-display: 36px;

    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;

    --font-size-base: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;

    /* Typography - Weight */
    --font-light: 300;
    --font-regular: 400;
    --font-semi-bold: 600;
    --font-bold: 700;

    /* Color - Brand */
    --color-primary: #f38919;
    --color-secondary: #f38919;

    --color-primary-hover: #f38919;
    --color-primary-selected: rgba(20, 110, 245, .12);
    --color-primary-lightest: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .9));
    --color-blackorange-darkest: "#251402"; /*login title*/

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;

    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;

    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;

    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;

    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;

    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;

    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;

    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;

    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;

    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;

    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;

    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;

    /*Transparent color*/
    --color-trans-back: rgba(243, 246, 248,0.8);
    --color-trans-0: rgba(0, 0, 0, 0);
    --color-trans-1: rgba(0, 0, 0, .1);


    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-neutral-10: #15181a;

    /* Color - Semantic */
    --color-error-light-trans: rgba(252,234,234,0.8);
    --color-error-light: #fceaea;
    --color-error: #e03131;

    --color-warning-light-trans: rgba(253,246,229,0.8);
    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;

    --color-success-light-trans: rgba(234,243,235,0.8);
    --color-success-light: #eaf3eb;
    --color-success: #2a843c;

    --color-info-light-trans: rgba(229,245,252,0.8);
    --color-info-light: #e5f5fc;
    --color-info: #009dde;

    /* Space - Sizes */
    --space-none: 0;
    --space-mini: 2px;
    --space-xs: 4px;
    --space-s: 8px;
    --space-base: 16px;
    --space-m: 24px;
    --space-l: 32px;
    --space-xl: 40px;
    --space-xxl: 48px;
    --space-xxxl: 56px;
    --space-mxl: 64px;

    /*special space*/
    --space-size-0: 12px;
    --space-size-1: 14px;
    --space-size-2: 20px;
    --space-size-3: 28px;

    /*line-height*/
    --line-height-base: 1.25;
    --line-height-m: 1.5;

    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-soft: 4px;
    --border-radius-rounded: 100px;
    --border-radius-circle: 100%;

    /* Border Size */
    --border-size-none: 0;
    --border-size-s: 1px;
    --border-size-m: 2px;
    --border-size-l: 3px;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #f3f6f8;
    --header-size: 56px;
    --header-notice-size: 0px;
    --header-msg-size: 70px;
    --input-width: 280px;
    --side-menu-size: 300px;

    /* Div Width */
    --div-width-1: 6.5359477124183%;
    --div-width-2: 15.0326797385621%;
    --div-width-3: 23.5294117647059%;
    --div-width-4: 32.0261437908497%;
    --div-width-5: 40.5228758169935%%;
    --div-width-6: 49.0196078431373%;
    --div-width-7: 57.516339869281%;
    --div-width-8: 66.0130718954248%;
    --div-width-9: 74.5098039215686%;
    --div-width-10: 83.0065359477124%;
    --div-width-11: 91.5032679738562%;
    --div-width-12: 100%;

    /* Cell Width */
    --cell-width-1: 8.49673202614379%;
    --cell-width-2: 16.9934640522876;
    --cell-width-3: 25.4901960784314%;
    --cell-width-4: 33.9869281045752%;
    --cell-width-5: 42.483660130719%;
    --cell-width-6: 50.9803921568627%;
    --cell-width-7: 59.4771241830065%;
    --cell-width-8: 67.9738562091503%;
    --cell-width-9: 76.4705882352941%;
    --cell-width-10: 84.9673202614379%;
    --cell-width-11: 93.4640522875817%;
    --cell-width-12: 101.960784313726%;

    /* Div Margin */
    --div-margin-0:  4.5751633986928%;
    --div-margin-1: 10.4575163398693%;
    --div-margin-2: 18.9542483660131%;
    --div-margin-3: 27.4509803921569%;
    --div-margin-4: 35.9477124183007%;
    --div-margin-5: 44.4444444444444%;
    --div-margin-6: 52.9411764705882%;
    --div-margin-7: 61.437908496732%;
    --div-margin-8: 69.9346405228758%;
    --div-margin-9: 78.4313725490196%;
    --div-margin-10: 86.9281045751634%;
    --div-margin-11: 95.4248366013072%;

    /* Other Elements' Margin */
    --ele-margin-0: 1.96078431372549%;
    --ele-margin1-first: 8.49673202614379%;
    --ele-margin2-first: 16.9934640522876%;
    --ele-margin3-first: 25.4901960784314%;
    --ele-margin4-first: 33.9869281045752%;
    --ele-margin5-first: 42.483660130719%;
    --ele-margin6-first: 50.9803921568627%;
    --ele-margin7-first: 59.4771241830065%;
    --ele-margin8-first: 67.9738562091503%;
    --ele-margin9-first: 76.4705882352941%;
    --ele-margin10-first: 84.9673202614379%;
    --ele-margin11-first: 93.4640522875817%;

    /* Elements Padding */
    --cell-padding: 1.96078431372549%;
    /*--padding-header-container: 5%;*/
    --cell-padding-1: 8.49673202614379%;
    --cell-padding-2: 16.9934640522876%;
    --cell-padding-3: 25.4901960784314%;
    --cell-padding-4: 33.9869281045752%;
    --cell-padding-5: 42.483660130719%;
    --cell-padding-6: 50.9803921568627%;
    --cell-padding-7: 59.4771241830065%;
    --cell-padding-8: 67.9738562091503%;
    --cell-padding-9: 76.4705882352941%;
    --cell-padding-10: 84.9673202614379%;
    --cell-padding-11: 93.4640522875817%;

    /*Font Awesome Icons*/
	--icon-user-cog: "\f4fe";				/*ユーザー一覧*/
	--icon-home: "\f015";
	--icon-edit: "\f044";
	--icon-plus-circle: "\f055";
	--icon-error-circle: "\f057";
	--icon-success-circle: "\f058";
	--icon-exclamation: "\f071";
	--icon-uploading: "\f093";
	--icon-hand-right: "\f0a4";
	--icon-users: "\f0c0";
	--icon-bars-base: "\f0c9";
	--icon-info-circle: "\f05a";
	--icon-exma-circle: "\f06a";
	--icon-location-arrow: "\f124";
	--icon-paper-plane: "\f1d8";
	--icon-chart-pie: "\f200";
	--icon-chart-line: "\f201";				/*日別売上*/
	--icon-user-err: "\f235";
	--icon-logout: "\f2f5";
	--icon-cloud-upload: "\f382";
	--icon-user-check: "\f4fc";
	--icon-ticket: "\f3ff";
	--icon-users-cog: "\f509";
	--icon-store: "\f54e";
	--icon-chart-bar: "\f080";
	--icon-cricle-return: "\f0a8";
	--icon-company: "\f1ad";				/*顧客一覧*/
	--icon-list-alt: "\f022";				/*券売機一覧*/
	--icon-file-invoice-dollar: "\f571";	/*契約情報一覧*/
	--icon-file-invoice: "\f570";
	--icon-file-signature: "\f573";
	--icon-file-contract: "\f56c";
	--icon-reply-all: "\f122";				/*購入取消一覧*/
}


/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: var(--color-trans-0);
}

html,
body,
form {
    height: 100%;
}

html {
    color: var(--color-neutral-9);
    font-family: -apple-system, BlinkMacSystemFont, Meiryo, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow: auto;
    overflow-x: hidden;
    -moz-osx-font-smoothing: grayscale;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -servicestudio-overflow: initial;
}

body {
	background-color: var(--color-background-body);
	font-size: var(--font-size-s);
	line-height: var(--line-height-m);
	margin: 0;
	-webkit-overflow-scrolling: touch;
}

a {
    text-decoration: none;
    -webkit-text-decoration-skip: objects;
}

a,
a:visited {
    color: var(--color-primary);
    -webkit-transition: color 180ms linear;
            transition: color 180ms linear;
}

a:hover {
    color: var(--color-primary-hover);
}

:focus {
    outline: 0;
}

input,
select,
button {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	font-family: inherit;
	font-size: 100%;
	line-height: var(--line-height-base);
	margin: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	    height: auto;
}

select::-ms-expand {
    display: none;
}

img {
    max-width: 100%;
}

/* input's type is text */
[type="text"],
[type="password"]{
    height: var(--space-xl);
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    color: var(--color-neutral-10);
    font-size: var(--font-size-s);
    box-shadow: var(--shadow-none);
    vertical-align: top;
    width: var(--input-width);
    border-radius: var(--border-radius-soft);
}

[type="text"]:hover,
[type="password"]:hover{
    border: var(--border-size-s) solid var(--color-neutral-6);
}

[type="text"]:focus,
[type="password"]:focus{
    border: var(--border-size-s) solid var(--color-primary);
}

/* input's type is submit/reset(button) */
button,
[type="submit"],
[type="reset"],
[type="button"],
input[value="クリア"]{
-webkit-box-align: center;
      align-items: center;
      color: var(--color-primary);
      background-color: var(--color-neutral-0);
      border-radius: var(--border-radius-soft);
      border: var(--border-size-s) solid currentColor;
      font-weight: var(--font-semi-bold);
      padding: var(--space-none) var(--space-base);
      height: var(--space-xl);
}
button,
[type="submit"],[type="button"]{
	background-color: var(--color-primary);
	border: var(--border-size-none);
	color: var(--color-neutral-0);
	margin-right: var(--space-m);
}

input[value="CSVダウンロード"]{
	background-color: var(--color-primary);
	border: var(--border-size-none);
	color: var(--color-neutral-0);
	margin-left: 330px;
	-webkit-box-align: center;
    align-items: center;
    border-radius: var(--border-radius-soft);
    font-weight: var(--font-semi-bold);
    padding: var(--space-none) var(--space-base);
    height: var(--space-xl);
}

input[value="リセット"],
input[value="クリア"]{
    color: var(--color-primary);
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid currentColor;
}

button:hover,
button:hover:active,
[type="submit"]:hover,
[type="submit"]:hover:active,
[type="reset"]:hover,
input[value="クリア"]:hover {
    box-shadow: var(--shadow-s);
}
button:hover,
[type="submit"]:hover,
input[value="CSVダウンロード"]:hover {
	-webkit-filter: brightness(.9);
		filter: brightness(.9);
}
[type="reset"]:hover,
input[value="リセット"]:hover,
input[value="クリア"]:hover {
    -webkit-filter: brightness(.95);
            filter: brightness(.95);
}
button:hover:active,
[type="submit"]:hover:active {
	-webkit-filter: brightness(.8);
		    filter: brightness(.8);
}
[type="reset"]:hover:active,
input[value="リセット"]:hover:active,
input[value="クリア"]:hover:active {
    box-shadow: var(--shadow-none);
    -webkit-filter: brightness(.90);
            filter: brightness(.90);
}
button:focus,
[type="submit"]:focus,
[type="reset"]:focus,
input[value="クリア"]:focus {
    box-shadow: 0 0 0 var(--border-size-m) var(--color-blue-lighter);
}

[type="checkbox"],
[type="radio"] {
	border: 0;
	padding: 0;
}
/* radio style(beore/after) *//* チェックするとradioの色がパタンと裏返る*/
[type="radio"]{
	-webkit-appearance: radio;
	   -moz-appearance: radio;
		appearance: radio;
		position: relative;
		cursor: pointer;
}

[type="radio"]::before,
[type="radio"]::after {
	position: absolute;
	z-index: 1;
	top: -1px;
	height: var(--space-base);
	width: var(--space-base);
	content: '';
	border: var(--border-size-s) solid var(--color-neutral-5);
	background-color: var(--color-neutral-0);
	border-radius: 50%;
-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
[type="radio"]::after {
	z-index: 0;
	border: none;
}
[type="radio"]:hover::before {
         border: var(--border-size-s) solid var(--color-neutral-6);
}
[type="radio"]:checked::before {
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
	border: var(--border-size-s) solid var(--color-primary);
	background: var(--color-primary);
}

/* checkbox style */
[type="checkbox"]{
	-webkit-appearance: checkbox;
	   -moz-appearance: checkbox;
		appearance: checkbox;
		position: relative;
		cursor: pointer;
}
[type="checkbox"]::before {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        height: var(--space-s);
        width: var(--space-base);
	    content: '';
	-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	        transition:         transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
	-webkit-transform: rotate(-45deg) scale(0, 0);
	        transform: rotate(-45deg) scale(0, 0);
	    border: var(--border-size-l) solid var(--color-primary);
        border-radius: var(--border-radius-soft);
        border-right: var(--border-size-none);
        border-top: var(--border-size-none) ;
}
[type="checkbox"]:checked::before {
        -webkit-transform: rotate(-45deg) scale(1, 1);
	        transform: rotate(-45deg) scale(1, 1);
}
[type="checkbox"]::after {
        position: absolute;
        top: calc(-1 * var(--space-mini));
        content: '';
        cursor: pointer;
        border: var(--border-size-s) solid var(--color-neutral-5);
        background-color: var(--color-neutral-0);
        border-radius: var(--border-radius-soft);
-webkit-transition: all 180ms linear;
        transition: all 180ms linear;
        height: var(--space-base);
        width: var(--space-base);
}
[type="checkbox"]:hover::after {
	   border: var(--border-size-s) solid var(--color-neutral-6);
}
[type="checkbox"]:checked:hover::after {
	   border: var(--border-size-s) solid var(--color-primary);
}

/*  number style */
[type="number"]{
	    border: var(--border-size-s) solid var(--color-neutral-5);
        border-radius: var(--border-radius-soft);
        padding: 0 0 0 var(--space-s);
        height: 38px;
        width: 60px;
        text-align: center;
	    font-size: var(--font-size-s);
}

[type="number"]:hover{
        border: var(--border-size-s) solid var(--color-neutral-6);
}

[type="number"]:focus{
        border: var(--border-size-s) solid var(--color-primary);
}

/* select style */
select {
    padding: var(--space-none) var(--space-base);
	border: var(--border-size-s) solid var(--color-neutral-5);
	color: var(--color-neutral-9);
	width: var(--input-width);
	font-size: var(--font-size-s);
	height: var(--space-xl);
	background: var(--color-neutral-0) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAgpJREFUOBGlU79LW1EUPvfFPLQOQh06OPgHuKlV82NwqBYsndRSwTUPqVgpJS9DlyyCJFSUYKWR/gVugi46SCXRYNOpmq4OGTq0oKCBp32353vw5PblRtN6lnffOd+Pm7zvCOKy5pJFSTJCQux0PWwfS6fT1+jft1inpfrrYpukHBEkDvK5bNSAaNg0p9jsBwbVn5cf7mvk8z0t1oS258GDEIZHB/tnA9H4ZzacJpKD/UOxWrlULPjE/3lar5M2a6WEoFooZDxdW1o8gY5niMOXw0K1PxKvSClf8OuTvkjs29dSsYLZv1ZiPjnOl8+DZ4SMlx+XM7u+xo0hGuXDQoVNLxk8KoieP47Gd3ARH9zMc+aNPUCu3GRsWBhGKr+S+aTyWLe+EnM2385N4L83w+bg6vuF03pUfWf27btu58op8YUf8W9bX89lrCDKC02w2dX54BUSC6LjOFtWKtURxATfgQHWM0PaoaEprSHWolW2TxCJY/7wPbLmbiDiGr7XwgwYYMEBFxo6vNYQwFwufW6a5rNm1kWNPzjg6szQ+ys0QVDdunCgyqVCUcU1ir+KUc+3GgKIlPYOxb6TpEn+PiPquqjxJ0NM5ZezN/FXTdSzNqUqwD9b83ZSum4Gi8y7NYy++9vdk5LaOP42xz+L3l3VtCGE1HXxhG+JfyPjhqHREdR1uSv+Oj56fwCOW+0Oio0XpwAAAABJRU5ErkJggg==') no-repeat center right var(--space-base) / var(--space-base) var(--space-s);
	border-radius: var(--border-radius-soft);
-webkit-transition: all 180ms linear;
	transition: all 180ms linear;
}
select:hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}
select:focus {
    border: var(--border-size-s) solid var(--color-primary);
}

/*検索結果ページ数表示設定*/
div.disabled {
        display: inline;
        float: none;
        clear: none;
        color: var(--color-neutral-5);
}

/*テーブル*/
table {
	border: var(--border-size-s) solid var(--color-neutral-4);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--border-radius-soft);
	overflow: hidden;
	width: 100%;
	font-size: var(--font-size-s);
	border-bottom: none;
}

th,td{
    border-bottom: var(--border-size-s) solid var(--color-neutral-4);
    text-align: left;
}

th{
    color: var(--color-neutral-8);
    height: var(--space-xxl);
    font-weight: var(--font-semi-bold);
    padding: var(--space-none) var(--space-base);
}

td{
    color: var(--color-neutral-9);
    padding: var(--space-s) var(--space-base);
}

form{
    height:auto;
    margin-bottom: var(--elel-margin-0);
}

input{
    padding: var(--space-none) var(--space-base);
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    margin: 0;
}

/* 集計グラフ */
canvas#barChart{
    max-width: calc(100% - 10px);
    width: calc(100% - var(--space-size-2));
    min-width: 950px;
}

/* フォントカラー */
.red {
	color: var(--color-error);
}
/* 汎用注記 */
.note01,
.note02 {
	font-weight: bold;
}
.note01 {
	font-size: var(--font-size-xs);
}

/** 汎用 **/
/* 中央揃え */

/* 外枠 */
.headerNotice{
        float: left;
        padding: var(--space-s);
        width: 100%;
        position: fixed;
        top: 0;
        height: var(--header-notice-size);
        color: var(--color-warning);
        font-weight: var(--font-bold);
        border: var(--border-size-s) solid var(--color-warning-light);
	    background-color: var(--color-warning-light);
	    z-index: 100;
}

#contents {
        min-width: var(--div-width-12);
        margin: 0 auto;
        min-height: 100%;
        top: var(--header-notice-size);/*0*/
        position: absolute;
}


/* ヘッダ下コンテンツ部外枠 */
.outer {
	width: 100%;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	box-sizing: border-box;
    height:100vh;
}

/* ヘッダ */
#header {
	    background: var(--color-neutral-0);
        float: right;
        height: var(--header-size);
        left: 0;
        box-shadow: var(--shadow-s);
        position: fixed;
        right: 0;
        top: var(--header-notice-size);/*0*/
        z-index: 100;
        margin: var(--space-none) auto;
        padding: var(--space-s) var(--space-l);
}

#header p {
        display:inline-block;
        float: left;
        margin: 0;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	    box-sizing: border-box;
 -webkit-box-align: center;
        align-items:center;
}

#header .left {
        width: var(--div-width-4);
        text-align: left;
        padding: var(--space-s) var(--space-none) var(--space-none) var(--space-base);
        width: 250px;
        font-weight: var(--font-semi-bold);
        transition: padding-left 0.4s;
        font-family: Cambria, Georgia, serif;
        font-size: var(--font-size-base);
}

#header .left::before {
        content: '';
        border-radius: var(--space-s);
        max-width: 100%;
        height: 35px;
        width: 35px;
        background: url(../img/Logo.png) no-repeat center / 30px 30px;
        position: fixed;
	    left: 6px;
	    top: calc(var(--space-s) + var(--header-notice-size)); /*var(--space-s);*/
}

#header .middle {
        width: calc(100% - 350px);
	    text-align: right;
        margin-right: var(--space-xs);
        padding: var(--space-s) var(--space-mxl) 0 0;
        right:140px;
        min-width: max-content;
}

#header .middle::after{
	content: '';
	position: fixed;
	width: 45px;
	height: 39px;
	background: url(../img/UserIcon.png) no-repeat center / 45px 45px;
	top: calc(var(--space-s) + var(--header-notice-size)); /*var(--space-s);*/
    right:148px;
}

#header .right {
        width: 100px;
	    text-align: right;
        padding-top: var(--space-s);
        position: fixed;
        right: var(--space-l);
}

#header .right a::after{
         font-family: "Font Awesome 5 Free";
         content: var(--icon-logout);
         font-weight: var(--font-semi-bold);
         padding-left: var(--space-mini);
}


/* 左メニュー */
.menu {
        width: calc(var(--side-menu-size) - 60px);
        height: calc(100% - var(--header-size));
        float: left;
        background: var(--color-neutral-0);
        position: fixed;
        left: 0;
        top: calc(var(--header-size) + var(--header-notice-size));/*var(--header-size);*/
        z-index: 101;
 -webkit-box-flex: 1;
             flex: 1;
 -webkit-overflow-scrolling: touch;
        padding: 0 var(--space-s);
}

.menu p {
	margin: 0;
}

.menu div {
        /*cursor: pointer;*/
        border-radius: var(--border-radius-soft);
        margin-bottom: var(--space-s);
        padding: var(--space-none) var(--space-base) var(--space-none) var(--space-mini);
        display: flex;
        font-weight: var(--font-semi-bold);
        height: var(--space-xl);
        position: relative;
        z-index: 1;
        align-items: center;
}

.menu .menu_sepalator,
.menu div:nth-child(1) {
        display: none;
}

.menu div a{
        display: flex;
 -webkit-box-flex: 1;
             flex: 1;
        height: var(--space-xl);
        font-weight: var(--font-regular);
        position: absolute;
        z-index: 2;
        align-items: center;
        color: var(--color-neutral-8);
        /*cursor: pointer;*/
        /*padding-left: var(--space-xl);*/
        width: 184px; /*224px*/
        margin-left: var(--space-xl);
}

.menu div:hover{
        background: var(--color-background-body);
}
.menu div a:hover {
        color: var(--color-neutral-8);
}
.menu div:hover:active,
.menu div:active,
.menu div:focus{
        background: var(--color-primary) var(--color-primary-lightest);
        color: var(--color-primary);
        font-weight: bold;
}

.menu div:hover:active > a:hover:active,
.menu div:active > a:active,
.menu div:focus > a:focus{
      color: var(--color-primary);
      font-weight: var(--font-bold);
}

.menu div::before{
         font-family: "Font Awesome 5 Free";
         font-weight: var(--font-semi-bold);
         font-size: var(--font-size-h5);
         /*cursor: pointer;*/
         z-index: 1;
         color: var(--color-neutral-10);
}
.menu div:hover::before{
         font-size: var(--font-size-h4);
         color: var(--color-neutral-10);
}
/*.menu div:hover:active::before,
.menu div:focus::before{
         color: var(--color-primary);
}*/

.menu div.menu_copIndex {
        margin-top: var(--space-s);
}
.menu div.menu_copIndex::before{
     content: var(--icon-company);
     font-weight: var(--font-regular);
     padding-left: var(--space-mini);
}
.menu div.menu_shopIndex::before{
     content: var(--icon-store);
}
.menu div.menu_vmtIndex::before{
     content: var(--icon-list-alt);
     font-weight: var(--font-regular);
}

.menu div.menu_userIndex::before{
     content: var(--icon-user-cog);
}
.menu div.menu_salesIndex::before{
   content: var(--icon-chart-line);
   padding-right: var(--space-base);
}
.menu div.menu_salesMon::before{
     content: var(--icon-chart-bar);
     padding-right: var(--space-base);
}
.menu div.menu_salesCancel::before{
     content: var(--icon-reply-all);
     padding-right: var(--space-base);
}

/*契約情報一覧*/
.menu div.menu_contractlist::before{
	content: var(--icon-file-signature);
/*padding-right: var(--space-base);*/
	padding-left: var(--space-xs);
}

/* 内枠 */
.inner {
	width: calc(100% - calc(var(--side-menu-size) - 60px));
        float: left;
	    padding: var(--space-m) var(--space-xl) var(--space-xl);
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	    box-sizing: border-box;
--header-gutter: var(--header-size);
        margin-top:var(--header-size);
        height: calc(100vh - var(--header-size));
        margin-left: calc(var(--side-menu-size) - 60px);
}

.inner div.innerHeader_area{
        margin-top: var(--space-base);
        align: left;
}


/*** コンテンツ内 ***/
/*　タイトルエリア */
.pageTitle {
	width: var(--div-width-9);
	display: inline-block;
	margin: 0;
	font-size: var(--font-size-h1);
	font-weight: var(--font-semi-bold);
	color: var(--color-neutral-10);
	line-height: var(--line-height-base);
}

.indexReturnLink,
.salesLink,
.headerLink {
        cursor: pointer;
        display:inline-block;
        border: var(--border-size-s) solid currentColor;
        border-radius: var(--border-radius-soft);
        background: var(--color-neutral-0);
        box-sizing: content-box;
-webkit-box-align: center;
        box-align: center;
        font-weight:var(--font-semi-bold);
        color: var(--color-primary);
        vertical-align: top;
        width: 100px;
        height: var(--space-xl);
        position: relative;
        z-index: 5;
}

.indexReturnLink a,
.salesLink a,
.headerLink a{
	position: absolute;
	z-index: 6;
	width: 100px;
	height:var(--space-xl);
	text-align: center;
	padding-top: var(--space-s);
}
.indexReturnLink:hover,
.salesLink:hover,
.headerLink:hover{
        box-shadow: var(--shadow-s);
        -webkit-filter: brightness(.95);
                filter: brightness(.95);
}
.indexReturnLink:hover:active,
.salesLink:hover:active,
.headerLink:hover:active{
    box-shadow: var(--shadow-none);
    -webkit-filter: brightness(.90);
            filter: brightness(.90);
}

.indexReturnLink,
.headerLink {
        margin-left: var(--div-margin-1);
}

.salesLink,
.salesLink a{
	width: 150px;
	top: 0;
	margin-top: 0;
}

.salesLink {
        right: 0;
        margin-left: var(--div-margin-0);
}

.salesLink a{
	padding-top: 6px;
}

.headerLink a::before{
	font-family: "Font Awesome 5 Free";
	content: var(--icon-plus-circle);
	padding-right: var(--space-xs);
	font-size: var(--font-size-base);
        vertical-align: middle;
}
.indexReturnLink a::before{
	font-family: "Font Awesome 5 Free";
	content: var(--icon-cricle-return);
	padding-right: var(--space-xs);
	font-size: var(--font-size-base);
        vertical-align: middle;
}
.salesLink a::after{
	font-family: "Font Awesome 5 Free";
	content: var(--icon-paper-plane);
	padding-left: var(--space-xs);
	font-size: var(--font-size-base);
}

/* 検索条件ボックス */
.titleBox {
	margin-top: var(--space-m);
}
.titleBox .searchBox {
	margin-top: 0;
}
.titleBox p {
	margin: 0 0 0 var(--space-s);
	font-weight: bold;
}

/* 検索条件ボックス 入力項目 */
.searchBox {
	margin-top: var(--space-m);
	padding-bottom: var(--space-base);
	min-width: max-content;
}
.searchBox table{
        width: 100%;
}

.searchBox table, .searchBox td {
	border: none;
	margin-bottom: var(--space-s);
	padding-bottom: var(--space-xs);
}

.searchBox td{
        padding:0;
        margin-bottom: 0;
        display:inline;
}

.searchBox td:nth-child(1) + td:nth-child(2) >input[type="text"]{
        display: block;
        margin-bottom: var(--space-s);
        padding-bottom: var(--space-mini);
}

.searchBox td:nth-child(2):not(input){
	font-weight: var(--font-semi-bold);
        font-size: var(--font-size-base);
}

.searchBox td label{
	cursor: pointer;
	position: relative;
	margin: var(--space-s) var(--space-base) var(--space-mini) var(--space-mini);
	font-weight: var(--font-light);
        font-size: var(--font-size-s);
        display: inline-block;
}


/*　検索条件 入力エリア(input type "checkbox")  */
.searchBox td input[type="checkbox"]{
        vertical-align: middle;
        margin: 0 var(--space-size-1) var(--space-xs) 0;
}
.searchBox td:nth-child(3) input[type="checkbox"]{
        margin-left: var(--space-xs);
}

/*　検索条件 入力エリア(input type "number")  */
.searchBox td input[type="number"]{
        margin: var(--space-xs) var(--space-s) 0;
}

/*　検索条件 入力エリア(<select>list)  */
.searchBox td select{
	margin: var(--space-s) 0 0 var(--space-s);
}

.searchBox .searchInputTextRight td:nth-child(1){
	display: inline-block;
	text-align: right;
	width: 5%;
	min-width: 42px;
}
.searchBox .searchInputTextRight td:nth-child(3) select,
.searchBox .searchInputTextRight td:nth-child(3) input[type="number"]:nth-of-type(1){
	margin-left: 0;
}
.searchBox .searchInputTextRight td:nth-child(2){
	font-weight: var(--font-none);
	font-size: var(--font-size-s);
	vertical-align: middle;
}
.searchBox .searchInputTextRight td:nth-child(1){
	text-align: right;
	padding-top: var(--space-mini);
}

/* 検索 buttonエリア */
 .searchCmd {
	padding-right: var(--space-l);
	text-align: left;
        padding: var(--space-s) 0;
}

/*** 検索結果エリア ***/
/*　検索結果一覧(table)　*/
#search {
	padding: var(--space-s) 0;
}

#search table{
	background: var(--color-neutral-0);
	width: 100%;
	box-shadow: var(--shadow-xs);
}

#search tr{
         border: var(--border-size-s) solid var(--color-neutral-4);
         height: 3em;
}

#search tr th:last-child,
#search tr td:last-child{
        width: calc(3em + 32px);
        text-align: right;
}

#search td.editLink_td a::before{
         font-family: "Font Awesome 5 Free";
         content: var(--icon-edit);
         font-weight: var(--font-semi-bold);
         padding-right: var(--space-mini);
}

#search span{
        padding:10px;
        margin:10px;
}

#search tr:hover td{
         background:var(--color-background-body);
}

/*　検索結果メッセージ　*/
.notFound {
	    color: var(--color-warning);
        font-weight: var(--font-bold);
        border: var(--border-size-s) solid var(--color-warning-light);
	    background-color: var(--color-warning-light);
        box-shadow: var(--shadow-s);
        border-radius: var(--space-l);
        padding: var(--space-s) var(--space-base);
        display: inline-block;
        font-size: var(--font-size-s);
}
.notFound a {
        color: var(--color-orange);
}
.notFound:before {
	     font-family: "Font Awesome 5 Free";
         content: var(--icon-exclamation);
         font-weight: var(--font-semi-bold);
         font-size: var(--font-size-base);
         padding-right: var(--space-s);
         vertical-align: unset;
}

.systemInfo,
.errorInfo,
.dbsuccessInfo{
	font-weight: var(--font-bold);
	width: calc(100% - calc(var(--side-menu-size) - 60px));
	left: calc(var(--side-menu-size) - 60px);
	position: relative;
	margin: 0;
	padding: var(--space-xs) var(--space-base);
	border-radius: var(--space-l);
	box-shadow: var(--shadow-s);
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 18px;/*42px;*/
	transition: all .2s cubic-bezier(0,-0.72,.92,1.67);
}

	/*system message information*/
	.systemInfo{
		color: var(--color-info);
		background: var(--color-info-light-trans);
		border: var(--border-size-s) solid  var(--color-info-light-trans);
		vertical-align: middle;
	}
	.systemInfo::before {
		font-family: "Font Awesome 5 Free";
		content: var(--icon-user-check);
		font-weight: var(--font-semi-bold);
		font-size: var(--font-size-base);
		padding-right: var(--space-s);
	}

	/*system message error*/
	.errorInfo{
		color: var(--color-error);
		background: var(--color-error-light-trans);
		border: var(--border-size-s) solid var(--color-error-light-trans);
 	}
	.errorInfo::before {
		font-family: "Font Awesome 5 Free";
		content: var(--icon-user-err);
		font-weight: var(--font-semi-bold);
		font-size: var(--font-size-base);
		padding-right: var(--space-s);
	}


	/*database message success*/
	.dbsuccessInfo{
		color: var(--color-success);
	        background: var(--color-success-light-trans);
		border: var(--border-size-s) solid var(--color-success-light-trans);
	}
	.dbsuccessInfo::before {
		font-family: "Font Awesome 5 Free";
		content: var(--icon-success-circle);
		font-weight: var(--font-semi-bold);
		font-size: var(--font-size-base);
		padding-right: var(--space-s);
	}


/* 入力エリア */
.inputBox {
	width: 100%;
	padding: var(--space-base) 0;
}
.inputBox + .inputBox{
        padding: 0 0 var(--space-xs);
        margin: var(--space-s) 0;
}

.inputBox p{
        margin:0;
}

.inputBox #shoplist{
	padding-bottom: var(--space-mini);
	margin-top: var(--space-base);
}

.inputBox #shoplist p,
.inputBox p.salesGroup_title,
.inputBox p.salesTotal_title{
        font-size: var(--font-size-h3);
        font-weight: var(--font-semi-bold);
        min-width: 620px;
}
.inputBox #shoplist p{
        margin: var(--space-base) 0 var(--space-s);
}
.inputBox p.salesTotal_title{
	font-size: var(--font-size-base);
}

.inputBox table, .inputBox td {
	border: none;
	padding: 0;
}

.inputBox td br,
.inputBox .center th br{
        display: none;
}

.inputBox .salesAmount_table,
.inputBox .inputEdit_table,
.inputBox .shopSelect_table{
	width: 100%;
	min-width: 500px;
	margin: var(--space-s) 0 var(--space-base);
	padding-bottom: var(--space-xs);
	display: block;
	clear: both;
}

/* daily sales's display */
.inputBox .salesAmount_table th{
	height: auto;
	font-weight: var(--font-regular);
	border-bottom: none;
	padding: 0 var(--space-base) 0 var(--space-l);
}
.inputBox .salesAmount_table td{
	font-weight: var(--font-bold);
	font-size: var(--font-size-h6);
	text-align: right;
	padding-right: var(--space-xs);
	display: table-cell;
}

.inputBox .salesAmount_table th:nth-child(1){
	   padding: 0 var(--space-base) 0 0;
}

.inputBox .salesAmount_table td:nth-child(1) {
       padding-bottom: var(--space-mini);
}

.inputBox .inputEdit_table td,
.inputBox .shopSelect_table td{
        display: inline;
        vertical-align: baseline;
}
.inputBox .inputEdit_table td.timeIn{
        display: block;
}
.inputBox .inputEdit_table td:nth-child(1),
.inputBox .shopSelect_table td:nth-child(1) {
       padding-bottom: var(--space-mini);
}
.inputBox .inputEdit_table td.fontBold_td{
        font-weight: var(--font-semi-bold);
        font-size: var(--font-size-base);
}

.inputBox .inputEdit_table td input{
	margin: 0 0 var(--space-s);
}

.inputBox div.switch{
	margin-top: 0;
}

.inputBox .inputEdit_table div.switch{
	display: inline-block;
	vertical-align: middle;
    vertical-align: -webkit-baseline-middle;
    margin: var(--space-s) var(--space-mini) var(--space-base);
}

/* チェックするとradioの色がパタンと裏返る */
.inputBox .inputEdit_table label{
             cursor: pointer;
             position: relative;
             margin: var(--space-mini) var(--space-base) 0 var(--space-mini);
}

.inputBox .shopSelect_table select,
.inputBox .inputEdit_table input[type="text"],
.inputBox .inputEdit_table input[type="password"]{
        display: block;
}

.inputBox .inputEdit_table td.timeIn input[type="number"]{
        margin: var(--space-xs) var(--space-s);
        vertical-align: middle;
        width: 49px;
        padding-left: var(--space-size-0);
}
.inputBox .inputEdit_table td.timeIn input[type="number"]:nth-child(1){
        margin-left: 0;
}

.inputBox .inputEdit_table input[type="radio"]{
        vertical-align: baseline;
        margin: var(--space-s) var(--space-size-1) var(--space-s) 0;
}

.inputBox .inputEdit_table tr.shopCodeEditIn td.fontBold_td{
        display: block;
        padding-left: var(--space-mini);
}
.inputBox .inputEdit_table tr.shopCodeEditIn input[type="text"]{
    display: inline;
    width: 80px;
    margin-left: var(--space-s);
    vertical-align: inherit;
}

/* user_create/user_edit: automated password generator start */
.inputBox .inputEdit_table tr.autoPass,
.inputBox .inputEdit_table tr.autoPass button{
    display: inline-block;
}
.inputBox .inputEdit_table tr.autoPass td:nth-child(2){
        display: inline;
}
.inputBox .inputEdit_table tr.autoPass button{
    margin: var(--space-s) var(--space-s) 0 var(--space-base);
}
.inputBox .inputEdit_table tr.autoPass td span {
    font-size: var(--font-size-base);
}
.inputBox .inputEdit_table input.pass_input{
    opacity: 1;
    -webkit-transition: none;
    transition: none;
}
/* user_create/user_edit: automated password generator end */


/* .inputBox table.borderOn/.center setting */
.inputBox .center{
        border: var(--border-size-s) solid var(--color-neutral-4);
        border-radius: var(--border-radius-soft);
        background: var(--color-neutral-0);
        text-align: left;
        font-size: var(--font-size-s);
        line-height: var(--line-height-m);
        box-shadow: var(--shadow-xs);
        border-bottom: none;
        margin: var(--space-xs) 0 var(--space-m);
}

.inputBox .center th{
       padding: var(--space-xs) var(--space-m);
}
.inputBox .center td{
        border-bottom: var(--border-size-s) solid var(--color-neutral-4);
        padding: var(--space-size-0) var(--space-m);
}

.inputBox .center th,
.inputBox .center td{
       text-align: right;
}

.inputBox .center th:first-child,
.inputBox .center td:first-child,
.inputBox #shoplist .center th,
.inputBox #shoplist .center td,
.inputBox #vmtlist .center th,
.inputBox #vmtlist .center td{
        text-align: left;
}

form > .inputBox .center th,
form > .inputBox .center td,
.inputBox #shoplist .center th:last-child,
.inputBox #shoplist .center td:last-child {
        text-align: center;
}

.inputBox .center input[type="text"] {
        width: auto;
}

.inputBox #shoplist .center {
	margin-top: var(--space-none);
}

.inputBox #vmtlist{
	padding-top: var(--space-base);
}

.inputBox #vmtlist .center td a::before{
	font-family: "Font Awesome 5 Free";
	content: var(--icon-chart-line);
	padding-right: var(--space-xs);
    font-weight: var(--font-bold);
}
.inputBox #vmtlist .center td a:nth-child(2)::before{
	font-family: "Font Awesome 5 Free";
	content: var(--icon-edit);
    font-weight: var(--font-semi-bold);
    padding-right: var(--space-mini);
}


/* 編集エリア　更新ボタン */
.inputCmd {
	margin: var(--space-s) 0;
}

.inner form .inputBox p.noteEdit {
	font-weight: var(--font-light);
	font-size: var(--font-size-s);
    min-width: 620px;
}

/* ログイン画面elements settinng */
/*背景画像の設定をする*/
.login_background{
    height: 720px;
    position: relative;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVQYV2P8P4PBlwEE0v8bM6Jy/v9vAMsAAQDfDQp7c6+3ZwAAAABJRU5ErkJggg==") repeat 0 / auto,url("../img/top_background_image.jpg") repeat-x 0 / cover;
    width: 100%;
    z-index: 0;
    animation: bgiLoop 50s linear infinite;
}
@keyframes bgiLoop {
    from {
        background-position: 0 0;
    }
    to {
      background-position: -1684px 0;
    }
}
/*:beforeにぼかし効果を設定する*/
.login_back::before{
      content: '';
      background: inherit;/*.bgImageで設定した背景画像を継承する*/
      -webkit-filter: blur(var(--space-size-2));
      -moz-filter: blur(var(--space-size-2));
      -o-filter: blur(var(--space-size-2));
      -ms-filter: blur(var(--space-size-2));
      filter: blur(var(--space-size-2));
      position: absolute;
      /*ブラー効果で画像の端がボヤけた分だけ位置を調整*/
      top: calc(-1 * var(--space-size-2));
      left: calc(-1 * var(--space-size-2));
      right: calc(-1 * var(--space-size-2));
      bottom: calc(-1 * var(--space-size-2));
      z-index: -1;/*重なり順序を一番下にしておく*/
}

.loginArea{
    padding: var(--space-none);
    height: 800px;
    float: right;
    background-color: var(--color-trans-back);
}

.loginArea .login_title,
.loginArea form {
    width: 320px;
}

.loginArea .login_title{
    display: block;
    padding: var(--space-xl) 0 var(--space-size-3);
}

.loginArea form{
    height: 250px;
    padding: 0 45px 45px;
}

/* login input setting start */
.loginArea input{
        display: block;
        width: 230px;
        height: var(--space-l);
}

.loginArea [type="submit"]{
        margin: var(--space-base) 0 0;
        font-size: var(--font-size-base);
        height: var(--space-xl);
}

.loginArea [type="text"],
.loginArea [type="password"]{
     background-color: transparent;
     border: none;
     border-bottom: var(--border-size-s) solid var(--color-neutral-5);
     border-radius: var(--border-radius-none);
     padding: 0;
}

.loginArea [type="text"]{
	margin-bottom: var(--space-base);
}

.loginArea [type="text"]:hover,
.loginArea [type="password"]:hover{
	border-bottom: var(--border-size-s) solid var(--color-neutral-6);
}

.loginArea [type="text"]:focus,
.loginArea [type="password"]:focus{
	border-bottom: var(--border-size-s) solid var(--color-primary);
	background-color: transparent;
}

.loginArea [type="text"]:-webkit-autofill,
.loginArea [type="password"]:-webkit-autofill {
	animation-name: onAutoFillStart;
	-webkit-animation-name: onAutoFillStart;
	transition: background-color 10000s ease-in-out 0s;
}

.loginArea [type="reset"],
.loginArea br{
	display: none;
}
/* login input setting end */

.loginArea form div{
	text-align: center;
	position: relative;
	width: 100%;
	margin-top: var(--space-m);
	left: 0;
}

.loginArea span{
	display: block;
    font-family: Cambria, Georgia, serif;
	color: var(--color-blackorange-darkest);
	font-weight: var(--font-semi-bold);
    text-align: center;
	padding: calc(var(--space-l) + var(--space-xl)) var(--space-none) var(--space-none);
}

.loginArea span.loginTitle_biger{
    font-size: var(--font-size-display);
    padding-top: var(--space-xl);
    /*background: url(../img/BirdsEyeCharactor_small.png) no-repeat var(--space-base) 43px / 113px 73px;*/
    background: url(../img/ov_logo.png) no-repeat center 0px / 250px 164px;
    height: 170px;
    width: 100%;
    /*transform: rotateZ(32deg);*/
}
.loginArea .loginTitle_biger .loginTitle_bigerWords{
    padding: 0;
    transform: rotateZ(-32deg);
}

.loginArea span.loginTitle_smaller{
    font-size: var(--font-size-s);
    line-height: var(--line-height-base);
    padding: var(--space-xs) var(--space-none) var(--space-l);
}

.loginArea .login_footer{
    text-align: center;
    padding-top: 30px;
    font-family: Cambria, Georgia, serif;
    font-weight: var(--font-semi-bold);
	color: var(--color-blackorange-darkest);
}
.loginArea .login_footer p{
    font-size: var(--font-size-s);
    height: var(--space-size-3);
}

.loginArea .login_footer p::after {
    content: '';
    vertical-align: middle;
    text-align: center;
    height: var(--space-size-3);
    width: 35%;
    background: url(../img/kenbaikipro_logo.png) no-repeat 0 / 100% var(--space-size-3);
    display: inline-block;
    margin-left: var(--space-base);
}


/**********************************************************/
/*     media's type and media's widthデバイス変更         */
/**********************************************************/
/*1240pxまでの幅*/
@media screen and (max-width: 1240px){

  html{
        overflow-x: auto;
  }
  th{
        padding: var(--space-none) var(--space-base);
  }
  td{
        padding: var(--space-s) var(--space-base);
  }

  .inner {
	     width: calc(100% - var(--space-xl));
         margin-left: var(--space-xl);
         transition: transform 0.4s, opacity 0.4s;
         transition: transform 0.4s, opacity 0.4s, -webkit-transform 0.4s;
  }
   #header{
	left: 0;
	opacity: 0.9;
  }

   .systemInfo,
   .errorInfo,
   .dbsuccessInfo{
        width: calc(100% - var(--space-xl));
	    left: var(--space-xl);
   }

   .menu{
     position: fixed;
     width: calc(calc(var(--side-menu-size) - 60px) - 200px);
     overflow: hidden;
     -webkit-transition: width 0.4s ease;
             transition: width 0.4s ease;
     -webkit-transform: translateZ(0) scale(1,1);
     opacity: 0.9;

  }
  .menu:hover {
 	width: calc(var(--side-menu-size) - 60px);
   }

   .menu:hover + .inner {
        opacity: .8;
        pointer-events: auto;
        background-color: var(--color-trans-1);
   }
   .menu div{
      outline: 0;
   }
   .menu div:nth-child(1){
      outline: 0;
      padding-left: 0;
   }

  .inputBox table.center,
   #search table{
	min-width: 500px;
  }
}

/******************** 1000pxまでの幅 ********************/
@media screen and (max-width: 1000px){

  th{
        padding: var(--space-none) var(--space-s);
  }
  .inputBox .center th{
        padding: var(--space-xs) var(--space-s);
  }

  td,
  .inputBox .center td{
        padding: var(--space-s);
  }

  .indexReturnLink,
  .headerLink {
	margin-left: var(--div-margin-0);
  }
  .salesLink {
         margin-left: 0;
  }
}

/********************* モバイル 767pxまでの幅 ********************/
@media (max-width: 767px){
	.indexReturnLink,
	.headerLink {
		margin-left: var(--ele-margin-0);
	}
  #header .left {
	font-size: 0;
        padding: 0;
  }
  #header .middle::after {
	display: none;
   }
  #header .middle {
	width: calc(100% - var(--space-xl));
  }
}

/********************* 640pxまでの幅 ********************/
@media screen and (max-width: 640px){
    .loginArea form{
    align-items: normal;
	min-width: 100%;
   }

   .inputBox .center th {
       padding: var(--space-xs);
   }
   .inputBox .center td {
       padding: var(--space-s) var(--space-xs);
   }

   .indexReturnLink,
   .headerLink {
	margin-left: 0;
   }
}