@charset "UTF-8";
/*! ========================================
※※※※※※※※※※※※※※※※※※※※※※※※※※※
  このCSSファイルはSassから生成されていますので、
  編集しないようご注意ください。
※※※※※※※※※※※※※※※※※※※※※※※※※※※
========================================= */
@import url("https://fonts.googleapis.com/css?family=Lato:400,900");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900");
.pcBox {
  display: inline-block !important; }
  @media screen and (max-width: 600px) {
    .pcBox {
      display: none !important; } }

.spBox {
  display: none !important; }
  @media screen and (max-width: 600px) {
    .spBox {
      display: inline-block !important; } }

.lp__banner-area {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
  width: 100%; }
  @media screen and (max-width: 600px) {
    .lp__banner-area {
      display: block;
      margin: 15px 0 0; } }
  .lp__banner-area--item {
    width: 448px; }
    @media screen and (max-width: 768px) {
      .lp__banner-area--item {
        width: 48%; } }
    @media screen and (max-width: 600px) {
      .lp__banner-area--item {
        width: 100%;
        margin: 0 0 15px; } }
    .lp__banner-area--item img {
      width: 100%;
      height: auto; }
    .lp__banner-area--item a {
      -moz-transition: all 0.3s;
      -o-transition: all 0.3s;
      -webkit-transition: all 0.3s;
      transition: all 0.3s; }
    .lp__banner-area--item a:hover {
      text-decoration: none;
      filter: alpha(opacity=70);
      -moz-opacity: 0.7;
      opacity: 0.7; }

.lp__banner-area02 {
  margin: 50px 0 0;
  width: 100%; }
  @media screen and (max-width: 600px) {
    .lp__banner-area02 {
      margin: 30px 0 0; } }
  .lp__banner-area02 img {
    width: 100%;
    height: auto; }
  .lp__banner-area02 a {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; }
  .lp__banner-area02 a:hover {
    text-decoration: none;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7; }

.management__contents .MoreAdvancedBlock__content__text {
  line-height: 3.0rem;
  text-align: left !important; }
  @media screen and (max-width: 768px) {
    .management__contents .MoreAdvancedBlock__content__text {
      line-height: 2.6rem; } }
.management__contents .OperationSystemBlock__content {
  padding-bottom: 70px; }
  @media screen and (max-width: 768px) {
    .management__contents .OperationSystemBlock__content {
      padding: 5px 15px 30px; } }
.management__contents .MoreAdvancedBlock__content__head {
  font-size: 2.7rem; }
  @media screen and (max-width: 768px) {
    .management__contents .MoreAdvancedBlock__content__head {
      font-size: 1.8rem;
      letter-spacing: 0.05rem !important; } }

.grey__imgbox {
  border: 5px solid #EFF2F5;
  margin: 30px 0;
  background: #fff; }
  @media screen and (max-width: 600px) {
    .grey__imgbox {
      margin: 15px 0; } }
  .grey__imgbox h4 {
    font-size: 2.4rem;
    text-align: center;
    padding: 12px 0;
    background: #EFF2F5;
    font-weight: bold;
    color: #002C69;
    letter-spacing: 0.2rem;
    line-height: 1.2; }
    @media screen and (max-width: 600px) {
      .grey__imgbox h4 {
        padding: 10px 0;
        font-size: 1.3rem; } }
    .grey__imgbox h4 span {
      font-size: 2rem;
      line-height: 1.2;
      font-weight: bold; }
      @media screen and (max-width: 600px) {
        .grey__imgbox h4 span {
          font-size: 1.2rem; } }
  .grey__imgbox img {
    width: 100%;
    height: auto; }

.inner {
  padding: 20px 0 50px; }

.management__youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 50px 0 0; }

.management__youtube iframe {
  width: 100%;
  height: 100%; }

.txt__block {
  padding: 10px 0 0; }
  @media screen and (max-width: 600px) {
    .txt__block {
      padding: 0; } }

.customize__txt {
  padding: 10px 0 0 !important; }

.mokuji__area {
  border: 3px solid #ddd;
  background: #fff;
  margin: 40px 0 0px; }
  @media screen and (max-width: 600px) {
    .mokuji__area {
      margin: 15px 0 0; } }
  .mokuji__area .mokuji__ttl {
    color: #002C69;
    background: #ddd;
    padding: 10px 0;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center; }
  .mokuji__area ul {
    padding: 30px 50px; }
    @media screen and (max-width: 600px) {
      .mokuji__area ul {
        padding: 15px 20px 15px 30px; } }
  .mokuji__area li {
    list-style: disc;
    padding: 0 0 5px !important;
    margin: 0 !important; }
    .mokuji__area li a {
      font-weight: 500;
      color: #002C69;
      text-decoration: none; }

.link__txt {
  margin: 0 !important;
  padding: 0 !important; }
  .link__txt a {
    color: #002C69; }

.-large .icon__fukidashi,
.-large .icon__fukidashiB {
  font-size: 1.6rem;
  width: 80px; }

.-small .icon__fukidashi,
.-small .icon__fukidashiB {
  font-size: 1.1rem; }

.-large .grey__imgbox h4 {
  font-size: 3.4rem; }

.-small .grey__imgbox h4 {
  font-size: 1.6rem; }

.-blue .mokuji__area li {
  color: #002C69; }

.banner__area--job {
  max-width: 926px;
  margin: 0 auto 100px; }
  @media screen and (max-width: 768px) {
    .banner__area--job {
      margin: 0 20px 50px; } }
  @media screen and (max-width: 600px) {
    .banner__area--job {
      margin: 0 20px 50px; } }
  .banner__area--job img {
    width: 100%;
    height: auto; }
  .banner__area--job a {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s; }
  .banner__area--job a:hover {
    text-decoration: none;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7; }

.MoreAdvancedBlock {
  position: relative; }

.chara__img01 {
  position: absolute;
  top: 0;
  right: 0; }
  @media screen and (max-width: 600px) {
    .chara__img01 {
      top: -10px;
      right: 0; } }
  .chara__img01 img {
    width: 320px;
    height: auto; }
    @media screen and (max-width: 600px) {
      .chara__img01 img {
        width: 160px;
        height: auto; } }

.OperationSystemBlock__content {
  position: relative; }

.chara__left {
  position: absolute;
  top: 70px;
  left: 50px; }
  @media screen and (max-width: 600px) {
    .chara__left {
      position: absolute;
      top: 20px;
      left: 15px; } }
  .chara__left img {
    width: 70px;
    height: auto; }
    @media screen and (max-width: 600px) {
      .chara__left img {
        width: 40px;
        height: auto; } }

.chara__right {
  position: absolute;
  top: 70px;
  right: 50px; }
  @media screen and (max-width: 600px) {
    .chara__right {
      position: absolute;
      top: 20px;
      right: 15px; } }
  .chara__right img {
    width: 70px;
    height: auto; }
    @media screen and (max-width: 600px) {
      .chara__right img {
        width: 40px;
        height: auto; } }

.chara__left02 {
  position: absolute;
  top: 90px;
  left: 50px; }
  @media screen and (max-width: 600px) {
    .chara__left02 {
      position: absolute;
      top: 30px;
      left: 15px; } }
  .chara__left02 img {
    width: 70px;
    height: auto; }
    @media screen and (max-width: 600px) {
      .chara__left02 img {
        width: 40px;
        height: auto; } }

.chara__right02 {
  position: absolute;
  top: 90px;
  right: 50px; }
  @media screen and (max-width: 600px) {
    .chara__right02 {
      position: absolute;
      top: 30px;
      right: 15px; } }
  .chara__right02 img {
    width: 70px;
    height: auto; }
    @media screen and (max-width: 600px) {
      .chara__right02 img {
        width: 40px;
        height: auto; } }

.chara__txt {
  text-align: center;
  font-size: 1.0rem;
  font-weight: bold;
  margin: 10px 0 0;
  color: #002C69; }

.txt__flex {
  display: flex;
  justify-content: space-between;
  margin: 0 0 25px; }
  .txt__flex .left {
    width: 90px;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .txt__flex .left {
        width: 45px; } }
    .txt__flex .left img {
      width: 80px;
      height: auto; }
      @media screen and (max-width: 600px) {
        .txt__flex .left img {
          width: 45px; } }
  .txt__flex .right {
    margin: 0;
    width: calc(100% - 130px);
    border: 3px solid #004098;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    position: relative; }
    @media screen and (max-width: 600px) {
      .txt__flex .right {
        padding: 15px;
        width: calc(100% - 60px); } }
  .txt__flex .right::after {
    content: "";
    position: absolute;
    top: 40px;
    left: 0;
    border-style: solid;
    border-width: 8px 16px 8px 0;
    border-color: transparent #004098 transparent transparent;
    translate: -100% -50%; }
    @media screen and (max-width: 600px) {
      .txt__flex .right::after {
        top: 25px;
        border-width: 5px 10px 5px 0; } }
  .txt__flex p {
    padding: 0 !important; }

.txt__flex02 {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin: 0 0 25px;
  align-items: flex-start; }
  .txt__flex02 .left {
    width: 90px;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .txt__flex02 .left {
        width: 45px; } }
    .txt__flex02 .left img {
      width: 70px;
      height: auto; }
      @media screen and (max-width: 600px) {
        .txt__flex02 .left img {
          width: 45px; } }
  .txt__flex02 .right {
    margin: 0;
    width: calc(100% - 130px);
    border: 3px solid #61c1be;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    position: relative; }
    @media screen and (max-width: 600px) {
      .txt__flex02 .right {
        padding: 15px;
        width: calc(100% - 60px); } }
    .txt__flex02 .right p {
      padding: 0 !important; }
  .txt__flex02 .right::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 0;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #61c1be;
    translate: 100% -50%;
    transform-origin: left; }
    @media screen and (max-width: 600px) {
      .txt__flex02 .right::after {
        top: 25px;
        border-width: 5px 0 5px 10px; } }

.txt__flex03 {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin: 0 0 25px;
  align-items: flex-start; }
  .txt__flex03 .left {
    width: 90px;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .txt__flex03 .left {
        width: 45px; } }
    .txt__flex03 .left img {
      width: 70px;
      height: auto; }
      @media screen and (max-width: 600px) {
        .txt__flex03 .left img {
          width: 45px; } }
  .txt__flex03 .right {
    margin: 0;
    width: calc(100% - 130px);
    border: 3px solid #f8c499;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    position: relative; }
    @media screen and (max-width: 600px) {
      .txt__flex03 .right {
        padding: 15px;
        width: calc(100% - 60px); } }
    .txt__flex03 .right p {
      padding: 0 !important; }
  .txt__flex03 .right::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 0;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #f8c499;
    translate: 100% -50%;
    transform-origin: left; }
    @media screen and (max-width: 600px) {
      .txt__flex03 .right::after {
        top: 25px;
        border-width: 5px 0 5px 10px; } }

.txt__flex04 {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin: 0 0 25px;
  align-items: flex-start; }
  .txt__flex04 .left {
    width: 180px;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .txt__flex04 .left {
        width: 90px; } }
    .txt__flex04 .left img {
      width: 150px;
      height: auto; }
      @media screen and (max-width: 600px) {
        .txt__flex04 .left img {
          width: 90px; } }
  .txt__flex04 .right {
    margin: 0;
    width: calc(100% - 220px);
    border: 3px solid #edde2b;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    position: relative; }
    @media screen and (max-width: 600px) {
      .txt__flex04 .right {
        padding: 15px;
        width: calc(100% - 110px); } }
    .txt__flex04 .right p {
      padding: 0 !important; }
  .txt__flex04 .right::after {
    content: "";
    position: absolute;
    top: 30px;
    right: 0;
    border-style: solid;
    border-width: 8px 0 8px 16px;
    border-color: transparent transparent transparent #edde2b;
    translate: 100% -50%;
    transform-origin: left; }
    @media screen and (max-width: 600px) {
      .txt__flex04 .right::after {
        top: 25px;
        border-width: 5px 0 5px 10px; } }

.icon__fukidashi {
  position: relative;
  color: #002C69;
  text-align: center;
  font-size: 1.0rem;
  font-weight: bold;
  margin: 10px 0 0;
  box-sizing: border-box; }
  @media screen and (max-width: 768px) {
    .icon__fukidashi {
      font-size: 1.0rem;
      margin: 10px 0 0; } }

.icon__fukidashiB {
  position: relative;
  background: #002C69;
  padding: 10px 5px;
  width: 60px;
  color: #fff;
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold;
  margin: 30px 0 -30px !important; }
  @media screen and (max-width: 768px) {
    .icon__fukidashiB {
      font-size: 1.2rem;
      margin: 20px 0 -20px !important; } }

.icon__fukidashiB:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: 5px solid #002C69; }

.management__ttl {
  text-align: center;
  margin: 50px 0 50px; }
  @media screen and (max-width: 600px) {
    .management__ttl {
      margin: 20px 0px 30px; } }

.MoreAdvancedBlock__content__head {
  font-size: 3.2rem !important; }
  @media screen and (max-width: 768px) {
    .MoreAdvancedBlock__content__head {
      font-size: 2.4rem; } }
  @media screen and (max-width: 600px) {
    .MoreAdvancedBlock__content__head {
      font-size: 1.8rem !important;
      letter-spacing: 0.05rem !important; } }

/*
.MoreAdvancedBlock__content__head{
	br{
		@include mq(small, max) {
			display: none;
		}
	}
}
*/
.sns__area {
  max-width: 850px;
  margin: 80px auto 80px; }
  @media screen and (max-width: 600px) {
    .sns__area {
      margin: 40px auto 40px; } }
  .sns__area .sns__area--ttl {
    text-align: center;
    font-size: 2.6rem;
    font-weight: bold;
    margin: 0 0 40px;
    color: #2e4f8a; }
    @media screen and (max-width: 600px) {
      .sns__area .sns__area--ttl {
        font-size: 1.6rem;
        margin: 0 0 20px; } }
  .sns__area a {
    text-decoration: none;
    color: #2e4f8a;
    border: 1px solid #ddd; }
  .sns__area .bnr__youtube a {
    background: #fff;
    padding: 40px;
    display: block;
    text-align: center;
    margin: 0 0 4%; }
    @media screen and (max-width: 600px) {
      .sns__area .bnr__youtube a {
        padding: 20px;
        margin: 0 0 15px; } }
    .sns__area .bnr__youtube a span {
      background: url("../images/icon_youtube.svg") center left no-repeat;
      background-size: 50px auto;
      padding: 30px 0 30px 70px;
      font-size: 2.4rem;
      font-weight: bold; }
      @media screen and (max-width: 600px) {
        .sns__area .bnr__youtube a span {
          background: url("../images/icon_youtube.svg") center left no-repeat;
          background-size: 25px auto;
          padding: 30px 0 30px 35px;
          font-size: 1.7rem; } }
  .sns__area .bnr__flex {
    display: flex;
    justify-content: center; }
    @media screen and (max-width: 600px) {
      .sns__area .bnr__flex {
        display: block; } }
  .sns__area .bnr__x {
    width: 48%;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .sns__area .bnr__x {
        width: 100%;
        margin: 0 0 15px; } }
    .sns__area .bnr__x a {
      background: #fff;
      box-sizing: border-box;
      display: block;
      padding: 30px 10px; }
      @media screen and (max-width: 600px) {
        .sns__area .bnr__x a {
          padding: 20px 10px; } }
      .sns__area .bnr__x a span {
        background: url("../images/icon_x.svg") center left 20px no-repeat;
        background-size: 35px auto;
        padding: 30px 30px 30px 70px;
        font-size: 1.6rem;
        font-weight: bold; }
        @media screen and (max-width: 600px) {
          .sns__area .bnr__x a span {
            background: url("../images/icon_x.svg") center left no-repeat;
            background-size: 20px auto;
            padding: 30px 0 30px 30px;
            font-size: 1.4rem; } }
  .sns__area .bnr__instagram {
    width: 48%;
    text-align: center; }
    @media screen and (max-width: 600px) {
      .sns__area .bnr__instagram {
        width: 100%; } }
    .sns__area .bnr__instagram a {
      background: #fff;
      box-sizing: border-box;
      display: block;
      padding: 30px 10px; }
      @media screen and (max-width: 600px) {
        .sns__area .bnr__instagram a {
          padding: 20px 10px; } }
      .sns__area .bnr__instagram a span {
        background: url("../images/icon_instagram.svg") center left 20px no-repeat;
        background-size: 35px auto;
        padding: 30px 30px 30px 70px;
        font-size: 1.6rem;
        font-weight: bold; }
        @media screen and (max-width: 600px) {
          .sns__area .bnr__instagram a span {
            background: url("../images/icon_instagram.svg") center left no-repeat;
            background-size: 20px auto;
            padding: 30px 0 30px 30px;
            font-size: 1.4rem; } }

.MoreAdvancedBlock__link {
  margin: -20px 0 0; }

.management__contents {
  margin: -20px 0 0; }

.portfolio__btn {
  margin: 0 0 0; }
  @media screen and (max-width: 600px) {
    .portfolio__btn {
      margin: 0 0 0; } }
  .portfolio__btn--saiyou a {
    display: block;
    text-align: center;
    padding: 40px 0;
    margin: 0 0 50px;
    font-size: 3rem;
    text-decoration: none;
    color: #fff;
    background: #003c80 url("../images/job_saiyou_bg.svg") left bottom no-repeat;
    background-size: cover;
    font-weight: bold;
    position: relative; }
    .portfolio__btn--saiyou a::after {
      content: "";
      display: inline-block;
      width: 10px;
      height: 20px;
      background: url("../images/job_arrow_white.png") no-repeat;
      background-size: 10px 20px;
      position: absolute;
      top: 50%;
      right: 20px;
      z-index: 10;
      margin: -10px 0 0; }
    @media screen and (max-width: 600px) {
      .portfolio__btn--saiyou a {
        font-size: 1.8rem;
        padding: 30px 0;
        margin: 0 0 15px; } }
  .portfolio__btn--flex {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 600px) {
      .portfolio__btn--flex {
        display: block; } }
  .portfolio__btn--yougosyu {
    width: 48%;
    display: block;
    background: #FFDC64 url("../images/job_arrow_blue.png") center right 20px no-repeat;
    background-size: 10px 20px;
    color: #2E4F8A;
    text-decoration: none;
    padding: 35px;
    box-sizing: border-box;
    font-size: 2rem; }
    @media screen and (max-width: 600px) {
      .portfolio__btn--yougosyu {
        width: 100%;
        font-size: 1.8rem;
        padding: 25px;
        margin: 0 0 15px; } }
    .portfolio__btn--yougosyu span {
      background: url("../images/job_icon_yougo.svg") center left no-repeat;
      padding: 10px 0 10px 50px;
      font-weight: bold; }
      @media screen and (max-width: 600px) {
        .portfolio__btn--yougosyu span {
          background-size: 25px auto;
          padding: 10px 0 10px 40px; } }
  .portfolio__btn--qa {
    width: 48%;
    display: block;
    background: #FFDC64 url("../images/job_arrow_blue.png") center right 20px no-repeat;
    background-size: 10px 20px;
    color: #2E4F8A;
    text-decoration: none;
    padding: 35px;
    box-sizing: border-box;
    font-size: 2rem; }
    @media screen and (max-width: 600px) {
      .portfolio__btn--qa {
        width: 100%;
        font-size: 1.8rem;
        padding: 25px; } }
    .portfolio__btn--qa span {
      background: url("../images/job_icon_qa.svg") center left no-repeat;
      padding: 10px 0 10px 50px;
      font-weight: bold; }
      @media screen and (max-width: 600px) {
        .portfolio__btn--qa span {
          background-size: 25px auto;
          padding: 10px 0 10px 40px; } }

.portfolio__banner {
  margin: 50px 0 0; }
  @media screen and (max-width: 600px) {
    .portfolio__banner {
      margin: 15px 0 0; } }
  .portfolio__banner img {
    width: 100%;
    height: auto; }

.bg__white {
  background: #fff;
  padding: 0 0 80px; }
  .bg__white .bg__white--inner {
    max-width: 1000px;
    margin: 0 auto; }
    @media screen and (max-width: 600px) {
      .bg__white .bg__white--inner {
        margin: 0 20px; } }

.movie__textlink {
  font-size: 1.6rem;
  margin: 0 0 30px;
  line-height: 1.6; }
  .movie__textlink a {
    color: #002c69;
    font-weight: 500 !important; }

/* 青背景 */
.-blue .MoreAdvancedBlock__content__text {
  color: #002c69 !important; }
.-blue .MoreAdvancedBlock__content__text a:hover {
  color: #002c69 !important; }
.-blue .bg__white {
  background: none !important; }
.-blue .icon__fukidashi {
  color: #fff !important; }
.-blue .sns__area--ttl {
  color: #fff !important; }
.-blue .sns__area a {
  color: #2e4f8a !important; }
.-blue .portfolio__btn--yougosyu,
.-blue .portfolio__btn--qa {
  color: #00387d !important; }
.-blue .movie__maintxt {
  color: #fff !important; }

/* 黄背景 */
.-yellow .bg__white {
  background: none !important; }
.-yellow .sns__area--ttl {
  color: #00387d !important; }
.-yellow .sns__area a {
  color: #2e4f8a !important; }
.-yellow .MoreAdvancedBlock__content__text a:hover {
  color: #002c69 !important; }

/* 黒背景 */
.-black .bg__white {
  background: none !important; }
.-black .MoreAdvancedBlock__content__text {
  color: #002c69 !important; }
.-black .MoreAdvancedBlock__content__text a:hover {
  color: #002c69 !important; }
.-black .icon__fukidashi {
  color: #fff !important; }
.-black .sns__area--ttl {
  color: #fff !important; }
.-black .sns__area a {
  color: #2e4f8a !important; }
.-black .portfolio__btn--yougosyu,
.-black .portfolio__btn--qa {
  color: #00387d !important; }
.-black .movie__maintxt {
  color: #fff !important; }