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

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

@media (min-width: 768px) {
.form-top {
height: 380px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */
}
}
/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */


/* ▼▼ 背景カラーを変更するCSS ここから ▼▼ */
.form-bottom {
  background: #BAD6C3; /*背景色はここのカラーコードを変更*/
}
/* ▲▲ 背景カラーを変更するCSS ここまで ▲▲ */



/* ふわっと出るアニメーション */
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(60px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* テキストの行間 */
.text-break{
line-height: 1.8em;
}

/* 角丸枠 */
.form-editor{
	background-color: #fff;
	border-radius: 10px;
	padding: 10px 20px;
animation-name:fadeUpAnime;
animation-duration:1.8s;
animation-fill-mode:forwards;
opacity:0;
}

/* 送信ボタン */
.btn {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    color: #142329;
    background-color:#DBEBF8 ;
border:#DBEBF8 thin solid;
    overflow: hidden;
margin:0 auto 40px !important;
}
.btn:hover {
background-color: #DBEBF8;
border:#DBEBF8 thin solid;
}

.btn::after {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 50px;
    height: 50px;
    background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


/* ▼▼ 中見出し16 ここから ▼▼ */
:root {
--bg-color-left: #DBEBF8; /* グラデーションの左側の色はここのカラーコードを変更 */
--bg-color-right: #CAE0D3; /* グラデーションの右側の色はここのカラーコードを変更 */
}

h4.description-md-title {
background: -webkit-linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));
background:-moz-linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));
background: linear-gradient(to right, var(--bg-color-left), var(--bg-color-right));
box-shadow: none;
color: #142329; /* 文字色はここのカラーコードを変更 */
width: 100%;
margin: 15px 0 0 0;
font-weight: 600;
padding: 15px 15px 15px 15px;

}

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

/* ▼▼ 小見出し10 ここから ▼▼ */
h5.description-title {
 background: #dbebf8; /* 背景色はここのカラーコードを変更 */
 color: #555555; /* 文字色はここのカラーコードを変更 */
 width: 100%;
 margin: 15px 0 0 0;
 box-shadow: none;
 font-weight: 600;
 padding: 15px 15px 15px 15px;
 border-radius: 22px 0px 0px 22px;
}

h5.description-title::before {
 content: '●';
 color: #ffffff;
 margin-right: 8px;
}

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

/****** スクロールボックス******/
  .form-editor div:nth-child(4) .form-group p{
  width: 100%;                /* 横幅を200pxに指定 */
  height: 150px;               /* 横幅を200pxに指定 */
  border: 1px solid #000;      /* わかりやすくボーダーを引く */
  overflow-y: scroll;          /* 縦方向にスクロール可能にする */
}