@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap'); /* Googleフォント「Noto Serif JP」を読み込み */

/* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */
.form-top {
background-position: center center;
width: 100%;
height: 140px; 
}

.form-top .form-top-right {
display: none;
}
 
@media (min-width: 768px) {
.form-top {
height: 280px;
}
}
/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */

/* ここでプレビューの文字を消しています */
.form-top .form-top-left  {
display: none;
}
/* ここまでプレビューの文字を消しています */



/* ▼▼ 下からふわっと出るアニメーション ▼▼ */
@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;
}

/* ▼▼ 中見出し（h4）のスタイル指定 ▼▼ */
h4{
  font-family: 'Montserrat', sans-serif;
  position: relative;
  padding: 1.5rem;
  text-align: center;
  border-bottom:#ee9417 solid 3px;
  margin-top:40px !important;
}

/* ▼▼ 中見出し背景を白に指定 ▼▼ */
.container .description-md-title{
  background-color:#fffdfc;
}

/* ▼▼ 小見出し（h5）のスタイル指定 ▼▼ */
h5{
  border-bottom:#ee9417 solid 1px;
  color:#333;
  font-family: 'Montserrat', sans-serif;
}

/* ▼▼ フォーム項目のラベルスタイル ▼▼ */
.control-label{
  color:#333;
 /* border-bottom:#ee9417 solid 1px;*/
  width:100%;
  margin-bottom:10px;
}

/* ▼▼ フォーム項目の余白 ▼▼ */
.form-group{
  margin-bottom:10px;
}

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

/* ▼▼ 「必須」ラベルのデザイン ▼▼ */
.label-danger{
  background-color: #c30006;
  font-size: 0.7em;
  font-weight: normal;  /* typo修正: nomal → normal */
}

/* ▼▼ 補足文の右寄せ ▼▼ */
.help-block{
  text-align: right;
}

/* ▼▼ PC用カラムを非表示に（モバイル表示調整）▼▼ */
.col-xs-4{
  display:none;
}

/* ▼▼ 横幅を100%に調整（モバイルレイアウト）▼▼ */
.col-sm-6, .col-sm-8{
  width: 100%;
}

/* ▼▼ ラジオボタン選択時の外円の色変更 ▼▼ */
.radio input[type=radio]:checked:after{
  border-color:#2e72b1;
}

/* ▼▼ ラジオボタン選択時の内側の色変更 ▼▼ */
.radio input[type=radio]:before {
  background-color:#2e72b1;
}



/* ▼▼ チェックボックス選択時の背景色変更 ▼▼ */
.checkbox-inline input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
input[type=checkbox]:checked:after {
  background-color:#834848;
}

/* ▼▼ チェックボックス選択時の枠線色変更 ▼▼ */
.checkbox-inline input[type=checkbox]:checked:after,
.checkbox input[type=checkbox]:checked:after,
input[type=checkbox]:checked:after {
  border-color:#834848 !important;
}

/* ▼▼ ラジオ・チェック選択時の文字色指定 ▼▼ */
.has-success .checkbox,
.has-success .checkbox-inline,
.has-success.checkbox-inline label,
.has-success.checkbox label,
.has-success .control-label,
.has-success .help-block,
.has-success .radio,
.has-success .radio-inline,
.has-success.radio-inline label,
.has-success.radio label {
  color:#333 !important;
}

/* ▼▼ テキストボックスがフォーカスされたときの装飾 ▼▼ */
.form-control:focus {
  border-color:#834848;
  outline:0;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,50,.6)
}

/* ▼▼ 入力完了後のテキストボックス装飾（has-success）▼▼ */
.has-success .form-control,
.has-success .form-control:focus {
  border-color:#834848;
  outline:0;
  box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(100,100,50,.6)
}

/* ▼▼ 送信ボタンの基本スタイル ▼▼ */
.btn {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background-color: #ee9417;
  border:#ee9417 thin solid;
  overflow: hidden;
  margin:0 auto 40px !important;
}

/* ▼▼ ボタンホバー時の背景色変更 ▼▼ */
.btn:hover {
  background-color: #ee781e;
  border:#ee781e 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;
}

/* ▼▼ラジオボタン横並び ここから ▼▼ */
.radios {
  display: flex !important;
  gap: 1em;
  flex-wrap: wrap;
}
.radios label {
  display: flex;
  align-items: center;
}
/* ▲▲ ラジオボタン横並び ここまで ▲▲ */

.btn {
  display: block;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  position: fixed; /* ←追従表示 */
  bottom: -15px;
  right: 10px;
  width: 250px;
  height: 50px;
  padding: 0;
  margin: 0;
  font-weight: bold;
  font-size: 18px;
  border-radius: 0.3rem;
  border: solid 1px #ee781e;
  background: #ee781e;
  color: #fff;
  box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.28);
  
  z-index: 9999; /* ←必要なら他要素の上に出すため */
}


/*------------------------------------------*/
/* ▼▼ スマホ画面向けのスタイル調整 ▼▼ */
/*------------------------------------------*/
@media screen and (max-width:767px){
  .form-box {
    padding: 0!important;
  }
}