/* ===== Recruit (採用情報) ===== */
/* 既存サイトの色に合わせています。必要なら値だけ調整してください */
:root{
  --c-main:#115182;                 /* 文字色 */
  --c-accent:#3DDAD7;               /* アクセント */
  --c-soft:#E9F5F5;                 /* ラベル側の淡い背景 */
  --c-line:rgba(17,81,130,.15);     /* 罫線 */
}

.recruit-section{
  padding: 96px 16px 100px;         /* 固定ヘッダー対策で上余白を多めに */
  color: var(--c-main);
  background: #fff;
}

/* ヒーロー */
.recruit-hero{ text-align:center; margin:0 auto 36px; }
/* 横並び用 */
.recruit-title-wrap {
  display: inline-flex;       /* 横並び */
  align-items: center;        /* 縦位置を中央に */
  gap: 12px;                  /* 雲と文字の間隔 */
  position: relative;         /* ::after の基準 */
}

/* 雲アイコン */
.recruit-cloud {
  width: 80px;
  height: auto;
  display: block;
}

/* 見出し文字 */
.recruit-title {
  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 700;
  color: #114f82;
  z-index: 1;
}


/* アンダーライン（水色の帯） */
.recruit-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:10px;
  background:#E0F1F1;
  z-index:0;              /* -1にしない！ */
}
.recruit-lead{ margin:24px auto 0; font-size:24px; font-weight:700; max-width 700px; }
@media (max-width:991px){
  .recruit-lead{ font-size:24px;
	  margin: 60px auto 30px; /* 上60px、左右auto、下30px */
}
  .sp-br{ display:inline; }
}
@media (min-width:991px){ .sp-br{ display:none; } }

/* 表風レイアウト */
.recruit-table{
  margin-top:32px; 
  border-top:1px solid var(--c-line);
  border-left:1px solid var(--c-line);
	  border-radius: 12px;   /* ← 角丸 */

}
.recruit-row{
  display:grid; grid-template-columns:240px 1fr; min-height:120px;
  border-right:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
	
}
.recruit-label{
  padding:22px; font-weight:700; background:var(--c-soft);
  border-right:1px solid var(--c-line);
  display:flex; align-items:center; justify-content:flex-end; text-align:left;
}
.recruit-content{ padding:22px 28px; display:flex; align-items:center; }
.recruit-content ul{ margin:0; padding-left:1.2em; }
.recruit-content li{ margin:.25em 0; }

/* リンク色（サイトのキーカラー踏襲） */
.recruit-mail{ color:var(--c-main); text-decoration:underline; }
.recruit-mail:hover{ color:var(--c-accent); }
.recruit-mail {
  white-space: nowrap;   /* メールアドレスだけは改行させない */
  display: inline-block; /* インライン要素として扱いつつブロック化で安定 */
}
/* レスポンシブ */

@media (max-width:991px){
  .recruit-row{ grid-template-columns:1fr; }
  .recruit-label{
    justify-content:flex-start; text-align:left; padding:14px 16px;
    border-right:none; border-bottom:1px solid rgba(17,81,130,.12);
  }
  .recruit-content{ padding:16px; }
}

/* recruit.css */
.recruit-section {
  padding: 200px 16px 100px; /* ← 元のpadding-top:96pxを増やす */
}

#recruit {
  scroll-margin-top: 120px;
}




/* ===== 表の幅を固定したい範囲（800px以上） ===== */
@media (min-width: 991px) {
  /* 必要ならラッパを作っておく（任意） */
  .recruit-table-wrap {
    overflow-x: auto;       /* 念のため横スクロール保険 */
  }

  .recruit-table {
    width: 800px;           /* 固定幅 */
    max-width: 800px;       /* これ以上縮ませない */
    margin-left: auto;      /* 中央寄せ */
    margin-right: auto;
    box-sizing: border-box;
	   border-radius: 12px;   /* ← 全体の角丸 */
  overflow: hidden;      /* ← セルの罫線をはみ出させない */
  }
	
/* 左上角：最初の行のラベルセル */
.recruit-row:first-child .recruit-label {
  border-top-left-radius: 12px;
}

/* 左下角：最後の行のラベルセル */
.recruit-row:last-child .recruit-label {
  border-bottom-left-radius: 12px;
}
  /* 800px固定幅に合わせて右カラムも固定計算 */
  .recruit-row {
    display: grid;
    grid-template-columns: 180px calc(800px - 240px);
  }


/* ===== 799px以下は従来どおり可変にしつつ縦積みに（見やすさ重視） ===== */
@media (max-width: 991px) {
  .recruit-table {
    width: 100%;            /* 画面幅に合わせる */
  }
  .recruit-row {
    grid-template-columns: 1fr;   /* ラベルと内容を縦積み */
    min-height: auto;
  }
.recruit-label {
  padding: 0 16px;           /* 横余白だけにする（上下はflexで中央揃えされる） */
  font-weight: 700;
  background: var(--c-soft);
  border-right: 1px solid var(--c-line);
  display: flex;
  align-items: center;       /* 縦中央揃え */
  justify-content: center;   /* 横中央揃え */
  text-align: center;        /* テキストも中央 */
}
	}
	@media (max-width: 991px) {
  .recruit-row {
    min-height: 130px;  /* ← 縦幅を広げる（お好みで調整） */
    align-items: flex-start; /* テキストを上揃え */
  }

  .recruit-label {
    padding: 20px 16px; /* 左右の余白 */
    min-height: 50px;   /* ラベル部分も少し広げる */
  }

  .recruit-content {
    padding: 20px 16px;
  }
}

.recruit-content ul {
  margin: 0;
  padding-left: 1.8em;
  list-style-type: disc; /* デフォルトは黒丸 */
}

.recruit-content li {
  margin: .4em 0;
}

.recruit-content li.no-bullet {
  list-style-type: none;   /* 黒丸を消す */
  padding-left: 0;         /* 左余白も消す */
}
}
@media (max-width: 991px) {
  /* 最初のラベル（左上用） */
  .recruit-row:first-child .recruit-label {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px; /* ← ラベルが横幅いっぱいになるので右も必要 */
  }

  /* 最後の行のコンテンツ（右下用） */
  .recruit-row:last-child .recruit-content {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}
	
	/* PC/スマホ共通で弾丸を表示 */
.recruit-table .recruit-content ul{
  list-style: disc outside;
  padding-left: 1.6em;
  margin: 0;
}

/* 念のためスマホで強めに上書き */
@media (max-width: 991px){
  .recruit-table .recruit-content ul{
    list-style: disc outside !important;
    padding-left: 1.6em;
  }
}
.recruit-table {
  margin-top:32px;
  background:#fff;
  border:1px solid var(--c-line); /* ← 上下左右まとめる */
  border-radius: 12px;            /* ← 角丸 */
  overflow: hidden;               /* ← 内側の角を切り取る */
}


/* 点を出すUL */
.recruit-content ul.has-bullets{
  list-style: disc;
  padding-left: 1.8em;
}

/* “点を付けたくない行” は個別に消す */
.recruit-content li.no-bullet{
  list-style: none !important;
  padding-left: 0;
}
.recruit-content li.no-bullet::marker{ content: ""; } /* iOS対策 */

@media (max-width: 500px) {
  .recruit-lead {
    font-size: 18.5px;   /* ← 調整。普段より小さめ */
    line-height: 1.6;  /* 行間を少し広めに */
    margin: 20px auto; /* 上下余白も整える */
    text-align: center;
  }
}