/* -------------------------------------------------
   ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼
--------------------------------------------------*/
.form-top{
  background-position:center center;
  width:100%;
  height:250px;                /* スマホでのヘッダー画像の高さ */
}

.form-top .form-top-right{
  display:none;
}

@media (min-width:768px){
  .form-top{
    height:500px;              /* PCでのヘッダー画像の高さ */
  }
}
/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */



/* -------------------------------------------------
   ▼▼ 背景カラーを変更するCSS ここから ▼▼
--------------------------------------------------*/
.form-bottom{
  background:#ffffff;          /* フォーム下部の背景色 */
}
/* ▲▲ 背景カラーを変更するCSS ここまで ▲▲ */



/* -------------------------------------------------
   ▼▼ 中見出し13 ここから ▼▼
   ★画像を背景として挿入する（方法①）
--------------------------------------------------*/
h4.description-md-title{
  /* 背景色＋アイコン画像をまとめて指定 */
  background:#a6d3c8 url('https://manager.linestep.net/line/media#&gid=4&pid=1') no-repeat 15px center;
  background-size:32px 32px;   /* アイコン画像のサイズ */

  /* 画像ぶんだけ左インデントを確保 */
  padding-left:10px;           /* 32px(画像)＋13px(余白)＋15px(既存padding) */

  box-shadow:none;
  color:#ffffff;               /* 文字色 */
  width:100%;
  margin:15px 0 0;
  font-weight:600;
  padding-top:10px;            /* 既存padding維持 */
  padding-right:15px;
  padding-bottom:10px;
  position:relative;
}

/* 折り返しの三角形（既存装飾） */
h4.description-md-title::before{
  position:absolute;
  content:'';
  top:100%;
  left:0;
  border:none;
  border-bottom:15px solid transparent;
  border-right:20px solid #959e9b;  /* 折り返し部分の背景色 */
}

/* フォーム内カラム余白リセット（既存） */
.col-sm-4,
.col-sm-8,
.col-sm-12{
  padding:0;
}
/* ▲▲ 中見出し13 ここまで ▲▲ */




/* -------------------------------------------------
   ▼▼ 小見出し14 ここから ▼▼
--------------------------------------------------*/
:root{
  --line-color-s:#a7d6ff;      /* 下線の色 */
}

h5.description-title{
  background:linear-gradient(transparent 70%,var(--line-color-s) 70%);
  box-shadow:none;
  color:#555555;               /* 文字色 */
  width:100%;
  margin:15px 0 0;
  font-weight:600;
  padding:15px 15px 8px 0;
}

.col-sm-4,
.col-sm-8,
.col-sm-12{
  padding:0;
}
/* ▲▲ 小見出し14 ここまで ▲▲ */



/* -------------------------------------------------
   ▼▼ ボタン03 ここから ▼▼
--------------------------------------------------*/
:root{
  --btn-bg-color:#02d8ff;      /* ボタン背景色 */
  --btn-font-color:#ffffff;    /* ボタン文字色 */
}

.btn-primary,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus,
.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.open>.btn-primary.dropdown-toggle{
  color:var(--btn-font-color);
  background:var(--btn-bg-color);
  border:none;
  width:100%;
  height:60px;                /* ボタン高さ */
  border-radius:30px;
  padding:0 15px;
  font-size:16px;             /* ボタン文字サイズ */
  letter-spacing:.1em;
  position:relative;
  outline:none;
  margin-bottom: 300px;  /* 👈 追加！ボタンの下に余白 */
}

.btn-primary::before{
  content:'内容にお間違いはないですか？'; /* 吹き出し文言 */
  display:inline-block;
  font-size:14px;             /* 吹き出し文字サイズ */
  line-height:1.5;
  padding:0 20px;
  color:var(--btn-bg-color);
  background:var(--btn-font-color);
  border:2px solid var(--btn-bg-color);
  border-radius:16px;
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
}
/* ▲▲ ボタン03 ここまで ▲▲ */