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

/* ------------------------------
メイン画像とヘッダーを重ねない場合の調整
------------------------------ */
.mainv img {
	height: calc(100vh - 140px);
}

/* ------------------------------
メイン画像
簡易検索のセレクトボックス・ボタンを丸みのあるデザインに
------------------------------ */
.mainv_form_select select {
	padding: 10px 30px 10px 20px;
	border: 1px solid #ddd;
	border-radius: 100px;
}

.mainv_form_select:after {
	right: 15px;
	pointer-events: none;
}

.mainv_form_btn {
	padding: 11px;
	border-radius: 100px;
}

/* ------------------------------
メイン画像PC
簡易検索をボックス型に変更
------------------------------ */
@media (min-width:768px){
	.mainv_bottom {
		top: 50%;
		transform: translateY(-50%);
		left: 10%;
		width: 30%;
		border-radius: 0.5rem;
		overflow: hidden;
		background: rgba(255,255,255,0.9);
		box-shadow: 0 0 10px rgb(0 0 0 / 10%);
	}

	.mainv_bottom::before {
		content: "かんたん求人検索";
		display: block;
		width: 100%;
		padding: 20px 10px;
		/*background: linear-gradient(90deg, #EBF4FF, #D5EDF1);*/
		background: var(--main-color-light);
		font-size: 20px;
		font-weight: bold;
		color: var(--main-color);
		text-align: center;
	}

	.mainv_form {
		flex-direction: column;
		gap: 20px;
		padding: 30px;
	}
	
	.mainv_form_select,
	.mainv_form_btn {
		margin: 0;
		align-self: stretch;
	}
		
	.mainv_form_select select {
		width: 100%;
		cursor: pointer;
	}
	
	.mainv_form_x {
		display: none;
	}	
	
	.mainv_form_btn {
		width: 100%;
		transition: all .3s;
	}
	
	.mainv_form_btn:hover {
		opacity: 0.8;
	}
}

/* ------------------------------
メイン画像SP
高さを画面いっぱいにしない
------------------------------ */
@media screen and (max-width:767px){
	.mainv img {
		height: auto;
	}
	
	/*簡易検索*/
	.mainv_bottom {
		position: static;
		margin-top: 20px;
	}
	
	.mainv_form {
		padding: 15px;
		background: #f9f9f9;
		border: 1px solid #eee;
	}
	
	.mainv_form_btn {
		margin-top: 15px;
	}
}

/* ------------------------------
メイン画像　バナー
------------------------------ */
.mainv_bottom_bnr img {
	display: block;
	width: 100%;
}

@media (min-width:768px){
	.mainv_bottom {
		width: 500px;
		max-width: 40%;
	}

	.mainv_bottom_bnr {
		padding: 10px 30px 30px;
	}
}

@media (min-width: 768px) and (max-width: 1200px) {
	.mainv_bottom {
		left: 5%;
	}
	
	.mainv_form {
		padding: 20px;
	}
	
	.mainv_bottom_bnr {
		padding: 10px 20px 20px;
	}
}

@media screen and (max-width:767px){
	.mainv_bottom_bnr {
		margin-top: 20px;
	}
}

/* ------------------------------
求人スライダー
画像と文字を縦並びに変更
------------------------------ */
.joblist .imgtext {
	flex-direction: column;
	gap: 15px;
}

.joblist .imgtext > p {
	width: 100%;
}

.joblist .imgtext > p + * {
	padding-left: 0;
}

/* ------------------------------
アイコン付きの見出し
シンプルな線の見出しに変更
------------------------------ */
.title_icon {
	padding: .2em .6em !important;
	border-left: .3em solid var(--main-color) !important;
}

.title_icon:before {
	display: none;
}

/* ------------------------------
ページ最上部に線
------------------------------ */
.header_wrap::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 4px;
	background: var(--main-color);
	z-index: 999999;
}