@charset "UTF-8";
@import url("https://use.typekit.net/tid6chb.css");
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  font-size: 100%;
}
body{
  font-size : 14px;
  line-height : 1.57143;
  letter-spacing : .75px;
  font-family: ryo-gothic-plusn, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing : grayscale;
  width: 100%;
}
.inner,
.header_inner,
.footer_inner{
  max-width: 1080px;
  padding: 0px 20px;
  margin: 0 auto;
}
.inner{
  padding: 120px 20px;
}
.text-c{
  text-align: center;
}
.text-r{
  text-align: right;
}
.bold{
  font-weight: bold;
}
p{
  text-align: justify;
  text-justify: inter-ideograph;
  -ms-text-justify: inter-ideograph;
}
a{
  text-decoration: none;
  color: #000;
}
li{
  list-style: none;
}
img{
  width: 100%;
  display: inline-block;
}
a{
  transition: .3s;
}
a:hover{
  color: #ccc;
  transition: .3s;
}
.yellow-line{
  background:linear-gradient(transparent 50%, #fff7b0 50%);
  padding: 4px 8px;
}
[class*="flex"]{
  display: flex;
  display: -ms-flexbox;
  justify-content: space-around;
  -ms-flex-pack: distribute;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 80px;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  box-sizing: border-box;
  cursor: pointer;
  background: #ccc;
  border: 2px solid #ccc;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
.btn{
  text-align: center;
}
.btn a{
  display: inline-block;
  text-align: center;
  max-width: 500px;
  min-width: 280px;
  padding: 20px 60px;
  color: #fff;
  font-weight: 500;
  background: #112275;
  border: 2px solid #112275;
  border-radius: 80px;
}
.btn_submit{
  display: inline-block;
  text-align: center;
  max-width: 500px;
  min-width: 280px;
  padding: 20px 60px;
  color: #fff;
  font-weight: 500;
  background: #ccc;
  border: 2px solid #ccc;
  border-radius: 80px;
  transition: .3s;
}
.btn_submit.check{
  color: #fff;
  background: #112275;
  border: 2px solid #112275;
}
.btn a:hover,
.btn_submit.check:hover{
  color: #112275;
  border: 2px solid #112275;
  background: #fff;
}
.sp{
  display: none;
}
/*--------------------------------------------------------------------/
  header
/*-------------------------------------------------------------------*/
.header_inner{
  padding: 30px 20px 10px;
}
h1{
  max-width: 560px;
}
.main_img{
  min-height: 540px;
  background: #62bfde;
}
.main_img .flex_02{
  padding: 60px 0;
  max-width: 1080px;
  margin: 0 auto;
}
.main_img__cach{
  position: relative;
  top: 90px;
  font-size: 30px;
  color: #fff;
  font-weight: 700;
  text-shadow: 2px 2px 10px rgba(56,74,157,0.2);
  position: relative;
}
.main_img__cach::before{
  content: "";
  display: block;
  background: url(../images/main-img-left.png) no-repeat center;
  background-size: contain;
  height: 129px;
  width: 132px;
  position: absolute;
  top: -50px;
  left: -100px;
}
.main_img__cach::after{
  content: "";
  display: block;
  background: url(../images/main-img-bottom.png) no-repeat center;
  background-size: contain;
  height: 324px;
  width: 364px;
  position: absolute;
  bottom: -284px;
  right: -140px;
}
.main_img__cach > p{
  position: relative;
  z-index: 2;
}
.main_img__cach .text{
  font-size: 20px;
  margin-top: 14px;
}
/*  form  */
.form{
  background: #fff;
  padding: 50px;
  border-radius: 32px;
  position: relative;
  width: 100%;
  max-width: 420px;
}
.form dl{
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.form dt{
  width: 30%;
}
.form dd{
  width: 70%;
}
:focus {
    outline: none;
}
.form dd input{
  border: none;
  background: #f0f0f0;
  width: 100%;
  padding: 8px;
}
.form dd input:focus {
  border: none;
}
.form dd select{
  width: 140px;
  border: none;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 0;
  padding: 8px;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 17px) calc(1em + 2px),
    calc(100% - 12px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
}
.form dd select:focus {
  background-image:
    linear-gradient(45deg, #112275 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, #112275 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 12px) 1em,
    calc(100% - 17px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  border-color: #112275;
  outline: 0;
}
.form dd select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.checkbox a{
  color: #112275;
}
.checkbox a:hover{
  color: #00b0ec;
}
.btn_submit{
 margin: 40px auto 0;
 display: block;
 font-weight: bold;
 letter-spacing: 2px;
}
/*--------------------------------------------------------------------/
  contents
/*-------------------------------------------------------------------*/
.cont_title{
  font-family: futura-pt-bold, ryo-gothic-plusn, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 56px;
  color: #62bfde;
  margin-bottom: 60px;
  text-align: center
}
.cont_subtitle{
  font-size: 20px;
  font-weight:700;
  color: #112275;
  display: block;
}
/* concept
-------------------------------------------------------------------*/
.cont_concept img{
  max-width: 300px;
}
.concept_text {
  max-width: 540px;
}
.cont_concept.flex_02{
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.cont_concept .cont_title{
  text-align: left;
  margin-bottom: 0px;
}
.cont_concept p{
  color: #62bfde;
  font-size: 18px;
  font-weight: 500;
  line-height: 2;
}
/* pleasurework
-------------------------------------------------------------------*/
.cont_pleasurework{
  background: #d3e9f1;
}
.cont_pleasurework .cont_title img{
  max-width:520px;
}
.cont_pleasurework .flex_02{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  max-width: 700px;
  margin: auto;
}
.pleasurework_box{
  max-width: 320px;
  margin-bottom: 64px;
}
.pleasurework_box .box_titile{
  margin: 24px 0 14px;
  color: #112275;
  font-size: 18px;
  font-weight: 700;
}
/* recruit
-------------------------------------------------------------------*/
.cont_recruit{
  background: #6dc9ee;
}
.cont_recruit .flex_03{
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.recruit_feature{
  text-align: center;
  width: 320px;
}
.recruit_feature:nth-child(1) img{
  width: 60px;
}
.recruit_feature:nth-child(2) img{
  width: 54px;
}
.recruit_feature:nth-child(3) img{
  width: 40px;
}
.recruit_feature p{
  text-align: center;
}
.recruit_feature__title{
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin: 20px 30px;
}
.recruit_fuature-box{
  background: #fff;
  border-radius: 30px;
  color: #00b0ec;
  font-weight: 700;
  padding-bottom: 20px;
}
.recruit_fuature-box .box_titile{
  background: #00b0ec;
  padding: 20px;
  border-radius: 30px 30px 0 0;
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 14px;
}
.recruit_feature:nth-child(2) .box_titile{
  margin-bottom: 0px;
}
.recruit_fuature-box .box_text{
  padding: 10px 20px;
  font-size: 18px;
  line-height: 1.5;
}
.recruit_feature:nth-child(2) .box_text{
  padding: 10px 24px;
  text-align: left;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.recruit_fuature-box .percent{
  font-size: 40px;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}
.recruit_fuature-box .min-text{
  font-size: 14px;
}
/* promise
-------------------------------------------------------------------*/
.cont_promise{
  background: #d3e9f1;
  position: relative;
  font-size: 16px;
  color: #112275;
  margin-bottom: 100px;
}
.cont_promise::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 50vw 0 50vw;
  border-color: #d3e9f1 transparent transparent transparent;
  position: absolute;
  bottom: -99px;
}
.cont_promise .cont_title{
  margin-bottom: 30px;
}
.cont_promise .cont_title img{
  max-width: 700px;
  margin-bottom: 30px;
}
.cont_promise p{
  text-align: center;
}
.cont_promise .big-text{
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 24px;
}
.cont_promise .flex_03{
  margin-top: 60px;
}
.promise_box{
  max-width: 260px;
  position: relative;
}
.number {
    font-family: futura-pt-bold, ryo-gothic-plusn, sans-serif;
    font-size: 60px;
    font-weight: 700;
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    margin: auto;
    color: #00b0ec;
}
.promise_box_title {
    font-size: 24px;
    font-weight: 700;
    margin: 40px 0 20px;
    background: #fff;
    padding: 30px 10px 16px;
}
.promise_box .text{
  text-align: justify;
}
/* fuature
-------------------------------------------------------------------*/
.cont_feature{
  position: relative;
}
.cont_feature::before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 50vw 0 50vw;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  bottom: -99px;
}
.fuature_box_title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 20px;
}
.cont_feature .flex_02.w-500{
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  max-width: 640px;
}
.fuature_box{
  max-width: 280px;
  margin-bottom: 30px;
}
.fuature_box:nth-child(3),
.fuature_box:nth-child(4){
  margin-bottom: 0px;
}
.feature_btn{
  max-width: 180px;
}
/* resume
-------------------------------------------------------------------*/
.cont_resume{
  background: #6dc9ee;
  padding-top: 100px;
}
.cont_resume .cont_title{
  color: #fff;
  font-size: 30px;
  margin-bottom: 20px;
}
.cont_resume .cont_title .free{
  background: #fff;
  color: #6dc9ee;
  font-size: 18px;
  border-radius: 30px;
  padding: 4px 20px;
  margin-bottom: 20px;
  display: inline-block;
}
.cont_resume p{
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 60px;
}
/* flow
-------------------------------------------------------------------*/
.cont_flow .flex_04 > *{
  text-align: center;
  width: 25%;
}
.step_flow{
  font-weight: 500;
  text-align: left;
  font-family: futura-pt-bold, ryo-gothic-plusn, sans-serif;
  font-size: 20px;
  font-weight:700;
  color: #112275;
}
.step_flow span{
  font-size:16px;
  color: #62bfde;
  display: block;
  line-height: 1;
}
.step_flow{
  padding: 10px 40px 15px;
}
.flow_box:nth-child(1) .step_flow{
  background: #d3e9f1;
}
.flow_box:nth-child(2) .step_flow{
  background: #c1e3f0;
}
.flow_box:nth-child(3) .step_flow{
  background: #afdeef;
}
.flow_box:nth-child(4) .step_flow{
  background: #9ed9ee;
}
.step_icon{
  height: 120px;
  position: relative;
}
.step_icon img{
  width: auto;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}
.flow_box:nth-child(1) .step_icon img{
  top: calc(50% - 22px);
}
.flow_box:nth-child(2) .step_icon img{
  top: calc(50% - 36px);
}
.flow_box:nth-child(3) .step_icon img{
  top: calc(50% - 28px);
}
.flow_box:nth-child(4) .step_icon img{
  top: calc(50% - 20px);
}
.step_text{
  text-align: center;
}
.cont_flow .btn{
  margin-top: 60px;
}
/* forcompany
-------------------------------------------------------------------*/
.cont_forcompany{
  background: #95cbe7;
}
.cont_forcompany .flex_02{
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
.cont_forcompany .flex_02 img{
  max-width: 480px;
  margin-bottom: 60px;

}
.cont_forcompany .cont_title{
  color: #112275;
  font-size: 30px;
  margin-bottom: 20px;
}
.forcompany_box{
  max-width: 560px;
  width: 100%;
}
.forcompany_box > *{
  text-align: left;
}
.forcompany_box .btn{
  margin-top: 60px;
}
/* entry
-------------------------------------------------------------------*/
.cont_entry{
  background: #d3e9f1;
}
.cont_entry .form{
  max-width: 620px;
  margin: auto;
  padding: 60px;
}
.cont_entry .btn_submit{
  margin-top: 60px;
}

/* footer
-------------------------------------------------------------------*/
.footer_inner.flex_02{
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: flex-end;
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  padding: 60px 20px 50px;
}
.footer_logo{
  max-width: 360px;
}
.footer_nav li{
  display: inline-block;
  margin-left: 20px;
}
.copyright{
  background: #112275;
  color: #fff;
  padding: 10px;
  text-align: center;
}
/* lv2
-------------------------------------------------------------------*/
.lv2_cont{
  background: #d3e9f1;
}
.forcompany_contact .text-c{
  font-size: 16px;
}
.forcompany_contact .form{
  margin: 60px auto;
  max-width: 600px;
}
.forcompany_contact .form dt {
  width: 20%;
}
.forcompany_contact .form dd {
  width: 80%;
}
.checkbox{
  font-size: 14px;
  text-align: center;
  margin-top: 40px;
}
.checkbox input{
  margin-right: 8px;
}
.forcompany_contact .btn_submit {
  margin-top: 40px;
}
.to-top{
  text-align: center;
}
.to-top a{
  color: #112275;
  font-size: 16px;
  display: inline-block;
  padding-right: 16px;
  position: relative;
  font-weight: bold;
  transition: .3s;
}
.to-top a:before,
.to-top a:after{
  content: "";
  display: block;
  position: absolute;
}
.to-top a:before{
  border-right: 2px solid #00b0ec;
  border-top: 2px solid #00b0ec;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 8px;
  height: 8px;
  right: 0;
  top: 50%;
  margin-top: -4px;
}
.to-top a:after{
  width: 12px;
  border-bottom: 2px solid #00b0ec;
  right: 0;
  top: 50%;
}
.to-top a:hover{
  color: #00b0ec;
  transition: .3s;
}
.lv2_cont .text-area{
  max-width: 900px;
  margin : auto;
  background: #fff;
  border-radius: 30px;
  padding:60px;
}
.thanks .text-area{
  margin-bottom: 60px;
}
.thanks .text-area p{
  max-width: 600px;
  margin: auto;
}
.lv2_cont .list-item{
  margin-bottom: 60px;
}
.lv2_cont .list-item b{
  display: inline-block;
  margin-bottom: 16px;
  font-size: 18px;
  color: #112275;
}
.policy .list-item > ol > li{
  margin-top: 14px;
}
.policy.list-item > ol > li > ol > li{
  margin-top: 10px;
  margin-left: 1rem;
}

@media print, screen and (max-width: 980px) {
/*====================================================================/
/*-------------------PCスタイル-------------------
/====================================================================*/
  .form{
    max-width: 100%;
  }
  .cont_flow .flex_04{
    flex-wrap: wrap;
    justify-content: center;
    max-width: 500px;
    margin: auto;
  }
  .cont_flow .flow_box{
    width: 50%;
    max-width: 250px;
    margin-bottom: 40px;
  }
  .cont_flow .flow_box:nth-child(3),
  .cont_flow .flow_box:nth-child(4){
    margin-bottom: 0;
  }

}
@media screen and (max-width: 796px) {
/*====================================================================/
/*------------------スマホタブレット共通スタイル---------
/====================================================================*/
  .pc{
    display: none;
  }
  .inner {
    padding: 80px 20px;
  }
  .main_img .flex_02{
    display: block;
    max-width: 600px;
    padding: 100px 0;
  }
  .main_img__cach{
    top: 0;
    margin-bottom: 140px;
  }
  .main_img__cach::after {
    height: 300px;
    width: 267.03px;
    bottom: -152px;
    right: 0px;
  }

  /* concept */
  .cont_concept.flex_02{
    display: block;
    text-align: center;
  }
  .concept_text {
    max-width: 500px;
    margin: 30px auto 0;
  }
  /* recruit */
  .cont_recruit .flex_03{
    display: block;
  }
  .recruit_feature{
    width: 100%;
    max-width: 320px;
    margin: 0 auto 40px;
  }
  .recruit_feature:last-child{
    margin-bottom: 0;
  }
  /* promise */
  .promise_box {
    max-width: 220px;
  }
  /* feature */
  .cont_feature .flex_02{
    -webkit-box-align: end;
    -ms-flex-align: start;
    align-items: flex-end;
  }
  .cont_feature .flex_02.w-500 {
    display: block;
  }
  .fuature_box,
  .fuature_box:nth-child(3) {
    max-width: 320px;
    margin-bottom: 30px;
  }
  .cont_feature::before,
  .cont_promise::before {
    border-width: 50px 50vw 0 50vw;
    bottom: -49.5px;
  }
  .cont_promise {
    margin-bottom: 50px;
}
  .cont_resume {
     padding-top: 50px;
  }
  /* for company */
  .cont_forcompany .flex_02 img {
    max-width: 340px;
  }



}
@media screen and (max-width: 480px) {
/*====================================================================/
/*------------------スマホのみスタイル----------------
/====================================================================*/
  .sp{
    display: block;
  }
  .inner {
    padding: 80px 16px;
  }
  .btn a, .btn_submit {
    min-width: auto;
    width: 100%;
  }
  [class*="flex"]{
    display: block;
  }
  .cont_title{
    font-size: 50px;
    margin-bottom: 40px;
  }
  .main_img .flex_02 {
    max-width: 100%;
    padding: 60px 20px;
  }
  .main_img__cach{
    font-size: 22px;
  }
  .main_img__cach::before {
    height: 90px;
    width: 87.95px;
    top: -50px;
    left: -30px;
  }
  .main_img__cach::after {
    height: 200px;
    width: 178px;
    bottom: -140px;
    right: 0px;
  }
  .main_img__cach .text {
    font-size: 18px;
  }
  .main_img .form{
    padding: 30px;
  }
  .cont_concept p {
    font-size: 16px;
  }
  .cont_promise .big-text{
    font-size: 18px;
  }
  .promise_box {
    max-width: 320px;
    margin: 0 auto 20px;
  }
  .promise_box:last-child{
    margin-bottom: 0;
  }
  .number{
    top: -50px;
  }
  .fuature_box {
    margin: 0 auto 30px;
  }
  .fuature_box:nth-child(4) {
    margin-bottom: 30px;
  }
  .feature_btn {
    max-width: 200px;
    margin: auto;
  }
  .cont_resume .cont_title{
    font-size: 26px;
  }
  .cont_flow .flow_box {
    width: 100%;
    max-width: 300px;
    margin :0 auto 40px;
  }
  .cont_flow .flow_box:nth-child(3){
    margin-bottom: 40px;
  }
  .cont_forcompany .cont_title {
    font-size: 24px;
    text-align: center;
  }
  .forcompany_box .btn {
    text-align: center;
  }
  .cont_entry .form {
    padding: 30px;
  }
  footer{
    text-align: center;
  }
  .footer_logo{
    max-width: 300px;
    margin-bottom: 20px;
  }
  /* lv2 */
  .lv2_cont .text-area {
    padding: 30px;
  }
}

@media print {
  header { display: none; }
  nav#global { display: none; }
  footer {display: none; }
}