@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
#005ABE
-----------------------------------------------*/

/* title */
#title {
height: 0;
padding: 35% 0 10% 0;
background-image: url("../img/recruit/title.png");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#title .text {
margin: 0 15% 0 auto;
}
#title h1 {
font-size: 4vw;
font-weight: 400;
line-height: 1.25;
text-align: right;
letter-spacing: 0.1em;
}
@media screen and (max-width: 799px) {
	#title .text {
	margin-right: 10%;
	}
	#title h1 {
	font-size: 6vw;
	}
}

/* truck */
#truck {
margin-top: 40px;
}
#truck .animation {
height: 150px;
background-image: url("../img/recruit/truck.png");
background-repeat: no-repeat;
background-size: 500px;
animation: trauckSlide 8s linear infinite;
}
@keyframes trauckSlide {
  0% {
	background-position: right -60vw center;
  }
  100% {
	background-position: left -60vw center;
  }
}
@media screen and (max-width: 799px) {
	#truck {
	margin-top: 8%;
	}
	#truck .animation {
	height: 20vw;
	background-size: 60vw;
	animation: trauckSlide 5s linear infinite;
	}
}

/* message */
#message {
padding: 40px 4% 40px 0;
}
#message .inner {
max-width: calc(50% + 500px);
margin-right: auto;
}
#message .text .en {
border-bottom: 1px solid #000;
}
#message .text h2 {
margin-top: 0.5em;
font-size: 1.375em;
letter-spacing: 0.1em;
}
#message .text p {
margin-top: 2em;
line-height: 2.5;
}
#message .grid {
display: flex;
justify-content: space-between;
align-items: center;
}
#message .photo {
max-width: calc(100% - 500px);
}
#message .text {
max-width: 500px;
}
@media screen and (max-width: 799px) {
	#message {
	padding: 8% 4%;
	}
	#message .inner {
	max-width: 100%;
	}
	#message .text .en img {
	width: 40%;
	}
	#message .text h2 {
	font-size: 1.25em;
	}
	#message .text p {
	margin-top: 4%;
	line-height: 1.75;
	text-align: justify;
	}
	#message .grid {
	display: block;
	}
	#message .photo {
	max-width: 100%;
	}
}

/* feature */
#feature {
padding: 40px 4%;
}
#feature .inner {
max-width: 1000px;
margin: auto;
}
#feature .grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: stretch;
max-width: 800px;
margin: auto;
margin-top: 4%;
}
#feature dl {
display: flex;
flex-direction: column;
width: 30%;
}
#feature .text {
margin: 1em 0;
text-align: justify;
line-height: 1.75;
}
#feature .photo {
margin-top: auto;
}
#feature .tour {
max-width: 900px;
margin: auto;
margin-top: 4%;
padding: 1em 0;
font-size: 1.25em;
text-align: center;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#feature .guideline {
max-width: 900px;
margin: auto;
margin-top: 6%;
padding: 0.5em 0;
font-size: 1.75em;
text-align: center;
color: #FFF;
background: #005AC0;
}
#feature .guideline a {
color: #FFF;
}
#feature .guideline span {
padding: 0.25em 5em;
background-image: url("../img/recruit/arw_contact1.svg"), url("../img/recruit/arw_contact2.svg");
background-position: left center, right center;
background-repeat: no-repeat, no-repeat;
background-size: 1.25em, 1.25em;
}
@media screen and (max-width: 799px) {
	#feature {
	padding: 8% 4%;
	}
	#feature .grid {
	display: block;
	margin-top: 4%;
	}
	#feature dl {
	display: block;
	width: 100%;
	}
	#feature dl:not(:first-child) {
	margin-top: 8%;
	}
	#feature dt {
	width: 60%;
	max-width: 300px;
	margin: auto;
	}
	#feature .text {
	margin: 2% 0 4% 0;
	line-height: 1.5;
	}
	#feature .photo {
	max-width: 360px;
	margin: auto;
	}
	#feature .tour {
	margin-top: 8%;
	font-size: 1em;
	}
	#feature .guideline {
	margin-top: 8%;
	padding: 1em 0;
	font-size: 1.25em;
	}
	#feature .guideline span {
	padding: 0.25em 2em;
	background-size: 1em, 1em;
	}
}

/* voice */
#voice {
padding: 50px 4%;
}
#voice .inner {
max-width: 1000px;
margin: auto;
}
#voice h2 {
max-width: 18em;
margin: auto;
font-size: 1.65em;
padding-bottom: 0.25em;
border-bottom: 1px solid #000;
}
#voice h2 .en {
width: 50%;
margin: 0 2em 0.25em 0;
}
#voice .lead .photo {
display: flex;
margin-top: 4%;
}
#voice .lead .photo li {
width: 33.333%;
}
#voice .lead .text {
margin-top: 2em;
line-height: 2.5;
text-align: center;
}
#voice .name {
position: relative;
width: 50%;
min-width: 20em;
margin-top: 8%;
padding-bottom: 0.5em;
border-bottom: 1px solid #000;
}
#voice .name strong {
margin-right: 0.25em;
font-size: 2em;
font-weight: 400;
}
#voice .name .school {
font-size: 1.5em;
}
#voice .name .icon {
position: absolute;
top: 0.5em;
right: 0;
width: 5em;
}
#voice .detail {
position: relative;
margin-top: 4%;
}
#voice .detail .num {
position: absolute;
top: -50px;
right: 0;
display: inline-block;
width: 20%;
}
#voice .detail .grid {
display: flex;
justify-content: space-between;
align-items: stretch;
}
#voice .detail .grid.even {
flex-flow: row-reverse;
}
#voice .detail .photo {
width: 50%;
object-fit: cover;
}
#voice .detail .text {
width: 50%;
padding: 2em;
background: #B9DCF5;
}
#voice .detail h4 {
font-size: 1.4em;
}
#voice .detail p {
margin-top: 1em;
line-height: 1.75;
text-align: justify;
}

/* voice2 */
#voice .voice2 .detail .num {
right: auto;
left: 0;
}
#voice .voice2 .name {
margin-left: auto;
}
#voice .voice2 .detail .text {
color: #FFF;
background: #005AC0;
}
@media screen and (max-width: 799px) {
	#voice {
	padding: 8% 4%;
	}
	#voice h2 {
	max-width: 100%;
	font-size: 1.25em;
	}
	#voice h2 .en {
	width: 40%;
	margin-right: 1em;
	}
	#voice .lead .text {
	margin-top: 4%;
	line-height: 1.75;
	text-align: justify;
	}
	#voice .name {
	width: 100%;
	font-size: 0.85em;
	}
	#voice .name .school {
	font-size: 1.25em;
	}
	#voice .name .icon {
	width: 4em;
	}
	#voice .detail {
	position: relative;
	margin-top: 4%;
	}
	#voice .detail .num {
	display: none;
	}
	#voice .detail .grid {
	display: block;
	}
	#voice .detail .photo {
	width: 100%;
	}
	#voice .detail .text {
	width: 100%;
	padding: 4% 0;
	background: none;
	}
	#voice .detail h4 {
	font-size: 1.25em;
	}
	#voice .detail p {
	margin-top: 2%;
	line-height: 1.5;
	}

	/* voice2 */
	#voice .voice2 .detail .text {
	color: #000;
	background: none;
	}
}

/* guideline */
#guideline {
padding: 50px 4%;
background: #005AC0;
background-image: url("../img/recruit/guideline_bg.png");
background-position: right bottom;
background-repeat: no-repeat;
background-size: 50%;
}
#guideline .inner {
max-width: 1000px;
margin: auto;
}
#guideline h2 {
font-family: "Shippori Mincho B1", serif;
}
#guideline h2:not(:first-child) {
margin-top: 8%;
}
#guideline strong {
margin-left: 1em;
padding: 0.25em 1.5em;
font-family: "Noto Sans JP", sans-serif;
font-size: 0.75em;
font-weight: 400;
color: #000;
background: #FFED55;
border-radius: 3em;
}
#guideline .h02::before,
#guideline .h02::after {
width: calc(50% - 7em);
}
#guideline .text {
margin-top: 1em;
font-family: "Shippori Mincho B1", serif;
font-size: 1.25em;
text-align: center;
color: #FFF;
}
#guideline .pulldown {
margin-top: 2%;
padding: 0.75em;
font-size: 1.35em;
text-align: center;
background: #FFF;
background-image: url("../img/recruit/ico_close.svg");
background-position: right 1em center;
background-repeat: no-repeat;
background-size: 1em;
border-radius: 0.25em;
cursor: pointer;
}
#guideline .pulldown.open {
background-image: url("../img/recruit/ico_open.svg");
border-radius: 0.25em 0.25em 0 0;
}
#guideline .detail {
display: none;
padding: 4%;
background: #FFF;
border-radius: 0 0 0.25em 0.25em;
}
#guideline .detail h4 {
max-width: 8em;
margin: auto;
padding-bottom: 0.25em;
text-align: center;
font-size: 1.25em;
border-bottom: 2px solid #005AC0;
}
#guideline .detail h4:not(:first-child) {
margin-top: 4%;
}
#guideline .detail table {
width: 100%;
margin-top: 2.5%;
}
#guideline .detail tr {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
#guideline .detail th {
width: 10em;
padding: 1em;
font-weight: 400;
text-align: center;
vertical-align: middle;
background: #DEDEDE;
}
#guideline .detail .method th {
background: #B9DCF5;
}
#guideline .detail td {
padding: 1em;
vertical-align: middle;
}
@media screen and (max-width: 799px) {#guideline {
	padding: 8% 4%;
	}
	#guideline .inner {
	max-width: 1000px;
	margin: auto;
	}
	#guideline h2:not(:first-child) {
	margin-top: 12%;
	}
	#guideline .text {
	font-size: 1em;
	}
	#guideline .pulldown {
	margin-top: 4%;
	padding: 1em 0;
	font-size: 1.2em;
	background-size: 0.75em;
	}
	#guideline .detail h4 {
	font-size: 1.2em;
	}
	#guideline .detail h4:not(:first-child) {
	margin-top: 8%;
	}
	#guideline .detail table {
	margin-top: 4%;
	}
	#guideline .detail tr {
	border: 0;
	}
	#guideline .detail th {
	display: block;
	width: 100%;
	margin-top: 5%;
	padding: 0.5em;
	}
	#guideline .detail td {
	display: block;
	margin-top: 2.5%;
	padding: 0;
	}
}