@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;
}
em{
  display: inline-block;
  padding: 0 .5em;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  background: #c00;
}
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;
}


.btn5{
	display: inline-block;
	width: 100%;
	max-width: 250px;
	color: #fff;
	text-align: center;
	background: #0C4592;
}
.btn5: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 a{ display: block;}
.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 div{
	line-height: 1.4;
	display: block;
	padding-right: 35px;
	position: relative;
}
.recruit-interview ul li div:before,.recruit-interview ul li div:after{
	content: "";
	position: absolute;
	display: block;
}
.recruit-interview ul li div:before{
	right: 60px;
	width: 2px;
	height: 100%;
	background: #DCDCDC;
}
.recruit-interview ul li div:after{
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto 0;
	background: url("../img/ic-arrow.svg") center / 48px auto no-repeat;
	width: 48px;
	height: 48px;
	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;
	text-align: right;
}

/* 各グループの内部ボーダーを消す */
.recruit-job-description dl dd table tbody tr:not(:last-child) th,
.recruit-job-description dl dd table tbody tr:not(:last-child) td {
  border-bottom: none;
}


.recruit-job-description dl dd a.no-link{
  pointer-events: none;
  cursor: not-allowed;
}
/*-------------------- 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 {
    width: 100%;
    border-collapse: collapse;
    border-top: none;
    border-left: none;
  }
  
  .recruit-job-description dl dd table tbody.group1 {
    display: block !important;
    width: 100%;
    margin-bottom: 1rem;  /* カード間の間隔 */
    background: #fff;
    border: 1px solid #DCDCDC;
    overflow: hidden;
    margin-top: 0;
  }
  
  .recruit-job-description dl dd table tbody.group1 tr {
    display: block;
    width: 100%;
  }
  
  .recruit-job-description dl dd table th[scope="row"],
  .recruit-job-description dl dd table td {
    display: block;
    width: 100%;
    padding: 4vw 5vw;
    text-align: left;
    border: none;
    border-bottom: 1px solid #eee;
    line-height: 1.6;
    font-size: 3.8vw;
  }
  
  .recruit-job-description dl dd table th[scope="row"] {
    background: #E3EBF6;
    font-weight: bold;
    padding: 4vw 5vw 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12vw;
    font-size: 4.2vw;
  }
  
  .recruit-job-description dl dd table td:last-child {
    border-bottom: none;
  }
  
  .recruit-job-description dl dd table td:empty {
    display: none;
  }

  /* 既存のテーブルスタイルを上書き */
  .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;
  max-width: none;
}
.interview-main .wrap.left{
	justify-content: flex-start;
}
.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: 6.5em;
}
.interview2 ul li .bg-white{
	color: #0C4592;
	font-size: 20px;
	font-weight: 700;
	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;
}

/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.interview-main{
      padding-top: 76vw;
      height: 150vw;
			position: relative;
	}
	.interview-main.ok{ background: url("../img/interview-ok-main_sp.jpg") center / cover no-repeat;}
	.interview-main.nk{ background: url("../img/interview-nk-main_sp.jpg") center / cover no-repeat;}
	.interview-main.mt{ background: url("../img/interview-mt-main_sp.jpg") center / cover no-repeat;}
	.interview-main.hk{ background: url("../img/interview-hk-main_sp.jpg") center / cover no-repeat;}
	.interview-main.ds{ background: url("../img/interview-ds-main_sp.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;
		position: absolute;
		bottom: 8vw;
		left: 5vw;
		width: 85vw;
	}
	.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;*/
		font-size: 4.8vw;
		padding: 4vw 6vw;
		border-radius: 4vw;
		margin-bottom: 0;
	}
	.interview2 ul li .bg-white h3{ font-size: 4.8vw;}
}


/*--------------------------
	contact/
---------------------------*/
.contact1{
	padding: 40px;
	background: #eee;
}
.contact1 a{
	display: inline-block;
	padding-left: 55px;
	font-size: 60px;
	font-weight: normal;
	letter-spacing: .05em;
	line-height: 1;
	background: url(../img/ic-tel.svg) left center no-repeat;
}
.contact1 p{
	padding-top: .5em;
	font-size: 16px;
	line-height: 1.5;
}
.contact2{
	width: 100%;
	text-align: left;
	border-top: 1px solid #ccc;
}
.contact2 th{
	width: 16em;
	padding: 1em 0;
	border-bottom: 1px solid #ccc;
	position: relative;
	vertical-align: top;
}
.contact2 th.no-border,
.contact2 td.no-border{
	border-bottom: none;
	padding-bottom: 0;
}
.contact2 th em{
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
.contact2 th.no-border em{
	transform: translateY(-20%);
}
.contact2 td{
	padding: 1em;
	border-bottom: 1px solid #ccc;
}
.contact2 td input::placeholder{
	color: #0C4592;
	opacity: .4;
}
.contact2 td .error{
	padding-top: .5em;
	color: #c00;
	font-size: 14px;
	font-weight: 500;
}
.contact2 td .radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contact2 td .radio-group label {
    display: block;
    margin: 0;
    flex: 1 1 45%; /* 2列に均等配置 */
}
.contact2 td .radio-group2 {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.contact2 td .radio-group2 label {
    display: block;
    margin: 0;
    flex: 1 1 90%;
}


.contact2 td .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.contact2 td .checkbox-group label {
    flex: 1 1 48%;
    display: block;
}
.contact2 td .upload-form {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #ddd;
}


/*-------------------- responsive --------------------*/
@media screen and (max-width: 540px){
	.contact1{
		padding: 2em 0 1.5em;
	}
	.contact1 a{
		padding-left: 12vw;
		font-size: 10.66vw;
		background-size: 9vw auto;
	}
	.contact1 p{
		font-size: 3.73vw;
	}
	.contact2{
		font-size: 16px;
	}
	.contact2 th{
    display: flex;          /* blockからflexに変更 */
    align-items: center;    /* 縦中央揃え */
    width: auto;
    padding: 1em 0 0;
    border-bottom: none;
    position: relative;     /* relativeを明示的に維持 */
	}
	.contact2 td{
		display: block;
		padding: .5em 0 1em;
		border-bottom: 1px solid #ccc;
	}
	.contact2 td p{
		display: flex;
    align-items: center; /* 垂直中央揃えを追加 */
		margin-bottom: 8px;
	}
	.contact2 td select{
		width: 100%;
	}
	.contact2 td .error{
		padding-top: .5em;
		color: #c00;
		font-size: 14px;
		font-weight: 500;
	}
	.contact2 th em,
	.contact2 td em{
    margin-left: auto;    /* 右端配置 */
    transform: none;      /* transformクリア */
    top: initial;         /* 従来のクリア不要 */
    transform: initial;
	}
	.contact2 td .radio-group label,
	.contact2 td .checkbox-group label{
    flex: 1 1 100%;
  }
	.contact2 td .upload-form { padding: 15px; margin: 10px; }
}