@charset "UTF-8";

/**
 * form
 */

.contact_content {
  margin-top: 125px;
  max-width: 1234px;
  .contact_form_header {
    h2 {
      font-size: 4.8rem;
      text-align: center;
      color: var(--c2);
      border-bottom: 4px dotted var(--c2);
      padding-bottom: 9px;
    }
  }
}

.contact_form_body {
  margin-top: 50px;
  .contact_form {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    dl {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      dt {
        width: 270px;
        padding-top: 8px;
        font-size: 2.4rem;
      }
      dd {
        width: calc(100% - 284px);
        input,
        textarea {
          width: 100%;
          padding: 12px 20px;
          background: #f4f4f4;
          border: none;
        }
        textarea {
          height: 240px;
        }
        .wpcf7-checkbox,
        .wpcf7-acceptance {
          padding-top: 12px;
          display: flex;
          flex-wrap: wrap;
          gap: 8px 30px;
          .wpcf7-list-item {
            margin: 0;
            input {
              width: auto;
            }
          }
        }
        .form_note {
          font-size: 1.2rem;
          margin-top: 9px;
        }
      }
    }
    .required {
      dt {
        span {
          color: #fff;
          background: #e97d3a;
          font-size: 1.6rem;
          padding: 2px 6px;
          margin-left: 16px;
        }
      }
      dd {
        input,
        select,
        textarea {
          background: #fbe9de;
        }
        ::placeholder {
          color: #f0a475;
        }
      }
    }
    .form_known {
      dd {
        input {
          width: 140px;
          margin: 0 6px;
        }
      }
    }
    .form_long {
      dt {
        width: 100%;
      }
      dd {
        width: 100%;
      }
    }
  }
  .privacy_box {
    margin-top: 24px;
    border: 1px solid #aaaaaa;
    height: 240px;
    overflow-wrap: break-word;
    overflow-y: scroll;
    padding: 18px 20px;
    white-space: pre-wrap;
  }
}
#event_name_label {
  width: 100%;
  display: block;
  padding: 12px 20px;
  color: #a5a5a5;
  background: #f4f4f4;
}

.event_datetime {
  ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    li {
      width: calc(50% - 8px);
      select {
        width: 100%;
        padding: 12px 20px;
      }
    }
  }
}

.form_image_element {
  position: relative;
  .form_image_element_plus {
    position: absolute;
    width: 25px;
    height: 25px;
    display: block;
    background: var(--c2);
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    z-index: 10;
    cursor: pointer;
  }
  .form_image_element_plus::before {
    content: "";
    display: block;
    width: 17px;
    height: 2px;
    background: var(--c3);
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
  }
  .form_image_element_plus::after {
    content: "";
    display: block;
    width: 2px;
    height: 17px;
    background: var(--c3);
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
  }
}

.form_image_element {
  margin-bottom: 24px;
  display: none;
}

.form_image_element p {
  opacity: 0;
  transition: 0.3s;
}

.form_image_element_interval {
  display: block;
}

.form_image_element_interval p {
  opacity: 1;
}

.form_image_element_on {
  display: block;
}

.form_image_element_on p {
  opacity: 1;
}

.form_image_element_on .form_image_element_plus {
  display: none;
}

/* requset */

body.request {
  .content_header {
    display: none;
  }
}
.request_content_request {
  max-width: 900px;
  margin: 0 auto;
  h2 {
    font-size: 4rem;
    color: var(--c2);
    text-align: center;
    border-bottom: 4px dotted var(--c3);
    padding-bottom: 9px;
  }
  .request_note {
    color: #91754d;
    font-size: 2.2rem;
    text-align: center;
    margin-top: 26px;
    strong {
      font-size: 3rem;
      font-weight: 700;
      color: var(--c2);
    }
  }
}

.requset_how_elements {
  margin: 15px auto 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 6px;
  .requset_how_element {
    background: var(--c3);
    width: calc((100% - 12px) / 3);
    display: flex;
    flex-direction: column;
    gap: 30px;
    .request_how_header {
      flex-grow: 1;
      color: #fff;
      background: var(--c2);
      text-align: center;
      position: relative;
      padding: 14px 6px;
      .step {
        font-size: 2rem;
        font-family: var(--en);
      }
      h3 {
        margin-top: 6px;
        font-size: 1.6rem;
      }
    }
    .request_how_header::after {
      content: "";
      display: block;
      position: absolute;
      width: 20px;
      height: 16px;
      background: var(--c2);
      top: calc(100% - 1px);
      left: 50%;
      transform: translateX(-50%);
      clip-path: polygon(0 0, 50% 100%, 100% 0);
    }
    .request_how_body {
      padding: 0 20px 24px 20px;
      font-size: 1.6rem;
    }
  }
}

@media screen and (max-width: 1110px) {
}
@media screen and (max-width: 740px) {
  .contact_content {
    margin-top: 83px;
    .contact_form_header {
      container-type: inline-size;
      h2 {
        font-size: 6cqw;
        padding-bottom: 36px;
      }
    }
  }

  .contact_form_body {
    margin-top: 30px;
    .contact_form {
      gap: 21px;
      dl {
        gap: 8px;
        dt {
          width: 100%;
          padding-top: 0;
          font-size: 1.6rem;
        }
        dd {
          width: 100%;
          input {
            padding: 8px;
          }
          .form_note {
            margin-top: 5px;
          }
          .wpcf7-checkbox,
          .wpcf7-acceptance {
            padding-top: 0;
            .wpcf7-list-item {
              font-size: 1.4rem;
            }
          }
        }
      }
      .required {
        dt {
          span {
            font-size: 1rem;
          }
        }
      }
    }
    .privacy_box {
      height: 140px;
    }
  }
  .request_content_request {
    h2 {
      font-size: 2.4rem;
    }
    .request_note {
      font-size: 1.8rem;
      margin-top: 12px;
      strong {
        font-size: 2.2rem;
      }
    }
  }
  .requset_how_elements {
    .requset_how_element {
      width: 100%;
    }
  }
}
@media screen and (max-width: 639px) {
}
@media screen and (max-width: 500px) {
}