@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+JP:wght@400;500;600;700&family=Noto+Serif+JP:wght@500;600&display=swap');

:root {
  --paper: #f2f0ea;
  --ink: #171a1d;
  --steel: #4c555a;
  --line: #cbc7be;
  --signal: #173f66;
  --signal-dark: #0a2742;
  --white: #fffdf8;
  --dark: #101214;
  --dark-line: #454b4f;
  --dark-soft: #b9c1c5;
  --dark-light: #c5c9cb;
  --header-bg: #fffdf8;
  --shade-heavy: rgba(4, 18, 31, .96);
  --shade-strong: rgba(5, 23, 39, .8);
  --shade-soft: rgba(5, 23, 39, .18);
  --shade-faint: rgba(5, 23, 39, .06);
  --shade-page: rgba(4, 18, 31, .94);
  --shade-page-mid: rgba(4, 18, 31, .72);
  --shade-page-end: rgba(4, 18, 31, .12);
  --font-sans: 'Noto Sans JP', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --frame: min(1180px, calc(100% - 40px));
  --radius: 2px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.8;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; }
[id] { scroll-margin-top: 110px; }
body.nav-open { overflow: hidden; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--white); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; top: 0; z-index: 1000; isolation: isolate; border-bottom: 1px solid var(--line); background: var(--header-bg); }
.header-inner { position: relative; z-index: 1; width: min(100% - 48px, 1480px); min-height: 84px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-grid; grid-template-columns: 38px auto; align-items: center; gap: 14px; font-weight: 700; text-decoration: none; }
.brand-mark { width: 38px; aspect-ratio: 1; background: var(--signal-dark); clip-path: polygon(50% 0, 59% 34%, 85% 15%, 66% 41%, 100% 50%, 66% 59%, 85% 85%, 59% 66%, 50% 100%, 41% 66%, 15% 85%, 34% 59%, 0 50%, 34% 41%, 15% 15%, 41% 34%); }
.brand-name { display: grid; font-size: 1.3rem; line-height: 1.15; letter-spacing: .12em; }
.brand-name small { margin-top: 5px; font-family: var(--font-mono); font-size: .47rem; font-weight: 500; letter-spacing: .2em; }
.nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 28px); font-size: .82rem; white-space: nowrap; }
.nav a { text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav-cta { align-self: stretch; display: inline-flex; align-items: center; margin-block: -1px; padding: 8px 24px; border: 0; background: var(--signal-dark); color: var(--white); }
.nav-toggle { display: none; border: 1px solid var(--ink); background: transparent; padding: 8px 12px; }

.demo-strip { background: var(--ink); color: var(--white); padding: 7px 20px; text-align: center; font-size: .72rem; letter-spacing: .11em; }
.frame { width: var(--frame); margin-inline: auto; }
.kicker, .index-label { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .11em; font-size: .73rem; color: var(--steel); }
.signal { color: var(--signal); }

.hero { position: relative; min-height: clamp(540px, calc(100svh - 150px), 660px); display: grid; align-items: stretch; overflow: hidden; background: var(--signal-dark); color: var(--white); }
.hero-media, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { object-fit: cover; object-position: center; }
.hero-shade { background: linear-gradient(90deg, var(--shade-heavy) 0%, var(--shade-strong) 34%, var(--shade-soft) 64%, var(--shade-faint) 100%); }
.hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(72px, 8vw, 112px); color: var(--white); }
.hero .kicker { color: #b8c5d0; }
.hero h1 { margin: 20px 0 26px; max-width: 700px; font-family: 'Noto Serif JP', 'Yu Mincho', serif; font-size: clamp(3.1rem, 5vw, 5.5rem); line-height: 1.16; letter-spacing: .02em; font-weight: 600; text-wrap: balance; word-break: auto-phrase; }
.hero-lead { max-width: 510px; margin: 0; color: #e8edf1; font-size: clamp(.94rem, 1.1vw, 1.08rem); line-height: 2.05; }
.hero-link { width: fit-content; margin-top: 34px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.65); text-decoration: none; }
.hero-link span { margin-left: 28px; }
.hero-scroll { position: absolute; z-index: 2; left: max(20px, calc((100vw - 1180px) / 2)); bottom: 26px; display: grid; gap: 8px; color: #d4dce3; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; }
.hero-scroll span { display: block; width: 1px; height: 52px; background: rgba(255,255,255,.7); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; cursor: pointer; }
.button::after { content: '↗'; margin-left: 24px; font-family: var(--font-mono); }
.button:hover { background: var(--signal); border-color: var(--signal); }
.button-secondary { background: transparent; color: var(--ink); }
.portal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: var(--white); }
.portal a { min-height: 270px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 112px; align-content: end; gap: 7px 20px; padding: 26px clamp(18px, 2.2vw, 34px) 0; border-right: 1px solid var(--line); text-decoration: none; overflow: hidden; transition: background .2s ease, color .2s ease; }
.portal a:last-child { border-right: 0; }
.portal strong { font-size: 1.05rem; letter-spacing: .06em; }
.portal small { grid-column: 1; color: var(--steel); font-size: .76rem; }
.portal-no { grid-column: 1 / -1; font-family: var(--font-mono); color: var(--signal); font-size: .66rem; }
.portal-arrow { grid-column: 2; grid-row: 2 / 4; align-self: center; font-size: 1.2rem; }
.portal img { grid-column: 1 / -1; grid-row: 4; width: calc(100% + clamp(36px, 4.4vw, 68px)); height: 112px; margin-left: calc(-1 * clamp(18px, 2.2vw, 34px)); object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.02); transition: transform .35s ease, filter .25s ease; }
.portal .portal-plain { position: relative; background: var(--paper); }
.portal .portal-plain::after { content: ''; grid-column: 1 / -1; grid-row: 4; width: 44px; aspect-ratio: 1; align-self: center; justify-self: center; background: var(--signal-dark); clip-path: polygon(50% 0, 59% 34%, 85% 15%, 66% 41%, 100% 50%, 66% 59%, 85% 85%, 59% 66%, 50% 100%, 41% 66%, 15% 85%, 34% 59%, 0 50%, 34% 41%, 15% 15%, 41% 34%); opacity: .16; }
.news-band { padding: 38px 0; border-bottom: 1px solid var(--line); background: var(--paper); }
.news-layout { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: center; }
.news-title { display: flex; align-items: baseline; gap: 20px; }
.news-title p, .news-title h2 { margin: 0; }
.news-title h2 { font-size: 1.15rem; }
.news-list p { display: grid; grid-template-columns: 120px 110px 1fr; gap: 24px; margin: 0; align-items: center; }
.news-list time { font-family: var(--font-mono); font-size: .8rem; }
.news-list span { padding: 4px 8px; background: var(--white); color: var(--steel); font-size: .72rem; text-align: center; }

.section { padding: clamp(78px, 10vw, 138px) 0; border-bottom: 1px solid var(--line); }
.section-head { display: grid; grid-template-columns: 190px 1fr; gap: 30px; margin-bottom: 58px; align-items: start; }
.section-head h2 { margin: 0; max-width: 820px; font-size: clamp(2rem, 4.4vw, 4.8rem); line-height: 1.12; letter-spacing: -.045em; text-wrap: balance; }
.section-head p { max-width: 680px; }

.fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.fit-item { padding: 26px 22px 32px; min-height: 210px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .2s ease, transform .2s ease; }
.fit-item strong { display: block; margin: 28px 0 8px; font-size: 1.35rem; }
.fit-item p { margin: 0; color: var(--steel); font-size: .9rem; }
.fit-number { font-family: var(--font-mono); font-size: .75rem; color: var(--signal); }

.service-ledger { border-top: 2px solid var(--ink); }
.ledger-row { display: grid; grid-template-columns: 110px 1fr 1.6fr 1fr; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: baseline; transition: transform .2s ease, background .2s ease; }
.ledger-row > :first-child { font-family: var(--font-mono); color: var(--signal); }
.ledger-row h3 { margin: 0; font-size: 1.4rem; }
.ledger-row p { margin: 0; color: var(--steel); }

.inspection { background: var(--ink); color: var(--white); }
.inspection .kicker, .inspection .index-label { color: var(--dark-soft); }
.inspection-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
.inspection-photo { position: relative; }
.inspection-photo::after { content: ''; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--signal); z-index: 0; }
.inspection-photo img { position: relative; z-index: 1; aspect-ratio: 3/2; object-fit: cover; }
.photo-note { position: absolute; z-index: 2; left: 14px; bottom: 14px; padding: 6px 9px; background: var(--signal-dark); color: var(--white); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; }
.inspection-copy h2 { font-size: clamp(2.3rem, 4.5vw, 5rem); line-height: 1.12; letter-spacing: -.045em; margin: 18px 0 30px; }
.inspection-list { list-style: none; padding: 0; margin: 34px 0 0; }
.inspection-list li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--dark-line); }
.inspection-list span { font-family: var(--font-mono); color: var(--signal); }

.section#process .section-head h2 { max-width: 720px; font-family: 'Noto Serif JP', 'Yu Mincho', serif; font-size: clamp(2.35rem, 4vw, 3.45rem); font-weight: 500; line-height: 1.35; letter-spacing: .01em; }
.process { counter-reset: step; display: grid; grid-template-columns: 1.04fr .96fr 1.06fr .94fr 1fr; }
.process article { counter-increment: step; min-height: 220px; padding: 20px 22px 28px; border-top: 1px solid var(--ink); border-right: 1px solid var(--line); }
.process article::before { content: '0' counter(step); font-family: var(--font-mono); color: var(--signal); }
.process h3 { margin: 32px 0 10px; font-size: 1.08rem; }
.process p { color: var(--steel); font-size: .88rem; }

.相談-grid { display: grid; grid-template-columns: 1.12fr .88fr 1fr; gap: 18px; }
.相談-grid article { padding: 28px; border: 1px solid var(--line); background: var(--white); }
.相談-grid h3 { margin: 26px 0 10px; font-size: 1.45rem; }
.相談-grid p { color: var(--steel); }

.faq-list { max-width: 900px; margin-left: auto; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; padding: 24px 42px 24px 0; position: relative; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 8px; font-family: var(--font-mono); color: var(--signal); font-size: 1.35rem; }
details[open] summary::after { content: '−'; }
details p { padding: 0 40px 26px 0; margin: 0; color: var(--steel); }

.cta-band { padding: 72px 0; background: var(--signal); color: var(--white); }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.cta-inner h2 { margin: 0; max-width: 800px; font-size: clamp(2rem, 4vw, 4.4rem); line-height: 1.12; letter-spacing: -.04em; }
.cta-band .button { background: var(--white); color: var(--ink); border-color: var(--white); }

.page-hero { padding: 110px 0 72px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2.6rem, 7vw, 6.7rem); line-height: 1; letter-spacing: -.055em; margin: 18px 0 26px; }
.page-hero p { max-width: 680px; }
.page-hero-image { position: relative; min-height: 600px; display: grid; align-items: end; overflow: hidden; padding: 0; background: var(--signal-dark); color: var(--white); }
.page-hero-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--shade-page), var(--shade-page-mid) 42%, var(--shade-page-end) 76%); }
.page-hero-image .frame { position: relative; z-index: 1; padding-block: 100px 72px; }
.page-hero-image .kicker { color: #c2ced7; }
.page-hero-image h1 { max-width: 960px; font-family: 'Noto Serif JP', 'Yu Mincho', serif; font-size: clamp(2.8rem, 6vw, 5.3rem); letter-spacing: .02em; line-height: 1.2; }
.page-hero-image p { color: #e2e8ed; }
.content-grid { display: grid; grid-template-columns: 240px 1fr; gap: 70px; }
.content-grid + .content-grid { margin-top: 80px; }
.content-grid h2 { margin: 0; font-size: 1.8rem; }
.content-grid h3 { margin-top: 0; }
.prose { max-width: 780px; }
.prose h2, .prose h3 { line-height: 1.7; }
.prose p, .prose li { color: var(--steel); }
.company-table { margin: 0; border-top: 1px solid var(--ink); }
.company-table div { display: grid; grid-template-columns: 150px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.company-table dt { font-weight: 700; }
.company-table dd { margin: 0; color: var(--steel); }
.quality-steps { display: grid; grid-template-columns: 1.08fr .92fr 1fr; border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.quality-steps article { min-height: 310px; padding: 32px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quality-steps span, .works-list > article > span { font-family: var(--font-mono); color: var(--signal); font-size: .72rem; }
.quality-steps h2 { margin: 74px 0 18px; font-size: 1.45rem; }
.quality-steps p { color: var(--steel); }
.quality-steps + .demo-note { margin-top: 32px; }
.works-list { border-top: 1px solid var(--ink); }
.works-list > article { display: grid; grid-template-columns: 100px minmax(180px, .7fr) 1.6fr 260px; gap: 28px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--line); }
.works-list h2, .works-list p, .works-list dl { margin: 0; }
.works-list h2 { font-size: 1.35rem; }
.works-list dl { display: grid; gap: 12px; }
.works-list dl div { display: grid; grid-template-columns: 54px 1fr; gap: 12px; }
.works-list dt { font-weight: 700; }
.works-list dd, .works-list p { margin: 0; color: var(--steel); font-size: .9rem; }

.form-wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.demo-note { border-left: 3px solid var(--signal); padding: 18px 22px; background: var(--white); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 7px; }
.field-wide { grid-column: 1 / -1; }
label { font-weight: 600; font-size: .9rem; }
.inline-check { width: auto; }
input, select, textarea { width: 100%; border: 1px solid var(--steel); background: var(--white); color: var(--ink); border-radius: 0; padding: 13px 14px; }
textarea { min-height: 180px; resize: vertical; }
button:disabled { cursor: not-allowed; opacity: .55; }
.form-status { min-height: 2em; color: var(--signal); font-weight: 600; }

.site-footer { padding: 60px 0 26px; background: var(--dark); color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 42px; align-items: start; }
.footer-nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: .85rem; }
.footer-note { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--dark-line); color: var(--dark-light); font-size: .78rem; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .24s ease, transform .24s ease; }
[data-reveal][data-visible='true'] { opacity: 1; transform: translateY(0); }

@media (hover: hover) {
  .portal a:hover { background: var(--signal-dark); color: var(--white); }
  .portal a:hover small, .portal a:hover .portal-no { color: #c9d4dd; }
  .portal a:hover img { transform: scale(1.035); filter: saturate(.9) contrast(1.04); }
  .fit-item:hover { background: var(--white); transform: translateY(-4px); }
  .ledger-row:hover { transform: translateX(8px); background: var(--white); }
  .ledger-row a:hover { color: var(--signal); }
}

@media (max-width: 1100px) {
  .header-inner { min-height: 72px; }
  .nav-toggle { display: block; }
  .nav { position: absolute; inset: 72px 0 auto; display: none; flex-direction: column; align-items: stretch; padding: 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .nav[data-open='true'] { display: flex; }
  .nav-cta { margin: 0; justify-content: center; min-height: 52px; }
  .portal { grid-template-columns: repeat(2, 1fr); }
  .portal a { min-height: 150px; }
  .portal a:nth-child(2n) { border-right: 0; }
  .section-head, .inspection-grid, .content-grid, .form-wrap { grid-template-columns: 1fr; gap: 28px; }
  .quality-steps { grid-template-columns: 1fr; }
  .works-list > article { grid-template-columns: 80px 1fr; }
  .works-list dl, .works-list p { grid-column: 2; }
  .fit-grid { grid-template-columns: repeat(2, 1fr); }
  .ledger-row { grid-template-columns: 70px 1fr; }
  .ledger-row p { grid-column: 2; }
  .process { grid-template-columns: repeat(2, 1fr); }
  .相談-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  :root { --frame: min(100% - 28px, 1180px); }
  .header-inner { width: min(100% - 28px, 1480px); min-height: 64px; }
  .brand { grid-template-columns: 30px auto; gap: 10px; }
  .brand-mark { width: 30px; }
  .brand-name { font-size: 1.02rem; }
  .nav { inset: 64px 0 auto; }
  .hero { min-height: 0; display: block; }
  .hero-media { position: relative; inset: auto; aspect-ratio: 16 / 10; object-position: 73% center; }
  .hero-shade { display: none; }
  .hero-copy { padding-block: 42px 52px; background: var(--signal-dark); color: var(--white); }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .hero-lead br { display: none; }
  .hero-scroll { display: none; }
  .portal { grid-template-columns: 1fr; }
  .portal a { grid-column: auto; min-height: 118px; border-right: 0; }
  .news-layout, .news-list p { grid-template-columns: 1fr; gap: 12px; }
  .news-title { gap: 14px; }
  .page-hero-image { min-height: 540px; }
  .page-hero-image > img { object-position: 62% center; }
  .page-hero-image .frame { padding-block: 92px 58px; }
  .inspection-photo::after { inset: 10px 0 -10px 10px; }
  .company-table div { grid-template-columns: 1fr; gap: 4px; }
  .works-list > article { grid-template-columns: 1fr; }
  .works-list dl, .works-list p { grid-column: auto; }
  .fit-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .process article { min-height: 190px; }
  .section { padding: 76px 0; }
  .section-head { margin-bottom: 38px; }
  .cta-inner, .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}