/* ====================================================
 * Order CSS
 * ===================================================*/
@charset "utf-8";

#formWrap {
    width: 700px;
    margin: 0 auto;
    color: #555;
    line-height: 120%;
    font-size: 90%;
}
table.order-info, table.order-detail {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
}
table.order-info,table.order-detail td,th{
    border: 1px solid #ccc;
    padding: 10px;
}
table.order-info th{
    width:30%;
    font-weight: normal;
    background: #afeeee;
    text-align: left;
}
table.order-detail th{
    font-weight: normal;
    background: #bfe8b0;
    text-align: center;
}
table.order-detail td:nth-child(2) {
    width: 8em;
    min-width: 4em;
    text-align: center;
}
table.order-detail td:nth-child(3) {
    width: 5em;
    text-align: center;
}
table.order-detail td:nth-child(4) {
    width: 10em;
    text-align: center;
}
input.order-num {
    width: 5em;
    text-align: center;
}
input.total, input.postage {
    width: 100%;
    background-color: #fffacd;
    text-align: center;
    border: none;
    font-size: 1.2em;
}
td.total, td.postage {
    background: #efeabd;
}
td.coupon {
    background: #FEDCBD;
}

/*　簡易版レスポンシブ用CSS　*/
@media screen and (max-width:800px) {
  table.order-detail td:nth-child(2) {
    width: auto;
  }
  table.order-detail td:nth-child(3) {
    width: auto;
  }
  table.order-detail td:nth-child(4) {
    width: auto;
  }
}
@media screen and (max-width:572px) {
  #formWrap {
    width:95%;
    margin:0 auto;
  }
  table.order-info th, table.order-info td {
    width:auto;
    display:block;
  }
  table.order-info th {
    margin-top:5px;
    border-bottom:0;
  }
  form input[type="text"], form textarea {
    width:80%;
    padding:5px;
    font-size:110%;
    display:block;
  }
  form input[type="submit"], form input[type="reset"], form input[type="button"] {
    display:block;
    width:100%;
    height:40px;
  }
}