@charset "UTF-8";
@-webkit-keyframes transformLeftRight {
  0% {
    -webkit-transform: translate(-80%, 80%);
            transform: translate(-80%, 80%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}
@keyframes transformLeftRight {
  0% {
    -webkit-transform: translate(-80%, 80%);
            transform: translate(-80%, 80%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
}
@-webkit-keyframes transformRightLeft {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(80%, -80%);
            transform: translate(80%, -80%);
    opacity: 0;
  }
}
@keyframes transformRightLeft {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(80%, -80%);
            transform: translate(80%, -80%);
    opacity: 0;
  }
}
/* ==========================================================================//
//
// トップページ
//
// ========================================================================== */
/* メインビジュアル
---------------------------------------------------------- */
.mv {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.mv .copies {
  position: absolute;
  bottom: 80px;
  left: 40px;
  color: #fff;
}
@media all and (min-width: 751px) {
  .mv .copies {
    bottom: 11%;
    left: 6%;
  }
}
.mv .copies .copy {
  font-size: 21px;
  line-height: 1.42;
  position: relative;
  opacity: 0;
  -webkit-animation: fadeLeftAnime 1s ease forwards 0.8s;
          animation: fadeLeftAnime 1s ease forwards 0.8s;
}
@media all and (min-width: 751px) {
  .mv .copies .copy {
    font-size: 47px;
  }
}
.mv .copies .copy::after {
  content: "";
  position: absolute;
  background-image: url(../../images/top/copy_bg.png);
  width: 180px;
  height: 158px;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  z-index: -1;
}
@media all and (min-width: 751px) {
  .mv .copies .copy::after {
    width: 380px;
    height: 333px;
  }
}
.mv .copies .copy_en {
  text-transform: uppercase;
  font-size: 4.2vw;
  word-spacing: 0.5em;
  line-height: 1.56;
  margin-top: 7px;
  opacity: 0;
  -webkit-animation: fadeLeftAnime 1s ease forwards 1.8s;
          animation: fadeLeftAnime 1s ease forwards 1.8s;
}
@media all and (min-width: 751px) {
  .mv .copies .copy_en {
    font-size: 1.3vw;
  }
}
.mv .movie {
  width: 100%;
  height: 100%;
}
.mv .movie video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mv .movie img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* メッセージ
---------------------------------------------------------- */
.sec_message {
  background-image: url(../../images/top/message_bg.jpg);
  background-size: cover;
  background-position-x: center;
  padding-top: 60px;
}
@media all and (min-width: 751px) {
  .sec_message {
    padding-top: 110px;
  }
}

.message_text {
  max-width: 672px;
  margin: 0 auto;
  text-align: center;
}
.message_text .message p:not(:last-child) {
  margin-bottom: 1em;
}

/* 事業紹介
---------------------------------------------------------- */
.sec_service {
  padding-top: 40px;
  position: relative;
}
@media screen and (min-width: 1151px) {
  .sec_service {
    padding-top: 110px;
  }
}
.sec_service .stone.blue {
  margin: -43% auto auto -19%;
  width: 10.2vw;
  height: 9vw;
  z-index: -1;
}
@media screen and (max-width: 1150px) {
  .sec_service .stone.blue {
    margin: -37% auto auto -5%;
    width: 29.3vw;
    height: 26vw;
  }
}
.sec_service .stone.orange {
  margin: 34% auto auto -34%;
  width: 8.6vw;
  height: 8vw;
  z-index: 1;
}
@media screen and (max-width: 1150px) {
  .sec_service .stone.orange {
    margin: 18% auto auto -20%;
    width: 18.2vw;
    height: 17vw;
  }
}
.sec_service .stone.pink {
  margin: 45% auto auto -50%;
  width: 8.6vw;
  height: 8vw;
  z-index: 1;
}
@media screen and (max-width: 1150px) {
  .sec_service .stone.pink {
    margin: 27% auto auto -32%;
    width: 13.6vw;
    height: 13vw;
  }
}
.sec_service .stone.emerald {
  margin: -19% auto auto 32%;
  width: 9.4vw;
  height: 9vw;
  z-index: 0;
}
@media screen and (max-width: 1150px) {
  .sec_service .stone.emerald {
    margin: -54% auto auto 11%;
    width: 22.6vw;
    height: 22vw;
  }
}

/* 社員を知る
---------------------------------------------------------- */
@media screen and (max-width: 1150px) {
  .sec_interview {
    padding-top: 40px;
  }
}
.sec_interview .interview_list {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
@media all and (min-width: 751px) {
  .sec_interview .interview_list {
    padding: 0 20px;
  }
}
.sec_interview .interview_list ul.slider {
  z-index: 1;
  position: relative;
}
@media all and (min-width: 751px) {
  .sec_interview .interview_list ul.slider {
    margin: 40px auto 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 15px;
  }
}
.sec_interview .interview_list ul.slider li {
  border-radius: 20px;
  overflow: hidden;
}
@media all and (max-width: 750px) {
  .sec_interview .interview_list ul.slider li {
    margin: 30px 10px;
  }
}
.sec_interview .interview_list ul.slider li a .interview_image {
  position: relative;
}
.sec_interview .interview_list ul.slider li a .interview_image .image {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.sec_interview .interview_list ul.slider li a:hover .interview_image .image {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.sec_interview .interview_list ul.slider li .interview_text {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
  padding: 20px;
  color: #fff;
  z-index: 1;
}
.sec_interview .interview_list ul.slider li .interview_text .catch {
  width: 100%;
  margin: 12px 0 10px;
}
.sec_interview .interview_list ul.slider li .interview_text span {
  font-size: 12px;
}
.sec_interview .interview_list ul.slider li .interview_text h3 {
  font-size: 24px;
  line-height: 1;
}
.sec_interview .interview_list ul.slider li:nth-child(odd) {
  bottom: -20px;
  position: relative;
}
.sec_interview .interview_list ul.slider li.staff01 .interview_text {
  background-image: url(../../images/top/interview01_bg.png);
}
.sec_interview .interview_list ul.slider li.staff02 .interview_text {
  background-image: url(../../images/top/interview02_bg.png);
}
.sec_interview .interview_list ul.slider li.staff03 .interview_text {
  background-image: url(../../images/top/interview03_bg.png);
}
.sec_interview .interview_list ul.slider li.staff04 .interview_text {
  background-image: url(../../images/top/interview04_bg.png);
}
.sec_interview .interview_image {
  position: relative;
}
.sec_interview .stone.green {
  margin: -14% auto auto -5%;
  width: 8.2vw;
  height: 7vw;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.green {
    margin: -24% auto auto 4%;
    width: 20.2vw;
    height: 20vw;
  }
}
.sec_interview .stone.purple {
  margin: 4% auto auto 90%;
  width: 13.6vw;
  height: 12vw;
  z-index: 0;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.purple {
    margin: 32% auto auto 84%;
    width: 28.6vw;
    height: 28vw;
  }
}
.sec_interview .stone.orange {
  margin: -23% auto auto 5%;
  width: 9.6vw;
  height: 9vw;
}
@media all and (max-width: 750px) {
  .sec_interview .stone.orange {
    margin: -72% auto auto 16%;
    width: 20.4vw;
    height: 19vw;
  }
}

/* 座談会
---------------------------------------------------------- */
.sec_crosstalk {
  padding-top: 60px;
}
@media all and (min-width: 751px) {
  .sec_crosstalk {
    padding-top: 110px;
  }
}
@media all and (min-width: 751px) {
  .sec_crosstalk .crosstalk_wrap ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 30px;
  }
}
.sec_crosstalk .crosstalk_wrap ul li {
  position: relative;
}
@media all and (max-width: 750px) {
  .sec_crosstalk .crosstalk_wrap ul li {
    margin-bottom: 30px;
  }
}
.sec_crosstalk .crosstalk_wrap ul li a img {
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.sec_crosstalk .crosstalk_wrap ul li a span {
  text-align: center;
  display: block;
  font-size: 24px;
  margin: 10px auto;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.sec_crosstalk .crosstalk_wrap ul li a span::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  background: #222222;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.sec_crosstalk .crosstalk_wrap ul li a:hover img {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}
.sec_crosstalk .crosstalk_wrap ul li a:hover span::after {
  width: 100%;
}
.sec_crosstalk .stone.purple {
  margin: -96% auto auto 10%;
  width: 9.6vw;
  height: 9vw;
  z-index: -1;
}
@media all and (max-width: 750px) {
  .sec_crosstalk .stone.purple {
    margin: -101% auto auto -7%;
    width: 25.6vw;
    height: 29vw;
  }
}
.sec_crosstalk .stone.blue {
  margin: -75% auto auto 105%;
  width: 5.67vw;
  height: 5vw;
  -webkit-transform: rotate(96deg);
          transform: rotate(96deg);
}
@media all and (max-width: 750px) {
  .sec_crosstalk .stone.blue {
    margin: -110% auto auto 85%;
    width: 16.9vw;
    height: 15vw;
  }
}
.sec_crosstalk .stone.pink {
  margin: -22% auto auto 10%;
  width: 6.53vw;
  height: 6vw;
}
@media all and (max-width: 750px) {
  .sec_crosstalk .stone.pink {
    margin: -106% auto auto -2%;
    width: 21.53vw;
    height: 20vw;
  }
}
.sec_crosstalk .stone.emerald {
  margin: -23% auto auto 77%;
  width: 6.6vw;
  height: 7vw;
  z-index: 1;
}
@media all and (max-width: 750px) {
  .sec_crosstalk .stone.emerald {
    margin: -97% auto auto 75%;
    width: 22.6vw;
    height: 22vw;
  }
}

/* 働き方を知る
---------------------------------------------------------- */
@media screen and (max-width: 1150px) {
  .sec_culture {
    padding-top: 40px;
  }
}
@media screen and (min-width: 1151px) {
  .sec_culture {
    padding-bottom: 10px;
  }
}
.sec_culture .stone.green {
  margin: -4% auto auto -96%;
  width: 7.6vw;
  height: 7vw;
  z-index: 1;
}
@media all and (max-width: 750px) {
  .sec_culture .stone.green {
    margin: -64% auto auto -93%;
    width: 16.6vw;
    height: 16vw;
  }
}
.sec_culture .stone.blue {
  margin: 7% auto auto -78%;
  width: 4.53vw;
  height: 4vw;
  -webkit-transform: rotate(81deg);
          transform: rotate(81deg);
}
@media all and (max-width: 750px) {
  .sec_culture .stone.blue {
    margin: -53% auto auto -76%;
    width: 10.2vw;
    height: 9vw;
  }
}
.sec_culture .stone.orange {
  margin: -16% auto auto 131%;
  width: 6.46vw;
  height: 6vw;
}
@media all and (max-width: 750px) {
  .sec_culture .stone.orange {
    margin: 59% auto auto 93%;
    width: 16vw;
    height: 15vw;
  }
}