@charset "utf-8";

/* ==========================================================================
   1. 変数定義 (Custom Properties)
   --------------------------------------------------------------------------
   共通CSS(common.css)に存在する変数(main-color, text-color, bg-color, bg-gray)は
   直接参照し、採用ページ独自の変数のみここに定義しています。
   ========================================================================== */
:root {
  /* Layout Sizing */
  --recruit-max-w-s: 768px;
  --recruit-max-w-m: 1024px;
  --recruit-max-w-l: 1027px;
  
  /* Spacing */
  --recruit-gap-s: 10px;
  --recruit-gap-m: 20px;
  --recruit-gap-l: 30px;
  --recruit-gap-xl: 50px;
  --recruit-pad-s: 24px;
  --recruit-pad-m: 10px;
  --recruit-sec-padding: 0 var(--recruit-pad-m) 150px;

  /* Recruit Specific Colors (採用独自の色) */
  --recruit-c-border: #ccc;
  --recruit-c-text-light: #555;
  --recruit-bg-light: rgba(0, 97, 174, 0.03); /* main-colorを薄くしたもの */
  --recruit-bg-hover: rgba(0, 97, 174, 0.05);
}

/* ==========================================================================
   2. ベーススタイル & ユーティリティ
   ========================================================================== */
/* 画像のレスポンシブ対応（全域適用） */
[id^="recruit_sec"] img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 共通フレックスコンテナ（中央揃え） */
.recruit_center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   3. 共通コンポーネント (テーブル, タグ, リスト)
   ========================================================================== */

/* テーブルを囲む枠（ここで横スクロールさせる） */
.recruit_table_scroll {
  width: 100%;
  overflow-x: auto; /* はみ出たら横スクロール */
  -webkit-overflow-scrolling: touch; /* スマホで滑らかにスクロールさせる */
  margin-bottom: 20px;
}

/* ---------- テーブル (Sec02 & Sec04 共通) ---------- */
#recruit_sec02 table,
#recruit_sec04 table {
  max-width: var(--recruit-max-w-m);
  width: 100%;
  min-width: 1024px; /* スマホでも表が潰れないように最小幅を確保 */
  border-collapse: collapse;
  font-size: 15px;
}

#recruit_sec02 th, #recruit_sec02 td,
#recruit_sec04 th, #recruit_sec04 td {
  border: 1px solid var(--recruit-c-border);
  padding: 15px var(--recruit-gap-m);
  vertical-align: middle;
}

#recruit_sec02 th, #recruit_sec04 th {
  background-color: var(--bg-gray);
  font-weight: 500;
  white-space: nowrap; /* 見出しが改行されて読みにくくなるのを防ぐ */
  width: auto;
  text-align: center;
}

#recruit_sec02 td, #recruit_sec04 td {
  background-color: var(--bg-color);
  text-align: left;
}

/* Sec04特有: colspanなどの調整 */
#recruit_sec04 tr:first-child th {
  text-align: center;
}

/* ---------- タグボックス ---------- */
.recruit_tag-box {
  width: 100%;
  padding: var(--recruit-gap-l) 0;
  display: flex;
  justify-content: center;
}

.recruit_tag-box ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--recruit-gap-l);
  padding: 0;
  margin: 0;
  list-style: none;
}

/* ---------- 交互レイアウト (Row/Reverse) ---------- */
.recruit_cont.row { flex-direction: row; }
.recruit_cont.row-reverse { flex-direction: row-reverse; }
.recruit_cont_item.row { padding-left: var(--recruit-gap-l); }
.recruit_cont_item.row-reverse { padding-right: var(--recruit-gap-l); }
.sub_cont-h4 { border-bottom: none; }


/* ==========================================================================
   4. セクション別スタイル
   ========================================================================== */

/* ---------- Section 01: イントロダクション ---------- */
#recruit_sec01 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#recruit_sec01 div {
  max-width: var(--recruit-max-w-s);
  width: 100%;
  padding: 100px var(--recruit-pad-m);
  text-align: center;
}

/* ---------- Section 02: 募集要項・職種紹介 ---------- */
#recruit_sec02 {
  padding: var(--recruit-sec-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-l);
}

/* 汎用ブロック */
.recruit_sec02_block {
  width: 100%;
  max-width: var(--recruit-max-w-m);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-xl);
}

/* Box01: 募集リスト */
.recruit_sec02_box01 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: var(--recruit-max-w-m);
  gap: var(--recruit-gap-l);
}

.recruit_sec02_list01 {
  border: solid 1px var(--text-color);
  border-radius: 8px;
  padding: var(--recruit-gap-xl);
  flex: 1;
}

.recruit_sec02_list01 h3 {
  font-size: 20px;
  margin: 5% 0;
}
.recruit_sec02_list01 p { font-size: 15px; }

/* Box02: 技能職画像リスト */
.recruit_sec02_block_list02 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
  max-width: 1024px;
}

.recruit_sec02_block_list02 li {
  width: calc((100% - 80px) / 3);
}

.recruit_sec02_block_list02_img {
  width: 100%;
  max-width: 315px;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.recruit_sec02_block_list02_img img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Box03: 働きやすさ (3カラム) */
.recruit_sec02_box03 .recruit_sec02_block_list03 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--recruit-gap-l);
  list-style: none;
  padding: 0;
}

.recruit_sec02_box03 .recruit_sec02_block_list03 li {
  width: calc((100% - 60px) / 3);
}

/* ---------- Section 03: コンテンツエリア ---------- */
#recruit_sec03 {
  padding: var(--recruit-sec-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 100px;
}

.recruit_sec03_block {
  max-width: var(--recruit-max-w-s);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-xl);
}

.recruit_sec03_block ol {
  padding-left: 1.5em;
  list-style-position: inside;
}
.recruit_sec03_block li {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 600;
}

/* 画像付きリンクカード */
.recruit_sec03_block02 ul {
  max-width: var(--recruit-max-w-m);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--recruit-gap-xl);
  padding: 0;
}

.recruit_sec03_block02 ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-s);
}

.recruit_sec03_block02 li {
  max-width: 414px;
  width: 100%;
  border-radius: 20px;
  background-color: var(--text-color);
  color: var(--bg-color);
  padding: 25px;
  list-style: none;
}

.recruit_sec03_block02_img {
  width: 100%;
  max-width: 364px;
  aspect-ratio: 3 / 2;
  background-color: var(--bg-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* コンテンツ inner */
.sec03_inner {
  max-width: var(--recruit-max-w-m);
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--recruit-gap-xl);
  margin: 0 auto;
}

.sec03_content01 { width: 70%; text-align: center; }
.sec03_content02 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--recruit-gap-l);
}

.sec03_content01_img img { 
  aspect-ratio: 1 / 1; 
  width: 100%;     
  object-fit: cover; 
}

.sec03_inner h3 { font-weight: 500; }
.sec03_content02_wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------- Section 04: 詳細リスト ---------- */
#recruit_sec04 {
  padding: var(--recruit-sec-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-s);
}

.recruit_sec04_block {
  max-width: var(--recruit-max-w-m);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-xl);
}
.recruit_sec04_block:not(:last-child) { margin-bottom: 100px; }

.recruit_sec04_block_list01 {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--recruit-gap-s);
}
.recruit_sec04_block_list01 li {
  max-width: var(--recruit-max-w-s);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--recruit-gap-l);
}

.recruit_sec04_block_list02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-l);
  padding: 0;
}
.recruit_sec04_block_list02 li {
  max-width: var(--recruit-max-w-s);
  width: 100%;
  margin-bottom: var(--recruit-gap-s);
  display: flex;
  gap: var(--recruit-gap-l);
}
.recruit_sec04_block_list02_img {
  width: 100%;
  max-width: 304px;
  aspect-ratio: 3 / 3;
  background-color: var(--bg-gray);
  flex-shrink: 0;
}

/* ---------- Section 05: ギャラリー & Q&A ---------- */
#recruit_sec05 {
  padding: var(--recruit-sec-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-xl);
}
#recruit_sec05 > .sub_cont-h2 { margin-bottom: 0; }

.recruit_sec05_block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--recruit-gap-m);
}

.recruit_sec05_block ul {
  max-width: var(--recruit-max-w-l);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--recruit-gap-m);
  padding: 0;
}

.recruit_sec05_block li {
  max-width: 241px;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--bg-gray);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sec05 タグボックス (Grid使用) */
#recruit_sec05 .recruit_tag-box { max-width: var(--recruit-max-w-m); }
#recruit_sec05 .recruit_tag-box ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--recruit-gap-m);
  justify-content: center;
}
#recruit_sec05 .recruit_tag-box ul li a { font-size: 20px; }


/* ---------- Q&A アコーディオン ---------- */
.qa_section {
  max-width: var(--recruit-max-w-m);
  width: 100%;
  margin: 0 auto;
}

.qa_item {
  border-top: 1px solid var(--main-color);
}
.qa_item:last-child { border-bottom: 1px solid var(--main-color); }

.qa_question {
  display: flex;
  align-items: center;
  gap: var(--recruit-gap-m);
  padding: 25px var(--recruit-gap-s);
  cursor: pointer;
  list-style: none;
  transition: background-color 0.3s ease;
}
.qa_question::-webkit-details-marker,
.qa_question::marker { display: none; content: ""; }
.qa_question:hover { background-color: var(--recruit-bg-hover); }

.qa_label {
  font-size: 28px;
  color: var(--main-color);
  min-width: 40px;
  flex-shrink: 0;
}

/* .qa_question .qa_text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.8;
  color: var(--text-color);
  margin: 0;
  flex: 1;
} */

/* アコーディオンアイコン */
.qa_icon {
  width: 24px;
  height: 24px;
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.qa_icon::before, .qa_icon::after {
  content: "";
  position: absolute;
  background-color: var(--main-color);
  transition: transform 0.3s ease;
}
.qa_icon::before {
  width: 100%; height: 2px; top: 50%; left: 0; transform: translateY(-50%);
}
.qa_icon::after {
  width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);
}
.qa_item[open] .qa_icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Answer Area */
.qa_answer {
  display: flex;
  align-items: flex-start;
  gap: var(--recruit-gap-m);
  padding: 0 var(--recruit-gap-s) var(--recruit-gap-l);
  animation: slideDown 0.3s ease;
  background-color: var(--recruit-bg-light);
  border-radius: 0 0 8px 8px;
  margin-top: -5px;
}
.qa_answer .qa_label { padding-top: 5px; }
.qa_answer .qa_text {
  font-size: 15px;
  line-height: 2;
  color: var(--recruit-c-text-light);
  margin: 0;
  padding-top: 8px;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   5. メディアクエリ (Responsive) - max-width: 768px
   ========================================================================== */
@media screen and (max-width: 768px) {
  /* 共通レイアウト調整 */
  .recruit_cont.row,
  .recruit_cont.row-reverse { flex-direction: column; }
  
  .recruit_cont_item.row,
  .recruit_cont_item.row-reverse { padding: 0; }

  /* Sec01 */
  #recruit_sec01 { padding: 80px 0; }
  #recruit_sec01 div { padding: var(--recruit-gap-xl) var(--recruit-pad-s); }

  /* Sec02 */
  #recruit_sec02 {
    padding: 0 var(--recruit-pad-s) 100px;
  }
  .recruit_sec02_box01 {
    flex-direction: column;
    gap: var(--recruit-gap-xl);
  }
  .recruit_sec02_list01 { padding: var(--recruit-gap-l); }
  
  .recruit_sec02_block_list02 {
    flex-direction: column;
    align-items: center;
  }
  .recruit_sec02_block_list02 li {
    width: 100%;
    max-width: 300px;
  }
  
  .recruit_tag-box ul {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .recruit_sec02_box03 .recruit_sec02_block_list03 { flex-direction: column; }
  .recruit_sec02_box03 .recruit_sec02_block_list03 li { width: 100%; }

  /* Sec03 */
  #recruit_sec03 { padding: 0 var(--recruit-pad-s) 100px; }
  .sec03_inner { font-size: 15px; gap: var(--recruit-gap-l); }
  .sec03_inner:first-of-type { flex-direction: column; }
  .sec03_inner:nth-of-type(2) { flex-direction: column-reverse; }
  
  .sec03_content01, .sec03_content02 { width: 100%; }
  .sec03_content01_img img {
    position: static;
    height: auto;
    object-fit: cover;
  }

  /* Sec04 */
  .recruit_sec04_block_list02 li {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  /* Sec05 */
  #recruit_sec05 {
    padding: 0 var(--recruit-pad-s) 100px;
    gap: var(--recruit-gap-l);
  }
  #recruit_sec05 .recruit_tag-box ul { gap: var(--recruit-gap-s); }
  #recruit_sec05 .recruit_tag-box li a {
    font-size: 14px;
    padding: 8px 12px;
  }

  /* Accordion Mobile */
  .qa_question { padding: var(--recruit-gap-m) 5px; gap: 15px; }
  .qa_label { font-size: 24px; min-width: 32px; }
  .qa_question .qa_text { font-size: 14px; line-height: 1.6; }
  .qa_icon { width: 20px; height: 20px; }
  .qa_answer { padding: 0 5px 25px 5px; gap: 15px; }
  .qa_answer .qa_text { font-size: 14px; line-height: 1.8; }

  /* 表を囲むブロックが画面幅を超えないように強制 */
  .recruit_sec02_block {
    max-width: 100vw; /* 画面幅を最大とする */
    overflow: hidden; /* ブロック自体のはみ出しを防ぐ */
  }

  /* スクロールエリアの設定（念のため強化） */
  .recruit_table_scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* スクロールバーが被らないように */
  }

  /* スマホの時は表全体を少しコンパクトにする */
  #recruit_sec02 table,
  #recruit_sec04 table {
    min-width: 500px; /* PCの600pxから500pxに縮小（無理なく読めるギリギリの幅） */
    font-size: 13px;  /* 15pxから13pxに少し小さく */
  }

  #recruit_sec02 th, #recruit_sec02 td,
  #recruit_sec04 th, #recruit_sec04 td {
    padding: 10px; /* 余白を15pxから10pxに減らしてスッキリさせる */
  }

  #recruit_sec02 th, #recruit_sec04 th {
    width: 25%; /* 左の項目名（仕事内容など）の幅が潰れないように固定 */
    white-space: normal; /* 項目名が長ければ折り返すようにする */
  }
}