@charset "UTF-8";
.sec-payment {
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  color: var(--c-text);
  font-family: var(--font-body);
  background-color: #f8f8f8;
  background-image: url("../../assets/img/payment/bg-grid.webp");
  background-repeat: repeat;
  background-size: 10px 10px;
  background-position: -7px -6px;
  font-feature-settings: normal;
  text-spacing-trim: space-all;
  text-autospace: no-autospace;
  line-break: strict;
}
.payment-inner {
  --u: min(1px, calc((100cqw - 80px) / 1180));
  position: relative;
  min-height: calc(1045 * var(--u));
  padding-bottom: calc(98 * var(--u));
}
.payment-head {
  padding-top: calc(93.872 * var(--u));
  text-align: center;
}
.payment-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: calc(48 * var(--u));
  line-height: calc(76.8 * var(--u));
  letter-spacing: 0;
  color: var(--c-text);
}
.payment-title-l,
.payment-title-s { font-size: inherit; }
.payment-br-sp { display: none; }
.payment-rule {
  display: block;
  width: calc(80 * var(--u));
  height: calc(1 * var(--u));
  margin: calc(30.328 * var(--u)) auto 0;
  background: #666666;
}
.payment-methods {
  display: flex;
  align-items: flex-start;
  width: calc(1180 * var(--u));
  margin: calc(39.13 * var(--u)) auto 0;
}
.payment-methods-label {
  position: relative;
  flex: 0 0 auto;
  width: calc(206 * var(--u));
  height: calc(58.87 * var(--u));
}
.payment-methods-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(55 * var(--u));
  height: calc(54.7484 * var(--u));
}
.payment-methods-text {
  position: absolute;
  left: calc(62 * var(--u));
  top: calc(23.87 * var(--u));
  font-weight: 400;
  font-size: calc(24 * var(--u));
  line-height: calc(27 * var(--u));
  letter-spacing: 0;
  white-space: nowrap;
}
.payment-pills {
  display: flex;
  flex: 0 0 auto;
  margin-left: calc(57 * var(--u));
  margin-top: calc(16.87 * var(--u));
}
.payment-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  height: calc(42 * var(--u));
  background: #ffffff;
  border: calc(1 * var(--u)) solid #e5e7eb;
  border-radius: calc(8 * var(--u));
}
.payment-pill + .payment-pill         { margin-left: calc(13 * var(--u)); }
.payment-pill + .payment-pill--emoney { margin-left: calc(12 * var(--u)); }
.payment-pill--cash   { width: calc(128 * var(--u)); }
.payment-pill--credit { width: calc(262 * var(--u)); }
.payment-pill--emoney { width: calc(154 * var(--u)); }
.payment-pill--loan   { width: calc(284 * var(--u)); }
.payment-pill-icon { flex: 0 0 auto; }
.payment-pill--cash   .payment-pill-icon { width: calc(34.2198 * var(--u)); height: calc(29.6931 * var(--u)); }
.payment-pill--credit .payment-pill-icon { width: calc(34 * var(--u));      height: calc(23.9062 * var(--u)); }
.payment-pill--emoney .payment-pill-icon { width: calc(15.9941 * var(--u)); height: calc(29.5 * var(--u)); }
.payment-pill--loan   .payment-pill-icon { width: calc(20.2188 * var(--u)); height: calc(28.1304 * var(--u)); }
.payment-pill-text {
  font-weight: 300;
  font-size: calc(18 * var(--u));
  line-height: calc(22 * var(--u));
  white-space: nowrap;
}
.payment-pill-sp { display: none; }
.payment-card {
  width: calc(1180 * var(--u));
  height: calc(590 * var(--u));
  margin: calc(57 * var(--u)) auto 0;
  background: #ffffff;
  border: calc(1 * var(--u)) solid #dddddd;
  padding: calc(33 * var(--u)) calc(50 * var(--u)) 0 calc(48 * var(--u));
}
.payment-deduction {
  position: relative;
  height: calc(116 * var(--u));
}
.payment-deduction-badge {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  border-radius: 50%;
  background: #bdac6f;
}
.payment-deduction-icon {
  position: absolute;
  left: calc(30.61 * var(--u));
  top: calc(25 * var(--u));
  width: calc(54.7309 * var(--u));
  height: calc(66 * var(--u));
}
.payment-deduction-title {
  margin-left: calc(145 * var(--u));
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: calc(48 * var(--u));
  color: var(--c-text);
}
.payment-deduction-text {
  margin-left: calc(144 * var(--u));
  width: calc(832 * var(--u));
  font-weight: 300;
  font-size: calc(15 * var(--u));
  line-height: calc(30 * var(--u));
}
.payment-figures {
  display: flex;
  gap: calc(30 * var(--u));
  margin-top: calc(37 * var(--u));
}
.payment-figure {
  position: relative;
  width: calc(340 * var(--u));
  height: calc(261 * var(--u));
  border-radius: calc(8 * var(--u));
}
.payment-figure--01,
.payment-figure--02 { background: #faf6f0; }
.payment-figure--03 { background: #f3f9f2; }
.payment-figure-circle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(26 * var(--u));
  width: calc(102 * var(--u));
  height: calc(102 * var(--u));
  border-radius: 50%;
  background: #ffffff;
}
.payment-figure-icon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.payment-figure--01 .payment-figure-icon { top: calc(55 * var(--u)); width: calc(32.3438 * var(--u)); height: calc(45 * var(--u)); }
.payment-figure--02 .payment-figure-icon { top: calc(55 * var(--u)); width: calc(48 * var(--u));      height: calc(43.1875 * var(--u)); }
.payment-figure--03 .payment-figure-icon { top: calc(57 * var(--u)); width: calc(39.5355 * var(--u)); height: calc(40.997 * var(--u)); }
.payment-figure-label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(138 * var(--u));
  text-align: center;
  font-weight: 400;
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  letter-spacing: 0.04em;
  color: var(--c-text);
}
.payment-figure-value {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(173.971 * var(--u));
  height: calc(34 * var(--u));
  text-align: center;
  font-weight: 700;
  font-size: calc(64 * var(--u));
  line-height: calc(34 * var(--u));
  color: #123970;
  white-space: nowrap;
}
.payment-num   { font-size: calc(64 * var(--u)); }
.payment-unit  { font-size: calc(20 * var(--u)); margin-left: calc(4 * var(--u)); }
.payment-plus  { font-size: calc(36 * var(--u)); margin: 0 calc(11 * var(--u)) 0 calc(7 * var(--u)); }
.payment-approx{ font-size: calc(20 * var(--u)); }
.payment-figure-green { color: #15803d; }
.payment-note--pc {
  margin-top: calc(25 * var(--u));
  font-weight: 300;
  font-size: calc(16 * var(--u));
  line-height: calc(32 * var(--u));
  color: var(--c-text);
}
.payment-note-indent {
  display: inline-block;
  white-space: pre;
}
.payment-note--sp { display: none; }
@media (max-width: 767px) {
  .sec-payment {
    background-position: 0 -3px;
  }
  .payment-inner {
    --u: min(1px, calc(100cqw / 390));
    min-height: calc(1301.4 * var(--u));
    padding-bottom: calc(77 * var(--u));
  }
  .payment-head { padding-top: calc(71.925 * var(--u)); }
  .payment-title {
    font-size: calc(28 * var(--u));
    line-height: calc(44.8 * var(--u));
  }
  .payment-title-s {
    font-size: calc(24 * var(--u));
    line-height: 0;
  }
  .payment-br-sp { display: inline; }
  .payment-rule {
    width: calc(64 * var(--u));
    margin-top: calc(21.475 * var(--u));
  }
  .payment-methods {
    display: block;
    width: calc(342 * var(--u));
    margin: calc(60 * var(--u)) auto 0;
  }
  .payment-methods-label {
    position: static;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: auto;
    height: calc(38.75 * var(--u));
  }
  .payment-methods-icon {
    position: static;
    flex: 0 0 auto;
    width: calc(38.93 * var(--u));
    height: calc(38.75 * var(--u));
  }
  .payment-methods-text {
    position: static;
    margin-left: calc(10.07 * var(--u));
    margin-top: calc(9 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(27 * var(--u));
    letter-spacing: 0.04em;
  }
  .payment-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: calc(7 * var(--u));
    margin: calc(12.25 * var(--u)) 0 0;
  }
  .payment-pill + .payment-pill,
  .payment-pill--emoney { margin-left: 0; }
  .payment-pill {
    border-radius: calc(4 * var(--u));
  }
  .payment-pill--cash   { width: calc(96 * var(--u)); }
  .payment-pill--credit { width: calc(239 * var(--u)); }
  .payment-pill--emoney { width: calc(124 * var(--u)); }
  .payment-pill--loan   { width: calc(208 * var(--u)); }
  .payment-pill-text { font-size: calc(15 * var(--u)); }
  .payment-pill--credit .payment-pill-text { font-size: calc(18 * var(--u)); }
  .payment-pill-pc { display: none; }
  .payment-pill-sp { display: inline; }
  .payment-card {
    width: calc(342 * var(--u));
    height: auto;
    margin: calc(18 * var(--u)) auto 0;
    padding: calc(26 * var(--u)) calc(17 * var(--u)) calc(25 * var(--u)) calc(27 * var(--u));
  }
  .payment-deduction { height: auto; }
  .payment-deduction-badge {
    width: calc(71.4 * var(--u));
    height: calc(71.4 * var(--u));
  }
  .payment-deduction-icon {
    left: calc(18.86 * var(--u));
    top: calc(15.39 * var(--u));
    width: calc(33.68 * var(--u));
    height: calc(40.62 * var(--u));
  }
  .payment-deduction-title {
    margin-left: calc(85.4 * var(--u));
    padding-top: calc(15.7 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(40 * var(--u));
  }
  .payment-deduction-text {
    margin-left: 0;
    width: 100%;
    margin-top: calc(31.7 * var(--u));
    text-align: justify;
  }
  .payment-figures {
    display: block;
    margin-top: calc(24 * var(--u));
  }
  .payment-figure {
    width: 100%;
    height: calc(100 * var(--u));
  }
  .payment-figure + .payment-figure { margin-top: calc(14.5 * var(--u)); }
  .payment-figure-circle {
    left: calc(13 * var(--u));
    transform: none;
    top: calc(18.615 * var(--u));
    width: calc(62.77 * var(--u));
    height: calc(62.77 * var(--u));
  }
  .payment-figure-icon { transform: none; }
  .payment-figure--01 .payment-figure-icon { left: calc(34.435 * var(--u)); top: calc(36.155 * var(--u)); width: calc(19.9 * var(--u));  height: calc(27.69 * var(--u)); }
  .payment-figure--02 .payment-figure-icon { left: calc(29.615 * var(--u)); top: calc(36.71 * var(--u));  width: calc(29.54 * var(--u)); height: calc(26.58 * var(--u)); }
  .payment-figure--03 .payment-figure-icon { left: calc(32.22 * var(--u));  top: calc(37.39 * var(--u));  width: calc(24.33 * var(--u)); height: calc(25.22 * var(--u)); }
  .payment-figure-label {
    left: calc(86 * var(--u));
    right: auto;
    top: calc(12 * var(--u));
    text-align: left;
  }
  .payment-figure-value {
    left: calc(86 * var(--u));
    right: auto;
    top: calc(42 * var(--u));
    text-align: left;
    font-size: calc(40 * var(--u));
  }
  .payment-num   { font-size: calc(40 * var(--u)); }
  .payment-unit  { font-size: calc(16 * var(--u)); margin-left: calc(3 * var(--u)); }
  .payment-plus  { font-size: calc(24 * var(--u)); margin: 0 calc(4 * var(--u)); }
  .payment-approx{ font-size: calc(20 * var(--u)); }
  .payment-note--pc { display: none; }
  .payment-note--sp {
    display: flex;
    width: calc(342 * var(--u));
    margin: calc(17 * var(--u)) auto 0;
    font-weight: 300;
    font-size: calc(16 * var(--u));
    line-height: calc(32 * var(--u));
    color: var(--c-text);
  }
  .payment-note-mark {
    flex: 0 0 calc(16 * var(--u));
  }
  .payment-note-body {
    flex: 1 1 auto;
    margin-left: calc(7 * var(--u));
    text-align: justify;
  }
}
.payment-deduction-text,
.payment-methods-text,
.payment-note { text-wrap: pretty; }