/* 恩納村LPの支援ボックス。見た目は /umisanpo/ の .c-donate__box に合わせる。 */

.payArea .c-donate__box,
.payArea .c-donate__box * {
  box-sizing: border-box;
}

.payArea .c-donate__box button {
  margin: 0;
  font: inherit;
  appearance: none;
  cursor: pointer;
}

.payArea .c-donate__box a {
  text-decoration: none;
  color: inherit;
}

.payArea .c-donate__box img {
  display: block;
  max-width: 100%;
  height: auto;
}

.c-donate__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 6.8571428571px + 1.1904761905vw, 24px);
  width: 100%;
  padding: clamp(20px, -2.8571428571px + 2.9761904762vw, 40px) clamp(16px, -2.2857142857px + 2.380952381vw, 32px);
  border-radius: clamp(16px, 2.2857142857px + 1.7857142857vw, 28px);
  background-image: linear-gradient(119.1deg, #e0f3fa 1.823%, #e8fcf6 52.37%, #e4fce8 99.173%);
  color: #1e3343;
  text-align: left;
}

@media screen and (max-width: 768px) {
  .c-donate__box {
    padding: 40px 16px;
    border-radius: 28px;
    gap: 23px;
  }
}

.c-donate__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.c-donate__label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #1e3343;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .c-donate__label {
    padding-left: 4px;
  }
}

.c-donate__types {
  display: flex;
  gap: clamp(10px, 3.1428571429px + 0.8928571429vw, 16px);
  width: 100%;
}

@media screen and (max-width: 768px) {
  .c-donate__types {
    flex-direction: column;
    gap: 16px;
  }
}

.c-donate__type {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #c8cdd1;
  border-radius: 12px;
  background-color: #fff;
  text-align: left;
  color: #1e3343;
  white-space: normal;
  overflow-wrap: break-word;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}

@media screen and (max-width: 768px) {
  .c-donate__type {
    flex: 0 0 auto;
  }
}

.c-donate__type.js-active {
  border-color: #006498;
}

@media screen and (min-width: 769px) {
  .c-donate__type:hover {
    border-color: #006498;
  }

  .c-donate__type:hover .c-donate__type-ttl {
    color: #3da6fc;
  }
}

.c-donate__type-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-donate__type-ico {
  width: clamp(15px, 10.4285714286px + 0.5952380952vw, 19px);
  height: clamp(15px, 10.4285714286px + 0.5952380952vw, 19px);
  flex-shrink: 0;
}

.c-donate__type-ttl {
  font-size: clamp(13px, 9.5714285714px + 0.4464285714vw, 16px);
  font-weight: 700;
}

.c-donate__type.js-active .c-donate__type-ttl {
  color: #3da6fc;
}

.c-donate__type-txt {
  padding-left: clamp(23px, 17.2857142857px + 0.744047619vw, 28px);
  font-size: clamp(12px, 9.7142857143px + 0.2976190476vw, 14px);
  font-weight: 400;
  line-height: 1.5;
  min-width: 0;
  width: 100%;
  overflow-wrap: break-word;
}

@media screen and (max-width: 768px) {
  .c-donate__type-txt {
    padding-left: 27px;
    font-size: 13px;
  }
}

.c-donate__amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.c-donate__amount {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(6px, 3.7142857143px + 0.2976190476vw, 8px);
  width: calc((100% - 20px) / 3);
  min-height: clamp(48px, 35.4285714286px + 1.6369047619vw, 59px);
  padding: clamp(12px, 8.5714285714px + 0.4464285714vw, 15px) clamp(9px, 5.5714285714px + 0.4464285714vw, 12px);
  border: 1px solid #c8cdd1;
  border-radius: 12px;
  background-color: #fff;
  color: #1e3343;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, opacity 0.3s;
}

@media screen and (max-width: 768px) {
  .c-donate__amount {
    width: calc((100% - 10px) / 2);
    padding: 10px 8px;
    gap: 4px;
  }
}

@media screen and (min-width: 769px) {
  .c-donate__amount:hover {
    opacity: 1;
    border-color: #006498;
    color: #3da6fc;
  }
}

.c-donate__amount.js-active {
  border-color: #006498;
  color: #3da6fc;
}

.c-donate__amount-ico {
  width: clamp(15px, 10.4285714286px + 0.5952380952vw, 19px);
  height: clamp(15px, 10.4285714286px + 0.5952380952vw, 19px);
  flex-shrink: 0;
}

.c-donate__amount-num {
  font-size: clamp(15px, 11.5714285714px + 0.4464285714vw, 18px);
  font-weight: 700;
  white-space: nowrap;
}

@media screen and (max-width: 768px) {
  .c-donate__amount-num {
    font-size: 15px;
  }
}

.c-donate__amount--custom .c-donate__amount-num {
  font-size: 15px;
  white-space: normal;
}

.c-donate__amount-unit {
  font-size: clamp(11px, 9.8571428571px + 0.1488095238vw, 12px);
  font-weight: 700;
  white-space: nowrap;
}

.c-donate__custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 1.4285714286px + 0.5952380952vw, 10px);
  width: 100%;
}

@media screen and (max-width: 768px) {
  .c-donate__custom {
    gap: 8px;
  }

  .c-donate__custom .c-donate__amount--custom {
    width: 100%;
  }
}

.c-donate__custom-field {
  display: none;
  align-items: center;
  gap: clamp(6px, 1.4285714286px + 0.5952380952vw, 10px);
}

@media screen and (max-width: 768px) {
  .c-donate__custom-field {
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
  }
}

.c-donate__custom.is-open .c-donate__custom-field {
  display: flex;
}

.c-donate__custom-input {
  width: 120px;
  min-width: 0;
  height: clamp(48px, 35.4285714286px + 1.6369047619vw, 59px);
  padding: 0 clamp(9px, 5.5714285714px + 0.4464285714vw, 12px);
  border: 1px solid #c8cdd1;
  border-radius: 12px;
  background-color: #fff;
  text-align: right;
  font-size: clamp(15px, 11.5714285714px + 0.4464285714vw, 18px);
  font-weight: 700;
  color: #1e3343;
}

.c-donate__custom-input::placeholder {
  color: #c8cdd1;
  font-weight: 400;
}

.c-donate__custom-input:focus {
  outline: none;
  border-color: #006498;
}

.c-donate__custom-input.--error {
  border-color: #ff4e65;
}

.c-donate__custom-unit {
  font-size: clamp(13px, 10.7142857143px + 0.2976190476vw, 15px);
  font-weight: 700;
  color: #1e3343;
  white-space: nowrap;
}

.c-donate__custom-go {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: clamp(36px, 26.8571428571px + 1.1904761905vw, 44px);
  height: clamp(36px, 26.8571428571px + 1.1904761905vw, 44px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #006498;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.3s;
}

@media screen and (min-width: 769px) {
  .c-donate__custom-go:hover {
    opacity: 0.8;
  }
}

.c-donate__custom-msg {
  width: 100%;
  font-size: 12px;
  font-weight: 700;
  color: #ff4e65;
}

.c-donate__custom-msg[hidden] {
  display: none;
}

.c-donate__note {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #1e3343;
}

.c-donate__pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 7.7142857143px + 0.2976190476vw, 12px);
  width: 100%;
  padding: clamp(12px, 7.4285714286px + 0.5952380952vw, 16px) clamp(12px, 5.1428571429px + 0.8928571429vw, 18px) clamp(14px, 9.4285714286px + 0.5952380952vw, 18px);
  border-radius: 12px;
  background-color: #fff;
  margin-top: 9px;
}

@media screen and (max-width: 768px) {
  .c-donate__pay {
    gap: 12px;
  }
}

.c-donate__pay-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 3px 16px;
  border-radius: 6px;
  background-color: #515151;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.c-donate__brands {
  display: flex;
  align-items: center;
  gap: clamp(8px, 3.4285714286px + 0.5952380952vw, 12px);
  flex-wrap: wrap;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .c-donate__brands {
    gap: 12px;
  }
}

.c-donate__brand {
  height: clamp(32px, 22.8571428571px + 1.1904761905vw, 40px);
  border: 1px solid #ddd;
  border-radius: 4px;
  object-fit: contain;
  background-color: #fff;
}

.c-donate__brand.--visa,
.c-donate__brand.--master {
  width: clamp(46px, 32.2857142857px + 1.7857142857vw, 58px);
}

@media screen and (max-width: 768px) {
  .c-donate__brand.--visa,
  .c-donate__brand.--master {
    width: 58px;
    height: auto;
    aspect-ratio: 58 / 40;
  }
}

.c-donate__brand.--jcb {
  width: clamp(42px, 30.5714285714px + 1.4880952381vw, 52px);
}

@media screen and (max-width: 768px) {
  .c-donate__brand.--jcb {
    width: 52px;
    height: auto;
    aspect-ratio: 52 / 40;
  }
}

.c-donate__brand.--amex {
  width: clamp(32px, 22.8571428571px + 1.1904761905vw, 40px);
}

@media screen and (max-width: 768px) {
  .c-donate__brand.--amex {
    width: 40px;
    height: auto;
    aspect-ratio: 40 / 40;
  }
}