:root{
    --ease: cubic-bezier(.22,.61,.36,1);
  }
  html{ scroll-behavior:smooth; }
  body{
    font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    color:#1C2430; background:#FFFFFF;
    line-height:1.9; letter-spacing:0.02em;
    overflow-x:hidden;
  }
  .serif{ font-family:"Shippori Mincho","Hiragino Mincho ProN",serif; }
  .mono{ font-family:"IBM Plex Mono",monospace; }

  h1,h2,h3{ line-height:1.4; letter-spacing:0.05em; }

  /* ---- editorial hairlines (column guides) ---- */
  .guides{ position:fixed; inset:0; pointer-events:none; z-index:0; }
  .guides::before,.guides::after{
    content:""; position:absolute; top:0; bottom:0; width:1px;
    background:rgba(30,78,140,.07);
  }
  .guides::before{ left:max(24px, calc(50% - 600px)); }
  .guides::after{ right:max(24px, calc(50% - 600px)); }

  /* ---- eyebrow ---- */
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:500;
    letter-spacing:0.22em; color:#1E4E8C; text-transform:uppercase;
  }
  .eyebrow::before{ content:""; width:28px; height:1px; background:#1E4E8C; opacity:.6; }

  .sec-no{ display:none !important; }

  /* ---- CTA ---- */
  .cta-primary{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    height:54px; padding:0 36px; font-size:14px; font-weight:700; letter-spacing:0.08em;
    background:#2F6FB8; color:#fff; border-radius:999px;
    position:relative; overflow:hidden;
    box-shadow:0 10px 26px rgba(47,111,184,.34), inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .cta-primary::before{
    content:""; position:absolute; inset:0; background:#0B2547;
    transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
  }
  .cta-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(30,78,140,.36), inset 0 1px 0 rgba(255,255,255,.18);
  }
  .cta-primary:hover::before{ transform:scaleX(1); }
  .cta-primary span{ position:relative; z-index:1; }
  .cta-primary span::after{ content:none; }
  .cta-outline{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    height:54px; padding:0 32px; font-size:14px; font-weight:700; letter-spacing:0.08em;
    background:#fff; color:#1C2430; border:1px solid #C9D3E0; border-radius:999px;
    transition:border-color .25s, background .25s, transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .cta-outline:hover{
    border-color:#1E4E8C; background:#EAF1F9;
    transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,37,71,.10);
  }
  .cta-link{
    display:inline-flex; align-items:center; gap:8px;
    color:#1E4E8C; font-weight:700; font-size:14px; letter-spacing:0.04em;
  }
  .cta-link::after{
    content:"→"; font-family:"IBM Plex Mono",monospace;
    transition:transform .25s var(--ease);
  }
  .cta-link:hover::after{ transform:translateX(6px); }

  /* ---- scroll progress ---- */
  #progress{
    position:fixed; top:0; left:0; height:2px; width:0;
    background:#1E4E8C; z-index:60; transition:width .1s linear;
  }

  /* ---- header ---- */
  #site-header{ transition:box-shadow .3s, background .3s; }
  #site-header.scrolled{ box-shadow:0 1px 0 #E3E8EF, 0 8px 32px rgba(11,37,71,.06); }

  /* ---- hero line reveal ---- */
  .hero-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
  .hero-line > span{
    display:inline-block; transform:translateY(112%);
    animation:rise 1.1s var(--ease) forwards;
  }
  .hero-line:nth-child(1) > span{ animation-delay:.15s; }
  .hero-line:nth-child(2) > span{ animation-delay:.3s; }
  .hero-line:nth-child(3) > span{ animation-delay:.45s; }
  @keyframes rise{ to{ transform:translateY(0); } }
  .fade-in{ opacity:0; animation:fadeIn .8s var(--ease) forwards; }
  .fade-in.d1{ animation-delay:.35s; } .fade-in.d2{ animation-delay:.5s; }
  .fade-in.d3{ animation-delay:.65s; } .fade-in.d4{ animation-delay:.8s; }
  @keyframes fadeIn{ to{ opacity:1; } }

  /* ---- ghost outline words ---- */
  .ghost{
    font-family:"IBM Plex Mono",monospace; font-weight:500;
    color:transparent; -webkit-text-stroke:1px rgba(30,78,140,.14);
    letter-spacing:.06em; user-select:none; pointer-events:none; line-height:1;
    white-space:nowrap;
  }

  /* ---- rotating badge ---- */
  .spin-slow{ animation:spin 26s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ---- marquee ---- */
  .marquee{ overflow:hidden; }
  .marquee-track{
    display:flex; width:max-content;
    animation:marquee 36s linear infinite;
  }
  .marquee:hover .marquee-track{ animation-play-state:paused; }
  @keyframes marquee{ to{ transform:translateX(-50%); } }

  /* ---- scroll reveal ---- */
  .reveal{
    opacity:0; transform:translateY(32px);
    transition:opacity .9s var(--ease), transform .9s var(--ease);
    transition-delay:var(--d,0s);
  }
  .reveal.is-in{ opacity:1; transform:none; }
  .reveal-line{
    transform:scaleX(0); transform-origin:left;
    transition:transform 1.2s var(--ease); transition-delay:var(--d,0s);
  }
  .reveal-line.is-in{ transform:scaleX(1); }

  /* ---- accordion ---- */
  .acc-panel{
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .45s var(--ease);
  }
  .acc-panel > div{ overflow:hidden; }
  .acc-item.open .acc-panel{ grid-template-rows:1fr; }
  .acc-icon{ transition:transform .35s var(--ease); }
  .acc-item.open .acc-icon{ transform:rotate(45deg); }

  /* ---- image slot (designed placeholder) ---- */
  .img-slot{
    position:relative; display:flex; flex-direction:column; justify-content:flex-end;
    padding:22px; overflow:hidden;
    background:radial-gradient(135% 130% at 78% 12%, #EAF1F9 0%, #F4F7FB 58%, #FFFFFF 100%);
    border:1px solid #E3E8EF;
  }
  .img-slot::before{ content:""; position:absolute; inset:14px; border:1px solid rgba(30,78,140,.10); }
  .img-slot .img-mark{
    position:absolute; top:24px; left:24px; width:9px; height:9px;
    background:rgba(30,78,140,.32); transform:rotate(45deg);
  }
  .img-slot .img-tag{ position:relative; font-size:10px; letter-spacing:.22em; color:#1E4E8C; }
  .img-slot .img-cap{ position:relative; font-size:13px; font-weight:700; color:#3A4658; margin-top:2px; }

  /* ---- statement word reveal ---- */
  .st-word{ display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
  .st-word > span{
    display:inline-block; transform:translateY(110%);
    transition:transform .9s var(--ease); transition-delay:var(--d,0s);
  }
  .is-in .st-word > span{ transform:translateY(0); }

  /* ---- card hover ---- */
  .lift{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
  .lift:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 40px rgba(11,37,71,.08);
    border-color:#B9C9DE;
  }

  /* ---- SP fullscreen menu ---- */
  .menu-bar{ transition:transform .35s var(--ease), opacity .25s, background .35s; }
  #sp-overlay{
    position:fixed; inset:0; z-index:40; background:#0B2547; color:#fff;
    opacity:0; visibility:hidden;
    transition:opacity .45s var(--ease), visibility 0s linear .5s;
  }
  body.menu-open{ overflow:hidden; }
  body.menu-open #sp-overlay{ opacity:1; visibility:visible; transition:opacity .45s var(--ease); }
  body.menu-open #site-header{ background:transparent; box-shadow:none; backdrop-filter:none; border-color:transparent; }
  body.menu-open .menu-bar{ background:#fff; }
  body.menu-open .brand-text{ color:#fff; }
  body.menu-open .brand-mark{ background:#fff; }
  .brand-logo{ transition:filter .3s; }
  body.menu-open .brand-logo{ filter:invert(1); }
  body.menu-open .brand-name{ color:#fff; }
  body.menu-open .brand-sub{ color:rgba(255,255,255,.6); }
  .ov-item{
    opacity:0; transform:translateY(26px);
    transition:opacity .55s var(--ease), transform .55s var(--ease);
    transition-delay:var(--d,0s);
  }
  body.menu-open .ov-item{ opacity:1; transform:none; }

  /* ---- targets tabs ---- */
  .tab-btn{
    cursor:pointer; user-select:none; flex:1; text-align:center;
    background:#fff; border:1px solid #E3E8EF; border-radius:999px; padding:13px 4px; min-height:56px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    transition:background .25s, color .25s, border-color .25s, box-shadow .25s;
  }
  .tab-btn .tab-for{
    font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.2em;
    color:#9AA7B8; text-transform:uppercase;
  }
  .tab-btn .tab-label{ font-weight:700; font-size:14px; margin-top:2px; }
  .tab-btn:not(.active):hover{
    border-color:#1E4E8C; background:#F4F7FB; color:#1E4E8C;
    transform:translateY(-1px); box-shadow:0 8px 20px rgba(30,78,140,.12);
  }
  .tab-btn:not(.active):hover .tab-for{ color:#1E4E8C; }
  .tab-btn.active{
    background:#1E4E8C; border-color:#1E4E8C; color:#fff;
    box-shadow:0 8px 20px rgba(30,78,140,.25);
  }
  .tab-btn.active .tab-for{ color:rgba(255,255,255,.55); }
  .tab-content{ display:none; }
  .tab-content.active{ display:block; animation:tabIn .55s var(--ease); }
  @keyframes tabIn{ from{ opacity:0; transform:translateY(10px); } }

  /* ---- phone mockup (case study) ---- */
  .phone{
    position:relative; width:min(300px,78vw); margin:0 auto;
    background:#0F1722; border-radius:44px; padding:12px;
    box-shadow:0 30px 70px rgba(11,37,71,.28);
  }
  .phone-screen{ position:relative; border-radius:32px; overflow:hidden; background:#fff; }
  .phone-notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:110px; height:22px; background:#0F1722; border-radius:0 0 14px 14px; z-index:5;
  }
  .phone-scroll{ height:560px; overflow-y:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .phone-scroll::-webkit-scrollbar{ display:none; }
  .phone-scroll img{ width:100%; display:block; }
  .phone-home{ width:100px; height:4px; border-radius:2px; background:rgba(255,255,255,.35); margin:10px auto 2px; }
  .scroll-hint{
    position:absolute; left:0; right:0; bottom:0; z-index:4;
    padding:36px 0 16px; display:flex; flex-direction:column; align-items:center; gap:6px;
    background:linear-gradient(to top, rgba(15,23,34,.55), transparent);
    color:#fff; pointer-events:none; transition:opacity .35s;
  }
  .scroll-hint.hidden{ opacity:0; }
  .scroll-mouse{ width:18px; height:28px; border:1.5px solid #fff; border-radius:10px; position:relative; }
  .scroll-dot{
    width:3px; height:6px; background:#fff; border-radius:2px;
    position:absolute; left:50%; top:5px; transform:translateX(-50%);
    animation:scrolldot 1.6s ease-in-out infinite;
  }
  @keyframes scrolldot{
    0%{ opacity:1; transform:translate(-50%,0); }
    70%{ opacity:0; transform:translate(-50%,10px); }
    100%{ opacity:0; transform:translate(-50%,10px); }
  }

  /* ---- sticky mobile CTA ---- */
  #sticky-cta{
    position:fixed; left:0; right:0; bottom:0; z-index:45;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
    border-top:1px solid #E3E8EF;
    opacity:0; transform:translateY(110%); pointer-events:none;
    transition:opacity .35s var(--ease), transform .35s var(--ease);
  }
  #sticky-cta.show{ opacity:1; transform:none; pointer-events:auto; }
  #sticky-cta .cta-primary{ width:100%; height:52px; }
  @media(min-width:1024px){ #sticky-cta{ display:none; } }

  /* ---- pricing ---- */
  .price-strike{ text-decoration:line-through; }
  .tag{
    display:inline-flex; align-items:center; height:24px; padding:0 10px;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    background:#EAF1F9; color:#1E4E8C; border-radius:999px;
  }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    .reveal,.fade-in{ opacity:1 !important; transform:none !important; }
    .hero-line > span,.st-word > span{ transform:none !important; }
    .reveal-line{ transform:scaleX(1) !important; }
    html{ scroll-behavior:auto; }
  }

  /* ===== SERVICE : 6 designs — numbered editorial list (SP-first) ===== */
  .svc-list{ border-top:1px solid #E3E8EF; }
  .svc-item{
    position:relative;
    display:flex; flex-direction:column; gap:10px;
    padding:26px 0 28px;
    border-bottom:1px solid #E3E8EF;
    transition:padding-left .4s var(--ease);
  }
  .svc-no{
    font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
    font-size:30px; line-height:1; color:#C3CCD8; font-weight:600;
    letter-spacing:.02em; transition:color .4s var(--ease);
    display:flex; align-items:baseline; gap:10px;
  }
  .svc-no .svc-tag{
    font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.22em;
    color:#9AA7B8; transform:translateY(-2px); transition:color .4s var(--ease);
  }
  .svc-body{ }
  .svc-h{
    font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
    font-size:19px; font-weight:600; color:#0B2547; letter-spacing:.03em; line-height:1.45;
  }
  .svc-p{
    margin-top:9px; font-size:13.5px; line-height:1.95; color:#6B7686; letter-spacing:.01em;
    max-width:560px;
  }

  @media(min-width:768px){
    .svc-item{
      display:grid; grid-template-columns:120px 1fr; align-items:start; gap:8px 32px;
      padding:30px 0 32px;
    }
    .svc-no{ font-size:38px; flex-direction:column; gap:8px; }
    .svc-no .svc-tag{ transform:none; }
    .svc-h{ font-size:21px; }
    .svc-p{ font-size:14px; margin-top:11px; }
    /* hover: lift the number to navy, nudge content */
    .svc-item:hover .svc-no{ color:#1E4E8C; }
    .svc-item:hover .svc-no .svc-tag{ color:#1E4E8C; }
    .svc-item:hover{ padding-left:10px; }
  }

  /* ===== SERVICE : 6 design cards (white × hairline, SP-first) ===== */
  .dz{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid #E3E8EF; }
  .dz-card{
    position:relative; padding:26px 6px;
    border-bottom:1px solid #E3E8EF;
  }
  .dz-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .dz-no{
    font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
    font-size:18px; line-height:1.5; color:#1E4E8C; font-weight:600; letter-spacing:.02em; flex:none;
  }
  .dz-tag{
    font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.22em;
    color:#9AA7B8; text-transform:uppercase;
  }
  .dz-title{
    font-family:"Shippori Mincho","Hiragino Mincho ProN",serif;
    display:flex; align-items:baseline; gap:10px;
    margin-top:14px; font-size:18px; font-weight:600; color:#0B2547; letter-spacing:.03em; line-height:1.5;
  }
  .dz-desc{
    margin-top:10px; font-size:13.5px; line-height:1.95; color:#6B7686; letter-spacing:.01em;
  }
  @media(min-width:720px){
    .dz{ grid-template-columns:repeat(2,1fr); }
    .dz-card{ padding:30px 32px; }
    .dz-card:nth-child(odd){ border-right:1px solid #E3E8EF; }
    .dz-no{ font-size:19px; }
    .dz-title{ font-size:19px; margin-top:16px; }
    .dz-desc{ font-size:14px; }
    .dz-card::after{
      content:""; position:absolute; left:32px; bottom:-1px; height:1px; width:0;
      background:#1E4E8C; transition:width .4s var(--ease);
    }
    .dz-card:hover::after{ width:48px; }
  }
  @media(min-width:1040px){
    .dz{ grid-template-columns:repeat(3,1fr); }
    .dz-card:nth-child(odd){ border-right:none; }
    .dz-card:not(:nth-child(3n)){ border-right:1px solid #E3E8EF; }
  }