/**
 * single-job.css (Monochrome Refresh)
 *
 * 求人詳細ページ専用スタイル
 * モノクロームテーマ
 */

/* ========================================
 * 0. Base Override
 * ======================================== */
.single-job-main .container {
	max-width: var(--layout-width-max); /* 1100px */
	margin: 0 auto;
	padding: 0 40px;
}
@media (max-width: 768px) {
	.single-job-main .container {
		padding: 0 20px;
	}
    /* モバイルでのヘッダー分のパディング */
    main.site-main.single-job-main {
		padding-top: 100px;
	}
}

/* ========================================
 * 1. Breadcrumb (archive-job.css からコピー)
 * ======================================== */
.breadcrumb-wrapper {
	background: var(--color-bg-light); /* 薄いグレー */
	border-bottom: 1px solid var(--color-border);
	padding: 16px 0;
}
.breadcrumbs {
	max-width: var(--layout-width-max);
	margin: 0 auto;
	padding: 0 40px;
}
.breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.breadcrumbs li {
	font-size: 1.3rem;
	color: var(--color-text-light); /* グレー */
	display: flex;
	align-items: center;
}
.breadcrumbs li:not(:last-child)::after {
	content: '/';
	margin-left: 8px;
	color: var(--color-border); /* 罫線色 */
}
.breadcrumbs a {
	color: var(--color-text-light); /* グレー */
	text-decoration: none;
	font-weight: 500;
	transition: all 0.3s ease;
}
.breadcrumbs a:hover {
	color: var(--color-primary); /* チャコール */
	text-decoration: underline;
}
.breadcrumbs li.active,
.breadcrumbs li.active span {
	color: var(--color-text-base); /* 濃いグレー */
	font-weight: 600;
}
@media (max-width: 768px) {
	.breadcrumbs { padding: 0 20px; }
}


/* ========================================
 * 2. Hero Section (Monochrome)
 * ======================================== */
.single-job-hero {
	background-color: var(--color-bg-light); /* 薄いグレー */
	padding: 64px 0;
	border-bottom: 1px solid var(--color-border);
}

.job-hero-content {
	max-width: 960px; /* 少し広めに */
}

.job-id {
	font-size: 1.3rem;
	color: var(--color-text-light);
	font-weight: 600;
	margin-bottom: 8px;
}

.job-title {
	font-size: 3.6rem;
	font-weight: 800;
	color: var(--color-text-lead);
	line-height: 1.4;
	margin: 0 0 12px 0;
}

.job-company {
	font-size: 1.8rem;
	font-weight: 600;
	color: var(--color-text-base);
	margin: 0 0 24px 0;
}

.job-meta-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.job-tag {
	display: inline-block;
	padding: 4px 10px;
	background: var(--color-bg-body); /* 白 */
	border: 1px solid var(--color-border);
	border-radius: 4px;
	font-size: 1.1rem;
	color: var(--color-text-light);
	font-weight: 500;
}

/* ========================================
 * 3. Content Layout (★ 修正箇所)
 * ======================================== */
.single-job-content {
	padding: 64px 0;
}

.job-content-layout {
	display: grid;
	grid-template-columns: 1fr; /* モバイルデフォルト (1列) */
	gap: 48px;
}

/* * ★ モバイルでの表示順
 * HTMLの構造が .job-content-main -> .job-content-sidebar の順なので
 * デフォルトの1カラム (grid-template-columns: 1fr) で
 * 自動的にメインコンテンツ (業務内容) が先に表示されます。
 */

/* デスクトップ (992px以上) で2カラムレイアウトを適用 */
@media (min-width: 992px) {
	.job-content-layout {
		/* メイン 2fr, サイドバー 1fr */
		grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
	}
}


/* ========================================
 * 4. Main Content
 * ======================================== */
.job-content-main {
	min-width: 0; /* flex/grid アイテムの縮小対策 */
}

.job-section {
	margin-bottom: 48px;
}
.job-section:last-child {
	margin-bottom: 0;
}

.section-title {
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-text-lead);
	margin: 0 0 24px 0;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--color-border);
}

/* --- 4.1 求人詳細 --- */
.job-description-content {
	font-size: 1.6rem;
	line-height: 1.8;
	color: var(--color-text-base);
}
.job-description-content p,
.job-description-content ul,
.job-description-content ol { 
    margin-bottom: 1.5em; 
}
.job-description-content ul,
.job-description-content ol {
	margin-left: 1.5em;
	padding-left: 1.5em;
}
.job-description-content li { margin-bottom: 0.5em; }
.job-description-content p:last-child { margin-bottom: 0; }


/* --- 4.2 応募資格 --- */
.requirements-block {
	margin-bottom: 24px;
}
.requirements-heading {
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-text-base);
	margin: 0 0 16px 0;
	padding-left: 12px;
	border-left: 4px solid var(--color-primary);
}
.requirements-content {
	font-size: 1.5rem;
	line-height: 1.8;
	color: var(--color-text-base);
}
.requirements-content p,
.requirements-content ul,
.requirements-content ol {
    margin-bottom: 1.5em;
}
.requirements-content ul,
.requirements-content ol {
	margin-left: 1.5em;
	padding-left: 1.5em;
}
.requirements-content li { margin-bottom: 0.5em; }
.requirements-content p:last-child { margin-bottom: 0; }

.age-reason {
    font-size: 1.3rem;
    color: var(--color-text-light);
}


/* --- 4.3 労働条件 --- */
.job-info-grid {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius-base);
	overflow: hidden;
}
.job-info-item {
	display: grid;
	grid-template-columns: 160px 1fr; /* ラベル | 値 */
	border-bottom: 1px solid var(--color-border);
}
.job-info-item:last-child {
	border-bottom: none;
}
.job-info-item-full {
    grid-template-columns: 1fr; /* 1カラムに変更 */
}

.job-info-label {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--color-text-lead);
	background: var(--color-bg-light);
	padding: 16px;
	border-right: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.job-info-item-full .job-info-label {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
}

/* アイコン (仮) */
.job-info-label i {
    font-style: normal;
    color: var(--color-primary);
    display: inline-block;
    width: 1.2em;
    text-align: center;
}

.job-info-value {
	font-size: 1.5rem;
	color: var(--color-text-base);
	padding: 16px;
	line-height: 1.8;
	word-break: break-word;
}
.job-info-value strong {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-primary);
}
.job-conditions-content {
    padding-top: 16px;
}
.job-conditions-content p:first-child { margin-top: 0; }
.job-conditions-content p:last-child { margin-bottom: 0; }
.job-conditions-content ul,
.job-conditions-content ol {
    margin: 1em 0 1em 1.5em;
    padding-left: 1.5em;
}


/* --- 4.4 会社概要 --- */
.company-name {
    font-size: 1.8rem;
	font-weight: 700;
	color: var(--color-text-lead);
	margin: 0 0 16px 0;
}
.company-size {
    font-size: 1.5rem;
    color: var(--color-text-base);
    margin: 0 0 16px 0;
}
.company-overview {
    font-size: 1.5rem;
	line-height: 1.8;
	color: var(--color-text-base);
}

/* --- 4.5 デスクトップ応募ボタン --- */
.job-apply-section {
    text-align: center;
    padding: 32px;
    margin-top: 48px;
    background: var(--color-bg-light);
    border-radius: var(--border-radius-base);
}
.btn-apply {
    /* .cta-button とスタイルを統一 */
    display: inline-block;
	padding: 14px 40px;
	background: var(--color-accent);
	color: var(--color-text-reverse);
	border: 2px solid var(--color-accent);
	border-radius: var(--border-radius-base);
	text-decoration: none;
	font-weight: 700;
	font-family: var(--font-family-heading);
	font-size: 1.6rem;
	transition: all 0.3s ease;
}
.btn-apply:hover {
    background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	transform: translateY(-2px);
}
.apply-note {
    font-size: 1.3rem;
    color: var(--color-text-light);
    margin: 12px 0 0 0;
}

/* ========================================
 * 5. Sidebar
 * ======================================== */
.job-content-sidebar {
    position: relative;
}

@media (min-width: 992px) {
    .job-content-sidebar {
        /* position: sticky; <-- 削除 */
        /* top: 120px; <-- 削除 */
        align-self: start;
    }
}

.sidebar-widget {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-base);
    padding: 24px;
    margin-bottom: 24px;
}
.sidebar-widget:last-child {
    margin-bottom: 0;
}
/* 戻るボタン用の背景なしウィジェット */
.sidebar-widget.widget-transparent {
    background: none;
    border: none;
    padding: 0;
}


/* --- 5.1 サイドバー応募ボタン --- */
.btn-apply-sidebar {
    /* .btn-apply と同様のスタイルを適用 */
    display: block; /* <-- aタグをブロック要素に */
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 1.6rem;

	background: var(--color-accent);
	color: var(--color-text-reverse);
	border: 2px solid var(--color-accent);
	border-radius: var(--border-radius-base);
	text-decoration: none;
	font-weight: 700;
	font-family: var(--font-family-heading);
	transition: all 0.3s ease;
}
.btn-apply-sidebar:hover {
    background: var(--color-accent-hover);
	border-color: var(--color-accent-hover);
	transform: translateY(-2px);
    color: var(--color-text-reverse); /* <-- ホバー時の文字色を明記 */
}


/* --- 5.2 求人概要 --- */
.widget-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-text-lead);
    margin: 0 0 20px 0;
}
.job-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.job-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 1.4rem;
}
.job-summary-list .summary-label {
    font-weight: 600;
    color: var(--color-text-light);
    flex-shrink: 0;
}
.job-summary-list .summary-value {
    font-weight: 500;
    color: var(--color-text-base);
    text-align: right;
    word-break: break-word;
}

/* --- 5.3 関連求人 --- */
.related-jobs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.related-job-item {
    border-bottom: 1px solid var(--color-border);
}
.related-job-item:last-child {
    border-bottom: none;
}

.related-job-link {
    display: block;
    padding: 16px 0;
    text-decoration: none;
    transition: background 0.2s ease;
}
.related-job-link:hover .related-job-title {
    color: var(--color-primary);
}
.related-job-title {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text-lead);
    margin-bottom: 4px;
    transition: color 0.2s ease;
}
.related-job-company {
    font-size: 1.2rem;
    color: var(--color-text-light);
}

/* --- 5.4 戻るボタン --- */
.btn-back-to-list {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
}
.btn-back-to-list:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ========================================
 * 6. Mobile Fixed Apply Button
 * ======================================== */
.job-apply-mobile-fixed {
    display: none; /* デスクトップでは非表示 */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-bg-body);
    padding: 16px 20px;
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    z-index: 100;
}
.job-apply-mobile-fixed .btn-apply {
    width: 100%;
    text-align: center;
    padding: 16px;
    font-size: 1.5rem;
}

/* ========================================
 * 7. Responsive
 * ======================================== */

/* 991px (サイドバーが表示されるブレークポイント) 以下 */
@media (max-width: 991px) {
    /* デスクトップ用の応募セクションとサイドバーを非表示 */
    .job-apply-section,
    .job-content-sidebar {
        display: none;
    }
    /* モバイル用の固定ボタンを表示 */
    .job-apply-mobile-fixed {
        display: block;
    }
    /* メインコンテンツのパディング調整 (固定フッター分) */
    .single-job-content {
        /* 固定ボタンの高さ(約85px) + 余白 */
        padding-bottom: 120px; 
    }
}

@media (max-width: 768px) {
    .job-title {
        font-size: 2.8rem;
    }
    .job-company {
        font-size: 1.6rem;
    }
    .section-title {
        font-size: 2.2rem;
    }
    .job-info-item {
        grid-template-columns: 1fr; /* 1カラムに */
    }
    .job-info-label {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        font-size: 1.3rem;
    }
    .job-info-value {
        padding-top: 12px;
        font-size: 1.4rem;
    }
    .job-info-value strong {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .job-title {
        font-size: 2.4rem;
    }
    .section-title {
        font-size: 2.0rem;
    }
}