@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//カラー指定
$color-main:#50626D;



#header-img{
	background: url(../img/03header.jpg) center / cover no-repeat;
	margin-bottom: 0;
}

#job-type,#welfare,#interview,#job-description{
	padding-top: 76px;
	margin-top: -76px;
	@include md{
		padding-top: 65px;
		margin-top: -65px;
	}
}

#challenge{
//	background-color: #ebebeb;
//	background-image: url("../img/03challenge100.png") right / cover no-repeat;
	background: #ebebeb url("../img/03challenge100.png") no-repeat;
	background-size: contain;
	background-position: right;
	@include sm{
		background-image: none;
	}
	.container .row>div{
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	h5{
		padding-bottom: 3rem;
		font-family: "Oswald", sans-serif;
		font-size: 7rem;
		line-height: 1;
		color: $color-main;
		@include xs{font-size: 5rem;}
		span{
			color: #c2979d;
		}
	}
	p{
		color: $color-main;
		span{
			font-weight: 650;
		}
	}
	.sm-img{
		display: none;
		@include sm{
			display: inline;
		}
	}
}

#challenge,#job-type,#welfare,#interview,#job-description{
	margin-bottom: 7rem;
	h3{
		font-family: "Oswald", sans-serif;
		font-optical-sizing: auto;
		font-weight: 600;
		font-style: normal;
		font-size: 45px;
		font-size: 4.5rem;
		color: $color-main;
		margin-bottom: 3rem;
		span{
			font-weight: 300;
			display: block;
			font-size: 16px;
			font-size: 1.6rem;
		}
	}
}

#job-type{
	margin-bottom: 14rem;
	@include xs{margin-bottom: 10rem;}
	.col-md-5{
		padding-left: 3rem;
	}
	h4{
		position: relative;
		color: $color-main;
		font-size: 25px;
		font-size: 2.5rem;
		margin-bottom: 4rem;
		margin-top: 0.5rem;
		&::after{
			position: absolute;
			left: 0;
			bottom: -2rem;
			content: "";
			width: 100%;
			height: 2px;
			background: linear-gradient(90deg, rgba(80,98,109,1) 0%, rgba(80,98,109,1) 25%, rgba(219,220,220,1) 25%, rgba(219,220,220,1) 100%);
		}
	}
	@include sm{
		.job-type-text{
			padding-left: 15px;
			margin-top: 1.5rem;
		}
	}
}

#welfare{
	background-color: #f4f4f4;
	padding-bottom: 3rem;
	.row{
		margin-left: -30px;
		margin-right: -30px;
		@include xs{
			margin-left: -15px;
			margin-right: -15px;
		}
		div{
			padding-left: 30px;
			padding-right: 30px;
			margin-bottom: 50px;
			@include sm{
				margin-bottom: 30px;
			}
			@include xs{
				padding-left: 15px;
				padding-right: 15px;
			}
			h5{
			padding-top: 1.7rem;
			padding-bottom: 0.9rem;
			font-size: 1.9rem;
			font-weight: 600;
			}
		}
	}
}

#interview{
	.no-container{
		display: flex;
		margin-top: 5rem;
		margin-bottom: 3rem;
		padding-bottom: 2.5rem;
		background: linear-gradient(90deg, white 0%, white 60%, #ebebeb 60%, #ebebeb 100%);
		@include sm{
			display: inline;
		}
		.profile-image{
			width: 65%;
			margin-top: -3rem;
			@include sm{
				width: 100%;
				margin-top: 0;
			}
			img{
//				height: 100%;
				object-fit: cover;
				@include sm{height: 300px;}
				@include xs{height: 250px;}
			}
		}
		.profile{
			width: 35%;
			padding: 7rem 10rem 7rem 7rem;
			position: relative;
			@include md{
				padding: 7rem 4rem;
			}
			@include sm{
				width: 100%;
				background-color: #ebebeb;
				text-align: center;
				padding: 4rem 0;
			}
			@include xs{padding: 3rem 5rem;}
			.career{
				font-size: 1.8rem;
				font-weight: 600;
				position: relative;
				margin-bottom: 2.5rem;
				@include sm{text-align: center;}
				&::after{
					position: absolute;
					left: 0;
					bottom: -0.8rem;
					content: "";
					width: 100%;
					height: 0.7px;
					background: #000;
				}
			}
			h5{
				font-size: 2.5rem;
				font-weight: 600;
				line-height: 1.05;
				position: absolute;
				top: 50%;
				left: 40%;
				transform: translate(-50%, -50%);
				@include sm{
					position: inherit;
					transform: none;
					top: 0;
					left: 0;
				}
				span{
					font-size: 1.5rem;
					font-weight: 400;
				}
//				&::after{
//					position: absolute;
//					left: 0;
//					bottom: -1.7rem;
//					content: "";
//					width: 100%;
//					height: 0.7px;
//					background: #000;
//				}
			}
			p{@include sm{text-align: center;}}
		}
	}
	.container{
		.interview-1>.row,.interview-2>.row{
			margin-bottom: 5rem;
			@include sm{margin-bottom: 4rem;}
			@include xs{margin-bottom: 3rem;}
		}
		.interview-1{
			margin-bottom: 14rem;
			@include xs{margin-bottom: 7rem;}
		}
		.reverse{
			@include sm{
				flex-direction: column-reverse;
			}
		}
		.interview-text-right{
			padding-left: 5rem;
			@include sm{
				padding-left: 15px;
				margin-top: 2rem;
			}
		}
		.interview-text-left{
			padding-right: 5rem;
			@include sm{
				padding-right: 15px;
				margin-top: 2rem;
			}
		}
		h6{
			font-size: 2rem;
			font-weight: 600;
			line-height: 1.5em;
   			margin-bottom: 1rem;
		}
	}
}

#job-description{
	h3{
		padding-top: 1.5rem;
		@include xs{line-height: 1em;}
	} 
	h5{
		margin-bottom: 15px;
		font-weight: 600;
		font-size: 2.3rem;
		color: $color-main;
	}
	table{
		width: 100%;
		tr{
			th{
				border-bottom: solid 1px #1a1a1a;
				padding: 1rem 2rem;
				vertical-align: top;
				font-weight: 400;
				@include xs{
					padding: 1rem 0.5rem;
					width: 30%;
				}
			}
			td{
				border-bottom: solid 1px #c8c8c8;
				padding: 1rem 2rem;
				@include xs{padding: 1rem 0.5rem;}
			}
		}
	}
}

#form{
	.row{
			.form-button{
			margin: 0 auto;
			margin-bottom: 10rem;
			
				a{
					display: flex;
					justify-content: space-between;
					padding: 3rem 5rem 3rem;
					background-image: linear-gradient(90deg, rgba(80, 98, 109, 1), rgba(164, 179, 185, 1));
					transition : 0.3s;
					@include xs{
						padding: 2rem;
					}
					p{
						color: white;
						font-weight: 600;
						font-size: 2.2rem;
						line-height: 1.5;
						margin-bottom: 0;
						vertical-align: middle;
						@include xs{
							font-size: 1.5rem;
							padding-right: 1.5rem;
						}
					}
					img{
						width: 50px;
						@include xs{width: 35px;}
					}
				}
				a:hover{
					padding-right: 4rem;
					transition : 0.3s;
					@include xs{
						padding-right: 1.5rem;
					}
				}
				
			}
		
	}
	
}