@charset "UTF-8";
/* ==========================================================================
 * PAGES - ga4_form
 *
 * WordPressのページをカスタマイズ
 * ========================================================================== */
/* ==========================================================================
 * ABSTRACTS - variables
 *
 * テーマ全体で使用する変数を定義
 * ========================================================================== */
/* ==========================================================
  ▼ ブランドカラー
============================================================ */
/* ==========================================================
  ▼ プランカラー
============================================================ */
/* ==========================================================
  ▼ UIカラー（補助的なカラーパレット）
============================================================ */
/* ==========================================================
  ▼ フォント関連
============================================================ */
/* ==========================================================================
 * ABSTRACTS - mixins
 *
 * テーマで再利用可能な変数を定義
 * ========================================================================== */
/* ==========================================================
  ▼ @mixin respon($device) - デバイスごとのレスポンシブ処理
============================================================ */
/* ==========================================================
  ▼ @mixin clearfix - フロート解除用
============================================================ */
/* ==========================================================
  ▼ @mixin nested-ol - olの入れ子階層に応じた番号スタイル
============================================================ */
/* ==========================================================
  ▼ common
============================================================ */
.banner {
  width: 80%;
}
@media screen and (max-width: 768px) {
  .banner {
    width: 100%;
  }
}

/* ==========================================================
  ▼ ga4_form
============================================================ */
#ga4_form .ga4_wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -webkit-box-pack: justify;
          justify-content: space-between;
  gap: 40px;
  margin-top: 64px;
}
@media screen and (max-width: 768px) {
  #ga4_form .ga4_wrap {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    gap: 24px;
    margin-top: 40px;
  }
}
#ga4_form .ga4_wrap .wrap_description {
  -webkit-box-flex: 1;
          flex-grow: 1;
}
#ga4_form .ga4_wrap .wrap_description .main_img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
#ga4_form .ga4_wrap .wrap_description .main_img img {
  width: 100%;
}
#ga4_form .ga4_wrap .wrap_description .main_img .poster_pc {
  display: block;
}
@media screen and (max-width: 768px) {
  #ga4_form .ga4_wrap .wrap_description .main_img .poster_pc {
    display: none;
  }
}
#ga4_form .ga4_wrap .wrap_description .main_img .poster_sp {
  display: none;
}
@media screen and (max-width: 768px) {
  #ga4_form .ga4_wrap .wrap_description .main_img .poster_sp {
    display: block;
  }
}
#ga4_form .ga4_wrap .wrap_form {
  width: 500px;
  -webkit-box-flex: 0;
          flex-grow: 0;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  #ga4_form .ga4_wrap .wrap_form {
    width: 100%;
  }
}