/* Page styles: hakken-space.html */
/* hero collage */
  .sp-hero{padding:46px 0 70px;background:#fff;}
  .sp-hero__grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px;}
  .sp-hero__grid .ph{border-radius:10px;height:100%;}
  .sp-hero__card{
    position:absolute;left:14%;right:14%;top:46%;transform:translateY(-50%);
    background:#fff;border-radius:6px;box-shadow:var(--shadow);padding:44px 50px;text-align:center;
  }
  .sp-hero__card h1{color:var(--crimson);font-size:52px;font-weight:900;line-height:1.3;margin:0 0 22px;}
  .sp-hero__card p{font-size:17px;margin:0 0 26px;}
  .sp-hero__card .btn-row{justify-content:center;}

  .sp-sec{padding:84px 0;}
  .sp-intro{background:var(--gray-2);text-align:center;}
  .sp-intro h2{font-size:34px;font-weight:900;margin:40px 0 30px;}
  .sp-intro p{font-size:17px;margin:.2em 0;}
  .sp-intro .gap{height:1.4em;}

  .sub-h{font-weight:900;font-size:30px;text-align:center;}

  .stack{display:flex;flex-direction:column;gap:30px;margin-top:46px;}
  .fbox--row{display:grid;grid-template-columns:1fr 150px;gap:30px;align-items:center;}
  .fbox--row .ph{height:120px;border-radius:8px;}
  .check li{position:relative;padding-left:30px;margin:14px 0;}
  .check li::before{content:"✔";position:absolute;left:0;color:var(--red);font-weight:700;}
  .check li b{color:var(--red);}
  .check li small{display:block;color:#444;font-size:14px;font-weight:400;padding-left:0;}

  /* red gradient bridge */
  .sp-bridge{background:linear-gradient(180deg,var(--red) 0%,var(--red) 55%,#ff8a8d 100%);color:#fff;text-align:center;padding:90px 0 70px;clip-path:polygon(0 7%,50% 0,100% 7%,100% 100%,0 100%);}
  .sp-bridge p{font-size:30px;font-weight:700;line-height:1.6;margin:0 0 60px;}
  .sp-bridge h2{color:#fff;font-size:30px;font-weight:900;}

  .sp-core{padding:80px 0;background:#fff;text-align:center;}
  .sp-core h3{font-size:32px;font-weight:900;margin:0 0 20px;}
  .sp-core .lead{font-size:17px;margin:0 auto 40px;max-width:760px;}
  .core-num{font-size:30px;font-weight:900;margin:70px 0 26px;}

  .sp-reasons{background:#fdf9d8;padding:80px 0;}
  .sp-reasons .sub-h{margin-bottom:10px;}

  /* flow */
  .sp-flow{padding:80px 0;background:#fff;}
  .flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;}
  .flow-card{position:relative;background:#efe9e1;border-radius:14px;padding:46px 26px 30px;margin-top:26px;}
  .flow-card__no{position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:var(--crimson);color:#fff;font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center;}
  .flow-card .ph{height:120px;border-radius:8px;margin-bottom:18px;}
  .flow-card h4{color:var(--crimson);text-align:center;font-size:21px;font-weight:900;margin:0 0 16px;}
  .flow-card p{font-size:13.5px;margin:.3em 0;}
  .flow-card ul{margin:.4em 0 0;padding-left:1.1em;font-size:13.5px;}
  .sp-flow .btn-row{justify-content:center;margin-top:54px;}

  .sp-employ{background:var(--blue);padding:84px 0;}
  .sp-employ .sub-h{text-align:left;}
  .sp-employ__card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:46px 50px;margin-top:36px;display:grid;grid-template-columns:1fr 200px;gap:36px;align-items:center;}
  .sp-employ__card h4{color:var(--red);font-weight:700;font-size:19px;margin:0 0 16px;}
  .sp-employ__card p{font-size:15px;margin:.3em 0;}
  .sp-employ__card .ph{height:200px;border-radius:10px;}

  @media (max-width:900px){
    .sp-hero__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:140px;}
    .sp-hero__card{position:static;transform:none;margin-top:24px;left:0;right:0;padding:30px 24px;}
    .sp-hero__card h1{font-size:30px;}
    .sp-hero__card p{font-size:15px;line-height:1.75;}
    .flow-grid{grid-template-columns:repeat(2,1fr);}
    .fbox--row,.sp-employ__card{grid-template-columns:1fr;}
    .sp-employ__card .ph{height:160px;}
    .sub-h,.sp-intro h2,.sp-core h3{font-size:24px;}
    .sp-sec{padding:64px 0;}
    .sp-bridge{padding:64px 0 56px;}
    .sp-bridge p{font-size:24px;margin-bottom:44px;}
    .sp-bridge h2{font-size:24px;}
  }
  @media (max-width:620px){
    .sp-hero{padding:32px 0 48px;}
    .sp-hero__grid{grid-auto-rows:110px;gap:12px;}
    .sp-hero__card{padding:24px 20px;}
    .sp-hero__card h1{font-size:24px;line-height:1.35;margin-bottom:16px;}
    .sp-hero__card p{font-size:14.5px;margin-bottom:20px;}
    .sp-sec{padding:52px 0;}
    .sp-intro h2{font-size:22px;margin:28px 0 22px;}
    .sp-intro p{font-size:15px;line-height:1.85;}
    .sub-h,.sp-core h3,.sp-bridge h2{font-size:20px;}
    .sp-bridge{padding:52px 0 44px;clip-path:none;}
    .sp-bridge p{font-size:18px;line-height:1.65;margin-bottom:32px;}
    .sp-core{padding:52px 0;}
    .sp-core .lead{font-size:15px;line-height:1.85;}
    .core-num{font-size:22px;margin:44px 0 20px;}
    .sp-reasons,.sp-flow,.sp-employ{padding:52px 0;}
    .flow-grid{grid-template-columns:1fr;gap:16px;}
    .flow-card{padding:40px 22px 26px;margin-top:22px;}
    .flow-card h4{font-size:18px;}
    .flow-card p,.flow-card ul{font-size:14px;line-height:1.75;}
    .fbox--row .ph{height:100px;}
    .sp-employ__card{padding:28px 22px;gap:24px;}
    .sp-employ__card h4{font-size:17px;}
    .sp-employ__card p{font-size:14.5px;line-height:1.85;}
    .check li{font-size:15px;padding-left:26px;}
    .check li small{font-size:13px;}
  }