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

/*==================================
	base
==================================*/
* { box-sizing: border-box;}
html { height: 100%; width: 100%; font-size: 62.5%;/* 10px */}
body { font-family: "Jost", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif; font-size:1.6rem; color:#111; line-height: 1.5; letter-spacing: 0.1em; height: 100%; width: 100%; background: #fff; font-weight: 500; font-feature-settings: "palt";}
.wrapper { position: relative; height: 100%; width: 100%;}
section { position: relative; z-index: 1;}
.en { font-family: "Jost", sans-serif;}
.bold { font-weight: 700;}
.inner { max-width: 1200px; width: 90.66%; margin: 0 auto;}
@media screen and (min-width: 1200px) {
}
@media screen and (max-width: 1199px) {
}
@media screen and (min-width: 751px) {
.spOnly { display: none;}
}
@media screen and (max-width: 750px) {
body { font-size: 1.4rem; min-width: 100%;}
img { width: 100%;}
.inner { width: 90.66%;}
.pcOnly { display: none;}
}

/* link */
.faxnum { pointer-events: none;}
a.faxnum:hover { opacity: 1;}
@media screen and (min-width: 750px) {
.telnum,
a[href^="tel:"] { pointer-events: none;}
}
a { color: #111; text-decoration: none;display: block;}
a:hover {text-decoration: none;}

.link.recruit a { background: linear-gradient(90deg, rgba(46,79,181,1) 0%, rgba(46,79,181,1) 50%, rgba(0,179,227,1) 100%);background-size: 200% 100%;}
.link.entry a { background: linear-gradient(90deg, rgba(60,187,135,1) 0%, rgba(93,187,60,1) 50%, rgba(68,211,152,1) 100%);background-size: 200% 100%;}
.link.recruit a:hover,
.link.entry a:hover { opacity: 1; background-position: 100% 0;}


/*==================================
	parts
==================================*/
.disB { display: block;}
.disIB { display: inline-block;}
.taC { text-align: center;}
.taL { text-align: left;}
.taR { text-align: right}
.fwN { font-weight: 400;}
.fwB { font-weight: 600;}

.colBL { color: #2e4fb5;}
.bgBL { background: #f3f6f7;}

/*==================================
	header
==================================*/
header {}
header .hd_logo { max-width: 77px; width: 100%; top: 50px; right: calc( 50% + 520px); position: fixed; z-index: 50;}
header #navArea nav .link a { font-size: 15px; padding: 12px 30px; color: #fff; position: relative; border-radius: 30px;}
header #navArea nav .link.recruit a:after { width: 18px; height: 18px; right: 20px; top: 14px; content: ""; background: url("../img/icon_recruit.png")no-repeat; background-size: 18px 18px; display: block; position: absolute;}
header #navArea nav .link.entry a:after { width: 15px; height: 15px; right: 20px; top: 15px; content: ""; background: url("../img/icon_entry.png")no-repeat; background-size: 15px 15px; display: block; position: absolute;}

@media screen and (min-width: 1441px) {
header #navArea nav .hdNav { left:calc( 50% - 360px); right: auto;}
header.shadow #navArea nav .hdNav { left:calc( 50% - 390px); right: auto;}
header #navArea nav .link.recruit { left:calc( 50% + 340px); right: auto;}
header #navArea nav .link.entry { left:calc( 50% + 520px); right: auto;}
}
@media screen and (max-width: 1440px) {
header .hd_logo { left: 3%; right: auto;}
header #navArea nav .hdNav { right: 430px;}
header #navArea nav .link.recruit { right: 225px;}
header #navArea nav .link.entry { right: 40px;}
}
@media screen and (min-width: 1300px) {
header.shadow #navArea nav .hdNav li { margin-left: 40px !important;}
}


@media screen and (min-width: 1200px) {
header.shadow #navArea nav .hdNav li { margin-left: 25px;}
}
@media screen and (min-width: 1200px) {
.hd_logo_top { max-width: 77px; width: 100%; top: 50px; right: calc(50% + 520px); position: absolute; z-index: 50;}
header .hd_logo.pc { top: 30px; opacity: 0; visibility: hidden; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s;  transition: all 0.8s ease; z-index: 100;}
header.shadow .hd_logo.pc { max-width: 145px;}
header .hd_logo.sp { display: none;}
header:before { position: fixed; width: 100%; height: 95px; opacity: 0; content: ""; background: none; -webkit-transition: 0.8s; -moz-transition: 0.8s; -ms-transition: 0.8s; -o-transition: 0.8s; transition: 0.8s;}
header.shadow:before { opacity: 0.94; background: #fff; z-index: 100;/* box-shadow: 0 1px 8px 0 rgba(0,26,99,0.05);*/}
header.shadow .hd_logo.pc { opacity: 1; visibility: visible;}
header #navArea { top: 30px; right: 50px; z-index: 10;}
header #navArea nav .hdNav { top: 50px; position: fixed; z-index: 100; display: flex;}
header.shadow #navArea nav .hdNav { top: 35px;}
header #navArea nav .hdNav li { font-size: 15px; margin-left: 40px;}
header #navArea nav .hdNav li:nth-child(1) { margin-left: 0;}
header #navArea nav .hdNav li a { font-weight: 500;}
header #navArea nav .hdNav li:first-child a { font-weight: 400;}
header #navArea nav .hdNav li a:hover { opacity: 1; color: #2e4fb5 !important; border-bottom: solid 1px #2e4fb5;}
header #navArea nav .hdNav li.boxArea .box { display: none;}
header #navArea nav .link { width: 160px; position: fixed; top: 40px; z-index: 100;}
header.shadow #navArea nav .link { top: 25px;}
header #navArea nav .spNav { display: none;}
header #navArea nav .hdNav li.boxArea.person.on a,
header #navArea nav .hdNav li.boxArea.environment.on a { color: #2e4fb5; border-bottom: solid 1px #2e4fb5;}
header .hoverBox { height: 310px; padding-top: 130px; position: fixed; background: #eef2f3; width: 100%; z-index: 10; display: none;}
header .hoverBox .inner { width: 800px; display: flex;}
header .hoverBox .inner p { margin: 0 20px;}
header .hoverBox .inner a { color: #2e4fb5; text-align: left;}
header .hoverBox.on.person .inner { justify-content: center;}
header .hoverBox.on.environment .inner { justify-content: flex-start;}
}
@media screen and (max-width: 1199px) {
.hd_logo_top { display: none;}
header .hd_logo.pc { display: none;}
header {}
header .hd_logo { top: 25px; max-width: 53px;}
header .hoverBox { display: none;}
header nav { position: fixed; top: -100vh; width: 100%; height: 100vh; padding: 50px 50px 100px 50px; text-align: center; display: block; background: #eef2f3; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: all .5s; z-index: 20; opacity: 0;}
header nav ul li a { display: block; color: #111111;}
header #navArea nav .hdNav { margin-top: 25px;}
header #navArea nav .hdNav li { border-bottom: solid 1px #d2dcdf;}
header #navArea nav .hdNav li a { font-size: 14px; padding: 20px 35px 20px 0; text-align: left; background: url("../img/arr_bk.svg") right 25px center no-repeat; background-size: 11px 6px;}
header #navArea nav .hdNav li.boxArea {}
header #navArea nav .hdNav li.boxArea .boxBtn {}
header #navArea nav .hdNav li.boxArea .box { margin-left: 25px; text-align: left;   overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-5px); transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.3s ease;}
header #navArea nav .hdNav li.boxArea .box a { font-size: 12px; padding: 15px 35px 15px 0;}
header #navArea nav .hdNav li.boxArea.open .boxBtn { background: url("../img/arr_btm_gr.svg") right 25px center no-repeat; background-size: 16px 11px;}
header #navArea nav .hdNav li.boxArea.open .box { max-height: 800px; opacity: 1; transform: translateY(0);}
header #navArea nav .hdNav li.boxArea.open .box p { border-top: solid 1px #d2dcdf;}
header #navArea nav .linkBox { margin-top: 25px; display: flex; justify-content: space-between;}
header #navArea nav .linkBox .link { width: 49%;}
header #navArea nav .spNav { margin-top: 25px; border-top: solid 1px #d2dcdf;}
header #navArea nav .spNav li { border-bottom: solid 1px #d2dcdf;}
header #navArea nav .spNav li a { font-size: 12px; padding: 10px 35px 10px 0; text-align: left;}
header #navArea nav .spNav li a.arr { background: url("../img/arr_bk.svg") right 25px center no-repeat; background-size: 11px 6px;}
header #navArea nav .spNav li a.blank { background: url("../img/ico_blank_bk.svg") right 28px center no-repeat; background-size: 8px 8px;}
header .toggle_btn { display: block; position: fixed; top: 0; right: 0; width: 70px; height: 70px; transition: all .5s; cursor: pointer; z-index: 20; background: #2e4fb5;}
header .toggle_btn span { display: block; position: absolute; left: 12px; width: 45px; height: 1px; background-color: #fff; transition: all .5s;}
header .toggle_btn span:nth-child(1) { top: 25px;}
header .toggle_btn span:nth-child(2) { top: 35px;}
header .toggle_btn span:nth-child(3) { bottom: 25px; width: 22px;}
header #mask { display: none; transition: all .5s;}
/* open */
.open { overflow: hidden;}
.open header .hd_logo { z-index: 1;}
.open header nav { right: 0; opacity: 1;}
.open header .toggle_btn span { background-color: #fff;}
.open header .toggle_btn span:nth-child(1) { -webkit-transform: translateY(7px) rotate(-315deg); transform: translateY(7px) rotate(-315deg);}
.open header .toggle_btn span:nth-child(2) { top: 40px; -webkit-transform: translateY(-8px) rotate(315deg); transform: translateY(-8px) rotate(315deg);}
.open header .toggle_btn span:nth-child(3) { opacity: 0;}
.open header #mask { display: block; position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: #000; opacity: .3; z-index: 15; cursor: pointer;}
/* menu move keyframes */
header nav { animation: SlideOut 1.4s; top: -100vh; transition: all 0.6s;}
.open header nav { animation: SlideIn .4s; top: 0; transition: all 0.6s;}
}

@media screen and (max-width: 750px) {
header nav { padding: 50px 9% 100px 9%;}
header #navArea nav .link a { padding: 12px 35px 12px 10px;}
}

@keyframes SlideIn {
0% { opacity: 0;transform: translateY(-100%);}
100% { opacity: 1;transform: translateY(0); }
}
@keyframes SlideOut {
0% { opacity: 1;transform: translateY(0);}
100% { opacity: 0;transform: translateY(-100%);}
}


/*==================================
	recruitBlock
==================================*/
#recruitBlock { margin-top: 100px; background: url("../img/recruitBlock_bg.jpg") bottom center no-repeat; background-size: auto 90%;}
#recruitBlock .tit { font-size: 48px; text-align: center; color: #2e4fb5; font-weight: 700; line-height: 1.8;}
#recruitBlock .tit span { display: inline-block;}
#recruitBlock .txt { line-height: 2.5; font-weight: 600;}
#recruitBlock .linkBox { max-width: 780px; display: flex; justify-content: space-between; margin: 0 auto;}
#recruitBlock .linkBox .link { width: 46.15%;}
#recruitBlock .linkBox .link a { font-size: 28px; padding: 20px 30px; color: #fff; position: relative; border-radius: 50px;}
#recruitBlock .linkBox .link.recruit a:after { width: 34px; height: 34px; right: 30px; top: 25px; content: ""; background: url("../img/icon_recruit.png")no-repeat; background-size: 34px 34px; display: block; position: absolute;}
#recruitBlock .linkBox .link.entry a:after { width: 25px; height: 25px; right: 30px; top: 28px; content: ""; background: url("../img/icon_entry.png")no-repeat; background-size: 25px 25px; display: block; position: absolute;}
#recruitBlock .copy { width: 75.83%; max-width: 910px; margin: 0 auto; text-align: center;}
#recruitBlock .copy img { max-width: 100%;}
#recruitBlock .deco { position: relative; z-index: 10;}
#recruitBlock .deco img { vertical-align: bottom;}

@media screen and (min-width: 751px) {
#recruitBlock .txt { margin: 40px 0; text-align: center;}
#recruitBlock .copy { margin-top: 50px;}
}
@media screen and (max-width: 750px) {
#recruitBlock { margin-top: 50px;}
#recruitBlock .tit { font-size: 24px; margin-bottom: 20px;}
#recruitBlock .txt { font-size: 12px; margin-bottom: 25px;}
#recruitBlock .linkBox { margin-bottom: 35px; width: 100%;}
#recruitBlock .linkBox .link { width: 47.79%;}
#recruitBlock .linkBox .link a{ font-size: 15px; padding: 15px 30px;}
#recruitBlock .linkBox .link.recruit a:after { width: 18px; height: 18px; right: 20px; top: 18px; content: ""; background: url("../img/icon_recruit.png")no-repeat; background-size: 18px 18px; display: block; position: absolute;}
#recruitBlock .linkBox .link.entry a:after { width: 15px; height: 15px; right: 20px; top: 18px; content: ""; background: url("../img/icon_entry.png")no-repeat; background-size: 15px 15px; display: block; position: absolute;}
#recruitBlock .copy img { max-width: 73.2vw; width: 100%;}
#recruitBlock .deco img { max-width: 22.93vw; width: 100%;}
}

/*==================================
	footer
==================================*/
footer .ft_box { background: #2e4fb5; color: #fff;}
footer .ft_box a { color: #fff;}
footer .ft_box .box01 .logo { max-width: 95px;}
footer .ft_bar { background: #fff; color: #2e4fb5; text-align: center;}
footer .ft_bar a { color: #2e4fb5;}
@media screen and (min-width: 1201px) {
footer .ft_box { padding: 120px 0 170px 0;}
footer .ft_box .inner { display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .ft_box .box01 { width: 300px;}
footer .ft_box .box01 .link { margin-top: 50px;}
footer .ft_box .box01 .link a { padding: 20px; border: solid 1px #6880c8; background: url("../img/ico_blank_wh.svg") no-repeat; background-size: 14px 14px; background-position: right 30px center;}
footer .ft_box .box01 .link a:hover { opacity: 1; border: solid 1px #fff;}
footer .ft_box .box02 { width: 330px;}
footer .ft_box .box03 { width: 330px;}
footer .ft_box .linkList dt { font-size: 18px; padding-top: 40px; margin-top: 40px; border-top: solid 1px #6880c8;}
footer .ft_box .linkList dt.bt0 { padding-top: 0; margin-top: 0; border-top: none;}
footer .ft_box .linkList dt a { position: relative;}
footer .ft_box .linkList dt a span { color: #6880c8; position: absolute; right: 0;}
footer .ft_box .linkList dd { font-size: 13px; margin-top: 15px;}
footer .ft_box .linkList dd a:before { content: "・"; margin-right: 5px;}
footer .ft_bar .inner { padding: 40px 0; display: flex; justify-content: space-between;}
footer .ft_bar .ftNav { display: flex;}
footer .ft_bar .ftNav li { font-size: 13px; margin-right: 70px;}
footer .ft_bar copy { font-size: 14px;}
}
@media screen and (max-width: 1200px) {
footer .ft_box .box01 .link,
footer .ft_box .box02,
footer .ft_box .box03,
footer .ft_bar .ftNav { display: none;}
footer .ft_box { padding: 40px 0; text-align: center;}
footer .ft_box .box01 .logo { width: 12.66%; margin: 0 auto;}
footer .ft_bar { padding: 5px 0 10px 0;;}
footer .ft_bar copy { font-size: 9px;}
}


/* txt shine */
#recruitBlock .copyArea { bottom: 130px; letter-spacing: 0; line-height: 1.3; position: absolute; z-index: 11; left: 0; right: 0; margin: auto; text-align: center;}
#recruitBlock .copyTxt p { font-size: 90px; color: #2e4fb5; position: relative; color: transparent; background-image: linear-gradient( 70deg, rgb(46, 79, 181, 1)  45%, rgb(4, 171, 223, 1) 50%, rgb(46, 79, 181, 1) 55% ); background-clip: text; -webkit-background-clip: text; animation: txtShine 3s infinite; font-family: "Jost", sans-serif; font-weight: 600;}
#recruitBlock .copyTxt01 p { background-size: 220% 100%; animation-delay: 0s;}
#recruitBlock .copyTxt02 p { background-size: 250% 100%; animation-delay: 0.2s;}

@media screen and (max-width: 1130px) {
#recruitBlock .copyTxt p { font-size: 7.5vw;}
}
@media screen and (max-width: 750px) {
#recruitBlock .copyArea { bottom: 11.2vw;}
#recruitBlock .copyTxt p { font-size: 7.5vw;}
}
@keyframes txtShine {
  0%   { background-position: 100% 50%;}
  100% { background-position: 0% 50%;}
}