@charset "utf-8";
/* CSS Document */


/********** contact **********/

main.contact {
  .p-body {
    .p-chapter {
      .p-chapter__inner {
        form {
          dl {
            display: flex;
            + dl {
              border-top: 2px solid #fff;
            }
            dt {
              padding: 3rem 2rem;
              font-weight: 700;
              color: #fff;
              background: var(--light-green);
              width: 260px;
              min-width: 260px;
            }
            dd {
              padding: 2rem;
              width: 100%;
              background: #eee;
              input, select, textarea {
                position: relative;
                display: block;
                padding: 1rem;
                width: 100%;
                font-size: 1em;
                border: 1px solid var(--border-gray);
                resize: none;
                appearance: none;
                background: #fff;
                color: var(--text);
              }
              .select {
                position: relative;
                display: block;
                &::after {
                  content: "";
                  position: absolute;
                  top: 50%;
                  right: 1.5rem;
                  width: .5em;
                  height: .5em;
                  border-right: 2px solid var(--text);
                  border-bottom: 2px solid var(--text);
                  transform: translate(0,-75%) rotate(45deg);
                }
              }
              p {
                + p {
                  margin: .5rem 0 0;
                }
              }
            }
          }
          >desc {
            margin: 1rem 0 0;
            + .acce {
              margin: 2rem 0 0;
            }
          }
          input[type="submit"] {
            display: block;
            margin: 6rem auto 0;
            padding: 1.5rem 2rem;
            width: fit-content;
            min-width: 200px;
            font-size: 1.8rem;
            font-weight: 500;
            color: var(--green);
            border: 1px solid var(--green);
            background: none;
            text-align: center;
            letter-spacing: .05em;
            border-radius: 5px;
            transition: .3s;
            &:hover {
              color: #fff;
              background: var(--green);
              &::after{
                background: #fff;
              }
            }
            &::after{
              content: "";
              display: inline-block;
              margin-left: .5em;
              width: calc(.7em*.7);
              height: .7em;
              clip-path: polygon(0 0, 100% 50%, 0% 100%);
              background: var(--light-green);
              transition: .3s;
            }
          }
          .wpcf7-checkbox {
            display: flex;
            flex-wrap: wrap;
            gap: 0 1em;
            .wpcf7-list-item {
              padding: 1rem 0;
            }
          }
          .wpcf7-list-item {
            margin: 0;
            label {
              display: flex;
              gap: .5em;
              span {
                display: block;
              }
            }
          }
          .wpcf7-form-control-wrap {
            display: block;
          }
          .desc {
            margin: .5rem 0 0;
            text-align: right;
            font-size: .9em;
            + .acce {
              margin: 1em auto 0;
            }
          }
          .acce {
            margin: .5em auto 0;
            width: fit-content;
            a {
              color: var(--green);
              text-decoration: underline;
            }
          }
          input[type="checkbox"] {
            position: relative;
            display: block;
            margin: .1em 0;
            font-size: 1em;
            width: 1.5em;
            min-width: 1.5em;
            height: 1.5em;
            border: 2px solid var(--green);
            -webkit-appearance: none;
            appearance: none;
            background: #fff;
            &:checked {
              &::before {
                content: '';
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%) rotate(50deg);
                width: 8px;
                height: 16px;
                border-right: 4px solid var(--green);
                border-bottom: 4px solid var(--green);
              }
            }
          }
          .wpcf7-response-output {
            margin: 0 auto;
            padding: 0;
            border: none;
            color: var(--red);
            width: fit-content;
          }
        }
        .note {
          margin: 1em 0 0;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  main.contact {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          form {
            dl {
              dt {
                padding: 2.2rem 1.5rem;
                width: 220px;
                min-width: 220px;
              }
              dd {
                padding: 1.5rem;
                input, select, textarea {
                  padding: 1rem;
                }
              }
            }
          }  
        }
      }
    }
  }
}

@media (max-width: 600px) {
  main.contact {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          form {
            dl {
              flex-direction: column;
              dt {
                padding: 1.5rem;
                width: 100%;
                min-width: 100%;
              }
            }
            .wpcf7-radio {
              .wpcf7-list-item {
                padding: .5rem 0;
              }
            }
          }  
        }
      }
    }
  }
}

@media (max-width: 480px) {
  main.contact {
    .p-body {
      .p-chapter {
        .p-chapter__inner {
          form {
            dl {
              flex-direction: column;
              dt {
                padding: 1rem;
              }
              dd {
                padding: 1rem;
              }
            }
            input[type="checkbox"] {
              &:checked {
                &::before {
                  width: 6px;
                  height: 12px;
                  border-right: 3px solid var(--green);
                  border-bottom: 3px solid var(--green);
                }
              }
            }
          }  
        }
      }
    }
  }
}