/* ================================================================
 * 公開採用サイト CSS
 * LY Corp 参考デザイン: 白基調、広い余白、クリーンなタイポグラフィ
 * ================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --primary: #1960aa; --secondary: #1979d3; --accent-green: #10b981; --accent-purple: #6366f1;
    --bg-main: #f8fafc; --bg-card: #ffffff; --bg-section: #f1f5f9;
    --text-primary: #0f172a; --text-secondary: #64748b; --text-muted: #94a3b8;
    --border: #e2e8f0; --shadow: rgba(15,23,42,0.08);
    --font-body: 'Noto Sans JP', sans-serif; --font-heading: 'Outfit', sans-serif;
    --text-xs: 0.6875rem; --text-sm: 0.75rem; --text-base: 0.875rem;
    --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
    --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
    --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
    --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 14px; --radius-2xl: 24px; --radius-full: 9999px;
    --shadow-sm: 0 1px 3px var(--shadow); --shadow-md: 0 4px 12px var(--shadow); --shadow-lg: 0 4px 20px var(--shadow);
    --transition: 0.3s ease; --transition-fast: 0.2s ease;
}
body { font-family: var(--font-body); color: var(--text-primary); font-size: var(--text-base); line-height: 1.8; background: var(--bg-main); }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Header ── */
.pub-header { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); padding: 0 var(--space-8); height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; }
.pub-logo { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.pub-nav { display: flex; gap: var(--space-6); align-items: center; }
.pub-nav a { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; transition: var(--transition); }
.pub-nav a:hover { color: var(--primary); }
.pub-nav a.current { color: var(--primary); font-weight: 700; }

/* ── Hero ── */
.hero { position: relative; height: 520px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; }
.hero-bg { position: absolute; inset: 0; }
.hero-content { position: relative; z-index: 1; max-width: 700px; padding: 0 var(--space-8); }
.hero-label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.85; margin-bottom: var(--space-4); }
.hero-content h1 { font-size: 2.4rem; font-weight: 700; margin-bottom: var(--space-6); line-height: 1.4; letter-spacing: 0.02em; }
.hero-content p { font-size: 1rem; opacity: 0.92; line-height: 2; }
.hero--left { justify-content: flex-start; text-align: left; }
.hero--left .hero-content { max-width: 1080px; margin: 0 auto; width: 100%; }
.hero--short { height: 420px; }

/* ── Section ── */
.section { padding: var(--space-20) var(--space-8); }
.section-alt { background: var(--bg-section); }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); margin-bottom: var(--space-4); }
.section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: var(--space-6); line-height: 1.4; }
.section-center { text-align: center; }
.section-center .section-label { text-align: center; }
.section-center .section-title { text-align: center; }

/* ── Recruit Cards ── */
.recruit-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.recruit-card { position: relative; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-md); transition: var(--transition); display: flex; flex-direction: column; }
.recruit-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(0,0,0,0.12); }
.recruit-card-img { height: 260px; overflow: hidden; }
.recruit-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.recruit-card:hover .recruit-card-img img { transform: scale(1.03); }
.recruit-card-body { padding: var(--space-8); flex: 1; display: flex; flex-direction: column; }
.recruit-card-category { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: var(--space-4); }
.recruit-card-category.new-grad { color: var(--accent-green); }
.recruit-card-category.mid-career { color: var(--accent-purple); }
.recruit-card h3 { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-4); }
.recruit-card p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.9; flex: 1; }
.recruit-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; color: var(--primary); margin-top: var(--space-6); transition: var(--transition); }
.recruit-card-link:hover { gap: 10px; }

/* ── Content block (photo + text) ── */
.content-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; margin-bottom: var(--space-16); }
.content-block:last-child { margin-bottom: 0; }
.content-block.reverse { direction: rtl; }
.content-block.reverse > * { direction: ltr; }
.content-block-img { border-radius: var(--radius-lg); overflow: hidden; }
.content-block-img img { width: 100%; height: 320px; object-fit: cover; }
.content-block-text h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-4); line-height: 1.5; }
.content-block-text p { font-size: var(--text-base); color: var(--text-secondary); line-height: 2.1; }

/* ── Info boxes (appeal) ── */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.info-box { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-md); text-align: center; transition: var(--transition); }
.info-box:hover { transform: translateY(-2px); }
.info-box-icon { width: 48px; height: 48px; margin: 0 auto var(--space-4); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.info-box h4 { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-4); }
.info-box p { font-size: var(--text-base); color: var(--text-secondary); line-height: 1.8; }

/* ── Job cards ── */
.job-list { display: flex; flex-direction: column; gap: var(--space-4); }
.job-card { display: flex; align-items: stretch; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); text-decoration: none; color: inherit; }
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-card-img { width: 200px; min-height: 140px; flex-shrink: 0; overflow: hidden; }
.job-card-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); }
.job-card:hover .job-card-img img { transform: scale(1.05); }
.job-card-body { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-8); flex: 1; }
.job-info { flex: 1; }
.job-title { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-4); }
.badge { display: inline-block; font-size: var(--text-xs); padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.badge-emp { background: rgba(25,96,170,0.08); color: var(--primary); }
.job-meta { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.job-meta-item { display: flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--text-secondary); }
.job-meta-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.job-desc { font-size: var(--text-base); color: var(--text-muted); margin-top: var(--space-4); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Detail page ── */
.detail-content { max-width: 800px; margin: 0 auto; padding: var(--space-8); }
.detail-hero { width: 100%; height: 360px; overflow: hidden; }
.detail-hero img { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--primary); }
.detail-header { margin-bottom: var(--space-8); }
.detail-header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: var(--space-4); }
.detail-header-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.detail-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-6); margin-bottom: var(--space-6); }
.detail-section h2 { font-size: var(--text-md); font-weight: 600; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border); color: var(--primary); }
.detail-section p, .detail-section ul { font-size: var(--text-sm); color: var(--text-secondary); line-height: 2; }
.detail-section ul { padding-left: 1.5em; }
.detail-section li { margin-bottom: var(--space-4); }
.info-table { width: 100%; }
.info-table tr { border-bottom: 1px solid rgba(229,229,229,0.5); }
.info-table tr:last-child { border-bottom: none; }
.info-table th { text-align: left; padding: var(--space-4); font-size: var(--text-base); font-weight: 500; color: var(--text-secondary); width: 140px; background: rgba(248,250,252,0.5); }
.info-table td { padding: var(--space-4); font-size: var(--text-base); }

/* ── CTA (full width) ── */
.cta { text-align: center; padding: var(--space-16) var(--space-8); background: linear-gradient(135deg, rgba(25,96,170,0.04), rgba(99,102,241,0.04)); }
.cta h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: var(--space-4); }
.cta p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-8); }
.cta-buttons { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }

/* ── CTA (inline card, detail page) ── */
.cta-section { text-align: center; padding: var(--space-8); background: linear-gradient(135deg, rgba(25,96,170,0.05), rgba(99,102,241,0.05)); border-radius: var(--radius-xl); border: 1px solid var(--border); margin-top: var(--space-8); }
.cta-section h3 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-3); }
.cta-section p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-6); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-8); border-radius: var(--radius-sm); font-size: var(--text-md); font-weight: 600; line-height: 1.5; cursor: pointer; border: none; transition: var(--transition); white-space: nowrap; }
.btn-primary { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; border: 1px solid transparent; }
.btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(25,96,170,0.3); }
.btn-outline { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: rgba(25,96,170,0.04); }

/* ── Form ── */
.form-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-8); margin-bottom: var(--space-6); }
.form-section-title { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); color: var(--primary); }
.form-group { margin-bottom: var(--space-6); }
.form-label { display: block; font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-4); color: var(--text-primary); }
.required { color: #ef4444; font-size: var(--text-xs); margin-left: 4px; background: rgba(239,68,68,0.08); padding: 1px 5px; border-radius: 3px; }
.form-control { width: 100%; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--font-body); transition: var(--transition); }
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25,96,170,0.1); }
textarea.form-control { min-height: 120px; resize: vertical; }
.form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.file-upload { display: block; border: 2px dashed var(--border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); text-align: center; cursor: pointer; transition: var(--transition); }
.file-upload:hover { border-color: var(--primary); background: rgba(25,96,170,0.02); }
.file-upload svg { display: block; width: 32px; height: 32px; color: var(--text-muted); margin: 0 auto var(--space-2); flex-shrink: 0; }
.file-upload-text { font-size: var(--text-sm); color: var(--text-secondary); }
.file-upload-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.es-download { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); padding: var(--space-4); background: var(--bg-section); border: 1px solid var(--border); border-radius: var(--radius-md); }
.es-download a { font-size: var(--text-sm); font-weight: 500; }
.es-download .hint { font-size: var(--text-xs); color: var(--text-muted); }
.privacy-check { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-6); padding: var(--space-4); background: var(--bg-section); border-radius: var(--radius-md); }
.privacy-check input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--primary); }
.privacy-check label { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; }

/* ── Thanks page ── */
.thanks-page { max-width: 600px; margin: 0 auto; padding: var(--space-16) var(--space-8); text-align: center; }
.check-circle { width: 80px; height: 80px; border-radius: 50%; background: rgba(16,185,129,0.1); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-6); }
.check-circle svg { width: 40px; height: 40px; color: var(--accent-green); }
.thanks-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); text-align: left; margin-bottom: var(--space-8); }
.thanks-card h3 { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-4); color: var(--primary); }
.thanks-card p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.8; }

/* ── Footer ── */
.pub-footer { background: var(--text-primary); color: rgba(255,255,255,0.5); text-align: center; padding: var(--space-12); font-size: var(--text-xs); margin-top: var(--space-12); }
.pub-footer a { color: rgba(255,255,255,0.7); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .hero { height: 400px; }
    .hero--short { height: 340px; }
    .hero-content h1 { font-size: 1.6rem; }
    .recruit-cards { grid-template-columns: 1fr; }
    .content-block, .content-block.reverse { grid-template-columns: 1fr; direction: ltr; }
    .info-grid { grid-template-columns: 1fr; }
    .job-card { flex-direction: column; }
    .job-card-img { width: 100%; min-height: 160px; }
    .job-card-body { flex-direction: column; align-items: stretch; }
    .form-row { grid-template-columns: 1fr; }
    .section { padding: var(--space-12) var(--space-6); }
    .detail-content { padding: var(--space-4); }
    .detail-hero { height: 240px; }
}