@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;
}

@media screen and (min-width: 590px) {
  .pt12 {
    padding-top: 12px;
  }
}

.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;
}
.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 {
  margin: 56px auto 0;
}
.formBtn a {
  text-align: center;
}

/*----------------------------------------
フォームトップページ
----------------------------------------*/
#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 .radioItemContainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}
@media screen and (max-width: 589px) {
  #form #formArea .radioItemContainer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 8px;
  }
}
#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 .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 .numberContainer .formError {
  width: 100%;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}
#form #formArea .formItem .numberContainer .unit {
  font-size: 1.25em;
  font-weight: bold;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
#form #formArea .formItem.membershipFee .numberContainer {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}
#form #formArea .formItem.membershipFee input[readonly] {
  border: unset;
  background-color: unset;
  padding: unset;
  width: 100px;
  font-size: 1.5em;
  font-weight: bold;
}

/*----------------------------------------
確認ページ
----------------------------------------*/
#form_confirm #formArea {
  margin-top: 28px;
}
#form_confirm #formArea .formItem .detail p {
  font-size: 1.25em;
}
#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 */