@import url(https://fonts.googleapis.com/css?family=Sniglet|Raleway:900);

.inquery{
   background-color:#004da0 ;

}

/* Animation webkit */
@-webkit-keyframes myfirst
{
  0% {margin-left: -235px}
  90% {margin-left: 100%;}
  100% {margin-left: 100%;}
}

/* Animation */
@keyframes myfirst
{
  0% {margin-left: -235px}
  70% {margin-left: 100%;}
  100% {margin-left: 100%;}
}

.adjustment_query{
   margin:0px 100px 0px 0px;
}

/*このCSSのwidthとheightを画像のサイズに合わせること*/
.fish{
  background-image: url('http://www.geertjanhendriks.nl/codepen/form/fish.png');
  
  width: 235px;
  height: 104px;
  margin-left: -235px;
  position: absolute; 
  animation: myfirst 24s;
  -webkit-animation: myfirst 24s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
}

#fish{
  top: 140px;
}

#fish2{
  top: 260px;
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
}

#fish3{
   top: 380px;
   animation-delay: 24s;
   -webkit-animation-delay: 24s;
 }

 #fish4{
   top: 500px;
   animation-delay: 36s;
   -webkit-animation-delay: 36s;
 }
 

.red-icon{
  color:red;
}

#form_inquery{
  height: 100%; 
  overflow: hidden;
  position: relative;
  
}
.form_inquery{
  margin: 0 auto;
  width: 580px;
  padding-top: 40px;
  color: black;
  position: relative;
  
  
}

/* Bootstrapのグリッド内でも崩れないように（移行前レイアウト維持） */
@media (max-width: 640px){
  .form_inquery{
    width: 100%;
    max-width: 580px;
  }
  .formgroup, .formgroup-active, .formgroup-error{
    width: 100%;
  }
}
.label_query, .input_query{
  display: block; 
}
.input_query{
  width: 200px; 
  margin-left:auto;
  margin-right:auto;
  border: none;
  border-radius: 5px;
  outline: none;
  padding: 10px;
  font-family: 'Sniglet', cursive;
  font-size: 1em;
  font-weight:bold;
  color: #676767;
  transition: border 0.5s;
  -webkit-transition: border 0.5s;
  -moz-transition: border 0.5s;
  -o-transition: border 0.5s;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  
}
.input_query:focus{
  border: solid 3px #77bde0;  
}


.input_query[type="submit"]{
  background-color: #F90;
  color: white;
  height: 50px;
  cursor: pointer;
  margin-top: 30px;
  font-size: 1.29em;
  font-family: 'Sniglet', cursive;
  -webkit-transition: background-color 0.5s;
  -moz-transition: background-color 0.5s;
  -o-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.input_query[type="submit"]:hover{
  background-color: #e58f0e;
  
}
.label_query{
  font-size: 1.3em;
  margin-top: 20px;
  margin-left:15px;
  padding-left:10px;
  font-size:17px;
  font-weight:bold;
  border-left: 0.2rem solid;
  border-left-color:#004DA0;



}
.formgroup, .formgroup-active, .formgroup-error{
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 10.5%;
  transition: background-image 0.7s;
  -webkit-transition: background-image 0.7s;
  -moz-transition: background-image 0.7s;
  -o-transition: background-image 0.7s;
  width: 566px;
  padding-top: 2px;
}

.formgroup{
  background-image: url('http://www.geertjanhendriks.nl/codepen/form/pixel.gif'); 
}
.formgroup-active{
  background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo.png');
}
.formgroup-error{
  background-image: url('http://www.geertjanhendriks.nl/codepen/form/octo-error.png');
  color: red;
}

/* フォーム内のinput/textarea要素にマージンを追加 */
.formgroup input[type="text"],
.formgroup input[type="email"],
.formgroup input[type="tel"],
.formgroup textarea{
  width: 100%;
  max-width: 566px;
  margin: 6.4px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.formgroup input:focus,
.formgroup textarea:focus{
  border-color: #77bde0;
  outline: none;
}

.formgroup textarea{
  min-height: 120px;
  resize: vertical;
}

.bg-gray {
  background-color: rgb(240, 241, 242);
}