:root { --ink:#183b36; --deep:#102a27; --sand:#e9e2d3; --cream:#f7f5ef; --line:#d5d9d1; --accent:#d3a759; --font:'Noto Sans JP', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:400 15px/1.8 var(--font); } a { color:inherit; } img { display:block; max-width:100%; } .container { width:min(1120px, calc(100% - 48px)); margin:auto; } .skip-link { position:fixed; left:12px; top:-100px; background:#fff; z-index:99; padding:8px; } .skip-link:focus { top:12px; }
.site-header { height:76px; padding:0 max(24px, calc((100vw - 1120px)/2)); background:#fffdf9; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e7e4dc; } .brand { display:flex; gap:10px; align-items:center; text-decoration:none; line-height:1.2; } .brand-mark { background:var(--ink); color:#fff; width:34px; height:34px; display:grid; place-items:center; font:700 13px Georgia,serif; letter-spacing:-1px; } .brand strong { display:block; font-size:15px; letter-spacing:.06em; } .brand small { display:block; margin-top:3px; color:#65746c; font-size:10px; } .header-call { text-decoration:none; font-size:12px; color:#4e5c55; } .header-call b { display:block; color:var(--ink); font-size:16px; letter-spacing:.04em; }
.hero { min-height:640px; position:relative; display:grid; align-items:center; overflow:hidden; color:#fff; } .hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; } .hero-image { object-fit:cover; object-position:center; } .hero-shade { background:linear-gradient(90deg, rgba(10,29,25,.83) 0%,rgba(10,29,25,.57) 38%,rgba(10,29,25,.06) 70%); } .hero-content { position:relative; padding:76px 0 92px; } .eyebrow { margin:0 0 11px; font-size:12px; font-weight:700; letter-spacing:.15em; color:#60816f; } .eyebrow.light { color:#d9e9d6; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-weight:600; letter-spacing:.04em; line-height:1.38; } h1 { margin-bottom:19px; font-size:clamp(32px,4.4vw,54px); text-shadow:0 1px 14px rgba(0,0,0,.17); } .hero-copy { margin-bottom:7px; font-size:16px; font-weight:500; line-height:2; } .image-note { font-size:10px; letter-spacing:.08em; } .hero-note { color:#e8eee8; } .hero-actions { display:flex; gap:9px; margin-top:25px; flex-wrap:wrap; } .button { min-height:53px; display:inline-flex; align-items:center; justify-content:center; flex-direction:column; padding:8px 18px; text-decoration:none; font-size:12px; line-height:1.3; transition:.2s; } .button:hover { transform:translateY(-2px); } .button strong { font-size:17px; letter-spacing:.04em; } .button-primary { min-width:190px; background:var(--accent); color:#1d2c25; } .button-secondary { border:1px solid rgba(255,255,255,.72); color:#fff; background:rgba(8,31,25,.18); }
.strip { padding:35px 0; background:#e1e9df; } .split-intro { display:grid; grid-template-columns:1fr 2fr; gap:55px; align-items:start; } .split-intro p:last-child { margin:0; font-size:16px; line-height:2; } .section { padding:78px 0; } .section-heading { margin-bottom:35px; } .section-heading h2,.reason-lead h2,.consultation-layout h2,.contact-card h2,.company-layout h2 { margin-bottom:0; font-size:clamp(26px,3.3vw,39px); } .service-section { background:#fffdf9; } .service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); } .service-grid article { padding:24px 20px 14px 0; border-right:1px solid var(--line); min-height:233px; } .service-grid article+article { padding-left:20px; } .service-grid article:last-child { border-right:0; } .service-grid span { color:#a98c5c; font:24px 'DM Serif Display', serif; } h3 { margin:17px 0 10px; font-size:17px; line-height:1.5; } .service-grid p { font-size:13px; line-height:1.8; color:#53635b; }
.reason-section { background:var(--ink); color:#fff; } .reason-layout { display:grid; grid-template-columns:1.1fr 1fr; gap:76px; } .reason-lead .eyebrow { color:#b3ceba; } .reason-list { border-top:1px solid rgba(255,255,255,.35); } .reason-list article { display:grid; grid-template-columns:48px 1fr; padding:19px 0; border-bottom:1px solid rgba(255,255,255,.28); } .reason-list b { color:#d3a759; font:20px 'DM Serif Display', serif; } .reason-list h3 { margin:0 0 6px; } .reason-list p { margin:0; color:#dbe4dc; font-size:13px; }
.consultation-section { background:var(--sand); } .consultation-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:70px; } .consultation-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; margin:0; list-style:none; } .consultation-list li { padding:13px 13px 13px 33px; background:#f9f6ee; position:relative; font-size:13px; line-height:1.65; } .consultation-list li::before { content:'+'; position:absolute; left:13px; top:12px; color:#a77d37; font-weight:700; }
.works-section { background:#fffdf9; } .inline-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; } .inline-heading>p { max-width:390px; margin:0; color:#54645b; font-size:13px; } .works-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .work-card { margin:0; background:#eff0e9; overflow:hidden; } .work-card img { width:100%; height:256px; object-fit:cover; } .work-card figcaption { padding:15px 16px 18px; } .work-card span { color:#7c8f81; font-size:10px; letter-spacing:.1em; } .work-card h3 { margin:7px 0 5px; font-size:16px; } .work-card p { margin:0; color:#62736a; font-size:12px; }
.area-section { padding:60px 0; background:linear-gradient(120deg,#0e2a27,#28564b); color:#fff; } .area-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:80px; align-items:end; } .area-layout h2 { margin:0; font-size:clamp(26px,3vw,38px); } .area-layout>p { margin:0; color:#e1ebe5; font-size:14px; line-height:1.9; }
.contact-section { padding-bottom:0; } .contact-card { padding:48px 55px; background:#e1e9df; display:grid; grid-template-columns:1.35fr 1fr; gap:60px; align-items:center; } .contact-card>div>p:last-child { margin:13px 0 0; font-size:13px; color:#53635b; } .contact-actions { display:grid; gap:12px; } .button-dark { background:var(--ink); color:#fff; align-items:flex-start; padding:14px 19px; } .button-dark small { margin-top:5px; color:#c6d4ca; font-size:10px; } .outline-link { padding:13px 2px; border-bottom:1px solid #83998a; text-decoration:none; font-size:13px; font-weight:700; } .outline-link span { float:right; font-size:18px; }
.company-section { padding:78px 0 110px; background:#fffdf9; } .company-layout { display:grid; grid-template-columns:1fr 1.1fr; gap:80px; } .company-layout h2 span { font-size:15px; font-weight:500; letter-spacing:.1em; } dl { margin:0; } dl>div { display:grid; grid-template-columns:105px 1fr; padding:14px 0; border-top:1px solid var(--line); } dl>div:last-child { border-bottom:1px solid var(--line); } dt { font-weight:700; font-size:13px; } dd { margin:0; font-size:13px; } dd a { text-underline-offset:4px; }
footer { background:#102a27; color:#eaf0ea; padding:28px 0 82px; } .footer-inner { display:flex; align-items:end; justify-content:space-between; gap:35px; } .footer-inner p { margin:0; font-size:11px; line-height:1.8; } .footer-inner strong { font-size:13px; letter-spacing:.08em; } .demo-note { max-width:420px; color:#bbc8bf; } .mobile-contact { display:none; }
@media (max-width:780px) { body { padding-bottom:55px; } .container { width:min(100% - 32px, 600px); } .site-header { height:64px; padding:0 16px; } .brand small,.header-call { display:none; } .brand strong { font-size:13px; } .hero { min-height:calc(100svh - 64px); align-items:end; } .hero-image { object-position:61% center; } .hero-shade { background:linear-gradient(0deg,rgba(7,25,21,.91),rgba(7,25,21,.13) 88%); } .hero-content { padding:42px 0 38px; } h1 { font-size:33px; line-height:1.42; } .hero-copy { font-size:13px; line-height:1.8; } .desktop-only { display:none; } .hero-actions { display:grid; grid-template-columns:1fr 1fr; } .hero-actions .button:first-child { grid-column:1/-1; } .button { min-height:50px; padding:8px 10px; } .button-secondary { font-size:11px; } .split-intro,.reason-layout,.consultation-layout,.area-layout,.contact-card,.company-layout { grid-template-columns:1fr; gap:25px; } .strip { padding:29px 0; } .split-intro p:last-child { font-size:14px; } .section { padding:56px 0; } .service-grid { grid-template-columns:1fr 1fr; } .service-grid article { min-height:210px; padding:19px 12px 7px 0; } .service-grid article:nth-child(2n) { border-right:0; padding-right:0; } .service-grid article:nth-child(2n+1) { padding-left:0; } .service-grid article:nth-child(n+3) { border-top:1px solid var(--line); padding-top:19px; } .service-grid article+article { padding-left:12px; } .reason-layout { gap:30px; } .consultation-list { grid-template-columns:1fr; } .inline-heading { display:block; } .inline-heading>p { margin-top:15px; } .works-grid { grid-template-columns:1fr; gap:14px; } .work-card img { height:235px; } .area-section { padding:48px 0; } .contact-card { padding:33px 22px; } .company-section { padding:58px 0; } .company-layout { gap:29px; } dl>div { grid-template-columns:85px 1fr; } .footer-inner { display:block; } .demo-note { margin-top:17px!important; } .mobile-contact { display:grid; grid-template-columns:1.25fr 1fr 1fr; position:fixed; z-index:20; bottom:0; left:0; right:0; height:55px; background:#102a27; } .mobile-contact a { color:#fff; display:grid; place-items:center; text-decoration:none; font-size:12px; border-right:1px solid rgba(255,255,255,.18); } .mobile-contact a:first-child { background:#c89543; color:#1a2a23; font-weight:700; } }