@charset "UTF-8";
@import url("style_lif.css");
/*
Theme Name: 木幡興業株式会社
Author: 株式会社ティーエスフォート
Description: 木幡興業株式会社のテーマです。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
.grecaptcha-badge {
  visibility: hidden; }

body {
  min-width: 1120px;
  animation: fadeIn 1s forwards; }

@keyframes fadeIn {
  0% {
    opacity: .1; }
  100% {
    opacity: 1; } }
@media screen and (max-width: 767px) {
  body {
    min-width: auto;
    width: 100%; } }
h3 {
  font-size: 24px; }

p {
  font-size: 15px; }

@media screen and (max-width: 767px) {
  h3 {
    font-size: 22px; }

  p {
    font-size: 14px; } }
@media screen and (max-width: 414px) {
  h3 {
    font-size: 20px; }

  p {
    font-size: 13px; } }
.pc-br {
  display: block; }

@media screen and (max-width: 767px) {
  .pc-br {
    display: none; } }
.sp-br {
  display: none; }

@media screen and (max-width: 767px) {
  .sp-br {
    display: block; } }
header {
  position: fixed;
  z-index: 999;
  width: 100%;
  min-width: 1120px;
  height: 105px;
  background-color: #313131; }
  header .logo {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 75px; }
    header .logo a {
      position: relative;
      display: inline-block;
      width: 365px;
      height: 75px; }
      header .logo a img {
        position: absolute; }
        header .logo a img:nth-of-type(1) {
          width: 75px;
          height: 75px; }
        header .logo a img:nth-of-type(2) {
          width: 250px;
          top: 15px;
          left: 95px; }
      header .logo a p {
        position: absolute;
        top: 50px;
        left: 100px;
        font-size: 12px;
        color: white;
        white-space: nowrap; }
  header .pc-nav > ul {
    display: flex;
    justify-content: flex-end;
    white-space: nowrap; }
    header .pc-nav > ul > li {
      position: relative; }
      header .pc-nav > ul > li > a {
        display: flex;
        align-items: center;
        height: 105px;
        padding: 0 20px;
        color: white; }
        header .pc-nav > ul > li > a:hover {
          color: black;
          background-color: white; }
      header .pc-nav > ul > li a.bgc-adj {
        color: black;
        background-color: white; }
      header .pc-nav > ul > li:nth-last-of-type(3) {
        margin: 0 20px 0 0; }
      header .pc-nav > ul > li:nth-last-of-type(2) {
        background-color:  #ea0f15; }
        header .pc-nav > ul > li:nth-last-of-type(2) a {
          width: 150px;
          padding: 0 25px;
          line-height: 1.2; }
          header .pc-nav > ul > li:nth-last-of-type(2) a:hover {
            color: #e6e6e6;
            background-color: #c11116; }
      header .pc-nav > ul > li:nth-last-of-type(1) {
        background-color: #0bb078; }
        header .pc-nav > ul > li:nth-last-of-type(1) a {
          width: 150px;
          padding: 0 25px; }
          header .pc-nav > ul > li:nth-last-of-type(1) a:hover {
            color: #e6e6e6;
            background-color: #088057; }
      header .pc-nav > ul > li ul {
        display: none;
        position: absolute;
        background-color: white; }
        header .pc-nav > ul > li ul li a {
          display: inline-block;
          width: 100%;
          padding: 15px 20px;
          font-size: 14px;
          border-top: solid 1px #e6e6e6; }
          header .pc-nav > ul > li ul li a:hover {
            background-color: #e6e6e6; }
        header .pc-nav > ul > li ul li:last-child {
          border-bottom: solid 1px #e6e6e6; }
  header .sp-nav {
    display: none; }
  header .hamburger {
    display: none; }
  header .black-bg {
    display: none; }

@media screen and (max-width: 1399px) {
  header {
    height: 95px; }
    header .logo {
      height: 65px; }
      header .logo a {
        width: 325px;
        height: 65px; }
        header .logo a img:nth-of-type(1) {
          width: 65px;
          height: 65px; }
        header .logo a img:nth-of-type(2) {
          width: 230px;
          top: 10px;
          left: 80px; }
        header .logo a p {
          top: 45px;
          left: 80px; }
    header .pc-nav > ul > li > a {
      height: 95px;
      font-size: 14px;
      padding: 0 15px; }
    header .pc-nav > ul > li:nth-last-of-type(3) {
      margin: 0 10px 0 0; }
    header .pc-nav > ul > li:nth-last-of-type(2) {
      height: 47.5px; }
      header .pc-nav > ul > li:nth-last-of-type(2) a {
        padding: 0 15px;
        width: 118px;
        height: 47.5px; }
    header .pc-nav > ul > li:nth-last-of-type(1) {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 47.5px; }
      header .pc-nav > ul > li:nth-last-of-type(1) a {
        padding: 0 15px;
        width: 118px;
        height: 47.5px; } }
@media screen and (max-width: 767px) {
  header {
    min-width: auto;
    width: 100%; }
    header .pc-nav {
      display: none; }
    header .sp-nav {
      display: block;
      position: fixed;
      right: -50%;
      top: 0;
      width: 50%;
      height: 100%;
      padding: 95px 0 0 0;
      background-color: #313131;
      transition: all .2s;
      z-index: 200;
      overflow-y: auto; }
      header .sp-nav > ul > li {
        border-top: 1px dotted #c8c8c8; }
        header .sp-nav > ul > li:nth-last-of-type(1) {
          border-bottom: 1px dotted #c8c8c8; }
        header .sp-nav > ul > li a {
          position: relative;
          display: block;
          padding: 15px 0 15px 15px;
          color: white;
          font-size: 14px;
          cursor: pointer; }
          header .sp-nav > ul > li a span:nth-of-type(1) {
            position: absolute;
            z-index: 999;
            top: 21px;
            right: 28px;
            width: 14px;
            height: 2px;
            background-color: white; }
          header .sp-nav > ul > li a span:nth-of-type(2) {
            position: absolute;
            z-index: 999;
            top: 15px;
            right: 34px;
            width: 2px;
            height: 14px;
            background-color: white; }
        header .sp-nav > ul > li ul {
          display: none; }
          header .sp-nav > ul > li ul li a {
            padding: 10px 0 10px 15px; }
    header .hamburger {
      display: block;
      position: absolute;
      top: 27px;
      right: 15px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      z-index: 300; }
      header .hamburger .hamburger_line {
        position: absolute;
        left: 5px;
        width: 30px;
        height: 2px;
        background-color: white;
        transition: all .2s; }
      header .hamburger .hamburger_line01 {
        top: 10px; }
      header .hamburger .hamburger_line02 {
        top: 20px; }
      header .hamburger .hamburger_line03 {
        top: 30px; }
    header .black-bg {
      display: block;
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      z-index: 100;
      background-color: #000;
      opacity: 0;
      visibility: hidden;
      transition: all .2s;
      cursor: pointer; } }
@media screen and (max-width: 499px) {
  header {
    height: 85px; }
    header .logo {
      height: 55px; }
      header .logo a {
        width: 285px;
        height: 55px; }
        header .logo a img:nth-of-type(1) {
          width: 55px;
          height: 55px; }
        header .logo a img:nth-of-type(2) {
          width: 210px;
          top: 10px;
          left: 65px; }
        header .logo a p {
          top: 35px;
          left: 70px; }
    header .sp-nav {
      right: -75%;
      width: 75%; }
    header .hamburger {
      top: 22px; } }
@media screen and (max-width: 414px) {
  header {
    height: 60px; }
    header .logo {
      height: 40px;
      top: 10px;
      left: 10px; }
      header .logo a {
        width: 245px;
        height: 40px; }
        header .logo a img:nth-of-type(1) {
          width: 40px;
          height: 40px; }
        header .logo a img:nth-of-type(2) {
          width: 180px;
          top: 8px;
          left: 50px; }
        header .logo a p {
          display: none; }
    header .sp-nav {
      right: -75%;
      width: 75%; }
    header .hamburger {
      top: 8px;
      right: 10px; } }
.nav-open header .sp-nav {
  right: 0; }
.nav-open header .black-bg {
  opacity: .8;
  visibility: visible; }
.nav-open header .hamburger_line01 {
  transform: rotate(-45deg);
  top: 20px; }
.nav-open header .hamburger_line02 {
  width: 0;
  left: 50%; }
.nav-open header .hamburger_line03 {
  transform: rotate(45deg);
  top: 20px; }

.drop-open01 header .sp-nav ul li a .drop-line01 {
  display: none; }

.drop-open02 header .sp-nav ul li a .drop-line02 {
  display: none; }

#page_top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  width: 50px;
  height: 50px;
  z-index: 99;
  color: white;
  background-color: gray;
  padding: 5px 10px; }
  #page_top:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 20px;
    left: 16px;
    border-top: solid 5px white;
    border-right: solid 5px white;
    transform: rotate(-45deg); }
  #page_top:hover:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 1; }

@media screen and (max-width: 499px) {
  #page_top {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px; }
    #page_top:before {
      width: 15px;
      height: 15px;
      top: 15px;
      left: 13px;
      border-top: solid 4px white;
      border-right: solid 4px white; } }
.space {
  width: 100%;
  height: 105px; }

@media screen and (max-width: 1399px) {
  .space {
    height: 95px; } }
@media screen and (max-width: 499px) {
  .space {
    height: 85px; } }
@media screen and (max-width: 414px) {
  .space {
    height: 60px; } }
.main-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  margin: 0 0 75px 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center; }
  .main-visual .title h1 {
    color: white;
    font-size: 36px;
    margin: 0 0 30px 0; }
  .main-visual .title .sub-heading {
    color: #20b378;
    font-size: 24px;
    font-weight: bold;
    font-family: "Poppins", sans-serif; }

@media screen and (max-width: 767px) {
  .main-visual {
    height: 300px;
    margin: 0 0 45px 0; }
    .main-visual .title h1 {
      font-size: 31px;
      margin: 0 0 25px 0; }
    .main-visual .title .sub-heading {
      font-size: 21px; } }
@media screen and (max-width: 414px) {
  .main-visual {
    height: 200px;
    margin: 0 0 30px 0; }
    .main-visual .title h1 {
      font-size: 26px;
      margin: 0 0 20px 0; }
    .main-visual .title .sub-heading {
      font-size: 18px; } }
h2 {
  position: relative;
  margin: 0 0 60px;
  font-size: 30px;
  text-align: center; }
  h2:after {
    content: '';
    width: 60px;
    height: 5px;
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #20b378; }

@media screen and (max-width: 767px) {
  h2 {
    margin: 0 0 50px;
    font-size: 26px; }
    h2:after {
      width: 50px;
      top: 45px; } }
@media screen and (max-width: 414px) {
  h2 {
    margin: 0 0 40px;
    font-size: 22px; }
    h2:after {
      width: 40px;
      top: 40px; } }
.btn:hover:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
  pointer-events: none; }
.btn:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 20px;
  margin: auto 0;
  width: 10px;
  height: 10px;
  border-right: solid 1px white;
  border-top: solid 1px white;
  transform: rotate(45deg);
  transition: all .1s; }
.btn a {
  display: block;
  padding: 21px 0;
  color: white;
  font-size: 18px;
  transition: all .1s; }

@media screen and (max-width: 767px) {
  .btn:hover:before {
    content: none; }
  .btn:after {
    right: 15px;
    width: 8px;
    height: 8px; }
  .btn a {
    padding: 15px 0;
    font-size: 14px; } }
footer {
  background-color: #313131; }
  footer nav {
    display: flex;
    justify-content: center;
    padding: 60px 0 40px;
    white-space: nowrap; }
    footer nav ul {
      margin: 0 100px 0 0; }
      footer nav ul li {
        font-size: 14px; }
        footer nav ul li:hover {
          color: black;
          background-color: white; }
        footer nav ul li a {
          display: block;
          width: 100%;
          color: white;
          padding: 5px 10px; }
          footer nav ul li a:hover {
            color: black; }
  footer .logo-link {
    display: block;
    width: 200px;
    margin: 0 auto; }
    footer .logo-link .logo {
      text-align: center; }
      footer .logo-link .logo img:nth-child(1) {
        margin: 0 0 10px 0;
        backface-visibility: hidden; }
      footer .logo-link .logo img:nth-child(2) {
        display: block;
        width: 200px;
        margin: 0 auto 10px;
        backface-visibility: hidden; }
  footer p {
    font-size: 12px;
    text-align: center;
    color: white;
    padding: 0 0 20px; }

@media screen and (max-width: 767px) {
  footer {
    padding: 20px 0 0 0; }
    footer nav {
      display: none; } }
@media screen and (max-width: 499px) {
  footer .logo-link {
    width: 150px; }
    footer .logo-link .logo img:nth-child(1) {
      width: 30px;
      margin: 0 0 5px 0; }
    footer .logo-link .logo img:nth-child(2) {
      width: 150px; } }
.not-found {
  width: 1120px;
  margin: 0 auto;
  padding: 195px 0 250px 0;
  text-align: center; }
  .not-found h1 {
    margin: 0 0 60px 0;
    text-align: center; }
  .not-found p {
    text-align: center; }
    .not-found p:nth-of-type(1) {
      margin: 0 0 30px 0; }

@media screen and (max-width: 767px) {
  .not-found {
    width: 100%; } }




/* --------------------------　2023/10/3 追加css　-------------------------- */

table#recruit{
	
  width: 100%;
  border-collapse: collapse;
   border-top:#20b378 solid 1px;
   border-left: #20b378 solid 1px;
   border-bottom: #20b378 solid 1px;
   margin: 40px 0;
}

table#recruit td{
	padding: 15px 20px}

table#recruit th{
	padding: 15px 30px}

@media screen and (max-width: 834px) {
.recruit tr,th,td{
	display : block;}}

 table#recruit th{
  color:white;
  border:solid 1px white;
  text-align: center;
  padding: 10px 20px;
	  background: #20b378;
}

@media screen and (max-width: 834px) {
 table#recruit th{
  border:none;

	}}

 table#recruit td{
    border-bottom: #20b378 solid 1px; 
    border-right: #20b378 solid 1px; 
	 line-height: 1.5em
}

@media screen and (max-width: 834px){
.maxwidth {
    width: auto !important;
	}}

@media screen and (max-width: 414px){
.recruit td{
    font-size: 13px;
	}}

.recruit li{
  padding-left: 0.5em;
  text-indent: 0.5em;
}

.buttonBasic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 64px;
  padding: 8px 24px;
margin: 15px;
  font-family: sans-serif;
  font-size: 16px;
  color: #fff;
  text-align: center;
  overflow-wrap: anywhere;
  background-color: #0140ae;

}

.buttonBasic::before{
left: 4px;
	box-sizing: border-box;
	width: 4px;
	height: 4px;
	border: 4px solid transparent;
	border-left: 4px solid #7a0;}


.btn-arrow-right {
 position:relative;
 /* 以下はボタンのデザインです。適宜変更してください。 */
 display:flex;
  align-items: center;
  justify-content: center;
 width:20%;
 padding:20px 30px 20px 20px;
 text-align:center;
 background:#158d5d;
 color:#fff;
font-weight: 700;
 border-radius:5px;
 margin:15px;
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);
}

@media screen and (max-width: 650px){
.btn-arrow-right {
 position:relative;
 /* 以下はボタンのデザインです。適宜変更してください。 */
 display:flex;
  align-items: center;
  justify-content: center;
 width:50%;
 padding:20px 30px 20px 20px;
 text-align:center;
 background:#158d5d;
 color:#fff;
 border-radius:5px;
 margin:15px;
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);
	}}



.btn-arrow-right:after {
 content: "";
 border-top: 2px solid #fff;
 border-right: 2px solid #fff;
 margin-top: -4px;
 height: 8px;
 width: 8px;
 position: absolute;
 top: 50%;
 right: 20px;
 transform: rotate(45deg);
}

@media (any-hover: hover) {
  .btn-arrow-right {
    transition: background-color 0.2s;
  }

  .btn-arrow-right:hover {
    background-color:#08613d;
  }
}


.recruit_button{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

@media screen and (max-width: 834px){
	.recruit_button{
	justify-content: center;
	}}

.mb-2{
	margin-bottom: 20px;
}


.mb-3{
	margin-bottom: 30px
}

.recruit_title{
margin-bottom: 30px;
 color: #20b378;
}

@media screen and (min-width: 650px){
.br-sp {display: none; }
}

.rectitle {
    text-align: center;
    padding: 0;
    margin: 0;
    font-weight: bold;
    margin-top: 30px;
	    line-height: 1.7;
}

.rectitle  a {
    font-size: 1.8rem!important;
    font-weight: bold;
    color: #20b378;
    text-decoration: underline;
	  line-height: 2.0;
	margin: 20px;
}