/* Page layout, responsive adaptations and interactions. Design primitives: design.css.
   Corporate header/footer: site-chrome.css. No runtime CSS library required. */
:root{--p1-color-ink:#16191d;--p1-color-muted:#606870;--p1-color-line:#d9dee3;--p1-color-bg:#f3f5f6;--p1-color-white:#fff;--p1-color-navy:#0b425e;--p1-color-blue:#359fd6;--p1-color-green:#256b5b;--p1-color-mint:#e7f0ed;--p1-color-teal:#50b0a2;--p1-card-padding:24px;--p1-card-radius:16px;--header-height:80px}
html{font-size:16px;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + 16px)}
body{margin:0;color:var(--p1-color-ink);background:#fff;font-family:"Noto Sans Jp","Yu Gothic",Meiryo,sans-serif}
body.menu-open{overflow:hidden}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;border:0;cursor:pointer}
.skip-link{position:fixed;top:-60px;left:16px;padding:12px 20px;background:#0b425e;color:white;z-index:10001}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid #359fd6;outline-offset:5px}
.design-main{padding-top:var(--header-height);width:100%;overflow:clip}
.design-main [class*="font-"]{font-family:Inter,"Noto Sans Jp","Yu Gothic",Meiryo,sans-serif}
.design-main [class*="w-[min-content]"]:not(.diagram-frame *){width:100%}
.design-main>section{width:100%;padding-left:max(24px,calc((100% - 1200px)/2));padding-right:max(24px,calc((100% - 1200px)/2));isolation:isolate}
.design-main>section>[aria-hidden]{z-index:-1}
.design-main>section>[data-name^="Background/"]{z-index:-1}
.design-main h1,.design-main h2{margin:0}
.design-main .preserve-lines{white-space:pre-line}
.responsive-grid{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));width:100%}
.responsive-grid>.grid-cell{width:auto;min-width:0}
[data-name="Problem cards"],[data-name="Service cards"]{--columns:3!important}
[data-name="Available functions"]{--columns:4!important}
.diagram-frame{margin:0;min-width:0;position:relative;flex-shrink:0}
.diagram-canvas{transform-origin:top left}
.action-link{display:flex;text-decoration:none;transition:background-color .2s,box-shadow .2s,transform .2s;max-width:100%}
.action-link:hover{transform:translateY(-2px);box-shadow:0 6px 18px #0b425e25}
.action-link:active{transform:translateY(0)}
.design-main.solution .hubgate-cta{width:248px;height:56px;min-height:56px;padding:0 28px;border:0;border-radius:8px;background-color:var(--p1-color-mint);box-shadow:0 4px 12px #00000029}
.design-main.solution .hubgate-cta>p{font-family:"Noto Sans Jp b","Noto Sans Jp","Yu Gothic",Meiryo,sans-serif;font-size:16px;font-weight:700;color:var(--p1-color-navy);line-height:1.5}
.design-main.solution .hubgate-cta:hover{background-color:#fff;box-shadow:0 6px 16px #0003}
.design-main [data-name="CTA panel"]{max-width:100%}
.design-main [data-name="CTA panel"]>h2,.design-main [data-name="CTA panel"]>p{max-width:100%}
.design-main.solution [data-name="P1/CTA"] h2{text-align:center}
.design-main [data-name="Section heading"]{max-width:100%}
.design-main [data-name="P2/Positioning"]>h2{width:100%;text-align:center}
.design-main [data-name="補助金の案内"]{max-width:100%}
#header,#footer{letter-spacing:.08em;line-height:1.7}
#header button,#footer button{background:none;text-align:left;color:inherit;padding:0}
#header .header-logo picture{display:block}
#header .header-logo img{width:100%;height:auto}
#header{overflow:visible}
#header .header-nav-item:focus-within .header-nav-subitems-wrapper,#header .header-nav-item.menu-expanded .header-nav-subitems-wrapper{visibility:visible;opacity:1}
#header .header-nav-subitems-wrapper{width:100%;transition:opacity .25s}
#header .drawer-icon{background:#fff}
#header .drawer-content:not(.is-active){visibility:hidden}
#header .drawer-content.is-active{visibility:visible}
#header .menu-backdrop{display:none}
#header .plus-wrapper,#footer .plus-wrapper{display:flex;width:100%;align-items:center;justify-content:space-between}
#header .drawer-content-subitems.is-expanded,#footer .drawer-content-subitems.is-expanded{display:block;animation:menu-reveal .25s ease}
#header .recruit-plus{height:60px;width:36px;flex-shrink:0}
#header .recruit-plus::before,#footer .recruit-plus::before{left:calc(50% - 7px);top:50%;width:14px;height:2px;transform:none}
#header .recruit-plus::after,#footer .recruit-plus::after{left:calc(50% - 1px);top:calc(50% - 6px);width:2px;height:14px;transform:none}
#header .recruit-plus.open::after,#footer .recruit-plus.open::after{transform:rotate(90deg)}
#footer .recruit-plus{position:relative;width:40px;height:60px;flex-shrink:0}
#footer .totop{opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
#footer .totop.is-visible{opacity:1;visibility:visible}
@keyframes menu-reveal{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1025px){.diagram-frame{width:var(--diagram-width)}}
@media(min-width:1025px){#header .header-nav-item:hover .header-nav-subitems-wrapper{visibility:visible;opacity:1}}
/* Informational cards share the same mouse and keyboard highlight. */
.hubgate .hover-card{transition:background-color .22s,border-color .22s}
.hubgate :is([data-name="P2/Usage"],[data-name="P2/Positioning"]) .hover-card{background-color:var(--p1-color-white)}
.hubgate .hover-card :is(p,h3){color:var(--p1-color-muted);transition:color .22s}
.hubgate .hover-card :is(p,h3)[class*="font-bold"]{color:var(--p1-color-ink)}
.hubgate .hover-card>p:first-child,.hubgate .hover-card>[data-name="Row"]>p{color:var(--p1-color-green)}
.hubgate .hover-card img{filter:brightness(0);opacity:.65;transition:filter .22s,opacity .22s}
.hubgate .hover-card:is(:hover,:focus-visible){background-color:var(--p1-color-navy);border-color:#b5d9e3}
.hubgate .hover-card:is(:hover,:focus-visible) :is(p,h3){color:white}
.hubgate .hover-card:is(:hover,:focus-visible) img{filter:brightness(0) invert(1);opacity:1}
.hubgate [data-name="P2/Flow"] .hover-card{background-color:var(--p1-color-bg)}
.hubgate [data-name="P2/Flow"] .hover-card:is(:hover,:focus-visible){background-color:var(--p1-color-mint);border-color:var(--p1-color-line)}
.hubgate [data-name="P2/Flow"] .hover-card:is(:hover,:focus-visible) p{color:var(--p1-color-muted)}
.hubgate [data-name="P2/Flow"] .hover-card:is(:hover,:focus-visible) p[class*="font-bold"]{color:var(--p1-color-ink)}
.hubgate [data-name="P2/Flow"] .hover-card:is(:hover,:focus-visible)>p:first-child{color:var(--p1-color-green)}
/* Clip the large photo to its own section at every viewport width. */
.hubgate>[data-name="P2/Subsidy"]{overflow:hidden}
.hubgate>[data-name="P2/Subsidy"]>[data-name^="Background/"]{inset:0;aspect-ratio:auto;transform:none;translate:none;pointer-events:none}
@media(min-width:768px){#footer .drawer-content{display:none}}
@media(max-width:1279px) and (min-width:768px){
 .design-main>section{padding-left:40px;padding-right:40px}
 .design-main>[data-name="P1/Hero"],.design-main>[data-name="P1/HubGate"],.design-main>[data-name="P1/AfterLaunch"],.design-main>[data-name="P2/Hero"]{gap:32px}
 .design-main [data-name="Hero copy"],.design-main [data-name="Hub Gate copy"],.design-main [data-name="After launch copy"]{width:calc(50% - 16px);min-width:0}
 .design-main [data-name="Hero copy"]>*{max-width:100%;min-width:0}
 .diagram-frame{width:calc(50% - 16px)}
 .design-main h1{font-size:36px}
 .design-main h2{font-size:30px}
 [data-name="Process steps"],[data-node-id="2071:660"]{--columns:3!important}
 .design-main>section :is(div,p,h1,h2,h3,a)[class*="w-["]:not(.diagram-frame *){max-width:100%;min-width:0}
 .design-main .grid-cell :is(div,p,h3,a)[class*="w-["]{max-width:100%;min-width:0}
 .design-main [data-name="P2/Positioning"]>h2{font-size:28px;line-height:1.5}
 .design-main .responsive-grid>.grid-cell:not(.diagram-frame *){height:auto;min-height:240px}
 .design-main [data-name="Case cards"]>.grid-cell{min-height:456px}
}
@media(max-width:1024px){
 #header .drawer-content{max-width:none;width:100%;height:calc(100dvh - var(--header-height));padding-bottom:40px;right:-110%;transition:right .4s,visibility .4s}
 #header .drawer-content.is-active{right:0}
 [data-node-id="2071:333"]{--columns:2!important}
}
@media(max-width:767px){
 :root{--header-height:55px}
 .design-main>section{padding:48px 20px;gap:28px}
 .design-main>[data-name="P1/Hero"],.design-main>[data-name="P1/HubGate"],.design-main>[data-name="P1/AfterLaunch"],.design-main>[data-name="P2/Hero"]{flex-direction:column;align-items:stretch}
 .design-main [data-name="Hero copy"],.design-main [data-name="Hub Gate copy"],.design-main [data-name="After launch copy"]{width:100%;overflow:visible}
 .design-main [data-name="Hero copy"]>*,.design-main [data-name="Hub Gate copy"]>*,.design-main [data-name="After launch copy"]>*{width:100%;min-width:0}
 .design-main h1{font-size:clamp(26px,6.6vw,36px);line-height:1.45}
 .design-main h2{font-size:26px;line-height:1.5;width:100%;min-width:0}
 .design-main h2 br{display:none}
 .design-main>section :is(div,p,h1,h2,h3,a)[class*="w-["]:not(.diagram-frame *){max-width:100%;min-width:0}
 .design-main .grid-cell :is(div,p,h3,a)[class*="w-["]{max-width:100%;min-width:0}
 .design-main [data-node-id="2071:560"]{width:100%;font-size:26px;line-height:1.5}
 .design-main [data-name="Hero copy"] [class*="text-[17px]"]{font-size:15px}
 .design-main [data-name="Hero copy"] [class*="text-[16px]"]{font-size:15px}
 .design-main>section .responsive-grid{--columns:1!important;gap:16px}
 .design-main .responsive-grid>.grid-cell{height:auto;min-height:0}
 .design-main [data-name="Process steps"]{--columns:1!important}
 .design-main [data-name="Process steps"]>.grid-cell{min-height:160px}
 .design-main [data-name="CTA panel"]{padding:32px 20px;width:100%}
 .design-main [data-name="CTA panel"]>h2{text-align:left}
 .design-main [data-name="CTA panel"]>p{text-align:left}
 .design-main .actions{flex-wrap:wrap;overflow:visible}
 .design-main .action-link{height:auto;min-height:48px;padding:14px 20px;align-self:flex-start}
 .design-main.solution>[data-name="P1/Hero"] .actions{justify-content:center}
 .design-main.solution>[data-name="P1/Hero"] .actions>.action-link{width:100%}
 .design-main.solution [data-name="Hub Gate copy"]>.hubgate-cta{align-self:center}
 .design-main.hubgate :is([data-name="CTA/導入・機能について問い合わせる"],[data-name="CTA/Hub Gate 来店予約について相談する"]){align-self:center;margin-inline:auto}
 .design-main .action-link p{white-space:normal;text-align:center;line-height:1.6;min-width:0;max-width:100%;flex-shrink:1}
 .design-main [data-name="補助金の案内"],.design-main [data-name="補助金の案内"]>p{width:100%;max-width:100%}
 .diagram-frame{width:100%;align-self:center}
 /* Illustrations retain their internal geometry and are scaled by ResizeObserver. */
 .diagram-frame .responsive-grid{grid-template-columns:repeat(var(--columns),minmax(0,1fr));gap:inherit}
 .diagram-frame [data-name="Current work / tools"]{--columns:3!important;gap:16px}
 .diagram-frame [data-name="Understand / design"]{--columns:2!important;gap:16px}
 .diagram-frame [data-name="Methods"]{--columns:4!important;gap:12px}
 .diagram-frame [data-name="Customer / online entry"],.diagram-frame [data-name="Function tabs"],.diagram-frame [data-node-id="2054:605"]{--columns:3!important;gap:8px}
 .diagram-frame [data-name="Available functions"]{--columns:4!important;gap:6px}
 #footer .footer-contact .button{font-size:14px}
 #footer .footer-contact .inner{padding:0 25px}
 #footer .footer-info img{max-width:100%;height:auto}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.action-link:hover{transform:none}}