@charset "utf-8";

/* アンカーされている要素に余分なスクロールマージン設定 */
:target {
    scroll-margin-block: 280px;
}

.recruit {
    width: 90%;
    margin: 50px auto 0;
}

/*subpage__greeting*/
.subpage__greeting {
    padding: 0 0 50px;
    text-align: center;
    font-weight: bold;
    font-style: italic;
}
.subpage__greeting-title {
    margin-top: 10px;
    font-size: 18px;
	line-height: 1.6;
}
.subpage__greeting .img__area{
	padding: 0 50px;
}
.subpage__greeting .img__area figcaption{
	margin-top: 30px;
	font-size: 14px;
	text-align: center;
}
.text__area{
	margin-top: 40px;
	text-align: justify;
}
.text__area .read{
	font-size: 16px;
	font-weight: 600;
	line-height: 2;
}

@media (min-width: 1200px){
	.subpage__greeting{
		padding: 0;
	}
	.subpage__greeting-pretitle{
		font-size: 24px;
	}
	.subpage__greeting-title{
		font-size: 28px;
	}
}


/*recruit__navi*/
.recruit__navi{
	width: 90%;
    margin: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	flex-direction: column;
	gap: 18px 18px;
}
.recruit__naviItem{
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  line-height: 1.35;
  padding: 6px 0; 
}

/* 黒丸 */
.recruit__naviItem::before{
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #333;
    position: relative;
    flex: 0 0 24px;
}

/* 白矢印（CSSで描画） */
.recruit__naviItem::after{
	content:"";
	position:absolute;
	width:7px;
	height:7px;
	border-top:2px solid #fff;
	border-right:2px solid #fff;
	transform:rotate(45deg);
	margin-left: 7px;
}

.recruit__naviItem:hover{
	opacity: .75;
}

@media (min-width: 768px){
	.recruit__navi{
		flex-direction: row;
		justify-content: flex-start;
		gap: 26px 90px;
	}
	.recruit__naviItem{
		flex: 0 1 calc((100% - 170px) / 2);
	}
}

@media (min-width: 1200px){
	.recruit__navi{
		max-width: 1200px;
        margin: 90px auto 0;
		gap: 26px 90px;
	}
	.recruit__naviItem{
		flex: 0 1 calc((100% - 180px) / 3);
	}
}



/*recruit__info*/
.recruit__info{
	margin-top: 80px;
}
.recruit__date{
	margin-top: 20px;
	font-size: 12px;
	text-align: right;
}

/*recruit__detail */
.recruit__detail {
	margin-top: 30px;
}
.recruit__detail dl{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	line-height: 1.8;
}
.recruit__detail dt,
.recruit__detail dd{
	padding: 20px;
	border-bottom: 1px solid #666;
}
.recruit__detail dt{
	width: 30%;
	font-weight: 700;
}
.recruit__detail dd{
	width: 70%;
}


@media (min-width: 768px){
    .recruit {
        margin: 70px 30px 100px;
    }
	
	.recruit__greeting{
		display: flex;
		justify-content: center;
		align-items: flex-start;
		gap: 40px;
	}
	
	.recruit__greeting .img__area{
		width: 30%;
	}
	.recruit__greeting .text__area{
		width: 70%;
	}


	.recruit__greeting .img__area {
		padding: 0 ;
	}
	.text__area {
	}
	.recruit__greeting .img__area figcaption{
		text-align: left;
	}
	
	/*recruit__prace-inner*/
	.recruit__prace-inner{
		display: flex;
		flex-wrap: wrap;
		gap: 50px;
        justify-content: center;
	}
	.recruit__prace-osaka,
	.recruit__prace-wakayama,
	.recruit__prace-plant{
		width: 45%;
	}
}

@media (min-width: 1024px){
	
	.recruit__greeting .img__area{
		width: 25%;
	}
	.recruit__greeting .text__area{
		width: 75%;
	}

}

@media (min-width: 1200px){
	.recruit {
        max-width: 1200px;
        width: 100%;
        margin: 100px auto;
        padding: 0;
    }
	
	.recruit__info{
		max-width: 1200px;
        margin: 90px auto 0;
	}
	.recruit__greeting{
		width: 80%;
		margin: auto;
		gap: 80px;
	}
	.recruit__greeting .img__area{
		padding: 0 ;
	}
	.recruit__greeting .text__area{
	}

	/*recruit__detail*/
	.recruit__detail {
		margin-top: 50px;
		padding: 0 100px;
		font-size: 14px;
		line-height: 2;
	}
	.recruit__detail ul li{
		margin-bottom: 20px;
	}
	.recruit__detail dt,
	.recruit__detail dd {
		padding: 20px;
		border-bottom: 1px solid #666;
	}
}


/*recruit__apply*/
.recruit__apply {
    width: 90%;
    margin: 50px auto;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.recruit__apply-btn {
    width: 420px;
    height: 50px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    background: linear-gradient(
		to bottom,
		#3b86c8 0%,
		#2f74b2 50%,
		#2a69a3 100%
	);
    box-shadow: 2px 3px 0 rgba(0,0,0,.18);
    transition: .2s ease;
}
.recruit__apply-btn:hover{
	opacity: .75;
}

@media (min-width: 1200px){
	.recruit__apply-btn {
		width: 360px;
		height: 60px;
	}
}



/*recruit__message*/
.recruit__message {
	margin-top: 100px;
/*	padding: 0 100px;*/
}
@media (min-width: 1200px){
	.recruit__message {
		margin-top: 100px;
		padding: 0 100px;
		font-size: 14px;
		line-height: 2;
	}
}