/* =====================================================
  田清窯【決済・カートページ CSS】上書き版

  【貼り付け場所】
  管理画面 → デザイン → テンプレート編集
  → ショッピングカート → CSS
  既存のCSSをすべて消して、このコードに置き換えてください。

  ※ 元のCSSの構造は保持しつつ、田清窯のトーンに上書きしています。
===================================================== */

@charset "UTF-8";

/* =====================================================
  リセット・ベース
===================================================== */
*{margin:0;padding:0;box-sizing:border-box;}

body{
  background:#f5f0e8;
  color:#1c1410;
  font-family:Noto Sans JP,Hiragino Kaku Gothic ProN,sans-serif;
  font-weight:300;
  font-size:14px;
  line-height:1.8;
  padding:0;
}

ul{list-style-type:none;}
form{margin:0;padding:0;}
img{border:none;max-width:100%;height:auto;}
a:link,a:visited,a:active{color:#b8960a;text-decoration:none;}
a:hover{color:#b5382a;text-decoration:none;}

/* =====================================================
  ラッパー
===================================================== */
#wrapper{
  max-width:860px;
  margin:0 auto;
  padding:1.5rem 1rem;
  text-align:left;
}

/* =====================================================
  ヘッダー
===================================================== */
#header{
  background:#1c1410;
  padding:1rem 1.5rem;
  margin-bottom:2rem;
  max-width:none;
  width:100%;
}
.shop_title a{
  font-family:Shippori Mincho,serif;
  font-size:1.2rem;
  letter-spacing:.2em;
  color:#fdfbf8;
  font-weight:500;
  text-decoration:none;
  background:none;
  margin:0;
}

/* 買い物ステップ */
#shopping_step{
  margin:0 0 2rem;
  padding:.8rem 1rem;
  background:#fdfbf8;
  border:1px solid rgba(90,74,58,.15);
  font-size:.78rem;
  color:#5a4a3a;
  font-family:Noto Serif JP,serif;
  letter-spacing:.06em;
}

/* =====================================================
  見出し h2
===================================================== */
h2{
  background:#1c1410;
  padding:.7rem 1rem;
  color:#fdfbf8;
  font-size:.88rem;
  font-family:Noto Serif JP,serif;
  font-weight:400;
  letter-spacing:.1em;
  text-align:left;
  margin:1.5rem 0 0;
}

/* =====================================================
  エラー
===================================================== */
.errorbox{
  background:#fdfbf8;
  border:1px solid #b5382a;
  padding:.9rem 1rem;
  color:#b5382a;
  font-size:.82rem;
  font-weight:400;
  text-align:left;
  margin:1.5rem 0;
}
.errormsg{color:#b5382a;font-size:.78rem;}

/* =====================================================
  カート内商品テーブル
===================================================== */
#cart{
  width:100%;
  border-collapse:collapse;
  background:#fdfbf8;
  border:1px solid rgba(90,74,58,.15);
}

/* 商品画像 */
td.photo{
  padding:.5rem;
  background:#fdfbf8;
  border-bottom:1px solid rgba(90,74,58,.12);
  width:70px;
}
/* 商品名 */
td.name{
  background:#fdfbf8;
  padding:.6rem .9rem;
  border-right:1px solid rgba(90,74,58,.1);
  border-bottom:1px solid rgba(90,74,58,.12);
  text-align:left;
  font-family:Noto Serif JP,serif;
  font-size:.82rem;
  color:#1c1410;
}
/* 価格 */
td.price{
  background:#fdfbf8;
  padding:.6rem .9rem;
  border-right:1px solid rgba(90,74,58,.1);
  border-bottom:1px solid rgba(90,74,58,.12);
  text-align:right;
  font-family:Georgia,serif;
  font-size:.88rem;
  color:#1c1410;
}
td.price .indidelivery{font-size:.72rem;color:#b8960a;}
/* 数量 */
td.unit{
  background:#fdfbf8;
  padding:.6rem .9rem;
  border-right:1px solid rgba(90,74,58,.1);
  border-bottom:1px solid rgba(90,74,58,.12);
  text-align:right;
  font-size:.82rem;
}
/* 変更・削除 */
td.delete{
  background:#fdfbf8;
  padding:.6rem .9rem;
  border-right:1px solid rgba(90,74,58,.1);
  border-bottom:1px solid rgba(90,74,58,.12);
  text-align:center;
}
/* 小計 */
td.subtotal,td.totalprice{
  background:#fdfbf8;
  padding:.6rem .9rem;
  border-bottom:1px solid rgba(90,74,58,.12);
  text-align:right;
  font-family:Georgia,serif;
  font-size:.88rem;
  color:#1c1410;
}

/* =====================================================
  フォームテーブル
===================================================== */
.table_form{
  width:100%;
  margin:1.5rem auto 0;
  border-top:1px solid rgba(90,74,58,.2);
  border-right:1px solid rgba(90,74,58,.2);
  border-left:1px solid rgba(90,74,58,.2);
  border-collapse:collapse;
}

/* セル：見出し列 */
.cell_1_c,.cell_1_l,.cell_1_r{
  background:#f5f0e8;
  padding:.7rem .9rem;
  border-bottom:1px solid rgba(90,74,58,.15);
  border-right:1px solid rgba(90,74,58,.12);
  color:#5a4a3a;
  font-family:Noto Serif JP,serif;
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.04em;
}
.cell_1_c{text-align:center;}
.cell_1_l{text-align:left;}
.cell_1_r{text-align:right;}

/* セル：入力列 */
.cell_2_c,.cell_2_l,.cell_2_r{
  background:#fdfbf8;
  padding:.7rem .9rem;
  border-bottom:1px solid rgba(90,74,58,.12);
  font-size:.82rem;
  color:#1c1410;
}
.cell_2_c{text-align:center;}
.cell_2_l{text-align:left;}
.cell_2_r{text-align:right;}

/* セル：合計行 */
.cell_3{
  background:#fdfbf8;
  padding:1rem .9rem .6rem;
  font-size:1rem;
  font-family:Georgia,serif;
  font-weight:400;
  border-bottom:1px solid #1c1410;
  color:#1c1410;
}

/* =====================================================
  配送・決済方法選択
===================================================== */
.select_rb{
  background:#fdfbf8;
  border:1px solid rgba(90,74,58,.2);
  padding:.7rem .9rem;
  font-size:.82rem;
  color:#1c1410;
  font-weight:400;
  margin-bottom:.5rem;
  font-family:Noto Serif JP,serif;
}
.select_rb .button{padding:.3rem;vertical-align:middle;}
.select_ex{margin:.6rem .9rem 1rem;}

/* =====================================================
  合計金額
===================================================== */
.grand_total,
#total_area,
.total_price{
  font-family:Georgia,serif;
  font-size:1.1rem;
  color:#1c1410;
  text-align:right;
  padding:1rem .9rem;
  background:#fdfbf8;
  border-bottom:2px solid #1c1410;
}
.payment_price{
  border-bottom:1px solid #1c1410;
  text-align:right;
  float:right;
  margin:1.5rem 0 3rem;
  padding-bottom:.5rem;
  color:#1c1410;
}
.payment_price .number{
  font-family:Georgia,serif;
  font-weight:400;
  font-size:1.2rem;
  margin-left:2rem;
}

/* =====================================================
  必須マーク
===================================================== */
.must{
  margin-left:.4rem;
  color:#b5382a;
  font-size:.72rem;
}

/* =====================================================
  入力欄
===================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select{
  border:1px solid rgba(90,74,58,.25);
  padding:.5rem .7rem;
  font-family:Noto Sans JP,sans-serif;
  font-size:.82rem;
  background:#fdfbf8;
  color:#1c1410;
  border-radius:2px;
  outline:none;
  transition:border-color .2s;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus{border-color:#b8960a;}

/* =====================================================
  ボタン
===================================================== */
/* 次へ・確認・注文するボタン（メイン） */
input[type="submit"],
button[type="submit"],
.btn_order,
.button_order,
input.button_next{
  padding:.85rem 2rem;
  background:#b5382a;
  color:#fdfbf8;
  border:none;
  border-radius:2px;
  font-family:Noto Serif JP,serif;
  font-size:.85rem;
  letter-spacing:.15em;
  cursor:pointer;
  transition:background .2s;
}
input[type="submit"]:hover,
button[type="submit"]:hover{background:#8a2a1e;}

/* 戻るボタン */
input[type="button"],
input.button_back,
.button_back{
  padding:.7rem 1.5rem;
  background:#fdfbf8;
  color:#5a4a3a;
  border:1px solid rgba(90,74,58,.25);
  border-radius:2px;
  font-family:Noto Serif JP,serif;
  font-size:.8rem;
  letter-spacing:.1em;
  cursor:pointer;
  transition:all .2s;
}
input[type="button"]:hover{background:#1c1410;color:#fdfbf8;border-color:#1c1410;}

/* =====================================================
  注文完了
===================================================== */
#order_end{text-align:center;padding:2rem 0;}
#order_end .order_number{
  width:320px;
  margin:0 auto 1.5rem;
  background:#f5f0e8;
  border:1px solid rgba(90,74,58,.2);
  padding:1.5rem;
  font-family:Georgia,serif;
  font-size:1rem;
  color:#1c1410;
}
#order_end .order_cap{
  font-size:.85rem;
  line-height:2;
  color:#5a4a3a;
  margin-bottom:1rem;
}

/* =====================================================
  送料無料メッセージ
===================================================== */
#freeshopping ul{
  background:#f5f0e8;
  border:1px solid rgba(184,150,10,.3);
  padding:.8rem 1rem;
  margin-top:.8rem;
  color:#b8960a;
  font-family:Noto Serif JP,serif;
  font-size:.82rem;
  font-weight:400;
  text-align:right;
}

/* =====================================================
  情報ボックス
===================================================== */
.info{
  border:1px solid rgba(90,74,58,.2);
  background:#f5f0e8;
  padding:.7rem 1rem;
  margin:1rem auto;
  color:#5a4a3a;
  font-size:.8rem;
  text-align:left;
}

/* =====================================================
  特定商取引法リンク
===================================================== */
.tokutei_link{
  background:#f5f0e8;
  border:1px solid rgba(90,74,58,.15);
  padding:.8rem 1rem;
  font-size:.78rem;
  color:#5a4a3a;
}

/* =====================================================
  会員ログインボックス（決済時）
===================================================== */
dl.member_login{
  width:380px;
  border:1px solid rgba(90,74,58,.2);
  margin:1.5rem auto 0;
}
dl.member_login dt{
  background:#f5f0e8;
  padding:.8rem 1rem;
  font-family:Noto Serif JP,serif;
  font-weight:400;
  font-size:.85rem;
  text-align:center;
  color:#1c1410;
  letter-spacing:.06em;
}
dl.member_login dd{padding:1rem;}
dl.member_login table.login_form input.button{
  cursor:pointer;
  background:#b5382a;
  border:none;
  padding:.5rem 1rem;
  color:#fff;
  font-family:Noto Serif JP,serif;
  font-size:.78rem;
  letter-spacing:.1em;
  border-radius:2px;
  transition:background .2s;
}
dl.member_login table.login_form input.button:hover{background:#8a2a1e;}

/* =====================================================
  フッター
===================================================== */
#copyright{
  border-top:1px solid rgba(90,74,58,.15);
  padding-top:1rem;
  margin-top:2rem;
  text-align:center;
  clear:both;
  font-family:Georgia,serif;
  font-size:.65rem;
  color:rgba(28,20,16,.35);
  letter-spacing:.1em;
}

/* =====================================================
  レスポンシブ（スマホ対応）
===================================================== */
@media(max-width:600px){
  body{padding:0;}
  #wrapper{padding:1rem .8rem;}
  #header{padding:.8rem 1rem;}
  .table_form,.cell_1_l,.cell_1_c,.cell_1_r,.cell_2_l,.cell_2_c,.cell_2_r{
    display:block;width:100%;border-right:none;
  }
  .cell_1_l,.cell_1_c,.cell_1_r{background:#f5f0e8;}
  .payment_price{float:none;width:100%;margin:1rem 0;}
  dl.member_login{width:100%;}
  input[type="submit"]{width:100%;}
}