/* ヘッダーを非表示にする */
#form_top {
    display: none; /* ヘッダーを非表示にする */
}

/* フォーム部分 */
.form-bottom {
    color: #7f6164; /* 全体の文字色 */
    background: linear-gradient(135deg, #feeeee, #fdc0c5); /* 45度のグラデーション */
    padding: 40px 30px 35px; /* 内側の余白も設定 */
}


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


/* ▼背景の上の枠(角丸)▼ */
.form-editor {
    background-color: #fdfdfd;
    border-radius: 10px;
    animation-name: fadeUpAnime;
    animation-duration: 1.8s;
    animation-fill-mode: forwards;
    opacity: 0;
    padding: 10px 20px 40px; /* 下部の余白を追加 */
}

/* ▼浮かんでくるアニメーション▼ */
@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 1rem;
  border-left: 5px solid #fc8490;
}


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

:root {

--bg-color-left: #ffabaa; /* グラデーションの左側の色はここのカラーコードを変更 */

--bg-color-right: #ff6c81; /* グラデーションの右側の色はここのカラーコードを変更 */

}

 

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: #ffffff; /* 文字色はここのカラーコードを変更 */

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;

}

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



/*▼ 必須項目の帯色 ▼*/
.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: #fc8490; /*カラーコード */
}

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



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

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

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


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

.has-success .radio {
    color: #7f6164;
}

.has-success .checkbox {
    color: #7f6164;
}


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

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

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


/* 送信ボタンのスタイル */
/* 【 四角 】グラデーション左右＋立体 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: linear-gradient(to right, #ffabaa, #ff6c81); /* 左→右のグラデーション */
  color: #fff; /* 文字色 */
  text-align: center;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  border: none; /* 内側の境界線をなしに */
  outline: 2px solid #fdfdfd; /* 外側境界線の追加 */
  margin-bottom: 40px; /* 下に余白を追加 */
  box-shadow: 0 8px #d8707b; /* 立体感 */
  transition: all 0.2s ease;
  font-weight: 700; /* 太字 */
}

.btn:hover {
  background: linear-gradient(to bottom, #ffabaa, #ff6c81); /* ホバー時のグラデーション */
  transform: translateY(2px); /* ホバー時にへこむ効果 */
  border: none; /* 内側の境界線をなしに */
  outline: 2px solid #fdfdfd; /* 外側境界線の追加 */
  box-shadow: 0 4px #d8707b; /* 立体感を調整 */
}

.btn:active {
  box-shadow: 0 3px #d8707b; /* クリック時の立体感 */
  border: none; /* 内側の境界線をなしに */
  outline: 2px solid #fdfdfd; /* 外側境界線の追加 */
  transform: translateY(3px); /* クリック時にさらにへこむ効果 */
}