@charset "utf-8";
:root{
	--box-space-ratio: .55;

	--xs-space: 80px;
	--s-space: 100px;
	--m-space: 120px;
	--l-space: 150px;
	--xl-space: 200px;

}
@media screen and (min-width: 768px) {
	:root{
		--box-space-ratio: .6;
	}
}
@media screen and (min-width: 1024px) {
	:root{
		--box-space-ratio: 1;
	}
}


.pt-xs{ padding-top: calc(var(--xs-space) * var(--box-space-ratio)) }
.pt-s{ padding-top: calc(var(--s-space) * var(--box-space-ratio)) }
.pt-m{ padding-top: calc(var(--m-space) * var(--box-space-ratio)) }
.pt-l{ padding-top: calc(var(--l-space) * var(--box-space-ratio)) }
.pt-xl{ padding-top: calc(var(--xl-space) * var(--box-space-ratio)) }

.pb-xs{ padding-bottom: calc(var(--xs-space) * var(--box-space-ratio)) }
.pb-s{ padding-bottom: calc(var(--s-space) * var(--box-space-ratio)) }
.pb-m{ padding-bottom: calc(var(--m-space) * var(--box-space-ratio)) }
.pb-l{ padding-bottom: calc(var(--l-space) * var(--box-space-ratio)) }
.pb-xl{ padding-bottom: calc(var(--xl-space) * var(--box-space-ratio)) }

.ptb-xs{ padding-top: calc(var(--xs-space) * var(--box-space-ratio)); padding-bottom: calc(var(--xs-space) * var(--box-space-ratio)) }
.ptb-s{ padding-top: calc(var(--s-space) * var(--box-space-ratio)); padding-bottom: calc(var(--s-space) * var(--box-space-ratio)) }
.ptb-m{ padding-top: calc(var(--m-space) * var(--box-space-ratio)); padding-bottom: calc(var(--m-space) * var(--box-space-ratio)) }
.ptb-l{ padding-top: calc(var(--l-space) * var(--box-space-ratio)); padding-bottom: calc(var(--l-space) * var(--box-space-ratio)) }
.ptb-xl{ padding-top: calc(var(--xl-space) * var(--box-space-ratio)); padding-bottom: calc(var(--xl-space) * var(--box-space-ratio)) }

.mt-xs{ margin-top: calc(var(--xs-space) * var(--box-space-ratio)) }
.mt-s{ margin-top: calc(var(--s-space) * var(--box-space-ratio)) }
.mt-m{ margin-top: calc(var(--m-space) * var(--box-space-ratio)) }
.mt-l{ margin-top: calc(var(--l-space) * var(--box-space-ratio)) }
.mt-xl{ margin-top: calc(var(--xl-space) * var(--box-space-ratio)) }

.mb-xs{ margin-bottom: calc(var(--xs-space) * var(--box-space-ratio)) }
.mb-s{ margin-bottom: calc(var(--s-space) * var(--box-space-ratio)) }
.mb-m{ margin-bottom: calc(var(--m-space) * var(--box-space-ratio)) }
.mb-l{ margin-bottom: calc(var(--l-space) * var(--box-space-ratio)) }
.mb-xl{ margin-bottom: calc(var(--xl-space) * var(--box-space-ratio)) }

.mtb-xs{ margin-top: calc(var(--xs-space) * var(--box-space-ratio)); margin-bottom: calc(var(--xs-space) * var(--box-space-ratio)) }
.mtb-s{ margin-top: calc(var(--s-space) * var(--box-space-ratio)); margin-bottom: calc(var(--s-space) * var(--box-space-ratio)) }
.mtb-m{ margin-top: calc(var(--m-space) * var(--box-space-ratio)); margin-bottom: calc(var(--m-space) * var(--box-space-ratio)) }
.mtb-l{ margin-top: calc(var(--l-space) * var(--box-space-ratio)); margin-bottom: calc(var(--l-space) * var(--box-space-ratio)) }
.mtb-xl{ margin-top: calc(var(--xl-space) * var(--box-space-ratio)); margin-bottom: calc(var(--xl-space) * var(--box-space-ratio)) }

@media screen and (min-width: 1024px){
	.highlight-btn a,
	.highlight-btn svg,
	.zoom-item{
	  transition: all .4s;
	  cursor: pointer;
	}
	.highlight-btn > a:hover{
	  background-color: var(--color-fff);
	  color: var(--color-base);
	}
	.highlight-btn > a:hover svg{
	  fill: var(--color-base);
	}
	.border-item{
		border: solid 3px transparent;
		transition: all .4s;
	  cursor: pointer;
	}
	.border-item:hover{
		border: solid 3px var(--color-base);
		border-radius: 20px;
	}
	.scale-105,
	.scale-110,
	.scale-115{
		transform: scale(1);
	}
	.scale-105:hover{
		transform: scale(1.05);
	}
	.scale-110:hover{
		transform: scale(1.1);
	}
	.scale-115:hover{
		transform: scale(1.15);
	}
}
.animation.op{
	opacity: 0;
	transition-duration: 1s;
	transition-timing-function: ease-in;
}
.animation.op.on{
	opacity: 1;
}
.animation.move-left{
	opacity: 0;
  transform: translate3d(-40px,0,0);
  transition-duration: 1s, .8s;
  transition-timing-function: ease-in, ease;
  transition-property: opacity, transform;
}

.animation.move-left.on{
	opacity: 1;
  transform: translate3d(0,0,0);
}

.animation.mask-bg{
	position: relative;
	overflow: hidden;
}
.animation.mask-bg .target-cts{
	position: relative;
	opacity: 0;
  transition-delay: 1s;
  z-index: 0;
}
.animation.mask-bg::before{
	content: '';
	position: absolute;
	background-color: var(--color-base);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
  transform: translate(100%, 0);
}
.animation.mask-bg.on::before{
	animation: animation-bg  1.6s ease-out forwards;
}
.animation.on.mask-bg .target-cts{
	opacity: 1;
}

@-webkit-keyframes animation-bg {
  0% {
    -webkit-transform: translate(-101%, 0);
            transform: translate(-101%, 0);
    opacity: 0;
  }
  40%,60% {
    opacity: 1;
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}
@keyframes animation-bg {
  0% {
    -webkit-transform: translate(-101%, 0);
            transform: translate(-101%, 0);
    opacity: 0;
  }
  40%,60% {
    opacity: 1;
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(100%, 0);
            transform: translate(100%, 0);
  }
}

/*
   background
--------------------------------------------------------------*/
.body-bg{
  position: fixed;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-base3);
}
.body-bg::before,
.body-bg::after,
.body-bg span::before,
.body-bg span::after{
  content: '';
  display: block;
  position: absolute;
  filter: blur(20vw);
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;

}
.body-bg::before{
  width: 60vh;
  height: 60vh;
  background: var(--color-base2);
  animation-name: body-bg1;
  z-index: 30;
}
.body-bg::after{
  width: 50vh;
  height: 50vh;
  background: var(--color-base3);
  animation-name: body-bg2;
}
.body-bg span::before{
  width: 30vh;
  height: 30vh;
  background: #feed9f;
  animation-name: body-bg3;
  z-index: 10;
}
.body-bg span::after{
  width: 50vh;
  height: 50vh;
  background: var(--color-base1);
  animation-name: body-bg4;
  z-index: 20;
}
@keyframes body-bg1 {
  0%{top: -10%; left: 20%}
  25%{top: -10%; left: 0%}
  50%{top: 0%; left: 40%}
  75%{top: 10%; left: 10%}
  100%{top: 0%; left: 0%}
}
@keyframes body-bg2 {
  0%{bottom: -10%; right: -10%}
  25%{bottom: 30%; right: 0%}
  50%{bottom: 60%; right: 20%}
  75%{bottom: 40%; right: 0%}
  100%{bottom: 20%; right: -10%}
}
@keyframes body-bg3 {
  0%{top: -10%; right: 20%}
  25%{top: -10%; right: 0%}
  50%{top: 0%; right: 40%}
  75%{top: 10%; right: 10%}
  100%{top: 0%; right: 0%}
}
@keyframes body-bg4 {
  0%{bottom: -10%; left: -10%}
  25%{bottom: 0%; left: 10%}
  50%{bottom: 10%; left: 0%}
  75%{bottom: 0%; left: 10%}
  100%{bottom: -5%; left: 0%}
}
@media screen and (min-width: 1024px) {
  .body-bg::before{
    width: 80vh;
    height: 80vh;
    filter: blur(20vh);
  }
  .body-bg::after{
    width: 80vh;
    height: 80vh;
    filter: blur(20vh);
  }
  .body-bg span::before{
    width: 60vh;
    height: 60vh;
    filter: blur(20vh);
  }
  .body-bg span::after{
    width: 60vh;
    height: 60vh;
    filter: blur(20vh);
  }
  @keyframes body-bg1 {
    0%{top: -10%; left: -10%}
    50%{top: 40%; left: 40%}
    100%{top: 10%; left: 60%}
  }
  @keyframes body-bg2 {
    0%{bottom: -10%; right: -10%}
    50%{bottom: 0%; right: 40%}
    100%{bottom: -5%; right: 0}
  }
  @keyframes body-bg3 {
    0%{top: 20%; right: 40%}
    50%{top: 60%; right: 30%}
    100%{top: 10%; right: 20%}
  }
  @keyframes body-bg4 {
    0%{bottom: -10%; left: -10%}
    50%{bottom: 0%; left: -20%}
    100%{bottom: -5%; left: -10%}
  }
}

/*.hp-btn > span{
  position: relative;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  display: block;
}
.hp-btn > span::before,
.hp-btn > span::after{
  content: '';
  position: absolute;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.hp-btn > span::before{
  top: 2px;
  left: 0;
  border: solid 1px var(--color-base1);
}
.hp-btn > span::after{
  top: 0;
  left: 2px;
  background-color: var(--color-base1);
}*/

/*
   header
--------------------------------------------------------------*/
.header-logo{
  width: 130px;
}
.header-logo svg{
  fill: var(--color-base);
}
.p-index .header-logo svg{
  fill: var(--color-fff);
}
header.active .header-logo svg{
  fill: var(--color-base);
}
@media screen and (min-width: 768px){
  .header-logo{
    width: 160px;
  }
}
.header-bar-nav .nav-item{
  color: var(--color-base);
}
.p-index .header-bar-nav .nav-item{
  color: var(--color-fff);
}
.header-bar-nav .h-nav{
  position: relative;
}
.header-bar-nav .h-nav .children{
  position: absolute;
  left: -15px;
  top: 48px;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  transition: all .3s;
}
.header-bar-nav .h-nav:hover .children{
  visibility: visible;
  opacity: 1;
}
.header-bar-nav{
  opacity: 1;
  visibility: visible;
  transition: all .5s;
}
body.scroll-start .header-bar-nav{
  transform: translateY(-40px);
  opacity: 0;
  visibility: hidden;
}
.header-bar-nav .h-nav .children::before{
  position: absolute;
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-base);
  opacity: .5;
}
.js-modal-btn > span,
.js-modal-btn > span::before,
.js-modal-btn > span::after{
  content: '';
  display: block;
  position: relative;
  left: 0;
  width: 20px;
  height: 2px;
  -webkit-transition: all .6s;
  transition: all .6s;
  background-color: var(--color-base);
}
.js-modal-btn > span::before,
.js-modal-btn > span::after{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%) rotate(0deg);
        transform: translate(-50%,-50%) rotate(0deg);
}
.js-modal-btn > span::before{
  margin-top: -7px;
}
.js-modal-btn > span::after{
  margin-top: 7px;
}
header.active .js-modal-btn span{
  background-color: transparent;
}
header.active .js-modal-btn > span::before{
  margin-top: 0;
}
header.active .js-modal-btn > span::after{
  margin-top: 0;
}
header.active .js-modal-btn > span::before{
  transform: translate(-50%,-50%) rotate(-45deg);
  -webkit-transform: translate(-50%,-50%) rotate(-45deg);
}
header.active .js-modal-btn > span::after{
  transform: translate(-50%,-50%) rotate(-135deg);
  -webkit-transform: translate(-50%,-50%) rotate(-135deg);
}
.header-bar-nav,
.header-right .highlight-btn{
  visibility: visible;
  opacity: 1;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
header.active .header-bar-nav,
header.active .header-right .highlight-btn{
  opacity: 0;
  visibility: hidden;
}
.js-modal{
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}
.modal-inner{
  opacity: 0;
  -webkit-transition: all 0s ease;
  transition: all 0s ease;
}
header.active .js-modal{
  visibility: visible;
  opacity: 1;
}
header.active .modal-inner{
  opacity: 1;
  -webkit-transition: all 1s ease .6s;
  transition: all 1s ease .6s;
}
@media screen and (max-width: 768px){
  .modal-inner > nav{
    max-height: 72vw;
    padding-bottom: 50px;
  }
}
.modal-inner .children{
  white-space: normal;
}
.modal-inner .children > li,
.header-bar-nav .h-nav .children li{
  position: relative;
  padding-left: 15px;
  line-height: 1.5;
}
.modal-inner .children > li::before,
.header-bar-nav .h-nav .children li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(calc(0.75em - 3px));
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--color-base);
}
.modal-link .parent{
  position: relative;
  padding-right: 15px;
}
.modal-link .parent::before,
.modal-link .parent::after{
  content: '';
  position: absolute;
  width: 10px;
  height: 2px;
  background-color: var(--color-base);
  right: 0;
  top: 8px;
}
.modal-link .parent::after{
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg) ;
  transition: all .5s;
}
.modal-link .parent.active::after{
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}
.entry-sp-btn{
  bottom: 10px;
  left: 0;
}
@media screen and (min-width: 1024px){
  .modal-link .parent::before,
  .modal-link .parent::after{
    top: 14px;
  }
  .header-logo a,
  .header-bar-nav a,
  .header-bar-nav .parent{
    transition: all .4s;
  }
  .header-logo a:hover,
  .header-bar-nav a:hover,
  .header-bar-nav .parent:hover{
    opacity: .5;
  }
  .header-bar-nav .parent,
  .modal-inner .parent{
    cursor: pointer;
  }
  .js-modal-btn:hover{
    cursor: pointer;
  }
  .modal-link > li a,
  .modal-link .parent{
    transition: all .4s;
  }
  .modal-link > li a:hover,
  .modal-link .parent:hover{
    color: var(--color-base);
  }
}

/*
   recruitment-type
--------------------------------------------------------------*/
.recruitment-type-item{
  width: 81vw;
}
@media screen and (min-width: 768px) {
  .recruitment-type-item{
    width: 48vw;
  }
}
@media screen and (min-width: 1024px) {
  .recruitment-type-item{
    width: auto;
  }
}

/*
   recruitment-type
--------------------------------------------------------------*/
.recruit-next::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height:0%;
  background-color: var(--color-base1);
}
.recruit-next.animation.on::before{
  animation: recruit-title-line 1s ease-out forwards;
}
@keyframes recruit-title-line {
  0% {
    height: 0%;
  }
  100% {
    height: 50px;
  }
}
@media screen and (min-width: 768px){
  @keyframes recruit-title-line {
    0% {
      height: 0%;
    }
    100% {
      height: 65px;
    }
  }
}
@media screen and (min-width: 1024px){
  @keyframes recruit-title-line {
    0% {
      height: 0%;
    }
    100% {
      height: 110px;
    }
  }
}

/*
   recruit-appeal
--------------------------------------------------------------*/
.recruit-appeal + .recruit{
  margin-top: calc(var(--m-space) * var(--box-space-ratio) * -1);
}
.recruit-data dt,
.recruit-data dd{
  padding: 20px;
}
.recruit-data dt{
  width: 30%;
}
.recruit-data dd{
  width: 70%;
}
.recruit-data dd span{
  padding-top: 4px;
  display: block;
}
.recruit-data dl + dl{
  margin-top: 2px;
}
.recruit-data dt,
.recruit-data dd{
  position: relative;
  text-align: left;
}
.recruit-data dt::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-base2);
  opacity: .6;
}
.recruit-data dd::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-base3);
  opacity: .6;
}
.recruit-data dt > span,
.recruit-data dd > span{
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 768px){
  .recruit-data dt,
  .recruit-data dd{
    padding: 30px;
  }
  .recruit-data dt{
    width: 25%;
  }
  .recruit-data dd{
    width: 75%;
  }
}