@charset "UTF-8";

/* ========================================
 *  Template Name: Contact Style Sheet
 * =======================================*/

#contact {
  width: 800px;
  margin: 0 auto;
}

.inquiry {
  width: 100%;
  margin: 0 auto;
}

.inquiry p {
  margin-bottom: 30px;
}

.inquiry-form p {
  margin-bottom: 0px;
}

.inquiry-form table {
  width: 100%;
  margin-bottom: 3rem;
  background-color: #1c1d21;
}

.inquiry-form  tr {
  border-bottom: 1px solid #ccc;
}

.inquiry-form table tr:last-child {
  border-bottom: none;
}

.inquiry-form table tr {
  border-bottom: 1px solid #2f3034;
}

.inquiry-form table tr:last-child {
  border-bottom: none;
}

.inquiry-form table th,
.inquiry-form table td {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  font-weight: normal;
}

.inquiry-form table th {
  padding: 15px 30px;
  color: #fff;
  font-size: ;
  font-weight: normal;
  text-align: left;
}

.inquiry-form table td {
  padding: 0 30px 24px;
}

.cf7-label {

}

.cf7-en {
  font-weight: normal;
  font-size: 0.95em;
}

.cf7-jp {
  font-size: 0.7em;
  color: #666;
}

.required {
  margin-left: 2px;
  color: #73674c;
}

.submit {
  transition: .3s;
}

.submit:hover {
  opacity: .7;
}

input {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 15px;
  border: 0;
  background-color: #2f3034;
  color: #000;
}

textarea.wpcf7-form-control.wpcf7-textarea {
  height: 200px;
  box-sizing: border-box;
}

input:focus,
textarea:focus {
  outline: 2px solid #000;
}

/* 「送信する」ボタン */
input.wpcf7-submit {
  display: block;
  width: 300px;
  margin: 15px auto 0;
  padding: 15px;
  border: 0;
  color: #fff;
  font-family: ;
  font-size: 18px;
  font-weight: 700;
  background: #000;
}

input.wpcf7-submit:hover {
  cursor: pointer;
}

.wpcf7 form.sent .wpcf7-response-output {/* 送信ボタン下完了時 */
    border-color: #eb008c;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {/* 送信ボタン下未入力警告 */
    border-color: #f88;
}

/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
  color: #eb008c;
  font-weight: normal;
}

.cta {
  display: inline-flex;
  margin: 0 auto;
  align-items: center;
  gap: 10px;
  background: #000;
  color: white;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
}






span.wpcf7-not-valid-tip　/* バリデーションエラー（必須項目未入力など） */ {
  color: #eb008c;         /* エラー文字色 */
  font-size: 0.85em;      /* 文字サイズ */
  margin-top: 5px;        /* 上の余白 */
  display: block;         /* ブロック表示 */
}

div.wpcf7-response-output.wpcf7-validation-errors　/* 全体のバリデーションメッセージ（フォーム下部に表示） */ {
  border: 1px solid #eb008c;
  background-color: #fff0f6;
  color: #eb008c;
  padding: 15px;
  font-size: 1em;
  margin-top: 20px;
  text-align: center;
}

div.wpcf7-response-output.wpcf7-mail-sent-ok　/* 全体のバリデーションメッセージ（フォーム下部に表示） */ {
  border: 1px solid #00c851;
  background-color: #e6fff2;
  color: #00c851;
  padding: 15px;
  font-size: 1em;
  margin-top: 20px;
  text-align: center;
}

div.wpcf7-response-output.wpcf7-mail-sent-ng　/* 送信失敗メッセージ */ {
  border: 1px solid #ff4444;
  background-color: #ffecec;
  color: #ff4444;
  padding: 15px;
  font-size: 1em;
  margin-top: 20px;
  text-align: center;
}


.wpcf7-response-output {
  border: 1px solid #eb008c;
  background: #fff0f6;
  color: #eb008c;
  padding: 15px;
  text-align: center;
  margin-top: 20px;
}

.wpcf7-not-valid-tip {
  color: #eb008c;
  font-size: 0.85em;
  margin-top: 5px;
  display: block;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  outline: 2px solid #eb008c;
}



/* ========================================
 *  画面の横幅が768px以上 (Tablet)
 * =======================================*/
@media screen and (min-width: 768px) {



}

/* ========================================
 *  画面の横幅が1024px以上 (Desktop)
 * =======================================*/
@media screen and (min-width: 1024px) {

.inquiry-form {
}

.inquiry-form table {
  margin-bottom: 3rem;
}

.inquiry-form table tr {
  display: flex;
}

.inquiry-form table th,
.inquiry-form table td {
  padding: 24px 30px 24px;
}

.inquiry-form table th {
  width: 30%;
}

.inquiry-form table td {
  width: 70%;
}

}