@charset "UTF-8";
/* ------------------------------
 高専生の働き方
------------------------------ */
.pickupBox {
	position: relative;
	box-shadow: rgba(0, 50, 90, 0.1) 0 0 18px;
  	border-radius: 10px;
}
.pickupBox .cms_text h3 strong {
	font-size: 5.2rem;
	color: #004da0;
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	display: inline-block;
	margin-right: 20px;
  	vertical-align: -8px;
	line-height: 1;
}
.workstyleLink {
	box-shadow: rgba(0, 50, 90, 0.1) 0 0 18px;
	border-radius: 10px;
	margin: 0 auto;
}
.workstyleLink a {
	text-decoration: none !important;
}
.workstyleLink a p {
	position: relative;
	color: #1a1a1a;
	bottom: 0;
	padding: 0 32px 0 25px;
	width: fit-content;
	line-height: 1;
	font-size: 1.7rem;
	font-weight: bold;
}
.workstyleLink a p::before {
	display: block;
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 25px;
  	height: 25px;
	background: #004da0;
	border-radius: 50%;
}
.workstyleLink a p::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 10px;
	width: 4px;
  	height: 4px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}
.workstyleLink a {
	display: flex;
	align-items: center;
}
.workstyleLink img {
	width: 230px;
	border-radius: 10px 0 0 10px;
}
/* ------------------------------
 高専生の働き方（PC）
------------------------------ */
@media screen and (min-width: 768px) {
	.pickupBox {
		display: flex;
		justify-content: space-between;
	}
	.pickupBox .cms_image {
		width: 546px;
		margin-bottom: 0;
	}
	.pickupBox .cms_image img {
		border-radius: 10px 0 0 10px;
	}
	.pickupBox .cms_text {
		width: 500px;
		padding: 50px 0;
	}
	.workstyleLink {
		width: 546px;
	}
}
/* ------------------------------
 高専生の働き方（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.pickupBox .cms_image {
		margin-bottom: 0;
	}
	.pickupBox .cms_image img {
		border-radius: 10px 10px 0 0;
	}
	.pickupBox .cms_text {
		padding: 20px 5% 30px;
	}
	.pickupBox .cms_text h3 strong {
		font-size: 2.3rem;
		margin-right: 10px;
    	vertical-align: -2px;
	}
	.workstyleLink a p {
		padding: 5px 28px 5px 15px;
		width: 100%;
		font-size: 1.5rem;
		margin-right: 5%;
	}
	.workstyleLink img {
		width: 150px;
	}
}
/* ------------------------------
 選考プロセス
------------------------------ */
.processBox {
	position: relative;
	box-shadow: rgba(0, 50, 90, 0.1) 0 0 18px;
  	border-radius: 10px;
	padding: 55px;
}
.processBox .cms_image img {
	border-radius: 10px;
}
.processBox h3 {
	color: #004da0;
	margin-top: 10px;
}
.processBox h3 .emphasis {
	font-size: 3.4rem;
}
.processBox::after {
	display: none;
}
.processBox.arrow_down::after {
	position: absolute;
	content: "";
	display: block;
	width: 30px;
	height: 17px;
	margin: auto;
	background: url("../img/icon_flow_arrow.svg") 0px 0px / cover no-repeat;
	left: 0;
	right: 0;
	bottom: -54px;
}
/* ------------------------------
 選考プロセス（PC）
------------------------------ */
@media screen and (min-width: 768px) {
	.processBox {
		display: flex;
		justify-content: space-between;
	}
	.processBox .cms_image {
		width: 300px;
		margin-bottom: 0;
	}
	.processBox .cms_text {
		width: 670px;
	}
	.processBox h3 .emphasis {
		vertical-align: -4px;
	}
}
/* ------------------------------
 選考プロセス（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.processBox {
		padding: 40px 5%;
	}
	.processBox h3 {
		text-indent: -2.4em;
    	margin-left: 2.4em;
	}
	.processBox h3 .emphasis {
		font-size: 2.4rem;
		vertical-align: -2px;
	}
	.processBox.arrow_down::after {
		bottom: -34px;
	}
	.processBox .cms_image {
		width: 100%;
		text-align: center;
	}
	.processBox .cms_image img {
		width: 280px;
	}
}
/* ------------------------------
 よくあるご質問
------------------------------ */
.cms_text.toggle {
	position: relative;
	margin-bottom: 15px;
	padding: 25px 80px 25px;
	border-radius: 10px;
	background-color: #edf3f8;
	color: #004da0;
	font-size: 1.8rem;
	font-weight: bold;
	cursor: pointer;
}
.cms_text.toggle::before {
	content: "";
	display: block;
	position: absolute;
	right: 36px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 2px;
	height: 18px;
	background-color: #004da0;
}
.cms_text.toggle::after {
	content: "";
	display: block;
	position: absolute;
	right: 28px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 18px;
	height: 2px;
	background-color: #004da0;
}
.cms_text.toggle.is-open::before {
	display: none;
}
.cms_text.toggle p::before {
	content:"Q";
	display: block;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #fff;
	color: #004da0;
	font-family: "Poppins", sans-serif;
	font-size: 2.2rem;
	line-height: 42px;
	font-weight: 600;
	text-align: center;
}
.cms_text.toggleContents {
	display: none;
	position: relative;
	margin-bottom: 0;
	padding: 8px 25px 50px 80px;
}
.cms_text.toggleContents p {
	position: relative;
	padding-top: 6px;
}
.cms_text.toggleContents p::before {
	content:"A";
	display: block;
	position: absolute;
	top: 0;
  	left: -60px;
	color: #fff;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #004da0;
	font-family: "Poppins", sans-serif;
	font-size: 2.2rem;
	line-height: 42px;
	font-weight: 600;
	text-align: center;
}
.cms_text.toggleContents p a {
	display: inline-block;
	margin-top: 5px;
	font-weight: bold;
}
.cms_text.toggleContents p a::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	background: url(/shared/img/icon_arrow_circle.svg) no-repeat right top / cover;
	vertical-align: -3px;
}
/* ------------------------------
 よくあるご質問（SP）
------------------------------ */
@media screen and (max-width: 767px) {
	.cms_text.toggle {
		margin-bottom: 10px;
		padding: 17px 41px 17px 50px;
		font-size: 1.6rem;
	}
	.cms_text.toggle::before {
		right: 22px;
		width: 2px;
		height: 16px;
	}
	.cms_text.toggle::after {
		right: 15px;
		width: 16px;
		height: 2px;
	}
	.cms_text.toggle p:before {
		top: 15px;
		left: 10px;
		width: 30px;
		height: 30px;
		font-size: 1.8rem;
		line-height: 30px;
	}
	.cms_text.toggleContents {
		padding: 0 15px 30px 50px;
	}
	.cms_text.toggleContents p:before {
		top: 4px;
    	left: -40px;
		width: 30px;
		height: 30px;
		font-size: 1.8rem;
		line-height: 30px;
	}
	
}
/* ------------------------------
 キャリア採用募集職種一覧
------------------------------ */
.searchBlock {
	box-shadow: rgba(0, 50, 90, 0.1) 0 0 18px;
	padding: 65px 75px;
	border-radius: 10px;
	margin-bottom: 110px;
}
.searchBlock h2 {
	padding-left: 36px;
	padding-bottom: 0;
}
.searchBlock h2::before {
	display: none;
}
.searchBlock h2::after {
	top: 7px;
	left: 0;
	width: 27px;
	height: 27px;
	background: url('../img/icon_search.svg') no-repeat center center;
}
.searchBlock ul {
	border-top: solid 1px #cddbe0;
	margin-bottom: 60px;
}
.searchBlock ul li {
    padding: 35px 0;
    border-bottom: solid 1px #cddbe0;
}
.searchBlock ul li .title {
    width: 120px;
    font-size: 1.8rem;
    font-weight: bold;
}
.searchBlock ul li .selectItem {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 45px;
}
/* 検索ボタン */
.searchBlock button.btn-a {
    width: 100%;
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    padding: 10px;
    background-color: #004da0;
	color: #fff;
    cursor: pointer;
    transition: 0.3s ease-in-out;
    z-index: 1;
	border-radius: 6px;
}
/* 選択解除ボタン */
.searchBlock button.btn-b {
    position: relative;
    display: inline-block;
    font-size: 1.6rem;
    color: #fff;
    font-weight: bold;
    background-color: #b1bbc3;
    padding: 8px 25px;
	border-radius: 6px;
    cursor: pointer;
}
/* 検索結果一覧 */
.naviBlock > .navi:first-child {
	border-top: solid 1px #cddbe0;
}
.naviBlock > .navi {
	width: 100%;
	border-bottom: solid 1px #cddbe0;
}
.naviBlock > .navi > a {
	color: #000;
	text-decoration: none;
	position: relative;
	padding: 30px 45px 30px 20px;
	justify-content: space-between;
    flex-flow: row;
    align-items: center;
}
.naviBlock > .navi > a::after {
	position: absolute;
	display: block;
	content: "";
	height: 22px;
	width: 25px;
	background: url(../img/icon_arrow.svg) no-repeat center center / 25px 22px;
	top: 0;
	bottom: 0;
	right: 15px;
	margin: auto;
}
.naviBlock .title, .naviBlock p.cms_link.navi a {
	font-size: 2.2rem;
	font-weight: bold;
}
.naviBlock > .navi > a > .mapLink {
   	background: url(../img/icon_map.svg) no-repeat top 2px left / 15px 20px;
	padding-left: 22px;
	line-height: 1.5;
}
.navicate {
    width: 114px;
	height: 30px;
	margin: 0 20px 0 0;
	background-color: #004da0;
	color: #fff;
	border-radius: 3px;
	line-height: 30px;
	text-align: center;
	font-weight: bold;
}
/* キャリア採用募集職種一覧（PC） */
@media screen and (min-width: 768px) {
    .searchBlock h2 {
        font-size: 2.9rem;
    }
	.searchBlock ul li {
        display: flex;
    }
    .searchBlock ul li .title {
       	width: 240px;
    }
    .searchBlock ul li .selectItem {
        width: calc(100% - 200px);
    }
    /* -- ボタン -- */
    .btnBox {
        position: relative;
        min-height: 42px;
    }
    /* 検索ボタン */
    .searchBlock button.btn-a {
        width: 300px;
        height: 54px;
		transition: .3s ease-in-out;
    }
	.searchBlock button.btn-a:hover,
    .searchBlock button.btn-a:focus {
		opacity: .7;
	}
    /* 選択解除ボタン */
    .searchBlock button.btn-b {
        position: absolute;
        width: 160px;
        height: 45px;
        left: 0;
        bottom: 0;
		transition: .3s ease-in-out;
    }
	.searchBlock button.btn-b:hover {
        opacity: .7;
    }
	/* 検索結果一覧 */
	.naviBlock > .navi, .naviBlock > .navi > a {
		width: 100%;
		display: flex;
	}
	.naviBlock > .navi > a > div {
        display: flex;
        align-items: center;
    }
	.naviBlock > .navi > a > .mapLink {
        width: 180px;
    }
	/* hover */
	.naviBlock a:hover, .naviBlock a:focus {
		opacity: 1;
		background-color: #e6f2fa;
	}
}
/* キャリア採用募集職種一覧（SP） */
@media screen and (max-width: 767px) {
	.searchBlock {
		padding: 30px 6% 40px;
		margin-bottom: 70px;
	}
	.searchBlock h2 {
		padding-left: 30px;
		margin-bottom: 20px;
	}
	.searchBlock h2::after {
		top: 5px;
		width: 20px;
		height: 20px;
		background: url('../img/icon_search.svg') no-repeat center center;
		background-size: cover;
	}
	.searchBlock ul {
		margin-bottom: 40px;
	}
	.searchBlock ul li {
		padding: 20px 0;
	}
	.searchBlock ul li .title {
        margin-bottom: 10px;
		width: 100%;
		font-size: 1.7rem;
    }
    .searchBlock ul li .selectItem {
        gap: 0 20px;
    }
    /* 選択解除ボタン */
	.btnBox {
		display: flex;
		flex-direction: column-reverse;
	}
    .searchBlock button.btn-b {
		width: 130px;
		margin-top: 30px;
		margin-right: auto;
		padding: 6px 10px;
    }
	/* 検索結果一覧 */
	.naviBlock > .navi + p.cms_link.navi {
		margin-top: 0 !important;
	}
	.naviBlock > .navi a {
		display: block !important;
		padding: 25px 25px 20px 0;
	}
	.naviBlock > .navi > a::after {
		height: 16px;
		width: 19px;
		background: url(../img/icon_arrow.svg) no-repeat center center / 19px 16px;
		right: 0;
	}
	.naviBlock .title {
		font-size: 2rem;
		margin-bottom: 5px;
	}
	.naviBlock p.cms_link.navi a {
		font-size: 1.8rem;
	}
	.navicate {
		width: 100px;
        margin-bottom: 5px;
		font-size: 1.2rem;
		height: 20px;
		line-height: 20px;
    }
}

/* ------------------------------
 キャリア採用募集職種 詳細ページ
------------------------------ */
.detail {
	margin-top: 200px;
}
/* キャリア採用募集職種一覧（SP） */
@media screen and (max-width: 767px) {
	.detail {
		margin-top: 100px;
	}
}
/* ------------------------------
 フォーム
------------------------------ */
input[type='text'],
input[type='number'],
input[type='tel'],
input[type='email'],
input[type='password'],
textarea {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 10px 15px;
	background: #f2f2f2;
	color: #1a1a1a;
	text-align: left;
	vertical-align: middle;
	border-radius: 6px;
}
label {
	display: inline-block;
	position: relative;
	cursor: pointer;
}
input[type='text']:focus-visible,
input[type='number']:focus-visible,
input[type='tel']:focus-visible,
input[type='email']:focus-visible,
textarea:focus-visible {
	outline: 2px solid #333;
	outline-offset: -2px;
}
input[type='text']:disabled,
input[type='number']:disabled,
input[type='tel']:disabled,
input[type='email']:disabled,
textarea:disabled {
	background-color: #edf3f8;
	cursor: default;
}
/* ラジオボタン */
input[type=radio] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	top: 8px;
}
input[type=radio] + span {
	display: inline-block;
	position: relative;
	top: 4px;
	width: 19px;
	height: 19px;
	margin-right: .5em;
	border: 1px solid #cddbe0;
	border-radius: 50%;
	background-color: #edf3f8;
}
input[type=radio] + span::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 9px;
	height: 9px;
	border-radius: 100%;
	background-color: transparent;
	margin: auto;
}
input[type=radio]:checked + span:before {
	background-color: #004da0;
}
input[type=radio]:focus-visible {
	outline: 0;
}
input[type=radio]:focus-visible + span {
	outline: 2px solid #333;
	outline-offset: -2px;
}
/* チェックボックス */
input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: absolute;
	top: 8px;
}
input[type=checkbox] + span {
	display: inline-block;
	position: relative;
	top: 3px;
	width: 18px;
	height: 18px;
	margin-right: .5em;
	background-color: #edf3f8;
	border: 1px solid #cddbe0;
	border-radius: 3px;
}
input[type=checkbox] + span::before {
	content: "";
	display: block;
	position: absolute;
	top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
	margin: auto;
}
input[type=checkbox]:checked + span::before {
	background: #004da0;
}
input[type=checkbox]:focus-visible {
	outline: 0;
}
input[type=checkbox]:focus-visible + span {
	outline: 2px solid #333;
	outline-offset: -2px;
}
/* プルダウン */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	position: relative;
	width: auto;
	padding: 10px 40px 10px 15px;
	background: #f2f2f2 url(../img/icon_select.svg) no-repeat right center / 32px 50px;
	color: #1a1a1a;
	border-radius: 6px;
	width: 200px;
}
select:focus {
	outline: 2px solid #333;
	outline-offset: -2px;
}
.ymd {
	display: inline-block;
	margin: 0 1.2em 0 .8em;
	vertical-align: text-top;
	font-size: 1.7rem;
}
input[type='text'].zip {
	width: 178px;
}
.contents button.zip_search {
	width: 86px;
	height: 32px;
	border-radius: 16px;
	background-color: #004da0;
	color: #fff;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 32px;
	margin-left: 10px;
}
.form span.req,
.form span.any {
	display: inline-block;
	width: 44px;
	height: 20px;
	margin: 0 10px 3px 0;
	border-radius: 10px;
	color: #fff;
	font-size: 1.3rem;
	line-height: 20px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}
.req {
	background: #ed1c24;
}
.any {
	background-color: #798d95;
}
.label-text {
    display: inline-block;
  	vertical-align: top;
}
.label-text small {
    display: block;
	font-size: 1.5rem;
	font-weight: normal;
}
.contents .btn_inq {
	display: inline-block;
	position: relative;
	min-width: 350px;
	padding: 12px 40px 12px 25px;
	border-radius: 7px;
	background: #004da0;
	font-size: 2rem;
	font-weight: 600;
	text-align: left;
	text-decoration: none;
	color: #fff;
	transition: opacity .3s ease-in-out;
	cursor: pointer;
}
.contents .btn_inq::after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 20px;
	width: 8px;
	height: 8px;
	margin: auto 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
}
.contents .btn_inq:disabled {
	opacity: .7;
    cursor: auto;
}
.contents .btn-back {
	display: block;
	min-width: 80px;
	height: 40px;
	font-size: 1.6rem;
	color: #fff;
	font-weight: bold;
	background-color: #b1bbc3;
	border-radius: 6px;
	cursor: pointer;
}
.form table {
	border-top: none !important;
}
.form table th,
.form table td {
    border-bottom: none !important;
}
.contents .btn_form .btn_inq {
	text-align: center;
	padding: 12px 25px;
}
/* フォーム（PC） */
@media screen and (min-width: 768px) {
	.form table th {
		width: 18%;
	}
	.ymd {
		height: 48px;
		line-height: 48px;
	}
	.contents .btn_inq:hover {
		opacity: .7;
	}
	.contents .btn-back {
		float: left;
		margin-top: -50px;
	}
	.contents .btn-back:hover {
		opacity: .7;
	}
	.btn_form {
		position: relative;
	}
	.btn_form .fr {
		float: none;
	}
}
/* フォーム（SP） */
@media screen and (max-width: 767px) {
	input[type='text'],
	input[type='number'],
	input[type='tel'],
	input[type='email'],
	input[type='password'],
	textarea {
		padding: 5px 12px;
	}
	select {
		padding: 5px 40px 5px 15px;
		background: #f2f2f2 url(../img/icon_select.svg) no-repeat right center / 32px 50px;
		width: 200px;
	}
	.ymd {
		margin-bottom: 10px;
	}
	.label-text small {
		display: inline-block;
	}
	.contents .btn_inq {
		min-width: 100%;
		font-size: 1.8rem;
	}
	.contents .btn-back {
		display: inline-block;
		margin-top: 10px;
	}
	.btn_form .fl {
		text-align: left;
	}
}