@charset "utf-8";

#main{ padding-bottom: 2rem; background-color: #e3d2cd; }

#shopping.cart .main-wrap-pagettl { height: 180px; margin-bottom: 2rem; }
#shopping.cart .main-wrap-pagettl .pagettl { width: 120px; height: 120px; font-size: 1.8rem; }

#contents { position:relative; }
.contents.cart { max-width:960px; margin:0 auto; }
.contents.narrow { max-width:726px; margin:0 auto; }

.contents.cart .t_mark { margin-bottom:30px; }
.contents.cart .recent_products { margin-top:50px; }

.ttl-cart { text-align: center; margin-bottom:1.5em; text-align: center;}
.ttl-cart>span { display: inline-block; padding: 0 0.3em; border-bottom:2px solid #985535; }

.errorBox { margin:40px auto; padding:10px 15px; background:#e3c3c3; border:1px solid #924343; }
.errorBox.narrow { max-width:760px; }

.thanksBox { max-width:900px; margin:30px auto 40px; padding:1.5em 2em; border:2px solid #d4cfc5; background:#e0e0e0; }

.categoryList { margin-top:50px; }

.submit { margin:1em 0; }
.submit input[type='submit'] { padding:.5em 1em; color:#e0e0e0; font-family:inherit; font-size:1em; -webkit-transition:all .5s; transition:all .5s; border:none; border-radius:0; background:#985535; -webkit-appearance:none; }
.submit input[type="submit"]:hover { background:#dfa990; }
.submit input[type='submit']:focus { outline:none; }
.submit input.disabled { background:#5a5a5a; border-color:#5a5a5a; cursor:auto; }
.submit input.disabled:hover { background:#5a5a5a; }

.infoBox { padding:20px; border:1px solid #c2c2c2; background:#e0e0e0; }
.infoBox + .infoBox { margin-top:20px; }
.infoBox h3 { font-size:1.1em; border-bottom:1px solid #b4b4b4; }
.infoBox.flex > div { width:48%; }
.infoBox p + p.popup { margin-top:-.8em; }
.infoBox p:last-child { margin-bottom:0; }
.infoBox .name { font-size:1.1em; }
.infoBox span.popup { margin-left:1em; }
.infoBox .popup a { display:inline-block; padding:0 8px; font-size:.9em; line-height:2; text-decoration:none;  background-color:#ccdbe5; border:1px solid #c2c2c2; }
.infoBox .note { padding:8px; text-align: inherit; background-color:#ede0b8; }

.white-popup { width:auto; max-width:600px; margin:20px auto; padding:20px; background:#e0e0e0; position:relative; }
.white-popup.send { max-width:760px; }

dl.infoData { border:1px solid #b4b4b4; }
dl.infoData dt { padding:5px 8px; background-color:#d3d3d3; border-bottom:1px solid #b4b4b4; }
dl.infoData dt label { width:100%; }
dl.infoData dd { padding:8px; }
dl.infoData dd + dt { border-top:1px solid #b4b4b4; }
dl.infoData dd p { margin:0; }
dl.infoData dd p + p { margin-top:1em; }

.btn_cart_next { display:block; padding:.5em 1em; color:#e0e0e0; text-align:center; font-family:"tbcgothic-std",sans-serif; background:#985535; }
.btn_cart_next:hover { color:#e0e0e0; text-decoration:none; background:#dfa990; }

.btn_cart_back { display:block; padding:.5em 1em; color:#2d2d2d; text-align:center; font-family:'tbcgothic-std',sans-serif; border:1px solid #bead90; background:#e0e0e0; }
.btn_cart_back:hover { text-decoration:none; color:#2d2d2d; background:#f1e1c6; }

/*流れ*/
.cartFlow { margin:-10px auto 30px; }
.cartFlow li { padding:0 10px; line-height:36px; }
.cartFlow li { background-color: #e0e0e0; position:relative; color: }
.cartFlow li:not(:first-child) { padding-left:17px; }
.cartFlow li:not(:last-child)::before,
.cartFlow li:not(:last-child)::after {
  content:""; position:absolute; top:50%; right:-9px; width:0; height:0; margin-top:-18px;
  border-top:18px solid transparent;
  border-bottom:18px solid transparent;
  border-left:9px solid #e0e0e0;
  z-index:2;
  }
.cartFlow li:not(:last-child)::after { right:-10px; border-left-color:#e3d2cd; z-index:1; }
.cartFlow li.finish  { background-color:#d9c8c0; color: inherit; }
.cartFlow li.finish::before { border-left-color:#d9c8c0; }
.cartFlow li.current { color:#e0e0e0; background-color:#985535; z-index:1; }
.cartFlow li.current::before { border-left-color:#985535; }
.cartFlow li.current::after  { display:none; }

/*明細*/
.meisaiBox { margin-top:1.5em; }
.meisaiBox h3 { margin-bottom:.3em; font-size:1.15em; }
.meisaiList li { padding:15px; margin-bottom:10px; border:2px solid #d4cfc5; overflow:hidden; background:#e0e0e0; }
.meisaiList li .image { float:left; width:130px; }
.meisaiList li .name { margin:0 0 5px 140px; padding-left:.5em; }
.meisaiList li .name a { color:#000000; }
.meisaiList li .name .code { font-size:.8em; margin-right:.8em; }
.meisaiList li .data { margin-left:140px; max-width:400px; padding:8px; font-size:.95em; }
.meisaiList li .data > * { margin-bottom:3px; }
.meisaiList li .data dt { width:20%; padding:.1em .5em; font-size:.9em; font-weight:bold; text-align:center; background:#d4cfc5; }
.meisaiList li .data dd { width:80%; padding-left:1em; }
.meisaiList li .data .del { padding-left:1em; }

.submit_area { margin-bottom:1.5em; padding:1.5em; background:#e0e0e0; }
.totalBox .userSupp { width:240px; padding:15px; border-right:1px solid #e0e0e0; }
.totalBox .totalFee { margin-bottom:1em; padding-bottom:.8em; border-bottom:1px solid #bdb8b1; }
.totalBox .totalFee.free { padding-top:20px; }
.totalBox .totalFee dl { max-width:400px; }
.totalBox .totalFee dt { width:50%; }
.totalBox .totalFee dd { width:50%; }
.totalBox .totalFee dd::before { content:"："; }
.totalBox .totalFee .price em { font-size:1.2em; }
.totalBox .shippingFree { margin:0; }
.totalBox .shippingFree span { font-size:1.05em; }
.totalBox .shippingFree em { font-size:1.2em; }

.del a { padding:.3em .8em; color:#000000; font-size:.85em; border:1px solid #c2c2c2; border-radius:5px; background:#d1d1d1; }
.del a:hover { background:#c2c2c2; text-decoration:none; }

.btn_continue { margin:0 1.5em; font-size:.9em; }

/*ログイン*/
.loginBox h3 { font-size:1.15em; border-bottom:1px solid #b4b4b4; }
.loginBox > .user { padding:20px 30px; background-color:#ccdbe5; }
.loginBox > .first { margin-top:50px; padding:20px 30px; background-color:#dbdbdb; }

#loginForm { max-width:540px; margin:auto; }
#loginForm dl > * { padding:2px; }
#loginForm dt { width:30%; }
#loginForm dd { width:70%; }
#loginForm dd input { padding:10px; border-radius: 2px; }
#loginForm .submit { margin:1em 0 2em; }
#loginForm #btnLogin { min-width:200px; }

.loginBox .first a.guest { background-color:#5a5a5a; border-color:#5a5a5a; }

/* cart1 */
.formBox.customer_info { margin-bottom:20px; padding-top:25px; padding-bottom:25px; border:1px solid #50342c; background:#e0e0e0; }
.formBox.customer_info p { margin:0 0 .5em; font-size:.85em; }
.customer_input dt { margin-right:.8em; }
.customer_input dd { margin-right:1.2em; }
.customer_input input[name='customer'] { padding:.4em 1em; color:#e0e0e0; border:none; background:#50342c; -webkit-transition:all .5s; transition:all .5s; -webkit-appearance:none; border-radius:0; }
.customer_input input[name='customer']:hover { background:#744c3f; }
.customer_input input[name="email"] { width:15em; }
.customer_input input[name="pass"] { width:8em; }

/*cart2*/
.shippingForm dl > * { padding:0 10px; }
.shippingForm dt:not(.wide) { width:140px; }
.shippingForm dd:not(.wide) { width:calc(100% - 140px); }
.shippingForm dd select { width:98%; }

.noshiForm { padding-top:1em; }
.noshiForm dt { margin-bottom:.5em; padding-bottom:.2em; font-weight:bold; border-bottom:1px solid #b4b4b4; }
.noshiForm dd { margin-bottom:1.5em; }
.noshiForm dd.radio label:not(:last-of-type) { width:24%; }
.noshiForm .help { margin:.5em 0 0; font-size:.9em; }
.noshiForm input { font-size:1em; }

.subtotalData > * { width:50%; padding:0 8px; }
.subtotalData dd { text-align:right; }
.subtotalData .total { padding:5px 8px; font-size:1.1em; font-weight:bold; background-color:#e9e1ce; border-top:1px solid #bdb099; }

.subContents .submit input { margin:20px 0 10px; font-family:"tbcgothic-std",sans-serif }
#checkList { padding:.8em 1em; font-size:.9em; border:2px solid #9d872e; background:#e0e0e0; }
#checkList li { margin-left:1em; text-indent:-1em; }
#checkList label { display:inline; }
#checkList input[type="checkbox"] { margin-right:3px; }

.kuronekoBox .sub { font-weight:bold; font-size:1.1em; text-align:center; }

/*960px 以上 */
@media screen and (min-width: 960px) {
#shopping.cart .main-wrap-pagettl { height: 100px; }
#shopping.cart .main-wrap-pagettl .pagettl { width: 120px; height: 120px; }

  .mainContents { float:left; width:64%; }
  .subContents { float:right; width:32%; }
}

/*959px 以下  600px-959px */
@media screen and (max-width: 959px) {
  .contents.cart .t_mark { margin-bottom:20px; }
  .totalBox .userSupp { width:200px; }

  .cartFlow .sp_none { display:inline; }

  .formBox.customer_info { padding:25px; }
  .customer_input input[name="email"] { width:12em; }
}

/*599px 以下*/
@media screen and (max-width: 599px){
  .thanksBox { padding:10px 15px; }

  .infoBox { padding:15px; }
  .infoBox.flex > div { width:100%; }
  .infoBox.flex > div + div { margin-top:10px; }

  .formBox.customer_info { padding:1em; }
  .customer_input dl { margin-bottom:1em; }
  .customer_input dt { width:8em; font-size:.85em; }
  .customer_input dd { margin-right:0; }
  .customer_input input[type="submit"] { margin:0 auto; }

  /*流れ*/
  .cartFlow { margin:0 -15px 20px; }
  .cartFlow li { font-size:.75em; padding:0 6px; line-height:24px; }
  .cartFlow li:not(:first-child) { padding-left:10px; }
  .cartFlow li:not(:last-child) { padding-right:4px; }
  .cartFlow li:not(:last-child)::before,
  .cartFlow li:not(:last-child)::after {
    right:-6px; margin-top:-12px;
    border-top-width:12px; border-bottom-width:12px; border-left-width:6px;
    }
  .cartFlow li:not(:last-child)::after { right:-7px; }

  /*明細*/
  .meisaiBox h3 { padding-left:10px; }
  .meisaiList li .image { margin-bottom:10px; }
  .meisaiList li .name .code { display:block; margin-left:0; }
  .meisaiList li .data { clear:both; margin-left:0; background:#dcd5ca; }
  .meisaiList li .data dt { padding:0; background:none; }
  .meisaiList li .data dd { border-left:1px solid #e0e0e0; }

  .totalBox .userSupp { width:100%; border-top:1px solid #e0e0e0; border-right:none; order:2; }
  .totalBox .totalFee { padding:20px 15px; order:1; }

  /*ログイン*/
  .loginBox > .user { padding:20px 15px; }
  .loginBox > .first { padding:20px 15px; }
  #loginForm dt { width:100%; padding:8px 0 0; line-height:1.2; }
  #loginForm dd { width:100%; padding:0; }

  /* 特商法 */
  .tokuteip #contents{ margin-top:3em; }

}