.recruit .page-toppic {
	background:url(../images/recruit-toppic.jpg) center center no-repeat;
	background-size:cover
}

.image {
	max-width: 100%;
}

.recruit .sec .midashi {
	font-size: 2rem;
  background: var(--blue-color);
  color: #ffffff;
  padding: 5px 10px;
  margin-bottom: 20px;
}

.recruit .sec .inner table.basic tr th {
	width: 20%;
}

.recruit .sec .inner table.basic tr td {
	text-align: left;
}

.recruit .sec .inner table.basic tr td span {
	display: block;
	text-indent: -1em;
	padding-left: 1em;
}

#sec02 .flex {
	justify-content: center;
}

#sec02 .txtarea:first-of-type {
	width: calc(100% / 3 - 10px);
}

#sec02 .txtarea:last-of-type {
	width: calc(100% / 2)
}

#sec02 .txtarea:last-of-type table tr td {
	text-align: center;
}

#sec02 .rec-btn {
	text-align: center;
}

#sec02 .rec-btn .bold {
	font-weight: bold;
	margin: 16px 0;
}

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { 
  -webkit-appearance: none; 
  margin: 0;
}
input[type="number"] { 
	appearance: textfield;
  -moz-appearance: textfield; 
}


@media print,screen and (max-width: 767px){
	.recruit .page-toppic{
		background:url(../images/recruit-toppic-sp.jpg) center center no-repeat;
		background-size:cover
	}

	input[type=text],
	textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.name {
		width: 80% !important;
	}

	.name-first {
		width: 80% !important;
		margin-left: 16px;
	}

	.ymd {
		width: 16% !important;
	}

	.recruit .sec table.basic th {
		display: block;
		width: 100% !important;
		padding: 10px 0;
	}

	.recruit .sec table.basic td {
		display: block;
		width: calc(100% - 20px);
		padding: 10px;
	}

	#sec02 .flex {
		flex-direction: column;
	}

	#sec02 .txtarea:first-of-type {
		width: 100%;
	}

	#sec02 .txtarea:last-of-type {
		width: 100%;
	}


}