<!-- タイトル（スクショ左上の「テスト」） -->
<p class="pd-min-title">テスト</p>


<style>
  /* ====== ベース ====== */
  #pardot-form {
    font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .pd-min-title{
    margin: 16px 0 0 20px;
    color:#6b6b6b;
    font-size:14px;
  }


  /* フォーム全体の配置：スクショのように少し右寄せ */
  #pardot-form .pd-form-wrap{
    margin: 10px 0 0 160px; /* 左余白で“右側にフォームがある”雰囲気を再現 */
    max-width: 420px;
  }


  /* ====== 行レイアウト（ラベル左／入力右） ====== */
  #pardot-form .form-field{
    display: flex;
    align-items: center;
    margin: 10px 0;
  }


  /* ラベル */
  #pardot-form .form-label{
    width: 70px;           /* スクショのラベル幅に近づける */
    font-weight: 700;
    margin: 0;
    display: inline-flex;
    align-items: center;
  }


  /* 必須の「＊」を黄色で付与 */
  #pardot-form .form-field.required .form-label::after{
    content:"＊";
    margin-left: 4px;
    color:#f0b400;
    font-weight: 700;
  }


  /* 入力側のコンテナ */
  #pardot-form .pd-ctrl{
    flex: 1;
  }


  /* テキスト入力の見た目（細い枠線・小さめ高さ） */
  #pardot-form input[type="text"],
  #pardot-form input[type="email"],
  #pardot-form input[type="tel"],
  #pardot-form input[type="url"],
  #pardot-form input[type="number"],
  #pardot-form input[type="search"],
  #pardot-form input[type="password"],
  #pardot-form textarea,
  #pardot-form select{
    width: 100%;
    height: 26px;
    border: 1px solid #c9c9c9;
    border-radius: 2px;
    padding: 2px 6px;
    outline: none;
    box-sizing: border-box;
  }
  #pardot-form textarea{ height: 80px; }


  /* エラーは赤字（必要最低限） */
  #pardot-form .form-text.error{ color:#DC3E31; }
  #pardot-form .errors{
    margin: 0 0 10px;
    padding: 8px;
    border: 1px solid #DC3E31;
    color:#DC3E31;
  }


  /* 送信ボタンをスクショの“小さな四角”に */
  #pardot-form .submit{
    margin-left: 70px; /* ラベル幅と揃える */
    margin-top: 8px;
    text-align: left;  /* 中央寄せを解除 */
  }
  #pardot-form input[type="submit"]{
    width: 34px;
    height: 24px;
    border: 1px solid #bdbdbd !important;
    background: #e9e9e9 !important;
    border-radius: 3px;
    padding: 0;
    color: transparent;        /* テキストは非表示 */
    text-indent: -9999px;      /* ボタン内テキストを視覚的に隠す */
    cursor: pointer;
  }
  #pardot-form input[type="submit"]:hover{ filter: brightness(0.97); }


  /* スマホは縦積み */
  @media (max-width: 768px){
    #pardot-form .pd-form-wrap{ margin-left: 0; }
    #pardot-form .form-field{
      flex-direction: column;
      align-items: flex-start;
    }
    #pardot-form .form-label{ width:auto; margin-bottom: 4px; }
    #pardot-form .submit{ margin-left: 0; }
    #pardot-form input[type="submit"]{ width: 40px; height: 28px; }
  }
</style>


<form class="form" id="pardot-form" accept-charset="UTF-8" method="post" action="%%form-action-url%%">
  <div class="pd-form-wrap">
    %%form-opening-general-content%%
    %%form-if-thank-you%%
      %%form-javascript-focus%%
      %%form-thank-you-content%%
      %%form-thank-you-code%%
    %%form-end-if-thank-you%%


    %%form-if-display-form%%
      %%form-before-form-content%%


      <!-- エラー表示 -->
      %%form-if-error%%
        <div class="errors">入力エラーがあります。</div>
      %%form-end-if-error%%


      <!-- ▼ 各フィールド -->
      %%form-start-loop-fields%%
        <div class="form-field %%form-field-css-classes%% %%form-field-class-type%% %%form-field-class-required%% %%form-field-class-hidden%% %%form-field-class-no-label%% %%form-field-class-error%% %%form-field-dependency-css%%">
          %%form-if-field-label%%
            <label class="form-label" for="%%form-field-id%%">%%form-field-label%%</label>
          %%form-end-if-field-label%%


          <div class="pd-ctrl">
            %%form-field-input%%
            %%form-if-field-description%%<small class="form-text text-muted">%%form-field-description%%</small>%%form-end-if-field-description%%
            <div id="error_for_%%form-field-id%%" style="display:none"></div>
            %%form-field-if-error%%<small class="form-text error">%%form-field-error-message%%</small>%%form-field-end-if-error%%
          </div>
        </div>
      %%form-end-loop-fields%%
      <!-- ▲ 各フィールド -->


      %%form-spam-trap-field%%
      <input name="_utf8" type="hidden" value="&#9731;">


      <!-- 送信ボタン（小さな四角） -->
      <div class="submit">
        <input type="submit" class="btn" accesskey="s" value="送信" %%form-submit-disabled%% />
      </div>


      %%form-after-form-content%%
    %%form-end-if-display-form%%
  </div>
</form>


%%form-javascript-link-target-top%%