:root{
    --ink:#120E0D;
    --ink-soft:#1B1513;
    --ember:#E1601F;
    --crimson:#A6291B;
    --gold:#F0A64E;
    --paper:#120E0D;
    --text:#F2EAE3;
    --muted:#AB9F97;
    --line:#382C27;
    --card:#221B18;
    --card-border:#382C27;
    --radius:14px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0;
    font-family:'Zen Kaku Gothic New','Hiragino Sans',sans-serif;
    color:var(--text);
    background:var(--paper);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.disp{
    font-family:'Zen Kaku Gothic New', sans-serif;
    font-weight:900;
    letter-spacing:0.01em;
    margin:0;
  }
  .num, .eyebrow{
    font-family:'Space Grotesk', sans-serif;
  }
  a{color:inherit;}
  img,svg{display:block;max-width:100%;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  .section{padding:96px 0;}
  @media (max-width:720px){ .section{padding:64px 0;} }

  /* -------- Nav -------- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(18,14,13,0.86);
    backdrop-filter:saturate(160%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:var(--maxw); margin:0 auto; padding:14px 28px;
    display:flex; align-items:center; justify-content:space-between;
  }
  .logo-link{ display:flex; align-items:center; text-decoration:none;}
  .logo-img{ height:34px; width:auto; display:block;}
  .logo{
    font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:20px;
    background:linear-gradient(100deg, var(--crimson), var(--ember) 45%, var(--gold) 85%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
    letter-spacing:0.02em;
  }
  .nav-links{display:flex; gap:28px; align-items:center; font-size:14.5px;}
  .nav-links a{text-decoration:none; color:var(--text); opacity:0.82;}
  .nav-links a:hover{opacity:1;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 22px; border-radius:999px;
    font-size:14.5px; font-weight:700; text-decoration:none;
    border:1px solid transparent; cursor:pointer;
  }
  .btn-primary{
    background:linear-gradient(100deg, var(--crimson), var(--ember) 60%, var(--gold));
    color:#fff;
    box-shadow:0 10px 24px -10px rgba(225,96,31,0.55);
  }
  .btn-primary:hover{filter:brightness(1.05);}
  .btn-ghost-dark{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.35); }
  .btn-ghost-dark:hover{ border-color:#fff; }
  .menu-toggle{display:none; background:none; border:none; cursor:pointer;}
  @media (max-width:860px){
    .nav-links{
      position:fixed; inset:60px 0 auto 0; background:var(--ink); flex-direction:column;
      align-items:flex-start; padding:20px 28px; gap:16px; border-bottom:1px solid var(--line);
      transform:translateY(-8px); opacity:0; pointer-events:none; transition:all .2s ease;
    }
    .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
    .menu-toggle{display:block;}
    .nav-links .btn{width:100%; justify-content:center;}
  }

  /* -------- Hero -------- */
  .hero{
    position:relative; overflow:hidden;
    background:radial-gradient(ellipse at 78% -10%, #4A2A20 0%, var(--ink) 46%), var(--ink);
    color:#fff; padding:120px 0 80px;
  }
  .hero::after{
    content:""; position:absolute; right:-12%; top:-18%; width:640px; height:640px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, rgba(240,166,78,0.55), rgba(225,96,31,0.28) 45%, transparent 70%);
    filter:blur(6px);
  }
  .hero-inner{position:relative; z-index:2; max-width:760px;}
  .eyebrow{
    font-size:13px; letter-spacing:0.22em; color:var(--gold); font-weight:600; text-transform:uppercase;
  }
  .hero h1{
    font-size:clamp(34px, 5.2vw, 56px); line-height:1.28; margin:20px 0 22px; color:#fff;
  }
  .hero h1 em{ font-style:normal; color:var(--gold); }
  .hero p.lead{ font-size:17px; color:#DACFC7; max-width:560px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px;}
  .stat-strip{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(255,255,255,0.14); border-radius:16px; overflow:hidden;
    border:1px solid rgba(255,255,255,0.14);
  }
  .stat-strip div{ background:rgba(255,255,255,0.03); padding:22px 18px;}
  .stat-num{ font-family:'Space Grotesk',sans-serif; font-size:30px; font-weight:700; color:var(--gold); }
  .stat-label{ font-size:12.5px; color:#C9BEB6; margin-top:4px; line-height:1.4;}
  @media (max-width:720px){
    .stat-strip{grid-template-columns:repeat(2,1fr);}
  }

  /* -------- Generic section headers -------- */
  .kicker{ color:var(--ember); font-weight:700; font-size:13px; letter-spacing:0.14em; text-transform:uppercase; margin-bottom:14px;}
  .sec-title{ font-size:clamp(24px,3.4vw,34px); margin-bottom:14px;}
  .sec-sub{ color:var(--muted); font-size:15.5px; max-width:640px; margin-bottom:48px;}

  /* -------- Pain cards -------- */
  .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  @media (max-width:900px){ .grid-3{grid-template-columns:1fr;} }
  .card{
    background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius); padding:32px 28px;
  }
  .icon-badge{
    width:52px; height:52px; border-radius:50%; background:var(--ink-soft); border:1px solid var(--card-border);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
  .icon-badge svg{width:24px; height:24px; stroke:var(--ember); fill:none;}
  .card h3{ font-size:18px; margin-bottom:10px;}
  .card p{ color:var(--muted); font-size:14.5px; margin:0;}

  /* -------- 代表紹介 -------- */
  .founder{ display:flex; gap:44px; align-items:center;}
  @media (max-width:820px){ .founder{flex-direction:column; align-items:flex-start;} }
  .founder-photo{
    flex:none; width:220px; height:220px; border-radius:50%; overflow:hidden;
    background:linear-gradient(135deg, var(--crimson), var(--ember) 70%);
    display:flex; align-items:center; justify-content:center;
  }
  .founder-photo img{ width:100%; height:100%; object-fit:cover;}
  .founder-photo.photo-fallback::before{
    content:"写真をここに"; color:#fff; font-size:14px; font-weight:700; text-align:center;
  }
  .founder-body h3{ font-size:22px; margin-bottom:4px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
  .founder-body h3 span{ font-family:'Zen Kaku Gothic New',sans-serif; font-size:13px; font-weight:500; color:var(--muted);}
  .founder-body p{ color:var(--muted); font-size:14.5px; max-width:620px; margin:14px 0 20px;}
  .founder-tags{ display:flex; gap:10px; flex-wrap:wrap;}
  .founder-tags span{
    font-size:12.5px; font-weight:700; color:var(--gold); border:1px solid var(--card-border);
    padding:6px 14px; border-radius:999px;
  }
  .team-row{ display:flex; gap:20px; flex-wrap:wrap; margin-top:40px; padding-top:32px; border-top:1px solid var(--line);}
  .timeline{ margin-top:40px; padding-top:36px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:26px;}
  .tl-item{ display:flex; gap:18px;}
  .tl-dot{ flex:none; width:12px; height:12px; border-radius:50%; background:var(--ember); margin-top:6px; box-shadow:0 0 0 4px rgba(225,96,31,0.18);}
  .tl-tag{ font-size:11.5px; font-weight:700; color:var(--gold); letter-spacing:0.06em; text-transform:uppercase;}
  .tl-body h4{ font-size:15px; font-weight:700; margin:4px 0 6px; color:var(--text); font-family:'Zen Kaku Gothic New',sans-serif;}
  .tl-body p{ font-size:13px; color:var(--muted); margin:0; max-width:560px; line-height:1.6;}
  .team-item{ display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; color:var(--text);}
  .team-item svg{ width:22px; height:22px; stroke:var(--ember); fill:none; flex:none;}
  .org-note{ margin-top:14px; color:var(--muted); font-size:13px;}

  /* -------- Format compare -------- */
  .compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  @media (max-width:820px){ .compare{grid-template-columns:1fr;} }
  .compare .panel{ border-radius:var(--radius); padding:36px 32px;}
  .panel-dark{ background:linear-gradient(135deg, var(--crimson), var(--ember) 70%); color:#fff;}
  .panel-light{ background:var(--card); border:1px solid var(--card-border); color:var(--text);}
  .panel h3{ font-size:22px; margin-bottom:6px;}
  .panel .tag{ font-size:13px; font-weight:700; color:var(--ember); margin-bottom:22px; display:block;}
  .panel-dark .tag{ color:var(--gold);}
  .panel ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;}
  .panel li{ display:flex; gap:12px; font-size:14.5px; align-items:flex-start;}
  .dot{ width:8px; height:8px; border-radius:50%; background:var(--ember); margin-top:7px; flex:none;}

  /* -------- Pricing -------- */
  table.price{ width:100%; border-collapse:collapse; font-size:14.5px; background:var(--card);}
  table.price th, table.price td{ padding:16px 18px; border-bottom:1px solid var(--line); text-align:left;}
  table.price thead th{ background:linear-gradient(100deg, var(--crimson), var(--ember) 80%); color:#fff; font-weight:700;}
  table.price thead th:first-child{ border-top-left-radius:10px; background:var(--ink-soft);}
  table.price thead th:last-child{ border-top-right-radius:10px;}
  table.price td.hl{ color:var(--gold); font-weight:700;}
  .price-wrap{ overflow-x:auto; border-radius:12px; border:1px solid var(--card-border);}
  .opt-table{ margin-top:36px;}
  .opt-table th{ text-align:left; padding:12px 0; font-size:13px; color:var(--muted); border-bottom:1px solid var(--line); font-weight:700;}
  .opt-table td{ padding:14px 0; border-bottom:1px solid var(--line); font-size:14px;}

  /* -------- Portfolio -------- */
  .portfolio-group{ margin-bottom:56px;}
  .portfolio-group h3{ font-size:19px; margin-bottom:6px;}
  .portfolio-group .ptag{ font-size:13px; color:var(--muted); margin-bottom:22px;}
  .p-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  @media (max-width:820px){ .p-grid{grid-template-columns:1fr;} }
  .p-card{ border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line);}
  .p-thumb{
    aspect-ratio:16/9; position:relative;
    background:linear-gradient(135deg, #3A2A22, var(--ink) 55%, #4A2A20);
    display:flex; align-items:center; justify-content:center;
  }
  .p-thumb .play{
    width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,0.14);
    display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.4);
  }
  .p-thumb .play svg{ width:20px; height:20px; fill:#fff; stroke:none; margin-left:3px;}
  .p-thumb .rep{ position:absolute; top:12px; left:12px; font-size:11px; background:rgba(255,255,255,0.14); color:#fff; padding:4px 10px; border-radius:999px; letter-spacing:0.05em;}
  .p-body{ padding:18px 20px;}
  .p-body h4{ font-size:15px; margin:0 0 6px; font-family:'Zen Kaku Gothic New',sans-serif; font-weight:700;}
  .p-body p{ font-size:13px; color:var(--muted); margin:0;}

  .exp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px;}
  @media (max-width:820px){ .exp-grid{grid-template-columns:1fr;} }
  .exp-card{
    display:flex; gap:16px; align-items:flex-start; background:var(--card);
    border:1px solid var(--card-border); border-radius:12px; padding:22px;
  }
  .exp-icon{
    flex:none; width:44px; height:44px; border-radius:50%; background:var(--ink-soft);
    display:flex; align-items:center; justify-content:center;
  }
  .exp-icon svg{ width:22px; height:22px; stroke:var(--ember); fill:none;}
  .exp-card h4{ font-size:14.5px; margin:0 0 6px; font-weight:700;}
  .exp-card p{ font-size:12.5px; color:var(--muted); margin:0; line-height:1.55;}

  /* -------- KPI steps -------- */
  .steps4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative;}
  @media (max-width:900px){ .steps4{grid-template-columns:1fr 1fr;} }
  @media (max-width:560px){ .steps4{grid-template-columns:1fr;} }
  .step-card{ background:var(--card); border-radius:var(--radius); padding:26px 20px; text-align:center;}
  .step-card .icon-badge{ margin:0 auto 16px;}
  .step-card h4{ font-size:14.5px; margin-bottom:8px; font-weight:700;}
  .step-card p{ font-size:12.5px; color:var(--muted); margin:0;}

  /* -------- Why us -------- */
  .grid-4{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
  @media (max-width:720px){ .grid-4{grid-template-columns:1fr;} }

  /* -------- Process -------- */
  .process{ display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;}
  .proc-card{ flex:1 0 200px; background:var(--card); border:1px solid var(--card-border); border-radius:12px; padding:24px 20px; position:relative;}
  .proc-card:first-child{ background:linear-gradient(135deg, var(--crimson), var(--ember) 70%); color:#fff; border:none;}
  .proc-num{ font-family:'Space Grotesk',sans-serif; font-size:26px; color:var(--ember); font-weight:700;}
  .proc-card:first-child .proc-num{ color:var(--gold);}
  .proc-card h4{ font-size:14.5px; margin:14px 0 8px; font-weight:700;}
  .proc-card p{ font-size:12.5px; color:var(--muted); margin:0;}
  .proc-card:first-child p{ color:#D8CFC8;}

  /* -------- Final CTA -------- */
  .final{ background:var(--ink-soft); color:#fff; position:relative; overflow:hidden; border-top:1px solid var(--line);}
  .final::before{
    content:""; position:absolute; left:-10%; top:-30%; width:480px; height:480px; border-radius:50%;
    background:radial-gradient(circle, rgba(240,166,78,0.35), transparent 70%);
  }
  .final-inner{ position:relative; z-index:2; text-align:center; max-width:640px; margin:0 auto;}
  .final h2{ color:#fff; font-size:clamp(26px,4vw,38px); margin-bottom:16px;}
  .final p{ color:#DACFC7; margin-bottom:34px; font-size:15.5px;}
  .contact-list{ margin-top:56px; text-align:left; max-width:520px; margin-left:auto; margin-right:auto; display:flex; flex-direction:column; gap:16px;}
  .contact-row{ display:flex; gap:16px; align-items:center; font-size:14.5px;}
  .contact-row .clabel{ width:100px; color:var(--gold); font-size:12.5px; font-weight:700; flex:none;}

  footer{ background:#181212; color:#9C918B; padding:32px 0; font-size:12.5px;}
  .foot-inner{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}

  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{ opacity:1; transform:none;}

/* ============ Multi-page additions ============ */

/* Founder mini snippet (used inside service pages) */
.founder-mini{
  display:flex; align-items:center; gap:20px; background:var(--card);
  border:1px solid var(--card-border); border-radius:var(--radius);
  padding:22px 26px; flex-wrap:wrap;
}
.founder-mini .fm-photo{
  flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg, var(--crimson), var(--ember) 70%);
}
.founder-mini .fm-photo img{ width:100%; height:100%; object-fit:cover;}
.founder-mini .fm-body{ flex:1 1 260px;}
.founder-mini .fm-body strong{ font-size:14.5px; color:var(--text); display:block; margin-bottom:2px;}
.founder-mini .fm-body span{ font-size:13px; color:var(--muted); display:block;}
.founder-mini a.fm-link{
  flex:none; font-size:13px; font-weight:700; color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold); padding-bottom:1px; white-space:nowrap;
}
.founder-mini a.fm-link:hover{ color:var(--ember); border-color:var(--ember);}

/* Hub top page */
.hub-hero{
  min-height:78vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:80px 24px 60px; position:relative; overflow:hidden;
}
.hub-hero::after{
  content:""; position:absolute; right:-10%; top:-20%; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(240,166,78,0.5), rgba(225,96,31,0.25) 45%, transparent 70%);
  filter:blur(6px);
}
.hub-hero .logo-img{ height:44px; margin:0 auto 28px; position:relative; z-index:2;}
.hub-hero h1{ position:relative; z-index:2; font-size:clamp(28px,4.6vw,44px); color:#fff; max-width:820px; line-height:1.35;}
.hub-hero p{ position:relative; z-index:2; color:#DACFC7; font-size:15.5px; max-width:520px; margin:20px auto 0;}

.hub-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:var(--maxw); margin:0 auto; padding:0 28px 100px; position:relative; z-index:2;}
@media (max-width:820px){ .hub-cards{grid-template-columns:1fr;} }
.hub-card{
  display:block; text-decoration:none; color:inherit; background:var(--card);
  border:1px solid var(--card-border); border-radius:18px; padding:38px 32px;
  transition:transform .25s ease, border-color .25s ease;
}
.hub-card:hover{ transform:translateY(-4px); border-color:var(--ember);}
.hub-card .hc-eyebrow{ font-size:12px; letter-spacing:0.14em; color:var(--gold); font-weight:700; text-transform:uppercase;}
.hub-card h2{ font-size:24px; margin:14px 0 12px; color:var(--text);}
.hub-card p{ font-size:14px; color:var(--muted); margin:0 0 20px;}
.hub-card .hc-arrow{ font-size:14px; font-weight:700; color:var(--ember);}

/* About page */
.about-hero{ text-align:center; padding-bottom:20px;}
.about-photo-lg{
  width:180px; height:180px; border-radius:50%; margin:0 auto 24px; overflow:hidden;
  background:linear-gradient(135deg, var(--crimson), var(--ember) 70%);
}
.about-photo-lg img{ width:100%; height:100%; object-fit:cover;}
.service-links{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:36px;}