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

.pc{ display: none !important; }
.sp{ display: block !important; }

body{
	-webkit-text-size-adjust: none;
	color: #000;
	font-family: -apple-system, "Roboto-Regular", "Work Sans","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	font-size: 14px;
	line-height: 170%;
}

/* layout
------------------------------------ */
.subTit{
	position: relative;
	margin:-40px 0 20px;
	font-size: 80px;
	font-weight: 600;
	line-height: 1em;
	font-family: Roboto, "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", メイリオ, sans-serif;
}

.colBox{
	padding:0 5%;
}

.colBox h3 {
    margin-bottom: 6%;
    position: relative;
    font-size: 26px;
    font-weight: 200;
    line-height: 1.4em;
}

.lead{
	font-size:14px;
	line-height: 1.8em;
}


/* loading
------------------------------------ */

.loadTop #spLogo .topSVG { stroke: #000; fill: #fff; stroke-width:0.5; }
.loadTop #spLogo .topSVG.r {
	stroke-DASHarray: 860;
	stroke-DASHoffset: 860;
	-webkit-animation:lineAnimef 2.5s ease-out 0s forwards;
	animation:lineAnimef 2.5s ease-out 0s forwards;
}
@keyframes lineAnimef{
	0%  {stroke-DASHoffset:860;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}
@-webkit-keyframes lineAnimef{
	0%  {stroke-DASHoffset:860;fill:#fff;}
	70% {stroke-DASHoffset: 0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}

.loadTop #spLogo .topSVG.e {
	stroke-DASHarray: 910;
	stroke-DASHoffset: 910;
	-webkit-animation:lineAnimea 2.5s ease-out forwards;
	animation:lineAnimea 2.5s ease-out forwards;
}
@keyframes lineAnimea{
	0%  {stroke-DASHoffset:910;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}
@-webkit-keyframes lineAnimea{
	0%  {stroke-DASHoffset:910;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}

.loadTop #spLogo .topSVG.c {
	stroke-DASHarray: 900;
	stroke-DASHoffset: 900;
	-webkit-animation:lineAnimen 2.5s ease-out forwards;
	animation:lineAnimen 2.5s ease-out forwards;
}
@keyframes lineAnimen{
	0%  {stroke-DASHoffset:900;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}
@-webkit-keyframes lineAnimen{
	0%  {stroke-DASHoffset:900;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}

.loadTop #spLogo .topSVG.l {
	stroke-DASHarray: 1170;
	stroke-DASHoffset: 1170;
	-webkit-animation:lineAnimee 2.5s ease-out forwards;
	animation:lineAnimee 2.5s ease-out forwards;
}
@keyframes lineAnimee{
	0%  {stroke-DASHoffset:1170;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}
@-webkit-keyframes lineAnimee{
	0%  {stroke-DASHoffset:1170;fill:#fff;}
	70% {stroke-DASHoffset:0;fill:#fff;}
	100%{stroke-DASHoffset:0;fill:#000;}
}

#heroImg .ph{
	top:3vh;
	top:3%;
}

.cathTxt dt{
	opacity: 0;
	margin-bottom:5%;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.2em;
}

.cathTxt dd{
	opacity: 0;
	font-size:16px;
	font-weight: 300;
	line-height: 1.8em;
	letter-spacing: 0.1em;
}

.fade dt,.fade dd{
	opacity: 1
}

.cathTxt {
	height: 40vh;
    margin-top: -10%;
    padding: 8% 3%;
    position: relative;
 }

.fade{
    background: #FFF;
}

 .slide:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: #002f7e;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: left;
    -moz-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: transform .9s cubic-bezier(.19,1,.22,1);
    transition: transform .9s cubic-bezier(.19,1,.22,1);
    -webkit-animation: h1After 1.4s cubic-bezier(.19,1,.22,1) 2.5s forwards;
    animation: h1After 1.4s cubic-bezier(.19,1,.22,1) 2.5s forwards;
}

@keyframes h1After{
	50%{
		-moz-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		left:0;
	}
	100%{
		-moz-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		left:100%;
	}
}
@-webkit-keyframes lineAnimes{
	50%{
		-moz-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		left:0;
	}
	100%{
		-moz-transform: scaleX(1);
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		left:100%;
	}
}

.scroll{
	display: none;
    width: 1px;
    height: 20px;
    position: absolute;
    right: 50%;
    top: 80%;
}

.scroll:after{
    content: "";
    width: 1px;
    height: 20px;
    position: absolute;
    right: 125%;
    bottom: 6%;
    background: #000;
    -webkit-animation: scroll 1.2s linear 0s infinite;
    -moz-animation: scroll 1.2s linear 0s infinite;
    animation: scroll 1.2s linear 0s infinite;
}

@-webkit-keyframes scroll {
 0%{height:0%;top:0px;bottom:auto}
46% {
	height: 100%;
	top: 0;
	bottom: auto
 }
50% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
54% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
100% {
	height: 0%;
	bottom: 0px;
	top: auto
 }
}
@-moz-keyframes scroll {
 0%{height:0%;top:0px;bottom:auto}
46% {
	height: 100%;
	top: 0px;
	bottom: auto
 }
50% {
	height: 100%;
	bottom: 0px;
	top: auto
 }
}

/* charm
------------------------------------ */
.charm{
	padding:30px 0 60px;
	overflow: hidden;
	position: relative;
	z-index:1;
}


/* task
------------------------------------ */
.task{
	padding:40px 0 60px;
	overflow: hidden;
	position: relative;
}

.task .subTit{
	color:#f5f5f5;
	margin-top:-52px;
}

.serviceBox,
.recruitList {
    margin-top: 4%;
}

.serviceBox li,
.recruitList li {
    margin: 0 0 3% 0;
    padding: 8% 6%;
    font-size: 14px;
    position: relative;
    background: #f5f5f5;
    transition: 0.6s all ease;
    opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transition: 0.6s all ease;
}


.serviceBox li dt{
	margin:3% 0 6%;
	font-size:20px;
	font-weight: 600;
	text-align: center;
	color: #002f7e;
}

.serviceBox li dd{
	font-size: 14px;
	line-height: 1.8em;
}



/* Action
------------------------------------ */

.action{
	padding:40px 0 60px;
	overflow: hidden;
	position: relative;
	background: #f5f5f5;
}

.action .subTit{
	margin-top: -50px;
	color:#eee;
}

.action .subTit:before,
.action .colBox h3:before,
.action .colBox .lead:before{
	background: #f5f5f5;
}

.recruitBox{
	margin:8% 0;
}

.recruitBox .bx-wrapper{
    margin: 0;
    padding: 8% 6% 13%;
    font-size: 14px;
    overflow: hidden;
    position: relative;
    background: #FFF;
    transition: 0.6s all ease;
}

.stepList{
	 display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bx-wrapper .bx-pager{
	bottom:30px !important;
}


.recruitBox .bx-wrapper dt{
	margin-bottom:4%;
	font-size:20px;
	line-height: 1.4em;
	font-weight: 600;
	text-align: center;
	color: #063077;
}

.recruitBox .bx-wrapper dd{
	line-height: 2em;
	font-size: 16px;
}


.recruitBox .flow {
    padding: 8% 5% 16%;
    font-size: 14px;
    position: relative;
    background: #002f7e;
    transition: 0.6s all ease;
}


.fIcon{
	width: 80px;
	height: 80px;
	margin: 0 auto;
	background: #FFF;
	border-radius: 50%;
	line-height: 1.4em;
}

.fIcon svg{
	height: 38%;
	margin:17px 0 2px;
}

.flow li:nth-child(3) .fIcon svg{
	height: 50%;
    margin-top: 6px;
}

.flow li:nth-child(1) .fIcon svg{
	height: 48%;
    margin-top: 9px;
}

.fTit{
	font-size: 10px;
}

.arrow{
	width: 15px;
	margin:4% auto;
	opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transition: 0.6s all ease;
}

.seach{
	width: 80%;
	padding:15px;
	margin:0 auto;
	background: #FFF;
	border-radius:5px;
	position: relative;
	opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transition: 0.6s all ease;
}

.seach:after{
	content: "\f002";
	font-family: "FontAwesome";
	position: absolute;
	right: 10px;
	bottom:13px;
	font-size: 20px;
	color: #DDD;
}

.seach p{
	text-align: left;
	font-size:16px;
}

.fa-mouse-pointer{
	position: absolute;
	right: 40px;
	bottom: -15px;
	font-size: 25px;
}

.answer{
	font-size: 20px;
	color: #FFF;
	font-weight: 600;
	opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    transition: 0.6s all ease;
}

.recruitList li{
	background: #FFF;
}

.recruitList li dt{
	margin-bottom: 4%;
	font-size:20px;
	color: #063077;
	font-weight: 600;
	line-height: 1.6em;
}

.recruitList li dd{
	line-height: 2em;
}

/* Growth
------------------------------------ */

.growth{
	padding:40px 0 60px;
	overflow: hidden;
	position: relative;
	background: #f6efd8;
}

.growth .subTit{
	margin-top: -55px;
	color:#ece3c7;
}

.growth .subTit:before,
.growth .colBox h3:before,
.growth .colBox .lead:before{
	background: #f6efd8;
}

.formArea{
	margin-top:10%;
}

.formArea .form {
	width:auto;
	padding: 25px 0 5px;
	margin-bottom:0;
}

.formArea h2 {
	margin-bottom: 16px;
	font-size: 20px;
}

.formArea h2 + p {
    font-size: 14px;
}

.formArea .form tr {
    display: block;
    margin-bottom: 24px;
}

.formArea .form th,
.formArea .form td {
	display: block;
}

.formArea .form th {
    margin-bottom: 6px;
    text-align: left;
 }

.formArea .form td {
    padding: 0;
}

.formArea #form_family_name,
.formArea #form_given_name {
    width: 90%;
 }

.formArea #form_family_name {
    margin-right: 0;
    margin-bottom: 8px;
 }

.formArea #form_family_name + label.error {
    margin: -8px 0 8px;
 }

.formArea label.error {
    display: block;
    position: static;
 }

.formArea input[type="text"],
.formArea textarea {
	width:90%;
    padding: 8px 16px;
    font-size: 16px;
 }

.formArea .contact_agree {
    margin-bottom: 15px;
 }

.formArea .contact_agree label {
    padding-left: 24px;
    font-size: 14px;
 }

.formArea .contact_agree label:before {
    width: 16px;
    height: 16px;
    margin-top: -8px;
 }

.formArea .contact_agree label:after {
    width: 16px;
    height: 16px;
    margin-top: -8px;
 }

.formArea .privacyLink {
    margin-bottom: 30px;
 }

.formArea #btn_contact_form {
    width: 100%;
    min-width: inherit;
    max-width: 256px;
    padding: 12px 0;
    font-size: 16px;
 }

  .remodal {
    padding: 24px 16px;
  }
  .remodal h1 {
    font-size: 18px;
  }
  .remodal .remodal-cancel {
    min-width: inherit;
    max-width: 320px;
    padding: 10px 32px;
  }

  /*----------------------------------------------------------------------------------
    footer
  ----------------------------------------------------------------------------------*/
  .footer {
    padding: 48px 16px 16px;
  }
  .footer .company {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-bottom: 44px;
  }
  .footer .company > div:first-child {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    padding-right: 0;
  }
  .footer .company > div:first-child a {
    text-align: center;
  }
  .footer .company > div:first-child a .logo {
    display: inline-block;
    margin-bottom: 16px;
  }
  .footer .company > div:last-child {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding-left: 0;
  }
  .footer .company > div:last-child strong {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .footer .company > div:last-child .tel {
    margin-bottom: 0;
    text-align: center;
  }
  .footer .company > div:last-child .tel:before {
    display: none;
  }
  .footer .company > div:last-child .tel a {
    padding: 0 16px 8px;
  }
  .footer .company > div:last-child .tel img {
    display: block;
    margin-bottom: 8px;
  }
  .footer .company > div:last-child .tel span {
    display: block;
  }
  .footer .company > div:last-child .tel img,
  .footer .company > div:last-child .mail img {
    height: 14px;
  }
  .footer .address {
    margin: 0 auto 24px;
    font-size: 10px;
  }
  .footer .address dl {
    display: block;
    margin-bottom: 16px;
  }
  .footer .address dl dt,
  .footer .address dl dd {
    display: block;
    padding-bottom: 0;
  }
  .footer .address dl dt {
    line-height: 1;
    margin-bottom: 4px;
  }