html {
    scroll-behavior: smooth;
}
body
{
    font-size:medium;
	margin:0px;
	padding:0px;
	z-index:2;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
placeholder {
  color: #000;
}

.headerline {
  padding:1rem 0 0 0;
}

.hr_list {
  border-top: 1px solid #3A8175;
  background-color:#3A8175;
  height: 1em;
  text-align: center;
  overflow: visible;
}
.hr_list::after {
  content: "DataList";
  background: #fff;
  color: #000;
  display: inline-block;
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
  top: -0.3em;
  padding: 0 2em;
}
.hr_dataseparate
{
  border: 0;
  height: 1px;
  background: #000;
  background-image: -webkit-linear-gradient(left, #fff, #000, #ccc);
  background-image:    -moz-linear-gradient(left, #fff, #000, #ccc);
  background-image:      -o-linear-gradient(left, #fff, #000, #ccc);
  margin-bottom:30px;
  margin-top:30px;
}
.site-header {
	background: #1b3123;
	justify-content: space-between;
	width: 100%;
	color: #FFFFFF;
	font-size: xx-large;
	font-weight: bold;
	text-decoration-line: none;
	z-index: 1000;
    position:fixed;
}
.site-header .padding {
    padding: 8px;
}

.site-header-sub {
	display: flex;
	position: absolute;
	justify-content: space-between;
	background: #eee;
	width: 100%;
	font-weight: bold;
	text-decoration-line: none;
	top: 51px;
	z-index: 0;
}
.MsgClass
{
    top:15%;
    left:50%;
    transform: translateX(-50%); 
    z-index:15;
    position:fixed;
    z-index:100;
}
.MsgClass2
{
    top:55px;
    right:0px;
    z-index:100;
    position:fixed;
}
.MsgClass3
{
    top:115px;
    right:0px;
    z-index:100;
    position:fixed;
}
.MsgClassWarning
{
    top:175px;
    right:0px;
    z-index:100;
    position:fixed;
}
.WarningMsg {
    display: block;
    text-align: center;
    font-size: 13pt;
    box-shadow: 0px 10px 10px #000;
    background-color: #d35400;
    color: #fff;
    padding: 8px 20px 8px 20px;
    font-weight: bold;
    border-radius: 20px 0px 0px 20px;
    z-index: 100;
}
.WarningMsg::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f071";
    margin-right: 6px;
}
.SearchFormsMainContents {
    top: 10px;
    left: 10px;
    position: absolute;
}
.MainContents {
	top: 105px;
	left: 10px;
	position:absolute;
}
.MainContentsArea {
	position: absolute;
    padding:0px 10px 10px 15px;
}
input[type="checkbox"] {
  background-color:white;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  vertical-align: -5px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="checkbox"]:checked:before {
  position: absolute;
  top: 1px;
  left: 4px;
  transform: rotate(50deg);
  width: 4px;
  height: 8px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  content: '';
}
input[type="text"]
{
    border:1px solid #000;
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:3px;
}
input[type="date"]
{
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:3px;
}
input[type="number"]
{
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:3px;
}

input[type="password"]
{
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:3px;
}
select
{
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:0px;
}
textarea
{
    color:#000;
    border-radius: 0.3em;
    font-size:16px;
    padding:5px;
    margin:0px;
}

.Button {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    margin          :3px 0px 1px 0px;
    text-decoration : none;
}
.Button:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}

.searchButton {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.searchButton:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}
.searchButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f002";
}
.resetButton {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.resetButton:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}
.resetButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0e2";
}
.csvButton {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.csvButton:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}
.csvButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f6dd";
}
.pdfButton {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.pdfButton:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}
.pdfButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1c1";
}

.NotEnableButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #777;
    color           : #ccc;
    line-height     : .9em;
    border          : 1px solid #000;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
}

.editButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #009;
    color           : #fff;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #000;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.editButton:hover {
  box-shadow    : none;
  color         : #000;
  background    : #fff;
}
.editButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
}

/* 一覧の操作ボタンは文字を折り返さない（列が狭くても改行させない） */
.editButton, .editButtonL, .registButton, .registButtonL,
.deleteButton, .deleteButtonL, .visibleButton, .detailsButton {
    white-space: nowrap;
}

/* 取引先一覧の「詳細」ボタン */
.detailsButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #1C5E55;
    color           : #fff !important;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #1C5E55;
    font-weight     : bold;
    font-size       : 15px;
    cursor          : pointer;
    padding         : 5px 7px;
    margin          : 0px 0px 5px 0px;
    text-decoration : none;
}
.detailsButton:hover {
    box-shadow : none;
    color      : #1C5E55 !important;
    background : #fff;
    border     : 1px solid #1C5E55;
}
.detailsButton::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f46d";
    margin-right: 3px;
}

/* 金額サマリーカード（取引先詳細と共通の表示） */
.SummaryCards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
    justify-content: center;
}
.SummaryCard {
    flex: 1 1 200px;
    min-width: 180px;
    max-width: 320px;
    border: 1px solid #cdd8d0;
    border-radius: 6px;
    padding: 12px 14px;
    background: #fff;
    box-shadow: 1px 1px 3px #ddd;
}
.SummaryCard .lbl { font-size: 13px; color: #557; }
.SummaryCard .val { font-size: 24px; font-weight: bold; text-align: right; margin-top: 6px; }
.SummaryCard.green .val { color: #0a4; }
.SummaryCard.blue .val { color: #06c; }
.SummaryCard.magenta .val { color: #b06; }
.SummaryCard.teal .val { color: #1C5E55; }

/* 使用中で操作不可な編集/削除ボタン（WebForms が LinkButton.Enabled=false で付与する aspNetDisabled クラスに当てる） */
.editButton.aspNetDisabled,
.editButtonL.aspNetDisabled,
.deleteButton.aspNetDisabled,
.deleteButtonL.aspNetDisabled {
    background: #aaa;
    color: #eee;
    border-color: #888;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
    text-decoration: none;
}
.editButton.aspNetDisabled:hover,
.editButtonL.aspNetDisabled:hover,
.deleteButton.aspNetDisabled:hover,
.deleteButtonL.aspNetDisabled:hover {
    background: #aaa;
    color: #eee;
    box-shadow: none;
}

.registButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #c50;
    color           : #fff;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #c50;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.registButton:hover {
  box-shadow    : none;
  color         : #c50;
  background    : #fff;
}
.registButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c7";
}

.registButtonL {
    display         : inline-block;
    border-radius   : 30px;
    text-align      : center;
    background      : #c50;
    color           : #fff;
    font-size       : large;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #c50;
    font-weight     :bold;
    cursor          :pointer;
    padding         :6px 10px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.registButtonL:hover {
  box-shadow    : none;
  color         : #c50;
  background    : #fff;
}
.registButtonL::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c7";
}

.deleteButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #900;
    color           : #fff;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #900;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.deleteButton:hover {
  box-shadow    : none;
  color         : #900;
  background    : #fff;
}
.deleteButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
}
.visibleButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #477;
    color           : #fff;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #477;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.visibleButton:hover {
  box-shadow    : none;
  color         : #477;
  background    : #fff;
}
.visibleButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f06e";
}
.unvisibleButton {
    display         : inline-block;
    border-radius   : 10px;
    text-align      : center;
    background      : #477;
    color           : #fff;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #477;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :5px 7px;
    margin          :0px 0px 5px 0px;
    text-decoration : none;
}
.unvisibleButton:hover {
  box-shadow    : none;
  color         : #477;
  background    : #fff;
}
.unvisibleButton::before {
    font-family: "Font Awesome 5 Free";
    content: "\f070";
}

.deleteButtonL {
    display         : inline-block;
    border-radius   : 30px;
    text-align      : center;
    background      : #900;
    color           : #fff;
    font-size       : large;
    line-height     : .9em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #900;
    font-weight     :bold;
    cursor          :pointer;
    padding         :6px 10px;
    text-decoration : none;
}
.deleteButtonL:hover {
  box-shadow    : none;
  color         : #900;
  background    : #fff;
}
.deleteButtonL::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
}

.error-text {
    color: #FF0000;
    font: bold;
}
 
.Table-Area {
    overflow: auto;
}
/*テーブル全体の設定*/
table,tbody {
    padding:0px;
    border-collapse: collapse;
    line-height:20px;
}
table tr,th,td {
    padding:5px;
    border-collapse: collapse;
    line-height:20px;
}
/*thead{
  position: sticky;
  top: 0px;
}*/
th {
    border: 0px none;
}
.noborder 
{
    border: 0px none;
}
.th2
{
	background-color:#eee;
}

/*.DummyForm table, tr, th, td
{
    padding:0px;
    border:0px none;
}*/
.ItemForm tr
{
    border:1px solid #000;
}
.ItemForm th
{
    border:1px solid #000;
	color:#fff;
	background-color:#3A8175;
    padding:4px;
}
.ItemForm td
{
    border:1px solid #000;
    padding:4px;
}
.PaymentItemForm tr
{
    border:1px solid #000;
}
.PaymentItemForm th
{
    border:1px solid #000;
	color:#fff;
	background-color:#660066;
    padding:4px;
}
.PaymentItemForm td
{
    border:1px solid #000;
    padding:4px;
}

.InsertForm table, tr, th
{
    border:1px solid #000;
    white-space: nowrap;
    
}
.InsertForm th
{
	color:#fff;
	background-color:#582828;
}
.InsertForm td
{
    border:1px solid #000;
}

/* 契約書日付登録(売契発行/発送/返却 等)専用フォーム */
.ContractRegistForm table, .ContractRegistForm tr, .ContractRegistForm th
{
    border:1px solid #000;
    white-space: nowrap;
}
.ContractRegistForm th
{
    border:1px solid #000;
    color:#fff;
    background-color:#582828;
    padding:4px;
}
.ContractRegistForm td
{
    border:1px solid #000;
    padding:4px;
}

.EditForm table, tr, th
{
    border:1px solid #000;
    white-space: nowrap;
}
.container {
    display: flex;
    flex-direction: column;
    gap: 5px; /* 行間の余白を少し広げて視認性を向上 */
}

.row {
    display: flex;
    align-items: center; /* ラベルと入力を上下中央で揃える */
}

/* ラベル側のセル */
.cell.label {
    flex: 0 0 100px; /* 幅を100pxで固定し、伸縮させない */
    vertical-align: top;
    text-align: left;
    white-space: nowrap; /* ラベルの改行を防止 */
}
/* ラベル側のセル */
.cell.label40 {
    flex: 0 0 40px; /* 幅を100pxで固定し、伸縮させない */
    vertical-align: top;
    text-align: left;
    white-space: nowrap; /* ラベルの改行を防止 */
}

/* 入力欄側のセル */
.cell.input {
    flex: 1; /* 残りの幅をすべて使う */
    display: flex;
    align-items: center;
    min-width: 0;   
}

    /* ドロップダウン自体の幅指定（必要に応じて） */
    .cell.input select {
        min-width: 250px; /* 入力欄自体の長さを揃える */
    }

.progress-container {
    width: 100%;
}

.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #ddd;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar-inner {
    height: 100%;
    background-color: #4caf50;
    width: 0%; /* 動的に変更される想定 */
    transition: width 0.3s ease;
}
.NotInputAareControls{
    border:1px solid #000 !important;
    background: #ccc !important; /* 背景色を強制適用 */
    width:300px;
}
.RequiredControls
{
    background: #faa !important; /* 背景色を強制適用 */
    font-size: 16px !important;  /* フォントサイズを強制適用 */
}

.EditForm th
{
    border:1px solid #000;
	color:#fff;
	background-color:#1b3123;
    padding:4px;
}
.EditForm td
{
    border:1px solid #000;
    padding:4px;
}
.GridScroll
{
   overflow-y: auto;
   overflow-x: auto;   /* 横長テーブルを横スクロール（スマホ対応＋scroll-hint有効化） */
   max-height: 85vh;
   max-width:97vw;
}
.GridScrollMini
{
    overflow-y: auto;
    overflow-x: auto;   /* 横長テーブルを横スクロール（スマホ対応＋scroll-hint有効化） */
    max-height: 30vh;
    max-width:97vw;
}
.GridScrollMiddle
{
    overflow-y: auto;
    overflow-x: auto;
    min-height: 10vh;
    max-height: 80vh;
    max-width:97vw;
}
.GridScrollX
{
    overflow-y: auto;
    overflow-x: auto;
    max-width:97vw;
}
.GridScrollSearchTH {
}
.GridScrollSearchTH {
    outline: 0.1px solid #000; /* 罫線を outline で代用 */
    position: sticky;
    background-color:#990000;
    background-clip: padding-box;
    top: -1px;
    z-index:3;
}
.GridScroll{
z-index:3;
}
.GridScrollNomalTH {
    position: sticky;
    background-color:#1C5E55;
    color:#fff;
    background-clip: padding-box;
    top: -1px;
    z-index:3;
}
.GridScrollFreezingSearchTHCol
{
    outline: 0.1px solid #000; /* 罫線を outline で代用 */
    position: sticky;
    top: -1px;
    left:0px;
    z-index:4;
    background-color:#990000;
    background-clip: padding-box;
}
.GridScrollFreezingTHCol
{
    outline: 0.1px solid #000; /* 罫線を outline で代用 */
    position: sticky;
    top: -1px;
    left:0px;
    z-index:4;
    background-color:#1C5E55;
    color:#fff;
}
.NormalCol
{
}
.FreezingCol
{
    outline: 1px solid #000; /* 罫線を outline で代用 */
    left: 0;
    position:sticky;
    z-index:1;
    background-color:#E3EAEB;
    color:#000;
}
.FreezingColSecond
{
    outline: 1px solid #000;
    left: 90px;
    position: sticky;
    z-index: 1;
    background-color: #E3EAEB;
    color: #000;
}
.GridScrollFreezingTHColSecond
{
    outline: 0.1px solid #000;
    position: sticky;
    top: -1px;
    left: 90px;
    z-index: 4;
    background-color: #1C5E55;
    color: #fff;
}
.FreezingColInsert
{
    outline: 0.01em solid #000; /* 罫線を outline で代用 */
    position: sticky;
    left:-1px;
    z-index:2;
    background-color:#582828;
    background-clip: padding-box;
    color:white;
    font-weight:bold;
}
.GridScrollNest
{
  z-index:2;
   overflow-y: scroll;
   max-height: 50vh;
}
.GridScrollNest thead {
  z-index:2;
  position: sticky;
  background-color:#1C5E55;
  color:#fff;
  background-clip: padding-box;
  top: -1px;
}
.GridScrollEdit
{
   overflow-y: scroll;
   min-height: 0vh;
   max-height: 50vh;
}
.GridScrollEdit th {
  position: sticky;
  background-color:#1b3123;
  background-clip: padding-box;
  top: -1px;
}
.scroll-hint-icon {
    z-index:20;
  top: 15%;
}
legend
{
    position: relative;
    background: #ffd98a;
    padding: 2px 15px 2px 35px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    font-size:x-large;
    font-weight:bold;
}
legend::before {
    font-family: "Font Awesome 5 Free";
    content: "\f07c";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #ffa337;
    font-weight: 900;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -0.7em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendConfigClass
{
    position: relative;
    background: #ffd98a;
    padding: 2px 15px 2px 35px;
    font-size: 20px;
    color: #474747;
    border-radius: 5px 10px 10px 0;
    font-size:x-large;
    font-weight:bold;
}
.legendConfigClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0ad";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #ffa337;
    font-weight: 900;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -0.7em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendCustomerClass
{
    position: relative;
    background: #ffd98a;
    padding: 2px 15px 2px 35px;
    font-size: 20px;
    color: #474747;
    border-radius: 5px 10px 10px 0;
    font-size:x-large;
    font-weight:bold;
}
.legendCustomerClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f1ad";
    display: inline-block;
    line-height: 40px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #ffa337;
    font-weight: 900;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    left: -0.7em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendClass
{
    position: relative;
    background: #ffcdcd;
    padding: 2px 15px 2px 20px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    font-size:medium;
    font-weight:bold;
}
.legendClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f15c";
    display: inline-block;
    line-height: 30px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #33aaff;
    font-weight: 900;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    left: -1.0em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendInsertClass
{
    position: relative;
    background: #ff8f8f;
    padding: 2px 15px 2px 25px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    font-size:medium;
    font-weight:bold;
}
.legendInsertClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
    display: inline-block;
    line-height: 30px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #582828;
    font-weight: 900;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    left: -1.0em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendEditClass
{
    position: relative;
    background: #8cc994;
    padding: 2px 15px 2px 25px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    font-size:medium;
    font-weight:bold;
}
.legendEditClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f044";
    display: inline-block;
    line-height: 30px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #004509;
    font-weight: 900;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    left: -1.0em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.legendListClass
{
    position: relative;
    background: #cadff4;
    padding: 2px 15px 2px 25px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
    font-size:medium;
    font-weight:bold;
}
.legendListClass::before {
    font-family: "Font Awesome 5 Free";
    content: "\f022";
    display: inline-block;
    line-height: 30px;
    position: absolute;
    padding: 0em;
    color: white;
    background: #178fe5;
    font-weight: 900;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    left: -1.0em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.EditCss
{
    position: relative;
    background: #eeffdf;
    padding: 2px 15px 2px 20px;
    font-size: 16px;
    color: #474747;
    border-radius: 0 10px 10px 0;
}
.EditCss::before {
    content: "\f044";
    display: inline-block;
    line-height: 25px;
    position: absolute;
    padding: 0.2em;
    color: white;
    background: #1b3123;
    font-weight: 900;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    left: -1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.SearchCss
{
    position: relative;
    background: #ebeafa;
    padding: 2px 15px 2px 20px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
}
.SearchCss::before {
    content: "\f002";
    display: inline-block;
    line-height: 25px;
    position: absolute;
    padding: 0.2em;
    color: white;
    background: #724cc7;
    font-weight: 900;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    left: -1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.SlipCss
{
    position: relative;
    background: #cadff4;
    padding: 2px 15px 2px 20px;
    font-size: 20px;
    color: #474747;
    border-radius: 0 10px 10px 0;
}
.SlipCss::before {
    font-family: "Font Awesome 5 Free";
    content: "\f15c";
    display: inline-block;
    line-height: 25px;
    position: absolute;
    padding: 0.2em;
    color: white;
    background: #178fe5;
    font-weight: 900;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    left: -1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.DuplicateCss
{
    position: relative;
    background: #ffe4e1;
    padding: 2px 15px 2px 20px;
    font-size: 16px;
    color: #474747;
    border-radius: 0 10px 10px 0;
}
.DuplicateCss::before {
    content: "\f24d";
    display: inline-block;
    line-height: 25px;
    position: absolute;
    padding: 0.2em;
    color: white;
    background: #724cc0;
    font-weight: 900;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    left: -1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.ViewCss
{
    position: relative;
    background: #477;
    padding: 2px 15px 2px 20px;
    font-size: 16px;
    color: #fff;
    border-radius: 0 10px 10px 0;
}
.ViewCss::before {
    content: "\f06e";
    display: inline-block;
    line-height: 25px;
    position: absolute;
    padding: 0.2em;
    color: white;
    background: #477;
    font-weight: 900;
    width: 25px;
    text-align: center;
    height: 25px;
    line-height: 25px;
    left: -1.25em;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: solid 3px white; 
    border-radius: 50%;
}
.Freezing
  {
    position: relative;
    top:expression(this.offsetParent.scrollTop);
    z-index: 10;
  }
.Highlight
{
    background:#FFFACD;
}
/* Label Message */
.Message
{
    display: block;
    box-shadow: 5px 5px 7px #000;
	background-color : #1E50A2;
	color : White;
	padding : 10px 50px 10px 50px;
	font-weight : bold;
	border-radius : 15px;
}
/* Label ErrorMessage */
.ErrorMessage
{
    display: block;
    box-shadow: 5px 5px 7px #000;
	background-color : #C9171E;
	color : White;
	padding : 10px 50px 10px 50px;
	font-weight : bold;
	border-radius : 15px;
}
/* Label InformationMessage */
.InformationMessage
{
    display: block;
    box-shadow: 5px 5px 7px #000;
	background-color : #007b43;
	color : White;
	padding : 10px 50px 10px 50px;
	font-weight : bold;
	border-radius : 15px;
    z-index:999;
}
.GridViewCss {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}
.GridViewCss
th
{
    border:0.1px solid #000;
	white-space : nowrap;
	color : #fff;
    padding : 2px;
}
.GridViewCss
td
{
    border:0.1px solid #000;
	padding:4px;
	margin:0px;
}
/* Label UpdateProgressMessage */
.UpdateProgressMessage
{
    top:50%;
    left:50%;
	color : #000;
	border-radius : 15px;
	font-weight : bold;
    z-index:999;
    text-align:center;
    background-color: #fcd98f;
    box-shadow: 0 5px 6px rgba(0, 0, 0, .5);
    padding: 20px;
}
/* ValidatorCalloutExtender */
.Validator
{
	background-color : #FFFACD;
}
/*AutoComplete flyout */
.autocomplete_List
{
    margin : 0px;
    list-style-type : none;
}

/*AutoComplete flyout */

.autocomplete_completionListElement 
{  
    margin : 0px;
	background-color : inherit;
	color : windowtext;
	border : buttonshadow;
	border-width : 1px;
	border-style : solid;
	overflow : auto;
    text-align : left; 
    list-style : none;
}

/* AutoComplete highlighted item */

.autocomplete_highlightedListItem
{
	background-color: #ffff99;
	color: black;
	padding: 1px;
}

/* AutoComplete item */

.autocomplete_listItem 
{
	background-color : window;
	color : windowtext;
	padding : 1px;
}
/* Accordion */
.accordionSalesReportHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #003300;
	font-family: Arial, Sans-Serif;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

#master_content .accordionSalesReportHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionSalesReportHeader a:hover
{
	background: none;
	text-decoration: underline;
}
.accordionSalesReportHeader
{
    border: 1px solid Black;
    color: white;
    background-color: #003300;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.accordionSalesReportContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 2px;
    padding-top: 2px;
}
.accordionHeaderSelected
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #5078B3;
	font-family: Arial, Sans-Serif;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.accordionDeliveryHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #996600;
	font-family: Arial, Sans-Serif;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

#master_content .accordionDeliveryHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionDeliveryHeader a:hover
{
	background: none;
	text-decoration: underline;
}
.accordionDeliveryHeader
{
    border: 1px solid Black;
    color: white;
    background-color: #996600;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.accordionDeliveryContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 2px;
    padding-top: 2px;
}
.accordionTroubleHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #660066;
	font-family: Arial, Sans-Serif;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

#master_content .accordionTroubleHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionTroubleHeader a:hover
{
	background: none;
	text-decoration: underline;
}
.accordionTroubleHeader
{
    border: 1px solid Black;
    color: white;
    background-color: #660066;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.accordionTroubleContent
{
    background-color: #D3DEEF;
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 2px;
    padding-top: 2px;
}

.accordionRentalEarningsHeader
{
    border: 1px solid #2F4F4F;
    color: white;
    background-color: #B22222;
	font-family: Arial, Sans-Serif;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

#master_content .accordionRentalEarningsHeader a
{
	color: #FFFFFF;
	background: none;
	text-decoration: none;
}

#master_content .accordionRentalEarningsHeader a:hover
{
	background: none;
	text-decoration: underline;
}
.accordionRentalEarningsHeader
{
    border: 1px solid Black;
    color: white;
    background-color: #B22222;
	font-weight: bold;
    padding: 5px;
    margin-top: 3px;
    margin-bottom: 3px;
    cursor: pointer;
}

.accordionRentalEarningsContent
{
    background-color: #D3DEEF;
    border: 1px dashed #B22222;
    border-top: none;
    padding: 2px;
    padding-top: 2px;
}

a.Title{/*リンクされた文字*/
    color:White;
    text-decoration:none;
}
a.Title:link {/*未訪問のリンク*/
    color:White;
    text-decoration:none;
}
a.Title:visited {/*訪問後のリンク*/
    color:White;
    text-decoration:none;
}
a.Title:hover {/*マウスをのせたとき*/
    color:White;
    text-decoration:underline;
}
a.Title:active {/*クリック中*/
    text-decoration:none;
}
.TabPanelClass
{
	background-color:#FFF;
    color:#000;
}
.tab-wrap {
	background: White;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
	z-index: -1;
}

.tab-label {
    color: White;
    background: #666666;
	cursor: pointer;
	font-weight: bold;
	order: -1;
    padding: 6px 12px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
    border-radius: 10px 10px 0 0;
}

.tab-label:hover {
    color:white;
	background: #178fe5;
}

.tab-switch:checked + .tab-label {
    background: #990000;
    color:white;
}
.tab-label:not(:last-of-type) {
    margin-right: 5px;
}
.tab-label::after {
	background: #777;
	bottom: 0;
	content: '';
	display: block;
	height: 5px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 0;
}

.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}

.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}

.tab-content {
	box-shadow:0 0 10px rgba(0,0,0,.4);
	height:0;
	opacity:0;
	padding: 0 0px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}

.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap::after {
	content: '';
	height: 3px;
	order: -1;
	width: 100%;
}

.tab-switch {
	display: none;
}
.menu {
	top: 74px;
	display: flex;
	position: absolute;
	margin: 0;
	padding: 0px;
	z-index: 50;
	width: auto;
	justify-content: space-between;  
}
.menu ul{
  margin:0;
  padding:0;
}
.menu ul li {
  list-style: none;
  margin:0;
  padding:0;
  font-size:12px;
  float: left;
  position: relative;
  padding-left:10px;
  padding-right:10px;
  width: auto;
  height: 30px;
  line-height: 30px;
  background:#1b3123;
  color: #FFF;
  text-align:center;
  font-weight:bold;    
}
.menu ul li a {
  color: #ffed6c;
  display: block;
  text-decoration: none;
}
.menu ul li:hover, .menu ul li a:hover {
  background:#666;
  color:#fff;
}
.menu ul li ul {
  position: absolute;
  top: 30px;
  width: 130px;
  z-index: 100;
  text-align:left;
}
.menu ul li ul li {
  visibility: hidden;
  overflow: hidden;
  width: 130px;
  height: 0;
  background:#1b3123;
  text-align:left;
}
.menu ul li ul li:hover, .menu ul li ul li a:hover {
  background:#666;/*ホバー時のサブメニューの背景色*/
}
.menu ul li:hover ul li, .menu ul li a:hover ul li{
  visibility: visible;
  overflow: visible;
  height:30px;/*サブメニューの高さ*/
  z-index: 10;
  width: 200px;
  text-align:left;
}
.menu * {
  transition: 0.3s;
}
#maincontents {
    z-index: 0;
    opacity: 0.9;
    top: 105px;
    left: 5px;
}
#serachformsmaincontents {
    z-index: 0;
    opacity: 0.9;
    top: 100px;
    left: 10px;
}

#sitemappath {
	z-index: 100;
	opacity: 0.9;
	top: 40px;
	left: 10px;
}

#nav-drawer {
	z-index: 1010;
	opacity: 0.9;
	position: fixed;
	top: 10px;
	right: 10px;
}

.nav-unshown {
  display:none;
}

#nav-open {
  display: inline-block;
  padding-top:4px;
  padding-right:10%;
  width: 50px;
  height: 24px;
  vertical-align: middle;
}

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 10px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}


#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  transition: .3s ease-in-out;
}

#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	right: 0px;
	z-index: 9999;
	width: 60%;
	max-width: 270px;
	height: 100%;
	background: #000;
	transition: .3s ease-in-out;
	-webkit-transform: translateX(105%);
	transform: translateX(105%);
	opacity: .9;
	color: white;
	font-weight: bold;
}
#nav-content 
a:link { color: yellow;}
#nav-content 
a:visited { color: yellow;}
#nav-content 
a:hover { color: red; }
#nav-content 
a:active { color: red; }
#nav-content 
ul
{
  list-style:none;
}

#nav-input:checked ~ #nav-close {
  display: block;
  opacity: .7;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #ef3f40;
  opacity: 0.6;
  border-radius: 50%;
  z-index:999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f0d8';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
h1 {
    position: relative;
    display: inline-block;
    margin: 1rem 0 0 -10px;
    border-bottom: solid 5px #cccccc;
    padding: 0 1rem;
    color: #fff;
    border-radius: 0px 20px 20px 0px;
    background: #0075a9;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
    font-size: 26px;
    margin-bottom: 5px;
}

h1:before {
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 0;
  height: 0;
  content: '';
  border-top: 10px solid #005276;
  border-left: 10px solid transparent;
}
h2 {
  display:block;
  background-color:#850000;
  color:#ffffff;
  border-radius: 0px 20px 20px 0px;
  padding: 0.2em 0.5em;
  border-bottom: solid 5px #cccccc;
  font-size:22px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, .2);
  margin-bottom:5px;
  margin-top:5px;
}
h3 {
  display:block;
  background-color:#25325f;
  color:#ffffff;
  border-radius: 0px 20px 20px 0px;
  padding: 0.2em 0.5em;
  border-bottom: solid 5px #cccccc;
  font-size:22px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
  margin-bottom:5px;
  margin-top:10px;
}
h4 {
  display:block;
  bottom: -10px;
  background-color:#ffd5ac;
  border-radius: 5px 20px 20px 5px;
  padding: 0.2em 0.5em;
  border-left: solid 10px #a93200;
  font-size:14px;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
  margin-top:5px;
  margin-bottom:5px;
}
h5 {
  font-size:20px;
  box-shadow: 0px 3px 0px rgba(0, 0, 0, .1);
  margin-top:10px;
}
h6 {
  position: relative;
  font-size: 32px;
  padding: 5px 5px 0px 70px;
  border-bottom: 3px solid #000;
  border-top:3px solid #000;
  margin: 10px 0 0 0;
  background-color:#eee;
}
h6 span {
  font-size: 50px;
  line-height: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  margin:0;
}
h7 {
    margin:  0;
    position:  relative;
    font-weight:  bold;
    font-size:18px;
    display:  inline-block;
    background-color: #f1f5ff;
    margin-left: 10px;
    padding: 0 5px;
}
.line-left {
    display:inline;
    border-left: 1px solid #000;
	padding:10px;
}
.line-wrap {
    position: relative;
    margin-bottom:0px; 
}
.line-wrap:before {
    content:  '';
    background-color: #000;
	display:  block;
    position:  absolute;
    left:  0;
    width:  100%;
    height:  1px;
    top: 0;
    bottom:  0;
    margin:  auto;
}
.DataLockMsg {
    display: block;
    text-align:center;
    font-size:14pt;
    box-shadow: 0px 10px 10px #000;
	background-color : #1E50A2;
	color : White;
	padding : 8px 20px 8px 20px;
	font-weight : bold;
	border-radius :20px 0px 0px 20px;
    z-index:999;
}
.DataLockMsg::before {
    font-family: "Font Awesome 5 Free";
    content: "\f023";
}
.InfomationMsg {
    display: block;
    text-align:center;
    font-size:14pt;
    box-shadow: 0px 10px 10px #000;
	background-color : #50A21E;
	color : White;
	padding : 8px 20px 8px 20px;
	font-weight : bold;
	border-radius :20px 0px 0px 20px;
    z-index:100;
}
.InfomationMsg::before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
}
.FieldBox
{
  margin:10px 0 10px 0;
  display: inline-block;
  border-radius: 0px 10px 10px 10px;
  background: #f1f5ff;
  width: 90%;
  border:double 5px #666;
}
/* 凡例フィルターボタン */
.legend-filter-btn {
    color: inherit;
    text-decoration: none;
    display: block;
    cursor: pointer;
    white-space: nowrap;
}
.legend-filter-btn:hover {
    text-decoration: underline;
    font-weight: bold;
}

/* 消費税区分バッジ（税込 / 税別） */
.tax-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.8em;
  font-weight: bold;
  vertical-align: middle;
  margin-right: 3px;
  white-space: nowrap;
}
.tax-badge.tax-inclusive {
  background-color: #e67e22;
  color: #fff;
}
.tax-badge.tax-exclusive {
  background-color: #27ae60;
  color: #fff;
}

.CautionFieldBox
{
  margin:10px 0 10px 0;
  display: inline-block;
  border-radius: 0px 10px 10px 10px;
  background: pink;
  width: auto;
  border:double 5px #666;
}
.qrcode-text {
  padding-right: 1.7em;
  margin-right: 0;
  vertical-align: middle;
}
.qrcode-text + .qrcode-text-btn {
  width: 1.7em;
  margin-left: -2.5em;
  vertical-align: middle;
}
.qrcode-text-btn {
  padding: 0.5em 0.6em;
  display:inline-block;
  background: url(qr_icon.svg) 50% 50% no-repeat;
  cursor: pointer;
}

.qrcode-text-btn > input[type=file] {
  position: absolute;
  overflow: hidden;
  width: 2px;
  height: 2px;
  opacity: 0;
}
.table_line 
{
	display: table;
}
	
.table_block {
	display: table-cell;
	border: solid 0px;
    padding:2px;
    white-space:nowrap;
    vertical-align:top;
}
	
.table_block_in {
	display: table-cell;
	border: solid 0px;
    padding:2px 5px 2px 5px;
    white-space:nowrap;
    vertical-align:top;
    width:140px;
}
.RequiredField
{
    background-color:#ffb2b0;
}
.pdfBlock
{
    border-radius: 1em;
    background-color:#c3c3c3;
    vertical-align: middle;
    display: inline-block;
    padding:10px;
}
.SearchBlock
{
    vertical-align: middle;
    display: inline-block;
    padding:3px 5px 3px 0px;
}
.SearchControls
{
  background: #ccf;
  font-size:16px;
  padding:6px;
}
.RegistControls
{
  font-size:16px;
  padding:6px;
}
.textbox-quantity-container{
    position: relative;
    display: inline-block;
    z-index:0;
}
.textbox-quantity-container input{
    text-align: right;
    width: 40px;
}
.textbox-price-container {
    position: relative;
    display: inline-block;
    z-index:0;
}

.textbox-price-container::after {
    content: "円";
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.textbox-price-container input {
    text-align: right;
    width: 90px;
    padding-right: 20px;
}

.textbox-price-container input:focus {
    width: 90px;
    text-align: right;
    padding-right: 20px;
}
.spinner {
  width: 50px; /* サイズ - 可変 */
  height: 40px; /* サイズ - 可変 */
  margin: 0 auto; /* 上下マージン - 可変 */
  text-align: center;
  font-size: 10px;
}

.spinner > div {
  background-color: DarkGray; /* ベースの色 - 可変 */
  height: 100%;
  width: 6px;
  display: inline-block;
  
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
  animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

.Button_FontAwsome {
    display         : inline-block;
    border-radius   : 1em;
    text-align      : center;
    background      : #EEE;
    color           : #000;
    line-height     : 1.5em;
    transition      : .3s;
    box-shadow      : 3px 3px 3px #777;
    border          : 1px solid #009;
    font-weight     :bold;
    font-size       :15px;
    cursor          :pointer;
    padding         :0.1em 0.7em;
    text-decoration : none;
	font-family: "Font Awesome 5 Free"; 
    font-size:large;
}
.Button_FontAwsome:hover {
  box-shadow    : none;
  color         : #009;
  background    : #fff;
}
.autocompleteCompletionList {
    text-overflow: ellipsis;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #000;
    z-index: 1000;
}
.grid-cell-wrap {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.grid-cell-wrap {
    max-width: 300px; /* 通常セルは300pxで省略。固定列は inline style の max-width が !important で上書き */
}
div.grid-cell-wrap {
    max-width: 100%; /* セル内の div は親セル幅に追随 */
}
/* 省略モード時は内側ラベルも nowrap + ellipsis にしてセル幅で省略記号「…」を表示 */
.grid-cell-wrap .fixed-width-label,
.grid-cell-wrap .fixed-width-remarks {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 省略モードはセル幅で「…」省略するため最低幅を解除 */
    max-width: 100%;
}
.grid-cell-wrap-fix {
  outline: 0.1px solid #000; /* 罫線を outline で代用 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: sticky;
    left:-1px;
    z-index:2;
  background-color: rgba(220, 220, 255, 1);
}
td.grid-cell-wrap-fix {
    max-width: 300px; /* 通常セルは300pxで省略。inline style の max-width が !important で上書き可 */
}
div.grid-cell-wrap-fix {
    max-width: 100%;
}
.grid-cell-wrap-fix .fixed-width-label,
.grid-cell-wrap-fix .fixed-width-remarks {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0; /* 固定列・省略モードは最低幅を解除（inline style の max-width を優先） */
    max-width: 100%;
}
.paging-button {
    margin: 0 5px;
}
.paging-button {
    margin: 0 5px;
    background-color:#f4f4f4;
}
.paging-button {
    margin: 0 5px;  /* ボタン間に余白を追加 */
    padding: 5px 10px;  /* ボタンの内側にパディング */
    font-size: 14px;     /* フォントサイズを調整 */
    background-color: #007bff; /* 背景色 */
    border: 1px solid #007bff; /* ボーダーの色 */
    border-radius: 5px; /* ボタンの角を丸める */
    text-decoration: none; /* 下線を除去 */
}

/* GridView ページャ行(PagerStyle CssClass="GridViewPager")の装飾 */
/* 内側の table 配下の全要素の罫線を消す(外側の td は .GridViewCss td の罫線を維持) */
tr.GridViewPager > td table,
tr.GridViewPager > td table * {
    border: none !important;
}
tr.GridViewPager > td table td {
    padding: 4px 6px;
}
tr.GridViewPager a,
tr.GridViewPager span {
    color: #fff;
    text-decoration: none;
    padding: 0 6px;
    margin: 0 2px;
}
tr.GridViewPager a:hover {
    text-decoration: underline;
}
/* 現在ページ番号や (X/Yページ) ラベル(<span>でレンダリング)は太字のみで強調 */
tr.GridViewPager > td > table td > span,
tr.GridViewPager > td > span {
    font-weight: bold;
}
/* ページャ行の背景(緑帯)と枠線を明示し、全グリッドで枠付き表示に統一。
   テーブルが border-collapse:collapse のため、BorderStyle="None" のページャセルでは
   border も box-shadow も描画されない（ブラウザ既知の挙動）。
   そこで疑似要素(::after)を絶対配置でセルに重ね、collapse の影響を受けない枠線を描画する。 */
tr.GridViewPager > td {
    background-color: #1C5E55 !important;
    color: #fff;
    text-align: left !important;
    outline: 0.1px solid #000;
}

.paging-button:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    border-color: #0056b3;     /* ボーダーの色 */
}

.page-info {
    margin-left: 15px; /* ページインフォの余白 */
    font-size: 16px;   /* フォントサイズを調整 */
    padding-left: 10px; /* 左側の余白 */
    padding-right: 10px; /* 右側の余白 */
}


.progress-bar-container {
    width: 100%;
    background-color: #e0e0e0; /* 背景の灰色 */
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 20px;
    overflow: hidden;
    position: relative;
}

.progress-bar-inner {
    height: 100%;
    transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
    /* デフォルト色を削除 */
}
.gridview {
    border-collapse: collapse;
    color: #333;
    border-radius: 8px;
    overflow: hidden;
}

.gridview th {
    background-color: #0066cc; /* 青 */
    color: #fff;
    text-align: left;
    padding: 12px;
    font-weight: bold;
    text-align: center;
}

.gridview td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.gridview tr:nth-child(even) {
    background-color: #f1f8ff; /* 淡い青 */
}

.gridview tr:nth-child(odd) {
    background-color: #e6f2ff; /* 薄い青 */
}

.gridview tr:hover {
    background-color: #d1e0f5; /* 青のホバー効果 */
    transition: background-color 0.3s;
}
/* モーダルの背景（画面全体を暗くする） */
.modalBackground {
    background-color: Black;
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: pointer;
    z-index: 100000 !important;
}

/* モーダル本体のパネル */
.ModalPanel {
    background-color: #FFFFFF;
    border: 1px solid #666666;
    border-radius: 8px; /* 角を少し丸くする */
    padding: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    overflow: hidden; /* 角丸からはみ出さないように */
    z-index: 100001;
}

/* 閉じるボタン部分のヘッダー */
.ModalHeader {
    background-color: #f5f5f5;
    padding: 10px;
    text-align: right;
    border-bottom: 1px solid #dddddd;
}

/* 閉じるボタンの装飾 */
.CloseButton {
    background-color: #e0e0e0;
    border: none;
    padding: 5px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
}

.CloseButton:hover {
    background-color: #cccccc;
}

/* 読み込みエリア全体の配置（強制中央） */
#modal_loading_area {
    display: none; /* JSで flex に切り替え */
    position: absolute;
    top: 50%; /* 上から50% */
    left: 50%; /* 左から50% */
    transform: translate(-50%, -50%); /* 自身のサイズ分戻して中心を合わせる */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
    width: 100%;
    text-align: center;
}

/* スピナーのデザイン */
.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px auto; /* 確実に中央へ */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* 新設：全体を制御する外枠 */
.custom-grid-wrapper {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%; /* これで親の幅に合わせる */
}

/* ヘッダー：左寄せに変更 */
.custom-grid-header {
    display: flex;
    justify-content: flex-start; /* 左端から順番に並べる */
    align-items: flex-end; /* 下端を揃える */
    width: 100%;
}

/* タブ部分：右側に少し余白を作る */
.custom-grid-label {
    background-color: #1C5E55;
    color: #ffffff;
    padding: 8px 25px;
    font-weight: bold;
    font-size: 18px;
    border-radius: 8px 8px 0 0;
    margin-right: 15px; /* ★ここでボタンとの間に適度な隙間（15px）を作る */
}

/* ボタン部分：位置固定を解除 */
.custom-grid-btn {
    margin-bottom: 12px;
    display: inline-block;
    vertical-align: bottom;
}

/* 枠本体との重なり調整 */
.custom-grid-container {
    border: 3px solid #1C5E55;
    border-radius: 0 8px 8px 8px;
    padding: 8px 10px;
    background-color: #ffffff;
    margin-top: -3px;
    position: relative;
    z-index: 1;
}

/* 注釈エリア */
.custom-grid-notes {
    line-height: 1.6;
}
/* 外枠のコンテナ */
.custom-grid-insert-container {
    position: relative;
    margin-top: 50px; /* タブが上に飛び出すための十分な余白 */
    margin-bottom: 20px;
    border: 3px solid #582828;
    border-top: none; /* ★重要：枠の上線だけを消して、タブと重ならないようにする */
    border-radius: 0 8px 8px 8px;
    padding: 10px;
    background-color: #ffffff;
}

/* 左上の見出し（タブ）部分 */
.custom-grid-insert-label {
    position: absolute; /* ★絶対配置に戻す */
    top: -42px; /* ★枠の真上に配置。高さに応じて数値を微調整 */
    left: -3px; /* 枠の左線とぴったり合わせる */

    background-color: #582828;
    color: #ffffff;
    padding: 8px 25px;
    font-weight: bold;
    font-size: 18px; /* 大きめサイズ */

    border-radius: 8px 8px 0 0;
    white-space: nowrap; /* 改行を防ぐ */
    text-align: center;
    z-index: 5;
}

/* タブの右側の隙間を埋める線（オプション：タブの右から枠線を開始させる） */
.custom-grid-insert-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #582828;
    z-index: 1;
}
/* 通常時はメニュー（z-index: 50）より下にしておく */
#maincontents.MainContentsArea {
    position: relative;
    z-index: 1;
}

/* モーダル表示用クラス：これがある時だけメニューより手前に出す */
.modal-open-active {
    z-index: 101 !important;
}

.fixed-width-label {
    display: inline-block;
    min-width: 8em; /* 狭いウィンドウでも取引先名が1文字ずつ折り返されないよう最低幅を確保（コンテナが横スクロール）。省略モードでは下で min-width:0 に戻す */
    max-width: min(100%, 350px); /* 親セル幅を超えないが、広い親では最大350pxで折り返し */
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal; /* 改行を許可 */
    line-height: 1.2;
}

.fixed-width-remarks {
    display: inline-block;
    max-width: min(100%, 400px); /* 親セル幅を超えないが、広い親では最大400pxで折り返し */
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: normal; /* 改行を許可 */
    line-height: 1.2;
}

/* 一覧セル内で取引先名の下に2段表示する運営会社（親会社）を、控えめな色・小さめ文字＋「運営:」見出しで区別する。
   値が空のときは ::before を出さないので空ラベルは見出しなし。 */
.parent-company-label {
    color: #777;
    font-size: 0.85em;
}
.parent-company-label:not(:empty)::before {
    content: "運営: ";
    color: #aa6a3c;
    font-weight: bold;
}

/* 取引先セルの3段目に表示する担当者。運営会社と同じ控えめスタイル＋「担当者:」見出しで統一。
   値が空のときは ::before を出さない。 */
.responsible-party-label {
    color: #777;
    font-size: 0.85em;
}
.responsible-party-label:not(:empty)::before {
    content: "担当者: ";
    color: #3c7a8a;
    font-weight: bold;
}

/* 詳細画面の .cell.input は display:flex のため <br/> が改行しない。
   取引先名/運営/担当者を縦に積むラッパー（通常フローのブロック）で囲んで改行を有効化する。 */
.customer-stack {
    display: block;
    min-width: 0;
    line-height: 1.3;
}

/* 機種セル（メーカー名／機種名／枠・パネル名）を1セル内で識別しやすくする見出し。
   機種名を主役（太字）、メーカー・枠パネルは控えめ＋見出し接頭辞。値が空なら ::before を出さない。 */
.machine-name-label { font-weight: bold; }
.maker-label { color: #777; font-size: 0.85em; }
.maker-label:not(:empty)::before {
    content: "メーカー: ";
    color: #aa6a3c;
    font-weight: bold;
}
.frame-label { color: #777; font-size: 0.85em; }
.frame-label:not(:empty)::before {
    content: "枠・パネル: ";
    color: #4f8a5a;
    font-weight: bold;
}

/* 個体番号セル（遊技盤番号／枠番号／主基板番号）の識別見出し */
.serial-board-label, .serial-frame-label, .serial-main-label { font-size: 0.9em; }
.serial-board-label:not(:empty)::before { content: "遊技盤: "; color: #3c6aaa; font-weight: bold; }
.serial-frame-label:not(:empty)::before { content: "枠番号: "; color: #4f8a5a; font-weight: bold; }
.serial-main-label:not(:empty)::before  { content: "主基板: "; color: #aa6a3c; font-weight: bold; }

/* 住所セル（〒郵便番号＋住所） */
.address-label:not(:empty)::before { content: "住所: "; color: #777; font-weight: bold; }

/* 連絡先セル（TEL／FAX） */
.tel-label, .fax-label { font-size: 0.9em; }
.tel-label:not(:empty)::before { content: "TEL: "; color: #3c7a8a; font-weight: bold; }
.fax-label:not(:empty)::before { content: "FAX: "; color: #aa6a3c; font-weight: bold; }

/* 代表者名／担当者名セル */
.representative-label, .responsible-name-label { font-size: 0.9em; }
.representative-label:not(:empty)::before { content: "代表: "; color: #3c7a8a; font-weight: bold; }
.responsible-name-label:not(:empty)::before { content: "担当: "; color: #aa6a3c; font-weight: bold; }

.label-like-textbox { /* 見た目をラベルに寄せる */
    border: none;
    background-color: transparent;
    padding: 2px 5px;
    outline: none;
    cursor: default;
    /* 幅の制御 */
    min-width: 150px;
    max-width: 350px;
    width: 100%; /* 親要素の幅に合わせて伸縮 */
    /* 長すぎる文字の処理（三点リーダー） */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    /* マウスを置いたときに全体を表示するためのツールチップ代わり */
    .label-like-textbox:hover {
        overflow: visible;
        position: relative;
        z-index: 100;
        background-color: #f9f9f9; /* 少し背景色をつけて浮き上がらせる */
        border: 1px solid #ccc;
    }
.anchor-target {
    display: block;
    position: relative;
    top: -40px; /* ヘッダーの高さ分、上へずらす */
    visibility: hidden;
}

/* 支店・倉庫一覧 ＋ 売上目標：最大 7:3 フレックスレイアウト
   - branch-sales-layout-grid  : 左側（支店リスト）最大 70%・内容が広くなっても横スクロールで吸収
   - branch-sales-layout-target: 右側（売上目標）常に 30% を確保 */
.branch-sales-layout {
    display: flex;
    flex-direction: column;   /* 支店・倉庫一覧を全幅表示するため横並び(70/30)→縦積みに変更 */
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
.branch-sales-layout-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    box-sizing: border-box;
}
.branch-sales-layout-target {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: normal;
    margin-top: 12px;   /* 一覧の下に表示する売上目標パネルとの余白 */
}

/* ===== スマホ対応（ブレークポイント 768px） ================================
   上部メニュー(.menu)とハンバーガー(#nav-drawer)を画面幅で出し分ける。
   - PC幅(>768px)：上部メニューを表示し、ハンバーガーは隠す
   - スマホ(≤768px)：上部メニューを隠し、ハンバーガーのみ表示
   あわせてログイン情報ヘッダーの圧縮とボタンのタップ領域拡大を行う。 */

/* PC（既定）：ハンバーガーは非表示（上部メニューを使用） */
#nav-drawer { display: none; }

@media screen and (max-width: 768px) {
    /* 上部メニューを隠し、ハンバーガーを表示 */
    .menu { display: none !important; }
    /* ハンバーガーは白いバーのため、暗い背景の箱を付けて背景と同化せず常に見えるようにする */
    #nav-drawer {
        display: block;
        background: #1b3123;
        border-radius: 6px;
        padding: 5px 7px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .4);
        opacity: 1;
    }

    /* ハンバーガーアイコン（箱をコンパクトに） */
    #nav-open { width: 34px; height: 26px; padding-top: 4px; padding-right: 0; }

    /* スマホでは固定/絶対配置のヘッダーとPC用の固定オフセット(top:105px等)が噛み合わず
       中途半端な位置になるため、ヘッダー・本文を通常フロー(static)で素直に縦積みする。
       （ハンバーガーだけは画面右上に固定のまま） */
    .site-header {
        position: static;
        font-size: 26px;   /* タイトルヘッダーも兼ねるため h1 と同じサイズに揃える */
        padding-right: 64px;
        box-sizing: border-box;
        line-height: 1.3;
    }

    /* ログイン情報ヘッダー：パンくず直下に続けて表示（圧縮＋折返し許可）。
       右上固定のハンバーガーにログアウトリンクが隠れないよう右側に余白を確保。 */
    .site-header-sub {
        position: static;
        top: auto;
        font-size: 11px;
        font-weight: normal;
        line-height: 1.3;
        flex-wrap: wrap;
        padding-right: 64px;   /* 小さくしたハンバーガー箱(約58px)分を確保しログアウトリンクを左へ逃がす */
        box-sizing: border-box;
    }

    /* 本文（h1「取引先」など）はヘッダー直下から開始（PC用の top:105px 等を解除） */
    #maincontents,
    #maincontents.MainContentsArea {
        position: static;
        top: auto;
        left: auto;
    }

    /* タップ領域の確保（主要ボタンを最低44px相当に） */
    .Button, .searchButton, .resetButton, .csvButton,
    .editButton, .editButtonL, .deleteButton, .deleteButtonL,
    .detailsButton, .registButtonL, .visibleButton,
    input[type="submit"], input[type="button"] {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-sizing: border-box;
    }

    /* iOSのフォーカス時自動ズーム防止：入力欄のフォントを16px以上にする
       （16px未満だと iOS Safari が勝手に拡大表示してしまうため） */
    input[type="text"], input[type="number"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="email"], input[type="date"],
    textarea, select, .SearchControls, .RegistControls {
        font-size: 16px;
    }
}

/* アイコン無しの ViewCss 見出し（左のアイコンを表示しない）。
   2クラス指定で .ViewCss::before より詳細度が高いため確実に上書きされる。 */
.ViewCss.NoIcon::before { content: none; display: none; }
.ViewCss.NoIcon { padding-left: 12px; }