/*
body {
    background-color: #ccccff;
    font-size: 12px;
    font-family: Verdana,Arial,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    text-align: center;
}
@-moz-document url-prefix(){
    input,
    select,
    textarea{
        font-size: 12px;
        font-family:Meiryo UI,'メイリオ','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
    }
}
*/
label{
    color:#cc3366;
}
/*---  Menu  ---*/
.main-menu{
/*
    width: 800px;
    margin-top: 50px;;
    margin-left: 200px;;
*/
}
.menu-header{
    color: #3259cc;
    margin: 0 auto 20px;
    display: flex;
    margin: 0 auto 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom:1px dashed #ccc;
    padding: 10px 0;
}
.menu-header .title{
    flex:1;
    text-align: left;
    font-weight: bold;
    font-size:160%;   
}
.menu-header .buttons{
    
}
.menu-body{
/*
    width: 500px;
    height: 500px;
*/
    text-align: center;
    position: relative;
    background-color: #6666ff;
}
.menu-body table{
/*
    width: 400px;
    margin: 40px 50px 0px;
*/
}
.menu-body table td{
    padding: 5px 0px;
}

.line05c { margin: 5px 0;border-bottom: 1px dashed #ccc;}
.line10c { margin: 10px 0;border-bottom: 1px dashed #ccc;}
.line15c { margin: 15px 0;border-bottom: 1px dashed #ccc;}

.sub-header {
    color: #3259cc;
    font-size: 18px;
    text-align: center;
    margin: 0 auto 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom:1px dashed #ccc;
    padding: 10px 0;
}
.sub-header .title{
    flex:1;
    text-align: left;
    font-weight: bold;
    font-size:160%;
}
.sub-header .buttons{
    flex:1;
    display: flex;
    gap:10px;
    justify-content: flex-end;
}

/*---  Header  ---*/
.header {
    color: #3259cc;
    display: flex;
    border-bottom:1px dashed #ccc;
    padding: 10px 0;
    margin: 0 auto 20px;
}
.header .title{
    text-align: left;
    font-size:160%;
    flex:1;
    justify-content: flex-start;
}
.header .buttons{
    gap:10px;
    justify-content: flex-end;
}
.header-msg {
    width: 700px;
    margin-top: 5px;
    color: #ff0033;
    text-align: center;
    font-size: 14px;
    position: relative;
}
/*---  inquiry/co  ---*/
.data-co {
    /* width: 980px; */
    margin: 10px auto;
}
.data-co table {
    /* width: 980px; */
    width: 100%;
    margin: 0px auto;
    empty-cells: show;
    font-size: 10.5px;
    text-align: center;
}
.data-co table th {
    background-color: #ccffcc;
    font-weight: normal;
}
.data-co table td {
    background-color: #fff8dc;
}
.data-co table, .data-co table th, .data-co table td {
    border:black 1px solid;
}
.search-co ,.search-po {
    text-align: left;
    position: relative;
    background: white;
    padding:15px;
    border-radius: 10px;
    position: relative;
}
.search-co input,.search-po input {
    font-size: 14px;
    text-align: center;
    margin-right: 10px;
}
.search-co select {
    font-size: 14px;
}
.search-co td {
    padding: 7px 8px;
}
/* --- inquiry/podata ---*/
.data-po {
    /* width: 980px; */
    margin: 5px auto 0px;;
}
.data-po table {
    /* width: 980px; */
    width: 100%;
    margin: 0px auto;
    empty-cells: show;
    font-size: 10px;
    border-collapse: collapse;
}
.data-po table th {
    background-color: #ccffcc;
    text-align: center;
    font-weight: normal;
}
.data-po table td {
    background-color: #fff8dc;
}
.data-po table, .data-po table th, .data-po table td {
    border:black 1px solid;
}
.search-po {

    
}
.search-po-left{
    padding:15px;
    background-color:rgba(153, 204, 102, 0.7); 
}
.search-po-right{
    padding:15px;
    text-align: left;
    background-color:rgba(233, 233, 112, 0.7);
}
.search-po-right table{
    width: 670px;
    margin: 0px auto auto;
}
.search-po-right input{
    text-align: center;
}
.search-po table td{
    padding: 5px;
}
/* --- custorder/ishidacoprint ---*/
.ishida-co-header {
    width: 960px;
    height: 35px;
    color: #333399;
    font-size: 18px;
    position: relative;
    text-align: center;
    margin: 0 auto;
}
.ishida-co-screen-box{
    width: 960px;
    background-color: #E0F0FF;
    border:1px solid #003399;
    margin: 0px auto;
    position: relative;
}
.ishida-co-search-box {
    width: 900px;
    height: 70px;
    background-color: #ccffcc;
    margin: 5px auto ;
    border: 1px solid;
    text-align: center;
    position: relative;
}
.ishida-co-search-box table {
    width: 880px;
    margin: 10px auto auto 20px;
    font-size: 14px;
    text-align: left;
}
.ishida-co-search-box input {
    font-size: 14px;
    text-align: center;
}
.ishida-co-bottom-box {
    width: 950px;
    height: 40px;
    margin: 5px auto;
    position: relative;
    font-size: 14px;
}
.ishida-co-output-box {
    width: 950px;
    height: 550px;
    margin: 0px auto;
    overflow: auto;
    text-align: center;
    position: relative;
    font-size: 12px;
}
.ishida-co-output-box table {
    width: 930px;
    margin: 0px auto;
    empty-cells: show;
    overflow: auto;
}
.ishida-co-output-box table th {
    font-weight: normal;
    background-color: #ffcccc;
}
.ishida-co-output-box table td {
    background-color: #ffffcc;
}
.ishida-co-output-box table, .ishida-co-output-box table th, .ishida-co-output-box table td {
    border:black 1px solid;
}
/* --- quality/defectentry ---*/
.defect-header{
    margin-top: 5px;
    color: #333399;
    text-align: center;
    font-size: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.defect-header .title{
    text-align: left;
    font-size:160%;
    flex:1;
    justify-content: flex-start;
    align-items: center;
}
.defect-header .buttons{
    gap:10px;
    justify-content: flex-end;
    display: flex;
}

.defect-input-box{
    /* width: 980px; */
    background-color: #ecf6ce;
    margin: 10px auto;
    border: #999999 double 2px;
    text-align: left;
    position: relative;
    font-size: 14px;
}
.defect-input-box table {
    width: 970px;
    margin: 5px auto 0px;
}
.defect-input-box table td {
    padding: 3px;
    color: #000000;
}
.defect-input-box input {
    text-align: center;
}
.defect-input-box label {
    font-size: 14px;
    color: #0033ff;
    margin-left: 5px;
}
/*---  details  ---*/
.details-header{
    font-size: 20px;
    width:590px;
    height: 30px;
    margin: 0 auto;
}
.details-main{
    width:560px;
    background-color: #ccffcc;
    margin: 0 auto;
    padding:10px 5px;;
}
.details-main td{
    text-align: left;
    color:#0033ff;
    padding:3px 3px;
}
.details-main label{
    color:black;
}
.details-data{
    width:580px;
    margin-top: 10px;
}
.details-data table{
    width:570px;
    empty-cells: show;
    border:black 1px solid;
}
.details-data th{
    background-color: #ffcccc;
    border:black 1px solid;
    font-weight: normal;
}
.details-data td{
    background-color: #ffffcc;
    text-align: center;
    border:black 1px solid;
}
.part-details{
    width:580px;
    height: 120px;
    margin: 5px auto;
}
.details-data-sub{
    width:500px;
    margin: auto;
}
.details-data-sub table{
    width:500px;
    empty-cells: show;
    border:#999999 1px solid;
}
.details-data-sub th{
    background-color: #ccffff;
    border:#999999 1px solid;
    font-weight: normal;
}
.details-data-sub td{
    text-align: center;
    background-color: #ffffcc;
    border:#999999 1px solid;
}
/*---  Screen  ---*/
.screen-box-blue {
    background-color: #e0f0ff;
    border:1px solid #a9c0f0;
    position: relative;
    padding:20px 0;
    border-radius: 10px;
}
.screen-box-blue-wide {
    width: 900px;
    background-color: #e0f0ff;
    border:1px solid #003399;
    margin: 5px auto;
    padding-bottom: 10px;
    position: relative;
}
.screen-box-green {
/*     width: 780px; */
    background-color: #ccffcc;
    border:1px solid #2f32b5;
    margin: 5px auto;
    position: relative;
}
.screen-box-yellow {
/*     width: 780px; */
    background-color: #ffff99;
    border:1px solid #2f32b5;
    margin: 5px auto;
    position: relative;
}
/*---  Search  ---*/
.search-box {
    width: 750px;
    font-size: 16px;
    margin: 5px auto;
    position: relative;
}
.search-box table {
    width: 700px;
    text-align: left;
    margin: 0px auto;
    position: relative;
}
.search-box select {
    font-size: 16px;
}
.search-box input {
    font-size: 16px;
    text-align: center;
}
.search-box-green {
    width: 750px;
    font-size: 16px;
    background-color: #ccffcc;
    margin: 5px auto ;
    border: 1px solid;
    text-align: center;
    position: relative;
}
.search-box-green table {
    width: 700px;
    margin: 10px auto auto 20px;
    font-size: 14px;
    text-align: left;
}
.search-box-green input {
    font-size: 14px;
    text-align: center;
}
.search-box-yellow {
    width: 750px;
    background-color: #ffff99;
    margin: 5px auto ;
    border: 1px solid;
    text-align: center;
    position: relative;
}
.search-box-yellow table {
    width: 700px;
    margin: 10px auto auto 20px;
    font-size: 14px;
    text-align: left;
}
.search-box-yellow input {
    font-size: 14px;
    text-align: center;
}

/*---  Information Header  ---*/
.info-header {
    width: 780px;
    font-size: 14px;
    background-color: #ccffcc;
    margin: 5px auto;
    border: 1px solid;
    text-align: left;
    position: relative;
}
.info-header table {
    width: 750px;
    margin: 0px auto;
}
.info-header label {
    color: #0033ff;
    font-weight: bold;
    margin-left: 5px;
}
.info-header-narrow {
    width: 600px;
    height: 50px;
    font-size: 14px;
    background-color: #f5ecce;
    margin: 5px auto;
    border: 1px solid;
    text-align: left;
    position: relative;
}
.info-header-narrow label {
    color: #ff6600;
    font-weight: bold;
    margin-left: 5px;
}

/*---  Information Detail  ---*/
.info-detail {
    width: 720px;
    height: 385px;
    margin: 10px auto;
    overflow: auto;
    text-align: center;
    position: relative;
}
.info-detail table {
    width: 700px;
    margin: 0px auto;
    empty-cells: show;
    font-size: 12px;
}
.info-detail table th {
    background-color: #ffccff;
    font-weight: normal;
}
.info-detail table td {
    background-color: #ffffcc;
    text-align: center;
}
.info-detail table, .info-detail table th, .info-detail table td {
    border:black 1px solid;
}

/*---  Input Box  ---*/
.input-box-green {
    width: 780px;
    background-color: #E6F8E0;
    margin: 10px auto;
    padding: 10px 0px;
    border: #999999 double 2px;
    text-align: center;
    position: relative;
    font-size: 12px;
}
.input-box-green table {
    width: 750px;
    margin: 0px auto;
    empty-cells: show;
}
.input-box-green table, .input-box-green table td {
    border: #999999 1px solid;
}
.input-box-green table td {
    padding: 3px 0px;
}
.input-box-green input {
    text-align: center;
}
.input-box-green-narrow {
    width: 500px;
    background-color: #ecf6ce;
    margin: 10px auto 20px;
    border: #999999 double 2px;
    text-align: left;
    position: relative;
    font-size: 14px;
}
.input-box-green-narrow table {
    width: 350px;
    margin: 5px auto 0px;
}
.input-box-green-narrow table td {
    padding: 10px;
    color: #000000;
}
.input-box-green-narrow input {
    text-align: center;
}
.input-box-green-narrow label {
    font-size: 14px;
    color: #993300;
    margin-left: 5px;
}
/*---  Output Box  ---*/
.output-box {
/*     width: 780px; */
    height: 450px;
    margin: 10px auto;
    overflow: auto;
    text-align: center;
    position: relative;
    font-size: 11px;
}
.output-box table {
/*     width: 760px; */
	width: 100%;
    margin: 0px auto;
    empty-cells: show;
	border-collapse: collapse;
}
.output-box table th {
    font-weight: normal;
    background-color: #ffcccc;
}
.output-box table td {
    background-color: #ffffcc;
}
.output-box table, .output-box table th, .output-box table td {
    border:black 1px solid;
}
.output-box input {
    text-align: center;
}
.output-box label {
    color: #990033;
}
.output-box-midashi {
    width: 780px;
    margin: 10px auto;
    overflow: auto;
    text-align: center;
    position: relative;
    font-size: 11px;
}
.output-box-midashi table {
    width: 760px;
    margin: 0px auto;
    empty-cells: show;
}
.output-box-midashi table th {
    font-weight: normal;
    background-color: #ffcccc;
}
.output-box-midashi table td {
    background-color: #ffffcc;
}
.output-box-midashi table, .output-box-midashi table th, .output-box-midashi table td {
    border:black 1px solid;
}
.output-box-midashi input {
    text-align: center;
}
.output-box-midashi label {
    color: #990033;
}
.output-box-green {
    width: 740px;
    background-color: #ecf6ce;
    margin: 10px auto 20px;
    border: #999999 double 2px;
    text-align: left;
    position: relative;
    font-size: 14px;
}
.output-box-green table {
    width: 730px;
    margin: 5px auto 0px;
}
.output-box-green table td {
    padding: 6px 5px;
    color: #000000;
}
.output-box-green input {
    text-align: center;
}
.output-box-green label {
    font-size: 14px;
    color: #0033ff;
    margin-left: 5px;
}
.output-box-wide {
    width: 920px;
    height: 500px;
    overflow: auto;
    margin: 10px auto;
    text-align: center;
    position: relative;
    font-size: 10px;
}
.output-box-wide table {
    width: 900px;
    margin: 0px auto;
    empty-cells: show;
}
.output-box-wide table th {
    font-weight: normal;
    background-color: #ffcccc;
}
.output-box-wide table td {
    background-color: #ffffcc;
}
.output-box-wide table, .output-box-wide table th, .output-box-wide table td {
    border:black 1px solid;
}
.output-box-wide input {
    text-align: center;
}
.output-box-wide select {
    font-size: 12px;
}
.output-box-pink {
    width: 740px;
    background-color: #f8e0ec;
    margin: 10px auto 20px;
    border: #999999 double 2px;
    text-align: left;
    position: relative;
    font-size: 14px;
}
.output-box-pink table {
    width: 730px;
    margin: 5px auto 0px;
}
.output-box-pink table td {
    padding: 6px 5px;
    color: #000000;
}
.output-box-pink input {
    text-align: center;
}
.output-box-pink label {
    font-size: 14px;
    color: #0033ff;
    margin-left: 5px;
}
/*---  Bottom Box  ---*/
.bottom-box {
    text-align: left;
    position: relative;
    font-size: 14px;
    color: #ff0000;
}
/*---  Command Button  ---*/
.basic-btn {
    width: 90px;
    padding:10px;
    color: #333333;
    display: inline-block;
}
.basic-btn-wide {
    width: 140px;
    height: 30px;
    color: #333333;
}
.black-btn-right{
    width: 100px;
    height: 30px;
    color: #666666;
    top:5px;
    right: 50px;
    position: absolute;
}
.black-btn-right:hover {
    color: #ff00ff;
}
.blue-bg-btn{
    width: 100px;
    height: 30px;
    color: #ffffff;
    background-color: #0099cc;
    right: 250px;
    top: 0px;
    position: absolute;
}
.blue-bg-btn:hover {
    color: #ff00ff;
}
.blue-btn{
    width: 100px;
    height: 30px;
    color:#3366ff;
    right:130px;
    top: 0px;
    position: absolute;
}
.blue-btn:hover {
    color: #ff00ff;
}
.blue-btn-left{
    width: 100px;
    height: 30px;
    color:#3366ff;
    left:140px;
    top: 0px;
    position: absolute;
}
.blue-btn-left-pdf:hover {
    color: #ff00ff;
}
.blue-btn-left-pdf{
    width: 100px;
    height: 30px;
    color:#3366ff;
    left:10px;
    top: 0px;
    position: absolute;
}
.blue-btn-left:hover {
    color: #ff00ff;
}


.close-btn {
    min-width: 100px;
    padding: 0px 10px;
    color: #666666;
    border:0;
    padding:10px;
    border-radius: 5px;
}
.close-btn:hover {
    color: #ff00ff;
}


.green-btn-left {
    min-width: 100px;
    background: #009900;
    border:0;
    color:white;
    border-radius: 5px;
    color: white;
    padding:10px;
}
.green-btn-left:hover {
    color: #ff00ff;
}
.green-btn-right {
    width: 100px;
    color: #009900;
    border-radius: 5px;
    padding:10px;
}
.green-btn-right:hover {
    color: #ff00ff;
}
.green-btn-right-bottom {
    width: 100px;
    color: #009900;
    border-radius: 5px;
    padding:10px;
}
.green-btn-right-bottom:hover {
    color: #ff00ff;
}
.green-bg-btn-wide{
    width: 150px;
    border: 1px solid #99ffcc;
    background-color: #ccffcc;
    border-radius: 5px;
    padding:10px;
}
.green-bg-btn-wide:hover {
    color: #ff00ff;
}
.lightblue-bg-btn-wide{
    width: 150px;
    height: 30px;
    border: 1px solid #0066ff;
    left: 515px;
    top: 5px;
    position: absolute;
    background-color: #ccffff;
}
.lightblue-bg-btn-wide:hover {
    color: #ff00ff;
}
.login-btn{
    width:100px;
    border-right: 3px solid #999999;
    border-bottom: 3px solid #999999;
    padding: 5px 20px;
    cursor: pointer;
    color: #666666;
}
.login-btn:hover {
    background-color: #66ffcc;
    color: #ff66cc;
}
.orange-btn {
    width: 100px;
    height: 30px;
    color:#ff6600;
    border-radius: 5px;
    padding:10px;
}
.orange-btn:hover {
    color: #ff00ff;
}
.orange-btn-bottom {
    width: 100px;
    height: 30px;
    color:#ff6600;
    border-radius: 5px;
    padding:10px;
}
.orange-btn-bottom:hover {
    color: #ff00ff;
}
/* 入荷ボタンのみに使用 */
.pink-btn {
    width: 100px;
    height: 30px;
    color: #ff33cc;
    border-radius: 5px;
    padding:10px;
}
.pink-btn:hover {
    color: #ff00ff;
}
.pink-bg-btn-wide{
    width: 150px;
    border: 1px solid #ff99ff;
    left: 5px;
    top: 5px;
    position: absolute;
    background-color: #ffccff;
}
.pink-bg-btn-wide:hover {
    color: #ff00ff;
}
.purple-btn {
    width: 100px;
    color: #9966ff;
    border-radius: 5px;
    padding:10px;
}
.purple-btn:hover {
    color: #ff00ff;
}
.purple-btn-bottom {
    width: 100px;
    height: 30px;
    color: #9966ff;
    border-radius: 5px;
    padding:10px;
}
.purple-btn-bottom:hover {
    color: #ff00ff;
}
.red-btn{
    width: 100px;
    height: 30px;
    color:#ff3333;
    border-radius: 5px;
    padding:10px;
}
.red-btn:hover {
    color: #ff00ff;
}
.red-bg-btn{
    width: 100px;
    border: 1px solid #cc0000;
    color:#ffffff;
    border-radius: 5px;
    padding:10px;
}
.red-bg-btn:hover {
    color: #00ffff;
}
.red-bg-btn-left{
    display: block;
    width: 100px;
    border: 1px solid #cc0000;
    color:#ffffff;
    background-color: #ff0000;
    border-radius: 5px;
    padding:10px;
}
.red-bg-btn-left:hover {
    color: #000000;
}
.return-btn {
    display: block;
    width: 100px;
    color: white;
    background: #666666;
    text-align: center;
    border:1px solid #ccc;
    box-sizing: border-box;
    border-radius: 5px;
}
.return-btn:hover {
    color: #ff00ff;
}
.search-btn {
    min-width: 170px;
    height: 30px;
    background: #ff6600;
    color:white;
    border-radius:5px;    
}
.search-btn:hover {
    color: #ff00ff;
}
.yellow-bg-btn-wide{
    width: 150px;
    height: 30px;
    border: 1px solid #ffff33;
    left: 345px;
    top: 5px;
    position: absolute;
    background-color: #ffff99;
}
.yellow-bg-btn-wide:hover {
    color: #ff00ff;
}
/*-- numeric keypad(仮想テンキー) --- */
.numkey{
    overflow: hidden;
    border: 1px solid #DDDDDD;
    width: 250px;
    background-color: #EBEBEB;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #4D4D4D;
    text-shadow: 1px 1px 0px #FFFFFF;
    font-weight: bold;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index:999;
}

.numkey ul li{
    background:#FFFFFF;
    float: left;
    list-style: none;
    width: 40px;
    height: 40px;
    line-height:50px;
    font-size: 18px;
    border: 1px solid #DDDDDD;
    margin: 1px;
    text-align:center;
    cursor:pointer;
    border-radius: 5px;         
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px; 
    background:linear-gradient(#FFFFFF, #C9C9C9);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9))";
    zoom: 1;
    background: -moz-linear-gradient(top, #FFFFFF, #C9C9C9);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C9C9C9));
    user-select: none; 
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.numkey ul li:hover{
    background:linear-gradient(#C9C9C9, #FFFFFF);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF))";
    zoom: 1;
    background: -moz-linear-gradient(top, #C9C9C9, #FFFFFF);
    background: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#FFFFFF));
}

.numkey ul li span{
    font-size:12px;
}

.numkey #btwrap{
    clear:both;
    padding:10px;
    text-align:center;
}

.numkey #btwrap a{
    border: 1px solid #DDDDDD;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;         
    -moz-border-radius: 5px;    
    -webkit-border-radius: 5px; 
    background:linear-gradient(#FFFFFF, #C9C9C9);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#FFFFFF, endcolorstr=#C9C9C9))";
    zoom: 1;
    background: -moz-linear-gradient(top, #FFFFFF, #C9C9C9);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#C9C9C9));
    color:#4D4D4D;
    text-decoration:none;
}
.numkey #btwrap a:hover{
    background:linear-gradient(#C9C9C9, #FFFFFF);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startcolorstr=#C9C9C9, endcolorstr=#FFFFFF))";
    zoom: 1;
    background: -moz-linear-gradient(top, #C9C9C9, #FFFFFF);
    background: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#FFFFFF));
}

/*---  Information Detail  ---*/
.infoBox {
    width: 640px;
	background-color: #ADFCC5;
    margin: 5px auto;
    overflow: auto;
	border: 1px solid;
    text-align: center;
    position: relative;
}
.infoBox table {
    width: 600px;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: 20px;
    empty-cells: show;
    font-size: 12px;
}
.infoBox table th {
	padding: 0px 0px;
}
.infoBox table td {
	padding: 2px 0px;
}
.infoBox label {
	font-size: 14px;
	color: #CC4902;
	font-weight: bold;
	margin-left: 10px;
}

.infoDetail {
	margin-top: 10px;
	margin-left: 20px;
	overflow: auto;
	text-align: center;
	position: relative;
}
.infoDetail table {
	width: 700px;
	margin: 0px auto;
	empty-cells: show;
	font-size: 12px;
}
.infoDetail table th {
	background-color: #F9F16C;
}
.infoDetail table td {
	background-color: #ffffe0;
	text-align: center;
}
.infoDetail table, .infoDetail table th, .infoDetail table td {
	border:black 1px solid;
    border-collapse: collapse;
    width:100%;
}
.infoDetail table th {
    padding:10px;
}
 .infoDetail table td {
 padding:10px;
}

/*---  Menu Buttom  ---*/
.BtnMenu0 {
	width:180px;
	height:47px;
	background-color: #FFFFA2;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 20px;
	cursor: pointer;
	color: #000000;
	padding: 0px 0px;
}
.BtnMenu0:hover {
	background-color: #ACFFFF;
	color: #0909F7;
}
.BtnMenu0:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
	color: #FF00FF;
}

.BtnMenu1 {
	width:190px;
	height: 40px;
	background-color: #FFFFA2;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
	color: #000000;
	position: absolute;
	padding: 0px 0px;
}
.BtnMenu1:hover {
	background-color: #ACFFFF;
	color: #0909F7;
}
.BtnMenu1:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
	color: #FF00FF;
}

/*---  Command Button  ---*/
.BtnClose {
	width: 60px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	padding: 0px 10px;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #666666;
	position: absolute;
	right: 10px;
	top:0px;
}
.BtnClose:hover {
	color: #FF00FF;
}
.BtnClose:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnReturn {
	width: 60px;
	height: 25px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #666666;
	position: absolute;
	padding: 0px 0px;
}
.BtnReturn:hover {
	color: #FF00FF;
}
.BtnReturn:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnExcel {
	width: 100px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #009900;
	padding: 0px 0px;
	position: absolute;
}
.BtnExcel:hover {
	background-color: #C4FFFF;
}
.BtnExcel:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnCreate {
	width: 130px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #008040;
	position: absolute;
	padding: 0px 0px;
}
.BtnCreate:hover {
	background-color: #C4FFFF;
}
.BtnCreate:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnSearch {
	width: 80px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #8000FF;
	position: absolute;
	padding: 0px 0px;
}
.BtnSearch:hover {
	background-color: #FFDFD0;
}
.BtnSearch:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnSubmit {
	width: 100px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #FF0080;
	padding: 0px 0px;
	position: absolute;
}
.BtnSubmit:hover {
	background-color: #FFC4FF;
}
.BtnSubmit:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnEdit {
	width: 80px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #0000FF;
	padding: 0px 0px;
	position: absolute;
}
.BtnEdit:hover {
	background-color: #C4FFFF;
}
.BtnEdit:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnDel {
	width: 80px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #FF0000;
	padding: 0px 0px;
	position: absolute;
}
.BtnDel:hover {
	background-color: #FFC4FF;
}
.BtnDel:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnCall {
	width: 100px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #008040;
	padding: 0px 0px;
	position: absolute;
}
.BtnCall:hover {
	background-color: #C4FFFF;
}
.BtnCall:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnPrint {
	width: 120px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #008040;
	padding: 0px 0px;
	position: absolute;
}
.BtnPrint:hover {
	background-color: #C4FFFF;
}
.BtnPrint:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnDetail {
	width: 45px;
	height: 20px;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #0000FF;
	padding: 0px 0px;
}
.BtnDetail:hover {
	background-color: #C4FFFF;
}
.BtnDetail:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.Btn50 {
	width: 100px;
	height: 30px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	color: #CE00CE;
	padding: 0px 0px;
	position: absolute;
}
.Btn50:hover {
	background-color: #C4FFFF;
}
.Btn50:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}

.BtnArrow {
	width: 30px;
	height: 80px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #999999;
	border-bottom: 3px solid #999999;
	border-left: 3px solid #FFFFFF;
	font-family: sans-serif;
	font-size: 12px;
	font-weight: bold;
	cursor: pointer;
	color: #B53A06;
	padding: 0px 0px;
	position: absolute;
}
.BtnArrow:hover {
	background-color: #C4FFFF;
}
.BtnArrow:active {
	background-color: #C0C0C0;
	border-top: 3px solid #999999;
	border-right: 3px solid #FFFFFF;
	border-bottom: 3px solid #FFFFFF;
	border-left: 3px solid #999999;
}



/*index全般*/
#index {
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    background: white;
    padding: 5%;
}

#index a{
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    text-decoration: none;
    font-size: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: rgb(255, 189, 0);
    border-radius: 5px;
    padding: 12px 20px;
    display: block;
    box-sizing: border-box;
    width: calc(50% - 10px);
    color:#440;
    font-weight:700;
}


#index a.blue{
    background: rgb(121, 195, 255);
}
#index a.green{
    background: rgb(146, 213, 75);
}
#index a.pink{
    background: rgb(255, 141, 121);
}