@charset "shift_jis";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

@media screen and (max-width: 767px) {

/* CSS Document */
body {
    color: #000000;
    font-size: 12px;
    line-height: 18px;
    margin: 0 0 0 0;
    padding: 0;
    font-weight: 500;
    font-family: "Noto Sans JP", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック",
    "MS PGothic", sans-serif;
  }
  a {
    text-decoration: none;
    color: #000;
  }
  ol,
  ul {
    list-style: none;
  }
  ol,
  ul,
  p,
  h2,
  h3,
  h4,
  figure,
  img {
    margin: 0;
    padding: 0;
  }

  h1 {
    margin: 0 0 0 5px;
    position: absolute !important;
  }

/* ----------------------------------------
recruit header
---------------------------------------- */

#recruit_h .head_logo a img {
  display: block;
  width: 84%;
  margin: 15px 0 0;
}

.recruit_h_fixed {
  position: fixed;
  right: 12px;
  top: 30px;
  z-index: 10;
}

/* ヘッダー header */
		header#recruit_h {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 10px 0 5px 10px;
			background: rgba(255, 255, 255, 0.9);
			z-index: 10;
			top: 0;
			left: 0;
      > div {
				.drawer_hidden {
					display: none;
				}
				.recruit_drawer_open {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 50px;
					width: 50px;
					position: relative;
					z-index: 100;
          background: #8ac755;
          border-radius: 50%;
					& span,
					& span:before,
					& span:after {
						content: "";
						display: block;
						height: 2px;
						width: 18px;
						background: #fff;
						transition: 0.3s;
						position: absolute;
					}
					& span:before {
						bottom: 6px;
					}
					& span:after {
						top: 6px;
					}
				}
				& div.recruit_h_menu {
					width: 70%;
					height: 100%;
					box-sizing: border-box;
					padding: 40px 0 0 0;
					position: fixed;
					top: 0;
					left: 100%;
					z-index: 99;
					background: #ffffff;
					border-top: 5px solid;
					border-image: none;
					transition: 0.3s;
					& a {
						letter-spacing: 0.05em;
					}
					/* ナビゲーション */
					& ul {
						width: 90%;
						margin: 0 auto 25px auto;
            & li:first-child a {
              border-bottom: 1px solid #ccc;
            }
            & li:nth-child(2) a {
              border-bottom: 1px solid #f6b7bf;
            }
            & li:nth-child(3) a {
              border-bottom: 1px solid #ccc;
            }
            & li:nth-child(4) a {
              border-bottom: 1px solid #ccc;
            }
            & li:nth-child(5) a {
              border-bottom: 1px solid #f6af6d;
            }
            & li:last-child a {
              border-bottom: 1px solid #e1c7a0;
            }
						& a {
							display: block;
							padding: 15px 0;
							font-size: 13px;
							line-height: 20px;
              font-weight: 500;
							position: relative;
						}
					}
				}
        #drawer_input {
          display: none;
        }
				#drawer_input:checked {
					~ div.recruit_h_menu {
						left: 30%;
					}
					~ .recruit_drawer_open span {
						background: rgba(255, 255, 255, 0);
						&:before {
							bottom: 0;
							transform: rotate(45deg);
						}
						&:after {
							top: 0;
							transform: rotate(-45deg);
						}
					}
				}
			}
		}

/*--- 共通ボタン ---*/

.recruit_entry_btn {
    position: relative;
}

.recruit_entry_btn a {
    width: 210px;
    height: 52px;
    background: #000000;
    display: flex;
    align-items: center;
    border-radius: 28px;
    color: #fff;
    box-sizing: border-box;
    padding: 0 0 0 20px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 auto;
    position: relative;
    &:hover span {
        width: 206px;
        height: 48px;
        border-radius: 30px;
        background: #fff;
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: -1;
    }
    &:hover {
        color: #181871;
        z-index: 1;
    }
}

.recruit_entry_btn a span {
    width: 50px;
    height: 26px;
    border-radius: 14px;
    background: #fff;
    position: absolute;
    top: 14px;
    right: 15px;
    z-index: 1;
    transition: 0.3s;
}

.recruit_entry_btn a::before {
    content: "";
    width: 15px;
    height: 2px;
    background: #000000;
    position: absolute;
    top: 26px;
    right: 32px;
    z-index: 2;
}

.recruit_entry_btn a::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    border-right: 2px solid #000000;
    border-bottom: 2px solid #000000;
    position: absolute;
    top: 23px;
    right: 32px;
    z-index: 2;
}



/* ----------------------------------------
recruit footer
---------------------------------------- */

.recruit_foot_wrap {
  background: none !important;
  padding: 0;
  margin: 100px 0 0;
}

.recruit_foot_enrty ul {
    width: 100%;
    
}

.recruit_foot_enrty ul li {
    background-image: url(../recruit/number/img/footer_bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    width: 100%;
    padding: 65px 5%;
    text-align: center;
    position: relative;
    &:last-child {
      padding: 65px 5% 100px;
      &::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        margin: auto;
      }
    }
}

.recruit_foot_enrty ul li h3 {
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    margin: 0 0 30px;
    display: inline-block;
    position: relative;
}

.recruit_foot_enrty ul li:nth-child(2) h3 {
  font-size: 25px !important;
}

.recruit_foot_enrty ul li h3::before {
  content: "";
  position: absolute;
  width: 7px;
  height: 45px;
  background: #f5d44e;
  left: -17px;
  top: 50%;
  transform: translateY(-50%) rotate(-20deg);
  clip-path: polygon(
    0 0,
    100% 0,
    65% 100%,
    35% 100%
  );
}

.recruit_foot_enrty ul li h3::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 45px;
  background: #f5d44e;
  right: -17px;
  top: 50%;
  transform: translateY(-50%) rotate(20deg);
  clip-path: polygon(
    0 0,
    100% 0,
    65% 100%,
    35% 100%
  );
}

.recruit_foot_enrty ul li p {
    color: #ffffff;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.7;
    letter-spacing: 0px;
    text-align: center;
}

.recruit_foot_enrty_btn {
    position: relative;
}

.recruit_foot_enrty_btn a {
    width: 300px;
    height: 68px;
    background: #ffffff;
    display: flex;
    align-items: center;
    border-radius: 40px;
    color: #000000;
    box-sizing: border-box;
    padding: 0 0 0 43px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.02em;
    position: relative;
    margin: 40px auto 0;
        &:hover span {
        width: 356px;
        height: 64px;
        border-radius: 30px;
        background: #fff;
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: -1;
    }
    &:hover {
        color: #000000;
        z-index: 1;
    }
}

.recruit_foot_enrty_btn a span {
    width: 60px;
    height: 30px;
    border-radius: 30px;
    background: #000000;
    position: absolute;
    top: 20px;
    right: 15px;
    z-index: 1;
    transition: 0.3s;
}

.recruit_foot_enrty_btn a::before {
    content: "";
    width: 15px;
    height: 2px;
    background: #ffffff;
    position: absolute;
    top: 34px;
    right: 38px;
    z-index: 2;
}

.recruit_foot_enrty_btn a::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    transform: rotate(-45deg);
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    position: absolute;
    top: 30px;
    right: 37px;
    z-index: 2;
}

.recruit_foot_menu_wrap {
  width: 100%;
  background-color: #ebebeb;
  padding: 0 0 30px;
}

.recruit_foot_menu {
  width: 92%;
  padding: 30px 6% 40px;
  border-radius: 40px;
  box-sizing: border-box;
  background-color: #ffffff;
  margin: -40px auto 0;
  position: relative;;
}

.recruit_foot_menu .recruit_entry_btn a {
  margin: 40px auto 0;
}

.recruit_foot_menu_btm {
    margin: 50px 0 0;
}

.recruit_foot_store {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
}

.recruit_foot_store span {
    width: 105px;
    display: block;
    padding: 10px 0;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: #000000;
    text-align: center;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    margin-right: 10px;
}

.recruit_foot_store a {
    color: #000000;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
}

.recruit_foot_store a i {
    margin-right: 7px;
}

.recruit_f_menu {
  margin: 20px 0 0;
}

.recruit_f_menu nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.recruit_f_menu ul li a {
    color: #000000;
    font-size: 17px;
    font-weight: 500;
    line-height: 39px;
    letter-spacing: 0px;
    padding-left: 20px;
    position: relative;
    &::before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: #f9b514;
        border-radius: 50%;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
        left: 0;
    }
}

.recruit_foot_menu_wrap .recruit_f_copyright {
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    margin: 30px 0 0;
}


/* ----------------------------------------
number
---------------------------------------- */

.recruit_main_wrap {
    margin: 20px 0 0;
}
.recruit_main_tl {
    margin: 0 0 0 5%;
    & img {
      width: 45%;
      display: block;
    }
}

.recruit_main_tl h2 {
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.01em;
  margin: 10px 0 0;
}

.recruit_company_wrap,
.recruit_staff_wrap,
.recruit_work_wrap {
  width: 90%;
  display: block;
  margin: 100px auto 0;
  box-sizing: border-box;
  & h3 {
      font-size: 28px;
      font-weight: bold;
      line-height: 1;
      letter-spacing: 0.01em;
      display: inline-block;
      position: relative;
      margin: 0 0 80px;
      &::before {
        content: '';
        display: block;
        width: 65px;
        height: 60px;
        background-size: 50%;
        background-repeat: no-repeat;
        background-position: left bottom;
        position: absolute;
        top: -60px;
        right: -60px;
      }
      &::after {
        content: '';
        display: block;
        width: 70px;
        height: 4px;
        background: #f6b7bf;
        position: absolute;
        top: 60px;
        left: 0;
      }
  }
  & ul {
    width: 90%;
    margin: 0 auto !important;
    & li {
      width: 100%;
      padding: 4% 0;
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      &:not(:last-child)::after {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        position: absolute;
        bottom: 0px;
        right: 0px;
      }
    }
    & li img {
        display: block;
        margin: 0 auto;
        width: 50%;
    }
  }
}

.recruit_company_wrap h3::before {
    background-image: url(../recruit/number/img/tl_tg_01.webp);
}

.recruit_company_wrap ul {
    border: 4px solid #37cfa4;
    & li:not(:last-child)::after {
        background: #37cfa4;
    }
}

.recruit_staff_wrap h3::before {
    background-image: url(../recruit/number/img/tl_tg_02.webp);
}

.recruit_staff_wrap ul {
    border: 4px solid #7ca5e9;
    margin: -4px 0 0;
    & li:not(:last-child)::after {
        background: #7ca5e9;
    }
}

.recruit_work_wrap h3::before {
    background-image: url(../recruit/number/img/tl_tg_03.webp);
}

.recruit_work_wrap ul {
    border: 4px solid #f6af6d;
    & li:not(:last-child)::after {
        background: #f6af6d;
    }
}




/* /media screen */

}