@charset "utf-8";

@media screen and (min-width: 768px) {
/*-- form table ------------------------------------------------------------*/
.formTbl { width:100%; margin-bottom: 40px; }
.formTbl th,.formTbl td { padding:2%; border: 1px solid #ddd; }
.formTbl th { width: 25%; color: #333; background: #f3f3f3; text-align:left; vertical-align:middle; }
.formTbl td { width: 75%; }

/*-- form size ------------------------------------------------------------*/
.length-post {width:5%;}
.length-10  {width:10%;}
.length-15  {width:15%;}
.length-20  {width:20%;}
.length-25  {width:25%;}
.length-30  {width:30%;}
.length-40  {width:40%;}
.length-50  {width:50%;}
.length-60  {width:60%;}
.length-70  {width:70%;}
.length-80  {width:80%;}
.length-90  {width:90%;}
.length-95  {width:95%;}
.length-100  {width:100%;}
.textarea-size { width:96%; line-height:1.7; height:150px; }

input[type=text] { padding:1% 2%; border:#DEDEDE 1px solid; }
input[type=text]:focus { background:#FFFFE3; }
select { padding:5px 10px; border:#DEDEDE 1px solid; }	
select:focus { background:#FFFFE3; } 
textarea { padding:2%; border:#DEDEDE 1px solid; }	
textarea:focus { background:#FFFFE3; } 

/*-- form_btn ------------------------------------------------------------*/
.btnForm { text-align:center; display: flex; justify-content: center; }
.btnBack,.btnCheck,.btnReset,.btnSubmit { border:none; cursor:pointer; /*IE*/ *display:block; }
.btnBack:hover,.btnCheck:hover,.btnReset:hover,.btnSubmit:hover {
	opacity:0.75;
	filter:alpha(opacity=75);
	-webkit-transition:opacity 0.3s ease;
	-moz-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
	}
.btnBack,.btnCheck,.btnReset,.btnSubmit{ width:30%;	height:40px; font-size:1.0rem; text-align:center; color:#fff; font-weight:normal; margin: 0 1%; }
.btnBack   {background:#B3B3B3;} /*-- 戻るボタンの色 --*/
.btnCheck  {background:#DE6F71;} /*-- 確認ボタンの色 --*/
.btnReset  {background:#B3B3B3;} /*-- リセットボタンの色 --*/
.btnSubmit {background:#DE6F71;} /*-- 送信ボタンの色 --*/
	
#btn-submit-form { width: 100%; }

/*-- form_etc ------------------------------------------------------------*/
.hissu { background:#CC3333; font-size:12px; color:#fff; text-align:center; padding:1px 3px; float: right; font-weight: normal; }
.hissu02 { background:#CC3333; font-size:12px; color:#fff; text-align:center; padding:1px 3px; }
.nini { background:#166FD8; font-size:12px; color:#fff; text-align:center; padding:1px 3px; float: right; font-weight: normal; }
	
.pageMenu { display: flex; justify-content: center; margin-bottom: 20px;}
.pageMenu li { border: 3px solid #dedede; height: 50px; line-height: 50px; text-align: center; margin: 0 0.1%; width: 25%;  }
.pageMenu li a { display: block; }
.pageMenu li a:link    { color:#333333; text-decoration: none; }
.pageMenu li a:visited { color:#333333; text-decoration: none; }
.pageMenu li a:hover   { color:#fff; text-decoration: none; background: #f88042; }
.pageMenu li a:active  { color:#333333; text-decoration: none; }
.pageMenu li.current { border: 3px solid #f88042; height: 50px; line-height: 50px; text-align: center; margin: 0 0.1%; background: #f88042; color: #fff;  }

h4 { background: #f4f4f4; padding: 10px; }
}
@media screen and (max-width: 767px) {
/* iOSでのデフォルトスタイルをリセット */
input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}
input[type=submit]::focus,
input[type=button]::focus {
  outline-offset: -2px;
}
/*-- form table ------------------------------------------------------------*/
.formTbl { width:100%; margin-bottom: 20px; }
.formTbl th,.formTbl td { padding:2%; border: 1px solid #ddd; display:block; border-bottom:none !important; }
.formTbl th { width: 96%; color: #333; background: #f3f3f3; text-align:left; vertical-align:middle; }
.formTbl td { width: 96%; }
.formTbl td:last-child { border-bottom:1px solid #ddd !important; }
/*-- form size ------------------------------------------------------------*/
.length-post {width:20%;}
.length-10  {width:96%;}
.length-15  {width:96%;}
.length-20  {width:96%;}
.length-25  {width:96%;}
.length-30  {width:96%;}
.length-40  {width:96%;}
.length-50  {width:96%;}
.length-60  {width:96%;}
.length-70  {width:96%;}
.length-80  {width:96%;}
.length-90  {width:99%;}
.length-95  {width:96%;}
.length-100  {width:96%;}
.textarea-size { width:95.5%; line-height:1.7; height:150px; }

/*-- form_style ------------------------------------------------------------*/
input[type=text] { padding:1% 2%; border:#DEDEDE 1px solid; }
input[type=text]:focus { background:#FFFFE3;}
select { padding:5px 10px; border:#DEDEDE 1px solid; }	
select:focus { background:#FFFFE3; } 
textarea { padding:2%; border:#DEDEDE 1px solid; }	
textarea:focus { background:#FFFFE3; } 
input[type=text],textarea { border-radius:0px; }
input[type=submit] { -webkit-appearance: none; }

/*-- form_btn ------------------------------------------------------------*/
.btnForm { text-align:center; display: flex; justify-content: center; }
.btnBack,.btnCheck,.btnReset,.btnSubmit { border:none; cursor:pointer; /*IE*/ *display:block; }
.btnBack:hover,.btnCheck:hover,.btnReset:hover,.btnSubmit:hover {
	opacity:0.75;
	filter:alpha(opacity=75);
	-webkit-transition:opacity 0.3s ease;
	-moz-transition:opacity 0.3s ease;
	transition:opacity 0.3s ease;
	}
.btnBack,.btnCheck,.btnReset,.btnSubmit{width:40%; height:40px; font-size:0.9rem; text-align:center; color:#fff; font-weight:normal; margin: 0 1%; }
.btnBack   {background:#B3B3B3;} /*-- 戻るボタンの色 --*/
.btnCheck  {background:#DE6F71;} /*-- 確認ボタンの色 --*/
.btnReset  {background:#B3B3B3;} /*-- リセットボタンの色 --*/
.btnSubmit {background:#DE6F71;} /*-- 送信ボタンの色 --*/
	
#btn-submit-form { width: 100%; }

/*-- form_etc ------------------------------------------------------------*/
.hissu { background:#CC3333; font-size:12px; color:#fff; text-align:center; padding:1px 3px; float: right; font-weight: normal; }
.hissu02 { background:#CC3333; font-size:12px; color:#fff; text-align:center; padding:1px 3px; }
.nini { background:#166FD8; font-size:12px; color:#fff; text-align:center; padding:1px 3px; float: right; font-weight: normal; }
	
.pageMenu { display: flex; justify-content: center; margin-bottom: 10px;}
.pageMenu li { border: 3px solid #dedede; height: 40px; line-height: 40px; text-align: center; margin: 0; width: 32%; font-size: 11px; }
.pageMenu li a { display: block; }
.pageMenu li a:link    { color:#333333; text-decoration: none; }
.pageMenu li a:visited { color:#333333; text-decoration: none; }
.pageMenu li a:hover   { color:#fff; text-decoration: none; background: #f88042; }
.pageMenu li a:active  { color:#333333; text-decoration: none; }
.pageMenu li.current { border: 3px solid #f88042; height: 40px; line-height: 40px; text-align: center; margin: 0 0.1%; background: #f88042; color: #fff;  }

h4 { background: #f4f4f4; padding: 10px; }
}

@media screen and (max-width: 767px) {
	.scroll-box { border: 1px solid #dedede; padding: 4%; overflow-y: scroll; background: #fff; height: 200px; margin-bottom: 40px;  }
	.scroll-box h3 { text-align-last: center; font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333;  }
	.scroll-box .ppText { font-size: 1.0rem; margin-bottom: 5px; color: #333; font-weight: bold; }
	.scroll-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }
	.scroll-box .inset20 { padding: 0 0 0 10px; }
	
	.pp-box h3 { text-align-last: center; font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #333;  }
	.pp-box .ppText { font-size: 1.0rem; margin-bottom: 5px; color: #333; font-weight: bold; }
	.pp-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }
	.pp-box .inset20 { padding: 0 0 0 10px; }

	.tblpp { margin-bottom: 20px;}
	.tblpp th { padding: 5px 10px; text-align: center; font-size: 13px; background: #f4f4f4; border: 1px solid #dedede; font-weight: normal; display: block; }
	.tblpp td { padding: 5px 10px; text-align: left; font-size: 13px; background: #fff; border: 1px solid #dedede; display: block; }
	.ppDoi { background: #f4f4f4; text-align: center; padding: 5px 0;}
}
@media screen and (min-width: 768px) {
	.scroll-box { border: 1px solid #dedede; padding: 30px 40px; overflow-y: scroll; background: #fff; height: 200px; margin-bottom: 40px;  }
	.scroll-box h3 { text-align-last: center; font-size: 21px; font-weight: bold; margin-bottom: 20px; color: #333;  }
	.scroll-box .ppText { font-size: 1.0rem; margin-bottom: 5px; color: #333; font-weight: bold;}
	.scroll-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }
	.scroll-box .inset20 { padding: 0 0 0 20px; }
	
	.tblpp { margin-bottom: 20px;}
	.tblpp th { padding: 5px 10px; text-align: center; font-size: 14px; background: #f4f4f4; border: 1px solid #dedede; font-weight: normal;}
	.tblpp td { padding: 5px 10px; text-align: left; font-size: 14px; background: #fff; border: 1px solid #dedede; }
	.ppDoi { background: #f4f4f4; text-align: center; padding: 5px 0;}
	
	.pp-box h3 { text-align-last: center; font-size: 21px; font-weight: bold; margin-bottom: 20px; color: #333;  }
	.pp-box .ppText { font-size: 1.0rem; margin-bottom: 5px; color: #333; font-weight: bold;}
	.pp-box p { margin-bottom: 20px; font-size: 0.9rem; color: #333; }
	.pp-box .inset20 { padding: 0 0 0 20px; }
}

@media screen and (min-width: 768px) and (min-width: 1023px) {
	.formSection .in { margin: 0 2% 40px; }
}
@media screen and (min-width: 1024px) {
	.formSection .in { width: 960px !important; margin: 0 auto 80px; }
}