/*****************************************************************

	商品注文ページ用スタイルシート定義.

*****************************************************************/
@charset "utf-8";

th {
  background: #e9727e;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
  text-align: center;
}

td {
  border: solid 1px #ccc;
  padding: 10px;
  text-align: center;
}

table {
  margin: 20px auto;
  width: 90%;
}

/*----------------------------------------------------------------
  ショッピングカートテーブル個別スタイル
 ---------------------------------------------------------------*/

/*=start===================*/
/* 先頭カラムの色変え      */
.tbl-cart td:first-child {
  background: #fbf5f5;
}
/* 注文カート商品画像      */
.tbl-cart img.menu-img {
    width: 150px;
}
/*=end=====================*/

/*=start===================*/
.tbl-menu th {
  background: #e8e8e8;
  border: solid 1px #ccc;
  color: #545454;
  padding: 10px;
  text-align: center;
}
/* 先頭カラムの色変え      */
.tbl-menu td:first-child {
    background: #f7f7f7;
    /*background: #f2f2f2;*/
}
/* 注文確認商品画像        */
.tbl-menu img.menu-img {
    width: 150px;
}
/*=end=====================*/

/*=start===================*/
.tbl-ecart th {
  background: #a5925b;
  border: solid 1px #ccc;
  color: #fff;
  padding: 10px;
  text-align: center;
}
/* 先頭カラムの色変え      */
.tbl-ecart td:first-child {
    background: #f7f7f7;
}
/* 注文カート商品画像      */
.tbl-ecart img.menu-img {
    width: 150px;
}
/*=end=====================*/

/*=start===================*/
/* お客様情報入力          */
.tbl-order th {
  padding: 10px;
}

.tbl-order td {
  padding: 10px;
}
/*=end=====================*/

/*=start===================*/
/* お客様情報確認 */
.tbl-conf th {
  background: #e8e8e8;
  color: #545454;
  padding: 10px;
  width: 20%;
}

.tbl-conf td {
  padding: 10px;
}
/*=end=====================*/

/*=start===================*/
/* お客様情報入力(EC)      */
.tbl-ecorder th {
  background: #a5925b;
  color: #fff;
  padding: 10px;
  width: 20%;
}

.tbl-ecorder td {
  padding: 10px;
}
/*=end=====================*/

@media screen and (max-width: 640px) {
    th {
        border-bottom: none;
    }

    td {
        border-bottom: none;
    }

    .last td:last-child {
        border-bottom: solid 1px #ccc;
        width: 100%;
    }

    /*=start===================*/
    /* お客様情報入力          */
    .tbl-order {
        width: 90%;
    }

    .tbl-order th,
    .tbl-order td {
        display: block;
        width: 100%;
    }
    /*=end=====================*/

    /*=start===================*/
    /* お客様情報確認          */
    .tbl-conf {
        width: 90%;
    }

    .tbl-conf th,
    .tbl-conf td {
        display: block;
        width: 100%;
    }
    /*=end=====================*/

    /*=start===================*/
    /* お客様情報入力(EC)      */
    .tbl-ecorder {
        width: 90%;
    }

    .tbl-ecorder th,
    .tbl-ecorder td {
        display: block;
        width: 100%;
    }
    /*=end=====================*/

    /*=start===================*/
    /* 注文カート              */
    .tbl-cart {
        width: 90%;
    }

    .tbl-cart .thead {
        display: none;
    }

    .tbl-cart tr {
        width: 100%;
    }

    .tbl-cart td {
        display: block;
        text-align: right;
        width: 100%;
    }

    .tbl-cart td:first-child {
        background: #e9727e;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

    .tbl-cart td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        margin-right: 10px;
    }
    /*=end=====================*/

    /*=start===================*/
    /* 注文確認                */
    .tbl-menu {
        width: 90%;
    }

    .tbl-menu .thead {
        display: none;
    }

    .tbl-menu tr {
        width: 100%;
    }

    .tbl-menu td {
        display: block;
        text-align: right;
        width: 100%;
    }

    .tbl-menu td:first-child {
        background: #f2f2f2;
        color: #545454;
        font-weight: bold;
        text-align: center;
    }

    .tbl-menu td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        margin-right: 10px;
    }
    /*=end=====================*/

    /*=start===================*/
    /* 注文確認                */
    .tbl-ecart {
        width: 90%;
    }

    .tbl-ecart .thead {
        display: none;
    }

    .tbl-ecart tr {
        width: 100%;
    }

    .tbl-ecart td {
        display: block;
        text-align: right;
        width: 100%;
    }

    .tbl-ecart td:first-child {
        background: #a5925b;
        color: #fff;
        font-weight: bold;
        text-align: center;
    }

    .tbl-ecart td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        margin-right: 10px;
    }
    /*=end=====================*/

}

/*----------------------------------------------------------------
  ショッピングカートその他スタイル
 ---------------------------------------------------------------*/

/* 消費税内訳(pgで動的設定)  */
.tax_detail
{
    display: inline-block;
    text-align: right;
}

/* エラーラベル */
.elabel {
    color:red;
    font-size:small;
    margin:2px;
}
/*===========================================*/
/* 極小デバイス（縦向きモバイル, 576px 未満）*/
@media screen and (max-width: 575.98px) {
    .elabel {
        font-size:x-small;
    }
}

hr.solid {
	border-top: 1px solid #ccc;
}

/*----------------------------------------------------------------
  テイクアウトに関する注意事項ボックススタイル
 ---------------------------------------------------------------*/

.textTakeoutBox {
    border: 2px solid #3366ff;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textTakeoutBox::before {
    background-color: #fff;
    color: #333;
    content: "テイクアウト(お持ち帰り)について";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textTakeoutBox {
    width: 92%;
}

/*----------------------------------------------------------------
  デリバリーに関する注意事項ボックススタイル
 ---------------------------------------------------------------*/

.textDeliveryBox {
    border: 2px solid #3366ff;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textDeliveryBox::before {
    background-color: #fff;
    color: #333;
    content: "デリバリー(配達)について";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textDeliveryBox {
    width: 92%;
}

/*----------------------------------------------------------------
  送料(通販)に関する注意事項ボックススタイル
 ---------------------------------------------------------------*/

.textHaisouBox {
    border: 2px solid #3366ff;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textHaisouBox::before {
    background-color: #fff;
    color: #333;
    content: "送料について";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textHaisouBox {
    width: 92%;
}

/*----------------------------------------------------------------
  代引手数料に関する注意事項ボックススタイル
 ---------------------------------------------------------------*/

.textTesuryoBox {
    border: 2px solid #3366ff;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textTesuryoBox::before {
    background-color: #fff;
    color: #333;
    content: "代引手数料について";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textTesuryoBox {
    width: 92%;
}

@media screen and (max-width: 640px) {

    .textTakeoutBox {
        width: 95%;
    }

    .textDeliveryBox {
        width: 95%;
    }

    .textHaisouBox {
        width: 95%;
    }

    .textTesuryoBox {
        width: 95%;
    }
}

/*----------------------------------------------------------------
  利用規約の同意に関するボックススタイル
 ---------------------------------------------------------------*/

.textShopLawConfirmBox {
    border: 1px solid #b2b2b2;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textShopLawConfirmBox::before {
    background-color: #fff;
    color: #333;
    content: "利用規約のご確認";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textShopLawConfirmBox {
    width: 90%;
}

/*----------------------------------------------------------------
  メール受信許可設定のお願いに関するボックススタイル
 ---------------------------------------------------------------*/

.textBlockMailInfoBox {
    border: 1px solid #b2b2b2;
    border-radius: 5px;
    padding: 10px;
    position: relative;
}

.textBlockMailInfoBox::before {
    background-color: #fff;
    color: #333;
    content: "メール受信許可設定のお願い";
    font-weight: bold;
    left: 30px;
    padding: 3px 10px;
    position: absolute;
    top: -15px;
}

.textBlockMailInfoBox {
    width: 90%;
}

/*EOF*/