:root{ --blue-deep:#0b3d63; --blue-main:#1f7bb0; --blue-mid:#4fa8d8; --blue-pale:#eaf5fb; --blue-line:#bfe0f2; --orange:#f2941f; --orange-dark:#d97a0c; --ink:#0e2b3d; --white:#ffffff; --font-head:'Zen Kaku Gothic New','Hiragino Sans',sans-serif; --font-body:'Noto Sans JP','Hiragino Sans',sans-serif; } *{box-sizing:border-box;margin:0;padding:0;} body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.7;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .wrap{max-width:1120px;margin:0 auto;padding:0 24px;} h1,h2,h3{font-family:var(--font-head);} /* Header */ header{position:sticky;top:0;background:var(--white);z-index:100;border-bottom:1px solid var(--blue-line);} .header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;} .logo{font-weight:800;font-size:18px;color:var(--blue-deep);letter-spacing:.02em;cursor:pointer;} .header-inner{position:relative;} nav ul{display:flex;gap:32px;list-style:none;font-size:14px;font-weight:600;} nav a{color:var(--ink);position:relative;padding:4px 0;} nav a:hover{color:var(--blue-main);} .nav-cta{background:var(--orange);color:#fff!important;padding:10px 20px;border-radius:6px;font-weight:700;} .nav-cta:hover{background:var(--orange-dark);} .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;background:none;border:none;cursor:pointer;padding:0;flex:none;} .hamburger span{display:block;width:100%;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s ease,opacity .25s ease;} .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.active span:nth-child(2){opacity:0;} .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media(max-width:880px){ .logo{font-size:15px;} nav ul{display:none;} .hamburger{display:flex;} nav.mobile-open ul{ display:flex; flex-direction:column; align-items:flex-start; position:absolute; top:68px;left:0;right:0; background:var(--white); padding:20px 24px; gap:18px; box-shadow:0 8px 16px rgba(11,61,99,.1); border-bottom:1px solid var(--blue-line); z-index:99; } nav.mobile-open .nav-cta{display:inline-block;} } /* Hero */ .hero{background:linear-gradient(160deg,var(--blue-mid) 0%,var(--blue-main) 55%,var(--blue-deep) 100%);color:#fff;padding:56px 0 0;overflow:hidden;position:relative;} .hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding-left:120px;} .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:20px;} .hero-title-row{display:flex;align-items:center;gap:14px;margin-bottom:10px;justify-content:center;flex-wrap:wrap;} .hero-title-img{max-width:420px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.15));} .hero p.lead{font-size:15px;font-weight:500;opacity:.95;margin:16px 0 28px;} .btn-primary{display:inline-block;background:var(--orange);color:#fff;font-weight:800;padding:16px 32px;border-radius:8px;font-size:16px;box-shadow:0 10px 24px rgba(0,0,0,.2);transition:transform .15s ease,background .15s ease;border:none;cursor:pointer;} .btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);} .hero-art{position:relative;height:340px;} .hero-nextora-img{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:400px;z-index:1;} .hero-map-img{position:absolute;right:6%;top:8%;width:190px;max-width:34%;opacity:.55;z-index:0;} .hero-truck-img{position:absolute;right:42%;top:20%;width:100px;max-width:120%;opacity:.95;z-index:2;} .hero-left{text-align:center;} @media(max-width:1199px){ .hero-inner{padding-left:40px;gap:16px;} .hero-art{height:300px;} .hero-nextora-img{width:360px;} } @media(max-width:960px){ .hero-inner{padding-left:20px;} .hero-title-img{max-width:320px;} .hero-art{height:260px;} .hero-nextora-img{width:320px;} } @media(max-width:760px){ .hero-inner{grid-template-columns:1fr;text-align:center;padding-left:0;} .hero-art{height:auto;padding:20px 0 30px;} .hero-title-img{max-width:280px;} .hero-nextora-img{position:static;transform:none;margin:16px auto 0;width:280px;display:block;} .hero-truck-img{position:static;width:70px;margin:0 10px 0 0;display:inline-block;vertical-align:middle;} .hero-map-img{position:static;width:120px;max-width:40%;margin:0;display:inline-block;vertical-align:middle;} } /* Section generic */ section{padding:72px 0;} .section-title{text-align:center;font-size:28px;font-weight:900;margin-bottom:48px;color:var(--blue-deep);} .section-title .accent{color:var(--orange);} /* Problem */ .problem{background:var(--white);} .problem-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;} .problem ul{list-style:none;display:flex;flex-direction:column;gap:18px;} .problem li{position:relative;padding-left:28px;font-size:15px;font-weight:500;color:#33475a;} .problem li::before{content:"●";color:var(--blue-main);position:absolute;left:0;font-size:10px;top:8px;} .problem-art{position:relative;background:#16499c;border:1px solid var(--blue-line);border-radius:16px;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;} .problem-art img{margin:0 auto;display:block;}.problem-board-img{max-width:320px;} .problem-person-img{max-width:220px;margin-top:12px;} /* Solution benefits */ .solution{background:var(--blue-pale);} .benefit-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;} .benefit-list{list-style:none;display:flex;flex-direction:column;gap:16px;} .benefit-list li{background:#fff;border-radius:10px;padding:16px 20px;font-weight:600;font-size:14.5px;display:flex;gap:12px;align-items:flex-start;box-shadow:0 4px 10px rgba(11,61,99,.05);} .benefit-list li::before{content:"✓";color:#fff;background:var(--blue-main);width:22px;height:22px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;} .benefit-icons{display:flex;flex-direction:column;gap:24px;justify-content:center;} .benefit-icon-card{background:#fff;border-radius:14px;padding:28px 20px;text-align:center;box-shadow:0 6px 16px rgba(11,61,99,.08);} .benefit-icon-card img{width:52px;height:52px;margin:0 auto 12px;} .benefit-icon-card .label{font-weight:800;font-size:14px;color:var(--blue-deep);} /* Case */ .case{background:var(--blue-deep);color:#fff;} .case .section-title{color:#fff;} .case-inner{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;} .case-bubbles{position:relative;width:640px;max-width:100%;} .case-bubble-img{width:100%;margin-bottom:14px;margin-left:auto;margin-right:auto;display:block;} .case-figure-wrap{width:220px;height:220px;border-radius:50%;background:#16499c;display:flex;align-items:flex-end;justify-content:center;padding:0 20px;overflow:hidden;flex:none;} .case-figure{width:190px;} @media(max-width:760px){.case-inner{flex-direction:column;text-align:center;}.case-figure-wrap{margin:0 auto;}} /* Flow */ .flow{background:#fff;} .flow-stats{display:flex;justify-content:center;gap:56px;margin-bottom:40px;} .flow-stat{text-align:center;} .flow-stat img{width:60px;height:60px;margin:0 auto 8px;} .flow-stat .label{font-size:12.5px;font-weight:700;color:#33475a;} .flow-diagram-wrap{max-width:900px;margin:0 auto;position:relative;} .flow-diagram-photo{position:absolute;left:41.9%;top:34%;width:17%;height:58%;border-radius:6px;object-fit:cover;box-shadow:0 4px 10px rgba(11,61,99,.25);} .flow-photo-wrap{margin-top:48px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,61,99,.15);max-width:760px;margin-left:auto;margin-right:auto;} /* Table */ .cost{background:var(--blue-pale);} .cost-icons{display:flex;justify-content:center;gap:56px;margin-bottom:36px;} .cost-icon{text-align:center;} .cost-icon img{width:100px;height:100px;margin:0 auto 8px;background:var(--blue-main);border-radius:50%;padding:12px;} .cost-icon .label{font-size:12.5px;font-weight:800;color:var(--blue-deep);} .cost-unit-bar{max-width:1072px;margin:0 auto;background:#fff;border:1px solid var(--blue-line);border-bottom:none;border-radius:14px 14px 0 0;padding:10px 24px;text-align:right;font-weight:400;font-size:14px;color:var(--blue-deep);} .table-wrap{overflow-x:auto;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 6px 18px rgba(11,61,99,.08);} table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:600px;} th,td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--blue-line);white-space:nowrap;} thead th{background:var(--blue-deep);color:#fff;font-weight:700;} .diagonal-th{position:relative;padding:0;min-width:130px;width:130px;height:76px;overflow:hidden;background:var(--blue-deep);} .diagonal-th hr{position:absolute;left:0;top:0;width:150.6px;border:0;border-top:3px solid rgba(255,255,255,.6);transform-origin:left top;transform:rotate(30.31deg);margin:0;padding:0;} .diagonal-th .d-label{position:absolute;font-size:10.5px;font-weight:700;line-height:1.3;color:#fff;max-width:66px;white-space:nowrap;} .diagonal-th .d-top-left{left:8px;bottom:6px;text-align:left;} .diagonal-th .d-bottom-right{right:8px;top:6px;text-align:right;} tbody tr:nth-child(even){background:#f5fafd;} .highlight-row td{background:#fff6e8!important;font-weight:900;color:var(--orange-dark);} .table-note{font-size:12px;color:#6b8299;text-align:right;margin-top:8px;} .cost-punch{text-align:center;font-size:22px;font-weight:900;color:var(--blue-deep);margin-top:36px;} .cost-punch span{color:var(--orange);} /* Product */ .product{background:#fff;} .product-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:36px;} .p-card{background:var(--blue-pale);border-radius:12px;padding:16px 10px;text-align:center;} .p-card .icon{height:90px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;} .p-card .icon img{max-height:90px;} .p-card .name{font-size:12.5px;font-weight:800;color:var(--blue-deep);} @media(max-width:760px){.product-cards{grid-template-columns:repeat(2,1fr);}} /* FAQ */ .faq{background:var(--blue-pale);} .faq-header-img{display:block;margin:0 auto 40px;max-width:160px;} .faq-list{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:12px;} .faq-item{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 10px rgba(11,61,99,.06);} .faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 24px;font-weight:800;font-size:15px;color:var(--blue-deep);display:flex;justify-content:space-between;align-items:center;cursor:pointer;gap:16px;} .faq-q .qmark{color:var(--blue-main);} .faq-q .plus{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue-pale);color:var(--blue-main);display:flex;align-items:center;justify-content:center;font-weight:900;transition:transform .2s ease;} .faq-item.open .plus{transform:rotate(45deg);background:var(--orange);color:#fff;} .faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;font-size:14px;color:#33475a;background:#fbfdfe;} .faq-a p{padding:0 24px 20px 24px;} .faq-item.open .faq-a{max-height:200px;} /* CTA */ .cta-section{background:linear-gradient(160deg,var(--blue-mid) 0%,var(--blue-deep) 100%);color:#fff;padding:56px 0 40px;position:relative;overflow:hidden;} .cta-grid{position:relative;z-index:1;} .cta-nav{list-style:none;display:flex;flex-direction:column;gap:18px;padding-top:8px;position:absolute;left:0;top:0;} .cta-nav a{font-size:14px;font-weight:600;color:#fff;} .cta-nav a:hover{opacity:.8;} .cta-main{text-align:center;max-width:600px;margin:0 auto;} .cta-main h2{font-size:26px;font-weight:900;margin-bottom:28px;} .tel-block{margin-top:36px;font-size:13.5px;opacity:.9;} .tel-block strong{display:block;font-size:16px;margin-bottom:4px;} .cta-stairs-img{position:absolute;right:20px;top:10px;width:120px;z-index:0;} .cta-floor-img{position:absolute;left:20px;bottom:6px;width:300px;z-index:0;} @media(max-width:960px){ .cta-grid{padding-top:64px;text-align:left;} .cta-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:16px;padding-top:0;margin-bottom:24px;} .cta-stairs-img{position:static;width:120px;display:inline-block;margin:0 12px 16px;} .cta-floor-img{position:static;width:280px;max-width:92%;display:inline-block;margin:24px 12px 0;} } @media(max-width:760px){ .cta-stairs-img{width:130px;} .cta-floor-img{width:310px;max-width:96%;} } /* Footer */ footer{background:#fff;color:var(--blue-deep);padding:32px 0 24px;font-size:13px;} .footer-inner{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;position:relative;} .footer-logo-img{width:110px;cursor:pointer;} .footer-back-btn{border:1px solid var(--blue-deep);color:var(--blue-deep);font-weight:700;font-size:13px;padding:8px 18px;border-radius:4px;background:#fff;} .footer-back-btn:hover{background:var(--blue-pale);} .footer-copy{text-align:center;margin-top:20px;font-size:11.5px;color:#8fa5b6;} .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;} .reveal.show{opacity:1;transform:translateY(0);} @media(max-width:760px){ .problem-grid,.benefit-cols,.case-inner{grid-template-columns:1fr;} .section-title{font-size:22px;} }