/* Original Source: http://meyerweb.com/eric/tools/css/reset/ */html, body, div, span, applet, object, iframe,  p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, label2, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes:none;}blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}:focus {outline: 0;}ins {text-decoration: none;}del {text-decoration: line-through;}table {
	border-collapse: collapse;
	border-spacing: 0;
	border-color: #666;
}
.mailBox form {
	width:100%;
	text-align:left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 0px;
}

.mailBox ul.formBox {
	box-sizing: border-box;
	width: 100%;
	height: auto;
}
.mailBox ul.formBox li {
	box-sizing: border-box;
	border-bottom:1px dotted #c7c7c7;
	height:auto;
	overflow:hidden;
	list-style:none;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.mailBox ul.formBox li.bord0 {
	border-bottom: 0px dotted #c7c7c7;
}
@media screen and (max-width: 800px) { 
	.mailBox ul.formBox li {
		padding: 20px 10px;
	}
}
@media screen and (max-width: 499px) { 
	.mailBox ul.formBox li {
		padding: 20px 0px;
	}
}

.mailBox .mailformBox {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	display: block;
	padding: 0px 10px 0 10px;
}
/*****************/
/* The actual form */
/*****************/


.mailBox label {
	box-sizing: border-box;
	width:100%;
	flex-basis: 100%;
	text-align: left;
	margin: 0px;
	padding: 0px;
	font-size: 16px;
	padding-bottom: 10px;
}

.mailBox input, 
.mailBox select, 
.mailBox textarea {
	box-sizing: border-box;
	width:100%;
	flex-basis: 100%;
	background:#fff;
	padding: 8px 10px;
	border-radius: 5px;
	font-size: 18px;
	border:1px solid #c7c7c7;
}

input[type="checkbox"] {
    cursor: pointer;
    padding: 0;
	margin-left: -5px;
    vertical-align: middle;
    position: relative;
	float: left;
  }
 
  input[type="checkbox"]::before,
  input[type="checkbox"]::after {
    content: "";
    display: block; 
    position: absolute;
  }
 
  input[type="checkbox"]::before {
    background-color: #fff;
    border-radius: 0%;
    border: 1px solid #666464;
    width: 20px;/*チェックボックスの横幅*/
    height: 20px;/*チェックボックスの縦幅*/
    transform: translateY(-50%);
    top: 50%;
    left: 5px;
  }
 
  input[type="checkbox"]::after {
    border-bottom: 3px solid #666464;/*チェックの太さ*/
    border-left: 3px solid #666464;/*チェックの太さ*/
    opacity: 0;/*チェック前は非表示*/
    height: 6px;/*チェックの高さ*/
    width: 11px;/*チェックの横幅*/
    transform: rotate(-45deg);
    top: -7px;/*チェック時の位置調整*/
    left: 10px;/*チェック時の位置調整*/
  }
 
  input[type="checkbox"]:checked::after {
    opacity: 1;/*チェック後表示*/
  }

.mailBox input[type=text]:focus, 
.mailBox input[type=text]:active, 
.mailBox input[type=password]:active, 
.mailBox input[type=password]:focus, 
.mailBox input[type=email]:active, 
.mailBox input[type=email]:focus, 
.mailBox input[type=checkbox]:active, 
.mailBox input[type=checkbox]:focus, 
.mailBox textarea:active, 
.mailBox textarea:focus {
	outline:2px solid #f39939;
}

.mailBox textarea {
	height:100px;
}



select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	border-radius: 0;
	box-sizing: border-box;
	width:100%;
	flex-basis: 100%;
	padding: 8px 10px;
	padding-top: 0;
	background: #FFF;
	background-image: url(img/icon_arrow.svg);
	background-repeat: no-repeat;
	background-size: 18px 15px;
	background-position: right 10px center;
	border-radius: 5px;
	border:1px solid #c7c7c7;
}



.mailBox .selector, 
.mailBox .radio, 
.mailBox .checker, 
.mailBox .selector *, 
.mailBox .radio *, 
.mailBox .checker *, 
.mailBox .uploader *{
	margin: 0;
	padding: 0;
}

/* SPRITES */

/* Select */

.mailBox .select {
	box-sizing: border-box;
	width:calc(100% - 200px);
	flex-basis: calc(100% - 200px);
	background:#fff;
}

.mailBox .selector span {
  background-position: right 0px;
  height: 32px;
  line-height: 32px;
	overflow:hidden;
}
.mailBox .selector option {padding:3px;border-bottom:1px dotted #ccc;}
.mailBox .selector select {
  top:2px;
left:10px;border:1px solid #333;
}

.mailBox .selector:active, 
.mailBox .selector.active {
	background-position: -483px -192px;
}

.mailBox .selector:active span, 
.mailBox .selector.active span {
	background-position: right -32px;
}

.mailBox .selector.focus, .mailBox .selector.hover, .mailBox .selector:hover {
	background-position: -483px -224px;
}

.mailBox div.selector.focus span, .mailBox .selector.hover span, .mailBox .selector:hover span {
	background-position: right -64px;
}

.mailBox .selector.focus:active,
.mailBox .selector.focus.active,
.mailBox .selector:hover:active,
.mailBox .selector.active:hover {
	background-position: -483px -256px;
}

.mailBox .selector.focus:active span,
.mailBox .selector:hover:active span,
.mailBox .selector.active:hover span,
.mailBox .selector.focus.active span {
	background-position: right -96px;
}

.mailBox .selector.disabled,
.mailBox .selector.disabled:active,
.mailBox .selector.disabled.active {
	background-position: -483px -288px;
}

.mailBox .selector.disabled span,
.mailBox .selector.disabled:active span,
.mailBox .selector.disabled.active span {
  background-position: right -128px;
}


/* checker */

.mailBox .checker {
	position: relative;
	float: left;
}

.mailBox .checker span {
	display: block;
	float: left;
	text-align: center;
}

.mailBox .checker input {
  opacity: 0;
  display: inline-block;
}

/* radio */

.mailBox .radio {
	position: relative;
	float: left;
}

.mailBox .radio span {
	display: block;
	float: left;
	text-align: center;
}

.mailBox .radio input {
  opacity: 0;
  text-align: center;
  display: inline-block;
}



input[type="radio"] {
	width: 30px;
	flex-basis: 30px;
	position: absolute;
	top: 4px;
  }

/*
  ラジオ選択（見学・面接 / 性別）を、他の入力欄と同じ「白い入力ボックス」感に揃えるための調整
  ※既存の他ラジオに影響しないよう、行クラス（visitInterview / genderChoice）でスコープしています
*/
.mailBox ul.formBox li.visitInterview .choiceBox,
.mailBox ul.formBox li.genderChoice .choiceBox {
	box-sizing: border-box;
	width: 100%;
	flex-basis: 100%;
	background: #fff;
	padding: 12px 14px;
	border-radius: 5px;
	border: 1px solid #c7c7c7;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
}

.mailBox ul.formBox li.visitInterview .choiceBox label.choice,
.mailBox ul.formBox li.genderChoice .choiceBox label.choice {
	width: auto;
	flex-basis: auto;
	padding-bottom: 0;
	margin: 0;
	display: flex;
	align-items: center;
	font-size: 16px;
}

.mailBox ul.formBox li.visitInterview .choiceBox input.radio,
.mailBox ul.formBox li.genderChoice .choiceBox input.radio {
	float: none;
	/*
		「○（ラジオ）」と文字の間隔が広く見えるため、
		見学・面接の行だけ文字を少し左に寄せる（間隔を詰める）
		※他のラジオ（性別など）には影響しないようスコープ
	*/
	position: static; /* 既存の input[type="radio"](absolute) の影響をここだけ解除 */
	width: 22px;     /* クリック領域を保ちつつ、余白を詰める */
	flex-basis: 22px;
	margin-right: 4px;
}