@charset "utf-8";

/* =======================================
   recruit.css
   採用ページ（recruit.php）専用スタイル
   - hero は共通CSS / responsive.css 側を利用
   - 特徴（care_point / sec_point / point）
   - 数字でみる（.nummber）
   - 福利厚生（.benefit）
   - 募集職種（.jobtype）
   - 求人モーダル（.job-description）
   - 応募ボタン（.recruit_btn）
   ======================================= */


/*--------------------------------
  特徴セクション（care_point / sec_point / point）
---------------------------------*/

#recruit .sec_point {
  position: relative;
  margin-top: 75px;
  margin-bottom: 123px;
}

#recruit .sec_point-img img {
  width: 100%;
}

#recruit img[alt="特徴-Point-"] {
  width: 18%;
  margin: 0 auto;
}

#recruit .point {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, auto);
  grid-template-areas:
    "h1-area"
    "h2-area"
    "h3-area";
    justify-content: center;
    text-align: center;
    margin-top: 16px;
}

#recruit .point h2 {
  grid-area: h1-area;
  margin: 0;
}

#recruit .point h3 {
  grid-area: h2-area;
  margin: 0;
}

#recruit .point h4 {
  grid-area: h3-area;
  font-family: "kinuta-maruminold-stdn", serif;
  color: #6D7B52;
  margin: 0.67em 0;
}

#recruit .point p {
  grid-area: text-area;
}


/*--------------------------------
  数字でみる（inc_nummber.php）
---------------------------------*/

 .nummber {
  width: 100%;
  padding: 100px 0;
  margin: 0 auto;
  border-radius: 34px;
  background-color: #C8D9C8;
}

 .nummber .nummber-ttl {
  width: 950px;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}
 .nummber .nummber-ttl h2 img{
    margin: 0 auto;
}

/*--------------------------------
  福利厚生（benefit）
---------------------------------*/

#recruit .benefit {
  margin: 150px auto;
}

#recruit .benefit h2 {
  margin-bottom: 40px;
  text-align: center;
}
#recruit .benefit h2 img{
    margin: 0 auto;
}

#recruit .benefit > p {
  width: 975px;
  max-width: 100%;
  margin: 0 auto 60px;
}

#recruit .benefit-wrap {
  width: 975px;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 30px;
}

/* カード共通 */

#recruit .benefit-card1,
#recruit .benefit-card2 {
  background-color: #F7F7ED;
  border-radius: 20px;
  padding: 30px 25px 40px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

#recruit .b-card_title {
  font-family: "kinuta-maruminold-stdn", serif;
  font-size: 1.25rem;
  color: #6D7B52;
  margin: 0 0 16px;
  text-align: center;
}

#recruit .b-card_icon {
  width: 80px;
  height: auto;
  margin-bottom: 16px;
}

#recruit .b-card_text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}


/*--------------------------------
  募集職種一覧（jobtype）
---------------------------------*/

#recruit .jobtype {
  width: 975px;
  max-width: 100%;
  margin: 150px auto;
}

#recruit .job-ttl {
  text-align: center;
  margin-bottom: 40px;
}

#recruit .job-ttl h2 img {
  max-width: 100%;
}

#recruit .jobtype > h3 {
  margin: 40px 0 25px;
  font-size: 1.5rem;
  font-family: "kinuta-maruminold-stdn", serif;
  color: #6D7B52;
}

/* 数か所で使う recruit_bnr-img（上部画像） */

#recruit .recruit_bnr-img {
  width: 975px;
  max-width: 100%;
  margin: 0 auto 40px;
}

#recruit .recruit_bnr-img img {
  width: 100%;
}




/*--------------------------------
  モーダル共通（モーダルプラグイン前提）
---------------------------------*/

#recruit .hide-area {
  display: none;
}

/* モーダル close ボタン */

#recruit .modaal-close::after,
#recruit .modaal-close::before {
  background: #ccc;
}

#recruit .modaal-close:focus::after,
#recruit .modaal-close:focus::before,
#recruit .modaal-close:hover::after,
#recruit .modaal-close:hover::before {
  background: #666;
}


/*--------------------------------
  求人票レイアウト（job-description）
---------------------------------*/

#recruit .job-description dl {
  display: grid;
  grid-template-columns: 30% 70%;
  grid-template-rows: repeat(13, auto);
  grid-template-areas:
    "dt1 dd1"
    "dt2 dd2"
    "dt3 dd3"
    "dt4 dd4"
    "dt5 dd5"
    "dt6 dd6"
    "dt7 dd7"
    "dt8 dd8"
    "dt9 dd9"
    "dt10 dd10"
    "dt11 dd11"
    "dt12 dd12"
    "dt13 dd13";
  align-items: center;
  border-top: 1px solid #00A63C;
}

/* デフォルト行高さ */

#recruit .job-description dt,
#recruit .job-description dd {
  height: 12vw;
}

/* 左側見出し */

#recruit .job-description dt {
  display: flex;
  align-items: center;
  text-align: left;
  font-family: "kinuta-maruminold-stdn", serif;
  font-weight: 400;
  font-size: 1.375rem;
  color: #6D7B52;
}

/* 左の縦線エリア */

#recruit .job-description .area-border {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: -webkit-fill-available;
  border-bottom: 1px solid #00A63C;
}

/* 右の内容 */

#recruit .job-description dd {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 1vw;
  color: #6D7B52;
  line-height: 1.6;
  border-bottom: 1px solid #00A63C;
}

#recruit .job-description dd p {
  margin: 0;
}

/* grid-area 割り当て */

#recruit .job-description .dt1  { grid-area: dt1; }
#recruit .job-description .dt2  { grid-area: dt2; }
#recruit .job-description .dt3  { grid-area: dt3; }
#recruit .job-description .dt4  { grid-area: dt4; }
#recruit .job-description .dt5  { grid-area: dt5; }
#recruit .job-description .dt6  { grid-area: dt6; }
#recruit .job-description .dt7  { grid-area: dt7; }
#recruit .job-description .dt8  { grid-area: dt8; }
#recruit .job-description .dt9  { grid-area: dt9; }
#recruit .job-description .dt10 { grid-area: dt10; }
#recruit .job-description .dt11 { grid-area: dt11; }
#recruit .job-description .dt12 { grid-area: dt12; }
#recruit .job-description .dt13 { grid-area: dt13; }

#recruit .job-description .dd1  { grid-area: dd1; }
#recruit .job-description .dd2  { grid-area: dd2; }
#recruit .job-description .dd3  { grid-area: dd3; }
#recruit .job-description .dd4  { grid-area: dd4; }
#recruit .job-description .dd5  { grid-area: dd5; }
#recruit .job-description .dd6  { grid-area: dd6; }
#recruit .job-description .dd7  { grid-area: dd7; }
#recruit .job-description .dd8  { grid-area: dd8; }
#recruit .job-description .dd9  { grid-area: dd9; }
#recruit .job-description .dd10 { grid-area: dd10; }
#recruit .job-description .dd11 { grid-area: dd11; }
#recruit .job-description .dd12 { grid-area: dd12; }
#recruit .job-description .dd13 { grid-area: dd13; }

/* 行ごとの高さ調整（PC） */

#recruit .job-description .dt1,
#recruit .job-description .dd1 { height: 15vw; }

#recruit .job-description .dt3,
#recruit .job-description .dd3 { height: 14vw; }

#recruit .job-description .dt4,
#recruit .job-description .dd4 { height: 20vw; }

#recruit .job-description .dt5,
#recruit .job-description .dd5 { height: 14vw; }

#recruit .job-description .dt7,
#recruit .job-description .dd7 { height: 14vw; }

#recruit .job-description .dt8,
#recruit .job-description .dd8 { height: 13vw; }

#recruit .job-description .dt9,
#recruit .job-description .dd9 { height: 14vw; }

#recruit .job-description .dt10,
#recruit .job-description .dd10 { height: 14vw; }

#recruit .job-description .dt13,
#recruit .job-description .dd13 { height: 13vw; }

/* 求人票内リンク */

#recruit .job-description a {
  text-decoration: underline;
}

#recruit .job-description a:hover {
  color: #00A63C;
}


/*--------------------------------
  応募ボタン（recruit_btn）
---------------------------------*/

#recruit .recruit_btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 30%;
  margin: 5vw auto;
  padding: 20px 10px;
  text-align: center;
  border: none;
  border-radius: 5px;
  background-color: #DDA848;
  text-decoration: none;
  cursor: pointer;
  transition: ease 0.2s;
}

#recruit .recruit_btn span {
  position: relative;
  z-index: 3;
  color: #fff;
  font-size: 1.0625rem;
}

/* 背景が左から右へ流れるエフェクト */

#recruit .recruit_btn.bgleft::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #00A63C;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1);
}

#recruit .recruit_btn.bgleft:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}


/* =======================================
   スマホ（max-width:600px）
   ======================================= */

@media (max-width: 600px) {

  /* 特徴セクション */

  #recruit .sec_point {
    margin-top: 10vw;
    margin-bottom: 10vw;
  }

  #recruit .point {
    width: 90vw;
    margin: 0 auto;
    grid-template-columns: 90vw;
    grid-template-rows: auto;
    grid-template-areas:
      "h1-area"
      "img-area"
      "h2-area"
      "h3-area"
      "text-area";
    margin: 5vw auto;
    grid-row-gap: 2vw;
    align-items: center;
  }

  #recruit .sec_point-img {
    width: 90vw;
    margin: 0 auto 5vw;
  }

  #recruit img[alt="特徴-Point-"] {
    width: 27vw;
  }


  /* 数字でみる */

.nummber {
    padding: 12vw 0;
    border-radius: 20px;
  }

.nummber .nummber-ttl {
    width: 90vw;
  }
.nummber .nummber-ttl h2 img{
    width: 30%;
}


  /* 福利厚生 */

  #recruit .benefit {
    width: 100%;
    margin: 15vw auto;
  }

  #recruit .benefit > p {
    width: 90vw;
    margin: 0 auto 8vw;
  }

  #recruit .benefit-wrap {
    margin: 0 auto;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  #recruit .benefit-card1,
  #recruit .benefit-card2 {
    padding: 20px 15px 25px;
  }

  #recruit .b-card_icon {
    width: 60px;
  }
  #recruit .benefit h2 img{
    width: 35%;
}


  /* 募集職種 */

  #recruit .jobtype {
    width: 90vw;
    margin: 15vw auto;
  }

  #recruit .recruit_bnr-img {
    width: 90vw;
    margin-bottom: 8vw;
  }

  #recruit .job-ttl h2 img {
    width: 45%;
  }

  #recruit .jobtype > h3 {
    font-size: 1.25rem;
  }

  .service-container {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  #care .service-container {
    width: 100%;
    grid-auto-rows: auto;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 30px;
    margin-top: 30px;
  }
  /* スマホで3列にしたくなければ 1列に変更してOK
     grid-template-columns: 1fr; に変えるだけ
  */

  .service-card p {
    font-size: 3.4vw;
    width: auto;
  }


  /* モーダル */

  #recruit .modaal-container {
    max-width: 375px;
  }

  #recruit .job-description dl {
    width: 90vw;
    margin: 0 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "dt1"  "dd1"
      "dt2"  "dd2"
      "dt3"  "dd3"
      "dt4"  "dd4"
      "dt5"  "dd5"
      "dt6"  "dd6"
      "dt7"  "dd7"
      "dt8"  "dd8"
      "dt9"  "dd9"
      "dt10" "dd10"
      "dt11" "dd11"
      "dt12" "dd12"
      "dt13" "dd13";
  }

  #recruit .job-description dt,
  #recruit .job-description dd {
    height: auto;
    padding: 3vw 0;
  }

  #recruit .job-description dt {
    font-size: 3.8vw;
  }

  #recruit .job-description dd,
  #recruit .job-description dd p {
    font-size: 3.4vw;
    line-height: 1.4;
  }


  /* 応募ボタン */

  #recruit .recruit_btn {
    width: 80vw;
    margin: 10vw auto 0;
  }
}