@charset "UTF-8";
/* ============================================================
   事務やオフィスのお仕事ページ  page-office.css
   ※ .job-* の見た目は製造ページ(page-manufacturing.css)と共通です。
     共通化したい場合は、ヒーローの background-image 行を除いて
     全ページ共通CSSへ移しても構いません。
   ============================================================ */

/* ---- ページ全体 ---- */
.job-page {
	color: #333;
	line-height: 1.8;
}

.job-page > .section:last-child {
	padding-bottom: 120px;
}
.job-page__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 16px 64px;
}

/* ---- ヒーロー ---- */
.job-hero {
    position: relative;
    /* margin-top: 80px; */
    padding: 56px 0;
    color: #fff;
    background-color: var(--green-dark, #1f7a2e);
    background-image: linear-gradient(rgba(20, 77, 30, .55), rgba(20, 77, 30, .55)), url("../img/job/job-office.png");
    background-size: cover;
    background-position: center;
    border-bottom: 4px solid var(--green);
}

.job-hero .en {
    display: block;
    color: #d4eed4;
    font-weight: 700;
    letter-spacing: .18em;
    font-size: 14px;
    margin-bottom: 10px;
}

.job-hero h1 {
    color: #fff;
    font-size: 36px;
}

.job-hero .lead {
    color: #eef6ee;
    margin: 18px auto 0;
}

/* ---- お仕事例セクション ---- */
.job-examples__heading {
	margin: 0 0 10px;
	padding: 10px 16px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	background: var(--green);
	border-radius: 6px;
}
.job-examples__note {
	margin: 0 0 20px;
	color: #777;
	font-size: .85rem;
}

/* ---- カード ---- */
.job-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}
.job-card {
	padding: 18px 18px 20px;
	background: #fff;
	border: 1px solid #d7e8d7;
	border-top: 4px solid var(--green);
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
	transition: box-shadow .2s ease, transform .2s ease;
}
.job-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
	transform: translateY(-2px);
}
.job-card__title {
	margin: 0 0 10px;
	color: var(--green-strong);
	font-size: 1.05rem;
	font-weight: 700;
}
.job-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.job-card__meta li {
	padding: 3px 10px;
	font-size: .8rem;
	border-radius: 999px;
}
.job-card__area {
	color: var(--green-strong);
	background: #eef6ee;
}
.job-card__wage {
	color: #e65100;
	font-weight: 700;
	background: #fff3e0;
}
.job-card__desc {
	margin: 0;
	color: #555;
	font-size: .9rem;
}

/* ---- 詳しくはこちら（CTA） ---- */
.job-cta {
	margin-top: 44px;
	padding: 32px 20px;
	text-align: center;
	background: #f3f9f3;
	border-radius: 10px;
}
.job-cta__text {
	margin: 0 0 18px;
	color: #333;
	font-size: 1.05rem;
	font-weight: 700;
}
.job-cta__text span {
	display: inline-block;
	margin-top: 4px;
	color: #666;
	font-size: .9rem;
	font-weight: 500;
}
.job-cta__button {
	display: inline-block;
	padding: 14px 48px;
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
	background: var(--green);
	border-radius: 999px;
	box-shadow: 0 3px 8px rgba(76, 175, 80, .4);
	transition: background .2s ease, transform .2s ease;
}
.job-cta__button:hover {
	background: #43a047;
	transform: translateY(-2px);
}

/* ---- スマホ ---- */
@media (max-width: 600px) {
	.job-hero { min-height: 160px; }
	.job-hero h1 { font-size: 22px; }
	.job-hero .en { font-size: 12px; }
	.job-hero .lead { margin-top: 14px; font-size: 13px; line-height: 1.8; }
	.job-page > .section:last-child { padding-bottom: 88px; }
	.job-cta__button { display: block; padding: 14px 0; }
}