@charset "utf-8";

.block {
  position: relative;
}

.img img {
  width: 100%;
  max-width: none;
}

/**/
article > section:not(:last-of-type) {
  margin-bottom: calc(100px - 3vw);
}

@media screen and (max-width: 767px) {
  article > section:not(:last-of-type) {
    margin-bottom: 9vw;
  }

  article > section:first-of-type {
    margin-bottom: 14vw;
  }
}

/**/
.mv {
  position: relative;
  height: 46.736vw;
  background-size: 38.264vw auto;
  background-position: 100% 100px;
  background-repeat: no-repeat;
}

.mv nav {
  position: absolute;
  top: 26vw;
  left: 8.3%;
}

.mv nav ul li:not(:last-child) {
  margin-bottom: 2vw;
}

.mv nav ul li {
  width: 2.1vw;
}

.mv nav ul li img {
  width: 100%;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.mv nav ul li img:hover {
  opacity: 0.5;
  transition: opacity 0.2s ease-in-out;
}

.mv .img {
  position: absolute;
  top: 100px;
  left: calc(50% - 37.5vw);
  width: 59.1vw;
}

.mv .img > span {
  position: absolute;
  top: 2.2vw;
  left: 50%;
  z-index: 150;
  transform: translateX(-48%);
  width: 100%;
  color: #fff;
  font-size: 4.094vw;
  font-weight: bold;
  line-height: 0.8;
  opacity: 0;
  transition: top 0.8s ease-out, opacity 0.8s ease-out;
}

.mv .img > span[data-emergence="visible"] {
  top: 0.2vw;
  opacity: 1;
}

/*.mv .img span span {
	letter-spacing: -1.9vw;
}*/

.mv .img > span img {
  display: block;
  margin: 1vw auto 0;
  width: 20.7vw;
}

.box {
  position: absolute;
  top: calc(100px + 20.6vw);
  right: 8.5%;
  padding-top: 4.672vw;
  width: 17.856vw;
  height: 17.5vw;
  text-align: center;
  opacity: 0;
  transition: top 0.8s ease-out, opacity 0.8s ease-out;
  transition-delay: 0.5s;
}
.mv .box[data-emergence="visible"] {
  top: calc(100px + 18.6vw);
  opacity: 1;
}

.box h2 {
  margin-bottom: 2.222vw;
  color: #d6e2ef;
}

.box h2 span {
  color: #fff;
}

.mv.block-before01::before {
  top: 0;
  left: 0;
  width: 55%;
  height: 90%;
}

.mv.block-after02::after {
  top: calc(100px + 22.6vw);
  right: 0;
  width: 15.1%;
  height: 17.7vw;
}

@media screen and (max-width: 767px) {
  .mv {
    height: auto;
    background-size: 77.264vw auto;
    background-position: 100% 89.9%;
  }

  .mv nav {
    display: none;
  }

  .mv .img,
  .mv .img > span {
    position: static;
    width: 100%;
  }

  .mv .img {
    margin-top: 13vw;
    margin-bottom: 9vw;
    overflow: hidden;
  }

  .mv .img::before {
    position: absolute;
    top: 10.7vw;
    left: 50%;
    z-index: 999;
    transform: translateX(-45.6%);
    content: "";
    display: block;
    width: 68.246vw;
    height: 51.244vw;
    background-image: url(../img/main_tx01_sp.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    opacity: 0;
    transition: top 0.8s ease-out, opacity 0.8s ease-out;
  }

  .mv .img[data-emergence="visible"]::before {
    top: 8.7vw;
    opacity: 1;
  }

  .mv .img > span {
    display: block;
    position: relative;
    top: 2vw;
    left: 0;
    transform: none;
    padding-left: 6.3vw;
    color: #33547c;
    font-size: 9vw;
    line-height: 1.2;
    text-align: center;
  }

  .mv .img > span[data-emergence="visible"] {
    top: 0;
    opacity: 1;
  }

  .mv .img > span img {
    display: block;
    margin: 4vw 0;
    width: 44%;
  }

  .mv.block-before01::before {
    content: none;
  }

  .mv .box {
    position: static;
    position: relative;
    top: 2vw;
    left: 8vw;
    padding: 15.344vw 0 0;
    width: 57.366vw;
    height: 57.366vw;
    opacity: 0;
  }
  .mv .box[data-emergence="visible"] {
    top: 0;
    opacity: 1;
  }

  .mv .box .heading01 {
    margin-bottom: 5vw;
    font-size: 8.344vw;
  }

  .mv .box .heading01 span {
    font-size: 4.172vw;
    font-weight: normal;
  }

  .mv.block-after02::after {
    top: auto;
    right: 25vw;
    bottom: -6.9vw;
    z-index: -1;
    width: 24.7vw;
    height: 24.7vw;
  }
}

/**/
.philosophy {
  position: relative;
  height: 41.667vw;
}

.philosophy .txt01 {
  position: absolute;
  top: 6vw;
  right: 14.4vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.5s;
}
.philosophy .txt01[data-emergence="visible"] {
  top: 4vw;
  opacity: 1;
}

.philosophy .txt01 .heading01 {
  color: #667f9d;
}

.philosophy .txt01 .name {
  margin-top: 0.5vw;
  color: #fff;
  font-size: 1.111vw;
  letter-spacing: 0.1vw;
}
_::-webkit-full-page-media,
_:future,
:root .philosophy .txt01 .name {
  font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-weight: 400;
}

.philosophy .img {
  position: absolute;
  top: 13.1vw;
  left: calc(50% - 6.8vw);
  width: 41.111vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  /*transition-delay: 1s;*/
}
.philosophy .img[data-emergence="visible"] {
  top: 11.1vw;
  opacity: 1;
}

.philosophy .txt02 {
  position: absolute;
  top: 10.208vw;
  left: 14.3vw;
  width: 26.25vw;
  text-align: left;
}

.philosophy .txt02 .heading02 {
  margin-bottom: 1.6vw;
  color: #acc5e0;
}

.philosophy .txt02 p {
  font-size: 1.111vw;
  line-height: 2;
}

.philosophy .txt02 p:first-of-type {
  margin-bottom: 1.8vw;
}

.philosophy.block-before01::before {
  top: 0;
  right: 0;
  width: 41.667vw;
  height: 100%;
}

.philosophy.block-after03::after {
  bottom: 0;
  left: 0;
  width: 12.222vw;
  height: 6.667vw;
}

@media screen and (max-width: 767px) {
  .philosophy {
    padding-top: 32.334vw;
    height: auto;
  }

  .philosophy .txt01 {
    top: 12.8vw;
  }
  .philosophy .txt01[data-emergence="visible"] {
    top: 10.8vw;
  }

  .philosophy .txt01 .heading01 {
    font-size: 8.822vw;
  }

  .philosophy .txt01 .name {
    margin-top: 1.2vw;
    font-size: 4.411vw;
    letter-spacing: 0.25vw;
  }

  .philosophy .txt02 {
    position: static;
  }

  .philosophy .img {
    position: relative;
    top: 2vw;
    left: 0;
    margin-bottom: 7vw;
    width: 100%;
  }
  .philosophy .img[data-emergence="visible"] {
    top: 0;
  }

  .philosophy .txt02 {
    padding: 0 5vw;
    width: 100%;
  }

  .philosophy .txt02 p {
    font-size: 4.111vw;
    letter-spacing: -0.2vw;
  }

  .philosophy.block-before01::before {
    width: 89.667vw;
    height: 35vw;
  }

  .philosophy.block-after03::after {
    top: 97.7vw;
    right: 0;
    bottom: 0;
    left: auto;
    width: 12.516vw;
    height: 12.516vw;
  }
}

/**/
.know li {
  position: relative;
  height: 40vw;
  list-style: none;
}

.know li .txt {
  position: absolute;
  top: 10.208vw;
  left: 14.3vw;
  width: 29.25vw;
  font-size: 1.111vw;
  text-align: left;
}

.know li .txt::before {
  content: "";
  display: block;
  position: absolute;
  width: 11.944vw;
  height: 11.944vw;
  background-position: 0 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.5s;
}

.know li:nth-child(1) {
  background-color: #f2f2f2;
}

.know li:nth-child(1) .txt {
  top: 11vw;
  left: 49vw;
  width: 25.25vw;
}

.know li:nth-child(1) .txt::before {
  top: -6.1vw;
  left: 23vw;
  font-size: 120px;
  color: #ccc;
  font-weight: bold;
}
.know li[data-emergence="visible"]:nth-child(1) .txt::before {
  top: -10.1vw;
  opacity: 1;
}

.know li:nth-child(1) .img {
  position: absolute;
  top: 8vw;
  left: 0;
  width: 29.444vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
}
.know li[data-emergence="visible"]:nth-child(1) .img {
  top: 6vw;
  opacity: 1;
}

.know li:nth-child(1) .img.pc {
  top: auto;
  right: 0;
  bottom: -3.5vw;
  left: auto;
  width: 20vw;
  opacity: 0;
  transition: bottom 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 1s;
}
.know li[data-emergence="visible"]:nth-child(1) .img.pc {
  bottom: -1.5vw;
  opacity: 1;
}

.know .block-before02::before {
  bottom: 2.8vw;
  left: 0;
  width: 38.889vw;
  height: 27.778vw;
}

.know .block-after01::after {
  bottom: -3.8vw;
  left: 0;
  width: 6.667vw;
  height: 6.667vw;
}

.know li:nth-child(2) .txt::before {
  top: -2.1vw;
  left: 20.7vw;
  background-image: url(../img/num02.png);
  background-size: 11.944vw auto;
  transition-delay: 1s;
}
.know li[data-emergence="visible"]:nth-child(2) .txt::before {
  top: -4.1vw;
  opacity: 1;
}

.know li:nth-child(2) .img {
  position: absolute;
  top: 7.7vw;
  right: 16.9vw;
  width: 29.444vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.5s;
}
.know li[data-emergence="visible"]:nth-child(2) .img {
  top: 5.7vw;
  opacity: 1;
}

.know .block-before01::before {
  bottom: 4.5vw;
  left: 0;
  width: 38.889vw;
  height: 27.778vw;
}

.know .block-after03::after {
  bottom: 4vw;
  right: 19vw;
  width: 30vw;
  height: 27.778vw;
}

.know li:nth-child(even).block-before01::before,
.know li:nth-child(even).block-after02::after {
  content: none;
}

.know li:nth-child(3) {
  background-color: #f2f2f2;
}

.know li:nth-child(3) .txt {
  top: 5.4vw;
  left: 49vw;
}

.know li:nth-child(3) .txt::before {
  top: 0.1vw;
  left: 23vw;
  background-image: url(../img/num03.png);
  background-size: 11.944vw auto;
}

.know li[data-emergence="visible"]:nth-child(3) .txt::before {
  top: -2.1vw;
  opacity: 1;
}

.know li:nth-child(3) .img {
  position: absolute;
  top: 6.1vw;
  left: 13vw;
  width: 29.444vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.5s;
}
.know li[data-emergence="visible"]:nth-child(3) .img {
  top: 4.1vw;
  opacity: 1;
}

.know li .txt .heading03 {
  margin-bottom: 1.6vw;
}

.know li .txt p {
  font-size: 1.111vw;
  line-height: 2;
}

.know li .txt p:first-of-type {
  margin-bottom: 1.8vw;
}

@media screen and (max-width: 767px) {
  .know li {
    height: auto;
  }

  .know li .txt .heading03 {
    margin-bottom: 7vw;
  }

  .know li .txt p {
    font-size: 4.111vw;
    letter-spacing: -0.2vw;
  }

  .know li:nth-child(1),
  .know li:nth-child(2),
  .know li:nth-child(3) {
    padding: 8vw 0;
  }

  .know li:nth-child(1) .img,
  .know li:nth-child(2) .img,
  .know li:nth-child(3) .img,
  .know li:nth-child(1) .txt,
  .know li:nth-child(2) .txt,
  .know li:nth-child(3) .txt {
    position: relative;
  }

  .know li:nth-child(1) .img,
  .know li:nth-child(2) .img,
  .know li:nth-child(3) .img {
    top: 2.7vw;
    width: 55.28vw;
  }
  .know li:nth-child(2) .img {
    right: -0.1vw;
  }
  .know li:nth-child(3) .img {
    left: 0;
  }
  .know li[data-emergence="visible"]:nth-child(1) .img,
  .know li[data-emergence="visible"]:nth-child(2) .img,
  .know li[data-emergence="visible"]:nth-child(3) .img {
    top: 0.7vw;
  }

  .know li:nth-child(1) .txt,
  .know li:nth-child(2) .txt,
  .know li:nth-child(3) .txt {
    top: 0;
    left: 0;
    padding: 0 5vw;
    width: 100%;
  }

  .know li .txt::before {
    width: 20.944vw;
    height: 17.944vw;
    background-size: 20.944vw auto !important;
  }

  .know li:nth-child(1) .txt::before,
  .know li:nth-child(2) .txt::before,
  .know li:nth-child(3) .txt::before {
    top: -50.1vw;
    left: 68vw;
  }
  .know li:nth-child(2) .txt::before {
    left: 7vw;
  }

  .know li[data-emergence="visible"]:nth-child(1) .txt::before,
  .know li[data-emergence="visible"]:nth-child(2) .txt::before,
  .know li[data-emergence="visible"]:nth-child(3) .txt::before {
    top: -55.1vw;
  }

  .know li:nth-child(1) .img,
  .know li:nth-child(2) .img,
  .know li:nth-child(3) .img {
    margin-bottom: 16vw;
    margin-left: 7vw;
    width: 55.28vw;
  }

  .know li:nth-child(1) .txt,
  .know li:nth-child(2) .txt,
  .know li:nth-child(3) .txt {
    padding: 0 5vw;
    width: 100%;
  }

  .know li .txt .heading03 {
    margin-bottom: 7vw;
  }

  .know li:nth-child(1) .txt .heading03,
  .know li:nth-child(3) .txt .heading03 {
    margin-left: 25vw;
  }

  .know li:nth-child(1) .btn,
  .know li:nth-child(3) .btn {
    margin-top: 5vw;
    text-align: right;
  }

  .know li:nth-child(1).block-before02::before {
    top: 16vw;
    bottom: auto;
    width: 55.28vw;
    height: 52.151vw;
  }

  .know li:nth-child(1).block-after01::after {
    top: 68.1vw;
    width: 12vw;
    height: 12vw;
  }

  .know li:nth-child(2) .img {
    margin-bottom: 16vw;
    margin-left: 35vw;
  }

  .know li:nth-child(2) .txt .heading03 {
    margin-left: 4vw;
  }

  .know li:nth-child(2).block-after03::after {
    top: 16vw;
    right: 0;
    bottom: auto;
    width: 55.28vw;
    height: 52.151vw;
  }

  .know li:nth-child(2).block-before01::before {
    content: "";
    top: 68.1vw;
    right: 0;
    bottom: auto;
    left: auto;
    width: 12vw;
    height: 12vw;
  }

  .know li:nth-child(2) .btn {
    text-align: left;
  }

  .know li:nth-child(3).block-before01::before {
    top: 16vw;
    bottom: auto;
    width: 55.28vw;
    height: 52.151vw;
  }

  .know li:nth-child(3).block-after01::after {
    bottom: 83.4vw;
    width: 12vw;
    height: 12vw;
  }

  .know li:nth-child(3).block-after02::after {
    content: "";
    top: 68.1vw;
    bottom: auto;
    width: 12vw;
    height: 12vw;
  }
}

/**/
.recruit h2[data-emergence="visible"] {
  top: 0;
  opacity: 1;
}

.recruit .bg {
  margin-top: 8.1vw;
  height: 24.444vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

.recruit .bg .img {
  position: relative;
  top: -4.3vw;
  margin: 0 auto;
  width: 69.444vw;
}

.recruit .bg .img ul {
  font-size: 0;
}

.recruit .bg .img ul li {
  position: relative;
  display: inline-block;
  width: calc(100% / 5 - 0.1px);
  overflow: hidden;
}

.recruit .bg .img ul li::before {
  content: "";
  display: block;
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-color: #fff;
  transform: scaleX(1);
  transform-origin: top right;
  transition: transform 0.5s ease-out;
  transition-delay: 0.5s;
}

.recruit .bg .img ul li:nth-child(2)::before {
  transition-delay: 0.65s;
}
.recruit .bg .img ul li:nth-child(3)::before {
  transition-delay: 0.85s;
}
.recruit .bg .img ul li:nth-child(4)::before {
  transition-delay: 1.25s;
}
.recruit .bg .img ul li:nth-child(5)::before {
  transition-delay: 1.55s;
}

.recruit .bg .img[data-emergence="visible"] ul li::before {
  transform: scaleX(0);
}

.recruit .bg .img ul li img {
  width: 100%;
  max-width: none;
}

.recruit .bg .txt {
  position: relative;
  top: 2vw;
  margin-bottom: 2vw;
  color: #d6e2ef;
  font-size: 1.111vw;
  line-height: 2;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.5s;
}
.recruit .bg .btn {
  position: relative;
  top: 2vw;
  opacity: 0;
  transition: top 0.5s ease-out, opacity 0.5s ease-out;
  transition-delay: 0.7s;
}
.recruit .bg[data-emergence="visible"] .txt,
.recruit .bg[data-emergence="visible"] .btn {
  top: 0;
  opacity: 1;
}

@media screen and (max-width: 767px) {
  .recruit .bg {
    margin-top: 39.1vw;
    height: 79.791vw;
    background-image: url(../img/bg01_sp.jpg);
  }

  .recruit .bg .img {
    top: -32.3vw;
    width: 78.444vw;
  }

  .recruit .bg .img ul li:nth-child(1),
  .recruit .bg .img ul li:nth-child(2) {
    width: calc(100% / 2 - 0.1px);
  }
  .recruit .bg .img ul li:nth-child(3),
  .recruit .bg .img ul li:nth-child(4),
  .recruit .bg .img ul li:nth-child(5) {
    width: calc(100% / 3 - 0.1px);
  }

  .recruit .bg .txt {
    margin-top: -28vw;
    margin-bottom: 4vw;
    font-size: 4.172vw;
  }
}