@charset "utf-8";

#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 { margin-bottom:1.5em; border-bottom:2px solid #df4c34; }

.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 #eeeae3; background:#fff; }

.categoryList { margin-top:50px; }

.kuroneko_ttl { margin-top:40px; }
.kuroneko_ttl .jp { line-height:1.4; text-align:center; }
.kuroneko_ttl .small { display:block; font-size:.68em; }

.submit { margin:1em 0; }
.submit input[type='submit'] {
  font-size:1em; color:#fff; text-shadow:none; box-shadow:none; border:none; background:#1f3331; -webkit-transition:all .5s; transition:all .5s;
}
.submit input[type="submit"]:hover { background:#1f3331; }
.submit input[type='submit']:focus { outline:none; }
.submit input.disabled { background:#666; border-color:#666; cursor:auto; }
.submit input.disabled:hover { background:#666; }
.submit.add { text-align:center; }

.infoBox { padding:20px; border:1px solid #839694; 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:#eee; border:1px solid #ddd; border-radius:2px; }
.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; line-height:1.6; }
dl.infoData dd + dt { border-top:1px solid #ccc; }
dl.infoData dd p { margin:0; line-height:1.6; }
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:#df4c34; }
.btn_cart_next:hover { color:#fff; text-decoration:none; background:#1f3331; } */
.form.cart .totalBox .btn { text-align:center; }
.form.cart .num_box { padding-right:40px; }
.form.cart input[name^="num"] { max-width:50px; margin:0; padding:10px 7px 10px 8px; }
.form.cart .num-update {
  display: inline-block; width: 18px; height: 18px; margin: 0 .2em; color: #fff; font-size: .7em; font-weight: bold; text-align: center; line-height:1.7; cursor: pointer; border-radius: 50%; background: #1f3331; -webkit-transition: all .5s; transition: all .5s;
}
.form.cart .num-update:hover { opacity:.7; }

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

/*流れ*/
.cartFlow { margin:0 auto 40px; }
.cartFlow li { padding:0 10px; line-height:36px; }
.cartFlow li { background-color:#cedad9; 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 #cedad9;
  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:#1f3331; z-index:1; }
.cartFlow li.current::before { border-left-color:#1f3331; }
.cartFlow li.current::after  { display:none; }
.cartFlow .sp_none { display:inline-block; }

.notice_txt { margin:50px 0 20px; padding:8px; border:1px solid #c30000; color:#c30000; text-align:center; }

/*明細*/
.meisaiBox { margin-top:1.5em; }
.meisaiBox h3 { margin-bottom:.3em; font-size:1.15em; }
.meisaiList li { padding:15px; margin-bottom:10px; border:1px solid #c5c5c5; overflow:hidden; background:#fff; }
.meisaiList li .image { float:left; width:130px; }
.meisaiList li .name { margin:12px 0 5px 140px; padding-left:.5em; font-size:1.2em; line-height:1.8; }
.meisaiList li .name a { color:#000; }
.meisaiList li .name .code { display:block; 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:30%; padding:.1em .5em; font-size:.9em; font-weight:bold; text-align:center; background:#e9ebeb; }
.meisaiList li .data dd { width:70%; padding-left:1em; line-height:1.6; }
.meisaiList li .data .del { padding-left:1em; }
.meisaiList li .data .del.btn { margin-top:10px; padding-left:0; }

.cart2 { overflow:hidden; }

.submit_area { margin-bottom:1.5em; padding:1.5em; background:#f5f5f5; }
.totalBox .userSupp { width:240px; padding:15px; border-right:1px solid #fff; }
.totalBox .totalFee { margin-bottom:1em; padding-bottom:.8em; border-bottom:1px solid #c5c5c5; }
.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; }

.customer_box [class^="box-"] {
  width:48%; padding:20px 40px 30px;
}
.customer_box .conttl2 { margin:0 0 20px; padding-bottom:30px; line-height:1.6; }
.customer_box .conttl2:after { bottom:10px; }
.customer_box .box-new { border:4px double #324947; }
.customer_box .box-new .btn1 { margin-top:30px; }
.customer_box .box-new .disc { line-height:1.8; font-weight:bold; }
.customer_box p { line-height:2; }
.customer_box .txt2 { margin-bottom:15px; }

.sub_dl { margin-top:30px; }
.sub_dl .row { display:100%; }
.sub_dl dt { width:120px; }
.sub_dl dd { width:100%; -webkit-box-flex:1; flex:1; }

#products .customer_input .btn1 { margin-top:30px; }


/*ログイン*/
.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 { padding:25px 40px; border:1px solid #ddd; background:#f5f5f5; }
.customer_box { margin-bottom:50px; }
.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:#1f3331; -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 #c5c5c5; }

.subContents .submit input { margin:20px 0 10px; font-family:"tbcgothic-std",sans-serif }
#checkList { padding:.8em 1em; font-size:.8em; border:1px solid #1f3331; 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; }

/*フォーム*/
.inputArea > dt, .inputArea > dd { padding:16px 40px; border-bottom:1px solid #ccc; }
.inputArea > dt { width:240px; color:#1f3331; text-align:center; font-weight:bold; background:#f5f2e9; }
.inputArea > dd { width:calc(100% - 240px); }
.mhultiple input[type="text"] { margin:5px 0; }
.inputArea .help { margin:0; }
.submit input, .submit button {
  padding:.6em 3em; color:#FFF; background:#222; border:none; cursor:pointer;
}



/*960px 以上 */
@media screen and (min-width: 960px) {
  .mainContents { float:left; width:100%; margin-right:-350px; padding-right:350px; }
  .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: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; }

  .customer_box [class^="box-"] { width:100%; }
  .customer_box .conttl2:after { bottom:0; }
  #products .customer_input .btn1 { margin:30px auto 0; }
  .customer_box .box-new { margin-top:40px; padding:1em; }
  .customer_box .conttl2 { padding-top:10px; padding-bottom:15px; }

  /*流れ*/
  .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:#f2f5f5; }
  .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; }

  /*フォーム*/
  .inputArea > dt, .inputArea > dd { width:100%; padding:.8em 0; }

}