:root { --ink:#262626; --muted:#666; --line:#e8e2d8; --paper:#fffaf1; --accent:#f8b62d; --accent-dark:#d88700; --green:#2f7d64; --shadow:0 20px 55px rgba(34,30,24,.14); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; overflow-x:hidden; } body { margin:0; padding-top:78px; color:var(--ink); font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif; line-height:1.75; overflow-x:clip; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; height:auto; }
.header { position:fixed; inset:0 0 auto; z-index:20; background:rgba(255,255,255,.88); border-bottom:1px solid rgba(38,38,38,.08); backdrop-filter:blur(18px); }.header-inner,.section-inner,.footer-inner { width:min(1120px,calc(100% - 32px)); margin:0 auto; }.header-inner { min-height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px; }.logo img { width:178px; }.nav { display:flex; align-items:center; gap:22px; font-size:14px; font-weight:700; }.nav a:hover,.nav a[aria-current="page"] { color:var(--accent-dark); }.nav .contact-link { color:#fff; background:var(--ink); padding:10px 18px; border-radius:999px; }
.hero { position:relative; min-height:600px; display:grid; align-items:end; overflow:hidden; color:#fff; background:#171717; }.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.5) 48%,rgba(0,0,0,.15) 100%),url("../../../images/service/window.jpg") center / cover no-repeat; }.hero-inner { position:relative; width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:130px 0 76px; }.eyebrow { display:inline-flex; padding:7px 14px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:rgba(255,255,255,.13); font-size:14px; font-weight:800; }.hero h1 { max-width:780px; margin:22px 0 16px; font-size:clamp(39px,6.4vw,72px); line-height:1.12; letter-spacing:.02em; }.hero-copy { max-width:650px; margin:0 0 27px; font-size:clamp(16px,2vw,20px); }.hero-details { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:27px; }.hero-details span { padding:7px 12px; border-radius:6px; background:rgba(255,255,255,.92); color:#242424; font-size:14px; font-weight:900; }.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 25px; border-radius:999px; font-weight:900; }.button.primary { background:var(--accent); color:#171717; }.button.light { background:#fff; color:#171717; }.button:hover { transform:translateY(-2px); }
section { padding:94px 0; }.section-head { max-width:760px; margin-bottom:36px; }.kicker { margin:0 0 8px; color:var(--accent-dark); font-size:13px; font-weight:900; letter-spacing:.1em; }.section-head h2 { margin:0; font-size:clamp(30px,4.4vw,48px); line-height:1.28; }.lead { margin:16px 0 0; color:var(--muted); font-size:17px; }.intro { background:var(--paper); }.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:42px; align-items:center; }.intro-image { position:relative; min-height:380px; border-radius:9px; overflow:hidden; box-shadow:var(--shadow); }.intro-image img { width:100%; height:100%; object-fit:cover; }.intro-note { position:absolute; right:18px; bottom:18px; padding:12px 15px; border-left:4px solid var(--accent); border-radius:6px; background:#fff; font-size:13px; font-weight:800; box-shadow:0 8px 24px rgba(0,0,0,.12); }.check-list { display:grid; gap:13px; margin:0; padding:0; list-style:none; }.check-list li { position:relative; padding-left:32px; }.check-list li::before { content:"✓"; position:absolute; left:0; top:3px; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; background:var(--green); color:#fff; font-size:13px; font-weight:900; }
.learn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.learn-card { padding:25px; border:1px solid var(--line); border-radius:8px; background:#fff; box-shadow:0 12px 32px rgba(34,30,24,.07); }.learn-card b { display:block; margin-bottom:10px; color:var(--accent-dark); font-size:29px; line-height:1; }.learn-card h3 { margin:0 0 7px; font-size:20px; }.learn-card p { margin:0; color:var(--muted); font-size:14px; }
.flow { background:#1f1f1f; color:#fff; }.flow .kicker { color:var(--accent); }.flow .lead { color:rgba(255,255,255,.73); }.flow-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; counter-reset:step; }.flow-item { counter-increment:step; min-height:185px; padding:22px 18px; border-radius:8px; background:#2e2e2e; }.flow-item::before { content:counter(step,decimal-leading-zero); display:block; margin-bottom:16px; color:var(--accent); font-size:27px; font-weight:900; line-height:1; }.flow-item strong { display:block; margin-bottom:7px; }.flow-item p { margin:0; color:rgba(255,255,255,.7); font-size:13px; line-height:1.65; }
.details { background:var(--paper); }.detail-box { display:grid; grid-template-columns:1.1fr .9fr; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }.detail-list { margin:0; padding:18px 30px; }.detail-list div { display:grid; grid-template-columns:135px 1fr; gap:18px; padding:15px 0; border-bottom:1px solid var(--line); }.detail-list div:last-child { border-bottom:0; }.detail-list dt { color:var(--accent-dark); font-weight:900; }.detail-list dd { margin:0; }.detail-side { display:flex; flex-direction:column; justify-content:center; padding:38px; color:#fff; background:var(--green); }.detail-side p { margin:0 0 18px; font-size:18px; font-weight:800; }.detail-side small { display:block; margin-top:15px; color:rgba(255,255,255,.75); line-height:1.6; }
.faq { max-width:840px; }.faq details { border-bottom:1px solid var(--line); }.faq summary { padding:18px 34px 18px 0; font-weight:800; cursor:pointer; list-style:none; position:relative; }.faq summary::after { content:"＋"; position:absolute; right:5px; color:var(--accent-dark); font-size:24px; font-weight:400; }.faq details[open] summary::after { content:"−"; }.faq p { margin:0 0 19px; color:var(--muted); }
.cta { color:#fff; background:linear-gradient(100deg,rgba(248,182,45,.96),rgba(47,125,100,.94)),url("../../../images/service/cutting1.jpg") center / cover no-repeat; }.cta-box { display:grid; grid-template-columns:1fr auto; align-items:center; gap:30px; }.cta h2 { margin:0; font-size:clamp(29px,4.3vw,45px); line-height:1.28; }.cta p { max-width:670px; margin:14px 0 0; font-size:17px; }.cta .button { background:#fff; color:#171717; }
.footer { padding:56px 0 26px; background:#171717; color:#fff; }.footer-main { display:grid; grid-template-columns:1fr 1.4fr; gap:48px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.16); }.footer-brand img { width:176px; margin-bottom:18px; }.footer-brand p { max-width:420px; margin:0; color:rgba(255,255,255,.72); }.footer-contact { display:grid; gap:5px; margin-top:20px; font-size:14px; }.footer-contact a,.footer-column h3 { color:var(--accent); font-weight:800; }.footer-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.footer-column h3 { margin:0 0 12px; font-size:13px; letter-spacing:.08em; }.footer-column a { display:block; color:rgba(255,255,255,.78); font-size:14px; }.footer-column a+a { margin-top:8px; }.footer-bottom { padding-top:21px; color:rgba(255,255,255,.62); font-size:13px; }
@media (max-width:900px) { .nav { display:none; }.hero { min-height:555px; }.intro-grid,.detail-box,.footer-main,.footer-columns { grid-template-columns:1fr; }.learn-grid { grid-template-columns:1fr; }.flow-grid { grid-template-columns:repeat(2,1fr); }.cta-box { display:block; }.cta .button { margin-top:22px; }.detail-side { padding:30px; }.intro-image { min-height:300px; } }
@media (max-width:520px) { body { padding-top:68px; }.header-inner { min-height:68px; }.logo img { width:142px; }.hero-inner { padding:100px 0 64px; }.hero h1 { font-size:39px; }.hero-details span { font-size:12px; } section { padding:66px 0; }.flow-grid { grid-template-columns:1fr; }.detail-list { padding:12px 20px; }.detail-list div { grid-template-columns:1fr; gap:2px; }.footer-main { gap:30px; } }