@charset "UTF-8";
/* CSS Document */
/*----------------------------------------
変数
----------------------------------------*/
/*----------------------------------------
寄付申込受付フォーム 汎用スタイル
----------------------------------------*/
.responsive .m-inner {
  padding: 48px 20px 104px;
}
@media screen and (max-width: 589px) {
  .responsive #main-title .pageTitle {
    font-size: 1.6em;
  }
}

.formTitle {
  font-size: 1.25em;
  font-weight: bold;
  text-align: center;
}

.formText {
  font-size: 1.25em;
  text-align: center;
}

.formContainer {
  max-width: 616px;
  margin: 0 auto;
}
.formContainer .formItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 24px;
  padding-bottom: 24px;
}
@media screen and (max-width: 589px) {
  .formContainer .formItem {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
  }
}
.formContainer .formItem:not(:first-of-type) {
  border-top: 1px solid #D6D6D6;
}
.formContainer .formItem.address {
  border-top: none;
}
.formContainer .formItem .label {
  width: 224px;
}
@media screen and (min-width: 590px) {
  .formContainer .formItem .label.onMargin {
    padding-top: 12px;
  }
}
.formContainer .formItem .label span {
  font-size: 1.25em;
  font-weight: bold;
}
.formContainer .formItem .label span.requiredLabel::after {
  content: "必須";
  display: inline-block;
  color: #FFFFFF;
  font-size: 0.85em;
  font-weight: normal;
  padding: 2px 4px;
  margin-left: 8px;
  background-color: #EE513B;
  border-radius: 2px;
}
.formContainer .formItem .detail {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.formContainer .formItem input.err,
.formContainer .formItem select.err {
  border: 2px solid #ff0000 !important;
  background-color: #ffeeee !important;
}

.formBtn {
  width: 360px;
  margin: 56px auto 0;
}
@media screen and (max-width: 589px) {
  .formBtn {
    width: 100%;
  }
}
.formBtn a {
  position: relative;
  display: block;
  color: #FFFFFF;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  padding: 24px 28px;
  background: -webkit-gradient(linear, left top, left bottom, from(#FFB1B1), color-stop(80%, #FF8182));
  background: linear-gradient(to bottom, #FFB1B1, #FF8182 80%);
  border-radius: 4px;
  overflow: hidden;
}
.formBtn a .icon-play3::before {
  color: #FFFFFF;
  font-size: 0.6em;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.formBtn a:hover {
  opacity: 0.7;
}

/*----------------------------------------
フォームトップページ
----------------------------------------*/
#form #formArea {
  margin-top: 28px;
}
#form #formArea input,
#form #formArea select,
#form #formArea textarea {
  display: block;
  color: #505050;
  font-size: 1.25em;
  line-height: 1.6;
  padding: 12px;
  border: 1px solid #D6D6D6;
  background-color: #F9F8F6;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#form #formArea input::-webkit-input-placeholder, #form #formArea select::-webkit-input-placeholder, #form #formArea textarea::-webkit-input-placeholder {
  color: #CCCCCC;
  opacity: 1;
}
#form #formArea input::-moz-placeholder, #form #formArea select::-moz-placeholder, #form #formArea textarea::-moz-placeholder {
  color: #CCCCCC;
  opacity: 1;
}
#form #formArea input:-ms-input-placeholder, #form #formArea select:-ms-input-placeholder, #form #formArea textarea:-ms-input-placeholder {
  color: #CCCCCC;
  opacity: 1;
}
#form #formArea input::-ms-input-placeholder, #form #formArea select::-ms-input-placeholder, #form #formArea textarea::-ms-input-placeholder {
  color: #CCCCCC;
  opacity: 1;
}
#form #formArea input::placeholder,
#form #formArea select::placeholder,
#form #formArea textarea::placeholder {
  color: #CCCCCC;
  opacity: 1;
}
#form #formArea input:focus,
#form #formArea select:focus,
#form #formArea textarea:focus {
  background-color: #FFFFFF;
  border: 1px solid #EE513B;
}
#form #formArea input.inputSizeS,
#form #formArea select.inputSizeS,
#form #formArea textarea.inputSizeS {
  width: 120px;
}
#form #formArea input.inputSizeM,
#form #formArea select.inputSizeM,
#form #formArea textarea.inputSizeM {
  width: 188px;
}
#form #formArea input.inputSizeMax,
#form #formArea select.inputSizeMax,
#form #formArea textarea.inputSizeMax {
  width: 100%;
}
#form #formArea select {
  height: calc(1.6em + 24px);
}
#form #formArea select option {
  color: #505050;
}
#form #formArea select:has(option[value=""]:checked) {
  color: #CCCCCC;
}
#form #formArea textarea {
  resize: vertical;
}
#form #formArea .checkboxItemContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px 0;
}
@media screen and (max-width: 589px) {
  #form #formArea .checkboxItemContainer {
    gap: 8px 0;
  }
}
#form #formArea .checkboxItemContainer .checkboxItem {
  width: 33.3333333333%;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
@media screen and (min-width: 590px) and (max-width: 899px) {
  #form #formArea .checkboxItemContainer .checkboxItem {
    width: 50%;
  }
}
#form #formArea .checkboxItemContainer .checkboxItem label {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: 1.25em;
  font-weight: bold;
}
@media screen and (max-width: 589px) {
  #form #formArea .checkboxItemContainer .checkboxItem label {
    gap: 2px;
  }
}
#form #formArea .checkboxItemContainer .checkboxItem label input[type=checkbox] {
  width: 32px;
  height: 32px;
}
@media screen and (max-width: 589px) {
  #form #formArea .checkboxItemContainer .checkboxItem label input[type=checkbox] {
    width: 24px;
    height: 24px;
  }
}
#form #formArea .checkboxItemContainer .checkboxItem label input[type=checkbox]:checked {
  accent-color: #0092E5;
}
#form #formArea .radioItemContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}
#form #formArea .radioItemContainer .radioItem {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}
#form #formArea .radioItemContainer .radioItem label {
  min-width: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  font-size: 1.25em;
  font-weight: bold;
}
#form #formArea .radioItemContainer .radioItem label input[type=radio] {
  width: 28px;
  height: 28px;
}
@media screen and (max-width: 589px) {
  #form #formArea .radioItemContainer .radioItem label input[type=radio] {
    width: 20px;
    height: 20px;
  }
}
#form #formArea .radioItemContainer .radioItem label input[type=radio]:checked {
  accent-color: #0092E5;
}
#form #formArea .comment {
  margin-top: 8px;
  font-size: 1em;
}
#form #formArea .formItem.address {
  padding-top: unset;
  border-top: none;
}
#form #formArea .formItem.address select:not(:first-child),
#form #formArea .formItem.address input:not(:first-child) {
  margin-top: 8px;
}
#form #formArea .formItem.donationGoods .variableContainer {
  position: relative;
}
#form #formArea .formItem.donationGoods .variableContainer + .variableContainer {
  margin-top: 8px;
}
#form #formArea .formItem.donationGoods .variableContainer .deleteBtn {
  border: unset;
  background: unset;
  position: absolute;
  bottom: 12px;
  left: 204px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
}
#form #formArea .formItem.donationGoods .variableContainer .deleteBtn:hover {
  opacity: 0.7;
  cursor: default !important;
}
#form #formArea .formItem.donationGoods #addBtn {
  border: unset;
  background: unset;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 12px;
}
#form #formArea .formItem.donationGoods #addBtn:hover {
  opacity: 0.7;
  cursor: default !important;
}
#form #formArea .formItem.donationGoods #addBtn .plusMark {
  position: relative;
  width: 28px;
  height: 28px;
  background-color: #505050;
  border-radius: 50%;
}
#form #formArea .formItem.donationGoods #addBtn .plusMark span {
  position: absolute;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: block;
}
#form #formArea .formItem.donationGoods #addBtn .plusMark span:nth-of-type(1) {
  width: 12px;
  top: 50%;
  left: 50%;
  border-top: 2px solid #FFFFFF;
}
#form #formArea .formItem.donationGoods #addBtn .plusMark span:nth-of-type(2) {
  height: 12px;
  top: 50%;
  left: 50%;
  border-left: 2px solid #FFFFFF;
}
#form #formArea .formItem.donationAmount .numberContainer, #form #formArea .formItem.returnAmount .numberContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 8px;
}
#form #formArea .formItem.donationAmount .numberContainer .formError, #form #formArea .formItem.returnAmount .numberContainer .formError {
  width: 100%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
#form #formArea .formItem.donationAmount .numberContainer .unit, #form #formArea .formItem.returnAmount .numberContainer .unit {
  font-size: 1.25em;
  font-weight: bold;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

/*----------------------------------------
確認ページ
----------------------------------------*/
#form_confirm #formArea {
  margin-top: 28px;
}
#form_confirm #formArea .formItem .detail p {
  font-size: 1.25em;
}
#form_confirm #formArea .formBtn:has(#returnBtn) {
  margin: 24px auto 0;
}
#form_confirm #formArea .formBtn:has(#returnBtn) a .icon-play3::before {
  position: absolute;
  right: unset;
  left: 16px;
  -webkit-transform: translateY(-50%) scale(-1, 1);
          transform: translateY(-50%) scale(-1, 1);
}
#form_confirm #formArea .formBtn #returnBtn {
  background: #D6D6D6;
}

/*----------------------------------------
送信完了ページ
----------------------------------------*/
#form_result .formText {
  margin-top: 24px;
}
#form_result .formText .onTabPc {
  display: none;
}
@media screen and (min-width: 590px) {
  #form_result .formText .onTabPc {
    display: block;
  }
}
#form_result .telLink {
  text-align: center;
}
#form_result .telLink a {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 1.38em;
}/*# sourceMappingURL=form.css.map */