/* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */

.form-top {

background-position: center center;

width: 100%;

height: 700px;  /* スマホでのヘッダー画像の高さはここの数値を変更 */

}

 

.form-top .form-top-right {

display: none;

}

 

@media (min-width: 768px) {

.form-top {

height: 1350px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */

}

}

/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */

/* ここでプレビューの文字を消しています */

.form-top .form-top-left  {

    display: none;

}

/* ここまでプレビューの文字を消しています */

/* 鉛筆アイコン消す */
.form-top-right {
    display: none;
}

/* 全体の文字色を設定 */
.form-bottom,
.form-editor {
    color: #1f634d;
}


/* ▼ 背景に画像を入れる(追従) ▼ */
.form-bottom {
    position: relative; /* 擬似要素のために相対位置を設定 */
    background-color: #55d787; /* 背景色 */
    padding: 50px 20px 35px; /* 内側の余白（上部に多めに設定） */
    background-image: url("https://d27rnpuamwvieu.cloudfront.net/0vSroFxu7yyEX9zMJGCf9mgXX/normal"); /* 画像のURLを指定 */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center; /* 画像を中央に配置 */
    background-size: cover; /* 画像をカバーサイズに設定 */
}



/* ▼背景の上の枠(角丸)▼ */
.form-editor {
    position: relative; /* 擬似要素のために相対位置を設定 */
    background-color: #fdfdfd;
    border-radius: 2px;
    padding: 10px 20px 30px; /* 下部の余白を追加 */
    animation-name: fadeUpAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    border: 2px solid #55d787; /* 境界線の追加 */
}

/* 背後の枠を作成 */
.form-editor::after {
    content: '';
    position: absolute;
    top: -7px; /* 上からの位置 */
    left: -7px; /* 左からの位置 */
    width: 100%;
    height: calc(100% + 0px); /* 高さを調整して下の余白を増やす */
    background-color: #fdfdfd; /* 背後の枠の背景色 */
    border: 3px solid #55d787; /* 背後の枠の境界線の色 */
    border-radius: 2px; /* 角丸の半径 */
    z-index: -1; /* 背後に配置 */
}



/* ▼浮かんでくるアニメーション▼ */
@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ▼見出しを初期化▼ */
.description-md-title {
    display: flex;
    justify-content: center;
    background-color: initial;
    color: initial;
    padding: initial;
    margin: initial;
    box-shadow: initial;
    text-align: center;
}



/* ▼小見出し▼ */
h5{
  padding: 1rem 2rem;
  border-left: 4px solid #55d787;
}


/* ▼▼ 中見出し ▼▼ */

/* 色のカスタムプロパティを定義 */
:root {
    --bg-color: #fdfdfd; /* 背景色を設定 */
    --border-color-top-left: #e3ff95; /* 上部左のボーダー色を設定 */
    --border-color-bottom-right: #55d787; /* 下部右のボーダー色を設定 */
    --text-color: #1f634d; /* テキストの色を設定 */
}

/* 見出し全体の設定 */
h4.description-md-title {
    display: flex; /* フレックスボックスを使用して要素を配置 */
    justify-content: center; /* テキストを中央に配置 */
    flex-direction: column; 
    width: 100%; /* 幅を100%に設定 */
    height: auto; /* 高さを自動に設定 */
    color: var(--text-color); /* テキストの色を設定 */
    padding: 17px 20px; /* 内側の余白を上下左右設定 */
    box-sizing: border-box; /* パディングと境界を含めたボックスサイズを指定 */
    background-color: var(--bg-color); /* 背景色を設定 */
    margin: 30px 0 20px 0; /* 上下のマージンを設定 (上: 30px、下: 20px) */
    margin-left: -3px; /* 全体を左にずらす */
    border-radius: 2px; /* 角を丸く設定 */
}

/* 見出しテキストのスタイル */
h4 {
    position: relative; /* 擬似要素のために相対位置を設定 */
    padding: 1.5rem 1rem; /* テキスト周りの余白を設定 */
    font-weight: bold; /* 太字を設定 */
    text-align: center; /* テキストを中央揃えに */
}

/* 擬似要素の設定（上部の左寄せのボーダー） */
h4::before {
    position: absolute; /* 擬似要素を絶対位置に配置 */
    width: 95%;
    height: 20px;
    border-left: solid 3px var(--border-color-top-left); /* 左側のボーダーを設定 */
    border-top: solid 3px var(--border-color-top-left); /* 上部のボーダーを設定 */
    top: 0;
    left: 0;
    content: ''; /* 擬似要素の内容を空に設定 */
}

/* 擬似要素の設定（下部の右寄せのボーダー） */
h4::after {
    position: absolute; /* 擬似要素を絶対位置に配置 */
    width: 95%;
    height: 20px;
    border-right: solid 3px var(--border-color-bottom-right); /* 右側のボーダーを設定 */
    border-bottom: solid 3px var(--border-color-bottom-right); /* 下部のボーダーを設定 */
    bottom: 0;
    right: 0;
    content: ''; /* 擬似要素の内容を空に設定 */
}

/* 列の余白設定 */
.col-sm-4, .col-sm-8, .col-sm-12 {
    padding: 0;
}

/* ▲▲ 中見出しここまで ▲▲ */





/*▼ 必須項目の帯色 ▼*/
.label-danger {
    background-color: #fdfdfd;
    font-size: 0.7em;
    font-weight: normal;
}



/* ▼ラジオボタンの色▼ */

/* ラジオボタンがチェックされた時の外側の円の色 */
.radio input[type=radio]:checked:after, .radio-inline input[type=radio]:checked:after {
    border-color: #ffbc95; /*カラーコード */
}

/* ラジオボタンがチェックされた時の中央の円の色 */
.radio input[type=radio]:before, .radio-inline input[type=radio]:before {
    background-color: #ffbc95; /*カラーコード */
}



/* ▼チェックボックスの色▼ */

/* チェックボックスがチェックされた時の色 */
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after {
    background-color: #ffbc95; /* カラコード */
}

/* チェックボックスがチェックされた時の色 */
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after {
    border-color: #ffbc95 !important; /* カラコード */
}


/* ▼ラジオボタンとチェックボックスの選択後のテキスト色▼ */

.has-success .radio {
    color: #004761;
}

.has-success .checkbox {
    color: #004761;
}



/* テキストボックスがアクティブな状態の色指定 */
.form-control:focus {
    border-color: #b3f4eb;
    outline: 0;
    box-shadow: none; /* シャドウを無効に */
}

/* その他のテキストボックスがアクティブな状態の色指定 */
.has-success .form-control {
    border-color: #b3f4eb;
    outline: 0;
    box-shadow: none; /* シャドウを無効に */
}

.has-success .form-control:focus {
    border-color: #b3f4eb;
    outline: 0;
    box-shadow: none; /* シャドウを無効に */
}



/* 送信ボタンのスタイル */
/* 【 四角 】グラデーション＋立体＋外側境界線 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(135deg, #7be5a1 10%, #55d787 10%); /* 45度に傾けたグラデーション */
  color: #fff; /* 文字色 */
  text-align: center;
  border: none; /* 内側の境界線をなしに */
  outline: 2px solid #fdfdfd; /* 外側境界線の追加 */
  border-radius: 4px; /* 角丸の半径 */
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 20px; /* 下部の余白を追加 */
  box-shadow: 0 8px 0 #e3ff95; /* 立体感のための影（ぼかしなし） */
  transition: all 0.2s ease;
  font-weight: 700; /* 太字 */
}

/* ホバー時のスタイル */
.btn:hover {
  background: linear-gradient(135deg, #7be5a1 20%, #55d787 20%); /* ホバー時の背景色グラデーション */
  outline-color: #fdfdfd; /* ホバー時の外側境界線色 */
  transform: translateY(-2px); /* ホバー時に上に動く */
  box-shadow: 0 8px 0 #1f634d; /* ホバー時の立体感のための影（ぼかしなし） */
}

/* クリック時のスタイル */
.btn:active {
  background: linear-gradient(135deg, #05d2c7 20%, #05bfaf 20%); /* クリック時の背景色グラデーション */
  outline-color: #fdfdfd; /* クリック時の外側境界線色 */
  transform: translateY(2px); /* クリック時に下に動く */
  box-shadow: 0 3px 0 #1f634d; /* クリック時の立体感のための影（ぼかしなし） */
}