/* ============================================
   NextFrontLine合同会社 - 共通CSS
   ============================================ */
:root {
  --bg:#fafbfd; --surface:#ffffff; --surface-alt:#f4f7fb;
  --text:#1a2942; --text-sub:#5a6a85; --text-muted:#8b97aa;
  --accent:#2c5aa0; --accent-dark:#1e3f73; --accent-light:#e8f0fb; --accent-soft:#d5e3f5;
  --gold:#c9a96e; --border:#e3e9f1;
  --shadow:0 4px 24px rgba(28,55,108,.06); --shadow-lg:0 16px 48px rgba(28,55,108,.12);
  --serif:'Noto Sans JP',sans-serif; --sans:'Inter','Noto Sans JP',sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html { scroll-behavior:smooth; }
body { font-family:var(--serif); background:var(--bg); color:var(--text); line-height:1.8; font-size:15px; }
img { max-width:100%; display:block; height:auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* ===== Header ===== */
.site-header { position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,.92); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); z-index:1000; transition:.3s; }
.site-header.scrolled { background:rgba(255,255,255,.98); box-shadow:var(--shadow); }
.header-inner { max-width:1240px; margin:0 auto; padding:18px 32px; display:flex; justify-content:space-between; align-items:center; }
.logo { display:flex; align-items:center; gap:10px; }
.logo img { height:36px; width:auto; }
.logo-text { font-size:14px; font-weight:700; letter-spacing:.02em; color:var(--text); }
.logo-text small { display:block; font-size:9px; color:var(--text-muted); font-weight:500; letter-spacing:.1em; }
.global-nav { display:flex; gap:32px; align-items:center; }
.global-nav a { font-size:13px; font-weight:500; color:var(--text-sub); transition:.15s; letter-spacing:.02em; }
.global-nav a:hover { color:var(--accent); }
.global-nav a.active { color:var(--accent); font-weight:700; }
.contact-btn { padding:10px 22px; background:var(--accent); color:#fff !important; border-radius:30px; font-weight:600; font-size:13px; transition:.2s; }
.contact-btn:hover { background:var(--accent-dark); transform:translateY(-1px); }
.mobile-menu-btn { display:none; background:none; border:none; font-size:24px; color:var(--text); }
@media (max-width:880px) {
  .global-nav { display:none; position:fixed; top:73px; left:0; right:0; background:#fff; flex-direction:column; padding:24px; gap:18px; box-shadow:var(--shadow); border-top:1px solid var(--border); }
  .global-nav.open { display:flex; }
  .mobile-menu-btn { display:block; }
  .header-inner { padding:16px 20px; }
  .contact-btn { margin-top:8px; text-align:center; }
}

/* ===== Hero ===== */
.hero { padding:160px 32px 80px; background:linear-gradient(135deg, #1a2942 0%, #2c5aa0 50%, #4a78c4 100%); color:#fff; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(201,169,110,.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(74,120,196,.2) 0%, transparent 60%); pointer-events:none; }
.hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; }
.hero.compact { min-height:auto; padding:140px 32px 60px; }
.hero-inner { max-width:1240px; margin:0 auto; position:relative; z-index:2; }
.hero-tag { display:inline-block; padding:6px 16px; background:rgba(255,255,255,.12); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); border-radius:30px; font-size:11px; font-weight:600; letter-spacing:.15em; margin-bottom:24px; animation:fadeUp .6s ease both; color:var(--gold); }
.hero h1 { font-size:clamp(34px, 5.5vw, 60px); font-weight:800; line-height:1.2; letter-spacing:-.02em; margin-bottom:24px; animation:fadeUp .8s ease both; }
.hero h1 em { font-style:normal; background:linear-gradient(135deg, #c9a96e, #f0d49a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; }
.hero-sub { font-size:clamp(15px, 2vw, 18px); opacity:.85; line-height:1.9; max-width:640px; margin-bottom:36px; animation:fadeUp 1s ease both; font-weight:300; }
.hero-cta-group { display:flex; gap:14px; flex-wrap:wrap; animation:fadeUp 1.2s ease both; }
.btn-primary { display:inline-block; padding:16px 36px; background:#fff; color:var(--accent-dark) !important; border-radius:40px; font-weight:700; font-size:15px; transition:.2s; box-shadow:0 8px 24px rgba(0,0,0,.15); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(0,0,0,.2); }
.btn-primary.dark { background:var(--accent); color:#fff !important; }
.btn-primary.dark:hover { background:var(--accent-dark); }
.btn-ghost { display:inline-block; padding:16px 36px; background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.4); border-radius:40px; font-weight:600; font-size:15px; transition:.2s; }
.btn-ghost:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.hero-meta { display:flex; gap:32px; margin-top:60px; flex-wrap:wrap; animation:fadeUp 1.4s ease both; }
.hero-meta-item { font-size:12px; opacity:.7; letter-spacing:.1em; }
.hero-meta-item strong { display:block; font-size:28px; font-weight:800; letter-spacing:-.02em; color:#fff; opacity:1; margin-bottom:4px; font-family:var(--sans); }

.breadcrumb { padding:14px 32px; background:var(--surface); border-bottom:1px solid var(--border); }
.breadcrumb-inner { max-width:1240px; margin:0 auto; font-size:12px; color:var(--text-muted); }
.breadcrumb-inner a { color:var(--text-sub); }
.breadcrumb-inner a:hover { color:var(--accent); }
.breadcrumb-inner .sep { margin:0 8px; opacity:.5; }
.breadcrumb-inner .current { color:var(--text); font-weight:600; }

/* ===== Marquee ===== */
.marquee { background:var(--accent-dark); color:#fff; padding:14px 0; overflow:hidden; }
.marquee-inner { display:flex; gap:60px; animation:marquee 40s linear infinite; white-space:nowrap; font-size:13px; letter-spacing:.15em; font-family:var(--sans); opacity:.8; }
.marquee-inner span::before { content:'·  '; color:var(--gold); margin-right:8px; }

/* ===== Section ===== */
.section { max-width:1240px; margin:0 auto; padding:100px 32px; }
.section.alt { background:var(--surface-alt); max-width:none; padding-left:0; padding-right:0; }
.section.alt > .section-inner { max-width:1240px; margin:0 auto; padding:0 32px; }
.section-tag { font-size:11px; font-weight:700; letter-spacing:.2em; color:var(--accent); margin-bottom:14px; }
.section-tag::before { content:''; display:inline-block; width:30px; height:1.5px; background:var(--accent); margin-right:14px; vertical-align:middle; }
.section-title { font-size:clamp(28px, 4vw, 42px); font-weight:800; line-height:1.3; letter-spacing:-.02em; margin-bottom:18px; }
.section-title em { font-style:normal; color:var(--accent); }
.section-sub { font-size:15px; color:var(--text-sub); line-height:1.9; max-width:620px; margin-bottom:60px; }

/* ===== Cards Grid ===== */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; }
.card { background:var(--surface); padding:36px 28px; border-radius:16px; border:1px solid var(--border); transition:.3s; animation:fadeUp .6s ease both; position:relative; overflow:hidden; }
.card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--accent-soft); }
.card .num { position:absolute; top:14px; right:20px; font-family:var(--sans); font-size:64px; font-weight:900; color:var(--accent-light); line-height:1; }
.card .icon { font-size:36px; margin-bottom:18px; display:inline-block; }
.card h3 { font-size:17px; font-weight:700; margin-bottom:10px; position:relative; z-index:1; }
.card p { font-size:13px; color:var(--text-sub); line-height:1.8; position:relative; z-index:1; }

/* ===== Stats ===== */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:20px; }
.stat-block { background:#fff; padding:30px 26px; border-radius:16px; border:1px solid var(--border); text-align:center; }
.stat-block .num { font-family:var(--sans); font-size:42px; font-weight:900; color:var(--accent); letter-spacing:-.03em; line-height:1; margin-bottom:8px; }
.stat-block .lbl { font-size:12px; color:var(--text-sub); }

/* ===== Article (会社概要・代表挨拶など長文) ===== */
.article { max-width:840px; margin:0 auto; padding:80px 32px; }
.article h2 { font-size:24px; font-weight:800; margin:48px 0 18px; padding-bottom:14px; border-bottom:2px solid var(--accent); }
.article h2:first-child { margin-top:0; }
.article h3 { font-size:18px; font-weight:700; margin:30px 0 12px; color:var(--accent); }
.article p { margin-bottom:16px; font-size:15px; line-height:2; color:var(--text-sub); }
.article ul, .article ol { margin:14px 0 24px 24px; }
.article li { margin-bottom:8px; font-size:14px; color:var(--text-sub); line-height:1.9; }
.article table { width:100%; border-collapse:collapse; margin:20px 0; background:#fff; }
.article table th, .article table td { padding:14px 18px; border:1px solid var(--border); font-size:14px; text-align:left; vertical-align:top; }
.article table th { background:var(--surface-alt); font-weight:700; width:200px; color:var(--text); }
.article table td { color:var(--text-sub); }
.article .lead { font-size:17px; line-height:2; color:var(--text); margin-bottom:32px; font-weight:500; }
.article blockquote { border-left:4px solid var(--gold); padding:14px 24px; margin:24px 0; background:var(--surface-alt); font-size:15px; font-style:italic; color:var(--text-sub); }

/* ===== Service Cards ===== */
.service-block { background:#fff; border:1px solid var(--border); border-radius:20px; padding:40px; margin-bottom:24px; transition:.3s; }
.service-block:hover { box-shadow:var(--shadow-lg); }
.service-block h3 { font-size:22px; font-weight:800; margin-bottom:12px; color:var(--accent); }
.service-block p { font-size:14px; line-height:1.9; color:var(--text-sub); margin-bottom:14px; }
.service-block .tag { display:inline-block; padding:4px 12px; background:var(--accent-light); color:var(--accent); border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.05em; margin-bottom:14px; }
.service-block ul { margin-left:20px; }
.service-block li { font-size:13px; color:var(--text-sub); margin-bottom:6px; }

/* ===== Contact Form ===== */
.contact-form { max-width:680px; margin:0 auto; background:#fff; padding:40px; border-radius:20px; border:1px solid var(--border); }
.form-field { margin-bottom:20px; }
.form-field label { display:block; font-size:12px; font-weight:700; color:var(--text-sub); margin-bottom:6px; letter-spacing:.05em; }
.form-field label.required::after { content:' *'; color:#e53e3e; }
.form-field input, .form-field textarea, .form-field select { width:100%; padding:13px 16px; font-size:14px; border:1.5px solid var(--border); border-radius:10px; font-family:var(--serif); outline:none; background:var(--surface-alt); transition:.2s; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--accent-light); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:600px) { .form-row { grid-template-columns:1fr; } }
.submit-btn { width:100%; padding:16px; font-size:15px; font-weight:800; background:var(--accent); color:#fff; border:none; border-radius:12px; cursor:pointer; transition:.2s; margin-top:8px; }
.submit-btn:hover { background:var(--accent-dark); transform:translateY(-1px); box-shadow:0 8px 24px rgba(44,90,160,.3); }

/* ===== CTA ===== */
.cta-section { background:linear-gradient(135deg, #1a2942 0%, #2c5aa0 100%); color:#fff; padding:80px 32px; text-align:center; }
.cta-section h2 { font-size:clamp(26px, 4vw, 38px); font-weight:800; margin-bottom:18px; letter-spacing:-.01em; }
.cta-section p { opacity:.85; font-size:15px; margin-bottom:32px; max-width:600px; margin-left:auto; margin-right:auto; line-height:1.9; }
.cta-section em { color:var(--gold); font-style:normal; }

/* ===== Footer ===== */
.footer { background:#0f1a2e; color:#a8b3c7; padding:60px 32px 30px; }
.footer-inner { max-width:1240px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,.08); }
@media (max-width:780px) { .footer-top { grid-template-columns:1fr 1fr; } }
@media (max-width:480px) { .footer-top { grid-template-columns:1fr; } }
.footer-brand img { height:32px; filter:brightness(0) invert(1); opacity:.9; margin-bottom:14px; }
.footer-brand p { font-size:12px; line-height:1.9; opacity:.7; margin-bottom:16px; }
.footer-brand .addr { font-size:11px; opacity:.6; line-height:1.7; }
.footer h4 { font-size:11px; font-weight:700; letter-spacing:.15em; color:#fff; margin-bottom:16px; }
.footer ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer ul a { font-size:12px; opacity:.7; transition:.2s; }
.footer ul a:hover { opacity:1; color:var(--gold); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:11px; opacity:.5; }
.footer-bottom a { color:inherit; }
.footer-bottom a:hover { opacity:1; }

/* ===== 404 ===== */
.error-page { min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 32px 60px; }
.error-page h1 { font-size:120px; font-weight:900; color:var(--accent); line-height:1; letter-spacing:-.05em; font-family:var(--sans); }
.error-page h2 { font-size:24px; margin:14px 0 16px; }
.error-page p { color:var(--text-sub); margin-bottom:32px; }

@media (max-width:600px) {
  .section { padding:60px 20px; }
  .hero { padding:120px 20px 60px; }
  .article { padding:60px 20px; }
  .contact-form { padding:28px 22px; }
}

/* ============================================
   v2 ブラッシュアップ用：スタートアップ感の追加スタイル
   ============================================ */

/* ===== 信頼バッジ ===== */
.trust-bar { background:rgba(255,255,255,.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,.1); border-bottom:1px solid rgba(255,255,255,.1); padding:24px 32px; }
.trust-bar-inner { max-width:1240px; margin:0 auto; display:flex; align-items:center; gap:32px; flex-wrap:wrap; justify-content:center; }
.trust-item { font-size:11px; color:rgba(255,255,255,.7); letter-spacing:.1em; display:inline-flex; align-items:center; gap:8px; }
.trust-item::before { content:'✓'; color:var(--gold); font-weight:700; }

/* ===== Manifesto / 理念ブロック ===== */
.manifesto { padding:120px 32px; background:var(--text); color:#fff; position:relative; overflow:hidden; }
.manifesto::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 50%, rgba(201,169,110,.1) 0%, transparent 60%); }
.manifesto-inner { max-width:900px; margin:0 auto; position:relative; z-index:1; }
.manifesto-label { font-size:11px; letter-spacing:.3em; color:var(--gold); margin-bottom:24px; }
.manifesto-title { font-size:clamp(28px, 4.5vw, 48px); font-weight:800; line-height:1.5; letter-spacing:-.02em; margin-bottom:30px; }
.manifesto-title em { font-style:normal; color:var(--gold); }
.manifesto-body { font-size:16px; line-height:2.2; opacity:.85; max-width:720px; font-weight:300; }
.manifesto-body p { margin-bottom:20px; }
.manifesto-sign { margin-top:40px; font-size:13px; opacity:.6; letter-spacing:.05em; }

/* ===== Approach (3ステップ等) ===== */
.approach-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:24px; counter-reset:approach; }
.approach-card { background:var(--surface); border:1px solid var(--border); padding:36px 28px; border-radius:16px; position:relative; counter-increment:approach; transition:.3s; }
.approach-card::before { content:counter(approach, decimal-leading-zero); position:absolute; top:20px; right:24px; font-family:var(--sans); font-size:36px; font-weight:900; color:var(--accent-light); letter-spacing:-.02em; }
.approach-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent-soft); }
.approach-card h3 { font-size:18px; font-weight:800; margin:14px 0 12px; color:var(--text); }
.approach-card p { font-size:13px; color:var(--text-sub); line-height:1.9; }
.approach-card .label { font-size:10px; color:var(--accent); font-weight:700; letter-spacing:.15em; }

/* ===== Tech Stack / 自社プロダクト ===== */
.tech-section { background:linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%); padding:120px 32px; }
.tech-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; max-width:1240px; margin:0 auto; }
@media (max-width:880px) { .tech-grid { grid-template-columns:1fr; } }
.tech-visual { background:linear-gradient(135deg, #1a2942 0%, #2c5aa0 100%); border-radius:24px; padding:50px 40px; color:#fff; position:relative; overflow:hidden; box-shadow:var(--shadow-lg); }
.tech-visual::before { content:''; position:absolute; top:-50%; right:-30%; width:400px; height:400px; background:radial-gradient(circle, rgba(201,169,110,.2) 0%, transparent 70%); }
.tech-visual-inner { position:relative; z-index:1; }
.tech-visual h3 { font-size:22px; font-weight:800; margin-bottom:14px; }
.tech-visual .tech-badge { display:inline-block; padding:5px 14px; background:rgba(255,255,255,.15); border-radius:30px; font-size:11px; font-weight:600; letter-spacing:.1em; margin-bottom:24px; color:var(--gold); }
.tech-features { display:flex; flex-direction:column; gap:14px; margin-top:24px; }
.tech-features li { font-size:13px; opacity:.85; padding-left:24px; position:relative; line-height:1.8; list-style:none; }
.tech-features li::before { content:'→'; position:absolute; left:0; color:var(--gold); font-weight:700; }

/* ===== Hero refinement ===== */
.hero h1 { font-size:clamp(38px, 6.5vw, 72px) !important; }
.hero .lead-emphasis { display:inline-block; padding:4px 14px; background:rgba(201,169,110,.15); color:var(--gold); border-radius:6px; font-size:.6em; font-weight:600; letter-spacing:.05em; vertical-align:middle; margin-left:8px; }

/* ===== Process Timeline ===== */
.process-timeline { position:relative; padding:20px 0; }
.process-timeline::before { content:''; position:absolute; top:40px; left:40px; right:40px; height:2px; background:linear-gradient(90deg, var(--accent) 0%, var(--gold) 100%); opacity:.3; z-index:0; }
@media (max-width:780px) { .process-timeline::before { display:none; } }
.process-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; position:relative; z-index:1; }
@media (max-width:780px) { .process-grid { grid-template-columns:1fr; } }
.process-step { text-align:center; }
.process-step .circle { width:80px; height:80px; margin:0 auto 16px; background:#fff; border:2px solid var(--accent); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--sans); font-size:24px; font-weight:900; color:var(--accent); box-shadow:0 8px 24px rgba(44,90,160,.15); transition:.3s; }
.process-step:hover .circle { background:var(--accent); color:#fff; transform:translateY(-4px); }
.process-step h4 { font-size:14px; font-weight:800; margin-bottom:8px; }
.process-step p { font-size:12px; color:var(--text-sub); line-height:1.8; }

/* ===== Inline FAQ ===== */
.faq-item { background:#fff; border:1px solid var(--border); border-radius:12px; margin-bottom:12px; overflow:hidden; transition:.2s; }
.faq-item:hover { border-color:var(--accent-soft); }
.faq-q { padding:18px 24px; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-size:14px; }
.faq-q::after { content:'+'; font-size:24px; color:var(--accent); font-weight:300; transition:.3s; }
.faq-item.open .faq-q::after { transform:rotate(45deg); }
.faq-a { padding:0 24px; max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s ease; font-size:13px; color:var(--text-sub); line-height:1.9; }
.faq-item.open .faq-a { padding:0 24px 20px; max-height:300px; }

/* ===== Hero pill with year ===== */
.hero-pill { display:inline-flex; align-items:center; gap:10px; padding:6px 16px 6px 6px; background:rgba(255,255,255,.1); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.15); border-radius:30px; font-size:12px; margin-bottom:24px; animation:fadeUp .6s ease both; }
.hero-pill .badge { background:var(--gold); color:var(--text); padding:3px 10px; border-radius:20px; font-weight:700; font-size:10px; letter-spacing:.05em; }

/* ===== Why differentiate ===== */
.diff-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; }
.diff-card { background:#fff; border:1px solid var(--border); border-radius:20px; padding:40px 32px; transition:.3s; position:relative; overflow:hidden; }
.diff-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.diff-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg, var(--accent), var(--gold)); }
.diff-card .icon { font-size:32px; margin-bottom:16px; }
.diff-card h3 { font-size:18px; font-weight:800; margin-bottom:12px; letter-spacing:-.01em; }
.diff-card p { font-size:13px; color:var(--text-sub); line-height:1.9; margin-bottom:14px; }
.diff-card .accent-line { display:inline-block; padding:4px 12px; background:var(--accent-light); color:var(--accent); border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.05em; }

/* ===== Tag style buttons ===== */
.tag-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.tag-cloud span { padding:6px 14px; background:var(--surface-alt); border:1px solid var(--border); border-radius:30px; font-size:12px; color:var(--text-sub); }