@charset "UTF-8";


/*フォーム関連***********************/
#mailform dl {font-size: 14px; margin-bottom: 20px; display: flex; flex-wrap: wrap;}
#mailform dl dt,#mailform dl dd {border-bottom: 1px solid #666; padding-top: 20px; padding-bottom: 20px;}
#mailform dl dt {width: 220px; padding-bottom: 10px; position: relative; display: flex; justify-content: space-between; align-items: center;}
#mailform dl dd {width: calc(100% - 280px); text-align: left; border-bottom: 1px solid #CCC; padding-left: 20px; margin: 0;}
#mailform .w120 {width: 120px;}
#mailform .submitBtn {display: flex; flex-wrap: wrap; justify-content: center;}
#mailform .submitBtn .btn200 {max-width: 200px; margin: 0 15px 10px; width: calc(100% - 30px);}
#mailform .submit,#mailform .back {font-size: 18px; background: #222; display: block; color: #FFF; font-weight: 700; padding: 12px 0; width: 100%; border-radius: 5px;}
#mailform .back {background: #999;}
#mailform .form-radio span.wpcf7-list-item {margin-right: 10px;}
#mailform .form-radio {padding-top: 10px;}
.must {display: inline-block; line-height: 26px;	background-color: #C00;	border: solid 2px #C00;	padding: 0 5px;	font-size: 12px; color: #FFF;	float: right;	margin: 0 5px 0;	border-radius: 4px;}
button,option,select,textarea,input[type="button"],input[type="submit"],input[type="number"],input[type="email"],input[type="tel"],input[type="text"],input[type="select"],input[type="option"],input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0; border: none; outline: 0; margin: 0;}
/* デフォルトのradio、checkboxは非表示 */
input[type=radio],input[type=checkbox] {display: none;}
/* for firefox */
select {text-indent: 0.01px; text-overflow: '';}
/* for ie10 ie11 ie系のプルダウンの矢印を消す ie9は非対応 */
select::-ms-expand {display: none;}
textarea,input[type="number"],input[type="text"],input[type="tel"],input[type="email"],input[type="date"] {width: calc(100% - 50px); padding: 10px 15px;	font-size: 16px; border: 1px solid #CCC; background-color: #FFF; border-radius: 5px;}
textarea {height: 120px; border-radius: 5px;}
/* フォーカス時の色変更 */
textarea:focus,input[type="tel"]:focus,input[type="email"]:focus,input[type="text"]:focus {border: 1px solid #222;}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {color: #ccc;font-size: 12px;font-size: 1.2rem;}
/* Firefox 18- */
:-moz-placeholder {color: #ccc;opacity: 1;font-size: 12px;font-size: 1.2rem;}
/* Firefox 19+ */
::-moz-placeholder {color: #ccc;opacity: 1;font-size: 12px;font-size: 1.2rem;}
/* IE 10+ */
:-ms-input-placeholder {color: #ccc;font-size: 12px;font-size: 1.2rem;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset;}
/* チェックボックス */
.formCheckbox {position: relative;}
.formCheckbox label {cursor: pointer;}
.formCheckbox input[type=checkbox] {display: none;}
.formCheckbox label {padding-left: 30px; position:relative; margin-right: 20px;}
.formCheckbox label::before {content: "";display: block; position: absolute; top: 1px; left: 0; width: 20px; height: 20px; border: 1px solid #999; border-radius: 4px;}
.formCheckbox input[type=checkbox]:checked + span {color: #d01137;}
.formCheckbox input[type=checkbox]:checked + span::after {content: "";display: block; position: absolute; top: -2px; left: 5px; width: 11px; height: 20px; transform: rotate(40deg); border-bottom: 3px solid #d01137; border-right: 3px solid #d01137;}
/* プルダウン */
.formSelect {width: 100%; -webkit-appearance: button; -moz-appearance: button; appearance: button; outline:none; text-overflow: ''; background-color: #FFF; font-size: 14px; font-weight: 700; position: relative; color: #222;}
.formSelect {display: block; position: relative; overflow: hidden; border: 1px solid #999; border-radius: 5px;}
.formSelect select {padding: 10px 25px 10px 15px; width: 100%; display: block; background: url("../img/cmn/select_arrow.svg") no-repeat right 10px center;}
/* ラジオボタン */
.formRadio li {margin: 0 20px 5px 0;}
.formRadio label {cursor: pointer;}
.formRadio input[type=radio] {position: relative; display: inline-block; cursor: pointer; padding: 0 25px 0 0;}
.formRadio input[type=radio]::before,.formRadio input[type=radio]::after {position: absolute; display: block; content: ''; top: 50%; left: -2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%;}
.formRadio input[type=radio]::before {width: 20px; height: 20px; margin-top: -11px; background: #FFF; border: 1px solid #ccc;}
.formRadio input[type=radio]::after {left: 2px; width: 12px; height: 12px; margin-top: -7px; background: #FFF;}
.formRadio input[type=radio]:checked::after {background: #222;}
.submitBtn li {list-style: none; margin: 0 20px 20px;}
.submitBtn .btn260 {max-width: 260px; width: 100%;}
@media screen and (max-width: 896px) {
  #mailform dl dt,#mailform dl dd {width: 100%;}
	#mailform dl dt {margin-bottom: 0; padding-bottom: 10px; border-bottom: none;}
	#mailform dl dd {padding: 10px 0 20px;}
  #mailform .form-radio {padding-top: 0;}
}