@charset "utf-8";

#contents { position:relative; padding: 50px 0; }
.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 { margin-bottom:1.5em; border-bottom:2px solid #698aab; font-size: 1.6em; font-weight: bold; }

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

.thanksBox { max-width:800px; margin:30px auto 40px; padding:1.5em 2em; border:2px solid #f6f6f6; background:#fff; }
.thanksBox .more_btn { margin-top: 30px; }

.categoryList { margin-top:50px; }

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

.infoBox { padding:20px; border:1px solid #ddd; background:#fff; }
.infoBox + .infoBox { margin-top:20px; }
.infoBox h3 { font-size:1.1em; border-bottom:1px solid #ccc; }
.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:#f1f7fb; border:1px solid #ddd; }
.infoBox .note { padding:8px; background-color:#fff7e0; }

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

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

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

.btn_cart_back { display:block; padding:.5em 1em; color:#333; text-align:center; border:1px solid #698aab; background:#fff; }
.btn_cart_back:hover { text-decoration:none; color:#333; background:#eff3f8; }

/*流れ*/
.cartFlow { margin:-10px auto 30px; }
.cartFlow li { padding:0 10px; line-height:36px; }
.cartFlow li { background-color:#eff3f8; position:relative; }
.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 #eff3f8;
  z-index:2;
  }
.cartFlow li:not(:last-child)::after { right:-10px; border-left-color:#fff; z-index:1; }
.cartFlow li.finish  { background-color:#eee; }
.cartFlow li.finish::before { border-left-color:#eee; }
.cartFlow li.current { color:#fff; background-color:#698aab; z-index:1; }
.cartFlow li.current::before { border-left-color:#698aab; }
.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 #f6f6f6; overflow:hidden; background:#fff; }
.meisaiList li .image { float:left; width:130px; }
.meisaiList li .name { margin:0 0 5px 140px; padding-left:.5em; }
.meisaiList li .name a { color:#000; text-decoration: none; }
.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:#f6f6f6; }
.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:#f6f6f6; }
.totalBox .userSupp { width:240px; padding:15px; border-right:1px solid #fff; }
.totalBox .totalFee { margin-bottom:1em; padding-bottom:.8em; border-bottom:1px solid #223355; }
.totalBox .totalFee.free { padding-top:20px; }
.totalBox .totalFee dl { max-width:400px; }
.totalBox .totalFee dt { width:43%; }
.totalBox .totalFee dd { width:57%; }
.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:#000; font-size:.85em; border:1px solid #ddd; border-radius:5px; background:#eee; }
.del a:hover { background:#ddd; text-decoration:none; }

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

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

#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:#666; border-color:#666; }

/* cart1 */
.formBox.customer_info { margin-bottom:20px; padding-top:25px; padding-bottom:25px; border:1px solid #ddd; background:#f5f5f5; }
.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:#fff; border:none; background:#666; -webkit-transition:all .5s; transition:all .5s; -webkit-appearance:none; border-radius:0; }
.customer_input input[name='customer']:hover { background:#333; }
.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 #ccc; }
.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:#fff; border-top:1px solid #698aab; }

.subContents .submit input { margin:20px 0 10px; font-family:"tbcgothic-std",sans-serif }
#checkList { padding:.8em 1em; font-size:.9em; border:2px solid #698aab; background:#fff; }
#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) {
  .mainContents { float:left; width:640px; }
  .subContents { float:right; width:320px; }
}

/*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:15px 20px 20px; }

  .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:#f6f6f6; }
  .meisaiList li .data dt { padding:0; background:none; }
  .meisaiList li .data dd { border-left:1px solid #fff; }

  .totalBox .userSupp { width:100%; border-top:1px solid #fff; 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; }

}