@charset "utf-8";

/* CSS Document */

@media all{
	html{
		font-family:  Ryumin Light KL, serif;
		font-size: 16px;
	}
	*, *:before, *:after {
		-webkit-box-sizing: border-box;
		box-sizing: border-box
	}
	
	#formarea{
		padding: 60px 0
	}
	h1 {
		font-size: 1.8rem;
		border-bottom: solid 2px #333;
		padding: 0 1em 5px;
		margin: 0 auto 2em !important;
		width: fit-content;
		text-align: center
	}
	h2,h3{
		font-size: 1em
	}
	
	.tar{
		text-align: right;
	}

	#recruit {
		background-color: #f0f0f0;
		background-image: url(../images/texture.jpg)
	}

	#title_main {
		font-size: 2rem;
		border-bottom: solid 1px #565656;
		margin: 40px auto 20px;
		width: 8em;
		text-align: center
	}
	.title_contects {
		font-size: 1.5rem;
		padding: 5px 5px 8px;
		border: solid #A57A43;
		border-width: 0 0 2px 10px;
	}
	.text_sub {
		font-size: 1rem;
		text-indent: -1em;
		padding: 1em 0 1em 2em
	}

	.image_staff_in img,
	.image_hotel_in img{
		width: 100%
	}

	#entry{
		width: 100%;
		padding: 20px;
		text-align: center
	}
	.entryform{
		margin: 10px 20px 30px;
		width: 250px;
		display: inline-block
	}
	.entryform a{
		background-color: #997948;
		color: #fff;
		text-align: center;
		font-size: 1.3rem;
		text-decoration: none;
		display: block;
		padding: 20px;
		border-radius: 10px
	}
	.entryform a:hover{
		opacity: 0.6
	}

	#image_main {
		width: 100%;
		margin-bottom: 60px
	}
	#image_main img{
		width: 100%
	}
	#career{
		width: 640px;
		margin: 0 auto;
		text-align: center
	}
	#career a{
		color: #000
	}
	
	#guideline,
	#benefits,
	#resource,
	#briefingdate{
		width: 640px;
		margin: 0 auto;
		padding: 60px 0;
		text-align: left;
		line-height: 1.5em
	}
	.exam{
		width: fit-content;
		margin: 0 auto 1rem;
		font-size: 1.3rem;
		padding: 0.5rem 1rem;
		background-color: rgba(255,255,255,.5);
		border-radius: 10px
	}
	.exam dl{
		display: table
	}
	.exam dt{
		width: 6em;
		display: table-cell
	}
	.exam dd{
		display: table-cell;
		line-height: 1.5em
	}
	.gl_list{
		width: 100%
	}
	.gl_list dt{
		padding: 1rem 2rem 0.5rem;
		font-size: 1.3rem;
		color: #3A0B00;
		border-top: solid 1px #A57A43
	}
	.gl_list dd{
		padding: 0 2rem 1rem;
		font-size: 1.1rem;
		line-height: 1.3em
	}
	.treatment{
		border-top: solid 1px #A57A43;
		width: 100%
	}
	.treatment dt{
		padding: 1rem 2rem 0.5rem;
		font-size: 1.3rem
	}
	.treatment dd{
		padding: 0 2rem 1rem;
		line-height: 1.3em
	}
	.treatment dd p{
		margin-top: 2em
	}
	.treatmentinner{
		display: table;
		width: 480px;
		margin: 1rem auto 0
	}
	.treatmentinner dt{
		width: 25%;
		display: table-cell;
		line-height: 1.5em;
		font-size: 1.2rem;
		padding: 0 1rem;
		vertical-align: top
	}
	.treatmentinner dd{
		display: table-cell;
		line-height: 1.5em;
		font-size: 1.2rem;
		padding: 0 1rem;
		vertical-align: top
	}
	.treatmentinner dd table{
		width: 100%;
		margin-bottom: 0.5em;
	}
	
	#benefits li,
	#resource li,
	#briefingdate li{
		font-size: 1.1rem;
		line-height: 1.5em;
		padding: 1rem 2rem 0
	}
	
	#staffImage {
		width: calc(100% - 40px);
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 0 40px
	}
	.image_staff{
		width: 100%;
		font-size: 0
	}
	.image_staff_in{
		width: 25%;
		display: inline-block
	}
	.image_hotel{
		width: calc(100% - 40px);
		margin: 40px auto 0;
		font-size: 0
	}
	.image_hotel_in{
		width: calc(100% / 6);
		display: inline-block
	}
	
	#recruit_mailform hr{
		display: block;
		width: 100%;
		height: 5px;
		background: #f09500;
		border: none;
	}
	#recruit_mailform .text {
	  padding: 0 20px 40px;
	  font-size: 1.5rem;
	  line-height: 1.7;
	  letter-spacing: 1px;
	text-align: center
}	
	#recruit_mailform .day {
	  width: calc(100% - 40px);
      max-width: 720px;
	  padding: 0 20px 40px;
	  margin: 0 auto;
	  font-size: 1.5rem;
	  line-height: 1.7;
	  letter-spacing: 1px;
}
	}
	
/*中途採用*/
	#boshu{
		padding: 40px 0 40px;
		margin-bottom: 20px;
	}

}


@media screen and (max-width: 567px){

	#image_main {
		margin-bottom: 40px
	}
	
	#career{
		width: 100%;
		padding: 0 20px
	}
	
	#guideline,
	#benefits,
	#resource,
	#briefingdate{
		width: 100%;
		padding: 20px
	}
	.exam{
		width: 90%;
		margin: 0 5% 1rem
	}
	.exam dt{
		width: 5em
	}
	.gl_list dt,
	.treatment dt{
		padding: 1rem 1rem 0.5rem
	}
	.gl_list dd,
	.treatment dd{
		padding: 0 1rem 1rem
	}
	.treatmentinner{
		width: 100%
	}
	.treatmentinner dt{
		padding: 0 1rem 0.5rem
	}
	.treatmentinner dd table td{
		display: block;
	}

	#benefits li,
	#resource li,
	#briefingdate li{
		padding: 1rem 1rem 0
	}

	.image_staff_in{
		width: 50%
	}

	.image_hotel{
		width: 100%
	}
	.image_hotel_in{
		width: 50%
	}

}

@media screen and (min-width: 568px) and (max-width: 1024px){

	#image_main{
		height: 50vh;
		overflow: hidden
	}
	#image_main img{
		height: 100%;
		object-fit: cover
	}

	.image_hotel{
		margin: 0 auto
	}

	.treatmentinner{
		width: 380px;
	}
	.treatmentinner dt{
		width: 6em;
	}
	
}

@media screen and (min-width: 1025px),print{

	#image_main{
		height: calc(100vh - 100px);
		overflow: hidden
	}
	#image_main img{
		height: 100%;
		object-fit: cover
	}

}