@charset "utf-8";
:root {
  --input-backcolor : #eee;
}

.contact-lead {
  margin-top: 80px;
}
@media screen and (max-width: 1023px) {
  .contact-lead {
    margin-top: 12.8vw;
  }
  .contact-heading {
    margin-top: 19.23vw;
    font-size: 8vw;
  }
}

.form-list {
  font-size: 16px;
  display: flex;
  gap: 40px 50px;
  align-items: start;
  flex-wrap: wrap;
  & dt {
    width: 14em;
    padding-top: 1em;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    & p {
      font-weight: 600;
    }
    & span {
      display: inline-block;
      font-size: 14px;
      line-height: 1;
      color: #fff;
      padding: 5px 8px;
      background-color: #d1121b;
      border-radius: 4px;
    }
    &.form-radio-title {
      padding-top: .5em;
    }
  }
  & dd {
    width: calc(100% - 14em - 50px);
  }
  & input[type="text"], 
  input[type="tel"], 
  input[type="email"] {
    width: min(100%, 700px);
    padding: 22px 20px;
    border: none;
    background-color: var(--input-backcolor);
    &::placeholder {
      color: #777;
    }
  }
  & textarea {
    width: min(100%, 700px);
    padding: 22px 20px;
    border: none;
    background-color: var(--input-backcolor);
    &::placeholder {
      color: #777;
    }
  }
  &._main {
    padding-bottom: 100px;
  }
  &._sub {
    padding-top: 100px;
    border-top: 1px solid #b9b9b9;
  }
  &._check {
    padding-top: 40px;
    row-gap: 30px;
  }
}
@media screen and (max-width: 1023px) {
  .form-list {
    font-size: 4.1vw;
    display: block;
    & dt {
      width: 100%;
      margin-top: 7.7vw;
      padding-top: 0;
      justify-content: flex-start;
      & span {
        font-size: 3.6vw;
        padding: 1.5vw 2.2vw;
      }
      &:first-of-type {
        margin-top: 0;
      }
    }
    & dd {
      width: 100%;
      margin-top: 2.56vw;
    }
    & input[type="text"], 
    input[type="tel"], 
    input[type="email"] {
      width: 100%;
      padding: 1.2em 1em;
      font-size: max(4.1vw,16px);
    }
    & textarea {
      width: 100%;
      padding: 1.2em 1em;
      font-size: max(4.1vw,16px);
    }
    & select {
       font-size: max(4.1vw,16px);
    }
    &._main {
      padding-bottom: 19.2vw;
    }
    &._sub {
      padding-top: 19.2vw;
      border-top: 1px solid #b9b9b9;
    }
    &._check {
      padding-top: 7.69vw;
      row-gap: 7.69vw;
      & > dt {
        display: none;
      }
      & > dd:last-of-type {
        margin-top: 7.69vw;
      }
    }
  }
}

.errmsg {
  font-size: 0.8em;
  color: #d1121b;
  margin-top: 0 !important;
  &:empty {
    display: none;
  }
}


.form-radio {
  display: flex;
  align-items: center;
  & input {
    appearance: none;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    border: none;
    background-color: var(--input-backcolor);
    cursor: pointer;
    margin-right: 10px;
    &:checked::after {
      content: "";
      position: absolute;
      inset: 0;
      width: 16px;
      height: 16px;
      margin: auto;
      border-radius: 9999px;
      background-color: #4dc4d6;
    }
  }
  & label {
    margin-right: 32px;
  }
}
@media screen and (max-width: 1023px) {
  .form-radio {
    flex-wrap: wrap;
    row-gap: 3.84vw;
    & input {
      width: 7vw;
      height: 7vw;
      margin-right: 2vw;
      &:checked::after {
        width: 3.5vw;
        height: 3.5vw;
      }
    }
    & label {
      margin-right: 3vw;
      width: calc(50% - 12vw);
      font-size: 3.5vw;
    }
  }
}

.form-note {
  font-size: 14px;
  margin-top: 1em;
}
@media screen and (max-width: 1023px) {
  .form-note {
    font-size: 3.58vw;
  }
}

.form-name {
  display: flex;
  gap: 20px;
  & input[type="text"] {
    width: min(100%, 320px);
  }
  & + p + p {
    margin-top: 0;
  }
}
@media screen and (max-width: 1023px) {
  .form-name {
    flex-wrap: wrap;
    gap: 3.84vw 0;
    & input[type="text"] {
      width: 100%;
    }
  }
}

.form-post {
  display: flex;
  align-items: center;
  gap: 20px;
  & input[type="text"] {
    width: 150px;
  }
}
@media screen and (max-width: 1023px) {
  .form-post {
    gap: 3.84vw;
    & input[type="text"] {
      width: 50%;
    }
  }
}

.form-address {

}

.address-inline {
  display: flex;
  align-items: center;
  margin-top: 20px;
  &:first-of-type {
    margin-top: 0;
  }
  & label {
    width: 6.5em;
    flex-shrink: 0;
    color: #777;
  }
  & input[type="text"] {
    width: calc(min(100%, 700px) - 6.5em);
  }
}
@media screen and (max-width: 1023px) {
  .address-inline {
    flex-wrap: wrap;
    & label {
      width: 100%;
      color: inherit;
    }
    & input[type="text"] {
      width: 100%;
      margin-top: 1.28vw;
    }
    &:first-of-type label {
      width: 5em;
    }
  }
}

.form-select {
  position: relative;
  width: 200px;
  &::before {
    position: absolute;
    content: "";
    pointer-events: none;
    display: inline-block;
    right: 0;
    background-color: var(--input-backcolor);
  }
  &::after {
    position: absolute;
    content: "";
    pointer-events: none;
    top: calc(50% - 8px);
    right: 24px;
    transform: rotate(45deg);
    width: 12px;
    height: 12px;
    border-bottom: 1px solid #d1121b;
    border-right: 1px solid #d1121b;
  }
  & select {
    appearance: none;
    color: var(--txt-color-main);
    min-width: 180px;
    padding: 22px 48px 22px 20px;
    border: none;
    border-radius: 10px;
    background-color: var(--input-backcolor);
    cursor: pointer;
  }
}
@media screen and (max-width: 1023px) {
  .form-select {
    width: calc(100% - 5em);
    &::after {
      top: calc(50% - 1.28vw);
      right: 1em;
      width: 2.05vw;
      height: 2.05vw;
      border-width: 2px;
    }
    & select {
      min-width: unset;
      width: 100%;
      padding: 1em 2em 1em 1em;
    }
  }
}

.form-check {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100%, 700px);
  padding: 30px;
  background-color: #ffeff0;
  border-radius: 20px;
  color: #262626;
  & input[type="checkbox"] {
    appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border: none;
    cursor: pointer;
    &:checked::after {
      content: "";
      position: absolute;
      top: 6px;
      left: 7px;
      width: 18px;
      height: 12px;
      border-bottom: 4px solid #4dc4d6;
      border-left: 4px solid #4dc4d6;
      transform: rotate(-45deg);
    }
    &:disabled {
      background-color: var(--input-backcolor);
      pointer-events: none;
    }
  }
}
@media screen and (max-width: 1023px) {
  .form-check {
    align-items: start;
    gap: 3.2vw;
    width: 100%;
    padding: 1em;
    & input[type="checkbox"] {
      width: 7.69vw;
      height: 7.69vw;
      &:checked::after {
        top: 1.53vw;
        left: 1.79vw;
        width: 4.61vw;
        height: 3.07vw;
      }
    }
  }
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 80px;
  & button {
    width: min(100%, 450px);
  }
  & button:disabled {
    border-color: var(--input-backcolor);
    background-color: var(--input-backcolor);
    pointer-events: none;
  }
}
@media screen and (max-width: 1023px) {
  .button-group {
    flex-flow: column;
    gap: 7.69vw;
    margin-top: 12.82vw;
    & button {
      width: 100%;
    }
  }
}

.form-message {
  margin-top: 60px;
  text-align: center;
  color: #262626;
}
@media screen and (max-width: 1023px) {
  .form-message {
    margin-top: 7.96vw;
    text-align: left;
  }
}

/*********************************
 Confirm
*/
.confirm .form-list {
  & dt {
    padding-top: 0;
  }
  & dd {
    margin-top: 0;
  }
}

/*********************************
 Error
*/
.err_list.discList > li::before {
  background-color: #d1121b;
}

.button-group._err a {
  width: min(100%, 450px);
}
@media screen and (max-width: 1023px) {
  .button-group._err a {
    width: 100%;
  }
}