/* ============================
 *
 *     Payment
 *
 * ============================ */
/* =================================
 *
 *     Paymemt selector module
 *
 * ================================= */
.spr-lbl {
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
}

.sprite-payment {
  display: inline-block;
  background: url(../settle/logo/sprite_payment.png);
  vertical-align: top;
}

.spr-pymt-chiba {
  width: 91px;
  height: 49px;
  background-position: 0 0;
}

.spr-pymt-circlek {
  width: 101px;
  height: 53px;
  background-position: 0 -49px;
}

.spr-pymt-daily {
  width: 79px;
  height: 53px;
  background-position: 0 -102px;
}

.spr-pymt-famima {
  /*width: 102px;*/
  width: 127px;
  height: 53px;
  background-position: 0 -155px;
}

.spr-pymt-japannet {
  width: 99px;
  height: 52px;
  background-position: 0 -208px;
}

.spr-pymt-jibun {
  width: 94px;
  height: 52px;
  background-position: 0 -260px;
}

.spr-pymt-lawson {
  width: 102px;
  height: 53px;
  background-position: 0 -312px;
}

.spr-pymt-ministop {
  width: 65px;
  height: 53px;
  background-position: 0 -365px;
}

.spr-pymt-mizuho {
  width: 92px;
  height: 49px;
  background-position: 0 -418px;
}

.spr-pymt-mufg {
  /*width: 98px;*/
  width: 132px;
  height: 49px;
  background-position: 0 -467px;
}

.spr-pymt-payeasy {
  width: 66px;
  height: 49px;
  background-position: 0 -666px;
}

.spr-pymt-payeasy-large {
  width: 130px;
  height: 98px;
  background-position: 0 -568px;
}

.spr-pymt-rakuten {
  width: 97px;
  height: 52px;
  background-position: 0 -715px;
}

.spr-pymt-risona-s {
  width: 94px;
  height: 49px;
  background-position: 0 -767px;
}

.spr-pymt-risona {
  width: 94px;
  height: 49px;
  background-position: 0 -816px;
}

.spr-pymt-sbi {
  width: 99px;
  height: 52px;
  background-position: 0 -865px;
}

.spr-pymt-seico {
  width: 127px;
  height: 53px;
  background-position: 0 -917px;
}

.spr-pymt-seven {
  width: 147px;
  height: 53px;
  background-position: 0 -1025px;
}

.spr-pymt-seven-mark {
  width: 55px;
  height: 55px;
  background-position: 0 -970px;
}

.spr-pymt-smbc {
  width: 86px;
  height: 49px;
  background-position: 0 -1078px;
}

.spr-pymt-sunkus {
  width: 103px;
  height: 53px;
  background-position: 0 -1181px;
}

.spr-pymt-sunkus-mark {
  width: 58px;
  height: 54px;
  background-position: 0 -1127px;
}

.spr-pymt-threef {
  width: 51px;
  height: 53px;
  background-position: 0 -1234px;
}

.spr-pymt-yuucho {
  width: 94px;
  height: 49px;
  background-position: 0 -1287px;
}

.spr-pymt-other {
  width: 94px;
  height: 52px;
  background-position: 0 -516px;
}

.payment-selector .payment-selector-trigger {
  position: relative;
  padding-left: 40px;
  padding-right: 70px;
  transition: background-color 0.25s ease-out;
}
.payment-selector .payment-selector-trigger:hover {
  background: #EEE;
}
.payment-selector .payment-selector-trigger .arrow {
  position: absolute;
  left: 10px;
  top: 1.7em;
  margin-top: -12px;
}
.payment-selector .payment-selector-trigger .arrow-checked {
  display: none;
  position: absolute;
  left: 10px;
  top: 1.7em;
  margin-top: -12px;
}
.payment-selector .payment-selector-trigger .arrow-disabled {
  display: none;
  position: absolute;
  left: 10px;
  top: 1.7em;
  margin-top: -12px;
}
.payment-selector .real-radio:checked + label .arrow {
  display: none;
}
.payment-selector .real-radio:checked + label .arrow-checked {
  display: inline-block;
}
.payment-selector .real-radio[disabled] + label {
  color: #999;
}
.payment-selector .real-radio[disabled] + label:hover {
  background: transparent;
  cursor: default;
}
.payment-selector .real-radio[disabled] + label .arrow {
  display: none;
}
.payment-selector .real-radio[disabled] + label .arrow-disabled {
  display: block;
}
.payment-selector .action {
  position: absolute;
  right: 0.5em;
  top: 0.45em;
}
.payment-selector .payment-delete-btn {
  display: none;
  font-size: 0.75em;
  font-size: 0.75rem;
  line-height: 140%;
  padding-top: 0.7em;
  padding-right: 1em;
  padding-bottom: 0.7em;
}
.payment-selector .payment-select-btn {
  display: inline-block;
  font-size: 0.75em;
  font-size: 0.75rem;
  line-height: 140%;
}
.payment-selector .payment-selector-container {
  padding: 1.5em;
}

.is-current > .payment-selector-trigger .action .payment-delete-btn {
  display: inline-block;
}
.is-current > .payment-selector-trigger .action .payment-select-btn {
  display: none;
}

.no-backgroundsize .payment-selector .fake-radio-checked + label .arrow {
  display: none;
}
.no-backgroundsize .payment-selector .fake-radio-checked + label .arrow-checked {
  display: inline-block;
}

.payment-amount th {
  width: 20%;
}
.payment-amount span, .payment-amount b {
  display: inline-block;
  font-size: 1.125em;
  font-size: 1.125rem;
  line-height: 120%;
  vertical-align: middle;
  color: #F00;
}
.payment-amount .total {
  font-size: 1.875em;
  font-size: 1.875rem;
  line-height: 120%;
}

.maintenance-info th {
  width: 20%;
  text-align: center;
}
.maintenance-info td {
  background: #EEE;
}

/* ===== Tablet Lyout ===== */
@media screen and (max-width: 1023px) {
  .payment-selector li li {
    border-bottom: 0;
  }
  .payment-selector .payment-selector-container {
    padding: 15px 0;
  }

  .payment-amount span, .payment-amount b {
    font-size: 0.75rem;
    line-height: 120%;
  }
  .payment-amount .paren {
    font-size: 0.75rem;
    line-height: 120%;
  }
  .payment-amount .total {
    font-size: 1.25rem;
    line-height: 120%;
  }
}
/* ===== Small Screen Lyout ===== */
@media screen and (max-width: 767px) {
  /* OVERIDE */
  /* KOJI EDIT */
  /*.com-table th, .com-table td {*/
  .com-table.credit-card-columns th, .com-table.credit-card-columns td {
	-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 100%;
  }
  /* KOJI EDIT */
  /*.com-table th {*/
  .com-table.credit-card-columns th {
	background: none;
    border: 0;
    padding-bottom: 0;
  }
  /* KOJI ADD */
  .com-table.credit-card-columns .error th {
  	background-color: #FFEAE7;
  }

  .sprite-payment {
    background-size: 100px auto;
  }

  .spr-pymt-chiba {
    width: 61px;
    height: 33px;
    background-position: 0 0;
  }

  .spr-pymt-circlek {
    /*width: 68px;*/
    width: 69px;
    height: 36px;
    background-position: 0 -34px;
  }

  .spr-pymt-daily {
    width: 53px;
    height: 36px;
    background-position: 0 -70px;
  }

  .spr-pymt-famima {
    /*width: 69px;*/
    width: 86px;
    height: 36px;
    background-position: 0 -106px;
  }

  .spr-pymt-japannet {
    width: 67px;
    height: 35px;
    background-position: 0 -142px;
  }

  .spr-pymt-jibun {
    width: 63px;
    height: 35px;
    background-position: 0 -177px;
  }

  .spr-pymt-lawson {
    width: 69px;
    height: 36px;
    background-position: 0 -213px;
  }

  .spr-pymt-ministop {
    width: 44px;
    height: 36px;
    background-position: 0 -249px;
  }

  .spr-pymt-mizuho {
    width: 62px;
    height: 33px;
    background-position: 0 -285px;
  }

  .spr-pymt-mufg {
    /*width: 66px;*/
    width: 89px;
    height: 33px;
    background-position: 0 -318px;
  }

  .spr-pymt-payeasy {
    width: 44px;
    height: 33px;
    background-position: 0 -453px;
  }

  .spr-pymt-payeasy-large {
    width: 88px;
    height: 66px;
    background-position: 0 -387px;
  }

  .spr-pymt-rakuten {
    width: 65px;
    height: 35px;
    background-position: 0 -487px;
  }

  .spr-pymt-risona-s {
    width: 63px;
    height: 33px;
    background-position: 0 -522px;
  }

  .spr-pymt-risona {
    width: 63px;
    height: 33px;
    background-position: 0 -555px;
  }

  .spr-pymt-sbi {
    width: 67px;
    height: 35px;
    background-position: 0 -589px;
  }

  .spr-pymt-seico {
    width: 86px;
    height: 36px;
    background-position: 0 -624px;
  }

  .spr-pymt-seven {
    width: 99px;
    height: 36px;
    background-position: 0 -697px;
  }

  .spr-pymt-seven-mark {
    width: 37px;
    height: 37px;
    background-position: 0 -660px;
  }

  .spr-pymt-smbc {
    width: 58px;
    height: 33px;
    background-position: 0 -734px;
  }

  .spr-pymt-sunkus {
    width: 70px;
    height: 36px;
    background-position: 0 -804px;
  }

  .spr-pymt-sunkus-mark {
    width: 39px;
    height: 36px;
    background-position: 0 -767px;
  }

  .spr-pymt-threef {
    width: 34px;
    height: 36px;
    background-position: 0 -840px;
  }

  .spr-pymt-yuucho {
    width: 63px;
    height: 33px;
    background-position: 0 -876px;
  }

  .spr-pymt-other {
    width: 63px;
    height: 35px;
    background-position: 0 -351px;
  }

  .payment-selector .payment-selector-trigger {
    font-size: 0.8125rem;
    line-height: 140%;
    padding-left: 30px;
  }
  .payment-selector .payment-selector-trigger .arrow {
    left: 5px;
    top: 2em;
  }
  .payment-selector .payment-selector-trigger .arrow-checked {
    left: 5px;
    top: 2em;
  }
  .payment-selector .payment-selector-trigger .arrow-disabled {
    left: 5px;
    top: 2em;
  }
  .payment-selector .action {
    right: 0.3em;
    top: 0.3em;
  }

  .payment-amount th, .payment-amount td {
    padding: 0.75em;
  }
  .payment-amount th {
    width: 40%;
  }
  .payment-amount span, .payment-amount b {
    font-size: 10px;
    line-height: 120%;
  }
  .payment-amount .subtotals .subtotal {
    display: block;
  }
  .payment-amount .paren {
    font-size: 20px;
  }
  .payment-amount .total {
    display: block;
    font-size: 18px;
    line-height: 120%;
  }

  .payment-period strong, .payment-period span {
    display: block;
  }
  .payment-period .period {
    font-size: 1.25rem;
  }

  .maintenance-info th {
    width: 40%;
    text-align: center;
  }
}
/* ===== Print ===== */
@media print {
  .payment-selector li > label {
    color: #000 !important;
  }
  .payment-selector li > label:hover {
    color: #000 !important;
  }
}
.credit-card-columns th {
  width: 27%;
}
.credit-card-columns td img {
  vertical-align: middle;
}

.payment-list li {
  display: inline-block;
  margin: 0.5em 0.5em;
}

.card-back {
  display: inline-block;
  margin-left: 5px;
}
.card-back li {
  display: inline-block;
  margin-left: 20px;
  font-size: 0.75em;
  font-size: 0.75rem;
  line-height: 140%;
}

.card-back-image {
  text-align: center;
}

/* ============================
 *
 *     Tablet Lyout
 *
 * ============================ */
@media screen and (max-width: 1023px) {
  .payment-list li {
    border-bottom: 0;
  }

  .card-back {
    margin-left: 0;
  }
  .card-back li {
    margin-left: 0;
    margin-top: 10px;
    margin-right: 10px;
  }
}
/* ============================
 *
 *     Small Screen Lyout
 *
 * ============================ */
@media screen and (max-width: 767px) {
  .credit-card-columns th {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 95%;
  }
  .credit-card-columns img {
    max-width: 95%;
  }

  .payment-list {
    text-align: center;
  }
  .payment-list li {
    margin: 0.1em 0.25em;
  }

  .card-back {
    text-align: center;
  }
}