@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');


/* ========================================
　▼ ヘッダーについて ▼
=========================================*/

/* ヘッダーの不要なものを非表示 */
.form-top-left, .form-top-right {
    display: none; /* 非表示 */
}

/* ヘッダー画像（URLはLステップのヘッダー画像URLに設定）*/
.form-top {
    padding-bottom: 60%; /* 高さを調整する（画像 縦幅÷横幅×100）幅1000pxがおすすめ */
    border-radius: 0; /* 角丸なし */
    animation-name: fadeUpAnime; /* フェードイン */
    animation-duration: 1.5s; /* 表示時間 */
    animation-fill-mode: forwards; /* アニメーション終了後の状態を維持 */
}


/*背景色*/
.form-bottom{
   /*background-image: url("https://d27rnpuamwvieu.cloudfront.net/0NMOGOZXTElXrfcmgPJWI2gXX/normal");*/
   background-color:#ecd6db;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
}

/*背景下敷き*/
.form-editor{
   background-color: #fff;
   border-radius: 10px;
   padding: 10px 20px;
   animation-name:fadeUpAnime;
   animation-duration:1.8s;
   animation-fill-mode:forwards;
   opacity:0.8;
}

/* 中見出し ()*/
.description-md-title {
   text-align:center;/*文字中央揃え*/
}

/* ========================================
　▼ 見出しについて ▼
=========================================*/

/* 中見出し */
.description-md-title {
    padding: 12px; /* 内側余白 */
    margin: 20px auto 0; /* 上余白、中央揃え */
    width: 100%; /* 横幅 */
    border-radius: 3px; /* 角丸 */
    font-weight: bold; /* 太字 */
    background-image: url("https://d27rnpuamwvieu.cloudfront.net/02I084m6eKd9cP3180EhKoAXX/normal");
    background-size: contain;
    background-repeat: round;
}
@media (min-width: 768px) {
    .description-md-title {
        display: block;
        width: 380px;
        margin-bottom: -20px;
  }
}

/* 小見出し */
.description-title {
    position: relative; /* 擬似要素用 */
    padding-bottom: 5px; /* 下線との間隔 */
    margin: 40px 0 30px; /* 上下余白 */
    font-size: 17px; /* 文字サイズ */
    text-align: center; /* 中央揃え */
}

/* 小見出しの下線 */
.description-title::after {
    content: ''; /* 擬似要素 */
    position: absolute; /* 絶対配置 */
    left: 0; /* 左端 */
    bottom: -3px; /* 位置調整 */
    width: 100%; /* 横幅 */
    height: 3px; /* 高さ */
    background: linear-gradient(170deg, #df8a9d 0%, #ba5c72 25%,#df8a9d 50%,#ba5c72 75%,#df8a9d 100%); /* グラデーション */
    z-index: -1; /* 背面配置 */
}

/* 項目名 下線 */
.control-label {
    display: block; /* ブロック要素 */
    margin-bottom: 10px; /* 下余白 */
    position: relative; /* 擬似要素配置用 */
}

/* 項目名の下線 */
.control-label::after {
    content: ''; /* 擬似要素 */
    position: absolute; /* 絶対配置 */
    bottom: 0; /* 位置調整 */
    left: 50%; /* 中央揃え */
    transform: translateX(-50%); /* 水平中央 */
    width: 92%; /* 横幅 */
    border-bottom: 1.5px solid #df8a9d; /* 線の色 */
}

/* 項目名 アイコン */
.control-label:before {
    content: ""; /* 擬似要素（空のコンテンツを設定） */
    width: 20px; /* 幅 */
    height: 20px; /* 高さ */
    display: inline-block; /* インラインブロック要素として表示 */
    position: relative; /* 相対位置指定 */
    top: 5px; /* 上からの距離 */
    background-image: url(https://d27rnpuamwvieu.cloudfront.net/05derBh0ng9HhneK7Hra09wXX/normal); /* アイコン画像()にURLを入れる */
    background-size: contain; /* 画像を枠内に収める */
    vertical-align: top; /* 上揃え */
}

/*各文章上余白()*/
p {
  margin-top:20px;!important!
}

img{
 margin-top:20px;!important!
}

/* ========================================
　▼ フォーム部分について ▼
=========================================*/

/* フォームのグループ */
.form-group {
    margin-bottom: 50px; /* 下余白 */
}

/* 必須ボタン */
.label-danger {
    background-color: #e26a86; /* 背景色 */
}

/* 記入後のテキストボックス背景色 */
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #ffffff inset !important; /* 背景色を強制適用 */
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important; /* Safari対応 */
}

/* テキストボックスがアクティブな状態の色指定 */
.form-control:focus,
.has-success .form-control:focus,
.has-error .form-control:focus {
    border-color: #FF7936; /* 枠線の色 */
    box-shadow: 0 0 4px 0.3rem #FF793633; /* ぼかしの色（カラーコードの後ろに33を入れて20%の透過度）*/
}

/* テキストボックスのエラー時、完了時の枠線 */
.has-error .form-control,
.has-success .form-control {
    border-color: #FF7936; /* 枠線の色 */
}

/* エラーメッセージのテキストカラー */
.has-error .help-block {
    color: #FF7936 !important; /* 文字色 */
}


/* ========================================
　▼ ラジオ・チェックボタンについて ▼
=========================================*/

/* ===▼ ラジオ・チェック共通 ▼=== */

/* 選択肢の間に余白を入れる */
.radio, .checkbox {
    margin: 5px 0 0; /* 外側余白 */
}

/* 選択肢のグループの上に余白調整 */
.radios, .checkboxes {
    margin-top: 0px; /* 上部外側余白 */
}

/* ラジオ・チェック選択前のボタン枠色 */
.radio input[type=radio]:after,
.checkbox-inline input[type=checkbox]:after,
.checkbox input[type=checkbox]:after {
    top: 0; /* 上からの距離 */
    border: 1.5px solid #5c5c5c; /* ボーダーの色 */
}

/* ラジオ・チェック選択時のボタン枠色 */
[type="radio"]:checked + label:after,
.container_check input:checked ~ .checkmark {
    background: #FF7936; /* 枠色 */
}

/* 選択された項目のだけ文字色を変える */
label:has(input:checked) {
    color: #FF7936 !important; /* 文字色 */
}


/* ===▼ ラジオボタン ▼=== */

/* ラジオボタンの中央の円の位置 */
.radio input[type=radio]:before {
    margin-top: 3px; /* 上部外側余白 */
    background-color: #FF7936; /* 中央の円の色 */
}

/* ラジオボタンの外側の円の色 */
.radio input[type=radio]:checked:after {
    border-color: #FF7936; /* 外側の円の色 */
}


/* ===▼ チェックボックス ▼=== */

/*  チェックボックスを外した時の枠色 */
.checkbox input[type=checkbox]:focus:after {
    border-color: #5c5c5c; /* 枠色 */
}

/*  チェックボックスがアクティブな状態の色指定 */
.checkbox-inline input[type=checkbox]:checked:after, 
.checkbox input[type=checkbox]:checked:after, 
input[type=checkbox]:checked:after {
    background-color: #FF7936; /* ボックス色 */
    border-color: #FF7936; /* 枠色 */
}



/* ========================================
　▼ 送信ボタンについて ▼
=========================================*/

/* 送信ボタン */
.btn {
    display: block; /* ブロック要素 */
    width: 90%; /* 横幅 */
    margin: -60px auto 0; /* 上方向に移動して中央揃え */
    background-image: linear-gradient(170deg, #e26a86 0%, #e26a86 100%) !important; /* グラデーション */

    border: none; /* 枠なし */
    font-weight: bold; /* 太字 */
    position: relative; /* 配置 */
    overflow: hidden; /* はみ出しを隠す */
}

/* 送信ボタンの矢印 */
.btn::after {
    content: '▶︎'; /* 矢印 */
    margin-left: 10px; /* 文字との間隔 */
    font-size: 10px; /* サイズ */
    vertical-align: middle; /* 中央揃え */
}

/* ボタンの光るエフェクト */
.btn::before {
    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: 3.5s; /* 時間 */
    animation-timing-function: ease-in-out; /* 滑らかに */
    animation-iteration-count: infinite; /* 繰り返す */
}

/* 光るアニメーションの動作 */
@keyframes shiny {
    0% {
        transform: scale(0) rotate(25deg); /* 初期状態 */
        opacity: 0; /* 透明 */
    }
    50% {
        transform: scale(1) rotate(25deg); /* 拡大 */
        opacity: 1; /* 表示 */
    }
    100% {
        transform: scale(50) rotate(25deg); /* 消える */
        opacity: 0; /* 透明 */
    }
}