/* CSS Document */

/*-------------------------------------------

name: form.css

-------------------------------------------*/


/*=========================================

	フォーム
	
===========================================*/
#formArea{}
#formArea .inner{}
#formArea .block{ margin:0 0 60px;}
#formArea .introBox{ margin:0 0 4%;}
#formArea .introBox .txt{ margin:0 0 5px;}
#formArea .error{ color:#f32149;}
#formArea table.fm{ width:100%; line-height:1.4;}
#formArea table.fm th{ width:25%; padding:10px 0; font-size:105%; font-weight:bold;}
#formArea table.fm td{ padding:13px 0;}
#formArea .subTxt{ font-size:90%; color:#555;}



/*== 共通 ==*/
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"],
textarea,
select{ border:2px solid #efefef; background:#efefef; margin:3px 0;}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="date"]
{ width:100%; height:50px; padding:0 2%; box-sizing:border-box; -webkit-appearance:none;}
textarea{ width:100%; height:250px; padding:10px 2%; overflow:auto; box-sizing:border-box; -webkit-appearance:none;}

input:focus,
textarea:focus,
select:focus{ outline:none; border:2px solid #00bbf3; background:#fff; transition:all 0.3s ease;}
/*placeholder*/
input::-webkit-input-placeholder{ font-size:90%;}
input:-ms-input-placeholder{ font-size:90%;}
input::-moz-placeholder{ font-size:90%;}
/*focus時にplaceholder非表示*/
input:focus::-webkit-input-placeholder { color:transparent;}
input:focus::-moz-placeholder { color:transparent;}
input:focus:-ms-input-placeholder { color:transparent;}
input:focus::-ms-input-placeholder { color:transparent;}

/*ラジオボタン*/
span.radioBtn{}
span.nowrap{}
span > input[type="radio"]{ display:none;}
span > input[type="radio"] + label{ padding:2px 0 2px 22px; position:relative; cursor:pointer;}
span > input[type="radio"] + label::before{ content:""; display:block; position:absolute; left:0; top:0; bottom:0; margin:auto; width:16px; height:16px; border:1px solid #bbb; border-radius:50%; box-sizing:border-box;}
span > input[type="radio"]:checked + label{ font-weight:bold;}
span > input[type="radio"]:checked + label::before{ border-color:#00bbf3;}
span > input[type="radio"]:checked + label::after{ content:""; display:block; position:absolute; left:3px; top:0; bottom:0; margin:auto; width:10px; height:10px; background:#00bbf3; border-radius:50%;}

/*チェックボタン*/
.checkBox{ word-break:break-all; position:relative;}
.checkBox input[type="checkbox"]{ position:absolute; top:0; left:0; opacity:0; margin:0 0 0 1px;}
.checkBox input[type="checkbox"] + span{ display:inline-block; position:relative; padding:0 0 0 22px; line-height:1.2;}
.checkBox input[type="checkbox"] + span::before,
.checkBox input[type="checkbox"] + span::after{ content:''; display:inline-block; position:absolute; top:0; left:0; box-sizing:border-box;}
.checkBox input[type="checkbox"] + span::before{ width:16px; height:16px; border-radius:2px; background:#fff; border:1px solid #bbb;}
.checkBox input[type="checkbox"] + span::after{ width:4px; height:8px; margin:3px 6px; z-index:1;}
.checkBox input[type="checkbox"]:checked + span::before{ background-color:#00bbf3; border-color:#00bbf3;}
.checkBox input[type="checkbox"]:checked + span::after{ border:1px solid #fff; border-width:0 2px 2px 0; -webkit-transform:rotate(45deg); -ms-transform:rotate(45deg); transform: rotate(45deg);}

/*SELECT*/
.selectWrap{ width:40%; margin:0; position:relative; display:inline-block;}
.selectWrap::before {
	content:"";
	display:block;
	width: auto;
	height:1px;
	margin:auto;
	position:absolute;
	top:55%;
  transform:translateY(-55%);
	right:3%;
	box-sizing:border-box;
	border:5px solid transparent;
	border-top:6px solid #00bbf3;
}
select{
  width:100%;
  outline:none;
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  vertical-align: middle;
  font-size: inherit;
  color: inherit;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding:0 20px;
  border-radius:0;
  box-sizing: border-box;
  height:50px;
}
select option{ background-color:#fff; color:#333;}
select::-ms-expand { display:none;}
select:-moz-focusring { color:transparent; text-shadow:0 0 0 #828c9a;}
select option[selected="selected"]{ font-size:10px;}

/*label*/
label{}
/*入力モード指定*/
input.imeMode{ ime-mode:inactive;}/*英数字入力モード（変更可能）*/
/*ファイルアップロード*/
input[type="file"]{ width:100%;}
input[type="file"]::-webkit-file-upload-button{ width:150px;}
.fileBox{ padding:5px 0 10px;}
.fileBox li{ padding:5px 0;}
/*必須*/
span.iconHissu{ margin:0 1px;}
span.iconHissu::after{ content:"*"; display:inline-block; /*background:#fa0000;*/ color:#fa0000; font-size:110%; line-height:1; padding:2px 4px;}


/*幅*/
input.w90{ width:90%;}
/*郵便番号*/
input.zipCode{ width:35%; margin-left:7px;}
/*数字*/
input.number{ width:40%; max-width:150px; margin:0 8px 0 0;}
/*カレンダー*/
input.datepick{ background-image:url(../img/calender.svg); background-repeat:no-repeat; background-position:left 2% center; background-size:auto 40%; padding-left:45px;}

/*ラジオボタン*/
.radioList{ display:flex;}
.radioList li{ padding:10px 0; margin-right:4%;}
/*チェックボタン*/
.checkList{ overflow:hidden;}
.checkList li{ float:left; width:32%;}

ul.list{ display:flex;}
ul.list > li{ width:50%; padding:5px 0;}

/*エラーメッセージ*/
p.errText{ margin:10px 0 0; font-size:90%; position:relative; line-height:1;}
p.errText::after{
 content: "";
 position: absolute;
 top: -10px;
 left: 15px;
 width: 0;
 height: 0;
 margin: auto;
 border-style: solid;
 border-color: transparent transparent #f10000 transparent;
 border-width: 0 3px 10px 3px;
}
p.errText span{ display:inline-block; color:#fff; background:#f10000; padding:5px 10px; border-radius:50px;}

/*赤文字*/
.red{ color:#f10000 !important;}



/*========================================
	確認
=========================================*/
.confirmBox{ padding:2% 0; text-align:center;}
.confirmBox .ck{ margin:0 0 15px; font-size:120%; font-weight:bold;}
.confirmBox .txt{}

/*========================================
	確認BTN
=========================================*/
.btnBox{ padding:2% 0; text-align:center;}
.btnBox button{ max-width:250px; width:100%; height:75px; margin:0 2px; background:#000; color:#fff; cursor:pointer; font-size:110%; border-style:none; -webkit-appearance:none; letter-spacing:.2em;}
.btnBox button.back{ background:#999;}
.btnBox button:hover{ opacity:0.8;}


/*========================================
	送信完了
=========================================*/
.completeBox{ text-align:center; line-height:2;}
.completeBox .h{ font-size:140%; margin:0 0 30px; color:#104a8f; letter-spacing:0.1em; font-weight:bold;}
.completeBox .txt{ margin:0 0 20px;}
.completeBox .home{ padding:20px 0 0; font-size:85%;}
.completeBox .home a{ text-decoration:underline;}
.completeBox .home a:hover{ text-decoration:none;}






/*===================================================

	タブレット

===================================================*/
@media only screen and (max-width: 1024px) {


/*=========================================

	フォーム

===========================================*/
#formArea{}
#formArea .inner{}
#formArea .block{ margin:0 0 30px;}
#formArea .introBox{}
#formArea .introBox .txt{}
#formArea .error{}
#formArea table.fm{}
#formArea table.fm th,
#formArea table.fm td{ display:block; width:100% !important;}
#formArea table.fm th{}
#formArea table.fm td{ padding:15px 0 25px;}
#formArea .subTxt{}










}










/*===================================================

	スマホ

===================================================*/
@media only screen and (max-width: 739px) {


/*=========================================

	フォーム
	
===========================================*/
#formArea{}
#formArea .inner{}
#formArea .block{ margin:0 0 30px;}
#formArea .introBox{}
#formArea .introBox .txt{}
#formArea .error{}
#formArea table.fm{}
#formArea table.fm th{ padding:8px 0 3px;}
#formArea table.fm td{ padding:3px 0 8px;}
#formArea .subTxt{}


/*== 共通 ==*/
input[type="text"],
input[type="tel"],
input[type="email"],
textarea{ border-radius:0;}

input[type="text"],
input[type="tel"],
input[type="email"]{}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea{ padding:7px 2%; width:100%; font-size:16px; vertical-align:middle;}
select{ font-size:16px;}
input:focus,
textarea:focus {}
/*placeholder*/
input::-webkit-input-placeholder{ font-size:10px !important;}
input:-ms-input-placeholder{ font-size:10px !important;}
input::-moz-placeholder{ font-size:10px !important;}

/*ラジオボタン*/
span.radioBtn{}
span.nowrap{}
span > input[type="radio"]{ display:none;}
span > input[type="radio"] + label{ padding: 2px 0 2px 20px;}
span > input[type="radio"] + label::before{}
span > input[type="radio"]:checked + label{}
span > input[type="radio"]:checked + label::after{}

/*チェックボタン*/
.checkBox{}
.checkBox input[type="checkbox"]{}

/*SELECT*/
.selectWrap{ width:70%; transform:scale(0.9); transform-origin:0 20px;}
.selectWrap::before {}
select{ padding:0 8px;}
select option{}
select::-ms-expand {}
select:-moz-focusring {}
select option[selected]{ font-size:10px;}

/*INPUT*/
input[type="text"],
input[type="tel"]{}
input.addNmb{ width:50%;}
/*TEXTAREA*/
textarea{ height:150px;}
/*入力モード指定*/
input.imeMode{ ime-mode: inactive;}/*英数字入力モード（変更可能）*/
/*必須*/
span.iconHissu{}


/*幅*/
input.w90{}
/*郵便番号*/
input.zipCode{ width:45%; margin-left:5px;}
/*数字*/
input.number{ width:40%;}
/*カレンダー*/
input.datepick{ padding-left:30px;}
  
  
/*ラジオボタン*/
.radioList li{ width:50%; margin:0 0 3px;}
/*チェックボタン*/
.checkList li{ width:50%; margin:0 0 3px;}


/*エラーメッセージ*/
p.errText{ width:50%;}
p.errText::after{}




/*========================================
	確認BTN
=========================================*/
.btnBox{ max-width:95%; margin:0 auto; padding:30px 0;}
.btnBox button{ width:40%; height:45px; margin:0 1%; font-size:14px;}



/*========================================
	送信完了
=========================================*/
.completeBox{ line-height:1.8; padding:20px 0;}
.completeBox .h{ font-size:110%; margin:0 0 20px;}
.completeBox .txt{ font-size:95%;}
.completeBox .home{}
.completeBox .home a{}
.completeBox .home a:hover{}






}