/* =========================================================
   PROSSIVA — 共通スタイル
   色・文字はここ（:root）でまとめて変えられます
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --paper-2:#F3F6FB;
  --ink:#1B2740;
  --ink-soft:#4A5670;
  --ledger:#2E63C9;
  --ledger-dark:#234FA3;
  --rule:#D5E0F2;
  --rule-soft:#E8EEF8;
  --shu:#D2412F;
  --marker:#FFF1C2;
  --line:#E3E8F0;
  --radius:10px;
  --wrap:1080px;
  --font-body:"BIZ UDPGothic","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --font-head:"Zen Maru Gothic","BIZ UDPGothic","Hiragino Maru Gothic ProN",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:120px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.9;
  font-feature-settings:"palt" 0;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--ledger); text-underline-offset:3px; }
a:hover{ color:var(--ledger-dark); }
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.45;
  margin:0;
  letter-spacing:.02em;
}
p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--ledger); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .wrap{ padding:0 32px; } }

.skip{
  position:absolute; left:-9999px; top:8px;
  background:var(--ink); color:#fff; padding:8px 14px; border-radius:6px; z-index:100;
}
.skip:focus{ left:12px; color:#fff; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; flex-wrap:wrap; align-items:center;
  column-gap:28px; row-gap:0;
  min-height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none;
  font-weight:700; font-size:15px; letter-spacing:.16em;
}
.brand:hover{ color:var(--ink); }
.brand img{ width:28px; height:28px; object-fit:contain; }
.nav{ display:flex; gap:28px; margin-left:auto; }
.nav a{
  color:var(--ink-soft); text-decoration:none; font-size:15px;
  padding:6px 0; border-bottom:2px solid transparent; white-space:nowrap;
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ledger); }
.header-cta .label-short{ display:none; }

@media (max-width:767px){
  .header-inner{ min-height:56px; padding-top:8px; }
  .header-cta{ margin-left:auto; }
  .header-cta .label-long{ display:none; }
  .header-cta .label-short{ display:inline; }
  .nav{
    order:3; width:100%; margin-left:0;
    gap:22px; overflow-x:auto; padding:2px 0 6px;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav a{ font-size:14px; }
}

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:12px 26px;
  border-radius:var(--radius); border:2px solid transparent;
  font-family:inherit; font-size:16px; font-weight:700; line-height:1.4;
  text-decoration:none; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn-primary{ background:var(--ledger); color:#fff; }
.btn-primary:hover{ background:var(--ledger-dark); color:#fff; }
.btn-secondary{ background:#fff; color:var(--ledger); border-color:var(--rule); }
.btn-secondary:hover{ border-color:var(--ledger); color:var(--ledger-dark); }
.btn-sm{ min-height:40px; padding:8px 16px; font-size:14px; }
.btn-light{ background:#fff; color:var(--ledger); }
.btn-light:hover{ background:var(--paper-2); color:var(--ledger-dark); }
.btn[disabled]{ opacity:.6; cursor:wait; }

.text-link{ font-weight:700; text-decoration:underline; text-decoration-thickness:1px; }

/* ---------- セクション共通 ---------- */
.section{ padding:72px 0; }
.section.tint{ background:var(--paper-2); }
@media (min-width:768px){ .section{ padding:96px 0; } }

.section-title{ font-size:clamp(22px, 3.2vw, 30px); }
.section-lead{ margin-top:16px; color:var(--ink-soft); max-width:40em; }

/* ---------- トップ：ヒーロー ---------- */
.hero{ padding:48px 0 64px; border-bottom:1px solid var(--line); overflow:hidden; }
.hero-grid{ display:grid; gap:44px; align-items:center; }
@media (min-width:900px){
  .hero{ padding:80px 0 96px; }
  .hero-grid{ grid-template-columns:1.05fr 1fr; gap:56px; }
}
.hero h1{ font-size:clamp(29px, 4.4vw, 46px); line-height:1.4; letter-spacing:.03em; }
.hero h1 .line{ display:inline-block; }
.hero-lead{ margin-top:22px; color:var(--ink-soft); font-size:clamp(15px, 1.6vw, 17px); max-width:30em; }
.hero-actions{ margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
@media (max-width:480px){ .hero-actions .btn{ width:100%; } }

/* 領収書 → 帳簿 のイラスト */
.demo{ position:relative; padding-top:8px; }
.receipt{
  position:relative; z-index:2;
  width:min(250px, 72%);
  margin-left:4px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
  padding:16px 18px 18px;
  box-shadow:0 10px 24px rgba(27,39,64,.10);
  transform:rotate(-3deg);
  font-size:12.5px; line-height:1.7; color:var(--ink-soft);
}
.receipt::after{ /* ミシン目 */
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background:radial-gradient(circle at 5px -1px, transparent 4px, #fff 4.5px) 0 0/10px 6px repeat-x;
}
.receipt-title{
  text-align:center; color:var(--ink); font-weight:700; font-size:15px;
  letter-spacing:.6em; padding-left:.6em;
  border-bottom:1px solid var(--ink); padding-bottom:4px; margin-bottom:8px;
}
.receipt dl div{ display:flex; gap:10px; }
.receipt dt{ flex:0 0 2.6em; color:#8590A6; }
.receipt dd{ color:var(--ink); }
.receipt-amount{
  margin:8px 0 6px; padding:4px 0;
  border-top:1px dashed var(--rule); border-bottom:1px dashed var(--rule);
  text-align:right; font-size:20px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.receipt-from{ text-align:right; }

.demo-arrow{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:10px;
  margin:6px 0 6px 40px;
  color:var(--ledger); font-size:13px; font-weight:700;
}
.demo-arrow svg{ width:22px; height:40px; flex:none; }

.ledger{
  position:relative;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:6px;
  box-shadow:0 2px 0 var(--rule-soft);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}
.ledger::before{ /* 帳簿の赤い縦の二重線 */
  content:""; position:absolute; top:0; bottom:0; left:58px;
  border-left:1px solid rgba(210,65,47,.45);
  box-shadow:3px 0 0 rgba(210,65,47,.45);
  width:0; pointer-events:none;
}
.ledger-caption{
  padding:10px 14px; font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--rule);
  font-size:13px; letter-spacing:.1em;
}
.ledger-row{
  display:grid;
  grid-template-columns:58px 98px 1fr 64px;
  align-items:center;
  min-height:38px;
  border-bottom:1px solid var(--rule-soft);
}
.ledger-row > span{ padding:0 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ledger-row > span:nth-child(4){ text-align:right; padding-right:14px; }
.ledger-row.head{ color:#8590A6; font-size:12px; min-height:32px; background:var(--paper-2); }
.ledger-row.past{ color:var(--ink-soft); }
.ledger-row.new{ color:var(--ink); font-weight:700; background:var(--marker); }
.ledger-row.blank{ min-height:38px; border-bottom:1px solid var(--rule-soft); }
.ledger-row.blank:last-child{ border-bottom:0; }

.ledger-row.new{ position:relative; }
.stamp{
  position:absolute; right:76px; top:-9px;
  font-style:normal;
  width:56px; height:56px;
  display:grid; place-items:center;
  border:2.5px solid var(--shu); border-radius:50%;
  color:var(--shu); font-family:var(--font-head); font-weight:700;
  font-size:13px; line-height:1.2; text-align:center;
  background:rgba(255,255,255,.55);
  transform:rotate(-12deg);
  opacity:.92;
}
.stamp b{ display:block; font-size:19px; }

@media (prefers-reduced-motion:no-preference){
  .ledger-row.new{ animation:row-in .5s ease-out 1s both, marker-in .6s ease-out 1s both; }
  .demo-arrow{ animation:fade-in .5s ease-out .5s both; }
  .stamp{ animation:stamp-in .35s cubic-bezier(.3,1.6,.5,1) 1.7s both; }
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes row-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes marker-in{ from{ background:transparent; } to{ background:var(--marker); } }
@keyframes stamp-in{
  from{ opacity:0; transform:rotate(-12deg) scale(1.7); }
  to{ opacity:.92; transform:rotate(-12deg) scale(1); }
}

@media (max-width:420px){
  .ledger{ font-size:12px; }
  .ledger::before{ left:50px; }
  .ledger-row{ grid-template-columns:50px 86px 1fr 56px; }
  .ledger-row > span{ padding:0 7px; }
  .stamp{ width:50px; height:50px; font-size:12px; right:62px; top:-6px; }
  .stamp b{ font-size:17px; }
}

/* ---------- トップ：こんな作業 ---------- */
.two-col{ display:grid; gap:32px; }
@media (min-width:900px){ .two-col{ grid-template-columns:1fr 1.1fr; gap:64px; align-items:start; } }

.check-list{ border-top:1px solid var(--rule); }
.check-list li{
  position:relative;
  padding:16px 0 16px 40px;
  border-bottom:1px solid var(--rule);
}
.check-list li::before{
  content:""; position:absolute; left:4px; top:21px;
  width:18px; height:18px; border:2px solid var(--ledger); border-radius:4px;
}
.check-note{ margin-top:24px; font-weight:700; }

/* ---------- トップ：2つのサービス ---------- */
.service-pair{ display:grid; gap:20px; margin-top:40px; }
@media (min-width:768px){ .service-pair{ grid-template-columns:1fr 1fr; gap:28px; } }
.service-block{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--ledger);
  border-radius:0 0 var(--radius) var(--radius);
  padding:28px 24px 26px;
  display:flex; flex-direction:column;
}
.service-block h3{ font-size:clamp(19px, 2.2vw, 22px); }
.service-block p{ margin-top:12px; color:var(--ink-soft); }
.service-block ul{ margin-top:16px; }
.service-block li{ padding-left:1.2em; position:relative; }
.service-block li::before{ content:"・"; position:absolute; left:0; color:var(--ledger); }
.service-block .price-hint{
  margin-top:auto; padding-top:20px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.price-hint strong{ font-size:20px; font-variant-numeric:tabular-nums; }
.price-hint small{ color:var(--ink-soft); font-size:13px; }

/* ---------- 進め方（順番のあるステップ） ---------- */
.steps{ display:grid; gap:0; margin-top:40px; counter-reset:step; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4, 1fr); } }
.steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 28px 56px;
}
.steps li::before{
  content:counter(step);
  position:absolute; left:0; top:0;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ledger); color:#fff;
  font-weight:700; font-size:16px;
}
.steps li::after{ /* つなぎの線 */
  content:""; position:absolute; left:18px; top:42px; bottom:4px;
  border-left:2px dotted var(--rule);
}
.steps li:last-child::after{ display:none; }
.steps h3{ font-size:17px; padding-top:5px; }
.steps p{ margin-top:6px; color:var(--ink-soft); font-size:15px; }
@media (min-width:900px){
  .steps li{ padding:56px 22px 0 0; }
  .steps li::after{ left:44px; right:12px; top:18px; bottom:auto; border-left:0; border-top:2px dotted var(--rule); }
}

/* ---------- 事例と料金の入口 ---------- */
.teaser-grid{ display:grid; gap:40px; }
@media (min-width:900px){ .teaser-grid{ grid-template-columns:1.2fr 1fr; gap:64px; } }
.teaser h2{ font-size:clamp(20px, 2.6vw, 24px); }
.teaser p{ margin-top:12px; color:var(--ink-soft); }
.teaser .text-link{ display:inline-block; margin-top:18px; }
.flow-mini{ display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:18px; align-items:center; }
.flow-mini li{
  position:relative;
  background:#fff; border:1px solid var(--rule); border-radius:6px;
  padding:6px 12px; font-size:14px; font-weight:700;
}
.flow-mini li + li::before{
  content:""; position:absolute; left:-17px; top:50%;
  width:7px; height:7px; margin-top:-4px;
  border-top:2px solid var(--ledger); border-right:2px solid var(--ledger);
  transform:rotate(45deg);
}

.price-mini{ margin-top:18px; border-top:1px solid var(--rule); }
.price-mini div{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--rule);
}
.price-mini dd{ font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- 相談の呼びかけ帯 ---------- */
.cta-band{ background:var(--ledger); color:#fff; padding:64px 0; }
.cta-band h2{ font-size:clamp(21px, 3vw, 28px); }
.cta-band p{ margin-top:12px; color:#E3EBFA; max-width:34em; }
.cta-band .btn{ margin-top:28px; }
@media (min-width:900px){
  .cta-inner{ display:flex; justify-content:space-between; align-items:center; gap:40px; }
  .cta-band .btn{ margin-top:0; flex:none; }
}

/* ---------- 下層ページの見出し ---------- */
.page-head{ background:var(--paper-2); border-bottom:1px solid var(--line); padding:48px 0 44px; }
.page-head h1{ font-size:clamp(26px, 4vw, 36px); }
.page-head p{ margin-top:14px; color:var(--ink-soft); max-width:38em; }
@media (min-width:768px){ .page-head{ padding:64px 0 56px; } }

/* ---------- サービス詳細 ---------- */
.service-detail{ display:grid; gap:28px; }
.service-detail + .service-detail{ margin-top:72px; padding-top:72px; border-top:1px solid var(--line); }
@media (min-width:900px){ .service-detail{ grid-template-columns:1fr 1.15fr; gap:64px; } }
.service-detail h2{ font-size:clamp(22px, 3vw, 28px); }
.service-detail .kind{ display:block; color:var(--ledger); font-size:14px; font-weight:700; margin-bottom:6px; letter-spacing:.04em; }
.service-detail .desc{ margin-top:16px; color:var(--ink-soft); }
.service-detail .price-hint{ margin-top:24px; display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.detail-box{ background:var(--paper-2); border-radius:var(--radius); padding:24px 22px; }
.detail-box h3{ font-size:16px; }
.detail-box ul{ margin-top:10px; }
.detail-box li{ padding:9px 0 9px 1.4em; border-bottom:1px solid var(--rule); position:relative; }
.detail-box li:last-child{ border-bottom:0; }
.detail-box li::before{ content:"・"; position:absolute; left:0; color:var(--ledger); font-weight:700; }
.detail-box h3 + ul + h3{ margin-top:22px; }
.detail-box p{ margin-top:8px; color:var(--ink-soft); }

.principles{ display:grid; gap:28px; margin-top:36px; }
@media (min-width:900px){ .principles{ grid-template-columns:repeat(3, 1fr); gap:40px; } }
.principles h3{ font-size:18px; padding-bottom:10px; border-bottom:2px solid var(--ledger); display:inline-block; }
.principles p{ margin-top:12px; color:var(--ink-soft); }

.side-note{
  margin-top:72px; padding:28px 24px;
  border:1px solid var(--rule); border-radius:var(--radius);
  display:grid; gap:12px;
}
@media (min-width:900px){ .side-note{ grid-template-columns:auto 1fr; gap:40px; align-items:center; padding:32px 36px; } }
.side-note h2{ font-size:20px; }
.side-note p{ color:var(--ink-soft); }

/* ---------- 料金表（帳簿風） ---------- */
.price-table{
  width:100%; border-collapse:collapse; margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.table-note{ font-size:14px; color:var(--ink-soft); margin-bottom:10px; }
.price-table th, .price-table td{ text-align:left; vertical-align:top; padding:18px 16px; border-bottom:1px solid var(--rule); }
.price-table thead th{
  font-size:13px; color:#6B7690; font-weight:400;
  background:var(--paper-2); border-bottom:2px solid var(--rule);
  padding-top:10px; padding-bottom:10px;
}
.price-table tbody th{ font-family:var(--font-head); font-size:17px; white-space:nowrap; }
.price-table td.amount{ text-align:right; white-space:nowrap; font-weight:700; font-size:18px; }
.price-table td.amount small{ font-size:13px; font-weight:400; color:var(--ink-soft); }
.price-table td.desc{ color:var(--ink-soft); }
.price-table tr.free td.amount{ color:var(--ledger); }
.price-table thead th:last-child{ text-align:right; }

@media (max-width:700px){
  .price-table thead{ display:none; }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td{ display:block; width:100%; }
  .price-table tr{ display:grid; grid-template-columns:1fr auto; padding:16px 0; border-bottom:1px solid var(--rule); }
  .price-table th, .price-table td{ border:0; padding:0; }
  .price-table td.amount{ grid-column:2; grid-row:1; font-size:17px; }
  .price-table td.desc{ grid-column:1 / -1; margin-top:6px; font-size:15px; }
  .price-table tbody th{ white-space:normal; }
}

.notes{ margin-top:24px; color:var(--ink-soft); font-size:14px; }
.notes li{ padding-left:1.2em; position:relative; }
.notes li::before{ content:"※"; position:absolute; left:0; }

.faq{ margin-top:32px; border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:18px 40px 18px 0; position:relative;
  font-weight:700; font-size:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:8px; top:50%;
  width:10px; height:10px; margin-top:-7px;
  border-right:2px solid var(--ledger); border-bottom:2px solid var(--ledger);
  transform:rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq details p{ padding:0 0 20px; color:var(--ink-soft); }

/* ---------- 導入事例 ---------- */
.case{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.case-head{ padding:28px 24px; border-bottom:1px solid var(--line); }
@media (min-width:768px){ .case-head{ padding:36px 40px; } }
.case-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.case-meta span{
  font-size:13px; padding:3px 12px; border-radius:999px;
  background:var(--paper-2); color:var(--ink-soft);
}
.case-head h2{ margin-top:14px; font-size:clamp(21px, 3vw, 27px); }
.case-head p{ margin-top:12px; color:var(--ink-soft); }
.case-body{ padding:28px 24px 32px; background:var(--paper-2); }
@media (min-width:768px){ .case-body{ padding:36px 40px 40px; } }
.case-body h3{ font-size:17px; }

.case-flow{ display:grid; gap:14px; margin-top:20px; counter-reset:cf; }
@media (min-width:900px){ .case-flow{ grid-template-columns:repeat(3, 1fr); gap:36px; } }
.case-flow li{
  counter-increment:cf;
  position:relative;
  background:#fff; border:1px solid var(--rule); border-radius:var(--radius);
  padding:20px 20px 22px;
}
.case-flow li::before{
  content:counter(cf);
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--ledger); color:#fff; font-weight:700; font-size:14px;
  margin-bottom:10px;
}
.case-flow h4{ font-size:17px; }
.case-flow p{ margin-top:6px; color:var(--ink-soft); font-size:15px; }
@media (min-width:900px){
  .case-flow li + li::after{
    content:""; position:absolute; left:-27px; top:50%;
    width:16px; height:16px; margin-top:-8px;
    border-top:2px solid var(--ledger); border-right:2px solid var(--ledger);
    transform:rotate(45deg);
  }
}
.case-status{ margin-top:24px; font-weight:700; }

/* ---------- お問い合わせ ---------- */
.contact-grid{ display:grid; gap:48px; }
@media (min-width:900px){ .contact-grid{ grid-template-columns:1.4fr 1fr; gap:64px; } }

.form{ display:grid; gap:22px; }
.field{ display:grid; gap:8px; }
.field label, .field legend{ font-weight:700; font-size:15px; }
.req{ display:inline-block; margin-left:8px; font-size:12px; font-weight:700; color:var(--shu); }
.opt{ display:inline-block; margin-left:8px; font-size:12px; color:var(--ink-soft); font-weight:400; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea{
  width:100%;
  font:inherit; font-size:16px; color:var(--ink);
  background:#fff;
  border:1.5px solid #C9D3E3; border-radius:8px;
  padding:12px 14px;
  transition:border-color .2s ease;
}
.field textarea{ min-height:160px; resize:vertical; line-height:1.8; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--ledger); box-shadow:0 0 0 3px rgba(46,99,201,.18); }
.field input::placeholder, .field textarea::placeholder{ color:#98A2B6; }
fieldset.field{ border:0; padding:0; margin:0; min-width:0; }
fieldset.field legend{ padding:0; margin-bottom:8px; }
.choices{ display:flex; flex-wrap:wrap; gap:10px; }
.choices label{
  display:flex; align-items:center; gap:8px;
  font-weight:400; font-size:15px;
  border:1.5px solid #C9D3E3; border-radius:8px;
  padding:9px 14px; cursor:pointer; background:#fff;
}
.choices input{ accent-color:var(--ledger); width:18px; height:18px; margin:0; }
.choices label:has(input:checked){ border-color:var(--ledger); background:#EEF3FC; }
.form-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.form-status{ font-size:14px; color:var(--ink-soft); }
.form-status.ok{ color:#1F7A4D; font-weight:700; }
.form-status.err{ color:var(--shu); font-weight:700; }

.contact-side h2{ font-size:18px; }
.contact-side section + section{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.contact-side p{ margin-top:10px; color:var(--ink-soft); }
.contact-side .mail{ display:inline-block; margin-top:10px; font-size:18px; font-weight:700; word-break:break-all; }
.contact-steps{ margin-top:12px; counter-reset:cs; }
.contact-steps li{ counter-increment:cs; position:relative; padding:6px 0 6px 34px; color:var(--ink-soft); }
.contact-steps li::before{
  content:counter(cs); position:absolute; left:0; top:9px;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid var(--ledger); color:var(--ledger);
  display:grid; place-items:center; font-size:12px; font-weight:700; line-height:1;
}

/* ---------- 404 ---------- */
.notfound{ padding:96px 0 120px; }
.notfound h1{ font-size:clamp(24px, 4vw, 34px); }
.notfound p{ margin-top:14px; color:var(--ink-soft); }
.notfound .btn{ margin-top:28px; }

/* ---------- フッター ---------- */
.site-footer{ border-top:1px solid var(--line); padding:44px 0 28px; font-size:14px; }
.footer-inner{ display:grid; gap:24px; }
@media (min-width:768px){ .footer-inner{ grid-template-columns:auto 1fr; align-items:start; gap:48px; } }
.footer-company{ color:var(--ink-soft); margin-top:8px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:10px 28px; }
@media (min-width:768px){ .footer-nav{ justify-content:flex-end; } }
.footer-nav a{ color:var(--ink-soft); text-decoration:none; }
.footer-nav a:hover{ color:var(--ink); text-decoration:underline; }
.copyright{ margin-top:32px; color:#7C869B; font-size:12px; }