/* seimusha.eigonorin.com — 整務舎
 * 英語のりん(eigonorin.com)の現行デザイン言語を継承: 明朝の見出し、細い罫線、直角に近い角、余白、抑制された動き。
 * 変えた点: 暗い節を置かず明るいオフホワイトを主体に、真鍮の代わりに青緑を控えめなアクセントに。本文は読みやすさ優先でゴシック。
 */
:root{
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Noto Sans JP","Noto Sans CJK JP",sans-serif;
  --paper:#F8F8F5; --paper-2:#FFFFFF; --paper-tint:#EEF4F2;
  --ink:#14161A; --ink-2:#3A3D44; --mute:#5E626A;
  --hair:rgba(20,22,26,.14); --hair-strong:rgba(20,22,26,.30);
  --teal:#1B7F7A; --teal-deep:#145F5B; --teal-tint:#DCEBE8; --teal-text:#166F6A;
  --brass:#8E6326;
  --r:2px; --wrap:1120px; --gutter:16px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.9; font-feature-settings:"palt"; overflow-x:hidden}
img,svg{max-width:100%; height:auto}
a{color:var(--teal-text); text-underline-offset:.2em}
a:hover{color:var(--teal-deep)}
:focus-visible{outline:2px solid var(--teal); outline-offset:3px; border-radius:var(--r)}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,.serif{font-family:var(--serif); font-weight:600; letter-spacing:-.02em; margin:0}
h1{font-size:clamp(30px,4.2vw,46px); line-height:1.32}
h2{font-size:clamp(24px,3vw,34px); line-height:1.4; font-weight:500; letter-spacing:-.025em}
h3{font-size:19px; line-height:1.5; font-weight:600}
p{margin:0 0 1em}
.eyebrow{font-family:var(--sans); font-size:12px; letter-spacing:.2em; color:var(--teal-text); text-transform:uppercase; margin:0 0 14px}
.lead{font-family:var(--serif); font-size:17px; line-height:1.95; color:var(--ink-2); max-width:38em}
.note{font-size:14px; line-height:1.85; color:var(--mute)}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em}

/* ---------- header ---------- */
.hd{position:sticky; top:0; z-index:50; background:rgba(248,248,245,.92); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid var(--hair)}
.hd .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px}
.wordmark{display:inline-flex; align-items:baseline; gap:10px; text-decoration:none; color:var(--ink)}
.wordmark img.mark{width:28px; height:28px; align-self:center; border-radius:6px; display:block}
.wordmark b{font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.04em}
.wordmark small{font-family:var(--sans); font-size:10px; letter-spacing:.18em; color:var(--brass)}
.nav{display:flex; gap:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-size:13px; letter-spacing:.06em; color:var(--ink-2); text-decoration:none; white-space:nowrap; padding:6px 0; border-bottom:1px solid transparent}
.nav a:hover{color:var(--ink); border-bottom-color:var(--ink)}
.hd .btn{display:none}
@media (min-width:900px){ .hd .btn{display:inline-flex} }
@media (max-width:719px){
  .hd .wrap{flex-wrap:wrap; padding-bottom:8px}
  .nav{width:100%; gap:18px}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans); font-weight:600; font-size:13px; letter-spacing:.08em; color:#fff; background:var(--teal); border:1px solid var(--teal); padding:12px 22px; border-radius:var(--r); text-decoration:none; cursor:pointer; line-height:1.4; transition:background .25s,color .25s,border-color .25s,transform .25s}
.btn:hover{background:var(--teal-deep); border-color:var(--teal-deep); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--hair-strong)}
.btn.ghost:hover{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.small{padding:9px 16px; font-size:12px}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* ---------- sections ---------- */
.sec{padding:76px 0; border-top:1px solid var(--hair)}
.sec.tint{background:var(--paper-tint)}
.sec.white{background:var(--paper-2)}
.sec-head{max-width:46em; margin-bottom:40px}
.sec-head .lead{margin-top:16px}
@media (max-width:719px){ .sec{padding:52px 0} .sec-head{margin-bottom:28px} }

/* ---------- hero ---------- */
.hero{padding:72px 0 64px}
.hero .grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero h1{margin-top:6px}
.hero .lead{margin-top:22px}
.price-inline{border-left:2px solid var(--teal); padding:6px 0 6px 18px; margin-top:26px}
.price-inline b{font-family:var(--serif); font-size:22px; font-weight:600; letter-spacing:-.01em}
.price-inline span{display:block; font-size:14px; color:var(--mute); margin-top:4px}
@media (max-width:899px){ .hero .grid{grid-template-columns:1fr; gap:36px} .hero{padding:48px 0 44px} }

/* document card (装飾。架空データ) */
.doc{background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r); box-shadow:0 1px 0 rgba(20,22,26,.04); padding:22px 24px; font-size:14px}
.doc .doc-title{display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--hair); padding-bottom:10px; margin-bottom:12px}
.doc .doc-title b{font-family:var(--serif); font-size:15px; font-weight:600}
.doc .tag{font-size:11px; letter-spacing:.12em; color:var(--teal-text); border:1px solid var(--teal-tint); background:var(--teal-tint); padding:2px 8px; border-radius:var(--r)}
.doc table{width:100%; border-collapse:collapse}
.doc th,.doc td{text-align:left; padding:8px 6px; border-bottom:1px solid var(--hair); font-weight:400; vertical-align:middle}
.doc th{font-size:11px; letter-spacing:.1em; color:var(--mute)}
.doc .old{color:var(--mute); text-decoration:line-through; text-decoration-color:rgba(20,22,26,.4)}
.doc .new{color:var(--teal-deep); font-weight:600}
.doc .arrow{color:var(--mute); padding:0 6px}
.doc .doc-foot{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:12px; color:var(--mute)}
.doc .doc-foot span::before{content:""; display:inline-block; width:6px; height:6px; background:var(--teal); margin-right:6px; vertical-align:middle}

/* ---------- trio / lists ---------- */
.trio{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--hair)}
.trio>div{border-left:1px solid var(--hair); padding:24px 22px 8px}
.trio>div:first-child{border-left:0; padding-left:0}
.trio h3{margin-bottom:10px}
.trio p{font-size:15px; color:var(--ink-2)}
@media (max-width:719px){ .trio{grid-template-columns:1fr} .trio>div{border-left:0; padding:20px 0 4px; border-top:1px solid var(--hair)} .trio>div:first-child{border-top:0} }

.cols{display:grid; grid-template-columns:1fr 1fr; gap:48px}
@media (max-width:899px){ .cols{grid-template-columns:1fr; gap:36px} }
/* グリッドの子が表などの最小幅で広がって横スクロールを起こさないように */
.grid>*,.cols>*,.trio>*,.steps>li,.diff-cols>*,.doc{min-width:0}
.trio.two{grid-template-columns:repeat(2,1fr); max-width:900px}
@media (max-width:719px){ .trio.two{grid-template-columns:1fr} }

.hl{list-style:none; margin:0; padding:0; border-top:1px solid var(--hair)}
.hl li{padding:16px 0; border-bottom:1px solid var(--hair); font-size:15px; line-height:1.85}
.hl li b{display:block; font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:4px}
.hl.check li{padding-left:28px; position:relative}
.hl.check li::before{content:""; position:absolute; left:2px; top:26px; width:10px; height:10px; border-right:2px solid var(--teal); border-bottom:2px solid var(--teal); transform:rotate(45deg) translateY(-6px)}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.tbl{width:100%; border-collapse:collapse; font-size:15px; min-width:520px}
.tbl th,.tbl td{padding:14px 12px; border-bottom:1px solid var(--hair); vertical-align:top; text-align:left; line-height:1.8}
.tbl thead th{border-top:1px solid var(--ink); border-bottom:1px solid var(--hair-strong); font-weight:700; font-size:13px; letter-spacing:.06em}
.tbl tbody th{font-weight:600; width:26%; white-space:nowrap; color:var(--ink)}
.tbl.compact{font-size:14px}
.tbl .r{text-align:right}
.before{color:var(--mute)}
.after{color:var(--teal-deep); font-weight:600}
.caption{font-size:13px; color:var(--mute); margin:8px 0 0}

/* ---------- steps ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:0 32px; border-top:1px solid var(--hair)}
.steps li{padding:22px 0 18px; border-bottom:1px solid var(--hair)}
.steps .n{font-family:var(--serif); font-size:13px; letter-spacing:.18em; color:var(--teal-text)}
.steps b{display:block; font-family:var(--serif); font-size:18px; font-weight:600; margin:6px 0 6px}
.steps p{font-size:15px; color:var(--ink-2); margin:0}
@media (max-width:899px){ .steps{grid-template-columns:1fr 1fr} }
@media (max-width:599px){ .steps{grid-template-columns:1fr} }

/* ---------- price ---------- */
.price-big{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin:8px 0 24px}
.price-big b{font-family:var(--serif); font-size:clamp(38px,5vw,54px); font-weight:600; letter-spacing:-.02em; line-height:1.1}
.price-big span{font-size:14px; color:var(--mute)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none; cursor:pointer; padding:18px 40px 18px 0; font-family:var(--serif); font-size:17px; font-weight:600; line-height:1.6; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:10px; height:10px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transform:translateY(-70%) rotate(45deg); transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 20px; font-size:15px; color:var(--ink-2); max-width:44em}

/* ---------- contact ---------- */
.contact-box{background:var(--paper-2); border:1px solid var(--hair); border-radius:var(--r); padding:28px 28px 22px}
.contact-box .email{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:17px; word-break:break-all; margin:4px 0 14px; color:var(--ink)}
.contact-box .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.copy-msg{font-size:13px; color:var(--teal-text); min-height:1.6em; margin-top:8px}
.copy-msg.err{color:#8A2A2A}
.kv{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:15px; margin-top:18px}
.kv dt{color:var(--mute)} .kv dd{margin:0}
.docs{list-style:none; margin:0; padding:0}
.docs li{padding:12px 0; border-bottom:1px solid var(--hair)}
.docs a{display:flex; justify-content:space-between; gap:12px; text-decoration:none; color:var(--ink); font-family:var(--serif); font-size:16px}
.docs a span{font-family:var(--sans); font-size:12px; letter-spacing:.1em; color:var(--teal-text)}
.docs a:hover{color:var(--teal-deep)}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--hair); padding:44px 0 36px; font-size:13px; color:var(--mute)}
.ft .top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; align-items:flex-start}
.ft .desc{max-width:36em; margin:8px 0 0}
.ft nav{display:flex; gap:18px; flex-wrap:wrap}
.ft nav a{color:var(--ink-2); text-decoration:none} .ft nav a:hover{color:var(--ink); text-decoration:underline}
.ft .bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:28px; padding-top:16px; border-top:1px solid var(--hair)}

/* ---------- sub pages ---------- */
.page{padding:56px 0 72px}
.page .body{max-width:46em}
.page h2{font-size:22px; margin:40px 0 12px}
.page ul{padding-left:1.2em} .page li{margin:6px 0}
.arrowlist{list-style:none; padding:0; margin:0}
.arrowlist li{padding:8px 0; border-bottom:1px solid var(--hair); font-size:15px}
.diff-cols{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.diff-cols .doc{font-size:14px}
.diff-cols pre{margin:0; white-space:pre-wrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; line-height:1.8}
@media (max-width:719px){ .diff-cols{grid-template-columns:1fr} }
.center{text-align:center}
.nf{min-height:60vh; display:flex; align-items:center}

/* ---------- motion (抑制) ---------- */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} .btn{transition:none} }
.no-js .reveal{opacity:1; transform:none}

@media print{ .hd,.ft,.actions,.btn{display:none !important} body{background:#fff} .sec{padding:24px 0} }