/* ヘッダー */
.form-top {
background-position: center center;
width: 100%;
height: 150px;
}
/* テキスト縦幅 */
.text-break {
 line-height: 1.5;
}
/* 必須マーク背景 */
.label-danger {
  padding: .4em .6em .4em;
  background: var(--btn-bg-color);
}
/* フォームのカスタマイズ */
.form-control,.vdp-datepicker .form-control {
  border-color: var(--btn-bg-color); /*←ここのカラーコードを変える*/
  border-width: 1px;
  background: #F2FBFA;
}
.form-control:focus{
  border-color: var(--btn-bg-color); /*←ここのカラーコードを変える*/
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
}
.form-control::placeholder {
  color: #c1e6e2;
}

/* ラジオボタン */
.radio-inline input[type=radio]:after, .radio input[type=radio]:after, input[type=radio]:after{
  border-color: var(--btn-bg-color);
  background: #F2FBFA;
}
.radio-inline input[type=radio]:before, .radio input[type=radio]:before, input[type=radio]:before{
  background-color: var(--btn-bg-color);
  z-index: 1;
}
.radio-inline input[type=radio]:checked:after, .radio input[type=radio]:checked:after, input[type=radio]:checked:after{
  border-color: var(--btn-bg-color);
}

/* チェックボックス */
.checkbox-inline input[type=checkbox]:after, .checkbox input[type=checkbox]:after, input[type=checkbox]:after{
  border-color: var(--btn-bg-color);
}
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after{
  background-color: var(--btn-bg-color);
}
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after, input[type=checkbox]:checked:after,.checkbox-inline input[type=checkbox]:focus:after, .checkbox input[type=checkbox]:focus:after, input[type=checkbox]:focus:after{
  border-color: var(--btn-bg-color);
}

/* ボタン */
:root {
  --btn-bg-color: #28B59C; /* 背景色はここのカラーコードを変更 */
  --btn-font-color: #ffffff; /* 文字色はここのカラーコードを変更 */
  --btn-shadow-color: #64A196; /* 影の色はここのカラーコードを変更 */
}
.btn {
   position: relative;
   overflow: hidden;
   font-weight: 700;
}
.btn-primary {
  color: var(--btn-font-color);
  background: var(--btn-bg-color);
  border: none;
  width: 100%;
  height: 50px; /* ボタンの高さはここを変更 */
  border-radius: 30px;
  padding: 0 15px 0 15px;
  font-size: 18px; /* 文字の大きさはここを変更 */
  letter-spacing: 0.1em;
  position: relative;
  box-shadow: 0 6px 0 var(--btn-shadow-color), 0 6px 5px #00004d;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: none;
  background: var(--btn-bg-color);
}
.btn-primary.active, .btn-primary:active, .btn-primary:hover, .open>.btn-primary.dropdown-toggle {
  color: var(--btn-font-color);
  background: var(--btn-bg-color);
  border: none;
  top: 5px;
  box-shadow: 0 6px 0 var(--btn-shadow-color), 0 6px 5px #00004d;
}
/* ボタンの右側に矢印 */
.col-xs-12.col-sm-6.col-md-8 {
  position: relative;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background: var(--btn-font-color);
  border-radius: 50vh;
}

.col-xs-12.col-sm-6.col-md-8::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-top: 2px solid var(--btn-bg-color);
  border-right: 2px solid var(--btn-bg-color);
  position: absolute;
  top: 46%;
  //right: 26px;
  right: 41px;
  transform: translateY(-50%) rotate(45deg);
}
.col-xs-12.col-sm-6.col-md-8.active::after, .col-xs-12.col-sm-6.col-md-8:active::after, .col-xs-12.col-sm-6.col-md-8:hover::after {
  top: 56%;
}
/* フォームラベルのアイコン */
.form-group .form-text >  label::before{
  content: '';
  background: url(https://d27rnpuamwvieu.cloudfront.net/0ObX29AuYiVLoJmwbBbOtYgXX/normal) center center / contain no-repeat;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 100% auto;
  display: inline-block;
  margin-right: 2px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

@media (min-width: 768px) {
/* ヘッダー */
 .form-top {
   height: 300px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */
 }
}

/* ボタンアニメーション */
@media (min-width: 768px) {
 .col-xs-12.col-sm-6.col-md-8::after {
  top: 50%;
 }
.col-xs-12.col-sm-6.col-md-8.active::after, .col-xs-12.col-sm-6.col-md-8:active::after, .col-xs-12.col-sm-6.col-md-8:hover::after {
  top: 60%;
}
}
.btn::after{
   content: '';
   position: absolute;
   top: -10%;
   left: -20%;
   width: 40px;
   height: 100%;
   transform: scale(2) rotate(20deg);
   background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
  /* アニメーション */
   animation-name: shiny;
   animation-duration: 3s;
   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;
  }
}
}