@charset "utf-8";
/* CSS Document */

section.cart { }
section.cart .container { max-width: 1140px; padding: 20px 15px 80px; }
section.cart h1 { margin: 0 0 20px; font-size: 26px; }
section.cart a { }
section.cart p { font-size: 13px; }
section.cart li { font-size: 13px; }
section.cart td { font-size: 13px; }

section.cart .bag { display: flex; column-gap: 60px; justify-content: space-between; /*flex-wrap: wrap;*/ }
@media screen and (max-width:768px) {
section.cart .bag { flex-wrap: wrap; }
}
section.cart .bag .item { display: flex; padding: 15px 0; border-bottom: 1px solid #ddd; /*flex-wrap: wrap;*/ }
/*section.cart .bag .item:first-of-type { padding-top: 0; }*/
section.cart .bag .item:last-of-type { margin-bottom: 15px; }

section.cart .item_list { flex: 3 1 auto; flex-wrap: wrap; }

section.cart .item_list .no_wrap { display: flex; flex-wrap: nowrap; }
section.cart .item_list .checkbox { display: flex; align-items: center; padding-right: 20px; padding-left: 2px; }
section.cart .item_list .checkbox input { transform: scale(1.5, 1.5); }
@media screen and (max-width:768px) {
section.cart .item_list .checkbox { display: flex; align-items: start; padding: 3px 10px 0 3px; }
}

section.cart .select_all { margin: 0; padding-bottom: 15px; border-bottom: 1px solid #ddd; }
section.cart .select_all input { display: none; }
section.cart .select_all label { color: #0d6efd; cursor: pointer; }

section.cart .item_list .image { padding-right: 20px; }
section.cart .item_list .image a { display: block; white-space: nowrap; width: 100px; height: 100px; background: #f4f5f6; border-radius: 4px; }
section.cart .item_list .image img { /*border-radius: 10px;*/ }

@media screen and (max-width:768px) {
section.cart .item_list .image { padding-right: 10px; }
section.cart .item_list .image a { width: 60px; height: 60px; }
}

section.cart .item_list .content {  }
section.cart .item_list .content label { display: inline-block; width: 100%; max-width: 70px; }
section.cart .item_list .content .name { margin: 0 0 5px; }
section.cart .item_list .content .insurance { margin: 0 0 5px; }
section.cart .item_list .content .sale { color: red; }
section.cart .item_list .content .insurance .form-select { display: inline-block; font-size: 15px; width: auto; margin-left: 5px; padding: 2px 40px 2px 20px; }

section.cart .item_list .subtotal {  }
section.cart .item_list .subtotal .price { margin: 0; font-size: 15px; white-space: nowrap; }
section.cart .item_list .subtotal .price span { /*font-weight: 900;*/ }
section.cart .item_list .subtotal .price b { /*font-size: 15px;*/ font-weight: normal; }
@media screen and (max-width:768px) {
section.cart .item_list .subtotal { width: 100%; }
}

section.cart .item_list .select_number_of_units { margin: 0; margin-left: auto; display: flex; flex-flow: column; white-space: nowrap; text-align: right; }
section.cart .item_list .select_number_of_units .form-select { display: inline-block; font-size: 15px; width: auto; margin-left: 5px; }
section.cart .item_list .select_number_of_units .trash { margin-top: auto; text-align: right; }
@media screen and (max-width:768px) {
section.cart .item_list .select_number_of_units { margin-bottom: 10px; }
}

section.cart .bag .summary { flex: 1 1 260px; position: sticky; top: 78px; height: 100%; }
section.cart .bag .summary .waku { margin: 0 0 20px; background: #f4f5f6; padding: 30px; border-radius: 4px; }
section.cart .bag .summary .waku table { width: 100%; font-size: 14px; }
section.cart .bag .summary .waku th { padding: 3px 0; text-align: left; font-weight: normal; line-height: 1.3; }
section.cart .bag .summary .waku td { padding: 3px 0; text-align: right; font-weight: normal;  line-height: 1.3; }
section.cart .bag .summary .waku td small { display: block; font-size: 12px; padding-top: 3px; }
section.cart .bag .summary .waku tr.delivery th { padding-bottom: 15px; border-bottom: 1px solid #bbb; }
section.cart .bag .summary .waku tr.delivery td { padding-bottom: 15px; border-bottom: 1px solid #bbb; }
section.cart .bag .summary .waku tr.total th { padding-top: 15px; font-size: 14px; }
section.cart .bag .summary .waku tr.total td { padding-top: 10px; font-size: 20px; font-weight: 900; }
/*
section.cart .rent_period { margin: 0 0 30px; border-radius: 4px; padding: 25px 15px; text-align: center; display: flex; gap: 10px; align-items: center; flex-direction: column; border: 1px solid #ddd; }
*/
section.cart .rent_period { margin: 0; border-radius: 4px; padding: 10px; text-align: center; display: flex; align-items: center; flex-direction: column; }
section.cart .rent_period .title { font-weight: 600; font-size: 14px; }
section.cart .rent_period .period_of_use { display: flex; align-items: flex-end; column-gap: 10px; }
section.cart .rent_period .period_of_use .name { font-size: 13px; }
section.cart .rent_period .period_of_use .sep i { display: block; margin-bottom: 9px; color: #999; }
section.cart .rent_period .period_of_use input.form-control { font-size: 14px; padding: 5px 10px; }
@media screen and (max-width:768px) {
  section.cart .rent_period .period_of_use { align-items:center; }
  section.cart .rent_period .period_of_use .sep { margin-bottom: 0px; }
  section.cart .rent_period .period_of_use input.form-control { padding: 5px; }
}

.middle_msg { background: #fff7e5; padding: 20px; border-radius: 4px; }
.middle_msg .in { background: white; padding: 10px 10px; border-radius: 4px; }


@media screen and (max-width:768px) {
section.cart .bag .item { flex-wrap: wrap; }
/*section.cart .bag .item:last-of-type { border: none; }*/
section.cart .bag .summary { width: 100%; max-width: inherit; }
section.cart .rent_period { /*flex-direction: column; gap: 10px;*/ }
.middle_msg .in { padding: 10px 0px; }
}



section.cart .form_heading:first-of-type { margin-top: 0; }
section.cart .form_heading { margin: 30px auto 20px; padding: 10px 1.5rem 10px; background: #f9f9f9; border-top: 1px solid #ddd; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; }
section.cart .form_heading a { font-size: 14px; font-weight: 400; text-decoration: none; }
section.cart .form_heading a:hover { text-decoration: underline; }
section.cart .form_label { display: block; width: 100%; margin-bottom: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; }
section.cart .form_req { display: inline-block; border-radius: 3px; font-size: 11px; font-weight: 400; line-height: 1; padding: 4px 5px; margin-right: 10px; vertical-align: text-bottom; background: #c00; color: #fff; }
section.cart input.is-required { background: #FDF5F5; }
section.cart input::placeholder { color: #ccc!important; }
@media screen and (min-width: 767.5px) {
  .formText {
    max-width: 282px;
    min-width: 282px;
  }
}
@media screen and (min-width: 767.5px) {
  .formText--long {
    max-width: 584px;
    min-width: 584px;
  }
}





section.cart .charge_details { margin: 0 0 50px; position: sticky; top: 78px; }
section.cart .charge_details .waku { border: 1px solid #ddd; border-radius: 4px; padding: 20px; background-color: #fff; }
section.cart .charge_details .in { padding: 20px; background: #f4f5f6; border-radius: 4px; }
section.cart .charge_details .title { font-size: 14px; font-weight: 500; margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
section.cart .charge_details .period { margin-bottom: 15px; padding-bottom: 20px; border-bottom: 1px solid #ddd; }
section.cart .charge_details .delivery small { display: block; }
section.cart .charge_details .total { font-size: 16px; font-weight: 900; }

@media (max-width: 768px) {
section.cart .charge_details { margin: 0 0 30px; padding: 0px; }
section.cart .charge_details .in { padding: 20px; }
}

section.cart .altIcon { margin-left: 5px; margin-right: 0.2em; }




section.cart .consent { background: #FDF5F5; padding: 20px 15px 15px; border-radius: 4px; }
section.cart .consent p { margin: 0 0 5px; text-align: center; font-weight: 700; font-size: 14px; }
section.cart .consent p:nth-child(2) { text-align: center; font-size: 14px; color: #C00; }
section.cart .consent .in { background: white; padding: 20px 30px; font-weight: 700; border-radius: 4px; }
section.cart .consent .in a { text-decoration: underline; }
section.cart .consent .in input { transform: scale(1.5, 1.5); margin-right: 10px; margin-left: 3px; }




section.collection a { text-decoration: none; }
section.collection .name { font-size: 13px; }
section.collection .fee { font-size: 13px; }
section.collection .fee span { font-size: 15px; }
section.collection .fee .extension { font-size: 12px; }

.coupon ul { margin: 0; padding: 0; list-style-type: none; border-top: 1px solid #ddd; }
.coupon ul li a { padding: 14px 5px 14px 5px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; }
.coupon ul li i.bi-pass { margin-right: 8px; font-size: 17px; transform: rotate(90deg); display: inline-block; }
.coupon ul li i.bi-chevron-right { font-size: 12px; }
.coupon #removeCouponButton:hover { cursor: pointer; }

/* 入力フォームの下に記載する説明用 */
.text_hint { padding-top: 5px; color: #aaa; font-size: 13px; line-height: 1.2; }


.mp_modal input::placeholder { color: #ccc; }
.mp_modal .modal-footer .btn { font-size: 13px; }


/* checkout.html */
/* 申込手続きフォーム カード入力欄 */


#card-form { margin: 15px 0; padding: 40px; border: 1px solid #ddd; border-radius: 4px; width: 100%; max-width: 450px; }
#card-form label { display: block; padding-bottom: 5px; }
#card-form #name-input-id { margin: 0; line-height: 28px; font-size: 1.16em; font-family: 'Noto Sans Japanese', sans-serif; }

#card-form .mp_form_style { margin: 0 0 15px; padding: 5px 10px 2px; border: 1px solid #ddd; border-radius: 4px; }

#card-form-container:not(.modal) #card-form {
  width: inherit!important;
  padding: inherit!important;
  border: inherit!important;
  border-radius: inherit!important;
  box-shadow: inherit!important;
  margin: inherit!important;
}


/* checkout.html 支払方法選択 */
#payment_form .form-check label { width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 15px 15px 15px 40px; }


/* パスワード目玉 */
.password-container { position: relative; }
.password-toggle-icon { position: absolute; right: 15px; /* 右端からの距離 */ top: 50%; transform: translateY(-50%); cursor: pointer; color: #888; }
.password-toggle-icon:hover { color: #333; /* ホバー時の色 */ }


.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
  background: none;
}

/* ぐるぐる演出系 */
#submit-button:disabled {
  cursor: not-allowed;
  opacity: 0.8;
}
.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  vertical-align: middle;
}

.error_message {
  color: red;
  font-weight: bold;
}