@charset "utf-8";

/*----------------------------------------------
	Overall settings
-----------------------------------------------*/
body{
	min-width: 1100px;
	font-family: "Noto Sans JP", sans-serif;
	color: #3C3F43;
	text-align: center;
}
body.ovh{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
}
a{
	color: #3C3F43;
	text-decoration: none;
	-webkit-transition: all .2s;
	transition: all .2s;
}
a:hover{
	opacity: .6;
	text-decoration: none;
}
.underline{
	text-decoration: underline;
}
/* font */
.gothic{
	font-family: "Noto Sans JP", sans-serif;
}
.calsans{
	font-family: "Cal Sans", sans-serif;
}
.mincho{
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
}
/* bg */
.bg-white{
	background: #fff;
}
.bg-blue{
	background: #0C4592;
}
.bg-orange{
	background: #e97714;
}
.bg-gray{
	background: #F5F5F5;
}
/* color */
.f-white{
	color: #fff;
}
.f-red{
	color: #c00;
}
.f-blue{
	color: #0C4592;
}
.fw400{ font-weight: normal;}
.fw500{ font-weight: 500;}
.fw700{ font-weight: bold;}
/* anchor */
.anchorwrap{ position: relative;}
.anchorwrap .anchor{ position: absolute; top: -100px;}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	body{
		min-width: inherit;
		font-size: 3.73vw;
	}
	a:hover{
		opacity: 1;
	}
	/* anchor */
	.anchorwrap .anchor{ top: -70px;}
}
@media screen and (max-width: 350px){
	html{
		font-size: 50%;
	}
}



/*----------------------------------------------
	header
-----------------------------------------------*/
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	min-width: 1100px;
	height: 80px;
	padding: 0 3%;
	background: rgba(255, 255, 255, .95);
	z-index: 999;
}
#header-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
	z-index: 998;
}
header .logo{ width: 404px;}
header .logo a{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .logo img{ width: 250px;}
header .logo span{
	width: 8em;
	color: #fff;
	font-size: 18px;
	line-height: 1.77;
	font-weight: bold;
	text-align: center;
	display: block;
	padding: 3px;
	background: #0C4592;
	margin-top: 8px;
}
header .spmenu{
	display: none;
}
header ul{
	display: flex;
	align-items: center;
	white-space: nowrap;
}
header ul{ width: 800px;}
header ul li{
	font-size: 16px;
	letter-spacing: .05em;
	line-height: 1.5;
}
header ul li>a{
	color: #000;
	font-weight: 500;
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	height: 80px;
	padding: 0 .5em;
	position: relative;
}
header ul li>a:hover{
	opacity: 1;
}
header ul li>a:after{
	display: block;
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5px;
	width: 50px;
	height: 4px;
	opacity: 0;
	transition: .2s;
	visibility: hidden;
	background: #0C4592;
}
header ul li>a:hover:after,
header ul li.open>a:after{
	bottom: 0;
	opacity: 1;
	visibility: visible;
}
header ul li>a span{
	display: block;
	width: 100%;
}
header ul li>a small{
	display: block;
	width: 100%;
	color: #3C3F43;
	font-size: 13px;
	font-weight: bold;
}
header ul li>a:hover span,
header ul li>a:hover small{
	color: #0C4592;
}
header ul li.contact{
	margin-left: 2em;
}
header ul li.contact a{
	color: #0C4592;
	display: block;
	padding: 0;
}
header ul li.contact a span{
	display: inline-block;
	width: auto;
}
header ul li.contact a:hover{
	opacity: .5;
}
header ul li.contact a:hover:after{
	opacity: 0;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 1290px){
	header{
		padding: 0 2%;
	}
	header .logo{ width: 380px;}
	header .logo span{
		width: 7em;
		font-size: 16px;
	}
	header ul{ width: inherit;}
	header ul li{ font-size: 14px;}
	header ul li>a{ padding: 0 .35em;}
	header ul li.contact{ margin-left: 1em;}
}
@media screen and (max-width: 540px){
	header{
		min-width: inherit;
		height: 60px;
		transition: all .2s;
	}
	.open header{
		background: rgba(255, 255, 255, .95);
	}
	header .logo{
		max-width: 270px;
		width: 75vw;
	}
	header .logo img{ width: 180px;}
	header .logo span{
		font-size: 2.77vw;
		padding: 2px 5px;
		margin-top: 5px;
	}
	header .spmenu{
		display: block;
	}
	header .spmenu{
		position: relative;
		width: 57px;
		height: 57px;
		cursor: pointer;
	}
	header .spmenu span{
		display: inline-block;
		position: absolute;
		left: 50%;
		width: 30px;
		height: 2px;
		background: #0C4592;
		transform: translateX(-50%);
		transition: all .5s;
	}
	header .spmenu span{
		display: inline-block;
		transition: all .5s;
	}
	header .spmenu span:nth-of-type(1){
		top: 20px;
	}
	header .spmenu span:nth-of-type(2){
		top: 28px;
	}
	header .spmenu span:nth-of-type(3){
		bottom: 19px;
		width: 16px;
		margin-left: 7px;
	}
	header .spmenu.active span:nth-of-type(1){
		transform: translate(-12px, 8px) rotate(-315deg);
	}
	header .spmenu.active span:nth-of-type(2){
		opacity: 0;
	}
	header .spmenu.active span:nth-of-type(3){
		transform: translate(-12px, -8px) rotate(315deg);
		width: 30px;
		margin-left: 0;
	}
	header nav{
		display: none;
		position: absolute;
		left: 0;
		top: 60px;
		width: 100%;
		padding: 5vw 10vw 7vw;
		background: rgba(255, 255, 255, .95);
		box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
	}
	header ul{
		display: block;
		width: auto;
	}
	header ul li{
		font-size: 5.33vw;
	}
	header ul li>a{
		display: block;
		height: auto;
		padding: .7em 0;
		text-align: left;
	}
	header ul li>a:hover{
		opacity: 1;
	}
	header ul li>a:after{
		display: none;
	}
	header ul li>a span{
		display: inline-block;
		width: auto;
	}
	header ul li>a small{
		display: inline-block;
		width: auto;
		font-size: 3.73vw;
		margin-left: 1em;
	}
	header ul li>a:hover span{
		color: inherit;
	}
	header ul li>a:hover small{
		color: #3C3F43;
	}
	header ul li.contact{
		margin-left: 0;
		padding-top: 3vw;
		text-align: center;
	}
	header ul li.contact a{
		padding: 0;
		display: inline;
	}
	header ul li.contact a:hover{
		opacity: 1;
	}
	header ul li.contact a:hover:after{
		opacity: 0;
	}
	header ul li.contact a img{
		width: 10vw;
	}
}



/*----------------------------------------------
	section
-----------------------------------------------*/

section{}
.wrap{
	clear: both;
	box-sizing: content-box;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

/* ttl */
.ttl1{
	display: inline-block;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-align: left;
	position: relative;
}
.ttl1:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: 100%;
	height: 1px;
	background: #ccc;
}
.ttl1 .txt{
	display: inline-block;
	padding-right: 1em;
	background: #fff;
	position: relative;
}
.ttl1 .calsans{
	display: block;
	font-size: 50px;
	font-weight: normal;
	letter-spacing: .15em;
	padding-top: .4em;
}
.ttl1 .calsans.fw700{ font-weight: bold;}
.ttl1 .calsans::first-letter{ color: #df0516;}
.ttl1.t-center{
	text-align: center;
}
.ttl1.t-center:before{
	display: none;
}
.ttl1.t-center .txt{
	padding-right: 0;
	background: none;
}
.ttl2{
	padding-left: 1.5em;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.5;
	text-align: left;
	position: relative;
}
.ttl2:before{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .7em;
	width: 1em;
	height: 4px;
	background: #D7DFEB;
}
.ttl3{
	text-align: center;
	margin-bottom: 3em;
}
.ttl3 strong{
	display: inline-block;
	padding: .2em 0 .2em 100px;
	font-size: 45px;
	font-weight: bold;
	line-height: 1.2;
	text-align: left;
}
.ttl3.transportation strong{
	background: url(../img/ttl3-ic1.svg) left center / 80px auto no-repeat;
}
.ttl3.safekeeping strong{
	background: url(../img/ttl3-ic2.svg) left center / 80px auto no-repeat;
}
.ttl3.logistics strong{
	background: url(../img/ttl3-ic3.svg) left center / 80px auto no-repeat;
}
.ttl3 strong span{
	display: block;
	color: #8E9DB2;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: .05em;
}
.ttl4{
	padding-left: 1em;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	position: relative;
}
.ttl4:after{
	display: inline-block;
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .5em;
	height: .5em;
	background: #0C4592;
}
.ttl5{
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
}
.ttl6{
	font-size: 20px;
	line-height: 1.45;
	font-weight: bold;
	padding-left: 18px;
	border-left: 5px solid #0C4592;
}
/* btn */
.btn1{
	display: inline-block;
	padding-right: 3em;
	padding-bottom: .2em;
	font-weight: bold;
	border-bottom: 1px solid #0C4592;
	position: relative;
}
.btn1:hover{
	opacity: 1;
	color: #0C4592;
}
.btn1:after{
	display: inline-block;
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 1.31em;
	height: 1.43em;
	background: url("../img/ic-btn1.svg") center bottom / cover no-repeat;
}
.btn1:hover:after{
	opacity: 0;
	animation: btn1ani .5s ease forwards;
}
@keyframes btn1ani{
	0%{
		right: 1.5em;
		opacity: 0;
	}
	50%{
		opacity: .4;
	}
	100%{
		right: 0;
		opacity: 1;
	}
}
.btn2{
	display: block;
	width: 250px;
	margin-top: 1.2em;
	padding: 1em;
	text-align: center;
	border: 1px solid #0C4592;
}
.btn2 img{
	width: 22px;
	margin-right: .5em;
}
.btn2:hover{
	opacity: 1;
	background: #ccc;
}
.btn3{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	padding: .5em;
	margin: 0 1em;
	color: #fff;
	text-align: center;
	background: #0C4592;
	border: 2px solid #0C4592;
}
.btn3:hover{
	opacity: 1;
	color: #0C4592;
	background: #fff;
}
.btn4{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	padding: .5em;
	margin: 0 1em;
	color: #fff;
	text-align: center;
	background: #666;
	border: 2px solid #666;
}
.btn4:hover{
	opacity: 1;
	color: #666;
	background: #fff;
}
/* pnav */
.pnav{
	padding: 15px 5% 80px;
	font-size: 14px;
	text-align: left;
}
.pnav li{
	display: inline-block;
	vertical-align: top;
}
.pnav li:not(:last-child):after{
	display: inline-block;
	content: "＞";
	margin: 0 .3em;
}
/* lead */
.lead1{
	margin-bottom: 1em;
	font-size: 22px;
	font-weight: 500;
}
/* anchor */
.anchor{
	position: relative;
}
.anchor .anchorid{
	position: absolute;
	top: -100px;
}
/* cmn-contact */
.cmn-contact{
	padding: 70px 0;
	background: url("../img/cmn-contact-bg.jpg") center / cover no-repeat;
}
.cmn-contact .wrap{
	max-width: 820px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.cmn-contact .wrap p{ text-align: left;}
.cmn-contact .wrap .links a{ width: 400px;}
.cmn-contact .links{
	display: flex;
	justify-content: space-between;
}
.cmn-contact .links a{
	display: block;
	padding: .8em;
	width: 48.5%;
	font-weight: 500;
	line-height: 1.2;
	background: #fff;
	border-radius: 10px;
}
.cmn-contact .links a:hover{
	opacity: 1;
	background: #999;
}
.cmn-contact .links a span.tel{
	display: inline-block;
	padding-left: 55px;
	font-size: 40px;
	font-weight: normal;
	letter-spacing: .05em;
	background: url(../img/ic-tel.svg) left center no-repeat;
}
.cmn-contact .links a:nth-child(2){
	padding: 2.5em .8em .8em;
}
.cmn-contact .links a span.mail{
	font-size: 40px;
	letter-spacing: .15em;
	line-height: 1.4;
	margin-top: .1em;
	display: inline-block;
	padding-left: 50px;
	font-weight: 500;
	background: url(../img/ic-contact.svg) left center / 34px auto no-repeat;
}
.cmn-contact .links a small{
	vertical-align: top;
	color: #666;
	font-size: 14px;
}
/* table */
.table1{
	width: 100%;
	font-size: 16px;
	background: #fff;
	border-top: 1px solid #D9D9D9;
}
.table1 th{
	line-height: 1.5;
	padding: 1em;
	background: #eee;
	border-bottom: 1px solid #D9D9D9;
}
.table1 td{
	padding: 1em 2em;
	border-bottom: 1px solid #D9D9D9;
}
/* fixbnr */
.fixbnr{
	position: fixed;
	z-index: 2;
	right: 10px;
	bottom: 55px;
	display: none;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	/* ttl */
	.pagettl{
		padding-top: calc(60px + 7vw);
		padding-bottom: 7vw;
		font-size: 3.73vw;
	}
	.pagettl span{
		font-size: 9.6vw;
		line-height: 1;
	}
	.ttl1{
		font-size: 3.73vw;
	}
	.ttl1 .calsans{
		font-size: 9.6vw;
	}
	.ttl2{
		font-size: 6.4vw;
	}
	.ttl2:before{
		height: 4px;
	}
	.ttl3 strong{
		padding: .2em 0 .2em 2.5em;
		background-size: 2em auto !important;
		font-size: 8vw;
	}
	.ttl3 strong span{
		font-size: 3.2vw;
	}
	.ttl4{
		font-size: 5.33vw;
	}
	/* btn */
	.btn2{
		width: auto;
		padding: .5em;
	}
	.btn2 img{
		width: 1.3em;
	}
	.btn2:hover{
		background: none;
	}
	.btn3{
		max-width: inherit;
		margin: 0 0 1em;
		padding: 1em;
	}
	.btn3:hover{
		color: #fff;
		background: #0C4592;
	}
	.btn4{
		max-width: 10em;
		margin: 0 0 1em;
	}
	.btn4:hover{
		color: #fff;
		background: #666;
	}
	/* pnav */
	.pnav{
		padding: .5em 5% 2em;
		font-size: 3.2vw;
	}
	/* lead */
	.lead1{
		font-size: 5.33vw;
	}
	/* cmn-contact */
	.cmn-contact{
		padding: 15vw 0 10vw;
	}
	.cmn-contact .wrap{ display: block;}
	.cmn-contact .wrap p{
		line-height: 1.6;
		margin-bottom: 1em;
	}
	.cmn-contact .wrap .links a{ width: 100%;}
	.cmn-contact .links{
		display: block;
	}
	.cmn-contact .links a{
		padding: .8em;
		width: auto;
		margin-bottom: 1em;
	}
	.cmn-contact .links a span.tel{
		padding-left: 12vw;
		font-size: 9.6vw;
		background-size: 9vw auto;
	}
	.cmn-contact .links a span.mail{
		margin: .5em 0;
		padding-left: 9vw;
		background-size: 7vw auto;
		font-size: 9.6vw;
		margin-bottom: 0;
	}
	.cmn-contact .links a small{
		vertical-align: top;
		color: #666;
		font-size: 12px;
	}
}






/*----------------------------------------------
	footer
-----------------------------------------------*/
footer{
	padding: 50px 0;
	background: #f4f4f4;
}
footer .wrap{ justify-content: space-between;}
footer .pagetop{
	position: fixed;
	right: 0;
	bottom: 0;
	width: 60px;
	height: 60px;
	background: url(../img/pagetop.svg) center / cover no-repeat;
	cursor: pointer;
}
footer .wrap{
	display: flex;
	flex-wrap: wrap;
	text-align: left;
	position: relative;
}
footer .about{
	width: 300px;
	font-size: 16px;
}
footer .about dt{
	width: 250px;
	margin-bottom: 1em;
}
footer .about dt span{
	color: #fff;
	font-size: 16px;
	line-height: 1.77;
	font-weight: bold;
	text-align: center;
	display: block;
	padding: 3px 27px;
	background: #0C4592;
	margin-top: 15px;
}
footer .rightcol{ text-align: right;}
footer .rightcol .btn2{
	font-size: 14px;
	font-weight: bold;
	background: #fff;
	display: inline-block;
	margin: 0 0 1.5em;
}
footer .rightcol .btn2:hover{ background: #ddd;}
footer .rightcol .btn2 .calsans{ font-weight: 500;}
footer .rightcol .sns{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}
footer .rightcol .sns a{
	display: flex;
	align-items: center;
}
footer .copy{
	width: 100%;
	font-size: 14px;
}
/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	footer{
		padding: 15vw 0 10vw;
	}
	footer .wrap{
		display: block;
	}
	footer .about{
		width: auto;
		font-size: 14px;
	}
	footer .about dt{
		width: 70%;
		margin-bottom: 1em;
	}
	footer .about dt span{
		font-size: 3.733vw;
		padding: 1vw 5vw;
		margin-top: 3vw;
	}
	footer .rightcol .btn2{ font-size: 3.466vw;}
	footer .rightcol .sns{
		gap: 2vw;
		margin-bottom: 4vw;
	}
	footer .copy{
		font-size: 3.2vw;
	}
}







/*--------------------------
	recruit/
---------------------------*/
.recruit-mv{
	min-width: 1100px;
	height: 100vh;
	min-height: 800px;
	overflow: clip;
	position: relative;
}
.recruit-mv .logo{
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: #fff;
	justify-content: center;
	align-items: center;
	animation: mvlogo 2.4s ease 1;
	opacity: 0;
	z-index: 2;
}
@keyframes mvlogo{
	0%{opacity: 1;}
	99%{opacity: 1;}
	100%{opacity: 0;}
}
.recruit-mv .logo img{ width: 33%;}
.recruit-mv .mask{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 3;
}
.recruit-mv .mask div{
	position: absolute;
	width: 50%;
	height: 50vh;
	overflow: hidden;
}
.recruit-mv .mask1{ left: 0; bottom: 50vh;}
.recruit-mv .mask2{ right: 0; bottom: 50vh;}
.recruit-mv .mask3{ left: 0; bottom: 0;}
.recruit-mv .mask4{ right: 0; bottom: 0;}
@keyframes mvmask {
	0% { height: 0; bottom: 0;}
	30% { height: 50vh; bottom: 0;}
	70% { height: 50vh; bottom: auto; top: 0;}
	100% { height: 0; top: 0}
}
.recruit-mv .mask div:before{
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 0;
	background: #0C4592;
	animation: mvmask 2.4s ease-in-out forwards;
	animation-delay: 1s;
}
.recruit-mv .mask2:before,
.recruit-mv .mask3:before{
	animation-delay: 1.3s!important;
}
.recruit-mv .colorful{
	height: 100vh;
	padding-top: 40vh;
	background: linear-gradient(324deg, #b6eadd, #b6d3ea, #e4ea8e, #b6eae6);
	background-size: 800% 800%;
	animation: mvcolorful 4s ease infinite;
}
@keyframes mvcolorful{
	0%{background-position:0% 51%}
	50%{background-position:100% 50%}
	100%{background-position:0% 51%}
}
.recruit-mv .colorful h2{
	padding-left: 1em;
	font-size: 3.66vw;
	line-height: 1.6;
	text-align: left
}
.recruit-mv .colorful h2 span{
	display: block;
	width: 100%;
	color: #0C4592;
	font-size: 1.75vw;
	font-weight: normal;
}
.recruit-mv .tateslider{
	position: absolute;
	right: 0;
	top: 0;
	width: 44vw;
	height: 100vh;
	z-index: 1;
}
.recruit-message{ padding: 80px 0;}
.recruit-message .imgright{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.recruit-message .imgright div{
	font-size: 18px;
	text-align: left;
	flex: 1;
}
.recruit-message .imgright div h3{
	font-size: 24px;
	line-height: 1.4;
	font-weight: bold;
	margin-bottom: 1em;
}
.recruit-message .imgright figure{
	width: 36.36%;
	margin-left: 90px;
}
.recruit-message .imgright figure img{
	box-shadow: -20px 20px 0 0 #0C4592;
	margin-bottom: 45px;
}
.recruit-message .imgright figure figcaption{
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}
.recruit-numbers{
	padding: 80px 3%;
	background: #eee;
}
.recruit-numbers ul{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2%;
}
.recruit-numbers ul li{
	width: 23%;
	margin-bottom: 2.2%;
}
.recruit-numbers ul li.half{ width: 48.7%;}
.recruit-numbers ul li.clm3{ width: 32%;}
.recruit-numbers ul li img{ width: 100%;}
.recruit-employee{ padding: 80px 2.19%;}
.recruit-employee .bg{
	padding: 60px 1.46vw 40px;
	background: linear-gradient(-40deg, #BFE4DF 0%, #BFD3F1 100%);
	border-radius: 20px;
}
.recruit-employee .bg ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.recruit-employee .bg ul li{
	width: 23.8%;
	border-radius: 20px;
	background: #fff;
	padding: 2vw 2vw;
	margin-bottom: 1.5vw;
	font-size: 1.17vw;
}
.recruit-employee .bg ul li figure{ margin-bottom: 1em;}
.recruit-employee .bg ul li h3{
	font-size: 25px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: .5em;
}

.ttl1 .calsans.black::first-letter{ color: #3C3F43;}
.recruit-openpositions{ padding: 90px 0 0;}
.recruit-openpositions ul li{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 70px;
}
.recruit-openpositions ul li.imgright{ flex-direction: row-reverse;}
.recruit-openpositions ul li figure{
	width: 44%;
	max-width: 600px;
	box-shadow: 20px 20px 0px 0px #0C4592;
}
.recruit-openpositions ul li div{
	flex: 1;
	text-align: left;
	padding: 0 80px 0 5%;
}
.recruit-openpositions ul li.imgleft div{ padding: 0 5% 0 80px;}
.recruit-openpositions ul li div h3{
	font-size: 35px;
	font-weight: 500;
	line-height: 1.4;
	padding-bottom: .4em;
	border-bottom: 4px solid #0C4592;
	margin-bottom: .7em;
}
.recruit-openpositions ul li div h3 small{
	color: #999;
	font-size: 20px;
	font-weight: 500;
	display: inline-block;
	margin-left: 2em;
	vertical-align: middle;
}
.recruit-openpositions ul li div p.f20{ line-height: 1.4;}
.recruit-interview{ padding: 80px 0 60px;}
.recruit-interview .wrap{ max-width: 1200px;}
.recruit-interview ul{
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
}
.recruit-interview ul li{
	line-height: 1.6;
	text-align: left;
	width: 30%;
	margin-bottom: 40px;
}
.recruit-interview ul li figure{
	text-align: center;
	margin-bottom: .5em;
}
.recruit-interview ul li figure img{ border-radius: 20px;}
.recruit-interview ul li .read{
	font-size: 21px;
	font-weight: 500;
	margin-bottom: .7em;
	min-height: 5em;
}
.recruit-interview ul li a{
	line-height: 1.4;
	display: block;
	padding-right: 35px;
	position: relative;
}
.recruit-interview ul li a:before,.recruit-interview ul li a:after{
	content: "";
	position: absolute;
	display: block;
}
.recruit-interview ul li a:before{
	right: 35px;
	width: 2px;
	height: 100%;
	background: #DCDCDC;
}
.recruit-interview ul li a:after{
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	background: url("../img/ic-arrow.svg") center no-repeat;
	width: 13px;
	height: 12px;
	display: block;
}
.recruit-job-description{
	padding: 100px 0 90px;
	background: #0C4592;
}
.recruit-job-description .wrap{ max-width: 1100px;}
.recruit-job-description .ttl1{ color: #fff;}
.recruit-job-description .ttl1 .calsans::first-letter{ color: #fff;}
.recruit-job-description dl{
	text-align: left;
	background: #fff;
	border-radius: 20px;
	margin-bottom: 20px;
}
.recruit-job-description dl dt{
	font-size: 20px;
	line-height: 1.4;
	font-weight: bold;
	cursor: pointer;
	padding: 20px 50px 20px 30px;
	position: relative;
}
.recruit-job-description dl dt:before,.recruit-job-description dl dt:after{
	content: "";
	position: absolute;
	top: 0;
	right: 21px;
	bottom: 0;
	margin: auto 0;
	display: block;
	width: 27px;
	height: 3px;
	background: #0C4592;
}
.recruit-job-description dl dt:after{
	opacity: 1;
	-webkit-transition: all .3s;transition: all .3s;
	transform: rotate(90deg);
}
.recruit-job-description dl dt.open:after{
	opacity: 0;
	transform: rotate(0deg);
}
.recruit-job-description dl dd{
	padding: 0 30px 45px;
	display: none;
}
.recruit-job-description dl dd table{
	width: 100%;
	border-top: 1px solid #DCDCDC;
	border-left: 1px solid #DCDCDC;
}
.recruit-job-description dl dd table th,.recruit-job-description dl dd table td{
	line-height: 1.6;
	border-right: 1px solid #DCDCDC;
	border-bottom: 1px solid #DCDCDC;
	padding: 15px 20px;
}
.recruit-job-description dl dd table th{
	background: #E3EBF6;
	width: 280px;
}

/*-------------------- responsive --------------------*/
@media screen and (max-width: 1100px){
	.recruit-mv .colorful{
		height: 100vh;
	}
	.recruit-mv .colorful h2{
		font-size: 40px;
	}
	.recruit-mv .colorful h2 span{
		font-size: 18px;
	}
	.recruit-mv .tateslider{
		width: 484px;
	}
}
@media screen and (max-width: 540px){
	.recruit-mv{
		min-width: inherit;
		width: 100%;
		height: auto;
		min-height: inherit;
	}
	.recruit-mv .logo,.recruit-mv .mask{ display: none;}
	.recruit-mv .logo img{ width: 90%;}
	.recruit-mv .colorful{
		height: auto;
		padding-top: 20vh;
		padding-bottom: 10vh;
	}
	.recruit-mv .colorful h2{
		font-size: 7.66vw;
	}
	.recruit-mv .colorful h2 span{
		font-size: 4.15vw;
		padding-top: 1em;
	}
	.recruit-mv .tateslider{
		position: static;
		width: 100%;
		height: auto;
	}
	.recruit-mv .tateslider li img{
		width: 100%;
		height: auto;
		object-fit: cover;
		display: block;
	}


	.recruit-numbers{ padding: 20vw 3vw 15vw;}
	.recruit-numbers ul{
		gap: 2%;
	}
	.recruit-numbers ul li{
		width: 49%;
		margin-bottom: 1.5%;
	}
	.recruit-numbers ul li.half{ width: 100%;}
	.recruit-numbers ul li.clm3{ width: 100%;}
	.recruit-openpositions{ padding: 18vw 0 0;}
	.recruit-openpositions .wrap{
		padding-right: 2%;
		padding-left: 2%;
	}
	.recruit-openpositions ul li{
		display: block;
		margin-bottom: 5vw;
	}
	.recruit-openpositions ul li figure{
		width: 80%;
		margin: 0 auto 10vw;
		text-align: center;
		box-shadow: 4vw 4vw 0px 0px #0C4592;
	}
	.recruit-openpositions ul li div{  padding: 0 5%;}
	.recruit-openpositions ul li.imgleft div{ padding: 0 5%;}
	.recruit-openpositions ul li div h3{
		font-size: 7.33vw;
		border-bottom: 2px solid #0C4592;
	}
	.recruit-openpositions ul li div h3 small{
		font-size: 4.8vw;
		margin-left: 1em;
	}
	.recruit-employee{ padding: 15vw 2% 0;}
	.recruit-employee .bg{
		padding: 13vw 3vw 10vw;
		border-radius: 4vw;
	}
	.recruit-employee .bg ul{ gap: 2%;}
	.recruit-employee .bg ul li{
		width: 49%;
		border-radius: 4vw;
		padding: 6vw 2vw;
		margin-bottom: 1.8vw;
		font-size: 2.67vw;
	}
	.recruit-employee .bg ul li figure{ margin-bottom: .5em;}
	.recruit-employee .bg ul li h3{
		font-size: 5.866vw;
		margin-bottom: .3em;
	}
	.recruit-employee .bg ul li p{ line-height: 1.6;}
	.recruit-interview{ padding: 20vw 0 12vw;}
	.recruit-interview ul{ display: block;}
	.recruit-interview ul li{
		width: 100%;
		margin-bottom: 10vw;
	}
	.recruit-interview ul li figure img{ border-radius: 4vw;}
	.recruit-interview ul li .read{
		font-size: 5.066vw;
		margin-bottom: .3em;
	}
	.recruit-job-description{ padding: 20vw 0 18vw;}
	.recruit-job-description dl{
		border-radius: 4vw;
		margin-bottom: 4vw;
	}
	.recruit-job-description dl dt{
		font-size: 4.8vw;
		padding: 3vw 40px 3vw 5vw;
	}
	.recruit-job-description dl dt:before,.recruit-job-description dl dt:after{
		right: 15px;
		width: 18px;
		height: 2px;
	}
	.recruit-job-description dl dd{ padding: 0 5vw 5vw;}
	.recruit-job-description dl dd table th,.recruit-job-description dl dd table td{
		padding: 2vw 3vw;
		display: block;
	}
	.recruit-job-description dl dd table th{ width: auto;}
	.recruit-message{ padding: 20vw 0;}
	.recruit-message .imgright{ display: block;}
	.recruit-message .imgright div{
		font-size: 4.266vw;
		margin-bottom: 5vw;
	}
	.recruit-message .imgright div h3{ font-size: 5.866vw;}
	.recruit-message .imgright figure{
		width: 100%;
		margin: 0;
	}
	.recruit-message .imgright figure img{ margin-bottom: 9vw;}
	.recruit-message .imgright figure figcaption{ font-size: 4.266vw;}
}



/*--------------------------
	interview/
---------------------------*/
.interview-main{
	padding-top: 180px;
	height: 631px;
}
.interview-main.ok{ background: url("../img/interview-ok-main.jpg") center / cover no-repeat;}
.interview-main.nk{ background: url("../img/interview-nk-main.jpg") center / cover no-repeat;}
.interview-main.mt{ background: url("../img/interview-mt-main.jpg") center / cover no-repeat;}
.interview-main.hk{ background: url("../img/interview-hk-main.jpg") center / cover no-repeat;}
.interview-main.ds{ background: url("../img/interview-ds-main.jpg") center / cover no-repeat;}
.interview-main .wrap{
	display: flex;
	justify-content: flex-end;
}
.interview-main .wrap div{
	font-size: 24px;
	font-weight: 500;
	text-align: left;
	background: #fff;
	width: fit-content;
	padding: 40px 55px;
	box-shadow: 20px 20px 0px 0px #0C4592;
}
.interview-main .wrap div h2{
	font-size: 16px;
	font-weight: normal;
}
.interview-main .wrap div h2 strong{
	color: #0C4592;
	font-size: 30px;
	font-weight: 500;
}
.interview1{ padding: 65px 5% 55px;}
.interview1 ul{ text-align: left;}
.interview1 ul li .imgleft{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 35px;
}
.interview1 ul li .imgleft figure{ margin-right: 55px;}
.interview1 ul li .imgleft figure img{ border-radius: 50%;}
.interview1 ul li .imgleft div{
	font-size: 18px;
	font-weight: 500;
	flex: 1;
	position: relative;
	padding: 35px 55px;
	border-radius: 20px;
	background: linear-gradient(-40deg, #BFE4DF 0%, #BFD3F1 100%);
}
.interview1 ul li .imgleft div:before{
	content: "";
	display: block;
	position: absolute;
	top: 40px;
	right: calc(100% - 1px);
	width: 34px;
	height: 39px;
	background: #BFD3F1;
	clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
.interview2{
	padding: 105px 0 80px;
	background: linear-gradient(-40deg, #BFE4DF 0%, #BFD3F1 100%);
}
.interview2 ul li{
	text-align: left;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.interview2 ul li .time{
	font-size: 30px;
	line-height: 1.2;
	font-weight: 500;
	width: 4.5em;
}
.interview2 ul li .bg-white{
	font-size: 16px;
	line-height: 1.5;
	flex: 1;
	background: #fff;
	padding: 15px 50px;
	border-radius: 20px;
	margin-bottom: 15px;
}
.interview2 ul li .bg-white h3{
	color: #0C4592;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: .5em;
}

/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.interview-main{
		padding-top: 55vw;
		height: 130vw;
	}
	.interview-main.ok{ background: url("../img/interview-ok-main.jpg") center / cover no-repeat;}
	.interview-main.nk{ background: url("../img/interview-nk-main.jpg") center / cover no-repeat;}
	.interview-main.mt{ background: url("../img/interview-mt-main.jpg") center / cover no-repeat;}
	.interview-main.hk{ background: url("../img/interview-hk-main.jpg") center / cover no-repeat;}
	.interview-main.ds{ background: url("../img/interview-ds-main.jpg") left center / cover no-repeat;}
	.interview-main .wrap{
		display: block;
	}
	.interview-main .wrap div{
		font-size: 4.533vw;
		line-height: 1.6;
		padding: 3vw 8vw;
		box-shadow: 3vw 3vw 0px 0px #0C4592;
	}
	.interview-main .wrap div h2{ font-size: 3.733vw;}
	.interview-main .wrap div h2 strong{  font-size: 7.466vw;}
	.interview1{ padding: 13vw 5% 11vw;}
	.interview1 ul li .imgleft{
		display: block;
		margin-bottom: 10vw;
	}
	.interview1 ul li .imgleft figure{
		text-align: center;
		margin: 0 0 8vw;
	}
	.interview1 ul li .imgleft div{
		font-size: 4.266vw;
		padding: 7vw 10vw;
		border-radius: 4vw;
	}
	.interview1 ul li .imgleft div:before{
		top: inherit;
		right: 68%;
		bottom: 100%;
		width: 39px;
		height: 34px;
		clip-path: polygon(50% 0, 100% 100%, 0 100%);
	}
	.interview2{ padding: 20vw 0 16vw;}
	.interview2 ul li{
		display: block;
		margin-bottom: 8vw;
	}
	.interview2 ul li .time{
		font-size: 7.466vw;
		width: auto;
		margin-bottom: .3em;
	}
	.interview2 ul li .bg-white{
		font-size: 3.733vw;
		padding: 4vw 6vw;
		border-radius: 4vw;
		margin-bottom: 0;
	}
	.interview2 ul li .bg-white h3{ font-size: 4.8vw;}
}