@charset "utf-8";

@-webkit-keyframes iMove{ 20%{-webkit-transform:translateY(0);} 30%{-webkit-transform:translateY(-8px);} 40%{-webkit-transform:translateY(0);} 50%{-webkit-transform:translateY(-3px);} 60%{-webkit-transform:translateY(0);} }
@keyframes iMove{ 20%{transform:translateY(0);} 30%{transform:translateY(-8px);} 40%{transform:translateY(0);} 50%{transform:translateY(-3px);} 60%{transform:translateY(0);} }

/* 警告色 */
#mfrm > div > p.err,
form dd p.err span,
#thk dl dt,
  /* 必須 */
#mfrm dl dt span,
form dd span.hissu{background-color:#db535a; color:#fff;}
  /* エラー */
p.err,
#mfrm > div > p.err span{color:#db535a;}
/* 個人情報保護同意 */
#mfrm aside{background-color:#fafafa;}
form input[name=acpt]+label span:nth-of-type(1){background-color:#578CDB;}
form input[name=acpt]+label span:nth-of-type(2){background-color:#b0b0b0;}
form input[name=acpt]+label{color:#fff;}
/* 送信ボタン使用不可色 */
form input[type=submit][disabled]{background-color:#ececec;}
/* フォームパーツ色 */
form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[type=checkbox]+label::before,
form input[name=acpt]+label::after,
#mfrm > div > p.err span{background-color:#fff;}
form input[type=radio]:checked+label,
form input[type=checkbox]:not([name=acpt]):checked+label{color:#578CDB;}
form input[type=radio]:checked+label::after{background-color:#578CDB;}
  /* 送信ボタン */
form input[type=submit]:not([disabled]){background-color:#578CDB; color:#fff;}
form input[type=submit]:not([disabled]):hover{background-color:#20b1ff;}
/* フォームパーツボーダー */
form input[type=text],
form select,
form textarea,
form input[type=radio]+label::before,
form input[type=checkbox]:not([name=acpt])+label::before,
form input[type=checkbox]:not([name=acpt])+label::after{border-color:#e0e4ef;}
  /* チェックボックス */
form input[type=checkbox]:not([name=acpt]):checked+label::after{border-color:#578CDB;}
/* トランジション */
form input[type=checkbox]:not([name=acpt])+label::after,
form input[type=submit]		{-webkit-transition-duration:.2s; transition-duration:.2s;}
form input[type=checkbox]:not([name=acpt])+label::after
							{-webkit-transition-property:border; transition-property:border;}

/* モバイルファースト */
form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[type=checkbox]+label::before,
form input[type=checkbox]+label::after,
form input[name=acpt]+label span,
form input[name=acpt]+label::after{display:block;}

form dt label,
form dl span,
p.err span{display:inline-block;}

form dd ul{display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;}

form input[type=radio],
form input[type=checkbox],
form input[name=acpt]{display:none;}

form input[type=submit]{background-color:transparent;}

form input[type=radio]+label,
form input[name=acpt]+label,
form input[type=checkbox]+label,
form input[type=checkbox]+label{position:relative;}
form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[type=checkbox]+label::before,
form input[type=checkbox]+label::after,
form input[name=acpt]+label span,
form input[name=acpt]+label::after{position:absolute;}
form input[name=acpt]+label{z-index:1;} /* @keyframesにtransformを使うとborder-radiusのマスクが利かない、z-indexを指定することで回避できる */

form dt span,
form dd span.hissu{font-size:1.1rem;}
form input[name=acpt]+label{font-size:1.3rem;}
form dt label,
form input:not([type=submit]),
form dd select,
form dd textarea{font-size:1.6rem;}
form input[type=submit]{font-size:1.9rem;}

#mfrm > div > p.err span,
form > p,
form dl span{text-align:center;}
form input[name=acpt]+label span:nth-of-type(1){text-align:left;}
form input[name=acpt]+label span:nth-of-type(2){text-align:right;}

form input[type=radio],
form input[type=radio]+label,
form input[type=checkbox],
form input[type=checkbox]+label,
form input[name=acpt]+label,
form dt,
form dt span,
form dd{vertical-align:middle;}

form dd textarea{line-height:1.5;}
form dd ul li{line-height:2;}

form dd input,
form dd textarea{letter-spacing:1px;}

form dt label{text-transform:uppercase;}

form dd ul{list-style:none;}

form input[type=radio]+label,
form input[type=checkbox]+label,
form input[name=acpt]+label,
form input[type=submit]:not([disabled]){cursor:pointer;}
form input[type=submit][disabled]{cursor:default;}

form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[type=checkbox]+label::before,
form input[type=checkbox]+label::after,
form input[name=acpt]+label::after{content:"";}

form input[type=checkbox]:not([name=acpt])+label::after{-webkit-transform:rotate(45deg); transform:rotate(45deg);}

form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[name=acpt]+label::after{border-radius:50%;}
form dt span,
form dd span.hissu,
form input[type=checkbox]:not([name=acpt])+label::before,
form input[type=checkbox]:not([name=acpt])+label::after,
#mfrm > div > p.err{border-radius:3px;}

form input#acpt+label{
	-webkit-user-select: none; /* Safari,Chrome */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10～ */
	user-select: none; /* CSS3 */}

form dt,
form dd,
form dd ul li,
form input,
form select,
form textarea,
form input[type=radio]+label::before,
form input[type=radio]+label::after,
form input[type=checkbox]+label::before,
form input[type=checkbox]+label::after,
form input[name=acpt]+label span{box-sizing:border-box;}

form input[type=radio]+label::after,
form input[name=acpt]+label span,
form input[type=checkbox]+label::before,
form input[type=checkbox]+label::after,
form input[name=acpt]+label::after{-webkit-transition:.15s; transition:.15s;}

/* */

form dt span,
form dd span.hissu{margin-left:10px; padding:0 6px; line-height:22px;}

form input,
form select,
form textarea{border-width:1px; border-style:solid;}
form select{padding:5px;}
form input[type=text],
form textarea{width:100%;}
form input[type=text],
form select{height:55px;}
form textarea{height:150px;}
form input[type=submit]{background-repeat:no-repeat; margin-right:auto; margin-left:auto; padding:0; border:none; cursor:pointer;}

form input[type=radio]+label,
form input[type=checkbox]:not([name=acpt])+label{padding-left:21px;}
form input[type=radio]+label::before,
form input[type=checkbox]:not([name=acpt])+label::before{top:2px; left:0; width:16px; height:16px; border-width:1px; border-style:solid;}
form input[type=radio]+label::after{top:5px; left:3px; width:10px; height:10px;}
form input[type=checkbox]:not([name=acpt])+label::after{top:-5px; left:3px; width:12px; height:20px; border-width:0; border-style:solid; border-top:none; border-left:none;}
form input[type=checkbox]:not([name=acpt]):checked+label::after{border-width:5px;}

form input[name=acpt]+label{width:80px; height:35px; border-radius:35px; overflow:hidden;}
form input[name=acpt]+label::after{top:2px; left:2px; width:31px; height:31px;}
form input[name=acpt]+label span{top:0; width:80px; line-height:35px;}
form input[name=acpt]+label span:nth-of-type(1){left:-80px; padding-left:15px;}
form input[name=acpt]+label span:nth-of-type(2){left:0; padding-right:15px;}
form input[name=acpt]:checked+label span:nth-of-type(1){left:0;}
form input[name=acpt]:checked+label span:nth-of-type(2){left:80px;}
form input[name=acpt]:checked+label::after{left:47px;}

form dd ul li.sub{width:100%; margin-top:5px;}
#mfrm aside{padding:15px;}

/* placeholderの色を変更 */
::-webkit-input-placeholder{color:#A9A9A9;}		/* Webkit */
::-moz-placeholder{color:#A9A9A9; opacity:1.0;}	/* Firefox 18 以前 */
:-ms-input-placeholder{color:#A9A9A9;}			/* IE系 */
/* 選択時にplaceholderを非表示 */
:focus::-webkit-input-placeholder{color:transparent;}	/* Webkit */
:focus:-moz-placeholder{color:transparent;}				/* Firefox 18 以前 */
:focus::-moz-placeholder{color:transparent;}			/* Firefox 19 以降 */

/* エラー表示用 */
p.err{font-weight:bold;}
p.err span{width:20px; height:20px; border-radius:50%; line-height:20px;}
#mfrm > div > p.err{margin-bottom:20px; padding:10px;}
form dd p.err{padding:5px 0;}
form dd span.hissu+p.err{display:inline-block; padding-left:15px;}
form dd p.err span{-webkit-animation:iMove 1.3s ease-out 0s infinite normal; animation:iMove 1.3s ease-out 0s infinite normal;}

form input[name=zip]{width:150px;}

@media all and (max-width:567px){ /* ～567px スマホ横未満 */
form input[name=acpt]+label{display:block; margin:10px auto 0;}
form input[type=submit]{width:300px;}
form dl dd{margin-top:5px;}
}
@media (min-width:568px){ /* 568px～ スマホ横以上すべて */
form input[name=acpt]+label{display:inline-block;}
form input[type=submit]{width:340px;}
form dl+p br{display:none;}
form dl dt{min-height:55px; padding-right:15px;}
form dl dd{padding-left:20px;}
}

@media all and (max-width:767px){ /* ～767px タブレット縦未満すべて */
#mfrm aside{margin-bottom:30px;}
form input[type=text]{padding:0 10px;}
form textarea{padding:10px;}
form select+input{margin-top:5px;}
form input[type=submit]{height:60px; line-height:60px; border-radius:30px; margin-top:20px;}
form dl dd ul li:not(.sub){width:50%;}
form dl+p{margin-top:30px;}
}
@media (min-width:768px){ /* 768px～ タブレット縦以上すべて */
#mfrm > div > p.err{text-align:center;}
#mfrm aside{margin-bottom:40px;}
form input[type=text]{padding:0 15px;}
form textarea{padding:5px 10px;}
form input[type=submit]{height:80px; line-height:80px; border-radius:40px; margin-top:30px;}
form input[name=name]{width:350px;}
form input[name=cpname]{width:80%;}
form input[name=email],
form dd ul li.sub input[type=text]{width:50%;}
form input[name=tel],
form input[name=fax]{width:230px;}
form dt{display:-webkit-flex; display:flex;}
form dt{-webkit-justify-content:space-between; justify-content:space-between;}
form dt label,
form dd{display:block; -webkit-flex-grow:1; flex-grow:1; -webkit-align-self:center; align-self:center;}
form dd span.hissu{margin:10px 0 10px 10px;}
form dl dd ul li{min-width:130px;}
form dl+p{margin-top:40px;}
.pflex{display:-webkit-flex; display:flex;}
.pflex *+*{margin-left:10px;}
}
@media (min-width:768px) and (max-width:979px){ /* の中でデスクトップ未満まで */
form dl dd ul li{width:33%;}
}

@media (min-width:980px){ /* 980px～ デスクトップ以上すべて */
form dl dd ul li{width:25%;}
}

/* End CSS */