:root{
    --ink:#000000;
    --paper:#d59d00;
    --paper-2:#c79100;
    --rule:rgba(0,0,0,.22);
    --rule-on-dark:rgba(213,157,0,.28);
    --muted:rgba(0,0,0,.58);
    --muted-on-dark:rgba(213,157,0,.55);
    --dur:900ms;
    --ease:cubic-bezier(.77,0,.18,1);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{
    height:100%;
    background:var(--ink);
    color:var(--ink);
    overflow:hidden;
    overscroll-behavior:none;
  }
  body{
    font-family:"Outfit","Zen Kaku Gothic New",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    font-feature-settings:"palt";
  }
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}

  /* ───── stage ───── */
  .stage{
    position:fixed;inset:0;
    overflow:hidden;
  }
  .page{
    position:absolute;inset:0;
    background:var(--paper);
    overflow:hidden;
    clip-path:inset(0 0 0 0);
  }
  .page.is-hidden{
    clip-path:inset(0 100% 0 0);
    pointer-events:none;
  }
  /* ─── wipe animations ─── */
  /* axis-aligned wipes */
  .page.wipe-r{ animation: wipeR var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-l{ animation: wipeL var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-t{ animation: wipeT var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-b{ animation: wipeB var(--dur) var(--ease) forwards; pointer-events:none }  @keyframes wipeR{ 0%{ clip-path: inset(0 0 0 100%) } 100%{ clip-path: inset(0 0 0 0) } }
  @keyframes wipeL{ 0%{ clip-path: inset(0 100% 0 0) } 100%{ clip-path: inset(0 0 0 0) } }
  @keyframes wipeT{ 0%{ clip-path: inset(100% 0 0 0) } 100%{ clip-path: inset(0 0 0 0) } }
  @keyframes wipeB{ 0%{ clip-path: inset(0 0 100% 0) } 100%{ clip-path: inset(0 0 0 0) } }

  /* diagonal wipes — growing triangle from each corner */
  .page.wipe-tl{ animation: wipeTL var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-tr{ animation: wipeTR var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-bl{ animation: wipeBL var(--dur) var(--ease) forwards; pointer-events:none }
  .page.wipe-br{ animation: wipeBR var(--dur) var(--ease) forwards; pointer-events:none }
  @keyframes wipeTL{
    0%  { clip-path: polygon(0 0, 0 0, 0 0) }
    100%{ clip-path: polygon(0 0, 220% 0, 0 220%) }
  }
  @keyframes wipeTR{
    0%  { clip-path: polygon(100% 0, 100% 0, 100% 0) }
    100%{ clip-path: polygon(-120% 0, 100% 0, 100% 220%) }
  }
  @keyframes wipeBL{
    0%  { clip-path: polygon(0 100%, 0 100%, 0 100%) }
    100%{ clip-path: polygon(0 100%, 0 -120%, 220% 100%) }
  }
  @keyframes wipeBR{
    0%  { clip-path: polygon(100% 100%, 100% 100%, 100% 100%) }
    100%{ clip-path: polygon(100% -120%, -120% 100%, 100% 100%) }
  }

  /* subtle parallax on the inner — different axes for variety */
  .page .inner{ width:100%; height:100%; position:relative }
  .page.wipe-r .inner{ animation: parX var(--dur) var(--ease) forwards }
  .page.wipe-l .inner{ animation: parXn var(--dur) var(--ease) forwards }
  .page.wipe-t .inner{ animation: parY var(--dur) var(--ease) forwards }
  .page.wipe-b .inner{ animation: parYn var(--dur) var(--ease) forwards }
  .page.wipe-tl .inner{ animation: parXYn var(--dur) var(--ease) forwards }
  .page.wipe-tr .inner{ animation: parXnYn var(--dur) var(--ease) forwards }
  .page.wipe-bl .inner{ animation: parXY var(--dur) var(--ease) forwards }
  .page.wipe-br .inner{ animation: parXnY var(--dur) var(--ease) forwards }
  @keyframes parX  { 0%{ transform: translate(40px,0) }   100%{ transform: translate(0,0) } }
  @keyframes parXn { 0%{ transform: translate(-40px,0) }  100%{ transform: translate(0,0) } }
  @keyframes parY  { 0%{ transform: translate(0,40px) }   100%{ transform: translate(0,0) } }
  @keyframes parYn { 0%{ transform: translate(0,-40px) }  100%{ transform: translate(0,0) } }
  @keyframes parXY { 0%{ transform: translate(28px,28px) }   100%{ transform: translate(0,0) } }
  @keyframes parXnY{ 0%{ transform: translate(-28px,28px) }  100%{ transform: translate(0,0) } }
  @keyframes parXYn{ 0%{ transform: translate(28px,-28px) }  100%{ transform: translate(0,0) } }
  @keyframes parXnYn{ 0%{ transform: translate(-28px,-28px) } 100%{ transform: translate(0,0) } }

  /* ───── chrome (page indicator + brand badge) ───── */
  .chrome{
    position:fixed;inset:0;pointer-events:none;z-index:30;
  }
  .badge{
    position:absolute;top:20px;left:32px;
    display:flex;align-items:center;gap:12px;
    pointer-events:auto;
    color:var(--ink);
    padding:10px 0;
  }
  .badge img{height:28px}
  .badge .ja{
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:10.5px;letter-spacing:.2em;
    padding-left:12px;border-left:1px solid rgba(0,0,0,.4);
  }
  .pager{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    display:flex;align-items:center;gap:18px;
    pointer-events:auto;
    transition:opacity .35s ease;
  }
  .pager .dots{display:flex;gap:8px}
  .pager .dot{
    width:7px;height:7px;border-radius:50%;
    background:rgba(0,0,0,.25);
    transition:background .4s, transform .4s;
    cursor:pointer;
  }
  .pager .dot.is-active{background:#000;transform:scale(1.4)}
  .scroll-hint{
    position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ink);
    display:flex;align-items:center;gap:10px;
    opacity:.75;
  }
  .scroll-hint .arr{
    display:inline-block;width:1px;height:18px;background:#000;position:relative;
    overflow:hidden;
  }
  .scroll-hint .arr::after{
    content:"";position:absolute;left:-1px;top:-18px;
    width:3px;height:18px;background:#000;
    animation:drip 1.6s var(--ease) infinite;
  }
  @keyframes drip{
    0%{top:-18px}
    60%{top:18px}
    100%{top:18px}
  }

  /* ═══════════════════════════════════════════════
     PAGE 1 — TOP
     ═══════════════════════════════════════════════ */
  .top{
    height:100%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
    padding:clamp(80px,14vh,180px) 24px clamp(120px,16vh,200px);
    gap:clamp(24px,4vh,56px);
  }
  .top .welcome{
    height:clamp(28px,3.4vh,46px);
    width:auto;
  }
  .top .logo{
    width:min(640px,52vw);
    height:auto;
  }
  .top .socials{
    margin-top:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    justify-items:center;
    gap:clamp(20px,3vw,40px);
    width:min(560px,72vw);
  }
  .top .socials a{
    display:inline-flex;align-items:center;justify-content:center;
    transition:opacity .2s, transform .2s;
    opacity:.92;
  }
  .top .socials a:hover{opacity:1;transform:translateY(-2px)}
  /* New logo assets are baked with matching padding on the same 1585×1185 canvas
     — displaying all three at the same height gives the user's intended size ratio */
  .top .socials .ico{
    height:clamp(72px,10vh,108px);
    width:auto;
    display:block;
  }

  /* ───── floating portals (chatbot / contact) ───── */
  .portals{
    position:relative;
    /* sits in the natural flow between the logo and the socials row */
    width:min(640px,72vw);
    height:clamp(130px,18vh,200px);
    align-self:center;
    pointer-events:none; /* children re-enable */
  }
  .portal{
    position:absolute;
    /* anchored to container center; per-portal transform sets the final spot */
    top:50%;left:50%;
    width:clamp(104px,12vw,140px);
    height:clamp(104px,12vw,140px);
    pointer-events:auto;
    background:transparent;border:0;padding:0;cursor:pointer;
  }
  /* Contact on the left, Chatbot on the right, both nudged toward the logo (up) */
  .portal.p-contact{ transform:translate(calc(-50% - 100px), calc(-50% - 28px)); }
  .portal.p-chat   { transform:translate(calc(-50% + 100px), calc(-50% - 28px)); }
  .portal img{
    width:100%;height:auto;
    display:block;
    transition:transform .25s var(--ease);
  }
  .portal:hover img{ transform:scale(1.05) rotate(-2deg); }
  .portal:active img{ transform:scale(.98) }

  @media (max-width:880px){
    .portals{ width:88vw }
    .portal.p-contact{ transform:translate(calc(-50% - 72px), calc(-50% - 20px)); }
    .portal.p-chat   { transform:translate(calc(-50% + 72px), calc(-50% - 20px)); }
  }

  /* ═══════════════════════════════════════════════
     PAGE 2 — COMPANY INFORMATION
     ═══════════════════════════════════════════════ */
  .ci{
    height:100%;
    display:grid;
    grid-template-rows:auto 1fr auto;
    padding:96px 80px 64px;
  }
  .ci-head{
    display:grid;grid-template-columns:1fr auto;
    align-items:end;
    padding-bottom:28px;
    border-bottom:1px solid var(--rule);
  }
  .ci-head h1{
    font-family:"Outfit",sans-serif;
    font-weight:400;
    font-size:clamp(36px,5vw,68px);
    letter-spacing:-.02em;line-height:1;
  }
  .ci-head h1 .ja{
    display:block;
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:13px;font-weight:400;letter-spacing:.24em;
    color:var(--muted);margin-top:14px;
  }
  .ci-head .num{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;letter-spacing:.18em;
    color:var(--muted);text-transform:uppercase;
  }

  .ci-body{
    align-self:center;
    display:grid;grid-template-columns:1fr 1fr;gap:0 80px;
    padding:24px 0;
  }
  .ci-col h3{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;letter-spacing:.22em;color:var(--muted);
    text-transform:uppercase;
    padding-bottom:14px;
    border-bottom:1px solid var(--rule);
    margin-bottom:4px;
  }
  .rows{display:flex;flex-direction:column}
  .row{
    display:grid;grid-template-columns:160px 1fr;
    gap:24px;
    padding:16px 0;
    border-bottom:1px solid var(--rule);
    align-items:baseline;
  }
  .row dt{
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.18em;color:var(--muted);
    text-transform:uppercase;
    padding-top:2px;
  }
  .row dd{
    font-size:14px;line-height:1.7;
  }
  .ci-col.ja .row dd{
    font-family:"Zen Kaku Gothic New",sans-serif;
  }
  .row dd .zip{
    display:block;
    font-family:"JetBrains Mono",monospace;
    font-size:11px;color:var(--muted);
    letter-spacing:.04em;
    margin-bottom:2px;
  }
  .row dd b{font-weight:500}

  .ci-foot{
    display:flex;justify-content:flex-end;align-items:flex-end;
    gap:32px;
    padding-top:24px;
    border-top:1px solid var(--rule);
  }
  .ci-foot .socials{display:flex;gap:14px}
  .ci-foot .socials a{
    width:40px;height:40px;
    display:grid;place-items:center;
    border:1px solid var(--rule);border-radius:50%;
    transition:background .25s,transform .25s;
  }
  .ci-foot .socials a:hover{background:var(--ink)}
  .ci-foot .socials a:hover img{filter:invert(1)}
  .ci-foot .socials img{width:16px;height:16px;object-fit:contain;transition:filter .2s}
  .ci-foot .meta{
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.16em;color:var(--muted);
    text-transform:uppercase;text-align:right;line-height:1.8;
  }

  /* ════════════════════════════════════
     SUB — dark pages (chatbot / contact)
     virtual sub-pages, black bg + yellow ink
     ════════════════════════════════════ */
  .page.dark{ background:var(--ink); color:var(--paper); }
  .page.dark a{ color:var(--paper); }
  .sub{
    height:100%;
    display:grid;
    grid-template-rows:auto 1fr auto;
    padding:96px 80px 64px;
    color:var(--paper);
  }
  .sub-head{
    display:grid;grid-template-columns:1fr auto;
    align-items:end;
    padding-bottom:28px;
    border-bottom:1px solid var(--rule-on-dark);
  }
  .sub-head h1{
    font-family:"Outfit",sans-serif;
    font-weight:400;
    font-size:clamp(36px,5vw,68px);
    letter-spacing:-.02em;line-height:1;
  }
  .sub-head h1 .ja{
    display:block;
    font-family:"Zen Kaku Gothic New",sans-serif;
    font-size:13px;font-weight:400;letter-spacing:.24em;
    color:var(--muted-on-dark);margin-top:14px;
  }
  .sub-head .num{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;letter-spacing:.18em;
    color:var(--muted-on-dark);text-transform:uppercase;
  }
  .sub-back{
    position:absolute;top:24px;right:28px;
    z-index:5;
    pointer-events:auto;
    display:inline-flex;align-items:center;gap:10px;
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    background:transparent;border:1px solid var(--rule-on-dark);
    color:var(--paper);
    padding:10px 16px 10px 12px;border-radius:999px;
    cursor:pointer;
    transition:background .2s, transform .2s, border-color .2s;
  }
  .sub-back:hover{ background:rgba(213,157,0,.08); border-color:var(--paper); }
  .sub-back .x{
    width:16px;height:16px;display:grid;place-items:center;
    border:1px solid currentColor;border-radius:50%;font-size:10px;
    line-height:1;
  }
  .sub-foot{
    display:flex;justify-content:space-between;align-items:flex-end;
    gap:32px;
    padding-top:24px;
    border-top:1px solid var(--rule-on-dark);
  }
  .sub-foot .meta{
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.16em;
    color:var(--muted-on-dark);
    text-transform:uppercase;text-align:right;line-height:1.8;
  }
  .sub-foot .crumb{
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.18em;
    color:var(--muted-on-dark);
    text-transform:uppercase;
  }
  .sub-foot .crumb b{color:var(--paper);font-weight:500}

  /* ───── chatbot page (new — standalone panel) ───── */
  #page-chatbot .sub.sub-chat{
    display:flex;align-items:stretch;justify-content:center;
    padding:0;
  }
  /* チャット・コンタクトページの背景を黒に */
#page-chatbot,
#page-contact{
  background:#0a0a0a;
}
  .chat-app{
    font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN',"Zen Kaku Gothic New",Meiryo,sans-serif;
    width:100%;max-width:100%;
    background:transparent;
    border-radius:0;
    overflow:visible;
    display:grid;
    grid-template-columns: minmax(280px,38%) 1fr;
    height:100vh;
height:100dvh;
    box-shadow:none;
    border:none;
  }
  /* ─── left rail: identity / branding ─── */
  .chat-app .ca-rail{
    background:#0d0d0d;
    border-right:1px solid #1c1c1c;
    padding:clamp(24px,3vw,40px);
    display:flex;flex-direction:column;gap:clamp(18px,2.4vh,28px);
    position:relative;
    overflow:hidden;
  }
  .chat-app .ca-rail::after{
    /* subtle vignette to anchor the identity */
    content:"";
    position:absolute;inset:auto -60% -60% auto;
    width:90%;height:90%;
    background:radial-gradient(circle at 30% 30%, rgba(212,160,23,.10), transparent 60%);
    pointer-events:none;
  }
  .chat-app .ca-rail-head{
    display:flex;align-items:center;gap:14px;
  }
  .chat-app .ca-avatar-lg{
    width:64px;height:64px;border-radius:14px;
    overflow:hidden;flex-shrink:0;background:#1a1100;
    border:1px solid rgba(212,160,23,.18);
  }
  .chat-app .ca-avatar-lg img{ width:100%;height:100%;object-fit:cover }
  .chat-app .ca-rail-name{
    font-size:18px;font-weight:700;color:#D4A017;
    letter-spacing:.02em;line-height:1.15;
  }
  .chat-app .ca-rail-sub{
    font-size:11px;letter-spacing:.04em;
    color:#D4A017;opacity:.7;margin-top:4px;
  }
  .chat-app .ca-rail-status{
    display:inline-flex;align-items:center;gap:6px;
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
    color:#D4A017;
  }
  .chat-app .ca-rail-status .ca-hdot{
    width:6px;height:6px;border-radius:50%;background:#D4A017;
    animation:caPulse 2s infinite;
  }
  .chat-app .ca-rail-quote{
    font-family:"Outfit",sans-serif;
    font-weight:300;
    font-size:clamp(22px,2.2vw,30px);
    line-height:1.25;letter-spacing:-.01em;
    color:#D4A017;
    max-width:18ch;
  }
  .chat-app .ca-rail-quote em{
    font-style:italic;font-weight:400;
  }
  .chat-app .ca-rail-lead{
    font-size:13px;line-height:1.85;
    color:rgba(212,160,23,.72);
    max-width:34ch;
  }
  .chat-app .ca-rail-tags{
    display:flex;flex-wrap:wrap;gap:6px;
  }
  .chat-app .ca-rail-tag{
    font-family:"JetBrains Mono",monospace;
    font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    padding:5px 10px;
    border:1px solid rgba(212,160,23,.28);
    border-radius:999px;color:#D4A017;
  }
  .chat-app .ca-rail-meta{
    margin-top:auto;
    display:flex;flex-direction:column;gap:4px;
    font-family:"JetBrains Mono",monospace;
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:rgba(212,160,23,.5);
  }
  .chat-app .ca-rail-meta b{ color:#D4A017;font-weight:500 }

  /* ─── right pane: conversation ─── */
  .chat-app .ca-pane{
    display:flex;flex-direction:column;
    min-width:0;
    height:100vh;
    overflow:hidden;
  }
  /* messages */
  .chat-app .ca-messages{
    flex:1;overflow-y:auto;
    padding:clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px) 8px;
    display:flex;flex-direction:column;gap:14px;
    min-height:0;
  }
  .chat-app .ca-messages::-webkit-scrollbar{ width:3px }
  .chat-app .ca-messages::-webkit-scrollbar-thumb{ background:#2a2a2a;border-radius:2px }
  .chat-app .ca-msg{
    display:flex;gap:10px;align-items:flex-end;max-width:80%;
  }
  .chat-app .ca-msg.ca-user{ align-self:flex-end;flex-direction:row-reverse }
  .chat-app .ca-msg.ca-bot{ align-self:flex-start }
  .chat-app .ca-mav{
    width:34px;height:34px;border-radius:10px;
    overflow:hidden;flex-shrink:0;background:#1a1100;
  }
  .chat-app .ca-mav img{ width:100%;height:100%;object-fit:cover }

  .chat-app .ca-bubble{
    padding:12px 16px;font-size:14.5px;line-height:1.75;
    border-radius:16px;word-break:break-word;
  }
  .chat-app .ca-msg.ca-bot .ca-bubble{
    background:#D4A017;color:#1a1100;
    border-bottom-left-radius:4px;
    min-width:24px;min-height:20px;
  }
  .chat-app .ca-msg.ca-user .ca-bubble{
    background:#1a1100;color:#D4A017;
    border-bottom-right-radius:4px;
    border:1px solid #D4A017;
  }
  .chat-app .ca-cursor{
    display:inline-block;width:2px;height:1em;
    background:#1a1100;margin-left:1px;vertical-align:text-bottom;
    animation:caBlink .5s infinite;
  }
  @keyframes caBlink { 0%,100%{opacity:1}50%{opacity:0} }
  @keyframes caPulse { 0%,100%{opacity:1}50%{opacity:.3} }

  /* typing */
  .chat-app .ca-typing{
    display:none;align-self:flex-start;align-items:flex-end;gap:10px;
    padding:0 clamp(20px,2.4vw,32px) 8px;
  }
  .chat-app .ca-typing.is-on{ display:flex }
  .chat-app .ca-typing .ca-mav{ width:34px;height:34px;border-radius:10px;overflow:hidden;flex-shrink:0 }
  .chat-app .ca-tdots{
    display:flex;gap:4px;padding:12px 16px;
    background:#D4A017;border-radius:16px;border-bottom-left-radius:4px;
  }
  .chat-app .ca-tdots span{
    width:5px;height:5px;border-radius:50%;
    background:#1a1100;opacity:.6;
    animation:caBounce 1.2s infinite;
  }
  .chat-app .ca-tdots span:nth-child(2){ animation-delay:.2s }
  .chat-app .ca-tdots span:nth-child(3){ animation-delay:.4s }
  @keyframes caBounce{ 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-5px)} }

  /* chips */
  .chat-app .ca-chips{
    padding:10px clamp(20px,2.4vw,32px);
    display:flex;gap:8px;overflow-x:auto;
    border-top:1px solid #1e1e1e;
    scrollbar-width:none;
  }
  .chat-app .ca-chips::-webkit-scrollbar{ display:none }
  .chat-app .ca-chip{
    flex-shrink:0;font-size:11.5px;padding:6px 12px;
    border-radius:20px;border:1px solid #D4A017;
    background:transparent;color:#D4A017;
    cursor:pointer;font-family:inherit;
    transition:background .15s;white-space:nowrap;opacity:.75;
  }
  .chat-app .ca-chip:hover{ background:rgba(212,160,23,.08);opacity:1 }

  /* input row */
  .chat-app .ca-input-row{
    padding:14px clamp(20px,2.4vw,32px);
    border-top:1px solid #1e1e1e;
    display:flex;gap:10px;align-items:center;
    background:#0d0d0d;
  }
  .chat-app .ca-inp{
    flex:1;
    border:1px solid #D4A017;border-radius:22px;
    padding:10px 18px;font-size:14px;
    background:#1a1100;color:#D4A017;
    outline:none;font-family:inherit;
    transition:border-color .15s;
  }
  .chat-app .ca-inp::placeholder{ color:rgba(212,160,23,.4) }
  .chat-app .ca-send{
    width:40px;height:40px;border-radius:50%;
    background:#D4A017;border:none;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;transition:opacity .15s;
  }
  .chat-app .ca-send:hover{ opacity:.85 }
  .chat-app .ca-send:disabled{ opacity:.35;cursor:default }

  /* chatbot mobile: collapse to single column */
  @media (max-width:880px){
    .chat-app{
      grid-template-columns:1fr;
      grid-template-rows:auto 1fr;
      height:min(90vh,860px);
    }
    .chat-app .ca-rail{
      flex-direction:row;align-items:center;gap:14px;
      padding:14px 18px;
      border-right:0;border-bottom:1px solid #1c1c1c;
    }
    .chat-app .ca-rail::after{ display:none }
    .chat-app .ca-rail-quote,
    .chat-app .ca-rail-lead,
    .chat-app .ca-rail-tags,
    .chat-app .ca-rail-meta{ display:none }
    .chat-app .ca-avatar-lg{ width:42px;height:42px;border-radius:10px }
    .chat-app .ca-rail-name{ font-size:15px }
    .chat-app .ca-rail-sub{ font-size:10px;margin-top:2px }
    .chat-app .ca-rail-head{ flex:1 }
    .chat-app .ca-msg{ max-width:88% }
  }

  /* ───── contact page ───── */
  .mail-body{
    align-self:center;
    display:grid;grid-template-columns: 0.85fr 1.15fr;gap:0 80px;
    padding:32px 0;
  }
  .mail-side{
    display:flex;flex-direction:column;gap:18px;
    padding-right:32px;
    border-right:1px solid var(--rule-on-dark);
  }
  .mail-side h2{
    font-family:"Outfit",sans-serif;
    font-weight:300;
    font-size:clamp(32px,3.5vw,48px);
    line-height:1.25;letter-spacing:-.01em;
  }
  .mail-side .lead{
    font-family:"Zen Kaku Gothic New","Outfit",sans-serif;
    font-size:16px;line-height:1.85;
    color:rgba(213,157,0,.95);
    max-width:36ch;
  }
  .mail-side .addr{
    margin-top:auto;
    display:flex;flex-direction:column;gap:6px;
  }
  .mail-side .addr .k{
    font-family:"JetBrains Mono",monospace;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(213,157,0,.85);
  }
  .mail-side .addr .v{
    font-family:"Outfit",sans-serif;
    font-size:clamp(20px,2vw,28px);
    letter-spacing:.01em;
  }
  .mail-side .addr .v a{ border-bottom:1px solid var(--rule-on-dark);padding-bottom:2px;transition:border-color .2s }
  .mail-side .addr .v a:hover{ border-color:var(--paper); }

  .mail-form{
    display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;
    align-content:start;
  }
  .field{ display:flex;flex-direction:column;gap:8px; }
  .field.full{ grid-column:1 / -1 }
  .field label{
    font-family:"JetBrains Mono",monospace;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:rgba(213,157,0,.9);
  }
  .field input,
  .field textarea{
    background:transparent;
    border:0;border-bottom:1px solid var(--rule-on-dark);
    color:var(--paper);
    font-family:"Zen Kaku Gothic New","Outfit",sans-serif;
    font-size:15px;
    padding:8px 0 10px;
    outline:none;
    transition:border-color .2s;
    resize:none;
  }
  .field textarea{ min-height:128px;line-height:1.7; }
  .field input:focus,
  .field textarea:focus{ border-bottom-color:var(--paper); }
  .mail-actions{
    grid-column:1 / -1;
    display:flex;justify-content:space-between;align-items:center;
    margin-top:8px;
  }
  .mail-actions .hint{
    font-family:"JetBrains Mono",monospace;
    font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted-on-dark);
  }
  .send-btn{
    display:inline-flex;align-items:center;gap:12px;
    font-family:"JetBrains Mono",monospace;
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;
    background:var(--paper);
    color:var(--ink);
    border:0;padding:14px 22px;border-radius:999px;cursor:pointer;
    transition:transform .2s, background .2s;
  }
  .send-btn:hover{ transform:translateY(-1px); background:#e8ad0d; }
  .send-btn .arrow{
    width:16px;height:16px;display:grid;place-items:center;
    border:1px solid currentColor;border-radius:50%;
    font-size:10px;line-height:1;
  }

  /* ───── mobile ───── */
  @media (max-width:880px){
    .badge{top:24px;left:20px;padding:16px 0;}
    .badge .ja{display:none}
    .chat-app .ca-rail{padding:24px 18px;}
    .chat-app .ca-messages{padding-top:80px;}
    /* pager stays bottom-center (matches desktop) — do NOT relocate */
    .pager{ bottom:24px; top:auto; right:auto }
    .scroll-hint{bottom:18px}
    /* iOS Safari viewport fix */
.chat-app{
  height:100vh;
  height:100dvh;
}
.chat-app .ca-pane{
  height:100vh;
  height:100dvh;
}
#page-contact .sub{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
#page-chatbot,
#page-contact{
  background:#0a0a0a;
}
    /* ── TOP — reflow for vertical phones ──
       "Welcome!" aligns vertically with the "Company Information" heading
       on pages 02/03 (top padding = 76px on both .top and .ci).
       The papi-ca logo sits halfway between Welcome's bottom edge and
       the screen's vertical center. Portals are positioned absolutely
       at 75% from top (the midpoint of the lower half of the screen).
       Socials are pinned just above the pager dots at the bottom. */
    .top{
      display:flex;flex-direction:column;align-items:center;
      justify-content:flex-start;
      padding:76px 20px 12px;
      gap:0;
      position:relative; /* anchor for absolute portals */
    }
    .top .welcome{
      height:clamp(24px,3vh,36px);
    }
    /* logo: midway between welcome's bottom and the vertical screen center */
    .top .logo{
      width:min(440px,86vw);
      margin-top:clamp(56px,10.5vh,108px);
    }
    /* portals: positioned in the lower half of the screen */
    .portals{
      position:absolute;
      left:50%; top:67%;
      transform:translate(-50%,-50%);
      width:88vw;
      height:clamp(110px,15vh,150px);
      margin:0;
    }
    .portal{ width:clamp(74px,21vw,96px); height:clamp(74px,21vw,96px) }
    .portal.p-contact{ transform:translate(calc(-50% - 64px), -50%); }
    .portal.p-chat   { transform:translate(calc(-50% + 64px), -50%); }
    /* socials: pinned just above the pager (bottom:24px) */
    .top .socials{
      margin-top:auto;
      margin-bottom:clamp(40px,5vh,52px);
      width:min(420px,80vw);
      display:flex; justify-content:space-around; align-items:center;
      gap:clamp(8px,3vw,24px);
    }
    .top .socials a{
      display:inline-flex; align-items:center; justify-content:center;
      flex:0 0 auto; width:auto; max-width:none;
    }
    .top .socials .ico{
      height:clamp(56px,9vh,84px);
      width:auto; max-width:none;
      object-fit:contain;
      aspect-ratio:auto;
    }

    /* ── Company — split JA / EN across two pages ── */
    .ci{padding:76px 28px 56px}
    .ci-head{grid-template-columns:1fr;gap:8px;padding-bottom:18px}
    .ci-head h1{ font-size:clamp(34px,9vw,46px) }
    .ci-head h1 .ja{ margin-top:12px }
    .ci-body{
      grid-template-columns:1fr; gap:0;
      overflow-y:auto;
      padding:56px 0 0;        /* lower the row block further */
      align-self:start;
    }
    .ci-col h3{ margin-bottom:8px }
    .row{
      grid-template-columns:1fr;
      gap:6px;
      padding:12px 0;
    }
    .row:first-of-type{ padding-top:8px }
    .row dt{ padding-top:0 }
    .row dd{ font-size:15px;line-height:1.85 }
    /* hide the EN column on page-company and JA column on page-company-en */
    #page-company   .ci-col.en{ display:none }
    #page-company   .ci-col.ja h3{ display:none }
    #page-company-en .ci-col.ja{ display:none }
    #page-company-en .ci-col.en h3{ display:none }
    /* swap the "— 02 / 02" caption to "— 02 / 03" on mobile */
    #page-company .ci-head .num{
      font-size:0; /* hide the original text */
    }
    #page-company .ci-head .num::after{
      content: attr(data-num-mobile);
      font-size:11px;
    }

    .ci-foot{flex-direction:column;align-items:flex-start;gap:18px;padding-top:24px}
    .ci-foot .meta{text-align:left}

    /* ── Sub pages (Chatbot / Contact) ── */
    .sub{padding:72px 20px 48px}
    .sub-back{
      position:fixed;
      top:70px;
      right:16px;
      z-index:9999;
      background:rgba(10,10,10,.85);
      backdrop-filter:blur(8px);
      border:1px solid rgba(212,160,23,.5);
    }
    .sub-head{grid-template-columns:1fr;gap:8px}
    .sub-foot{flex-direction:column;align-items:flex-start;gap:12px}
    .mail-body{grid-template-columns:1fr;gap:24px}
    .mail-side{border-right:0;border-bottom:1px solid var(--rule-on-dark);padding-right:0;padding-bottom:24px}
    .mail-form{grid-template-columns:1fr}
    .bubble{max-width:84%}
  }
  /* desktop: hide the mobile-only EN page entirely */
  @media (min-width:881px){
    #page-company-en{ display:none !important }
    .pager .dot[data-i="2"]{ display:none }
  }
  @media (max-height:620px){
    .top{padding:80px 60px 56px}
    .ci{padding:72px 60px 48px}
    .top-stack .welcome{height:56px}
  }
/* Safari UI color fix */
html:has(body.page-chatbot),
html:has(body.page-contact) {
  background:#0a0a0a !important;
}