@charset "UTF-8";

/**********************************************************************
  コンタクトフォーム用css
**********************************************************************/
/* コンタクトフォーム Start */
.container .wpcf7 {
  margin: 3.0rem 0;
  padding: 2.0rem 8.0rem;  
  border-top: 1px solid var(--color-border);

  .must-item {
    display: inline-block;
    margin-right: 0.3rem;
    padding: 0.1rem 0.5rem;
    width: 50px;
    color: var(--color-white);
    font-size: 0.8rem;
    text-align: justify;
    text-align-last: justify;
    background-color: var(--color-border);
    border: 1px solid var(--color-white) !important;
    border-radius: 8px;
  }
  table {
    width: 100%;

    tr {
      th, td {
        padding: 0.8rem 0.8rem 0 0.8rem;
      }
    }
    .select-container { width: 100%; }
    input[type=text],
    input[type=email],
    textarea,
    select {
      width: 100%;
      border: 1px solid var(--color-border) !important;
    }
    .text-input-down { display: none; }
  }
  table.contact-icci tr th { width: 22%; }
  input[type=submit] {
    padding-left: 3.0rem;
    padding-right: 3.0rem;
    width: 150px;
    text-align: justify;
    text-align-last: justify;
  }
  .wpcf7-not-valid-tip {  /* 入力エラー */
    margin: 0.1rem 0 0 0;
    color: var(--color-text-red);
    font-size: 0.9rem;
  }
  .wpcf7-response-output {  /* レスポンス */
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    color: var(--color-white);
    text-align: center;
  }
  form.sent .wpcf7-response-output {  /* レスポンス・完了 */
    background-color: var(--color-back-green);
    border: 6px double var(--color-white);
  }
  .failed .wpcf7-response-output,
  .aborted .wpcf7-response-output {  /* レスポンス・警告など */
    background-color: var(--color-back-red);
    border: 6px double var(--color-white);
  }
  .invalid .wpcf7-response-output,
  .unaccepted .wpcf7-response-output {  /* レスポンス・間違いなど */
    background-color: var(--color-back-yellow);
    border: 6px double var(--color-white);
  }
  .spam .wpcf7-response-output {  /* レスポンス・スパム */
    background-color: var(--color-back-purple);
    border: 6px double var(--color-white);
  }
}
/* コンタクトフォーム End */

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/* 1279px（タブレット）以下 */
@media screen and (max-width: 1279px) {
  /* */
}

/* 767px（スマホ）以下 */
@media screen and (max-width: 767px) {
  /* コンタクトフォーム Start */
  .container .wpcf7 {
    margin: 0px;
    padding: 1.0rem;
    
    .must-item { width: auto; }
    table {
      .br-point { display: none; }
      .text-input-right { display: none; }
      .text-input-down { display: inline; }
      tr {
        th,  td {
          display: block;
          width: 100%;
          min-width: 100%;
          font-size: 1.0rem;
          text-align: left;
        }
      }
    }
  }
  /* コンタクトフォーム End */
}