html{
  width: 100%;
  height: 100%;
  font-size: 62.5%;
}

body {
  width:100%;
  height: 100%;
  display:block;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  margin:0px;
  padding: 0px;
  font-size:1.6rem;
  line-height: 1.3em;
}

input#btn_submit {
  background: #0099ff;
  color:#ffffff;
  /* width:auto; */
  border-radius:3px;
  border:none;
  padding:3px 3px;
  cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0371ba), color-stop(0.00, #0387e0));
background: -webkit-linear-gradient(#0387e0, #0371ba);
background: -moz-linear-gradient(#0387e0, #0371ba);
background: -o-linear-gradient(#0387e0, #0371ba);
background: -ms-linear-gradient(#0387e0, #0371ba);
background: linear-gradient(#0387e0, #0371ba);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
  transition: all .4s;
}

input#btn_submitred{
  background: #0099ff;
  color:#ffffff;
  /* width:auto; */
  border-radius:3px;
  border:none;
  padding:3px 3px;
  cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e60012), color-stop(0.00, #ff4251));
background: -webkit-linear-gradient(#ff4251, #e60012);
background: -moz-linear-gradient(#ff4251, #e60012);
background: -o-linear-gradient(#ff4251, #e60012);
background: -ms-linear-gradient(#ff4251, #e60012);
background: linear-gradient(#ff4251, #e60012);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
	transition: all .4s;
}

input#btn_submitgr{
  background:#0099ff;
  color:#ffffff;
  /* width:auto; */
  border-radius:3px;
  border:none;
  padding:3px 3px;
  cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #e60012), color-stop(0.00, #ff4251));
background: -webkit-linear-gradient(#008000, #228b22);
background: -moz-linear-gradient(#008000, #228b22);
background: -o-linear-gradient(#008000, #228b22);
background: -ms-linear-gradient(#008000, #228b22);
background: linear-gradient(#008000, #228b22);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
	transition: all .4s;
}

input#btn_submityl{
  background:#0099ff;
  color:#ff0000;
  font-weight: bold;
  /* width:auto; */
  border-radius:3px;
  border:none;
  padding:3px 3px;
  cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #f0e68c), color-stop(0.00, #ff4251));
background: -webkit-linear-gradient(#ffff00, #f0e68c);
background: -moz-linear-gradient(#ffff00, #f0e68c);
background: -o-linear-gradient(#ffff00, #f0e68c);
background: -ms-linear-gradient(#ffff00, #f0e68c);
background: linear-gradient(#ffff00, #f0e68c);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
	transition: all .4s;
}

input#btn_submit_small {
  font-size: 1.2rem;
  background: #0099ff;
  color:#ffffff;
  /* width:auto; */
  border-radius:3px;
  border:none;
  padding:3px 3px;
  cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0371ba), color-stop(0.00, #0387e0));
background: -webkit-linear-gradient(#0387e0, #0371ba);
background: -moz-linear-gradient(#0387e0, #0371ba);
background: -o-linear-gradient(#0387e0, #0371ba);
background: -ms-linear-gradient(#0387e0, #0371ba);
background: linear-gradient(#0387e0, #0371ba);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .4s;
  transition: all .4s;
}


input#btn_submitred:hover,
input#btn_submitgr:hover,
input#btn_submit:hover {
opacity: 0.6;
-webkit-transition: all .4s;
transition: all .4s;
}

/* エラークラス */
.errmss {
  color:  #ff0000;
  text-align: center;
  padding:10px;
}

/* スモールフォントクラス */
.small_font {
  font-size: 1.5rem;
  text-align: center;
  padding-bottom: 10px;
}

.Main_Field {
  padding:20px;
}

.Sidebar_Form,
.Order_Form,
.Knr_Form,
.Mente_Form {
  padding-top:100px;
}

.pad-top30 {
  padding-top: 30px;
}

/* ///////////////////////// Header ///////////////////////// */
.header {
  width: 100%;
  background: #add8e6;
  border-top:3px solid #000;
  box-shadow: 0 0 8px gray;
  padding-top: 10px;
  padding-bottom: 3px;
}

.header #title {
  font-weight: bold;
  padding-right: 10px;
  width:35%;
}
.header a {
  color: #000;
  text-decoration: none;
}

.header td {
  padding:5px;
}

/* ///////////////////////// LoginForm ///////////////////////// */
.loginForm {
  display: flex;
  align-items: center;
  justify-content: center;
  margin:auto;
  width: 100%;
  height:100%;
}
.loginTable {
  margin-top: 10px;
  margin-bottom: 10px;
}
.loginTable td {
  padding-bottom: 10px;
}

/* ///////////////////////// Sidebar_Form ///////////////////////// */
.Sidebar_Form #category {
  color:red;
  font-weight:bold;
}

/* ///////////////////////// Mente_Form ///////////////////////// */
.Mente_Form {

}

/* ///////////////////////// Knr_Form ///////////////////////// */
.Knr_Form #title,
.Mente_Form #title {
  font-weight: bold;
  color:#008000;
  margin: 5px;
}

.Knr_Form #sub_title,
.Mente_Form #sub_title {
  padding-top:5px;
  font-weight: bold;
  color:#008000;
}
.Knr_Form #titlebrd,
.Mente_Form #titlebrd {
  width:100%;
  border:solid;
  border-width:thin;
  border-color:#008000;
  margin: 0px;
}
.Knr_Form #serch_cnt,
.Mente_Form #search_cnt {
  color:red;
  font-weight: bold;
}

#mnt_search {
  font-size:2rem;
}


/* ///////////////////////// Order_Form ///////////////////////// */
.Order_Form #title,
.Mente_Form #title {
  font-weight: bold;
  color:#008000;
  margin: 5px;
}

.Order_Form #sub_title,
.Mente_Form #sub_title {
  padding-top:5px;
  font-weight: bold;
  color:#008000;
}
.Order_Form #titlebrd,
.Mente_Form #titlebrd {
  width:100%;
  border:solid;
  border-width:thin;
  border-color:#008000;
  margin: 0px;
}
.Order_Form #serch_cnt,
.Mente_Form #search_cnt {
  color:red;
  font-weight: bold;
}

.Order_Form #page,
.Knr_Form #page {
  background:#FFFFFF;
  width:20px;
  text-align:center;
  border-style:solid;
  border-color: #008000;
}

.Order_Form #page_hit,
.Knr_Form #page_hit {
  background:#008000;
  width:20px;
  text-align:center;
  border-style:solid;
  border-color: #008000;
}




.detail_table th {
  text-align: right;
  background: #add8e6;
}

.detail_table select {
  margin-top: 10px;
  margin-bottom: 10px;
}


.detail_table
  #etc_fabric,
  #etc_material,
  #etc_size,
  #etc_finish,
  #etc_material_t,
  #etc_material_f,
  #etc_material_e {
  display:none;
  font-size:1.5rem;
  margin-left:10px;
}
.detail_table #etc {
  display:none;
  font-size:1.5rem;
  font-weight: bold;
  color: red;
}

.detail_table td, .detail_table th,
.order_mente td, .order_mente th,
.cart_table td, .cart_table th {
  border:solid;
  border-width: thin;
  border-color: #808080;
}

.order_mente th,
.cart_table th {
  background: #add8e6;
}

.Mente_Table th {
  border-color:#add8e6;
  background: #add8e6;
}

.detail_table #sum_price {
  border:none;
  color:#000;
  background:#fff;
}

/* ///////////////////////////////// タブ用CSS ///////////////////////////////// */
/*タブ切り替え全体 */
.tabs {
  margin-top: 50px;
  background-color: #fff;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
  width: 60px;
  height: 30px;
  background-color: #8c8e8f;
  line-height: 30px;
  font-size: 1.4rem;
  /* 14px */
  text-align: center;
  color: #fff;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-radius:5px 5px 0 0;
  margin-right: 5px;
  cursor: pointer;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 0 0px 0;
  clear: both;
  overflow: hidden;
  height: 450px;
  /*作業用　↓↓*/
  /* height: 600px; */
}

/*選択されているタブのコンテンツのみを表示*/
#basic_tab:checked ~ #basic_tab_content,
#fabric_tab:checked ~ #fabric_tab_content,
#material_tab:checked ~ #material_tab_content,
#material_tab2:checked ~ #material_tab2_content,
#material_tab3:checked ~ #material_tab3_content,
#material_tab4:checked ~ #material_tab4_content,
#size_tab:checked ~ #size_tab_content
 {
  display: block;
}

.tab_content {
border-top: solid 4px #0370b9;
border-left: solid 1px #e4e4e4;
border-right: solid 1px #e4e4e4;
border-bottom: solid 1px #e4e4e4;
box-sizing: border-box;
border-radius: 0 0 5px 5px;
padding-top:10px;
padding-bottom:10px;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #0000ff;
  color: #fff;
background: -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #0370ba), color-stop(0.00, #0388e0));
background: -webkit-linear-gradient(#0388e0, #0370ba);
background: -moz-linear-gradient(#0388e0, #0370ba);
background: -o-linear-gradient(#0388e0, #0370ba);
background: -ms-linear-gradient(#0388e0, #0370ba);
background: linear-gradient(#0388e0, #0370ba);
}


@keyframes blinkAnimation {
  0% {
    border: 6px solid #cc2200;
  }
  100% {
    border: 6px solid #efefef;
  }
}
.blink {
  animation: blinkAnimation 1s ease infinite alternate;
  width:150px;
  border : 5px solid red;
}

.cust_info_ttl {
  font-weight:bold;
  font-size:1.8rem;
  color:green;
}

.cust_info_short {
  padding-top:5px;
  padding-bottom:5px;
  margin:0px;
  width:200px;
}
.cust_info_table th {
  vertical-align: top;
  padding:5px;
}
.cust_info_table td {
  padding-left:20px;
}
.cust_info_table #address {
  padding-top:5px;
  padding-bottom:5px;
  margin:0px;
  width:500px;
}

.cust_info_table #post {
  padding-top:5px;
  padding-bottom:5px;
  margin:0px;
  width:100px;
}




.knr_ordertbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.knr_ordertbl th,
.knr_ordertbl td {
  border: thin solid #808080;
  width: 10rem;
  padding: 0 0.5rem;
}
.knr_ordertbl td {
  font-size: 1.2rem;
  width: 10rem;
  overflow-x: scroll;
}
.knr_ordertbl th {
  font-size: 1.5rem;
  background: #add8e6;
  text-align: left;
}

.knr_ordertbl #small1 {
  width: 4.5rem;
}
.knr_ordertbl #small2 {
  width: 2rem;
}
.knr_ordertbl #money {
  width: 5rem;
}

.knr_ordertbl #chu {
  color:red;
  font-size:1.2rem;
  font-weight:bold
}

.knr_ordertbl input,
.knr_ordertbl select {
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.knr_ordertbl #inp_ord {
  text-align: right;
  width: 6rem;
}
.knr_ordertbl #ord {
  width: 3.5rem;
}
.knr_ordertbl #unso {
  width: 7.5rem;
}
.knr_ordertbl #kbn {
  width: 4.4rem;
}
.knr_ordertbl #date {
  width: 9.5rem;
}