@charset "utf-8";

/* ----------
共通フォーム設定（ボタン、テキストボックス、ドロップダウンンなど）
横幅は 文字に合わせて可変
固定が必要な場合はstyle_main.css に別途クラスを追加してサイズ、文字揃えのみ指定 ---------- */

 /* 全体共通（デフォルトのスタイルを削除） */
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	resize: none; /* Safari,Chromeのフォームリサイズ禁止 */
	outline: none;/* Chrome フォーカス時のアウトライン非表示 */
	font-family: "Segoe UI","SF Pro","Hiragino Sans","Meiryo UI" ;
	font-size:14px;
}
select::-ms-expand {
	display: none;
}
input::-ms-clear { /* IEの×マーク非表示 */
    visibility:hidden
}

/* 等幅フォント指定 */
.mono { 
	font-family:monospace, serif;
}


/* ---------- テキストボックス ---------- */

.input-text {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
}
.input-text:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.input-text:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.input-text:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}
.input-text:read-only  { /* 読み取り専用 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #BCC5D0;
}

input[type="text"]:disabled  { /* 使用不可追加指定 */
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


/* ---------- テキストボックス 小 <div>で対象のフォームを囲む ---------- */

 /* 数値　右揃え */
.s-input {
	height:30px;
	padding:0 16px;
	font-size:12px;
	text-align:right;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
}
.s-input:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.s-input:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.s-input:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

 /* テキスト　左揃え */
.s-input-text {
	height:30px;
	padding:0 16px;
	font-size:12px;
	text-align:left;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
}
.s-input-text:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.s-input-text:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.s-input-text:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


/* ---------- テキストボックス 2つ組み合わせ ---------- */

.left-text {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border-top-right-radius:0;
	border-bottom-right-radius:0;

}

.left-text:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.left-text:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.left-text:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


.right-text {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	margin-left:-1px;
}
.right-text:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.right-text:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}

 /* 中央に配置　角丸なし */
.center-text {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	margin-left:-1px;
}
.center-text:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.center-text:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}


/* ---------- テキストボックス　取引先登録用 ---------- */

.torihiki-box {
	height:47px;
	padding-left:16px;
	padding-right:35px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border-top-right-radius:0;
	border-bottom-right-radius:0;
	cursor:pointer;
}

.torihiki-box:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.torihiki-box:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.torihiki-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* ---------- テキストボックス　取引先担当者登録用 ---------- */

.torihiki-box2 {
	height:47px;
	padding-left:16px;
	padding-right:35px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	cursor:pointer;
}
.torihiki-box2:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.torihiki-box2:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.torihiki-box2:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


/* ---------- テキストボックス　自社名登録用 ---------- */

.jisha-box {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	cursor:pointer;
}
.jisha-box:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.jisha-box:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.jisha-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* ---------- テキストボックス　請求担当者登録用 ---------- */

.jisha-tanto-box {
	height:47px;
	padding-left:16px;
	padding-right:35px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	cursor:pointer;
}
.jisha-tanto-box:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.jisha-tanto-box:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.jisha-tanto-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* ---------- テキストボックス　内訳登録用 ---------- */

.utiwake-box { /* 通常　左寄せ */
	height:24px;
	padding:0;
	background: #FFFFFF;
	border-bottom: 1px solid #BCC5D0;
	text-align:left;
	cursor:pointer;
}
.utiwake-box:hover { /* マウスオン */
	background: #FFFFFF;
	border-bottom: 1px solid #798A9A;
	transition: 0.4s ;
}
.utiwake-box:focus { /* フォーカス */
	background: #FFFFFF;
	border-bottom: 1px solid #2D55AD;
}
.utiwake-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border-bottom: 1px solid #F6F8FB;
}

/* ---------- テキストボックス　振込先登録用 ---------- */

.furikomi-box {
	height:47px;
	padding-left:16px;
	padding-right:35px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	cursor:pointer;
}
.furikomi-box:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.furikomi-box:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.furikomi-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* ---------- テキストボックス　プロジェクト登録用 ---------- */

.project-box {
	height:47px;
	padding-left:16px;
	padding-right:35px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	cursor:pointer;
}
.project-box:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.project-box:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.project-box:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


/* ---------- テキストボックス　下線のみの入力欄 ---------- */

.input-underline { /* 通常　左寄せ */
	height:24px;
	padding:0;
	background: #FFFFFF;
	border-bottom: 1px solid #BCC5D0;
	text-align:left;
}
.input-underline:hover { /* マウスオン */
	background: #FFFFFF;
	border-bottom: 1px solid #798A9A;
	transition: 0.4s ;
}
.input-underline:focus { /* フォーカス */
	background: #FFFFFF;
	border-bottom: 1px solid #2D55AD;
}
.input-underline:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border-bottom: 1px solid #F6F8FB;
}

.input-underline-r { /* 数値用　右寄せ */
	height:24px;
	padding:0;
	background: #FFFFFF;
	border-bottom: 1px solid #BCC5D0;
	text-align:right;
}
.input-underline-r:hover { /* マウスオン */
	background: #FFFFFF;
	border-bottom: 1px solid #798A9A;
	transition: 0.4s ;
	text-align:right;
}
.input-underline-r:focus { /* フォーカス */
	background: #FFFFFF;
	border-bottom: 1px solid #2D55AD;
	text-align:right;
}
.input-underline-r:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border-bottom: 1px solid #F6F8FB;
	text-align:right;
}


/* ---------- テキストエリア ---------- */

.input-textarea {
	padding: 16px;
	border-radius: 4px;
	border: 1px solid #BCC5D0;
	overflow: auto;
}

.input-textarea:hover { /* マウスオン */
	background: #FFFFFF;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.input-textarea:focus { /* フォーカス */
	background: #FFFFFF;
	border: 1px solid #2D55AD;
}
.input-textarea:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

 /* エラーの場合 */
.error .input-textarea {
 border: 1px solid #D1511A;
}


/* ---------- ドロップダウン　通常 ---------- */

.select-form {
	height:49px;
	padding-bottom:0;
	padding-left:16px;
	padding-right:45px;
	padding-top:0;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	background-image: url(../icon24/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor:pointer;
}
.select-form:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.select-form:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.select-form:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
	background-image: url(../icon24/AngleBottom_g.png?v=1);
	opacity: 1;
}
.select-form:disabled::-ms-value,
.select-form:disabled::-ms-expand { /* IE 使用不可 */
	color: #1A2127;
	opacity: 1;
}

/* ---------- ドロップダウン 2つ組み合わせ ---------- */

 /* left 左側 */
.select-form-l {
	height:49px;
	padding-bottom:0;
	padding-left:16px;
	padding-right:45px;
	padding-top:0;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border-top-right-radius:0;
	border-bottom-right-radius:;
	background-image: url(../icon24/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor:pointer;
}
.select-form-l:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.select-form-l:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.select-form-l:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
	background-image: url(../icon24/AngleBottom_g.png?v=1);
	opacity: 1;
}
.select-form-l:disabled::-ms-value,
.select-form-l:disabled::-ms-expand { /* IE 使用不可 */
	color: #1A2127;
	opacity: 1;
}

 /* right 右側 */
.select-form-r {
	height:49px;
	padding-bottom:0;
	padding-left:16px;
	padding-right:45px;
	padding-top:0;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	background-image: url(../icon24/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right 15px center;
	margin-left:-1px;
	cursor:pointer;
}
.select-form-r:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.select-form-r:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.select-form-r:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
	background-image: url(../icon24/AngleBottom_g.png?v=1);
	opacity: 1;
}
.select-form-r:disabled::-ms-value,
.select-form-r:disabled::-ms-expand { /* IE 使用不可 */
	color: #1A2127;
	opacity: 1;
}


/* ---------- ドロップダウン　小 ---------- */

.select-form-s {
	height:30px;
	padding-bottom:0;
	padding-left:16px;
	padding-right:45px;
	padding-top:0;
	font-size:12px;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	background-image: url(../icon24/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right 15px center;
	cursor:pointer;
}
.select-form-s:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.select-form-s:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.select-form-s:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color: #1A2127;
	border: 1px solid #F6F8FB;
	background-image: url(../icon24/AngleBottom_g.png?v=1);
	opacity: 1;
}
.select-form-s:disabled::-ms-value,
.select-form-s:disabled::-ms-expand { /* IE 使用不可 */
	color: #1A2127;
	opacity: 1;
}

/* ---------- ドロップダウン　検索ページの件数選択 ---------- */

.select-form-k {
	display:inline-block;
	padding-right:20px;
	border:none;
	color: #2D55AD;
	font-weight: bold;
	font-size: 12px;
	background-image: url(../icon16/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right center;
	background-color: #ffffff;
	cursor:pointer;
}

/* ---------- ドロップダウン　請求書明細 ---------- */

.select-form-invoice {
	display:inline-block;
	padding-right:20px;
	border:none;
	color: #1A2127;
	font-weight: normal;
	font-size: 12px;
	background-image: url(../icon16/AngleBottom.png?v=1);
	background-repeat: no-repeat;
	background-position: right center;
	background-color: #ffffff;
	cursor:pointer;
}

.select-form-invoice:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color: #1A2127;
	opacity: 1;
}

.select-form-invoice:disabled::-ms-value,
.select-form-invoice:disabled::-ms-expand { /* IE 使用不可 */
	color: #1A2127;
	opacity: 1;
}


/* ---------- ボタン Primary（重要なボタン） ---------- */
.prim-button {
	display:inline-block;
	background-color: #2D55AD;
	padding: 8px 30px;
	border: 2px solid #2D55AD;
	border-radius: 100px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}
.prim-button:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
}
.prim-button.alert { /* 削除ボタン */
	cursor: default;
	background-color: #D1511A;
	border: 2px solid #D1511A;
}


 /* 幅固定ボタン　120px */
.prim-button-120 {
	display:inline-block;
	background-color: #2D55AD;
	padding: 8px 0;
	border: 2px solid #2D55AD;
	border-radius: 100px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
	width:120px;
}
.prim-button-120:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button-120:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button-120:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
}



/* ---------- ボタン With Dropdown（矢印ボタンとセットのボタン） ---------- */

.prim-button-l { /* 左ボタン 文字表示 */
	display:inline-block;
	background-color: #2D55AD;
	padding-bottom:8px;
	padding-left:30px;
	padding-right:30px;
	padding-top:8px;
	border: 2px solid #2D55AD;
	border-radius: 20px 0px 0px 20px;
	color:#ffffff;
	font-weight: bold;
	font-size: 14px;
}
.prim-button-l:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button-l:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.prim-button-l:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
}

.prim-button-r { /* 右ボタン 矢印のみ表示 */
	display:inline-block;
	background-color: #2D55AD;
	padding-bottom:8px;
	padding-left:0;
	padding-right:0;
	padding-top:8px;
	width:47px;
	border-radius: 0px 20px 20px 0px;
	border: 2px solid #2D55AD;
	border-left: 1px solid #BCC5D0;
	color:#ffffff;
	font-weight: bold;
	font-size: 14px;
	background-image:url(../img/icon_arrow.png?v=1);
	background-repeat: no-repeat;
	background-position: right 18px center;
}
.prim-button-r:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	background-color: #1F3E84;
	transition: 0.4s ;
}
.prim-button-r:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	background-color: #1F3E84;
	transition: 0.4s ;
}
.prim-button-r:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
	border-left: 1px solid #ffffff;
}



/* ---------- ボタン Secondary（補助的なボタン） ---------- */
.sec-button {
	display:inline-block;
	background: #ffffff;
	padding: 8px 30px;
	border: 2px solid #2D55AD;
	border-radius: 100px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #2D55AD;
}
.sec-button:hover  { /* マウスオン */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}
.sec-button:focus { /* フォーカス */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}
.sec-button:disabled { /* 使用不可 */
	cursor: default;
	background-color: #EDF1F5;
	border: 2px solid #BCC5D0;
	color: #BCC5D0;
}


/* ---------- ボタン Secondary（補助的なボタン小） ---------- */
.sec-button-s {
	display:inline-block;
	background: #ffffff;
	padding:1px 15px;
	border: 2px solid #2D55AD;
	border-radius: 20px;
	font-weight: bold;
	font-size: 12px;
	text-align: center;
	color: #2D55AD;
}
.sec-button-s:hover { /* マウスオン */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}
.sec-button-s:focus { /* フォーカス */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}
.sec-button-s:disabled { /* 使用不可 */
	cursor: default;
	background-color: #EDF1F5;
	border: 2px solid #BCC5D0;
	color: #BCC5D0;
}

/* ---------- Filter Button　検索条件ボタン ---------- */
.filter-button {
	display:inline-block;
	background: #FFFFFF;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
	width:115px;
	padding-bottom:2px;
	padding-left:7px;
	padding-top:4px;
	font-weight: bold;
	font-size:14px;
	text-align: left;
}
.filter-button:before { /* アイコン表示 */
	content: "";
	display: inline-block;
	width: 32px;
	height: 32px;
	background: url(../icon32/Search.png?v=1) no-repeat;
	vertical-align: middle;
}
.filter-button:hover { /* マウスオン */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}
.filter-button:focus { /* フォーカス */
	cursor: pointer;
	background-color: #EDF1F5;
	transition: 0.4s ;
}


/* ---------- With Button/Mail　テキストボックスと組み合わせるボタン ---------- */

.with-button {
	display:inline-block;
	background-color: #2D55AD;
	padding: 0;
	width:106px;
	height:49px;
	border:0;
	border-radius: 0px 4px 4px 0px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}
.with-button:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.with-button:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.with-button:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
}

.with-text {
	height:47px;
	padding:0 16px;
	background: #FFFFFF;
	border-bottom: 1px solid #BCC5D0;
	border-top: 1px solid #BCC5D0;
}
.with-text:hover { /* マウスオン */
	background: #FFFFFF;
	border-bottom: 1px solid #798A9A;
	border-top: 1px solid #798A9A;
	transition: 0.4s ;
}
.with-text:focus { /* フォーカス */
	background: #FFFFFF;
	border-bottom: 1px solid #2D55AD;
	border-top: 1px solid #2D55AD;
}
.with-text:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border-bottom: 1px solid #BCC5D0;
	border-top: 1px solid #BCC5D0;
}


/* ---------- チェックボックス　通常 ---------- */

.custom-checkbox{
	position:absolute;
	display:none;
}
.custom-checkbox + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #BCC5D0;
	border-radius: 4px;
}
.custom-checkbox:checked + label::before{
	background: #2D55AD;
	border: 2px solid #2D55AD;
}
/* checkmark */
.custom-checkbox:checked + label::after {
	content:'';
	position:absolute;
	left:7px;
	top:0px;
	width:8px;
	height:12px;
	border-bottom:solid 2px #ffffff;
	border-right:solid 2px #ffffff;
	transform:rotate(45deg);
}
/* checkbox frame - disabled */
.custom-checkbox:disabled + label::before{
	background: #F6F8FB;
	border: 2px solid #BCC5D0;
}
.custom-checkbox:disabled:checked + label::before{
	background: #BCC5D0;
	border: 2px solid #BCC5D0;
}
/* checkmark - disabled */
.custom-checkbox:disabled:checked + label::after {
	border-bottom-color:#ffffff;
	border-right-color:#ffffff;
}
/* disabled label */
.custom-checkbox:disabled + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}

/* ---------- チェックボックス type=hidden ---------- */

.custom-checkbox + input[type=hidden] + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox + input[type=hidden] + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #BCC5D0;
	border-radius: 4px;
}
.custom-checkbox:checked + input[type=hidden] + label::before{
	background: #2D55AD;
	border: 2px solid #2D55AD;
}
/* checkmark */
.custom-checkbox:checked + input[type=hidden] + label::after {
	content:'';
	position:absolute;
	left:7px;
	top:0px;
	width:8px;
	height:12px;
	border-bottom:solid 2px #ffffff;
	border-right:solid 2px #ffffff;
	transform:rotate(45deg);
}
/* checkbox frame - disabled */
.custom-checkbox:disabled + input[type=hidden] + label::before{
	background: #F6F8FB;
	border: 2px solid #BCC5D0;
}
.custom-checkbox:disabled:checked + input[type=hidden] + label::before{
	background: #BCC5D0;
	border: 2px solid #BCC5D0;
}



/* disabled label */
.custom-checkbox:disabled + input[type=hidden] + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}

/* ---------- チェックボックス　すべて選択 ---------- */

.custom-checkbox-all{
	position:absolute;
	display:none;
}
.custom-checkbox-all + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox-all + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #BCC5D0;
	border-radius: 4px;
}
.custom-checkbox-all:checked + label::before{
	background: #2D55AD;
	border: 2px solid #2D55AD;
}
/* checkmark */
.custom-checkbox-all:checked + label::after {
	content:'';
	position:absolute;
	left:6px;
	top:-2px;
	width:12px;
	height:12px;
	border-bottom:solid 2px #ffffff;
}
/* checkbox frame - disabled */
.custom-checkbox-all:disabled + label::before{
	background: #F6F8FB;
	border: 2px solid #BCC5D0;
}
.custom-checkbox-all:disabled:checked + label::before{
	background: #BCC5D0;
	border: 2px solid #BCC5D0;
}
/* checkmark - disabled */
.custom-checkbox-all:disabled:checked + label::after {
	border-bottom-color:#ffffff;
	border-right-color:#ffffff;
}
/* disabled label */
.custom-checkbox-all:disabled + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}

/* ---------- チェックボックス　すべて選択 type=hidden ---------- */

.custom-checkbox-all + input[type=hidden] + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox-all + input[type=hidden] + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #BCC5D0;
	border-radius: 4px;
}
.custom-checkbox-all:checked + input[type=hidden] + label::before{
	background: #2D55AD;
	border: 2px solid #2D55AD;
}
/* checkmark */
.custom-checkbox-all:checked + input[type=hidden] + label::after {
	content:'';
	position:absolute;
	left:6px;
	top:-2px;
	width:12px;
	height:12px;
	border-bottom:solid 2px #ffffff;
}
/* checkbox frame - disabled */
.custom-checkbox-all:disabled + input[type=hidden] + label::before{
	background: #F6F8FB;
	border: 2px solid #BCC5D0;
}
.custom-checkbox-all:disabled:checked + input[type=hidden] + label::before{
	background: #BCC5D0;
	border: 2px solid #BCC5D0;
}
/* checkmark - disabled */
.custom-checkbox-all:disabled:checked + input[type=hidden] + label::after {
	border-bottom-color:#BCC5D0;
	border-right-color:#BCC5D0;
}
/* disabled label */
.custom-checkbox-all:disabled + input[type=hidden] + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}

/* ---------- チェックボックス　丸型（請求書作成予約） ---------- */

.custom-checkbox-k{
	position:absolute;
	display:none;
}
.custom-checkbox-k + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox-k + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #58A69C;
	border-radius:50%;
}
.custom-checkbox-k:checked + label::before{
	background-color:#fff;
	border: 2px solid #58A69C;
	border-radius:50%;
}
/* checkmark */
.custom-checkbox-k:checked + label::after {
	content:'';
	position:absolute;
	left:8px;
	top:3px;
	width:5px;
	height:9px;
	border-bottom:solid 2px #58A69C;
	border-right:solid 2px #58A69C;
	transform:rotate(45deg);
}
/* checkbox frame - disabled */
.custom-checkbox-k:disabled + label::before{
	background: #fff;
	border: 2px solid #BCC5D0;
}
/* checkmark - disabled */
.custom-checkbox-k:disabled:checked + label::after {
	border-bottom-color:#BCC5D0;
	border-right-color:#BCC5D0;
}
/* disabled label */
.custom-checkbox-k:disabled + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}

/* ---------- チェックボックス 丸形 type=hidden ---------- */

.custom-checkbox-k + input[type=hidden] + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* checkbox frame */
.custom-checkbox-k + input[type=hidden] + label::before{
	content:'';
	position:absolute;
	left:0;
	height:20px;
	width:20px;
	top:-2px;
	background-color:#fff;
	border: 2px solid #58A69C;
	border-radius:50%;
}
.custom-checkbox-k:checked + input[type=hidden] + label::before{
	background-color:#fff;
	border: 2px solid #58A69C;
	border-radius:50%;
}
/* checkmark */
.custom-checkbox-k:checked + input[type=hidden] + label::after {
	content:'';
	position:absolute;
	left:8px;
	top:3px;
	width:5px;
	height:9px;
	border-bottom:solid 2px #58A69C;
	border-right:solid 2px #58A69C;
	transform:rotate(45deg);
}
/* checkbox frame - disabled */
.custom-checkbox-k:disabled + input[type=hidden] + label::before{
	background: #fff;
	border: 2px solid #BCC5D0;
}
/* checkmark - disabled */
.custom-checkbox-k:disabled:checked + input[type=hidden] + label::after {
	border-bottom-color:#BCC5D0;
	border-right-color:#BCC5D0;
}
/* disabled label */
.custom-checkbox-k:disabled + input[type=hidden] + label {
	cursor:default;
	background-color:transparent;
	color: #BCC5D0;
}



/* ----------  チェックボックスのみ（ラベル空欄） ---------- */

.custom-checkbox.nolabel + label {
	top:-15px;
}
.custom-checkbox-all.nolabel + label {
	top:-15px;
}

/* ----------  チェックボックスのみ（ラベル空欄）type=hidden ---------- */

.custom-checkbox.nolabel+ input[type=hidden]  + label {
	top:-15px;
}
.custom-checkbox-all.nolabel+ input[type=hidden]  + label {
	top:-15px;
}

/* ---------- ラジオボタン ---------- */

.custom-radio{
	position:absolute;
	display:none;
}
.custom-radio + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* radiobutton frame */
.custom-radio + label::before{
  content:'';
  position:absolute;
  left:0;
  top:-2px;
  height:20px;
  width:20px;
  background-color:#fff;
  border:2px solid #BCC5D0;
  border-radius:50%;
}
/* checkmark */
.custom-radio:checked + label::after{
  content:'';
  position:absolute;
  left:6px;
  top:4px;
  height:12px;
  width:12px;
  background-color:#2D55AD;
  border-radius:50%;
}
.custom-radio:disabled + label::before{
  border:solid 2px #BCC5D0;
  background-color:#ffffff;
}
.custom-radio:disabled:checked + label::after {
  background-color:#BCC5D0;
}
/* disabled label */
.custom-radio:disabled + label {
  cursor:default;
  background-color:#fff;
  color:#BCC5D0;
}

/* ---------- ラジオボタン type=hidden ---------- */

.custom-radio + input[type=hidden] + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* radiobutton frame */
.custom-radio + input[type=hidden] + label::before{
  content:'';
  position:absolute;
  left:0;
  top:-2px;
  height:20px;
  width:20px;
  background-color:#fff;
  border:2px solid #BCC5D0;
  border-radius:50%;
}
/* checkmark */
.custom-radio:checked + input[type=hidden] + label::after{
  content:'';
  position:absolute;
  left:6px;
  top:4px;
  height:12px;
  width:12px;
  background-color:#2D55AD;
  border-radius:50%;
}
.custom-radio:disabled + input[type=hidden] + label::before{
  border:solid 2px #BCC5D0;
  background-color:#ffffff;
}
.custom-radio:disabled:checked + input[type=hidden] + label::after {
  background-color:#BCC5D0;
}
/* disabled label */
.custom-radio:disabled + input[type=hidden] + label {
  cursor:default;
  background-color:#fff;
  color:#BCC5D0;
}

/* ---------- ラジオボタン2　テキストボックス入り ---------- */

.custom-radio2{
	position:absolute;
	display:none;
}
.custom-radio2 + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* radiobutton frame */
.custom-radio2 + label::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  height:20px;
  width:20px;
  background-color:#fff;
  border:2px solid #BCC5D0;
  border-radius:50%;
}
/* checkmark */
.custom-radio2:checked + label::after{
  content:'';
  position:absolute;
  left:6px;
  top:10px;
  height:12px;
  width:12px;
  background-color:#2D55AD;
  border-radius:50%;
}
.custom-radio2:disabled + label::before{
  border:solid 2px #BCC5D0;
  background-color:#ffffff;
}
.custom-radio2:disabled:checked + label::after {
  background-color:#BCC5D0;
}
/* disabled label */
.custom-radio2:disabled + label {
  cursor:default;
  background-color:#fff;
  color:#BCC5D0;
}

/* ---------- ラジオボタン2 type=hidden ---------- */

.custom-radio2 + input[type=hidden] + label {
	position:relative;
	padding-left:30px;
	cursor:pointer;
	display: inline-block;
}
/* radiobutton frame */
.custom-radio2 + input[type=hidden] + label::before{
  content:'';
  position:absolute;
  left:0;
  top:4px;
  height:20px;
  width:20px;
  background-color:#fff;
  border:2px solid #BCC5D0;
  border-radius:50%;
}
/* checkmark */
.custom-radio2:checked + input[type=hidden] + label::after{
  content:'';
  position:absolute;
  left:6px;
  top:10px;
  height:12px;
  width:12px;
  background-color:#2D55AD;
  border-radius:50%;
}
.custom-radio2:disabled + input[type=hidden] + label::before{
  border:solid 2px #BCC5D0;
  background-color:#ffffff;
}
.custom-radio2:disabled:checked + input[type=hidden] + label::after {
  background-color:#BCC5D0;
}
/* disabled label */
.custom-radio2:disabled + input[type=hidden] + label {
  cursor:default;
  background-color:#fff;
  color:#BCC5D0;
}

/* ---------- トグルボタン（チェックボックス別パターン） ---------- */
.toggle_switch {
    display: block;
    font-size: 20px;
}

.toggle_switch > input {
    display: none;
}

.toggle_switch > label {
    display: block;
    position: relative;
    width: 2em;
    height:1em;
    border-radius: 12px;
    background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
    cursor: pointer;
}
.toggle_switch > input:checked + label {
    background-color: #2D55AD;
	border: 2px solid #2D55AD;
}
.toggle_switch > label::before {
    position: absolute;
    top: 0.05em;
    left: 0.05em;
    width: calc(1em - 0.1em);
    height: calc(1em - 0.1em);
    border-radius: calc(1em - 0.1em);
    background-color: #fff;
    transition: 0.4s;
    content: "";
}
.toggle_switch > input:checked + label::before {
    left: calc(100% - 1em + 0.05em);
}

/* ラベルの配置用　横並び */
.toggle-box {
	display:inline-block;
}

.toggle-lable {
	display:inline-block;
	font-weight: bold;
	font-size: 12px;
	color: #1A2127;
	margin-right:8px;
	vertical-align:6px;
}

.toggle-lable-off {
	display:inline-block;
	font-weight: bold;
	font-size: 12px;
	color: #BCC5D0;
	margin-right:8px;
	vertical-align:6px;
}
.toggle-lable-on {
	display:inline-block;
	font-weight: bold;
	font-size: 12px;
	color: #1A2127;
	margin-left:8px;
	vertical-align:6px;
}

/* ---------- トグルボタン（チェックボックス別パターン） type=hidden ---------- */
.toggle_switch + input[type=hidden] {
    display: block;
    font-size: 20px;
}

.toggle_switch > input[type=hidden] {
    display: none;
}

.toggle_switch > input[type=hidden] + label {
    display: block;
    position: relative;
    width: 2em;
    height:1em;
    border-radius: 12px;
    background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
    cursor: pointer;
}
.toggle_switch > input:checked + input[type=hidden] + label {
    background-color: #2D55AD;
	border: 2px solid #2D55AD;
}
.toggle_switch > input[type=hidden] + label::before {
    position: absolute;
    top: 0.05em;
    left: 0.05em;
    width: calc(1em - 0.1em);
    height: calc(1em - 0.1em);
    border-radius: calc(1em - 0.1em);
    background-color: #fff;
    transition: 0.4s;
    content: "";
}
.toggle_switch > input:checked + input[type=hidden] + label::before {
    left: calc(100% - 1em + 0.05em);
}



/* ---------- エラーの場合 <div class="error"> で囲む ---------- */

.error input[type="text"] {
	border: 1px solid #D1511A;
}

.error select {
 border: 1px solid #D1511A;
}

.input-validation-error {
	border: 1px solid #d1511a;
}

/* ---------- プレースフォルダーの色 ---------- */

input::placeholder {
	color: #798A9A;
}
input:-ms-input-placeholder { /* IE */
	color: #798A9A;
}
input::-ms-input-placeholder { /* Edge */
	color: #798A9A;
}


/* ---------- カレンダー表示 ---------- */

.input-date {
	height:47px;
	padding:0 16px;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
}
.input-date:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.input-date:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.input-date:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}
.input-date:read-only  { /* 読み取り専用 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #BCC5D0;
}

/* ---------- カレンダー表示　テキストボックス 2つ組み合わせ ---------- */

.left-date {
	height:47px;
	padding:0 16px;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	border: 1px solid #BCC5D0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border-top-right-radius:0;
	border-bottom-right-radius:0;

}

.left-date:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.left-date:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.left-date:disabled { /* 使用不可 */
	cursor: default;
	background: #F6F8FB url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}


.right-date {
	height:47px;
	padding:0 16px;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	border: 1px solid #BCC5D0;
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	border-top-right-radius:4px;
	border-bottom-right-radius:4px;
	margin-left:-1px;
}
.right-date:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.right-date:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.right-date:disabled { /* 使用不可 */
	cursor: default;
	background: #F6F8FB url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* 中央配置　角丸なし */
.center-date {
	height:47px;
	padding:0 16px;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	border: 1px solid #BCC5D0;
	margin-left:-1px;
}
.center-date:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.center-date:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.center-date:disabled { /* 使用不可 */
	cursor: default;
	background: #F6F8FB url(../icon24/Calendar.png) no-repeat right 10px bottom 12px;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

/* ---------- カレンダー表示　枠線なしのテキストボックス ---------- */

.input-date-s { /* 通常　左寄せ */
	height:24px;
	padding:0;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right;
	text-align:left;
	cursor:pointer;
}
.input-date-s:disabled { /* 使用不可 */
	cursor: default;
	background: #F6F8FB url(../icon24/Calendar.png) no-repeat right;
	color:#1A2127;
}

/* ---------- カレンダー表示 小（ファクタリングで使用） ---------- */
.s-input-date {
	height:30px;
	padding:0 16px;
	font-size:12px;
	text-align:left;
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 4px;
	border: 1px solid #BCC5D0;
	border-radius: 4px;
}
.s-input-date:hover { /* マウスオン */
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 4px;
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.s-input-date:focus { /* フォーカス */
	background: #FFFFFF url(../icon24/Calendar.png) no-repeat right 10px bottom 4px;
	border: 1px solid #2D55AD;
}
.s-input-date:disabled { /* 使用不可 */
	cursor: default;
	background: #F6F8FB url(../icon24/Calendar.png) no-repeat right 10px bottom 4px;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}



/* ---------- 請求書買取　新規申請の絞り込み検索用フォーム ---------- */
.left-text-fac {
	height:56px;
	width:300px;
	padding-bottom:0;
	padding-left:40px;
	padding-right:16px;
	padding-top:0;
	background:#FFFFFF url(../icon24/Search.png) no-repeat 12px 16px ;
	border: 1px solid #BCC5D0;
	border-top-left-radius:4px;
	border-bottom-left-radius:4px;
	border-top-right-radius:0;
	border-bottom-right-radius:0;

}
.left-text-fac:hover { /* マウスオン */
	border: 1px solid #798A9A;
	transition: 0.4s ;
}
.left-text-fac:focus { /* フォーカス */
	border: 1px solid #2D55AD;
}
.left-text-fac:disabled { /* 使用不可 */
	cursor: default;
	background-color: #F6F8FB;
	color:#1A2127;
	border: 1px solid #F6F8FB;
}

.with-button-fac {
	display:inline-block;
	background-color: #2D55AD;
	padding: 0;
	width:106px;
	height:58px;
	border:0;
	border-radius: 0px 4px 4px 0px;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	color: #ffffff;
}
.with-button-fac:hover { /* マウスオン */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.with-button-fac:focus { /* フォーカス */
	cursor: pointer;
	background-color: #1F3E84;
	border: 2px solid #1F3E84;
	transition: 0.4s ;
}
.with-button-fac:disabled { /* 使用不可 */
	cursor: default;
	background-color: #BCC5D0;
	border: 2px solid #BCC5D0;
}