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

/* ヘッダーの不要なものを非表示 */
.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; /* アニメーション終了後の状態を維持 */
}


/* ========================================
　▼ 背景について ▼
=========================================*/

/* PC背景 */
.container {
    background-image: url(https://d27rnpuamwvieu.cloudfront.net/0EoZYJ9lcnyWPH049Xv83egXX/normal); /* 背景画像()にURLを入れる */
    /*background-repeat: repeat; /* 画像を繰り返し */
    background-position: center; /* 中央配置 */
    background-size: contain; /* 画像を全体に収める */
}

/* スマホ背景 */
.form-bottom {
    background-color: #fff/*9*/; /* (半透明の)白背景 */
    margin: 15px; /* 外側余白 */
    padding: 10px; /* 内側余白 */
    animation-name: fadeUpAnime; /* フェードイン */
    animation-duration: 1.5s; /* 表示時間 */
    animation-fill-mode: forwards; /* 状態を維持 */
    /*opacity: 0; /* 初期は透明 */
}

@keyframes fadeUpAnime {
  from {
      opacity: 0; /* 透明 */
      transform: translateY(100px); /* 下からスライド */
  }
  to {
      opacity: 1; /* 完全に表示 */
      transform: translateY(0); /* 元の位置に戻る */
  }
}

/* ========================================
　▼ フォント・画像について ▼
=========================================*/

/* 全体・説明文・選択前チェック＆ラジオ */
body, .help-block,
.has-success .checkbox,
.has-error .checkbox,
.has-success .radio,
.has-error .radio {
    color: #a0958c; /* 文字色 */
}

/* 見出し説明文 */
p {
    font-size: 16px; /* 文字サイズ */
    margin: 20px 0 0px; /* 上下余白 */
}


/* 画像 */
.description-image {
    margin-top: -20px; /* 上方向に移動 */
    border-radius: 3px; /* 角丸 */
}


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

/* 中見出し */
.description-md-title {
    padding: 12px; /* 内側余白 */
    margin: 20px auto 0; /* 上余白、中央揃え */
    width: 100%; /* 横幅 */
    background-color: #f6f2e8; /* 背景色 */
    border-radius: 3px; /* 角丸 */
    font-weight: bold; /* 太字 */
    color: #a0958c;
}

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

/* 小見出しの下線 */
.description-title::after {
    content: ''; /* 擬似要素 */
    position: absolute; /* 絶対配置 */
    left: 0; /* 左端 */
    bottom: -3px; /* 位置調整 */
    width: 100%; /* 横幅 */
    height: 3px; /* 高さ */
    background:  #00000000; /* グラデーション */
    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 #a0958c; /* 線の色 */
}

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


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

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

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

/* 記入後のテキストボックス背景色 */
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: #a0958c; /* 枠線の色 */
    box-shadow: 0 0 4px 0.3rem #a0958c33; /* ぼかしの色（カラーコードの後ろに33を入れて20%の透過度）*/
}

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

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

.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error .radio-inline, .has-error .checkbox-inline, .has-error.radio label, .has-error.checkbox label, .has-error.radio-inline label, .has-error.checkbox-inline label {
    color: #a0958c;/*選択を外した時の文字色*/
}

.has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {
    color: #a0958c;/*選択中「以外」の文字色*/

}

.has-error .form-control {
    border-color: #a0958c;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075)/*基本情報のみのテキストボックスエラーカラー*/
}


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

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

/* 選択肢の間に余白を入れる */
.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 #a0958c; /* ボーダーの色 */
}

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

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


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

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

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


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

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

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

label[for="lvi_checkbox_2426"]{
   margin-top: -30px;
   display: block;
   text-align: center; /* 中央揃え */
  font-size:18px;/*「同意」ボタン文字*/
}



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

/* 送信ボタン */
.btn {
    display: block; /* ブロック要素 */
    width: 90%; /* 横幅 */
    margin: -60px auto 0; /* 上方向に移動して中央揃え */
    background-color: #a0958c !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; /* 透明 */
    }
}