@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
:root {
  --vw: 1vw;
}

/* ---------------------------------------------------------
animation
----------------------------------------------------------*/
.fadeAnimeBefore {
  visibility: hidden;
}

.fadeAnime {
  visibility: visible;
  animation-name: fadeAnime;
}

@keyframes fadeAnime {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes leftRotateAnime {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  50% {
    transform: rotate(-20deg) translateY(0);
  }
}
@keyframes rotateAnime {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@keyframes upAnime {
  from {
    transform: translateY(-5px);
  }
  to {
    transform: translateY(5px);
  }
}
/* ---------------------------------------------------------
header
----------------------------------------------------------*/
@media screen and (max-width: 1000px) {
  header .btn-menu span {
    background-color: #fff;
  }
}
header nav > ul > li > a, header nav > ul > li span {
  color: #fff;
}
@media screen and (max-width: 1000px) {
  header nav > ul > li > a, header nav > ul > li span {
    color: #5b7e96;
  }
}
@media screen and (max-width: 1000px) {
  header nav > ul ul a {
    color: #5b7e96;
  }
}
@media screen and (max-width: 1000px) {
  header .logo {
    background-color: rgba(255, 255, 255, 0.8);
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
}

/* ---------------------------------------------------------
.sec-kv
----------------------------------------------------------*/
.sec-kv {
  position: relative;
  background: url(../img/recruit/bg_kv.jpg) no-repeat center top;
  background-size: cover;
  padding-top: 68.75%;
}
@media screen and (max-width: 1000px) {
  .sec-kv {
    background-position: left 20% top;
    padding-top: calc(106.66 * var(--vw));
  }
}
.sec-kv .ttl {
  position: absolute;
  top: 0;
  width: calc(41.71 * var(--vw));
  margin: calc(10.93 * var(--vw)) 0 0 calc(9.06 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-kv .ttl {
    margin: calc(32 * var(--vw)) 0 0 calc(8 * var(--vw));
  }
}
.sec-kv .btn-oubo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(20.2 * var(--vw));
  margin: calc(50 * var(--vw)) 0 0 calc(9.37 * var(--vw));
  transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
  .sec-kv .btn-oubo {
    width: calc(37.33 * var(--vw));
    margin: calc(80 * var(--vw)) 0 0 calc(8 * var(--vw));
  }
}
.sec-kv .btn-oubo:hover {
  opacity: 0.7;
}

/* ---------------------------------------------------------
.sec-design
----------------------------------------------------------*/
.sec-design {
  position: relative;
  background: url(../img/recruit/bg_design.jpg) no-repeat center top;
  background-size: cover;
  padding-top: 74.7395833333%;
}
.sec-design .txt {
  position: absolute;
  top: 0;
  left: calc(9.58 * var(--vw));
  width: 39.3229166667%;
  margin-top: calc(10.2 * var(--vw));
}
.sec-design .ttl {
  position: absolute;
  top: 0;
  left: calc(9.58 * var(--vw));
  width: 34.5833333333%;
  margin-top: calc(32.55 * var(--vw));
}

/* ---------------------------------------------------------
.sec-message
----------------------------------------------------------*/
.sec-message {
  position: relative;
  min-height: calc(94.47 * var(--vw));
  background: url(../img/recruit/bg_message.png) no-repeat center top;
  background-size: 100% auto;
  margin-top: calc(-12.3 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-message {
    padding-bottom: calc(16 * var(--vw));
  }
}
@media screen and (max-width: 1000px) {
  .sec-message::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    background: url(../img/recruit/bg_message.png) no-repeat center bottom;
    background-size: 100% auto;
    padding: calc(80 * var(--vw)) 0 0;
  }
}
.sec-message .txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 5.15625%;
  margin-top: calc(9.94 * var(--vw));
}
.sec-message .ttl {
  position: relative;
  width: 45.78125%;
  padding-top: calc(21.97 * var(--vw));
  margin: 0 0 0 calc(14.94 * var(--vw));
  z-index: 2;
}
@media screen and (max-width: 1000px) {
  .sec-message .ttl {
    width: calc(46.88 * var(--vw));
  }
}
.sec-message .txt1, .sec-message .txt2 {
  width: 24.4270833333%;
  font-size: calc(1.25 * var(--vw));
  font-weight: 900;
  font-feature-settings: "palt";
  color: #fff;
  line-height: 1.6666666667;
  text-justify: distribute;
  text-align: justify;
  margin-left: calc(18.8 * var(--vw));
  margin-top: calc(5.2 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-message .txt1, .sec-message .txt2 {
    position: relative;
    width: calc(80 * var(--vw));
    font-size: calc(3.73 * var(--vw));
    font-weight: bold;
    margin-left: calc(13.33 * var(--vw));
    margin-top: calc(8 * var(--vw));
    z-index: 2;
  }
}
.sec-message .txt2 {
  margin-top: calc(2.03 * var(--vw));
}
.sec-message .pic {
  position: absolute;
  top: 0;
  right: 0;
  width: 50.9895833333%;
  margin: calc(5.2 * var(--vw)) 0 0;
}
@media screen and (max-width: 1000px) {
  .sec-message .pic {
    opacity: 0.7;
  }
}
.sec-message .btn {
  margin-left: calc(22.34 * var(--vw));
  margin-top: calc(6.56 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-message .btn {
    margin: calc(8 * var(--vw)) 0 0 calc(13.33 * var(--vw));
  }
}
.sec-message .btn a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(19.27 * var(--vw));
  height: calc(4.42 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  color: #165cb5;
  background-color: #fff;
  padding-right: calc(0.26 * var(--vw));
  padding-left: calc(3.28 * var(--vw));
  border-radius: 100px;
  border: 2px solid #165cb5;
  transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
  .sec-message .btn a {
    width: calc(49.33 * var(--vw));
    height: calc(11.33 * var(--vw));
    font-size: calc(3.73 * var(--vw));
    padding-right: calc(0.53 * var(--vw));
    padding-left: calc(8.26 * var(--vw));
  }
}
.sec-message .btn a:hover {
  opacity: 0.7;
}
.sec-message .btn a::after {
  content: "";
  width: calc(3.64 * var(--vw));
  height: calc(3.64 * var(--vw));
  background: url(../img/recruit/icon_arrow.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  .sec-message .btn a::after {
    width: calc(9.33 * var(--vw));
    height: calc(9.33 * var(--vw));
  }
}

/* ---------------------------------------------------------
.sec-vision
----------------------------------------------------------*/
.sec-vision .wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  padding: calc(4.42 * var(--vw)) calc(16.56 * var(--vw)) 0 calc(18.8 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-vision .wrapper {
    padding-right: calc(8 * var(--vw));
    padding-left: calc(8 * var(--vw));
  }
}
.sec-vision .txt-col {
  width: calc(26.66 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-vision .txt-col {
    width: calc(45.51 * var(--vw));
  }
}
.sec-vision .ttl {
  width: calc(22.6 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-vision .ttl {
    width: calc(33.06 * var(--vw));
  }
}
.sec-vision .txt1, .sec-vision .txt2 {
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  font-feature-settings: "palt";
  color: #165cb5;
  line-height: 1.6666666667;
  text-justify: distribute;
  text-align: justify;
  margin-top: calc(10.62 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-vision .txt1, .sec-vision .txt2 {
    font-size: calc(3.73 * var(--vw));
  }
}
.sec-vision .txt2 {
  margin-top: calc(2.18 * var(--vw));
}
.sec-vision .btn {
  margin-top: calc(7.29 * var(--vw));
  margin-left: calc(3.59 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-vision .btn {
    margin-left: 0;
  }
}
.sec-vision .btn a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(19.27 * var(--vw));
  height: calc(4.42 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  color: #165cb5;
  background-color: #fff;
  padding-right: calc(0.26 * var(--vw));
  padding-left: calc(3.28 * var(--vw));
  border-radius: 100px;
  border: 2px solid #165cb5;
  transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
  .sec-vision .btn a {
    width: calc(49.33 * var(--vw));
    height: calc(11.33 * var(--vw));
    font-size: calc(3.73 * var(--vw));
    padding-right: calc(0.53 * var(--vw));
    padding-left: calc(8.26 * var(--vw));
  }
}
.sec-vision .btn a:hover {
  opacity: 0.7;
}
.sec-vision .btn a::after {
  content: "";
  width: calc(3.64 * var(--vw));
  height: calc(3.64 * var(--vw));
  background: url(../img/recruit/icon_arrow.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  .sec-vision .btn a::after {
    width: calc(9.33 * var(--vw));
    height: calc(9.33 * var(--vw));
  }
}
.sec-vision .pic {
  margin-top: calc(10.67 * var(--vw));
}

/* ---------------------------------------------------------
.sec-talk
----------------------------------------------------------*/
.sec-talk {
  position: relative;
  background-color: #165cb5;
  padding-top: calc(19.11 * var(--vw));
  overflow: hidden;
}
.sec-talk::after {
  content: "";
  position: absolute;
  bottom: calc(-36.46 * var(--vw));
  left: 0;
  width: 100%;
  background: url(../img/recruit/bg_talk.png) no-repeat;
  background-size: 100% auto;
  padding-top: calc(50.26 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk::after {
    bottom: calc(-21.34 * var(--vw));
  }
}
.sec-talk .ttl {
  width: calc(66.45 * var(--vw));
  margin-left: calc(14.21 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .ttl {
    width: calc(85.06 * var(--vw));
    margin: 0 auto;
  }
}
.sec-talk .box1, .sec-talk .box2, .sec-talk .box3, .sec-talk .box4 {
  display: flex;
  justify-content: space-between;
  background: url(../img/recruit/bg_talk.png) no-repeat;
  background-size: 100% auto;
  padding: calc(19.16 * var(--vw)) calc(9.68 * var(--vw)) 0 calc(9.63 * var(--vw));
  margin-top: calc(-7.35 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .box1, .sec-talk .box2, .sec-talk .box3, .sec-talk .box4 {
    position: relative;
    display: block;
    background: none;
    padding: calc(24 * var(--vw)) calc(8 * var(--vw)) calc(8 * var(--vw));
  }
}
@media screen and (max-width: 1000px) {
  .sec-talk .box1::before, .sec-talk .box2::before, .sec-talk .box3::before, .sec-talk .box4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: url(../img/recruit/bg_talk.png) no-repeat;
    background-size: 100% auto;
    padding-top: calc(26.66 * var(--vw));
  }
}
.sec-talk .box2 {
  margin-top: calc(4.68 * var(--vw));
}
.sec-talk .box3 {
  margin-top: calc(3.33 * var(--vw));
}
.sec-talk .box4 {
  margin-top: calc(3.12 * var(--vw));
}
.sec-talk .subttl1 {
  width: calc(39.16 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .subttl1 {
    position: relative;
    width: calc(66.84 * var(--vw));
  }
}
.sec-talk .subttl2 {
  width: calc(43.33 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .subttl2 {
    position: relative;
    width: calc(73.95 * var(--vw));
  }
}
.sec-talk .subttl3 {
  width: calc(40.72 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .subttl3 {
    position: relative;
    width: calc(69.51 * var(--vw));
  }
}
.sec-talk .subttl4 {
  width: calc(36.92 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .subttl4 {
    position: relative;
    width: calc(63.02 * var(--vw));
  }
}
.sec-talk .txt-col {
  width: calc(36.19 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  font-feature-settings: "palt";
  color: #fff;
  line-height: 1.3333333333;
  text-justify: distribute;
  text-align: justify;
  padding-top: calc(8.43 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .txt-col {
    width: 100%;
    font-size: calc(3.73 * var(--vw));
    line-height: 1.6;
  }
}
.sec-talk .txt {
  margin-top: calc(0.83 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-talk .txt {
    margin-top: calc(4.26 * var(--vw));
  }
}
.sec-talk .btn {
  position: relative;
  margin-top: calc(12.5 * var(--vw));
  margin-left: calc(71.14 * var(--vw));
  z-index: 2;
}
@media screen and (max-width: 1000px) {
  .sec-talk .btn {
    margin-top: calc(16 * var(--vw));
    margin-left: calc(8 * var(--vw));
  }
}
.sec-talk .btn a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(19.27 * var(--vw));
  height: calc(4.42 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  color: #165cb5;
  background-color: #fff;
  padding-right: calc(0.26 * var(--vw));
  padding-left: calc(3.28 * var(--vw));
  border-radius: 100px;
  border: 2px solid #165cb5;
  transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
  .sec-talk .btn a {
    width: calc(49.33 * var(--vw));
    height: calc(11.33 * var(--vw));
    font-size: calc(3.73 * var(--vw));
    padding-right: calc(0.53 * var(--vw));
    padding-left: calc(8.26 * var(--vw));
  }
}
.sec-talk .btn a:hover {
  opacity: 0.7;
}
.sec-talk .btn a::after {
  content: "";
  width: calc(3.64 * var(--vw));
  height: calc(3.64 * var(--vw));
  background: url(../img/recruit/icon_arrow.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  .sec-talk .btn a::after {
    width: calc(9.33 * var(--vw));
    height: calc(9.33 * var(--vw));
  }
}

/* ---------------------------------------------------------
.sec-think
----------------------------------------------------------*/
.sec-think {
  position: relative;
  background-color: #165cb5;
  padding: calc(22.76 * var(--vw)) 0 calc(8.12 * var(--vw)) calc(9.63 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-think {
    padding-top: calc(32 * var(--vw));
    padding-left: calc(8 * var(--vw));
  }
}
.sec-think::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(../img/recruit/bg_think.jpg) no-repeat;
  background-size: 100% auto;
  padding-top: calc(51.56 * var(--vw));
  margin-top: calc(16.77 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-think::before {
    margin-top: calc(16 * var(--vw));
  }
}
.sec-think .ttl {
  position: relative;
  width: calc(23.9 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-think .ttl {
    width: calc(40.79 * var(--vw));
    filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.6));
  }
}
.sec-think .txt1, .sec-think .txt2 {
  position: relative;
  width: calc(20.46 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  font-feature-settings: "palt";
  color: #fff;
  line-height: 1.5;
  text-justify: distribute;
  text-align: justify;
  margin-top: calc(2.7 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-think .txt1, .sec-think .txt2 {
    width: auto;
    font-size: calc(3.73 * var(--vw));
    line-height: 1.6;
    padding-right: calc(8 * var(--vw));
    margin-top: calc(10.66 * var(--vw));
  }
}
.sec-think .txt2 {
  margin-top: calc(1.77 * var(--vw));
}
@media screen and (max-width: 1000px) {
  .sec-think .txt2 {
    margin-top: calc(5.33 * var(--vw));
  }
}
.sec-think .btn {
  position: relative;
  margin-top: calc(3.64 * var(--vw));
  z-index: 2;
}
@media screen and (max-width: 1000px) {
  .sec-think .btn {
    margin-top: calc(8 * var(--vw));
  }
}
.sec-think .btn a {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(19.27 * var(--vw));
  height: calc(4.42 * var(--vw));
  font-size: calc(1.25 * var(--vw));
  font-weight: bold;
  color: #165cb5;
  background-color: #fff;
  padding-right: calc(0.26 * var(--vw));
  padding-left: calc(3.28 * var(--vw));
  border-radius: 100px;
  border: 2px solid #165cb5;
  transition: opacity 0.3s;
}
@media screen and (max-width: 1000px) {
  .sec-think .btn a {
    width: calc(49.33 * var(--vw));
    height: calc(11.33 * var(--vw));
    font-size: calc(3.73 * var(--vw));
    padding-right: calc(0.53 * var(--vw));
    padding-left: calc(8.26 * var(--vw));
  }
}
.sec-think .btn a:hover {
  opacity: 0.7;
}
.sec-think .btn a::after {
  content: "";
  width: calc(3.64 * var(--vw));
  height: calc(3.64 * var(--vw));
  background: url(../img/recruit/icon_arrow.png) no-repeat;
  background-size: contain;
}
@media screen and (max-width: 1000px) {
  .sec-think .btn a::after {
    width: calc(9.33 * var(--vw));
    height: calc(9.33 * var(--vw));
  }
}

footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: url(../img/recruit/bg_footer.png) no-repeat center top;
  background-size: 100% auto;
  padding-top: calc(10.67 * var(--vw));
}