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


body {
   font-family: 'Noto Sans JP', sans-serif;
   background-color: #315098;
}

/* 全体の行間 */
.text-break{
   line-height: 1.6em;
}

/* ヘッダー */
.form-top-left h3 {
color: Transparent;
}
.container {
    font-family: YuGothic;
}

@keyframes fadeIn {
  0% {opacity: 0}
  500% {opacity: 10}
}
.form-top {
 animation: fadeIn 5s ease 0s 1 normal;
}
@keyframes fadeIn {
  0% {opacity: 0}
  500% {opacity: 10}
}

.form-top-left h3 {
color: Transparent;
}
/* ▼▼ ヘッダー画像を普通に挿入するCSS ここから ▼▼ */
.form-top { 
  background-position: center center; 
  width: 100%; 
  height: 300px;  /* スマホでのヘッダー画像の高さはここの数値を変更 */}

.form-top .form-top-right {
  display: none;
}

@media (min-width: 768px) {
  .form-top {
    height: 500px; /* パソコンでのヘッダー画像の高さはここの数値を変更 */
  }
}
/* ▲▲ ヘッダー画像を普通に挿入するCSS ここまで ▲▲ */
/* フォーム下全体 */
.form-editor{
   opacity: 0;
   animation: fadeIn 1s .5s forwards;
}
@keyframes fadeIn {
  0%{
    opacity: 0;
    transform: translateY(5px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }

}

/* メイン */
.form-bottom {
    background: #FFF;
    color: #000;
}

.form-group {
    margin-bottom: 50px;
}

/* リンクの色 */
a {
    color: #0e0068; /*←ここのカラーコードを変える（文字色）*/
}


/* h4 中見出し */
.description-md-title{
    display: block;
    position: relative;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    margin: 0 0 1.5em;
    padding: 0.5em 0.5em 0.5em 1.7em;
    color: #000;/*文字色*/
    background: transparent;/*背景透明に*/
    font-weight: bold;
    box-shadow: none;
    border-left: solid 5px #2c72a2;/*左線*/
    border-bottom: solid 1px #ccc;/*下線*/
}


/* h5 小見出し */
.description-title {
    position: relative;
    padding: 20px 0;
    margin: 30px auto 50px;
    color: #FFF;
    background: rgb(14,0,104);
    background-image: linear-gradient(180deg, rgba(0, 60, 124, 1), rgba(70, 157, 196, 1) 79%, rgba(40, 115, 165, 1));
    font-size: 20px;
    font-weight: bold;
    text-align:center;
}
.description-title:after {
    position: absolute;
    bottom: -10px;
    left: 45%;
    width: 0;
    height: 0;
    content: '';
    border-width: 14px 12px 0 12px;
    border-style: solid;
    border-color: #2873A5FF transparent transparent transparent;
}


/* ボタン */
.btn {
    position: relative;
    padding: 16px;
    background: #003c7c;
    border-radius: 0;
    border-color: #000; /*←ここのカラーコードを変える（枠色）*/
    overflow: hidden;
}
.btn-primary:hover{
    opacity: .5;
}
.btn-primary:hover{
    background: #000;  /*←ここのカラーコードを変える（背景色）*/
}

.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: 2.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;
  }
}



/* フォームのカスタマイズ */
/* テキスト入力 */
.form-control{
    border-color: #747d94; /*←ここのカラーコードを変える*/
}
.form-control:focus{
    border-color: #747d94; /*←ここのカラーコードを変える*/
}

/* ラジオボタン */
.radio-inline input[type=radio]:after, .radio input[type=radio]:after, input[type=radio]:after{
    border-color: #747d94; /*←ここのカラーコードを変える*/
}
.radio-inline input[type=radio]:before, .radio input[type=radio]:before, input[type=radio]:before{
    background-color: #747d94; /*←ここのカラーコードを変える*/

}
.radio-inline input[type=radio]:checked:after, .radio input[type=radio]:checked:after, input[type=radio]:checked:after{
    border-color: #747d94; /*←ここのカラーコードを変える*/
}

/* チェックボックス */
.checkbox-inline input[type=checkbox]:after, .checkbox input[type=checkbox]:after, input[type=checkbox]:after{
    border-color: #747d94; /*←ここのカラーコードを変える*/
}
.checkbox-inline input[type=checkbox]:checked:after, .checkbox input[type=checkbox]:checked:after,     input[type=checkbox]:checked:after{
    background-color: #747d94; /*←ここのカラーコードを変える*/
}
.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: #747d94; /*←ここのカラーコードを変える*/
}

/* 入力後の文字色 */
.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: inherit /*←ここのカラーコードを変える*/
}

.has-success .form-control{
    border-color:#747d94; /*←ここのカラーコードを変える*/
}

/* フォームラベルのアイコン */
.form-group .form-text >  label::before{
    content: '';
    color: ##747d94; /*←ここのカラーコードを変える*/
}

/* 必須項目のラベル */
.label-danger{
    background-color: #c61e1a; /*←ここのカラーコードを変える*/
}


@media (max-width: 767px){
  .form-bottom {
     padding: 25px 15px;
  }

.form-top .form-top-left {
     padding-top: 50px;
  }
}"