@charset "UTF-8";


/*---------------------------------------------------------------*\
$contact – layout
\*---------------------------------------------------------------*/

#contact {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 100px 24px 140px;
  gap: 56px;
}


/*---------------------------------------------------------------*\
$contact – 注意事項
\*---------------------------------------------------------------*/

#contact .notes {
  padding: 32px 28px;
  background-color: var(--color_bg_gray);
  border: solid 1px var(--border_light);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#contact .note_lead {
  font-size: 16px;
  font-weight: 700;
}

#contact .note_caution {
  font-size: 15px;
}

#contact .font_alert {
  color: #d6406a;
}

#contact .note_list {
  gap: 12px;
  margin: 4px 0;
  padding-left: 1.4em;
  list-style: decimal;
}

#contact .note_list li {
  font-size: 14px;
  color: #555;
}

#contact .note_policy {
  font-size: 14px;
}

#contact .note_policy a {
  text-decoration: underline;
}


/*---------------------------------------------------------------*\
$contact – form (Contact Form 7)
\*---------------------------------------------------------------*/

#contact .wpcf7 {
  width: 100%;
}

#contact form.wpcf7-form {
  position: relative;
}

/* step container */
#contact .step {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 各入力ブロック */
#contact .form_block {
  display: flex;
  flex-direction: column;
}

/* ラベル */
#contact .title_input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
}

#contact .must {
  font-size: 11px;
  font-weight: 500;
  color: #d6406a;
  background-color: #fceaef;
  padding: 3px 8px;
  border-radius: 4px;
  line-height: 1;
}

#contact .name_fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 12px;
}

#contact .name_field {
  display: flex;
  flex-direction: column;
}

#contact .sub_title_input {
  font-size: 13px;
  color: #666;
}

#contact .field_outline {
  margin-top: 8px;
  font-size: 13px;
  color: #999;
}

/* input / textarea / select */
#contact .form_input,
#contact .form_input_area,
#contact .form_select {
  width: 100%;
  margin-top: 12px;
  padding: 18px 16px;
  font-size: 16px;
  color: var(--color_text);
  background-color: #fff;
  border: solid 1px #ddd;
  border-radius: var(--radius);
  -webkit-transition: border-color var(--duration_fast) var(--ease_out);
  transition: border-color var(--duration_fast) var(--ease_out);
}

#contact .form_input:focus,
#contact .form_input_area:focus,
#contact .form_select:focus {
  outline: none;
  border-color: var(--color_primary);
}

#contact .form_input_area {
  min-height: 240px;
  resize: vertical;
  line-height: 1.7;
}

#contact .form_select {
  height: 60px;
  padding: 0 16px;
  cursor: pointer;
  appearance: auto;
}

/* radio */
#contact .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 12px;
}

#contact .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}

#contact .wpcf7-radio .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

#contact .wpcf7-radio input[type="radio"],
#contact .wpcf7-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--color_primary);
  cursor: pointer;
}

/* 同意チェック */
#contact .agreement_block {
  align-items: stretch;
  margin-top: 8px;
}

#contact .agreement_description {
  margin-top: 12px;
  font-size: 14px;
  color: #555;
}

#contact .agreement_terms {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
  padding: 18px 16px;
  font-size: 14px;
  color: #555;
  background-color: var(--color_bg_gray);
  border: solid 1px var(--border_light);
  border-radius: var(--radius);
}

#contact .agreement_block .wpcf7-list-item {
  margin: 18px 0 0;
}

#contact .agreement_block .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

#contact .agreement_block a {
  text-decoration: underline;
}

/* エラーメッセージ */
#contact .error-message {
  margin-top: 10px;
  font-size: 13px;
  color: #d6406a;
}


/*---------------------------------------------------------------*\
$contact – buttons
\*---------------------------------------------------------------*/

#contact .wrap_buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}

#contact .button,
#contact .wpcf7-submit,
#contact #show-confirm {
  width: 100%;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  border: solid 2px var(--color_text);
  border-radius: var(--radius_button);
  cursor: pointer;
  -webkit-transition: all var(--duration_fast) var(--ease_out);
  transition: all var(--duration_fast) var(--ease_out);
}

/* 主アクション（確認へ進む / 送信する） */
#contact #show-confirm,
#contact .wpcf7-submit {
  color: #fff;
  background-color: var(--color_text);
}

#contact #show-confirm:hover,
#contact .wpcf7-submit:hover {
  opacity: .82;
}

/* 副アクション（戻る） */
#contact #go-back {
  color: var(--color_text);
  background-color: transparent;
}

#contact #go-back:hover {
  color: #fff;
  background-color: var(--color_text);
}


/*---------------------------------------------------------------*\
$contact – confirmation (step-2)
\*---------------------------------------------------------------*/

#contact .step-2 .wrap {
  display: flex;
  flex-direction: column;
  padding: 8px 28px;
  background-color: var(--color_bg_gray);
  border: solid 1px var(--border_light);
}

#contact .step-2 .each_conf {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: solid 1px #e6e6e6;
}

#contact .step-2 .each_conf:last-child {
  border-bottom: none;
}

#contact .step-2 .each_conf dt {
  font-size: 13px;
  color: #888;
}

#contact .step-2 .each_conf dd {
  font-size: 16px;
  line-height: 1.7;
  word-break: break-word;
}


/*---------------------------------------------------------------*\
$contact – CF7 status / misc
\*---------------------------------------------------------------*/

/* CF7 標準のインラインエラーは独自表示に統一するため非表示 */
#contact .wpcf7-not-valid-tip {
  display: none !important;
}

#contact .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.6;
  color: #d6406a;
  background-color: #fceaef;
  border: solid 1px #f3c6d2 !important;
  border-radius: var(--radius);
}

#contact .wpcf7-spinner {
  margin: 16px auto 0;
}

/* フォーム未設定時のプレースホルダ */
#contact .cf7_notice {
  padding: 48px 24px;
  font-size: 15px;
  color: #888;
  background-color: var(--color_bg_gray);
  border-radius: var(--radius);
}


/*---------------------------------------------------------------*\
$contact – responsive
\*---------------------------------------------------------------*/

@media screen and (max-width: 600px) {

  #contact {
    padding: 56px 20px 90px;
    gap: 40px;
  }

  #contact .notes {
    padding: 24px 20px;
  }

  #contact .note_lead {
    font-size: 15px;
  }

  #contact .note_caution,
  #contact .note_policy {
    font-size: 13px;
  }

  #contact .note_list li {
    font-size: 13px;
  }

  #contact .step {
    gap: 28px;
  }

  #contact .title_input {
    font-size: 15px;
  }

  #contact .name_fields {
    gap: 14px;
    margin-top: 10px;
  }

  #contact .form_input,
  #contact .form_input_area,
  #contact .form_select {
    margin-top: 10px;
    padding: 15px 14px;
    font-size: 16px;
  }

  #contact .form_input_area {
    min-height: 200px;
  }

  #contact .form_select {
    height: 54px;
  }

  #contact .wpcf7-radio {
    gap: 20px;
  }

  #contact .agreement_description,
  #contact .agreement_terms {
    font-size: 13px;
  }

  #contact .button,
  #contact .wpcf7-submit,
  #contact #show-confirm {
    height: 60px;
    font-size: 15px;
  }

  #contact .step-2 .wrap {
    padding: 4px 20px;
  }

  #contact .step-2 .each_conf {
    padding: 20px 0;
  }

  #contact .step-2 .each_conf dd {
    font-size: 15px;
  }
}