:root { --ink:#0f2330; --ink-soft:#213f50; --paper:#f7f4ed; --white:#fff; --line:#d6d3cb; --gold:#c68b3c; --mist:#e9eeec; --serif:"Noto Serif JP",serif; --sans:"Zen Kaku Gothic New",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.85; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }
.shell { width:min(1160px, calc(100% - 48px)); margin:auto; }
.skip-link { position:fixed; z-index:100; top:-100px; left:12px; padding:8px 12px; background:var(--white); color:var(--ink); }
.skip-link:focus { top:12px; }
.site-header { height:76px; background:rgba(255,255,255,.96); border-bottom:1px solid rgba(15,35,48,.1); }
.header-inner { width:min(1260px, calc(100% - 48px)); height:100%; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; line-height:1.2; }
.brand-mark { display:grid; place-items:center; width:37px; height:37px; border-radius:50%; color:var(--white); background:var(--ink); font-family:var(--serif); font-weight:700; }
.brand strong { display:block; font-size:17px; letter-spacing:.04em; }
.brand small { color:#587080; font-size:11px; }
.desktop-nav { display:flex; align-items:center; gap:26px; font-size:14px; font-weight:700; }
.desktop-nav a:not(.nav-call) { color:#3d5664; }
.nav-call { padding:8px 16px; background:var(--ink); color:#fff; }
.hero { position:relative; min-height:650px; display:grid; align-items:center; overflow:hidden; color:#fff; background:var(--ink); }
.hero-image { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,22,31,.9) 0%,rgba(6,22,31,.72) 35%,rgba(6,22,31,.2) 68%,rgba(6,22,31,.08) 100%); }
.hero-content { position:relative; padding:84px 0; }
.eyebrow,.section-kicker { margin:0 0 15px; color:var(--gold); font-size:13px; letter-spacing:.17em; font-weight:900; }
.hero h1,.section h2 { margin:0; font-family:var(--serif); font-weight:600; line-height:1.4; letter-spacing:.035em; }
.hero h1 { max-width:760px; font-size:clamp(38px,5vw,66px); text-shadow:0 1px 8px rgba(0,0,0,.18); }
.hero-copy { max-width:680px; margin:25px 0 28px; font-size:16px; font-weight:500; line-height:2; }
.hero-actions { display:flex; flex-wrap:wrap; gap:9px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 17px; font-weight:700; transition:.2s; }
.button:hover { transform:translateY(-2px); }
.button-primary { background:var(--gold); color:#fff; font-size:16px; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.button-primary span { margin-right:8px; font-size:11px; letter-spacing:.08em; }
.button-light { border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.1); font-size:14px; }
.hero-hours { margin:17px 0 0; font-size:12px; color:#e4e7e5; }
.image-caption { position:absolute; margin:0; font-size:10px; letter-spacing:.1em; color:#fff; opacity:.78; }
.hero-caption { right:24px; bottom:14px; writing-mode:vertical-rl; }
.section { padding:88px 0; }
.section-tint { background:var(--mist); }
.intro { padding:74px 0; }
.intro-grid { display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1fr); gap:90px; align-items:start; }
.section h2 { font-size:clamp(28px,3.3vw,44px); }
.intro p { margin:0 0 14px; color:#38505f; font-size:15px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:43px; }
.section-heading > p { max-width:360px; margin:0; color:#526774; font-size:14px; }
.section-heading.compact { margin-bottom:35px; }
.service-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); }
.service-grid article { min-height:260px; padding:22px 20px 22px 0; border-right:1px solid #cbd3d2; }
.service-grid article:not(:first-child) { padding-left:20px; }
.service-grid article:last-child { border:0; }
.service-number { color:var(--gold); font-size:13px; font-weight:900; letter-spacing:.1em; }
.service-grid h3 { margin:43px 0 12px; font-family:var(--serif); font-size:20px; line-height:1.5; }
.service-grid p { margin:0; color:#4d6470; font-size:13px; line-height:1.9; }
.reason-list { border-top:1px solid var(--line); }
.reason-list article { display:grid; grid-template-columns:85px 1fr; padding:25px 0; border-bottom:1px solid var(--line); }
.reason-list article > span { color:var(--gold); font-weight:900; }
.reason-list h3 { margin:0 0 6px; font-size:18px; }
.reason-list p { margin:0; color:#4e616c; font-size:14px; }
.consult { background:var(--ink); color:#fff; padding:66px 0; }
.consult-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.consult .section-kicker { color:#dfac68; }
.check-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin:0; padding:0; list-style:none; }
.check-list li { position:relative; padding-left:23px; font-size:14px; line-height:1.65; }
.check-list li::before { content:""; position:absolute; left:0; top:.52em; width:8px; height:8px; border-radius:50%; background:var(--gold); }
.section-dark { background:#102e3d; color:#fff; }
.section-dark .section-kicker { color:#e7b46e; }
.cases-heading > p { color:#c1d0d3; }
.case-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.case-card { overflow:hidden; background:#fff; color:var(--ink); }
.case-image-wrap { position:relative; height:275px; overflow:hidden; }
.case-image-wrap img { height:100%; object-fit:cover; transition:transform .5s; }
.case-card:hover img { transform:scale(1.035); }
.case-image-wrap span { position:absolute; right:0; bottom:0; padding:5px 9px; background:rgba(15,35,48,.85); color:#fff; font-size:10px; letter-spacing:.1em; }
.case-card > div:last-child { padding:17px 19px 21px; }
.case-card p { margin:0 0 4px; color:#8d5d22; font-size:12px; font-weight:700; }
.case-card h3 { margin:0; font-family:var(--serif); font-size:17px; line-height:1.65; }
.area-grid { display:grid; grid-template-columns:1.3fr .7fr; gap:84px; align-items:center; }
.area-grid > div > p:last-child { max-width:600px; color:#526671; font-size:14px; }
.area-panel { padding:30px; border-top:5px solid var(--gold); background:var(--ink); color:#fff; }
.area-panel p { margin:0 0 8px; color:#d4aa68; font-size:12px; letter-spacing:.12em; }
.area-panel strong { display:block; font-family:var(--serif); font-size:28px; }
.area-panel span { display:block; margin-top:3px; color:#c8d2d5; font-size:14px; }
.area-panel a { display:flex; justify-content:space-between; margin-top:25px; padding-top:14px; border-top:1px solid rgba(255,255,255,.28); font-size:14px; font-weight:700; }
.area-panel b { color:#e2ab5e; }
.contact { padding:72px 0; background:#e8d8bd; }
.contact-box { display:grid; grid-template-columns:1fr .86fr; gap:60px; align-items:end; }
.contact .section-kicker { color:#985f1d; }
.contact p:not(.section-kicker) { color:#4a463f; font-size:14px; }
.contact-actions { padding:20px 0 4px; border-top:1px solid rgba(15,35,48,.35); }
.phone-link { display:block; font-family:var(--serif); font-size:clamp(27px,3vw,39px); font-weight:600; line-height:1.25; letter-spacing:.02em; }
.phone-link small { display:block; margin-bottom:8px; font-family:var(--sans); font-size:12px; letter-spacing:.1em; }
.contact-actions p { margin:8px 0 14px; }
.contact-actions div { display:flex; gap:18px; font-size:13px; font-weight:700; text-decoration:underline; text-underline-offset:4px; }
.company-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; }
.company-grid dl { margin:0; border-top:1px solid var(--line); }
.company-grid dl > div { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:14px; }
.company-grid dt { color:#526875; font-weight:700; }
.company-grid dd { margin:0; font-weight:500; }
.company-grid dd a { text-decoration:underline; text-underline-offset:3px; }
.site-footer { padding:22px 0 84px; background:var(--ink); color:#e4e8e7; font-size:12px; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-inner p { margin:0; }
.demo-note { color:#91a5ab; font-size:10px; }
.mobile-bar { display:none; }
@media (max-width:800px) { body { padding-bottom:62px; } .shell,.header-inner { width:min(100% - 32px, 620px); } .site-header { height:65px; } .brand-mark { width:32px; height:32px; font-size:14px; } .brand strong { font-size:14px; } .brand small { font-size:9px; } .desktop-nav { display:none; } .hero { min-height:684px; align-items:end; } .hero-image { object-position:59% center; } .hero-overlay { background:linear-gradient(0deg,rgba(5,20,29,.93) 4%,rgba(5,20,29,.6) 48%,rgba(5,20,29,.05) 82%); } .hero-content { padding:40px 0 47px; } .hero h1 { font-size:37px; line-height:1.45; } .hero-copy { margin:16px 0 21px; font-size:14px; line-height:1.8; } .desktop-only { display:none; } .hero-actions { display:grid; grid-template-columns:1fr 1fr; } .hero-actions .button-primary { grid-column:1 / -1; } .button { min-height:45px; padding:8px 12px; font-size:13px; } .hero-hours { margin-top:10px; font-size:10px; } .section { padding:59px 0; } .intro { padding:54px 0; } .intro-grid,.consult-grid,.area-grid,.contact-box,.company-grid { grid-template-columns:1fr; gap:28px; } .section h2 { font-size:29px; } .intro p { font-size:14px; } .section-heading { display:block; margin-bottom:29px; } .section-heading > p { margin-top:13px; } .service-grid { grid-template-columns:1fr 1fr; } .service-grid article { min-height:226px; padding:18px 14px 18px 0; border-bottom:1px solid #cbd3d2; } .service-grid article:nth-child(2n) { padding-right:0; border-right:0; } .service-grid article:nth-child(2n+1):not(:first-child) { padding-left:0; } .service-grid article:nth-child(2) { padding-left:14px; } .service-grid article:nth-child(3) { padding-left:0; } .service-grid article:nth-child(4) { padding-left:14px; } .service-grid h3 { margin-top:29px; font-size:17px; } .service-grid p { font-size:12px; } .reason-list article { grid-template-columns:45px 1fr; padding:19px 0; } .reason-list h3 { font-size:16px; } .reason-list p { font-size:13px; line-height:1.8; } .consult { padding:51px 0; } .check-list { grid-template-columns:1fr; gap:10px; } .case-grid { grid-template-columns:1fr; gap:16px; } .case-image-wrap { height:235px; } .area-panel { padding:24px; } .area-panel strong { font-size:24px; } .contact { padding:54px 0; } .phone-link { font-size:32px; } .company-grid dl > div { grid-template-columns:95px 1fr; gap:12px; font-size:13px; } .site-footer { padding:19px 0 77px; } .footer-inner { align-items:flex-start; flex-direction:column; gap:4px; } .mobile-bar { position:fixed; z-index:10; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); background:var(--ink); color:#fff; box-shadow:0 -3px 15px rgba(0,0,0,.22); } .mobile-bar a { min-height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-right:1px solid rgba(255,255,255,.18); } .mobile-bar a:last-child { border:0; } .mobile-bar span { color:#edbd76; font-size:11px; font-weight:900; letter-spacing:.05em; } .mobile-bar small { font-size:10px; } }
@media (max-width:370px) { .hero h1 { font-size:32px; } .brand strong { font-size:13px; } .brand small { display:none; } }