@charset "UTF-8";
/*********************
head
**********************/
header {
  margin-bottom: 78px;
}

.head-flex {
  display: flex;
  align-items: center;
  background: #fafafa;
  height: 78px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 500;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.head-flex .left {
  display: flex;
  align-items: center;
}
.head-flex .left a {
  padding: 10px 10px 10px 30px;
}
.head-flex .left a img {
  width: 146px;
  height: auto;
}
.head-flex .left .site {
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 7.5px;
  line-height: 140%;
  border-top: solid 0.5px #333333;
  border-bottom: solid 0.5px #333333;
  padding: 2px 3px;
  white-space: nowrap;
}
.head-flex .left .site span {
  font-size: 9.5px;
}
.head-flex .right {
  flex-grow: 1;
}
.head-flex .right ul {
  display: flex;
  justify-content: right;
}
.head-flex .right ul li {
  height: 78px;
  display: flex;
  align-items: center;
}
.head-flex .right ul a {
  margin-right: 10px;
  font-size: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}
.head-flex .right ul a:hover {
  text-decoration: underline;
  text-decoration-color: #cf111b;
  text-underline-offset: 5px;
}
.head-flex .right ul .contact {
  background: #ad0306;
}
.head-flex .right ul .contact a {
  color: white;
  margin-right: auto;
  margin-left: auto;
  padding: 0 20px;
  cursor: context-menu;
  font-size: 12px;
}
.head-flex .right ul .contact a img {
  width: 31px;
  margin: 0 auto;
  margin-bottom: 4px;
}
.head-flex .right ul .contact a:hover {
  text-decoration: none;
}
.head-flex .right ul .contact ul a {
  color: #333333;
}
.head-flex .right ul .head-recruit-info {
  border-right: solid 1px white;
  background: #cf111b;
  margin-left: 10px;
}

/*
.head-flex .right {
    .a-hover {
        &:hover {
            .hover-active {
                display: block;
            }
        }
    }
    .hover-active {
        display: none;
        position: absolute;

        top: 50px;
        padding-top: 35px;
        left: 0;

        ul {
            border-radius: 20px;
            width: fit-content;
            display: block;
            background: white;
            padding: 10px 20px;
            box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

            li {
                height: auto;
                margin: 10px auto;
                white-space: nowrap;
                a {
                    font-size: 12px;
                    &:hover {
                        text-decoration: underline;
                        text-decoration-color: #333333;
                        text-underline-offset: 5px;
                        //border-bottom: solid 1px #cf111b;
                    }
                }
            }
        }
    }

    .contact.a-hover {
        .hover-active {
            left: -70px;
        }
    }

    .head-recruit-info.a-hover {
        .hover-active {
            left: 0px;
        }
    }
}*/
.head-flex:has(.a-hover1:hover) ~ .hover-active1 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active1:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover2:hover) ~ .hover-active2 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active2:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover3:hover) ~ .hover-active3 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active3:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover4:hover) ~ .hover-active4 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active4:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover5:hover) ~ .hover-active5 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active5:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover6:hover) ~ .hover-active6 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active6:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.head-flex:has(.a-hover7:hover) ~ .hover-active7 {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active7:hover {
  visibility: visible;
  height: 200px;
  min-height: 200px;
  top: 77px;
}

.hover-active {
  visibility: none;
  border-top: 1px solid #eb0b1c;
  width: 100%;
  height: 0px;
  min-height: 0px;
  position: fixed;
  top: -200px;
  padding-top: 0px;
  left: 0;
  background: white;
  z-index: 400 !important;
  transition: 0.25s ease-in-out;
}
.hover-active .hover-menu-flex {
  display: flex;
}
.hover-active .left {
  width: 33.3333%;
  background: #ea031c;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding-right: 115px;
  height: 200px;
  min-height: 200px;
  color: white;
}
.hover-active .left .en-title1 {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 700;
  font-style: normal;
}
.hover-active .left .ja-title1 {
  font-size: 12px;
  font-family: "Hiragino Kaku Gothic Medium", "Yu Gothic Medium", "Hiragino Kaku Gothic", YuGothic, "Meiryo", sans-serif;
}
.hover-active .right {
  width: 66.6666%;
  height: 200px;
  min-height: 200px;
  background: white;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  padding-left: 100px;
}
.hover-active ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  gap: 12px;
}
.hover-active ul li {
  height: auto;
  margin-right: 100px;
  white-space: nowrap;
}
.hover-active ul li a {
  font-size: 14px;
  font-weight: 400;
}
.hover-active ul li a:hover {
  text-decoration: underline;
  text-decoration-color: #333333;
  text-underline-offset: 5px;
}
.hover-active ul li a:before {
  border-top: 2px solid #ea031c;
  border-right: 2px solid #ea031c;
  content: "";
  display: inline-block;
  height: 4px;
  width: 4px;
  margin-right: 10px;
  transform: rotate(45deg);
  position: relative;
  top: -0.2em;
}

/*
    .contact.a-hover {
        .hover-active {
            left: -70px;
        }
    }*/
.head-recruit-info.a-hover .hover-active {
  left: 0px;
}

.hover-active.system-hover .left {
  padding-right: 70px;
}
.hover-active.system-hover .left .en-title1 {
  font-size: 30px;
}

.hover-active.interview-hover ul li {
  width: 350px;
  margin-right: 0;
}

@media (max-width: 1230px) {
  .hover-active.interview-hover ul li {
    width: 300px;
  }
  .hover-active.interview-hover ul li a {
    font-size: 13px;
  }
}
/*********************
メニュー
**********************/
.menu-btn {
  position: fixed;
  top: 0px;
  right: 0px;
  display: none;
  height: 50px;
  width: 50px;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background-color: transparent;
  background: #222222;
}

.menu-text {
  color: white;
  font-size: 8px;
  position: absolute;
  width: 50px;
  bottom: 7.5px;
  left: 0%;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
}

.menu-text-close {
  display: none;
}

#menu-btn-check:checked ~ .menu-btn .menu-text-open {
  display: none;
}

#menu-btn-check:checked ~ .menu-btn .menu-text-close {
  display: block;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: "";
  display: block;
  height: 2px;
  width: 25px;
  top: 16px;
  background: transparent;
  position: absolute;
  transition: 0.5s;
}

.menu-btn span:before {
  top: auto;
  bottom: 5px;
  background-color: white;
}

.menu-btn span:after {
  top: 5px;
  background-color: white;
}

#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}

#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(20deg);
}

#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-20deg);
}

#menu-btn-check {
  display: none;
}

.menu-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0%; /**/
  z-index: 80;
  background-color: transparent;
}

/*
.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}*/
.menu-logo {
  display: flex;
  height: 50px;
  align-items: center;
}
.menu-logo img {
  width: 150px;
  margin-left: 5%;
}

.menu-content {
  width: 500px;
  max-width: 100%;
  height: 100%;
  left: auto;
  position: fixed;
  top: 0;
  right: -100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: white;
  transition: all 0.5s; /*アニメーション設定*/
  display: none;
  z-index: 550;
  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.4);
}
.menu-content .menu-logo {
  margin: 70px auto;
  margin-bottom: 0;
}
.menu-content .menu-logo a {
  margin: 0 auto;
}
.menu-content .menu-logo a img {
  margin-left: 0;
}

#menu-btn-check:checked ~ .menu-content {
  right: 0; /*メニューを画面内へ*/
}

.menu-content {
  background-color: white;
  overflow-y: scroll;
  overscroll-behavior: contain;
}
.menu-content .menu-area {
  padding-top: 80px;
  text-align: center;
  width: 100%;
  width: 300px;
  max-width: 90%;
  margin: 0 auto;
}
.menu-content .menu-area ul {
  text-align: left;
}
.menu-content .menu-area li {
  display: inline-block;
  list-style: none;
  text-align: left;
  width: auto;
  font-size: 16px;
  margin: 18px auto;
  width: auto;
}
.menu-content .menu-area .menu-anime li {
  display: block;
}
.menu-content .menu-area .sns {
  display: flex;
  justify-content: center;
}
.menu-content .menu-area .sns li {
  margin: 30px 20px;
}
.menu-content .flex-box {
  display: flex;
  flex-direction: column-reverse;
  padding: 30px 0;
}
.menu-content .flex-box a {
  width: 320px;
  max-width: 90%;
  border-radius: 9999px;
  padding: 10px 0px 20px 0px;
  margin: 15px auto;
}
.menu-content .flex-box .left a {
  background: white;
  border: solid 1px black;
}
.menu-content .flex-box .left a img {
  width: 150px;
  max-width: 100%;
  margin: 0 auto;
}
.menu-content .flex-box .right a {
  background: #cf111b;
  padding: 13px 0px 13px 0px;
  color: white;
  font-weight: 600;
}

.menu-area input {
  display: none; /*チェックボックスを隠す*/
}

.menu-area label {
  cursor: pointer;
  display: block;
  text-decoration: none;
  position: relative;
}

.menu-content .menu-area .menu-anime li {
  font-size: 15px;
  margin: 0;
  height: 0;
  overflow-y: hidden;
  transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
  -webkit-transition: padding-bottom 0.5s, padding-top 0.5s;
  -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
  -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
  -o-transition: padding-bottom 0.5s, padding-top 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li,
#menu_bar03:checked ~ #links03 li,
#menu_bar04:checked ~ #links04 li,
#menu_bar05:checked ~ #links05 li,
#menu_bar06:checked ~ #links06 li,
#menu_bar07:checked ~ #links07 li,
#menu_bar08:checked ~ #links08 li,
#menu_bar09:checked ~ #links09 li {
  width: auto;
  height: auto; /*開いたときに表示されるliの高さ*/
  opacity: 1;
  padding: 5px;
}
#menu_bar01:checked ~ #links01 li a,
#menu_bar02:checked ~ #links02 li a,
#menu_bar03:checked ~ #links03 li a,
#menu_bar04:checked ~ #links04 li a,
#menu_bar05:checked ~ #links05 li a,
#menu_bar06:checked ~ #links06 li a,
#menu_bar07:checked ~ #links07 li a,
#menu_bar08:checked ~ #links08 li a,
#menu_bar09:checked ~ #links09 li a {
  font-weight: 400;
}

.menu-content .menu-area .menu-anime {
  height: 0;
}

#menu_bar01:checked ~ #links01,
#menu_bar02:checked ~ #links02,
#menu_bar03:checked ~ #links03,
#menu_bar04:checked ~ #links04,
#menu_bar05:checked ~ #links05,
#menu_bar06:checked ~ #links06,
#menu_bar07:checked ~ #links07,
#menu_bar08:checked ~ #links08,
#menu_bar09:checked ~ #links09 {
  height: auto;
}
#menu_bar01:checked ~ #links01 li:first-child,
#menu_bar02:checked ~ #links02 li:first-child,
#menu_bar03:checked ~ #links03 li:first-child,
#menu_bar04:checked ~ #links04 li:first-child,
#menu_bar05:checked ~ #links05 li:first-child,
#menu_bar06:checked ~ #links06 li:first-child,
#menu_bar07:checked ~ #links07 li:first-child,
#menu_bar08:checked ~ #links08 li:first-child,
#menu_bar09:checked ~ #links09 li:first-child {
  padding-top: 15px;
}

/*開いたときの下の余白*/
#menu_bar01:checked ~ #links01 li:last-child,
#menu_bar02:checked ~ #links02 li:last-child,
#menu_bar03:checked ~ #links03 li:last-child,
#menu_bar04:checked ~ #links04 li:last-child,
#menu_bar05:checked ~ #links05 li:last-child,
#menu_bar06:checked ~ #links06 li:last-child,
#menu_bar07:checked ~ #links07 li:last-child,
#menu_bar08:checked ~ #links08 li:last-child,
#menu_bar09:checked ~ #links09 li:last-child {
  margin-bottom: 0px;
}

/*閉じた状態の矢印描画*/
.menu-area label {
  position: relative;
  display: inline-block;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.menu-area a {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 14px;
}
.menu-area ul {
  border-top: solid 1px gray;
}
.menu-area ul ul {
  border: 0;
}
.menu-area ul.last {
  border-bottom: solid 1px gray;
}

.menu-area label:after {
  content: "▶︎";
  display: block;
  width: 8px;
  height: 8px;
  color: gray;
  transform: rotate(0deg);
  position: absolute;
  right: -20px;
  top: 0px;
  margin: auto;
}

/*開いた状態の矢印描画*/
.menu-area input[type=checkbox]:checked + label:after {
  content: "▶︎";
  display: block;
  width: 8px;
  height: 8px;
  transform: rotate(90deg);
  position: absolute;
  right: -30px;
  bottom: -5px;
  margin: auto;
}

.sns-flex {
  display: flex;
  justify-content: center;
}
.sns-flex a {
  width: 60px;
  margin: 20px 15px;
}
.logo-flex {
  display: flex;
  justify-content: center;
  margin: 30px auto;
  align-items: center;
}
.logo-flex img {
  width: 80px;
  margin: 10px 15px;
}

.company-info {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 80px;
  margin: 0 auto;
  max-width: 90%;
}
.company-info a {
  font-size: 20px;
  color: #333333;
}

.contact-sp {
  display: none !important;
}

@media (min-width: 1420px) {
  .head-flex .left a img {
    width: 216px;
  }
  .head-flex .left .site {
    padding: 3px 4px;
    font-size: 13.2px;
  }
  .head-flex .left .site span {
    font-size: 17.3px;
  }
  .head-flex .right ul a {
    font-size: 14px;
    margin-right: 20px;
  }
  .head-flex .right ul .contact {
    width: 100px;
  }
  .head-flex .right ul .contact a {
    font-size: 14px;
  }
}
@media (max-width: 1090px) {
  .contact-pc {
    display: none !important;
  }
  .contact-sp {
    display: block !important;
  }
  header {
    margin-bottom: 50px;
  }
  .hover-active {
    display: none !important;
  }
  .head-flex {
    height: 50px;
  }
  .head-flex .left a {
    padding: 10px;
  }
  .head-flex .left a img {
    width: 100px;
    max-width: 100%;
  }
  .head-flex .right {
    padding-right: 50px;
  }
  .head-flex .right nav li {
    display: none;
    height: 50px;
  }
  .head-flex .right nav .contact {
    display: block;
    width: 50px;
    text-align: center;
  }
  .head-flex .right nav .contact a {
    padding: 6px 0;
    font-size: 8px;
    cursor: pointer;
  }
  .head-flex .right nav .contact a img {
    width: 20px;
  }
  .menu-btn {
    display: flex;
  }
  .menu-content {
    display: block;
  }
}/*# sourceMappingURL=head.css.map */