:root { --navy:#0d2637; --blue:#16749a; --aqua:#dbeef0; --sand:#f5f2ea; --ink:#19252d; --muted:#637078; --line:#d7dddb; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#fff; font-family:"Noto Sans JP",sans-serif; font-size:15px; line-height:1.8; padding-bottom:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { width:min(1100px, calc(100% - 48px)); margin:auto; }
.site-header { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1100px)/2)); background:#fff; }
.brand { font-size:22px; font-weight:800; letter-spacing:.08em; display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; background:var(--blue); color:#fff; font-family:"Noto Serif JP",serif; font-size:17px; line-height:1; }
.header-tel { color:var(--navy); font-size:18px; font-weight:800; line-height:1.25; letter-spacing:.04em; }.header-tel span { display:block; color:var(--muted); font-size:10px; font-weight:500; letter-spacing:.08em; }
.hero { min-height:620px; position:relative; display:grid; align-items:center; overflow:hidden; background:var(--navy); 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(5,25,38,.96) 0%,rgba(7,29,43,.88) 32%,rgba(7,29,43,.34) 64%,rgba(7,29,43,.04) 100%); }.hero-content { position:relative; z-index:1; padding:76px 0; }.eyebrow,.kicker { margin:0 0 12px; font-weight:700; color:var(--blue); letter-spacing:.15em; font-size:13px; }.hero .eyebrow { color:#9fd7e1; }.hero h1 { margin:0; font-size:clamp(36px,5.5vw,64px); line-height:1.35; font-family:"Noto Serif JP",serif; letter-spacing:.06em; }.hero-copy { margin:23px 0 29px; font-size:16px; line-height:1.9; }.hero-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:stretch; max-width:690px; }.button { min-height:58px; padding:10px 18px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:700; line-height:1.25; }.button-phone { min-width:238px; background:#f4ad2e; color:#152535; }.button-phone small { display:block; font-size:10px; letter-spacing:.08em; }.button-light { border:1px solid rgba(255,255,255,.7); background:rgba(5,25,38,.35); }.button-icon { font-size:20px; }.image-label { margin:0; position:absolute; z-index:1; right:18px; bottom:11px; color:rgba(255,255,255,.75); font-size:10px; letter-spacing:.12em; }
.section { padding:86px 0; }.intro { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:start; }.section-heading h2 { font-family:"Noto Serif JP",serif; font-size:clamp(27px,3.2vw,40px); line-height:1.5; letter-spacing:.05em; margin:0; }.intro-text p { margin:0 0 18px; }.muted { background:var(--sand); }.narrow { max-width:700px; }.section-note { color:var(--muted); margin:15px 0 0; font-size:13px; line-height:1.75; }.service-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:44px; border-top:1px solid #c9cfca; }.service-item { padding:22px 20px 10px 0; border-right:1px solid #c9cfca; min-height:182px; }.service-item:not(:first-child) { padding-left:20px; }.service-item:last-child { border:0; }.service-number,.reason-grid span { color:var(--blue); font-size:12px; letter-spacing:.12em; font-weight:800; }.service-item h3,.reason-grid h3 { font-size:17px; margin:12px 0 7px; }.service-item p,.reason-grid p { margin:0; color:#4d5b62; font-size:13px; line-height:1.8; }.reason-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:44px; }.reason-grid article { padding:27px 28px 28px; border-top:3px solid var(--blue); background:#f6faf9; }.reason-grid article:nth-child(2) { background:#edf5f3; }.reason-grid article:nth-child(3) { background:#e3efed; }.dark { background:var(--navy); color:#fff; }.light-heading .kicker { color:#8fcbd5; }.light-heading p:last-child { color:#bdcbd1; max-width:600px; font-size:13px; }.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:39px; }.gallery-grid figure { margin:0; background:#fff; color:var(--ink); }.gallery-grid img { aspect-ratio:4/4.7; width:100%; object-fit:cover; }.gallery-grid figcaption { padding:13px 15px 16px; display:flex; justify-content:space-between; align-items:baseline; }.gallery-grid figcaption b { font-size:14px; }.gallery-grid figcaption span { color:var(--muted); font-size:10px; letter-spacing:.08em; }.area { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }.area-copy > p:not(.kicker) { max-width:460px; margin:18px 0; }.text-link { color:var(--blue); font-weight:700; border-bottom:1px solid currentColor; padding-bottom:4px; }.text-link span { margin-left:14px; }.map-panel { min-height:260px; display:flex; flex-direction:column; justify-content:center; padding:33px; background:linear-gradient(135deg,#edf7f7,#d4e9e7); border:1px solid #bed5d4; position:relative; overflow:hidden; }.map-panel:after { content:""; position:absolute; inset:-70px -120px auto auto; width:250px; height:250px; border:34px solid rgba(22,116,154,.08); border-radius:45% 55% 50% 50%; transform:rotate(25deg); }.map-pin { color:var(--blue); font-size:35px; line-height:1; }.map-panel strong { font-family:"Noto Serif JP",serif; font-size:24px; margin-top:11px; }.map-panel small { color:var(--muted); }.map-arrow { margin-top:24px; color:var(--blue); font-size:13px; font-weight:700; }.contact-section { padding:64px 0; background:#16749a; color:#fff; }.contact-inner { display:grid; grid-template-columns:1.1fr .9fr; gap:55px; align-items:center; }.contact-section .kicker { color:#c6ebed; }.contact-section h2 { margin:0; font-family:"Noto Serif JP",serif; font-size:34px; line-height:1.48; }.contact-section p:not(.kicker) { margin:13px 0 0; font-size:13px; }.contact-actions { display:grid; gap:12px; }.contact-phone { background:#fff; color:var(--navy); padding:15px 20px; line-height:1.2; }.contact-phone small { display:block; color:var(--muted); font-size:10px; }.contact-phone b { font-size:25px; letter-spacing:.04em; }.contact-instagram { border:1px solid rgba(255,255,255,.7); padding:13px 20px; font-size:14px; display:flex; justify-content:space-between; }.footer { background:#10212d; color:#dae2e3; padding:45px 0 22px; }.footer-grid { display:flex; justify-content:space-between; }.footer-name { margin:0 0 8px; color:#fff; font-size:22px; font-weight:800; }.footer p:not(.footer-name) { margin:0 0 10px; font-size:12px; line-height:1.75; }.footer a { font-size:13px; }.footer-links { display:grid; align-content:start; gap:8px; }.demo-note { margin-top:30px; padding-top:14px; border-top:1px solid rgba(255,255,255,.18); color:#9caaae; font-size:10px; line-height:1.6; }.mobile-bar { display:none; }
@media (max-width:760px) { body { padding-bottom:61px; font-size:14px; }.wrap { width:min(100% - 32px, 650px); }.site-header { height:60px; padding:0 16px; }.brand { font-size:18px; }.brand-mark { width:26px; height:26px; font-size:14px; }.header-tel { font-size:14px; }.header-tel span { display:none; }.hero { min-height:650px; align-items:end; }.hero-image { object-position:67% center; }.hero-shade { background:linear-gradient(0deg,rgba(5,25,38,.96) 0%,rgba(5,25,38,.8) 42%,rgba(5,25,38,.11) 84%); }.hero-content { padding:40px 0 45px; }.hero h1 { font-size:34px; }.hero-copy { font-size:14px; margin:14px 0 20px; }.hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }.button { min-height:48px; padding:8px 10px; font-size:12px; }.button-phone { grid-column:span 2; min-width:0; }.button-phone small { display:inline; margin-right:11px; }.button-icon { font-size:16px; }.section { padding:57px 0; }.intro,.area,.contact-inner { grid-template-columns:1fr; gap:25px; }.section-heading h2 { font-size:27px; }.intro-text p { margin-bottom:13px; }.service-grid { grid-template-columns:1fr 1fr; margin-top:28px; }.service-item { min-height:150px; padding:17px 13px 16px 0; }.service-item:nth-child(even) { padding-left:13px; border-right:0; }.service-item:nth-child(n+3) { border-top:1px solid #c9cfca; }.service-item h3,.reason-grid h3 { font-size:15px; margin-top:7px; }.service-item p { font-size:12px; }.reason-grid { grid-template-columns:1fr; gap:1px; margin-top:28px; }.reason-grid article { padding:19px 20px; }.gallery-grid { grid-template-columns:repeat(3,1fr); gap:7px; margin-top:25px; }.gallery-grid img { aspect-ratio:3/4.5; }.gallery-grid figcaption { display:block; padding:9px 8px 10px; line-height:1.4; }.gallery-grid figcaption b { font-size:11px; display:block; }.gallery-grid figcaption span { font-size:8px; }.light-heading p:last-child { font-size:11px; }.map-panel { min-height:195px; padding:25px; }.map-panel strong { font-size:20px; }.contact-section { padding:46px 0; }.contact-section h2 { font-size:28px; }.footer { padding:34px 0 18px; }.footer-grid { gap:20px; }.footer-links { font-size:12px; }.mobile-bar { position:fixed; z-index:5; display:grid; grid-template-columns:1.15fr 1fr .8fr; bottom:0; left:0; right:0; height:61px; background:#fff; box-shadow:0 -3px 15px rgba(10,29,39,.17); }.mobile-bar a { display:grid; place-items:center; border-right:1px solid #dbe2e3; color:var(--navy); font-size:11px; font-weight:700; }.mobile-bar a:first-child { background:#f4ad2e; }.mobile-bar a:last-child { border:0; } }