:root{color-scheme:dark;--blue:#083bff;--bg:#071015;--line:#23323c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#0b1116;color:#f6f8fa;font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}a{color:inherit}button{font:inherit}.topbar{display:none;position:sticky;top:0;z-index:30;background:#061017ed;border-bottom:1px solid #32404b;justify-content:space-between;align-items:center;padding:10px max(18px,calc((100vw - 1160px)/2));gap:16px}.brand{font-size:27px;font-weight:900;letter-spacing:-2px;color:#1542ff;text-decoration:none}.desktop-menu{display:flex;gap:clamp(10px,2.3vw,29px);align-items:center}.desktop-menu a{text-decoration:none;font-size:12px;letter-spacing:.12em;padding:11px 0}.desktop-menu a[aria-current=page]{color:#3d8dff;border-bottom:2px solid #1451ff}.menu-btn{display:none;border:1px solid #455260;background:transparent;color:white;border-radius:5px;padding:7px 11px}.frame{max-width:1120px;margin:0 auto;background:#101619}.visual{position:relative;line-height:0}.visual img{display:block;width:100%;height:auto}.visuallink{position:absolute;display:block;z-index:5}.visuallink:focus-visible{outline:3px solid #1587ff;outline-offset:3px;background:#1587ff22}.work-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:1120px;margin:0 auto;padding:14px 16px 25px;background:#091319}.work-cards a{border:1px solid #30404c;border-radius:4px;text-align:center;text-decoration:none;padding:12px 5px;font-size:13px}.work-cards a.active,.work-cards a:hover{border-color:#135bfa;background:#0c254c}.helper{background:#101b22;padding:22px max(18px,calc((100vw - 1120px)/2));font-size:13px;color:#cbd4dc;line-height:1.8}.helper a{color:#9bbcff}.footer{padding:25px;text-align:center;background:#050b0f;font-size:12px;color:#9aa6b0}.contact-box{max-width:1120px;margin:0 auto;padding:28px 22px 45px;background:#f8f8f8;color:#17202a}.contact-box h2{font-size:22px;margin:0 0 9px}.contact-box p{line-height:1.7}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}.field input,.field textarea,.field select{width:100%;border:1px solid #bdc5cb;border-radius:4px;padding:11px;font:inherit;background:#fff;color:#17202a}.field textarea{min-height:120px;resize:vertical}.send{background:#061018;color:white;padding:13px 35px;border:none;cursor:pointer;border-radius:3px}.note{color:#5c6874;font-size:12px}.hidden{display:none}@media(max-width:700px){.topbar{display:flex;padding:9px 14px}.desktop-menu{display:none;position:absolute;top:49px;left:0;right:0;background:#08121a;flex-direction:column;align-items:stretch;gap:0;padding:12px 18px 20px;border-bottom:1px solid #334}.desktop-menu.open{display:flex}.desktop-menu a{padding:12px 8px}.menu-btn{display:block}.frame{width:100%}.visual img{width:100%;height:auto}.work-cards{grid-template-columns:repeat(2,1fr)}.work-cards a{font-size:12px}.contact-grid{grid-template-columns:1fr}.contact-box{padding:22px 15px}.helper{padding:18px} }

/* WORKS popup */
.work-number{border:0;background:transparent;cursor:pointer;padding:0}
.work-number:hover{background:#098bff29}
.work-cards button{border:1px solid #30404c;border-radius:4px;text-align:center;text-decoration:none;padding:12px 5px;font-size:13px;background:#091319;color:white;cursor:pointer}
.work-cards button:hover,.work-cards button:focus-visible{border-color:#135bfa;background:#0c254c}
.work-overlay[hidden]{display:none}
.work-overlay{position:fixed;inset:0;z-index:1000;background:#02080ee9;display:flex;justify-content:center;align-items:center;padding:clamp(8px,2vw,24px)}
.work-dialog{width:min(100%,1100px);height:min(96dvh,1100px);background:#101a22;color:#fff;display:flex;flex-direction:column;border:1px solid #354655;box-shadow:0 18px 60px #000b;border-radius:8px;overflow:hidden}
.work-dialog-top,.work-dialog-bottom{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:#07131b;font-size:14px;letter-spacing:.04em}
.work-close,.work-switch{cursor:pointer;color:#fff;background:#1c3040;border:1px solid #435665;border-radius:5px;padding:8px 14px}
.work-dialog-scroll{flex:1;min-height:0;overflow:auto;text-align:center;overscroll-behavior:contain}
.work-dialog-scroll img{display:block;width:100%;height:auto;margin:auto}
body.work-modal-open{overflow:hidden}
@media(max-width:700px){.work-dialog{height:95dvh}.work-dialog-top,.work-dialog-bottom{padding:9px 10px}.work-dialog-scroll img{width:100%;max-width:none}}

@media(min-width:701px){.topbar{display:none!important}}

/* Active menu item is blue and underlined, with the baked-in white label masked. */
.visual .visuallink[data-active-menu="true"]{
  background:#061019;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.visual .visuallink[data-active-menu="true"]::after{
  content:attr(title); color:#1988ff;
  border-bottom:2px solid #1559ff;
  padding:0 0 5px;
  font-family:Arial,"Noto Sans JP",sans-serif;
  font-size:clamp(9px,1.13vw,17px);
  font-weight:600;
  letter-spacing:.07em;
  line-height:1.1;
}
.visual .visuallink.work-number:hover,
.visual .visuallink.work-number:focus-visible{outline:2px solid #1487ff;outline-offset:0;background:#087dff33}

/* Keep selected menu baseline aligned on the tall BRAND layout. */
.nav-portrait .visual .visuallink[data-active-menu="true"]{height:5.7%!important;}

/* CONTACT one-form interaction: the approved form artwork is untouched, and
   a single real form appears only after clicking it. */
.open-contact-form{position:absolute;left:49%;top:29%;width:47%;height:55%;z-index:8;cursor:pointer;border:0;background:transparent}
.open-contact-form:focus-visible{outline:3px solid #188bff;outline-offset:-3px}
.contact-modal[hidden]{display:none}
.contact-modal{position:fixed;inset:0;z-index:1200;background:rgba(0,6,12,.85);display:flex;align-items:center;justify-content:center;padding:14px}
.contact-dialog{background:#fff;color:#1b2630;border-radius:9px;max-width:600px;width:100%;max-height:calc(100dvh - 28px);overflow:auto;padding:22px;box-shadow:0 15px 80px #0008}
.contact-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #d2d8dc;padding-bottom:11px}
.contact-dialog-head h2{font-size:20px;margin:0}
.contact-modal-close{background:#17232b;color:#fff;border:0;border-radius:4px;padding:5px 12px;font-size:24px;cursor:pointer}
.contact-dialog-note{color:#455564;font-size:13px;line-height:1.65}
#contact-edit-form{display:grid;gap:12px}
#contact-edit-form label{display:grid;gap:5px;font-size:14px;font-weight:600}
#contact-edit-form label span{color:#b23636;font-size:12px}
#contact-edit-form input,#contact-edit-form select,#contact-edit-form textarea{width:100%;box-sizing:border-box;background:#fff;color:#1b2630;font:inherit;padding:10px;border:1px solid #b7c0c7;border-radius:3px}
.contact-copy{background:#06171e;color:#fff;padding:13px 20px;border:0;border-radius:4px;cursor:pointer;font-weight:bold}
#contact-copy-status{font-size:13px;line-height:1.65;margin:0}
body.contact-modal-open{overflow:hidden}
@media(max-width:700px){.open-contact-form{left:48%;top:29%;width:48%;height:55%}.contact-dialog{padding:16px}.contact-dialog-head h2{font-size:17px}}

/* Reliable CONTACT modal: CSS anchor activation also works without JavaScript. */
.contact-modal{display:none!important}
.contact-modal:target{display:flex!important}
.open-contact-form{display:block;text-decoration:none;touch-action:manipulation}
.contact-modal-close{display:inline-block;text-decoration:none;line-height:1.4}

#contact-copy-fallback{width:100%;box-sizing:border-box;min-height:115px;background:#fff;color:#1b2630;border:1px solid #aab7c2;border-radius:4px;padding:10px;font-size:13px;line-height:1.5}

/* Inquiry form: privacy notice and spam honeypot. */
#contact-edit-form .contact-consent{display:flex;align-items:flex-start;gap:10px;font-weight:400;line-height:1.6}
#contact-edit-form .contact-consent input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:#174dff}
#contact-edit-form .contact-consent span{font-size:13px;color:#233445}
#contact-edit-form .contact-consent a{color:#165bce;text-decoration:underline}
#contact-edit-form .contact-honey{position:absolute;left:-200vw;top:auto;width:1px;height:1px;overflow:hidden}
#contact-edit-form button[disabled]{opacity:.6;cursor:wait}

/* COMPANY / global navigation extension: non-destructive image overlays */
.visual>.company-global-nav{position:absolute;z-index:8;top:0;left:12%;height:7.2%;width:69%;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0 1.4%;background:#081117;line-height:1.2}
.company-global-nav a{color:#f1f3f5;text-decoration:none;font-size:clamp(8px,1.05vw,13px);font-weight:600;letter-spacing:.08em;padding:10px 4px;border-bottom:2px solid transparent;white-space:nowrap}
.company-global-nav a:hover,.company-global-nav a[aria-current=page]{color:#5081ff;border-bottom-color:#1451ff}
.company-container{max-width:1120px;margin:0 auto;background:#10191f;min-height:76vh}
.company-hero{height:96px;display:flex;align-items:center;gap:48px;padding:0 4%;background:#081117}
.company-logo{font-weight:900;font-size:40px;letter-spacing:-.08em;color:#1745e9;text-decoration:none}
.company-static{display:flex;align-items:center;gap:clamp(8px,2vw,26px);flex-wrap:wrap}
.company-info{max-width:850px;margin:auto;padding:65px 48px 96px}
.company-kicker{color:#7595b1;letter-spacing:.2em;font-size:12px}
.company-info h1{font-size:clamp(40px,6vw,74px);letter-spacing:.09em;margin:5px 0 10px}
.company-intro{color:#9facb4;font-size:14px;margin-bottom:38px}
.company-details{border-top:1px solid #3d4c55}
.company-details>div{display:grid;grid-template-columns:155px 1fr;gap:28px;border-bottom:1px solid #3d4c55;padding:21px 7px}
.company-details dt{color:#aab6bf;font-size:14px}.company-details dd{margin:0;font-size:15px;line-height:1.9;overflow-wrap:anywhere}
.company-details dd a{color:#d4e3ff}
@media(max-width:720px){.visual>.company-global-nav{left:12%;width:87%;padding:0 1%;gap:1px}.company-global-nav a{font-size:clamp(6px,1.8vw,11px);padding:7px 1px;letter-spacing:0}.company-hero{height:auto;padding:18px 20px;display:block}.company-logo{display:block;margin-bottom:12px}.company-static{gap:15px}.company-info{padding:42px 20px 65px}.company-details>div{grid-template-columns:95px 1fr;gap:13px}.company-details dd{font-size:14px}}

/* COMPANY test: menu alignment correction only for HOME, ABOUT, BRAND, CONTACT.
   SERVICE and COMPANY remain unchanged. */
@media (min-width:721px) {
 body.nav-fix .visual>.company-global-nav {
  position:absolute;left:0;top:0;width:100%;height:8.9%;
  z-index:20;display:grid;grid-template-columns:12% repeat(5,minmax(0,1fr));
  align-items:center;gap:0;padding:0 2%;background:#081117;
 }
 body.nav-fix .visual>.company-global-nav>a {text-align:center;font-size:clamp(10px,1.1vw,14px);padding:11px 2px;}
 body.nav-fix .visual>.company-global-nav>a.nav-logo {text-align:left;font-size:clamp(24px,3.2vw,42px);line-height:1;letter-spacing:-.08em;color:#1745e9;font-weight:900;border:0;padding:0;}
}
@media (max-width:720px) {
 body.nav-fix .visual>.company-global-nav {
  position:absolute;top:0;left:0;width:100%;height:9%;z-index:20;
  display:grid;grid-template-columns:13% repeat(5,minmax(0,1fr));
  align-items:center;gap:0;padding:0 1%;background:#081117;
 }
 body.nav-fix .visual>.company-global-nav>a {text-align:center;font-size:clamp(6px,1.7vw,11px);padding:4px 0;letter-spacing:0;}
 body.nav-fix .visual>.company-global-nav>a.nav-logo {text-align:left;color:#1745e9;letter-spacing:-.08em;font-size:clamp(16px,3.4vw,25px);font-weight:900;border:0;}
}