@charset "UTF-8";

/* ===================================================================
メインビジュアル
=================================================================== */

.vacancy .vacancy-mv-inner {
	position: relative;
	background: url(../../images/vacancy/mv.png) 50% 50% / cover no-repeat, transparent;
}

.vacancy .vacancy-title {
    max-width: 600px;
    padding: 180px 0 90px;
}

.vacancy .vacancy-banner {
	position: absolute;
	max-width: 200px;
    bottom: -40px;
	right: 0;
}

.vacancy .vacancy-detail {
	padding: 40px 0;
	color: #fff;
	background: rgba(0, 47, 87, .3);
}

.vacancy .vacancy-detail .comment {
	margin: 0;
	line-height: 1.8;
	text-align: left;
}

.vacancy .vacancy-detail .comment span.attention {
	color: #e50012;
}

.vacancy .vacancy-detail .comment span.attention a {
	color: #004da7;
}

.vacancy .vacancy-detail .comment span.attention a:hover {
	text-decoration: underline;
}

/* ===================================================================
タブ切り替え部分
=================================================================== */

.vacancy .linkbox {
    position: relative;
    padding: 60px 0 0;
    z-index: 10;
}

/* title
--------------------*/

.vacancy .vacancy-list-title {
    position: relative;
    margin: 0 0 30px;
    padding: 0 0 0 45px;
}

.vacancy .vacancy-list-title h2 {
    display: inline-block;
    font-size: 24px;
}

.vacancy .vacancy-list-title.morning h2 {
    color: #ff8e00;
    border-bottom: 2px solid #ff8e00;
}

.vacancy .vacancy-list-title.night h2 {
    color: #004da7;
    border-bottom: 2px solid #004da7;
}

.vacancy .vacancy-list-title:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: 0;
    width: 30px;
    height: 30px;
}

.vacancy .vacancy-list-title.morning:before {
    background: url(../../images/vacancy/title_icon_1.png) 50% 50% / contain no-repeat, transparent;
}

.vacancy .vacancy-list-title.night:before {
    background: url(../../images/vacancy/title_icon_2.png) 50% 50% / contain no-repeat, transparent;
}

/* linkbox
--------------------*/

.vacancy .linkbox .lbox {
	margin: 0 0 30px;
}

.vacancy .linkbox .lbox ul {
	display: flex;
	/* justify-content: space-between; */
}

.vacancy .linkbox .lbox ul li {
    width: 19%;
	height: 70px;
	text-align: center;
}

.vacancy .linkbox .lbox.mo ul li {
	color: #ff8e00;
	border: 2px solid #ff8e00;
}

.vacancy .linkbox .lbox.ni ul li {
	color: #004da7;
	border: 2px solid #004da7;
}

.vacancy .linkbox .lbox li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 22px;
	font-weight: bold;
	cursor: pointer;
}

/* linkbox 色付け
--------------------*/

.vacancy .linkbox .lbox.mo ul li.active {
	color: #fff;
	background: #ff8e00;
}

.vacancy .linkbox .lbox.ni ul li.active {
	color: #fff;
	background: #004da7;
}

/* ===================================================================
見出し
=================================================================== */

.vacancy .title02 {
	display: flex;
	align-items: center;
    margin: -120px 0 20px;
    padding: 120px 0 0;
}

.vacancy .title02 .title02-catch {
	width: 18px;
	height: 18px;
	background: #414141;
	border-radius: 50%;
}

.vacancy .title02 h2 {
	margin: 0 0 0 5px;
	border-bottom: 2px solid #414141;
	font-size: 18px;
	font-weight: bold;
	color: #414141;
}

.vacancy .title02 h2 span {
	font-size: 14px;
}

/* ===================================================================
注意事項
=================================================================== */

.vacancy p.attention {
	color: #484848;
	/* color: #898989; */
	font-size: 14px;
	margin: 0 0 30px;
}

/* ===================================================================
テーブル
=================================================================== */

.vacancy table {
	width: 100%;
    border-collapse: separate;
    border-spacing: 3px;
}

/* 項目上部
--------------------*/

.vacancy table th {
	padding: 5px 3px;
	text-align: center;
	vertical-align: middle;
	color: #fff;
	font-size: 16px;
	background: #b4b4b4;
}

.vacancy table th:nth-child(1) {
	width: 5%;
}
.vacancy table th:nth-child(2) {
	width: 30%;
}
.vacancy table th:nth-child(3) {
	width: 15%;
}
.vacancy table th:nth-child(4) {
	width: 10%;
}
.vacancy table th:nth-child(5) {
	width: 10%;
}
.vacancy table th:nth-child(6) {
	width: 10%;
}
.vacancy table th:nth-child(7),
.vacancy table td:nth-child(7) {
	display: none;
	width: 0;
}
.vacancy table th:nth-child(8) {
	width: 20%;
}

/* 項目上部 上下矢印部分
--------------------*/

.vacancy table th div span:nth-child(1) {
	display: flex;
	justify-content: center;
	align-items: center;
    height: 50px;
}

.vacancy table th div span.arrow {
	display: block;
	height: 30px;
	width: 90px;
	margin: 0 auto;
	background: url(../../images/vacancy/arrow_nr.png) 50% 50% / contain no-repeat, transparent;
}

.vacancy table th div span.arrow.ro {
	background: url(../../images/vacancy/arrow_ro.png) 50% 50% / contain no-repeat, transparent;
}

.vacancy table th div span.arrow.lo {
	background: url(../../images/vacancy/arrow_lo.png) 50% 50% / contain no-repeat, transparent;
}

/* 項目下部
--------------------*/

.vacancy table td {
    padding: 5px;
    vertical-align: middle;
		color: #484848;
    /* color: #898989; */
    background: #ededed;
}

.vacancy table tr:nth-child(odd) td {
    background: #ecf4fd;
}

.vacancy table td:nth-child(1),
.vacancy table td:nth-child(3),
.vacancy table td:nth-child(4),
.vacancy table td:nth-child(5),
.vacancy table td:nth-child(6),
.vacancy table td:nth-child(7),
.vacancy table td:nth-child(8) {
	text-align:center;
}

.vacancy table td:nth-child(3) {
	color: #e50012;
	font-weight: bold;
	font-size: 18px;
}

/* 項目下部 ツアーリンク
--------------------*/

.vacancy table td:nth-child(8) .bu span {
	font-size: 12px;
}

.vacancy table td:nth-child(8) .bu.on,
.vacancy table td:nth-child(8) .bu.off {
    display: inline-block;
    margin: 2px;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    border-radius: 10px;
}

.vacancy table td:nth-child(8) .bu.off {
    color: #c5c5c5;
    border: 2px solid #fff;
    background: #fff;
}

.vacancy table td:nth-child(8) .bu.on {
    color: #fff;
    border: 2px solid #e50012;
    background: #e50012;
    transition: all .3s ease-out 0s;
}

.vacancy table td:nth-child(8) .bu.on:hover {
    color: #e50012;
    background: #fff;
}

@media screen and (max-width: 1000px) {

	/* ===================================================================
	メインビジュアル
	=================================================================== */

	.vacancy .vacancy-title {
		width: 90%;
		margin: 0 auto;
		max-width: none;
		padding: 100px 0;
	}

	.vacancy .vacancy-mv-inner {
		background: url(../../images/vacancy/mv_sp.png) 50% 50% / cover no-repeat, transparent;
	}
	
	.vacancy .vacancy-title {
		width: 100%;
		margin: 0;
		max-width: none;
		padding: 55% 0 0;
	}

	.vacancy .vacancy-title-inner {
		width: 100%;
		background: rgba(0, 47, 87, .3);
	}
	
	.vacancy .vacancy-detail {
		padding: 20px 0 0;
		border-top: 2px solid #e50012;
		background: #fff;
	}

	.vacancy .vacancy-detail .comment {
		margin: 0;
		text-indent: 1em;
		text-align: justify;
		font-size: 12px;
		color: #808080;
	}
	
	.vacancy .vacancy-detail .comment .attention {
		display: block;
		margin: 8px 0 0;
	}
	
	.vacancy .vacancy-banner {
		position: static;
		max-width: 200px;
		margin: 15px auto 0;
	}

	/* ===================================================================
	タブ切り替え部分
	=================================================================== */

	.vacancy .linkbox {
		padding: 20px 0 0;
	}

	/* title
	--------------------*/

	.vacancy .vacancy-list-title {
		margin: 0 0 25px;
		padding: 0 0 0 25px;
	}

	.vacancy .vacancy-list-title h2 {
		font-size: 16px;
	}

	.vacancy .vacancy-list-title:before {
		width: 20px;
		height: 20px;
	}

	/* linkbox
	--------------------*/

	.vacancy .linkbox .lbox {
		margin: 0 0 20px;
	}
	
	.vacancy .linkbox .lbox ul {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.vacancy .linkbox .lbox ul li {
		width: 49%;
		height: auto;
		margin: 0 0 10px;
	}

	.vacancy .linkbox .lbox li a {
		padding: 5px 0;
		font-size: 12px;
	}

	/* ===================================================================
	見出し
	=================================================================== */

	.vacancy .title02 {
		display: flex;
		align-items: center;
		margin: -60px 0 20px;
		padding: 80px 0 0;
	}

	.vacancy .title02 .title02-catch {
		width: 14px;
		height: 14px;
	}

	.vacancy .title02 h2 {
		font-size: 14px;
	}

	.vacancy .title02 h2 span {
		font-size: 12px;
	}

	/* ===================================================================
	注意事項
	=================================================================== */

	.vacancy p.attention {
		font-size: 12px;
		margin: 0 0 20px;
	}

	/* ===================================================================
	テーブル
	=================================================================== */

	/* 項目上部
	--------------------*/

	.vacancy table th {
		font-size: 10px;
	}

	.vacancy table th:nth-child(1) {
		width: 0;
	}
	.vacancy table th:nth-child(2) {
		width: 31.5%;
	}
	.vacancy table th:nth-child(3) {
		width: 12.5%;
	}
	.vacancy table th:nth-child(4) {
		width: 12.5%;
	}
	.vacancy table th:nth-child(5) {
		width: 12.5%;
	}
	.vacancy table th:nth-child(6) {
		width: 0;
	}
	.vacancy table th:nth-child(7),
	.vacancy table td:nth-child(7) {
		display: none;
		width: 0;
	}
	.vacancy table th:nth-child(8) {
		width: 31%;
	}

	/* 項目上部 上下矢印部分
	--------------------*/

	.vacancy table th div span:nth-child(1) {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 50px;
	}

	.vacancy table th div span.arrow {
		height: 10px;
		width: 30px;
	}


	/* 項目下部
	--------------------*/

	.vacancy table td {
		font-size: 10px;
	}

	.vacancy table td:nth-child(3) {
		font-size: 10px;
	}

	/* 項目下部 ツアーリンク
	--------------------*/

	.vacancy table td:nth-child(8) {
		padding: 5px 5px 0;
	}

	.vacancy table td:nth-child(8) .bu span {
		display: block;
		font-size: 10px;
	}

	.vacancy table td:nth-child(8) .bu.on,
	.vacancy table td:nth-child(8) .bu.off {
		margin: 0 2px 5px;
		padding: 5px 4px;
		font-size: 10px;
	}

}