/* =========================================================
   ラクスルBPO 共通スタイル（ペライチ用 / 手書きCSS）
   ホーム・BtoB・BtoC・SFA の4ページ共通
========================================================= */

:root{
  --navy:#0f172a; --navy-800:#1e293b; --navy-700:#334155;
  --blue:#2563eb; --blue-dark:#1d4ed8; --blue-400:#60a5fa; --blue-50:#eff6ff;
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0;
  --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --white:#ffffff;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  color:var(--slate-800);background:var(--slate-50);line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1152px;margin:0 auto;padding:0 24px}

/* ---------- ボタン ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;
  border-radius:8px;padding:12px 24px;cursor:pointer;border:0;transition:.2s;font-size:15px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 15px -3px rgba(37,99,235,.2)}
.btn-primary:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--blue-dark);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.btn-white:hover{transform:translateY(-2px)}
.btn-outline{border:1px solid #475569;color:#fff;background:transparent}
.btn-outline:hover{border-color:var(--blue-400)}
.btn-group{display:flex;flex-direction:column;gap:16px}
@media(min-width:640px){.btn-group{flex-direction:row}}

/* ---------- ヘッダー ---------- */
.logo-img{height:32px;width:auto;display:block}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--slate-200);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;color:var(--slate-900)}
.logo-badge{width:36px;height:36px;border-radius:8px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center}
.logo-badge i{color:var(--blue-400)}
.logo .accent{color:var(--blue)}
.nav-links{display:none;align-items:center;gap:4px}
.nav-link{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--slate-600)}
.nav-link:hover{color:var(--blue);background:var(--slate-50)}
.nav-link.active{color:var(--blue);background:var(--blue-50)}
.nav-cta{background:var(--blue);color:#fff;font-size:14px;font-weight:700;padding:10px 18px;border-radius:8px}
.nav-cta:hover{background:var(--blue-dark)}
.hamburger{display:flex;font-size:24px;color:#334155;width:40px;height:40px;
  align-items:center;justify-content:center;background:none;border:0;cursor:pointer}
.menu-toggle{display:none}
.mobile-menu{display:none;flex-direction:column;gap:4px;padding:16px 24px;
  background:#fff;border-top:1px solid var(--slate-100)}
.menu-toggle:checked ~ .mobile-menu{display:flex}
.mobile-menu a{padding:12px 16px;border-radius:8px;font-weight:600;color:#334155}
.mobile-menu a.active{color:var(--blue);background:var(--blue-50)}
.mobile-menu .nav-cta{margin-top:8px;text-align:center;color:#fff}
@media(min-width:1024px){
  .nav-links{display:flex}
  .hamburger{display:none}
  .mobile-menu{display:none !important}
}

/* ---------- ヒーロー ---------- */
.hero{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.2;
  background:radial-gradient(circle at 15% 20%,#2563eb 0,transparent 40%),
             radial-gradient(circle at 85% 70%,#1d4ed8 0,transparent 40%)}
.hero-inner{position:relative;padding:80px 0}
.hero-eyebrow{color:var(--blue-400);font-weight:700;letter-spacing:.1em;font-size:14px;margin-bottom:20px}
.badge{display:inline-block;background:var(--blue);color:#fff;font-size:12px;font-weight:700;
  padding:6px 12px;border-radius:999px;margin-bottom:20px}
.hero h1{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:20px}
.hero .lead{color:#cbd5e1;font-size:18px;max-width:640px;margin-bottom:32px;line-height:1.7}
.hero .accent{color:var(--blue-400)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
.stat{background:rgba(30,41,59,.6);border:1px solid #334155;border-radius:12px;padding:20px}
.stat .v{font-size:24px;font-weight:800;color:var(--blue-400)}
.stat .l{color:#cbd5e1;font-size:12px;margin-top:4px}
@media(min-width:768px){
  .hero h1{font-size:48px}
  .hero-inner{padding:96px 0}
  .stats{grid-template-columns:repeat(4,1fr)}
}

/* ---------- セクション共通 ---------- */
.section{padding:80px 0}
.section.alt{background:#fff;border-top:1px solid var(--slate-100);border-bottom:1px solid var(--slate-100)}
.section-title{max-width:768px;margin:0 auto 48px;text-align:center}
.eyebrow{color:var(--blue);font-weight:700;letter-spacing:.1em;font-size:13px;
  margin-bottom:12px;text-transform:uppercase}
.section-title h2{font-size:28px;font-weight:700;color:var(--slate-900);margin-bottom:16px}
.section-title p{color:var(--slate-600);line-height:1.7}
@media(min-width:768px){.section-title h2{font-size:36px}}

/* ---------- グリッド ---------- */
.grid{display:grid;gap:24px}
.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
@media(min-width:768px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1024px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- カード（特徴） ---------- */
.card{background:#fff;border:1px solid var(--slate-100);border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);padding:32px;transition:.2s}
.card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.card-icon{width:56px;height:56px;border-radius:12px;background:var(--blue-50);color:var(--blue);
  font-size:24px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.card h3{font-size:20px;font-weight:700;color:var(--slate-900);margin-bottom:12px}
.card p{color:var(--slate-600);font-size:14px;line-height:1.7}

/* ---------- サービスカード（ホーム） ---------- */
.service-card{background:#fff;border:1px solid var(--slate-100);border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.service-card:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translateY(-4px)}
.service-card .top{background:var(--navy);padding:24px}
.service-card .top i{color:var(--blue-400);font-size:30px;margin-bottom:8px}
.service-card .tag{color:var(--blue-400);font-size:12px;font-weight:700;letter-spacing:.05em}
.service-card .top h3{color:#fff;font-size:20px;font-weight:700;margin-top:4px}
.service-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.service-card .body p{color:var(--slate-600);font-size:14px;line-height:1.7;flex:1}
.service-link{margin-top:24px;color:var(--blue);font-weight:700;font-size:14px;
  display:inline-flex;gap:8px;align-items:center}
.service-card:hover .service-link{gap:12px}

/* ---------- チェックアイテム ---------- */
.check-item{display:flex;gap:16px;background:#fff;padding:24px;border-radius:12px;
  border:1px solid var(--slate-100);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.check-item .ci-icon{color:var(--blue);font-size:20px;margin-top:2px}
.check-item h3{font-weight:700;color:var(--slate-900);margin-bottom:4px}
.check-item p{color:var(--slate-600);font-size:14px;line-height:1.7}

/* ---------- 料金 ---------- */
.price-card{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;padding:32px}
.section.alt .price-card{background:var(--slate-50)}
.price-card .name{font-weight:700;color:var(--slate-900);margin-bottom:8px}
.price-amount{font-size:30px;font-weight:800;color:var(--blue)}
.price-amount small{font-size:16px;font-weight:700;color:var(--slate-500)}
.price-card p.desc{color:var(--slate-600);font-size:14px;margin-top:12px;line-height:1.7}
.price-feats{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:8px}
.price-feats li{font-size:14px;color:var(--slate-700);display:flex;align-items:center;gap:8px}
.price-feats i{color:var(--blue)}
.price-list{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.price-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--slate-700);
  border-bottom:1px solid var(--slate-200);padding-bottom:8px}
.price-list li:last-child{border-bottom:0;padding-bottom:0}
.price-list .val{font-weight:600;white-space:nowrap}
.note{color:var(--slate-500);font-size:14px;margin-top:24px}
.note i{color:var(--blue);margin-right:4px}

/* ---------- 流れ ---------- */
.flow{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.flow-step{background:#fff;border:1px solid var(--slate-100);border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);padding:20px;text-align:center}
.flow-num{width:36px;height:36px;margin:0 auto 12px;border-radius:999px;background:var(--blue);
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.flow-step p{font-size:14px;font-weight:600;color:var(--slate-800)}
@media(min-width:768px){.flow{grid-template-columns:repeat(6,1fr)}}

/* ---------- 区切り ---------- */
.divider{text-align:center}
.divider h2{font-size:24px;font-weight:700;color:var(--slate-900);margin-bottom:12px}
.divider p{color:var(--slate-600);max-width:640px;margin:0 auto}
@media(min-width:768px){.divider h2{font-size:30px}}

/* ---------- 2カラム（強み + バー図） ---------- */
.split{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:768px){.split{grid-template-columns:repeat(2,1fr)}}
.split h2{font-size:28px;font-weight:700;color:var(--slate-900);margin-bottom:20px;line-height:1.4}
.split .lead{color:var(--slate-600);line-height:1.7;margin-bottom:24px}
@media(min-width:768px){.split h2{font-size:30px}}
.list-check{list-style:none;display:flex;flex-direction:column;gap:12px}
.list-check li{display:flex;align-items:center;gap:12px;color:var(--slate-700)}
.list-check i{color:var(--blue)}
.bars{background:var(--navy);border-radius:16px;padding:32px;box-shadow:0 10px 15px -3px rgba(0,0,0,.2)}
.bar-row{margin-bottom:16px}
.bar-row:last-child{margin-bottom:0}
.bar-head{display:flex;justify-content:space-between;font-size:14px;color:#cbd5e1;margin-bottom:4px}
.bar-track{height:12px;border-radius:999px;background:#334155;overflow:hidden}
.bar-fill{height:100%;border-radius:999px;background:var(--blue-400)}

/* ---------- 三層モデル図解 ---------- */
.triple{display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch}
@media(min-width:768px){.triple{grid-template-columns:repeat(3,1fr)}}
.triple-card{background:#fff;border:1px solid var(--slate-200);border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05);padding:32px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.triple-card .tc-icon{width:64px;height:64px;border-radius:999px;color:#fff;font-size:24px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tc-icon.bg-blue{background:var(--blue)}
.tc-icon.bg-slate{background:var(--slate-700)}
.triple-card h3{font-weight:700;color:var(--slate-900);margin-bottom:8px}
.triple-card p{color:var(--slate-600);font-size:14px}
.triple-center{background:var(--navy);border:0;box-shadow:0 10px 15px -3px rgba(0,0,0,.2);justify-content:center;position:relative}
.triple-center .tc-icon{border-radius:12px;background:var(--blue)}
.triple-center h3{color:#fff}
.triple-center p{color:#cbd5e1}
.triple-center .arrow{display:none}
@media(min-width:768px){
  .triple-center .arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);
    color:#3b82f6;font-size:24px}
  .triple-center .arrow.left{left:-12px}
  .triple-center .arrow.right{right:-12px}
}

/* ---------- 近日提供（ミニカード） ---------- */
.coming-label{color:var(--blue);font-weight:700;letter-spacing:.1em;font-size:13px;
  text-align:center;margin:48px 0 16px}
.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mini{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:12px;padding:20px}
.mini i{color:var(--blue);font-size:20px;margin-bottom:8px}
.mini .t{font-weight:700;color:var(--slate-900);font-size:14px}
.mini .d{color:var(--slate-600);font-size:12px;margin-top:4px;line-height:1.6}
@media(min-width:768px){.mini-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- CTA バナー ---------- */
.cta{background:var(--blue);border-radius:16px;padding:48px 32px;text-align:center;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.cta h2{color:#fff;font-size:24px;font-weight:700;margin-bottom:12px}
.cta p{color:#dbeafe;margin-bottom:28px}
.cta-dark{background:var(--navy);border-radius:16px;padding:56px 32px;text-align:center;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.cta-dark h2{color:#fff;font-size:24px;font-weight:700;margin-bottom:16px}
.cta-dark p{color:#cbd5e1;margin-bottom:32px;max-width:576px;margin-left:auto;margin-right:auto}
@media(min-width:768px){.cta h2,.cta-dark h2{font-size:30px}}

/* --- Footer --- */
.footer {
    background: #F5F6F6;
    padding: 40px 0 20px;
    font-size: 12px;
}
.footer__related {
    margin-bottom: 40px;
    border-bottom: 1px solid #DCDCDC;
    padding-bottom: 20px;
}
.footer__related-title {
    font-weight: 600;
    margin-bottom: 10px;
}
.footer__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.footer__bottom-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}
.footer__bottom-links .col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.copyright {
    text-align: center;
    color: #646C75;
}
@media (min-width: 768px) {
    .footer__links {
        flex-direction: row;
        gap: 20px;
    }
    .footer__bottom-links {
        flex-direction: row;
        justify-content: flex-start;
        gap: 40px;
    }
}

/* ---------- フェードイン ---------- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.page{animation:fadeInUp .6s ease-out both}