/* Scss Document */
/***********************************************************************
media queries setting
**********************************************************************/
/***********************************************************************
triangle
**********************************************************************/
.triangle {
  z-index: -1;
}

.triangle-l-green {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 28vw 28vw 0 0;
  border-color: #31e2bc transparent transparent transparent;
}

.triangle-r-green {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 39vw 39vw;
  border-color: transparent transparent #31e2bc transparent;
}
@media (max-width: 768px) {
  .triangle-r-green {
    border-width: 0 0 80vw 80vw;
  }
}

.triangle-l-fresh-green {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 480px 480px 0 0;
  border-color: #15c6c1 transparent transparent transparent;
}

.triangle-r-blue {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 26vw 26vw;
  border-color: transparent transparent #0044ff transparent;
}

.triangle-l-recruit-blue {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 110vw 110vw 0 0;
  border-color: #0061ff transparent transparent transparent;
}

.triangle-r-orange {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 20vw 20vw;
  border-color: transparent transparent #ff5c08 transparent;
}

.triangle-r-red {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 15vw 15vw;
  border-color: transparent transparent #ff0000 transparent;
}

.triangle-l-purple {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 56.6vw 56.6vw 0 0;
  border-color: #0044ff transparent transparent transparent;
}
@media (max-width: 768px) {
  .triangle-l-purple {
    border-width: 120vw 120vw 0 0;
  }
}

.triangle-l-white {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 78vw 78vw 0 0;
  border-color: #fff transparent transparent transparent;
}

.triangle-r-white {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 100vw 100vw;
  border-color: transparent transparent #fff transparent;
}

.triangle-img1 {
  background: url("../images/top/triangle-img1.png") no-repeat 0 0;
  height: 1525px;
  width: 58%;
}
@media (max-width: 768px) {
  .triangle-img1 {
    width: 18%;
  }
}

.triangle-img2 {
  background: url("../images/top/triangle-img2.png") no-repeat 0 0;
  height: 1919px;
  /*padding-top: 100%;*/
  width: 100%;
}
@media (max-width: 768px) {
  .triangle-img2 {
    height: 500px;
  }
}

.top-main {
  position: relative;
}
.top-main .triangle-l-green {
  position: absolute;
  top: 0;
  left: 0;
}
.top-main .triangle-r-blue {
  position: absolute;
  bottom: -14%;
  right: 0;
  z-index: 9;
}
@media (max-width: 768px) {
  .top-main .triangle-r-blue {
    bottom: -10%;
    z-index: 10;
  }
}

/*  home  */
.section-first {
  position: relative;
}
.section-first .triangle-l-purple {
  position: absolute;
  top: 0;
  left: 0;
}
.section-first .triangle-img1 {
  position: absolute;
  top: 544px;
  right: -23%;
}
@media (max-width: 768px) {
  .section-first .triangle-img1 {
    top: 56px;
    right: 0;
  }
}

.section-second {
  position: relative;
}
.section-second .triangle-img2 {
  position: absolute;
  top: -350px;
  left: 0;
}
@media (max-width: 768px) {
  .section-second .triangle-img2 {
    top: 230px;
  }
}

.section-third {
  position: relative;
}
.section-third .triangle-r-green {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 9;
  pointer-events: none;
}
@media (max-width: 768px) {
  .section-third .triangle-r-green {
    z-index: 0;
  }
}

.section-fifth {
  position: relative;
}
.section-fifth .triangle-l-purple {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
}
.section-fifth .triangle-r-blue {
  position: absolute;
  bottom: 0;
  right: 0;
}

/*  recruit  */
.recruit-top .top-main {
  position: relative;
}
.recruit-top .top-main .triangle-l-fresh-green {
  position: absolute;
  top: 160px;
  left: -20%;
}
@media (max-width: 768px) {
  .recruit-top .top-main .triangle-l-fresh-green {
    border-width: 210px 210px 0 0;
    left: 0%;
    top: 40px;
  }
}
.recruit-top .top-main .triangle-r-red {
  position: absolute;
  bottom: 0%;
  right: 0;
  z-index: 9;
}
.recruit-top .top-main .triangle-r-red:hover {
  border-color: transparent transparent #CA4700 transparent;
}
@media (max-width: 768px) {
  .recruit-top .top-main .triangle-r-red {
    border-width: 0 0 200px 200px;
  }
}
.recruit-top .top-main .triangle-r-red span {
  height: 20px;
  width: 5vw;
  position: absolute;
  right: 2vw;
  bottom: -11vw;
}
@media (max-width: 768px) {
  .recruit-top .top-main .triangle-r-red span {
    height: 18px;
    width: 83px;
    right: 23px;
    bottom: -152px;
  }
}
.recruit-top {
  /*top-main*/
}
.recruit-top .company-section {
  position: relative;
}
.recruit-top .company-section .triangle-l-recruit-blue {
  position: absolute;
  top: 0;
  left: 0;
}
.recruit-top .work-operator-section {
  position: relative;
}
.recruit-top .work-operator-section .triangle-l-white {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.recruit-top .preson-section {
  position: relative;
}
.recruit-top .preson-section .triangle-r-white {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 0;
}
.recruit-top .wrapper {
  position: relative;
}
.recruit-top .wrapper .triangle-r-blue {
  position: absolute;
  bottom: -4em;
  right: 0;
  z-index: 0;
}

/***********************************************************************
border
**********************************************************************/
.left-border-blue {
  background: #006fff;
  min-height: 1800px;
  width: 7vw;
  -webkit-transform: skew(0, -45deg);
  -moz-transform: skew(0, -45deg);
  -o-transform: skew(0, -45deg);
  transform: skew(0, -45deg);
}

.right-border-green {
  background: #15c6c1;
  height: 50vw;
  width: 7vw;
  -webkit-transform: skew(0, -45deg);
  -moz-transform: skew(0, -45deg);
  -o-transform: skew(0, -45deg);
  transform: skew(0, -45deg);
}

.recruit-interview .wrapper,
.recruit-company .wrapper {
  /*min-width: 1400px;*/
  position: relative;
}
@media (max-width: 768px) {
  .recruit-interview .wrapper,
  .recruit-company .wrapper {
    min-width: inherit;
  }
}
.recruit-interview .wrapper .left-border-blue,
.recruit-company .wrapper .left-border-blue {
  position: absolute;
  left: 0;
  top: -300px;
  z-index: -1;
}
@media (max-width: 768px) {
  .recruit-interview .wrapper .left-border-blue,
  .recruit-company .wrapper .left-border-blue {
    width: 1vw;
  }
}
.recruit-interview .wrapper .right-border-green,
.recruit-company .wrapper .right-border-green {
  position: absolute;
  right: 0;
  bottom: 800px;
  z-index: -1;
}
@media (max-width: 768px) {
  .recruit-interview .wrapper .right-border-green,
  .recruit-company .wrapper .right-border-green {
    width: 1vw;
  }
}

.recruit-internship .wrapper,
.recruit-application .wrapper {
  /*min-width: 1400px;*/
  position: relative;
}
@media (max-width: 768px) {
  .recruit-internship .wrapper,
  .recruit-application .wrapper {
    min-width: inherit;
  }
}
.recruit-internship .wrapper .left-border-blue,
.recruit-application .wrapper .left-border-blue {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: -1;
  height: 50%;
}
@media (max-width: 768px) {
  .recruit-internship .wrapper .left-border-blue,
  .recruit-application .wrapper .left-border-blue {
    width: 1vw;
  }
}
.recruit-internship .wrapper .right-border-green,
.recruit-application .wrapper .right-border-green {
  position: absolute;
  right: 0;
  bottom: -100px;
  z-index: -1;
  height: 50%;
}
@media (max-width: 768px) {
  .recruit-internship .wrapper .right-border-green,
  .recruit-application .wrapper .right-border-green {
    width: 1vw;
  }
}

.recruit-work .wrapper {
  /*min-width: 1400px;*/
  position: relative;
}
@media (max-width: 768px) {
  .recruit-work .wrapper {
    min-width: inherit;
  }
}
.recruit-work .wrapper .left-border-blue {
  height: 95%;
  min-height: inherit;
  position: absolute;
  left: 0;
  top: -100px;
  z-index: -1;
}
@media (max-width: 768px) {
  .recruit-work .wrapper .left-border-blue {
    width: 1vw;
  }
}
.recruit-work .wrapper .right-border-green {
  height: 90%;
  min-height: inherit;
  position: absolute;
  right: 0;
  bottom: -100px;
  z-index: -1;
}
@media (max-width: 768px) {
  .recruit-work .wrapper .right-border-green {
    width: 1vw;
  }
}

.page .page-main .triangle-r-white,
.archive .page-main .triangle-r-white,
.category .page-main .triangle-r-white,
.single .page-main .triangle-r-white {
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 0 17vw 17vw;
}
.page .wrapper,
.archive .wrapper,
.category .wrapper,
.single .wrapper {
  /*min-width: 1400px;*/
  min-width: 1240px;
  position: relative;
}
@media (max-width: 768px) {
  .page .wrapper,
  .archive .wrapper,
  .category .wrapper,
  .single .wrapper {
    min-width: inherit;
    padding-bottom: 2em;
  }
}
.page .wrapper .left-border-blue,
.archive .wrapper .left-border-blue,
.category .wrapper .left-border-blue,
.single .wrapper .left-border-blue {
  height: 95%;
  min-height: inherit;
  position: absolute;
  left: 0;
  top: -100px;
  width: 7vw;
}
@media (max-width: 768px) {
  .page .wrapper .left-border-blue,
  .archive .wrapper .left-border-blue,
  .category .wrapper .left-border-blue,
  .single .wrapper .left-border-blue {
    width: 1vw;
    z-index: 1;
  }
}
.page .wrapper .right-border-green,
.archive .wrapper .right-border-green,
.category .wrapper .right-border-green,
.single .wrapper .right-border-green {
  height: calc(100% + 500px);
  min-height: inherit;
  position: absolute;
  right: 0;
  top: 1800px;
  width: 7vw;
}
@media (max-width: 768px) {
  .page .wrapper .right-border-green,
  .archive .wrapper .right-border-green,
  .category .wrapper .right-border-green,
  .single .wrapper .right-border-green {
    top: 1200px;
    width: 1vw;
  }
}
.page.contact .wrapper .left-border-blue,
.archive.contact .wrapper .left-border-blue,
.category.contact .wrapper .left-border-blue,
.single.contact .wrapper .left-border-blue {
  top: -200px;
}/*# sourceMappingURL=triangle.css.map */