.formbox>form {
width: 98.5%;
background: #FFF;
margin-bottom: 45px;
margin-top: 15px;
padding: 150px 15px 0 15px;
}
.formbox img.img-responsive,
.formbox img
{
  display: block;
  max-width: 100%;
  height: auto;
}

textarea.w100
{
width:97%;
}
.formbox p {
  position: relative;
}

.txtchus {
font-size:0.7em;
font-weight:bold;
}

form .mskkou input[type="text"]
{
margin:0;
padding:0;
line-height:0;
border:none;
font-size:0;
color:#FFF;
}

/* コメント注釈 */
/* 上側表示 */
p.formnyu {
  position: relative;
}
.erroru {
  position: absolute;
  top: -3.5em;
  left: 0;
  padding: .5em 1em .4em;
  background-color: #f66;
  border: 1px solid #f00;
  border-radius: 5px;
  color: #fff;
}
.erroru:after,
.erroru:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 15px;
  border: solid transparent;
}
.erroru:after {
  margin-left: 1px;
  border-top-color: #f66;
  border-width: 7px;
}
.erroru:before {
  border-top-color: #f00;
  border-width: 8px;
}

/* 右側表示 */
.errorm {
  position: relative;
  top: -7px;
  left: 14px;
  padding: 0.3em 0.6em;
  background-color: #f66;
  border-radius: 5px;
  color: #fff;
  font-size:0.85em;
}
.errorm:after,
.errorm:before {
  content: '';
  position: absolute;
  top: 27%;
  right: 100%;
  border: 5px solid transparent;
  border-right-color: #f66;
}



/* ---- フォーカス（共通）----- */
input[type="text"],
textarea
{
outline: none;
border: 1px solid #aaa;
-webkit-transition: all .3s;
transition: all .3s; /*アニメーション速度*/
border-radius: 10px; /* ボックスの四つ角を丸くする */
padding-left:8px;
}
input[type="text"]:focus,
textarea:focus {
  box-shadow: 0 0 7px #1abc9c;
  border: 1px solid #1abc9c;
}
/* ----------------------------- */

/* ************ */
/* ラジオボタン */
/* ************ */
/* ** 使い方 ** */
/* inputタイプに関係なくlabelがある為、ラジオボタンのラベルclass設定をする */
/* ************ */
/* ** HTML ** */
/* <p class=""><input type="radio" id="radio001" name="ラジオきっかけ" />
<label for="radio001" class="radb">ラジオボタン</label></p> */
/* ************ */
input[type="radio"] 
{
  display: none;
}
label.radb {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 20px;
  cursor: pointer;
}
label.radb::before,
label.radb::after {
  position: absolute;
  content: '';
  top: 50%;
  border-radius: 100%;
  -webkit-transition: all .2s;
  transition: all .2s;
}
label.radb::before {
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #f3f3f3;
  border: 1px solid #ccc;
}
label.radb:hover::before {
  background: #fff;
}
label.radb::after {
  opacity: 0;
  left: 4px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: #3498db;
  -webkit-transform: scale(2);
  transform: scale(2);
}
input[type="radio"]:checked + label.radb::before {
  background: #fff;
  border: 1px solid #3498db;
}
input[type="radio"]:checked + label.radb::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* **************** */
/* チェックボックス */
/* **************** */
/* **** 使い方 **** */
/* inputタイプに関係なくlabelがある為、チェックBOXのラベルclass設定をする */
/* ***** HTML ***** */
/* <p class=""><input type="checkbox" id="checkbox001" name="チェックきっかけ" />
<label for="checkbox001" class="ckb">CHECK</label></p> */
/* **************** */
input[type="checkbox"] {
  display: none;
}
label.ckb {
  position: relative;
  display: inline-block;
  padding: 3px 3px 3px 22px;
  cursor: pointer;
}
label.ckb::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -8px;
  background: #fff;
  border: 1px solid #ccc;
}
input[type="checkbox"]:checked + label.ckb::after {
  position: absolute;
  content: '';
  top: 9px;
  left: 3px;
  width: 13px;
  height: 5px;
  border-left: 2px solid #3498db;
  border-bottom: 2px solid #3498db;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}



/* ボタンのデザイン */
.ssbtn {
  display       : inline-block;
  border-radius : 5%;          /* 角丸       */
  font-size     : 16pt;        /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 12px 48px;   /* 余白       */
  background    : #7f007f;     /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  opacity       : 1;           /* 透明度     */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 6px 6px 3px #666666;  /* 影の設定 */
border-radius: 16px;
}
.ssbtn:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  opacity       : 0.8;         /* カーソル時透明度 */
}

.gnsbtn {
margin: 20px 20px;
padding:10px 20px;
border-radius: 16px;
transition: .4s;
font-weight:bold;
background: linear-gradient(#f2e9bf, #c6ba7f);
}
.gnsbtncan {
margin: 20px 20px;
padding:10px 20px;
border-radius: 16px;
transition: .4s;
}
.gnsbtncan:hover {
  box-shadow    : 3px 3px 1px #666666;  /* 影の設定 */
  opacity       : 0.8;         /* カーソル時透明度 */
color:#999;
}

/*-----------------------------------------------------------------------------------*/
/*  SPLASH
/*-----------------------------------------------------------------------------------*/
.preloader {
    background-color: #202c2f;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
animation: loading 1s linear-0.875s infinite;

}

.preloader .preloader-img {
    width: 100px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -40px;
    margin-top: -40px;
}