@charset "UTF-8";

@media screen and (min-width:768px) {
	
	div.label {
		width: 732px;
		height: auto;
		margin: 0 auto;
	}
	
	div.label span {
		display: inline-block;
		color: #fff;
		text-align: center;
		padding: 1px 5px;
		border-radius: 3px;
		margin-right: 5px;
	}
	
	div.label span:first-child {
		color: #333;
		font-weight: bold;
	}
	
	div.label span.full {
		background: #6C3;
	}
	
	div.label span.nonregular {
		background: #99f;
	}
	
	div.label span.part {
		background: #F76665;
	}
	
	h1#job_title {
		width: 732px;
		height: auto;
		font-size: 1.3rem;
		margin: 10px auto;
	}
	
	div#top {
		width: 732px;
		height: 552px;
		margin: 10px auto 0;
	}
	
	div#top img {
		position: relative;
		width: 732px;
		height: 480px;
		border: 6px solid #ccc;
		z-index: 10;
	}
	
	div#top p {
		position: relative;
		width: 732px;
		height: 103px;
		font-weight: bold;
		text-align: center;
		top: -40px;
		padding: 40px 30px;
		background: url("../img/detail/copy_bg.png") 0 0 no-repeat;
		z-index: 100;
	}
	
	section#detail {
		position: relative;
		width: 732px;
		height: 685px;
		margin: 70px auto 0;
		background: #ffe;
	}
	
	section#detail h2 {
		position: absolute;
		width: 141px;
		height: 56px;
		font-size: 1.2rem;
		color: #393;
		padding: 12px 30px;
		top: -28px;
		left: 296px;
		background: url("../img/detail/h2_bg.png") 0 0 no-repeat;
	}
	
	section#detail dl {
		position: relative;
		padding: 30px;
		top: 50px;
		left: 0;
	}
	
	section#detail dl dt {
		position: absolute;
		display: inline-block;
		padding: 7px 10px;
		width: 95px;
		color: #fff;
		text-align: center;
		background: #6c6;
	}

	section#detail dl dt:before {
		content: "";
		position: absolute;
		top: 50%;
		left: 100%;
		margin-top: -5px;
		border: 5px solid transparent;
		border-left: 10px solid #6c6;
	}
	
	section#detail dl dd {
		position: absolute;
		padding: 8px 10px 20px;
		left: 140px;
		width: 580px;
		border-bottom: 3px dashed #ccc;
	}
	
	section#detail dl dd:last-child {
		border-bottom: none;
	}
	
	section#detail dl dt.genre {
		top: 0;
	}
	
	section#detail dl dd.genre {
		top: 0;
	}
	
	section#detail dl dt.form {
		top: 70px;
	}
	
	section#detail dl dd.form {
		top: 70px;
	}
	
	section#detail dl dt.condition {
		top: 140px;
	}
	
	section#detail dl dd.condition {
		top: 140px;
	}
	
	section#detail dl dt.salary {
		top: 210px;
	}
	
	section#detail dl dd.salary {
		top: 210px;
	}
	
	section#detail dl dt.time {
		top: 280px;
	}
	
	section#detail dl dd.time {
		top: 280px;
	}
	
	section#detail dl dt.holiday {
		top: 350px;
	}
	
	section#detail dl dd.holiday {
		top: 350px;
	}
	
	section#detail dl dt.station {
		top: 420px;
	}
	
	section#detail dl dd.station {
		top: 420px;
	}
	
	section#detail dl dt.place {
		top: 490px;
	}
	
	section#detail dl dd.place {
		top: 490px;
	}
	
	section#detail dl dt.hp {
		top: 560px;
	}
	
	section#detail dl dd.hp {
		top: 560px;
	}
	
	div.panel {
		width:450px;
		text-align:center;
		position:relative;
		margin: 40px auto 0;
	}
	
	button.job_entry {
		background:transparent;
		border-width:2px;
		border-style: solid;
		position:relative;
		margin:1em;
		display:inline-block;
		padding:0.5em 1em;
		transition:all 0.3s ease-in-out;
		text-align:center;
		font-weight:bold;
		font-size: 1.5rem;
		color:#f93;
		border-color:#f93;
	}
	
	button.job_entry:before, button.job_entry:after {
		content:'';
		display:block;
		position:absolute;
		box-sizing:border-box;
		border-style:solid;
		width:1em;
		height:1em;
		transition:all 0.3s ease-in-out;
		border-color:#f93;
	}
	
	button.job_entry:before {
		top:-6px;
		left:-6px;
		border-width:2px 0 0 2px;
		z-index:5;
	}
	
	button.job_entry:after {
		bottom:-6px;
		right:-6px;
		border-width:0 2px 2px 0;
	}
	
	button.job_entry:hover:before, button.job_entry:hover:after {
		width:calc(100% + 12px);
		height:calc(100% + 12px);
		border-color:#fff;
		border-color:#f93;
	}
	
	button.job_entry:hover {
		color:#fff;
		background-color:#f93;
		border-color:#f93;
	}
	
	img.middle {
		display: block;
		width: 732px;
		height: 480px;
		border: 6px solid #ccc;
		margin: 40px auto 0;
	}
	
	div#bottom {
		width: 732px;
		margin: 40px auto 0;
	}
	
	div#bottom h2 {
		position: relative;
		width: 732px;
		height: 103px;
		text-align: center;
		padding: 40px 30px;
		background: url("../img/detail/copy_bg.png") 0 0 no-repeat;
		z-index: 100;
	}
	
	div#bottom p {
		position: relative;
		width: 732px;
		top: -40px;
		padding: 65px 30px 30px;
		background: #ffe;
		z-index: 10;
	}
	
	div#bottom img {
		display: block;
		position: relative;
		width: 732px;
		height: 480px;
		border: 6px solid #ccc;
		margin: 15px auto 0;
	}
	
	a.back {
		display: block;
		width: 225px;
		height: 94px;
		text-indent: -999px;
		background: url("../img/detail/back.png") 0 0 no-repeat;
		margin: 40px auto 0;
	}
	
}

@media screen and (max-width:767px) {
	
	div.label {
		width: 90%;
		height: auto;
		margin: 0 auto;
	}
	
	div.label span {
		display: inline-block;
		color: #fff;
		text-align: center;
		padding: 1px 5px;
		border-radius: 3px;
		margin-right: 5px;
	}
	
	div.label span:first-child {
		color: #333;
		font-weight: bold;
	}
	
	div.label span.full {
		background: #6C3;
	}
	
	div.label span.nonregular {
		background: #99f;
	}
	
	div.label span.part {
		background: #F76665;
	}
	
	h1#job_title {
		width: 90%;
		height: auto;
		font-size: 1.5rem;
		margin: 10px auto;
	}
	
	div#top {
		width: 100%;
		height: auto;
		margin: 10px auto 0;
	}
	
	div#top img {
		display: block;
		width: 90%;
		height: auto;
		margin: 0 auto;
		border: 6px solid #ccc;
		z-index: 10;
	}
	
	div#top p {
		position: relative;
		width: 100%;
		height: auto;
		font-weight: bold;
		font-size: 1.5rem;
		text-align: center;
		margin-top: -40px;
		padding: 35px 20px;
		background: url("../img/detail/copy_bg_sp.png") center center no-repeat;
		background-size: 100% 100%;
		z-index: 100;
	}
	
	section#detail {
		width: 90%;
		height: auto;
		margin: 60px auto 0;
		background: #ffe;
	}
	
	section#detail h2 {
		position: relative;
		width: 141px;
		height: 56px;
		font-size: 2rem;
		color: #393;
		padding: 12px 30px;
		top: -28px;
		margin-left: auto;
		margin-right: auto;
		background: url("../img/detail/h2_bg.png") 0 0 no-repeat;
	}
	
	section#detail dl {
		padding: 0 15px 20px;
	}
	
	section#detail dl dt {
		position: relative;
		display: inline-block;
		padding: 5px 8px;
		color: #fff;
		width: 80px;
		text-align: center;
		background: #6c6;
		margin-top: 12px;
	}
	
	section#detail dl dt:first-child {
		margin-top: 0;
	}

	section#detail dl dt:before {
		content: "";
		position: absolute;
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border: 5px solid transparent;
		border-top: 10px solid #6c6;
	}
	
	section#detail dl dd {
		position: relative;
		padding: 10px 5px 8px;
		border-bottom: 3px dashed #ddd;
	}
	
	section#detail dl dd:last-child {
		border-bottom: none;
	}
	
	div.panel {
		width: 100%;
		text-align:center;
		position:relative;
		margin: 40px auto 0;
	}
	
	div#bottom {
		width: 100%;
		height: auto;
		margin: 40px auto 0;
	}
	
	div#bottom h2 {
		position: relative;
		width: 100%;
		height: auto;
		font-weight: bold;
		font-size: 1.5rem;
		text-align: center;
		padding: 35px 20px;
		background: url("../img/detail/copy_bg_sp.png") center center no-repeat;
		background-size: 100% 100%;
		z-index: 100;
	}
	
	div#bottom p {
		position: relative;
		width: 90%;
		margin-top: -40px;
		margin-left: auto;
		margin-right: auto;
		padding: 65px 20px 30px;
		background: #ffe;
		z-index: 10;
	}
	
	div#bottom img {
		display: block;
		width: 90%;
		height: auto;
		border: 6px solid #ccc;
		margin: 30px auto 0;
	}
	
	a.back {
		display: block;
		width: 225px;
		height: 94px;
		text-indent: -999px;
		background: url("../img/detail/back.png") 0 0 no-repeat;
		margin: 40px auto 0;
	}
}

/*border: 1px solid #333;*/