@charset "utf-8";
body {
  line-height: 1;
  -webkit-print-color-adjust: exact;
  transform: none;
  font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
  color: #464646;
  font-size: 1.4rem;
}

.container {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/*.container .sidebar {
  display: block;
  vertical-align: top;
}*/



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

     top

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/*========== common ==========*/

p {
  font-size: 1.4rem;
  line-height: 1.8;
}

.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

.school-list a {
  color: #464646;
}

.registBtn,
.loginBtn {
  border-radius: 6px;
  box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.1);
  padding: 16px 0px;
  text-align: center;
  color: white;
  font-size: 2.2rem;
  /*font-weight: bold;*/
  margin-bottom: 30px;
  width: 370px;
  letter-spacing: 0.05em;
}

.registBtn {
  background: linear-gradient(to right, #ec9a38, #e57d26);
}

.loginBtn {
  background: linear-gradient(to right, #a1c6ee, #7fb0ff);
}

.lineTitle {
  position: relative;
  font-size: 2.3rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.lineTitle::after {
  position: absolute;
  left: 46%;
  bottom: -8px;
  content: "";
  width: 70px;
  height: 3px;
}



/*========== header ==========*/

header {
  padding: 20px 0 10px;
  width: 960px;
  display: flex;
  justify-content: flex-end;
  margin: 0 auto;
}

header > :first-child {
  margin-right: auto;
}

header .registBtn,
header .loginBtn {
  padding: 12px 20px;
  width: 180px;
  font-size: 1.4rem;
  margin: 10px 0 20px;
}

header .registBtn {
  margin-right: 10px;
}

header a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 245px;
}

header a img { width: 100%; }


/*========== contents ==========*/


.mainVisual {
  padding-top: 60px;
  padding-bottom: 140px;
  background:#47a0f4 url(images/mainvisual_bg.gif) no-repeat center bottom;
}

.topTitle {
  color: #47a0f4;
  text-align: center;
  font-size: 2.8rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

main .inner {
  text-align: center;
}
main .mainVisual .inner img.pc { width: auto!important; margin: 0px auto; }

.mainVisual .tx { color: #fff; font-size: 1.8rem; margin: 30px auto 30px; }
.mainVisual .tx span { font-size: 2.2rem; font-weight: bold; font-size: 2.0rem;}

.mainVisual .registBtn {
    border-radius: 6px;
    box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.1);
    padding: 18px 0px;
    text-align: center;
    color: white;
    font-size: 2.2rem;
    margin: 30px auto;
    font-weight: bold;
    overflow: hidden;
    /* height: 60px; */
    display: block;
    width: 400px;
}

section .inner {
  padding: 30px 80px;
}

section .registBtn,
section .loginBtn {
  display: inline-block;
}

.description {
  margin-bottom: 50px;
}

.description span.orangeLine {
  background: linear-gradient(white 0%, white 59%, #EB9931 60%, #EB9931 100%);
  font-weight: bold;
}
.step { padding: 40px 0; }
.step .ttls { margin-bottom: 50px; }
.stepList { margin-bottom: 30px; }
.stepList li { list-style: none; }
.stepList li img { vertical-align: bottom; }

ul.flowList,
ul.charaList {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
ul.flowList.pc {
  display: block;
  margin-top: 20px;
}

ul.flowList li img {
  margin-bottom: 30px;
}
ul.flowList.pc li img {
  margin-bottom: 0;
  vertical-align: bottom;
} 


.feature {
  text-align: center;
  background: url(images/feature-bg.gif) repeat left top;
  padding: 30px 0;
}
.feature h2 { margin-bottom: 70px; }
.feature h3 { margin: 20px 0 40px; }
.feature h3 + p { margin-bottom: 58px; }


ul.charaList li img {
  margin-bottom: 15px;
  background: white;
  padding: 20px 5px;
  border-radius: 20px;
}

ul.charaList li p {
  color: white;
}

ul.charaList li .ttl {
  font-size: 1.8rem;
  margin-bottom: 12px;
  font-weight: bold;
}

ul.charaList li .detail {
  font-size: 1rem;
}

ul.charaList li + li {
  margin-left: 25px;
}

section.character {
  background: #47a0f4;
}

section .sfont {
  font-size: 1.5rem;
  font-weight: bold;
}

section.character .sfont,
section.character .lineTitle {
  color: white;
}

section.character .lineTitle::after {
  background: white;
}

section.companies .sfont,
section.companies .lineTitle,
section.qa .lineTitle {
  color: #47a0f4;
}

section.companies .lineTitle::after,
section.qa .lineTitle::after {
  background: #47a0f4;
}

section.companies .comNum {
  margin-bottom: 10px;
}

section.companies .comNum span {
  font-size: 2rem;
  font-weight: bold;
  padding: 0 5px;
}

section.companies .inner {
    padding: 30px 0px;
}
section.companies .ttls { margin: 30px auto 50px; text-align: center; }
section.companies .ttls img { text-align: center; margin: 0 auto; }
section.companies ul.companyList {
  margin: 0px 0 30px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

section.companies ul.companyList li {
  width: 45%;
  margin: 0 10px 20px 10px;
  vertical-align: middle;
  text-align: left;
  font-size: 1.6rem;
  font-weight: bold;
  
}
section.companies ul.companyList li span { background: linear-gradient(transparent 18px, #daecfd 50%); padding: 6px 5px;}

section.companies ul.companyList li img {
  max-width: 200px;
}
section.companies ul.companyList li:nth-of-type(even) { margin-left: 3%; }


section.case .inner {
    padding: 50px 0px 40px;
}

section.case {
  background: url(images/feature-bg.gif) repeat left top;
  padding-bottom: 30px;
}
section.case .ttls { margin-bottom: 20px; 
}
section.case .ttls img { margin: 0 auto; }
section.case .sample01 { background: #EEEEEE; padding: 40px 0 30px; text-align: center; margin-bottom: 20px; }
section.case .sample01 img,section.case .sample02 img { margin: 0 auto; }

section.qa {
  background: #eee;
  padding-bottom: 30px;
}
section.qa .ttls { margin-bottom: 20px; }

dl.qaList {
  background: white;
  padding: 35px;
  margin-bottom: 24px;
  border-radius: 10px;
  text-align: left;
}

dl.qaList dt {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 15px;
}
dl.qaList dd { font-size: 1.6rem; }

dl.qaList dt,
dl.qaList dd {
    text-indent: -28px;
    margin-left: 28px;
}

dl.qaList dt::before {
  content: "Q. ";
  color: #47a0f4;
  font-size: 2rem;
}

dl.qaList dd::before {
  content: "A. ";
  color: #FB1633;
  font-size: 2rem;
  font-weight: bold;
}

dl.qaList dd {
  line-height: 1.5;
}

.otherQa {
  color: #464646;
  text-decoration: underline;
  font-size: 2rem;
}

.invitation {
  font-size: 2.6rem;
  font-weight: bold;
  margin-bottom: 30px;
  color: #47a0f4;
}

.invitation span {
  display: block;
  font-weight: normal;
  font-size: 2.4rem;
}

.invitation span::before {
  content: "＼";
  padding-right: 5px;
}

.invitation span::after {
  content: "／";
  padding-left: 5px;
}

section.btmArea {
  margin-bottom: 20px;
  padding: 30px 0;
}
section.btmArea .ttls { margin-bottom: 30px; }
section.btmArea .ttls img { margin: 0 auto; text-align: center; }

.btmBtnArea a + a {
  margin-left: 15px;
}

section.btmArea .registBtn, section.btmArea .loginBtn {
  padding: 16px 0px;
}

.btmBtnArea {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  margin: 0 auto 20px;
}

.btmBtnArea .loginBtn { width: 270px;}
.btmBtnArea .registBtn { width: 300px;}
.btmBtnArea p+p { margin-left: 20px; }

.btmBtnArea .registBtn, .btmBtnArea .loginBtn {
  margin-bottom: 0;
}


/*========== footer ==========*/


#stuTop .topFooter {
  background: #F2F0EC;
}

#stuTop footer {
  color: #464646;
}

#stuTop .topFooter .inner {
  padding: 60px 0;
}

#stuTop .footerContent {
  margin-bottom: 60px;
}

#stuTop .footerContent .footerLogo {
  width: 250px;
}

#stuTop .footerContent figure,
#stuTop .footerContent .dlBox {
  display: inline-block;
  vertical-align: middle;
}

#stuTop .footerContent .dlBox {
  margin: 0 40px;
}

#stuTop .footerContent .dlBox dl {
  display: inline-block;
  vertical-align: top;
}

#stuTop .footerContent .dlBox dl + dl {
  margin-left: 40px;
}

#stuTop .footerContent .dlBox dl dt {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

#stuTop .footerContent .dlBox dl dd {
  margin-bottom: 10px;
}

#stuTop .footerContent .dlBox dl dd a {
  color: #999;
  font-size: 1.2rem;
}

#stuTop .footerContent .dlBox dl dd:before {
  content: " ";
  display: inline-block;
  left: 0px;
  top: 0;
  box-sizing: border-box;
  width: 5px;
  height: 5px;
  border: 5px solid transparent;
  border-left: 5px solid #47A0F4;
  margin-right: 2px;
}

#stuTop .footerContent .privacy {
  width: 280px;
}

.footer-info {
  text-align: center;
  margin-top: 40px;
}

.footer-info img {
  width: 240px;
}

.footer-info .copyr {
  font-size: 1rem;
  color: #acacac;
  margin-top: 6px;
}





/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

     デバイス別

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

  @media screen and (max-width: 1024px) {

  }

  @media screen and (max-width: 825px) {

    /* common */

    .inner {
      width: 100%
    }

    .pc {
      display: none !important;
    }

    .sp {
      display: block !important;
    }

    .registBtn, .loginBtn {
      margin-bottom: 20px;
      font-weight: bold;
    }

    /* header */

    header {
      width: 100%;
      padding: 5px 10px;
    }

    header .registBtn,
    header .loginBtn {
      padding: 10px 0;
      width: 120px;
      font-size: 1.3rem;
      margin: 8px 0;
      font-weight: bold;
    }

    header .registBtn {
      margin-right: 8px;
    }

    header .registBtn span {
      display: block;
    }

    .mainVisualArea {
      width: 100%;
    }

    main .mainVisual .inner img.sp {
    width: 100%;
    max-width: 400px;
    margin: 0px auto;
  }

    /* content */

    section .inner {
      padding: 20px 15px;
    }

    .topTitle {
      font-size: 1.8rem;
    }

    .lineTitle {
      font-size: 1.8rem;
    }

    .lineTitle::after {
      left: 44%;
    }

    .invitation {
      font-size: 2.2rem;
    }

    .invitation span {
      font-size: 2rem;
    }

    ul.flowList,
    ul.charaList {
      display: block;
    }

    ul.flowList li img {
      margin-bottom: 10px;
    }

    .flowList li + li,
    .charaList li + li {
      margin-top: 20px;
    }

    ul.charaList li {
      background: white;
      border-radius: 10px;
      padding: 10px 10px 20px;
    }

    ul.charaList li .ttl {
      font-size: 2.2rem;
      color: #47a0f4;
      font-weight: bold;
      margin-bottom: 0;
    }

    ul.charaList li .detail {
      color: #464646;
      font-size: 1.4rem;

    }

    ul.charaList li + li {
      margin-left: 0;
    }
    
    ul.charaList li img {
      margin-bottom: 10px;
      padding: 0;
    }
    section.companies ul.companyList {
      overflow: hidden;
    }
    section.companies ul.companyList li {
      /*display: block;*/
      margin: 0 4% 15px;
      width: 42%;
      line-height: 1.4;
    }
    section.companies ul.companyList li:nth-of-type(even) {
    margin-left: 20px;
    }
    section.companies ul.companyList li img {
      width: 100%;
      margin-right: 5px;
    }
    section.case img,.btmArea img { max-width: 400px;}
    dl.qaList {
      padding: 10px 24px;
      position: relative;
    }

    dl.qaList::after {
      position: absolute;
      content: "";
      border: 2px solid #47a0f4;
      border-left-color: transparent;
      border-top-color: transparent;
      width: 10px;
      height: 10px;
      transform: rotate(-45deg);
      right: 15px;
      top: 34%;
    }

    dl.qaList.on::after {
      border: none;
    }

    .btmBtnArea a + a {
      margin-left: 0;
    }

    /* footer */

    #stuTop .topFooter .inner {
      padding: 30px 20px 10px;
    }

    #stuTop .footerContent {
      margin-bottom: 30px;
    }

    #stuTop .footerContent figure,
    #stuTop .footerContent .dlBox {
      display: block;
    }

    #stuTop .footerContent figure {
      margin: 0 auto;
    }
    #stuTop .footerContent .footerLogo {
      width: 200px;
      margin-bottom: 30px;
    }
    #stuTop .footerContent .dlBox {
      margin: 20px 0;
    }

    #stuTop .footerContent .privacy {
      display: none;
    }

    #stuTop .footerContent .dlBox dl dd a {
      font-size: 1.4rem;
    }



/*========== bxslider ==========*/


    .bx-wrapper {
      box-shadow: none;
    }

    .bx-wrapper ul.flowList.slider li img {
      display: block;
      margin: 0 auto;
      max-width: 400px;
    }

    .bx-wrapper .bx-pager.bx-default-pager a:hover,
    .bx-wrapper .bx-pager.bx-default-pager a.active,
    .bx-wrapper .bx-pager.bx-default-pager a:focus {
      background: #47a0f4;
    }

    .bx-wrapper .bx-pager.bx-default-pager a {
      background: #D2E6FF;
    }

    .bx-viewport {
      height: auto !important;
    }
    .bx-wrapper .bx-next {
      background: none;
    }
    .bx-wrapper .bx-controls-direction {
      position: absolute;
      top: 60%;
      margin-top: -16px;
      outline: 0;
      z-index: 9999;
      width: 100%;
    }
      .bx-wrapper .bx-controls-direction a {
          position: absolute;
          top: 0;
          outline: 0;
          width: 32px;
          height: 32px;
          text-indent: -9999px;
          z-index: 9999;
      }

    .bx-wrapper .bx-controls-direction a.bx-next:after {
      right: 0;

    }
    .bx-wrapper .bx-controls-direction a.bx-prev {background: none;}
    .bx-wrapper .bx-controls-direction a.bx-prev:after,
    .bx-wrapper .bx-controls-direction a.bx-next:after {
      content: "";
      position: absolute;
      left: 0;
      background:#383838;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      outline: 0;
      text-indent: -9999px;
      z-index: 9998;
    }
    .bx-wrapper .bx-controls-direction a.bx-prev:before,
    .bx-wrapper .bx-controls-direction a.bx-next:before {
      position: absolute;
      left: 12px;
      top: 11px;
      color: #fff;
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-top: 2px solid #fff;
      border-right: 2px solid #fff;
      -webkit-transform: rotate(-135deg);
      transform: rotate(-135deg);
      position: absolute;
      z-index: 9999;
    }
    .bx-wrapper .bx-controls-direction a.bx-next:after {
      left: auto;
      right: 0;
    }
    .bx-wrapper .bx-controls-direction a.bx-next:before {
      left: auto;
      right: 13px;
      color: #fff;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }


  @media screen and (max-width: 740px) {
  }

  @media screen and (max-width: 625px) {
    .btmBtnArea {
    display: flex;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
    }
    .btmBtnArea .registBtn {
        width: 280px;
    }
    .btmBtnArea .loginBtn {
        width: 200px;
    }

  }

  @media screen and (max-width: 425px) {
    header a {
        width: 200px;
        padding-right: 10px;
    }

    .registBtn, .loginBtn { width: 90%; padding: 12px 0px; font-size: 1.8rem;}
    .mainVisual { padding:20px 10px 80px; background-size: 150%; }
    .mainVisual .registBtn { width: 90%; font-size: 1.6rem; padding: 14px 0; margin: 10px auto; }
    .mainVisual .tx {font-size: 1.4rem; line-height: 1.8; margin: 10px auto 0px;}
    .mainVisual .tx span {
    font-size: 1.5rem;
    font-weight: bold;
    }
    .step .ttls {
    margin-bottom: 0px;
    }
    .bx-wrapper { margin-bottom: 30px; }
    .bx-wrapper .bx-pager {padding-top: 0px;}
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    bottom: 0px;
    }
    #stuTop .footerContent .dlBox dl:first-child {
      display: block;
    }

    #stuTop .footerContent .dlBox dl:last-child {
      display: none;
    }

    .lineTitle::after {
      left: 39%;
    }
    .feature {
          padding: 20px 0 10px;
    }
    .feature h2 {
    margin-bottom: 40px;
    }
   /* .feature h3:last-of-type + p { margin-bottom: 20px; }*/
    .step { padding: 0px 0px 0;}

    dl.qaList dt {
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.4;
    margin-bottom: 0px;
    }
    dl.qaList dd {
    font-size: 1.4rem;

  }
    dl.qaList dt, dl.qaList dd {
    text-indent: -30px;
    margin-left: 23px;
    }

    .companies h2 {
    width: 90%;
    text-align: center;
    margin: 20px auto;
    }
    section.companies .ttls {
    margin: 0px auto 30px;
    text-align: center;
    }
    .companies h2 img {
    width: 100%;
    }
    section.companies .inner {
    padding: 30px 10px;
    }
    section.companies ul.companyList {
    margin-bottom: 10px;
    } 
    section.companies ul.companyList li { 
    width: 100%;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 10px; }
    section.companies ul.companyList li:nth-of-type(even) {
    margin-left: 0;
    }

    section.companies ul.companyList li span {
        background: none;
        padding: 0px;
    }
    section.case {
    background: url(images/bg-sp.png) repeat left top;
    padding-bottom: 30px;
    }

    section.case .inner {
        padding: 30px 20px 20px;
    }
    section.case img, .btmArea img {
    max-width: 100%;
    }
    section.case .sample01 {
    background: transparent;
    padding: 20px 0 20px;
    text-align: center;
    margin-bottom: 20px;
    }
    section.btmArea .ttls {
    margin-bottom: 20px;
    }
    .btmBtnArea { width: 90%; margin: 0 auto; }
    section.btmArea .registBtn, section.btmArea .loginBtn {
    padding: 12px 20px;
    text-align: center;
    width: 100%;
    }
    .btmBtnArea {
    display: block;
    width: 90%;
    margin: 0 auto;
    }
    .btmBtnArea p+p {
    margin-left: 0px;
    margin-top: 10px;
    }
    .bx-wrapper ul.flowList.slider li img {
        max-width: 100%;
    }
    section.btmArea {
        margin-bottom: 20px;
        padding: 10px 0;
    }
    .feature h3 { margin: 20px 0 20px; }

  }

  @media screen and (max-width: 375px) {
        .mainVisual { padding:30px 10px 82px; }
        .feature h3 + p {
              margin-bottom: 40px;
          }

  }

  @media screen and (max-width: 320px) {
    .mainVisual { padding:20px 10px 60px; background-size: 140%; }
    .invitation {
      font-size: 1.4rem;
      letter-spacing: -0.3px;
    }



  }