@charset "UTF-8";
:root{
  --mainColor:#1f53a0;
  --subColor:#0daae4;
  --pointColor:#f86300;
  --subpointColor:#ffda00;
  --fontColor:#383838;

  /* --pointColorRGB:245,102,52;
  --ttlColor:#a64f30;
  --ttlColorRGB:166,79,48;
  --shadow:0 4px 8px 0 rgba(74,85,99,.2); */
  --GRY:#757575;
  --GRN:#00892E;
  --RED:#D8000C;
  --BLU:#1077CF;
  --mainAnime:all .3s ease;
  --vw2:min(2.22vw,16px);
  --vw3:min(3.33vw,24px);
  --vw4:min(4.44vw,32px);
  --vw5:min(5.56vw,40px);
  --vw6:min(6.67vw,48px);
  --vw7:min(7.78vw,56px);
  --vw8:min(8.89vw,64px);
  --vw10:min(10vw,72px)

}
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@400;700&display=swap');
body {
  font-family:'Poppins', 'Noto Sans JP', sans-serif;
  font-weight:400; /* 標準の太さ */
  font-size:14px;
  line-height:1.6;
  background:#fff;
  color:var(--fontColor)
}

/* ヘッダー */
header {
  position:relative;
  background:#FFF;
}
header .inner{
  display:flex;
  flex-wrap:wrap;
  min-height:60px;
  align-items:center;
  justify-content:space-between;
  padding:0 76px 0 min(4vw,40px);
}
header .inner h1{
  padding-right:16px;
}
header .inner h1 img{
  max-height:44px;
}
.navToggle{
  position:fixed;
  top:0;
  right:0;
  z-index:100;
  width:60px;
  height:60px;
  border:none;
  background:var(--mainColor);
  cursor:pointer;
}
.navToggle:hover{
  background:#0079E7
}
.navToggle span {
  position:absolute;
  left:15px;
  width:30px;
  height:3px;
  background-color:#FFF;
  border-radius:3px;
  transition:all .4s;
}
.navToggle span:nth-of-type(1) {
  top:19px;
}
.navToggle span:nth-of-type(2) {
  top:29px;
}
.navToggle span:nth-of-type(3) {
  top:39px;
}

/* メニューオープン時 */
.open .navToggle span:nth-of-type(1) {
  transform:translateY(9px) rotate(-45deg);
}
.open .navToggle span:nth-of-type(2) {
  opacity:0;
}
.open .navToggle span:nth-of-type(3) {
  transform:translateY(-11px) rotate(45deg);
}

#gNav {
  position:fixed;
  top:0;left:0;
  z-index:90;
  width:100%;
  max-width:40em;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:min(6vw,24px);
  background-color:#fff;
  box-shadow:2px 0 4px rgba(0,0,0,.1);
  transform:translateX(-150vw);
  opacity:0;
  transition:transform .4s;
}
.open #gNav{
  opacity:1;
  transform:translateX(0);
}
#gNav li a{
  display:block;
  padding:.5em 0;
  color:var(--fontColor);
  font-size:min(4.8vw,1.7em);
  text-align:center;
  font-weight:bold;
}
#gNav li a:hover{
  color:var(--subColor);
}
.headBtn{
  position:fixed;
  right:60px;
  z-index:100;
  height:60px;
}
.headBtn a{
  display:block;
  width:100%;
  height:60px;
  padding:0 1.5em;
  background:var(--pointColor);
  text-decoration:none;
  color:#FFF;
  font-weight:700;
  line-height:60px
}
.headBtn a:hover {
  background-color:#f79200;
}
.headBtn a::after {
  position:relative;
  right:0;
  margin-left:4px;
  transition:all .3s ease;
  font-size:.75em;
}
.headBtn a:hover:after {
  right:-.5em;
}
main .inner{
  width:min(88vw,900px);
  margin-left:auto;
  margin-right:auto;
  padding:min(6vw,56px) 0 min(9vw,72px);
}
main h2{
  font-size:min(7.8vw,3.45em);
  color:var(--mainColor);
  text-align:center;
  line-height:1.4;
  margin-bottom:16px;
}
#first{
  position:relative;
}
#first h2{
  position:absolute;
  top:0;bottom:0;left:0;right:0;
  z-index:1;
  margin:0;
}
#first h2 picture,#first h2 img{
  width:100%;
}
.firsCatch{
  position:absolute;
  bottom:0;right:0;
  max-width:15em;
  font-size:18px;
  font-weight:bold;
  text-align:right;
}
.firsCatch span{
  display:inline-block;
  padding:.1em .5em;
  background-color:var(--mainColor);
  color:#FFF;
}
.firsCatch span strong{
  font-size:1.6em;
  color:var(--subpointColor);
}

#intro{
  text-align:center;
}
#intro h2{
  font-size:min(6vw,2.67em);
}
.intrPoint{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  max-width:540px;
  padding:0;
  margin:0 auto 16px auto;
}
.intrPoint li{
  width:min(40vw,160px);
  height:min(40vw,160px);
  align-self:center;
  align-content:center;
  border-radius:160px;
  background-color:var(--subColor);
  line-height:0;
}
#intro .catch{
  margin:.5em 0;
  font-size:min(5.4vw,2.4em);
  color:var(--mainColor);
  font-weight:bold;
}

#jobs{
  background-color:var(--mainColor);
  color:#FFF
}
#jobs h2{
  color:#FFF
}
#jobs h2 span{
  display:block;
  color:var(--pointColor);
  font-size:.75em;
}
.jobsList{
  margin-top:min(4vw,24px)
}
.jobsBox{
  max-width:438px;
  margin:0 auto min(5vw,24px);
}
.jobsBox h4{
  position:relative;
  padding-left:1em;
  font-size:min(4.8vw,1.7em);
  color:var(--subpointColor);
  line-height:1.3;
}
.jobsBox h4 span{
  display:inline-block;
}
.jobsBox h4:before{
  content:'';
  position:absolute;
  left:5px;bottom:.1em;
  display:inline-block;
  width:2px;
  height:.9em;
  background-color:var(--subpointColor);
  transform:rotate(-30deg);
}
.jobsB-img{
  position:relative;
}
.jobsB-img h3{
  position:absolute;
  left:0;bottom:0;
  display:inline-block;
  padding:.2em .5em;
  margin:0;
  background-color:#FFF;
  font-size:min(7.8vw, 2.3em);
  color:var(--mainColor);

}
.jobsB-txt{
  height:100%;
  padding:1em 1em .8em;
  background-color:#FFF;
  color:var(--fontColor);
}
#feature{
  background:url(../img/feature_bg.jpg) no-repeat 50% 50%/cover #b6d4f6;
}
#feature h2 > span{
  display:block;
  font-size:.75em;
}
.featBox{
  background-color:#FFF;
  margin-top:40px;
  padding:1em 1em .8em;
}
.featBox h3{
  text-align:center;
  font-size:18px;
  color:var(--pointColor);
}
.featB-img{
  margin:-40px auto 10px;
  text-align:center;
}
.featB-ttlBLK{
  display:block;
  font-size:1.3333333em;
  color:var(--fontColor);
}
.featB-ttlNUM{
  font-size:4em;
  line-height:1;
}

#people{
  padding:min(6vw, 56px) 0 min(9vw, 72px);
}
#people h2{
  margin-bottom:min(4vw, 40px)
}
.peopBox{
  position:relative;
  margin-bottom:min(5vw, 40px);
}
.peopB-img{
  position:relative;
  margin-bottom:2em;
}
.peopB-img img{
  width:100%;
  max-width:none;
}
.peopBox:nth-child(even) .peopB-img{
  text-align:right;
}
.peopB-img h3{
  width:10em;
  position:absolute;
  bottom:-1em;
  margin-bottom:0;
  color:var(--subColor);
  font-size:min(5.4vw,2em);
  line-height:1;
}
.peopBox:nth-child(odd) .peopB-img h3{
  text-align:right;
  right:calc(6vw - .5em);
}
.peopBox:nth-child(even) .peopB-img h3{
  text-align:left;
  left:calc(6vw - .5em);
}

.peopB-img h3 span{
  display:inline-block;
  padding:.4em .5em;
  background-color:#FFF;
}
.peopB-img h3 span:not(:first-of-type){
  margin-top:-1px;
}
.peopB-txt{
  width:min(88vw, 900px);
  margin-left:auto;
  margin-right:auto;
}
#flow{
  background-color:var(--mainColor);
  color:#FFF
}
#flow h2{
  margin-bottom:min(3vw, 32px);
  color:#FFF;
}
#flow ol{
  list-style:none;
  padding-left:0;
}
#flow ol dl{
  margin:0;
  padding:0;
}
#flow ol dt{
  position:relative;
  z-index:1;
  display:block;
  width:6.5em;
  padding:.02em 16px .02em 24px;
  border-radius:4em;
  background-color:var(--pointColor);
  font-weight:bold;
  font-size:min(4.4vw,1.5em);
  text-align:center;
}
#flow ol li dt::before{
  content:"";
  display:block;
  position:absolute;
  left:calc(16px - 3px);top:calc(50% - 4px);
  width:8px;
  height:8px;
  border-radius:100px;
  background-color:#FFF;
}
#flow ol li dt::after{
  content:"";
  display:block;
  position:absolute;
  left:16px;
  width:2px;
  height:50%;
  background-color:#FFF;
}
#flow ol li:not(:first-of-type) dt::after{
  top:0;
}
#flow ol li:first-of-type dt::after{
  bottom:0;
}
#flow ol li dd{
  position:relative;
  padding:.5em 0 1.5em 32px;
}
#flow ol li:last-of-type dd{
  padding-bottom:0;
}
#flow ol li dd h3{
  margin-bottom:0;
  color:var(--pointColor);
  font-size:min(5.4vw,2.4em);
}
#flow ol li dd a{
  color:#FFF;
}
#flow ol li:not(:last-of-type) dd::after{
  content:"";
  display:block;
  position:absolute;
  left:16px;top:0;bottom:0;
  width:2px;
  height:100%;
  background-color:#FFF;
}
#faq{
  background-color:#ebebeb;
}
#faq details{
  margin-bottom:.5em;
}
#faq summary{
  position:relative;
  padding:.5em 1em;
  background-color:#FFF;
  border-radius:8px;
  cursor:pointer;
  list-style:none;
  font-size:1.14em;
  font-weight:bold;
}
#faq summary::after {
  position:absolute;
  right:16px;top:10px;
	content:"\e901";
  color:var(--mainColor);
  font-weight:bold;
  font-size:20px;
}
#faq details[open] summary::after {
	content:"\e911"
}
details p{
  margin-top:.5em;
}
#company table th{
  text-align:left;
  font-weight:normal;
}
#company table td dl{
  display:flex;
  flex-wrap:wrap;
  margin-bottom:0;
}
#company table td dl dt{
  width:7em;
}
#company table td dl dd{
  width:calc(100% - 7em);
}
footer{
  padding:min(4vw,40px);
  background-color:var(--mainColor);
  color:#FFF
}
footer a{
  color:#fff !important;
}
.footLogo{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.footLogo h2{
  width:calc(100% - 8em);
  margin:0;

}
.footLink a{
  text-decoration:none;
}
.footLink a::after{
  margin-left:4px;
  font-size:12px;
}
.copyright{
  text-align:right;
  font-size:.75em;
}
/* SP only */
@media screen and (max-width:767px){
  header .inner h1{
    width:calc(100% - 113px);
  }
  .peopB-img img{
    width:72vw
  }
  .featBox{
    margin-bottom:min(5vw,24px);
  }
}
/* TB over */
@media screen and (min-width:768px){
  header .inner{
    height:80px;
    padding:0 104px 0 min(4vw,40px);
  }
  header .inner h1 img{
    max-height:56px;
  }
  .navToggle{
    width:80px;
    height:80px;
  }
  .navToggle span{
    left:25px;
  }
  .navToggle span:nth-of-type(1) {
    top:29px;
  }
  .navToggle span:nth-of-type(2) {
    top:39px;
  }
  .navToggle span:nth-of-type(3) {
    top:49px;
  }
  .headBtn{
    right:80px;
    height:80px;
  }
  .headBtn a{
    height:80px;
    padding:0 2.5em;
    font-size:1.3em;
    line-height:80px;
  }
  #first h2{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    width:42vw;
    padding:0 3.8vw;
  }
  .firsSlide{
    width:73vw;
    max-width:1920px;
    margin-left:auto;
  }
  .jobsLead{
    text-align:center;
  }
  .jobsList{
    display:flex;
    flex-wrap:wrap;
    margin-left:-8px;
    margin-right:-8px;
  }
  .jobsBox{
    width:50%;
    max-width:none;
    overflow:hidden;
    padding-left:8px;
    padding-right:8px;
  }
  .jobsBox h4{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    min-height:2.6em;
  }
  .jobsB-txt{
    height:100%;
  }
  .featList{
    justify-content:center;
  }
  .featBox{
    height:calc(100% - 40px);
  }
  .peopBox{
    display:flex;
  }
  .peopB-img{
    width:60%;
    margin-bottom:0;
    flex-shrink:0;
  }
  .peopBox:nth-child(odd) .peopB-img{
    padding-right:min(6vw,56px);
  }
  .peopBox:nth-child(even) .peopB-img{
    order:1;
    padding-left:min(6vw,56px);
  }
  .peopB-img h3{
    bottom:0;
  }
  .peopBox:nth-child(odd) .peopB-img h3{
    right:0;
  }
  .peopBox:nth-child(even) .peopB-img h3{
    left:0
  }
  .peopB-txt{
    flex-grow:1;
    align-content:center;
    line-height:1.8;
  }
  .peopBox:nth-child(odd) .peopB-txt{
    padding:0 6vw 0 0;
  }
  .peopBox:nth-child(even) .peopB-txt{
    padding:0 0 0 6vw;
  }

  #flow .inner,#faq .inner,#company .inner{
    width:50em;
  }
  #flow ol{
    display:inline-block;
    text-align:center;
  }
  #flow ol li{
    display:inline-block;
  }
  #flow ol dl{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    text-align:left;
  }
  #flow ol dt{
    padding:.02em 24px .02em 16px;
    margin-top:.4em;
  }
  #flow ol li dt::before {
    left:auto;
    right:calc(16px - 3px);
  }
  #flow ol li dt::after{
    left:auto;
    right:16px;
  }
  #flow ol li dd{
    width:30em;
    padding:0 0 1.5em 24px;
  }
  #flow ol li:not(:last-of-type) dd::after{
    left:-18px;
    top:1em;
  }
  #faq details{
    margin-bottom:1em;
  }
  #faq summary{
    padding:1em 24px;
  }
  #faq summary::after{
    top:18px;
    right:24px
  }
  details p{
    padding-left:24px;
  }
  #company table th{
    padding-left:4em;
    padding-right:4em;
    text-align:center;
  }
  footer .inner{
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
  }
}

/* PC over */
@media screen and (min-width:1020px){
  .jobsList{
    margin-left:-12px;
    margin-right:-12px;
  }
  .jobsBox{
    padding-left:12px;
    padding-right:12px;
  }
  .peopB-txt{
    text-align:center;
  }
}
@media screen and (min-width:1200px){
  .peopB-img{
    height:400px;
    overflow:hidden;
  }
  .peopB-img img{
    width:100%;
    height:400px;
    object-fit:cover;
  }
}


/* フェードインアニメーションの初期設定 */
.js-fadein {
  opacity:0;
  transform:translateY(20px); /* 下から少しずらしておく */
  transition: none;
}

.js-slidein {
  opacity:0;
  transform:translateX(-10%);
  transition: none;
}


/* アニメーション実行時のスタイル */
.js-fadein.is-active {
  opacity:1;
  transform:translateY(0);
  transition:transform .8s, opacity .8s;
}
.js-slidein.is-active{
  opacity:1;
  transform:translateX(0);
  transition:transform .8s, opacity .8s;
}

.js-fadein.is-active.is-delay{
  transition-delay:1s;
}

#loader-bg{
  background-color:#FFF;
  position:fixed;
  top:0;left:0;bottom:0;right:0;
  z-index:999999;
}