*{box-sizing:border-box;margin:0;padding:0;font-family:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
    html{scroll-behavior:smooth;}
    body{color:var(--brand-navy);line-height:1.8;}

    section{padding:48px 5%;}
    .container{max-width:1200px;margin:auto;}

    /* ===== HEADER ===== */

    /* ===== HERO ===== */
    .hero{
      padding:54px 0;display:flex;align-items:center;justify-content:center;
      text-align:center;position:relative;color:var(--brand-navy);
    }
    .hero::before{
      content:"";position:absolute;inset:0;
      background:url('/img/hero.jpg') center/cover no-repeat;
    }
    .hero>.inner{position:relative;z-index:1;max-width:800px;}
    .hero h1{font-size:2.2rem;font-weight:700;margin-bottom:16px;line-height:1.4;}
    .hero p{font-size:1.05rem;margin-bottom:32px;}
    .cta-btn{
      display:inline-block;padding:14px 42px;border-radius:6px;background:var(--brand-accent);
      color:#fff;font-weight:600;text-decoration:none;transition:opacity .2s;
    }
    .cta-btn:hover{opacity:.85;}

    /* ===== SERVICES / CARDS ===== */
    #services .cards{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
    .card{
      border:1px solid #e5e7eb;border-radius:12px;padding:32px;text-align:center;
      transition:transform .2s,box-shadow .2s;
    }
    .card:hover{transform:translateY(-4px);box-shadow:0 8px 20px rgba(0,0,0,.06);}

    .card-icon{font-size:0;margin-bottom:16px;color:var(--brand-accent);}
    .card-icon img{
      width:72px;height:72px;border-radius:12px;display:block;margin:0 auto;
      object-fit:contain;
    }

    .card h3{font-size:1.1rem;font-weight:700;margin-bottom:12px;}
    .card p{font-size:.92rem;text-align:left;}

    /* ===== CASES ===== */
    #cases p {
      border-bottom: 1px solid #e5e7eb;
      padding-bottom: 16px;
      margin-bottom: 24px;
    }
    #cases p:last-child { border-bottom: none; }
    #cases p > strong:first-child {
      display: inline-block;
      font-size: 1.1rem;
      color: inherit;
      margin-bottom: 0;
      font-weight: 700;
      margin-right: 8px;
    }
    #cases strong { color: inherit; font-weight: 700; }

    .emoji-icon  { height: 1em;  width: auto; vertical-align: -0.15em; }
    .inline-logo { height: 1.6em; width: auto; vertical-align: middle; margin-right:4px; }
    .inline-logo.penpit-logo { position: relative; top: -1px; }
    .inline-brand{ height: 1.6em; width: auto; vertical-align: -0.15em; margin-right:4px; }

    /* ===== FOOTER ===== */