@charset "utf-8";


/* ========================
 * Common Style
 * ========================*/
/* Text box and Button */
input[type="submit"] { /* Foundation上書き */
    border-radius: 5px;
}
.continue_shopping_button, .back_cart_button, .back_to_customer_button, .back_to_delivery_button {
    background: #ddd;
}
.continue_shopping_button:hover, .back_cart_button:hover, .back_to_customer_button:hover, .back_to_delivery_button:hover {
    background: #ccc;
}
.to_customerinfo_button, .to_deliveryinfo_button, .to_confirm_button, .checkout_button {
    background: #4a72a6;
    color: #fff;
}
.to_customerinfo_button:hover, .to_deliveryinfo_button:hover, .to_confirm_button:hover, .checkout_button:hover {
    background: #3b5b84;
}
.skubutton {
    background: #4a72a6;
    color: #fff;
    text-align: center;
    border: 0;
    padding: 1rem 2rem 1.0625rem 2rem;
    cursor: pointer;
    transition: .4s;
}
.skubutton:hover {
    background: #3b5b84;
}
input[name="previous"],
input[name="customerinfo"],
input[name="backCart"],
input[name="deliveryinfo"],
input[name="backCustomer"],
input[name="confirm"],
input[name="backDelivery"],
input[name="purchase"] {
    text-align: center;
    border: 0;
    padding: 1rem 2rem 1.0625rem 2rem;
    font-size: 1rem;
    cursor: pointer;
    margin: .5em;
    border-radius: 5px;
}

/* Background */
#cart th,
#customer-info th,
#delivery-info th,
#info-confirm th {
    background: #f3f3f3;
}

/* Font */
#cart th {
    color: #333;
    white-space: nowrap;

}
#customer-info th,
#delivery-info th,
#confirm_table th {
	font-size: .875rem;
	color: #333;
}
#customer-info td,
#delivery-info td {
    font-size: .875rem;
}

/* Display */
#inside-cart .send,
#customer-info .send,
#delivery-info .send,
#info-confirm .send {
    border-top-width: 0;
}

/* ========================
 * Cart Page
 * ========================*/
#cart table {
    width: 100%;
    border-bottom: 0;
    border-right: 0;
    border-top-color: #e6e6e6;
    border-left-color: #e6e6e6;
}
#cart th {
    font-weight: bold;
}
#cart th, #cart td {
    border-top-width: 0;
    border-left-width: 0;
    border-right-color: #e6e6e6;
    border-bottom-color: #e6e6e6;
    word-break: normal;
}
#cart input[type="text"] {
    margin-bottom: 0;
}
#customer-info td,
#delivery-info td {
    padding-top: 1rem;
}
#cart .thumbnail {
	width: 15%;
}
#cart_table img {
    width: 100px;
}
.delButton {
    background: transparent;
    cursor: pointer;
    border: 0;
}
#cart tfoot th {
    font-size: 1em;
    font-weight: bold;
}
.upbutton {
    margin-bottom: .5em;
}
input[name="upButton"] {
    border: 0;
    padding: .5em 1em;
}
input[name="upButton"]:hover {
    background-color: #ccc
}

/* ========================
 * Customer Page
 * ========================*/
#customer-info table {
    width: 100%;
    margin-top: 0;
}
.customer_form input[type="radio"], .customer_form input[type="checkbox"] {
    height: 1rem;
    margin: 0 .5rem;
    vertical-align: middle;
}

/* ========================
 * Delivery Page
 * ========================*/
#delivery-info #time textarea,
#delivery-info .notes {
    width: 100%;
}
#delivery-info .customer_form label {
    font-size: 1rem;
}
#delivery-info .customer_form dt {
    font-size: 1rem;
}

#delivery-info .customer_form dd {
    font-size: .875rem;
    padding: .5rem 0 .5rem 1.875rem;
}
#delivery-info table.customer_form {
    margin-bottom: 30px;
}


/* ========================
 * Confirm Page
 * ========================*/
#confirm_table td {
    font-size: 1em;
}
#confirm_table .ttl {
    background-color: #e6e6e6;
}
#confirm_table h3 {
    text-align: center;
    font-size: 1.25em;
    line-height: 2.5em;
    color: #D45252;
}
#confirm_table th {
    padding-top: 1em;
    padding-bottom: 1em;
}


/* =======================================================================
 * Resposive
 * =======================================================================*/
@media /* Under 1024px Medium clumun */
only screen and (max-width : 64em){
    #customer-info .customer_form input,
    #customer-info .customer_form tr.inp2 input,
    #customer-info select,
    #delivery-info select,
    #delivery-info #delivery_table input,
    #delivery-info #delivery_table tr.inp2 input {
        width: 100%;
    }
    #customer-info .customer_form tr.inp1 input {
        width: 90%;
        margin-left: 5px;
    }
}
@media /* Under 640px Small clomun */
only screen and (max-width : 40.061em){
	#customer-info th, #customer-info td,
    #delivery-info th, #delivery-info td,
    #confirm_table th, #confirm_table td {
		display: block;
		width: 100%;
        border-bottom: 0;
	}
}