@charset "utf-8";
/* 標準可変メディア
   メモ : 可変メディアでは、HTML からメディアの高さおよび幅の属性を削除する必要がある
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
  max-width: 100%;
}
/* IE 6 では最大幅がサポートされていないため、デフォルトで幅 100% に設定される */
.ie6 img {
  width:100%;
}

/* モバイルレイアウト : 480 px およびそれ以下. */

.formbtn-blu{
  display: block;
  border-radius: 5px;
  background-color: #135ea7;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-blu:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.formbtn-bro{
  display: block;
  border-radius: 5px;
  background-color: #7a5c40;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-bro:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.formbtn-yel{
  display: block;
  border-radius: 5px;
  background-color: #f7b52c;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-yel:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}


input[type="submit"], input[type="reset"], input[type="button"] {
  display:block;
  width:100%;
  height:40px;
}



/* タブレットレイアウト : 481 px ～ 768 px。モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px) {

.formbtn-blu{
  display: inline-block;
  border-radius: 5px;
  background-color: #135ea7;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-blu:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.formbtn-bro{
  display: inline-block;
  border-radius: 5px;
  background-color: #7a5c40;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-bro:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.formbtn-yel{
  display: inline-block;
  border-radius: 5px;
  background-color: #f7b52c;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-yel:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  width: 18%;
  height: 40px;
}

}

/* デスクトップレイアウト : 769 px ～最大 1232 px。モバイルレイアウトとタブレットレイアウトからスタイルを継承。 */

@media only screen and (min-width: 769px) {


.formbtn-blu{
  display: inline-block;
  border-radius: 5px;
  background-color: #135ea7;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-blu:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.formbtn-bro{
  display: inline-block;
  border-radius: 5px;
  background-color: #7a5c40;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}

.formbtn-bro:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.formbtn-yel{
  display: inline-block;
  border-radius: 5px;
  background-color: #f7b52c;
  padding: 10px;
  text-align: center;
  color: #FFFFFF;
  width: auto;
}
.formbtn-yel:after{
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 6px;
  height: 6px;
  margin: -4px 0 0 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

input[type="submit"], input[type="reset"], input[type="button"] {
  display: inline-block;
  width: 18%;
  height: 40px;
}


}