:root { --ink:#102b35; --ink-2:#173d49; --paper:#f5f1e9; --paper-deep:#e9e1d4; --line:#cfc5b5; --accent:#bd5a31; --white:#fffdf9; --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); line-height:1.75; padding-bottom:0; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.container { width:min(1120px, calc(100% - 48px)); margin:0 auto; }
.skip-link { position:fixed; left:12px; top:-64px; z-index:20; padding:8px 14px; background:var(--white); border:1px solid var(--ink); }
.skip-link:focus { top:12px; }
.site-header { height:82px; background:rgba(255,253,249,.96); border-bottom:1px solid rgba(16,43,53,.12); position:sticky; top:0; z-index:10; backdrop-filter:blur(8px); }
.header-inner { height:100%; display:flex; justify-content:space-between; align-items:center; gap:22px; }
.brand { display:grid; line-height:1.25; }
.brand-kicker, .eyebrow { font-size:12px; letter-spacing:.14em; font-weight:700; }
.brand-kicker { color:var(--accent); margin-bottom:5px; }
.brand-name { font-family:var(--serif); font-size:20px; font-weight:700; }
.desktop-nav { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }
.desktop-nav a:not(.nav-tel) { border-bottom:1px solid transparent; }
.desktop-nav a:not(.nav-tel):hover { border-color:var(--ink); }
.nav-tel { color:var(--white); background:var(--ink); padding:10px 18px; }
.hero { min-height:690px; position:relative; color:var(--white); overflow:hidden; display:flex; align-items:center; }
.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,27,35,.88) 0%, rgba(10,27,35,.66) 35%, rgba(10,27,35,.08) 70%); }
.hero-content { position:relative; z-index:1; padding:96px 0 102px; }
.eyebrow { margin:0 0 13px; color:var(--paper-deep); }
.eyebrow.dark { color:var(--accent); }
.eyebrow.light { color:#e8c4a8; }
h1, h2, h3, p { margin-top:0; }
h1, h2, h3 { font-family:var(--serif); line-height:1.38; }
h1 { font-size:clamp(42px, 5.4vw, 70px); letter-spacing:.04em; margin:0 0 21px; }
.hero-lead { font-size:18px; font-weight:500; line-height:1.9; margin-bottom:31px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; max-width:650px; }
.action { border:1px solid rgba(255,255,255,.75); padding:12px 17px; font-size:14px; font-weight:700; background:rgba(10,27,35,.25); transition:.2s ease; }
.action:hover { background:var(--white); color:var(--ink); }
.action-primary { display:flex; flex-direction:column; border-color:var(--accent); background:var(--accent); min-width:205px; line-height:1.3; }
.action-label { font-size:11px; opacity:.86; margin-bottom:3px; }
.action-primary strong { font-size:21px; letter-spacing:.04em; }
.image-note { position:absolute; right:10px; bottom:10px; color:#fff; font-size:10px; letter-spacing:.1em; background:rgba(0,0,0,.55); padding:2px 7px; }
.hero-note { right:24px; bottom:22px; }
.intro-section { padding:78px 0; background:var(--white); border-bottom:1px solid var(--line); }
.intro-grid { display:grid; grid-template-columns:72px 1.2fr 1fr; gap:28px; align-items:start; }
.section-number { font-family:var(--serif); font-size:23px; color:var(--accent); border-top:1px solid var(--accent); padding-top:7px; }
h2 { font-size:clamp(28px,3.4vw,44px); letter-spacing:.035em; margin-bottom:0; }
.intro-copy { margin:11px 0 0; font-size:15px; color:#485963; }
.section { padding:94px 0; }
.services-section { background:var(--paper); }
.section-heading { display:flex; gap:40px; justify-content:space-between; align-items:end; margin-bottom:42px; }
.split-heading > p { max-width:390px; font-size:15px; color:#485963; margin-bottom:5px; }
.service-list { border-top:1px solid var(--ink); }
.service-item { display:grid; grid-template-columns:82px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
.service-item > span { font-family:var(--serif); color:var(--accent); font-size:18px; }
.service-item h3 { font-size:22px; margin:0 0 4px; }
.service-item p { margin:0; font-size:14px; color:#56666e; }
.reasons-section { color:var(--white); background:var(--ink); position:relative; overflow:hidden; }
.reasons-section::after { content:"瓦"; position:absolute; color:rgba(255,255,255,.035); font:600 340px var(--serif); right:-10px; bottom:-155px; line-height:1; }
.reasons-layout { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.reasons-copy p:not(.eyebrow) { max-width:460px; color:#dce2e2; font-size:15px; margin:23px 0 0; }
.reason-list { margin:0; padding:0; list-style:none; border-top:1px solid rgba(255,255,255,.42); }
.reason-list li { padding:25px 0 21px; border-bottom:1px solid rgba(255,255,255,.25); display:grid; gap:4px; }
.reason-list strong { font-family:var(--serif); font-size:22px; }
.reason-list span { color:#dce2e2; font-size:14px; }
.works-section { background:var(--white); }
.works-heading { align-items:end; }
.text-link, .outline-link { font-size:14px; font-weight:700; border-bottom:1px solid currentColor; padding-bottom:3px; }
.work-grid { display:grid; grid-template-columns:1.32fr 1fr 1fr; gap:18px; align-items:start; }
.work-card { background:var(--paper); }
.work-card-large { margin-top:54px; }
.work-image-wrap { position:relative; overflow:hidden; background:#bac2c0; aspect-ratio:4/3; }
.work-image-wrap img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.work-card:hover img { transform:scale(1.04); }
.work-body { padding:15px 17px 18px; }
.work-body p { color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.12em; margin:0 0 4px; }
.work-body h3 { font-size:20px; margin:0 0 7px; }
.work-body span { color:#68767b; font-size:12px; }
.consult-section { background:var(--paper-deep); padding:73px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.consult-grid { display:grid; grid-template-columns:1fr 1fr; gap:65px; align-items:center; }
.consult-grid ul { list-style:none; padding:0; margin:0; }
.consult-grid li { border-top:1px solid #af9f8b; padding:12px 0; font-size:16px; font-weight:700; }
.consult-grid li:last-child { border-bottom:1px solid #af9f8b; }
.consult-grid li::before { content:"✓"; color:var(--accent); margin-right:10px; }
.area-section { background:var(--white); }
.area-layout { display:grid; grid-template-columns:1fr 1fr; gap:75px; }
.area-copy { border-left:4px solid var(--accent); padding:2px 0 2px 25px; }
.area-copy p { color:#485963; font-size:15px; margin-bottom:21px; }
.outline-link { display:inline-block; padding:10px 0; }
.contact-section { background:var(--accent); color:var(--white); padding:75px 0; }
.contact-layout { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.contact-box { border:1px solid rgba(255,255,255,.68); }
.contact-phone { padding:24px 27px 20px; display:block; border-bottom:1px solid rgba(255,255,255,.55); }
.contact-phone small { display:block; font-size:12px; margin-bottom:3px; }
.contact-phone strong { font-size:31px; letter-spacing:.04em; }
.contact-sub-links { display:grid; grid-template-columns:1fr 1fr; }
.contact-sub-links a { padding:15px 18px; font-size:13px; font-weight:700; }
.contact-sub-links a + a { border-left:1px solid rgba(255,255,255,.55); }
.contact-sub-links span { float:right; }
.site-footer { background:#0b2028; color:#e8ecec; padding:45px 0 25px; }
.footer-grid { display:flex; justify-content:space-between; gap:40px; padding-bottom:28px; }
.footer-name { font-family:var(--serif); font-size:22px; margin-bottom:7px; }
.footer-grid p:not(.footer-name) { font-size:13px; line-height:1.8; margin-bottom:0; color:#c5d0d2; }
.footer-grid > div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:5px; font-size:13px; }
.footer-note { border-top:1px solid rgba(255,255,255,.2); padding-top:19px; color:#99a9ad; font-size:10px; line-height:1.7; }
.mobile-contact { display:none; }
@media (max-width: 760px) {
  body { padding-bottom:60px; }
  .container { width:min(100% - 32px, 620px); }
  .site-header { height:68px; }
  .brand-name { font-size:17px; }
  .brand-kicker { font-size:10px; margin-bottom:3px; }
  .desktop-nav { display:none; }
  .hero { min-height:calc(100svh - 68px); align-items:flex-end; }
  .hero-image { object-position:66% center; }
  .hero-shade { background:linear-gradient(180deg, rgba(10,27,35,.08) 0%, rgba(10,27,35,.6) 42%, rgba(10,27,35,.9) 100%); }
  .hero-content { padding:76px 0 44px; }
  h1 { font-size:38px; line-height:1.42; margin-bottom:13px; }
  .hero-lead { font-size:14px; line-height:1.8; margin-bottom:20px; }
  .desktop-only { display:none; }
  .hero-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .action { padding:10px; text-align:center; font-size:12px; }
  .action-primary { grid-column:1 / -1; min-width:0; text-align:left; padding:11px 14px; }
  .action-primary strong { font-size:20px; }
  .hero-note { right:10px; bottom:12px; }
  .intro-section { padding:53px 0; }
  .intro-grid { grid-template-columns:48px 1fr; gap:15px; }
  .section-number { grid-row:span 2; font-size:18px; }
  .intro-copy { grid-column:2; margin-top:0; font-size:14px; }
  h2 { font-size:29px; }
  .section { padding:62px 0; }
  .section-heading, .split-heading, .works-heading { display:block; margin-bottom:29px; }
  .split-heading > p { font-size:14px; margin-top:17px; }
  .service-item { grid-template-columns:46px 1fr; gap:8px; padding:17px 0; }
  .service-item h3 { font-size:19px; }
  .service-item p { font-size:13px; }
  .reasons-layout, .consult-grid, .area-layout, .contact-layout { grid-template-columns:1fr; gap:34px; }
  .reasons-section::after { font-size:230px; bottom:-100px; }
  .reasons-copy p:not(.eyebrow) { font-size:14px; margin-top:17px; }
  .reason-list strong { font-size:19px; }
  .work-grid { grid-template-columns:1fr; gap:18px; }
  .work-card-large { margin-top:0; }
  .work-card { display:grid; grid-template-columns:43% 1fr; }
  .work-image-wrap { aspect-ratio:auto; height:100%; min-height:142px; }
  .work-card-large { display:block; }
  .work-card-large .work-image-wrap { aspect-ratio:4/3; min-height:0; }
  .work-body { padding:13px 14px; }
  .work-body h3 { font-size:18px; }
  .consult-section { padding:55px 0; }
  .consult-grid li { font-size:14px; }
  .area-copy { padding-left:17px; }
  .area-copy p { font-size:14px; }
  .contact-section { padding:55px 0; }
  .contact-box { margin-top:-12px; }
  .contact-phone { padding:20px; }
  .contact-phone strong { font-size:26px; }
  .contact-sub-links a { padding:13px; font-size:12px; }
  .footer-grid { display:grid; gap:22px; }
  .footer-grid > div:last-child { align-items:flex-start; }
  .mobile-contact { position:fixed; z-index:12; bottom:0; left:0; right:0; height:60px; display:grid; grid-template-columns:1.45fr 1fr 1fr; background:#0b2028; color:#fff; box-shadow:0 -4px 14px rgba(0,0,0,.2); }
  .mobile-contact a { display:flex; align-items:center; justify-content:center; flex-direction:column; font-size:11px; font-weight:700; border-left:1px solid rgba(255,255,255,.2); line-height:1.25; }
  .mobile-contact a:first-child { background:var(--accent); border-left:0; }
  .mobile-contact span { font-size:9px; opacity:.85; }
  .mobile-contact strong { font-size:13px; letter-spacing:.02em; }
}