@charset "utf-8";

/* 全体 */
.recruit-wrapper {
	max-width: 1000px;
	margin: 40px auto;
	padding: 20px;
	background-color: #FFFFFF;
	font-family: "Yu Gothic", "Hiragino Sans", sans-serif;
	color: var(--text-color);
	border-radius: 10px;
}

/* ======================================================
   ★ メインタイトル h2（洗練されたスタイルへ）
====================================================== */
.recruit-header h2 {
	font-size: 30px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #020202;
	margin-bottom: 25px;
	padding-bottom: 15px;
	position: relative;
	border-radius: 4px;
}

.recruit-header h2::after {
	content: "";
	width: 80px;
	height: 4px;
	background-color: #C1E000;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	border-radius: 2px;
}

.recruit-header p {
	text-align: center;
	line-height: 1.8;
	margin-bottom: 40px;
}
.recruit-header strong{
	color: #00A795;	
}
/*======================
   ★ recruit-block の背景をなくす（白箱撤廃）
====================================================== */
.recruit-block {
  margin: 45px 0;
  padding: 0; /* ←背景なしにしたので余白も調整 */
  border: none;
  background: transparent;
}

/* ======================================================
   ★ H3を"馴染むデザイン"へ
   ------------------------------------------------------
   ・下に細いライン
   ・背景に薄いアクセントカラー
   ・柔らかい印象でセクション見出しとして自然に
====================================================== */
.recruit-block h3 {
	font-size: 22px;
	margin-bottom: 20px;
	padding: 10px 15px;
	background-color: #424240;
	border-left: 5px solid #01A795;
	color: #FFFFFF;
	font-weight: 700;
	text-align: left;
}

/* h3 の下に置く横並びエリア */
.rb-inner {
  display: flex;
  gap: 25px;
  align-items: flex-start;
  margin-top: 20px;
}

.rb-text {
  flex: 1.6;
  text-align: left;
}

.rb-photo {
  flex: 1.4;
}

.rb-photo img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--border-light);
}
.rb-text p {
	display: flex;
	gap: 8px;
	line-height: 1.8;
	padding-left: 30px;
	color: #494949;
	padding-top: 20px;
}

.rb-text p strong {
	width: 110px; /* ←ここでラベル幅を統一 */
	flex-shrink: 0; /* つぶれ防止 */
	display: inline-block;
}
.rb-text ul {
	padding-left: 30px;
	list-style: none;
	margin: 0;

}

.rb-text li {	padding-top: 20px;
  display: flex;
  align-items: center; /* ←縦位置を完全に中央揃え */
  gap: 10px;           /* ●と文字の間隔 */
  line-height: 1.6;
}

/* メインカラーの大きめの丸（CSSで円を描く） */
.rb-text li::before {
	content: "";
	width: 15px;            /* 丸の大きさ */
	height: 15px;
	background-color: #E9F887;
	border-radius: 50%;
	flex-shrink: 0;         /* 丸が潰れないように */
}

.rmail-btn {
	display: inline-block;
	padding: 10px 20px;
	background-color: #01A795;
	color: #fff;
	border-radius: 6px;
	text-decoration: none;
	font-weight: bold;
}
.rmail-btn:hover {
	opacity: 0.8;

}

/* ======================================================
   ★ スマホ（縦並び & 交互）
====================================================== */
@media (max-width: 600px) {
  .rb-inner {
    display: block;
  }

  .recruit-block:nth-of-type(odd) .rb-text { order: 1; }
  .recruit-block:nth-of-type(odd) .rb-photo { order: 2; }
  .recruit-block:nth-of-type(even) .rb-text { order: 2; }
  .recruit-block:nth-of-type(even) .rb-photo { order: 1; }

  .rb-photo img {
    height: 200px;
    margin: 10px 0 20px;
  }
.rb-text ul {
padding-left: 5px;
}
	.rb-text li {
	margin-bottom: 5px;
	margin-top: 0px;
}

	.rb-text p {
	padding-left: 5px;
	padding-top: 10px;
}
.rb-text p strong {
	width: 90px; /* ←ここでラベル幅を統一 */

}	
}

/* お問い合わせ */
.recruit-contact {
	margin-top: 40px;
	padding: 20px;
	background-color: #FDFFCE;
	border-radius: 8px;
	font-weight: bold;
	color: #2D2D2D;
	border-left: 3px solid #E7FF3D;
	border-right: 3px solid #E4FF3D;
	border-bottom: 3px solid #E4FF3D;
	border-top: 3px solid #E4FF3D;
}
.recruit-contact p {
	text-align: center;
	border-width: medium;
}