:root { --ink:#22262b; --navy:#1f3a5f; --navy-deep:#142842; --grey:#eef0f3; --paper:#ffffff; --line:#dfe3e8; --muted:#6b7280; --serif:"Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; --sans:"Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; --eng:"Cormorant Garamond", Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; overflow-x:hidden; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:15px; line-height:2; letter-spacing:.04em; overflow-x:hidden; max-width:100%; }
img, video, iframe { max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
h1, h2, h3 { margin:0; }
p { margin:0; }

.demo-bar { display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 16px; background:var(--ink); color:#fff; font-size:12px; letter-spacing:.06em; line-height:1.6; text-align:center; }
.demo-bar span { flex:none; padding:2px 8px; background:rgba(255,255,255,.18); font-size:10px; font-weight:700; letter-spacing:.14em; }

/* ヘッダー */
.site-header { height:84px; width:100%; padding:0 clamp(20px,4vw,48px); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10; background:rgba(255,255,255,.97); border-bottom:1px solid var(--line); }
.brand { display:inline-flex; flex-direction:column; line-height:1.2; letter-spacing:.08em; }
.brand span { font-size:10px; color:var(--navy); }
.brand strong { font-family:var(--serif); font-size:22px; font-weight:700; color:var(--navy); }
.main-nav { display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); font-size:13.5px; font-weight:500; white-space:nowrap; }
.main-nav a:hover { color:var(--navy); }
.nav-tel { display:flex; flex-direction:column; align-items:center; line-height:1.2; padding:8px 18px; border:0; background:var(--navy); color:#fff; font-size:17px; font-weight:700; letter-spacing:.04em; cursor:pointer; }
.nav-tel small { font-size:10px; font-weight:500; letter-spacing:.08em; }
.menu-button { display:none; }

/* ボタン */
.button { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-width:250px; padding:14px 30px; border:0; font-size:15px; font-weight:700; letter-spacing:.06em; line-height:1.5; cursor:pointer; transition:opacity .2s; }
.button:hover { opacity:.85; }
.button small { font-size:11px; font-weight:500; letter-spacing:.04em; opacity:.85; }
.button-primary { background:var(--navy); color:#fff; font-size:20px; letter-spacing:.04em; }
.button-ghost { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.7); }
.button-light { background:#fff; color:var(--navy); }
.button-line { background:transparent; color:var(--navy); border:1px solid var(--navy); }

/* 共通の見出し */
.kicker { margin:0 0 8px; font-family:var(--eng); font-size:15px; font-style:italic; letter-spacing:.16em; color:var(--navy); }
.kicker.light { color:rgba(255,255,255,.8); }
.kicker.center, .center { text-align:center; }
h2 { font-family:var(--serif); font-size:clamp(26px,2.8vw,36px); font-weight:700; letter-spacing:.08em; line-height:1.6; }
.head-row { max-width:1180px; margin:0 auto; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.head-note { max-width:460px; font-size:13px; line-height:1.9; color:var(--muted); text-align:right; }
.note { margin:22px auto 0; max-width:1180px; color:var(--muted); font-size:12px; line-height:1.8; text-align:right; }
.note.left { text-align:left; margin-top:14px; }

/* ヒーロー */
.hero { position:relative; min-height:680px; display:flex; align-items:flex-end; overflow:hidden; background:#2a2f36; }
.hero-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(20,26,34,.05) 0%, rgba(20,26,34,.25) 45%, rgba(20,26,34,.72) 100%); }
.hero-side { position:absolute; z-index:2; right:clamp(16px,3vw,40px); top:50%; transform:translateY(-50%); writing-mode:vertical-rl; font-family:var(--eng); font-size:15px; letter-spacing:.42em; color:rgba(255,255,255,.75); }
.hero-inner { position:relative; z-index:2; width:100%; max-width:1180px; margin:0 auto; padding:120px clamp(20px,4vw,40px) 64px; }
.hero-copy { max-width:700px; color:#fff; }
.hero h1 { font-family:var(--serif); font-size:clamp(30px,3.6vw,50px); font-weight:700; letter-spacing:.08em; line-height:1.55; text-shadow:0 2px 20px rgba(0,0,0,.3); }
.hero-text { margin-top:20px; max-width:560px; font-size:15px; line-height:2; }
.hero-meta { display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:22px; font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.9); }
.hero-meta span { position:relative; padding-left:14px; }
.hero-meta span::before { content:""; position:absolute; left:0; top:.9em; width:6px; height:1px; background:#fff; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }

/* 施工例 */
.cases { padding:100px clamp(20px,5vw,60px) 0; }
.case-main { max-width:1180px; margin:40px auto 0; display:grid; grid-template-columns:1.25fr 1fr; align-items:center; }
.case-main img { width:100%; height:480px; object-fit:cover; display:block; }
.case-main-body { background:var(--grey); padding:48px 52px; margin-left:-80px; position:relative; z-index:1; }
.case-cat { font-size:12px; font-weight:700; letter-spacing:.1em; color:var(--navy); }
.case-main h3 { margin-top:10px; font-family:var(--serif); font-size:28px; font-weight:700; line-height:1.6; letter-spacing:.06em; }
.case-text { margin-top:16px; font-size:14px; line-height:2; }
.case-main dl { display:flex; gap:36px; margin:22px 0 0; padding-top:18px; border-top:1px solid #d3d8df; }
.case-main dl div { display:flex; flex-direction:column; line-height:1.5; }
.case-main dt { font-size:11px; letter-spacing:.14em; color:var(--muted); }
.case-main dd { margin:4px 0 0; font-family:var(--serif); font-size:22px; font-weight:700; color:var(--navy); }
.case-sub { max-width:1180px; margin:32px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.case img { width:100%; height:280px; object-fit:cover; display:block; }
.case .case-cat { margin-top:14px; }
.case h3 { margin-top:6px; font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.04em; }
.case-num { margin-top:4px; font-size:13px; color:var(--muted); }

/* 私たちについて */
.about { position:relative; padding:130px clamp(20px,5vw,60px) 100px; overflow:hidden; }
.ghost { position:absolute; left:clamp(0px,2vw,30px); top:64px; font-family:var(--eng); font-size:clamp(70px,11vw,150px); font-style:italic; letter-spacing:.06em; line-height:1; color:#eef0f3; user-select:none; pointer-events:none; }
.about-grid { position:relative; max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.about-photo { position:relative; padding:0 0 40px 40px; }
.about-photo::before { content:""; position:absolute; left:0; bottom:0; width:80%; height:80%; background:var(--grey); }
.about-photo img { position:relative; width:100%; height:520px; object-fit:cover; display:block; }
.about-copy p:not(.kicker) { margin-top:16px; font-size:14.5px; }
.about-copy h2 { margin-top:6px; }
.about-name { display:flex; flex-direction:column; margin-top:26px; padding-top:18px; border-top:1px solid var(--line); font-family:var(--serif); font-size:22px; font-weight:700; line-height:1.5; }
.about-name small { font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.14em; color:var(--navy); }
.about-name span { font-family:var(--sans); font-size:12px; font-weight:400; color:var(--muted); }
.points { list-style:none; max-width:1180px; margin:90px auto 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.points li { display:flex; flex-direction:column; }
.pt-no { font-family:var(--eng); font-size:34px; font-style:italic; color:var(--navy); line-height:1; }
.points img { width:100%; height:200px; object-fit:cover; display:block; margin-top:14px; }
.points h3 { margin-top:18px; font-family:var(--serif); font-size:19px; font-weight:700; line-height:1.7; letter-spacing:.04em; }
.points p { margin-top:10px; font-size:13.5px; line-height:1.95; color:#374151; }

/* 工事と料金 */
.service { background:var(--grey); padding:100px clamp(20px,5vw,60px); }
.svc-list { max-width:1180px; margin:40px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:0 60px; border-top:1px solid #cfd5dc; }
.svc { display:grid; grid-template-columns:130px 1fr; gap:4px 20px; padding:22px 0; border-bottom:1px solid #cfd5dc; }
.svc h3 { grid-row:span 2; font-family:var(--serif); font-size:20px; font-weight:700; letter-spacing:.06em; color:var(--navy); line-height:1.6; }
.svc p { font-size:14px; line-height:1.8; }
.svc-price { font-size:12.5px; line-height:1.8; color:var(--muted); }

/* 流れ */
.flow { padding:100px clamp(20px,5vw,60px); }
.flow-steps { list-style:none; max-width:1180px; margin:48px auto 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; position:relative; }
.flow-steps::before { content:""; position:absolute; left:10%; right:10%; top:22px; height:1px; background:var(--line); }
.flow-steps li { position:relative; padding:0 16px; text-align:center; }
.flow-steps span { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:999px; background:var(--navy); color:#fff; font-family:var(--eng); font-size:16px; font-style:italic; }
.flow-steps h3 { margin-top:16px; font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.04em; }
.flow-steps p { margin-top:6px; font-size:12.5px; line-height:1.8; color:#374151; }

/* 採用 */
.recruit { background:var(--navy-deep); color:#fff; padding:96px clamp(20px,5vw,60px); }
.recruit-inner { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(30px,6vw,90px); align-items:center; }
.recruit-copy h2 { color:#fff; }
.recruit-copy p:not(.kicker) { margin-top:16px; font-size:14.5px; color:rgba(255,255,255,.88); }
.recruit-copy .button { margin-top:26px; }
.recruit-jobs { margin:0; border-top:1px solid rgba(255,255,255,.25); }
.recruit-jobs div { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.25); }
.recruit-jobs dt { font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:.04em; }
.recruit-jobs dd { margin:6px 0 0; font-size:13.5px; line-height:1.9; color:rgba(255,255,255,.85); }

/* FAQ */
.faq { padding:100px clamp(20px,5vw,60px); }
.faq-list { max-width:860px; margin:40px auto 0; display:flex; flex-direction:column; gap:28px; }
.faq-list h3 { font-family:var(--serif); font-size:18px; font-weight:700; letter-spacing:.04em; padding-left:34px; position:relative; }
.faq-list h3::before { content:"Q"; position:absolute; left:0; top:-2px; font-family:var(--eng); font-size:24px; font-style:italic; color:var(--navy); }
.faq-list p { margin-top:8px; padding-left:34px; font-size:14px; line-height:1.95; }

/* 会社概要 */
.company { background:var(--grey); padding:100px clamp(20px,5vw,60px); }
.company-grid { max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.company-info { margin:26px 0 0; }
.company-info div { display:grid; grid-template-columns:110px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid #cfd5dc; font-size:14px; }
.company-info dt { color:var(--navy); font-weight:700; }
.company-info dd { margin:0; }
.map-box { min-height:420px; display:flex; align-items:center; justify-content:center; background:#e1e5ea; color:var(--navy); font-size:12px; letter-spacing:.06em; text-align:center; padding:20px; }

/* CTA */
.cta { padding:96px 30px; text-align:center; }
.cta h2 { }
.cta > p:not(.demo-note) { margin:14px 0 30px; font-size:14.5px; }
.contact-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.demo-note { display:block; margin-top:22px; color:var(--muted); font-size:11px; }

/* フッター */
footer { min-height:128px; padding:32px clamp(24px,7vw,60px) 100px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--navy-deep); color:#fff; }
footer .brand span, footer .brand strong { color:#fff; }
footer p { margin:0; font-size:11px; color:rgba(255,255,255,.7); }
.footer-demo { max-width:460px; font-size:11px; line-height:1.8; color:rgba(255,255,255,.7); }
.footer-demo p { margin:0; }

.bottom-bar { display:none; }

/* モーダル */
.modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:22px; background:rgba(20,26,34,.62); }
.modal[hidden] { display:none; }
.modal-inner { position:relative; width:min(100%,430px); padding:44px 38px; background:#fff; color:var(--ink); box-shadow:0 16px 45px rgba(0,0,0,.25); }
.modal-inner h2 { font-size:22px; }
.modal-inner p { margin:14px 0 0; font-size:13px; }
.modal-close { position:absolute; top:10px; right:15px; border:0; background:transparent; color:var(--ink); font-size:25px; cursor:pointer; }

.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width:1100px) {
  .main-nav a { display:none; }
  .case-main { grid-template-columns:1fr; }
  .case-main-body { margin:-40px 24px 0; padding:32px 30px; }
  .points { gap:24px; }
  .flow-steps { grid-template-columns:repeat(3,1fr); gap:32px 0; }
  .flow-steps::before { display:none; }
}
@media (max-width:900px) {
  html { scroll-padding-top:74px; }
  .site-header { height:74px; padding:0 20px; }
  .main-nav { position:absolute; top:74px; left:0; width:100%; padding:16px 24px 24px; display:none; flex-direction:column; align-items:stretch; gap:0; background:#fff; box-shadow:0 10px 20px rgba(36,39,34,.08); }
  .main-nav.is-open { display:flex; }
  .main-nav a { display:block; padding:12px 0; border-bottom:1px solid var(--line); }
  .main-nav .nav-tel { margin-top:14px; }
  .menu-button { display:flex; align-items:center; gap:5px; border:0; padding:7px 0 7px 10px; background:transparent; cursor:pointer; flex-wrap:wrap; justify-content:flex-end; width:57px; }
  .menu-button span { width:24px; height:1px; display:block; background:var(--ink); }
  .menu-button i { width:100%; font-style:normal; font-size:9px; line-height:1.2; }
  .hero { min-height:0; }
  .hero-side { display:none; }
  .hero-inner { padding:90px 24px 44px; }
  .hero h1 { font-size:28px; }
  .hero-text { font-size:14px; }
  .hero-meta { flex-direction:column; gap:4px; font-size:12.5px; }
  .button { width:100%; min-width:0; }
  .cases, .about, .service, .flow, .recruit, .faq, .company { padding-left:24px; padding-right:24px; }
  .cases { padding-top:64px; }
  .head-row { flex-direction:column; align-items:flex-start; gap:8px; }
  .head-note { text-align:left; }
  .note { text-align:left; }
  .case-main img { height:260px; }
  .case-main-body { margin:0; padding:26px 22px; }
  .case-main h3 { font-size:22px; }
  .case-sub { grid-template-columns:1fr; gap:28px; }
  .case img { height:220px; }
  .about { padding-top:80px; padding-bottom:64px; }
  .ghost { top:30px; font-size:64px; }
  .about-grid { grid-template-columns:1fr; gap:30px; }
  .about-photo { padding:0 0 24px 24px; }
  .about-photo img { height:320px; }
  .points { grid-template-columns:1fr; gap:36px; margin-top:56px; }
  .points img { height:180px; }
  .service, .flow, .recruit, .faq, .company { padding-top:64px; padding-bottom:64px; }
  .svc-list { grid-template-columns:1fr; }
  .svc { grid-template-columns:1fr; gap:2px; padding:16px 0; }
  .svc h3 { grid-row:auto; font-size:18px; }
  .flow-steps { grid-template-columns:1fr; gap:0; margin-top:28px; }
  .flow-steps li { display:grid; grid-template-columns:44px 1fr; gap:4px 16px; text-align:left; padding:16px 0; border-bottom:1px solid var(--line); }
  .flow-steps span { grid-row:span 2; }
  .flow-steps h3 { margin-top:0; }
  .flow-steps p { grid-column:2; }
  .recruit-inner { grid-template-columns:1fr; gap:30px; }
  .company-grid { grid-template-columns:1fr; gap:24px; }
  .map-box { min-height:220px; }
  .company-info div { grid-template-columns:92px 1fr; font-size:13.5px; }
  .cta { padding:64px 24px; }
  footer { padding-bottom:110px; }
  .bottom-bar { position:fixed; z-index:9; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; background:rgba(255,255,255,.97); border-top:1px solid var(--line); box-shadow:0 -6px 20px rgba(39,42,38,.08); }
  .bottom-bar button { height:60px; border:0; background:#fff; font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--navy); cursor:pointer; border-right:1px solid var(--line); }
  .bottom-bar .tel { background:var(--navy); color:#fff; border-right:0; }
}
@media (max-width:480px) {
  .brand strong { font-size:19px; }
  .hero h1 { font-size:25px; }
  .contact-actions { flex-direction:column; align-items:center; }
}